Update vue draggable [SCI-9637]

This commit is contained in:
Anton 2023-11-02 10:38:33 +01:00
parent 5c4924413c
commit fee2fad533
6 changed files with 46 additions and 39 deletions

View file

@ -427,6 +427,9 @@
},
updateElement(element, skipRequest=false, callback) {
let index = this.elements.findIndex((e) => e.id === element.id);
if (!this.elements[index]) return;
this.elements[index].isNew = false;
if (skipRequest) {

View file

@ -38,26 +38,27 @@
:chosenClass="'checklist-item-chosen'"
:forceFallback="true"
:handle="'.element-grip'"
item-key="id"
:disabled="editingItem || checklistItems.length < 2 || !element.attributes.orderable.urls.reorder_url"
@start="startReorder"
@end="endReorder"
>
<ChecklistItem
v-for="checklistItem in orderedChecklistItems"
:key="checklistItem.id"
:checklistItem="checklistItem"
:locked="locked"
:reordering="reordering"
:reorderChecklistItemUrl="element.attributes.orderable.urls.reorder_url"
:inRepository="inRepository"
:draggable="checklistItems.length > 1"
@editStart="editingItem = true"
@editEnd="editingItem = false"
@update="saveItem"
@toggle="saveItemChecked"
@removeItem="removeItem"
@component:delete="removeItem"
/>
<template #item="{element}">
<ChecklistItem
:checklistItem="element"
:locked="locked"
:reordering="reordering"
:reorderChecklistItemUrl="this.element.attributes.orderable.urls.reorder_url"
:inRepository="inRepository"
:draggable="checklistItems.length > 1"
@editStart="editingItem = true"
@editEnd="editingItem = false"
@update="saveItem"
@toggle="saveItemChecked"
@removeItem="removeItem"
@component:delete="removeItem"
/>
</template>
</Draggable>
<div v-if="element.attributes.orderable.urls.create_item_url && !addingNewItem"
class="flex items-center gap-1 text-sn-blue cursor-pointer mb-2 mt-1 "

View file

@ -1,8 +1,8 @@
<template>
<div class="content__checklist-item">
<div class="checklist-item-header flex rounded pl-10 ml-[-2.325rem] items-center relative w-full group/checklist-item-header" :class="{ 'locked': locked || editingText, 'editing-name': editingText }">
<div class="content__checklist-item pl-10 ml-[-2.325rem]">
<div class="checklist-item-header flex rounded items-center relative w-full group/checklist-item-header" :class="{ 'locked': locked || editingText, 'editing-name': editingText }">
<div v-if="reorderChecklistItemUrl"
class="absolute h-6 cursor-grab justify-center left-0 top-0.5 px-2 tw-hidden text-sn-grey element-grip step-element-grip--draggable"
class="absolute h-6 cursor-grab justify-center left-[-2.325rem] top-0.5 px-2 tw-hidden text-sn-grey element-grip step-element-grip--draggable"
:class="{ 'group-hover/checklist-item-header:flex': (!locked && !editingText && draggable) }"
>
<i class="sn-icon sn-icon-drag"></i>

View file

@ -15,18 +15,21 @@
:dragClass="'step-checklist-item-drag'"
:chosenClass="'step-checklist-item-chosen'"
:handle="'.step-element-grip'"
item-key="id"
>
<div v-for="(item, index) in reorderedItems" :key="item.id" class="step-element-header flex items-center">
<div class="step-element-grip step-element-grip--draggable">
<i class="sn-icon sn-icon-drag"></i>
<template #item="{element, index}">
<div class="step-element-header flex items-center">
<div class="step-element-grip step-element-grip--draggable">
<i class="sn-icon sn-icon-drag"></i>
</div>
<div class="step-element-name text-center">
<strong v-if="includeNumbers" class="step-element-number">{{ index + 1 }}</strong>
<i v-if="element.attributes.icon" class="fas" :class="element.attributes.icon"></i>
<span :title="nameWithFallbacks(element)" v-if="nameWithFallbacks(element)">{{ nameWithFallbacks(element) }}</span>
<span :title="element.attributes.placeholder" v-else class="step-element-name-placeholder">{{ element.attributes.placeholder }}</span>
</div>
</div>
<div class="step-element-name text-center">
<strong v-if="includeNumbers" class="step-element-number">{{ index + 1 }}</strong>
<i v-if="item.attributes.icon" class="fas" :class="item.attributes.icon"></i>
<span :title="nameWithFallbacks(item)" v-if="nameWithFallbacks(item)">{{ nameWithFallbacks(item) }}</span>
<span :title="item.attributes.placeholder" v-else class="step-element-name-placeholder">{{ item.attributes.placeholder }}</span>
</div>
</div>
</template>
</Draggable>
</div>
</div>

View file

@ -82,7 +82,7 @@
"vue-loader": "^16.0.0",
"vue-turbolinks": "^2.2.1",
"vue3-perfect-scrollbar": "^1.6.1",
"vuedraggable": "^2.24.3",
"vuedraggable": "^4.1.0",
"webpack": "^5.64.4",
"webpack-cli": "^4.10.0",
"webpack-manifest-plugin": "^1.3.2",

View file

@ -6774,10 +6774,10 @@ socks@^2.6.2:
ip "^2.0.0"
smart-buffer "^4.2.0"
sortablejs@1.10.2:
version "1.10.2"
resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
sortablejs@1.14.0:
version "1.14.0"
resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
source-list-map@^2.0.0:
version "2.0.1"
@ -7488,12 +7488,12 @@ vue@^3.3.4:
"@vue/server-renderer" "3.3.4"
"@vue/shared" "3.3.4"
vuedraggable@^2.24.3:
version "2.24.3"
resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
vuedraggable@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
dependencies:
sortablejs "1.10.2"
sortablejs "1.14.0"
w3c-hr-time@^1.0.2:
version "1.0.2"