154 lines
No EOL
4.1 KiB
Vue
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> |