Bug 38010: Implement side menus in vendors app

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>

koha-tmpl/intranet-tmpl/prog/js/vue/components/LeftMenu.vue

@@ -1,14 +1,20 @@
 <template>
     <aside>
         <div class="sidebar_menu">
-            <h5>{{ $__(title) }}</h5>
-            <ul>
-                <NavigationItem
-                    v-for="(item, key) in navigationTree"
-                    v-bind:key="key"
-                    :item="item"
-                ></NavigationItem>
-            </ul>
+            <VendorMenu v-if="leftNavigation === 'VendorMenu'" />
+            <AcquisitionsMenu
+                v-else-if="leftNavigation === 'AcquisitionsMenu'"
+            />
+            <template v-else>
+                <h5>{{ $__(title) }}</h5>
+                <ul>
+                    <NavigationItem
+                        v-for="(item, key) in leftNavigation"
+                        v-bind:key="key"
+                        :item="item"
+                    ></NavigationItem>
+                </ul>
+            </template>
         </div>
         <!-- /.sidebar_menu -->
     </aside>
@@ -17,23 +23,21 @@
 <script>
 import { inject } from "vue";
 import NavigationItem from "./NavigationItem.vue";
+import VendorMenu from "./Islands/VendorMenu.vue";
+import { storeToRefs } from "pinia";
+import AcquisitionsMenu from "./Islands/AcquisitionsMenu.vue";
+
 export default {
     name: "LeftMenu",
-    data() {
-        return {
-            navigationTree: this.leftNavigation,
-        };
-    },
     setup: () => {
         const navigationStore = inject("navigationStore");
-        const { leftNavigation } = navigationStore;
+        const { leftNavigation } = storeToRefs(navigationStore);
         return {
             leftNavigation,
         };
     },
     async beforeMount() {
-        if (this.condition)
-            this.navigationTree = await this.condition(this.navigationTree);
+        if (this.condition) this.condition(this.leftNavigation);
     },
     props: {
         title: String,
@@ -41,6 +45,8 @@ export default {
     },
     components: {
         NavigationItem,
+        VendorMenu,
+        AcquisitionsMenu,
     },
 };
 </script>

koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/Main.vue

@@ -14,7 +14,7 @@
                 </div>
 
                 <div class="col-md-2 order-sm-2 order-md-1">
-                    <LeftMenu :title="$__('Vendor management')"></LeftMenu>
+                    <LeftMenu :title="$__('Acquisitions')"></LeftMenu>
                 </div>
             </div>
         </div>
@@ -53,6 +53,7 @@ export default {
             loaded,
             userPermissions,
             AVStore,
+            config,
         };
     },
     beforeCreate() {

koha-tmpl/intranet-tmpl/prog/js/vue/routes/acquisitions.js

@@ -31,12 +31,14 @@ export const routes = [
                         path: "",
                         name: "VendorList",
                         component: markRaw(VendorList),
+                        alternateLeftMenu: "AcquisitionsMenu",
                     },
                     {
                         path: ":vendor_id",
                         name: "VendorShow",
                         component: markRaw(VendorShow),
                         title: $__("Show vendor"),
+                        alternateLeftMenu: "VendorMenu",
                     },
                     {
                         path: "add",
@@ -55,6 +57,7 @@ export const routes = [
                         name: "VendorShowBaskets",
                         component: markRaw(VendorShow),
                         title: $__("Baskets"),
+                        alternateLeftMenu: "VendorMenu",
                     },
                 ],
             },