rixty
/
AzuraCast
mirror of https://github.com/AzuraCast/AzuraCast.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

Implement common Vue modal-form component.

This commit is contained in:
Buster "Silver Eagle" Neece 2021-09-20 18:54:11 -05:00
parent 093556f413
commit 8b83d8a7e5
No known key found for this signature in database
GPG Key ID: 6D9E12FF03411F4E
11 changed files with 193 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/vue/components/Admin/CustomFields/EditModal.vue
View File

@ -1,38 +1,22 @@
<template>
<b-modal size="lg" id="edit_modal" ref="modal" :title="langTitle" :busy="loading">
<b-overlay variant="card" :show="loading">
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="$v.form.$invalid"
@submit="doSubmit">
<b-form class="form" @submit.prevent="doSubmit">
<b-tabs content-class="mt-3">
<admin-custom-fields-form :form="$v.form" :auto-assign-types="autoAssignTypes">
</admin-custom-fields-form>
</b-tabs>
<admin-custom-fields-form :form="$v.form" :auto-assign-types="autoAssignTypes">
</admin-custom-fields-form>
<invisible-submit-button/>
</b-form>
</b-overlay>
<template #modal-footer>
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="$v.form.$invalid">
<translate key="lang_btn_save_changes">Save Changes</translate>
</b-button>
</template>
</b-modal>
</modal-form>
</template>
<script>
import {validationMixin} from 'vuelidate';
import {required} from 'vuelidate/dist/validators.min.js';
import InvisibleSubmitButton from '~/components/Common/InvisibleSubmitButton';
import BaseEditModal from '~/components/Common/BaseEditModal';
import AdminCustomFieldsForm from "~/components/Admin/CustomFields/Form";
export default {
name: 'AdminCustomFieldsEditModal',
components: {AdminCustomFieldsForm, InvisibleSubmitButton},
components: {AdminCustomFieldsForm},
mixins: [validationMixin, BaseEditModal],
props: {
autoAssignTypes: Object

36
frontend/vue/components/Admin/Permissions/EditModal.vue
View File

@ -1,36 +1,22 @@
<template>
<b-modal size="lg" id="edit_modal" ref="modal" :title="langTitle" :busy="loading">
<b-overlay variant="card" :show="loading">
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="$v.form.$invalid"
@submit="doSubmit">
<b-form class="form" @submit.prevent="doSubmit">
<b-tabs content-class="mt-3">
<admin-permissions-global-form :form="$v.form" :global-permissions="globalPermissions">
</admin-permissions-global-form>
<b-tabs content-class="mt-3">
<admin-permissions-global-form :form="$v.form" :global-permissions="globalPermissions">
</admin-permissions-global-form>
<admin-permissions-station-form :form="$v.form" :stations="stations"
:station-permissions="stationPermissions">
</admin-permissions-station-form>
</b-tabs>
<admin-permissions-station-form :form="$v.form" :stations="stations"
:station-permissions="stationPermissions">
</admin-permissions-station-form>
</b-tabs>
<invisible-submit-button/>
</b-form>
</b-overlay>
<template #modal-footer>
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="$v.form.$invalid">
<translate key="lang_btn_save_changes">Save Changes</translate>
</b-button>
</template>
</b-modal>
</modal-form>
</template>
<script>
import {validationMixin} from 'vuelidate';
import {required} from 'vuelidate/dist/validators.min.js';
import InvisibleSubmitButton from '~/components/Common/InvisibleSubmitButton';
import BaseEditModal from '~/components/Common/BaseEditModal';
import AdminPermissionsGlobalForm from "./Form/GlobalForm";
import AdminPermissionsStationForm from "./Form/StationForm";
@ -38,7 +24,7 @@ import _ from 'lodash';
export default {
name: 'AdminPermissionsEditModal',
components: {AdminPermissionsStationForm, AdminPermissionsGlobalForm, InvisibleSubmitButton},
components: {AdminPermissionsStationForm, AdminPermissionsGlobalForm},
mixins: [validationMixin, BaseEditModal],
props: {
stations: Object,

27
frontend/vue/components/Admin/StorageLocations/EditModal.vue
View File

@ -1,40 +1,27 @@
<template>
<b-modal size="lg" id="edit_modal" ref="modal" :title="langTitle" :busy="loading">
<b-overlay variant="card" :show="loading">
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="$v.form.$invalid"
@submit="doSubmit">
<b-form class="form" @submit.prevent="doSubmit">
<storage-location-form :form="$v.form"></storage-location-form>
<invisible-submit-button/>
</b-form>
</b-overlay>
<template #modal-footer>
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="$v.form.$invalid">
<translate key="lang_btn_save_changes">Save Changes</translate>
</b-button>
</template>
</b-modal>
<storage-location-form :form="$v.form"></storage-location-form>
</modal-form>
</template>
<script>
import {validationMixin} from 'vuelidate';
import {required} from 'vuelidate/dist/validators.min.js';
import InvisibleSubmitButton from '~/components/Common/InvisibleSubmitButton';
import BaseEditModal from '~/components/Common/BaseEditModal';
import StorageLocationForm from './Form';
export default {
name: 'AdminStorageLocationsEditModal',
components: {StorageLocationForm, InvisibleSubmitButton},
components: {StorageLocationForm},
mixins: [validationMixin, BaseEditModal],
props: {
type: String
},
computed: {
langTitle () {
langTitle() {
return this.isEditMode
? this.$gettext('Edit Storage Location')
: this.$gettext('Add Storage Location');

4
frontend/vue/components/Common/BaseEditModal.vue
View File

@ -5,9 +5,11 @@
<script>
import {validationMixin} from 'vuelidate';
import handleAxiosError from '~/functions/handleAxiosError';
import ModalForm from "~/components/Common/ModalForm";
export default {
name: 'BaseEditModal',
components: {ModalForm},
emits: ['relist'],
props: {
createUrl: String
@ -15,7 +17,7 @@ export default {
mixins: [
validationMixin
],
data () {
data() {
return {
loading: true,
error: null,

89
frontend/vue/components/Common/ModalForm.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<b-modal :size="size" :id="id" ref="modal" :title="title" :busy="loading">
<template #default="slotProps">
<b-overlay variant="card" :show="loading">
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
<b-form class="form" @submit.prevent="doSubmit">
<slot name="default" v-bind="slotProps">
</slot>
<invisible-submit-button/>
</b-form>
</b-overlay>
</template>
<template #modal-footer="slotProps">
<slot name="modal-footer" v-bind="slotProps">
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="disableSaveButton">
<translate key="lang_btn_save_changes">Save Changes</translate>
</b-button>
</slot>
</template>
<slot v-for="(_, name) in $slots" :name="name" :slot="name"/>
<template v-for="(_, name) in filteredScopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData"/>
</template>
</b-modal>
</template>
<script>
import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton";
export default {
components: {InvisibleSubmitButton},
emits: ['submit'],
props: {
title: {
type: String,
required: true
},
size: {
type: String,
default: 'lg'
},
id: {
type: String,
default: 'edit-modal'
},
loading: {
type: Boolean,
required: true
},
disableSaveButton: {
type: Boolean,
default: false
},
error: {
type: String
}
},
computed: {
filteredScopedSlots() {
return _.filter(this.$scopedSlots, (slot, name) => {
return !_.includes([
'default', 'modal-footer'
], name);
});
},
},
methods: {
doSubmit() {
this.$emit('submit');
},
close() {
this.hide();
},
hide() {
this.$refs.modal.hide();
},
show() {
this.$refs.modal.show();
}
}
}
</script>

41
frontend/vue/components/Stations/Media/EditModal.vue
View File

@ -1,28 +1,19 @@
<template>
<b-modal size="lg" id="edit_modal" ref="modal" :title="langTitle" :busy="loading">
<b-overlay variant="card" :show="loading">
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
<b-form class="form" @submit.prevent="doEdit">
<b-tabs content-class="mt-3">
<media-form-basic-info :form="$v.form"></media-form-basic-info>
<media-form-playlists :form="$v.form" :playlists="playlists"></media-form-playlists>
<media-form-album-art :album-art-url="albumArtUrl"></media-form-album-art>
<media-form-custom-fields v-if="customFields.length > 0" :form="$v.form" :custom-fields="customFields"></media-form-custom-fields>
<media-form-waveform-editor :form="form" :audio-url="audioUrl" :waveform-url="waveformUrl"></media-form-waveform-editor>
<media-form-advanced-settings :form="$v.form" :song-length="songLength"></media-form-advanced-settings>
</b-tabs>
<invisible-submit-button/>
</b-form>
</b-overlay>
<template #modal-footer>
<b-button variant="default" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" @click="doEdit" :disabled="$v.form.$invalid">
<translate key="lang_btn_save">Save Changes</translate>
</b-button>
</template>
</b-modal>
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="$v.form.$invalid"
@submit="doEdit">
<b-tabs content-class="mt-3">
<media-form-basic-info :form="$v.form"></media-form-basic-info>
<media-form-playlists :form="$v.form" :playlists="playlists"></media-form-playlists>
<media-form-album-art :album-art-url="albumArtUrl"></media-form-album-art>
<media-form-custom-fields v-if="customFields.length > 0" :form="$v.form"
:custom-fields="customFields"></media-form-custom-fields>
<media-form-waveform-editor :form="form" :audio-url="audioUrl"
:waveform-url="waveformUrl"></media-form-waveform-editor>
<media-form-advanced-settings :form="$v.form" :song-length="songLength"></media-form-advanced-settings>
</b-tabs>
</modal-form>
</template>
<script>
import {validationMixin} from 'vuelidate';
@ -36,10 +27,12 @@ import MediaFormPlaylists from './Form/Playlists';
import InvisibleSubmitButton from '~/components/Common/InvisibleSubmitButton';
import MediaFormWaveformEditor from './Form/WaveformEditor';
import handleAxiosError from '~/functions/handleAxiosError';
import ModalForm from "~/components/Common/ModalForm";
export default {
name: 'EditModal',
components: {
ModalForm,
MediaFormPlaylists,
MediaFormWaveformEditor,
MediaFormAdvancedSettings,

39
frontend/vue/components/Stations/Playlists/EditModal.vue
View File

@ -1,28 +1,16 @@
<template>
<b-modal size="lg" id="edit_modal" ref="modal" :title="langTitle" :busy="loading">
<b-overlay variant="card" :show="loading">
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
<b-form class="form" @submit.prevent="doSubmit">
<b-tabs content-class="mt-3">
<form-basic-info :form="$v.form"></form-basic-info>
<form-source :form="$v.form"></form-source>
<form-schedule :form="$v.form" :schedule-items="form.schedule_items"
:station-time-zone="stationTimeZone"></form-schedule>
<form-advanced :form="$v.form" v-if="enableAdvancedFeatures"></form-advanced>
</b-tabs>
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="$v.form.$invalid"
@submit="doSubmit">
<invisible-submit-button/>
</b-form>
</b-overlay>
<template #modal-footer>
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="$v.form.$invalid">
<translate key="lang_btn_save_changes">Save Changes</translate>
</b-button>
</template>
</b-modal>
<b-tabs content-class="mt-3">
<form-basic-info :form="$v.form"></form-basic-info>
<form-source :form="$v.form"></form-source>
<form-schedule :form="$v.form" :schedule-items="form.schedule_items"
:station-time-zone="stationTimeZone"></form-schedule>
<form-advanced :form="$v.form" v-if="enableAdvancedFeatures"></form-advanced>
</b-tabs>
</modal-form>
</template>
<script>
@ -32,18 +20,17 @@ import FormSource from './Form/Source';
import FormSchedule from './Form/Schedule';
import FormAdvanced from './Form/Advanced';
import BaseEditModal from '~/components/Common/BaseEditModal';
import InvisibleSubmitButton from '~/components/Common/InvisibleSubmitButton';
export default {
name: 'EditModal',
components: {FormSchedule, FormSource, FormBasicInfo, FormAdvanced, InvisibleSubmitButton},
components: {FormSchedule, FormSource, FormBasicInfo, FormAdvanced},
mixins: [BaseEditModal],
props: {
stationTimeZone: String,
enableAdvancedFeatures: Boolean
},
computed: {
langTitle () {
langTitle() {
return this.isEditMode
? this.$gettext('Edit Playlist')
: this.$gettext('Add Playlist');

41
frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
View File

@ -1,34 +1,23 @@
<template>
<b-modal size="lg" id="edit_modal" ref="modal" :title="langTitle" :busy="loading">
<b-spinner v-if="loading">
</b-spinner>
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="$v.form.$invalid"
@submit="doSubmit">
<b-form class="form" v-else @submit.prevent="doSubmit">
<b-tabs content-class="mt-3">
<episode-form-basic-info :form="$v.form"></episode-form-basic-info>
<episode-form-media v-model="$v.form.media_file.$model" :record-has-media="record.has_media"
:new-media-url="newMediaUrl" :edit-media-url="record.links.media"
:download-url="record.links.download"></episode-form-media>
<podcast-common-artwork v-model="$v.form.artwork_file.$model" :artwork-src="record.art"
:new-art-url="newArtUrl" :edit-art-url="record.links.art"></podcast-common-artwork>
</b-tabs>
<b-tabs content-class="mt-3">
<episode-form-basic-info :form="$v.form"></episode-form-basic-info>
<invisible-submit-button/>
</b-form>
<template #modal-footer>
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="$v.form.$invalid">
{{ langSaveChanges }}
</b-button>
</template>
</b-modal>
<episode-form-media v-model="$v.form.media_file.$model" :record-has-media="record.has_media"
:new-media-url="newMediaUrl" :edit-media-url="record.links.media"
:download-url="record.links.download"></episode-form-media>
<podcast-common-artwork v-model="$v.form.artwork_file.$model" :artwork-src="record.art"
:new-art-url="newArtUrl" :edit-art-url="record.links.art"></podcast-common-artwork>
</b-tabs>
</modal-form>
</template>
<script>
import {required} from 'vuelidate/dist/validators.min.js';
import InvisibleSubmitButton from '~/components/Common/InvisibleSubmitButton';
import BaseEditModal from '~/components/Common/BaseEditModal';
import EpisodeFormBasicInfo from './EpisodeForm/BasicInfo';
import PodcastCommonArtwork from './Common/Artwork';
@ -37,7 +26,7 @@ import {DateTime} from 'luxon';
export default {
name: 'EditModal',
components: {EpisodeFormMedia, PodcastCommonArtwork, EpisodeFormBasicInfo, InvisibleSubmitButton},
components: {EpisodeFormMedia, PodcastCommonArtwork, EpisodeFormBasicInfo},
mixins: [BaseEditModal],
props: {
stationTimeZone: String,
@ -46,7 +35,7 @@ export default {
newArtUrl: String,
newMediaUrl: String
},
data () {
data() {
return {
uploadPercentage: null,
record: {

38
frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue
View File

@ -1,40 +1,28 @@
<template>
<b-modal size="lg" id="edit_modal" ref="modal" :title="langTitle" :busy="loading">
<b-spinner v-if="loading">
</b-spinner>
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="$v.form.$invalid"
@submit="doSubmit">
<b-form class="form" v-else @submit.prevent="doSubmit">
<b-tabs content-class="mt-3">
<podcast-form-basic-info :form="$v.form"
:categories-options="categoriesOptions" :language-options="languageOptions">
</podcast-form-basic-info>
<podcast-common-artwork v-model="$v.form.artwork_file.$model" :artwork-src="record.art"
:new-art-url="newArtUrl" :edit-art-url="record.links.art"></podcast-common-artwork>
</b-tabs>
<b-tabs content-class="mt-3">
<podcast-form-basic-info :form="$v.form"
:categories-options="categoriesOptions" :language-options="languageOptions">
</podcast-form-basic-info>
<invisible-submit-button/>
</b-form>
<template #modal-footer>
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="$v.form.$invalid">
<translate key="lang_btn_save_changes">Save Changes</translate>
</b-button>
</template>
</b-modal>
<podcast-common-artwork v-model="$v.form.artwork_file.$model" :artwork-src="record.art"
:new-art-url="newArtUrl" :edit-art-url="record.links.art"></podcast-common-artwork>
</b-tabs>
</modal-form>
</template>
<script>
import {required} from 'vuelidate/dist/validators.min.js';
import InvisibleSubmitButton from '~/components/Common/InvisibleSubmitButton';
import BaseEditModal from '~/components/Common/BaseEditModal';
import PodcastFormBasicInfo from './PodcastForm/BasicInfo';
import PodcastCommonArtwork from './Common/Artwork';
export default {
name: 'EditModal',
components: {PodcastCommonArtwork, PodcastFormBasicInfo, InvisibleSubmitButton},
components: {PodcastCommonArtwork, PodcastFormBasicInfo},
mixins: [BaseEditModal],
props: {
stationTimeZone: String,
@ -42,7 +30,7 @@ export default {
categoriesOptions: Object,
newArtUrl: String
},
data () {
data() {
return {
record: {
has_custom_art: false,

33
frontend/vue/components/Stations/Remotes/EditModal.vue
View File

@ -1,29 +1,17 @@
<template>
<b-modal size="lg" id="edit_modal" ref="modal" :title="langTitle" :busy="loading">
<b-overlay variant="card" :show="loading">
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
<b-form class="form" @submit.prevent="doSubmit">
<b-tabs content-class="mt-3">
<remote-form-basic-info :form="$v.form"></remote-form-basic-info>
<remote-form-auto-dj :form="$v.form"></remote-form-auto-dj>
</b-tabs>
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="$v.form.$invalid"
@submit="doSubmit">
<invisible-submit-button/>
</b-form>
</b-overlay>
<template #modal-footer>
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="$v.form.$invalid">
<translate key="lang_btn_save">Save Changes</translate>
</b-button>
</template>
</b-modal>
<b-tabs content-class="mt-3">
<remote-form-basic-info :form="$v.form"></remote-form-basic-info>
<remote-form-auto-dj :form="$v.form"></remote-form-auto-dj>
</b-tabs>
</modal-form>
</template>
<script>
import {required} from 'vuelidate/dist/validators.min.js';
import InvisibleSubmitButton from '~/components/Common/InvisibleSubmitButton';
import BaseEditModal from '~/components/Common/BaseEditModal';
import RemoteFormBasicInfo from "./Form/BasicInfo";
import RemoteFormAutoDj from "./Form/AutoDj";
@ -34,8 +22,7 @@ export default {
mixins: [BaseEditModal],
components: {
RemoteFormAutoDj,
RemoteFormBasicInfo,
InvisibleSubmitButton
RemoteFormBasicInfo
},
props: {
enableAdvancedFeatures: Boolean

30
frontend/vue/components/Stations/Streamers/EditModal.vue
View File

@ -1,26 +1,14 @@
<template>
<b-modal size="lg" id="edit_modal" ref="modal" :title="langTitle" :busy="loading">
<b-overlay variant="card" :show="loading">
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
<b-form class="form" @submit.prevent="doSubmit">
<b-tabs content-class="mt-3">
<form-basic-info :form="$v.form"></form-basic-info>
<form-schedule :form="$v.form" :schedule-items="form.schedule_items"
:station-time-zone="stationTimeZone"></form-schedule>
</b-tabs>
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="$v.form.$invalid"
@submit="doSubmit">
<invisible-submit-button/>
</b-form>
</b-overlay>
<template #modal-footer>
<b-button variant="default" type="button" @click="close">
<translate key="lang_btn_close">Close</translate>
</b-button>
<b-button variant="primary" type="submit" @click="doSubmit" :disabled="$v.form.$invalid">
<translate key="lang_btn_save">Save Changes</translate>
</b-button>
</template>
</b-modal>
<b-tabs content-class="mt-3">
<form-basic-info :form="$v.form"></form-basic-info>
<form-schedule :form="$v.form" :schedule-items="form.schedule_items"
:station-time-zone="stationTimeZone"></form-schedule>
</b-tabs>
</modal-form>
</template>
<script>
import {required} from 'vuelidate/dist/validators.min.js';