<script>
import vulnerabilitySeveritiesCountQuery from '../graphql/project_vulnerability_severities_count.graphql';
import VulnerabilityCountListLayout from './vulnerability_count_list_layout.vue';

export default {
  components: {
    VulnerabilityCountListLayout,
  },
  inject: ['projectFullPath'],
  props: {
    filters: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },
  data: () => ({
    queryError: false,
    vulnerabilitiesCount: {},
  }),
  computed: {
    isLoading() {
      return this.$apollo.queries.vulnerabilitiesCount.loading;
    },
  },
  apollo: {
    vulnerabilitiesCount: {
      query: vulnerabilitySeveritiesCountQuery,
      variables() {
        return {
          fullPath: this.projectFullPath,
          ...this.filters,
        };
      },
      update: ({ project }) => project?.vulnerabilitySeveritiesCount || {},
      result() {
        this.queryError = false;
      },
      error() {
        this.queryError = true;
      },
    },
  },
};
</script>

<template>
  <vulnerability-count-list-layout
    :show-error="queryError"
    :is-loading="isLoading"
    :vulnerabilities-count="vulnerabilitiesCount"
  />
</template>
