@vcmap/module-selector 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/module-selector",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -45,8 +45,8 @@
   ],
   "prettier": "@vcsuite/eslint-config/prettier.js",
   "peerDependencies": {
-    "@vcmap/core": "^6.0.5",
-    "@vcmap/ui": "^6.0.7",
+    "@vcmap/core": "^6.0.6",
+    "@vcmap/ui": "^6.0.10",
     "vue": "~3.4.38",
     "vuetify": "^3.7.3"
   },

package/src/ModuleSelector.vue

@@ -7,13 +7,25 @@
           class="pa-2"
           v-if="basisModule && !nestedCards.length"
         >
-          <v-card class="pa-3 fixed-card selected-card" outlined>
-            <v-icon v-if="basisModule.icon" size="50">{{
-              basisModule.icon
-            }}</v-icon>
-            <v-card-title class="text-center">{{
-              $st(basisModule.title)
-            }}</v-card-title>
+          <v-card class="pa-3 fixed-card selected-card" variant="outlined">
+            <v-tooltip :max-width="300">
+              <template #activator="{ props }">
+                <v-icon
+                  v-if="basisModule.description"
+                  class="top-right-icon"
+                  v-bind="props"
+                  >{{ '$vcsInfo' }}
+                </v-icon>
+              </template>
+              <span>{{ $st(basisModule.description) }}</span>
+            </v-tooltip>
+            <v-icon v-if="basisModule.icon" size="50">
+              {{ basisModule.icon }}
+            </v-icon>
+
+            <v-card-title class="text-center">
+              {{ $st(basisModule.title) }}
+            </v-card-title>
           </v-card>
         </v-col>
         <template v-if="!nestedCards.length">
@@ -25,16 +37,63 @@
           >
             <v-card
               class="fixed-card hover-card"
-              outlined
+              variant="outlined"
               :class="{
                 'selected-card': plugin.selectedMainModuleIndex.value === index,
+                'pr-3': module.type === 'group',
               }"
               @click="selectModule(index)"
             >
-              <v-icon v-if="module.icon" size="50">{{ module.icon }}</v-icon>
-              <v-card-title class="text-center">{{
-                $st(module.title)
-              }}</v-card-title>
+              <v-tooltip :max-width="300">
+                <template #activator="{ props }">
+                  <v-icon
+                    v-if="module.description"
+                    class="top-right-icon"
+                    v-bind="props"
+                    >{{ '$vcsInfo' }}
+                  </v-icon>
+                </template>
+                <span>{{ $st(module.description) }}</span>
+              </v-tooltip>
+              <v-card
+                v-if="module.type === 'group' && module.cards"
+                class="intermediate-card"
+                variant="outlined"
+                :class="{
+                  'selected-card':
+                    plugin.selectedMainModuleIndex.value === index,
+                  'pr-3': module.type === 'group',
+                }"
+              >
+                <v-card
+                  :variant="
+                    module.type === 'group' && module.cards
+                      ? 'outlined'
+                      : undefined
+                  "
+                  :class="{
+                    'selected-card':
+                      plugin.selectedMainModuleIndex.value === index,
+                    groupCard: module.type === 'group',
+                    innerCard: module.type === 'group',
+                  }"
+                >
+                  <v-icon v-if="module.icon" size="50" class="groupIcon">
+                    {{ module.icon }}
+                  </v-icon>
+                  <v-card-title class="text-center groupTitle">
+                    {{ $st(module.title) }}
+                  </v-card-title>
+                </v-card></v-card
+              >
+              <template v-else>
+                <v-icon v-if="module.icon" size="50">
+                  {{ module.icon }}
+                </v-icon>
+                <v-card-title class="text-center">
+                  {{ $st(module.title) }}
+                </v-card-title>
+              </template>
             </v-card>
           </v-col>
         </template>
@@ -43,7 +102,7 @@
           <v-col cols="auto" class="pa-2">
             <v-card
               class="fixed-card hover-card"
-              outlined
+              variant="outlined"
               @click="showMainCards()"
             >
               <v-icon size="50">mdi-arrow-left</v-icon>
@@ -58,13 +117,25 @@
           >
             <v-card
               class="fixed-card hover-card"
-              outlined
+              variant="outlined"
               :class="{
                 'selected-card':
                   plugin.selectedNestedModuleIndex.value === index,
               }"
               @click="selectNestedModule(index)"
             >
+              <v-tooltip :max-width="300">
+                <template #activator="{ props }">
+                  <v-icon
+                    v-if="card.description"
+                    class="top-right-icon"
+                    v-bind="props"
+                    >{{ '$vcsInfo' }}
+                  </v-icon>
+                </template>
+                <span>{{ $st(card.description) }}</span>
+              </v-tooltip>
+
               <v-icon v-if="card.icon" size="50">{{ card.icon }}</v-icon>
               <v-card-title class="text-center">{{
                 $st(card.title)
@@ -104,6 +175,7 @@
     VCard,
     VIcon,
     VCardTitle,
+    VTooltip,
   } from 'vuetify/components';
   import { VcsFormButton, VcsUiApp } from '@vcmap/ui';
   import { computed, defineComponent, inject, PropType } from 'vue';
@@ -124,6 +196,7 @@
       VIcon,
       VCardTitle,
       VcsFormButton,
+      VTooltip,
     },
     props: {
       modules: {
@@ -204,7 +277,7 @@
   });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .v-card {
     display: flex;
     flex-direction: column;
@@ -225,4 +298,31 @@
     background-color: rgb(var(--v-theme-primary));
     color: rgb(var(--v-theme-on-primary));
   }
+
+  .top-right-icon {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    z-index: 10;
+    cursor: pointer;
+    color: rgb(var(--v-theme-on-surface));
+  }
+  .groupCard {
+    width: 146px;
+    background-color: rgb(var(--v-theme-surface));
+    border: none !important; /* Removes all borders */
+    border-right: 1px solid !important; /* Adds a border to the right */
+  }
+  .intermediate-card {
+    width: 148px;
+    background-color: rgb(var(--v-theme-surface));
+    border: none !important; /* Removes all borders */
+    border-right: 1px solid !important; /* Adds a border to the right */
+  }
+  .groupTitle {
+    margin-left: 20px !important;
+  }
+  .groupIcon {
+    margin-left: 20px !important;
+  }
 </style>

package/src/config/CloudModuleSelector.vue

@@ -70,10 +70,23 @@
                 />
               </v-col>
             </v-row>
+            <v-row no-gutters class="px-2">
+              <v-col cols="2">
+                <VcsLabel html-for="moduleDescription">
+                  {{ $st('moduleSelector.configEditor.moduleDescription') }}
+                </VcsLabel>
+              </v-col>
+              <v-col cols="4">
+                <VcsTextArea
+                  id="moduleDescription"
+                  v-model="selectedItem.description"
+                />
+              </v-col>
+            </v-row>
           </v-container>
         </v-form>
       </VcsFormSection>
-      <div class="d-flex px-2">
+      <div class="d-flex px-2 justify-end w-100">
         <VcsFormButton
           v-if="isItemIdEmpty"
           variant="filled"
@@ -123,6 +136,7 @@
     VcsTextField,
     VcsFormSection,
     VcsPlugin,
+    VcsTextArea,
   } from '@vcmap/ui';
   import { computed, defineComponent, inject, PropType, ref } from 'vue';
   import {
@@ -179,6 +193,7 @@
       {
         title: 'moduleSelector.configEditor.moduleCloudPicker.headers.name',
         value: 'name',
+        sortable: true,
       },
       {
         title: 'moduleSelector.configEditor.moduleCloudPicker.headers.type',
@@ -189,6 +204,7 @@
         title:
           'moduleSelector.configEditor.moduleCloudPicker.headers.description',
         value: 'description',
+        sortable: true,
       },
       {
         title:
@@ -208,11 +224,13 @@
         title:
           'moduleSelector.configEditor.moduleCloudPicker.headers.createdBy',
         value: 'createdBy',
+        sortable: true,
       },
       {
         title:
           'moduleSelector.configEditor.moduleCloudPicker.headers.updatedBy',
         value: 'updatedBy',
+        sortable: true,
       },
     ];
   }
@@ -233,6 +251,7 @@
       VCol,
       VForm,
       VContainer,
+      VcsTextArea,
     },
     props: {
       modelValue: {
@@ -241,6 +260,7 @@
           title: string;
           icon: string;
           moduleUrl: string;
+          description?: string;
         }>,
         required: true,
       },
@@ -252,10 +272,19 @@
         '@vcmap/app-configurator',
       ) as VcsPlugin<object, object> & {
         getUserName(userId: string): string;
-        config: object & { projectId: string };
+        config: object & {
+          projectId: string;
+          serverUrl: string;
+          appId: string;
+          token: string;
+        };
       };
 
-      setupPublisherSDK(appConfigurator.config || plugin.config);
+      const { serverUrl, projectId, appId, token } =
+        appConfigurator?.config || plugin.config;
+      const publisherOptions = { serverUrl, projectId, appId, token };
+
+      setupPublisherSDK(publisherOptions);
 
       const loading = ref(true);
       const items = ref<ModuleTableItem[]>([]);
@@ -263,7 +292,13 @@
       const totalPages = ref(0);
       const selected = ref<
         [
-          | { _id: string; name: string; icon: string; moduleUrl: string }
+          | {
+              _id: string;
+              name: string;
+              icon: string;
+              moduleUrl: string;
+              description?: string;
+            }
           | undefined,
         ]
       >([undefined]);
@@ -274,6 +309,7 @@
         title: string;
         icon: string;
         moduleUrl: string;
+        description?: string;
       }>(props.modelValue);
       const isItemIdEmpty = computed(() => selectedItem.value.id === '');
 
@@ -290,16 +326,16 @@
       };
 
       function getItems(options: UpdateItemsEvent): void {
-        const { itemsPerPage, page, search, sortBy, sortDesc } = options;
+        const { itemsPerPage, page, search, sortBy } = options;
         loading.value = true;
-        if (appConfigurator?.config?.projectId) {
+        if (publisherOptions.projectId) {
           getProjectModules({
-            projectId: appConfigurator.config.projectId,
+            projectId: publisherOptions.projectId,
             limit: itemsPerPage,
             page: page - 1,
             name: search,
-            orderBy: sortBy,
-            sort: sortDesc?.[0] ? 'desc' : 'asc',
+            orderBy: sortBy?.map(({ key }) => key),
+            sort: sortBy?.[0]?.order as 'asc' | 'desc',
           })
             .then((data) => {
               items.value = data.items.map((i) => {
@@ -337,6 +373,9 @@
             .finally(() => {
               loading.value = false;
             });
+        } else {
+          items.value = [];
+          loading.value = false;
         }
       }
 
@@ -350,12 +389,14 @@
           selectedItem.value.title = selected.value[0]!.name;
           selectedItem.value.icon = '';
           selectedItem.value.moduleUrl = `configs/${selected.value[0]!._id}.json`;
+          selectedItem.value.description = selected.value[0]!.description;
         }
       };
       const removeSelected = (): void => {
         selectedItem.value.id = '';
         selectedItem.value.title = '';
         selectedItem.value.icon = '';
+        selectedItem.value.description = '';
         selectedItem.value.moduleUrl = '';
       };
 

package/src/config/ModuleEditor.vue

@@ -48,6 +48,19 @@
               />
             </v-col>
           </v-row>
+          <v-row no-gutters>
+            <v-col cols="6">
+              <VcsLabel html-for="moduleDescription">
+                {{ $st('moduleSelector.configEditor.moduleDescription') }}
+              </VcsLabel>
+            </v-col>
+            <v-col cols="6">
+              <VcsTextArea
+                id="moduleDescription"
+                v-model="localModuleOptions.description"
+              />
+            </v-col>
+          </v-row>
         </v-container>
       </v-form>
       <v-divider />
@@ -76,6 +89,7 @@
     VcsFormSection,
     VcsLabel,
     VcsTextField,
+    VcsTextArea,
   } from '@vcmap/ui';
   import {
     VCard,
@@ -100,6 +114,7 @@
       VDivider,
       VCard,
       VcsFormSection,
+      VcsTextArea,
     },
     props: {
       modelValue: {
@@ -108,6 +123,7 @@
           title: string;
           icon: string;
           moduleUrl: string;
+          description?: string;
         }>,
         required: true,
       },