@vcmap/module-selector 2.0.4 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/module-selector",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "",
   "type": "module",
   "main": "dist/index.js",

package/src/ModuleSelector.vue

@@ -144,7 +144,7 @@
           </v-col>
         </template>
       </v-row>
-      <v-row justify="end">
+      <v-row class="fixed-bottom" justify="end">
         <VcsFormButton
           variant="filled"
           class="ma-5"
@@ -325,4 +325,10 @@
   .groupIcon {
     margin-left: 20px !important;
   }
+  .fixed-bottom {
+    position: sticky;
+    bottom: 0;
+    background-color: rgb(var(--v-theme-surface));
+    z-index: 10;
+  }
 </style>

package/src/config/CloudModuleSelector.vue

@@ -1,43 +1,50 @@
 <template>
   <v-card>
     <div>
-      <VcsDataTable
+      <VcsFormSection
         v-if="isItemIdEmpty"
-        base-component="VDataTableServer"
-        :loading="loading"
-        :items="items"
-        :server-items-length="totalItems"
-        :server-pages-length="totalPages"
-        :searchbar-placeholder="
-          $t('moduleSelector.configEditor.moduleCloudPicker.searchName')
-        "
-        :headers="headers"
-        select-strategy="single"
-        return-object
-        show-select
-        item-value="_id"
-        v-model="selected"
-        @update:items="getItems"
+        heading="moduleSelector.configEditor.moduleSettings"
+      >
+        <VcsDataTable
+          base-component="VDataTableServer"
+          :loading="loading"
+          :items="items"
+          :server-items-length="totalItems"
+          :server-pages-length="totalPages"
+          :searchbar-placeholder="
+            $t('moduleSelector.configEditor.moduleCloudPicker.searchName')
+          "
+          :headers="headers"
+          select-strategy="single"
+          return-object
+          show-select
+          item-value="_id"
+          v-model="selected"
+          @update:items="getItems"
+        >
+          <!-- eslint-disable-next-line -->
+          <template v-slot:item.type="{ item }">
+            <v-icon v-bind="{ ...$attrs }">
+              {{ typeIcon(item.type) }}
+            </v-icon>
+            <v-tooltip activator="parent" location="right">
+              {{ $t(`appConfigurator.dialogs.vcsModuleTable.${item.type}`) }}
+            </v-tooltip>
+          </template>
+          <!-- eslint-disable-next-line -->
+          <template v-slot:item.createdAt="{ item }">
+            {{ formatDate(item.createdAt, $i18n.locale) }}
+          </template>
+          <!-- eslint-disable-next-line -->
+          <template v-slot:item.updatedAt="{ item }">
+            {{ formatDate(item.updatedAt, $i18n.locale) }}
+          </template>
+        </VcsDataTable>
+      </VcsFormSection>
+      <VcsFormSection
+        v-else
+        heading="moduleSelector.configEditor.moduleSettings"
       >
-        <!-- eslint-disable-next-line -->
-        <template v-slot:item.type="{ item }">
-          <v-icon v-bind="{ ...$attrs }">
-            {{ typeIcon(item.type) }}
-          </v-icon>
-          <v-tooltip activator="parent" location="right">
-            {{ $t(`appConfigurator.dialogs.vcsModuleTable.${item.type}`) }}
-          </v-tooltip>
-        </template>
-        <!-- eslint-disable-next-line -->
-        <template v-slot:item.createdAt="{ item }">
-          {{ formatDate(item.createdAt, $i18n.locale) }}
-        </template>
-        <!-- eslint-disable-next-line -->
-        <template v-slot:item.updatedAt="{ item }">
-          {{ formatDate(item.updatedAt, $i18n.locale) }}
-        </template>
-      </VcsDataTable>
-      <VcsFormSection v-else>
         <v-form v-model="isFValid" ref="form">
           <v-container class="px-2 pt-0 pb-2">
             <v-row no-gutters class="px-2">
@@ -86,41 +93,45 @@
           </v-container>
         </v-form>
       </VcsFormSection>
-      <div class="d-flex px-2 justify-end w-100">
-        <VcsFormButton
-          v-if="isItemIdEmpty"
-          variant="filled"
-          :disabled="selected[0] === undefined"
-          class="ma-2"
-          @click="addSelected"
-          tooltip="appConfigurator.dialogs.addTooltip"
-          tooltip-position="bottom"
-        >
-          {{ $t('moduleSelector.configEditor.moduleCloudPicker.continue') }}
-        </VcsFormButton>
-        <VcsFormButton
+      <div class="d-flex gc-2 px-2 pt-2 pb-2">
+        <div v-if="isItemIdEmpty" class="d-flex gc-2 justify-end w-100">
+          <VcsFormButton
+            variant="filled"
+            :disabled="selected[0] === undefined"
+            @click="addSelected"
+            tooltip="appConfigurator.dialogs.addTooltip"
+            tooltip-position="bottom"
+          >
+            {{ $t('moduleSelector.configEditor.moduleCloudPicker.continue') }}
+          </VcsFormButton>
+          <VcsFormButton @click="close">
+            {{ $t('components.cancel') }}
+          </VcsFormButton>
+        </div>
+        <div
           v-if="!isItemIdEmpty"
-          :disabled="!isFValid"
-          variant="filled"
-          class="ma-2"
-          @click="
-            () => {
-              $emit('submit', selectedItem);
-            }
-          "
+          class="d-flex gc-2 justify-space-between w-100"
         >
-          {{ $t('components.apply') }}
-        </VcsFormButton>
-        <VcsFormButton
-          v-if="!isItemIdEmpty"
-          @click="removeSelected"
-          class="ma-2"
-        >
-          {{ $t('moduleSelector.configEditor.moduleCloudPicker.back') }}
-        </VcsFormButton>
-        <VcsFormButton class="ma-2" @click="close">
-          {{ $t('components.cancel') }}
-        </VcsFormButton>
+          <VcsFormButton @click="removeSelected">
+            {{ $t('moduleSelector.configEditor.moduleCloudPicker.back') }}
+          </VcsFormButton>
+          <div class="d-flex gc-2">
+            <VcsFormButton
+              :disabled="!isFValid"
+              variant="filled"
+              @click="
+                () => {
+                  $emit('submit', selectedItem);
+                }
+              "
+            >
+              {{ $t('components.apply') }}
+            </VcsFormButton>
+            <VcsFormButton @click="close">
+              {{ $t('components.cancel') }}
+            </VcsFormButton>
+          </div>
+        </div>
       </div>
     </div>
   </v-card>

package/src/config/ModuleEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card>
-    <VcsFormSection>
+    <VcsFormSection heading="moduleSelector.configEditor.moduleSettings">
       <v-form v-model="isFormValid" ref="form">
         <v-container class="px-2 pt-0 pb-2">
           <v-row no-gutters>

package/src/config/ModuleSelectorConfigEditor.vue

@@ -163,7 +163,7 @@
           </v-form>
         </VcsFormSection>
         <VcsFormSection
-          heading="moduleSelector.configEditor.heading"
+          heading="moduleSelector.configEditor.heading2"
           :start-open="true"
           :header-actions="headerActions"
         >
@@ -174,18 +174,19 @@
             @item-moved="moveCard"
           />
         </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 class="d-flex gc-2 px-2 pt-2 pb-2">
+          <div class="d-flex gc-2 justify-end w-100">
+            <VcsFormButton
+              variant="filled"
+              :disabled="!isFormValid"
+              @click="returnLevel()"
+            >
+              {{ $t('components.apply') }}
+            </VcsFormButton>
+            <VcsFormButton @click="cancelCurrentGroup()">
+              {{ $t('components.cancel') }}
+            </VcsFormButton>
+          </div>
         </div>
       </v-sheet>
     </v-dialog>

package/src/index.ts

@@ -260,6 +260,7 @@ export default function plugin(
             editorError: 'Bitte füllen Sie das Feld aus',
             breadcrumbs: { overview: 'Übersicht', group: 'Gruppe' },
             heading: 'Themen- & Modulzuordnung',
+            heading2: 'Modulzuordnung',
             groupHeading: 'Gruppeneinstellungen',
             baseModule: 'Basismodul',
             baseModuleCheckbox: 'Basismodul anzeigen',
@@ -278,6 +279,7 @@ export default function plugin(
             requireModuleSelection: 'Modulauswahl erforderlich machen',
             windowTitle: 'Fenster Titel',
             windowPosition: 'Fenster Position',
+            moduleSettings: 'Modul Einstellungen',
           },
         },
       },
@@ -311,6 +313,7 @@ export default function plugin(
             editorError: 'Please fill in the field',
             breadcrumbs: { overview: 'Overview', group: 'Group' },
             heading: 'Topic & module assignment',
+            heading2: 'Module assignment',
             groupHeading: 'Group settings',
             baseModule: 'Base module',
             baseModuleCheckbox: 'Show base module',
@@ -329,10 +332,12 @@ export default function plugin(
             requireModuleSelection: 'Require module selection',
             windowTitle: 'Window title',
             windowPosition: 'Window position',
+            moduleSettings: 'Module settings',
           },
         },
       },
     },
+
     destroy(): void {},
   };
 }