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.
97 lines
3.6 KiB
97 lines
3.6 KiB
<template>
|
|
<!-- close-contact-info -->
|
|
|
|
<div>
|
|
<div class="xl:tw-grid tw-gap-[15px] tw-grid-cols-[100px_100px_160px_200px_142px] tw-hidden tw-mb-[30px]">
|
|
<div class="tw-text-neutrals-500 tw-body-4">{{ $t("First Name") }}</div>
|
|
<div class="tw-text-neutrals-500 tw-body-4">{{ $t("Last Name") }}</div>
|
|
<div class="tw-text-neutrals-500 tw-body-4">{{ $t("Phone") }}</div>
|
|
<div class="tw-text-neutrals-500 tw-body-4">{{ $t("Email") }}</div>
|
|
</div>
|
|
<div v-for="(item, index) in contacts" :key="index"
|
|
class="tw-flex tw-place-content-between tw-border-solid tw-border-neutral-200 tw-rounded-[10px] xl:tw-border-none xl:tw-px-0 tw-bg-white tw-py-[10px] tw-px-5 tw-mb-5 tw-mt-[30px] last:tw-mb-0">
|
|
<!-- 手機板 -->
|
|
<div class="xl:tw-hidden">
|
|
<div class="tw-pb-[6px] tw-text-[14px] tw-font-medium tw-text-base-primary">
|
|
{{ item.FirstName + " " + item.LastName }}
|
|
</div>
|
|
<div class="tw-pb-[6px] tw-text-[12px]">
|
|
{{ "+" + item.PhoneCountryCode + item.PhoneNo }}
|
|
</div>
|
|
<div class="tw-text-[12px]">{{ item.Email }}</div>
|
|
</div>
|
|
<div class="tw-grid tw-grid-cols-1 tw-gap-[20px] md:tw-grid-cols-2 md:tw-gap-[15px] xl:tw-hidden">
|
|
<button @click="editItem(index)" type="button">
|
|
<img :src="editImg" alt="" class="tw-h-[28px] tw-w-[28px]" />
|
|
</button>
|
|
<button @click="deleteItem(index)" type="button">
|
|
<img :src="deleteImg" alt="" class="tw-h-[28px] tw-w-[28px]" />
|
|
</button>
|
|
</div>
|
|
<!-- 電腦版 -->
|
|
<div class="tw-hidden xl:tw-block">
|
|
<div class="xl:tw-flex xl:tw-flex-row">
|
|
<div class="xl:tw-grid tw-gap-[15px] tw-grid-cols-[100px_100px_160px_200px_142px] tw-mr-[10px]">
|
|
<div>{{ item.FirstName }}</div>
|
|
<div>{{ item.LastName }}</div>
|
|
<div>{{ item.PhoneNo }}</div>
|
|
<div>{{ item.Email }}</div>
|
|
<!-- <div>{{ item.passport_number }}</div> -->
|
|
</div>
|
|
<div class="tw-flex tw-flex-row">
|
|
<button @click="editItem(index)" type="button">
|
|
<img :src="editImg" alt="" class="tw-h-[28px] tw-w-[28px] tw-mr-[15px]" />
|
|
</button>
|
|
<button @click="deleteItem(index)" type="button">
|
|
<img :src="deleteImg" alt="" class="tw-h-[28px] tw-w-[28px]" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<EditContactModal :contact="item" @update="$emit('refetch-contact-info')"></EditContactModal>
|
|
<DeleteContactModal :contactId="itemId" :contactName="itemName" @update="$emit('refetch-contact-info')">
|
|
</DeleteContactModal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import EditContactModal from "../newComponent/modal/UserEditContactModal.vue";
|
|
import DeleteContactModal from "../newComponent/modal/UserDeleteContactModal.vue";
|
|
export default {
|
|
name: "ContactInfoContent",
|
|
components: {
|
|
EditContactModal,
|
|
DeleteContactModal,
|
|
},
|
|
props: {
|
|
contacts: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
editImg: require("~/assets/svg/edit.svg"),
|
|
deleteImg: require("~/assets/svg/delete.svg"),
|
|
item: {},
|
|
itemId: "",
|
|
itemName: "",
|
|
};
|
|
},
|
|
methods: {
|
|
editItem(index) {
|
|
this.item = JSON.parse(JSON.stringify(this.contacts[index]));
|
|
this.$modal.show("edit-contact-modal");
|
|
},
|
|
deleteItem(index) {
|
|
this.itemId = this.contacts[index].ContactID;
|
|
this.itemName =
|
|
this.contacts[index].FirstName + " " + this.contacts[index].LastName;
|
|
this.$modal.show("delete-contact-modal");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|