sintonia_webapp/resources/js/components/content/partials/SmartBlockEditor.vue
2025-07-16 11:36:10 +02:00

154 lines
No EOL
4.1 KiB
Vue

<script setup lang="ts">
import TrackList from "@/components/content/partials/TrackList.vue";
import {useAuthStore} from "@/stores/auth.store.ts";
import {onMounted, ref, watch} from "vue";
import {smartblock} from "@models/smartblock/smartblock.ts";
import {smartblock_page} from "@/composables/content/smartblock_page.ts";
import {formatFromSeconds} from "@/helpers/TimeFormatter.ts";
import {useSmartBlockStore} from "@/stores/smartblock.store.ts";
import {baseSmartBlockCriteria} from "@models/smartblock/smartblockCriteria.ts";
const { loading, getTracklist } = smartblock_page()
const emit = defineEmits([
'saveItem'
])
//
const auth = useAuthStore();
const smartBlockStore = useSmartBlockStore();
const item = smartBlockStore.currentSmartBlock;
const smartblockFields = smartblock(item)
const length = ref([]);
//Is true if there is a required field empty or while saving
const disabledSaveButton = ref(true)
// Funcs
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, length } = await getTracklist(item);
item.length = length;
smartBlockStore.updateField({key: 'length', value: length});
console.log(files, formatFromSeconds(length))
item.tracks = [];
files.forEach(file => {
item.tracks.push({file: file});
})
}
function hiddenSmartBlockCriteria(){
if(!smartBlockStore.currentSmartBlock.smart_block_type) return
let showSmartBlockCriteria = baseSmartBlockCriteria()
showSmartBlockCriteria.criteria = 'track_type_id'
showSmartBlockCriteria.modifier = 'is not'
showSmartBlockCriteria.value = '3'
if (smartBlockStore.currentSmartBlock.smart_block_type == 'spot') {
showSmartBlockCriteria.modifier = 'is'
}
smartBlockStore.currentSmartBlock.criteria.push(showSmartBlockCriteria)
}
// Hook and watch
onMounted(() => {
smartBlockStore.updateField({key: 'creator_id', value: auth.userData.id})
hiddenSmartBlockCriteria()
})
watch(loading.value, (newVal, oldVal) => {
disabledSaveButton.value = newVal;
})
</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 : field.type == 'checkbox' ? true : null"
:disabled="field.disabled"
@update:modelValue="checkError(field, item[key])"
@update-property="updateProperty"
:error="checkError(field, item[key])"
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-row
class="d-flex justify-between"
no-gutters>
<v-btn
color="primary"
:disabled="disabledSaveButton"
@click="showPreview"
>Anteprima</v-btn>
<span>
Durata: {{ item.length === 'N/A' ? 'N/A' : formatFromSeconds(item.length) }}
</span>
</v-row>
<TrackList
:tracks="item.tracks"
@update-tracks="update"
/>
</v-col>
</v-row>
</template>
<style scoped>
.tables > .v-col {
width: 50%;
overflow: hidden;
}
.v-list {
max-height: 77vh;
margin: 4px 0 0 4px;
border-radius: 4px;
}
</style>