@vcmap/module-selector 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/module-selector",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "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)
@@ -73,7 +144,7 @@
           </v-col>
         </template>
       </v-row>
-      <v-row justify="end">
+      <v-row class="fixed-bottom" justify="end">
         <VcsFormButton
           variant="filled"
           class="ma-5"
@@ -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,37 @@
     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;
+  }
+  .fixed-bottom {
+    position: sticky;
+    bottom: 0;
+    background-color: rgb(var(--v-theme-surface));
+    z-index: 10;
+  }
 </style>

package/src/config/CloudModuleSelector.vue

@@ -1,43 +1,50 @@
 <template>
   <v-card>
     <div>
-      <VcsDataTable
+      <VcsFormSection
         v-if="isItemIdEmpty"
-        base-component="VDataTableServer"
-        :loading="loading"
-        :items="items"
-        :server-items-length="totalItems"
-        :server-pages-length="totalPages"
-        :searchbar-placeholder="
-          $t('moduleSelector.configEditor.moduleCloudPicker.searchName')
-        "
-        :headers="headers"
-        select-strategy="single"
-        return-object
-        show-select
-        item-value="_id"
-        v-model="selected"
-        @update:items="getItems"
+        heading="moduleSelector.configEditor.moduleSettings"
+      >
+        <VcsDataTable
+          base-component="VDataTableServer"
+          :loading="loading"
+          :items="items"
+          :server-items-length="totalItems"
+          :server-pages-length="totalPages"
+          :searchbar-placeholder="
+            $t('moduleSelector.configEditor.moduleCloudPicker.searchName')
+          "
+          :headers="headers"
+          select-strategy="single"
+          return-object
+          show-select
+          item-value="_id"
+          v-model="selected"
+          @update:items="getItems"
+        >
+          <!-- eslint-disable-next-line -->
+          <template v-slot:item.type="{ item }">
+            <v-icon v-bind="{ ...$attrs }">
+              {{ typeIcon(item.type) }}
+            </v-icon>
+            <v-tooltip activator="parent" location="right">
+              {{ $t(`appConfigurator.dialogs.vcsModuleTable.${item.type}`) }}
+            </v-tooltip>
+          </template>
+          <!-- eslint-disable-next-line -->
+          <template v-slot:item.createdAt="{ item }">
+            {{ formatDate(item.createdAt, $i18n.locale) }}
+          </template>
+          <!-- eslint-disable-next-line -->
+          <template v-slot:item.updatedAt="{ item }">
+            {{ formatDate(item.updatedAt, $i18n.locale) }}
+          </template>
+        </VcsDataTable>
+      </VcsFormSection>
+      <VcsFormSection
+        v-else
+        heading="moduleSelector.configEditor.moduleSettings"
       >
-        <!-- eslint-disable-next-line -->
-        <template v-slot:item.type="{ item }">
-          <v-icon v-bind="{ ...$attrs }">
-            {{ typeIcon(item.type) }}
-          </v-icon>
-          <v-tooltip activator="parent" location="right">
-            {{ $t(`appConfigurator.dialogs.vcsModuleTable.${item.type}`) }}
-          </v-tooltip>
-        </template>
-        <!-- eslint-disable-next-line -->
-        <template v-slot:item.createdAt="{ item }">
-          {{ formatDate(item.createdAt, $i18n.locale) }}
-        </template>
-        <!-- eslint-disable-next-line -->
-        <template v-slot:item.updatedAt="{ item }">
-          {{ formatDate(item.updatedAt, $i18n.locale) }}
-        </template>
-      </VcsDataTable>
-      <VcsFormSection v-else>
         <v-form v-model="isFValid" ref="form">
           <v-container class="px-2 pt-0 pb-2">
             <v-row no-gutters class="px-2">
@@ -70,44 +77,61 @@
                 />
               </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">
-        <VcsFormButton
-          v-if="isItemIdEmpty"
-          variant="filled"
-          :disabled="selected[0] === undefined"
-          class="ma-2"
-          @click="addSelected"
-          tooltip="appConfigurator.dialogs.addTooltip"
-          tooltip-position="bottom"
-        >
-          {{ $t('moduleSelector.configEditor.moduleCloudPicker.continue') }}
-        </VcsFormButton>
-        <VcsFormButton
-          v-if="!isItemIdEmpty"
-          :disabled="!isFValid"
-          variant="filled"
-          class="ma-2"
-          @click="
-            () => {
-              $emit('submit', selectedItem);
-            }
-          "
-        >
-          {{ $t('components.apply') }}
-        </VcsFormButton>
-        <VcsFormButton
+      <div class="d-flex gc-2 px-2 pt-2 pb-2">
+        <div v-if="isItemIdEmpty" class="d-flex gc-2 justify-end w-100">
+          <VcsFormButton
+            variant="filled"
+            :disabled="selected[0] === undefined"
+            @click="addSelected"
+            tooltip="appConfigurator.dialogs.addTooltip"
+            tooltip-position="bottom"
+          >
+            {{ $t('moduleSelector.configEditor.moduleCloudPicker.continue') }}
+          </VcsFormButton>
+          <VcsFormButton @click="close">
+            {{ $t('components.cancel') }}
+          </VcsFormButton>
+        </div>
+        <div
           v-if="!isItemIdEmpty"
-          @click="removeSelected"
-          class="ma-2"
+          class="d-flex gc-2 justify-space-between w-100"
         >
-          {{ $t('moduleSelector.configEditor.moduleCloudPicker.back') }}
-        </VcsFormButton>
-        <VcsFormButton class="ma-2" @click="close">
-          {{ $t('components.cancel') }}
-        </VcsFormButton>
+          <VcsFormButton @click="removeSelected">
+            {{ $t('moduleSelector.configEditor.moduleCloudPicker.back') }}
+          </VcsFormButton>
+          <div class="d-flex gc-2">
+            <VcsFormButton
+              :disabled="!isFValid"
+              variant="filled"
+              @click="
+                () => {
+                  $emit('submit', selectedItem);
+                }
+              "
+            >
+              {{ $t('components.apply') }}
+            </VcsFormButton>
+            <VcsFormButton @click="close">
+              {{ $t('components.cancel') }}
+            </VcsFormButton>
+          </div>
+        </div>
       </div>
     </div>
   </v-card>
@@ -123,6 +147,7 @@
     VcsTextField,
     VcsFormSection,
     VcsPlugin,
+    VcsTextArea,
   } from '@vcmap/ui';
   import { computed, defineComponent, inject, PropType, ref } from 'vue';
   import {
@@ -179,6 +204,7 @@
       {
         title: 'moduleSelector.configEditor.moduleCloudPicker.headers.name',
         value: 'name',
+        sortable: true,
       },
       {
         title: 'moduleSelector.configEditor.moduleCloudPicker.headers.type',
@@ -189,6 +215,7 @@
         title:
           'moduleSelector.configEditor.moduleCloudPicker.headers.description',
         value: 'description',
+        sortable: true,
       },
       {
         title:
@@ -208,11 +235,13 @@
         title:
           'moduleSelector.configEditor.moduleCloudPicker.headers.createdBy',
         value: 'createdBy',
+        sortable: true,
       },
       {
         title:
           'moduleSelector.configEditor.moduleCloudPicker.headers.updatedBy',
         value: 'updatedBy',
+        sortable: true,
       },
     ];
   }
@@ -233,6 +262,7 @@
       VCol,
       VForm,
       VContainer,
+      VcsTextArea,
     },
     props: {
       modelValue: {
@@ -241,6 +271,7 @@
           title: string;
           icon: string;
           moduleUrl: string;
+          description?: string;
         }>,
         required: true,
       },
@@ -252,10 +283,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 +303,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 +320,7 @@
         title: string;
         icon: string;
         moduleUrl: string;
+        description?: string;
       }>(props.modelValue);
       const isItemIdEmpty = computed(() => selectedItem.value.id === '');
 
@@ -290,16 +337,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 +384,9 @@
             .finally(() => {
               loading.value = false;
             });
+        } else {
+          items.value = [];
+          loading.value = false;
         }
       }
 
@@ -350,12 +400,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

@@ -1,6 +1,6 @@
 <template>
   <v-card>
-    <VcsFormSection>
+    <VcsFormSection heading="moduleSelector.configEditor.moduleSettings">
       <v-form v-model="isFormValid" ref="form">
         <v-container class="px-2 pt-0 pb-2">
           <v-row no-gutters>
@@ -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,
       },