@vcmap/module-selector 2.0.0 → 2.0.1

package/src/config/WindowPositionSettings.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-container class="py-0 px-1">
+    <v-row
+      no-gutters
+      v-for="{ key, checkbox, input, placeholder } in inputs"
+      :key="key"
+    >
+      <v-col>
+        <VcsCheckbox
+          :label="`appConfigurator.editors.featureInfo.window.position.${key}`"
+          v-model="checkbox.value"
+        />
+      </v-col>
+      <v-col>
+        <VcsTextField
+          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 { VContainer, VRow, VCol } from 'vuetify/components';
+  import {
+    useModelHasProperty,
+    useProxiedComplexModel,
+    VcsCheckbox,
+    VcsTextField,
+    WindowPositionOptions,
+  } from '@vcmap/ui';
+
+  export default defineComponent({
+    name: 'WindowPositionSettings',
+    components: {
+      VContainer,
+      VRow,
+      VCol,
+      VcsCheckbox,
+      VcsTextField,
+    },
+    props: {
+      modelValue: {
+        type: Object as PropType<WindowPositionOptions>,
+        required: true,
+      },
+      positionKeys: {
+        type: Array as PropType<(keyof WindowPositionOptions)[]>,
+        default: () => ['height', 'maxHeight', 'width', 'maxWidth'],
+      },
+    },
+    setup(props, { emit }) {
+      const localValue: Ref<WindowPositionOptions> = useProxiedComplexModel(
+        props,
+        'modelValue',
+        emit,
+      );
+
+      const inputs = computed(() => {
+        return props.positionKeys.reduce(
+          (acc, key) => {
+            acc[key] = {
+              key,
+              checkbox: useModelHasProperty(localValue, key, null),
+              input: computed({
+                get() {
+                  return localValue.value[key];
+                },
+                set(value) {
+                  localValue.value[key] = value;
+                },
+              }),
+              placeholder: 'auto',
+            };
+            return acc;
+          },
+          {} as Record<
+            keyof WindowPositionOptions,
+            {
+              key: keyof WindowPositionOptions;
+              checkbox: WritableComputedRef<boolean>;
+              input: WritableComputedRef<string | number | undefined>;
+              placeholder: string | null | undefined;
+            }
+          >,
+        );
+      });
+
+      return {
+        inputs,
+      };
+    },
+  });
+</script>
+
+<style scoped></style>

package/src/defaultOptions.ts

@@ -2,10 +2,13 @@ import { ModuleSelectorConfig } from './index.js';
 
 export default (): ModuleSelectorConfig => ({
   windowTitle: 'moduleSelector.title',
+  isActiveOnStart: true,
+  requireModuleSelection: false,
   position: {
     left: '33%',
     right: '33%',
     top: '10%',
   },
+  basisModule: undefined,
   modules: [],
 });

package/src/index.ts

@@ -1,15 +1,20 @@
 import {
+  ButtonLocation,
+  createToggleAction,
+  PluginConfigEditor,
   VcsPlugin,
   VcsUiApp,
-  WindowSlot,
-  ButtonLocation,
   WindowPositionOptions,
-  createToggleAction,
+  WindowSlot,
 } from '@vcmap/ui';
 import { Ref, ref } from 'vue';
-import { name, version, mapVersion } from '../package.json';
-import moduleSelector, { windowIdModuleSelector } from './ModuleSelector.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';
 
 export type BasisModule = {
   title: string;
@@ -24,19 +29,29 @@ export type Module<T extends ModuleType> = T extends 'group'
     ? BasisModule & { moduleUrl: string; type: T }
     : never;
 
-type PluginConfig = Record<never, never>;
-type PluginState = Record<never, never>;
-
-export type ModuleSelectorConfig = PluginConfig & {
+export type ModuleSelectorConfig = {
   windowTitle?: string;
   isActiveOnStart?: boolean;
   requireModuleSelection?: boolean;
   position?: WindowPositionOptions;
   basisModule?: BasisModule;
-  modules: Array<Module<ModuleType>>;
+  modules?: Array<Module<ModuleType>>;
 };
 
-export type ModuleSelectorPlugin = VcsPlugin<PluginConfig, PluginState> & {
+export type PluginState = {
+  // selectedMainModuleIndex
+  smi?: number | undefined | null;
+  // selectedNestedModuleIndex
+  snmi?: number | undefined | null;
+  // module elector window open
+  w?: boolean;
+  modules?: Array<Module<ModuleType>>;
+};
+
+export type ModuleSelectorPlugin = VcsPlugin<
+  Partial<ModuleSelectorConfig>,
+  PluginState
+> & {
   readonly config: ModuleSelectorConfig;
   selectedMainModuleIndex: Ref<number | undefined | null>;
   selectedNestedModuleIndex: Ref<number | undefined | null>;
@@ -45,6 +60,7 @@ export type ModuleSelectorPlugin = VcsPlugin<PluginConfig, PluginState> & {
 export default function plugin(
   configInput: ModuleSelectorConfig,
 ): ModuleSelectorPlugin {
+  let app: VcsUiApp;
   return {
     get name(): string {
       return name;
@@ -60,7 +76,11 @@ export default function plugin(
     },
     selectedMainModuleIndex: ref(undefined),
     selectedNestedModuleIndex: ref(undefined),
-    initialize(vcsUiApp: VcsUiApp): Promise<void> {
+    async initialize(
+      vcsUiApp: VcsUiApp,
+      state: PluginState | undefined,
+    ): Promise<void> {
+      app = vcsUiApp;
       const moduleSelectorComponent = {
         id: windowIdModuleSelector,
         component: moduleSelector,
@@ -68,6 +88,7 @@ export default function plugin(
         position: this.config.position,
         state: {
           headerTitle: this.config.windowTitle,
+          infoUrlCallback: app.getHelpUrlCallback('/tools/moduleSelector.html'),
         },
         props: {
           modules: this.config.modules,
@@ -75,6 +96,35 @@ export default function plugin(
           requireModuleSelection: this.config.requireModuleSelection,
         },
       };
+      if (state) {
+        const smi = parseInteger(state.smi);
+        const snmi = parseInteger(state.snmi);
+        const w = parseBoolean(state.w);
+        const { modules } = this.config;
+
+        if (smi !== undefined && smi < modules?.length) {
+          this.selectedMainModuleIndex.value = smi;
+          const selectedModule = modules[smi];
+
+          if (
+            snmi !== undefined &&
+            selectedModule?.type === 'group' &&
+            snmi < selectedModule?.cards?.length
+          ) {
+            this.selectedNestedModuleIndex.value = snmi;
+          }
+        }
+
+        if (!w) {
+          await startApplication(
+            this.selectedMainModuleIndex.value,
+            this.selectedNestedModuleIndex.value,
+            app,
+            configInput.modules!,
+            configInput.basisModule,
+          );
+        }
+      }
 
       const { action } = createToggleAction(
         {
@@ -83,11 +133,11 @@ export default function plugin(
           icon: 'mdi-view-grid',
         },
         moduleSelectorComponent,
-        vcsUiApp.windowManager,
+        app.windowManager,
         name,
       );
 
-      vcsUiApp.navbarManager.add(
+      app.navbarManager.add(
         {
           id: action.name,
           action,
@@ -96,41 +146,132 @@ export default function plugin(
         ButtonLocation.PROJECT,
       );
 
-      if (configInput.isActiveOnStart) {
-        vcsUiApp.windowManager.add(moduleSelectorComponent, name);
+      if ((state && state.w) || (!state && configInput.isActiveOnStart)) {
+        app.windowManager.add(moduleSelectorComponent, name);
       }
 
       return Promise.resolve();
     },
     getDefaultOptions,
+    getState(): PluginState {
+      const smi = this.selectedMainModuleIndex?.value;
+      const snmi = this.selectedNestedModuleIndex?.value;
+      const windowState = app.windowManager.has(windowIdModuleSelector);
+      const isActive = this.config.isActiveOnStart;
+
+      return smi !== undefined || snmi !== undefined || windowState !== isActive
+        ? { smi, snmi, w: windowState }
+        : {};
+    },
+    getConfigEditors(): PluginConfigEditor<object>[] {
+      return [
+        {
+          component: ModuleSelectorConfigEditor,
+          title: 'moduleSelector.name',
+          infoUrlCallback: app.getHelpUrlCallback(
+            '/components/plugins/moduleSelectorConfig.html',
+            'app-configurator',
+          ),
+        },
+      ];
+    },
     toJSON(): Partial<ModuleSelectorConfig> {
       const serial: Partial<ModuleSelectorConfig> = {};
-      if (configInput.windowTitle != null) {
-        serial.windowTitle = configInput.windowTitle;
+      const defaultOptions = getDefaultOptions();
+      if (this.config.windowTitle !== defaultOptions.windowTitle) {
+        serial.windowTitle = this.config.windowTitle;
+      }
+
+      if (this.config.isActiveOnStart !== defaultOptions.isActiveOnStart) {
+        serial.isActiveOnStart = this.config.isActiveOnStart;
+      }
+
+      if (
+        this.config.requireModuleSelection !==
+        defaultOptions.requireModuleSelection
+      ) {
+        serial.requireModuleSelection = this.config.requireModuleSelection;
       }
 
-      if (configInput.position != null) {
-        serial.position = configInput.position;
+      if (!equal(this.config.position, defaultOptions.position)) {
+        serial.position = this.config.position;
       }
 
-      if (configInput.modules != null) {
-        serial.modules = configInput.modules;
+      if (!equal(this.config.modules, defaultOptions.modules)) {
+        serial.modules = this.config.modules;
       }
+
+      if (!equal(this.config.basisModule, defaultOptions.basisModule)) {
+        serial.basisModule = this.config.basisModule;
+      }
+
       return serial;
     },
     i18n: {
       de: {
         moduleSelector: {
+          name: 'Modul Auswahl Editor',
           title: 'Themenkartenauswahl',
           startButton: 'Anwendung starten',
           cardBack: 'Zurück',
+          configEditor: {
+            TooltipAddModule: 'Modul hinzufügen',
+            TooltipEditModule: 'Modul bearbeiten',
+            TooltipEditGroup: 'Modul-Gruppe bearbeiten',
+            TooltipDeleteMG: 'Modul/Gruppe löschen',
+            error: 'Bitte tragen Sie einen Namen ein',
+            editorError: 'Bitte füllen Sie das Feld aus',
+            breadcrumbs: { overview: 'Übersicht', group: 'Gruppe' },
+            heading: 'Themen- & Modulzuordnung',
+            baseModule: 'Basismodul',
+            baseModuleCheckbox: 'Basismodul anzeigen',
+            title: 'Titel',
+            add: 'Module hinzufügen',
+            addGroup: 'Module Gruppe hinzufügen',
+            moduleName: 'Module Name',
+            moduleIcon: 'Icon Name',
+            moduleUrl: 'Module URL',
+            groupName: 'Gruppen Name',
+            back: 'Zurück',
+            general: 'Allgemeine Einstellungen',
+            isActiveOnStart: 'Themenkartenauswahl beim Start der Karte zeigen',
+            requireModuleSelection: 'Modulauswahl erforderlich machen',
+            windowTitle: 'Fenster Titel',
+            windowPosition: 'Fenster Position',
+          },
         },
       },
       en: {
         moduleSelector: {
+          name: 'Module Selector Editor',
           title: 'Theme map selection',
           startButton: 'Start application',
           cardBack: 'Back',
+          configEditor: {
+            TooltipAddModule: 'Add module',
+            TooltipEditModule: 'Edit module',
+            TooltipEditGroup: 'Edit module group',
+            TooltipDeleteMG: 'Delete module/group',
+            error: 'Please add a name',
+            editorError: 'Please fill in the field',
+            breadcrumbs: { overview: 'Overview', group: 'Group' },
+            heading: 'Topic & module assignment',
+            baseModule: 'Base module',
+            baseModuleCheckbox: 'Show base module',
+            title: 'Title',
+            add: 'Add module',
+            addGroup: 'Add module Group',
+            moduleName: 'Module name',
+            moduleIcon: 'Icon name',
+            moduleUrl: 'Module URL',
+            groupName: 'Group name',
+            back: 'Back',
+            general: 'General settings',
+            isActiveOnStart: 'Show theme map selection on map start',
+            requireModuleSelection: 'Require module selection',
+            windowTitle: 'Window title',
+            windowPosition: 'Window position',
+          },
         },
       },
     },

package/src/moduleHelper.ts

@@ -1,6 +1,7 @@
 // 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';
 
 export async function loadModule(
   moduleUrl: string,
@@ -33,3 +34,33 @@ export async function unloadModule(app: VcsUiApp): Promise<void> {
     await app.maps.setActiveMap(activeMapName || [...app.maps][0]?.name);
   }
 }
+
+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);
+}