mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/portal.git
synced 2026-08-31 18:34:34 +00:00
omair saleh
101 lines
4.7 KiB
Vue
101 lines
4.7 KiB
Vue
<template>
|
|
<div class="row m-l-0 m-r-0 m-b-10 bg-white parentContainer">
|
|
<div class="col">
|
|
<div class="row align-items-center justify-content-center p-t-10 p-b-10">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="fs-15">{{addressBook.street_one}} {{addressBook.street_two}} {{addressBook.city}} {{addressBook.state.name}} {{addressBook.post_code}} {{addressBook.country.name}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto b-l b-grey">
|
|
<div class="row h-100">
|
|
<div class="col">
|
|
<div class="row no-margin">
|
|
<div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest m-r-5 ml-auto">
|
|
<a class="requestModal pointer" data-type="deleteAddress">
|
|
<div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Delete">
|
|
<div class="col">
|
|
<i class="fa fa-times text-danger"></i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-auto text-right p-t-10 p-b-10 m-r-5" :class="[{'bg-warning': isDefault}, {'bg-master-lightest': !isDefault}]">
|
|
<a :class="[{'requestModal': !isDefault}, {'pointer': !isDefault}]" data-type="defaultAddress">
|
|
<div data-toggle="tooltip" class="row align-items-center justify-content-center" :class="{'link': !isDefault}">
|
|
<div class="col">
|
|
<i class="fa fa-star" :class="[{'text-white': isDefault}, {'text-master-light': !isDefault}]"></i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest">
|
|
<a class="requestModal pointer" data-type="editAddress">
|
|
<div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Delete">
|
|
<div class="col">
|
|
<i class="fa fa-pencil text-info"></i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editAddress">
|
|
<new-edit-address-form-component :populateWith="addressBook" :section="section" :address_id="-1" :isEdit=true></new-edit-address-form-component>
|
|
</modal-component>
|
|
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAddress">
|
|
<delete-address-form-component :data="addressBook" :section="section" class="text-center"></delete-address-form-component>
|
|
</modal-component>
|
|
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="defaultAddress">
|
|
<set-default-address-form-component :data="addressBook" :section="section" class="text-center"></set-default-address-form-component>
|
|
</modal-component>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
section: {
|
|
default: 'addressSection'
|
|
},
|
|
'data': {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
addressBookx: this.data,
|
|
isDefault: this.data.default,
|
|
isEditing: false,
|
|
}
|
|
},
|
|
watch: {
|
|
'data.default': function() {
|
|
this.isDefault = this.data.default;
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
addressBook:{
|
|
get() {
|
|
this.data.company_module_id = this.$store.getters.getCompanyModuleId;
|
|
return this.data;
|
|
},
|
|
set(val) {
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script> |