- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
This commit is contained in:
Joris Slagter
202
pages/manager/learning/quality-standards/index.vue
Normal file
202
pages/manager/learning/quality-standards/index.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header class="d-flex justify-space-between">
|
||||
<span>
|
||||
{{ $t('learning.quality_standards') }}
|
||||
</span>
|
||||
|
||||
<v-btn
|
||||
depressed
|
||||
:to="localePath('/manager/learning/quality-standards/new')"
|
||||
color="accent"
|
||||
rounded
|
||||
>
|
||||
<v-icon left>mdi-plus</v-icon>
|
||||
<small>{{ $t('general.add') }}</small>
|
||||
</v-btn>
|
||||
</page-header>
|
||||
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="filter.items"
|
||||
:items-per-page="10"
|
||||
class="pa-4 secondary"
|
||||
>
|
||||
<!-- Translates dynamically headers -->
|
||||
<template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
|
||||
{{ $t(h.text) }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.name="{ item }">
|
||||
<strong class="txt--text" v-text="item.name"></strong>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-btn
|
||||
v-on="on"
|
||||
depressed
|
||||
:outlined="hover"
|
||||
small
|
||||
fab
|
||||
:color="hover ? 'info' : ''"
|
||||
>
|
||||
<v-icon>mdi-dots-horizontal</v-icon>
|
||||
</v-btn>
|
||||
</v-hover>
|
||||
</template>
|
||||
<v-list width="200">
|
||||
<v-list-item
|
||||
nuxt
|
||||
:to="localePath(`/manager/learning/quality-standards/${item.id}`)"
|
||||
>
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>mdi-pencil</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>
|
||||
{{ $t('general.edit') | capitalize }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-link</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>
|
||||
Link naar informatie
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-dialog max-width="740" persistent v-model="dialog">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-list-item v-on="on">
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-remove</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>{{
|
||||
$t('general.delete') | capitalize
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-card class="primary pa-10" flat>
|
||||
<v-card-title class="headline">
|
||||
{{
|
||||
$t('learning.product_overview.delete_confirmation', {
|
||||
productName: item.title,
|
||||
})
|
||||
}}
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<div class="ma-4">
|
||||
<v-btn
|
||||
@click="deleteItem(item.id)"
|
||||
class="mx-2"
|
||||
color="accent"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.delete') }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="close"
|
||||
class="mx-2"
|
||||
color="info"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.cancel') }}</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeader from '~/components/UI/PageHeader/PageHeader'
|
||||
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
|
||||
|
||||
export default {
|
||||
layout: `${process.env.CUSTOMER}Admin`,
|
||||
components: {
|
||||
PageHeader,
|
||||
accordionCard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
headers: [
|
||||
{ text: 'naam', sortable: false, value: 'title' },
|
||||
{ text: '', value: 'actions' },
|
||||
],
|
||||
filter: {},
|
||||
dialog: false,
|
||||
}
|
||||
},
|
||||
async asyncData({ $axios }) {
|
||||
try {
|
||||
const { data } = await $axios.get(`/filters`)
|
||||
|
||||
const qualityStandards = data.find((f) => f.title === 'quality_standards')
|
||||
|
||||
return { filter: { ...qualityStandards } }
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.dialog = false
|
||||
},
|
||||
async deleteItem(itemId) {
|
||||
if (!itemId) {
|
||||
this.$notifier.showMessage({
|
||||
content: `No item to delete selected`,
|
||||
color: 'error',
|
||||
icon: 'icon-message',
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => this.$nuxt.$loading.start())
|
||||
|
||||
try {
|
||||
await this.$axios.delete(`/filter-items/${itemId}`)
|
||||
|
||||
this.dialog = false
|
||||
|
||||
this.filter.items = this.filter.items.filter((i) => i.id !== itemId)
|
||||
|
||||
this.$nuxt.$loading.finish()
|
||||
|
||||
this.$notifier.showMessage({
|
||||
content: `Filter Item deleted`,
|
||||
color: 'success',
|
||||
icon: 'mdi-delete',
|
||||
})
|
||||
} catch (error) {
|
||||
this.dialog = false
|
||||
this.$nuxt.$loading.finish()
|
||||
|
||||
this.$notifier.showMessage({
|
||||
content: `Error trying to delete the selected Filter Item`,
|
||||
color: 'error',
|
||||
icon: 'mdi-delete',
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user