@demos-europe/demosplan-ui 0.0.1

package/components/core/DpEditor/DpLinkModal.vue

@@ -0,0 +1,117 @@
+<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>
+
+<template>
+  <dp-modal
+    ref="linkModal"
+    content-classes="u-1-of-3"
+    data-dp-validate="linkModal"
+    @modal:toggled="setVisible">
+    <template>
+      <h3>
+        {{ Translator.trans(hasLink ? 'editor.link.edit' : 'editor.link.insert') }}
+      </h3>
+      <div class="space-stack-m">
+        <dp-input
+          id="link_text"
+          v-model="text"
+          :label="{
+            text: Translator.trans('link.text')
+          }"
+          :required="isVisible" />
+        <dp-input
+          id="link_url"
+          v-model="url"
+          :label="{
+            hint: Translator.trans('editor.link.url.formatHint'),
+            text: Translator.trans('url')
+          }"
+          :pattern="isVisible === true ? '(^https?://.*|^//.*)' : null"
+          :required="isVisible"
+          type="url" />
+        <dp-checkbox
+          id="newTab"
+          v-model="newTab"
+          :label="{
+            text: Translator.trans('open.in.new.tab')
+          }" />
+        <dp-button-row
+          class="u-mt"
+          primary
+          :primary-text="Translator.trans('insert')"
+          secondary
+          :secondary-text="Translator.trans('remove')"
+          @primary-action="dpValidateAction('linkModal', () => emitAndClose('insert'), false)"
+          @secondary-action="emitAndClose('remove')" />
+      </div>
+    </template>
+  </dp-modal>
+</template>
+
+<script>
+import DpButtonRow from '../DpButtonRow'
+import DpCheckbox from '../form/DpCheckbox'
+import { DpInput } from 'demosplan-ui/components'
+import DpModal from '../DpModal'
+import { dpValidateMixin } from 'demosplan-utils/mixins'
+
+export default {
+  name: 'DpLinkModal',
+
+  components: {
+    DpButtonRow,
+    DpCheckbox,
+    DpInput,
+    DpModal
+  },
+
+  mixins: [dpValidateMixin],
+
+  data () {
+    return {
+      initUrl: '',
+      isVisible: false,
+      newTab: false,
+      text: '',
+      url: ''
+    }
+  },
+
+  computed: {
+    hasLink () {
+      return this.initUrl !== ''
+    }
+  },
+
+  methods: {
+    emitAndClose (value) {
+      this.$emit('insert', (value === 'insert' ? this.url : null), this.newTab, this.text)
+      this.toggleModal()
+    },
+
+    setVisible (isOpenModal) {
+      this.isVisible = isOpenModal
+    },
+
+    toggleModal (initUrl, textSelection, newTab) {
+      this.$refs.linkModal.toggle()
+      if (this.isVisible) {
+        this.initUrl = initUrl
+        this.url = initUrl
+        this.text = textSelection
+        this.newTab = newTab === '_blank'
+      } else {
+        this.url = ''
+        this.text = ''
+        this.newTab = false
+      }
+    }
+  }
+}
+</script>

package/components/core/DpEditor/DpRecommendationModal/DpInsertableRecommendation.vue

@@ -0,0 +1,137 @@
+<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>
+
+<template>
+  <li class="flex flex-items-start space-inline-xs u-pr-0_5">
+    <div class="min-width-m">
+      <i
+        v-if="fromOtherProcedure"
+        v-tooltip="{
+          boundariesElement: body,
+          content: Translator.trans('segment.recommendation.other.procedure') + ': ' + procedureName,
+          classes: 'u-z-super'
+        }"
+        :aria-label="Translator.trans('more.information')"
+        class="fa fa-info-circle" />
+    </div>
+    <div
+      class="flex-grow"
+      v-cleanhtml="recommendationText" />
+    <div class="flex flex-nowrap space-inline-s">
+      <button
+        class="btn--blank o-link--default"
+        :aria-label="Translator.trans(isExpanded ? 'dropdown.close' : 'dropdown.open')"
+        v-tooltip="{ boundariesElement: body, content: Translator.trans(isExpanded ? 'dropdown.close' : 'dropdown.open'), classes: 'u-z-super' }"
+        v-if="canExpand"
+        @click="toggleExpanded">
+        <i
+          aria-hidden="true"
+          class="fa"
+          :class="isExpanded ? 'fa-angle-up' : 'fa-angle-down'" />
+      </button>
+      <button
+        :aria-label="Translator.trans('segment.recommendation.paste')"
+        v-tooltip="{ boundariesElement: body, content: Translator.trans('segment.recommendation.paste'), classes: 'u-z-super' }"
+        class="btn--blank o-link--default"
+        @click="$emit('insert-recommendation')">
+        <i
+          class="fa fa-files-o"
+          aria-hidden="true" />
+      </button>
+    </div>
+  </li>
+</template>
+
+<script>
+import { CleanHtml } from 'demosplan-ui/directives'
+
+// This number is used to shorten long texts.
+const SHORT_TEXT_CHAR_LENGTH = 300
+
+export default {
+  name: 'DpInsertableRecommendation',
+
+  directives: {
+    cleanhtml: CleanHtml
+  },
+
+  props: {
+    fromOtherProcedure: {
+      type: Boolean,
+      required: true
+    },
+
+    recommendation: {
+      type: String,
+      required: true
+    },
+
+    searchTerm: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    procedureName: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      isExpanded: false,
+      shortText: this.shortenHtmlText(this.recommendation)
+    }
+  },
+
+  computed: {
+    canExpand () {
+      return this.recommendation.length > SHORT_TEXT_CHAR_LENGTH
+    },
+
+    body () {
+      return document.body
+    },
+
+    recommendationText () {
+      const shouldTruncate = !this.isExpanded && this.canExpand
+
+      const shortDisplayText = this.searchTerm !== ''
+        ? this.shortText.replace(this.searchRegex, '<span style="background-color: yellow;">$&</span>') + '...'
+        : this.shortText
+
+      const fullText = this.searchTerm !== ''
+        ? this.recommendation.replace(this.searchRegex, '<span style="background-color: yellow;">$&</span>')
+        : this.recommendation
+
+      return shouldTruncate ? shortDisplayText : fullText
+    },
+
+    searchRegex () {
+      // Match the search term except when the term occurs within an html-tag
+      return new RegExp(this.searchTerm + '(?![^<]*>)', 'ig')
+    }
+  },
+
+  methods: {
+    shortenHtmlText (text) {
+      let textOnly = document.createElement('div')
+      textOnly.innerHTML = text
+      textOnly = textOnly.textContent.substring(0, SHORT_TEXT_CHAR_LENGTH)
+      return textOnly
+    },
+
+    toggleExpanded () {
+      this.isExpanded = !this.isExpanded
+    }
+  }
+}
+</script>

package/components/core/DpEditor/DpRecommendationModal.vue

@@ -0,0 +1,283 @@
+<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 recommendations into a textarea -->
+</documentation>
+
+<template>
+  <dp-modal
+    ref="recommendationModal"
+    content-classes="u-2-of-3">
+    <template>
+      <h3>{{ Translator.trans('segment.recommendation.insert.similar') }}</h3>
+      <div class="layout u-mb">
+        <div class="layout__item u-1-of-3">
+          <span class="display--block weight--bold">
+            {{ Translator.trans('segment.tags') }}
+          </span>
+          <div class="bg-color--grey-light-2 u-p-0_25">
+            <span
+              :key="id"
+              v-for="(id, idx) in tagIds">
+              {{ getTagTitle(id, idx) }}
+            </span>
+          </div>
+        </div><!--
+     --><div class="layout__item u-2-of-3">
+          <dp-label
+            :text="Translator.trans('search.text')"
+            for="searchField" />
+          <dp-search-field
+            @search="setSearchTerm"
+            @reset="setSearchTerm('')"
+            class="width--100p"
+            :placeholder="Translator.trans('search')" />
+        </div>
+      </div>
+
+      <dp-loading v-if="isLoading" />
+
+      <template v-else>
+        <ul
+          v-if="currentRecommendations.length > 0"
+          class="o-list space-stack-m u-pt-0_5 border--top height-50vh overflow-auto">
+          <dp-insertable-recommendation
+            class="o-list__item"
+            :from-other-procedure="recommendation.fromOtherProcedure"
+            :key="recommendation.id"
+            :procedure-name="recommendation.procedureName"
+            v-for="recommendation in currentRecommendations"
+            :search-term="searchTerm"
+            @insert-recommendation="toggleInsert(recommendation.attributes.recommendation)"
+            :recommendation="recommendation.attributes.recommendation" />
+        </ul>
+        <div
+          v-if="currentRecommendations.length === 0"
+          class="u-pt-0_5 border--top">
+          {{ Translator.trans('statement.list.empty') }}
+        </div>
+      </template>
+    </template>
+  </dp-modal>
+</template>
+
+<script>
+import { DpLabel, DpLoading } from 'demosplan-ui/components'
+import { mapMutations, mapState } from 'vuex'
+import dataTableSearch from '../DpDataTable/DataTableSearch'
+import { dpApi } from 'demosplan-utils'
+import DpInsertableRecommendation from './DpRecommendationModal/DpInsertableRecommendation'
+import DpModal from '../DpModal'
+import DpSearchField from '../form/DpSearchField'
+
+export default {
+  name: 'DpRecommendationModal',
+
+  components: {
+    DpInsertableRecommendation,
+    DpLabel,
+    DpLoading,
+    DpSearchField,
+    DpModal
+  },
+
+  // Array of procedureIds recommendations should be searched in.
+  inject: ['recommendationProcedureIds'],
+
+  props: {
+    procedureId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    segmentId: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      searchTerm: '',
+      similarRecommendations: [],
+      isLoading: true
+    }
+  },
+
+  computed: {
+    ...mapState('statementSegment', {
+      segments: 'items'
+    }),
+
+    ...mapState('tag', {
+      tags: 'items'
+    }),
+
+    currentRecommendations () {
+      return dataTableSearch(this.searchTerm, this.similarRecommendations, ['attributes.recommendation'])
+    },
+
+    segment () {
+      return this.segments[this.segmentId]
+    },
+
+    tagIds () {
+      return this.segment.hasRelationship('tags')
+        ? this.segment.relationships.tags.data.map(tag => tag.id)
+        : []
+    },
+
+    tagTitles () {
+      return this.segment.hasRelationship('tags')
+        ? this.segment.relationships.tags.data.map(tag => this.tags[tag.id].attributes.title)
+        : []
+    }
+  },
+
+  methods: {
+    ...mapMutations('statementSegment', ['setItem']),
+
+    getRecommendationProcedureName (recommendation, included) {
+      const recommendationProcedureId = this.getRecommendationProcedureId(recommendation, included)
+      const procedure = included.find(item => item.id === recommendationProcedureId)
+      return procedure.attributes.name
+    },
+
+    getRecommendationProcedureId (recommendation, included) {
+      const parentStatementId = recommendation.relationships?.parentStatement.data?.id || null
+      const parentStatement = included.find(item => item.id === parentStatementId)
+      return parentStatement.relationships.procedure.data.id
+    },
+
+    getTagTitle (id, idx) {
+      return (this.tags[id] && this.tags[id].attributes.title) + ((idx < this.tagIds.length - 1 && ',') || '')
+    },
+
+    isRecommendationFromOtherProcedure (recommendation, included) {
+      const recommendationProcedureId = this.getRecommendationProcedureId(recommendation, included)
+      return this.procedureId !== recommendationProcedureId
+    },
+
+    toggleInsert (recommendation) {
+      this.$emit('insert-recommendation', recommendation)
+      this.toggleModal()
+    },
+
+    toggleModal (open) {
+      if (open === 'open') {
+        this.isLoading = true
+        this.fetchSimilarRecommendations()
+          .then(({ data }) => {
+            this.similarRecommendations = data.data.map(recommendation => {
+              return {
+                ...recommendation,
+                fromOtherProcedure: this.isRecommendationFromOtherProcedure(recommendation, data.included),
+                procedureName: this.getRecommendationProcedureName(recommendation, data.included)
+              }
+            })
+
+            /*
+             * Recommendations from the current procedure are more relevant to the user than recommendations from another procedure.
+             * Therefore, we put all recommendations from the current procedure on top.
+             */
+            this.similarRecommendations.sort((a, b) => {
+              if (a.fromOtherProcedure && b.fromOtherProcedure === false) {
+                return 1
+              }
+              if (a.fromOtherProcedure === false && b.fromOtherProcedure) {
+                return -1
+              }
+
+              return 0
+            })
+
+            const uniqueRecommendationsText = []
+            const uniqueRecommendations = []
+
+            this.similarRecommendations.forEach((obj) => {
+              if (uniqueRecommendationsText.includes(obj.attributes.recommendation) === false) {
+                uniqueRecommendations.push(obj)
+                uniqueRecommendationsText.push(obj.attributes.recommendation)
+              }
+            })
+
+            this.similarRecommendations = uniqueRecommendations
+
+            this.isLoading = false
+          })
+      }
+      this.$refs.recommendationModal.toggle()
+    },
+
+    updateSegment (recommendation) {
+      const payload = JSON.parse(JSON.stringify(this.segment))
+      payload.attributes.recommendation = recommendation
+      this.setItem({ ...payload, id: payload.id, group: null })
+    },
+
+    fetchSimilarRecommendations () {
+      const url = Routing.generate('api_resource_list', { resourceType: 'StatementSegment' })
+      const params = {
+        include: 'parentStatement,parentStatement.procedure',
+        fields: {
+          StatementSegment: [
+            'id',
+            'recommendation',
+            'text',
+            'externId',
+            'internId',
+            'orderInProcedure',
+            'parentStatement'
+          ].join(),
+          Statement: [
+            'procedure'
+          ].join()
+        },
+        filter: {
+          tags: {
+            condition: {
+              path: 'tags.title',
+              value: this.tagTitles,
+              operator: 'IN'
+            }
+          },
+          notEmpty: {
+            condition: {
+              path: 'recommendation',
+              value: '',
+              operator: '<>'
+            }
+          },
+          notSelf: {
+            condition: {
+              path: 'id',
+              value: this.segmentId,
+              operator: '<>'
+            }
+          },
+          anyOfProcedures: {
+            condition: {
+              path: 'parentStatement.procedure.id',
+              value: this.recommendationProcedureIds,
+              memberOf: 'IN'
+            }
+          }
+        }
+      }
+      return dpApi.get(url, params, { serialize: true })
+    },
+
+    setSearchTerm (term) {
+      this.searchTerm = term
+    }
+  }
+}
+</script>

package/components/core/DpEditor/DpResizableImage.vue

@@ -0,0 +1,121 @@
+<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>
+
+<template>
+  <span
+    class="resizable-image"
+    ref="imagewrapper"
+    tabindex="1"
+    @mouseup="() => updateImageDimensions(node.attrs.width)"
+    :style="`height: ${node.attrs.height}px; width: ${node.attrs.width}px`">
+    <img
+      @click.ctrl="$root.$emit('open-image-alt-modal', $event, id)"
+      :alt="node.attrs.alt"
+      ref="image"
+      :src="node.attrs.src"
+      :title="Translator.trans('image.alt.edit.hint')"
+      :width="node.attrs.width">
+  </span>
+</template>
+
+<script>
+import { v4 as uuid } from 'uuid'
+
+export default {
+  name: 'DpResizableImage',
+
+  props: {
+    getPos: {
+      type: Function,
+      required: false,
+      default: () => ({})
+    },
+
+    node: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+
+    options: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+
+    selected: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    updateAttrs: {
+      type: Function,
+      required: false,
+      default: () => ({})
+    },
+
+    view: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+
+  data () {
+    return {
+      id: uuid(),
+      observer: null,
+      ratioFactor: 1
+    }
+  },
+
+  methods: {
+    updateImageDimensions (width) {
+      if (width > 0) {
+        this.$nextTick(() => {
+          this.updateAttrs({
+            height: width / this.ratioFactor,
+            width: width
+          })
+        })
+      }
+    },
+
+    setRatio (updateSize = false) {
+      const img = new Image()
+      img.onload = () => {
+        this.ratioFactor = img.width / img.height
+
+        // If the width is not set jet, set it to the image original dimensions
+        if (updateSize) {
+          // The max width should not be wider than the editor.
+          const innerEditorWidth = this.$parent.$el.clientWidth - 40
+          const width = (img.width < innerEditorWidth) ? img.width : innerEditorWidth
+          this.updateImageDimensions(width)
+        }
+      }
+      img.src = this.node.attrs.src // This must be done AFTER setting onload
+    }
+  },
+
+  mounted () {
+    // Observe changes to image wrapper to update image size
+    this.observer = new ResizeObserver(e => this.updateImageDimensions(e[0].target.offsetWidth))
+    this.observer.observe(this.$refs.imagewrapper)
+
+    this.$root.$on('update-image:' + this.id, data => {
+      this.updateAttrs(data)
+    })
+
+    const updateSize = (this.node.attrs.height > 0) === false || this.node.attrs.height === Infinity
+    this.setRatio(updateSize)
+  }
+}
+</script>