PMCORE-3075:UI - Cases Lists Subtitle.

resources/assets/js/components/headers/MultiviewHeader.vue

@@ -2,7 +2,18 @@
   <div class="pm-multiview-header">
     <div class="pm-multiview-header-title"></div>
     <div class="pm-multiview-header-actions">
-      <div>
+      <b-row>
+        <b-col sm="8">
+          <div class="subtitle" v-if="dataSubtitle">
+            <h6>
+              {{ dataSubtitle.subtitle }}
+              <span>
+                <i :class="dataSubtitle.icon"></i>
+              </span>
+            </h6>
+          </div>
+        </b-col>
+        <b-col sm="4" class="pm-multiview-header-actions-buttons">
           <button
             v-for="action in data.actions"
             :key="action.id"
@@ -16,7 +27,8 @@
               </span>
             </div>
           </button>
-      </div>
+        </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 {

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() {

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() {

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() {

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() {