budget-go/frontend/js/views/saving_account/EditView.vue

116 lines
2.3 KiB
Vue

<template>
<div
v-if="data === null"
class="text-center p-5"
>
<p>Chargement...</p>
<BSpinner />
</div>
<BContainer
v-else
fluid
class="p-0"
>
<CrudHeader :title="data.label">
<template #menu>
<div>
<BButton
variant="secondary"
@click="doBack"
>Retour</BButton
>
<BButton
variant="primary"
@click="doSave"
>Enregistrer</BButton
>
<BButton
variant="danger"
@click="doDelete"
>Supprimer</BButton
>
</div>
</template>
<template #bottom> </template>
</CrudHeader>
<BForm
v-if="form !== null"
@submit="doSave"
class="p-3"
>
<BAlert
v-if="form?.error"
dismissible
variant="warning"
:model-value="true"
>
<div v-html="form.error"></div>
</BAlert>
<BRow>
<BCol>
<FormView :form="form" />
</BCol>
</BRow>
</BForm>
</BContainer>
</template>
<script setup>
import { BContainer, BButton, BForm, BRow, BCol, BAlert } from 'bootstrap-vue-next'
import CrudHeader from './../../components/crud/CrudHeader.vue'
import FormView from './../../components/crud/FormView.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { update, remove, getOne, createForm } from '../../models/saving_account'
import { requestErrorBuilder } from '../../lib/request'
const route = useRoute()
const router = useRouter()
const data = ref(null)
const form = ref(null)
const id = route.params.id
const loadData = () => {
getOne(
{
id__eq: id,
},
(value) => {
data.value = value
form.value = createForm(value)
},
)
}
const doDelete = () => {
if (!confirm('Je confirme la suppression')) {
return
}
remove(id, doBack, doBack)
}
const doSave = () => {
update(
form.value.data,
(data) => {
if (data.code === 400) {
form.value.error = requestErrorBuilder(data)
} else {
doBack()
}
},
(err) => {
form.value.error = `Une erreur s'est produite : ${err}`
},
)
}
const doBack = () => {
router.replace({ name: 'saving_accounts' })
}
onMounted(loadData)
</script>