@vcmap/module-selector 2.0.6 → 4.0.0

package/src/config/WindowPositionSettings.vue

@@ -1,53 +1,43 @@
 <template>
   <v-container class="py-0 px-1">
     <v-row
-      no-gutters
       v-for="{ key, checkbox, input, placeholder } in inputs"
       :key="key"
+      no-gutters
     >
       <v-col>
         <VcsCheckbox
-          :label="`appConfigurator.editors.featureInfo.window.position.${key}`"
           v-model="checkbox.value"
+          :label="`appConfigurator.editors.featureInfo.window.position.${key}`"
         />
       </v-col>
       <v-col>
         <VcsTextField
+          v-model.trim="input.value"
           clearable
           :disabled="!checkbox.value"
           :placeholder="placeholder"
-          v-model.trim="input.value"
         />
       </v-col>
     </v-row>
   </v-container>
 </template>
+
 <script lang="ts">
-  import {
-    computed,
-    defineComponent,
-    PropType,
-    Ref,
-    WritableComputedRef,
-  } from 'vue';
+  import type { PropType, WritableComputedRef } from 'vue';
+  import { computed, defineComponent } from 'vue';
   import { VContainer, VRow, VCol } from 'vuetify/components';
+  import type { WindowPositionOptions } from '@vcmap/ui';
   import {
     useModelHasProperty,
     useProxiedComplexModel,
     VcsCheckbox,
     VcsTextField,
-    WindowPositionOptions,
   } from '@vcmap/ui';
 
   export default defineComponent({
     name: 'WindowPositionSettings',
-    components: {
-      VContainer,
-      VRow,
-      VCol,
-      VcsCheckbox,
-      VcsTextField,
-    },
+    components: { VContainer, VRow, VCol, VcsCheckbox, VcsTextField },
     props: {
       modelValue: {
         type: Object as PropType<WindowPositionOptions>,
@@ -59,7 +49,7 @@
       },
     },
     setup(props, { emit }) {
-      const localValue: Ref<WindowPositionOptions> = useProxiedComplexModel(
+      const localValue = useProxiedComplexModel<WindowPositionOptions>(
         props,
         'modelValue',
         emit,
@@ -83,6 +73,7 @@
             };
             return acc;
           },
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
           {} as Record<
             keyof WindowPositionOptions,
             {
@@ -95,9 +86,7 @@
         );
       });
 
-      return {
-        inputs,
-      };
+      return { inputs };
     },
   });
 </script>

package/src/config/setupPublisherSDK.ts

@@ -1,9 +1,8 @@
 import { authorize, setServerUrl } from '@vcsuite/publisher-sdk';
 import { getLogger } from '@vcsuite/logger';
 import { name } from '../../package.json';
-import { ModuleSelectorConfig } from '../index';
+import type { ModuleSelectorConfig } from '../index';
 
-// eslint-disable-next-line import/prefer-default-export
 export function setupPublisherSDK(options: ModuleSelectorConfig): void {
   try {
     if (options.serverUrl) {

package/src/defaultOptions.ts

@@ -1,4 +1,4 @@
-import { ModuleSelectorConfig } from './index.js';
+import type { ModuleSelectorConfig } from './index.js';
 
 export default (): ModuleSelectorConfig => ({
   windowTitle: 'moduleSelector.title',

package/src/index.ts

@@ -1,26 +1,25 @@
-import {
-  ButtonLocation,
-  createToggleAction,
+import type {
   PluginConfigEditor,
   VcsPlugin,
   VcsUiApp,
   WindowPositionOptions,
-  WindowSlot,
 } from '@vcmap/ui';
-import { Ref, ref } from 'vue';
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import type { Ref } from 'vue';
+import { ref } from 'vue';
 import { parseBoolean, parseInteger } from '@vcsuite/parsers';
 import equal from 'fast-deep-equal';
 import { mapVersion, name, version } from '../package.json';
 import moduleSelector from './ModuleSelector.vue';
 import getDefaultOptions from './defaultOptions.js';
 import ModuleSelectorConfigEditor from './config/ModuleSelectorConfigEditor.vue';
-import { startApplication, windowIdModuleSelector } from './moduleHelper';
+import {
+  loadModule,
+  unloadModule,
+  windowIdModuleSelector,
+} from './moduleHelper';
 
-export type BasisModule = {
-  title: string;
-  icon: string;
-  description?: string;
-};
+export type BasisModule = { title: string; icon: string; description?: string };
 
 export type ModuleType = 'group' | 'url';
 
@@ -60,12 +59,17 @@ export type ModuleSelectorPlugin = VcsPlugin<
   readonly config: ModuleSelectorConfig;
   selectedMainModuleIndex: Ref<number | undefined | null>;
   selectedNestedModuleIndex: Ref<number | undefined | null>;
+  startApplication(
+    mainModuleIndex: number | undefined | null,
+    nestedModuleIndex: number | undefined | null,
+  ): Promise<void>;
 };
 
 export default function plugin(
   configInput: ModuleSelectorConfig,
 ): ModuleSelectorPlugin {
   let app: VcsUiApp;
+  let moduleId: string | undefined;
   return {
     get name(): string {
       return name;
@@ -77,7 +81,30 @@ export default function plugin(
       return mapVersion;
     },
     get config(): ModuleSelectorConfig {
-      return { ...getDefaultOptions(), ...configInput } as ModuleSelectorConfig;
+      return { ...getDefaultOptions(), ...configInput };
+    },
+    async startApplication(
+      mainModuleIndex: number | undefined | null,
+      nestedModuleIndex: number | undefined | null,
+    ): Promise<void> {
+      await unloadModule(app, moduleId);
+      moduleId = undefined;
+
+      if (mainModuleIndex === null && !this.config.basisModule) {
+        app.windowManager.remove(windowIdModuleSelector);
+        return;
+      }
+
+      const mainModule = this.config.modules?.[mainModuleIndex!];
+      const moduleUrl =
+        mainModule?.type === 'group'
+          ? mainModule.cards?.[nestedModuleIndex!]?.moduleUrl
+          : mainModule?.moduleUrl;
+
+      if (moduleUrl) {
+        moduleId = await loadModule(moduleUrl, app);
+      }
+      app.windowManager.remove(windowIdModuleSelector);
     },
     selectedMainModuleIndex: ref(undefined),
     selectedNestedModuleIndex: ref(undefined),
@@ -124,19 +151,16 @@ export default function plugin(
         }
 
         if (!w) {
-          await startApplication(
+          await this.startApplication(
             this.selectedMainModuleIndex.value,
             this.selectedNestedModuleIndex.value,
-            app,
-            this.config.modules,
-            this.config.basisModule,
           );
         }
       }
 
       const { action } = createToggleAction(
         {
-          name: 'moduleSelector',
+          name: 'moduleSelector.title',
           title: 'moduleSelector.title',
           icon: 'mdi-view-grid',
         },
@@ -146,12 +170,10 @@ export default function plugin(
       );
 
       app.navbarManager.add(
-        {
-          id: action.name,
-          action,
-        },
+        { id: action.name, action },
         name,
         ButtonLocation.PROJECT,
+        { desktop: true, tablet: true, mobile: true },
       );
 
       if ((state && state.w) || (!state && this.config.isActiveOnStart)) {

package/src/moduleHelper.ts

@@ -1,12 +1,10 @@
-// eslint-disable-next-line import/prefer-default-export
 import { VcsModule } from '@vcmap/core';
-import { VcsUiApp } from '@vcmap/ui';
-import type { BasisModule, Module, ModuleType } from './index';
+import type { VcsUiApp } from '@vcmap/ui';
 
 export async function loadModule(
   moduleUrl: string,
   app: VcsUiApp,
-): Promise<void> {
+): Promise<string | undefined> {
   const config = await fetch(moduleUrl, {
     method: 'GET',
   }).then((response) => {
@@ -17,18 +15,23 @@ export async function loadModule(
   });
 
   if (config) {
-    config._id = `moduleSelector_module_id`;
     const module = new VcsModule(config);
     await app.addModule(module);
+    return module._id;
   }
+  return undefined;
 }
 
-export async function unloadModule(app: VcsUiApp): Promise<void> {
-  const moduleId = `moduleSelector_module_id`;
+export async function unloadModule(
+  app: VcsUiApp,
+  moduleId?: string,
+): Promise<void> {
   const activeMapName = app.maps.activeMap?.name;
-  const module = app.getModuleById(moduleId);
-  if (module) {
-    await app.removeModule(moduleId);
+  if (moduleId) {
+    const module = app.getModuleById(moduleId);
+    if (module) {
+      await app.removeModule(moduleId);
+    }
   }
   if (!app.maps.activeMap) {
     await app.maps.setActiveMap(activeMapName || [...app.maps][0]?.name);
@@ -36,31 +39,3 @@ export async function unloadModule(app: VcsUiApp): Promise<void> {
 }
 
 export const windowIdModuleSelector = 'moduleSelector_window_id';
-
-export async function startApplication(
-  mainModuleIndex: number | undefined | null,
-  nestedModuleIndex: number | undefined | null,
-  app: VcsUiApp,
-  modules: Module<ModuleType>[],
-  basisModule?: BasisModule,
-): Promise<void> {
-  await unloadModule(app);
-
-  if (mainModuleIndex === null && !basisModule) {
-    app.windowManager.remove(windowIdModuleSelector);
-    return;
-  }
-
-  const mainModule = modules[mainModuleIndex!];
-  const nestedModule =
-    mainModule?.type === 'group'
-      ? mainModule.cards?.[nestedModuleIndex!]
-      : null;
-
-  if (nestedModule?.moduleUrl) {
-    await loadModule(nestedModule.moduleUrl, app);
-  } else if (mainModule?.type === 'url') {
-    await loadModule(mainModule.moduleUrl, app);
-  }
-  app.windowManager.remove(windowIdModuleSelector);
-}