@demos-europe/demosplan-ui 0.0.1

package/components/core/DpEditor/DpBoilerPlate.vue

@@ -0,0 +1,140 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<documentation>
+  <!--This component contains a multiselect to insert a boilerplate into a textarea
+      It receives the boilerplates as a prop.
+      -->
+</documentation>
+
+<template>
+  <div>
+    <!-- Select boilerplate -->
+    <div class="u-pb-0_25">
+      <label class="u-mb-0_5">
+        <i
+          class="fa fa-question-circle float--right u-mt-0_125"
+          :aria-label="Translator.trans('contextual.help')"
+          v-tooltip="tooltipContent" />
+        {{ title }}
+      </label>
+      <dp-multiselect
+        class="display--inline-block"
+        :options="boilerPlates"
+        @input="addToTextArea"
+        v-model="selectedBoilerPlate"
+        label="title"
+        track-by="id"
+        :group-values="groupValues"
+        :group-label="groupLabel"
+        :group-select="groupSelect">
+        <template v-slot:option="{ option }">
+          {{ option.title }}
+          <span v-if="option.$isLabel">
+            {{ option.$groupLabel }}
+          </span>
+        </template>
+      </dp-multiselect>
+    </div>
+    <!-- Preview of boilerplate text -->
+    <div>
+      <label
+        for="previewField"
+        class="u-mb-0_25 u-mt-0_5">
+        Vorschau:
+      </label>
+      <div
+        class="u-p-0_5 border border-radius-large min-height-250"
+        id="previewField"
+        v-cleanhtml="previewValue" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { CleanHtml } from 'demosplan-ui/directives'
+import DpMultiselect from '../form/DpMultiselect'
+
+export default {
+  name: 'DpBoilerPlate',
+  components: {
+    DpMultiselect
+  },
+
+  directives: {
+    cleanhtml: CleanHtml
+  },
+
+  props: {
+    boilerPlates: {
+      required: false,
+      type: Array,
+      default: () => []
+    },
+
+    groupValues: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
+    groupLabel: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
+    groupSelect: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+
+    isGroupSelect: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+
+    title: {
+      required: false,
+      type: String,
+      default: Translator.trans('boilerplate')
+    }
+  },
+
+  data () {
+    return {
+      selectedBoilerPlate: '',
+      previewValue: ''
+    }
+  },
+
+  computed: {
+    tooltipContent () {
+      return {
+        content: Translator.trans('boilerplates.categories.explanation'),
+        classes: 'u-z-modal-window'
+      }
+    }
+  },
+
+  methods: {
+    addToTextArea (data) {
+      this.previewValue = data.text
+      this.$emit('boilerplate-text-added', this.previewValue)
+    },
+
+    resetBoilerPlateMultiSelect () {
+      this.selectedBoilerPlate = ''
+      this.previewValue = ''
+    }
+  }
+}
+</script>

package/components/core/DpEditor/DpBoilerPlateModal.vue

@@ -0,0 +1,166 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<documentation>
+  <!-- This component contains the UI for inserting boilerplates into a textarea
+
+    If used in combination with DpEditor.vue and its wrapper TipTapEditText.vue (as is currently the case), the
+    button to open the modal is located in TipTapEditText.vue; otherwise, you need to define it.
+
+   -->
+</documentation>
+
+<template>
+  <dp-modal
+    ref="boilerPlateModal"
+    content-classes="u-1-of-2">
+    <template>
+      <h3>{{ Translator.trans('boilerplate.insert') }}</h3>
+      <dp-boiler-plate
+        :title="Translator.trans('boilerplates.category', { category: Translator.trans(boilerPlateType) })"
+        :boiler-plates="displayedBoilerplates"
+        ref="boilerplateDropdown"
+        group-values="boilerplates"
+        group-label="groupName"
+        :group-select="false"
+        @boilerplate-text-added="addBoilerplateText" />
+      <div class="flex flex-items-center u-mt">
+        <a
+          class="weight--bold font-size-small"
+          :href="Routing.generate('DemosPlan_procedure_boilerplate_list', { procedure: procedureId })">
+          {{ Translator.trans('boilerplates.edit') }} ({{ Translator.trans('view.leave.hint') }})
+        </a>
+        <dp-button-row
+          class="flex-item-end"
+          primary
+          :primary-text="Translator.trans('insert')"
+          secondary
+          @primary-action="insertBoilerPlate"
+          @secondary-action="resetAndClose" />
+      </div>
+    </template>
+  </dp-modal>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex'
+import BoilerplatesStore from '@DpJs/store/procedure/Boilerplates'
+import DpBoilerPlate from './DpBoilerPlate'
+import DpButtonRow from '../DpButtonRow'
+import DpModal from '../DpModal'
+import { hasOwnProp } from 'demosplan-utils'
+
+export default {
+  name: 'DpBoilerPlateModal',
+
+  components: {
+    DpBoilerPlate,
+    DpButtonRow,
+    DpModal
+  },
+
+  props: {
+    // Needed to get boilerplates from BE via store
+    procedureId: {
+      required: true,
+      type: String
+    },
+
+    boilerPlateType: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
+    editorId: {
+      required: false,
+      type: String,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      // Needed to make sure boilerplates are loaded from the BE before <dp-boiler-plate> component is mounted
+      boilerPlatesLoaded: false,
+      // The boilerplate text emitted from dp-boiler-plate, then emitted to TipTapTextEditor.vue on click of 'insert' button
+      textToBeAdded: ''
+    }
+  },
+
+  computed: {
+    ...mapState('boilerplates', ['getBoilerplatesRequestFired', 'moduleRegistered']),
+    ...mapGetters('boilerplates', ['getGroupedBoilerplates']),
+
+    displayedBoilerplates () {
+      const displayed = JSON.parse(JSON.stringify(this.getGroupedBoilerplates))
+      displayed.forEach(group => {
+        if (this.boilerPlateType !== '') {
+          if (typeof this.boilerPlateType === 'string') {
+            group.boilerplates = group.boilerplates.filter(bp => bp.category.includes(this.boilerPlateType))
+          } else if (Array.isArray(this.boilerPlateType)) {
+            group.boilerplates = group.boilerplates.filter(bp => this.boilerPlateType.some(el => bp.category.includes(el)))
+          }
+        }
+      })
+
+      return displayed
+    },
+
+    displayedBoilerplateType () {
+      let boilerplateString = ''
+      if (typeof this.boilerPlateType === 'string') {
+        boilerplateString = Translator.trans(this.boilerPlateType)
+      } else if (Array.isArray(this.boilerPlateType)) {
+        boilerplateString = this.boilerPlateType.map(bp => Translator.trans(bp)).join(', ')
+      }
+      return boilerplateString
+    }
+  },
+
+  methods: {
+    ...mapActions('boilerplates', ['getBoilerPlates']),
+
+    addBoilerplateText (textFromTextArea) {
+      this.textToBeAdded = textFromTextArea
+    },
+
+    insertBoilerPlate () {
+      this.$emit('insertBoilerPlate', this.textToBeAdded)
+      this.resetAndClose()
+    },
+
+    resetAndClose () {
+      this.$refs.boilerplateDropdown.resetBoilerPlateMultiSelect()
+      this.toggleModal()
+    },
+
+    toggleModal () {
+      this.$refs.boilerPlateModal.toggle()
+    }
+  },
+
+  created () {
+    const isRegistered = this.$store && hasOwnProp(this.$store.state, 'boilerplates')
+
+    if (isRegistered === false) {
+      this.$store.registerModule('boilerplates', BoilerplatesStore)
+    }
+
+    if (this.getBoilerplatesRequestFired === false) {
+      this.getBoilerPlates(this.procedureId)
+    }
+  },
+
+  beforeDestroy () {
+    this.$store.unregisterModule('boilerplates')
+  }
+
+}
+</script>