Move several EditModals to Composition API.
This commit is contained in:
Buster Neece
parent
0c938b260b
commit
7d593f7ab3
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<modal-form
|
||||
ref="modal"
|
||||
ref="$modal"
|
||||
:loading="loading"
|
||||
:title="langTitle"
|
||||
:error="error"
|
||||
|
|
@ -26,91 +26,108 @@
|
|||
</modal-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import ModalForm from "~/components/Common/ModalForm.vue";
|
||||
import {computed, ref} from "vue";
|
||||
import {baseEditModalProps, useBaseEditModal} from "~/functions/useBaseEditModal";
|
||||
import {useTranslate} from "~/vendor/gettext";
|
||||
import {required} from '@vuelidate/validators';
|
||||
import BaseEditModal from '~/components/Common/BaseEditModal';
|
||||
import AdminPermissionsGlobalForm from "./Form/GlobalForm";
|
||||
import AdminPermissionsStationForm from "./Form/StationForm";
|
||||
import {forEach, map} from 'lodash';
|
||||
import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
|
||||
|
||||
/* TODO Options API */
|
||||
const props = defineProps({
|
||||
...baseEditModalProps,
|
||||
stations: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
globalPermissions: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
stationPermissions: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'AdminPermissionsEditModal',
|
||||
components: {AdminPermissionsStationForm, AdminPermissionsGlobalForm},
|
||||
mixins: [BaseEditModal],
|
||||
props: {
|
||||
stations: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
globalPermissions: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
stationPermissions: {
|
||||
type: Object,
|
||||
required: true
|
||||
const emit = defineEmits(['relist']);
|
||||
|
||||
const $modal = ref(); // Template Ref
|
||||
|
||||
const {
|
||||
loading,
|
||||
error,
|
||||
isEditMode,
|
||||
v$,
|
||||
clearContents,
|
||||
create,
|
||||
edit,
|
||||
doSubmit,
|
||||
close
|
||||
} = useBaseEditModal(
|
||||
props,
|
||||
emit,
|
||||
$modal,
|
||||
{
|
||||
'name': {required},
|
||||
'permissions': {
|
||||
'global': {},
|
||||
'station': {},
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const {form, resetForm, v$} = useVuelidateOnForm(
|
||||
{
|
||||
'name': {required},
|
||||
'permissions': {
|
||||
'global': {},
|
||||
'station': {},
|
||||
}
|
||||
},
|
||||
{
|
||||
'name': '',
|
||||
'permissions': {
|
||||
'global': [],
|
||||
'station': [],
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
form,
|
||||
resetForm,
|
||||
v$
|
||||
{
|
||||
'name': '',
|
||||
'permissions': {
|
||||
'global': [],
|
||||
'station': [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
langTitle() {
|
||||
return this.isEditMode
|
||||
? this.$gettext('Edit Role')
|
||||
: this.$gettext('Add Role');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
populateForm(data) {
|
||||
this.form.name = data.name;
|
||||
this.form.permissions.global = data.permissions.global;
|
||||
this.form.permissions.station = map(data.permissions.station, (permissions, stationId) => {
|
||||
return {
|
||||
'station_id': stationId,
|
||||
'permissions': permissions
|
||||
};
|
||||
});
|
||||
},
|
||||
getSubmittableFormData() {
|
||||
let form = {
|
||||
name: this.form.name,
|
||||
{
|
||||
populateForm(data, formRef) {
|
||||
formRef.value = {
|
||||
name: data.name,
|
||||
permissions: {
|
||||
global: this.form.permissions.global,
|
||||
global: data.permissions.global,
|
||||
station: map(data.permissions.station, (permissions, stationId) => {
|
||||
return {
|
||||
'station_id': stationId,
|
||||
'permissions': permissions
|
||||
};
|
||||
})
|
||||
}
|
||||
};
|
||||
},
|
||||
getSubmittableFormData(formValue) {
|
||||
let form = {
|
||||
name: formValue.name,
|
||||
permissions: {
|
||||
global: formValue.permissions.global,
|
||||
station: {}
|
||||
}
|
||||
};
|
||||
|
||||
forEach(this.form.permissions.station, (row) => {
|
||||
forEach(formValue.permissions.station, (row) => {
|
||||
form.permissions.station[row.station_id] = row.permissions;
|
||||
});
|
||||
|
||||
return form;
|
||||
},
|
||||
}
|
||||
};
|
||||
);
|
||||
|
||||
const {$gettext} = useTranslate();
|
||||
|
||||
const langTitle = computed(() => {
|
||||
return isEditMode.value
|
||||
? $gettext('Edit Role')
|
||||
: $gettext('Add Role');
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
create,
|
||||
edit,
|
||||
close
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<modal-form
|
||||
ref="modal"
|
||||
ref="$modal"
|
||||
:loading="loading"
|
||||
:title="langTitle"
|
||||
:error="error"
|
||||
:disable-save-button="v$.form.$invalid"
|
||||
:disable-save-button="v$.$invalid"
|
||||
@submit="doSubmit"
|
||||
@hidden="clearContents"
|
||||
>
|
||||
|
|
@ -12,108 +12,125 @@
|
|||
content-class="mt-3"
|
||||
pills
|
||||
>
|
||||
<form-basic-info :form="v$.form" />
|
||||
<form-basic-info :form="v$" />
|
||||
<form-schedule
|
||||
v-model:schedule-items="form.schedule_items"
|
||||
:form="v$.form"
|
||||
:form="v$"
|
||||
:station-time-zone="stationTimeZone"
|
||||
/>
|
||||
<form-advanced
|
||||
v-if="enableAdvancedFeatures"
|
||||
:form="v$.form"
|
||||
:form="v$"
|
||||
/>
|
||||
</b-tabs>
|
||||
</modal-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
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";
|
||||
import {baseEditModalProps, useBaseEditModal} from "~/functions/useBaseEditModal";
|
||||
import {computed, ref} from "vue";
|
||||
import {useTranslate} from "~/vendor/gettext";
|
||||
import {useNotify} from "~/vendor/bootstrapVue";
|
||||
import ModalForm from "~/components/Common/ModalForm.vue";
|
||||
|
||||
/* TODO Options API */
|
||||
const props = defineProps({
|
||||
...baseEditModalProps,
|
||||
stationTimeZone: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
enableAdvancedFeatures: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'EditModal',
|
||||
components: {FormSchedule, FormBasicInfo, FormAdvanced},
|
||||
mixins: [BaseEditModal],
|
||||
props: {
|
||||
stationTimeZone: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
enableAdvancedFeatures: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['relist', 'needs-restart'],
|
||||
setup() {
|
||||
return {v$: useVuelidate()}
|
||||
},
|
||||
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();
|
||||
const emit = defineEmits(['relist', 'needs-restart']);
|
||||
|
||||
this.$emit('needs-restart');
|
||||
this.$emit('relist');
|
||||
const $modal = ref(); // Template Ref
|
||||
|
||||
this.close();
|
||||
const {notifySuccess} = useNotify();
|
||||
|
||||
const {
|
||||
loading,
|
||||
error,
|
||||
isEditMode,
|
||||
form,
|
||||
v$,
|
||||
clearContents,
|
||||
create,
|
||||
edit,
|
||||
doSubmit,
|
||||
close
|
||||
} = useBaseEditModal(
|
||||
props,
|
||||
emit,
|
||||
$modal,
|
||||
{
|
||||
'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': {}
|
||||
},
|
||||
{
|
||||
'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: () => {
|
||||
notifySuccess();
|
||||
emit('relist');
|
||||
emit('needs-restart');
|
||||
close();
|
||||
},
|
||||
}
|
||||
};
|
||||
);
|
||||
|
||||
const {$gettext} = useTranslate();
|
||||
|
||||
const langTitle = computed(() => {
|
||||
return isEditMode.value
|
||||
? $gettext('Edit Playlist')
|
||||
: $gettext('Add Playlist');
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
create,
|
||||
edit,
|
||||
close
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<modal-form
|
||||
ref="modal"
|
||||
ref="$modal"
|
||||
:loading="loading"
|
||||
:title="langTitle"
|
||||
:error="error"
|
||||
:disable-save-button="v$.form.$invalid"
|
||||
:disable-save-button="v$.$invalid"
|
||||
@submit="doSubmit"
|
||||
@hidden="clearContents"
|
||||
>
|
||||
|
|
@ -12,89 +12,103 @@
|
|||
content-class="mt-3"
|
||||
pills
|
||||
>
|
||||
<remote-form-basic-info :form="v$.form" />
|
||||
<remote-form-basic-info :form="v$" />
|
||||
|
||||
<remote-form-auto-dj :form="v$.form" />
|
||||
<remote-form-auto-dj :form="v$" />
|
||||
</b-tabs>
|
||||
</modal-form>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
<script setup>
|
||||
import {required} from '@vuelidate/validators';
|
||||
import BaseEditModal from '~/components/Common/BaseEditModal';
|
||||
import RemoteFormBasicInfo from "./Form/BasicInfo";
|
||||
import RemoteFormAutoDj from "./Form/AutoDj";
|
||||
import {REMOTE_ICECAST} from "~/components/Entity/RadioAdapters";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import {baseEditModalProps, useBaseEditModal} from "~/functions/useBaseEditModal";
|
||||
import {computed, ref} from "vue";
|
||||
import {useNotify} from "~/vendor/bootstrapVue";
|
||||
import {useTranslate} from "~/vendor/gettext";
|
||||
import ModalForm from "~/components/Common/ModalForm.vue";
|
||||
|
||||
/* TODO Options API */
|
||||
const props = defineProps({
|
||||
...baseEditModalProps,
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'RemoteEditModal',
|
||||
components: {
|
||||
RemoteFormAutoDj,
|
||||
RemoteFormBasicInfo
|
||||
},
|
||||
mixins: [BaseEditModal],
|
||||
emits: ['relist', 'needs-restart'],
|
||||
setup() {
|
||||
return {v$: useVuelidate()}
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
form: {
|
||||
display_name: {},
|
||||
is_visible_on_public_pages: {},
|
||||
type: {required},
|
||||
enable_autodj: {},
|
||||
autodj_format: {},
|
||||
autodj_bitrate: {},
|
||||
custom_listen_url: {},
|
||||
url: {required},
|
||||
mount: {},
|
||||
admin_password: {},
|
||||
source_port: {},
|
||||
source_mount: {},
|
||||
source_username: {},
|
||||
source_password: {},
|
||||
is_public: {},
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
langTitle() {
|
||||
return this.isEditMode
|
||||
? this.$gettext('Edit Remote Relay')
|
||||
: this.$gettext('Add Remote Relay');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetForm() {
|
||||
this.form = {
|
||||
display_name: null,
|
||||
is_visible_on_public_pages: true,
|
||||
type: REMOTE_ICECAST,
|
||||
enable_autodj: false,
|
||||
autodj_format: null,
|
||||
autodj_bitrate: null,
|
||||
custom_listen_url: null,
|
||||
url: null,
|
||||
mount: null,
|
||||
admin_password: null,
|
||||
source_port: null,
|
||||
source_mount: null,
|
||||
source_username: null,
|
||||
source_password: null,
|
||||
is_public: false
|
||||
};
|
||||
},
|
||||
onSubmitSuccess() {
|
||||
this.$notifySuccess();
|
||||
const emit = defineEmits(['relist', 'needs-restart']);
|
||||
|
||||
this.$emit('needs-restart');
|
||||
this.$emit('relist');
|
||||
const $modal = ref(); // Template Ref
|
||||
|
||||
this.close();
|
||||
const {notifySuccess} = useNotify();
|
||||
|
||||
const {
|
||||
loading,
|
||||
error,
|
||||
isEditMode,
|
||||
v$,
|
||||
clearContents,
|
||||
create,
|
||||
edit,
|
||||
doSubmit,
|
||||
close
|
||||
} = useBaseEditModal(
|
||||
props,
|
||||
emit,
|
||||
$modal,
|
||||
{
|
||||
display_name: {},
|
||||
is_visible_on_public_pages: {},
|
||||
type: {required},
|
||||
enable_autodj: {},
|
||||
autodj_format: {},
|
||||
autodj_bitrate: {},
|
||||
custom_listen_url: {},
|
||||
url: {required},
|
||||
mount: {},
|
||||
admin_password: {},
|
||||
source_port: {},
|
||||
source_mount: {},
|
||||
source_username: {},
|
||||
source_password: {},
|
||||
is_public: {},
|
||||
},
|
||||
{
|
||||
display_name: null,
|
||||
is_visible_on_public_pages: true,
|
||||
type: REMOTE_ICECAST,
|
||||
enable_autodj: false,
|
||||
autodj_format: null,
|
||||
autodj_bitrate: null,
|
||||
custom_listen_url: null,
|
||||
url: null,
|
||||
mount: null,
|
||||
admin_password: null,
|
||||
source_port: null,
|
||||
source_mount: null,
|
||||
source_username: null,
|
||||
source_password: null,
|
||||
is_public: false
|
||||
},
|
||||
{
|
||||
onSubmitSuccess: () => {
|
||||
notifySuccess();
|
||||
emit('relist');
|
||||
emit('needs-restart');
|
||||
close();
|
||||
},
|
||||
}
|
||||
};
|
||||
);
|
||||
|
||||
const {$gettext} = useTranslate();
|
||||
|
||||
const langTitle = computed(() => {
|
||||
return isEditMode.value
|
||||
? $gettext('Edit Remote Relay')
|
||||
: $gettext('Add Remote Relay');
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
create,
|
||||
edit,
|
||||
close
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -142,10 +142,6 @@ const props = defineProps({
|
|||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
stationFrontendType: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,58 +1,73 @@
|
|||
<template>
|
||||
<modal-form
|
||||
ref="modal"
|
||||
ref="$modal"
|
||||
:loading="loading"
|
||||
:title="langTitle"
|
||||
:error="error"
|
||||
:disable-save-button="v$.form.$invalid"
|
||||
:disable-save-button="v$.$invalid"
|
||||
@submit="doSubmit"
|
||||
@hidden="clearContents"
|
||||
>
|
||||
<sftp-users-form
|
||||
:form="v$.form"
|
||||
:form="v$"
|
||||
:is-edit-mode="isEditMode"
|
||||
/>
|
||||
</modal-form>
|
||||
</template>
|
||||
<script>
|
||||
import {required} from '@vuelidate/validators';
|
||||
import BaseEditModal from '~/components/Common/BaseEditModal';
|
||||
|
||||
<script setup>
|
||||
import SftpUsersForm from "./Form";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import {baseEditModalProps, useBaseEditModal} from "~/functions/useBaseEditModal";
|
||||
import {computed, ref} from "vue";
|
||||
import {required} from "@vuelidate/validators";
|
||||
import {useTranslate} from "~/vendor/gettext";
|
||||
import ModalForm from "~/components/Common/ModalForm.vue";
|
||||
|
||||
/* TODO Options API */
|
||||
const props = defineProps({
|
||||
...baseEditModalProps,
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'SftpUsersEditModal',
|
||||
components: {SftpUsersForm},
|
||||
mixins: [BaseEditModal],
|
||||
setup() {
|
||||
return {v$: useVuelidate()}
|
||||
const emit = defineEmits(['relist']);
|
||||
|
||||
const $modal = ref(); // Template Ref
|
||||
|
||||
const {
|
||||
loading,
|
||||
error,
|
||||
isEditMode,
|
||||
v$,
|
||||
clearContents,
|
||||
create,
|
||||
edit,
|
||||
doSubmit,
|
||||
close
|
||||
} = useBaseEditModal(
|
||||
props,
|
||||
emit,
|
||||
$modal,
|
||||
{
|
||||
username: {required},
|
||||
password: isEditMode.value ? {} : {required},
|
||||
publicKeys: {}
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
form: {
|
||||
username: {required},
|
||||
password: this.isEditMode ? {} : {required},
|
||||
publicKeys: {}
|
||||
}
|
||||
};
|
||||
{
|
||||
username: '',
|
||||
password: null,
|
||||
publicKeys: null
|
||||
},
|
||||
computed: {
|
||||
langTitle() {
|
||||
return this.isEditMode
|
||||
? this.$gettext('Edit SFTP User')
|
||||
: this.$gettext('Add SFTP User');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetForm() {
|
||||
this.form = {
|
||||
username: '',
|
||||
password: null,
|
||||
publicKeys: null
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
);
|
||||
|
||||
const {$gettext} = useTranslate();
|
||||
|
||||
const langTitle = computed(() => {
|
||||
return isEditMode.value
|
||||
? $gettext('Edit SFTP User')
|
||||
: $gettext('Add SFTP User');
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
create,
|
||||
edit,
|
||||
close
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export function useBaseEditModal(
|
|||
|
||||
const populateForm = (data) => {
|
||||
if (typeof options.populateForm === 'function') {
|
||||
return options.populateForm();
|
||||
return options.populateForm(data, form);
|
||||
}
|
||||
|
||||
form.value = mergeExisting(form.value, data);
|
||||
|
|
@ -92,7 +92,7 @@ export function useBaseEditModal(
|
|||
|
||||
const getSubmittableFormData = () => {
|
||||
if (typeof options.getSubmittableFormData === 'function') {
|
||||
return options.getSubmittableFormData();
|
||||
return options.getSubmittableFormData(form.value);
|
||||
}
|
||||
|
||||
return form.value;
|
||||
|
|
|
|||
Loading…
Reference in New Issue