feature/FOUR-16743 New design of the tasks table in the mobile view

resources/js/Mobile/Card.vue

@@ -22,13 +22,7 @@
             <div class="card-divider col-11" />
           </b-row>
           <div class="mt-3 mb-3">
-            <template v-if="type === 'tasks'">
-              <b-link href="">
-                #{{ item.process_request.id }}
-                {{ item.process.name }}
-              </b-link>
-            </template>
-            <template v-if="type === 'requests'">
+            <template>
               <template v-for="(row, index) in fields">
                 <div
                   :key="index"
@@ -47,16 +41,21 @@
             <img
               src="/img/smartinbox-images/open-case.svg"
               alt="case_number"
-            />
+            >
             <span class="footer-case-number">
-              #{{ item.case_number }}
+              #{{ caseNumber }}
             </span>
           </b-col>
           <b-col
-            v-if="type === 'requests'"
-            cols="4"
+            cols="8"
             class="align-left"
           >
+            <span
+              v-if="item.draft && item.status !== 'CLOSED' && type === 'tasks'"
+              class="footer-status badge-draft"
+            >
+              {{ $t('Draft') }}
+            </span>
             <b-badge
               class="footer-status"
               :style="colorStatus"
@@ -119,25 +118,39 @@ export default {
       formatItem: [],
     };
   },
+  computed: {
+    caseNumber() {
+      if (this.type === "requests") {
+        return this.item.case_number;
+      }
+      if (this.type === "tasks") {
+        return this.item.process_request.id;
+      }
+      return null;
+    },
+  },
   mounted() {
     this.formatItem = cloneDeep(this.item);
     window.addEventListener("resize", () => {
-      console.log("resize");
-      this.splitText(this.sanitize(this.item.case_title_formatted));
+      if (this.type === "requests") {
+        this.splitText(this.sanitize(this.item.case_title_formatted));
+      } else if (this.type === "tasks") {
+        this.splitText(this.sanitize(this.item.process_request.case_title_formatted));
+      }
     });
     if (this.type === "tasks") {
       this.splitText(this.sanitize(this.item.process_request.case_title_formatted));
     } else if (this.type === "requests") {
       this.splitText(this.sanitize(this.item.case_title_formatted));
-      this.fields.forEach((row) => {
-        if (row.field === "tasks") {
-          this.formatItem[row.field] = this.formatActiveTasks(this.formatItem.active_tasks);
-        }
-        if (row.format && row.format === "dateTime") {
-          this.formatItem[row.field] = this.formatDate(this.formatItem[row.field]);
-        }
-      });
     }
+    this.fields.forEach((row) => {
+      if (row.field === "tasks") {
+        this.formatItem[row.field] = this.formatActiveTasks(this.formatItem.active_tasks);
+      }
+      if (row.format && row.format === "dateTime") {
+        this.formatItem[row.field] = this.formatDate(this.formatItem[row.field]);
+      }
+    });
   },
   beforeDestroy() {
     window.removeEventListener("resize");
@@ -146,39 +159,30 @@ export default {
     /**
      * Show info in the badge
      */
-    showBadge(item) {
-      if (this.type === "tasks") {
-        if (item.due_notified === 1) {
-          this.colorStatus = "background-color: #FFF5DB";
-          this.taskStatus = "Due: ";
-          return this.taskStatus + this.formatDate(item.due_at);
-        }
-        this.taskStatus = "Done: ";
-        this.colorStatus = "background-color: #B8F2DF";
-        return this.taskStatus + this.formatDate(item.created_at);
-      }
-      switch (this.item.status) {
-        case "DRAFT":
-          this.colorStatus = "background-color: #F9E8C3";
-          this.requestBadge = "Draft";
-          break;
-        case "CANCELED":
-          this.colorStatus = "background-color: #FFC7C7";
-          this.requestBadge = "Canceled";
-          break;
-        case "COMPLETED":
-          this.colorStatus = "background-color: #B8DCF7";
-          this.requestBadge = "Completed";
-          break;
-        case "ERROR":
-          this.colorStatus = "background-color: #FFC7C7";
-          this.requestBadge = "Error";
-          break;
-        default:
-          this.colorStatus = "background-color: #C8F0CF";
-          this.requestBadge = "In Progress";
-          break;
+    showBadge() {
+      const statusMap = {
+        "DRAFT": { color: "#F9E8C3", label: this.$t("Draft") },
+        "CANCELED": { color: "#FFC7C7", label: this.$t("Canceled") },
+        "COMPLETED": { color: "#B8DCF7", label: this.$t("Completed") },
+        "ERROR": { color: "#FFC7C7", label: this.$t("Error") },
+        "ACTIVE": {
+          "overdue": { color: "#FFC7C7", label: this.$t("Overdue") },
+          "open": { color: "#C8F0CF", label: this.$t("In Progress") },
+          "default": { color: "#C8F0CF", label: this.$t("In Progress") }
+        },
+        "default": { color: "#C8F0CF", label: this.$t("In Progress") }
+      };
+
+      if (this.item.status === "ACTIVE") {
+        const advanceStatus = this.item.advanceStatus ? statusMap["ACTIVE"][this.item.advanceStatus] : statusMap["ACTIVE"]["default"];
+        this.colorStatus = `background-color: ${advanceStatus.color}`;
+        this.requestBadge = advanceStatus.label;
+      } else {
+        const currentStatus = statusMap[this.item.status] || statusMap["default"];
+        this.colorStatus = `background-color: ${currentStatus.color}`;
+        this.requestBadge = currentStatus.label;
       }
+
       return this.requestBadge;
     },
     /**
@@ -323,4 +327,10 @@ a {
   text-overflow: ellipsis;
   padding-bottom: 10px;
 }
+.badge-draft {
+  background-color: #F9E8C3;
+  margin-right: 3px;
+  line-height: 1;
+  display: inline-block;
+}
 </style>

resources/js/Mobile/FilterMobile.vue

@@ -83,28 +83,32 @@
           class="dropdown"
         >
           <button
-            id="tasksDropdown"
-            class="btn btn-secondary dropdown-toggle"
+            id="requestsDropdown"
+            class="btn dropdown-toggle dropdown-requests-style"
             type="button"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false"
           >
-            <i class="fas fa-list" />
-            <i class="fas fa-caret-down" />
+            <img
+              src="/img/sort-down-icon.svg"
+              alt="sort-down"
+            >
           </button>
           <div
-            class="dropdown-menu"
+            class="dropdown-menu mobile-dropdown-menu"
             aria-labelledby="tasksDropdown"
           >
             <a
               class="dropdown-item"
+              :class="{ 'dropdown-item-selected': selectedOrderBy === 'due_at' }"
               @click="selectOption('due_at', 'orderBy')"
             >
               {{ $t('By Due Date') }}
             </a>
             <a
               class="dropdown-item"
+              :class="{ 'dropdown-item-selected': selectedOrderBy === 'created_at' }"
               @click="selectOption('created_at', 'orderBy')"
             >
               {{ $t('By Creation Date') }}
@@ -155,6 +159,7 @@ export default {
       searchCriteria: "",
       selectedOptionStatus: "In Progress",
       selectedIconStatus: "",
+      selectedOrderBy: "",
       selectedIconFilter: "fas fa-user",
       apiData: [],
       showInput: false,
@@ -213,6 +218,7 @@ export default {
         return this.buildPmql();
       }
       if (controlName === "orderBy") {
+        this.selectedOrderBy = option;
         return `order_by=${option}`;
       }
       if (controlName === "search") {
@@ -312,7 +318,7 @@ export default {
     border: none;
   }
   .dropdown-status-style {
-    background-color: white !important;
+    background-color: transparent !important;
     color: #4C545C !important;
     border: none;
     text-transform: none;

resources/js/tasks/components/MobileTasks.vue

@@ -4,6 +4,7 @@
       <card
         :key="index"
         :item="item"
+        :fields="fields"
         :show-cards="true"
         type="tasks"
       />
@@ -44,7 +45,22 @@ export default {
           direction: "DESC",
         },
       ],
-      fields: [],
+      fields: [
+        {
+          label: "Task",
+          field: "element_name",
+        },
+        {
+          label: "Due",
+          field: "due_at",
+          format: "dateTime",
+        },
+        {
+          label: "Completed",
+          field: "completed_at",
+          format: "dateTime",
+        },
+      ],
       previousFilter: "",
       previousPmql: "",
       endpoint: "tasks",

resources/views/requests/mobile.blade.php

@@ -27,5 +27,9 @@
 @endsection
 
 @section('css')
-
+<style>
+  #requests-mobile {
+    background-color: #F7F9FB;
+  }
+</style>
 @endsection

resources/views/tasks/mobile.blade.php

@@ -25,5 +25,9 @@
 @endsection
 
 @section('css')
-
+<style>
+  #tasks-mobile {
+    background-color: #F7F9FB;
+  }
+</style>
 @endsection