Implement object library GUI

src/objectList.vue

@@ -5,24 +5,32 @@
         <p>Objektbibliothek:</p>
         <span>Die Objektbibliothek.</span>
       </template>
-      <v-container class="py-1 px-1">
-        <v-row no-gutters>
-          <vcs-list
-              :items="items"
-              :draggable="draggable"
-              :selectable="selectable"
-              :single-select="selectSingle"
-              :searchable="searchable"
-              :show-title="showTitle"
-              :icon="titleIconSrc"
-              :actions="titleActionsArray"
-              :title="title"
-              v-model="selected"
-              @item-moved="move"
-              @item-renamed="({ item, newTitle }) => (item.title = newTitle)"
-          />
-        </v-row>
-      </v-container>
+      <template #default>
+
+        <v-expansion-panels v-for = "(subcats, categoryName) in objLib" :key="categoryName">
+          <v-expansion-panel title="categoryName">
+            <v-expansion-panel-title>{{ categoryName }}</v-expansion-panel-title>
+            <v-container class="py-1 px-1">
+              <v-list v-for="(entries, subCategory) in subcats" :key = "subCategory" title="subCategory">
+                <v-list-item
+                    v-for="entry in entries"
+                    :key="entry.title"
+                    class="d-flex align-center"
+                >
+                  <template #prepend>
+                    <v-avatar size="32">
+                      <img :src="entry.icon" :alt="entry.title" />
+                    </v-avatar>
+                  </template>
+                  <v-list-item-title>{{ entry.title }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-container>
+
+          </v-expansion-panel>
+        </v-expansion-panels>
+
+      </template>
     </VcsFormSection>
     <VcsFormSection heading="Objektliste">
       <template #help>
@@ -93,7 +101,7 @@
 <script>
 import {
   Icons,
-  NotificationType,
+  NotificationType, VcsExpansionPanel,
   VcsFormButton,
   VcsFormSection,
   VcsList,
@@ -102,14 +110,14 @@ import {
   VcsTreeviewTitle,
 } from '@vcmap/ui';
 import {VCard, VCol, VContainer, VDialog, VForm, VRow, VSheet, VSwitch,} from 'vuetify/components';
-import {computed, inject, ref} from 'vue';
+import {computed, inject, onMounted, ref} from 'vue';
 import {name} from '../package.json';
 import * as THREE from 'three';
 import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 import {GLTFExporter} from 'three/addons/exporters/GLTFExporter.js';
 import {Cartesian2} from '@vcmap-cesium/engine';
 
-const objLib = {};
+const objLib = ref({});
 
 const defaultItems = [];
 const items = ref(defaultItems);
@@ -129,10 +137,10 @@ async function loadCataloguesFromConfig(config) {
     const linkPrefix = cat.url.replace(/\/[^/]*catalog\.json$/, '/');
     const entries = getCatalogueEntries(catJson, linkPrefix);
 
-    if (!objLib[category]) {
-      objLib[category] = [entries];
+    if (!objLib.value[category]) {
+      objLib.value[category] = entries;
     } else {
-      objLib[category].push(entries);
+      Object.assign(objLib.value[category], entries);
     }
   }
 
@@ -304,6 +312,7 @@ function uploadModel() {
   export default {
     name: 'objectList',
     components: {
+      VcsExpansionPanel,
       VcsTreeview,
       VcsTreeviewTitle,
       VcsList,
@@ -345,7 +354,8 @@ function uploadModel() {
       const dialog = ref(false);
       setupModelFunction = setupModel;
       projectStateObject = pluginState;
-      loadCataloguesFromConfig(config).then(response => {console.log(objLib);});
+      // loadCataloguesFromConfig(config).then(response => {console.log(objLib);});
+      onMounted(()=>loadCataloguesFromConfig(config).then(response => {console.log(objLib)}));
       return {
         draggable,
         selectable,
@@ -360,6 +370,7 @@ function uploadModel() {
         items,
         newItem,
         dialog,
+        objLib,
         required: [
           (v) => !!v || 'Input may not be null',
           (v) => v.length > 0 || 'Input must have a length',
@@ -445,6 +456,7 @@ function uploadModel() {
           saveObjects();
         },
       };
+
     },
   };
 </script>