fix: show pinned views in sidebar

frontend/src/components/AppSidebar.vue

@@ -15,6 +15,27 @@
           class="mx-2 my-0.5"
         />
       </div>
+      <div
+        v-if="getPinnedViews().length"
+        class="mt-4 flex flex-col overflow-y-auto"
+      >
+        <div class="h-7 px-3 text-base text-gray-600">Pinned Views</div>
+        <SidebarLink
+          v-for="pinnedView in getPinnedViews()"
+          :icon="
+            h(getIcon(pinnedView.route_name), {
+              class: 'h-4.5 w-4.5 text-gray-700',
+            })
+          "
+          :label="pinnedView.label"
+          :to="{
+            name: pinnedView.route_name,
+            query: { view: pinnedView.name },
+          }"
+          :isCollapsed="isSidebarCollapsed"
+          class="mx-2 my-0.5"
+        />
+      </div>
     </div>
     <SidebarLink
       :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
@@ -35,6 +56,7 @@
 </template>
 
 <script setup>
+import PinIcon from '@/components/Icons/PinIcon.vue'
 import UserDropdown from '@/components/UserDropdown.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
@@ -44,7 +66,11 @@ import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
+import { viewsStore } from '@/stores/views'
 import { useStorage } from '@vueuse/core'
+import { h } from 'vue'
+
+const { getPinnedViews } = viewsStore()
 
 const links = [
   {
@@ -79,5 +105,24 @@ const links = [
   },
 ]
 
+function getIcon(routeName) {
+  switch (routeName) {
+    case 'Leads':
+      return LeadsIcon
+    case 'Deals':
+      return DealsIcon
+    case 'Contacts':
+      return ContactsIcon
+    case 'Organizations':
+      return OrganizationsIcon
+    case 'Notes':
+      return NoteIcon
+    case 'Call Logs':
+      return PhoneIcon
+    default:
+      return PinIcon
+  }
+}
+
 const isSidebarCollapsed = useStorage('sidebar_is_collapsed', false)
 </script>

frontend/src/components/ViewControls.vue

@@ -89,7 +89,7 @@ const props = defineProps({
 })
 
 const { $dialog } = globalStore()
-const { getView } = viewsStore()
+const { reload: reloadView, getView } = viewsStore()
 
 const list = defineModel()
 
@@ -132,6 +132,7 @@ function getParams() {
       order_by: _view.order_by,
       columns: _view.columns,
       rows: _view.rows,
+      route_name: _view.route_name,
       default_columns: _view.row,
       pinned: _view.pinned,
     }
@@ -143,6 +144,7 @@ function getParams() {
       order_by: 'modified desc',
       columns: '',
       rows: '',
+      route_name: '',
       default_columns: true,
       pinned: false,
     }
@@ -302,6 +304,7 @@ const viewActions = computed(() => {
           value: !view.value.pinned,
         }).then(() => {
           view.value.pinned = !view.value.pinned
+          reloadView()
         })
       },
     })
@@ -332,6 +335,7 @@ const viewActions = computed(() => {
                       }
                     ).then(() => {
                       router.push({ name: route.name })
+                      reloadView()
                     })
                   },
                 },
@@ -357,6 +361,7 @@ function saveView() {
     order_by: defaultParams.value.order_by,
     columns: defaultParams.value.columns,
     rows: defaultParams.value.rows,
+    route_name: route.name,
     default_columns: view.value.default_columns,
   }
   showViewModal.value = true

frontend/src/stores/views.js

@@ -1,9 +1,10 @@
 import { defineStore } from 'pinia'
 import { createListResource } from 'frappe-ui'
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 export const viewsStore = defineStore('crm-views', () => {
   let viewsByName = reactive({})
+  let pinnedViews = ref([])
 
   const views = createListResource({
     doctype: 'CRM View Settings',
@@ -12,8 +13,12 @@ export const viewsStore = defineStore('crm-views', () => {
     initialData: [],
     auto: true,
     transform(views) {
+      pinnedViews.value = []
       for (let view of views) {
         viewsByName[view.name] = view
+        if (view.pinned) {
+          pinnedViews.value?.push(view)
+        }
       }
       return views
     },
@@ -27,8 +32,19 @@ export const viewsStore = defineStore('crm-views', () => {
     return viewsByName[view]
   }
 
+  function getPinnedViews() {
+    if (!pinnedViews.value?.length) return []
+    return pinnedViews.value
+  }
+
+  function reload() {
+    views.reload()
+  }
+
   return {
     views,
+    getPinnedViews,
+    reload,
     getView,
   }
 })