sintonia_webapp/resources/js/components/content/partials/fields/smartblock/SmartBlockCriteria.vue

94 lines
No EOL
2.5 KiB
Vue

<script setup lang="ts">
import {smartblockCriteria} from "@models/smartblock/smartblockCriteria.ts";
import {ref, watch} from "vue";
import {trackType} from "@/composables/content/track_type.ts";
const emit = defineEmits(['updateProperty'])
const { criteria, modifiers } = smartblockCriteria()
const trackTypes = trackType(false)
console.log(trackTypes)
const activeCriteria = ref([])
const firstCriteria = activeCriteria.value.push({
criteria: '',
modifier: '',
value: ''
})
watch(activeCriteria.value, (newVal, oldVal) => {
console.log(newVal)
emit('updateProperty', newVal, 'criteria')
})
const addCriteria = () => {
activeCriteria.value.push({
criteria: '',
modifier: '',
value: ''
})
}
</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')"
item-title="title"
item-value="value"
></v-select>
</v-col>
<v-col>
<v-text-field
v-if="activeCriteria[index].criteria != 'track_type_id'"
label="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-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>