fix(fe smartblock): refactored all code with stores and interfaces
This commit is contained in:
parent
9e690dc0c9
commit
fa96a43ba4
10 changed files with 738 additions and 261 deletions
|
|
@ -4,6 +4,8 @@ import ConfirmDelete from "@/components/content/partials/dialogs/ConfirmDelete.v
|
|||
import {onBeforeMount, reactive, ref, watch} from "vue";
|
||||
import {blocks_page} from "@/composables/content/blocks_page.ts";
|
||||
import SmartBlockEditor from "@partials/SmartBlockEditor.vue";
|
||||
import {useSmartBlockStore} from "@/stores/smartblock.store.ts";
|
||||
import {baseSmartBlock} from "@models/smartblock/smartblock.ts";
|
||||
|
||||
const props = defineProps({
|
||||
hideColumns: {
|
||||
|
|
@ -16,11 +18,15 @@ const props = defineProps({
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
const smartBlockStore = useSmartBlockStore()
|
||||
|
||||
const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = blocks_page()
|
||||
|
||||
const itemEdited = ref({
|
||||
id: null
|
||||
})
|
||||
|
||||
const bulk = ref(false)
|
||||
const dialog = reactive({
|
||||
open: false,
|
||||
|
|
@ -31,7 +37,7 @@ const dialog = reactive({
|
|||
|
||||
const visibleHeaders = ref(headers)
|
||||
|
||||
const openDialog = (type, title = '', text = '', bulk = false) => {
|
||||
const openDialog = (type, title = '', text = '') => {
|
||||
dialog.open = true
|
||||
dialog.type = type
|
||||
dialog.title = title
|
||||
|
|
@ -39,18 +45,24 @@ const openDialog = (type, title = '', text = '', bulk = false) => {
|
|||
}
|
||||
|
||||
const edit = (item) => {
|
||||
console.log(item)
|
||||
itemEdited.value = item
|
||||
if (item === 0) {
|
||||
item = baseSmartBlock();
|
||||
}
|
||||
smartBlockStore.loadSmartBlock(item);
|
||||
itemEdited.value = item;
|
||||
console.log(smartBlockStore)
|
||||
}
|
||||
|
||||
const saveItem = (item) => {
|
||||
const saved = editItem(item)
|
||||
closeDialog()
|
||||
const saved = editItem(item);
|
||||
console.log(saved)
|
||||
smartBlockStore.updateField({key: 'id', value: saved.id});
|
||||
// resetItemEdited()
|
||||
}
|
||||
|
||||
const cancel = (item) => {
|
||||
bulk.value = Array.isArray(item)
|
||||
itemEdited.value = item
|
||||
bulk.value = Array.isArray(item);
|
||||
itemEdited.value = item;
|
||||
openDialog(
|
||||
'delete',
|
||||
'Cancella',
|
||||
|
|
@ -58,7 +70,7 @@ const cancel = (item) => {
|
|||
)
|
||||
}
|
||||
|
||||
const confirmDelete = (confirm, bulk) => {
|
||||
const confirmDelete = (confirm) => {
|
||||
if (confirm) {
|
||||
if (!bulk) {
|
||||
deleteItem(itemEdited.value.id)
|
||||
|
|
@ -68,6 +80,8 @@ const confirmDelete = (confirm, bulk) => {
|
|||
})
|
||||
}
|
||||
}
|
||||
itemEdited.value = {}
|
||||
selected.value = []
|
||||
closeDialog()
|
||||
}
|
||||
|
||||
|
|
@ -92,6 +106,7 @@ const resetItemEdited = () => {
|
|||
itemEdited.value = {
|
||||
id: null,
|
||||
}
|
||||
smartBlockStore.loadSmartBlock(baseSmartBlock())
|
||||
}
|
||||
|
||||
watch(search, (newValue, oldValue) => {
|
||||
|
|
@ -103,8 +118,9 @@ watch(search, (newValue, oldValue) => {
|
|||
<template>
|
||||
<SmartBlockEditor
|
||||
v-if="itemEdited.id !== null && !dialog.open"
|
||||
:item="itemEdited"
|
||||
:item="smartBlockStore.currentSmartBlock"
|
||||
@go-back="resetItemEdited"
|
||||
@save-item="saveItem"
|
||||
/>
|
||||
<Table
|
||||
v-else
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<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 {onBeforeMount, onMounted, reactive, ref, watch} from "vue";
|
||||
import {baseSmartBlock, smartblock} from "@models/smartblock/smartblock.ts";
|
||||
import {blocks_page} from "@/composables/content/blocks_page.ts";
|
||||
import {formatFromSeconds} from "@/helpers/TimeFormatter.ts";
|
||||
import {useSmartBlockStore} from "@/stores/smartblock.store.ts";
|
||||
|
||||
const auth = useAuthStore();
|
||||
|
||||
const { getTracklist } = blocks_page()
|
||||
const { loading, getTracklist } = blocks_page()
|
||||
|
||||
const emit = defineEmits([
|
||||
'saveItem'
|
||||
|
|
@ -17,28 +19,17 @@ 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 smartBlockStore = useSmartBlockStore();
|
||||
const item = smartBlockStore.currentSmartBlock;
|
||||
console.log(smartBlockStore.currentSmartBlock)
|
||||
|
||||
const length = ref([]);
|
||||
|
||||
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
|
||||
}
|
||||
|
|
@ -58,34 +49,28 @@ const checkError = (field, model) => {
|
|||
}
|
||||
|
||||
const updateProperty = (criteria, prop) => {
|
||||
console.log(criteria, prop)
|
||||
// console.log(criteria, prop)
|
||||
item[prop] = criteria
|
||||
console.log(item)
|
||||
// console.log(item)
|
||||
}
|
||||
|
||||
const showPreview = async () => {
|
||||
const files = await getTracklist(item)
|
||||
item.tracks = []
|
||||
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})
|
||||
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)
|
||||
}
|
||||
onMounted(() => {
|
||||
smartBlockStore.updateField({key: 'creator_id', value: auth.userData.user.id})
|
||||
})
|
||||
|
||||
watch(loading.value, (newVal, oldVal) => {
|
||||
disabledSaveButton.value = newVal;
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -97,12 +82,11 @@ onBeforeMount(() => {
|
|||
:is="field.component"
|
||||
:label="field.label"
|
||||
:radioButtons="field.radioButtons"
|
||||
:value="field.value ? field.value : null"
|
||||
: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])"
|
||||
:limit="item.limit"
|
||||
rows="2"
|
||||
:items="field.items"
|
||||
:criteria="item.criteria"
|
||||
|
|
@ -126,18 +110,24 @@ onBeforeMount(() => {
|
|||
>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>
|
||||
{{item}}
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -145,4 +135,9 @@ onBeforeMount(() => {
|
|||
width: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-list {
|
||||
max-height: 77vh;
|
||||
margin: 4px 0 0 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import {smartblockCriteria} from "@models/smartblock/smartblockCriteria.ts";
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
import {trackType} from "@/composables/content/track_type.ts";
|
||||
|
||||
const emit = defineEmits(['updateProperty'])
|
||||
|
||||
const props = defineProps({
|
||||
criteria: Array
|
||||
})
|
||||
|
||||
const { criteria, modifiers } = smartblockCriteria()
|
||||
const trackTypes = trackType(false)
|
||||
|
||||
const activeCriteria = ref([])
|
||||
|
||||
const addCriteria = () => {
|
||||
activeCriteria.value.push({
|
||||
criteria: '',
|
||||
modifier: '',
|
||||
value: '',
|
||||
extra: ''
|
||||
})
|
||||
}
|
||||
|
||||
const checkModifier = (index) => {
|
||||
if (activeCriteria.value[index].modifier !== 'is in the range') {
|
||||
activeCriteria.value[index].extra = ''
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.criteria.length > 0) {
|
||||
props.criteria.forEach(criteria => {
|
||||
if (criteria.criteria !== 'sort' &&
|
||||
criteria.criteria !== 'limit' &&
|
||||
criteria.criteria !== 'repeat_tracks' &&
|
||||
criteria.criteria !== 'overflow_tracks') {
|
||||
activeCriteria.value.push(criteria)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
activeCriteria.value.push({
|
||||
criteria: '',
|
||||
modifier: '',
|
||||
value: '',
|
||||
extra: ''
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
watch(activeCriteria.value, (newVal, oldVal) => {
|
||||
emit('updateProperty', newVal, 'criteria')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label for="criteria" class="v-label">Criteri di popolamento</label>
|
||||
<fieldset id="criteria" class="smartblock-criteria">
|
||||
<v-row v-for="(current, index) in activeCriteria">
|
||||
<v-col
|
||||
v-if="index > 0"
|
||||
cols="12"
|
||||
class="text-center"
|
||||
>E</v-col>
|
||||
<v-col>
|
||||
<v-select
|
||||
v-model="activeCriteria[index].criteria"
|
||||
label="Seleziona il criterio"
|
||||
:items="criteria"
|
||||
item-title="title"
|
||||
item-value="value"
|
||||
></v-select>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-select
|
||||
v-model="activeCriteria[index].modifier"
|
||||
label="Seleziona il modificatore"
|
||||
:items="modifiers
|
||||
.filter(mod => mod.type === criteria.find(cri => cri.value === activeCriteria[index].criteria)?.type || mod.type === 'all')"
|
||||
@update:modelValue="checkModifier(index)"
|
||||
item-title="title"
|
||||
item-value="value"
|
||||
></v-select>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-if="activeCriteria[index].criteria != 'track_type_id'"
|
||||
:label="activeCriteria[index].modifier === 'is in the range' ? 'Valore iniziale' : 'Valore scelto'"
|
||||
v-model="activeCriteria[index].value"
|
||||
:type="criteria.find(cri => cri.value === activeCriteria[index].criteria)?.type === 'number' ? 'number' : 'text'"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
v-else
|
||||
:items="trackTypes.trackTypes.value"
|
||||
v-model="activeCriteria[index].value"
|
||||
item-title="type_name"
|
||||
item-value="id"
|
||||
></v-select>
|
||||
<v-text-field
|
||||
v-if="activeCriteria[index].modifier !== '' && activeCriteria[index].modifier === 'is in the range'"
|
||||
label="Valore finale"
|
||||
type="number"
|
||||
v-model="activeCriteria[index].extra"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col
|
||||
v-if="index > 0"
|
||||
cols="1"
|
||||
>
|
||||
<v-icon
|
||||
@click="activeCriteria.splice(index,1)"
|
||||
>mdi-close</v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</fieldset>
|
||||
<v-btn
|
||||
color="secundary"
|
||||
@click="addCriteria"
|
||||
>Aggiungi un nuovo criterio</v-btn>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
baseSmartBlockCriteria,
|
||||
genericSmartBlockCriteriaList, genericSmartBlockCriteriaModifiersList,
|
||||
smartblockCriteria, smartBlockCriteriaSortList
|
||||
} from "@models/smartblock/smartblockCriteria.ts";
|
||||
import {computed, onMounted, reactive, ref, watch} from "vue";
|
||||
import {trackType} from "@/composables/content/track_type.ts";
|
||||
import SmartBlockLimit from "@partials/fields/smartblock/SmartBlockLimit.vue";
|
||||
import {useSmartBlockStore} from "@/stores/smartblock.store.ts";
|
||||
import SmartBlockCriteriaFieldRow from "@partials/fields/smartblock/SmartBlockCriteriaFieldRow.vue";
|
||||
|
||||
const emit = defineEmits(['updateProperty'])
|
||||
|
||||
const props = defineProps({
|
||||
criteria: Array
|
||||
})
|
||||
|
||||
const trackTypes = trackType(false)
|
||||
|
||||
const smartBlockStore = useSmartBlockStore()
|
||||
const getSmartBlockCriteriaField = (criteria_name: string) => {
|
||||
if ((smartBlockStore.currentSmartBlock.criteria.length > 0 &&
|
||||
smartBlockStore.currentSmartBlock.id > 0) ||
|
||||
(smartBlockStore.currentSmartBlock.criteria.length > 0 &&
|
||||
['repeat_tracks', 'overflow_tracks', 'limit', 'sort'].includes(criteria_name))) {
|
||||
return smartBlockStore.currentSmartBlock.criteria.find(el => el.criteria === criteria_name);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
const repeat_tracks = computed({
|
||||
get() {
|
||||
let currentRepeatTracks = getSmartBlockCriteriaField('repeat_tracks');
|
||||
if (!currentRepeatTracks) {
|
||||
currentRepeatTracks = baseSmartBlockCriteria();
|
||||
currentRepeatTracks.criteria = 'repeat_tracks';
|
||||
currentRepeatTracks.value = false;
|
||||
currentRepeatTracks.block_id = smartBlockStore.currentSmartBlock.id;
|
||||
smartBlockStore.updateSmartBlockCriteriaField({key: 'repeat_tracks',value: currentRepeatTracks});
|
||||
}
|
||||
return !!currentRepeatTracks.value;
|
||||
},
|
||||
set(value) {
|
||||
let currentRepeatTracks = getSmartBlockCriteriaField('repeat_tracks')
|
||||
// if (!currentRepeatTracks) {
|
||||
// currentRepeatTracks = baseSmartBlockCriteria();
|
||||
// currentRepeatTracks.criteria = 'repeat_tracks';
|
||||
// currentRepeatTracks.block_id = smartBlockStore.currentSmartBlock.id;
|
||||
// }
|
||||
console.log(value, currentRepeatTracks)
|
||||
currentRepeatTracks.value = + value;
|
||||
smartBlockStore.updateSmartBlockCriteriaField({key: 'repeat_tracks',value: currentRepeatTracks});
|
||||
}
|
||||
})
|
||||
|
||||
const overflow_tracks = computed({
|
||||
get() {
|
||||
let currentOverflowTracks = getSmartBlockCriteriaField('overflow_tracks');
|
||||
if (!currentOverflowTracks) {
|
||||
currentOverflowTracks = baseSmartBlockCriteria();
|
||||
currentOverflowTracks.criteria = 'overflow_tracks';
|
||||
currentOverflowTracks.value = false;
|
||||
currentOverflowTracks.block_id = smartBlockStore.currentSmartBlock.id;
|
||||
smartBlockStore.updateSmartBlockCriteriaField({key: 'overflow_tracks', value: currentOverflowTracks});
|
||||
}
|
||||
return !!currentOverflowTracks.value;
|
||||
},
|
||||
set(value) {
|
||||
let currentOverflowTracks = getSmartBlockCriteriaField('overflow_tracks')
|
||||
// if (!currentOverflowTracks) {
|
||||
// currentOverflowTracks = baseSmartBlockCriteria();
|
||||
// currentOverflowTracks.criteria = 'overflow_tracks';
|
||||
// currentOverflowTracks.block_id = smartBlockStore.currentSmartBlock.id;
|
||||
// }
|
||||
currentOverflowTracks.value = + value;
|
||||
smartBlockStore.updateSmartBlockCriteriaField({key: 'overflow_tracks', value: currentOverflowTracks});
|
||||
}
|
||||
})
|
||||
|
||||
const limit = computed({
|
||||
get() {
|
||||
let currentLimit = getSmartBlockCriteriaField('limit')
|
||||
if (!currentLimit) {
|
||||
currentLimit = baseSmartBlockCriteria();
|
||||
currentLimit.criteria = 'limit';
|
||||
currentLimit.modifier = '';
|
||||
currentLimit.value = '';
|
||||
currentLimit.block_id = smartBlockStore.currentSmartBlock.id;
|
||||
smartBlockStore.updateSmartBlockCriteriaField({key: 'limit', value: currentLimit})
|
||||
}
|
||||
return {
|
||||
type: currentLimit.modifier,
|
||||
quantity: currentLimit.value
|
||||
}
|
||||
},
|
||||
set(value) {
|
||||
let currentLimit = getSmartBlockCriteriaField('limit')
|
||||
// if (!currentLimit) {
|
||||
// currentLimit = baseSmartBlockCriteria();
|
||||
// currentLimit.criteria = 'limit';
|
||||
// currentLimit.block_id = smartBlockStore.currentSmartBlock.id;
|
||||
// }
|
||||
currentLimit.modifier = value.type;
|
||||
currentLimit.value = value.quantity
|
||||
smartBlockStore.updateSmartBlockCriteriaField({key: 'limit', value: currentLimit})
|
||||
}
|
||||
})
|
||||
|
||||
const sort = computed({
|
||||
get() {
|
||||
let currentSort = getSmartBlockCriteriaField('sort');
|
||||
if (!currentSort) {
|
||||
currentSort = baseSmartBlockCriteria();
|
||||
currentSort.criteria = 'sort';
|
||||
currentSort.value = 'random';
|
||||
currentSort.block_id = smartBlockStore.currentSmartBlock.id;
|
||||
smartBlockStore.updateSmartBlockCriteriaField({key: 'sort', value: currentSort});
|
||||
}
|
||||
return currentSort.value;
|
||||
},
|
||||
set(value) {
|
||||
let currentSort = getSmartBlockCriteriaField('sort')
|
||||
// if (!currentSort) {
|
||||
// currentSort = baseSmartBlockCriteria();
|
||||
// currentSort.criteria = 'sort';
|
||||
// currentSort.block_id = smartBlockStore.currentSmartBlock.id;
|
||||
// }
|
||||
currentSort.value = value;
|
||||
smartBlockStore.updateSmartBlockCriteriaField({key: 'sort', value: currentSort});
|
||||
}
|
||||
})
|
||||
|
||||
const updateLimit = (value: object) => {
|
||||
console.log(value)
|
||||
limit.value = value
|
||||
console.log(limit.value)
|
||||
}
|
||||
|
||||
const activeCriteria = ref([])
|
||||
|
||||
const addCriteria = () => {
|
||||
console.log(activeCriteria.value)
|
||||
activeCriteria.value.push(baseSmartBlockCriteria())
|
||||
activeCriteria.value[activeCriteria.value.length - 1].criteriagroup = activeCriteria.value.length - 1;
|
||||
}
|
||||
|
||||
const updateCriteria = (options) => {
|
||||
console.log(options)
|
||||
activeCriteria.value[options.index][options.key] = options.value;
|
||||
let currentCriteria = activeCriteria.value[options.index];
|
||||
smartBlockStore.updateSmartBlockCriteriaField({index: options.index, key: options.key, value: currentCriteria});
|
||||
}
|
||||
|
||||
const removeCriteria = (index) => {
|
||||
console.log(activeCriteria.value[index])
|
||||
delete activeCriteria.value[index];
|
||||
smartBlockStore.currentSmartBlock.criteria = smartBlockStore.currentSmartBlock.criteria.filter((criteria) => criteria !== activeCriteria.value[index]);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
activeCriteria.value = smartBlockStore.currentSmartBlock.criteria.filter((criteria) => {
|
||||
if (criteria.criteria !== 'sort' &&
|
||||
criteria.criteria !== 'limit' &&
|
||||
criteria.criteria !== 'repeat_tracks' &&
|
||||
criteria.criteria !== 'overflow_tracks') {
|
||||
return criteria;
|
||||
}
|
||||
})
|
||||
if (activeCriteria.value.length === 0) {
|
||||
activeCriteria.value.push(baseSmartBlockCriteria())
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label for="criteria" class="v-label">Criteri di popolamento</label>
|
||||
<fieldset id="criteria" class="smartblock-criteria">
|
||||
<SmartBlockCriteriaFieldRow
|
||||
v-for="(current, index) in activeCriteria"
|
||||
:criteria="current"
|
||||
:index="index"
|
||||
@update-criteria="updateCriteria"
|
||||
@remove-criteria="removeCriteria"
|
||||
></SmartBlockCriteriaFieldRow>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
@click="addCriteria"
|
||||
>Aggiungi un nuovo criterio</v-btn>
|
||||
</fieldset>
|
||||
<fieldset id="additional-criteria">
|
||||
<v-checkbox-btn
|
||||
label="Permetti la ripetizione delle tracce"
|
||||
v-model="repeat_tracks"
|
||||
></v-checkbox-btn>
|
||||
<v-checkbox-btn
|
||||
label="Permetti all'ultima traccia di andare oltre il limite"
|
||||
v-model="overflow_tracks"
|
||||
></v-checkbox-btn>
|
||||
<SmartBlockLimit
|
||||
:limit="limit"
|
||||
@update-property="updateLimit"
|
||||
></SmartBlockLimit>
|
||||
<v-select
|
||||
label="Ordina per"
|
||||
:items="smartBlockCriteriaSortList"
|
||||
v-model="sort"
|
||||
></v-select>
|
||||
</fieldset>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
genericSmartBlockCriteriaList,
|
||||
genericSmartBlockCriteriaModifiersList
|
||||
} from "@models/smartblock/smartblockCriteria.ts";
|
||||
import {computed, reactive, watch} from "vue";
|
||||
import {trackType} from "@/composables/content/track_type.ts";
|
||||
|
||||
const trackTypes = trackType(false)
|
||||
|
||||
const emit = defineEmits(['updateCriteria', 'removeCriteria']);
|
||||
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
criteria: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
});
|
||||
|
||||
const criteria = computed({
|
||||
get() {
|
||||
return props.criteria?.criteria;
|
||||
},
|
||||
set(value) {
|
||||
console.log(value)
|
||||
emit('updateCriteria', {key: 'criteria', value: value, index: props.index});
|
||||
}
|
||||
})
|
||||
|
||||
const modifier = computed({
|
||||
get() {
|
||||
return props.criteria?.modifier;
|
||||
},
|
||||
set(value) {
|
||||
emit('updateCriteria', {key: 'modifier', value: value, index: props.index});
|
||||
}
|
||||
})
|
||||
|
||||
const value = computed({
|
||||
get() {
|
||||
return props.criteria?.value;
|
||||
},
|
||||
set(value) {
|
||||
emit('updateCriteria', {key: 'value', value: value, index: props.index});
|
||||
}
|
||||
})
|
||||
|
||||
const extra = computed({
|
||||
get() {
|
||||
return props.criteria?.extra;
|
||||
},
|
||||
set(value) {
|
||||
emit('updateCriteria', {key: 'extra', value: value, index: props.index});
|
||||
}
|
||||
})
|
||||
|
||||
const remove = () => {
|
||||
emit('removeCriteria', props.index);
|
||||
}
|
||||
|
||||
// watch(modifier, (newVal, oldVal) => {
|
||||
// if (newVal !== 'is in the range') {
|
||||
// emit('updateCriteria', {key: 'extra', value: null, index: props.index});
|
||||
// }
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-if="index > 0"
|
||||
cols="12"
|
||||
class="text-center"
|
||||
>E</v-col>
|
||||
<v-col>
|
||||
<v-select
|
||||
v-model="criteria"
|
||||
label="Seleziona il criterio"
|
||||
:items="genericSmartBlockCriteriaList"
|
||||
item-title="title"
|
||||
item-value="value"
|
||||
></v-select>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-select
|
||||
v-model="modifier"
|
||||
label="Seleziona il modificatore"
|
||||
:items="genericSmartBlockCriteriaModifiersList
|
||||
.filter(mod => mod.type === genericSmartBlockCriteriaList
|
||||
.find(cri => cri.value === criteria)?.type || mod.type === 'all')"
|
||||
item-title="title"
|
||||
item-value="value"
|
||||
></v-select>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-if="criteria != 'track_type_id'"
|
||||
:label="modifier === 'is in the range' ? 'Valore iniziale' : 'Valore scelto'"
|
||||
v-model="value"
|
||||
:type="genericSmartBlockCriteriaList.find(cri => cri.value === criteria)?.type === 'number' ? 'number' : 'text'"
|
||||
></v-text-field>
|
||||
<v-select
|
||||
v-else
|
||||
:items="trackTypes.trackTypes.value"
|
||||
v-model="value"
|
||||
item-title="type_name"
|
||||
item-value="id"
|
||||
></v-select>
|
||||
<v-text-field
|
||||
v-if="modifier !== '' && modifier === 'is in the range'"
|
||||
label="Valore finale"
|
||||
type="number"
|
||||
v-model="extra"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col
|
||||
v-if="index > 0"
|
||||
cols="1"
|
||||
>
|
||||
<v-icon
|
||||
@click="remove"
|
||||
>mdi-close</v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
import {reactive, ref} from "vue";
|
||||
import axios from "axios";
|
||||
import {timeFormatter} from "@/helpers/TimeFormatter.ts";
|
||||
import {deleteSmartBlock, getSmartBlock, SmartBlockTableHeader} from "@models/smartblock/smartblock.ts";
|
||||
import {showTableHeader} from "@models/show/show.ts";
|
||||
import {useAuthStore} from "@/stores/auth.store.ts";
|
||||
|
||||
export function blocks_page() {
|
||||
const items = ref([])
|
||||
|
|
@ -14,31 +18,31 @@ export function blocks_page() {
|
|||
'page': 1,
|
||||
})
|
||||
|
||||
const headers = [
|
||||
{title: 'Nome', value: 'name'},
|
||||
{title: 'Creato da', value: 'creator.login'},
|
||||
{title: 'Durata', value: 'length'},
|
||||
{title: 'Ultima modifica', value: 'utime'},
|
||||
{title: 'Azioni', value: 'actions'}
|
||||
];
|
||||
const auth = useAuthStore();
|
||||
const timezone = auth.userData.timezone;
|
||||
|
||||
const getItems = async (page_info) => {
|
||||
const headers = SmartBlockTableHeader;
|
||||
|
||||
const getItems = async (options) => {
|
||||
loading.value = true;
|
||||
return await axios.get(`/smartblock`, {
|
||||
params: {
|
||||
page: page_info.page,
|
||||
per_page: page_info.itemsPerPage,
|
||||
return getSmartBlock({
|
||||
page: options.page,
|
||||
per_page: options.itemsPerPage,
|
||||
all: search.value
|
||||
}
|
||||
}).then((response) => {
|
||||
console.log(response)
|
||||
listData.itemsPerPage = response.data.per_page;
|
||||
listData.first_page = response.data.from;
|
||||
listData.last_page = response.data.last_page;
|
||||
listData.page = response.data.current_page;
|
||||
listData.total_items = response.data.total;
|
||||
}).then((smartblockList) => {
|
||||
console.log(smartblockList)
|
||||
listData.itemsPerPage = smartblockList.per_page;
|
||||
listData.first_page = smartblockList.from;
|
||||
listData.last_page = smartblockList.last_page;
|
||||
listData.page = smartblockList.current_page;
|
||||
listData.total_items = smartblockList.total;
|
||||
|
||||
items.value = response.data.data
|
||||
items.value = smartblockList.data.map(el => {
|
||||
el.visible_length = timeFormatter(el.length);
|
||||
const timezone = auth.userData.timezone;
|
||||
el.utime = new Date(el.utime).toLocaleString("it-IT", {timeZone: timezone});
|
||||
return el;
|
||||
});
|
||||
loading.value = false;
|
||||
|
||||
}).catch((error) => {
|
||||
|
|
@ -46,18 +50,31 @@ export function blocks_page() {
|
|||
})
|
||||
}
|
||||
|
||||
const editItem = (item) => {
|
||||
const editItem = async (item) => {
|
||||
loading.value = true;
|
||||
let url = '/smartblock'
|
||||
if (item.id > 0) {
|
||||
item['_method'] = 'PUT'
|
||||
url = `smartblock/${item.id}/`
|
||||
}
|
||||
|
||||
return axios.post(`file/${item.id}`, item
|
||||
console.log(url)
|
||||
|
||||
return await axios.post(
|
||||
url,
|
||||
item
|
||||
).then((response) => {
|
||||
console.log(response)
|
||||
loading.value = false
|
||||
return response.data
|
||||
}).catch((error) => {
|
||||
console.log("Error: "+error);
|
||||
})
|
||||
}
|
||||
|
||||
const deleteItem = (id) => {
|
||||
|
||||
return axios.post(`file/${id}`, {
|
||||
return axios.post(`smartblock/${id}`, {
|
||||
_method: 'DELETE'
|
||||
}).then((response) => {
|
||||
getItems(listData)
|
||||
|
|
@ -70,10 +87,12 @@ export function blocks_page() {
|
|||
if (item.id === 0) {
|
||||
params = item
|
||||
}
|
||||
return await axios.get(`/smartblock/${item.id}/tracks`, {
|
||||
params: params
|
||||
}).then((response) => {
|
||||
return response.data
|
||||
return await axios.post(
|
||||
`/smartblock/${item.id}/tracks`,
|
||||
item
|
||||
).then((response) => {
|
||||
console.log(response.data)
|
||||
return { files: response.data.list, length: response.data.length }
|
||||
}).catch((error) => {
|
||||
console.log("Error: "+error);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,7 +1,69 @@
|
|||
import {VCheckbox, VSelect, VTextarea, VTextField} from "vuetify/components";
|
||||
import RadioGroup from "@partials/fields/smartblock/RadioGroup.vue";
|
||||
import SmartBlockCriteria from "@partials/fields/smartblock/SmartBlockCriteria.vue";
|
||||
import SmartBlockLimit from "@partials/fields/smartblock/SmartBlockLimit.vue";
|
||||
import SmartBlockCriteriaFieldGroup from "@partials/fields/smartblock/SmartBlockCriteriaFieldGroup.vue";
|
||||
import type {SmartBlockContent} from "@models/smartblock/smartblockContent.ts";
|
||||
import type {SmartBlockCriteria} from "@models/smartblock/smartblockCriteria.ts";
|
||||
import {cleanOptions} from "@/helpers/AxiosHelper.ts";
|
||||
import axios, {type AxiosResponse} from "axios";
|
||||
|
||||
export interface SmartBlock {
|
||||
id?: number; // ID del blocco (opzionale)
|
||||
name: string; // Nome del blocco
|
||||
creator_id: number; // ID del creatore
|
||||
description?: string; // Descrizione del blocco (opzionale)
|
||||
length: number; // Lunghezza del blocco
|
||||
type: string; // Tipo del blocco
|
||||
contents?: SmartBlockContent[]; // Contenuti associati (opzionale)
|
||||
criteria?: SmartBlockCriteria[]; // Criteri associati (opzionale)
|
||||
tracks?: SmartBlockContent[];
|
||||
}
|
||||
|
||||
export const baseSmartBlock = (): SmartBlock => {
|
||||
return {
|
||||
id: 0,
|
||||
name: '',
|
||||
creator_id: 0,
|
||||
description: '',
|
||||
length: 0,
|
||||
type: 'dynamic',
|
||||
contents: null,
|
||||
criteria: [],
|
||||
tracks: [],
|
||||
}
|
||||
}
|
||||
|
||||
export const SmartBlockTableHeader = [
|
||||
{title: 'Nome', value: 'name'},
|
||||
{title: 'Creato da', value: 'creator.login'},
|
||||
{title: 'Durata', value: 'visible_length'},
|
||||
{title: 'Ultima modifica', value: 'utime'},
|
||||
{title: 'Azioni', value: 'actions'}
|
||||
];
|
||||
|
||||
export const getSmartBlock = async (options: {
|
||||
id?: number | null;
|
||||
page?: Number | null;
|
||||
per_page?: Number | null;
|
||||
all?: string | null;
|
||||
}): Promise<SmartBlock[]> => {
|
||||
const filteredParams = cleanOptions(options);
|
||||
return await axios.get(`/smartblock`, {params: filteredParams})
|
||||
.then((response: AxiosResponse) => {
|
||||
return response.data
|
||||
}).catch((error: Error) => {
|
||||
console.log("Error: " + error);
|
||||
})
|
||||
}
|
||||
|
||||
export const deleteSmartBlock = async (smartblockIds: Number[]) => {
|
||||
return axios.delete(`smartblock`, {
|
||||
data: {
|
||||
_method: 'DELETE',
|
||||
'smartblockIds': smartblockIds
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function smartblock(item) {
|
||||
const visibleFields = {
|
||||
|
|
@ -30,22 +92,6 @@ export function smartblock(item) {
|
|||
criteria: {
|
||||
title: 'Seleziona i criteri',
|
||||
required: true
|
||||
},
|
||||
limit: {
|
||||
title: 'Limite a',
|
||||
required: true
|
||||
},
|
||||
repeat_tracks: {
|
||||
title: 'Permetti al ripetizione delle tracce',
|
||||
required: false
|
||||
},
|
||||
overflow_tracks: {
|
||||
title: 'Permetti all\'ultima traccia di andare oltre il limite',
|
||||
required: false
|
||||
},
|
||||
sort: {
|
||||
title: 'Ordina per',
|
||||
required: true
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,40 +117,41 @@ export function smartblock(item) {
|
|||
fields[key].radioButtons = visibleFields[key].radioButtons
|
||||
break
|
||||
case 'criteria':
|
||||
fields[key].component = SmartBlockCriteria
|
||||
break
|
||||
case 'limit':
|
||||
fields[key].component = SmartBlockLimit
|
||||
break
|
||||
case 'repeat_tracks':
|
||||
case 'overflow_tracks':
|
||||
fields[key].component = VCheckbox
|
||||
break
|
||||
case 'sort':
|
||||
fields[key].component = VSelect
|
||||
fields[key].items = [
|
||||
{
|
||||
title: 'Random',
|
||||
value: 'random'
|
||||
},
|
||||
{
|
||||
title: 'Dal più recente',
|
||||
value: 'newest'
|
||||
},
|
||||
{
|
||||
title: 'Dal meno recente',
|
||||
value: 'oldest'
|
||||
},
|
||||
{
|
||||
title: 'Più recentemente andate in onda',
|
||||
value: 'mostrecentplay'
|
||||
},
|
||||
{
|
||||
title: 'Meno recentemente andate in onda',
|
||||
value: 'leastrecentplay'
|
||||
}
|
||||
]
|
||||
fields[key].component = SmartBlockCriteriaFieldGroup
|
||||
break
|
||||
// case 'limit':
|
||||
// fields[key].component = SmartBlockLimit
|
||||
// break
|
||||
// case 'repeat_tracks':
|
||||
// case 'overflow_tracks':
|
||||
// fields[key].component = VCheckbox
|
||||
// fields[key].type = 'checkbox'
|
||||
// break
|
||||
// case 'sort':
|
||||
// fields[key].component = VSelect
|
||||
// fields[key].items = [
|
||||
// {
|
||||
// title: 'Random',
|
||||
// value: 'random'
|
||||
// },
|
||||
// {
|
||||
// title: 'Dal più recente',
|
||||
// value: 'newest'
|
||||
// },
|
||||
// {
|
||||
// title: 'Dal meno recente',
|
||||
// value: 'oldest'
|
||||
// },
|
||||
// {
|
||||
// title: 'Più recentemente andate in onda',
|
||||
// value: 'mostrecentplay'
|
||||
// },
|
||||
// {
|
||||
// title: 'Meno recentemente andate in onda',
|
||||
// value: 'leastrecentplay'
|
||||
// }
|
||||
// ]
|
||||
// break
|
||||
}
|
||||
})
|
||||
// console.log(fields)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
export interface SmartBlockContent {
|
||||
block_id: number; // ID del blocco associato
|
||||
file_id: number; // ID del file associato
|
||||
position: number; // Posizione del contenuto
|
||||
trackoffset: number; // Offset della traccia
|
||||
cliplength: number; // Lunghezza del clip
|
||||
cuein: number; // Punto di inizio del cue
|
||||
cueout: number; // Punto di fine del cue
|
||||
fadein: number; // Durata del fade-in
|
||||
fadeout: number; // Durata del fade-out
|
||||
}
|
||||
|
|
@ -1,3 +1,129 @@
|
|||
|
||||
export interface SmartBlockCriteria {
|
||||
criteria: string;
|
||||
modifier: string;
|
||||
value: string | number; // Può essere stringa o numero, a seconda del valore
|
||||
extra?: string; // Opzionale, se presente
|
||||
criteriagroup?: number;
|
||||
block_id?: number; // Identificatore del blocco associato
|
||||
}
|
||||
|
||||
export const baseSmartBlockCriteria = (): SmartBlockCriteria => {
|
||||
return {
|
||||
criteria: '',
|
||||
modifier: '',
|
||||
value: '',
|
||||
extra: '',
|
||||
criteriagroup: null,
|
||||
block_id: 0
|
||||
}
|
||||
}
|
||||
|
||||
export const genericSmartBlockCriteriaList = [
|
||||
{
|
||||
type: 'string',
|
||||
title: 'Nome dell\'Album',
|
||||
value: 'album_title'
|
||||
},
|
||||
{
|
||||
type: 'string',
|
||||
title: 'Nome dell\'Artista',
|
||||
value: 'artist_name'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
title: 'Bit Rate (kbps)',
|
||||
value: 'bit_rate'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
title: 'BPM',
|
||||
value: 'bpm'
|
||||
},
|
||||
{
|
||||
type: 'string',
|
||||
title: 'Genere',
|
||||
value: 'genre'
|
||||
},
|
||||
{
|
||||
type: 'TrackType',
|
||||
title: 'Tipo di traccia',
|
||||
value: 'track_type_id'
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
export const genericSmartBlockCriteriaModifiersList = [
|
||||
{
|
||||
value: 'contains',
|
||||
title: 'contiene',
|
||||
type: 'string'
|
||||
},
|
||||
{
|
||||
value: 'does not contain',
|
||||
title: 'non contiene',
|
||||
type: 'string'
|
||||
},
|
||||
{
|
||||
value: 'starts with',
|
||||
title: 'comincia con',
|
||||
type: 'string'
|
||||
},
|
||||
{
|
||||
value: 'ends with',
|
||||
title: 'finisce con',
|
||||
type: 'string'
|
||||
},
|
||||
{
|
||||
value: 'is greater than',
|
||||
title: 'è maggiore di',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
value: 'is less than',
|
||||
title: 'è minore di',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
value: 'is in the range',
|
||||
title: 'è tra',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
value: 'is',
|
||||
title: 'è uguale a',
|
||||
type: 'all'
|
||||
},
|
||||
{
|
||||
value: 'is not',
|
||||
title: 'è diverso da',
|
||||
type: 'all'
|
||||
},
|
||||
]
|
||||
|
||||
export const smartBlockCriteriaSortList = [
|
||||
{
|
||||
title: 'Random',
|
||||
value: 'random'
|
||||
},
|
||||
{
|
||||
title: 'Dal più recente',
|
||||
value: 'newest'
|
||||
},
|
||||
{
|
||||
title: 'Dal meno recente',
|
||||
value: 'oldest'
|
||||
},
|
||||
{
|
||||
title: 'Più recentemente andate in onda',
|
||||
value: 'mostrecentplay'
|
||||
},
|
||||
{
|
||||
title: 'Meno recentemente andate in onda',
|
||||
value: 'leastrecentplay'
|
||||
}
|
||||
]
|
||||
|
||||
export function smartblockCriteria() {
|
||||
const criteria = [ {
|
||||
type: 'string',
|
||||
|
|
@ -39,7 +165,7 @@ export function smartblockCriteria() {
|
|||
type: 'string'
|
||||
},
|
||||
{
|
||||
value: 'does not contains',
|
||||
value: 'does not contain',
|
||||
title: 'non contiene',
|
||||
type: 'string'
|
||||
},
|
||||
|
|
|
|||
39
resources/js/stores/smartblock.store.ts
Normal file
39
resources/js/stores/smartblock.store.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import type {SmartBlock} from "@models/smartblock/smartblock.ts";
|
||||
import type {SmartBlockCriteria} from "@models/smartblock/smartblockCriteria.ts";
|
||||
import type {SmartBlockContent} from "@models/smartblock/smartblockContent.ts";
|
||||
|
||||
export const useSmartBlockStore = defineStore('smartblock', {
|
||||
state: () => ({
|
||||
currentSmartBlock: {} as SmartBlock,
|
||||
}),
|
||||
actions: {
|
||||
async loadSmartBlock(smartblockData: SmartBlock) {
|
||||
this.currentSmartBlock = { ...smartblockData }
|
||||
this.currentSmartBlockCriteria = smartblockData.criteria
|
||||
},
|
||||
resetShowDays() {
|
||||
this.currentSmartBlock.showDays = { ...this.baseShowDays };
|
||||
},
|
||||
saveSmartBlock() {
|
||||
// Implement API call to save this.currentSmartBlock
|
||||
},
|
||||
updateField(payload: { key: string; value: any }) {
|
||||
this.currentSmartBlock[payload.key] = payload.value
|
||||
},
|
||||
updateSmartBlockCriteriaField(payload: { key: string; value: any }) {
|
||||
console.log(payload)
|
||||
const index = this.currentSmartBlock.criteria.findIndex(el => {
|
||||
return el.criteria === payload.value.criteria && el.criteriagroup === payload.value.criteriagroup
|
||||
})
|
||||
if (index === -1) {
|
||||
this.currentSmartBlock.criteria.push(payload.value)
|
||||
} else {
|
||||
this.currentSmartBlock.criteria[index] = payload.value;
|
||||
}
|
||||
},
|
||||
updateSmartBlockContentField(payload: { key: string; value: any }) {
|
||||
this.currentSmartBlock.currentSmartBlockContent[payload.key] = payload.value;
|
||||
},
|
||||
}
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue