@demos-europe/demosplan-ui 0.0.1

package/components/core/DpDataTable/DpTableRow.vue

@@ -0,0 +1,355 @@
+<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>
+
+<script>
+import DomPurify from 'dompurify'
+import { DpIcon } from 'demosplan-ui/components'
+import DpWrapTrigger from './DpWrapTrigger'
+import { hasOwnProp } from 'demosplan-utils'
+
+export default {
+  name: 'DpTableRow',
+
+  functional: true,
+
+  props: {
+    checked: {
+      type: Boolean,
+      required: true
+    },
+
+    /**
+     * Is the expandable content currently expanded?
+     */
+    expanded: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    hasFlyout: {
+      type: Boolean,
+      required: true
+    },
+
+    /**
+     * The header of every column of the table is defined here.
+     *
+     * Each column is represented by an object with a `field` key whose value should match
+     * a key of the objects inside `items`. The `label` key controls the header of the column.
+     * The header can also have a tooltip. To define the width the column is initially
+     * rendered with when `isResizable` is used, the key `initialWidth` takes a px value.
+     */
+    headerFields: {
+      type: Array,
+      required: true
+    },
+
+    fields: {
+      type: Array,
+      required: true
+    },
+
+    item: {
+      type: Object,
+      required: true
+    },
+
+    isDraggable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    isExpandable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * The item can be locked for selection. Instead of the checkbox, a lock icon is rendered with a tooltip.
+     */
+    isLocked: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * If an item is locked for selection, the message to be shown inside the tooltip can be set here.
+     */
+    isLockedMessage: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    isResizable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    isSelectable: {
+      type: Boolean,
+      required: true
+    },
+
+    isSelectableName: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    isTruncatable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    searchTerm: {
+      type: RegExp,
+      required: true
+    },
+
+    trackBy: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Is the truncatable content currently truncated?
+     * Rename to `notTruncated`?
+     */
+    wrapped: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  render: function (h, { listeners, props, scopedSlots }) {
+    const {
+      checked,
+      expanded,
+      fields,
+      hasFlyout,
+      headerFields,
+      isDraggable,
+      isExpandable,
+      isLoading,
+      isLocked,
+      isLockedMessage,
+      isSelectable,
+      isSelectableName,
+      isTruncatable,
+      item,
+      searchTerm,
+      trackBy,
+      wrapped
+    } = props
+
+    let draggableCell = []
+    if (isDraggable) {
+      draggableCell = [
+        h('td', {
+          attrs: {
+            class: 'c-data-table__cell--narrow'
+          }
+        }, [
+          h(DpIcon, {
+            attrs: {
+              class: 'c-data-table__drag-handle u-valign--middle'
+            },
+            props: {
+              icon: 'drag-handle'
+            }
+          })
+        ])
+      ]
+    }
+
+    let checkboxCell = []
+
+    if (isSelectable) {
+      let checkboxElement
+      let checkboxData
+      if (isLocked) {
+        checkboxElement = DpIcon
+        checkboxData = {
+          class: 'u-valign--middle color--grey-light',
+          props: { icon: 'lock' },
+          directives: [
+            {
+              name: 'tooltip',
+              value: isLockedMessage
+            }
+          ]
+        }
+      } else {
+        checkboxElement = 'input'
+        checkboxData = {
+          attrs: {
+            type: 'checkbox',
+            class: 'u-m-0 u-valign--middle',
+            'data-cy': 'selectItem',
+            name: isSelectableName || null,
+            value: isSelectableName ? item[trackBy] : null
+          },
+          domProps: { checked: checked },
+          on: { click: () => listeners.toggleSelect(item[trackBy]) }
+        }
+      }
+
+      checkboxCell = [h('td', {
+        attrs: { class: 'c-data-table__cell--narrow' }
+      }, [h(checkboxElement, checkboxData)])]
+    }
+
+    let flyoutCell = []
+    if (hasFlyout) {
+      flyoutCell = [h('td', {
+        attrs: {
+          class: 'overflow-visible'
+        },
+        scopedSlots: {
+          flyout: scopedSlots.flyout
+        }
+      }, [(scopedSlots.flyout && scopedSlots.flyout(item))])]
+    }
+
+    let expandableCell = []
+    if (isExpandable) {
+      expandableCell = [h('td', {
+        attrs: {
+          class: `c-data-table__cell--narrow ${expanded ? 'is-open' : ''}`,
+          title: Translator.trans(expanded ? 'aria.collapse' : 'aria.expand')
+        },
+        on: {
+          click: () => listeners.toggleExpand(item[trackBy])
+        }
+      }, [h(DpWrapTrigger, {
+        props: {
+          expanded: expanded
+        }
+      })])]
+    }
+
+    let truncatableCell = []
+    if (isTruncatable) {
+      truncatableCell = [h('td', {
+        attrs: {
+          class: `c-data-table__cell--narrow ${wrapped ? 'is-open' : ''}`,
+          title: Translator.trans(wrapped ? 'aria.collapse' : 'aria.expand')
+        },
+        on: {
+          click: () => listeners.toggleWrap(item[trackBy])
+        }
+      }, [h(DpWrapTrigger, {
+        props: {
+          expanded: wrapped
+        }
+      })])]
+    }
+
+    const rowContent = [
+      ...draggableCell,
+      ...checkboxCell,
+      ...fields.map((field, idx) => {
+        let txt = item[field]
+        let highlighted = null
+        const headerField = headerFields.find((hf) => hf.field === field)
+        if (searchTerm && txt) {
+          txt = DomPurify.sanitize(txt)
+          highlighted = txt.replace(searchTerm, '<span style="background-color: yellow;">$&</span>')
+          highlighted = h('span', {
+            domProps: {
+              innerHTML: highlighted
+            }
+          })
+        }
+
+        let cellAttributes = {}
+        let cellInnerElement = null
+        let cellInnerElementStyle = ''
+        if (!wrapped && typeof headerField.initialWidth !== 'undefined') {
+          cellInnerElementStyle = `width: ${headerField.initialWidth}px;`
+        }
+        if (!wrapped && typeof headerField.initialMaxWidth !== 'undefined') {
+          cellInnerElementStyle += `max-width: ${headerField.initialMaxWidth}px;`
+        }
+        if (!wrapped && typeof headerField.initialMinWidth !== 'undefined') {
+          cellInnerElementStyle += `min-width: ${headerField.initialMinWidth}px;`
+        }
+        if (isTruncatable) {
+          cellAttributes = {
+            attrs: {
+              class: 'c-data-table__resizable',
+              'data-col-idx': `${idx}`
+            }
+          }
+          cellInnerElement = h('div', {
+            attrs: {
+              class: `${wrapped ? 'c-data-table__resizable--wrapped overflow-word-break' : 'c-data-table__resizable--truncated overflow-word-break'}`,
+              style: cellInnerElementStyle
+            }
+          }, [(scopedSlots[field] && scopedSlots[field](item)) || highlighted || txt || ''])
+        }
+
+        return h('td',
+          {
+            ...cellAttributes,
+            key: `${field}:${idx}`,
+            scopedSlots: {
+              [field]: scopedSlots[field]
+            }
+          },
+          [cellInnerElement || (scopedSlots[field] && scopedSlots[field](item)) || highlighted || txt || '']
+        )
+      }),
+      ...flyoutCell,
+      ...expandableCell,
+      ...truncatableCell
+    ]
+
+    const content = [h('tr', {
+      attrs: {
+        class: `row ${isLoading ? 'opacity-7' : ''} ${expanded ? 'is-expanded-row' : ''}`
+      }
+    }, rowContent)]
+
+    if (expanded && hasOwnProp(scopedSlots, 'expandedContent')) {
+      const expandedContent = scopedSlots.expandedContent(item) || ''
+      const expandedRow = h('tr',
+        {
+          attrs: {
+            class: `${isLoading ? 'opacity-7' : ''} ${expanded ? 'is-expanded-content' : ''}`
+          },
+          on: {
+            mouseenter: (e) => e.target.previousSibling.classList.add('is-hovered-content'),
+            mouseleave: (e) => e.target.previousSibling.classList.remove('is-hovered-content')
+          }
+        },
+        [h('td', { attrs: { colspan: rowContent.length } }, expandedContent)]
+      )
+
+      content.push(expandedRow)
+    }
+
+    return content
+  }
+}
+</script>

package/components/core/DpDataTable/DpWrapTrigger.vue

@@ -0,0 +1,48 @@
+<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 class="c-data-table__wrap-trigger o-link--default btn--blank">
+    <dp-icon
+      aria-hidden="true"
+      :aria-label="ariaLabel"
+      :icon="icon"
+      size="small" />
+  </button>
+</template>
+
+<script>
+import { DpIcon } from 'demosplan-ui/components'
+
+export default {
+  name: 'DpWrapTrigger',
+
+  components: {
+    DpIcon
+  },
+
+  props: {
+    expanded: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  computed: {
+    ariaLabel () {
+      return Translator.trans(this.expanded ? 'aria.collapse' : 'aria.expand')
+    },
+
+    icon () {
+      return this.expanded ? 'chevron-up' : 'chevron-down'
+    }
+  }
+}
+</script>

package/components/core/DpDataTable/lib/ResizableColumns.js

@@ -0,0 +1,83 @@
+/**
+ * (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
+ */
+
+import DpResizeHandle from '../DpResizeHandle'
+
+let namedFunc
+let currentHandle
+let nextEl
+let cursorStart = 0
+let dragStart = false
+let resize
+let resizeWidth
+let nextWidth
+
+const initResize = (e, idx) => {
+  resize = document.querySelector(`th[data-col-idx='${idx}']`)
+
+  currentHandle = resize.getElementsByClassName('c-data-table__resize-handle')[0]
+  currentHandle.classList.add('is-active')
+  nextEl = document.querySelector(`th[data-col-idx='${idx + 1}']`)
+  dragStart = true
+  cursorStart = e.pageX
+  const resizeBound = resize.getBoundingClientRect()
+  resizeWidth = resizeBound.width
+  const nextBound = nextEl.getBoundingClientRect()
+  nextWidth = nextBound.width
+  namedFunc = (e) => resizeEl(e, idx)
+  const bodyEl = document.getElementsByTagName('body')[0]
+  bodyEl.classList.add('resizing')
+  bodyEl.addEventListener('mousemove', namedFunc)
+  bodyEl.addEventListener('mouseup', stopResize)
+}
+
+const resizeEl = (e, idx) => {
+  if (dragStart) {
+    const cursorPos = e.pageX
+    const mouseMoved = cursorPos - cursorStart
+    const newWidth = resizeWidth + mouseMoved
+    const newNextWidth = nextWidth - mouseMoved
+    if (newWidth > 25 && newNextWidth > 25) {
+      resize.style.width = newWidth + 'px'
+      nextEl.style.width = newNextWidth + 'px'
+    }
+  }
+}
+
+const stopResize = (e) => {
+  currentHandle.classList.remove('is-active')
+  dragStart = false
+  document.getElementsByTagName('body')[0].removeEventListener('mousemove', namedFunc)
+  document.getElementsByTagName('body')[0].removeEventListener('mouseup', stopResize)
+  document.getElementsByTagName('body')[0].classList.remove('resizing')
+}
+
+const renderResizeWrapper = (h, wrapperContent, idx, isLast, resizeable, label, tooltip) => {
+  let headerClass = ''
+  if (resizeable) {
+    headerClass = 'c-data-table__resizable'
+  }
+  if (isLast) {
+    headerClass += ' u-pr-0'
+  }
+  return [h('th', {
+    attrs: {
+      'data-col-idx': idx,
+      class: headerClass
+    },
+    directives: [
+      {
+        name: 'tooltip',
+        value: tooltip || label
+      }
+    ]
+  }, [wrapperContent, ...isLast ? [] : [h(DpResizeHandle, { props: { displayIcon: resizeable }, on: { mousedown: (e) => initResize(e, idx) } })]])]
+}
+
+export { renderResizeWrapper }

package/components/core/DpEditableList.vue

@@ -0,0 +1,161 @@
+<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 button that, when clicked, makes an input field appear -->
+</documentation>
+
+<template>
+  <div>
+    <ul
+      class="u-mb-0_75"
+      v-if="entries.length > 0 || Object.keys(entries).length > 0">
+      <li
+        v-for="(entry, index) in entries"
+        :key="index"
+        data-cy="entryItem">
+        <!--both v-bind below are important and should not be removed (one is for the source data to be passed from parent component, second is for when the source data (entries) is an object)-->
+        <slot
+          name="list"
+          v-bind="entry"
+          :entry="entry"
+          :index="index" />
+        <span
+          v-if="true === hasPermissionToEdit">
+          <button
+            @click.prevent="showUpdateForm(index)"
+            :aria-label="translationKeys.update"
+            class="btn-icns u-m-0 u-ml-0_5"
+            data-cy="updateEntry">
+            <i
+              class="fa fa-pencil"
+              aria-hidden="true" />
+          </button>
+          <button
+            @click.prevent="deleteEntry(index)"
+            :aria-label="translationKeys.delete"
+            class="btn-icns u-m-0 u-pl-0"
+            data-cy="deleteEntry">
+            <i
+              class="fa fa-trash"
+              aria-hidden="true" />
+          </button>
+        </span>
+      </li>
+    </ul>
+    <div
+      v-else
+      class="color--grey u-mb-0_5">
+      {{ translationKeys.noEntries }}
+    </div>
+
+    <div v-if="true === isFormVisible && true === hasPermissionToEdit">
+      <div class="u-mb-0_5">
+        <slot name="form" />
+      </div>
+
+      <button
+        @click.prevent="saveEntry"
+        class="btn btn--primary"
+        :data-cy="currentlyUpdating !== '' ? 'saveEntry' : 'addEntry'">
+        {{ currentlyUpdating !== '' ? translationKeys.update : translationKeys.add }}
+      </button>
+
+      <button
+        @click.prevent="resetForm"
+        class="btn btn--secondary u-ml-0_5">
+        {{ translationKeys.abort }}
+      </button>
+    </div>
+
+    <button
+      @click.prevent="showNewForm()"
+      class="btn btn--primary"
+      v-if="false === isFormVisible && true === hasPermissionToEdit"
+      data-cy="showInput">
+      {{ translationKeys.new }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DpEditableList',
+  props: {
+    entries: {
+      required: true,
+      type: [Array, Object],
+      default: () => { return [] }
+    },
+
+    translationKeys: {
+      required: false,
+      type: Object,
+      default: () => {
+        return {
+          new: Translator.trans('new'),
+          add: Translator.trans('add'),
+          abort: Translator.trans('abort'),
+          update: Translator.trans('update'),
+          noEntries: Translator.trans('none'),
+          delete: Translator.trans('delete')
+        }
+      }
+    },
+
+    hasPermissionToEdit: {
+      required: false,
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data () {
+    return {
+      isFormVisible: false,
+      currentlyUpdating: ''
+    }
+  },
+
+  methods: {
+    toggleFormVisibility (visibility) {
+      this.isFormVisible = visibility
+    },
+
+    showNewForm () {
+      this.toggleFormVisibility(true)
+      this.currentlyUpdating = ''
+      this.$emit('reset')
+    },
+
+    saveEntry () {
+      const entryToSave = this.currentlyUpdating !== '' ? this.currentlyUpdating : 'new'
+      this.$emit('saveEntry', entryToSave)
+    },
+
+    resetForm () {
+      this.toggleFormVisibility(false)
+      this.currentlyUpdating = ''
+      this.$emit('reset')
+    },
+
+    showUpdateForm (index) {
+      this.toggleFormVisibility(true)
+      this.currentlyUpdating = index
+      this.$parent.$emit('showUpdateForm', index)
+    },
+
+    deleteEntry (index) {
+      this.toggleFormVisibility(false)
+      this.currentlyUpdating = ''
+      this.$parent.$emit('delete', index)
+    }
+  }
+}
+</script>