ShowEasyFrontEnd/FrontEnd/components/user/companyInfoDialog.vue

<template>
  <v-dialog v-model="companyInfoDialogActive" fullscreen @click:outside="$emit('close-company-dialog')">
    <v-card>
      <v-spacer v-if="$vuetify.breakpoint.smAndUp" class="pt-9"></v-spacer>
      <v-spacer class="pt-15 pa-7">
        <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'd-flex align-center pt-15' : 'd-flex align-center pt-10'">
          <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-spacer>
      <v-card class="mx-7 mb-5 py-3 pe-5 ps-3 border-radius-10" v-for="(item,index) in userCompanyList" :key="index" color="neutrals">
        <v-spacer class="d-flex">
          <v-spacer class="px-3">
            <div>{{ item.company_tax_no }}</div>
            <div>{{ item.company_name }}</div>
            <div class="d-flex align-center">
              <span>{{ countrySortOptions[item.company_country] }}</span>
              <div class="circle-delimeter mx-1"></div>
              <span>{{ item.company_city }}</span>
            </div>
            <div>
              <span v-if="item.company_address1">{{ item.company_address1 }}</span>
              <span v-if="item.company_address2 && !item.company_address1">{{ item.company_address2 }}</span>
            </div>
          </v-spacer>
          <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>
        </v-spacer>
      </v-card>
      <v-spacer class="d-flex justify-center mb-15">
        <v-btn @click="activeAddNewCompanyInfoDialog" color="primary border-radius-12 text-capitalize" width="150px">
          <v-icon>mdi-plus</v-icon>
          <span>{{ $t("userProfile.addNewCompany") }}</span>
        </v-btn>
      </v-spacer>
      <v-spacer class="mb-4"></v-spacer>
    </v-card>
    <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-dialog>
</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: "CompanyInfoDialog",
  components: {
    CompanyEditInfoDialog,CompanyAddNewDialog,CompanyDeleteDialog
  },
  props: {
    companyInfoDialogActive: {
      type: Boolean,
      required: true,
      default: false
    },
    userCompanyId: {
      type: Array,
      required: true,
      default: () => []
    },
    countrySortOptions: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      companyEditDialogActive: false,
      companyAddNewDialogActive: false,
      companyDeleteDialogAcitve: false,
      propUserCompany:{},
      countryOptions:[],
      user_uuid: '',
      emptyImage: require('~/assets/img/companyEmpty.png'),
      userCompanyList:[],
      userAddNewCompanyList:[],
      companyTableColumns: [
        {
          text: 'Company Name',
          value: 'company_name',
          sortable:false,
          width:'16%'
        },
        {
          text: 'Tax Number',
          value: 'company_tax_no',
          sortable:false,
          width:'16%'
        },
        {
          text: 'Country',
          value: 'company_country',
          sortable:false,
          width:'10%'
        },
        {
          text: 'City',
          value: 'company_city',
          sortable:false,
          width:'12%'
        },
        {
          text: 'Address',
          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")
      .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>

</style>