Compare commits

...

11 Commits

Author SHA1 Message Date
4ab77c5557 Merge branch 'dev' of https://git.odit.services/lfk/frontend into dev
All checks were successful
continuous-integration/drone/push Build is passing
2021-01-13 21:07:08 +01:00
2bbaa500f4 🚀RELEASE v0.2.1 2021-01-13 21:06:51 +01:00
722a20e141 🐞 fix package release script: locales directory 2021-01-13 21:06:39 +01:00
041c24a837 🙋‍♂️ UserDetails - group updating
ref #12
2021-01-13 21:05:03 +01:00
39a3baa00b 🐞 UserDetail - fix permission reactivity by assignments
ref #12
2021-01-13 18:17:34 +01:00
f7acbb1eaa shared state reactivity - AddUserModal-Users-UsersOverview
ref #12
2021-01-13 17:49:01 +01:00
e6fbf7aa5b UserDetail - fixed group updating
ref #12
2021-01-12 21:19:12 +01:00
36a084eab6 🔒 UserDetail - WIP on Permissions
ref #12
2021-01-12 21:04:12 +01:00
a9e319e0c0 👪 UserDetail - group edit support
ref #12
2021-01-12 20:16:16 +01:00
ea23b97231 💬 UserDetail - info Toasts
ref #12
2021-01-12 19:30:54 +01:00
7df76f9642 AddUserModal + UserDetail - optional username field
ref #12
2021-01-12 19:30:06 +01:00
8 changed files with 181 additions and 88 deletions

View File

@ -2,11 +2,28 @@
All notable changes to this project will be documented in this file. Dates are displayed in UTC. All notable changes to this project will be documented in this file. Dates are displayed in UTC.
#### [0.2.1](https://git.odit.services/lfk/frontend/compare/0.2.0...0.2.1)
- 🔒 UserDetail - WIP on Permissions [`36a084e`](https://git.odit.services/lfk/frontend/commit/36a084eab6bd0c922da29ebb2d260ba803bf9675)
- 👪 UserDetail - group edit support [`a9e319e`](https://git.odit.services/lfk/frontend/commit/a9e319e0c0f2bfaba42bc3af875462e394489dc2)
- 🙋‍♂️ UserDetails - group updating [`041c24a`](https://git.odit.services/lfk/frontend/commit/041c24a837d58ff46362699b54e8088f22ba2daa)
- ⚡ shared state reactivity - AddUserModal-Users-UsersOverview [`f7acbb1`](https://git.odit.services/lfk/frontend/commit/f7acbb1eaa14ddf41e29ff1db631520123218289)
- ✨ AddUserModal + UserDetail - optional username field [`7df76f9`](https://git.odit.services/lfk/frontend/commit/7df76f9642b528586fd654f27148b5502400ffdf)
- UserDetail - fixed group updating [`e6fbf7a`](https://git.odit.services/lfk/frontend/commit/e6fbf7aa5b230733ffd92fdfe851b9f86001c859)
- 💬 UserDetail - info Toasts [`ea23b97`](https://git.odit.services/lfk/frontend/commit/ea23b972315db39e1f800366d52e3bacf9eaf58b)
- 🔨 optimized release script [`23c3cd6`](https://git.odit.services/lfk/frontend/commit/23c3cd605db950a5620ea709748216f7ea034385)
- 🐞 fix package release script: locales directory [`722a20e`](https://git.odit.services/lfk/frontend/commit/722a20e141079302da8876be1ccc55026c588048)
- ⏫ bump @odit/lfk-client-js to 0.0.11 [`f6db117`](https://git.odit.services/lfk/frontend/commit/f6db117a5eca5c9692a4c5d83159917a712a0e63)
- 🐞 UserDetail - fix permission reactivity by assignments [`39a3baa`](https://git.odit.services/lfk/frontend/commit/39a3baa00b0575ee3150c7ae26f32995e2e857d9)
#### [0.2.0](https://git.odit.services/lfk/frontend/compare/0.1.6...0.2.0) #### [0.2.0](https://git.odit.services/lfk/frontend/compare/0.1.6...0.2.0)
> 11 January 2021
- 🔒 added rendering based on permission level [`5937a0d`](https://git.odit.services/lfk/frontend/commit/5937a0d7ce970d38ddb0e4c6a02d11f8c8b53e9b) - 🔒 added rendering based on permission level [`5937a0d`](https://git.odit.services/lfk/frontend/commit/5937a0d7ce970d38ddb0e4c6a02d11f8c8b53e9b)
- ❌ UserDetail - delete [`4512272`](https://git.odit.services/lfk/frontend/commit/4512272c1c2a5c861d8ac4c9908244df125dc3d9) - ❌ UserDetail - delete [`4512272`](https://git.odit.services/lfk/frontend/commit/4512272c1c2a5c861d8ac4c9908244df125dc3d9)
- 🖊 UserDetail - reactivity on edit + update functionality [`ce1f384`](https://git.odit.services/lfk/frontend/commit/ce1f3842e0f581d9e94ea6079cf223d945f7465d) - 🖊 UserDetail - reactivity on edit + update functionality [`ce1f384`](https://git.odit.services/lfk/frontend/commit/ce1f3842e0f581d9e94ea6079cf223d945f7465d)
- 🚀RELEASE v0.2.0 [`7769070`](https://git.odit.services/lfk/frontend/commit/77690702c0461b71ff1b65a44bfdc331d5a42c3e)
- [tmp] - disable darkmode + re-enable sw [`c7679b7`](https://git.odit.services/lfk/frontend/commit/c7679b7a67b362a7fbf796f612892bdfac50731c) - [tmp] - disable darkmode + re-enable sw [`c7679b7`](https://git.odit.services/lfk/frontend/commit/c7679b7a67b362a7fbf796f612892bdfac50731c)
- 🕕 set manual refresh time to 2min [`be629e5`](https://git.odit.services/lfk/frontend/commit/be629e5c6b076bf9a28dcc953e97478d244d8413) - 🕕 set manual refresh time to 2min [`be629e5`](https://git.odit.services/lfk/frontend/commit/be629e5c6b076bf9a28dcc953e97478d244d8413)
- 🐞 [tmp] - nginx.conf - disable .js file caching [`e6ac34b`](https://git.odit.services/lfk/frontend/commit/e6ac34bde8d288a45e83fc6723a2bbe952f2622a) - 🐞 [tmp] - nginx.conf - disable .js file caching [`e6ac34b`](https://git.odit.services/lfk/frontend/commit/e6ac34bde8d288a45e83fc6723a2bbe952f2622a)

View File

@ -1,6 +1,6 @@
{ {
"name": "@odit/lfk-frontend", "name": "@odit/lfk-frontend",
"version": "0.2.0", "version": "0.2.1",
"scripts": { "scripts": {
"i18n-order": "node order.js", "i18n-order": "node order.js",
"dev": "snowpack dev", "dev": "snowpack dev",
@ -50,7 +50,7 @@
"publish": false "publish": false
}, },
"hooks": { "hooks": {
"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js && git add public/index.html && node order.js && git add public/locales" "after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js && git add public/index.html && node order.js && git add src/locales"
} }
} }
} }

View File

@ -13,7 +13,7 @@
</head> </head>
<body> <body>
<span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.2.0-RELEASE_INFO</span> <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.2.1-RELEASE_INFO</span>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<script src="/env.js"></script> <script src="/env.js"></script>
<script defer type="module" src="/_dist_/index.js"></script> <script defer type="module" src="/_dist_/index.js"></script>

View File

@ -2,20 +2,21 @@
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { clickOutside } from "./outsideclick"; import { clickOutside } from "./outsideclick";
import { focusTrap } from "svelte-focus-trap"; import { focusTrap } from "svelte-focus-trap";
import { tracks as usersstore } from "../store.js";
import { UserService } from "@odit/lfk-client-js"; import { UserService } from "@odit/lfk-client-js";
import isEmail from "validator/es/lib/isEmail"; import isEmail from "validator/es/lib/isEmail";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import "toastify-js/src/toastify.css";
export let modal_open; export let modal_open;
export let current_users;
let firstname_input; let firstname_input;
let lastname_input; let lastname_input;
let middlename_input; let middlename_input;
let username_input;
let password_input; let password_input;
let email_input; let email_input;
function focus(el) { function focus(el) {
el.focus(); el.focus();
} }
$: username_input_value = "";
$: middlename_input_value = ""; $: middlename_input_value = "";
$: password_input_value = ""; $: password_input_value = "";
$: email_input_value = ""; $: email_input_value = "";
@ -49,17 +50,25 @@
text: "User is being added...", text: "User is being added...",
duration: -1, duration: -1,
}).showToast(); }).showToast();
UserService.userControllerPost({ let postdata={
firstname: firstname_input_value, firstname: firstname_input_value,
lastname: lastname_input_value, lastname: lastname_input_value,
middlename: middlename_input_value, middlename: middlename_input_value,
email: email_input_value, password: password_input_value
password: password_input_value, };
}) if(email_input_value!==""){
postdata.email=email_input_value;
}
if(username_input_value!==""){
postdata.username=username_input_value;
}
UserService.userControllerPost(postdata)
.then((result) => { .then((result) => {
firstname_input_value = ""; firstname_input_value = "";
lastname_input_value = ""; lastname_input_value = "";
middlename_input_value = ""; middlename_input_value = "";
email_input_value = "";
username_input_value = "";
modal_open = false; modal_open = false;
// //
Toastify({ Toastify({
@ -67,12 +76,8 @@
duration: 500, duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast(); }).showToast();
let storeval = []; current_users.push(result);
usersstore.subscribe((val) => { current_users=current_users;
storeval = val;
});
storeval.push(result);
usersstore.set(storeval);
}) })
.catch((err) => { .catch((err) => {
// //
@ -213,6 +218,19 @@
</span> </span>
{/if} {/if}
</div> </div>
<div class="col-span-6">
<label
for="trackname"
class="block text-sm font-medium text-gray-700">{$_('username')}</label>
<input
autocomplete="off"
placeholder={$_('username')}
bind:value={username_input_value}
bind:this={username_input}
type="text"
name="trackname"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
</div>
<div class="col-span-6"> <div class="col-span-6">
<label <label
for="email" for="email"

View File

@ -2,47 +2,90 @@
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import lodashIsEqual from "lodash.isequal"; import lodashIsEqual from "lodash.isequal";
import store from "../store"; import store from "../store";
import { UserService } from "@odit/lfk-client-js"; import {
UserService,
UserGroupService,
PermissionService,
} from "@odit/lfk-client-js";
import "gridjs/dist/theme/mermaid.css"; import "gridjs/dist/theme/mermaid.css";
import Toastify from "toastify-js";
import PromiseError from "./PromiseError.svelte"; import PromiseError from "./PromiseError.svelte";
export let params; export let params;
const user_promise = UserService.userControllerGetOne(params.userid); const user_promise = UserService.userControllerGetOne(params.userid);
let data_loaded = false; let data_loaded = false;
$: delete_triggered = false; $: delete_triggered = false;
$: original_data = {}; $: original_data = {};
$: editable_userdata = undefined; $: editable_userdata = {};
$: allpermissions = [];
$: allgroups = [];
$: allgroups_ids = [];
$: usergroups_array_objects = [];
$: usergroups_array = [];
let usergroups_array_original = [];
user_promise.then((data) => { user_promise.then((data) => {
data_loaded = true; data_loaded = true;
original_data = Object.assign(original_data, data); original_data = Object.assign(original_data, data);
editable_userdata = data; editable_userdata = data;
data.groups.forEach((g) => {
usergroups_array=usergroups_array.concat([g.id]);
});
usergroups_array_original = usergroups_array;
allgroups.forEach((g) => {
allgroups_ids.push(g.id);
});
});
UserGroupService.userGroupControllerGetAll().then((data) => {
allgroups = data;
});
const permissions_promise = PermissionService.permissionControllerGetAll();
permissions_promise.then((data) => {
data.forEach((p) => {
allpermissions=allpermissions.concat([p.target + ":" + p.action])
});
}); });
$: changes_performed = !lodashIsEqual(original_data, editable_userdata); $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
$: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
$: save_enabled = changes_performed||!groups_changed;
function submit() { function submit() {
if (data_loaded === true && changes_performed === true) { if (
console.log("ok, submitting..."); !lodashIsEqual(original_data.permissions, editable_userdata.permissions)
console.log(editable_userdata); ) {
// TODO: add+delete permissions
}
if (data_loaded === true && save_enabled) {
let tmp=[];
usergroups_array.forEach(g => {
const group=allgroups.find(obj=>obj.id===g);
tmp.push(group);
});
editable_userdata.groups=tmp;
Toastify({
text: $_("updating-user"),
duration: 2500,
}).showToast();
UserService.userControllerPut(original_data.id, editable_userdata) UserService.userControllerPut(original_data.id, editable_userdata)
.then((resp) => { .then((resp) => {
console.log(resp);
Object.assign(original_data, editable_userdata); Object.assign(original_data, editable_userdata);
original_data = editable_userdata; original_data = editable_userdata;
Object.assign(original_data, editable_userdata); Object.assign(original_data, editable_userdata);
//
Toastify({
text: $_("user-updated"),
duration: 2500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
}) })
.catch((err) => { .catch((err) => {
console.log(err);
}); });
} else { } else {
console.log("no changes performed");
} }
} }
function deleteUser() { function deleteUser() {
UserService.userControllerRemove(original_data.id, true) UserService.userControllerRemove(original_data.id, true)
.then((resp) => { .then((resp) => {
console.log(resp);
location.replace("./"); location.replace("./");
}) })
.catch((err) => { .catch((err) => {
console.log(err);
}); });
} }
</script> </script>
@ -120,27 +163,19 @@
{/if} {/if}
{#if !delete_triggered} {#if !delete_triggered}
<button <button
disabled={!changes_performed} disabled={!save_enabled}
class:opacity-50={!changes_performed} class:opacity-50={!save_enabled}
type="button" type="button"
on:click={submit} on:click={submit}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button> class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
{/if} {/if}
</span> </span>
</div> </div>
<!-- -->
<div class="mt-2 flex items-center"> <div class="mt-2 flex items-center">
<img <img
alt={$_('profile-picture')} alt={$_('profile-picture')}
class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100" class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
src={editable_userdata.profilePic} /> src={editable_userdata.profilePic} />
<!-- <span
class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
class="h-full w-full text-gray-300"
fill="currentColor"
viewBox="0 0 24 24"><path
d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /></svg></span> -->
<button <button
type="button" type="button"
class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button> class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
@ -210,65 +245,88 @@
name="email" name="email"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" /> class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
</div> </div>
<div class="text-sm w-full">
<label
for="username"
class="font-medium text-gray-700">{$_('username')}</label>
<input
autocomplete="off"
placeholder={$_('username')}
type="text"
bind:value={editable_userdata.username}
name="username"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
</div>
<div class="text-sm w-full"> <div class="text-sm w-full">
<span class="font-medium">{$_('groups')}</span> <span class="font-medium">{$_('groups')}</span>
<!-- svelte-ignore a11y-no-onchange -->
<select <select
bind:value={usergroups_array}
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
multiple> multiple>
<option>Admins</option> {#each allgroups as g}
<option>Finanzen</option> {#if usergroups_array.includes(g.id)}
<option>...</option> <option selected value={g.id}>{g.name}</option>
{:else}
<option value={g.id}>{g.name}</option>
{/if}
{/each}
</select> </select>
</div> </div>
<div class="text-sm w-full"> <div class="text-sm w-full">
<span class="font-medium">Permissions</span> <span class="font-medium">Permissions</span>
<div <div class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
class="border-4 border-dashed rounded h-96 mb-4 p-5 text-lg text-center">
<!-- --> <!-- -->
<div class="flex flex-wrap -mx-1 overflow-hidden"> <div class="flex flex-wrap -mx-1 overflow-hidden">
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2"> <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
<button verfügbare
type="button"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&gt;</button>
</div>
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
<button
type="button"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&lt;</button>
</div> </div>
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">erteilte</div>
</div> </div>
<!-- --> <!-- -->
<div class="flex flex-wrap -mx-1 overflow-hidden"> <div class="flex flex-wrap -mx-1 overflow-hidden">
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2"> {#if allpermissions.length > 0}
<div <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"> <div
<p class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"> {#each allpermissions as p}
DEMO_PERMISSION {#if !editable_userdata.permissions.includes(p)}
</p> <p
<p class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"> {p}
DEMO_PERMISSION <button
</p> on:click={() => {
editable_userdata.permissions.push(p);
editable_userdata.permissions = editable_userdata.permissions;
}}
type="button"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
</p>
{/if}
{/each}
</div>
</div> </div>
</div> <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
<div
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2"> class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
<div {#each allpermissions as p}
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center"> {#if editable_userdata.permissions.includes(p)}
<p <p
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"> class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
DEMO_PERMISSION {p}
</p> <button
<p on:click={() => {
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"> editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
DEMO_PERMISSION }}
</p> type="button"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
</p>
{/if}
{/each}
</div>
</div> </div>
</div> {/if}
</div> </div>
TODO: permission picker 🔒
</div> </div>
</div> </div>
</section> </section>

View File

@ -5,6 +5,7 @@
export let modal_open = false; export let modal_open = false;
import UsersOverview from "./UsersOverview.svelte"; import UsersOverview from "./UsersOverview.svelte";
console.log(store.state.jwtinfo.userdetails.permissions); console.log(store.state.jwtinfo.userdetails.permissions);
let current_users=[];
</script> </script>
<section class="container p-5"> <section class="container p-5">
@ -22,9 +23,9 @@
{/if} {/if}
</span> </span>
<p class="mb-8 text-lg text-gray-500">{$_('manage-admin-users')}</p> <p class="mb-8 text-lg text-gray-500">{$_('manage-admin-users')}</p>
<UsersOverview /> <UsersOverview bind:current_users />
</section> </section>
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')} {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
<AddUserModal bind:modal_open /> <AddUserModal bind:current_users bind:modal_open />
{/if} {/if}

View File

@ -9,13 +9,14 @@
import UsersEmptyState from "./UsersEmptyState.svelte"; import UsersEmptyState from "./UsersEmptyState.svelte";
$: searchvalue = ""; $: searchvalue = "";
$: active_deletes = []; $: active_deletes = [];
export let current_users=[];
$: userscache = []; $: userscache = [];
$: advanced_search = false; $: advanced_search = false;
usersstore.subscribe((val) => { usersstore.subscribe((val) => {
userscache = val; userscache = val;
current_users=val;
}); });
users_promise.then((data) => { users_promise.then((data) => {
console.log(data);
usersstore.set(data); usersstore.set(data);
}); });
</script> </script>
@ -28,8 +29,8 @@
<p class="font-bold">users are being loaded...</p> <p class="font-bold">users are being loaded...</p>
<p class="text-sm">{$_('this-might-take-a-moment')}</p> <p class="text-sm">{$_('this-might-take-a-moment')}</p>
</div> </div>
{:then users} {:then}
{#if userscache.length === 0} {#if current_users.length === 0}
<UsersEmptyState /> <UsersEmptyState />
{:else} {:else}
{#if advanced_search} {#if advanced_search}
@ -78,12 +79,12 @@
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200"> <tbody class="divide-y divide-gray-200">
{#each users as u} {#each current_users as u}
{#if Object.values(u) {#if Object.values(u)
.toString() .toString()
.toLowerCase() .toLowerCase()
.includes(searchvalue)} .includes(searchvalue)}
<tr> <tr data-rowid="user_{u.id}">
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">
{#if u.profilePic} {#if u.profilePic}
@ -137,12 +138,7 @@
on:click={() => { on:click={() => {
UserService.userControllerRemove(u.id, true) UserService.userControllerRemove(u.id, true)
.then((resp) => { .then((resp) => {
console.log(resp); current_users=current_users.filter(obj=>obj.id!==u.id);
// user deleted
users_promise.then((data) => {
console.log(data);
usersstore.set(data);
});
}) })
.catch((err) => { .catch((err) => {
// error deleting user // error deleting user

View File

@ -117,6 +117,9 @@
"track-length-in-m": "Track Length in m", "track-length-in-m": "Track Length in m",
"track-name": "Track name", "track-name": "Track name",
"tracks": "Tracks", "tracks": "Tracks",
"updating-user": "updating user...",
"user-updated": "User updated",
"username": "Username",
"users": "Users", "users": "Users",
"valid-email-is-required": "valid email is required", "valid-email-is-required": "valid email is required",
"welcome_wavinghand": "Welcome 👋", "welcome_wavinghand": "Welcome 👋",