feat: Dynamic dropdown items

frontend/src/components/UserDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dropdown :options="dropdownOptions" v-bind="$attrs">
+  <Dropdown :options="dropdownItems.doc || []" v-bind="$attrs">
     <template v-slot="{ open }">
       <button
         class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out"
@@ -52,9 +52,9 @@ import Apps from '@/components/Apps.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
 import { showSettings } from '@/composables/settings'
-import { Dropdown } from 'frappe-ui'
+import { createDocumentResource, Dropdown } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
-import { computed, ref, markRaw, onMounted } from 'vue'
+import { computed, markRaw, onMounted } from 'vue'
 
 const props = defineProps({
   isCollapsed: {
@@ -70,48 +70,91 @@ const user = computed(() => getUser() || {})
 
 const theme = useStorage('theme', 'light')
 
-let dropdownOptions = ref([
+const dropdownItems = createDocumentResource({
-  {
+  doctype: 'FCRM Settings',
-    group: 'Manage',
+  name: 'FCRM Settings',
-    hideLabel: true,
+  fields: ['dropdown_items'],
-    items: [
+  auto: true,
+  transform: (data) => {
+    let items = data.dropdown_items
+
+    let _dropdownItems = [
       {
+        group: 'Dropdown Items',
+        hideLabel: true,
+        items: [],
+      },
+    ]
+
+    items.forEach((item) => {
+      if (item.hidden) return
+      if (item.type !== 'Separator') {
+        _dropdownItems[_dropdownItems.length - 1].items.push(
+          dropdownItemObj(item),
+        )
+      } else {
+        _dropdownItems.push({
+          group: '',
+          hideLabel: true,
+          items: [],
+        })
+      }
+    })
+
+    return _dropdownItems
+  },
+})
+
+function dropdownItemObj(item) {
+  let openInNewWindow = item.open_in_new_window
+  if (item.is_standard) {
+    return getStandardItem(item)
+  }
+  return {
+    icon: item.icon || 'external-link',
+    label: __(item.label),
+    onClick: () => window.open(item.url, openInNewWindow ? '_blank' : ''),
+  }
+}
+
+function getStandardItem(item) {
+  switch (item.name1) {
+    case 'app_selector':
+      return {
         component: markRaw(Apps),
-      },
+      }
-      {
+    case 'support_link':
-        icon: 'life-buoy',
+      return {
-        label: computed(() => __('Support')),
+        icon: item.icon,
-        onClick: () => window.open('https://t.me/frappecrm', '_blank'),
+        label: __(item.label),
-      },
+        onClick: () => window.open(item.route, '_blank'),
-      {
+      }
-        icon: 'book-open',
+    case 'docs_link':
-        label: computed(() => __('Docs')),
+      return {
-        onClick: () => window.open('https://docs.frappe.io/crm', '_blank'),
+        icon: item.icon,
-      },
+        label: __(item.label),
-    ],
+        onClick: () => window.open(item.route, '_blank'),
-  },
+      }
-  {
+    case 'toggle_theme':
-    group: 'Others',
+      return {
-    hideLabel: true,
+        icon: computed(() => (theme.value === 'dark' ? 'sun' : item.icon)),
-    items: [
+        label: __(item.label),
-      {
-        icon: computed(() => (theme.value === 'dark' ? 'moon' : 'sun')),
-        label: computed(() => __('Toggle theme')),
         onClick: toggleTheme,
-      },
+      }
-      {
+    case 'settings':
-        icon: 'settings',
+      return {
-        label: computed(() => __('Settings')),
+        icon: item.icon,
+        label: __(item.label),
         onClick: () => (showSettings.value = true),
-      },
+      }
-      {
+    case 'logout':
-        icon: 'log-out',
+      return {
-        label: computed(() => __('Log out')),
+        icon: item.icon,
+        label: __(item.label),
         onClick: () => logout.submit(),
-      },
+      }
-    ],
+  }
-  },
+}
-])
 
 function toggleTheme() {
   const currentTheme = document.documentElement.getAttribute('data-theme')