mirror of
https://github.com/AzuraCast/AzuraCast.git
synced 2024-06-13 20:56:36 +00:00
Migrate components over to Composition API.
This commit is contained in:
parent
3ce06c1d16
commit
123d0f1f8b
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<b-modal size="md" centered id="run_backup_modal" ref="modal" :title="langTitle"
|
<b-modal size="md" centered id="run_backup_modal" ref="modal" :title="$gettext('Run Manual Backup')"
|
||||||
@hidden="clearContents">
|
@hidden="clearContents">
|
||||||
<template #default="slotProps">
|
<template #default="slotProps">
|
||||||
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
|
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
|
||||||
|
@ -8,7 +8,7 @@
|
||||||
<b-form-fieldset>
|
<b-form-fieldset>
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<b-wrapped-form-group class="col-md-12" id="edit_form_storage_location"
|
<b-wrapped-form-group class="col-md-12" id="edit_form_storage_location"
|
||||||
:field="v$.form.storage_location">
|
:field="v$.storage_location">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Storage Location') }}
|
{{ $gettext('Storage Location') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
</b-wrapped-form-group>
|
</b-wrapped-form-group>
|
||||||
|
|
||||||
<b-wrapped-form-group class="col-md-12" id="edit_form_path"
|
<b-wrapped-form-group class="col-md-12" id="edit_form_path"
|
||||||
:field="v$.form.path">
|
:field="v$.path">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('File Name') }}
|
{{ $gettext('File Name') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -44,7 +44,7 @@
|
||||||
</b-wrapped-form-group>
|
</b-wrapped-form-group>
|
||||||
|
|
||||||
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_exclude_media"
|
<b-wrapped-form-checkbox class="col-md-12" id="edit_form_exclude_media"
|
||||||
:field="v$.form.exclude_media">
|
:field="v$.exclude_media">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Exclude Media from Backup') }}
|
{{ $gettext('Exclude Media from Backup') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -70,7 +70,7 @@
|
||||||
<b-button variant="default" type="button" @click="close">
|
<b-button variant="default" type="button" @click="close">
|
||||||
{{ $gettext('Close') }}
|
{{ $gettext('Close') }}
|
||||||
</b-button>
|
</b-button>
|
||||||
<b-button v-if="logUrl === null" :variant="(v$.form.$invalid) ? 'danger' : 'primary'" type="submit"
|
<b-button v-if="logUrl === null" :variant="(v$.$invalid) ? 'danger' : 'primary'" type="submit"
|
||||||
@click="submit">
|
@click="submit">
|
||||||
{{ $gettext('Run Manual Backup') }}
|
{{ $gettext('Run Manual Backup') }}
|
||||||
</b-button>
|
</b-button>
|
||||||
|
@ -79,7 +79,7 @@
|
||||||
</b-modal>
|
</b-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import useVuelidate from "@vuelidate/core";
|
import useVuelidate from "@vuelidate/core";
|
||||||
import BFormFieldset from "~/components/Form/BFormFieldset";
|
import BFormFieldset from "~/components/Form/BFormFieldset";
|
||||||
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
||||||
|
@ -87,83 +87,81 @@ import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton";
|
||||||
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
|
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
|
||||||
import objectToFormOptions from "~/functions/objectToFormOptions";
|
import objectToFormOptions from "~/functions/objectToFormOptions";
|
||||||
import StreamingLogView from "~/components/Common/StreamingLogView";
|
import StreamingLogView from "~/components/Common/StreamingLogView";
|
||||||
|
import {computed, ref} from "vue";
|
||||||
|
import {useNotify} from "~/vendor/bootstrapVue";
|
||||||
|
import {useAxios} from "~/vendor/axios";
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
name: 'AdminBackupsRunBackupModal',
|
runBackupUrl: String,
|
||||||
emits: ['relist'],
|
storageLocations: Object
|
||||||
props: {
|
});
|
||||||
runBackupUrl: String,
|
|
||||||
storageLocations: Object
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
return {v$: useVuelidate()}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
BFormFieldset,
|
|
||||||
BWrappedFormGroup,
|
|
||||||
BWrappedFormCheckbox,
|
|
||||||
InvisibleSubmitButton,
|
|
||||||
StreamingLogView
|
|
||||||
},
|
|
||||||
validations: {
|
|
||||||
form: {
|
|
||||||
'storage_location': {},
|
|
||||||
'path': {},
|
|
||||||
'exclude_media': {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
langTitle() {
|
|
||||||
return this.$gettext('Run Manual Backup');
|
|
||||||
},
|
|
||||||
storageLocationOptions() {
|
|
||||||
return objectToFormOptions(this.storageLocations);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
logUrl: null,
|
|
||||||
error: null,
|
|
||||||
form: {},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
open() {
|
|
||||||
this.$refs.modal.show();
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
this.$refs.modal.hide();
|
|
||||||
this.$emit('relist');
|
|
||||||
},
|
|
||||||
submit() {
|
|
||||||
this.v$.$touch();
|
|
||||||
if (this.v$.$errors.length > 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.error = null;
|
const emit = defineEmits(['relist']);
|
||||||
this.$wrapWithLoading(
|
|
||||||
this.axios({
|
|
||||||
method: 'POST',
|
|
||||||
url: this.runBackupUrl,
|
|
||||||
data: this.form
|
|
||||||
})
|
|
||||||
).then((resp) => {
|
|
||||||
this.logUrl = resp.data.links.log;
|
|
||||||
}).catch((error) => {
|
|
||||||
this.error = error.response.data.message;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
clearContents() {
|
|
||||||
this.logUrl = null;
|
|
||||||
this.error = null;
|
|
||||||
|
|
||||||
this.form = {
|
const storageLocationOptions = computed(() => {
|
||||||
storage_location: null,
|
return objectToFormOptions(props.storageLocations);
|
||||||
path: null,
|
});
|
||||||
exclude_media: false
|
|
||||||
};
|
const logUrl = ref(null);
|
||||||
}
|
const error = ref(null);
|
||||||
}
|
const modal = ref(); // BModal
|
||||||
|
|
||||||
|
const blankForm = {
|
||||||
|
storage_location: null,
|
||||||
|
path: '',
|
||||||
|
exclude_media: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const form = ref({...blankForm});
|
||||||
|
|
||||||
|
const validations = {
|
||||||
|
'storage_location': {},
|
||||||
|
'path': {},
|
||||||
|
'exclude_media': {}
|
||||||
|
};
|
||||||
|
|
||||||
|
const v$ = useVuelidate(validations, form);
|
||||||
|
|
||||||
|
const open = () => {
|
||||||
|
modal.value.show();
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
modal.value.hide();
|
||||||
|
emit('relist');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const {wrapWithLoading} = useNotify();
|
||||||
|
const {axios} = useAxios();
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
v$.value.$touch();
|
||||||
|
if (v$.value.$errors.length > 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
error.value = null;
|
||||||
|
wrapWithLoading(
|
||||||
|
axios({
|
||||||
|
method: 'POST',
|
||||||
|
url: props.runBackupUrl,
|
||||||
|
data: form.value
|
||||||
|
})
|
||||||
|
).then((resp) => {
|
||||||
|
logUrl.value = resp.data.links.log;
|
||||||
|
}).catch((error) => {
|
||||||
|
error.value = error.response.data.message;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearContents = () => {
|
||||||
|
logUrl.value = null;
|
||||||
|
error.value = null;
|
||||||
|
|
||||||
|
form.value = {...blankForm};
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
open
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
<b-form-group>
|
<b-form-group>
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<b-wrapped-form-group class="col-md-6" id="edit_form_public_theme"
|
<b-wrapped-form-group class="col-md-6" id="edit_form_public_theme"
|
||||||
:field="v$.form.public_theme">
|
:field="v$.public_theme">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Base Theme for Public Pages') }}
|
{{ $gettext('Base Theme for Public Pages') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
<b-col md="6">
|
<b-col md="6">
|
||||||
<b-wrapped-form-checkbox class="mb-2" id="form_edit_hide_album_art"
|
<b-wrapped-form-checkbox class="mb-2" id="form_edit_hide_album_art"
|
||||||
:field="v$.form.hide_album_art">
|
:field="v$.hide_album_art">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Hide Album Art on Public Pages') }}
|
{{ $gettext('Hide Album Art on Public Pages') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -44,7 +44,7 @@
|
||||||
</b-wrapped-form-checkbox>
|
</b-wrapped-form-checkbox>
|
||||||
|
|
||||||
<b-wrapped-form-checkbox id="form_edit_hide_product_name"
|
<b-wrapped-form-checkbox id="form_edit_hide_product_name"
|
||||||
:field="v$.form.hide_product_name">
|
:field="v$.hide_product_name">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Hide AzuraCast Branding on Public Pages') }}
|
{{ $gettext('Hide AzuraCast Branding on Public Pages') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -57,7 +57,7 @@
|
||||||
</b-col>
|
</b-col>
|
||||||
|
|
||||||
<b-wrapped-form-group class="col-md-6" id="form_edit_homepage_redirect_url"
|
<b-wrapped-form-group class="col-md-6" id="form_edit_homepage_redirect_url"
|
||||||
:field="v$.form.homepage_redirect_url">
|
:field="v$.homepage_redirect_url">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Homepage Redirect URL') }}
|
{{ $gettext('Homepage Redirect URL') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -69,7 +69,7 @@
|
||||||
</b-wrapped-form-group>
|
</b-wrapped-form-group>
|
||||||
|
|
||||||
<b-wrapped-form-group class="col-md-6" id="form_edit_default_album_art_url"
|
<b-wrapped-form-group class="col-md-6" id="form_edit_default_album_art_url"
|
||||||
:field="v$.form.default_album_art_url">
|
:field="v$.default_album_art_url">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Default Album Art URL') }}
|
{{ $gettext('Default Album Art URL') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -81,7 +81,7 @@
|
||||||
</b-wrapped-form-group>
|
</b-wrapped-form-group>
|
||||||
|
|
||||||
<b-wrapped-form-group class="col-md-12" id="edit_form_public_custom_css"
|
<b-wrapped-form-group class="col-md-12" id="edit_form_public_custom_css"
|
||||||
:field="v$.form.public_custom_css">
|
:field="v$.public_custom_css">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Custom CSS for Public Pages') }}
|
{{ $gettext('Custom CSS for Public Pages') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -97,7 +97,7 @@
|
||||||
</b-wrapped-form-group>
|
</b-wrapped-form-group>
|
||||||
|
|
||||||
<b-wrapped-form-group class="col-md-12" id="edit_form_public_custom_js"
|
<b-wrapped-form-group class="col-md-12" id="edit_form_public_custom_js"
|
||||||
:field="v$.form.public_custom_js">
|
:field="v$.public_custom_js">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Custom JS for Public Pages') }}
|
{{ $gettext('Custom JS for Public Pages') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -113,7 +113,7 @@
|
||||||
</b-wrapped-form-group>
|
</b-wrapped-form-group>
|
||||||
|
|
||||||
<b-wrapped-form-group class="col-md-12" id="edit_form_internal_custom_css"
|
<b-wrapped-form-group class="col-md-12" id="edit_form_internal_custom_css"
|
||||||
:field="v$.form.internal_custom_css">
|
:field="v$.internal_custom_css">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Custom CSS for Internal Pages') }}
|
{{ $gettext('Custom CSS for Internal Pages') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -139,108 +139,105 @@
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import useVuelidate from "@vuelidate/core";
|
import useVuelidate from "@vuelidate/core";
|
||||||
import CodemirrorTextarea from "~/components/Common/CodemirrorTextarea";
|
import CodemirrorTextarea from "~/components/Common/CodemirrorTextarea";
|
||||||
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
||||||
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
|
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
|
||||||
|
import {computed, onMounted, ref} from "vue";
|
||||||
|
import gettext from "~/vendor/gettext";
|
||||||
|
import {useAxios} from "~/vendor/axios";
|
||||||
|
import mergeExisting from "~/functions/mergeExisting";
|
||||||
|
import {useNotify} from "~/vendor/bootstrapVue";
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
name: 'BrandingForm',
|
apiUrl: String,
|
||||||
props: {
|
});
|
||||||
apiUrl: String
|
|
||||||
},
|
const loading = ref(true);
|
||||||
components: {
|
const error = ref(null);
|
||||||
BWrappedFormCheckbox,
|
|
||||||
BWrappedFormGroup,
|
const blankForm = {
|
||||||
CodemirrorTextarea,
|
'public_theme': '',
|
||||||
},
|
'hide_album_art': false,
|
||||||
setup() {
|
'homepage_redirect_url': '',
|
||||||
return {v$: useVuelidate()}
|
'default_album_art_url': '',
|
||||||
},
|
'hide_product_name': false,
|
||||||
data() {
|
'public_custom_css': '',
|
||||||
return {
|
'public_custom_js': '',
|
||||||
loading: true,
|
'internal_custom_css': ''
|
||||||
error: null,
|
};
|
||||||
form: {},
|
|
||||||
};
|
const form = ref({...blankForm});
|
||||||
},
|
|
||||||
computed: {
|
const validations = {
|
||||||
publicThemeOptions() {
|
'public_theme': {},
|
||||||
return [
|
'hide_album_art': {},
|
||||||
{
|
'homepage_redirect_url': {},
|
||||||
text: this.$gettext('Prefer System Default'),
|
'default_album_art_url': {},
|
||||||
value: 'browser',
|
'hide_product_name': {},
|
||||||
},
|
'public_custom_css': {},
|
||||||
{
|
'public_custom_js': {},
|
||||||
text: this.$gettext('Light'),
|
'internal_custom_css': {}
|
||||||
value: 'light',
|
};
|
||||||
},
|
|
||||||
{
|
const v$ = useVuelidate(validations, form);
|
||||||
text: this.$gettext('Dark'),
|
|
||||||
value: 'dark',
|
const {$gettext} = gettext;
|
||||||
}
|
|
||||||
];
|
const publicThemeOptions = computed(() => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
text: $gettext('Prefer System Default'),
|
||||||
|
value: 'browser',
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
validations: {
|
text: $gettext('Light'),
|
||||||
form: {
|
value: 'light',
|
||||||
'public_theme': {},
|
},
|
||||||
'hide_album_art': {},
|
{
|
||||||
'homepage_redirect_url': {},
|
text: $gettext('Dark'),
|
||||||
'default_album_art_url': {},
|
value: 'dark',
|
||||||
'hide_product_name': {},
|
|
||||||
'public_custom_css': {},
|
|
||||||
'public_custom_js': {},
|
|
||||||
'internal_custom_css': {}
|
|
||||||
}
|
}
|
||||||
},
|
];
|
||||||
mounted() {
|
});
|
||||||
this.relist();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
relist() {
|
|
||||||
this.v$.$reset();
|
|
||||||
this.loading = true;
|
|
||||||
|
|
||||||
this.axios.get(this.apiUrl).then((resp) => {
|
const {axios} = useAxios();
|
||||||
this.populateForm(resp.data);
|
|
||||||
this.loading = false;
|
|
||||||
}).catch(() => {
|
|
||||||
this.close();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
populateForm(data) {
|
|
||||||
this.form = {
|
|
||||||
'public_theme': data.public_theme,
|
|
||||||
'hide_album_art': data.hide_album_art,
|
|
||||||
'homepage_redirect_url': data.homepage_redirect_url,
|
|
||||||
'default_album_art_url': data.default_album_art_url,
|
|
||||||
'hide_product_name': data.hide_product_name,
|
|
||||||
'public_custom_css': data.public_custom_css,
|
|
||||||
'public_custom_js': data.public_custom_js,
|
|
||||||
'internal_custom_css': data.internal_custom_css
|
|
||||||
}
|
|
||||||
},
|
|
||||||
submit() {
|
|
||||||
this.v$.$touch();
|
|
||||||
if (this.v$.$errors.length > 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$wrapWithLoading(
|
const populateForm = (data) => {
|
||||||
this.axios({
|
form.value = mergeExisting(form.value, data);
|
||||||
method: 'PUT',
|
};
|
||||||
url: this.apiUrl,
|
|
||||||
data: this.form
|
|
||||||
})
|
|
||||||
).then(() => {
|
|
||||||
this.$notifySuccess(this.$gettext('Changes saved.'));
|
|
||||||
this.relist();
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
const relist = () => {
|
||||||
|
v$.value.$reset();
|
||||||
|
form.value = {...blankForm};
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
axios.get(props.apiUrl).then((resp) => {
|
||||||
|
populateForm(resp.data);
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(relist);
|
||||||
|
|
||||||
|
const {wrapWithLoading, notifySuccess} = useNotify();
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
v$.value.$touch();
|
||||||
|
if (v$.value.$errors.length > 0) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
wrapWithLoading(
|
||||||
|
axios({
|
||||||
|
method: 'PUT',
|
||||||
|
url: props.apiUrl,
|
||||||
|
data: form.value
|
||||||
|
})
|
||||||
|
).then(() => {
|
||||||
|
notifySuccess($gettext('Changes saved.'));
|
||||||
|
relist();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -26,10 +26,12 @@ export default {
|
||||||
'auto_assign': ''
|
'auto_assign': ''
|
||||||
};
|
};
|
||||||
|
|
||||||
const form = ref(blankForm);
|
const form = ref({
|
||||||
|
...blankForm
|
||||||
|
});
|
||||||
|
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
form.value = blankForm;
|
form.value = {...blankForm};
|
||||||
}
|
}
|
||||||
|
|
||||||
const validations = {
|
const validations = {
|
||||||
|
|
|
@ -41,35 +41,30 @@
|
||||||
</b-form-group>
|
</b-form-group>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
||||||
import _ from 'lodash';
|
import {computed} from "vue";
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
name: 'AdminCustomFieldsForm',
|
form: Object,
|
||||||
components: {BWrappedFormGroup},
|
autoAssignTypes: Object
|
||||||
props: {
|
});
|
||||||
form: Object,
|
|
||||||
autoAssignTypes: Object
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
autoAssignOptions() {
|
|
||||||
let autoAssignOptions = [
|
|
||||||
{
|
|
||||||
text: this.$gettext('Disable'),
|
|
||||||
value: '',
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
_.forEach(this.autoAssignTypes, (typeName, typeKey) => {
|
const autoAssignOptions = computed(() => {
|
||||||
autoAssignOptions.push({
|
let autoAssignOptions = [
|
||||||
text: typeName,
|
{
|
||||||
value: typeKey
|
text: this.$gettext('Disable'),
|
||||||
});
|
value: '',
|
||||||
});
|
}
|
||||||
|
];
|
||||||
|
|
||||||
return autoAssignOptions;
|
_.forEach(this.autoAssignTypes, (typeName, typeKey) => {
|
||||||
},
|
autoAssignOptions.push({
|
||||||
}
|
text: typeName,
|
||||||
};
|
value: typeKey
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return autoAssignOptions;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.form.$invalid"
|
<modal-form ref="modal" :loading="loading" :title="langTitle" :error="error" :disable-save-button="v$.$invalid"
|
||||||
@submit="doSubmit" @hidden="clearContents">
|
@submit="doSubmit" @hidden="clearContents">
|
||||||
|
|
||||||
<b-tabs content-class="mt-3" pills>
|
<b-tabs content-class="mt-3" pills>
|
||||||
<admin-permissions-global-form :form="v$.form" :global-permissions="globalPermissions">
|
<admin-permissions-global-form :form="v$" :global-permissions="globalPermissions">
|
||||||
</admin-permissions-global-form>
|
</admin-permissions-global-form>
|
||||||
|
|
||||||
<admin-permissions-station-form :form="v$.form" :stations="stations"
|
<admin-permissions-station-form :form="v$" :stations="stations"
|
||||||
:station-permissions="stationPermissions">
|
:station-permissions="stationPermissions">
|
||||||
</admin-permissions-station-form>
|
</admin-permissions-station-form>
|
||||||
</b-tabs>
|
</b-tabs>
|
||||||
|
@ -21,19 +21,48 @@ 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 _ from 'lodash';
|
import _ from 'lodash';
|
||||||
|
import {ref} from "vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AdminPermissionsEditModal',
|
name: 'AdminPermissionsEditModal',
|
||||||
components: {AdminPermissionsStationForm, AdminPermissionsGlobalForm},
|
components: {AdminPermissionsStationForm, AdminPermissionsGlobalForm},
|
||||||
setup() {
|
|
||||||
return {v$: useVuelidate()}
|
|
||||||
},
|
|
||||||
mixins: [BaseEditModal],
|
mixins: [BaseEditModal],
|
||||||
props: {
|
props: {
|
||||||
stations: Object,
|
stations: Object,
|
||||||
globalPermissions: Object,
|
globalPermissions: Object,
|
||||||
stationPermissions: Object
|
stationPermissions: Object
|
||||||
},
|
},
|
||||||
|
setup() {
|
||||||
|
const blankForm = {
|
||||||
|
'name': '',
|
||||||
|
'permissions': {
|
||||||
|
'global': [],
|
||||||
|
'station': [],
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const form = ref({...blankForm});
|
||||||
|
|
||||||
|
const validations = {
|
||||||
|
'name': {required},
|
||||||
|
'permissions': {
|
||||||
|
'global': {},
|
||||||
|
'station': {},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
form.value = {...blankForm};
|
||||||
|
}
|
||||||
|
|
||||||
|
const v$ = useVuelidate(validations, form);
|
||||||
|
|
||||||
|
return {
|
||||||
|
form,
|
||||||
|
resetForm,
|
||||||
|
v$
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
langTitle() {
|
langTitle() {
|
||||||
return this.isEditMode
|
return this.isEditMode
|
||||||
|
@ -41,28 +70,8 @@ export default {
|
||||||
: this.$gettext('Add Role');
|
: this.$gettext('Add Role');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
validations() {
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
'name': {required},
|
|
||||||
'permissions': {
|
|
||||||
'global': {},
|
|
||||||
'station': {},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
resetForm() {
|
populateForm(data) {
|
||||||
this.form = {
|
|
||||||
'name': '',
|
|
||||||
'permissions': {
|
|
||||||
'global': [],
|
|
||||||
'station': [],
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
populateForm (data) {
|
|
||||||
this.form.name = data.name;
|
this.form.name = data.name;
|
||||||
this.form.permissions.global = data.permissions.global;
|
this.form.permissions.global = data.permissions.global;
|
||||||
this.form.permissions.station = _.map(data.permissions.station, (permissions, stationId) => {
|
this.form.permissions.station = _.map(data.permissions.station, (permissions, stationId) => {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<b-tab :title="langTabTitle" active>
|
<b-tab :title="$gettext('Global Permissions')" active>
|
||||||
<b-form-group>
|
<b-form-group>
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<b-wrapped-form-group class="col-md-12" id="edit_form_name" :field="form.name">
|
<b-wrapped-form-group class="col-md-12" id="edit_form_name" :field="form.name">
|
||||||
|
@ -29,29 +29,22 @@
|
||||||
</b-tab>
|
</b-tab>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
|
import {computed} from "vue";
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
name: 'AdminPermissionsGlobalForm',
|
form: Object,
|
||||||
components: {BWrappedFormGroup},
|
globalPermissions: Object
|
||||||
props: {
|
});
|
||||||
form: Object,
|
|
||||||
globalPermissions: Object
|
const globalPermissionOptions = computed(() => {
|
||||||
},
|
return _.map(props.globalPermissions, (permissionName, permissionKey) => {
|
||||||
computed: {
|
return {
|
||||||
langTabTitle() {
|
text: permissionName,
|
||||||
return this.$gettext('Global Permissions');
|
value: permissionKey
|
||||||
},
|
};
|
||||||
globalPermissionOptions() {
|
});
|
||||||
return _.map(this.globalPermissions, (permissionName, permissionKey) => {
|
});
|
||||||
return {
|
|
||||||
text: permissionName,
|
|
||||||
value: permissionKey
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<b-tab :title="langTabTitle">
|
<b-tab :title="$gettext('Station Permissions')">
|
||||||
<permissions-form-station-row
|
<permissions-form-station-row
|
||||||
v-for="(row, index) in form.permissions.$model.station" :key="index"
|
v-for="(row, index) in form.permissions.$model.station" :key="index"
|
||||||
:stations="stations" :station-permissions="stationPermissions"
|
:stations="stations" :station-permissions="stationPermissions"
|
||||||
|
@ -21,46 +21,35 @@
|
||||||
</b-tab>
|
</b-tab>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
|
||||||
import Icon from "~/components/Common/Icon";
|
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import PermissionsFormStationRow from "~/components/Admin/Permissions/Form/StationRow.vue";
|
import PermissionsFormStationRow from "~/components/Admin/Permissions/Form/StationRow.vue";
|
||||||
|
import {computed} from "vue";
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
name: 'AdminPermissionsStationForm',
|
form: Object,
|
||||||
components: {PermissionsFormStationRow, BWrappedFormGroup, Icon},
|
stations: Object,
|
||||||
props: {
|
stationPermissions: Object
|
||||||
form: Object,
|
});
|
||||||
stations: Object,
|
|
||||||
stationPermissions: Object
|
const remainingStations = computed(() => {
|
||||||
},
|
return _.pickBy(props.stations, (stationName, stationId) => {
|
||||||
computed: {
|
return !_.find(props.form.permissions.$model.station, {'station_id': stationId});
|
||||||
langTabTitle() {
|
});
|
||||||
return this.$gettext('Station Permissions');
|
});
|
||||||
},
|
|
||||||
remainingStations() {
|
const hasRemainingStations = computed(() => {
|
||||||
return _.pickBy(this.stations, (stationName, stationId) => {
|
return !_.isEmpty(remainingStations.value);
|
||||||
return !_.find(this.form.permissions.$model.station, {'station_id': stationId});
|
});
|
||||||
});
|
|
||||||
},
|
const remove = (index) => {
|
||||||
hasRemainingStations() {
|
props.form.permissions.$model.station.splice(index, 1);
|
||||||
return !_.isEmpty(this.remainingStations);
|
};
|
||||||
},
|
|
||||||
},
|
const add = (stationId) => {
|
||||||
methods: {
|
props.form.permissions.$model.station.push({
|
||||||
getStationName(stationId) {
|
'station_id': stationId,
|
||||||
return _.get(this.stations, stationId, null);
|
'permissions': []
|
||||||
},
|
});
|
||||||
remove (index) {
|
|
||||||
this.form.permissions.$model.station.splice(index, 1);
|
|
||||||
},
|
|
||||||
add(stationId) {
|
|
||||||
this.form.permissions.$model.station.push({
|
|
||||||
'station_id': stationId,
|
|
||||||
'permissions': []
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<b-wrapped-form-group class="col-md-12"
|
<b-wrapped-form-group class="col-md-12"
|
||||||
:id="'edit_form_station_permissions_'+row.station_id"
|
:id="'edit_form_station_permissions_'+row.station_id"
|
||||||
:field="v$.row.permissions">
|
:field="v$.permissions">
|
||||||
<template #label>
|
<template #label>
|
||||||
{{ $gettext('Station Permissions') }}
|
{{ $gettext('Station Permissions') }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -37,46 +37,41 @@
|
||||||
</b-card>
|
</b-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import useVuelidate from "@vuelidate/core";
|
import useVuelidate from "@vuelidate/core";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import Icon from "~/components/Common/Icon.vue";
|
import Icon from "~/components/Common/Icon.vue";
|
||||||
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
|
||||||
|
import {useVModel} from "@vueuse/core";
|
||||||
|
import {computed} from "vue";
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
name: 'PermissionsFormStationRow',
|
row: Object,
|
||||||
components: {BWrappedFormGroup, Icon},
|
stations: Object,
|
||||||
emits: ['remove'],
|
stationPermissions: Object
|
||||||
props: {
|
});
|
||||||
row: Object,
|
|
||||||
stations: Object,
|
const emit = defineEmits(['remove', 'update:row']);
|
||||||
stationPermissions: Object
|
|
||||||
},
|
const form = useVModel(props, 'row', emit);
|
||||||
setup() {
|
|
||||||
|
const validations = {
|
||||||
|
'station_id': {},
|
||||||
|
'permissions': {},
|
||||||
|
};
|
||||||
|
|
||||||
|
const v$ = useVuelidate(validations, form);
|
||||||
|
|
||||||
|
const stationPermissionOptions = computed(() => {
|
||||||
|
return _.map(props.stationPermissions, (permissionName, permissionKey) => {
|
||||||
return {
|
return {
|
||||||
v$: useVuelidate()
|
text: permissionName,
|
||||||
}
|
value: permissionKey
|
||||||
},
|
};
|
||||||
validations: {
|
})
|
||||||
row: {
|
});
|
||||||
'station_id': {},
|
|
||||||
'permissions': {},
|
const getStationName = (stationId) => {
|
||||||
}
|
return _.get(props.stations, stationId, null);
|
||||||
},
|
};
|
||||||
computed: {
|
|
||||||
stationPermissionOptions() {
|
|
||||||
return _.map(this.stationPermissions, (permissionName, permissionKey) => {
|
|
||||||
return {
|
|
||||||
text: permissionName,
|
|
||||||
value: permissionKey
|
|
||||||
};
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getStationName(stationId) {
|
|
||||||
return _.get(this.stations, stationId, null);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -91,46 +91,45 @@
|
||||||
</b-form-fieldset>
|
</b-form-fieldset>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
||||||
import BFormFieldset from "~/components/Form/BFormFieldset";
|
import BFormFieldset from "~/components/Form/BFormFieldset";
|
||||||
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
|
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
|
||||||
|
import {computed} from "vue";
|
||||||
|
import gettext from "~/vendor/gettext";
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
name: 'SettingsGeneralTab',
|
form: Object
|
||||||
components: {BWrappedFormCheckbox, BFormFieldset, BWrappedFormGroup},
|
});
|
||||||
props: {
|
|
||||||
form: Object
|
const {$gettext} = gettext;
|
||||||
},
|
|
||||||
computed: {
|
const historyKeepDaysOptions = computed(() => {
|
||||||
historyKeepDaysOptions() {
|
return [
|
||||||
return [
|
{
|
||||||
{
|
value: 14,
|
||||||
value: 14,
|
text: $gettext('Last 14 Days')
|
||||||
text: this.$gettext('Last 14 Days')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 30,
|
|
||||||
text: this.$gettext('Last 30 Days')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 60,
|
|
||||||
text: this.$gettext('Last 60 Days')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 365,
|
|
||||||
text: this.$gettext('Last Year')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 730,
|
|
||||||
text: this.$gettext('Last 2 Years')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 0,
|
|
||||||
text: this.$gettext('Indefinitely')
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
}
|
{
|
||||||
}
|
value: 30,
|
||||||
|
text: $gettext('Last 30 Days')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 60,
|
||||||
|
text: $gettext('Last 60 Days')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 365,
|
||||||
|
text: $gettext('Last Year')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 730,
|
||||||
|
text: $gettext('Last 2 Years')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 0,
|
||||||
|
text: $gettext('Indefinitely')
|
||||||
|
},
|
||||||
|
]
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -78,16 +78,12 @@
|
||||||
</b-form-fieldset>
|
</b-form-fieldset>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
||||||
import BFormFieldset from "~/components/Form/BFormFieldset";
|
import BFormFieldset from "~/components/Form/BFormFieldset";
|
||||||
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
|
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
name: 'SettingsSecurityPrivacyTab',
|
form: Object
|
||||||
components: {BWrappedFormCheckbox, BFormFieldset, BWrappedFormGroup},
|
});
|
||||||
props: {
|
|
||||||
form: Object
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -225,7 +225,7 @@
|
||||||
<admin-settings-test-message-modal :test-message-url="testMessageUrl"></admin-settings-test-message-modal>
|
<admin-settings-test-message-modal :test-message-url="testMessageUrl"></admin-settings-test-message-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BFormMarkup from "~/components/Form/BFormMarkup";
|
import BFormMarkup from "~/components/Form/BFormMarkup";
|
||||||
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
||||||
import BFormFieldset from "~/components/Form/BFormFieldset";
|
import BFormFieldset from "~/components/Form/BFormFieldset";
|
||||||
|
@ -233,55 +233,52 @@ import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
|
||||||
import AdminSettingsTestMessageModal from "~/components/Admin/Settings/TestMessageModal";
|
import AdminSettingsTestMessageModal from "~/components/Admin/Settings/TestMessageModal";
|
||||||
import Icon from "~/components/Common/Icon";
|
import Icon from "~/components/Common/Icon";
|
||||||
import StreamingLogModal from "~/components/Common/StreamingLogModal";
|
import StreamingLogModal from "~/components/Common/StreamingLogModal";
|
||||||
|
import {computed, ref} from "vue";
|
||||||
|
import gettext from "~/vendor/gettext";
|
||||||
|
import {useNotify} from "~/vendor/bootstrapVue";
|
||||||
|
import {useAxios} from "~/vendor/axios";
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
name: 'SettingsServicesTab',
|
form: Object,
|
||||||
components: {
|
releaseChannel: String,
|
||||||
StreamingLogModal,
|
testMessageUrl: String,
|
||||||
Icon,
|
acmeUrl: String,
|
||||||
AdminSettingsTestMessageModal,
|
});
|
||||||
BWrappedFormCheckbox,
|
|
||||||
BFormFieldset,
|
const {$gettext} = gettext;
|
||||||
BWrappedFormGroup,
|
|
||||||
BFormMarkup
|
const langReleaseChannel = computed(() => {
|
||||||
},
|
return (props.releaseChannel === 'stable')
|
||||||
props: {
|
? $gettext('Stable')
|
||||||
form: Object,
|
: $gettext('Rolling Release');
|
||||||
releaseChannel: String,
|
});
|
||||||
testMessageUrl: String,
|
|
||||||
acmeUrl: String,
|
const avatarServiceOptions = computed(() => {
|
||||||
},
|
return [
|
||||||
computed: {
|
{
|
||||||
langReleaseChannel() {
|
value: 'libravatar',
|
||||||
return (this.releaseChannel === 'stable')
|
text: 'Libravatar'
|
||||||
? this.$gettext('Stable')
|
|
||||||
: this.$gettext('Rolling Release');
|
|
||||||
},
|
},
|
||||||
avatarServiceOptions() {
|
{
|
||||||
return [
|
value: 'gravatar',
|
||||||
{
|
text: 'Gravatar'
|
||||||
value: 'libravatar',
|
|
||||||
text: 'Libravatar'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'gravatar',
|
|
||||||
text: 'Gravatar'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'disabled',
|
|
||||||
text: this.$gettext('Disabled')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
methods: {
|
value: 'disabled',
|
||||||
generateAcmeCert() {
|
text: $gettext('Disabled')
|
||||||
this.$wrapWithLoading(
|
|
||||||
this.axios.put(this.acmeUrl)
|
|
||||||
).then((resp) => {
|
|
||||||
this.$refs.acmeModal.show(resp.data.links.log);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
const acmeModal = ref(); // BModal
|
||||||
|
const {wrapWithLoading} = useNotify();
|
||||||
|
const {axios} = useAxios();
|
||||||
|
|
||||||
|
const generateAcmeCert = () => {
|
||||||
|
wrapWithLoading(
|
||||||
|
axios.put(props.acmeUrl)
|
||||||
|
).then((resp) => {
|
||||||
|
acmeModal.value.show(resp.data.links.log);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user