Matthieu
f2d945b0c3
Hold contact/address block edits in memory and persist them via explicit saveContacts/saveAddresses on click (with saving guards), matching the task forms. Keep immediate deletion. Minor restyle of blocks and action buttons.
70 lines
2.3 KiB
Vue
70 lines
2.3 KiB
Vue
<template>
|
|
<div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]">
|
|
<h3 class="col-span-2 text-sm font-semibold text-neutral-700">
|
|
{{ title }}
|
|
</h3>
|
|
<MalioButtonIcon
|
|
v-if="removable && !readonly"
|
|
icon="mdi:delete-outline"
|
|
variant="ghost"
|
|
class="absolute right-3 top-3"
|
|
:aria-label="$t('common.delete')"
|
|
@click="$emit('remove')"
|
|
/>
|
|
|
|
<MalioInputText
|
|
class="col-span-2"
|
|
:label="$t('directory.addresses.fields.label')"
|
|
:model-value="modelValue.label ?? ''"
|
|
:readonly="readonly"
|
|
@update:model-value="update('label', $event)"
|
|
/>
|
|
<MalioInputText
|
|
class="col-span-2"
|
|
:label="$t('directory.addresses.fields.street')"
|
|
:model-value="modelValue.street ?? ''"
|
|
:readonly="readonly"
|
|
@update:model-value="update('street', $event)"
|
|
/>
|
|
<MalioInputText
|
|
class="col-span-2"
|
|
:label="$t('directory.addresses.fields.streetComplement')"
|
|
:model-value="modelValue.streetComplement ?? ''"
|
|
:readonly="readonly"
|
|
@update:model-value="update('streetComplement', $event)"
|
|
/>
|
|
<MalioInputText
|
|
:label="$t('directory.addresses.fields.postalCode')"
|
|
:model-value="modelValue.postalCode ?? ''"
|
|
:readonly="readonly"
|
|
@update:model-value="update('postalCode', $event)"
|
|
/>
|
|
<MalioInputText
|
|
:label="$t('directory.addresses.fields.city')"
|
|
:model-value="modelValue.city ?? ''"
|
|
:readonly="readonly"
|
|
@update:model-value="update('city', $event)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Address } from '~/modules/directory/services/dto/address'
|
|
|
|
const props = defineProps<{
|
|
modelValue: Address
|
|
title: string
|
|
removable?: boolean
|
|
readonly?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: Address]
|
|
'remove': []
|
|
}>()
|
|
|
|
function update(field: keyof Address, value: string): void {
|
|
emit('update:modelValue', { ...props.modelValue, [field]: value === '' ? null : value })
|
|
}
|
|
</script>
|