# All files CapabilityButtons.vue

76.19% Statements 16/21
25% Branches 1/4
25% Functions 1/4
76.19% Lines 16/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

    1x

    1x

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