PMCORE-3922: Added styles to unread cases

Fixed observations

PM Blue color added

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