fix: implemented ViewControls for Leads

frontend/src/pages/Leads.vue

@@ -9,29 +9,11 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex items-center justify-between px-5 pb-4 pt-3">
+  <ViewControls
-    <div class="flex items-center gap-2">
+    v-model="leads"
-      <Dropdown :options="viewsDropdownOptions">
+    doctype="CRM Lead"
-        <template #default="{ open }">
+    :filters="{ converted: 0 }"
-          <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 text-gray-600"
-            /></template>
-          </Button>
-        </template>
-      </Dropdown>
-    </div>
-    <div class="flex items-center gap-2">
-      <Filter doctype="CRM Lead" />
-      <SortBy doctype="CRM Lead" />
-      <ViewSettings doctype="CRM Lead" v-model="leads" />
-    </div>
-  </div>
   <LeadsListView
     v-if="leads.data && rows.length"
     :rows="rows"
@@ -72,9 +54,7 @@ import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import LeadsListView from '@/components/ListViews/LeadsListView.vue'
 import NewLead from '@/components/NewLead.vue'
-import SortBy from '@/components/SortBy.vue'
+import ViewControls from '@/components/ViewControls.vue'
-import Filter from '@/components/Filter.vue'
-import ViewSettings from '@/components/ViewSettings.vue'
 import { usersStore } from '@/stores/users'
 import { organizationsStore } from '@/stores/organizations'
 import { statusesStore } from '@/stores/statuses'
@@ -83,7 +63,6 @@ import {
   FeatherIcon,
   Dialog,
   Button,
-  Dropdown,
   createResource,
   Breadcrumbs,
 } from 'frappe-ui'
@@ -96,34 +75,17 @@ const { getUser } = usersStore()
 const { getOrganization } = organizationsStore()
 const { getLeadStatus } = statusesStore()
 
-const currentView = ref({
+const router = useRouter()
-  label: 'List',
-  icon: 'list',
-})
 
-function getParams() {
+// leads data is loaded in the ViewControls component
-  const filters = { converted: 0 }
+const leads = ref({})
-
-  const order_by = 'modified desc'
-
-  return {
-    doctype: 'CRM Lead',
-    filters: filters,
-    order_by: order_by,
-  }
-}
-
-const leads = createResource({
-  url: 'crm.api.doc.get_list_data',
-  params: getParams(),
-  auto: true,
-})
 
+// Rows
 const rows = computed(() => {
-  if (!leads.data?.data) return []
+  if (!leads.value?.data?.data) return []
-  return leads.data.data.map((lead) => {
+  return leads.value?.data.data.map((lead) => {
     let _rows = {}
-    leads.data.rows.forEach((row) => {
+    leads.value?.data.rows.forEach((row) => {
       _rows[row] = lead[row]
 
       if (row == 'lead_name') {
@@ -200,49 +162,7 @@ const rows = computed(() => {
   })
 })
 
-const viewsDropdownOptions = [
+// New Lead
-  {
-    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 showNewDialog = ref(false)
 
 let newLead = reactive({
@@ -269,8 +189,6 @@ const createLead = createResource({
   },
 })
 
-const router = useRouter()
-
 function createNewLead(close) {
   createLead
     .submit(newLead, {