All files / components/helper CapabilityButtons.vue

100% Statements 21/21
100% Branches 4/4
100% Functions 4/4
100% Lines 21/21

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      2x     2x                                                                                                                    
<template>
  <div class="mt-4">
    <div v-if="!showButtons">
      <p><strong>Capability: {{ choosenCapability.capability }}</strong></p>
      <div class="row mt-2">
        <div class="col-md-12">
          <button 
            class="btn btn-secondary"
            @click="showButtons = true; handleCapabilityClick(null)" 
          >
            Back
          </button>
        </div>
      </div>
    </div>
    <div v-else>
      <p><strong>Capabilites</strong></p>
      <div class="row">
        <div class="col-md-12">
          <button
            v-for="capability in configCapability"
            :key="capability.id" 
            class="btn btn-outline-primary mr-2 mb-2"
            @click="showButtons = false; handleCapabilityClick(capability)"
          >
            {{ capability.capability }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { onMounted, ref, watch, defineEmits } from 'vue'
import { useStore } from 'vuex'
 
const store = useStore()
const configCapability = ref([])
const showButtons = ref(true)
const choosenCapability = ref(null)
 
const emit = defineEmits(['capabilityClicked'])
 
onMounted(() => {
  configCapability.value = store.state.configlist
});
 
watch(() => store.state.configlist, async () => {
  configCapability.value = store.state.configlist
}, { deep: true } );
 
watch(() => choosenCapability.value, async () => {
  if (choosenCapability.value == null) {
    emit('capabilityClicked', null)
  }else {
    emit('capabilityClicked', choosenCapability.value)
  }
}, { deep: true } );
 
const handleCapabilityClick = (capability) => {
  choosenCapability.value = capability;
}
</script>