add mount of menu

fix store usage add page loader
2025-04-06 14:09:06 +02:00
parent d8a622ce0f
commit b287b671be
15 changed files with 175 additions and 81 deletions
@@ -0,0 +1,134 @@
+<!--
+@license GNU AGPL version 3 or any later version
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<template>
+  <div id="side-menu">
+    <div
+      v-if="settings || !openerHover || (!avatar && !alwaysDisplayed && logo) || avatar"
+      class="side-menu-header"
+    >
+      <SettingsButton
+        v-if="settings"
+        :href="settings.href"
+        :label="settings.name"
+        :avatar="settings.avatar"
+      />
+      <AppSearch v-model:search="search" />
+      <OpenerButton v-if="!alwaysDisplayed" />
+      <Logo
+        v-if="!avatar && !alwaysDisplayed && logo"
+        :classes="{ 'side-menu-logo': true, avatardiv: false }"
+        :image="logo"
+        :link="logoLink"
+      />
+      <Logo
+        v-if="avatar"
+        :classes="{ 'side-menu-logo': true, avatardiv: true }"
+        :image="avatar"
+        :link="logoLink"
+      />
+    </div>
+
+    <ul
+      class="side-menu-apps-list"
+      :class="{ 'side-menu-apps-list--with-settings': !!settings }"
+    >
+      <template
+        v-for="(app, key) in apps"
+        :key="key"
+      >
+        <SideMenuApp
+          v-if="isAppMatchingSearch(app.name, search)"
+          :classes="{ 'side-menu-app': true, active: app.active }"
+          :icon="app.icon"
+          :label="app.name"
+          :href="app.href"
+          :target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
+        />
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useConfigStore } from '../store/config.js'
+import { useNavStore } from '../store/nav.js'
+import { isAppMatchingSearch } from '../lib/search.js'
+
+import OpenerButton from '../components/OpenerButton'
+import SettingsButton from '../components/SettingsButton'
+import SideMenuApp from '../components/SideMenuApp'
+import AppSearch from '../components/AppSearch'
+import Logo from '../components/Logo'
+
+const navStore = useNavStore()
+const configStore = useConfigStore()
+const targetBlankApps = ref(null)
+const forceLightIcon = ref(null)
+const avatar = ref(null)
+const logo = ref(null)
+const logoLink = ref(null)
+const settings = ref(null)
+const openerHover = ref(null)
+const alwaysDisplayed = ref(null)
+const search = ref('')
+const apps = ref([])
+
+function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
+  const data = []
+
+  items.forEach((item) => {
+    if (topMenuApps.includes(item.id) && !topSideMenuApps.includes(item.id)) {
+      return
+    }
+
+    item.order = items.length + 1
+
+    order.forEach((id, key) => {
+      if (id === item.id) {
+        item.order = key + 1
+      }
+    })
+
+    data.push(item)
+  })
+
+  return data.sort((a, b) => {
+    return a.order < b.order ? -1 : 1
+  })
+}
+
+onMounted(async () => {
+  const config = await configStore.getConfig()
+
+  targetBlankApps.value = config['target-blank-apps']
+  forceLightIcon.value = config['force-light-icon']
+  avatar.value = config['avatar']
+  logo.value = config['logo']
+  logoLink.value = config['logo-link']
+  settings.value = config['settings']
+  openerHover.value = config['opener-hover']
+  alwaysDisplayed.value = config['always-displayed']
+
+  apps.value = getFiltredAndSortedApps(
+    await navStore.getApps(),
+    config['apps-order'],
+    config['top-menu-apps'],
+    config['top-side-menu-apps']
+  )
+})
+</script>