66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
|
<form>
|
|
<div class="grid grid-cols-3 gap-x-40 gap-y-8 mb-8">
|
|
<UiNumberInput
|
|
:key="localWeight.type"
|
|
:label="'POIDS'"
|
|
labelClass="font-bold uppercase text-xl "
|
|
v-model="localWeight.weight"
|
|
:disabled="!isAdmin"
|
|
:min="0"
|
|
wrapper-class="flex-col"
|
|
required
|
|
/>
|
|
|
|
<UiDateInput
|
|
label="Date de pesée"
|
|
v-model="localWeight.weighedAt"
|
|
:disabled="!isAdmin"
|
|
required
|
|
/>
|
|
|
|
<UiNumberInput
|
|
label="Dsd"
|
|
class="col-start-2"
|
|
labelClass="font-bold uppercase"
|
|
v-model="localWeight.dsd"
|
|
:disabled="!isAdmin"
|
|
wrapper-class="flex-col"
|
|
required
|
|
/>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type {WeightEntryData} from '~/services/dto/weight-data'
|
|
import {reactive, watch} from "vue";
|
|
|
|
const props = defineProps<{
|
|
modelValue: WeightEntryData
|
|
isAdmin: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:modelValue', value: WeightEntryData): void
|
|
}>()
|
|
|
|
const localWeight = reactive<WeightEntryData>({...props.modelValue})
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(value) => {
|
|
Object.assign(localWeight, value)
|
|
},
|
|
{deep: true}
|
|
)
|
|
|
|
watch(
|
|
localWeight,
|
|
(value) => {
|
|
emit('update:modelValue', {...value})
|
|
},
|
|
{deep: true}
|
|
)
|
|
</script>
|