# All files / features/devices/components DeviceStateCell.vue

100% Statements 16/16
85.71% Branches 18/21
100% Functions 3/3
100% Lines 16/16

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
    5x
    4x

    5x

    5x
    5x
    1x

    4x
    1x

    3x
    1x

    2x

    5x
    4x

    1x

    1x

    2x

     <template>
      <GnLoader v-if="state.status === 'loading'" circle :label="label" />
      <GnBadge v-else :variant="variant">{{ label }}</GnBadge>
    </template>

    <script setup>
    import { computed } from "vue";
    import { GnLoader, GnBadge } from "gnexus-ui-kit/vue";

    const props = defineProps({
      state: {
        type: Object,
        default: () => ({
          status: "idle",
          message: "Not loaded",
        }),
      },
    });

    const label = computed(() => {
      if (props.state.status === "ready") {
        return props.state.message || "ok";
      }

      if (props.state.status === "error") {
        return props.state.message || "Loading error";
      }

      if (props.state.status === "skipped") {
        return props.state.message || "Skipped";
      }

      return props.state.message || "Not loaded";
    });

    const variant = computed(() => {
      switch (props.state.status) {
        case "ready":
          return "success";
        case "error":
          return "danger";
        case "skipped":
        case "idle":
        default:
          return "secondary";
      }
    });
    </script>