148 lines
No EOL
3.5 KiB
Vue
148 lines
No EOL
3.5 KiB
Vue
<script setup lang="ts">
|
|
import TrackList from "@/components/content/partials/TrackList.vue";
|
|
import {useAuthStore} from "@/stores/auth.store.ts";
|
|
import {onBeforeMount, reactive, ref} from "vue";
|
|
import {smartblock} from "@models/smartblock/smartblock.ts";
|
|
import {blocks_page} from "@/composables/content/blocks_page.ts";
|
|
|
|
const auth = useAuthStore();
|
|
|
|
const { getTracklist } = blocks_page()
|
|
|
|
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
|
|
},
|
|
repeat_tracks: false,
|
|
overflow_tracks: false,
|
|
sort: null
|
|
})
|
|
|
|
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)
|
|
}
|
|
|
|
const showPreview = async () => {
|
|
const files = await getTracklist(item)
|
|
item.tracks = []
|
|
files.forEach(file => {
|
|
item.tracks.push({file: file})
|
|
})
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
if (item.id > 0) {
|
|
const limit = item.criteria.find(el => el.criteria === 'limit')
|
|
const repeat_tracks = item.criteria.find(el => el.criteria === 'repeat_tracks')
|
|
const overflow_tracks = item.criteria.find(el => el.criteria === 'overflow_tracks')
|
|
const sort = item.criteria.find(el => el.criteria === 'sort')
|
|
item.limit = {
|
|
type: limit.modifier,
|
|
quantity: limit.value
|
|
}
|
|
item.repeat_tracks = !!repeat_tracks.value
|
|
item.overflow_tracks = !!overflow_tracks.value
|
|
item.sort = sort.value
|
|
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 ? field.value : null"
|
|
:disabled="field.disabled"
|
|
@update:modelValue="checkError(field, item[key])"
|
|
@update-property="updateProperty"
|
|
:error="checkError(field, item[key])"
|
|
:limit="item.limit"
|
|
rows="2"
|
|
:items="field.items"
|
|
:criteria="item.criteria"
|
|
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="primary"
|
|
@click="save"
|
|
:disabled="disabledSaveButton"
|
|
>Salva</v-btn>
|
|
</v-col>
|
|
<v-col>
|
|
<v-btn
|
|
color="primary"
|
|
:disabled="disabledSaveButton"
|
|
@click="showPreview"
|
|
>Anteprima</v-btn>
|
|
<TrackList
|
|
:tracks="item.tracks"
|
|
@update-tracks="update"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
{{item}}
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tables > .v-col {
|
|
width: 50%;
|
|
overflow: hidden;
|
|
}
|
|
</style> |