country & state issue
This commit is contained in:
parent
91c4a4205b
commit
64e52e5371
|
|
@ -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=""{{ __('admin::app.customers.customers.country') }}"" 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=""{{ __('admin::app.customers.customers.state') }}"" 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=""{{ __('admin::app.customers.customers.country') }}"" @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=""{{ __('admin::app.customers.customers.state') }}""/>
|
||||
|
||||
<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=""{{ __('admin::app.customers.customers.state') }}"" >
|
||||
|
||||
<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
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
haveStates() {
|
||||
if(this.countryStates[this.country] && this.countryStates[this.country].length)
|
||||
return true;
|
||||
|
||||
|
||||
return false;
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue