Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 1x | <template>
<div v-if="configurationList && configurationList.length > 0">
<p>Capability Configuration:</p>
<ul>
<li
v-for="(value, key) in configurationList"
:key="key"
draggable="true"
style="cursor: move"
:class="{ 'drag-over': key === draggedOverIndex }"
@dragstart="handleDragStart(key, $event)"
@dragover="handleDragOver(key, $event)"
@dragleave="handleDragLeave(key, $event)"
@drop="handleDrop(key, $event)"
@dragend="handleDragEnd"
>
<span v-if="value.necessary">
<input
type="checkbox"
disabled
:checked="1"
>
<label for="checkbox"><strong>{{ value.name }}</strong></label>
<i> necessary</i>
</span>
<span v-else>
<input
type="checkbox"
:checked="value.checked"
>
<label for="checkbox"><strong>{{ value.name }}:</strong></label>
</span>
</li>
</ul>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useStore } from 'vuex'
const store = useStore()
const configurationList = ref([]);
const props = defineProps({
selectedcapability: {
type: Object,
default: null,
},
});
const draggedOverIndex = ref(null);
watch(() => props.selectedcapability, async () => {
if (props.selectedcapability && props.selectedcapability.json) {
configurationList.value = JSON.parse(props.selectedcapability.json)
} else {
configurationList.value = null
}
}, { deep: true } );
watch(() => configurationList.value, async () => {
saveConfigurationList(configurationList.value)
}, { deep: true } );
let draggedItemIndex = null;
const handleDragStart = (index, event) => {
draggedItemIndex = index;
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/plain', draggedItemIndex);
}
const handleDragOver = (index, event) => {
event.preventDefault();
draggedOverIndex.value = index;
}
const handleDragLeave = () => {
draggedOverIndex.value = null;
}
const saveConfigurationList = (configurationList) => {
if (configurationList != null) {
const index = store.state.configlist.findIndex(obj => obj.id === props.selectedcapability.id
&& obj.capability === props.selectedcapability.capability);
if (index !== -1) {
store.state.configlist[index].json = JSON.stringify(configurationList)
}
}
}
const handleDrop = (index, event) => {
event.preventDefault();
const droppedItemIndex = event.dataTransfer.getData('text/plain');
const itemToMove = configurationList.value[droppedItemIndex];
const currentIndex = configurationList.value.findIndex(item => item.id === index);
configurationList.value.splice(droppedItemIndex, 1);
configurationList.value.splice(currentIndex, 0, itemToMove);
draggedOverIndex.value = null;
}
const handleDragEnd = () => {
draggedItemIndex = null;
}
</script>
<style scoped>
li.drag-over {
background-color: #cbc7c7;
border-bottom: 2px dashed #333;
}
</style>
|