All files CapabilityOptions.vue

77.27% Statements 17/22
50% Branches 3/6
16.66% Functions 1/6
77.27% Lines 17/22

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>