@vcmap/module-selector 2.0.1 → 2.0.3

package/src/config/ModuleSelectorConfigEditor.vue

@@ -16,7 +16,7 @@
             <v-col>
               <VcsTextField
                 id="moduleselector-window-title"
-                :placeholder="$t('moduleSelector.title')"
+                :placeholder="$st('moduleSelector.title')"
                 v-model="localConfig.windowTitle"
               />
             </v-col>
@@ -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>
@@ -163,7 +145,7 @@
       heading="moduleSelector.configEditor.heading"
       :start-open="true"
       :header-actions="headerActions"
-      ><!--V-if currentItem group > cards || wenn url oder empty listItems-->
+    >
       <VcsList
         v-if="currentGroup === undefined"
         :items="listItemArray"
@@ -177,17 +159,45 @@
         @item-moved="move"
       />
       <v-dialog
-        v-if="editingItem"
-        :model-value="true"
+        v-model="editingItemDialogVisible"
         width="400"
         :persistent="true"
       >
         <ModuleEditor
           :model-value="editingItem"
-          @close="editingItem = undefined"
+          @close="editingItemDialogVisible = false"
           @submit="updateItem()"
         />
       </v-dialog>
+      <v-dialog
+        v-model="selectCloudItemDialogVisible"
+        width="1000"
+        :persistent="true"
+      >
+        <VcsModuleTable
+          :model-value="selectCloudItem"
+          @close="selectCloudItemDialogVisible = false"
+          @submit="updateCloudItem()"
+        />
+      </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,6 +222,7 @@
     reactive,
     Ref,
     ref,
+    toRaw,
     watch,
   } from 'vue';
   import {
@@ -226,6 +237,7 @@
   import { Module, ModuleSelectorConfig, ModuleType } from '../index';
   import getDefaultOptions from '../defaultOptions.js';
   import WindowPositionSettings from './WindowPositionSettings.vue';
+  import CloudModuleSelector from './CloudModuleSelector.vue';
 
   interface VcsListItemWithLabel extends VcsListItem {
     id: string;
@@ -236,6 +248,7 @@
     cards?: VcsListItemWithLabel[];
   }
 
+  export const windowIdConfigEditor = 'configEditor_window_id';
   export default defineComponent({
     name: 'ModuleSelectorConfigEditor',
     components: {
@@ -253,6 +266,7 @@
       VBreadcrumbs,
       VBreadcrumbsItem,
       WindowPositionSettings,
+      VcsModuleTable: CloudModuleSelector,
     },
     props: {
       getConfig: {
@@ -271,13 +285,27 @@
       const listItemArray: Ref<VcsListItemWithLabel[]> = ref([]);
       const currentGroup: Ref<VcsListItemWithLabel | undefined> =
         ref(undefined);
-      const editingItem: Ref<
-        | { id: string; title: string; icon: string; moduleUrl: string }
-        | 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 selectCloudItemDialogVisible: Ref<boolean> = ref(false);
+      const editingItemDialogVisible: Ref<boolean> = ref(false);
+      const groupItemDialogVisible: Ref<boolean> = ref(false);
       const listItems: Ref<VcsListItemWithLabel[] | undefined> = ref(undefined);
 
-      localConfig.value = { ...getDefaultOptions(), ...props.getConfig() };
+      localConfig.value = {
+        ...getDefaultOptions(),
+        ...props.getConfig(),
+      } as ModuleSelectorConfig;
 
       const basisModule = ref();
 
@@ -299,75 +327,12 @@
       });
       const headerActions = reactive<VcsAction[]>([]);
 
-      function removeIdAndActions(
-        item: VcsListItemWithLabel,
-      ): Module<ModuleType> {
-        if (item.type === 'url') {
-          return {
-            title: item.title,
-            type: item.type,
-            icon: item.icon,
-            moduleUrl: item.moduleUrl || '',
-          } as Module<'url'>;
-        } else {
-          const updatedCards =
-            item.cards?.map((card) => {
-              return {
-                title: card.title,
-                icon: card.icon,
-                moduleUrl: card.moduleUrl,
-                type: card.type,
-              };
-            }) || [];
-          return {
-            title: item.title,
-            type: item.type,
-            icon: item.icon,
-            ...(updatedCards.length ? { cards: updatedCards } : {}),
-          } as Module<'group'>;
-        }
-      }
-
-      const headerGroupAction = {
-        name: 'moduleSelector.configEditor.addGroup',
-        callback(): void {
-          const newGroup = {
-            type: 'group',
-            name: '',
-            id: '',
-            title: 'title',
-            icon: 'icon',
-            cards: [],
-          };
-
-          listItemArray.value?.push(newGroup);
-          currentGroup.value = newGroup;
-
-          const newIndex = listItemArray.value.indexOf(newGroup);
-
-          newGroup.id = `${newGroup.title}-${newIndex}`;
-
-          headerActions.splice(1, 1);
-          if (headerActions.length > 0) {
-            headerActions[0].icon = '$vcsPlus';
-            headerActions[0].title =
-              'moduleSelector.configEditor.TooltipAddModule';
-          }
-        },
-      };
-
-      function removeIdAndActionsFromArray(
-        items: VcsListItemWithLabel[],
-      ): Module<ModuleType>[] {
-        return items.map(removeIdAndActions);
-      }
-
       function createListItem(
         moduleInfo: Module<ModuleType>,
         index: number,
       ): VcsListItemWithLabel {
         const listItemObject: VcsListItemWithLabel = {
-          id: `${moduleInfo.title}-${index}`,
+          id: `${moduleInfo.title || 'undefined'}-${index}`,
           name: moduleInfo.title,
           title: moduleInfo.title,
           icon: moduleInfo.icon,
@@ -411,6 +376,7 @@
                   };
                 }
               }
+              editingItemDialogVisible.value = true;
             },
           });
         }
@@ -426,10 +392,10 @@
                 );
                 if (item) {
                   currentGroup.value = item;
-                  headerActions.splice(1, 1);
-                  if (headerActions.length > 0) {
-                    headerActions[0].icon = '$vcsPlus';
-                    headerActions[0].title =
+                  headerActions.splice(2, 1);
+                  if (headerActions.length > 1) {
+                    headerActions[1].icon = '$vcsPlus';
+                    headerActions[1].title =
                       'moduleSelector.configEditor.TooltipAddModule';
                   }
                 }
@@ -459,6 +425,80 @@
         return listItemObject;
       }
 
+      headerActions.push({
+        name: 'moduleSelector.configEditor.addFromCloud',
+        icon: '$vcsImport',
+        callback(): void {
+          selectCloudItem.value = {
+            id: '',
+            title: '',
+            icon: '',
+            moduleUrl: '',
+          };
+          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 {
+          const newGroup = {
+            type: 'group',
+            title: '',
+            icon: '',
+            cards: [],
+          };
+
+          groupItemDialogVisible.value = true;
+          const indexItem = listItemArray.value?.push(
+            createListItem(
+              newGroup as Module<'group'>,
+              listItemArray.value.length,
+            ),
+          );
+
+          currentGroup.value = listItemArray.value[indexItem - 1];
+
+          headerActions.splice(2, 1);
+          if (headerActions.length > 1) {
+            headerActions[1].icon = '$vcsPlus';
+            headerActions[1].title =
+              'moduleSelector.configEditor.TooltipAddModule';
+          }
+        },
+      };
+
+      function removeIdAndActionsFromArray(
+        items: VcsListItemWithLabel[],
+      ): Module<ModuleType>[] {
+        return items.map(removeIdAndActions);
+      }
+
       if (localConfig.value?.modules) {
         listItemArray.value = localConfig.value.modules.map(createListItem);
       }
@@ -469,10 +509,11 @@
           callback(): void {
             editingItem.value = {
               id: '',
-              title: 'title',
-              icon: 'icon',
-              moduleUrl: 'url',
+              title: '',
+              icon: '',
+              moduleUrl: '',
             };
+            editingItemDialogVisible.value = true;
           },
         },
         headerGroupAction,
@@ -488,11 +529,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 => {
@@ -503,35 +560,30 @@
                 (i) => i.id === editingItem.value?.id,
               );
               if (item) {
-                item.title = editingItem.value.title;
-                item.icon = editingItem.value.icon;
-                item.moduleUrl = editingItem.value.moduleUrl;
+                Object.assign(item, {
+                  ...editingItem.value,
+                });
               }
             } else {
-              listItemArray.value.push({
-                id: `${editingItem.value.title}-${listItemArray.value.length}`,
-                title: editingItem.value.title,
-                name: editingItem.value.title,
-                icon: editingItem.value.icon,
-                moduleUrl: editingItem.value.moduleUrl,
-                type: 'url',
-              });
-
-              const filteredItems = removeIdAndActionsFromArray(
-                listItemArray.value,
+              listItemArray.value.push(
+                createListItem(
+                  {
+                    ...editingItem.value,
+                    type: 'url',
+                  },
+                  listItemArray.value.length,
+                ),
               );
-
-              listItemArray.value = filteredItems.map(createListItem);
             }
           }
         } else if (editingItem.value && editingItem.value?.id !== '') {
           const item = currentGroup.value.cards!.find(
-            (i) => i.id === editingItem.value!.id,
+            (i) => i.id === editingItem.value.id,
           );
           if (item) {
-            item.title = editingItem.value.title;
-            item.icon = editingItem.value.icon;
-            item.moduleUrl = editingItem.value.moduleUrl;
+            Object.assign(item, {
+              ...editingItem.value,
+            });
           }
 
           let groupId;
@@ -544,19 +596,61 @@
             (i) => i.id === groupId,
           );
         } else {
-          currentGroup.value.cards!.push({
-            id: `${editingItem.value!.title}-${currentGroup.value?.cards?.length}`,
-            title: editingItem.value!.title,
-            name: editingItem.value!.title,
-            icon: editingItem.value!.icon,
-            moduleUrl: editingItem.value!.moduleUrl,
-            type: 'url',
-          });
-          const filteredItems = removeIdAndActionsFromArray(
-            listItemArray.value,
+          currentGroup.value.cards!.push(
+            createListItem(
+              {
+                ...editingItem.value,
+                type: 'url',
+              },
+              currentGroup.value.cards!.length,
+            ),
+          );
+
+          let groupId;
+          if (currentGroup.value?.id || currentGroup.value?.id !== '') {
+            groupId = currentGroup.value.id;
+          } else {
+            groupId = `${currentGroup.value?.title}-${listItemArray.value.length - 1}`;
+          }
+          currentGroup.value = listItemArray.value?.find(
+            (item) => item.id === groupId,
           );
+        }
+
+        editingItem.value = {
+          id: '',
+          title: '',
+          icon: '',
+          moduleUrl: '',
+        };
+        editingItemDialogVisible.value = false;
+      };
 
-          listItemArray.value = filteredItems.map(createListItem);
+      const updateCloudItem = (): void => {
+        if (currentGroup.value === undefined) {
+          if (selectCloudItem.value) {
+            listItemArray.value.push(
+              createListItem(
+                {
+                  title: selectCloudItem.value.title,
+                  icon: selectCloudItem.value.icon,
+                  moduleUrl: selectCloudItem.value.moduleUrl,
+                  type: 'url',
+                },
+                listItemArray.value.length,
+              ),
+            );
+          }
+        } else {
+          currentGroup.value.cards!.push(
+            createListItem(
+              {
+                ...selectCloudItem.value,
+                type: 'url',
+              },
+              currentGroup.value.cards!.length,
+            ),
+          );
 
           let groupId;
           if (currentGroup.value?.id || currentGroup.value?.id !== '') {
@@ -569,14 +663,20 @@
           );
         }
 
-        editingItem.value = undefined;
+        selectCloudItem.value = {
+          id: '',
+          title: '',
+          icon: '',
+          moduleUrl: '',
+        };
+        selectCloudItemDialogVisible.value = false;
       };
 
       const returnLevel = (): void => {
         currentGroup.value = undefined;
-        if (headerActions.length > 0) {
-          delete headerActions[0].icon;
-          delete headerActions[0].title;
+        if (headerActions.length > 1) {
+          delete headerActions[1].icon;
+          delete headerActions[1].title;
         }
         headerActions.push(headerGroupAction);
       };
@@ -603,6 +703,9 @@
       });
       return {
         editingItem,
+        selectCloudItem,
+        editingItemDialogVisible,
+        selectCloudItemDialogVisible,
         localConfig,
         listItemArray,
         breadcrumbItems,
@@ -610,6 +713,7 @@
         apply,
         returnLevel,
         updateItem,
+        updateCloudItem,
         level,
         listItems: listItems as unknown as unknown[],
         basisModule,

package/src/config/setupPublisherSDK.ts

@@ -0,0 +1,25 @@
+import { authorize, setServerUrl } from '@vcsuite/publisher-sdk';
+import { getLogger } from '@vcsuite/logger';
+import { name } from '../../package.json';
+import { ModuleSelectorConfig } from '../index';
+
+// eslint-disable-next-line import/prefer-default-export
+export function setupPublisherSDK(options: ModuleSelectorConfig): void {
+  try {
+    if (options.serverUrl) {
+      const serverUrl = new URL(
+        options.serverUrl,
+        window.location.href,
+      ).toString();
+      setServerUrl(serverUrl);
+
+      const token = options.token || localStorage.getItem('Meteor.loginToken');
+      if (token) {
+        authorize(token);
+        getLogger(name).info('Publisher connection successful');
+      }
+    }
+  } catch (err) {
+    getLogger(name).error('Failed to connect to publisher', err);
+  }
+}

package/src/defaultOptions.ts

@@ -11,4 +11,8 @@ export default (): ModuleSelectorConfig => ({
   },
   basisModule: undefined,
   modules: [],
+  serverUrl: '',
+  projectId: '',
+  appId: '',
+  token: '',
 });

package/src/index.ts

@@ -33,6 +33,10 @@ export type ModuleSelectorConfig = {
   windowTitle?: string;
   isActiveOnStart?: boolean;
   requireModuleSelection?: boolean;
+  serverUrl?: string;
+  projectId?: string;
+  appId?: string;
+  token?: string;
   position?: WindowPositionOptions;
   basisModule?: BasisModule;
   modules?: Array<Module<ModuleType>>;
@@ -43,7 +47,7 @@ export type PluginState = {
   smi?: number | undefined | null;
   // selectedNestedModuleIndex
   snmi?: number | undefined | null;
-  // module elector window open
+  // module selector window open
   w?: boolean;
   modules?: Array<Module<ModuleType>>;
 };
@@ -120,8 +124,8 @@ export default function plugin(
             this.selectedMainModuleIndex.value,
             this.selectedNestedModuleIndex.value,
             app,
-            configInput.modules!,
-            configInput.basisModule,
+            this.config.modules,
+            this.config.basisModule,
           );
         }
       }
@@ -146,7 +150,7 @@ export default function plugin(
         ButtonLocation.PROJECT,
       );
 
-      if ((state && state.w) || (!state && configInput.isActiveOnStart)) {
+      if ((state && state.w) || (!state && this.config.isActiveOnStart)) {
         app.windowManager.add(moduleSelectorComponent, name);
       }
 
@@ -205,6 +209,22 @@ export default function plugin(
         serial.basisModule = this.config.basisModule;
       }
 
+      if (configInput.serverUrl != null) {
+        serial.serverUrl = configInput.serverUrl;
+      }
+
+      if (configInput.projectId != null) {
+        serial.projectId = configInput.projectId;
+      }
+
+      if (configInput.appId != null) {
+        serial.appId = configInput.appId;
+      }
+
+      if (configInput.token != null) {
+        serial.token = configInput.token;
+      }
+
       return serial;
     },
     i18n: {
@@ -215,6 +235,20 @@ export default function plugin(
           startButton: 'Anwendung starten',
           cardBack: 'Zurück',
           configEditor: {
+            moduleCloudPicker: {
+              searchName: 'Suche nach Name...',
+              continue: 'Weiter',
+              back: 'Zurück',
+              headers: {
+                name: 'Modul Name',
+                type: 'Typ',
+                description: 'Beschreibung',
+                createdAt: 'Erzeugt am',
+                updatedAt: 'Aktualisiert am',
+                createdBy: 'Erzeugt von',
+                updatedBy: 'Aktualisiert von',
+              },
+            },
             TooltipAddModule: 'Modul hinzufügen',
             TooltipEditModule: 'Modul bearbeiten',
             TooltipEditGroup: 'Modul-Gruppe bearbeiten',
@@ -248,6 +282,20 @@ export default function plugin(
           startButton: 'Start application',
           cardBack: 'Back',
           configEditor: {
+            moduleCloudPicker: {
+              searchName: 'Search for name...',
+              continue: 'Continue',
+              back: 'Back',
+              headers: {
+                name: 'Module name',
+                type: 'Type',
+                description: 'Description',
+                createdAt: 'Created at',
+                updatedAt: 'Updated at',
+                createdBy: 'Created by',
+                updatedBy: 'Updated by',
+              },
+            },
             TooltipAddModule: 'Add module',
             TooltipEditModule: 'Edit module',
             TooltipEditGroup: 'Edit module group',