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