mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/portal.git
synced 2026-08-26 07:54:18 +00:00
feat: add addressComponent and related action component ex. deleteAddress and setDefaultAddress component. add new/edit form/
This commit is contained in:
weichien00
@@ -0,0 +1,101 @@
|
||||
<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>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
|
||||
<div class="row justify-content-center" v-show="!isLoading">
|
||||
<div class="col">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<h3 class="all-caps">Are you Sure?</h3>
|
||||
<div class="fs-11">Are you sure you want to delete this address?</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-r-5">
|
||||
<div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.address.delete', item.id), 'delete', section, true, true)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
export default {
|
||||
mixins: [componentHandler, ModalFormHandler]
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="row p-t-25 text-left">
|
||||
<div class="col">
|
||||
<div class="shadow p-3 bg-white rounded">
|
||||
<div class="d-flex flex-row align-items-center">
|
||||
<input v-show="!isEdit" type="radio" name="answer" id="answer-2"
|
||||
v-model="computeAddressId"
|
||||
:value='-1'
|
||||
:checked="new_address == true"
|
||||
>
|
||||
<label for="answer-2" data-question-number="2" class="mb-0 pl-2 pl-md-2 bold">{{isEdit?'Edit ':'Add New '}}Address</label>
|
||||
</div>
|
||||
<div class="col-0" v-if="computeAddressId==-1">
|
||||
<div class="d-flex flex-column flex-sm-row">
|
||||
<div class="col px-0 pr-sm-2">
|
||||
<validation-wrapper-component selecatable :validator="$v.parameters.district_id">
|
||||
<label class="text-primary fs-12">District</label>
|
||||
<div class="controls">
|
||||
<selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
|
||||
</div>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col px-0 pl-sm-2">
|
||||
<validation-wrapper-component :validator="$v.parameters.post_code">
|
||||
<label class="text-primary fs-12">Post Code</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="form-control fs-12" v-model="parameters.post_code">
|
||||
</div>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column flex-sm-row">
|
||||
<div class="col px-0 pr-sm-2">
|
||||
<validation-wrapper-component :validator="$v.parameters.street_one">
|
||||
<label class="text-primary fs-12">Street one</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="form-control fs-12"
|
||||
v-model="parameters.street_one"
|
||||
>
|
||||
</div>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col px-0 pl-sm-2">
|
||||
<validation-wrapper-component :validator="$v.parameters.street_two">
|
||||
<label class="text-primary fs-12">Street two</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="form-control fs-12"
|
||||
v-model="parameters.street_two"
|
||||
>
|
||||
</div>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m-t-25">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col text-right">
|
||||
<button type="button" class="btn btn-sm btn-primary b-rad-none" @click="submitForm()">{{isEdit?'Update':'Create'}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { required ,requiredIf } from "vuelidate/lib/validators";
|
||||
export default {
|
||||
props: {
|
||||
section: {
|
||||
default: 'addressForm'
|
||||
},
|
||||
isEdit:{
|
||||
default: false
|
||||
},
|
||||
populateWith: {
|
||||
type: Object,
|
||||
default: () => ({ empty: true })
|
||||
},
|
||||
address_id: null
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
parameters : {
|
||||
company_module_id:this.$store.getters.getCompanyModuleId,
|
||||
street_one: '',
|
||||
street_two: '',
|
||||
district_id: '',
|
||||
post_code: '',
|
||||
},
|
||||
new_address:false
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
computeAddressId:{
|
||||
get() {
|
||||
if (!this.populateWith.empty) {
|
||||
this.parameters = this.populateWith;
|
||||
this.parameters.district_id = this.populateWith.district.id;
|
||||
this.parameters.id = this.populateWith.id;
|
||||
}
|
||||
return this.address_id;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
validations: {
|
||||
parameters: {
|
||||
street_one: { required:requiredIf(function () { return this.computeAddressId === -1 }) },
|
||||
street_two: {},
|
||||
district_id: { required },
|
||||
post_code: { required },
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
submitForm(){
|
||||
if(!this.validate()){
|
||||
return;
|
||||
}
|
||||
this.isLoading = true;
|
||||
this.isEdit?this.submit(route('api.address.update', this.parameters.id), 'put', this.section, true, true):this.submit((this.route('api.address.create')), 'post', 'addressList', true, true);
|
||||
},
|
||||
successHandler(response){
|
||||
this.$emit('input', response.payload.data.id);
|
||||
this.resetForm();
|
||||
this.closeModal();
|
||||
this.isLoading = false;
|
||||
this.updateList();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
|
||||
<div class="row justify-content-center" v-show="!isLoading">
|
||||
<div class="col">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<h3 class="all-caps">Are you Sure?</h3>
|
||||
<div class="fs-11">Are you sure you want to set this address as the default?</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-r-5">
|
||||
<div class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none" data-dismiss="modal">Cancel</div>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.address.default', item.id , item.companyModuleId), 'put', section, true, true)">Set Default</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
export default {
|
||||
mixins: [componentHandler, ModalFormHandler]
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user