Implement group dialog

dashboard/src/components/GroupDialog.vue

@@ -0,0 +1,109 @@
+<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;
+
+  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) {
+    console.log(g)
+
+    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()">
+      <fieldset :disabled="busy">
+        <input type="submit" style="display: none;" />
+
+        <FormGroup>
+          <label for="">{{ $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>