Merged in feature/PMCORE-3913 (pull request #8527)

PMCORE-3913

Approved-by: Rodrigo Quelca
Approved-by: Julio Cesar Laura Avendaño

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/components/search/CasesFilter.vue

@@ -32,6 +32,14 @@
                     >
                         {{ $t("ID_BY_PROCESS_NAME") }}
                     </b-form-checkbox>
+                    <b-form-checkbox
+                        id="checkbox-3"
+                        v-model="byReviewStatus"
+                        name="checkbox-3"
+                        value="reviewStatus"
+                    >
+                        {{ $t("ID_BY_REVIEW_STATUS") }}
+                    </b-form-checkbox>
                 </b-form-group>
             </template>
         </SearchPopover>
@@ -97,6 +105,7 @@ import CaseNumber from "./popovers/CaseNumber.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
 import ProcessCategory from "./popovers/ProcessCategory.vue";
+import ReviewStatus from "./popovers/ReviewStatus.vue";
 import DateFilter from "./popovers/DateFilter.vue";
 import TaskTitle from "./popovers/TaskTitle.vue";
 import CurrentUser from "./popovers/CurrentUser.vue";
@@ -111,6 +120,7 @@ export default {
         CaseTitle,
         ProcessName,
         ProcessCategory,
+        ReviewStatus,
         DateFilter,
         TaskTitle,
         CurrentUser,
@@ -292,10 +302,50 @@ export default {
                     return `${params.tagPrefix}:  ${data[0].label || ""}`;
                 },
             },
+            reviewStatus: {
+                type: "ReviewStatus",
+                id: "reviewStatus",
+                title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t(
+                    "ID_BY_REVIEW_STATUS"
+                )}`,
+                optionLabel: this.$i18n.t("ID_BY_REVIEW_STATUS"),
+                detail: "",
+                tagText: "",
+                tagPrefix: this.$i18n.t("ID_SEARCH_BY_REVIEW_STATUS"),
+                autoShow: false,
+                items: [
+                    {
+                        id: "reviewStatus",
+                        value: "",
+                        options: [
+                            this.$i18n.t("ID_READ_FILTER_OPTION"),
+                            this.$i18n.t("ID_UNREAD_FILTER_OPTION")
+                        ],
+                    }
+                ],
+                makeTagText: function(params, data) {
+                    let label = "";
+                    switch (data[0].value) {
+                        case "READ":
+                            label = this.items[0].options[0];
+                            break;
+
+                        case "UNREAD":
+                            label = this.items[0].options[1];
+                            break;
+
+                        default:
+                            label = "";
+                            break;
+                    }
+                    return `${this.tagPrefix} ${label}`;
+                },
+            },
             selected: "",
             itemModel: {},
             byProcessName: "",
             byProcessCategory: "",
+            byReviewStatus: "",
         };
     },
     computed: {
@@ -386,6 +436,23 @@ export default {
                     ]),
                 ];
             }
+            if (self.byReviewStatus !== "") {
+                if (element !== undefined) {
+                    this.reviewStatus.autoShow = false;
+                } else {
+                    this.reviewStatus.autoShow = true;
+                }
+                initialFilters = [
+                    ...new Set([
+                        ...initialFilters,
+                        ...this.prepareFilterItems(
+                            this.reviewStatus.items,
+                            self.byReviewStatus,
+                            true
+                        ),
+                    ]),
+                ];
+            }
             this.$emit("onUpdateFilters", {
                 params: initialFilters,
                 refresh: false,
@@ -460,6 +527,16 @@ export default {
                             ? self.processCategory.autoShow
                             : true;
                 }
+                if (item.fieldId === "reviewStatus") {
+                    self.searchTags.push(self.reviewStatus.id);
+                    self.byReviewStatus = self.reviewStatus.id;
+                    self.itemModel[self.reviewStatus.id] =
+                        self.reviewStatus;
+                    self.itemModel[self.reviewStatus.id].autoShow =
+                        typeof self.reviewStatus.autoShow !== "undefined"
+                            ? self.reviewStatus.autoShow
+                            : true;
+                }
             });
         },
         dataToFilter(id) {
@@ -517,6 +594,9 @@ export default {
             if (tag === "processCategory") {
                 this.byProcessCategory = "";
             }
+            if (tag === "reviewStatus") {
+                this.byReviewStatus = "";
+            }
             this.$emit("onUpdateFilters", { params: temp, refresh: true });
         },
         /**

resources/assets/js/components/search/CustomFilter.vue

@@ -25,6 +25,14 @@
                         name="checkbox-1"
                     >
                     </b-form-checkbox-group>
+                    <b-form-checkbox
+                        id="checkbox-review-status"
+                        v-model="byReviewStatus"
+                        name="checkbox-review"
+                        value="reviewStatus"
+                    >
+                        {{ $t("ID_BY_REVIEW_STATUS") }}
+                    </b-form-checkbox>
                 </b-form-group>
             </template>
         </SearchPopover>
@@ -89,6 +97,7 @@ import CaseNumber from "./popovers/CaseNumber.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
 import ProcessCategory from "./popovers/ProcessCategory.vue";
+import ReviewStatus from "./popovers/ReviewStatus.vue";
 import DateFilter from "./popovers/DateFilter.vue";
 import TaskTitle from "./popovers/TaskTitle.vue";
 import CurrentUser from "./popovers/CurrentUser.vue";
@@ -105,6 +114,7 @@ export default {
         CaseTitle,
         ProcessName,
         ProcessCategory,
+        ReviewStatus,
         DateFilter,
         TaskTitle,
         CurrentUser,
@@ -122,9 +132,47 @@ export default {
             itemModel: {},
             byProcessName: "",
             byProcessCategory: "",
+            byReviewStatus: "",
             criteriaItemsRadio: [],
             criteriaItemsCheckbox: [],
             showProcessName: true,
+            reviewStatus: {
+                type: "ReviewStatus",
+                id: "reviewStatus",
+                title: `${this.$i18n.t("ID_FILTER")}: ${this.$i18n.t("ID_BY_REVIEW_STATUS")}`,
+                optionLabel: this.$i18n.t("ID_BY_REVIEW_STATUS"),
+                detail: "",
+                tagText: "",
+                tagPrefix: this.$i18n.t("ID_SEARCH_BY_REVIEW_STATUS"),
+                autoShow: false,
+                items: [
+                    {
+                        id: "reviewStatus",
+                        value: "",
+                        options: [
+                            this.$i18n.t("ID_READ_FILTER_OPTION"),
+                            this.$i18n.t("ID_UNREAD_FILTER_OPTION")
+                        ],
+                    }
+                ],
+                makeTagText: function(params, data) {
+                    let label = "";
+                    switch (data[0].value) {
+                        case "READ":
+                            label = this.items[0].options[0];
+                            break;
+
+                        case "UNREAD":
+                            label = this.items[0].options[1];
+                            break;
+
+                        default:
+                            label = "";
+                            break;
+                    }
+                    return `${this.tagPrefix} ${label}`;
+                },
+            },
         };
     },
     mounted(){},
@@ -198,6 +246,23 @@ export default {
                     initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(element, item, true)])];
                 }
             });
+            if (self.byReviewStatus !== "") {
+                if (element !== undefined) {
+                    this.reviewStatus.autoShow = false;
+                } else {
+                    this.reviewStatus.autoShow = true;
+                }
+                initialFilters = [
+                    ...new Set([
+                        ...initialFilters,
+                        ...this.prepareFilterItems(
+                            this.reviewStatus.items,
+                            self.byReviewStatus,
+                            true
+                        ),
+                    ]),
+                ];
+            }
             this.$emit("onUpdateFilters", {
                 params: initialFilters,
                 refresh: false,
@@ -214,7 +279,7 @@ export default {
                 self = this,
                 filter,
                 item;
-            _.forEach(element.items, function(value, key) {
+            _.forEach(element.items || element, function(value, key) {
                 filter = _.find(self.filters, function(o) {
                     return o.filterVar === value.id;
                 });
@@ -256,6 +321,16 @@ export default {
                             ? item.autoShow
                             : true;
                 }
+                if (item.fieldId === "reviewStatus") {
+                    self.searchTags.push(self.reviewStatus.id);
+                    self.byReviewStatus = self.reviewStatus.id;
+                    self.itemModel[self.reviewStatus.id] =
+                        self.reviewStatus;
+                    self.itemModel[self.reviewStatus.id].autoShow =
+                        typeof self.reviewStatus.autoShow !== "undefined"
+                            ? self.reviewStatus.autoShow
+                            : true;
+                }
             });
         },
         /**
@@ -327,6 +402,9 @@ export default {
                 this.byProcessName = "";
                 this.selectedCheckbox = [];
             }
+            if (tag === "reviewStatus") {
+                this.byReviewStatus = "";
+            }
             this.$emit("onUpdateFilters", { params: temp, refresh: true });
         },
         /**

resources/assets/js/components/search/popovers/ReviewStatus.vue

@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <SearchPopover
+            :target="tag"
+            @savePopover="onOk"
+            :title="info.title"
+            :autoShow="info.autoShow || false"
+        >
+            <template v-slot:body>
+                <p>{{ info.detail }}</p>
+                <form ref="form" @submit.stop.prevent="handleSubmit">
+                    <b-form-group
+                        label-for="name"
+                        :invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
+                    >   
+                        <b-form-radio-group
+                            v-model="selected"
+                            :options="readUnread"
+                            name="review-status-options"
+                            stacked
+                        ></b-form-radio-group>
+                    </b-form-group>
+                </form>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+import Multiselect from "vue-multiselect";
+
+export default {
+    components: {
+        SearchPopover,
+        Multiselect,
+    },
+    props: ["tag", "info", "filter"],
+    data() {
+        return {
+            selected: "",
+            readUnread: [
+                { text: this.$i18n.t("ID_READ_FILTER_OPTION"), value: 'READ' },
+                { text: this.$i18n.t("ID_UNREAD_FILTER_OPTION"), value: 'UNREAD' }
+            ]
+        };
+    },
+    methods: {
+        /**
+         * On Ok event handler
+         */
+        onOk() {
+            this.handleSubmit();
+        },
+        /**
+         *  Form submit handler
+         */
+        handleSubmit() {
+            this.filter[0].value = this.selected;
+            this.$emit("updateSearchTag", this.filter);
+            this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style scoped></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.item.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;
+}