Skip to content

Commit

Permalink
restructure modals into component
Browse files Browse the repository at this point in the history
  • Loading branch information
@Severino
Severino committed Jan 7, 2025
1 parent b5c9e85 commit 11df85f
Show file tree
Hide file tree
Showing 5 changed files with 240 additions and 195 deletions.
6 changes: 5 additions & 1 deletion resources/js/components/forms/button/LoadingButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<button
class="btn"
role="button"
:disabled="loading"
:disabled="loading || disabled"
>
<span
v-if="loading"
Expand All @@ -26,6 +26,10 @@
type: Boolean,
required: true,
},
disabled: {
type: Boolean,
default: false,
}
},
};
</script>
94 changes: 94 additions & 0 deletions resources/js/components/modals/ConfirmModal.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<template>
<vue-final-modal
class="modal-container modal"
content-class="sp-modal-content sp-modal-content-sm"
:name="name"
>
<div class="sp-modal-content sp-modal-content-sm">
<div class="modal-header">
<h5
v-if="title"
class="modal-title"
>
{{ title }}
</h5>
<button
type="button"
class="btn-close"
aria-label="Close"
data-bs-dismiss="modal"
@click="close()"
/>
</div>
<div class="modal-body nonscrollable">
<slot />
</div>
<div class="modal-footer">
<LoadingButton
type="submit"
class="btn btn-outline-success"
form="newEntityTypeForm"
:disabled="disabled"
:loading="loading"
@click="confirm()"
>
<i class="fas fa-fw fa-plus" /> {{ t('global.add') }}
</LoadingButton>
<button
type="button"
class="btn btn-outline-secondary"
data-bs-dismiss="modal"
@click.prevent="close()"
>
<i class="fas fa-fw fa-times" /> {{ t('global.cancel') }}
</button>
</div>
</div>
</vue-final-modal>
</template>

<script>
import { useI18n } from 'vue-i18n';
import LoadingButton from '../forms/button/LoadingButton.vue';
export default {
components: {
LoadingButton,
},
props: {
disabled: {
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: false,
},
title: {
type: String,
default: '',
},
},
emits: ['close', 'confirm'],
setup(props, context) {
const { t } = useI18n();
// FUNCTIONS
const confirm = _ => {
context.emit('confirm');
};
const close = _ => {
context.emit('close');
};
// RETURN
return {
t,
// PROPS
// LOCAL
close,
confirm,
};
},
};
</script>
168 changes: 71 additions & 97 deletions resources/js/components/modals/entity/Add.vue
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,68 @@
<template>
<vue-final-modal
class="modal-container modal"
content-class="sp-modal-content sp-modal-content-sm"
<ConfirmModal
:title="t('main.entity.modals.add.title')"
name="add-entity-modal"
:disabled="state.dataMissing"
:loading="loading"
@confirm="add()"
@close="closeModal"
>
<div class="sp-modal-content sp-modal-content-sm">
<div class="modal-header">
<h5 class="modal-title">
{{ t('main.entity.modals.add.title') }}
<small v-if="state.hasParent">
{{ parent.name }}
</small>
</h5>
<button
type="button"
class="btn-close"
aria-label="Close"
data-bs-dismiss="modal"
@click="closeModal()"
/>
</div>
<div class="modal-body nonscrollable">
<form
id="newEntityForm"
name="newEntityForm"
role="form"
@submit.prevent="add()"
<form
id="newEntityForm"
name="newEntityForm"
role="form"
>
<div class="mb-3">
<label
class="col-form-label col-md-3"
for="name"
>
<div class="mb-3">
<label
class="col-form-label col-md-3"
for="name"
>
{{ t('global.name') }}:
</label>
<div class="col-md-9">
<input
id="name"
v-model="state.entity.name"
type="text"
class="form-control"
required
>
</div>
</div>
<div class="mb-3">
<label
class="col-form-label col-md-3"
for="type"
>
{{ t('global.type') }}:
</label>
<div class="col-md-9">
<multiselect
id="type"
v-model="state.entity.type"
name="type"
:classes="multiselectResetClasslist"
:object="true"
:label="'thesaurus_url'"
:track-by="'id'"
:value-prop="'id'"
:mode="'single'"
:options="state.entityTypes"
:placeholder="t('global.select.placeholder')"
>
<template #option="{ option }">
{{ translateConcept(option.thesaurus_url) }}
</template>
<template #singlelabel="{ value }">
<div class="multiselect-single-label">
{{ translateConcept(value.thesaurus_url) }}
</div>
</template>
</multiselect>
</div>
</div>
</form>
{{ t('global.name') }}
</label>
<div class="col-md-9">
<input
id="name"
v-model="state.entity.name"
type="text"
class="form-control"
required
>
</div>
</div>
<div class="modal-footer">
<button
type="submit"
class="btn btn-outline-success"
form="newEntityForm"
:disabled="state.dataMissing"
>
<i class="fas fa-fw fa-plus" /> {{ t('global.add') }}
</button>
<button
type="button"
class="btn btn-outline-secondary"
data-bs-dismiss="modal"
@click="closeModal()"
<div class="mb-3">
<label
class="col-form-label col-md-3"
for="type"
>
<i class="fas fa-fw fa-times" /> {{ t('global.cancel') }}
</button>
{{ t('global.type') }}
</label>
<div class="col-md-9">
<multiselect
id="type"
v-model="state.entity.type"
name="type"
:classes="multiselectResetClasslist"
:object="true"
:label="'thesaurus_url'"
:track-by="'id'"
:value-prop="'id'"
:mode="'single'"
:options="state.entityTypes"
:placeholder="t('global.select.placeholder')"
>
<template #option="{ option }">
{{ translateConcept(option.thesaurus_url) }}
</template>
<template #singlelabel="{ value }">
<div class="multiselect-single-label">
{{ translateConcept(value.thesaurus_url) }}
</div>
</template>
</multiselect>
</div>
</div>
</div>
</vue-final-modal>
</form>
</ConfirmModal>
</template>

<script>
Expand All @@ -114,16 +79,24 @@
translateConcept,
multiselectResetClasslist,
} from '@/helpers/helpers.js';
import ConfirmModal from '../ConfirmModal.vue';
export default {
components: {
ConfirmModal,
},
props: {
parent: {
required: false,
type: Object,
default: null,
},
loading: {
type: Boolean,
default: false,
},
},
emits: ['closing', 'confirm'],
emits: ['close', 'confirm'],
setup(props, context) {
const { t } = useI18n();
const {
Expand All @@ -138,7 +111,8 @@
context.emit('confirm', state.entity);
};
const closeModal = _ => {
context.emit('closing', false);
console.log('closeModal');
context.emit('close', false);
};
// DATA
Expand Down Expand Up @@ -179,7 +153,7 @@
closeModal,
// STATE
state,
}
};
},
}
};
</script>
Loading

0 comments on commit 11df85f

Please sign in to comment.