MalwareMultiScan/MalwareMultiScan.Ui/components/scan-result-component.vue

<template>
  <div class="p-2 w-25">
    <div :class="cardClass" class="card">
      <h6 class="card-header">{{ id }}</h6>

      <div class="card-body">
        <b-skeleton-wrapper :loading="!result.completed">
          <template #loading>
            <b-skeleton/>
          </template>

          <div v-if="result.succeeded && !result.threats">No threats have been detected...</div>
          <div v-if="result.succeeded === false">Scanning failed to complete...</div>

          <ul v-if="result.threats" class="list-inline m-0">
            <li v-for="threat in result.threats" v-bind:key="threat">{{ threat }}</li>
          </ul>
        </b-skeleton-wrapper>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, {PropOptions} from 'vue'

import ScanResultEntry from '~/models/scan-result-entry';

export default Vue.extend({
  name: 'scan-result-component',

  props: {
    id: {
      type: String,
      required: true
    } as PropOptions<string>,

    result: {
      type: Object,
      required: true
    } as PropOptions<ScanResultEntry>
  },

  computed: {
    cardClass() {
      const result = this.result as ScanResultEntry;

      return {
        'succeeded': result.succeeded && !result.threats,
        'detected': result.succeeded && result.threats,
        'failed': result.succeeded === false,
      };
    }
  }
});
</script>

<style lang="scss" scoped>
@import 'node_modules/bootstrap/scss/bootstrap.scss';

.card-header {
  text-transform: uppercase;
}

.succeeded {
  @extend .bg-success;
  @extend .text-white;
}

.detected {
  @extend .bg-danger;
  @extend .text-white;
}

.failed {
  @extend .bg-warning;
  @extend .text-white;
}
</style>