mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-02-25 08:14:17 +08:00
Update vue draggable [SCI-9637]
This commit is contained in:
parent
5c4924413c
commit
fee2fad533
6 changed files with 46 additions and 39 deletions
|
@ -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) {
|
||||
|
|
|
@ -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 "
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
|
|
18
yarn.lock
18
yarn.lock
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue