PMCORE-3922: Added styles to unread cases

Fixed observations

PM Blue color added

resources/assets/js/components/dataViews/vueCardView/VueCard.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="pm-vue-card">
-    <div class="card pm-vue-card-inside" style="width: 20rem" @dblclick="dblClick">
+    <div
+      :class="item.INIT_DATE ? 'pm-case-unread' : 'pm-case-read'"
+      class="card pm-vue-card-inside"
+      style="width: 20rem"
+      @dblclick="dblClick"
+    >
       <div class="card-view-body">
         <slot> </slot>
       </div>
@@ -49,4 +54,24 @@ export default {
   min-height: 1px;
   padding: 1.25rem;
 }
+.pm-case-read {
+  border-left: 15px solid transparent;
+  border-radius: 0.25rem;
+  border-width: 1px 1px 1px 15px;
+  background-image:
+    linear-gradient(white, white),
+    linear-gradient(to bottom, #70C6F3, #0099DC);
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
+.pm-case-unread {
+  border-left: 15px solid transparent;
+  border-radius: 0.25rem;
+  border-width: 1px 1px 1px 15px;
+  background-image: 
+    linear-gradient(white, white),
+    linear-gradient(to bottom, rgba(204,204,204,1),rgba(135,135,135,1));
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
 </style>

resources/assets/js/components/dataViews/vueListView/VueList.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="pm-vue-list">
-    <div class="card pm-vue-list-inside" @dblclick.prevent="dblClick">
+    <div
+      :class="item.INIT_DATE ? 'pm-case-unread' : 'pm-case-read'"
+      class="card pm-vue-list-inside"
+      @dblclick.prevent="dblClick"
+    >
       <div class="list-body">
         <slot> </slot>
       </div>
@@ -48,4 +52,24 @@ export default {
   min-height: 1px;
   padding: 1.25rem;
 }
+.pm-case-read {
+  border-left: 15px solid transparent;
+  border-radius: 0.25rem;
+  border-width: 1px 1px 1px 15px;
+  background-image:
+    linear-gradient(white, white),
+    linear-gradient(to bottom, #70C6F3, #0099DC);
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
+.pm-case-unread {
+  border-left: 15px solid transparent;
+  border-radius: 0.25rem;
+  border-width: 1px 1px 1px 15px;
+  background-image:
+    linear-gradient(white, white),
+    linear-gradient(to bottom, rgba(204,204,204,1),rgba(135,135,135,1));
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
 </style>

resources/assets/js/home/CustomCaseList/CustomCaseList.vue

@@ -44,42 +44,90 @@
             name="todo"
         >
             <div slot="detail" slot-scope="props">
-                <div class="btn-default" @click="openCaseDetail(props.row)">
+                <div
+                    class="btn-default"
+                    :class="props.row.INIT_DATE ? '' : 'pm-main-text-color '"
+                    @click="openCaseDetail(props.row)"
+                >
                     <i class="fas fa-info-circle"></i>
                 </div>
             </div>
 
-            <div slot="case_number" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="case_number"
+                slot-scope="props"
+            >
                 {{ props.row.CASE_NUMBER }}
             </div>
-            <div slot="case_title" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="case_title"
+                slot-scope="props"
+            >
                 {{ props.row.THREAD_TITLE }}
             </div>
-            <div slot="process_category" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="process_category"
+                slot-scope="props"
+            >
                 {{ props.row.PROCESS_CATEGORY }}
             </div>
-            <div slot="process_name" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="process_name"
+                slot-scope="props"
+            >
                 {{ props.row.PROCESS_NAME }}
             </div>
-            <div slot="task" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="task"
+                slot-scope="props"
+            >
                 <TaskCell :data="props.row.TASK" />
             </div>
-            <div slot="send_by" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="send_by"
+                slot-scope="props"
+            >
                 <CurrentUserCell :data="props.row.USER_DATA" />
             </div>
-            <div slot="current_user" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="current_user"
+                slot-scope="props"
+            >
                 {{ props.row.USERNAME_DISPLAY_FORMAT }}
             </div>
-            <div slot="due_date" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="due_date"
+                slot-scope="props"
+            >
                 {{ props.row.DUE_DATE }}
             </div>
-            <div slot="delegation_date" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="delegation_date"
+                slot-scope="props"
+            >
                 {{ props.row.DELEGATION_DATE }}
             </div>
-            <div slot="priority" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="priority"
+                slot-scope="props"
+            >
                 {{ props.row.PRIORITY }}
             </div>
-            <div slot="actions" slot-scope="props">
+            <div
+                :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+                slot="actions"
+                slot-scope="props"
+            >
                 <div @mouseover="updateDataEllipsis(props.row)">
                     <ellipsis
                         v-if="dataEllipsis"
@@ -104,6 +152,7 @@
                     <b-col sm="12">
                         <div
                             class="v-pm-card-info"
+                            :class="props.row.INIT_DATE ? '' : 'pm-main-text-color '"
                             @click="openCaseDetail(props.item)"
                         >
                             <i class="fas fa-info-circle"></i>
@@ -120,7 +169,7 @@
                 </b-row>
             </b-col>
             <template v-for="column in cardColumns" :slot="column" slot-scope="props" class="v-card-text">
-                <div :key="column">
+                <div :class="props.item.INIT_DATE ? '' : 'font-weight-bold'" :key="column">
                     <span class="v-card-text-dark">
                         {{ getCustomHeading(column, props) }} :
                     </span>
@@ -165,7 +214,10 @@
         <div slot="actions" slot-scope="props">
             <b-row>
             <b-col sm="12">
-                <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+                <div
+                    class="v-pm-card-info"
+                    :class="props.item.INIT_DATE ? '' : 'pm-main-text-color'"
+                    @click="openCaseDetail(props.item)">
                 <i class="fas fa-info-circle"></i>
                 </div>
             </b-col>
@@ -177,7 +229,7 @@
             </b-row>
         </div>
             <template v-for="column in cardColumns" :slot="column" slot-scope="props" class="v-card-text">
-                <div :key="column">
+                <div :class="props.item.INIT_DATE ? '' : 'font-weight-bold'" :key="column">
                     <span class="v-card-text-dark">
                         {{ getCustomHeading(column, props) }} :
                     </span>
@@ -911,6 +963,7 @@ export default {
                         }),
                         DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
                         DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
+                        INIT_DATE: v.DEL_INIT_DATE,
                         PRIORITY: v.DEL_PRIORITY_LABEL,
                         DEL_INDEX: v.DEL_INDEX,
                         APP_UID: v.APP_UID,
@@ -968,6 +1021,7 @@ export default {
                 DEL_INDEX: item.DEL_INDEX,
                 PRO_UID: item.PRO_UID,
                 TAS_UID: item.TAS_UID,
+                INIT_DATE: item.INIT_DATE,
                 ACTION: "todo",
             });
             this.$emit("onUpdatePage", "XCase");
@@ -989,6 +1043,7 @@ export default {
                             PRO_UID: item.PRO_UID,
                             TAS_UID: item.TAS_UID,
                             APP_NUMBER: item.CASE_NUMBER,
+                            INIT_DATE: item.INIT_DATE,
                             ACTION: "todo",
                         });
                         that.$emit("onUpdatePage", "case-detail");

resources/assets/js/home/Draft/Draft.vue

@@ -41,27 +41,61 @@
       name="draft"
     >
       <div slot="detail" slot-scope="props">
-        <div class="btn-default" @click="openCaseDetail(props.row)">
+        <div
+          class="btn-default"
+          :class="props.row.INIT_DATE ? '' : 'pm-main-text-color '"
+          @click="openCaseDetail(props.row)"
+        >
           <i class="fas fa-info-circle"></i>
         </div>
       </div>
-      <div slot="case_number" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="case_number"
+        slot-scope="props"
+      >
         {{ props.row.CASE_NUMBER }}
       </div>
-      <div slot="thread_title" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="thread_title"
+        slot-scope="props"
+      >
         {{ props.row.THREAD_TITLE }}
       </div>
-      <div slot="process_category" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="process_category"
+        slot-scope="props"
+      >
         {{ props.row.PROCESS_CATEGORY }}
       </div>
-      <div slot="process_name" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="process_name"
+        slot-scope="props"
+      >
         {{ props.row.PROCESS_NAME }}
       </div>
-      <div slot="task" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="task"
+        slot-scope="props"
+      >
         <TaskCell :data="props.row.TASK" />
       </div>
-      <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
-      <div slot="actions" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="priority"
+        slot-scope="props"
+      >
+        {{ props.row.PRIORITY }}
+      </div>
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="actions"
+        slot-scope="props"
+      >
         <div @mouseover="updateDataEllipsis(props.row)">
           <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
@@ -75,7 +109,11 @@
       <div slot="actions" slot-scope="props">
         <b-row>
           <b-col sm="12">
-            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+            <div
+              class="v-pm-card-info"
+              :class="props.item.INIT_DATE ? '' : 'pm-main-text-color'"
+              @click="openCaseDetail(props.item)"
+            >
               <i class="fas fa-info-circle"></i>
             </div>
           </b-col>
@@ -87,63 +125,108 @@
         </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-highlight"
-          >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-highlight"
+        >
+          {{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
         >
       </div>
       <div slot="thread_title" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           {{ props["item"]["THREAD_TITLE"] }}
         </span>
       </div>
       <div slot="process_category" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_CATEGORY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_CATEGORY"] }}
         </span>
       </div>
       <div slot="process_name" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_NAME"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DUE_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DUE_DATE"] }}
         </span>
       </div>
       <div slot="delegation_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DELEGATION_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DELEGATION_DATE"] }}
         </span>
       </div>
       <div slot="priority" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PRIORITY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PRIORITY"] }}
         </span>
       </div>
       <div slot="task" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           <TaskCell :data="props.item.TASK" />
         </span>
       </div>
@@ -157,7 +240,11 @@
       <div slot="actions" slot-scope="props">
         <b-row>
           <b-col sm="12">
-            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+            <div
+              class="v-pm-card-info"
+              :class="props.item.INIT_DATE ? '' : 'pm-main-text-color'"
+              @click="openCaseDetail(props.item)"
+            >
               <i class="fas fa-info-circle"></i>
             </div>
           </b-col>
@@ -169,63 +256,108 @@
         </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-highlight"
-          >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-highlight"
+        >
+          {{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
         >
       </div>
       <div slot="thread_title" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           {{ props["item"]["THREAD_TITLE"] }}
         </span>
       </div>
       <div slot="process_category" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_CATEGORY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_CATEGORY"] }}
         </span>
       </div>
       <div slot="process_name" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_NAME"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DUE_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DUE_DATE"] }}
         </span>
       </div>
       <div slot="delegation_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DELEGATION_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DELEGATION_DATE"] }}
         </span>
       </div>
       <div slot="priority" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PRIORITY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PRIORITY"] }}
         </span>
       </div>
       <div slot="task" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           <TaskCell :data="props.item.TASK" />
         </span>
       </div>
@@ -413,7 +545,7 @@ export default {
      */
     ProcessMaker() {
       return window.ProcessMaker;
-    },
+    }
   },
   updated() {},
   beforeCreate() {},
@@ -562,7 +694,8 @@ export default {
           PRO_UID: v.PRO_UID,
           TAS_UID: v.TAS_UID,
           DEL_INDEX: v.DEL_INDEX,
-          APP_UID: v.APP_UID
+          APP_UID: v.APP_UID,
+          INIT_DATE: v.DEL_INIT_DATE
         });
       });
       return data;
@@ -578,6 +711,7 @@ export default {
         DEL_INDEX: item.DEL_INDEX,
         PRO_UID: item.PRO_UID,
         TAS_UID: item.TAS_UID,
+        INIT_DATE: item.INIT_DATE,
         ACTION: "draft"
       });
       this.$emit("onUpdatePage", "XCase");
@@ -597,6 +731,7 @@ export default {
             PRO_UID: item.PRO_UID,
             TAS_UID: item.TAS_UID,
             APP_NUMBER: item.CASE_NUMBER,
+            INIT_DATE: item.INIT_DATE,
             ACTION: "draft"
           });
           that.$emit("onUpdatePage", "case-detail");

resources/assets/js/home/Inbox/Inbox.vue

@@ -33,42 +33,92 @@
       ref="vueTable"
       @row-click="onRowClick"
       :key="random"
-      name="todo" 
+      name="todo"
     >
       <div slot="detail" slot-scope="props">
-        <div class="btn-default" @click="openCaseDetail(props.row)">
+        <div
+          class="btn-default"
+          :class="props.row.INIT_DATE ? '' : 'pm-main-text-color '"
+          @click="openCaseDetail(props.row)"
+        >
           <i class="fas fa-info-circle"></i>
         </div>
       </div>
-      <div slot="case_number" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="case_number"
+        slot-scope="props"
+      >
         {{ props.row.CASE_NUMBER }}
       </div>
-      <div slot="thread_title" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="thread_title"
+        slot-scope="props"
+      >
         {{ props.row.THREAD_TITLE }}
       </div>
-      <div slot="process_category" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="process_category"
+        slot-scope="props"
+      >
         {{ props.row.PROCESS_CATEGORY }}
       </div>
-      <div slot="process_name" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="process_name"
+        slot-scope="props"
+      >
         {{ props.row.PROCESS_NAME }}
       </div>
-      <div slot="task" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="task"
+        slot-scope="props"
+      >
         <TaskCell :data="props.row.TASK" />
       </div>
-      <div slot="send_by" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="send_by"
+        slot-scope="props"
+      >
           <CurrentUserCell :data="props.row.USER_DATA" />
       </div>
-      <div slot="current_user" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="current_user"
+        slot-scope="props"
+      >
         {{ props.row.USERNAME_DISPLAY_FORMAT }}
       </div>
-      <div slot="due_date" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="due_date"
+        slot-scope="props"
+      >
         {{ props.row.DUE_DATE }}
       </div>
-      <div slot="delegation_date" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="delegation_date"
+        slot-scope="props"
+      >
         {{ props.row.DELEGATION_DATE }}
       </div>
-      <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
-      <div slot="actions" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="priority"
+        slot-scope="props"
+      >
+        {{ props.row.PRIORITY }}
+      </div>
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="actions"
+        slot-scope="props"
+      >
         <div @mouseover="updateDataEllipsis(props.row)">
           <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
@@ -82,7 +132,11 @@
       <div slot="actions" slot-scope="props">
         <b-row>
           <b-col sm="12">
-            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+            <div
+              class="v-pm-card-info"
+              :class="props.item.INIT_DATE ? '' : 'pm-main-text-color'"
+              @click="openCaseDetail(props.item)"
+            >
               <i class="fas fa-info-circle"></i>
             </div>
           </b-col>
@@ -94,72 +148,123 @@
         </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-highlight"
-          >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-highlight"
+        >
+          {{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
         >
       </div>
       <div slot="thread_title" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           {{ props["item"]["THREAD_TITLE"] }}
         </span>
       </div>
       <div slot="process_category" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_CATEGORY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_CATEGORY"] }}
         </span>
       </div>
       <div slot="process_name" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_NAME"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DUE_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DUE_DATE"] }}
         </span>
       </div>
       <div slot="delegation_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DELEGATION_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DELEGATION_DATE"] }}
         </span>
       </div>
       <div slot="task" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           <TaskCell :data="props.item.TASK" />
         </span>
       </div>
       <div slot="priority" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PRIORITY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PRIORITY"] }}
         </span>
       </div>
       <div slot="send_by" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light">
-            <CurrentUserCell :data="props.item.USER_DATA" />
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          <CurrentUserCell :data="props.item.USER_DATA" />
         </span>
       </div>
     </VueCardView>
@@ -171,7 +276,11 @@
       <div slot="actions" slot-scope="props">
         <b-row>
           <b-col sm="12">
-            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+            <div
+              class="v-pm-card-info"
+              :class="props.item.INIT_DATE ? '' : 'pm-main-text-color'"
+              @click="openCaseDetail(props.item)"
+            >
               <i class="fas fa-info-circle"></i>
             </div>
           </b-col>
@@ -183,72 +292,123 @@
         </b-row>
       </div>
       <div ref="text" slot="case_number" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-highlight"
-          >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-highlight"
+        >
+          {{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
         >
       </div>
       <div slot="thread_title" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           {{ props["item"]["THREAD_TITLE"] }}
         </span>
       </div>
       <div slot="process_category" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_CATEGORY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_CATEGORY"] }}
         </span>
       </div>
       <div slot="process_name" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_NAME"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DUE_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DUE_DATE"] }}
         </span>
       </div>
       <div slot="delegation_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DELEGATION_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DELEGATION_DATE"] }}
         </span>
       </div>
       <div slot="priority" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PRIORITY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PRIORITY"] }}
         </span>
       </div>
       <div slot="task" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           <TaskCell :data="props.item.TASK" />
         </span>
       </div>
       <div slot="send_by" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light">
-            <CurrentUserCell :data="props.item.USER_DATA" />
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          <CurrentUserCell :data="props.item.USER_DATA" />
         </span>
       </div>
     </VueListView>
@@ -447,7 +607,7 @@ export default {
      */
     ProcessMaker() {
       return window.ProcessMaker;
-    },
+    }
   },
   updated() {},
   beforeCreate() {},
@@ -605,6 +765,7 @@ export default {
           }),
           DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
           DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
+          INIT_DATE: v.DEL_INIT_DATE,
           PRIORITY: v.DEL_PRIORITY_LABEL,
           DEL_INDEX: v.DEL_INDEX,
           APP_UID: v.APP_UID,
@@ -660,6 +821,7 @@ export default {
         DEL_INDEX: item.DEL_INDEX,
         PRO_UID: item.PRO_UID,
         TAS_UID: item.TAS_UID,
+        INIT_DATE: item.INIT_DATE,
         ACTION: "todo",
       });
       this.$emit("onUpdatePage", "XCase");
@@ -679,6 +841,7 @@ export default {
             PRO_UID: item.PRO_UID,
             TAS_UID: item.TAS_UID,
             APP_NUMBER: item.CASE_NUMBER,
+            INIT_DATE: item.INIT_DATE,
             ACTION: "todo",
           });
           that.$emit("onUpdatePage", "case-detail");

resources/assets/js/home/Paused/Paused.vue

@@ -35,39 +35,89 @@
       name="paused"
     >
       <div slot="detail" slot-scope="props">
-        <div class="btn-default" @click="openCaseDetail(props.row)">
+        <div
+          class="btn-default"
+          :class="props.row.INIT_DATE ? '' : 'pm-main-text-color '"
+          @click="openCaseDetail(props.row)"
+        >
           <i class="fas fa-info-circle"></i>
         </div>
       </div>
-      <div slot="case_number" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="case_number"
+        slot-scope="props"
+      >
         {{ props.row.CASE_NUMBER }}
       </div>
-      <div slot="thread_title" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="thread_title"
+        slot-scope="props"
+      >
         {{ props.row.THREAD_TITLE }}
       </div>
-      <div slot="process_category" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="process_category"
+        slot-scope="props"
+      >
         {{ props.row.PROCESS_CATEGORY }}
       </div>
-      <div slot="process_name" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="process_name"
+        slot-scope="props"
+      >
         {{ props.row.PROCESS_NAME }}
       </div>
-      <div slot="task" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="task"
+        slot-scope="props"
+      >
         <TaskCell :data="props.row.TASK" />
       </div>
-      <div slot="send_by" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="send_by"
+        slot-scope="props"
+      >
           <CurrentUserCell :data="props.row.USER_DATA" />
       </div>
-      <div slot="current_user" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="current_user"
+        slot-scope="props"
+      >
         {{ props.row.USERNAME_DISPLAY_FORMAT }}
       </div>
-      <div slot="due_date" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="due_date"
+        slot-scope="props"
+      >
         {{ props.row.DUE_DATE }}
       </div>
-      <div slot="delegation_date" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="delegation_date"
+        slot-scope="props"
+      >
         {{ props.row.DELEGATION_DATE }}
       </div>
-      <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
-      <div slot="actions" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="priority"
+        slot-scope="props"
+      >
+        {{ props.row.PRIORITY }}
+      </div>
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="actions"
+        slot-scope="props"
+      >
         <div @mouseover="updateDataEllipsis(props.row)">
           <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
@@ -81,7 +131,11 @@
       <div slot="actions" slot-scope="props">
         <b-row>
           <b-col sm="12">
-            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+            <div
+              class="v-pm-card-info"
+              :class="props.item.INIT_DATE ? '' : 'pm-main-text-color'"
+              @click="openCaseDetail(props.item)"
+            >
               <i class="fas fa-info-circle"></i>
             </div>
           </b-col>
@@ -93,71 +147,106 @@
         </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-highlight"
+        <span
+          class="v-card-text-highlight"
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
           >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
         >
       </div>
       <div slot="thread_title" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light">
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light">
           {{ props["item"]["THREAD_TITLE"] }}
         </span>
       </div>
       <div slot="process_category" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_CATEGORY"] }}
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_CATEGORY"] }}
         </span>
       </div>
       <div slot="process_name" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
           >{{ props["item"]["DUE_DATE"] }}
         </span>
       </div>
       <div slot="delegation_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
           >{{ props["item"]["DELEGATION_DATE"] }}
         </span>
       </div>
       <div slot="priority" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
           >{{ props["item"]["PRIORITY"] }}
         </span>
       </div>
       <div slot="task" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light">
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light">
           <TaskCell :data="props.item.TASK" />
         </span>
       </div>
       <div slot="send_by" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light">
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light">
             <CurrentUserCell :data="props.item.USER_DATA" />
         </span>
       </div>
@@ -170,7 +259,10 @@
       <div slot="actions" slot-scope="props">
         <b-row>
           <b-col sm="12">
-            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+            <div
+              class="v-pm-card-info"
+              :class="props.item.INIT_DATE ? '' : 'pm-main-text-color'"
+              @click="openCaseDetail(props.item)">
               <i class="fas fa-info-circle"></i>
             </div>
           </b-col>
@@ -182,71 +274,105 @@
         </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-highlight"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-highlight"
           >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
         >
       </div>
       <div slot="thread_title" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light">
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light">
           {{ props["item"]["THREAD_TITLE"] }}
         </span>
       </div>
       <div slot="process_category" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
           >{{ props["item"]["PROCESS_CATEGORY"] }}
         </span>
       </div>
       <div slot="process_name" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
           >{{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
           >{{ props["item"]["DUE_DATE"] }}
         </span>
       </div>
       <div slot="delegation_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
           >{{ props["item"]["DELEGATION_DATE"] }}
         </span>
       </div>
       <div slot="priority" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
           >{{ props["item"]["PRIORITY"] }}
         </span>
       </div>
       <div slot="task" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light">
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light">
           <TaskCell :data="props.item.TASK" />
         </span>
       </div>
       <div slot="send_by" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
           >{{ props["headings"][props.column] }} :</span
         >
-        <span class="v-card-text-light">
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light">
             <CurrentUserCell :data="props.item.USER_DATA" />
         </span>
       </div>
@@ -446,7 +572,7 @@ export default {
      */
     ProcessMaker() {
       return window.ProcessMaker;
-    },
+    }
   },
   updated() {},
   beforeCreate() {},
@@ -600,6 +726,7 @@ export default {
           }),
           DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
           DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
+          INIT_DATE: v.DEL_INIT_DATE,
           PRIORITY: v.DEL_PRIORITY_LABEL,
           DEL_INDEX: v.DEL_INDEX,
           APP_UID: v.APP_UID,
@@ -655,6 +782,7 @@ export default {
         DEL_INDEX: item.DEL_INDEX,
         PRO_UID: item.PRO_UID,
         TAS_UID: item.TAS_UID,
+        INIT_DATE: item.INIT_DATE,
         ACTION: "todo"
       });
       this.$emit("onUpdatePage", "XCase");
@@ -673,6 +801,7 @@ export default {
             DEL_INDEX: item.DEL_INDEX,
             PRO_UID: item.PRO_UID,
             TAS_UID: item.TAS_UID,
+            INIT_DATE: item.INIT_DATE,
             APP_NUMBER: item.CASE_NUMBER,
           });
           that.$emit("onUpdatePage", "case-detail");

resources/assets/js/home/Unassigned/Unassigned.vue

@@ -33,36 +33,80 @@
       name="unassigned"
     >
       <div slot="detail" slot-scope="props">
-        <div class="btn-default" @click="openCaseDetail(props.row)">
+        <div
+          class="btn-default"
+          :class="props.row.INIT_DATE ? '' : 'pm-main-text-color '"
+          @click="openCaseDetail(props.row)">
           <i class="fas fa-info-circle"></i>
         </div>
       </div>
-      <div slot="case_number" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="case_number"
+        slot-scope="props"
+      >
         {{ props.row.CASE_NUMBER }}
       </div>
-      <div slot="thread_title" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="thread_title"
+        slot-scope="props"
+      >
         {{ props.row.THREAD_TITLE }}
       </div>
-      <div slot="process_category" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="process_category"
+        slot-scope="props"
+      >
         {{ props.row.PROCESS_CATEGORY }}
       </div>
-      <div slot="process_name" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="process_name"
+        slot-scope="props"
+      >
         {{ props.row.PROCESS_NAME }}
       </div>
-      <div slot="task" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="task"
+        slot-scope="props"
+      >
         <TaskCell :data="props.row.TASK" />
       </div>
-      <div slot="send_by" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="send_by"
+        slot-scope="props"
+      >
           <CurrentUserCell :data="props.row.USER_DATA" />
       </div>
-      <div slot="due_date" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="due_date"
+        slot-scope="props"
+      >
         {{ props.row.DUE_DATE }}
       </div>
-      <div slot="delegation_date" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="delegation_date"
+        slot-scope="props"
+      >
         {{ props.row.DELEGATION_DATE }}
       </div>
-      <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
-      <div slot="actions" slot-scope="props">
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="priority"
+        slot-scope="props"
+      >
+        {{ props.row.PRIORITY }}</div>
+      <div
+        :class="props.row.INIT_DATE ? '' : 'font-weight-bold'"
+        slot="actions"
+        slot-scope="props"
+      >
         <div @mouseover="updateDataEllipsis(props.row)">
           <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
@@ -76,7 +120,11 @@
       <div slot="actions" slot-scope="props">
         <b-row>
           <b-col sm="12">
-            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+            <div
+              class="v-pm-card-info"
+              :class="props.item.INIT_DATE ? '' : 'pm-main-text-color'"
+              @click="openCaseDetail(props.item)"
+            >
               <i class="fas fa-info-circle"></i>
             </div>
           </b-col>
@@ -88,72 +136,123 @@
         </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-highlight"
-          >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-highlight"
+        >
+          {{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
         >
       </div>
       <div slot="thread_title" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           {{ props["item"]["THREAD_TITLE"] }}
         </span>
       </div>
       <div slot="process_category" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_CATEGORY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_CATEGORY"] }}
         </span>
       </div>
       <div slot="process_name" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_NAME"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DUE_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DUE_DATE"] }}
         </span>
       </div>
       <div slot="delegation_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DELEGATION_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DELEGATION_DATE"] }}
         </span>
       </div>
       <div slot="priority" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PRIORITY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PRIORITY"] }}
         </span>
       </div>
       <div slot="task" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           <TaskCell :data="props.item.TASK" />
         </span>
       </div>
       <div slot="send_by" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light">
-            <CurrentUserCell :data="props.item.USER_DATA" />
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          <CurrentUserCell :data="props.item.USER_DATA" />
         </span>
       </div>
     </VueCardView>
@@ -165,7 +264,11 @@
       <div slot="actions" slot-scope="props">
         <b-row>
           <b-col sm="12">
-            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+            <div
+              class="v-pm-card-info"
+              :class="props.item.INIT_DATE ? '' : 'pm-main-text-color'"
+              @click="openCaseDetail(props.item)"
+            >
               <i class="fas fa-info-circle"></i>
             </div>
           </b-col>
@@ -177,72 +280,122 @@
         </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-highlight"
-          >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-highlight"
+        >
+          {{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
         >
       </div>
       <div slot="thread_title" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           {{ props["item"]["THREAD_TITLE"] }}
         </span>
       </div>
       <div slot="process_category" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_CATEGORY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_CATEGORY"] }}
         </span>
       </div>
       <div slot="process_name" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PROCESS_NAME"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PROCESS_NAME"] }}
         </span>
       </div>
       <div slot="due_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DUE_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DUE_DATE"] }}
         </span>
       </div>
       <div slot="delegation_date" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["DELEGATION_DATE"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["DELEGATION_DATE"] }}
         </span>
       </div>
       <div slot="priority" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light"
-          >{{ props["item"]["PRIORITY"] }}
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
+        >
+          {{ props["item"]["PRIORITY"] }}
         </span>
       </div>
       <div slot="task" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
+        >
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light"
         >
-        <span class="v-card-text-light">
           <TaskCell :data="props.item.TASK" />
         </span>
       </div>
       <div slot="send_by" slot-scope="props" class="v-card-text">
-        <span class="v-card-text-dark"
-          >{{ props["headings"][props.column] }} :</span
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-dark"
         >
-        <span class="v-card-text-light">
-            <CurrentUserCell :data="props.item.USER_DATA" />
+          {{ props["headings"][props.column] }} :</span
+        >
+        <span
+          :class="props.item.INIT_DATE ? '' : 'font-weight-bold'"
+          class="v-card-text-light">
+          <CurrentUserCell :data="props.item.USER_DATA" />
         </span>
       </div>
     </VueListView>
@@ -434,7 +587,7 @@ export default {
      */
     ProcessMaker() {
       return window.ProcessMaker;
-    },
+    }
   },
   updated() {},
   beforeCreate() {},
@@ -562,6 +715,7 @@ export default {
           USER_DATA: this.formatUser(v.SEND_BY_INFO),
           DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
           DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
+          INIT_DATE: v.DEL_INIT_DATE,
           PRIORITY: v.DEL_PRIORITY_LABEL,
           PRO_UID: v.PRO_UID,
           TAS_UID: v.TAS_UID,
@@ -631,6 +785,7 @@ export default {
         DEL_INDEX: item.DEL_INDEX,
         PRO_UID: item.PRO_UID,
         TAS_UID: item.TAS_UID,
+        INIT_DATE: item.INIT_DATE,
         ACTION: "todo"
       });
       this.$emit("onUpdatePage", "XCase");
@@ -649,6 +804,7 @@ export default {
             DEL_INDEX: item.DEL_INDEX,
             PRO_UID: item.PRO_UID,
             TAS_UID: item.TAS_UID,
+            INIT_DATE: item.INIT_DATE,
             APP_NUMBER: item.CASE_NUMBER,
           });
           that.$emit("onUpdatePage", "case-detail");

resources/assets/sass/menu.scss

@@ -419,3 +419,7 @@ a.router-link-exact-active.router-link-active.vsm--link.vsm--link_level-2.vsm--l
 .vsm--mobile-item {
   max-width: 210px !important;
 }
+
+.pm-main-text-color {
+  color: #3097e4;
+}