@demos-europe/demosplan-ui 0.0.1

package/components/core/DpCard.vue

@@ -0,0 +1,54 @@
+<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>
+  <div class="box-shadow-1 space-inset-m">
+    <h4
+      v-if="heading !== ''"
+      class="u-mb-0 space-inline-xs">
+      <span>
+        {{ heading }}
+      </span>
+      <dp-contextual-help
+        v-if="headingTooltip !== ''"
+        :text="headingTooltip" />
+    </h4><!--
+ --><slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DpCard',
+
+  components: {
+    DpContextualHelp: () => import('./DpContextualHelp')
+  },
+
+  props: {
+    /**
+     * The card heading is displayed as a bold text with medium font size.
+     */
+    heading: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * A contextual help tooltip right beside the card heading may reveal additional information.
+     */
+    headingTooltip: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>

package/components/core/DpChangeStateAtDate.vue

@@ -0,0 +1,223 @@
+<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 renders a dropdown/select with a checkbox.
+  If the checkbox is checked, the dropdown is read-only (and shows the current state)
+  and a datepicker gets active and another dropdown with the same options as the first one.
+
+  it is designed to be used for activating a time-controlled change of the options.
+  -->
+  <usage>
+    <dp-change-state-at-date
+      regular-dropdown-id="id_for_the_regular_dropdown_that_gets_send_if_the_checkbox_is_unchecked"
+      delayed-switch-dropdown-id="id_for_the_dropdown_that_gets_send_if_the_checkbox_is_checked"
+      label="trans.key"
+      date-id="id_for_the_date_input"
+      :status-options="[{ 'value': 'myValue', 'label': 'trans.key.one'}, {'value': 'anotherValue', 'label': 'trans.key.two'}]"
+      init-status="myValue"></dp-change-state-at-date>
+  </usage>
+</documentation>
+
+<template>
+  <div>
+    <div class="layout u-mb-0_75">
+      <dp-select
+        v-model="actualStatus"
+        class="layout__item u-4-of-12"
+        :data-cy="label"
+        :label="{
+          text: Translator.trans(label)
+        }"
+        :name="regularDropdownId"
+
+        :options="statusOptions" />
+    </div>
+    <div class="layout">
+      <div class="layout__item u-5-of-12 u-12-of-12-lap-down u-mt-0_125">
+        <span>
+          <input
+            :id="checkSwitchId"
+            :name="checkSwitchId"
+            value="1"
+            type="checkbox"
+            :checked="active"
+            @click="toggleCheckbox">
+          <label
+            :for="checkSwitchId"
+            class="o-form__label display--inline-block">
+            {{ Translator.trans('change.state.at.date') }}
+          </label>
+        </span>
+      </div><!--
+   --><div
+        v-if="active"
+        class="u-mt-0_125">
+        <div
+          class="layout__item u-2-of-12 u-6-of-12-lap-down"
+          :class="{ 'color--grey': active === false }">
+          <dp-label
+            required
+            :text="Translator.trans('on')"
+            :for="dateId" />
+          <dp-datepicker
+            class="o-form__control-wrapper"
+            required
+            :id="dateId"
+            :name="dateId"
+            :min-date="disabledDates.to"
+            :disabled="active === false"
+            v-model="changeDate"
+            @change="dateChanged"
+            :calendars-after="2" />
+        </div><!--
+     --><dp-select
+          v-model="futureStatus"
+          class="layout__item u-5-of-12 u-6-of-12-lap-down"
+          :label="{
+            text: Translator.trans('change.state.to')
+          }"
+          :name="delayedSwitchDropdownId"
+          :options="statusOptions" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formatDate, toDate } from 'demosplan-utils'
+import DpDatepicker from './form/DpDatepicker'
+import { DpLabel } from 'demosplan-ui/components'
+import DpSelect from './form/DpSelect'
+
+export default {
+  name: 'DpChangeStateAtDate',
+
+  components: {
+    DpDatepicker,
+    DpLabel,
+    DpSelect
+  },
+
+  props: {
+    dateId: {
+      required: true,
+      type: String
+    },
+
+    delayedSwitchDropdownId: {
+      required: true,
+      type: String
+    },
+
+    checkSwitchId: {
+      required: false,
+      type: String,
+      default: 'change_state_delay_toggle'
+    },
+
+    activeDelay: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+
+    defaultNewState: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
+    defaultCurrentState: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
+    regularDropdownId: {
+      required: true,
+      type: String
+    },
+
+    label: {
+      required: false,
+      type: String,
+      default: ''
+    },
+
+    initDate: {
+      required: false,
+      type: String,
+      default: null
+    },
+
+    // Has to match a value from the statusOptions
+    initStatus: {
+      required: false,
+      type: String,
+      default: null
+    },
+
+    // Array of Objects with { value, label }
+    statusOptions: {
+      required: true,
+      type: Array
+    }
+  },
+
+  data () {
+    return {
+      active: this.activeDelay,
+      changeDate: '',
+      actualStatus: this.defaultCurrentState,
+      futureStatus: this.defaultNewState,
+      disabledDates: {
+        to: formatDate(this.getTomorrowDate()) // Disable all dates in the past
+      }
+    }
+  },
+
+  computed: {
+    initLabel () {
+      const initLabel = this.statusOptions.find(el => el.value === this.initStatus).label
+      return Translator.trans(initLabel)
+    }
+  },
+
+  methods: {
+    dateChanged () {
+      this.$emit('date:changed', toDate(this.changeDate))
+    },
+
+    getTomorrowDate () {
+      const tomorrow = new Date()
+      tomorrow.setDate(tomorrow.getDate() + 1)
+
+      return tomorrow
+    },
+
+    statusChanged () {
+      this.$emit('status:changed', this.newStatus)
+    },
+
+    toggleCheckbox () {
+      this.active = this.active === false
+    }
+  },
+
+  mounted () {
+    if (this.initDate !== '' && this.initDate !== null) {
+      this.changeDate = this.initDate
+    } else {
+      this.changeDate = formatDate()
+    }
+  }
+}
+</script>

package/components/core/DpCheckboxGroup.vue

@@ -0,0 +1,93 @@
+<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>
+  <fieldset class="u-pb-0">
+    <legend
+      v-if="label !== ''"
+      v-cleanhtml="label"
+      class="font-size-medium is-label"
+      :class="inline ? 'float--left' : 'u-mb-0_25'" />
+    <dp-checkbox
+      v-for="(option, idx) in options"
+      :id="option.id"
+      :key="`option_${idx}`"
+      v-model="selected[option.id]"
+      :class="inline ? 'display--inline-block u-ml' : ''"
+      :label="{
+        text: option.label
+      }"
+      :name="option.name || ''"
+      @change="$emit('update', selected)" />
+  </fieldset>
+</template>
+
+<script>
+import { CleanHtml } from 'demosplan-ui/directives'
+import DpCheckbox from './form/DpCheckbox'
+
+export default {
+  name: 'DpCheckboxGroup',
+
+  components: {
+    DpCheckbox
+  },
+
+  directives: {
+    cleanhtml: CleanHtml
+  },
+
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+
+    label: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    inline: {
+      type: Boolean,
+      default: false
+    },
+
+    selectedOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  data () {
+    return {
+      selected: {}
+    }
+  },
+
+  watch: {
+    selectedOptions () {
+      this.selected = this.selectedOptions
+    }
+  },
+
+  methods: {
+    setSelected () {
+      this.options.forEach(option => {
+        Vue.set(this.selected, option.id, false)
+      })
+    }
+  },
+
+  mounted () {
+    this.setSelected()
+  }
+}
+</script>

package/components/core/DpContextualHelp.vue

@@ -0,0 +1,54 @@
+<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>
+  <!--
+
+  The DpContextualHelp component renders an icon indicating contextual help,
+  which shows a tooltip able to handle text or html content.
+
+  -->
+  <usage>
+    <dp-contextual-help :text="Translator.trans('statements.import.hint')" />
+  </usage>
+</documentation>
+
+<script>
+export default {
+  name: 'DpContextualHelp',
+
+  functional: true,
+
+  props: {
+    /**
+     * A translation key representing the actual tooltip content.
+     * May actually be any string including html.
+     */
+    text: {
+      type: String,
+      required: true
+    }
+  },
+
+  render: function (h, { props, data }) {
+    return h('i', {
+      attrs: {
+        class: `fa fa-question-circle ${typeof data.staticClass === 'undefined' ? '' : data.staticClass}`,
+        'aria-label': Translator.trans('contextual.help')
+      },
+      directives: [
+        {
+          name: 'tooltip',
+          value: props.text
+        }
+      ]
+    })
+  }
+}
+</script>

package/components/core/DpCopyPasteButton.vue

@@ -0,0 +1,47 @@
+<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 is the button that copies text fro one textarea/editor and passes it to tiptap editor.
+  Props:
+  - copyContent - the content that we want to copy
+  - buttonlabel - the label on the button
+
+  This component takes care of the fact that we should pass to tiptap content without dp-obscure components (see: addToTarget function)
+</documentation>
+
+<template>
+  <a
+    @click.stop.prevent="$emit('set-text', copyContent)"
+    href="">
+    <i
+      aria-hidden="true"
+      class="fa fa-files-o" />
+    {{ Translator.trans(buttonLabel) }}
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'DpCopyPasteButton',
+
+  props: {
+    copyContent: {
+      required: true,
+      type: String
+    },
+
+    buttonLabel: {
+      required: false,
+      type: String,
+      default: 'copy'
+    }
+  }
+}
+</script>

package/components/core/DpDashboardTaskCard.vue

@@ -0,0 +1,123 @@
+<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-card
+    :heading="Translator.trans('tasks.my')">
+    <div class="u-mt">
+      <span v-cleanhtml="Translator.trans('segments.assigned.now', { count: assignedSegmentCount })" />
+    </div>
+    <div
+      class="text--right u-mt"
+      v-if="assignedSegmentCount !== 0">
+      <dp-button
+        :href="userFilteredSegmentUrl"
+        :text="Translator.trans('tasks.view')" />
+    </div>
+  </dp-card>
+</template>
+
+<script>
+import { checkResponse, dpApi } from 'demosplan-utils'
+import { CleanHtml } from 'demosplan-ui/directives'
+import { DpButton } from 'demosplan-ui/components'
+import DpCard from './DpCard'
+
+export default {
+  name: 'DpDashboardTaskCard',
+
+  components: {
+    DpButton,
+    DpCard
+  },
+
+  directives: {
+    cleanhtml: CleanHtml
+  },
+
+  props: {
+    currentUserId: {
+      type: String,
+      required: true
+    },
+
+    procedureId: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      assignedSegmentCount: 0,
+      userHash: ''
+    }
+  },
+
+  computed: {
+    userFilteredSegmentUrl () {
+      return Routing.generate('dplan_segments_list', { procedureId: this.procedureId }) + '/' + this.userHash
+    }
+  },
+
+  mounted () {
+    // Filter by current user as assignee and current procedure
+    const filterQuery = {
+      [this.currentUserId]: {
+        condition: {
+          path: 'assignee',
+          value: this.currentUserId
+        }
+      },
+      sameProcedure: {
+        condition: {
+          path: 'parentStatement.procedure.id',
+          value: this.procedureId
+        }
+      }
+    }
+
+    // Get count of segments assigned to the current user
+    const segmentUrl = Routing.generate('api_resource_list', { resourceType: 'StatementSegment' })
+    dpApi.get(segmentUrl, { filter: filterQuery }, { serialize: true }).then(response => {
+      this.assignedSegmentCount = response.data.data.length
+    })
+
+    /*
+     * It is currently difficult to get the default filter hash but a filter hash is needed to retrieve an updated hash.
+     * Therefore, we place a get request to the default segment list route. The backend will respond with a 302 status
+     * code redirecting to the default filter hash. The 302 is handled by the browser and axios will receive the
+     * redirected response. The redirected response will contain the default filter hash, which can then be extracted
+     * and used to obtain an updated filter hash.
+     */
+    dpApi.get(Routing.generate('dplan_segments_list', { procedureId: this.procedureId }))
+      .then(response => {
+        const redirectUrl = response.request.responseURL
+        const splitUrl = redirectUrl.split('/')
+        const queryHash = splitUrl[splitUrl.length - 1]
+        const filterData = {
+          filter: {
+            ...filterQuery
+          },
+          searchPhrase: ''
+        }
+
+        // Get the actual filter hash
+        const url = Routing.generate('dplan_rpc_segment_list_query_update', { queryHash })
+        dpApi.patch(url, {}, filterData)
+          .then(response => checkResponse(response))
+          .then(response => {
+            if (response) {
+              this.userHash = response
+            }
+          })
+      })
+  }
+}
+</script>

package/components/core/DpDataTable/DataTableSearch.js

@@ -0,0 +1,44 @@
+/**
+ * (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
+ */
+
+/**
+ *
+ * @param searchterm String | is the term that should be searched
+ * @param items Array | is an array of objects that should be searched
+ * @param fields Array | properties of the objects that should be included in the search.
+ *  deep property access is possible (e.g. [ 'attributes.text' ])
+ * @returns Array
+ *
+ */
+export default function dataTableSearch (searchterm, items, fields) {
+  let foundItems = items
+  if (searchterm.length > 0) {
+    // Run some replacements on the searchterm to avoid regex issues
+    const regexSpecialChars = /(\[|\]|\\|\^|\$|\.|\||\?|\*|\+|\(|\)|\.)/ig
+    let preparedSearchTerm = searchterm.replace(regexSpecialChars, '\\$1')
+    preparedSearchTerm = preparedSearchTerm.replace(/\s+/ig, '\\s+')
+
+    const searchRegex = new RegExp(preparedSearchTerm, 'ig')
+    foundItems = items.filter(item => {
+      return fields.filter(field => {
+        const path = field.split('.')
+        let nestedProp = item[path[0]]
+        let doesPropExist = !!nestedProp
+        let i = 1
+        while (doesPropExist && i < path.length) {
+          nestedProp = nestedProp[path[i]]
+          doesPropExist = !!nestedProp
+          i++
+        }
+        return typeof nestedProp === 'string' && nestedProp.match(searchRegex)
+      }).length > 0
+    })
+  }
+  return foundItems
+}