# 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>