132 lines
No EOL
3 KiB
Vue
132 lines
No EOL
3 KiB
Vue
<script setup lang="ts">
|
|
import Sources from "@/components/content/partials/Sources.vue";
|
|
import TrackList from "@/components/content/partials/TrackList.vue";
|
|
import {useAuthStore} from "@/stores/auth.store.ts";
|
|
import {reactive, ref} from "vue";
|
|
import {smartblock} from "@models/smartblock/smartblock.ts";
|
|
|
|
const auth = useAuthStore();
|
|
|
|
const emit = defineEmits([
|
|
'saveItem'
|
|
])
|
|
|
|
const props = defineProps({
|
|
item: Object,
|
|
})
|
|
|
|
const item = props.item.id > 0 ? props.item : reactive({
|
|
id: 0,
|
|
name: '',
|
|
creator_id: auth.userData.user.id,
|
|
description: '',
|
|
tracks: [],
|
|
criteria: [],
|
|
limit: {
|
|
type: null,
|
|
quantity: null
|
|
},
|
|
repeated_tracks: false,
|
|
overflow_tracks: false
|
|
})
|
|
|
|
const smartblockFields = smartblock(item)
|
|
|
|
//Is true if there is a required field empty or while saving
|
|
const disabledSaveButton = ref(true)
|
|
|
|
|
|
const update = (list) => {
|
|
item.tracks = list
|
|
}
|
|
|
|
const save = () => {
|
|
// const errors
|
|
emit('saveItem', item)
|
|
}
|
|
|
|
const checkError = (field, model) => {
|
|
if (field.required) {
|
|
const error = field.required && (model === '' || model === null)
|
|
disabledSaveButton.value = error
|
|
return error
|
|
}
|
|
return false
|
|
}
|
|
|
|
const updateProperty = (criteria, prop) => {
|
|
console.log(criteria, prop)
|
|
item[prop] = criteria
|
|
console.log(item)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-row no-gutters>
|
|
<v-col>
|
|
<Component
|
|
v-for="(field, key) in smartblockFields()"
|
|
:is="field.component"
|
|
:label="field.label"
|
|
:radioButtons="field.radioButtons"
|
|
:value="field.value"
|
|
:disabled="field.disabled"
|
|
:density="'compact'"
|
|
@update:modelValue="checkError(field, item[key])"
|
|
@update-property="updateProperty"
|
|
:error="checkError(field, item[key])"
|
|
:limit="item.limit"
|
|
rows="2"
|
|
:items="field.items"
|
|
v-model="item[key]"
|
|
item-title="title"
|
|
item-value="value"
|
|
density="compact"
|
|
hide-details="auto"
|
|
class="mb-2"
|
|
clearable
|
|
:active="true"
|
|
/>
|
|
<v-btn
|
|
color="accent"
|
|
@click="$emit('goBack')"
|
|
>Torna indietro</v-btn>
|
|
<v-btn
|
|
color="secondary"
|
|
@click="preview"
|
|
>Anteprima</v-btn>
|
|
<v-btn
|
|
color="primary"
|
|
@click="save"
|
|
:disabled="disabledSaveButton"
|
|
>Salva</v-btn>
|
|
</v-col>
|
|
<v-col>
|
|
<TrackList
|
|
:tracks="item.tracks"
|
|
@update-tracks="update"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
{{item}}
|
|
<!-- <v-row class="tables" no-gutters>-->
|
|
<!-- <v-col>-->
|
|
<!-- <TrackList-->
|
|
<!-- :tracks="item.tracks"-->
|
|
<!-- @update-tracks="update"-->
|
|
<!-- />-->
|
|
<!-- </v-col>-->
|
|
<!-- <v-col>-->
|
|
<!-- <Sources />-->
|
|
<!-- </v-col>-->
|
|
<!-- </v-row>-->
|
|
<!-- <v-row no-gutters>-->
|
|
<!-- </v-row>-->
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tables > .v-col {
|
|
width: 50%;
|
|
overflow: hidden;
|
|
}
|
|
</style> |