AzuraCast/frontend/vue/components/Stations/Playlists/EditModal.vue

98 lines
2.9 KiB
Vue

<template>
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
@submit="doSubmit" @hidden="clearContents">
<b-tabs content-class="mt-3" pills>
<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>
<form-advanced :form="v$.form" v-if="enableAdvancedFeatures"></form-advanced>
</b-tabs>
</modal-form>
</template>
<script>
import {required} from '@vuelidate/validators';
import FormBasicInfo from './Form/BasicInfo';
import FormSchedule from './Form/Schedule';
import FormAdvanced from './Form/Advanced';
import BaseEditModal from '~/components/Common/BaseEditModal';
import useVuelidate from "@vuelidate/core";
export default {
name: 'EditModal',
emits: ['needs-restart'],
components: {FormSchedule, FormBasicInfo, FormAdvanced},
setup() {
return {v$: useVuelidate()}
},
mixins: [BaseEditModal],
props: {
stationTimeZone: String,
enableAdvancedFeatures: Boolean
},
computed: {
langTitle() {
return this.isEditMode
? this.$gettext('Edit Playlist')
: this.$gettext('Add Playlist');
}
},
validations: {
form: {
'name': {required},
'is_enabled': {},
'include_in_on_demand': {},
'weight': {},
'type': {},
'source': {},
'order': {},
'remote_url': {},
'remote_type': {},
'remote_buffer': {},
'is_jingle': {},
'play_per_songs': {},
'play_per_minutes': {},
'play_per_hour_minute': {},
'include_in_requests': {},
'avoid_duplicates': {},
'backend_options': {},
'schedule_items': {}
}
},
methods: {
resetForm() {
this.form = {
'name': '',
'is_enabled': true,
'include_in_on_demand': false,
'weight': 3,
'type': 'default',
'source': 'songs',
'order': 'shuffle',
'remote_url': null,
'remote_type': 'stream',
'remote_buffer': 0,
'is_jingle': false,
'play_per_songs': 0,
'play_per_minutes': 0,
'play_per_hour_minute': 0,
'include_in_requests': true,
'avoid_duplicates': true,
'backend_options': [],
'schedule_items': []
};
},
onSubmitSuccess() {
this.$notifySuccess();
this.$emit('needs-restart');
this.$emit('relist');
this.close();
},
}
};
</script>