791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- 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
108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
<template>
|
|
<v-card class="mx-auto" tile>
|
|
<v-toolbar color="error" dark flat>
|
|
<v-toolbar-title>Components</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-btn depressed color="white" light :to="localePath('/manager/components/create')" text>
|
|
<v-icon small>icon-add</v-icon>
|
|
</v-btn>
|
|
</v-toolbar>
|
|
|
|
<v-card-text>
|
|
<v-list>
|
|
<v-list-item-group
|
|
v-model="selected"
|
|
multiple
|
|
active-class="pink--text"
|
|
@change="syncComponents"
|
|
>
|
|
<template v-for="(item, index) in components">
|
|
<v-list-item :key="item.name" :value="item.id">
|
|
<template v-slot:default="{ active, toggle }">
|
|
<v-list-item-content>
|
|
<v-list-item-title v-text="item.name"></v-list-item-title>
|
|
</v-list-item-content>
|
|
|
|
<v-list-item-action>
|
|
<v-switch :value="isAdded(item.id)" :disabled="loading" />
|
|
</v-list-item-action>
|
|
</template>
|
|
</v-list-item>
|
|
|
|
<v-divider v-if="index + 1 < components.length" :key="index"></v-divider>
|
|
</template>
|
|
</v-list-item-group>
|
|
</v-list>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
model_id: {
|
|
type: Number
|
|
},
|
|
model: {
|
|
type: String
|
|
},
|
|
componentsAttachedIds: {
|
|
type: Array
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
components: [],
|
|
selected: [],
|
|
loading: true
|
|
}
|
|
},
|
|
watch: {
|
|
componentsAttachedIds() {
|
|
this.copyComponentsIds()
|
|
}
|
|
},
|
|
async mounted() {
|
|
await this.getComponents()
|
|
this.copyComponentsIds()
|
|
},
|
|
methods: {
|
|
copyComponentsIds() {
|
|
this.selected = [...this.componentsAttachedIds]
|
|
},
|
|
|
|
isAdded(componentId) {
|
|
return this.componentsAttachedIds.includes(componentId)
|
|
},
|
|
|
|
async getComponents() {
|
|
try {
|
|
this.loading = true
|
|
const response = await this.$axios.get(`/components`)
|
|
this.components = response.data
|
|
this.loading = false
|
|
} catch (error) {
|
|
console.log('TCL: getComponents -> error', error)
|
|
}
|
|
},
|
|
|
|
async syncComponents() {
|
|
this.loading = true
|
|
const data = {
|
|
model: this.model,
|
|
model_id: this.model_id,
|
|
components_ids: this.selected
|
|
}
|
|
|
|
try {
|
|
const response = await this.$axios.post('/components/sync', data)
|
|
this.$emit('reload-resource')
|
|
this.loading = false
|
|
} catch (error) {
|
|
console.log('TCL: syncComponents -> error', error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |