form submit controlled

This commit is contained in:
Burak Civan 2022-06-29 10:09:41 +03:00
parent 33e1862d54
commit d2f1f050d1
3 changed files with 31 additions and 18 deletions

View File

@ -72,17 +72,18 @@
<div class="flex items-center justify-center mt-5 gap-x-10"> <div class="flex items-center justify-center mt-5 gap-x-10">
<base-button class="w-1/2 flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100" @click="next()">{{ translations.company.skip }}</base-button> <base-button class="w-1/2 flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100" @click="next()">{{ translations.company.skip }}</base-button>
<base-button <button
type="submit"
id="button" id="button"
:disabled="button_loading" :disabled="button_loading"
class="w-1/2 relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" class="w-1/2 relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100"
@click="onEditSave()" @click="onEditSave($event)"
> >
<i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i> <i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': button_loading}]"> <span :class="[{'opacity-0': button_loading}]">
{{ translations.company.save }} {{ translations.company.save }}
</span> </span>
</base-button> </button>
</div> </div>
</div> </div>
</div> </div>
@ -254,7 +255,9 @@ export default {
} }
}, },
onEditSave() { onEditSave(event) {
event.preventDefault();
FormData.prototype.appendRecursive = function (data, wrapper = null) { FormData.prototype.appendRecursive = function (data, wrapper = null) {
for (var name in data) { for (var name in data) {
if (name == "previewElement" || name == "previewTemplate") { if (name == "previewElement" || name == "previewTemplate") {

View File

@ -91,16 +91,17 @@
{{ translations.currencies.cancel }} {{ translations.currencies.cancel }}
</base-button> </base-button>
<base-button <button
type="submit"
:disabled="button_loading" :disabled="button_loading"
class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100"
@click="onEditForm(item)" @click="onEditForm(item, $event)"
> >
<i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i> <i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': button_loading}]"> <span :class="[{'opacity-0': button_loading}]">
{{ translations.currencies.save }} {{ translations.currencies.save }}
</span> </span>
</base-button> </button>
</div> </div>
</div> </div>
</td> </td>
@ -159,12 +160,12 @@
{{ translations.currencies.cancel }} {{ translations.currencies.cancel }}
</base-button> </base-button>
<base-button :disabled="button_loading" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="onSubmitForm()"> <button type="submit" :disabled="button_loading" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="onSubmitForm($event)">
<i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i> <i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': button_loading}]"> <span :class="[{'opacity-0': button_loading}]">
{{ translations.currencies.save }} {{ translations.currencies.save }}
</span> </span>
</base-button> </button>
</div> </div>
</div> </div>
</div> </div>
@ -293,7 +294,9 @@ export default {
}, this); }, this);
}, },
onEditForm(item) { onEditForm(item, event) {
event.preventDefault();
this.onSubmitEvent( this.onSubmitEvent(
"PATCH", "PATCH",
url + "/wizard/currencies/" + item.id, url + "/wizard/currencies/" + item.id,
@ -303,7 +306,9 @@ export default {
); );
}, },
onSubmitForm() { onSubmitForm(event) {
event.preventDefault();
this.onSubmitEvent( this.onSubmitEvent(
"POST", "POST",
url + "/wizard/currencies", url + "/wizard/currencies",

View File

@ -73,16 +73,17 @@
{{ translations.taxes.cancel }} {{ translations.taxes.cancel }}
</base-button> </base-button>
<base-button <button
type="submit"
:disabled="button_loading" :disabled="button_loading"
class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100"
@click="onEditForm(item)" @click="onEditForm(item, $event)"
> >
<i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i> <i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': button_loading}]"> <span :class="[{'opacity-0': button_loading}]">
{{ translations.taxes.save }} {{ translations.taxes.save }}
</span> </span>
</base-button> </button>
</div> </div>
</div> </div>
</td> </td>
@ -131,12 +132,12 @@
{{ translations.taxes.cancel }} {{ translations.taxes.cancel }}
</base-button> </base-button>
<base-button :disabled="button_loading" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="onSubmitForm()"> <button type="submit" :disabled="button_loading" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="onSubmitForm($event)">
<i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i> <i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': button_loading}]"> <span :class="[{'opacity-0': button_loading}]">
{{ translations.taxes.save }} {{ translations.taxes.save }}
</span> </span>
</base-button> </button>
</div> </div>
</div> </div>
</form> </form>
@ -227,7 +228,9 @@ export default {
this.onEjetItem(event, this.taxes, event.tax_id); this.onEjetItem(event, this.taxes, event.tax_id);
}, },
onEditForm(item) { onEditForm(item, event) {
event.preventDefault();
this.onSubmitEvent( this.onSubmitEvent(
"PATCH", "PATCH",
url + "/wizard/taxes/" + item.id, url + "/wizard/taxes/" + item.id,
@ -247,7 +250,9 @@ export default {
this.add_taxes = true; this.add_taxes = true;
}, },
onSubmitForm() { onSubmitForm(event) {
event.preventDefault();
this.onSubmitEvent("POST", url + "/wizard/taxes", "type", this.taxes); this.onSubmitEvent("POST", url + "/wizard/taxes", "type", this.taxes);
}, },