add user manager view

webroot/js/page/UserManager.js

@@ -0,0 +1,70 @@
+import Groups from '../groups.js';
+import PageCount from '../pagecount.js';
+import Pagination from '../pagination.js';
+import GroupsTable from '../groups-table.js';
+import Members from '../members.js';
+import Autocomplete from '../autocomplete.js';
+import Loader from '../loader.js';
+
+export default {
+    components: {
+        Groups,
+        PageCount,
+        Pagination,
+        GroupsTable,
+        Members,
+        Autocomplete
+    },
+    inject: ['api', 'txt'],
+    methods: {
+        showSubscribers(group) {
+            this.$refs.members.show(group);
+        },
+        async findUserMemberships(user) {
+            const { identifier: id, label } = user;
+            this.loading = true;
+            const { displayExtension, name } = this.group;
+            const formData = new FormData();
+            formData.append("userId", id);
+            formData.append("group", name);
+            const resp = await fetch(`${this.api.add}?group=${name}&userId=${id}`, {
+                method: "POST",
+                headers: {
+                    "Accept": "application/json",
+                },
+                body: formData
+            });
+            if (resp.ok) {
+                await this.loadGroupSubscribers(this.group);
+                generateFlash(`${label} ${this.txt.findUserMembershipsSuccess} ${(displayExtension)}`, 'success');
+            } else {
+                generateFlash(`${this.txt.findUserMembershipsError}`, 'error');
+                let errorResponse = await resp.json();
+                generateFlash(`${errorResponse.message}`, 'error');
+            }
+
+            this.loading = false;
+        }
+    },
+    template: /*html*/`
+        <autocomplete @searchUserMemberships="(item) => findUserMemberships(item)"
+                      icon="search"
+                      action="searchUserMemberships"
+                      />
+<!--        <groups :api-path="api.owner">-->
+<!--            <template v-slot:searchResult="searchResult">-->
+<!--                <pagination :records="searchResult.groups">-->
+<!--                    <template v-slot:paginated="paginated">-->
+<!--                        <page-count :first="paginated.start" :last="paginated.end" :total="paginated.total"></page-count>-->
+<!--                        <groups-table-->
+<!--                            :groups="paginated.records"-->
+<!--                            :columns="['name', 'description', 'action']"-->
+<!--                            :members="true"-->
+<!--                            @show-subscribers="showSubscribers"></groups-table>-->
+<!--                    </template>-->
+<!--                </pagination>-->
+<!--            </template>         -->
+<!--        </groups>-->
+<!--        <members ref="members" :add="true" :remove="true"></members>-->
+    `
+}