From 341fdb2683b1973e607088a421c69fd4582171f1 Mon Sep 17 00:00:00 2001
From: fabio <fabio.guachalla@processmaker.com>
Date: Mon, 9 Aug 2021 12:20:48 -0400
Subject: [PATCH] PMCORE-3075:UI - Cases Lists Subtitle.

---
 .../js/components/headers/MultiviewHeader.vue | 48 ++++++++++++-------
 resources/assets/js/home/Draft/Draft.vue      |  8 +++-
 resources/assets/js/home/Inbox/Todo.vue       |  8 +++-
 resources/assets/js/home/Paused/Paused.vue    |  8 +++-
 .../assets/js/home/Unassigned/Unassigned.vue  |  8 +++-
 5 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/resources/assets/js/components/headers/MultiviewHeader.vue b/resources/assets/js/components/headers/MultiviewHeader.vue
index d7402e3aa..b858cea47 100644
--- a/resources/assets/js/components/headers/MultiviewHeader.vue
+++ b/resources/assets/js/components/headers/MultiviewHeader.vue
@@ -2,21 +2,33 @@
   <div class="pm-multiview-header">
     <div class="pm-multiview-header-title"></div>
     <div class="pm-multiview-header-actions">
-      <div>
-        <button
-          v-for="action in data.actions"
-          :key="action.id"
-          @click="action.onClick(action)"
-          class="pm-multiview-header-button"
-          :title="action.title"
-        >
-          <div>
-            <span>
-              <i :class="action.icon"></i>
-            </span>
+      <b-row>
+        <b-col sm="8">
+          <div class="subtitle" v-if="dataSubtitle">
+            <h6>
+              {{ dataSubtitle.subtitle }}
+              <span>
+                <i :class="dataSubtitle.icon"></i>
+              </span>
+            </h6>
           </div>
-        </button>
-      </div>
+        </b-col>
+        <b-col sm="4" class="pm-multiview-header-actions-buttons">
+          <button
+            v-for="action in data.actions"
+            :key="action.id"
+            @click="action.onClick(action)"
+            class="pm-multiview-header-button"
+            :title="action.title"
+          >
+            <div>
+              <span>
+                <i :class="action.icon"></i>
+              </span>
+            </div>
+          </button>
+        </b-col>
+      </b-row>
     </div>
   </div>
 </template>
@@ -24,7 +36,10 @@
 <script>
 export default {
   name: "MultiviewHeader",
-  props: ["data"],
+  props: [
+    "data",
+    "dataSubtitle"
+  ],
   data() {
     return {};
   },
@@ -38,10 +53,11 @@ export default {
 
 <style>
 .pm-multiview-header {
+  margin-bottom: 7px;
 }
 .pm-multiview-header-title {
 }
-.pm-multiview-header-actions {
+.pm-multiview-header-actions-buttons {
   text-align: end;
 }
 .pm-multiview-header-button {
diff --git a/resources/assets/js/home/Draft/Draft.vue b/resources/assets/js/home/Draft/Draft.vue
index 873a31f0f..045b077b3 100644
--- a/resources/assets/js/home/Draft/Draft.vue
+++ b/resources/assets/js/home/Draft/Draft.vue
@@ -9,7 +9,10 @@
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
-    <multiview-header :data="dataMultiviewHeader" />
+    <multiview-header
+      :data="dataMultiviewHeader"
+      :dataSubtitle="dataSubtitle"
+    />
     <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
@@ -283,7 +286,8 @@ export default {
       dataEllipsis: {
         buttons: {}
       },
-      showEllipsis: false
+      showEllipsis: false,
+      dataSubtitle: null
     };
   },
   created() {
diff --git a/resources/assets/js/home/Inbox/Todo.vue b/resources/assets/js/home/Inbox/Todo.vue
index 15baad426..e4f2e50b8 100644
--- a/resources/assets/js/home/Inbox/Todo.vue
+++ b/resources/assets/js/home/Inbox/Todo.vue
@@ -11,7 +11,10 @@
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
-    <multiview-header :data="dataMultiviewHeader" />
+    <multiview-header
+      :data="dataMultiviewHeader"
+      :dataSubtitle="dataSubtitle"
+    />
     <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
@@ -326,7 +329,8 @@ export default {
       dataEllipsis: {
         buttons: {}
       },
-      showEllipsis: false
+      showEllipsis: false,
+      dataSubtitle: null
     };
   },
   created() {
diff --git a/resources/assets/js/home/Paused/Paused.vue b/resources/assets/js/home/Paused/Paused.vue
index 022ba4373..2a9dfd5cf 100644
--- a/resources/assets/js/home/Paused/Paused.vue
+++ b/resources/assets/js/home/Paused/Paused.vue
@@ -10,7 +10,10 @@
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
-    <multiview-header :data="dataMultiviewHeader" />
+    <multiview-header
+      :data="dataMultiviewHeader"
+      :dataSubtitle="dataSubtitle"
+    />
     <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
@@ -326,7 +329,8 @@ export default {
       dataEllipsis: {
         buttons: {}
       },
-      showEllipsis: false
+      showEllipsis: false,
+      dataSubtitle: null
     };
   },
   created() {
diff --git a/resources/assets/js/home/Unassigned/Unassigned.vue b/resources/assets/js/home/Unassigned/Unassigned.vue
index 70fb56421..51a0fd6c3 100644
--- a/resources/assets/js/home/Unassigned/Unassigned.vue
+++ b/resources/assets/js/home/Unassigned/Unassigned.vue
@@ -9,7 +9,10 @@
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
-    <multiview-header :data="dataMultiviewHeader" />
+    <multiview-header
+      :data="dataMultiviewHeader"
+      :dataSubtitle="dataSubtitle"
+    />
     <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
@@ -321,7 +324,8 @@ export default {
       dataEllipsis: {
         buttons: {}
       },
-      showEllipsis: false
+      showEllipsis: false,
+      dataSubtitle: null
     };
   },
   mounted() {