ShowEasyFrontEnd/FrontEnd/components/user/companyInfo.vue

<template>
  <v-card class="border-radius-20" flat min-width="900px" max-width="900px">
    <v-spacer class="px-7 pt-7">
      <v-spacer class="d-flex align-center mb-7">
        <div class="circle-decoration me-2"></div>
        <div class="circle-decoration me-2"></div>
        <span class="font-weight-bold text-size-20 ms-7 text-height-26">{{ $t("userProfile.companyInfo") }}</span>
      </v-spacer>
      <v-data-table
        class="pb-7"
        hide-default-footer
        :headers="companyTableColumns"
        :items="userCompanyList"
      >
      <template slot="no-data">
        <div class="d-flex justify-center data-table-no-content">
          <div class="mb-7">
            <v-img width="150px" aspect-ratio="1" :src="emptyImage"></v-img>
          </div>
        </div>
        <div>
          <span class="empty-font-style">
            {{ $t("userProfile.noCompany") }}
          </span>
        </div>
      </template>
      <template v-slot:[`item.company_name`]="{item}">
        {{ item.company_name }}
      </template>
      <template v-slot:[`item.company_tax_no`]="{item}">
        {{ item.company_tax_no }}
      </template>
      <template v-slot:[`item.company_country`]="{item}">
        {{ countrySortOptions[item.company_country] }}
      </template>
      <template v-slot:[`item.company_city`]="{item}">
        {{ item.company_city }}
      </template>
      <template v-slot:[`item.company_address`]="{item}">
        <span v-if="item.company_address1">{{ item.company_address1 }}</span>
        <span v-if="item.company_address2 && !item.company_address1">{{ item.company_address2 }}</span>
      </template>
      <template v-slot:[`item.action`]="{item}">
        <div class="d-flex align-center">
          <v-btn @click="activeEditCompanyInfoDialog(item)" class="d-flex justify-center" icon>
            <unicon name="pen" height="20px" fill="neutrals-darken5"/>
          </v-btn>
          <v-btn @click="deleteUserCompany(item)" icon>
            <unicon name="trash-alt" height="20px" fill="neutrals-darken5"/>
          </v-btn>
        </div>
      </template>
      </v-data-table>
      <v-spacer class="d-flex justify-center pb-7">
        <v-btn @click="activeAddNewCompanyInfoDialog" class="border-radius-12 text-capitalize" color="primary">
          <v-icon class="me-2">mdi-plus</v-icon>
          {{ $t("userProfile.addNewCompany") }}
        </v-btn>
      </v-spacer>
    </v-spacer>
    <CompanyEditInfoDialog
      :companyEditInfoDialogActive="companyEditDialogActive"
      :userCompany="propUserCompany"
      :countryOptions="countryOptions"
      :user_uuid="user_uuid"
      @refetch-company="getCompanyList"
      @refetch-user="fetchUserData"
      @close-edit-dialog="companyEditDialogActive = !companyEditDialogActive"
    ></CompanyEditInfoDialog>
    <CompanyAddNewDialog
      :companyAddNewDialogActive="companyAddNewDialogActive"
      :countryOptions="countryOptions"
      :addNewCompanyList="userAddNewCompanyList"
      :user_uuid="user_uuid"
      @refetch-company="getCompanyList"
      @refetch-user="fetchUserData"
      @close-add-new-dialog="companyAddNewDialogActive = !companyAddNewDialogActive"
    ></CompanyAddNewDialog>
    <CompanyDeleteDialog
      :deleteCompanyInfoDialogAcitve="companyDeleteDialogAcitve"
      :companyData="propUserCompany"
      @refetch-company="getCompanyList"
      @refetch-user="fetchUserData"
      @closeCompanyDeleteDialog="companyDeleteDialogAcitve = !companyDeleteDialogAcitve"
    ></CompanyDeleteDialog>

  </v-card>
</template>
<script>
import CompanyDeleteDialog from '../../components/user/companyDeleteDialog.vue'
import CompanyEditInfoDialog from '../../components/user/companyEditInfoDialog.vue'
import CompanyAddNewDialog from '../../components/user/companyAddNewDialog.vue'
import jwt_decode from 'jwt-decode'
export default {
  name: "CompanyInfo",
  props: {
    userCompanyId: {
      type: Array,
      required: true,
      default: () => []
    },
    countrySortOptions: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  components: {
    CompanyEditInfoDialog,CompanyAddNewDialog,CompanyDeleteDialog
  },
  data() {
    return {
      companyEditDialogActive: false,
      companyAddNewDialogActive: false,
      companyDeleteDialogAcitve: false,
      propUserCompany:{},
      countryOptions:[],
      user_uuid: '',
      emptyImage: require('~/assets/img/companyEmpty.png'),
      userCompanyList:[],
      userAddNewCompanyList:[],
      companyTableColumns: [
        {
          text: this.$t('userProfile.companyName'),
          value: 'company_name',
          sortable:false,
          width:'16%'
        },
        {
          text: this.$t('userProfile.taxNumber'),
          value: 'company_tax_no',
          sortable:false,
          width:'16%'
        },
        {
          text: this.$t('userProfile.companyCountry'),
          value: 'company_country',
          sortable:false,
          width:'10%'
        },
        {
          text: this.$t('userProfile.companyCity'),
          value: 'company_city',
          sortable:false,
          width:'12%'
        },
        {
          text: this.$t('userProfile.companyAddress'),
          value: 'company_address',
          sortable:false,
          width:'39%'
        },
        {
          text: '',
          value: 'action',
          sortable:false,
          width:'7%'
        },
      ]
    }
  },
  created() {
    this.getCompanyList()
    this.fetchCountry()
    if (this.$auth.$storage.getUniversal('jwt')) {
      const jsonPayload = jwt_decode(this.$auth.$storage.getUniversal('jwt').token)
      this.user_uuid = JSON.parse(jsonPayload.ueid)
    }
  },
  methods: {
    activeEditCompanyInfoDialog(item) {
      this.companyEditDialogActive = !this.companyEditDialogActive
      this.propUserCompany = {...item}
    },
    activeAddNewCompanyInfoDialog() {
      this.companyAddNewDialogActive = !this.companyAddNewDialogActive 
    },
    deleteUserCompany(item) {
      this.companyDeleteDialogAcitve = !this.companyDeleteDialogAcitve
      this.propUserCompany = {...item}
    },
    getCompanyList() {
      this.$axios.post( `/member/company/list?jwt=${this.$auth.$storage.getUniversal('jwt').token || ''}`,this.userCompanyId)
      .then((res) => {
        this.userCompanyList = res.data.company_list
        this.userAddNewCompanyList = res.data.add_new_company_list
      })
      .catch((err) => { console.log(err);})
    },
    fetchCountry() {
      this.$axios.get(`/users/countries?lang=${this.$i18n.locale.replace('-','')}`)
      .then((res) => {
        this.countryOptions = res.data.result
      })
      .catch((err) => { console.log(err);})
    },
    fetchUserData() {
      this.getCompanyList()
      this.$emit('refetch-user')
    },
  },
  watch: {
    userCompanyId: {
      handler:function() {
        this.getCompanyList()
      },
      deep:true
    }
  }
}
</script>
<style lang="scss" scoped>
.data-table-no-content {
  margin-top: 100px;
}
.empty-font-style {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.02em;
}
</style>