109 lines
3.4 KiB
Vue
109 lines
3.4 KiB
Vue
<script setup>
|
|
|
|
import { ref, useTemplateRef } from 'vue';
|
|
import { Dialog, TextInput, FormGroup, MultiSelect } from 'pankow';
|
|
import UsersModel from '../models/UsersModel.js';
|
|
import GroupsModel from '../models/GroupsModel.js';
|
|
import AppsModel from '../models/AppsModel.js';
|
|
|
|
const usersModel = UsersModel.create();
|
|
const groupsModel = GroupsModel.create();
|
|
const appsModel = AppsModel.create();
|
|
|
|
const emit = defineEmits([ 'success' ]);
|
|
|
|
const dialog = useTemplateRef('dialog');
|
|
|
|
// also determines if new or edit mode
|
|
const group = ref(null);
|
|
const busy = ref(false);
|
|
const formError = ref('');
|
|
const name = ref('');
|
|
const users = ref([]);
|
|
const allUsers = ref([]);
|
|
const apps = ref([]);
|
|
const allApps = ref([]);
|
|
|
|
async function onSubmit() {
|
|
busy.value = true;
|
|
formError.value = '';
|
|
|
|
if (group.value) {
|
|
const [error] = await groupsModel.update(group.value.id, name.value, users.value.map(u => u.id), apps.value.map(u => u.id));
|
|
if (error) {
|
|
formError.value = error.body ? error.body.message : 'Internal error';
|
|
busy.value = false;
|
|
return console.error(error);
|
|
}
|
|
} else {
|
|
const [error] = await groupsModel.add(name.value, users.value.map(u => u.id), apps.value.map(u => u.id));
|
|
if (error) {
|
|
formError.value = error.body ? error.body.message : 'Internal error';
|
|
busy.value = false;
|
|
return console.error(error);
|
|
}
|
|
}
|
|
|
|
emit('success');
|
|
dialog.value.close();
|
|
busy.value = false;
|
|
}
|
|
|
|
defineExpose({
|
|
async open(g = null) {
|
|
group.value = g;
|
|
name.value = g ? g.name : '';
|
|
|
|
let [error, result] = await usersModel.list();
|
|
if (error) return console.error(error);
|
|
result.forEach(u => u.label = (u.username || u.email));
|
|
allUsers.value = result;
|
|
users.value = g ? g.userIds.map(id => { return result.find(u => u.id === id); }) : [];
|
|
|
|
[error, result] = await appsModel.list();
|
|
if (error) return console.error(error);
|
|
result.forEach(a => a.label = (a.label || a.fqdn));
|
|
allApps.value = result;
|
|
apps.value = g ? g.appIds.map(id => { return result.find(a => a.id === id); }) : [];
|
|
|
|
dialog.value.open();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog ref="dialog"
|
|
:title="group ? $t('users.editGroupDialog.title', { name: group.name }) : $t('users.addGroupDialog.title')"
|
|
:confirm-label="group ? $t('main.dialog.save') : $t('users.group.addGroupAction')"
|
|
:confirm-busy="busy"
|
|
:confirm-active="!busy"
|
|
reject-style="secondary"
|
|
:reject-label="busy ? null : $t('main.dialog.cancel')"
|
|
@confirm="onSubmit()"
|
|
>
|
|
<p class="text-warning" v-if="group?.source">{{ $t('users.editGroupDialog.externalLdapWarning') }}</p>
|
|
<form @submit.prevent="onSubmit()" autocomplete="off">
|
|
<fieldset :disabled="busy">
|
|
<input type="submit" style="display: none;" />
|
|
|
|
<FormGroup>
|
|
<label for="nameInput">{{ $t('users.group.name') }}</label>
|
|
<TextInput id="nameInput" v-model="name" />
|
|
</FormGroup>
|
|
|
|
<FormGroup>
|
|
<label for="usersInput">{{ $t('users.group.users') }}</label>
|
|
<div v-if="group?.source"><span ng-repeat="user in groupEdit.selectedUsers"> {{ (user.username || user.email) }}</span></div>
|
|
<MultiSelect v-else v-model="users" :options="allUsers" />
|
|
</FormGroup>
|
|
|
|
<FormGroup>
|
|
<label for="appsInput">Access to Apps</label>
|
|
<MultiSelect v-model="apps" :options="allApps" />
|
|
</FormGroup>
|
|
</fieldset>
|
|
</form>
|
|
</Dialog>
|
|
</template>
|