country & state issue

This commit is contained in:
rahul shukla 2019-01-11 14:54:03 +05:30
parent 91c4a4205b
commit 64e52e5371
2 changed files with 95 additions and 54 deletions

View File

@ -62,7 +62,7 @@
@if (isset($field['repository']))
@foreach($value as $option)
<option value="{{ $option['name'] }}" {{ $option['name'] == $selectedOption ? 'selected' : ''}}
<option value="{{ $option['name'] }}" {{ $option['name'] == $selectedOption ? 'selected' : ''}}
{{ $option['name'] }}
</option>
@endforeach
@ -112,35 +112,19 @@
@elseif ($field['type'] == 'country')
<select type="text" v-validate="'{{ $validations }}'" class="control" id="country" name="{{ $firstField }}[{{ $secondField }}][{{ $thirdField }}][{{ $field['name'] }}]" data-vv-as="&quot;{{ __('admin::app.customers.customers.country') }}&quot;" onchange="selectStates()">
<option value=""></option>
<?php
$countryCode = core()->getConfigData($name) ?? '';
?>
<?php
$selectedOption = core()->getConfigData($name) ?? '';
?>
@foreach (core()->countries() as $country)
<option value="{{ $country->code }}" {{ $country->code == $selectedOption ? 'selected' : ''}}>
{{ $country->name }}
</option>
@endforeach
</select>
<country code = {{ $countryCode }}></country>
@elseif ($field['type'] == 'state')
<?php
$selectedOption = core()->getConfigData($name) ?? '';
$stateCode = core()->getConfigData($name) ?? '';
?>
<select type="text" class="control" id="state" onchange="stateCode()">
</select>
<input type="text" class="control" id="othstate" value="{{ $selectedOption }}" onkeyup="stateCode()">
<input type="hidden" v-validate="'{{ $validations }}'" class="control" id="stateValue" name="{{ $firstField }}[{{ $secondField }}][{{ $thirdField }}][{{ $field['name'] }}]" data-vv-as="&quot;{{ __('admin::app.customers.customers.state') }}&quot;" value="{{ $selectedOption }}">
<state code = {{ $stateCode }}></state>
@endif
@ -151,48 +135,105 @@
@push('scripts')
<script type="text/x-template" id="country-template">
<div>
<select type="text" v-validate="'required'" class="control" id="{{ $firstField }}[{{ $secondField }}][{{ $thirdField }}][{{ $field['name'] }}]" name="{{ $firstField }}[{{ $secondField }}][{{ $thirdField }}][{{ $field['name'] }}]" v-model="country" data-vv-as="&quot;{{ __('admin::app.customers.customers.country') }}&quot;" @change="someHandler">
<option value=""></option>
@foreach (core()->countries() as $country)
<option value="{{ $country->code }}">{{ $country->name }}</option>
@endforeach
</select>
</div>
</script>
<script>
$('#othstate').show();
$('#state').hide();
Vue.component('country', {
var countryStates = <?php echo json_encode(core()->groupedStatesByCountries()) ;?>;
template: '#country-template',
if (document.getElementById("othstate")) {
var stateName = document.getElementById("othstate").value;
selectStates();
}
inject: ['$validator'],
function selectStates() {
var countryId = document.getElementById("country").value;
props: ['code'],
for (var key in countryStates) {
if (countryStates[countryId]) {
$('#othstate').hide();
$('#state').show();
data: () => ({
country: "",
}),
if (key == countryId){
$('#state').empty();
for (state in countryStates[key]) {
$("#state").append('<option value="'+countryStates[key][state]['code']+'">'+countryStates[key][state]['default_name']+'</option>');
mounted() {
this.country = this.code;
this.someHandler()
},
if (stateName) {
$("#state > [value=" + stateName + "]").attr("selected", "true");
}
}
}
} else {
$('#othstate').show();
$('#state').hide();
}
methods: {
someHandler() {
this.$root.$emit('sendCountryCode', this.country)
},
}
}
});
</script>
function stateCode() {
document.getElementById("stateValue").value = document.getElementById(event.target.id).value;
}
<script type="text/x-template" id="state-template">
<div>
<input type="text" v-validate="'required'" v-if="!haveStates()" class="control" v-model="state" id="{{ $firstField }}[{{ $secondField }}][{{ $thirdField }}][state]" name="{{ $firstField }}[{{ $secondField }}][{{ $thirdField }}][state]" data-vv-as="&quot;{{ __('admin::app.customers.customers.state') }}&quot;"/>
<select v-validate="'required'" v-if="haveStates()" class="control" v-model="state" id="{{ $firstField }}[{{ $secondField }}][{{ $thirdField }}][state]" name="{{ $firstField }}[{{ $secondField }}][{{ $thirdField }}][state]" data-vv-as="&quot;{{ __('admin::app.customers.customers.state') }}&quot;" >
<option value="">{{ __('admin::app.customers.customers.select-state') }}</option>
<option v-for='(state, index) in countryStates[country]' :value="state.code">
@{{ state.default_name }}
</option>
</select>
</div>
</script>
<script>
Vue.component('state', {
template: '#state-template',
inject: ['$validator'],
props: ['code'],
data: () => ({
state: "",
country: "",
countryStates: @json(core()->groupedStatesByCountries())
}),
mounted() {
this.state = this.code
},
methods: {
haveStates() {
this.$root.$on('sendCountryCode', (country) => {
this.country = country;
})
if(this.countryStates[this.country] && this.countryStates[this.country].length)
return true;
return false;
},
}
});
</script>
@endpush

View File

@ -67,7 +67,7 @@
haveStates() {
if(this.countryStates[this.country] && this.countryStates[this.country].length)
return true;
return false;
},
}