Viewing file:  address.blade.php (7.38 KB) -rw-rw-rw-
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@if (isset($attribute))
<v-address-component
:attribute='@json($attribute)'
:validations="'{{ $validations }}'"
:data='@json(old($attribute->code) ?: $value)'
>
<!-- Addresses Shimmer -->
<x-admin::shimmer.common.address />
</v-address-component>
@endif
@pushOnce('scripts')
<script
type="text/x-template"
id="v-address-component-template"
>
<div class="flex gap-4 max-md:flex-wrap">
<div class="w-full">
<!-- Address (Textarea field) -->
<x-admin::form.control-group>
<x-admin::form.control-group.control
type="textarea"
::name="attribute['code'] + '[address]'"
rows="10"
::value="data ? data['address'] : ''"
:label="trans('admin::app.common.custom-attributes.address')"
::rules="attribute.is_required ? 'required|' + validations : validations"
/>
<x-admin::form.control-group.error ::name="attribute['code'] + '[address]'" />
<x-admin::form.control-group.error ::name="attribute['code'] + '.address'" />
</x-admin::form.control-group>
</div>
<div class="grid w-full">
<!-- Country Field -->
<x-admin::form.control-group>
<x-admin::form.control-group.control
type="select"
::name="attribute['code'] + '[country]'"
::rules="attribute.is_required ? 'required|' + validations : validations"
:label="trans('admin::app.common.custom-attributes.country')"
v-model="country"
>
<option value="">@lang('admin::app.common.custom-attributes.select-country')</option>
@foreach (core()->countries() as $country)
<option value="{{ $country->code }}">{{ $country->name }}</option>
@endforeach
</x-admin::form.control-group.control>
<x-admin::form.control-group.error ::name="attribute['code'] + '[country]'" />
<x-admin::form.control-group.error ::name="attribute['code'] + '.country'" />
</x-admin::form.control-group>
<!-- State Field -->
<template v-if="haveStates()">
<x-admin::form.control-group>
<x-admin::form.control-group.control
type="select"
::name="attribute['code'] + '[state]'"
v-model="state"
:label="trans('admin::app.common.custom-attributes.state')"
::rules="attribute.is_required ? 'required|' + validations : validations"
>
<option value="">@lang('admin::app.common.custom-attributes.select-state')</option>
<option
v-for='(state, index) in countryStates[country]'
:value="state.code"
>
@{{ state.name }}
</option>
</x-admin::form.control-group.control>
<x-admin::form.control-group.error ::name="attribute['code'] + '[state]'" />
<x-admin::form.control-group.error ::name="attribute['code'] + '.state'" />
</x-admin::form.control-group>
</template>
<template v-else>
<x-admin::form.control-group>
<x-admin::form.control-group.control
type="text"
::name="attribute['code'] + '[state]'"
:placeholder="trans('admin::app.common.custom-attributes.state')"
:label="trans('admin::app.common.custom-attributes.state')"
::rules="attribute.is_required ? 'required|' + validations : validations"
v-model="state"
>
</x-admin::form.control-group.control>
<x-admin::form.control-group.error ::name="attribute['code'] + '[state]'" />
<x-admin::form.control-group.error ::name="attribute['code'] + '.state'" />
</x-admin::form.control-group>
</template>
<!-- City Field -->
<x-admin::form.control-group>
<x-admin::form.control-group.control
type="text"
::name="attribute['code'] + '[city]'"
::value="data && data['city'] ? data['city'] : ''"
:placeholder="trans('admin::app.common.custom-attributes.city')"
:label="trans('admin::app.common.custom-attributes.city')"
::rules="attribute.is_required ? 'required|' + validations : validations"
/>
<x-admin::form.control-group.error ::name="attribute['code'] + '[city]'"/>
<x-admin::form.control-group.error ::name="attribute['code'] + '.city'" />
</x-admin::form.control-group>
<!-- Postcode Field -->
<x-admin::form.control-group>
<x-admin::form.control-group.control
type="text"
::name="attribute['code'] + '[postcode]'"
::value="data && data['postcode'] ? data['postcode'] : ''"
:placeholder="trans('admin::app.common.custom-attributes.postcode')"
:label="trans('admin::app.common.custom-attributes.postcode')"
::rules="attribute.is_required ? 'required|postcode' : 'postcode'"
/>
<x-admin::form.control-group.error ::name="attribute['code'] + '[postcode]'" />
<x-admin::form.control-group.error ::name="attribute['code'] + '.postcode'" />
</x-admin::form.control-group>
</div>
</div>
</script>
<script type="module">
app.component('v-address-component', {
template: '#v-address-component-template',
props: ['attribute', 'data', 'validations'],
data() {
return {
country: this.data?.country || '',
state: this.data?.state || '',
countryStates: @json(core()->groupedStatesByCountries()),
};
},
methods: {
haveStates() {
/*
* The double negation operator is used to convert the value to a boolean.
* It ensures that the final result is a boolean value,
* true if the array has a length greater than 0, and otherwise false.
*/
return !!this.countryStates[this.country]?.length;
},
}
});
</script>
@endPushOnce
|