combine gfi and gfiIntern plugins

Author: jedi-of-the-sea

packages/clients/dish/src/addPlugins.ts

@@ -18,6 +18,7 @@ import merge from 'lodash.merge'
 
 import {
   AddressSearchConfiguration,
+  GfiConfiguration,
   SearchMethodFunction,
 } from '@polar/lib-custom-types'
 import { extendGfi } from './utils/extendGfi'
@@ -30,30 +31,25 @@ import {
 import { denkmalSearchResult } from './utils/denkmalSearchIntern'
 import DishModal from './plugins/Modal'
 import DishHeader from './plugins/Header'
-import DishGfiContent from './plugins/Gfi'
 import { MODE } from './enums'
-import DishGfiIntern from './plugins/GfiIntern'
+import { DishGfiIntern, DishGfiExtern } from './plugins/Gfi'
 import DishExportMap from './plugins/DishExportMap'
 import { searchMethods } from './mapConfigurations/searchConfigParams'
 
-const pluginGfiExtern = {
-  coordinateSources: ['plugin/addressSearch/chosenAddress'],
-  gfiContentComponent: DishGfiContent,
-  afterLoadFunction: extendGfi,
-}
-
-const pluginGfiIntern = {
-  coordinateSources: ['plugin/addressSearch/chosenAddress'],
-  gfiContentComponent: DishGfiIntern,
-}
-
-function getPluginGfiConfig(mode: keyof typeof MODE) {
-  return mode === MODE.EXTERN ? pluginGfiExtern : pluginGfiIntern
+const gfiConfig = (mode: keyof typeof MODE): Partial<GfiConfiguration> => {
+  const gfiConfig: Partial<GfiConfiguration> = {
+    coordinateSources: ['plugin/addressSearch/chosenAddress'],
+    gfiContentComponent: mode === MODE.EXTERN ? DishGfiExtern : DishGfiIntern,
+  }
+  if (mode === MODE.EXTERN) {
+    gfiConfig.afterLoadFunction = extendGfi
+  }
+  return gfiConfig
 }
 
-function getAddressSearchConfig(
+const addressSearchConfig = (
   mode: keyof typeof MODE
-): Partial<AddressSearchConfiguration> {
+): Partial<AddressSearchConfiguration> => {
   const addressSearchConfig: Partial<AddressSearchConfiguration> = {
     displayComponent: true,
     layoutTag: NineLayoutTag.TOP_LEFT,
@@ -122,7 +118,7 @@ export const addPlugins = (core, mode: keyof typeof MODE = 'EXTERN') => {
       layoutTag: NineLayoutTag.TOP_MIDDLE,
     }),
     PolarPluginAddressSearch(
-      getAddressSearchConfig(mode) as AddressSearchConfiguration
+      addressSearchConfig(mode) as AddressSearchConfiguration
     ),
     PolarPluginPins({
       displayComponent: mode === MODE.EXTERN,
@@ -150,7 +146,7 @@ export const addPlugins = (core, mode: keyof typeof MODE = 'EXTERN') => {
           displayComponent: true,
           layoutTag: NineLayoutTag.TOP_LEFT,
         },
-        getPluginGfiConfig(mode)
+        gfiConfig(mode)
       )
     ),
     PolarPluginLoadingIndicator({

…clients/dish/src/plugins/Gfi/Content.vue …s/dish/src/plugins/Gfi/ContentExtern.vuepackages/clients/dish/src/plugins/Gfi/Content.vue renamed to packages/clients/dish/src/plugins/Gfi/ContentExtern.vue packages/clients/dish/src/plugins/Gfi/Content.vue renamed to packages/clients/dish/src/plugins/Gfi/ContentExtern.vue

@@ -1,17 +1,5 @@
 <template>
-  <v-card class="dish-gfi-content">
-    <v-card-actions v-if="!hasWindowSize || !hasSmallWidth">
-      <ActionButton></ActionButton>
-      <v-spacer></v-spacer>
-      <v-btn
-        icon
-        small
-        :aria-label="$t('common:plugins.gfi.header.close')"
-        @click="close(true)"
-      >
-        <v-icon small>fa-xmark</v-icon>
-      </v-btn>
-    </v-card-actions>
+  <SharedContent>
     <v-card-title class="dish-gfi-title" :style="`max-width: ${imgMaxWidth}`">
       {{ currentProperties.Bezeichnung }}
     </v-card-title>
@@ -87,19 +75,19 @@
         </tbody>
       </v-simple-table>
     </v-card-text>
-  </v-card>
+  </SharedContent>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { mapActions, mapMutations, mapGetters } from 'vuex'
-import ActionButton from './ActionButton.vue'
+import SharedContent from './SharedContent.vue'
 
 type GfiIndexStep = -1 | 1
 
 export default Vue.extend({
-  name: 'DishGfiContent',
-  components: { ActionButton },
+  name: 'DishGfiExtern',
+  components: { SharedContent },
   data: () => ({
     infoFields: [
       'Kreis',
@@ -112,7 +100,6 @@ export default Vue.extend({
     sachgesamtheitOpen: false,
   }),
   computed: {
-    ...mapGetters(['clientWidth', 'hasSmallWidth', 'hasWindowSize']),
     ...mapGetters('plugin/gfi', [
       'currentProperties',
       'imageLoaded',
@@ -155,18 +142,7 @@ export default Vue.extend({
       return this.sachgesamtheit.properties.Foto !== 'Kein Foto gefunden'
     },
   },
-  mounted() {
-    if (this.hasWindowSize && this.hasSmallWidth) {
-      this.setMoveHandleActionButton({
-        component: ActionButton,
-      })
-    }
-  },
-  beforeDestroy() {
-    this.setMoveHandleActionButton(null)
-  },
   methods: {
-    ...mapMutations(['setMoveHandleActionButton']),
     ...mapMutations('plugin/gfi', [
       'setImageLoaded',
       'setVisibleWindowFeatureIndex',

…/src/plugins/GfiIntern/ContentIntern.vue …s/dish/src/plugins/Gfi/ContentIntern.vuepackages/clients/dish/src/plugins/GfiIntern/ContentIntern.vue renamed to packages/clients/dish/src/plugins/Gfi/ContentIntern.vue packages/clients/dish/src/plugins/GfiIntern/ContentIntern.vue renamed to packages/clients/dish/src/plugins/Gfi/ContentIntern.vue

@@ -1,46 +1,33 @@
 <template>
-  <v-card v-if="showGfi" class="dish-gfi-content">
-    <v-card-actions v-if="!hasWindowSize || !hasSmallWidth">
-      <ActionButton></ActionButton>
-      <v-spacer></v-spacer>
-      <v-btn
-        icon
-        small
-        :aria-label="$t('common:plugins.gfi.header.close')"
-        @click="close(true)"
-      >
-        <v-icon small>fa-xmark</v-icon>
-      </v-btn>
-    </v-card-actions>
+  <SharedContent :show-gfi="showGfi">
     <MonumentContent></MonumentContent>
     <div id="dish-gfi-switch-buttons">
-      <SwitchButtonIntern v-if="showDishSwitchButtons"></SwitchButtonIntern>
+      <SwitchButton v-if="showDishSwitchButtons"></SwitchButton>
     </div>
-  </v-card>
+  </SharedContent>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { mapActions, mapMutations, mapGetters } from 'vuex'
-import ActionButton from '../Gfi/ActionButton.vue'
 import { denkmaelerWMS, alkisWms } from '../../servicesConstants'
-import SwitchButtonIntern from './SwitchButtonIntern.vue'
+import SharedContent from './SharedContent.vue'
+import SwitchButton from './SwitchButton.vue'
 import MonumentContent from './MonumentContent.vue'
 
 export default Vue.extend({
   name: 'DishGfiIntern',
   components: {
-    ActionButton,
-    SwitchButtonIntern,
+    SharedContent,
+    SwitchButton,
     MonumentContent,
   },
   data: () => ({}),
   computed: {
-    ...mapGetters(['hasSmallWidth', 'hasWindowSize']),
     ...mapGetters('plugin/gfi', ['currentProperties', 'windowFeatures']),
     ...mapGetters('plugin/layerChooser', ['activeMaskIds']),
-    objektIdentifier(): string {
-      return this.currentProperties.objektid
+    objektIdentifier(): boolean {
+      return Boolean(this.currentProperties.objektid)
     },
     showDishSwitchButtons(): boolean {
       if (
@@ -63,18 +50,7 @@ export default Vue.extend({
       this.setVisibleWindowFeatureIndex(0)
     },
   },
-  mounted() {
-    if (this.hasWindowSize && this.hasSmallWidth) {
-      this.setMoveHandleActionButton({
-        component: ActionButton,
-      })
-    }
-  },
-  beforeDestroy() {
-    this.setMoveHandleActionButton(null)
-  },
   methods: {
-    ...mapMutations(['setMoveHandleActionButton']),
     ...mapMutations('plugin/gfi', ['setVisibleWindowFeatureIndex']),
     ...mapActions('plugin/gfi', ['close']),
     showInfoForActiveLayers(topic: 'alkis' | 'monument') {

…rc/plugins/GfiIntern/MonumentContent.vue …dish/src/plugins/Gfi/MonumentContent.vuepackages/clients/dish/src/plugins/GfiIntern/MonumentContent.vue renamed to packages/clients/dish/src/plugins/Gfi/MonumentContent.vue packages/clients/dish/src/plugins/GfiIntern/MonumentContent.vue renamed to packages/clients/dish/src/plugins/Gfi/MonumentContent.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-card v-if="showGfi" class="dish-gfi-content">
+    <v-card-actions v-if="!hasWindowSize || !hasSmallWidth">
+      <ActionButton></ActionButton>
+      <v-spacer></v-spacer>
+      <v-btn
+        icon
+        small
+        :aria-label="$t('common:plugins.gfi.header.close')"
+        @click="close(true)"
+      >
+        <v-icon small>fa-xmark</v-icon>
+      </v-btn>
+    </v-card-actions>
+    <slot></slot>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { mapActions, mapMutations, mapGetters } from 'vuex'
+import ActionButton from './ActionButton.vue'
+
+export default Vue.extend({
+  name: 'SharedContent',
+  components: { ActionButton },
+  props: {
+    showGfi: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    ...mapGetters(['hasSmallWidth', 'hasWindowSize']),
+  },
+  mounted() {
+    if (this.hasWindowSize && this.hasSmallWidth) {
+      this.setMoveHandleActionButton({
+        component: ActionButton,
+      })
+    }
+  },
+  beforeDestroy() {
+    this.setMoveHandleActionButton(null)
+  },
+  methods: {
+    ...mapMutations(['setMoveHandleActionButton']),
+    ...mapActions('plugin/gfi', ['close']),
+  },
+})
+</script>
+
+<style lang="scss" scoped></style>

packages/clients/dish/src/plugins/Gfi/SharedContent.vue

@@ -32,7 +32,7 @@ import { mapGetters, mapMutations } from 'vuex'
 type GfiIndexStep = -1 | 1
 
 export default Vue.extend({
-  name: 'GfiFeatureSwitchButtons',
+  name: 'SwitchButton',
   computed: {
     ...mapGetters('plugin/gfi', [
       'windowFeatures',

…plugins/GfiIntern/SwitchButtonIntern.vue …ts/dish/src/plugins/Gfi/SwitchButton.vuepackages/clients/dish/src/plugins/GfiIntern/SwitchButtonIntern.vue renamed to packages/clients/dish/src/plugins/Gfi/SwitchButton.vue packages/clients/dish/src/plugins/GfiIntern/SwitchButtonIntern.vue renamed to packages/clients/dish/src/plugins/Gfi/SwitchButton.vue

@@ -1,3 +1,4 @@
-import DishGfiContent from './Content.vue'
+import DishGfiExtern from './ContentExtern.vue'
+import DishGfiIntern from './ContentIntern.vue'
 
-export default DishGfiContent
+export { DishGfiIntern, DishGfiExtern }