ShowEasyFrontEnd/FrontEnd/components/user/contactInfoContent.vue

<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.first_name + " " + item.last_name }}
        </div>
        <div class="tw-pb-[6px] tw-text-[12px]">
          {{ "+" + item.country_code + item.phone_number }}
        </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.first_name }}</div>
            <div>{{ item.last_name }}</div>
            <div>{{ "+" + item.country_code + item.phone_number }}</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].contact_uuid;
      this.itemName =
        this.contacts[index].first_name + " " + this.contacts[index].last_name;
      this.$modal.show("delete-contact-modal");
    },
  },
};
</script>
<style scoped lang="scss">

</style>