<template> <v-card> <v-card-title v-if="isStaff"> <v-btn class="text-capitalize" color="primary" @click.stop="$router.push('projects/create')" > {{ $t('generic.create') }} </v-btn> <v-btn class="text-capitalize ms-2" :disabled="!canDelete" outlined @click.stop="dialogDelete=true" > {{ $t('generic.delete') }} </v-btn> <v-dialog v-model="dialogDelete"> <form-delete :selected="selected" @cancel="dialogDelete=false" @remove="remove" /> </v-dialog> </v-card-title> <project-list v-model="selected" :items="projects.items" :is-loading="isLoading" :total="projects.count" @update:query="updateQuery" /> </v-card> </template> <script lang="ts"> import _ from 'lodash' import Vue from 'vue' import { mapGetters } from 'vuex' import ProjectList from '@/components/project/ProjectList.vue' import { ProjectDTO, ProjectListDTO } from '~/services/application/project/projectData' import FormDelete from '~/components/project/FormDelete.vue' export default Vue.extend({ components: { FormDelete, ProjectList, }, layout: 'projects', middleware: ['check-auth', 'auth'], data() { return { dialogDelete: false, projects: {} as ProjectListDTO, selected: [] as ProjectDTO[], isLoading: false } }, async fetch() { this.isLoading = true this.projects = await this.$services.project.list(this.$route.query) this.isLoading = false }, computed: { ...mapGetters('auth', ['isStaff']), canDelete(): boolean { return this.selected.length > 0 }, }, watch: { '$route.query': _.debounce(function() { // @ts-ignore this.$fetch() }, 1000 ), }, methods: { async remove() { await this.$services.project.bulkDelete(this.selected) this.$fetch() this.dialogDelete = false this.selected = [] }, updateQuery(query: object) { this.$router.push(query) } } }) </script> <style scoped> ::v-deep .v-dialog { width: 800px; } </style>