From 0063830ca9e97a3d4aa0213eec86adf048803601 Mon Sep 17 00:00:00 2001
From: Severino <severin.opel@outlook.com>
Date: Tue, 17 Oct 2023 14:07:10 +0200
Subject: [PATCH] Apply eslint

+ one attribute per line
+ removed unecessary props from return
+ attribute ordering
---
 resources/js/components/AttributeList.vue     | 217 +++++++-----
 resources/js/components/AttributeTemplate.vue |   3 +-
 resources/js/components/CommentList.vue       | 132 ++++++++
 resources/js/components/EntityDetail.vue      |  11 +-
 resources/js/components/UserPreferences.vue   |  17 +
 resources/js/components/Users.vue             |   2 +-
 resources/js/components/attribute/Entity.vue  |   9 +-
 resources/js/components/attribute/Epoch.vue   |   2 +-
 .../js/components/attribute/Iconclass.vue     |  29 ++
 .../js/components/attribute/MultiChoice.vue   |   8 +-
 .../js/components/attribute/SingleChoice.vue  |   7 +-
 resources/js/components/attribute/Tabular.vue |  35 +-
 .../js/components/modals/attribute/Add.vue    |  53 +--
 .../components/modals/role/AccessControl.vue  | 308 ++++++++++--------
 .../preferences/ProjectMaintainer.vue         |   4 +-
 .../js/components/preferences/ProjectName.vue |   1 -
 resources/js/components/tree/Entity.vue       | 213 +++++++-----
 resources/js/components/tree/Node.vue         |  71 ++--
 webpack.mix.js                                |   1 +
 19 files changed, 744 insertions(+), 379 deletions(-)

diff --git a/resources/js/components/AttributeList.vue b/resources/js/components/AttributeList.vue
index 1c14dc464..a176deb94 100644
--- a/resources/js/components/AttributeList.vue
+++ b/resources/js/components/AttributeList.vue
@@ -8,55 +8,120 @@
         :disabled="disableDrag"
         :group="group"
         :move="handleMove"
-        @change="handleUpdate">
-            <template #item="{element, index}">
-                <div class="mb-3" :class="clFromMetadata(element)" @mouseenter="onEnter(index)" @mouseleave="onLeave(index)" v-if="!state.hiddenAttributeList[element.id] || showHidden">
-                    <div class="row" :class="addModerationStateClasses(element.id)">
-                        <label
-                            class="col-form-label col-md-3 d-flex flex-row justify-content-between text-break"
-                            v-if="!state.hideLabels"
-                            :for="`attr-${element.id}`"
-                            :class="attributeClasses(element)">
-                            <div v-show="!!state.hoverStates[index]" class="btn-fab-list">
-                                <button v-show="hasEmitter('onReorderList')" class="reorder-handle btn btn-outline-secondary btn-fab rounded-circle" data-bs-toggle="popover" :data-content="t('global.resort')" data-trigger="hover" data-placement="bottom">
-                                    <i class="fas fa-fw fa-sort"></i>
-                                </button>
-                                <button v-show="hasEmitter('onEditElement')" class="btn btn-outline-info btn-fab rounded-circle" @click="onEditHandler(element)" data-bs-toggle="popover" :data-content="t('global.edit')" data-trigger="hover" data-placement="bottom">
-                                    <i class="fas fa-fw fa-xs fa-edit" style="vertical-align: 0;"></i>
-                                </button>
-                                <button v-show="hasEmitter('onRemoveElement')" class="btn btn-outline-danger btn-fab rounded-circle" @click="onRemoveHandler(element)" data-bs-toggle="popover" :data-content="t('global.remove')" data-trigger="hover" data-placement="bottom">
-                                    <i class="fas fa-fw fa-xs fa-times" style="vertical-align: 0;"></i>
-                                </button>
-                                <button v-show="hasEmitter('onDeleteElement')" class="btn btn-outline-danger btn-fab rounded-circle" @click="onDeleteHandler(element)" data-bs-toggle="popover" :data-content="t('global.delete')" data-trigger="hover" data-placement="bottom">
-                                    <i class="fas fa-fw fa-xs fa-trash" style="vertical-align: 0;"></i>
-                                </button>
-                            </div>
-                            <span class="text-end col" v-if="!element.is_system">
-                                {{ translateConcept(element.thesaurus_url) }}:
+        @change="handleUpdate"
+    >
+        <template #item="{element, index}">
+            <div
+                v-if="!state.hiddenAttributeList[element.id] || showHidden"
+                class="mb-3"
+                :class="clFromMetadata(element)"
+                @mouseenter="onEnter(index)"
+                @mouseleave="onLeave(index)"
+            >
+                <div
+                    class="row"
+                    :class="addModerationStateClasses(element.id)"
+                >
+                    <label
+                        v-if="!state.hideLabels"
+                        class="col-form-label col-md-3 d-flex flex-row justify-content-between text-break"
+                        :for="`attr-${element.id}`"
+                        :class="attributeClasses(element)"
+                    >
+                        <div
+                            v-show="!!state.hoverStates[index]"
+                            class="btn-fab-list"
+                        >
+                            <button
+                                v-show="hasEmitter('onReorderList')"
+                                class="reorder-handle btn btn-outline-secondary btn-fab rounded-circle"
+                                data-bs-toggle="popover"
+                                :data-content="t('global.resort')"
+                                data-trigger="hover"
+                                data-placement="bottom"
+                            >
+                                <i class="fas fa-fw fa-sort" />
+                            </button>
+                            <button
+                                v-show="hasEmitter('onEditElement')"
+                                class="btn btn-outline-info btn-fab rounded-circle"
+                                data-bs-toggle="popover"
+                                :data-content="t('global.edit')"
+                                data-trigger="hover"
+                                data-placement="bottom"
+                                @click="onEditHandler(element)"
+                            >
+                                <i
+                                    class="fas fa-fw fa-xs fa-edit"
+                                    style="vertical-align: 0;"
+                                />
+                            </button>
+                            <button
+                                v-show="hasEmitter('onRemoveElement')"
+                                class="btn btn-outline-danger btn-fab rounded-circle"
+                                data-bs-toggle="popover"
+                                :data-content="t('global.remove')"
+                                data-trigger="hover"
+                                data-placement="bottom"
+                                @click="onRemoveHandler(element)"
+                            >
+                                <i
+                                    class="fas fa-fw fa-xs fa-times"
+                                    style="vertical-align: 0;"
+                                />
+                            </button>
+                            <button
+                                v-show="hasEmitter('onDeleteElement')"
+                                class="btn btn-outline-danger btn-fab rounded-circle"
+                                data-bs-toggle="popover"
+                                :data-content="t('global.delete')"
+                                data-trigger="hover"
+                                data-placement="bottom"
+                                @click="onDeleteHandler(element)"
+                            >
+                                <i
+                                    class="fas fa-fw fa-xs fa-trash"
+                                    style="vertical-align: 0;"
+                                />
+                            </button>
+                        </div>
+                        <span
+                            v-if="!element.is_system"
+                            class="text-end col"
+                        >
+                            {{ translateConcept(element.thesaurus_url) }}:
+                        </span>
+                        <sup
+                            v-if="hasEmitter('onMetadata')"
+                            class="clickable"
+                            @click="onMetadataHandler(element)"
+                        >
+                            <span :class="getCertaintyClass(state.attributeValues[element.id].certainty, 'text')">
+                                <i class="fas fa-fw fa-exclamation" />
+                            </span>
+                            <span v-if="state.attributeValues[element.id].comments_count > 0">
+                                <i class="fas fa-fw fa-comment" />
+                            </span>
+                            <span v-if="metadataAddon(element.thesaurus_url)">
+                                <i class="fas fa-fw fa-bookmark" />
                             </span>
-                            <sup class="clickable" v-if="hasEmitter('onMetadata')" @click="onMetadataHandler(element)">
-                                <span :class="getCertaintyClass(state.attributeValues[element.id].certainty, 'text')">
-                                    <i class="fas fa-fw fa-exclamation"></i>
-                                </span>
-                                <span v-if="state.attributeValues[element.id].comments_count > 0">
-                                    <i class="fas fa-fw fa-comment"></i>
-                                </span>
-                                <span v-if="metadataAddon(element.thesaurus_url)">
-                                    <i class="fas fa-fw fa-bookmark"></i>
-                                </span>
-                            </sup>
-                            <sup v-if="hasEmitter('onEditElement') && !!element.pivot.depends_on" class="font-size-50">
-                                <i class="fas fa-fw fa-circle text-warning"></i>
-                            </sup>
-                        </label>
-                        <div :class="expandedClasses(index)">
-                            <string-attribute
-                                v-if="element.datatype == 'string'"
-                                :ref="el => setRef(el, element.id)"
-                                :disabled="element.isDisabled || state.hiddenAttributeList[element.id] || isDisabledInModeration(element.id)"
-                                :name="`attr-${element.id}`"
-                                :value="state.attributeValues[element.id].value"
-                                @change="e => updateDirtyState(e, element.id)" />
+                        </sup>
+                        <sup
+                            v-if="hasEmitter('onEditElement') && !!element.pivot.depends_on"
+                            class="font-size-50"
+                        >
+                            <i class="fas fa-fw fa-circle text-warning" />
+                        </sup>
+                    </label>
+                    <div :class="expandedClasses(index)">
+                        <string-attribute
+                            v-if="element.datatype == 'string'"
+                            :ref="el => setRef(el, element.id)"
+                            :disabled="element.isDisabled || state.hiddenAttributeList[element.id] || isDisabledInModeration(element.id)"
+                            :name="`attr-${element.id}`"
+                            :value="state.attributeValues[element.id].value"
+                            @change="e => updateDirtyState(e, element.id)"
+                        />
 
                         <stringfield-attribute
                             v-else-if="element.datatype == 'stringf'"
@@ -182,14 +247,16 @@
                             @change="e => updateDirtyState(e, element.id)"
                         />
 
-                            <entity-attribute v-else-if="element.datatype == 'entity' || element.datatype == 'entity-mc'"
-                                :ref="el => setRef(el, element.id)"
-                                :disabled="element.isDisabled || state.hiddenAttributeList[element.id] || isDisabledInModeration(element.id)"
-                                :name="`attr-${element.id}`"
-                                :multiple="element.datatype == 'entity-mc'"
-                                :hide-link="state.hideEntityLink"
-                                :value="convertEntityValue(state.attributeValues[element.id], element.datatype == 'entity-mc')"
-                                @change="e => updateDirtyState(e, element.id)" />
+                        <entity-attribute
+                            v-else-if="element.datatype == 'entity' || element.datatype == 'entity-mc'"
+                            :ref="el => setRef(el, element.id)"
+                            :disabled="element.isDisabled || state.hiddenAttributeList[element.id] || isDisabledInModeration(element.id)"
+                            :name="`attr-${element.id}`"
+                            :multiple="element.datatype == 'entity-mc'"
+                            :hide-link="state.hideEntityLink"
+                            :value="convertEntityValue(state.attributeValues[element.id], element.datatype == 'entity-mc')"
+                            @change="e => updateDirtyState(e, element.id)"
+                        />
 
                         <date-attribute
                             v-else-if="element.datatype == 'date'"
@@ -233,25 +300,27 @@
                             :title="getSeparatorTitle(element)"
                         />
 
-                            <default-attribute
-                                v-else
-                                :ref="el => setRef(el, element.id)"
-                                :disabled="element.isDisabled || state.hiddenAttributeList[element.id] || isDisabledInModeration(element.id)"
-                                :name="`attr-${element.id}`"
-                                :value="state.attributeValues[element.id].value"
-                                @change="e => updateDirtyState(e, element.id)" />
-
-                            <attribute-moderation-panel v-if="isInModeration(element.id)"
-                                :element="element"
-                                :value="state.attributeValues[element.id]"
-                                @toggle-data="e => toggleAttributeValue(element.id)"
-                                @moderate="e => handleModeration(element.id, e)"
-                                @edit="e => handleEditModeration(element.id, e)"
-                            />
-                        </div>
+                        <default-attribute
+                            v-else
+                            :ref="el => setRef(el, element.id)"
+                            :disabled="element.isDisabled || state.hiddenAttributeList[element.id] || isDisabledInModeration(element.id)"
+                            :name="`attr-${element.id}`"
+                            :value="state.attributeValues[element.id].value"
+                            @change="e => updateDirtyState(e, element.id)"
+                        />
+
+                        <attribute-moderation-panel
+                            v-if="isInModeration(element.id)"
+                            :element="element"
+                            :value="state.attributeValues[element.id]"
+                            @toggle-data="e => toggleAttributeValue(element.id)"
+                            @moderate="e => handleModeration(element.id, e)"
+                            @edit="e => handleEditModeration(element.id, e)"
+                        />
                     </div>
                 </div>
-            </template>
+            </div>
+        </template>
     </draggable>
 </template>
 
@@ -375,7 +444,7 @@
             options: {
                 required: false,
                 type: Object,
-                default: {},
+                default: ()=>({}),
             },
             preview: {
                 required: false,
diff --git a/resources/js/components/AttributeTemplate.vue b/resources/js/components/AttributeTemplate.vue
index 072ebd3af..bc6fc7730 100644
--- a/resources/js/components/AttributeTemplate.vue
+++ b/resources/js/components/AttributeTemplate.vue
@@ -13,7 +13,8 @@
                 <simple-search
                     :endpoint="searchLabel"
                     :key-fn="getConceptLabel"
-                    @selected="e => labelSelected(e, 'label')"
+                    :default-value="state.searchResetValue"
+                    @selected="e => labelSelected(e, 'label')" 
                 />
             </div>
         </div>
diff --git a/resources/js/components/CommentList.vue b/resources/js/components/CommentList.vue
index a708b0d1a..5bc9cedbd 100644
--- a/resources/js/components/CommentList.vue
+++ b/resources/js/components/CommentList.vue
@@ -2,6 +2,23 @@
     <div :class="classes">
         <div :class="listClasses">
             <div v-show="!state.commentsHidden">
+                <div
+                    v-for="comment in comments"
+                    :key="comment.id"
+                    class="mt-2 d-flex"
+                >
+                    <slot
+                        name="avatar"
+                        :user="comment.author"
+                    >
+                        <a
+                            href="#"
+                            @click.prevent="showUserInfo(comment.author)"
+                        >
+                            <user-avatar
+                                :user="comment.author"
+                                :size="avatar"
+                            />
                 <div
                     v-for="comment in comments"
                     :key="comment.id"
@@ -23,11 +40,24 @@
                     </slot>
                     <div class="ms-3 flex-grow-1">
                         <div class="card">
+                            <div
+                                class="card-header d-flex flex-row justify-content-between py-2 px-3"
+                                :class="{'border-0': !comment.content}"
+                            >
                             <div
                                 class="card-header d-flex flex-row justify-content-between py-2 px-3"
                                 :class="{'border-0': !comment.content}"
                             >
                                 <div>
+                                    <slot
+                                        name="author"
+                                        :comment="comment.author"
+                                    >
+                                        <a
+                                            href="#"
+                                            class="text-body text-decoration-none"
+                                            @click.prevent="showUserInfo(comment.author)"
+                                        >
                                     <slot
                                         name="author"
                                         :comment="comment.author"
@@ -48,6 +78,11 @@
                                     </slot>
                                 </div>
                                 <div class="small">
+                                    <slot
+                                        name="metadata"
+                                        class="me-2"
+                                        :comment="comment"
+                                    />
                                     <slot
                                         name="metadata"
                                         class="me-2"
@@ -59,12 +94,28 @@
                                         </span>
                                         &bull;
                                     </template>
+                                    <span
+                                        class="text-muted fw-light"
+                                        :title="datestring(comment.updated_at)"
+                                    >
                                     <span
                                         class="text-muted fw-light"
                                         :title="datestring(comment.updated_at)"
                                     >
                                         {{ ago(comment.updated_at) }}
                                     </span>
+                                    <span
+                                        v-if="!comment.deleted_at && (showEditButton(comment) || showDeleteButton(comment) || state.showReplyTo)"
+                                        class="dropdown ms-1"
+                                    >
+                                        <span
+                                            :id="`edit-comment-dropdown-${comment.id}`"
+                                            class="clickable"
+                                            data-bs-toggle="dropdown"
+                                            aria-haspopup="true"
+                                            aria-expanded="false"
+                                        >
+                                            <i class="fas fa-fw fa-ellipsis-h" />
                                     <span
                                         v-if="!comment.deleted_at && (showEditButton(comment) || showDeleteButton(comment) || state.showReplyTo)"
                                         class="dropdown ms-1"
@@ -78,6 +129,17 @@
                                         >
                                             <i class="fas fa-fw fa-ellipsis-h" />
                                         </span>
+                                        <div
+                                            class="dropdown-menu"
+                                            :aria-labelledby="`edit-comment-dropdown-${comment.id}`"
+                                        >
+                                            <a
+                                                v-if="showEditButton(comment)"
+                                                class="dropdown-item"
+                                                href="#"
+                                                @click.prevent="enableEditing(comment)"
+                                            >
+                                                <i class="fas fa-fw fa-edit text-info" /> {{ t('global.edit') }}
                                         <div
                                             class="dropdown-menu"
                                             :aria-labelledby="`edit-comment-dropdown-${comment.id}`"
@@ -90,6 +152,13 @@
                                             >
                                                 <i class="fas fa-fw fa-edit text-info" /> {{ t('global.edit') }}
                                             </a>
+                                            <a
+                                                v-if="state.showReplyTo"
+                                                class="dropdown-item"
+                                                href="#"
+                                                @click.prevent="setReplyTo(comment)"
+                                            >
+                                                <i class="fas fa-fw fa-reply text-success" /> {{ t('global.reply_to') }}
                                             <a
                                                 v-if="state.showReplyTo"
                                                 class="dropdown-item"
@@ -98,6 +167,13 @@
                                             >
                                                 <i class="fas fa-fw fa-reply text-success" /> {{ t('global.reply_to') }}
                                             </a>
+                                            <a
+                                                v-if="showDeleteButton(comment)"
+                                                class="dropdown-item"
+                                                href="#"
+                                                @click.prevent="handleDelete(comment)"
+                                            >
+                                                <i class="fas fa-fw fa-trash text-danger" /> {{ t('global.delete') }}
                                             <a
                                                 v-if="showDeleteButton(comment)"
                                                 class="dropdown-item"
@@ -111,6 +187,12 @@
                                 </div>
                             </div>
                             <div v-if="!emptyMetadata(comment)">
+                                <slot
+                                    v-if="!isDeleted(comment) && state.editing.id == comment.id"
+                                    name="body-editing"
+                                    :comment="comment"
+                                    :content="state.editing.content"
+                                >
                                 <slot
                                     v-if="!isDeleted(comment) && state.editing.id == comment.id"
                                     name="body-editing"
@@ -118,11 +200,22 @@
                                     :content="state.editing.content"
                                 >
                                     <div class="card-body px-3 py-2">
+                                        <textarea
+                                            v-model="state.editing.content"
+                                            class="form-control"
+                                        />
                                         <textarea
                                             v-model="state.editing.content"
                                             class="form-control"
                                         />
                                         <div class="mt-1 d-flex flex-row justify-content-end">
+                                            <button
+                                                type="button"
+                                                class="btn btn-success btn-sm me-2"
+                                                :disabled="state.editing.content == comment.content"
+                                                @click="handleEdit(comment, state.editing.content)"
+                                            >
+                                                <i class="fas fa-fw fa-save" /> {{ t('global.save') }}
                                             <button
                                                 type="button"
                                                 class="btn btn-success btn-sm me-2"
@@ -131,6 +224,12 @@
                                             >
                                                 <i class="fas fa-fw fa-save" /> {{ t('global.save') }}
                                             </button>
+                                            <button
+                                                type="button"
+                                                class="btn btn-danger btn-sm"
+                                                @click="disableEditing()"
+                                            >
+                                                <i class="fas fa-fw fa-times" /> {{ t('global.cancel') }}
                                             <button
                                                 type="button"
                                                 class="btn btn-danger btn-sm"
@@ -158,6 +257,15 @@
                                         <!-- eslint-enable -->
                                     </div>
                                 </slot>
+                                <slot
+                                    v-else
+                                    name="body-deleted"
+                                    :comment="comment"
+                                >
+                                    <div
+                                        class="card-body bg-warning px-3 py-2"
+                                        style="opacity: 0.75;"
+                                    >
                                 <slot
                                     v-else
                                     name="body-deleted"
@@ -174,6 +282,15 @@
                                 </slot>
                             </div>
                         </div>
+                        <div
+                            v-if="comment.replies_count > 0"
+                            class="d-flex flex-row justify-content-end"
+                        >
+                            <a
+                                href="#"
+                                class="small text-body"
+                                @click.prevent="toggleReplies(comment)"
+                            >
                         <div
                             v-if="comment.replies_count > 0"
                             class="d-flex flex-row justify-content-end"
@@ -207,12 +324,27 @@
                             :edit-url="editUrl"
                             :delete-url="deleteUrl"
                             :reply-url="replyUrl"
+                            :post-url="postUrl"
+                            :edit-url="editUrl"
+                            :delete-url="deleteUrl"
+                            :reply-url="replyUrl"
                             :classes="classes"
                             :list-classes="listClasses"
                         />
+                            :list-classes="listClasses"
+                        />
                     </div>
                 </div>
             </div>
+            <div
+                v-show="state.displayHideButton"
+                class="text-center mt-2"
+            >
+                <button
+                    class="btn btn-sm btn-outline-primary"
+                    @click="toggleHideState()"
+                >
+                    <i class="fas fa-fw fa-comments me-1" />
             <div
                 v-show="state.displayHideButton"
                 class="text-center mt-2"
diff --git a/resources/js/components/EntityDetail.vue b/resources/js/components/EntityDetail.vue
index 3d42de3eb..86d871fd1 100644
--- a/resources/js/components/EntityDetail.vue
+++ b/resources/js/components/EntityDetail.vue
@@ -735,8 +735,7 @@ export default {
             const saveEntity = _ => {
                 if(!can('entity_data_write')) return;
                 const dirtyValues = attrRef.value.getDirtyValues();
-                const patches = [];
-                const moderations = [];
+                var patches = [];
 
                 for(let v in dirtyValues) {
                     const aid = v;
@@ -771,7 +770,6 @@ export default {
                         }
                     }
                     patches.push(patch);
-                    moderations.push(aid);
                 }
                 return patchAttributes(state.entity.id, patches).then(data => {
                     state.formDirty = false;
@@ -781,13 +779,6 @@ export default {
                         data: dirtyValues,
                         eid: state.entity.id,
                     });
-                    if(isModerated()) {
-                        store.dispatch('updateEntityDataModerations', {
-                            entity_id: state.entity.id,
-                            attribute_ids: moderations,
-                            state: 'pending',
-                        });
-                    }
 
                 toast.$toast(
                     t('main.entity.toasts.updated.msg', {
diff --git a/resources/js/components/UserPreferences.vue b/resources/js/components/UserPreferences.vue
index fcc168ad5..fa738004b 100644
--- a/resources/js/components/UserPreferences.vue
+++ b/resources/js/components/UserPreferences.vue
@@ -5,6 +5,12 @@
             <small class="text-muted">
                 {{ getUser().name }}
             </small>
+            <button
+                type="button"
+                class="btn btn-outline-success btn-sm"
+                @click="savePreferences()"
+            >
+                <i class="fas fa-fw fa-save" />
             <button
                 type="button"
                 class="btn btn-outline-success btn-sm"
@@ -15,6 +21,11 @@
             </button>
         </h3>
         <div class="table-responsive scroll-x-hidden">
+            <table
+                v-if="state.prefsLoaded"
+                v-dcan="'preferences_read'"
+                class="table table-light table-striped table-hover mb-0"
+            >
             <table
                 v-if="state.prefsLoaded"
                 v-dcan="'preferences_read'"
@@ -29,6 +40,12 @@
                         >
                             {{ t('global.value') }}
                         </th>
+                        <th
+                            style="width: 99%;"
+                            class="text-end"
+                        >
+                            {{ t('global.value') }}
+                        </th>
                     </tr>
                 </thead>
                 <tbody>
diff --git a/resources/js/components/Users.vue b/resources/js/components/Users.vue
index 79025750b..42685a6ea 100644
--- a/resources/js/components/Users.vue
+++ b/resources/js/components/Users.vue
@@ -144,7 +144,7 @@
                                         v-if="hasPreference('prefs.enable-password-reset-link')"
                                         class="dropdown-item"
                                         href="#"
-                                        :disabled="!can('users_roles_write')"
+                                        :disabled="state.currentUserId != user.id && !can('users_roles_write')"
                                         @click.prevent="updatePassword(user.email)"
                                     >
                                         <i class="fas fa-fw fa-paper-plane text-info" /> {{ t('global.send_reset_mail') }}
diff --git a/resources/js/components/attribute/Entity.vue b/resources/js/components/attribute/Entity.vue
index 7360f1f12..58a210e25 100644
--- a/resources/js/components/attribute/Entity.vue
+++ b/resources/js/components/attribute/Entity.vue
@@ -6,8 +6,13 @@
         :mode="state.mode"
         :default-value="v.fieldValue"
         @selected="e => entitySelected(e)"
-        @entry-click="e => entryClicked(e)" />
-    <router-link v-if="!hideLink && !multiple && v.value" :to="{name: 'entitydetail', params: {id: v.fieldValue.id}, query: state.query}" class="btn btn-outline-secondary btn-sm mt-2">
+        @entry-click="e => entryClicked(e)"
+    />
+    <router-link
+        v-if="!hideLink && !multiple && v.value"
+        :to="{name: 'entitydetail', params: {id: v.fieldValue.id}, query: state.query}"
+        class="btn btn-outline-secondary btn-sm mt-2"
+    >
         {{ t('main.entity.attributes.entity.go_to', {name: v.fieldValue.name}) }}
     </router-link>
 </template>
diff --git a/resources/js/components/attribute/Epoch.vue b/resources/js/components/attribute/Epoch.vue
index 2e7c27229..78ee6fcb1 100644
--- a/resources/js/components/attribute/Epoch.vue
+++ b/resources/js/components/attribute/Epoch.vue
@@ -99,7 +99,7 @@
             <template #option="{ option }">
                 {{ translateConcept(option.concept_url) }}
             </template>
-            <template #singlelabel="{ value: singlelabelValue }">
+            <template #singlelabel="{ value }">
                 <div class="multiselect-single-label">
                     {{ translateConcept(singlelabelValue.concept_url) }}
                 </div>
diff --git a/resources/js/components/attribute/Iconclass.vue b/resources/js/components/attribute/Iconclass.vue
index bb9d80a54..0f6007bf3 100644
--- a/resources/js/components/attribute/Iconclass.vue
+++ b/resources/js/components/attribute/Iconclass.vue
@@ -8,6 +8,20 @@
                 :disabled="disabled"
                 @input="onInput()"
             >
+            <button
+                type="button"
+                class="btn btn-outline-secondary"
+                :disabled="v.noContent"
+                @click="loadIconclassInfo()"
+            >
+                <i class="fas fa-fw fa-eye" />
+            <input
+                v-model="v.value"
+                type="text"
+                class="form-control"
+                :disabled="disabled"
+                @input="onInput()"
+            >
             <button
                 type="button"
                 class="btn btn-outline-secondary"
@@ -17,6 +31,10 @@
                 <i class="fas fa-fw fa-eye" />
             </button>
         </div>
+        <div
+            v-if="state.infoLoaded"
+            class="bg-light mt-2 p-2 border rounded"
+        >
         <div
             v-if="state.infoLoaded"
             class="bg-light mt-2 p-2 border rounded"
@@ -31,8 +49,15 @@
                     aria-label="Close"
                     @click="closeInfoBox()"
                 />
+                <button
+                    type="button"
+                    class="btn-close"
+                    aria-label="Close"
+                    @click="closeInfoBox()"
+                />
             </div>
             <hr class="my-2">
+            <hr class="my-2">
             <div>
                 <span>{{ state.keywords.join(' &bull; ') }}</span>
             </div>
@@ -41,6 +66,10 @@
                 <span v-html="t('main.entity.attributes.iconclass.cite_info', {class: v.value})" />
             </footer>
         </div>
+        <p
+            v-if="state.infoErrored"
+            class="alert alert-danger my-2"
+        >
         <p
             v-if="state.infoErrored"
             class="alert alert-danger my-2"
diff --git a/resources/js/components/attribute/MultiChoice.vue b/resources/js/components/attribute/MultiChoice.vue
index 4ab2f8fe2..ae7a38721 100644
--- a/resources/js/components/attribute/MultiChoice.vue
+++ b/resources/js/components/attribute/MultiChoice.vue
@@ -10,17 +10,21 @@
         :options="selections"
         :name="name"
         :close-on-select="false"
+        :close-on-select="false"
         :placeholder="t('global.select.placeholder')"
         @change="value => v.handleChange(value)"
+    >
+        <template #option="{ option }">
+        @change="value => v.handleChange(value)"
     >
         <template #option="{ option }">
             {{ translateConcept(option.concept_url) }}
         </template>
-        <template #tag="{ option, handleTagRemove, disabled: tagDisabled }">
+        <template #tag="{ option, handleTagRemove, disabled }">
             <div class="multiselect-tag">
                 {{ translateConcept(option.concept_url) }}
                 <span
-                    v-if="!tagDisabled"
+                    v-if="!disabled"
                     class="multiselect-tag-remove"
                     @click.prevent
                     @mousedown.prevent.stop="handleTagRemove(option, $event)"
diff --git a/resources/js/components/attribute/SingleChoice.vue b/resources/js/components/attribute/SingleChoice.vue
index f93185047..5dcdcd0c6 100644
--- a/resources/js/components/attribute/SingleChoice.vue
+++ b/resources/js/components/attribute/SingleChoice.vue
@@ -1,8 +1,10 @@
 <template>
     <multiselect
+        v-model="v.value"
         v-model="v.value"
         :classes="multiselectResetClasslist"
         :value-prop="'id'"
+        :value-prop="'id'"
         :label="'concept_url'"
         :track-by="'concept_url'"
         :object="true"
@@ -12,11 +14,14 @@
         :name="name"
         :placeholder="t('global.select.placeholder')"
         @change="value => v.handleChange(value)"
+    >
+        <template #option="{ option }">
+        @change="value => v.handleChange(value)"
     >
         <template #option="{ option }">
             {{ translateConcept(option.concept_url) }}
         </template>
-        <template #singlelabel="{ value: singlelabelValue }">
+        <template #singlelabel="{ value }">
             <div class="multiselect-single-label">
                 {{ translateConcept(singlelabelValue.concept_url) }}
             </div>
diff --git a/resources/js/components/attribute/Tabular.vue b/resources/js/components/attribute/Tabular.vue
index c0edc48b4..a82b72163 100644
--- a/resources/js/components/attribute/Tabular.vue
+++ b/resources/js/components/attribute/Tabular.vue
@@ -3,6 +3,10 @@
         <table class="table table-striped table-hovered table-sm mb-0">
             <thead class="thead-light">
                 <tr>
+                    <th
+                        v-for="(column, i) in state.columns"
+                        :key="i"
+                    >
                     <th
                         v-for="(column, i) in state.columns"
                         :key="i"
@@ -10,6 +14,12 @@
                         {{ translateConcept(column.thesaurus_url) }}
                     </th>
                     <th>
+                        <a
+                            class="text-body"
+                            href="#"
+                            @click.prevent="emitExpandToggle()"
+                        >
+                            <i class="fas fa-fw fa-expand" />
                         <a
                             class="text-body"
                             href="#"
@@ -17,6 +27,12 @@
                         >
                             <i class="fas fa-fw fa-expand" />
                         </a>
+                        <a
+                            class="text-body"
+                            href="#"
+                            @click.prevent="openCsvUpload()"
+                        >
+                            <i class="fas fa-fw fa-file-upload" />
                         <a
                             class="text-body"
                             href="#"
@@ -24,6 +40,12 @@
                         >
                             <i class="fas fa-fw fa-file-upload" />
                         </a>
+                        <a
+                            class="text-body"
+                            href="#"
+                            @click.prevent="downloadAs('csv')"
+                        >
+                            <i class="fas fa-fw fa-file-download" />
                         <a
                             class="text-body"
                             href="#"
@@ -35,6 +57,14 @@
                 </tr>
             </thead>
             <tbody>
+                <tr
+                    v-for="(row, $index) in v.value"
+                    :key="$index"
+                >
+                    <td
+                        v-for="(column, i) in state.columns"
+                        :key="i"
+                    >
                 <tr
                     v-for="(row, $index) in v.value"
                     :key="$index"
@@ -254,7 +284,10 @@
                         </button>
                     </td>
                 </tr>
-                <tr class="border-0">
+                <tr
+                    v-if="!state.isPreview"
+                    class="border-0"
+                >
                     <td
                         v-for="(column, i) in state.columns"
                         :key="i"
diff --git a/resources/js/components/modals/attribute/Add.vue b/resources/js/components/modals/attribute/Add.vue
index 2a9a7d8ab..b3e9c51ac 100644
--- a/resources/js/components/modals/attribute/Add.vue
+++ b/resources/js/components/modals/attribute/Add.vue
@@ -24,32 +24,37 @@
                     @created="add"
                     @updated="updateAttribute"
                     @validation="checkValidation"
+                />
+                    @validation="checkValidation"
                 />
                 <div v-if="state.hasColumns">
-                    <h5 class="d-flex flex-row justify-content-between">
-                        <div>
-                            {{ t('global.column', 2) }}
-                            <span class="badge bg-primary">
-                                {{ state.columns.length }}
-                            </span>
-                        </div>
-                        <div>
-                            <button
-                                type="submit"
-                                class="btn btn-sm btn-outline-success"
-                                :form="state.tableFormId"
-                                :disabled="!state.tableColumnValidated"
-                            >
-                                <i class="fas fa-fw fa-plus" /> {{ t('global.add_column') }}
-                            </button>
-                        </div>
-                    </h5>
-                    <attribute-template
-                        :type="'table'"
-                        :external="state.tableFormId"
-                        @created="addColumn"
-                        @validation="checkTableValidation"
-                    />
+                    <hr>
+                    <div class="bg-secondary bg-opacity-25 p-2 rounded">
+                        <h5 class="d-flex flex-row justify-content-between">
+                            <div>
+                                {{ t('global.column', 2) }}
+                                <span class="badge bg-primary">
+                                    {{ state.columns.length }}
+                                </span>
+                            </div>
+                            <div>
+                                <button
+                                    type="submit"
+                                    class="btn btn-sm btn-outline-success"
+                                    :form="state.tableFormId"
+                                    :disabled="!state.tableColumnValidated"
+                                >
+                                    <i class="fas fa-fw fa-plus" /> {{ t('global.add_column') }}
+                                </button>
+                            </div>
+                        </h5>
+                        <attribute-template
+                            :type="'table'"
+                            :external="state.tableFormId"
+                            @created="addColumn"
+                            @validation="checkTableValidation"
+                        />
+                    </div>
                 </div>
                 <div v-if="state.previewAttribute">
                     <hr>
diff --git a/resources/js/components/modals/role/AccessControl.vue b/resources/js/components/modals/role/AccessControl.vue
index a5ddb7f01..e3036c4f9 100644
--- a/resources/js/components/modals/role/AccessControl.vue
+++ b/resources/js/components/modals/role/AccessControl.vue
@@ -62,202 +62,228 @@
                         </span>
                     </div>
                 </div>
-                <table
-                    v-if="state.permissionsLoaded"
-                    class="table table-small table-hover table-striped text-center"
-                >
-                    <thead class="text-muted">
-                        <tr>
-                            <th />
-                            <th class="fw-normal">
-                                {{ t('main.role.permissions.types.read') }}
-                            </th>
-                            <th
-                                class="fw-normal"
-                                :title="`* ${t('main.role.permissions.types.write_info')}`"
-                            >
-                                {{ t('main.role.permissions.types.write') }}
-                                <span class="text-danger">*</span>
-                            </th>
-                            <th
-                                class="fw-normal"
-                                :title="`* ${t('main.role.permissions.types.create_info')}`"
-                            >
-                                {{ t('main.role.permissions.types.create') }}
-                                <span class="text-danger">*</span>
-                            </th>
-                            <th class="fw-normal">
-                                {{ t('main.role.permissions.types.delete') }}
-                            </th>
-                            <th
-                                class="fw-normal"
-                                :title="`* ${t('main.role.permissions.types.share_info')}`"
-                            >
-                                {{ t('main.role.permissions.types.share') }}
-                                <span class="text-danger">*</span>
-                            </th>
-                            <th class="fw-normal">
-                                {{ t('global.select_all') }}
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr
-                            v-for="(pg, i) in state.permissionGroups.core"
-                            :key="i"
-                        >
-                            <td class="text-start">
-                                {{ t(`main.role.permissions.groups.${pg}`) }}
-                            </td>
-                            <td>
-                                <a
-                                    href="#"
-                                    class="text-reset text-decoration-none"
-                                    @click.prevent="changePermissionState(pg, 'read')"
-                                >
-                                    <acl-state :status="state.permissionStates[pg].read" />
-                                </a>
-                            </td>
-                            <td>
-                                <a
-                                    href="#"
-                                    class="text-reset text-decoration-none"
-                                    @click.prevent="changePermissionState(pg, 'write')"
-                                >
-                                    <acl-state :status="state.permissionStates[pg].write" />
-                                </a>
-                            </td>
-                            <td>
-                                <a
-                                    href="#"
-                                    class="text-reset text-decoration-none"
-                                    @click.prevent="changePermissionState(pg, 'create')"
-                                >
-                                    <acl-state :status="state.permissionStates[pg].create" />
-                                </a>
-                            </td>
-                            <td>
+                <div class="modal-body">
+                    <div
+                        v-if="state.isDerived"
+                        class="d-flex flex-column gap-2 align-items-start"
+                    >
+                        <div class="d-flex flex-row align-items-center gap-2">
+                            <span class="text-muted">
+                                {{ t('main.role.preset.derived_from') }}
+                            </span>
+                            <span class="badge bg-primary">
+                                <i class="fas fa-fw fa-shield-alt" />
+                                {{ t(`main.role.preset.${state.role.derived.name}`) }}
                                 <a
+                                    v-if="state.differsFromPreset"
                                     href="#"
-                                    class="text-reset text-decoration-none"
-                                    @click.prevent="changePermissionState(pg, 'delete')"
+                                    class="text-decoration-none text-reset"
+                                    :title="`Reset role to preset`"
+                                    @click.prevent="resetToPreset()"
                                 >
-                                    <acl-state :status="state.permissionStates[pg].delete" />
+                                    |
+                                    <i class="fas fa-fw fa-undo" />
                                 </a>
-                            </td>
-                            <td>
-                                <a
-                                    href="#"
-                                    class="text-reset text-decoration-none"
-                                    @click.prevent="changePermissionState(pg, 'share')"
+                            </span>
+                        </div>
+                    </div>
+                    <table
+                        v-if="state.permissionsLoaded"
+                        class="table table-small table-hover table-striped text-center"
+                    >
+                        <thead class="text-muted">
+                            <tr>
+                                <th />
+                                <th class="fw-normal">
+                                    {{ t('main.role.permissions.types.read') }}
+                                </th>
+                                <th
+                                    class="fw-normal"
+                                    :title="`* ${t('main.role.permissions.types.write_info')}`"
                                 >
-                                    <acl-state :status="state.permissionStates[pg].share" />
-                                </a>
-                            </td>
-                            <td>
-                                <a
-                                    href="#"
-                                    class="text-reset text-decoration-none"
-                                    @click.prevent="changePermissionState(pg, 'all')"
+                                    {{ t('main.role.permissions.types.write') }}
+                                    <span class="text-danger">*</span>
+                                </th>
+                                <th
+                                    class="fw-normal"
+                                    :title="`* ${t('main.role.permissions.types.create_info')}`"
                                 >
-                                    <acl-state :status="allState(pg)" />
-                                </a>
-                            </td>
-                        </tr>
-                        <template
-                            v-for="(pg, i) in state.permissionGroups.plugins"
-                            :key="i"
-                        >
-                            <tr>
-                                <td
-                                    colspan="7"
-                                    class="fw-bold text-start"
+                                    {{ t('main.role.permissions.types.create') }}
+                                    <span class="text-danger">*</span>
+                                </th>
+                                <th class="fw-normal">
+                                    {{ t('main.role.permissions.types.delete') }}
+                                </th>
+                                <th
+                                    class="fw-normal"
+                                    :title="`* ${t('main.role.permissions.types.share_info')}`"
                                 >
-                                    {{ t(`plugin.${i}.title`) }} ({{ t(`main.role.permissions.groups.is_plugin`) }})
-                                </td>
+                                    {{ t('main.role.permissions.types.share') }}
+                                    <span class="text-danger">*</span>
+                                </th>
+                                <th class="fw-normal">
+                                    {{ t('global.select_all') }}
+                                </th>
                             </tr>
+                        </thead>
+                        <tbody>
                             <tr
-                                v-for="(pluginSet, j) in pg"
-                                :key="j"
+                                v-for="(pg, i) in state.permissionGroups.core"
+                                :key="i"
                             >
                                 <td class="text-start">
-                                    {{ t(`plugin.${i}.permissions.groups.${pluginSet}`) }}
+                                    {{ t(`main.role.permissions.groups.${pg}`) }}
                                 </td>
                                 <td>
                                     <a
                                         href="#"
                                         class="text-reset text-decoration-none"
-                                        @click.prevent="changePermissionState(pluginSet, 'read')"
+                                        @click.prevent="changePermissionState(pg, 'read')"
                                     >
-                                        <acl-state :status="state.permissionStates[pluginSet].read" />
+                                        <acl-state :status="state.permissionStates[pg].read" />
                                     </a>
                                 </td>
                                 <td>
                                     <a
                                         href="#"
                                         class="text-reset text-decoration-none"
-                                        @click.prevent="changePermissionState(pluginSet, 'write')"
+                                        @click.prevent="changePermissionState(pg, 'write')"
                                     >
-                                        <acl-state :status="state.permissionStates[pluginSet].write" />
+                                        <acl-state :status="state.permissionStates[pg].write" />
                                     </a>
                                 </td>
                                 <td>
                                     <a
                                         href="#"
                                         class="text-reset text-decoration-none"
-                                        @click.prevent="changePermissionState(pluginSet, 'create')"
+                                        @click.prevent="changePermissionState(pg, 'create')"
                                     >
-                                        <acl-state :status="state.permissionStates[pluginSet].create" />
+                                        <acl-state :status="state.permissionStates[pg].create" />
                                     </a>
                                 </td>
                                 <td>
                                     <a
                                         href="#"
                                         class="text-reset text-decoration-none"
-                                        @click.prevent="changePermissionState(pluginSet, 'delete')"
+                                        @click.prevent="changePermissionState(pg, 'delete')"
                                     >
-                                        <acl-state :status="state.permissionStates[pluginSet].delete" />
+                                        <acl-state :status="state.permissionStates[pg].delete" />
                                     </a>
                                 </td>
                                 <td>
                                     <a
                                         href="#"
                                         class="text-reset text-decoration-none"
-                                        @click.prevent="changePermissionState(pluginSet, 'share')"
+                                        @click.prevent="changePermissionState(pg, 'share')"
                                     >
-                                        <acl-state :status="state.permissionStates[pluginSet].share" />
+                                        <acl-state :status="state.permissionStates[pg].share" />
                                     </a>
                                 </td>
                                 <td>
                                     <a
                                         href="#"
                                         class="text-reset text-decoration-none"
-                                        @click.prevent="changePermissionState(pluginSet, 'all')"
+                                        @click.prevent="changePermissionState(pg, 'all')"
                                     >
-                                        <acl-state :status="allState(pluginSet)" />
+                                        <acl-state :status="allState(pg)" />
                                     </a>
                                 </td>
                             </tr>
-                        </template>
-                    </tbody>
-                </table>
-            </div>
-            <div class="modal-footer">
-                <button
-                    type="submit"
-                    class="btn btn-outline-success"
-                    @click="savePermissions()"
-                >
-                    <i class="fas fa-fw fa-save" /> {{ t('global.save') }}
-                </button>
-                <button
-                    type="button"
-                    class="btn btn-outline-secondary"
-                    data-bs-dismiss="modal"
-                    @click="closeModal()"
-                >
-                    <i class="fas fa-fw fa-times" /> {{ t('global.close') }}
-                </button>
+                            <template
+                                v-for="(pg, i) in state.permissionGroups.plugins"
+                                :key="i"
+                            >
+                                <tr>
+                                    <td
+                                        colspan="7"
+                                        class="fw-bold text-start"
+                                    >
+                                        {{ t(`plugin.${i}.title`) }} ({{ t(`main.role.permissions.groups.is_plugin`) }})
+                                    </td>
+                                </tr>
+                                <tr
+                                    v-for="(pluginSet, j) in pg"
+                                    :key="j"
+                                >
+                                    <td class="text-start">
+                                        {{ t(`plugin.${i}.permissions.groups.${pluginSet}`) }}
+                                    </td>
+                                    <td>
+                                        <a
+                                            href="#"
+                                            class="text-reset text-decoration-none"
+                                            @click.prevent="changePermissionState(pluginSet, 'read')"
+                                        >
+                                            <acl-state :status="state.permissionStates[pluginSet].read" />
+                                        </a>
+                                    </td>
+                                    <td>
+                                        <a
+                                            href="#"
+                                            class="text-reset text-decoration-none"
+                                            @click.prevent="changePermissionState(pluginSet, 'write')"
+                                        >
+                                            <acl-state :status="state.permissionStates[pluginSet].write" />
+                                        </a>
+                                    </td>
+                                    <td>
+                                        <a
+                                            href="#"
+                                            class="text-reset text-decoration-none"
+                                            @click.prevent="changePermissionState(pluginSet, 'create')"
+                                        >
+                                            <acl-state :status="state.permissionStates[pluginSet].create" />
+                                        </a>
+                                    </td>
+                                    <td>
+                                        <a
+                                            href="#"
+                                            class="text-reset text-decoration-none"
+                                            @click.prevent="changePermissionState(pluginSet, 'delete')"
+                                        >
+                                            <acl-state :status="state.permissionStates[pluginSet].delete" />
+                                        </a>
+                                    </td>
+                                    <td>
+                                        <a
+                                            href="#"
+                                            class="text-reset text-decoration-none"
+                                            @click.prevent="changePermissionState(pluginSet, 'share')"
+                                        >
+                                            <acl-state :status="state.permissionStates[pluginSet].share" />
+                                        </a>
+                                    </td>
+                                    <td>
+                                        <a
+                                            href="#"
+                                            class="text-reset text-decoration-none"
+                                            @click.prevent="changePermissionState(pluginSet, 'all')"
+                                        >
+                                            <acl-state :status="allState(pluginSet)" />
+                                        </a>
+                                    </td>
+                                </tr>
+                            </template>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="modal-footer">
+                    <button
+                        type="submit"
+                        class="btn btn-outline-success"
+                        @click="savePermissions()"
+                    >
+                        <i class="fas fa-fw fa-save" /> {{ t('global.save') }}
+                    </button>
+                    <button
+                        type="button"
+                        class="btn btn-outline-secondary"
+                        data-bs-dismiss="modal"
+                        @click="closeModal()"
+                    >
+                        <i class="fas fa-fw fa-times" /> {{ t('global.close') }}
+                    </button>
+                </div>
             </div>
         </div>
     </vue-final-modal>
diff --git a/resources/js/components/preferences/ProjectMaintainer.vue b/resources/js/components/preferences/ProjectMaintainer.vue
index 363f225dc..ea276df6d 100644
--- a/resources/js/components/preferences/ProjectMaintainer.vue
+++ b/resources/js/components/preferences/ProjectMaintainer.vue
@@ -67,7 +67,7 @@
 
 <script>
     import {
-reactive,
+        reactive,
         toRefs,
     } from 'vue';
 
@@ -101,7 +101,7 @@ reactive,
                 readonly,
             } = toRefs(props);
 
-            const localData = reactive(_cloneDeep(data.value));
+            const localData =       (_cloneDeep(data.value));
 
             // FUNCTIONS
             const onChange = _debounce(e => {
diff --git a/resources/js/components/preferences/ProjectName.vue b/resources/js/components/preferences/ProjectName.vue
index 4ecc4e38a..65c86ff86 100644
--- a/resources/js/components/preferences/ProjectName.vue
+++ b/resources/js/components/preferences/ProjectName.vue
@@ -37,7 +37,6 @@
         emits: ['changed', 'update:modelValue'],
         setup(props, context) {
             const {
-                data,
                 readonly,
             } = toRefs(props);
 
diff --git a/resources/js/components/tree/Entity.vue b/resources/js/components/tree/Entity.vue
index 688d4cc22..61686490b 100644
--- a/resources/js/components/tree/Entity.vue
+++ b/resources/js/components/tree/Entity.vue
@@ -8,6 +8,15 @@
                 </small>
             </h3>
             <div class="dropdown">
+                <span
+                    id="tree-options-dropdown"
+                    class="clickable align-middle btn btn-outline-primary btn-sm"
+                    data-bs-toggle="dropdown"
+                    role="button"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                >
+                    <i class="fas fa-fw fa-ellipsis-h" />
                 <span
                     id="tree-options-dropdown"
                     class="clickable align-middle btn btn-outline-primary btn-sm"
@@ -25,101 +34,139 @@
                     <a
                         class="dropdown-item"
                         href="#"
-                        :class="getSortingStateClass('rank', 'asc')"
-                        @click.prevent="setSort('rank', 'asc')"
-                    >
-                        <i class="fas fa-fw fa-sort-numeric-down" />
-                        <span class="ms-2">
-                            {{ t('main.entity.tree.sorts.asc.rank') }}
-                        </span>
-                    </a>
-                    <a
-                        class="dropdown-item"
-                        href="#"
-                        :class="getSortingStateClass('rank', 'desc')"
-                        @click.prevent="setSort('rank', 'desc')"
-                    >
-                        <i class="fas fa-fw fa-sort-numeric-up" />
-                        <span class="ms-2">
-                            {{ t('main.entity.tree.sorts.desc.rank') }}
-                        </span>
-                    </a>
-                    <a
-                        class="dropdown-item"
-                        href="#"
-                        :class="getSortingStateClass('alpha', 'asc')"
-                        @click.prevent="setSort('alpha', 'asc')"
+                        @click.prevent
                     >
-                        <i class="fas fa-fw fa-sort-alpha-down" />
-                        <span class="ms-2">
-                            {{ t('main.entity.tree.sorts.asc.name') }}
-                        </span>
+                        <i class="fas fa-fw fa-sort" />
+                        {{ t('global.sort') }}
+                        <div class="submenu dropdown-menu">
+                            <a
+                                class="dropdown-item"
+                                href="#"
+                                :class="getSortingStateClass('rank', 'asc')"
+                                @click.prevent="setSort('rank', 'asc')"
+                            >
+                                <i class="fas fa-fw fa-sort-numeric-down" />
+                                <span class="ms-2">
+                                    {{ t('main.entity.tree.sorts.asc.rank') }}
+                                </span>
+                            </a>
+                            <a
+                                class="dropdown-item"
+                                href="#"
+                                :class="getSortingStateClass('rank', 'desc')"
+                                @click.prevent="setSort('rank', 'desc')"
+                            >
+                                <i class="fas fa-fw fa-sort-numeric-up" />
+                                <span class="ms-2">
+                                    {{ t('main.entity.tree.sorts.desc.rank') }}
+                                </span>
+                            </a>
+                            <a
+                                class="dropdown-item"
+                                href="#"
+                                :class="getSortingStateClass('alpha', 'asc')"
+                                @click.prevent="setSort('alpha', 'asc')"
+                            >
+                                <i class="fas fa-fw fa-sort-alpha-down" />
+                                <span class="ms-2">
+                                    {{ t('main.entity.tree.sorts.asc.name') }}
+                                </span>
+                            </a>
+                            <a
+                                class="dropdown-item"
+                                href="#"
+                                :class="getSortingStateClass('alpha', 'desc')"
+                                @click.prevent="setSort('alpha', 'desc')"
+                            >
+                                <i class="fas fa-fw fa-sort-alpha-up" />
+                                <span class="ms-2">
+                                    {{ t('main.entity.tree.sorts.desc.name') }}
+                                </span>
+                            </a>
+                            <a
+                                class="dropdown-item"
+                                href="#"
+                                :class="getSortingStateClass('children', 'asc')"
+                                @click.prevent="setSort('children', 'asc')"
+                            >
+                                <i class="fas fa-fw fa-sort-amount-down" />
+                                <span class="ms-2">
+                                    {{ t('main.entity.tree.sorts.asc.children') }}
+                                </span>
+                            </a>
+                            <a
+                                class="dropdown-item"
+                                href="#"
+                                :class="getSortingStateClass('children', 'desc')"
+                                @click.prevent="setSort('children', 'desc')"
+                            >
+                                <i class="fas fa-fw fa-sort-amount-up" />
+                                <span class="ms-2">
+                                    {{ t('main.entity.tree.sorts.desc.children') }}
+                                </span>
+                            </a>
+                            <a
+                                class="dropdown-item"
+                                href="#"
+                                :class="getSortingStateClass('type', 'asc')"
+                                @click.prevent="setSort('type', 'asc')"
+                            >
+                                <span class="fa-stack d-inline">
+                                    <i class="fas fa-long-arrow-alt-down" />
+                                    <i
+                                        class="fas fa-monument"
+                                        data-fa-transform="start-4"
+                                    />
+                                </span>
+                                <span class="ms-2">
+                                    {{ t('main.entity.tree.sorts.asc.type') }}
+                                </span>
+                            </a>
+                            <a
+                                class="dropdown-item"
+                                href="#"
+                                :class="getSortingStateClass('type', 'desc')"
+                                @click.prevent="setSort('type', 'desc')"
+                            >
+                                <span class="fa-stack d-inline">
+                                    <i class="fas fa-long-arrow-alt-up" />
+                                    <i
+                                        class="fas fa-monument"
+                                        data-fa-transform="start-4"
+                                    />
+                                </span>
+                                <span class="ms-2">
+                                    {{ t('main.entity.tree.sorts.desc.type') }}
+                                </span>
+                            </a>
+                        </div>
                     </a>
+                    <hr class="dropdown-divider">
                     <a
                         class="dropdown-item"
                         href="#"
-                        :class="getSortingStateClass('alpha', 'desc')"
-                        @click.prevent="setSort('alpha', 'desc')"
+                        @click.prevent="toggleSelectMode()"
                     >
-                        <i class="fas fa-fw fa-sort-alpha-up" />
-                        <span class="ms-2">
-                            {{ t('main.entity.tree.sorts.desc.name') }}
+                        <span>
+                            <span v-if="state.selectMode">
+                                <i class="fas fa-fw fa-list-ol" />
+                            </span>
+                            <span v-else>
+                                <i class="fas fa-fw fa-list-check" />
+                            </span>
+                            {{ t('main.entity.tree.multiedit.title') }}
                         </span>
                     </a>
                     <a
+                        v-show="state.selectMode"
                         class="dropdown-item"
                         href="#"
-                        :class="getSortingStateClass('children', 'asc')"
-                        @click.prevent="setSort('children', 'asc')"
+                        :class="{'disabled': !state.canOpenMultiEditModal}"
+                        @click.prevent="openMultieditModal()"
                     >
-                        <i class="fas fa-fw fa-sort-amount-down" />
-                        <span class="ms-2">
-                            {{ t('main.entity.tree.sorts.asc.children') }}
-                        </span>
-                    </a>
-                    <a
-                        class="dropdown-item"
-                        href="#"
-                        :class="getSortingStateClass('children', 'desc')"
-                        @click.prevent="setSort('children', 'desc')"
-                    >
-                        <i class="fas fa-fw fa-sort-amount-up" />
-                        <span class="ms-2">
-                            {{ t('main.entity.tree.sorts.desc.children') }}
-                        </span>
-                    </a>
-                    <a
-                        class="dropdown-item"
-                        href="#"
-                        :class="getSortingStateClass('type', 'asc')"
-                        @click.prevent="setSort('type', 'asc')"
-                    >
-                        <span class="fa-stack d-inline">
-                            <i class="fas fa-long-arrow-alt-down" />
-                            <i
-                                class="fas fa-monument"
-                                data-fa-transform="start-4"
-                            />
-                        </span>
-                        <span class="ms-2">
-                            {{ t('main.entity.tree.sorts.asc.type') }}
-                        </span>
-                    </a>
-                    <a
-                        class="dropdown-item"
-                        href="#"
-                        :class="getSortingStateClass('type', 'desc')"
-                        @click.prevent="setSort('type', 'desc')"
-                    >
-                        <span class="fa-stack d-inline">
-                            <i class="fas fa-long-arrow-alt-up" />
-                            <i
-                                class="fas fa-monument"
-                                data-fa-transform="start-4"
-                            />
-                        </span>
-                        <span class="ms-2">
-                            {{ t('main.entity.tree.sorts.desc.type') }}
+                        <i class="fas fa-fw fa-edit" />
+                        <span>
+                            {{ t('main.entity.tree.multiedit.open') }}
                         </span>
                     </a>
                 </div>
diff --git a/resources/js/components/tree/Node.vue b/resources/js/components/tree/Node.vue
index 7bbccaf54..42f250772 100644
--- a/resources/js/components/tree/Node.vue
+++ b/resources/js/components/tree/Node.vue
@@ -266,39 +266,40 @@ export default {
                 state,
             };
         }
-        // methods: {
-        //     onDragEnter() {
-        //         if(!this.data.dragAllowed()) return;
-        //         this.asyncToggle.cancel();
-        //         this.asyncToggle();
-        //     },
-        //     onDragLeave(item) {
-        //         this.asyncToggle.cancel();
-        //     },
-        //     doToggle() {
-        //         if(!this.data.state.opened && this.data.state.openable) {
-        //             this.data.onToggle({data: this.data});
-        //         }
-        //     }
-        // },
-        // data() {
-        //     return {
-        //     }
-        // },
-        // computed: {
-        //     asyncToggle() {
-        //         return _debounce(this.doToggle, this.data.dragDelay || 500);
-        //     },
-        //     colorStyles() {
-        //         const colors = this.$getEntityColors(this.data.entity_type_id);
-        //         if(this.data.children_count) {
-        //             return colors;
-        //         } else {
-        //             return {
-        //                 color: colors.backgroundColor
-        //             };
-        //         }
-        //     }
-        // }
-    }
+    
+    // methods: {
+    //     onDragEnter() {
+    //         if(!this.data.dragAllowed()) return;
+    //         this.asyncToggle.cancel();
+    //         this.asyncToggle();
+    //     },
+    //     onDragLeave(item) {
+    //         this.asyncToggle.cancel();
+    //     },
+    //     doToggle() {
+    //         if(!this.data.state.opened && this.data.state.openable) {
+    //             this.data.onToggle({data: this.data});
+    //         }
+    //     }
+    // },
+    // data() {
+    //     return {
+    //     }
+    // },
+    // computed: {
+    //     asyncToggle() {
+    //         return _debounce(this.doToggle, this.data.dragDelay || 500);
+    //     },
+    //     colorStyles() {
+    //         const colors = this.$getEntityColors(this.data.entity_type_id);
+    //         if(this.data.children_count) {
+    //             return colors;
+    //         } else {
+    //             return {
+    //                 color: colors.backgroundColor
+    //             };
+    //         }
+    //     }
+    // }
+}
 </script>
diff --git a/webpack.mix.js b/webpack.mix.js
index 9e6c3c6bc..3087dd6e4 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -77,6 +77,7 @@ mix.js('resources/js/app.js', 'public/js').vue()
            plugins: [
                new webpack.ProvidePlugin({
                     process : 'process/browser',
+                    Buffer: ['buffer', 'Buffer']
                 }),
                 new webpack.DefinePlugin({
                     __APPNAME__: `'${appName}'`,