PMCORE-3922: Added styles to unread cases

Fixed observations

PM Blue color added

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");