From 2b22f96058533441c5af8410b7118c0ffbe06cfe Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 7 Aug 2023 20:22:22 +0530
Subject: [PATCH] fix: removed layout header from listview component

---
 frontend/src/components/ListView.vue | 101 ++-------------------------
 frontend/src/pages/Contacts.vue      |  96 +++++++++++++++++++++++--
 frontend/src/pages/Deals.vue         |  95 ++++++++++++++++++++++++-
 frontend/src/pages/Inbox.vue         |  95 ++++++++++++++++++++++++-
 frontend/src/pages/Leads.vue         |  95 +++++++++++++++++++++++--
 5 files changed, 373 insertions(+), 109 deletions(-)

diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index 3fa2dac2..bd62ad72 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -1,39 +1,4 @@
 <template>
-  <LayoutHeader>
-    <template #left-header>
-      <Breadcrumbs :items="[{ label: list.title }]" />
-    </template>
-    <template #right-header>
-      <Button variant="solid" label="Create">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
-    </template>
-    <template #left-subheader>
-      <Dropdown :options="viewsDropdownOptions">
-        <template #default="{ open }">
-          <Button :label="currentView.label">
-            <template #prefix
-              ><FeatherIcon :name="currentView.icon" class="h-4"
-            /></template>
-            <template #suffix
-              ><FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4"
-            /></template>
-          </Button>
-        </template>
-      </Dropdown>
-    </template>
-    <template #right-subheader>
-      <Button label="Sort">
-        <template #prefix><SortIcon class="h-4" /></template>
-      </Button>
-      <Button label="Filter">
-        <template #prefix><FilterIcon class="h-4" /></template>
-      </Button>
-      <Button icon="more-horizontal" />
-    </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
@@ -41,7 +6,7 @@
         class="flex space-x-4 items-center px-5 py-2 border-b"
       >
         <Checkbox
-          class="[&>input]:duration-300 [&>input]:cursor-pointer"
+          class="duration-300 cursor-pointer"
           :modelValue="allRowsSelected"
           @click.stop="toggleAllRows"
         />
@@ -69,7 +34,7 @@
           <Checkbox
             :modelValue="selections.has(row[rowKey])"
             @click.stop="toggleRow(row[rowKey])"
-            class="[&>input]:duration-300 [&>input]:cursor-pointer"
+            class="duration-300 cursor-pointer"
           />
           <div
             v-for="column in columns"
@@ -127,7 +92,7 @@
               <Checkbox
                 :modelValue="true"
                 :disabled="true"
-                class="[&>input]:text-gray-900"
+                class="text-gray-900"
               />
               <div>{{ selectedText }}</div>
             </div>
@@ -150,14 +115,10 @@
   </div>
 </template>
 <script setup>
-import { FeatherIcon, Dropdown, Checkbox, Avatar } from 'frappe-ui'
-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'
-import Breadcrumbs from './Breadcrumbs.vue'
-import ListRowItem from './ListRowItem.vue'
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import ListRowItem from '@/components/ListRowItem.vue'
+import { Checkbox, Avatar } from 'frappe-ui'
+import { reactive, computed } from 'vue'
 
 const props = defineProps({
   list: {
@@ -178,54 +139,6 @@ const props = defineProps({
   },
 })
 
-const currentView = ref({
-  label: 'List',
-  icon: 'list',
-})
-
-const viewsDropdownOptions = [
-  {
-    label: 'List',
-    icon: 'list',
-    onClick() {
-      currentView.value = {
-        label: 'List',
-        icon: 'list',
-      }
-    },
-  },
-  {
-    label: 'Table',
-    icon: 'grid',
-    onClick() {
-      currentView.value = {
-        label: 'Table',
-        icon: 'grid',
-      }
-    },
-  },
-  {
-    label: 'Calender',
-    icon: 'calendar',
-    onClick() {
-      currentView.value = {
-        label: 'Calender',
-        icon: 'calendar',
-      }
-    },
-  },
-  {
-    label: 'Board',
-    icon: 'columns',
-    onClick() {
-      currentView.value = {
-        label: 'Board',
-        icon: 'columns',
-      }
-    },
-  },
-]
-
 function getValue(value) {
   if (value && typeof value === 'object') {
     value.label = value.full_name || value.label
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 1e827190..f9603473 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -1,13 +1,52 @@
 <template>
-  <ListView :list="list_details" :columns="columns" :rows="rows" row-key="name" />
+  <LayoutHeader>
+    <template #left-header>
+      <Breadcrumbs :items="[{ label: list.title }]" />
+    </template>
+    <template #right-header>
+      <Button variant="solid" label="Create">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </template>
+    <template #left-subheader>
+      <Dropdown :options="viewsDropdownOptions">
+        <template #default="{ open }">
+          <Button :label="currentView.label">
+            <template #prefix
+              ><FeatherIcon :name="currentView.icon" class="h-4"
+            /></template>
+            <template #suffix
+              ><FeatherIcon
+                :name="open ? 'chevron-up' : 'chevron-down'"
+                class="h-4"
+            /></template>
+          </Button>
+        </template>
+      </Dropdown>
+    </template>
+    <template #right-subheader>
+      <Button label="Sort">
+        <template #prefix><SortIcon class="h-4" /></template>
+      </Button>
+      <Button label="Filter">
+        <template #prefix><FilterIcon class="h-4" /></template>
+      </Button>
+      <Button icon="more-horizontal" />
+    </template>
+  </LayoutHeader>
+  <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
 </template>
 
 <script setup>
 import ListView from '@/components/ListView.vue'
-import { computed } from 'vue'
-import { createListResource } from 'frappe-ui'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import SortIcon from '@/components/Icons/SortIcon.vue'
+import FilterIcon from '@/components/Icons/FilterIcon.vue'
+import { FeatherIcon, Button, Dropdown, createListResource } from 'frappe-ui'
+import { ref, computed } from 'vue'
 
-const list_details = {
+const list = {
   title: 'Contacts',
   plural_label: 'Contacts',
   singular_label: 'Contact',
@@ -22,7 +61,6 @@ const contacts = createListResource({
   pageLength: 999,
   auto: true,
 })
-contacts.fetch()
 
 const columns = [
   {
@@ -59,4 +97,52 @@ const rows = computed(() => {
     }
   })
 })
+
+const currentView = ref({
+  label: 'List',
+  icon: 'list',
+})
+
+const viewsDropdownOptions = [
+  {
+    label: 'List',
+    icon: 'list',
+    onClick() {
+      currentView.value = {
+        label: 'List',
+        icon: 'list',
+      }
+    },
+  },
+  {
+    label: 'Table',
+    icon: 'grid',
+    onClick() {
+      currentView.value = {
+        label: 'Table',
+        icon: 'grid',
+      }
+    },
+  },
+  {
+    label: 'Calender',
+    icon: 'calendar',
+    onClick() {
+      currentView.value = {
+        label: 'Calender',
+        icon: 'calendar',
+      }
+    },
+  },
+  {
+    label: 'Board',
+    icon: 'columns',
+    onClick() {
+      currentView.value = {
+        label: 'Board',
+        icon: 'columns',
+      }
+    },
+  },
+]
 </script>
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index bc6f9d66..41cfdcf5 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -1,13 +1,102 @@
 <template>
-  <ListView :list="list_details"/>
+  <LayoutHeader>
+    <template #left-header>
+      <Breadcrumbs :items="[{ label: list.title }]" />
+    </template>
+    <template #right-header>
+      <Button variant="solid" label="Create">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </template>
+    <template #left-subheader>
+      <Dropdown :options="viewsDropdownOptions">
+        <template #default="{ open }">
+          <Button :label="currentView.label">
+            <template #prefix
+              ><FeatherIcon :name="currentView.icon" class="h-4"
+            /></template>
+            <template #suffix
+              ><FeatherIcon
+                :name="open ? 'chevron-up' : 'chevron-down'"
+                class="h-4"
+            /></template>
+          </Button>
+        </template>
+      </Dropdown>
+    </template>
+    <template #right-subheader>
+      <Button label="Sort">
+        <template #prefix><SortIcon class="h-4" /></template>
+      </Button>
+      <Button label="Filter">
+        <template #prefix><FilterIcon class="h-4" /></template>
+      </Button>
+      <Button icon="more-horizontal" />
+    </template>
+  </LayoutHeader>
+  <ListView :list="list" />
 </template>
 
 <script setup>
-import ListView from '@/components/ListView.vue';
+import ListView from '@/components/ListView.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import SortIcon from '@/components/Icons/SortIcon.vue'
+import FilterIcon from '@/components/Icons/FilterIcon.vue'
+import { FeatherIcon, Button, Dropdown } from 'frappe-ui'
+import { ref } from 'vue'
 
-const list_details = {
+const list = {
   title: 'Deals',
   plural_label: 'Deals',
   singular_label: 'Deal',
 }
+
+const currentView = ref({
+  label: 'List',
+  icon: 'list',
+})
+
+const viewsDropdownOptions = [
+  {
+    label: 'List',
+    icon: 'list',
+    onClick() {
+      currentView.value = {
+        label: 'List',
+        icon: 'list',
+      }
+    },
+  },
+  {
+    label: 'Table',
+    icon: 'grid',
+    onClick() {
+      currentView.value = {
+        label: 'Table',
+        icon: 'grid',
+      }
+    },
+  },
+  {
+    label: 'Calender',
+    icon: 'calendar',
+    onClick() {
+      currentView.value = {
+        label: 'Calender',
+        icon: 'calendar',
+      }
+    },
+  },
+  {
+    label: 'Board',
+    icon: 'columns',
+    onClick() {
+      currentView.value = {
+        label: 'Board',
+        icon: 'columns',
+      }
+    },
+  },
+]
 </script>
diff --git a/frontend/src/pages/Inbox.vue b/frontend/src/pages/Inbox.vue
index aa792229..86592fbd 100644
--- a/frontend/src/pages/Inbox.vue
+++ b/frontend/src/pages/Inbox.vue
@@ -1,13 +1,102 @@
 <template>
-  <ListView :list="list_details"/>
+  <LayoutHeader>
+    <template #left-header>
+      <Breadcrumbs :items="[{ label: list.title }]" />
+    </template>
+    <template #right-header>
+      <Button variant="solid" label="Create">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </template>
+    <template #left-subheader>
+      <Dropdown :options="viewsDropdownOptions">
+        <template #default="{ open }">
+          <Button :label="currentView.label">
+            <template #prefix
+              ><FeatherIcon :name="currentView.icon" class="h-4"
+            /></template>
+            <template #suffix
+              ><FeatherIcon
+                :name="open ? 'chevron-up' : 'chevron-down'"
+                class="h-4"
+            /></template>
+          </Button>
+        </template>
+      </Dropdown>
+    </template>
+    <template #right-subheader>
+      <Button label="Sort">
+        <template #prefix><SortIcon class="h-4" /></template>
+      </Button>
+      <Button label="Filter">
+        <template #prefix><FilterIcon class="h-4" /></template>
+      </Button>
+      <Button icon="more-horizontal" />
+    </template>
+  </LayoutHeader>
+  <ListView :list="list" />
 </template>
 
 <script setup>
-import ListView from '@/components/ListView.vue';
+import ListView from '@/components/ListView.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import SortIcon from '@/components/Icons/SortIcon.vue'
+import FilterIcon from '@/components/Icons/FilterIcon.vue'
+import { FeatherIcon, Button, Dropdown } from 'frappe-ui'
+import { ref } from 'vue'
 
-const list_details = {
+const list = {
   title: 'Inbox',
   plural_label: 'Emails',
   singular_label: 'Email',
 }
+
+const currentView = ref({
+  label: 'List',
+  icon: 'list',
+})
+
+const viewsDropdownOptions = [
+  {
+    label: 'List',
+    icon: 'list',
+    onClick() {
+      currentView.value = {
+        label: 'List',
+        icon: 'list',
+      }
+    },
+  },
+  {
+    label: 'Table',
+    icon: 'grid',
+    onClick() {
+      currentView.value = {
+        label: 'Table',
+        icon: 'grid',
+      }
+    },
+  },
+  {
+    label: 'Calender',
+    icon: 'calendar',
+    onClick() {
+      currentView.value = {
+        label: 'Calender',
+        icon: 'calendar',
+      }
+    },
+  },
+  {
+    label: 'Board',
+    icon: 'columns',
+    onClick() {
+      currentView.value = {
+        label: 'Board',
+        icon: 'columns',
+      }
+    },
+  },
+]
 </script>
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 5df834e0..4ad3bdb6 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -1,20 +1,64 @@
 <template>
-  <ListView :list="list_details" :columns="columns" :rows="rows" row-key="name" />
+  <LayoutHeader>
+    <template #left-header>
+      <Breadcrumbs :items="[{ label: list.title }]" />
+    </template>
+    <template #right-header>
+      <Button variant="solid" label="Create">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </template>
+    <template #left-subheader>
+      <Dropdown :options="viewsDropdownOptions">
+        <template #default="{ open }">
+          <Button :label="currentView.label">
+            <template #prefix
+              ><FeatherIcon :name="currentView.icon" class="h-4"
+            /></template>
+            <template #suffix
+              ><FeatherIcon
+                :name="open ? 'chevron-up' : 'chevron-down'"
+                class="h-4"
+            /></template>
+          </Button>
+        </template>
+      </Dropdown>
+    </template>
+    <template #right-subheader>
+      <Button label="Sort">
+        <template #prefix><SortIcon class="h-4" /></template>
+      </Button>
+      <Button label="Filter">
+        <template #prefix><FilterIcon class="h-4" /></template>
+      </Button>
+      <Button icon="more-horizontal" />
+    </template>
+  </LayoutHeader>
+  <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
 </template>
 
 <script setup>
 import ListView from '@/components/ListView.vue'
-import { computed } from 'vue'
-import { createListResource } from 'frappe-ui'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import SortIcon from '@/components/Icons/SortIcon.vue'
+import FilterIcon from '@/components/Icons/FilterIcon.vue'
 import { usersStore } from '@/stores/users'
+import { FeatherIcon, Button, Dropdown, createListResource } from 'frappe-ui'
+import { ref, computed } from 'vue'
 
-const list_details = {
+const list = {
   title: 'Leads',
   plural_label: 'Leads',
   singular_label: 'Lead',
 }
 const { getUser } = usersStore()
 
+const currentView = ref({
+  label: 'List',
+  icon: 'list',
+})
+
 const leads = createListResource({
   type: 'list',
   doctype: 'CRM Lead',
@@ -100,6 +144,49 @@ const rows = computed(() => {
   })
 })
 
+const viewsDropdownOptions = [
+  {
+    label: 'List',
+    icon: 'list',
+    onClick() {
+      currentView.value = {
+        label: 'List',
+        icon: 'list',
+      }
+    },
+  },
+  {
+    label: 'Table',
+    icon: 'grid',
+    onClick() {
+      currentView.value = {
+        label: 'Table',
+        icon: 'grid',
+      }
+    },
+  },
+  {
+    label: 'Calender',
+    icon: 'calendar',
+    onClick() {
+      currentView.value = {
+        label: 'Calender',
+        icon: 'calendar',
+      }
+    },
+  },
+  {
+    label: 'Board',
+    icon: 'columns',
+    onClick() {
+      currentView.value = {
+        label: 'Board',
+        icon: 'columns',
+      }
+    },
+  },
+]
+
 const indicatorColor = {
   New: 'text-gray-600',
   'Contact made': 'text-orange-500',