ldc-jeusselin/resources/ts/fo/components/ObjectivesComponent.vue

<template>
    <div class="pro--objectifs">
        <div class="objectifs--form">
            <h2 class="post-title">Fixer un objectif de prix</h2>

            <transition name="fade">
                <div class="alert alert-success" v-show="processing">
                    {{ response }}
                </div>
            </transition>

            <transition name="fade">
                <div class="alert alert-success" v-show="success">
                    {{ response }}
                </div>
            </transition>

            <transition name="fade">
                <div class="alert alert-danger" v-show="errors && errors.length">
                    {{ response }}
                    <ul>
                        <li v-for="(error, i) in errors" :key="i">{{ error }}</li>
                    </ul>
                </div>
            </transition>

            <form>
    <div class="flex row">
        <select name="produit" id="produit" v-model="objectif.produit" @change="populate">
            <option value="--">Selectionner un produit*</option>
            <option v-for="produit in enums.produit" :key="produit.value" :value="produit.value">
                {{ produit.value }}
            </option>
        </select>

        <select name="qualite" v-model="objectif.qualite">
            <option value="--">Qualité*</option>
            <option v-for="qualite in qualiteEnums" :key="qualite.value" :value="qualite.value">
                {{ qualite.value }}
            </option>
        </select>
    </div>

    <div class="flex row">
        <select name="campagne" v-model="objectif.campagne" @change="populate">
            <option value="--">Campagne*</option>
            <option v-for="campagne in campagneEnums" :key="campagne.value" :value="campagne.value">
                {{ campagne.value }}
            </option>
        </select>

        <select name="echeance" v-model="objectif.echeance">
            <option value="--">Échéance*</option>
            <option v-for="echeance in echeanceEnums" :key="echeance.value" :value="echeance.value">
                {{ echeance.value }}
            </option>
        </select>
    </div>

    <div class="flex row">
        <input type="number" name="quantite" v-model.number="objectif.quantite" min="0" placeholder="Quantité*">
        <input type="number" name="prix" v-model.number="objectif.prix" min="0" step="0.01" placeholder="Prix (€)*">
    </div>

    <div class="validate">
        <button class="first-btn" @click.prevent="saveData" :disabled="processing">
            Enregistrer l'objectif
        </button>
    </div>
</form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import axios from "axios"

const props = defineProps<{ json: string }>()

const initial = JSON.parse(props.json)

initial.dbobjectif.quantite = null

const objectif = ref<any>(structuredClone(initial.dbobjectif))
const myobjectives = ref<any[]>(initial.dbmyObjectives)
const enums = ref<any>(initial.formEnums)
const qualiteEnums = ref<any[]>([])
const campagneEnums = ref<any[]>([])
const echeanceEnums = ref<any[]>([])

const processing = ref(false)
const success = ref(false)
const errors = ref<string[]>([])
const response = ref("")


function populate(event: Event) {
    const target = event.target as HTMLSelectElement

    switch (target.name) {
        case "produit":
            qualiteEnums.value = enums.value.qualite[target.value] || []
            if (qualiteEnums.value.length) {
                objectif.value.qualite = qualiteEnums.value[0].value
            }
            campagneEnums.value = enums.value.campagne[target.value] || []
            break

        case "campagne":
            const selectProduit = objectif.value.produit
            echeanceEnums.value =
                enums.value.echeance?.[selectProduit]?.[target.value] || []
            break
    }
}

function checkForm(): boolean {
    errors.value = []

    if (objectif.value.produit === "--")
        errors.value.push("Veuillez choisir un produit")

    if (objectif.value.qualite === "--")
        errors.value.push("Veuillez choisir une qualité")

    if (objectif.value.campagne === "--")
        errors.value.push("Veuillez choisir une campagne")

    if (!objectif.value.quantite)
        errors.value.push("Veuillez indiquer une quantite")

    if (!objectif.value.prix)
        errors.value.push("Veuillez indiquer un prix")

    if (objectif.value.echeance === "--")
        errors.value.push("Veuillez choisir une echéance")

    if (!errors.value.length) return true

    response.value = "Veuillez corriger les erreurs suivantes :"
    return false
}

function removeItem(index: number) {
    if (!confirm("Êtes-vous sûr(e) ?")) return

    const item = myobjectives.value[index]

    if (item.id !== null) {
        processing.value = true
        response.value = "Suppression en cours..."

        axios
            .post("/pro/ajax/delete-objectif", { id: item.id })
            .then((res) => {
                const result = res.data

                if (result === 0 || result === 2) {
                    myobjectives.value.splice(index, 1)
                    response.value = "Suppression terminée !"
                } else {
                    response.value = "Erreur : Suppression impossible"
                }

                processing.value = false
            })
            .catch(() => {
                response.value = "Erreur lors de la suppression."
                processing.value = false
            })
    } else {
        myobjectives.value.splice(index, 1)
    }
}

function saveData() {
    if (!checkForm()) return

    processing.value = true
    success.value = false
    errors.value = []
    response.value = "En cours de sauvegarde..."

    axios
        .post("/pro/ajax/save-objectif", {
            objectif: objectif.value,
        })
        .then((res) => {
            success.value = true
            response.value = "Sauvegarde terminée !"
            myobjectives.value.push(res.data)
            objectif.value = structuredClone(initial.dbobjectif)
            qualiteEnums.value = []
            campagneEnums.value = []
            echeanceEnums.value = []
            setTimeout(() => (success.value = false), 3000)
        })
        .catch(() => {
            errors.value.push("Erreur lors de la sauvegarde.")
        })
        .finally(() => {
            processing.value = false
        })
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>