@vcmap/ui 5.0.1 → 5.1.0-rc.1

package/plugins/@vcmap-show-case/category-tester/src/CategoriesExample.vue

@@ -4,7 +4,7 @@
       <v-expansion-panels
         accordion
         multiple
-        v-if="componentIds.length > 0"
+        v-if="!componentView && componentIds.length > 0"
         class="rounded-0"
       >
         <collection-component-provider
@@ -12,27 +12,79 @@
           :component-id="componentId"
           :key="componentId"
         >
-          <collection-component-options />
+          <collection-component @openList="openList" />
+          <v-dialog v-model="optionsDialog" width="300">
+            <v-card class="pa-2">
+              <CollectionComponentOptions />
+            </v-card>
+          </v-dialog>
         </collection-component-provider>
       </v-expansion-panels>
+      <collection-component-provider
+        v-if="componentView"
+        :component-id="componentView"
+      >
+        <collection-component-list @closeList="closeList" />
+        <v-dialog v-model="optionsDialog" width="300">
+          <v-card class="pa-2">
+            <CollectionComponentOptions />
+          </v-card>
+        </v-dialog>
+      </collection-component-provider>
     </v-container>
     <div class="d-flex gap-2 px-2 pt-2 pb-1">
       <div class="d-flex gap-2 w-full justify-end">
-        <VcsFormButton @click="newDialog = true" variant="filled"
+        <VcsFormButton @click="newCategory.dialog = true" variant="filled"
           >Request Category</VcsFormButton
         >
-        <VcsFormButton @click="requestFoobar">Request Foobar</VcsFormButton>
         <VcsFormButton @click="clear">Clear</VcsFormButton>
       </div>
     </div>
-    <v-dialog v-model="newDialog" width="200">
+    <v-dialog v-model="newItem.dialog" width="300">
+      <v-card class="pa-2">
+        <v-card-title>{{ newItem.categoryName }}</v-card-title>
+        <v-form @submit.prevent="addItem">
+          <vcs-text-area v-model="newItem.config" />
+          <vcs-form-button type="submit"> Add Item </vcs-form-button>
+        </v-form>
+      </v-card>
+    </v-dialog>
+    <v-dialog v-model="newCategory.dialog" width="200">
       <v-card class="pa-2">
         <v-form @submit.prevent="requestCategory">
           <VcsTextField
-            v-model="categoryName"
-            :rules="[(value) => value !== '' || 'Please provide a name!']"
+            v-model="newCategory.name"
+            placeholder="category name"
+            :rules="[
+              (value) => value !== '' || 'Please provide a name!',
+              hasCategory,
+            ]"
+          />
+          <VcsCheckbox
+            label="add Foobar items"
+            v-model="newCategory.addItems"
+          />
+          <VcsCheckbox
+            label="Add & UI Option actions"
+            v-model="newCategory.addActions"
           />
-          <VcsFormButton type="submit"> Request </VcsFormButton>
+          <VcsCheckbox
+            label="Import & Export actions"
+            v-model="newCategory.addImportExport"
+          />
+          <VcsCheckbox
+            label="add Foobar Editor"
+            v-model="newCategory.addEditors"
+          />
+          <VcsCheckbox
+            label="selection based editors"
+            class="mx-2"
+            v-if="newCategory.addEditors"
+            v-model="newCategory.selectionBased"
+          />
+          <VcsFormButton type="submit" :disabled="!newCategory.name">
+            Request
+          </VcsFormButton>
         </v-form>
       </v-card>
     </v-dialog>
@@ -40,73 +92,85 @@
 </template>
 
 <script>
-  import { inject, provide, ref } from 'vue';
+  import { inject, onUnmounted, provide, ref } from 'vue';
   import {
     VcsFormButton,
     VcsTextField,
+    VcsCheckbox,
     CollectionComponentProvider,
+    CollectionComponent,
+    CollectionComponentList,
+    VcsTextArea,
+    createListExportAction,
+    createListImportAction,
+    makeEditorCollectionComponentClass,
+    isEditorCollectionComponentClass,
   } from '@vcmap/ui';
   import {
     VContainer,
     VExpansionPanels,
     VCard,
+    VCardTitle,
     VForm,
     VDialog,
   } from 'vuetify/lib';
+  import { getObjectFromClassRegistry } from '@vcmap/core';
   import { name as owner } from '../package.json';
   import CollectionComponentOptions from './CollectionComponentOptions.vue';
+  import {
+    exportCategoryCallback,
+    importCategoryCallback,
+  } from './importExportHelper.js';
+  import FoobarEditor from './FoobarEditor.vue';
 
   const foobarMappingFunction = (item, c, listItem) => {
     listItem.title = item.name;
-    listItem.actions = [{ name: 'foobar', callback: () => {} }];
+    listItem.actions.push({ name: 'foobar', callback: () => {} });
   };
 
   export default {
     name: 'CategoriesExample',
     components: {
+      VcsTextArea,
+      CollectionComponent,
+      CollectionComponentList,
       CollectionComponentProvider,
       CollectionComponentOptions,
       VcsFormButton,
       VcsTextField,
+      VcsCheckbox,
       VContainer,
       VExpansionPanels,
       VCard,
+      VCardTitle,
       VForm,
       VDialog,
     },
-    setup() {
+    setup(props, { attrs }) {
       const app = inject('vcsApp');
       provide('collectionManager', app.categoryManager);
-      const componentIds = ref(app.categoryManager.componentIds);
-      const newDialog = ref(false);
-      const categoryName = ref('');
+      const componentIds = ref([]);
+      const destroyFunctions = [];
 
-      function requestCategory() {
-        app.categoryManager.requestCategory(
-          { name: categoryName.value },
-          owner,
-        );
-        newDialog.value = false;
-      }
+      const newCategory = ref({
+        dialog: false,
+        name: '',
+        addItems: false,
+        addActions: false,
+        addImportExport: false,
+        addEditors: false,
+        selectionBased: false,
+      });
 
-      function clear() {
-        app.categoryManager.clear();
-      }
+      const newItem = ref({
+        dialog: false,
+        categoryName: undefined,
+        config: JSON.stringify({ name: 'newItem' }, null, 2),
+      });
 
-      async function requestFoobar() {
-        const { collectionComponent, category } =
-          await app.categoryManager.requestCategory(
-            {
-              name: 'foobar',
-              title: 'Foobar',
-            },
-            owner,
-            {
-              actions: [{ name: 'foobar', callback: () => {} }],
-              draggable: true,
-            },
-          );
+      const optionsDialog = ref(false);
 
+      function addItems(collectionComponent, category) {
         app.categoryManager.addMappingFunction(
           () => true,
           foobarMappingFunction,
@@ -114,19 +178,224 @@
           [collectionComponent.id],
         );
         for (let i = 0; i <= 12; i++) {
-          category.collection.add({
-            name: `foobar-${i}`,
+          collectionComponent.collection.add({
+            name: `${category.name}-${i}`,
+            title: `${category.name}-${i}-title`,
+            random: Math.random(),
           });
         }
       }
 
+      function addActions(collectionComponent, category) {
+        collectionComponent.addActions([
+          {
+            action: {
+              name: 'add',
+              icon: '$vcsPlus',
+              callback() {
+                newItem.value.dialog = true;
+                newItem.value.categoryName = category.name;
+              },
+            },
+            owner,
+          },
+          {
+            action: {
+              name: 'Category Options',
+              callback() {
+                optionsDialog.value = true;
+              },
+            },
+            owner,
+          },
+        ]);
+      }
+
+      function addImportExportActions(collectionComponent, category) {
+        const { action: exportAction, destroy: exportDestroy } =
+          createListExportAction(
+            collectionComponent.selection,
+            () => exportCategoryCallback(app, collectionComponent, category),
+            owner,
+          );
+
+        const { action: importAction, destroy: importDestroy } =
+          createListImportAction(
+            (files) => importCategoryCallback(app, files),
+            app.windowManager,
+            owner,
+            attrs['window-state'].id,
+          );
+
+        destroyFunctions.push(exportDestroy, importDestroy);
+        collectionComponent.addActions([exportAction, importAction]);
+      }
+
+      function addEditors(collectionComponent, category, selectionBased) {
+        collectionComponent.selectable.value = true;
+
+        function getItemForListItem(listItem) {
+          return collectionComponent.collection.getByKey(listItem.name);
+        }
+
+        makeEditorCollectionComponentClass(
+          app,
+          collectionComponent,
+          {
+            editor: (item) => ({
+              component: FoobarEditor,
+              state: {
+                headerTitle: `${category.name} Editor`,
+                headerIcon: '$vcsEdit',
+              },
+              position: {
+                width: 300,
+              },
+              props: {
+                async getConfig() {
+                  return (
+                    collectionComponent.collection.getSerializedByKey?.(
+                      item.name,
+                    ) ?? collectionComponent.collection.getByKey(item.name)
+                  );
+                },
+                setConfig(config) {
+                  item.name = config.name ?? item.name;
+                  item.title = config.title ?? item.title;
+                  item.random = config.random ?? item.random;
+                },
+              },
+            }),
+            multiEditor: {
+              component: FoobarEditor,
+              state: {
+                headerTitle: `${category.name} Multi Editor`,
+                headerIcon: '$vcsPen',
+              },
+              position: {
+                width: 300,
+              },
+              props: {
+                multi: true,
+                selection: collectionComponent.selection,
+                getConfig() {
+                  const selection =
+                    collectionComponent.selection.value.map(getItemForListItem);
+                  if (
+                    selection.every((i) => i.random === selection[0].random)
+                  ) {
+                    return selection[0];
+                  }
+                  return { random: undefined };
+                },
+                setConfig(config) {
+                  collectionComponent.selection.value
+                    .map(getItemForListItem)
+                    .forEach((i) => {
+                      i.random = config.random ?? i.random;
+                    });
+                },
+              },
+            },
+            selectionBased,
+          },
+          attrs['window-state'].id,
+        );
+      }
+
+      function clear() {
+        componentIds.value
+          .map((id) => app.categoryManager.get(id))
+          .forEach((c) => {
+            if (c[isEditorCollectionComponentClass]) {
+              c.closeEditorWindows();
+              c.closeMultiEditorWindow();
+            }
+            app.categoryManager.remove(c.id);
+          });
+        componentIds.value.splice(0);
+      }
+
+      onUnmounted(() => {
+        destroyFunctions.forEach((cb) => cb());
+        clear();
+      });
+
+      async function addItem() {
+        if (newItem.value.categoryName) {
+          const { category } = await app.categoryManager.requestCategory({
+            name: newItem.value.categoryName,
+          });
+          try {
+            const config = JSON.parse(newItem.value.config);
+            if (category.classRegistryName) {
+              category.collection.add(
+                getObjectFromClassRegistry(
+                  app[category.classRegistryName],
+                  config,
+                ),
+              );
+            } else {
+              category.collection.add(config);
+            }
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error('invalid JSON');
+          }
+          newItem.value.dialog = false;
+          newItem.value.categoryName = undefined;
+          newItem.value.config = JSON.stringify({ name: 'newItem' }, null, 2);
+        }
+      }
+
+      /**
+       * @type {import("vue").Ref<string|null>}
+       */
+      const componentView = ref(null);
+
       return {
         componentIds,
-        categoryName,
-        newDialog,
-        requestCategory,
-        requestFoobar,
+        newCategory,
+        newItem,
+        optionsDialog,
+        addItem,
+        async requestCategory() {
+          const { collectionComponent, category } =
+            await app.categoryManager.requestCategory(
+              { name: newCategory.value.name },
+              owner,
+            );
+          componentIds.value.push(collectionComponent.id);
+          if (newCategory.value.addItems) {
+            addItems(collectionComponent, category);
+          }
+          if (newCategory.value.addActions) {
+            addActions(collectionComponent, category);
+          }
+          if (newCategory.value.addImportExport) {
+            addImportExportActions(collectionComponent, category);
+          }
+          if (newCategory.value.addEditors) {
+            addEditors(
+              collectionComponent,
+              category,
+              newCategory.value.selectionBased,
+            );
+          }
+          newCategory.value.name = '';
+          newCategory.value.dialog = false;
+        },
         clear,
+        hasCategory(value) {
+          return !app.categoryManager.has(value) || 'Category already existing';
+        },
+        componentView,
+        openList(id) {
+          componentView.value = id;
+        },
+        closeList() {
+          componentView.value = null;
+        },
       };
     },
   };

package/plugins/@vcmap-show-case/category-tester/src/CollectionComponentOptions.vue

@@ -1,209 +1,75 @@
 <template>
-  <div>
-    <v-expansion-panel @change="active = !active">
-      <v-expansion-panel-header hide-actions class="px-2">
-        <template #default="{ open }">
-          <div class="d-flex justify-space-between">
-            <div class="d-flex align-center">
-              <v-icon class="mr-1" :class="{ rotate: !open }">
-                mdi-chevron-down
-              </v-icon>
-              {{ $t(title) }}
-            </div>
-            <VcsActionButtonList
-              v-if="actions?.length > 0"
-              :actions="actions"
-            />
-          </div>
-        </template>
-      </v-expansion-panel-header>
-      <v-expansion-panel-content class="pb-1">
-        <v-container class="py-0 px-2">
-          <v-row no-gutters>
-            <v-col>
-              <VcsLabel html-for="title" dense>
-                {{ $t('categoryTester.title') }}
-              </VcsLabel>
-            </v-col>
-            <v-col>
-              <VcsTextField id="title" clearable dense v-model="title" />
-            </v-col>
-          </v-row>
-          <v-row no-gutters>
-            <v-col>
-              <VcsLabel html-for="draggable" dense>
-                {{ $t('categoryTester.draggable') }}
-              </VcsLabel>
-            </v-col>
-            <v-col>
-              <VcsCheckbox id="draggable" dense v-model="draggable" />
-            </v-col>
-          </v-row>
-          <v-row no-gutters>
-            <v-col>
-              <VcsLabel html-for="selectable" dense>
-                {{ $t('categoryTester.selectable') }}
-              </VcsLabel>
-            </v-col>
-            <v-col>
-              <VcsCheckbox id="selectable" dense v-model="selectable" />
-            </v-col>
-          </v-row>
-          <v-row no-gutters>
-            <v-col>
-              <VcsLabel html-for="singleSelect" dense>
-                {{ $t('categoryTester.singleSelect') }}
-              </VcsLabel>
-            </v-col>
-            <v-col>
-              <VcsCheckbox id="singleSelect" dense v-model="singleSelect" />
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-expansion-panel-content>
-    </v-expansion-panel>
-    <v-dialog v-model="dialog" width="300">
-      <v-card class="pa-2">
-        <v-form @submit.prevent="addItem">
-          <vcs-text-area v-model="jsonString" />
-          <vcs-form-button type="submit"> Add </vcs-form-button>
-        </v-form>
-      </v-card>
-    </v-dialog>
-  </div>
+  <v-container class="py-0 px-2">
+    <v-row no-gutters>
+      <v-col>
+        <VcsLabel html-for="title" dense>
+          {{ $t('categoryTester.title') }}
+        </VcsLabel>
+      </v-col>
+      <v-col>
+        <VcsTextField id="title" clearable dense v-model="title" />
+      </v-col>
+    </v-row>
+    <v-row no-gutters v-for="key in keys" :key="key">
+      <v-col>
+        <VcsLabel :html-for="key" dense>
+          {{ $t(`categoryTester.${key}`) }}
+        </VcsLabel>
+      </v-col>
+      <v-col>
+        <VcsCheckbox :id="key" dense v-model="getComputed(key).value" />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-  import { inject, ref } from 'vue';
-  import {
-    VExpansionPanel,
-    VExpansionPanelHeader,
-    VExpansionPanelContent,
-    VIcon,
-    VContainer,
-    VRow,
-    VCol,
-    VDialog,
-    VCard,
-    VForm,
-  } from 'vuetify/lib';
-  import {
-    VcsCheckbox,
-    VcsLabel,
-    VcsTextField,
-    VcsTextArea,
-    VcsActionButtonList,
-    VcsFormButton,
-    downloadText,
-  } from '@vcmap/ui';
-  import { getObjectFromClassRegistry } from '@vcmap/core';
+  import { computed, inject, isRef } from 'vue';
+  import { VContainer, VRow, VCol } from 'vuetify/lib';
+  import { VcsCheckbox, VcsLabel, VcsTextField } from '@vcmap/ui';
 
   /**
    * Shows CollectionComponentOptions of a provided collectionComponent
    */
   export default {
-    name: 'CollectionComponent',
+    name: 'CollectionComponentOptions',
     components: {
-      VcsFormButton,
-      VcsActionButtonList,
       VcsCheckbox,
       VcsLabel,
       VcsTextField,
-      VcsTextArea,
-      VExpansionPanel,
-      VExpansionPanelHeader,
-      VExpansionPanelContent,
-      VIcon,
       VContainer,
       VRow,
       VCol,
-      VDialog,
-      VCard,
-      VForm,
     },
     setup() {
-      const app = inject('vcsApp');
-      /**
-       * @type {CollectionComponent}
-       */
       const collectionComponent = inject('collectionComponent');
-      const category = app.categories.getByKey(collectionComponent.id);
-      const active = ref(false);
-      const dialog = ref(false);
-      const jsonString = ref(JSON.stringify({ name: 'newItem' }, null, 2));
-
-      async function addItem() {
-        try {
-          const config = JSON.parse(jsonString.value);
-          if (category.classRegistryName) {
-            category.collection.add(
-              getObjectFromClassRegistry(
-                app[category.classRegistryName],
-                config,
-              ),
-            );
-          } else {
-            category.collection.add(config);
-          }
-          jsonString.value = JSON.stringify({ name: 'newItem' }, null, 2);
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.error('invalid JSON');
-        }
-        dialog.value = false;
-      }
-
-      function download() {
-        const stringObject = JSON.stringify(
-          category.serializeModule(app.dynamicModuleId),
-          null,
-          2,
-        );
-        downloadText(stringObject, `${category.name}.json`);
-      }
-
-      const actions = [
-        {
-          name: 'add',
-          icon: '$vcsPlus',
-          callback() {
-            dialog.value = true;
-          },
-        },
-        {
-          name: 'download',
-          icon: 'mdi-download',
-          callback: download,
-        },
-      ];
 
       return {
         title: collectionComponent.title,
-        draggable: collectionComponent.draggable,
-        selectable: collectionComponent.selectable,
-        singleSelect: collectionComponent.singleSelect,
-        active,
-        dialog,
-        jsonString,
-        actions,
-        addItem,
+        keys: [
+          'draggable',
+          'selectable',
+          'singleSelect',
+          'renamable',
+          'removable',
+        ],
+        getComputed(key) {
+          return computed({
+            get() {
+              return collectionComponent[key];
+            },
+            set(value) {
+              if (isRef(collectionComponent[key])) {
+                collectionComponent[key].value = value;
+              } else {
+                collectionComponent[key] = value;
+              }
+            },
+          });
+        },
       };
     },
   };
 </script>
 
-<style lang="scss" scoped>
-  .rotate {
-    transform: rotate(-90deg);
-  }
-  .v-icon {
-    font-size: 16px;
-  }
-  ::v-deep {
-    .v-list {
-      .v-list-item {
-        padding: 4px 8px 4px 28px;
-      }
-    }
-  }
-</style>
+<style lang="scss" scoped></style>