From e3815ad1792266ff5625075cd5972aac0f3b9fe4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 27 Jul 2023 12:54:10 +0530
Subject: [PATCH] fix: created common LayoutHeader component with subheader

---
 frontend/src/components/LayoutHeader.vue | 21 +++++++++++++++++
 frontend/src/components/ListView.vue     | 29 +++++++++++-------------
 2 files changed, 34 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/LayoutHeader.vue

diff --git a/frontend/src/components/LayoutHeader.vue b/frontend/src/components/LayoutHeader.vue
new file mode 100644
index 00000000..ad9a89b9
--- /dev/null
+++ b/frontend/src/components/LayoutHeader.vue
@@ -0,0 +1,21 @@
+<template>
+  <div id="header" class="flex justify-between items-center px-5 py-4">
+    <div class="flex items-center gap-2">
+      <slot name="left-header" />
+    </div>
+    <div class="flex items-center gap-2">
+      <slot name="right-header" class="flex items-center gap-2" />
+    </div>
+  </div>
+  <div
+    id="sub-header"
+    class="flex justify-between items-center px-5 pb-3 border-b"
+  >
+    <div class="flex items-center gap-2">
+      <slot name="left-subheader" />
+    </div>
+    <div class="flex items-center gap-2">
+      <slot name="right-subheader" />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index 4ee6d939..d65b0362 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -1,19 +1,14 @@
 <template>
-  <div id="header" class="flex justify-between items-center px-5 py-4">
-    <div class="left flex space-x-2">
+  <LayoutHeader>
+    <template #left-header>
       <h1 class="font-semibold text-xl">{{ list.title }}</h1>
-    </div>
-    <div class="right flex space-x-2">
+    </template>
+    <template #right-header>
       <Button variant="solid" label="Create">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
-    </div>
-  </div>
-  <div
-    id="sub-header"
-    class="flex justify-between items-center px-5 pb-3 border-b"
-  >
-    <div class="left flex space-x-2">
+    </template>
+    <template #left-subheader>
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
           <Button :label="currentView.label">
@@ -28,8 +23,8 @@
           </Button>
         </template>
       </Dropdown>
-    </div>
-    <div class="right flex space-x-2">
+    </template>
+    <template #right-subheader>
       <Button label="Sort">
         <template #prefix><SortIcon class="h-4" /></template>
       </Button>
@@ -37,8 +32,8 @@
         <template #prefix><FilterIcon class="h-4" /></template>
       </Button>
       <Button icon="more-horizontal" />
-    </div>
-  </div>
+    </template>
+  </LayoutHeader>
   <div id="content" class="flex flex-col w-full overflow-x-auto flex-1">
     <div class="flex flex-col overflow-y-hidden w-max min-w-full">
       <div
@@ -159,6 +154,7 @@ import SortIcon from './Icons/SortIcon.vue'
 import FilterIcon from './Icons/FilterIcon.vue'
 import IndicatorIcon from './Icons/IndicatorIcon.vue'
 import { reactive, ref, computed } from 'vue'
+import LayoutHeader from './LayoutHeader.vue'
 
 const props = defineProps({
   list: {
@@ -239,7 +235,8 @@ function getValue(value) {
 
 let selections = reactive(new Set())
 let selectedText = computed(() => {
-  let title = selections.size === 1 ? props.list.singular_label : props.list.plural_label
+  let title =
+    selections.size === 1 ? props.list.singular_label : props.list.plural_label
   return `${selections.size} ${title} selected`
 })