@vcmap/module-selector 2.0.2 → 2.0.4

package/src/config/ModuleSelectorConfigEditor.vue

@@ -4,7 +4,7 @@
     v-if="localConfig"
     v-bind="{ ...$attrs, ...$props }"
   >
-    <v-container v-if="currentGroup === undefined" class="py-0 px-0">
+    <v-container class="py-0 px-0">
       <VcsFormSection heading="moduleSelector.configEditor.general">
         <v-container class="py-0 px-1">
           <v-row no-gutters>
@@ -39,24 +39,6 @@
           </v-row>
         </v-container>
       </VcsFormSection>
-      <VcsFormSection
-        heading="moduleSelector.configEditor.windowPosition"
-        :expandable="true"
-      >
-        <WindowPositionSettings
-          v-model="localConfig.position!"
-          :position-keys="[
-            'top',
-            'right',
-            'bottom',
-            'left',
-            'width',
-            'maxWidth',
-            'height',
-            'maxHeight',
-          ]"
-        />
-      </VcsFormSection>
       <VcsFormSection heading="moduleSelector.configEditor.baseModule">
         <v-container class="py-0 px-1">
           <v-row no-gutters>
@@ -109,73 +91,116 @@
               />
             </v-col>
           </v-row>
+          <v-row v-if="basisModuleExists" no-gutters>
+            <v-col cols="6">
+              <VcsLabel html-for="basisModuleDescription">
+                {{ $st('moduleSelector.configEditor.moduleDescription') }}
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextArea
+                id="basisModuleDescription"
+                v-model="basisModule.description"
+              />
+            </v-col>
+          </v-row>
         </v-container>
       </VcsFormSection>
     </v-container>
-    <v-container v-else class="py-0 px-1">
-      <v-breadcrumbs :items="breadcrumbItems" divider="/">
-        <template #item="{ item }">
-          <v-breadcrumbs-item
-            :key="item.title"
-            :disabled="item.disabled"
-            :href="item.href"
-            @click="item.disabled ? null : returnLevel()"
-          >
-            {{ item.title }}
-          </v-breadcrumbs-item>
-        </template>
-      </v-breadcrumbs>
-
-      <v-row no-gutters>
-        <v-col cols="6">
-          <VcsLabel required html-for="groupModuleName">
-            {{ $st('moduleSelector.configEditor.groupName') }}
-          </VcsLabel>
-        </v-col>
-        <v-col>
-          <VcsTextField
-            id="groupModuleName"
-            placeholder="Module Name"
-            v-model="currentGroup!.title"
-            :rules="[(v: string) => !!v || 'moduleSelector.configEditor.error']"
-          />
-        </v-col>
-      </v-row>
-      <v-row no-gutters>
-        <v-col cols="6">
-          <VcsLabel required html-for="groupModuleIcon">
-            {{ $st('moduleSelector.configEditor.moduleIcon') }}
-          </VcsLabel>
-        </v-col>
-        <v-col>
-          <VcsTextField
-            id="groupModuleIcon"
-            placeholder="Module Icon"
-            v-model="currentGroup!.icon"
-            :rules="[
-              (v: string) => !!v || 'moduleSelector.configEditor.editorError',
-            ]"
+    <v-dialog v-model="groupItemDialogVisible" width="800" :persistent="true">
+      <v-sheet v-if="currentGroup">
+        <VcsFormSection
+          heading="moduleSelector.configEditor.groupHeading"
+          :start-open="true"
+        >
+          <v-form v-model="isFormValid">
+            <v-container class="py-0 px-1">
+              <v-row no-gutters>
+                <v-col cols="6">
+                  <VcsLabel required html-for="groupModuleName">
+                    {{ $st('moduleSelector.configEditor.groupName') }}
+                  </VcsLabel>
+                </v-col>
+                <v-col>
+                  <VcsTextField
+                    id="groupModuleName"
+                    placeholder="Module Name"
+                    v-model="currentGroup.title"
+                    :rules="[isRequired]"
+                  />
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col cols="6">
+                  <VcsLabel required html-for="groupModuleIcon">
+                    {{ $st('moduleSelector.configEditor.moduleIcon') }}
+                  </VcsLabel>
+                </v-col>
+                <v-col>
+                  <VcsTextField
+                    id="groupModuleIcon"
+                    placeholder="Module Icon"
+                    v-model="currentGroup.icon"
+                    :rules="[isRequired]"
+                  />
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col cols="6">
+                  <VcsLabel html-for="groupModuleDescription">
+                    {{ $st('moduleSelector.configEditor.groupDescription') }}
+                  </VcsLabel>
+                </v-col>
+                <v-col>
+                  <VcsTextArea
+                    id="groupModuleDescription"
+                    placeholder=""
+                    v-model="currentGroup.description"
+                  />
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-form>
+        </VcsFormSection>
+        <VcsFormSection
+          heading="moduleSelector.configEditor.heading"
+          :start-open="true"
+          :header-actions="headerActions"
+        >
+          <VcsList
+            class="draggable-list"
+            :items="currentGroup.cards"
+            :draggable="true"
+            @item-moved="moveCard"
           />
-        </v-col>
-      </v-row>
-    </v-container>
+        </VcsFormSection>
+        <div class="d-flex px-2 justify-end w-100">
+          <VcsFormButton
+            variant="filled"
+            class="ma-2"
+            :disabled="!isFormValid"
+            @click="returnLevel()"
+          >
+            {{ $t('components.apply') }}
+          </VcsFormButton>
+          <VcsFormButton class="ma-2" @click="cancelCurrentGroup()">
+            {{ $t('components.cancel') }}
+          </VcsFormButton>
+        </div>
+      </v-sheet>
+    </v-dialog>
+
     <VcsFormSection
       heading="moduleSelector.configEditor.heading"
       :start-open="true"
       :header-actions="headerActions"
     >
       <VcsList
-        v-if="currentGroup === undefined"
         :items="listItemArray"
         :draggable="true"
-        @item-moved="move"
-      />
-      <VcsList
-        v-else
-        :items="currentGroup.cards"
-        :draggable="true"
-        @item-moved="move"
+        @item-moved="moveItem"
       />
+
       <v-dialog
         v-model="editingItemDialogVisible"
         width="400"
@@ -199,6 +224,24 @@
         />
       </v-dialog>
     </VcsFormSection>
+    <VcsFormSection
+      heading="moduleSelector.configEditor.windowPosition"
+      :expandable="true"
+    >
+      <WindowPositionSettings
+        v-model="localConfig.position!"
+        :position-keys="[
+          'top',
+          'right',
+          'bottom',
+          'left',
+          'width',
+          'maxWidth',
+          'height',
+          'maxHeight',
+        ]"
+      />
+    </VcsFormSection>
   </AbstractConfigEditor>
 </template>
 
@@ -212,25 +255,26 @@
     VcsList,
     VcsListItem,
     VcsTextField,
-    VcsUiApp,
+    VcsTextArea,
+    VcsFormButton,
   } from '@vcmap/ui';
   import {
     computed,
     defineComponent,
-    inject,
     PropType,
     reactive,
     Ref,
     ref,
+    toRaw,
     watch,
   } from 'vue';
   import {
-    VBreadcrumbs,
-    VBreadcrumbsItem,
     VCol,
     VContainer,
     VDialog,
     VRow,
+    VSheet,
+    VForm,
   } from 'vuetify/components';
   import ModuleEditor from './ModuleEditor.vue';
   import { Module, ModuleSelectorConfig, ModuleType } from '../index';
@@ -244,28 +288,38 @@
     icon: string;
     type: string;
     moduleUrl?: string;
+    description?: string;
     cards?: VcsListItemWithLabel[];
   }
+  interface ModuleItem {
+    id: string;
+    title: string;
+    icon: string;
+    moduleUrl: string;
+    description?: string;
+  }
 
   export const windowIdConfigEditor = 'configEditor_window_id';
   export default defineComponent({
     name: 'ModuleSelectorConfigEditor',
     components: {
+      VForm,
+      VcsFormButton,
       VcsCheckbox,
       VDialog,
       VcsList,
       VcsFormSection,
       VRow,
+      VSheet,
       VcsLabel,
       AbstractConfigEditor,
       VcsTextField,
       VCol,
       VContainer,
       ModuleEditor,
-      VBreadcrumbs,
-      VBreadcrumbsItem,
       WindowPositionSettings,
       VcsModuleTable: CloudModuleSelector,
+      VcsTextArea,
     },
     props: {
       getConfig: {
@@ -278,24 +332,34 @@
       },
     },
     setup(props) {
-      const app = inject('vcsApp') as VcsUiApp;
       const level = ref<number>(0);
       const localConfig = ref<ModuleSelectorConfig | undefined>(undefined);
       const listItemArray: Ref<VcsListItemWithLabel[]> = ref([]);
       const currentGroup: Ref<VcsListItemWithLabel | undefined> =
         ref(undefined);
-      const editingItem: Ref<{
-        id: string;
-        title: string;
-        icon: string;
-        moduleUrl: string;
-      }> = ref({ id: '', title: '', icon: '', moduleUrl: '' });
-      const selectCloudItem: Ref<{
-        id: string;
-        title: string;
-        icon: string;
-        moduleUrl: string;
-      }> = ref({ id: '', title: '', icon: '', moduleUrl: '' });
+      const editingItem: Ref<ModuleItem> = ref({
+        id: '',
+        title: '',
+        icon: '',
+        moduleUrl: '',
+        description: '',
+      });
+      const selectCloudItem: Ref<ModuleItem> = ref({
+        id: '',
+        title: '',
+        icon: '',
+        moduleUrl: '',
+        description: '',
+      });
+
+      let selectedGroupItem: Module<ModuleType> = {
+        title: '',
+        icon: '',
+        type: 'group',
+        description: '',
+        cards: [],
+      };
+
       const selectCloudItemDialogVisible: Ref<boolean> = ref(false);
       const editingItemDialogVisible: Ref<boolean> = ref(false);
       const groupItemDialogVisible: Ref<boolean> = ref(false);
@@ -326,6 +390,36 @@
       });
       const headerActions = reactive<VcsAction[]>([]);
 
+      function removeIdAndActions(
+        item: VcsListItemWithLabel,
+      ): Module<ModuleType> {
+        if (item.type === 'url') {
+          const { actions, id, name, ...configItem } = item;
+          return {
+            ...configItem,
+            moduleUrl: item.moduleUrl || '',
+          } as Module<'url'>;
+        } else {
+          const updatedCards =
+            item.cards?.map((card) => {
+              const { actions, id, name, ...configItem } = card;
+              return {
+                ...configItem,
+              } as Module<'url'>;
+            }) || [];
+          const { actions, id, name, ...configItem } = item;
+          return {
+            ...configItem,
+            ...(updatedCards.length ? { cards: updatedCards } : {}),
+          } as Module<'group'>;
+        }
+      }
+
+      function removeIdAndActionsFromArray(
+        items: VcsListItemWithLabel[],
+      ): Module<ModuleType>[] {
+        return items.map(removeIdAndActions);
+      }
       function createListItem(
         moduleInfo: Module<ModuleType>,
         index: number,
@@ -336,6 +430,7 @@
           title: moduleInfo.title,
           icon: moduleInfo.icon,
           type: moduleInfo.type,
+          description: moduleInfo.description,
           actions: [],
         };
         if (moduleInfo.type === 'url') {
@@ -359,6 +454,7 @@
                     title: item.title,
                     icon: item.icon,
                     moduleUrl: item.moduleUrl!,
+                    description: item.description,
                   };
                 }
               } else {
@@ -372,6 +468,7 @@
                     title: item.title,
                     icon: item.icon,
                     moduleUrl: item.moduleUrl!,
+                    description: item.description,
                   };
                 }
               }
@@ -391,6 +488,15 @@
                 );
                 if (item) {
                   currentGroup.value = item;
+                  groupItemDialogVisible.value = true;
+                  const [firstItem] = removeIdAndActionsFromArray([
+                    currentGroup.value,
+                  ]) as Module<'group'>[];
+                  if (firstItem.cards.length === 0) {
+                    firstItem.cards = [];
+                  }
+                  selectedGroupItem = structuredClone(firstItem);
+
                   headerActions.splice(2, 1);
                   if (headerActions.length > 1) {
                     headerActions[1].icon = '$vcsPlus';
@@ -426,6 +532,7 @@
 
       headerActions.push({
         name: 'moduleSelector.configEditor.addFromCloud',
+        title: 'moduleSelector.configEditor.TooltipAddCloudModule',
         icon: '$vcsImport',
         callback(): void {
           selectCloudItem.value = {
@@ -433,36 +540,12 @@
             title: '',
             icon: '',
             moduleUrl: '',
+            description: '',
           };
           selectCloudItemDialogVisible.value = true;
         },
       });
 
-      function removeIdAndActions(
-        item: VcsListItemWithLabel,
-      ): Module<ModuleType> {
-        if (item.type === 'url') {
-          const { actions, id, name, ...configItem } = item;
-          return {
-            ...configItem,
-            moduleUrl: item.moduleUrl || '',
-          } as Module<'url'>;
-        } else {
-          const updatedCards =
-            item.cards?.map((card) => {
-              const { actions, id, name, ...configItem } = card;
-              return {
-                ...configItem,
-              } as Module<'url'>;
-            }) || [];
-          const { actions, id, name, ...configItem } = item;
-          return {
-            ...configItem,
-            ...(updatedCards.length ? { cards: updatedCards } : {}),
-          } as Module<'group'>;
-        }
-      }
-
       const headerGroupAction = {
         name: 'moduleSelector.configEditor.addGroup',
         callback(): void {
@@ -470,6 +553,7 @@
             type: 'group',
             title: '',
             icon: '',
+            description: '',
             cards: [],
           };
 
@@ -482,6 +566,7 @@
           );
 
           currentGroup.value = listItemArray.value[indexItem - 1];
+          groupItemDialogVisible.value = true;
 
           headerActions.splice(2, 1);
           if (headerActions.length > 1) {
@@ -491,13 +576,6 @@
           }
         },
       };
-
-      function removeIdAndActionsFromArray(
-        items: VcsListItemWithLabel[],
-      ): Module<ModuleType>[] {
-        return items.map(removeIdAndActions);
-      }
-
       if (localConfig.value?.modules) {
         listItemArray.value = localConfig.value.modules.map(createListItem);
       }
@@ -511,6 +589,7 @@
               title: '',
               icon: '',
               moduleUrl: '',
+              description: '',
             };
             editingItemDialogVisible.value = true;
           },
@@ -528,11 +607,27 @@
       });
 
       const apply = (): void => {
-        props.setConfig({
-          ...localConfig.value,
+        const position = toRaw(localConfig.value?.position) as Record<
+          string,
+          unknown
+        >;
+        const isPositionDefined = Object.values(position).some(
+          (value) => value !== undefined,
+        );
+
+        const config = {
+          ...toRaw(localConfig.value),
           modules: removeIdAndActionsFromArray(listItemArray.value),
-          basisModule: basisModule.value,
-        });
+          basisModule: toRaw(basisModule.value),
+        };
+
+        if (isPositionDefined) {
+          config.position = position;
+        } else {
+          delete config.position;
+        }
+
+        props.setConfig(config);
       };
 
       const updateItem = (): void => {
@@ -605,6 +700,7 @@
           title: '',
           icon: '',
           moduleUrl: '',
+          description: '',
         };
         editingItemDialogVisible.value = false;
       };
@@ -619,6 +715,7 @@
                   icon: selectCloudItem.value.icon,
                   moduleUrl: selectCloudItem.value.moduleUrl,
                   type: 'url',
+                  description: selectCloudItem.value.description,
                 },
                 listItemArray.value.length,
               ),
@@ -651,11 +748,14 @@
           title: '',
           icon: '',
           moduleUrl: '',
+          description: '',
         };
         selectCloudItemDialogVisible.value = false;
       };
 
       const returnLevel = (): void => {
+        groupItemDialogVisible.value = false;
+
         currentGroup.value = undefined;
         if (headerActions.length > 1) {
           delete headerActions[1].icon;
@@ -664,34 +764,45 @@
         headerActions.push(headerGroupAction);
       };
 
-      const breadcrumbItems = ref([
-        {
-          title: app.vueI18n.t(
-            'moduleSelector.configEditor.breadcrumbs.overview',
-          ),
-          disabled: false,
-          href: '#',
-        },
-        {
-          title: app.vueI18n.t('moduleSelector.configEditor.breadcrumbs.group'),
-          disabled: true,
-          href: '#',
-        },
-      ]);
-      watch(currentGroup, (currentG) => {
-        if (currentG && currentG.title) {
-          breadcrumbItems.value[1].title = `${app.vueI18n.t('moduleSelector.configEditor.breadcrumbs.group')}: ${currentG.title}`;
-          currentG.name = currentG.title;
+      const isRequired = (v: string): boolean | string => {
+        return v && v.trim() !== ''
+          ? true
+          : 'moduleSelector.configEditor.error';
+      };
+
+      const isFormValid = ref();
+
+      const cancelCurrentGroup = (): void => {
+        const groupIndex = listItemArray.value.findIndex(
+          (item) => item.id === currentGroup.value!.id,
+        );
+        if (selectedGroupItem.title !== '') {
+          const newGroupItem = createListItem(selectedGroupItem, groupIndex);
+          listItemArray.value.splice(groupIndex, 1, newGroupItem);
+        } else {
+          listItemArray.value.splice(groupIndex, 1);
         }
-      });
+
+        groupItemDialogVisible.value = false;
+        currentGroup.value = undefined;
+        if (headerActions.length > 1) {
+          delete headerActions[1].icon;
+          delete headerActions[1].title;
+        }
+        headerActions.push(headerGroupAction);
+      };
+
       return {
+        isFormValid,
         editingItem,
+        selectedGroupItem,
+        groupItemDialogVisible,
+        cancelCurrentGroup,
         selectCloudItem,
         editingItemDialogVisible,
         selectCloudItemDialogVisible,
         localConfig,
         listItemArray,
-        breadcrumbItems,
         currentGroup,
         apply,
         returnLevel,
@@ -702,37 +813,31 @@
         basisModule,
         basisModuleExists,
         headerActions,
-        move({
+        isRequired,
+        moveItem({
           item,
           targetIndex,
         }: {
           item: VcsListItemWithLabel;
           targetIndex: number;
         }): void {
-          if (listItemArray.value && currentGroup.value === undefined) {
-            let target = targetIndex;
-            target = target >= 0 ? target : 0;
-            target =
-              target < listItemArray.value?.length
-                ? target
-                : listItemArray.value.length - 1;
-            const from = listItemArray.value?.indexOf(item);
-            if (from !== target) {
-              listItemArray.value?.splice(from, 1);
-              listItemArray.value?.splice(target, 0, item);
-            }
-          } else if ((currentGroup.value?.cards?.length ?? 0) > 1) {
-            let target = targetIndex;
-            target = target >= 0 ? target : 0;
-            target =
-              target < currentGroup.value!.cards!.length
-                ? target
-                : currentGroup.value!.cards!.length - 1;
-            const from = currentGroup.value!.cards!.indexOf(item);
-            if (from && from !== target) {
-              currentGroup.value!.cards!.splice(from, 1);
-              currentGroup.value!.cards!.splice(target, 0, item);
-            }
+          const from = listItemArray.value?.indexOf(item);
+          if (from !== targetIndex) {
+            listItemArray.value?.splice(from, 1);
+            listItemArray.value?.splice(targetIndex, 0, item);
+          }
+        },
+        moveCard({
+          item,
+          targetIndex,
+        }: {
+          item: VcsListItemWithLabel;
+          targetIndex: number;
+        }): void {
+          const from = currentGroup.value!.cards!.indexOf(item);
+          if (from !== targetIndex) {
+            currentGroup.value?.cards?.splice(from, 1);
+            currentGroup.value?.cards?.splice(targetIndex, 0, item);
           }
         },
       };
@@ -740,8 +845,4 @@
   });
 </script>
 
-<style scoped>
-  .v-breadcrumbs {
-    padding: 16px 0 4px 0;
-  }
-</style>
+<style scoped></style>