Skip to content

Commit 3ede95b

Browse files
jitendra-webkuljitendra-webkul
authored
Merge pull request #1572 from suraj-webkul/inline-modal-ui-issue
Move to Body Teleport.
2 parents d0dc39f + 08ea6ad commit 3ede95b

File tree

3 files changed

+255
-249
lines changed

3 files changed

+255
-249
lines changed

‎packages/Webkul/Admin/src/Resources/views/components/form/control-group/controls/inline/address.blade.php

Lines changed: 109 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -52,128 +52,130 @@ class="icon-edit cursor-pointer rounded p-0.5 text-2xl opacity-0 hover:bg-gray-2
5252
</template>
5353
</div>
5454
55-
<x-admin::form
56-
v-slot="{ meta, errors, handleSubmit }"
57-
as="div"
58-
ref="modalForm"
59-
>
60-
<form @submit="handleSubmit($event, updateOrCreate)">
61-
<!-- Editing view -->
62-
<x-admin::modal ref="emailModal">
63-
<!-- Modal Header -->
64-
<x-slot:header>
65-
<p class="text-lg font-bold text-gray-800 dark:text-white">
66-
Update Address
67-
</p>
68-
</x-slot>
69-
70-
<!-- Modal Content -->
71-
<x-slot:content>
72-
<div class="flex gap-4">
73-
<div class="w-full">
74-
<!-- Address (Textarea field) -->
75-
<x-admin::form.control-group>
76-
<x-admin::form.control-group.control
77-
type="textarea"
78-
::name="`${name}.address`"
79-
rows="10"
80-
::value="inputValue?.address"
81-
/>
82-
83-
<x-admin::form.control-group.error ::name="name" />
84-
</x-admin::form.control-group>
85-
</div>
55+
<Teleport to="body">
56+
<x-admin::form
57+
v-slot="{ meta, errors, handleSubmit }"
58+
as="div"
59+
ref="modalForm"
60+
>
61+
<form @submit="handleSubmit($event, updateOrCreate)">
62+
<!-- Editing view -->
63+
<x-admin::modal ref="emailModal">
64+
<!-- Modal Header -->
65+
<x-slot:header>
66+
<p class="text-lg font-bold text-gray-800 dark:text-white">
67+
Update Address
68+
</p>
69+
</x-slot>
70+
71+
<!-- Modal Content -->
72+
<x-slot:content>
73+
<div class="flex gap-4">
74+
<div class="w-full">
75+
<!-- Address (Textarea field) -->
76+
<x-admin::form.control-group>
77+
<x-admin::form.control-group.control
78+
type="textarea"
79+
::name="`${name}.address`"
80+
rows="10"
81+
::value="inputValue?.address"
82+
/>
83+
84+
<x-admin::form.control-group.error ::name="name" />
85+
</x-admin::form.control-group>
86+
</div>
8687
87-
<div class="grid w-full">
88-
<!-- Country Field -->
89-
<x-admin::form.control-group>
90-
<x-admin::form.control-group.control
91-
type="select"
92-
::name="`${name}.country`"
93-
v-model="inputValue.country"
94-
>
95-
<option value="">@lang('admin::app.common.custom-attributes.select-country')</option>
96-
97-
@foreach (core()->countries() as $country)
98-
<option value="{{ $country->code }}">{{ $country->name }}</option>
99-
@endforeach
100-
</x-admin::form.control-group.control>
101-
102-
<x-admin::form.control-group.error name="country" />
103-
104-
</x-admin::form.control-group>
105-
106-
<!-- State Field -->
107-
<template v-if="haveStates()">
88+
<div class="grid w-full">
89+
<!-- Country Field -->
10890
<x-admin::form.control-group>
10991
<x-admin::form.control-group.control
11092
type="select"
111-
::name="`${name}.state`"
112-
v-model="inputValue.state"
93+
::name="`${name}.country`"
94+
v-model="inputValue.country"
11395
>
114-
<option value="">@lang('admin::app.common.custom-attributes.select-state')</option>
96+
<option value="">@lang('admin::app.common.custom-attributes.select-country')</option>
11597
116-
<option v-for='(state, index) in countryStates[inputValue?.country]' :value="state.code">
117-
@{{ state.name }}
118-
</option>
98+
@foreach (core()->countries() as $country)
99+
<option value="{{ $country->code }}">{{ $country->name }}</option>
100+
@endforeach
119101
</x-admin::form.control-group.control>
120-
102+
121103
<x-admin::form.control-group.error name="country" />
104+
105+
</x-admin::form.control-group>
106+
107+
<!-- State Field -->
108+
<template v-if="haveStates()">
109+
<x-admin::form.control-group>
110+
<x-admin::form.control-group.control
111+
type="select"
112+
::name="`${name}.state`"
113+
v-model="inputValue.state"
114+
>
115+
<option value="">@lang('admin::app.common.custom-attributes.select-state')</option>
116+
117+
<option v-for='(state, index) in countryStates[inputValue?.country]' :value="state.code">
118+
@{{ state.name }}
119+
</option>
120+
</x-admin::form.control-group.control>
121+
122+
<x-admin::form.control-group.error name="country" />
123+
</x-admin::form.control-group>
124+
</template>
125+
126+
<template v-else>
127+
<x-admin::form.control-group>
128+
<x-admin::form.control-group.control
129+
type="text"
130+
::name="`${name}.state`"
131+
v-model="inputValue.state"
132+
/>
133+
134+
<x-admin::form.control-group.error name="state" />
135+
</x-admin::form.control-group>
136+
</template>
137+
138+
<!-- City Field -->
139+
<x-admin::form.control-group>
140+
<x-admin::form.control-group.control
141+
type="text"
142+
::name="`${name}.city`"
143+
::value="inputValue?.city"
144+
/>
145+
146+
<x-admin::form.control-group.error name="city" />
122147
</x-admin::form.control-group>
123-
</template>
124-
125-
<template v-else>
148+
149+
<!-- Postcode Field -->
126150
<x-admin::form.control-group>
127151
<x-admin::form.control-group.control
128152
type="text"
129-
::name="`${name}.state`"
130-
v-model="inputValue.state"
153+
::name="`${name}.postcode`"
154+
::value="inputValue?.postcode"
155+
:placeholder="trans('admin::app.common.custom-attributes.postcode')"
131156
/>
132-
133-
<x-admin::form.control-group.error name="state" />
157+
158+
<x-admin::form.control-group.error name="postcode" />
134159
</x-admin::form.control-group>
135-
</template>
136-
137-
<!-- City Field -->
138-
<x-admin::form.control-group>
139-
<x-admin::form.control-group.control
140-
type="text"
141-
::name="`${name}.city`"
142-
::value="inputValue?.city"
143-
/>
144-
145-
<x-admin::form.control-group.error name="city" />
146-
</x-admin::form.control-group>
147-
148-
<!-- Postcode Field -->
149-
<x-admin::form.control-group>
150-
<x-admin::form.control-group.control
151-
type="text"
152-
::name="`${name}.postcode`"
153-
::value="inputValue?.postcode"
154-
:placeholder="trans('admin::app.common.custom-attributes.postcode')"
155-
/>
156-
157-
<x-admin::form.control-group.error name="postcode" />
158-
</x-admin::form.control-group>
160+
</div>
159161
</div>
160-
</div>
161-
</x-slot>
162-
163-
<!-- Modal Footer -->
164-
<x-slot:footer>
165-
<!-- Save Button -->
166-
<x-admin::button
167-
button-type="submit"
168-
class="primary-button justify-center"
169-
:title="trans('Save')"
170-
::loading="isProcessing"
171-
::disabled="isProcessing"
172-
/>
173-
</x-slot>
174-
</x-admin::modal>
175-
</form>
176-
</x-admin::form>
162+
</x-slot>
163+
164+
<!-- Modal Footer -->
165+
<x-slot:footer>
166+
<!-- Save Button -->
167+
<x-admin::button
168+
button-type="submit"
169+
class="primary-button justify-center"
170+
:title="trans('Save')"
171+
::loading="isProcessing"
172+
::disabled="isProcessing"
173+
/>
174+
</x-slot>
175+
</x-admin::modal>
176+
</form>
177+
</x-admin::form>
178+
</Teleport>
177179
</div>
178180
</script>
179181

0 commit comments

Comments
 (0)