ShowEasyFrontEnd/FrontEnd/components/user/contactInfo.vue

<template>
  <div class="tw-min-w-full tw-min-h-full lg:tw-w-[908px] tw-bg-white tw-px-[30px] tw-py-[30px] xl:tw-py-[20px]">
    <div class="tw-flex tw-items-center tw-py-[11px] tw-mb-5 md:tw-mb-[30px]">
      <div class="circle-decoration tw-mr-[6px]"></div>
      <div class="circle-decoration tw-mr-[30px]"></div>
      <div class="tw-t18 tw-font-bold">{{ $t('Contact Info') }}</div>
    </div>
    <div v-if="userContact.length < 1" class="tw-flex tw-justify-center">
      <div>
        <img :src="contactImg" alt="" class="tw-h-[142px] tw-w-[160px]">
        <div class="tw-text-center tw-t16">{{ $t('No Contact yet ...') }}</div>
      </div>
    </div>
    <div v-else  class="tw-w-full">
      <ContactInfoContent
        :contacts="userContact"
        @refetch-contact-info="successUpdate"
      ></ContactInfoContent>
    </div>
    <div :class="userContact.length < 1 ? 'tw-flex tw-justify-center tw-mt-[50px] md:tw-mt-[60px]' : 'tw-flex tw-justify-center tw-mt-[20px] md:tw-mt-[30px]'">
      <button @click="$modal.show('add-contact-modal')" type="button" class="tw-bg-primary-1 tw-px-6 tw-rounded-2xl tw-h-[40px] tw-w-[169px]">
        <div class="tw-flex tw-items-center">
          <img :src="plusImg" alt="" class="tw-h-[18px] tw-w-[18px] tw-mr-2">
          <span class="tw-t16 tw-text-white">{{ $t('Add Contact') }}</span>
        </div>
      </button>
    </div>
    <AddContactModal @update="successUpdate"></AddContactModal>
  </div>
</template>
<script>
  import AddContactModal from '../newComponent/modal/UserAddContactModal.vue'
  import ContactInfoContent from './contactInfoContent.vue'
  import Swal from 'sweetalert2'
  export default {
    // async asyncData() {
    //   const { data } = await axios.get(`/member/contacts?jwt=${this.$auth.$storage.getUniversal('jwt').token || ''}`).then( res => {
    //     return { userContact: data.contacts }
    //   })
    // },
    components: {
      ContactInfoContent,
      AddContactModal,
    },
    data() {
      return {
        contactImg: require('../../assets/img/noContact.png'),
        plusImg: require('../../assets/img/plus-white.png'),
        userContact: [],
      }
    },
    methods: {
      fetchContactInfo() {
        this.$axios.get(`/member/contacts?jwt=${this.$auth.$storage.getUniversal('jwt').token || ''}`)
        .then((result) => {
          this.userContact = result.data.contacts
        }).catch((err) => {
          console.log(err)
        });
      },
      successUpdate() {
        Swal.fire({
          position: 'top',
          icon: 'success',
          title: 'Your work has been saved',
          showConfirmButton: false,
          timer: 1500
        })
        this.fetchContactInfo()
      },
    },
    created() {
      if (this.$auth.loggedIn) {
        this.fetchContactInfo() 
      }
    },
  }
</script>
<style scoped lang="scss"></style>