@demos-europe/demosplan-ui 0.0.1

package/components/core/DpTreeList/DpTreeListNode.vue

@@ -0,0 +1,348 @@
+<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="border--top position--relative"
+    data-cy="treeListNode">
+    <div class="c-treelist__node flex">
+      <div
+        class="display--inline-block u-p-0_25 u-pr-0 u-mt-0_125"
+        :class="dragHandle"
+        v-if="isDraggable">
+        <dp-icon
+          class="c-treelist__drag-handle-icon"
+          icon="drag-handle" />
+      </div>
+      <dp-tree-list-checkbox
+        v-if="isSelectable"
+        :checked="isSelected"
+        :name="checkboxIdentifier"
+        :string-value="nodeId"
+        @check="setSelectionState({ selectionState: !isSelected })" />
+      <div
+        class="flex flex-grow flex-items-start"
+        :style="indentationStyle">
+        <dp-tree-list-toggle
+          class="c-treelist__folder text--left u-pv-0_25"
+          :class="{'pointer-events-none': 0 === children.length}"
+          :icon-class-prop="iconClassFolder"
+          v-if="isBranch"
+          v-model="isExpanded" />
+        <div class="flex-grow u-pl-0 u-p-0_25">
+          <slot
+            v-if="isBranch"
+            name="branch"
+            :node-element="node"
+            :node-children="children"
+            :node-id="nodeId"
+            :parent-id="parentId" />
+          <slot
+            v-if="isLeaf"
+            name="leaf"
+            :node-element="node"
+            :node-id="nodeId"
+            :parent-id="parentId" />
+        </div>
+      </div>
+      <dp-tree-list-toggle
+        data-cy="treeListToggle"
+        v-if="isBranch"
+        class="align-self-start"
+        :disabled="!hasToggle"
+        v-tooltip="Translator.trans(!hasToggle ? 'no.elements.existing' : '')"
+        v-model="isExpanded" />
+      <div
+        v-else
+        class="min-width-25" />
+    </div>
+    <draggable
+      v-model="tree"
+      v-bind="options.draggable"
+      class="list-style-none u-mb-0 u-1-of-1"
+      :disabled="hasDraggableChildren === false"
+      :group="options.dragAcrossBranches ? 'treelistgroup' : nodeId"
+      tag="ul"
+      :move="onMove"
+      @change="(action) => handleChange(action, nodeId)"
+      @end="handleDrag('end')"
+      @start="handleDrag('start')">
+      <dp-tree-list-node
+        v-for="child in children"
+        v-show="true === isExpanded"
+        :ref="`node_${child.id}`"
+        :key="child.id"
+        :check-branch="checkBranch"
+        :children="child.children || []"
+        :handle-change="handleChange"
+        :handle-drag="handleDrag"
+        :level="level + 1"
+        :node="child"
+        :node-id="child.id"
+        :on-move="onMove"
+        :options="options"
+        :parent-id="nodeId"
+        :parent-selected="isSelected"
+        @draggable-change="bubbleDraggableChange"
+        @end="handleDrag('end')"
+        @node-selected="handleChildSelectionChange"
+        @start="handleDrag('start')"
+        @tree-data-change="bubbleChangeEvent">
+        <template
+          v-for="slot in Object.keys($scopedSlots)"
+          v-slot:[slot]="scope">
+          <slot
+            :name="slot"
+            v-bind="scope" />
+        </template>
+      </dp-tree-list-node>
+    </draggable>
+  </li>
+</template>
+
+<script>
+import { checkboxWidth, dragHandleWidth, levelIndentationWidth } from './utils/constants'
+import { DpIcon } from 'demosplan-ui/components'
+import DpTreeListCheckbox from './DpTreeListCheckbox'
+import DpTreeListToggle from './DpTreeListToggle'
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'DpTreeListNode',
+
+  components: {
+    DpIcon,
+    DpTreeListCheckbox,
+    DpTreeListToggle,
+    draggable
+  },
+
+  props: {
+    checkBranch: {
+      type: Function,
+      required: true
+    },
+
+    children: {
+      type: Array,
+      required: true
+    },
+
+    draggable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+
+    /*
+     * The function to handle the draggable "change" event is passed as a prop here.
+     * This way we do not run into performance issues with deeply nested lists.
+     * @see https://www.digitalocean.com/community/tutorials/vuejs-communicating-recursive-components
+     */
+    handleChange: {
+      type: Function,
+      required: true
+    },
+
+    /*
+     * The function to handle the draggable "start" and "end" events is passed as a prop here.
+     */
+    handleDrag: {
+      type: Function,
+      required: true
+    },
+
+    level: {
+      type: Number,
+      required: true
+    },
+
+    node: {
+      type: Object,
+      required: true
+    },
+
+    nodeId: {
+      type: String,
+      required: true
+    },
+
+    onMove: {
+      type: Function,
+      required: true
+    },
+
+    options: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+
+    parentId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    parentSelected: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      isExpanded: false,
+      isSelected: false
+    }
+  },
+
+  computed: {
+    checkboxIdentifier () {
+      const prefix = this.isBranch
+        ? this.options.checkboxIdentifier.branch
+        : this.options.checkboxIdentifier.leaf
+      return prefix + ':' + this.nodeId
+    },
+
+    dragHandle () {
+      const str = this.options.draggable.handle
+      return str.substring(1, str.length)
+    },
+
+    hasDraggableChildren () {
+      return this.isBranch && (this.options.dragLeaves || this.options.dragBranches) && this.draggable
+    },
+
+    hasToggle () {
+      return this.isBranch && this.children.length > 0
+    },
+
+    iconClassFolder () {
+      const hasContent = this.children.length > 0
+      let folderClass
+      if (hasContent) {
+        folderClass = this.isExpanded ? 'fa-folder-open' : 'fa-folder'
+      } else {
+        folderClass = 'fa-folder-o'
+      }
+      return 'fa ' + folderClass
+    },
+
+    indentationStyle () {
+      let margin = this.level * levelIndentationWidth
+
+      // If leaves are draggable, but branches are not, or vice versa, add extra space
+      if ((this.isBranch && !this.options.dragBranches && this.options.dragLeaves) ||
+        (this.isLeaf && this.options.dragBranches && !this.options.dragLeaves)) {
+        margin += dragHandleWidth
+      }
+
+      // If leaves are selectable, but branches are not, or vice versa, add extra space
+      if ((this.isBranch && !this.options.branchesSelectable && this.options.leavesSelectable) ||
+        (this.isLeaf && this.options.branchesSelectable && !this.options.leavesSelectable)) {
+        margin += checkboxWidth
+      }
+
+      return `margin-left: ${margin}px;`
+    },
+
+    isBranch () {
+      return this.checkBranch({ node: this.node, children: this.children, id: this.nodeId })
+    },
+
+    isDraggable () {
+      return this.isDraggableLeaf || this.isDraggableBranch
+    },
+
+    isDraggableBranch () {
+      return this.options.dragBranches && this.isBranch
+    },
+
+    isDraggableLeaf () {
+      return this.options.dragLeaves && this.isLeaf
+    },
+
+    isLeaf () {
+      return this.isBranch === false
+    },
+
+    isSelectable () {
+      return (this.isBranch && this.options.branchesSelectable) || (this.isLeaf && this.options.leavesSelectable) || false
+    },
+
+    // See docblock in `tree` computed of parent component.
+    tree: {
+      get () {
+        return this.children
+      },
+
+      set (val) {
+        this.$emit('tree-data-change', { nodeId: this.nodeId, newOrder: val })
+      }
+    }
+  },
+
+  watch: {
+    parentSelected (val) {
+      if (this.options.selectOn.parentSelect && val === true && this.isSelected === false) {
+        this.setSelectionState({ selectionState: val, fromParent: true })
+      }
+
+      if (this.options.deselectOn.parentDeselect && val === false && this.isSelected === true) {
+        this.setSelectionState({ selectionState: val, fromParent: true })
+      }
+    }
+  },
+
+  methods: {
+    bubbleChangeEvent (payload) {
+      this.$emit('tree-data-change', payload)
+    },
+
+    bubbleDraggableChange (payload) {
+      this.$emit('draggable-change', payload)
+    },
+
+    handleChildSelectionChange (selections) {
+      // Extract child selection state from the latest selection event
+      const childSelectionState = selections[selections.length - 1].selectionState
+
+      if (this.options.deselectOn.childDeselect && childSelectionState === false && this.isSelected === true) {
+        this.setSelectionState({ selectionState: childSelectionState, selections })
+      } else if (this.options.selectOn.childSelect && childSelectionState === true && this.isSelected === false) {
+        this.setSelectionState({ selectionState: childSelectionState, selections })
+        // Just bubble the event if the current node doesn't require any changes
+      } else {
+        this.$emit('node-selected', selections)
+      }
+    },
+
+    setSelectionState ({ selectionState, selections = [], fromParent = false }) {
+      const selectionsCpy = [...selections]
+
+      this.isSelected = selectionState
+      selectionsCpy.push({
+        nodeId: this.nodeId,
+        nodeType: this.isBranch === true ? 'branch' : 'leaf',
+        selectionState: selectionState
+      })
+
+      if (fromParent === false) {
+        this.$emit('node-selected', selectionsCpy)
+      }
+    }
+  },
+
+  mounted () {
+    this.$root.$on('treelist:toggle-all', (expanded) => (this.isExpanded = expanded))
+  }
+}
+</script>

package/components/core/DpTreeList/DpTreeListToggle.vue

@@ -0,0 +1,71 @@
+<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>
+  <button
+    type="button"
+    class="o-link--default btn--blank"
+    :aria-label="label"
+    @click="toggle">
+    <i
+      :class="iconClass"
+      aria-hidden="true" />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'DpTreeListToggle',
+
+  props: {
+    value: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    iconClassProp: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    toggleAll: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  computed: {
+    /*
+     * May be passed from outside, but defaults to angle icon controlled by state.
+     * This is somewhat messy but removes cruft from DpTreeListNode.
+     */
+    iconClass () {
+      return this.iconClassProp !== ''
+        ? this.iconClassProp
+        : ('font-size-large line-height--1 u-p-0_25 fa ' + (this.value ? 'fa-angle-up' : 'fa-angle-down'))
+    },
+
+    label () {
+      // Here, the relatively generic term "element" is chosen to keep the wording generic.
+      return this.toggleAll
+        ? Translator.trans(this.value ? 'aria.collapse.all' : 'aria.expand.all')
+        : Translator.trans(this.value ? 'aria.collapse' : 'aria.expand')
+    }
+  },
+
+  methods: {
+    toggle () {
+      this.$emit('input', !this.value)
+    }
+  }
+}
+</script>

package/components/core/DpTreeList/utils/constants.js

@@ -0,0 +1,14 @@
+/**
+ * (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
+ */
+
+const checkboxWidth = 30
+const dragHandleWidth = 22
+const levelIndentationWidth = 25
+
+export { checkboxWidth, dragHandleWidth, levelIndentationWidth }

package/components/core/DpUpload/DpUpload.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>
+
+<template>
+  <div ref="fileInput" />
+</template>
+
+<script>
+import { de } from './utils/UppyTranslations'
+import DragDrop from '@uppy/drag-drop'
+import { getFileTypes } from 'demosplan-utils/lib/FileInfo'
+import { hasOwnProp } from 'demosplan-utils'
+import ProgressBar from '@uppy/progress-bar'
+import Tus from '@uppy/tus'
+import Uppy from '@uppy/core'
+
+export default {
+  name: 'DpUpload',
+
+  props: {
+    /**
+     * Array of mimeTypes or a defined preset as String
+     * @see  '@DemosPlanCoreBundle/lib/FileInfo'
+     */
+    allowedFileTypes: {
+      type: [Array, String],
+      required: false,
+      default: 'pdf'
+    },
+
+    /**
+     * Warning message that will be rendered if files are added that are not allowed in `allowedFileTypes`.
+     */
+    allowedFileTypesWarning: {
+      type: String,
+      default: 'warning.filetype'
+    },
+
+    /**
+     * Allow users to upload more files after uploading some
+     */
+    allowMultipleUploads: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Define chunk size for huge files like PDFs
+     */
+    chunkSize: {
+      type: Number,
+      default: Infinity,
+      required: false
+    },
+
+    /**
+     * Maximum file size in bytes for each individual file
+     */
+    maxFileSize: {
+      type: Number,
+      default: 10000000
+    },
+
+    /**
+     * Maximum number of files that can be uploaded.
+     * By default its a single file upload.
+     */
+    maxNumberOfFiles: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+
+    translations: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+
+  data () {
+    return {
+      currentFileHash: '',
+      currentFileId: '',
+      uppy: null
+    }
+  },
+
+  computed: {
+    allowedFileTypeArray () {
+      return getFileTypes(this.allowedFileTypes)
+    }
+  },
+
+  methods: {
+    getCookieValue (a) {
+      const b = document.cookie.match('(^|[^;]+)\\s*' + a + '\\s*=\\s*([^;]+)')
+      return b ? b.pop() : ''
+    },
+
+    initialize () {
+      const locale = { strings: { ...de().strings, ...this.translations } }
+      this.uppy = new Uppy({
+        disabled: true,
+        autoProceed: true,
+        allowMultipleUploads: this.allowMultipleUploads,
+        restrictions: {
+          allowedFileTypes: this.allowedFileTypeArray,
+          maxFileSize: this.maxFileSize,
+          maxNumberOfFiles: this.maxNumberOfFiles
+        },
+        locale: locale
+      })
+
+      this.uppy.use(DragDrop, {
+        target: this.$refs.fileInput,
+        width: '100%',
+        note: null,
+        locale: locale
+      })
+
+      this.uppy.use(ProgressBar, {
+        target: this.$refs.fileInput,
+        fixed: false,
+        hideAfterFinish: false
+      })
+
+      let currentProcedureId = null
+
+      if (typeof dplan !== 'undefined' && hasOwnProp(dplan, 'procedureId')) {
+        currentProcedureId = dplan.procedureId
+      }
+      const headers = {}
+      // Add current procedure id only if set
+      if (currentProcedureId !== null && currentProcedureId !== '0') {
+        headers['X-Demosplan-Procedure-Id'] = currentProcedureId
+      }
+
+      // If we have a basic auth, for some reason it has to be added to the header
+      if (dplan.settings.basicAuth !== '') {
+        headers.Authorization = dplan.settings.basicAuth
+      }
+
+      this.uppy.use(Tus, {
+        endpoint: dplan.paths.uploadPost,
+        chunkSize: 819200, // 800 KiB
+        limit: 5,
+        onAfterResponse: (_req, res) => {
+          this.currentFileHash = res.getHeader('X-Demosplan-File-Hash')
+          this.currentFileId = res.getHeader('X-Demosplan-File-Id')
+        },
+        removeFingerprintOnSuccess: true,
+        headers
+      })
+    }
+  },
+
+  mounted () {
+    this.initialize()
+
+    this.uppy.on('complete', result => {
+      setTimeout(() => {
+        /*
+         * Triggers uppy file-removed event (we are instead using a custom file-remove event. we do not want files to
+         * be removed on resetting the uppy ui
+         */
+        this.uppy.cancelAll()
+      }, 2000)
+
+      this.$emit('uploads-completed', result)
+    })
+
+    this.uppy.on('upload-error', (file, error, response) => {
+      console.error(error)
+      dplan.notify.error(Translator.trans('error.fileupload'))
+      this.$emit('file-error', { file, error, response })
+    })
+
+    this.uppy.on('file-added', file => {
+      this.$emit('file-added', file)
+    })
+
+    this.uppy.on('upload', data => {
+      this.$emit('upload', data)
+    })
+
+    this.uppy.on('restriction-failed', () => {
+      dplan.notify.warning(Translator.trans(this.allowedFileTypesWarning))
+    })
+
+    /*
+     * `upload-success` fires each time a single upload completes successfully.
+     * @see https://uppy.io/docs/uppy/#upload-success
+     */
+    this.uppy.on('upload-success', (file) => {
+      const { name, size, type } = file.data
+      const newFile = {
+        name: name,
+        hash: this.currentFileHash,
+        size: size,
+        type: type,
+        id: file.id, // The uppy internal file id
+        fileId: this.currentFileId // The id of the file within demosplan
+      }
+      this.currentFileHash = ''
+      this.currentFileId = ''
+      this.$emit('upload-success', newFile)
+    })
+  },
+
+  beforeDestroy () {
+    if (this.uppy) {
+      this.uppy.close()
+    }
+  }
+}
+</script>