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