mirror of https://github.com/wg-easy/wg-easy
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.7 KiB
62 lines
1.7 KiB
<!-- EditableAddress.vue -->
|
|
<template>
|
|
<span class="group block md:inline-block pb-1 md:pb-0">
|
|
<!-- Show -->
|
|
<input
|
|
v-show="editAddressId === client.id"
|
|
v-model="editAddress"
|
|
@keyup.enter="updateAddress"
|
|
@keyup.escape="cancelEdit"
|
|
:test="'client-' + client.id + '-address'"
|
|
:ref="'client-' + client.id + '-address'"
|
|
class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500"
|
|
/>
|
|
<span
|
|
v-show="editAddressId !== client.id"
|
|
class="inline-block border-t-2 border-b-2 border-transparent"
|
|
>{{ client.address }}</span
|
|
>
|
|
|
|
<!-- Edit -->
|
|
<span
|
|
v-show="editAddressId !== client.id"
|
|
@click="edit"
|
|
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
|
|
>
|
|
<IconEdit />
|
|
</span>
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
import IconEdit from './icons/IconEdit.vue';
|
|
|
|
export default {
|
|
props: ['client'],
|
|
data() {
|
|
return {
|
|
editAddress: null,
|
|
editAddressId: null,
|
|
};
|
|
},
|
|
methods: {
|
|
updateAddress() {
|
|
this.$emit('update-address', this.client, this.editAddress);
|
|
this.editAddress = null;
|
|
this.editAddressId = null;
|
|
},
|
|
cancelEdit() {
|
|
this.editAddress = null;
|
|
this.editAddressId = null;
|
|
},
|
|
edit() {
|
|
this.editAddress = this.client.address;
|
|
this.editAddressId = this.client.id;
|
|
this.$nextTick(() => {
|
|
this.$refs['client-' + this.client.id + '-address'].select();
|
|
});
|
|
},
|
|
},
|
|
components: { IconEdit },
|
|
};
|
|
</script>
|
|
|