Compare commits
13 Commits
0.1.5
...
8c4b595c30
| Author | SHA1 | Date | |
|---|---|---|---|
| 8c4b595c30 | |||
| be629e5c6b | |||
| 63569684a3 | |||
| 5937a0d7ce | |||
| 4512272c1c | |||
| ce1f3842e0 | |||
| ee01c3a059 | |||
| 81c1537bad | |||
| 98ecfab032 | |||
| b948b8c1a4 | |||
| f856c6ae37 | |||
| 2dd2580530 | |||
| f0c100aee4 |
11
CHANGELOG.md
11
CHANGELOG.md
@@ -2,9 +2,20 @@
|
|||||||
|
|
||||||
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.1.6](https://git.odit.services/lfk/frontend/compare/0.1.5...0.1.6)
|
||||||
|
|
||||||
|
- ✨ UsersOverview - user delete [`f0c100a`](https://git.odit.services/lfk/frontend/commit/f0c100aee47d6a5aeb0995db79b268f33bf316e9)
|
||||||
|
- 🔒 UserDetail - added basic layout for permission change [`81c1537`](https://git.odit.services/lfk/frontend/commit/81c1537bada2c87127385d9110d48459cd1b505f)
|
||||||
|
- 📧 UserDetail - email input [`f856c6a`](https://git.odit.services/lfk/frontend/commit/f856c6ae3792c93aee148339d89e3978db6e9293)
|
||||||
|
- ✨ UserDetail multiselect layout for groups [`98ecfab`](https://git.odit.services/lfk/frontend/commit/98ecfab0325e35c5418775f7162049b56e5f332f)
|
||||||
|
- UserDetail - placeholder for permission picker 🔒 [`b948b8c`](https://git.odit.services/lfk/frontend/commit/b948b8c1a48e5b4bc6a083139d26100ef4499970)
|
||||||
|
|
||||||
#### [0.1.5](https://git.odit.services/lfk/frontend/compare/0.1.4...0.1.5)
|
#### [0.1.5](https://git.odit.services/lfk/frontend/compare/0.1.4...0.1.5)
|
||||||
|
|
||||||
|
> 10 January 2021
|
||||||
|
|
||||||
- Merge commit '16f572480ad55425890061f9dad65fe85f2f39ad' into dev [`#30`](https://git.odit.services/lfk/frontend/issues/30)
|
- Merge commit '16f572480ad55425890061f9dad65fe85f2f39ad' into dev [`#30`](https://git.odit.services/lfk/frontend/issues/30)
|
||||||
|
- 🚀RELEASE v0.1.5 [`330755c`](https://git.odit.services/lfk/frontend/commit/330755c63e3405533a5da79c84ef4f379eb43e1c)
|
||||||
- ⤵ load dynamic build info in Footer component [`c089bb3`](https://git.odit.services/lfk/frontend/commit/c089bb39298fb1067093c2fa81101130c214947c)
|
- ⤵ load dynamic build info in Footer component [`c089bb3`](https://git.odit.services/lfk/frontend/commit/c089bb39298fb1067093c2fa81101130c214947c)
|
||||||
- 📅 dynamic copyright year in Footer component [`b8a9e4f`](https://git.odit.services/lfk/frontend/commit/b8a9e4f272f925999b9a032dd009f7498acbfae0)
|
- 📅 dynamic copyright year in Footer component [`b8a9e4f`](https://git.odit.services/lfk/frontend/commit/b8a9e4f272f925999b9a032dd009f7498acbfae0)
|
||||||
- 👀 improved Footer layout + display on Login component [`43b4065`](https://git.odit.services/lfk/frontend/commit/43b406592ebe115cea04a8dbf36874c0a5bdd7e9)
|
- 👀 improved Footer layout + display on Login component [`43b4065`](https://git.odit.services/lfk/frontend/commit/43b406592ebe115cea04a8dbf36874c0a5bdd7e9)
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@odit/lfk-frontend",
|
"name": "@odit/lfk-frontend",
|
||||||
"version": "0.1.5",
|
"version": "0.1.6",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"i18n-order": "node order.js",
|
"i18n-order": "node order.js",
|
||||||
"dev": "snowpack dev",
|
"dev": "snowpack dev",
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.1.5-RELEASE_INFO</span>
|
<span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.1.6-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>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
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 tracksstore } from "../store.js";
|
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";
|
||||||
@@ -68,11 +68,11 @@
|
|||||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||||
}).showToast();
|
}).showToast();
|
||||||
let storeval = [];
|
let storeval = [];
|
||||||
tracksstore.subscribe((val) => {
|
usersstore.subscribe((val) => {
|
||||||
storeval = val;
|
storeval = val;
|
||||||
});
|
});
|
||||||
storeval.push(result);
|
storeval.push(result);
|
||||||
tracksstore.set(storeval);
|
usersstore.set(storeval);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
const releaseinfo = document
|
$: releaseinfo = "";
|
||||||
.getElementById("buildinfo")
|
setTimeout(() => {
|
||||||
.textContent.replace("RELEASE_INFO-", "")
|
releaseinfo = document
|
||||||
.replace("-RELEASE_INFO", "");
|
.getElementById("buildinfo")
|
||||||
|
.textContent.replace("RELEASE_INFO-", "")
|
||||||
|
.replace("-RELEASE_INFO", "");
|
||||||
|
}, 1500);
|
||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,28 +1,50 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import lodashIsEqual from "lodash.isequal";
|
import lodashIsEqual from "lodash.isequal";
|
||||||
|
import store from "../store";
|
||||||
import { UserService } from "@odit/lfk-client-js";
|
import { UserService } from "@odit/lfk-client-js";
|
||||||
import "gridjs/dist/theme/mermaid.css";
|
import "gridjs/dist/theme/mermaid.css";
|
||||||
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;
|
||||||
let original_data = undefined;
|
$: delete_triggered = false;
|
||||||
|
$: original_data = {};
|
||||||
$: editable_userdata = undefined;
|
$: editable_userdata = undefined;
|
||||||
user_promise.then((data) => {
|
user_promise.then((data) => {
|
||||||
data_loaded = true;
|
data_loaded = true;
|
||||||
original_data = data;
|
original_data = Object.assign(original_data, data);
|
||||||
editable_userdata = data;
|
editable_userdata = data;
|
||||||
});
|
});
|
||||||
// $: changes_performed = lodashIsEqual(original_data, editable_userdata);
|
$: changes_performed = !lodashIsEqual(original_data, editable_userdata);
|
||||||
$: changes_performed = !lodashIsEqual({ test: 1 }, { test: 1 });
|
|
||||||
function submit() {
|
function submit() {
|
||||||
if (data_loaded === true && changes_performed === true) {
|
if (data_loaded === true && changes_performed === true) {
|
||||||
console.log("ok, submitting...");
|
console.log("ok, submitting...");
|
||||||
|
console.log(editable_userdata);
|
||||||
|
UserService.userControllerPut(original_data.id, editable_userdata)
|
||||||
|
.then((resp) => {
|
||||||
|
console.log(resp);
|
||||||
|
Object.assign(original_data, editable_userdata);
|
||||||
|
original_data = editable_userdata;
|
||||||
|
Object.assign(original_data, editable_userdata);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
console.log("no changes performed");
|
console.log("no changes performed");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
function deleteUser() {
|
||||||
|
UserService.userControllerRemove(original_data.id, true)
|
||||||
|
.then((resp) => {
|
||||||
|
console.log(resp);
|
||||||
|
location.replace("./");
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await user_promise}
|
{#await user_promise}
|
||||||
@@ -63,36 +85,47 @@
|
|||||||
<polyline points="12 5 19 12 12 19" /></svg>
|
<polyline points="12 5 19 12 12 19" /></svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex items-center">
|
<li class="flex items-center">
|
||||||
<span class="mr-2">{user.firstname}
|
<span class="mr-2">{original_data.firstname}
|
||||||
{user.middlename || ''}
|
{original_data.middlename || ''}
|
||||||
{user.lastname}</span>
|
{original_data.lastname}</span>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||||
{user.firstname}
|
{original_data.firstname}
|
||||||
{user.middlename || ''}
|
{original_data.middlename || ''}
|
||||||
{user.lastname}
|
{original_data.lastname}
|
||||||
<span data-id="user_actions_${user.id}">
|
<span data-id="user_actions_${editable_userdata.id}">
|
||||||
<button
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
|
||||||
class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm"
|
{#if delete_triggered}
|
||||||
data-userid="${user.id}"
|
<button
|
||||||
onclick="user__delete_cancel()">{$_('cancel')}</button>
|
on:click={deleteUser}
|
||||||
<button
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
|
||||||
class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm"
|
<button
|
||||||
data-userid="${user.id}"
|
on:click={() => {
|
||||||
onclick="user__delete_confirm()">{$_('confirm-delete')}</button>
|
delete_triggered = !delete_triggered;
|
||||||
<button
|
}}
|
||||||
type="button"
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
|
||||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-user')}</button>
|
{/if}
|
||||||
<button
|
{#if !delete_triggered}
|
||||||
disabled={!changes_performed}
|
<button
|
||||||
class:opacity-50={!changes_performed}
|
on:click={() => {
|
||||||
type="button"
|
delete_triggered = true;
|
||||||
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>
|
type="button"
|
||||||
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-user')}</button>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
{#if !delete_triggered}
|
||||||
|
<button
|
||||||
|
disabled={!changes_performed}
|
||||||
|
class:opacity-50={!changes_performed}
|
||||||
|
type="button"
|
||||||
|
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>
|
||||||
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -101,7 +134,7 @@
|
|||||||
<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={user.profilePic} />
|
src={editable_userdata.profilePic} />
|
||||||
<!-- <span
|
<!-- <span
|
||||||
class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
|
class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
|
||||||
class="h-full w-full text-gray-300"
|
class="h-full w-full text-gray-300"
|
||||||
@@ -165,6 +198,79 @@
|
|||||||
name="lastname"
|
name="lastname"
|
||||||
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="email"
|
||||||
|
class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||||
|
<input
|
||||||
|
autocomplete="off"
|
||||||
|
placeholder={$_('e-mail-adress')}
|
||||||
|
type="email"
|
||||||
|
bind:value={editable_userdata.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" />
|
||||||
|
</div>
|
||||||
|
<div class="text-sm w-full">
|
||||||
|
<span class="font-medium">{$_('groups')}</span>
|
||||||
|
<select
|
||||||
|
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>
|
||||||
|
<option>Admins</option>
|
||||||
|
<option>Finanzen</option>
|
||||||
|
<option>...</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm w-full">
|
||||||
|
<span class="font-medium">Permissions</span>
|
||||||
|
<div
|
||||||
|
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="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">></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"><</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- -->
|
||||||
|
<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="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
|
||||||
|
<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">
|
||||||
|
DEMO_PERMISSION
|
||||||
|
</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">
|
||||||
|
DEMO_PERMISSION
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
|
||||||
|
<div
|
||||||
|
class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
|
||||||
|
<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">
|
||||||
|
DEMO_PERMISSION
|
||||||
|
</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">
|
||||||
|
DEMO_PERMISSION
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
TODO: permission picker 🔒
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{:catch error}
|
{:catch error}
|
||||||
<PromiseError {error} />
|
<PromiseError {error} />
|
||||||
|
|||||||
@@ -1,23 +1,30 @@
|
|||||||
<script>
|
<script>
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
|
import store from "../store";
|
||||||
import AddUserModal from "./AddUserModal.svelte";
|
import AddUserModal from "./AddUserModal.svelte";
|
||||||
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);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="container p-5">
|
<section class="container p-5">
|
||||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||||
{$_('users')}
|
{$_('users')}
|
||||||
<button
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
|
||||||
on:click={() => {
|
<button
|
||||||
modal_open = true;
|
on:click={() => {
|
||||||
}}
|
modal_open = true;
|
||||||
type="button"
|
}}
|
||||||
class="w-full inline-flex 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">
|
type="button"
|
||||||
{$_('create-user')}
|
class="w-full inline-flex 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">
|
||||||
</button>
|
{$_('create-user')}
|
||||||
|
</button>
|
||||||
|
{/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 />
|
||||||
</section>
|
</section>
|
||||||
<AddUserModal bind:modal_open />
|
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
|
||||||
|
<AddUserModal bind:modal_open />
|
||||||
|
{/if}
|
||||||
|
|||||||
@@ -5,8 +5,10 @@
|
|||||||
const users_promise = UserService.userControllerGetAll();
|
const users_promise = UserService.userControllerGetAll();
|
||||||
import "gridjs/dist/theme/mermaid.css";
|
import "gridjs/dist/theme/mermaid.css";
|
||||||
import { users as usersstore } from "../store.js";
|
import { users as usersstore } from "../store.js";
|
||||||
|
import store from "../store";
|
||||||
import UsersEmptyState from "./UsersEmptyState.svelte";
|
import UsersEmptyState from "./UsersEmptyState.svelte";
|
||||||
$: searchvalue = "";
|
$: searchvalue = "";
|
||||||
|
$: active_deletes = [];
|
||||||
$: userscache = [];
|
$: userscache = [];
|
||||||
$: advanced_search = false;
|
$: advanced_search = false;
|
||||||
usersstore.subscribe((val) => {
|
usersstore.subscribe((val) => {
|
||||||
@@ -18,130 +20,167 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await users_promise}
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
|
||||||
<div
|
{#await users_promise}
|
||||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
|
||||||
role="alert">
|
|
||||||
<p class="font-bold">users are being loaded...</p>
|
|
||||||
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
|
||||||
</div>
|
|
||||||
{:then users}
|
|
||||||
{#if userscache.length === 0}
|
|
||||||
<UsersEmptyState />
|
|
||||||
{:else}
|
|
||||||
{#if advanced_search}
|
|
||||||
advanced search
|
|
||||||
{:else}
|
|
||||||
<input
|
|
||||||
type="search"
|
|
||||||
bind:value={searchvalue}
|
|
||||||
placeholder={$_('datatable.search')}
|
|
||||||
aria-label={$_('datatable.search')}
|
|
||||||
class="gridjs-input gridjs-search-input mb-4" />
|
|
||||||
{/if}
|
|
||||||
<button
|
|
||||||
on:click={() => {
|
|
||||||
advanced_search = !advanced_search;
|
|
||||||
}}
|
|
||||||
type="button"
|
|
||||||
class="w-full inline-flex 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">
|
|
||||||
{#if advanced_search}
|
|
||||||
toggle simple search
|
|
||||||
{:else}toggle advanced search{/if}
|
|
||||||
</button>
|
|
||||||
<div
|
<div
|
||||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||||
<table class="divide-y divide-gray-200 w-full">
|
role="alert">
|
||||||
<thead class="bg-gray-50">
|
<p class="font-bold">users are being loaded...</p>
|
||||||
<tr>
|
<p class="text-sm">{$_('this-might-take-a-moment')}</p>
|
||||||
<th
|
</div>
|
||||||
scope="col"
|
{:then users}
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
{#if userscache.length === 0}
|
||||||
Name
|
<UsersEmptyState />
|
||||||
</th>
|
{:else}
|
||||||
<th
|
{#if advanced_search}
|
||||||
scope="col"
|
advanced search
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
{:else}
|
||||||
Status
|
<input
|
||||||
</th>
|
type="search"
|
||||||
<th
|
bind:value={searchvalue}
|
||||||
scope="col"
|
placeholder={$_('datatable.search')}
|
||||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
aria-label={$_('datatable.search')}
|
||||||
Groups
|
class="gridjs-input gridjs-search-input mb-4" />
|
||||||
</th>
|
{/if}
|
||||||
<th scope="col" class="relative px-6 py-3">
|
<button
|
||||||
<span class="sr-only">Action</span>
|
on:click={() => {
|
||||||
</th>
|
advanced_search = !advanced_search;
|
||||||
</tr>
|
}}
|
||||||
</thead>
|
type="button"
|
||||||
<tbody class="divide-y divide-gray-200">
|
class="w-full inline-flex 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">
|
||||||
{#each users as u}
|
{#if advanced_search}
|
||||||
{#if Object.values(u)
|
toggle simple search
|
||||||
.toString()
|
{:else}toggle advanced search{/if}
|
||||||
.toLowerCase()
|
</button>
|
||||||
.includes(searchvalue)}
|
<div
|
||||||
<tr>
|
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
<table class="divide-y divide-gray-200 w-full">
|
||||||
<div class="flex items-center">
|
<thead class="bg-gray-50">
|
||||||
{#if u.profilePic}
|
<tr>
|
||||||
<div class="flex-shrink-0 h-10 w-10">
|
<th
|
||||||
<img
|
scope="col"
|
||||||
class="h-10 w-10 rounded-full"
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
src={u.profilePic}
|
Name
|
||||||
alt="" />
|
</th>
|
||||||
</div>
|
<th
|
||||||
{/if}
|
scope="col"
|
||||||
<div class="ml-4">
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
<div
|
Status
|
||||||
class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
</th>
|
||||||
{u.firstname}
|
<th
|
||||||
{u.middlename || ''}
|
scope="col"
|
||||||
{u.lastname}
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
</div>
|
Groups
|
||||||
<div class="text-sm text-gray-500">
|
</th>
|
||||||
{u.email || u.username}
|
<th scope="col" class="relative px-6 py-3">
|
||||||
|
<span class="sr-only">Action</span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-gray-200">
|
||||||
|
{#each users as u}
|
||||||
|
{#if Object.values(u)
|
||||||
|
.toString()
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(searchvalue)}
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
{#if u.profilePic}
|
||||||
|
<div class="flex-shrink-0 h-10 w-10">
|
||||||
|
<img
|
||||||
|
class="h-10 w-10 rounded-full"
|
||||||
|
src={u.profilePic}
|
||||||
|
alt="" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="ml-4">
|
||||||
|
<div
|
||||||
|
class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||||
|
{u.firstname}
|
||||||
|
{u.middlename || ''}
|
||||||
|
{u.lastname}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">
|
||||||
|
{u.email || u.username}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
</td>
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
<td class="px-6 py-4 whitespace-nowrap">
|
{#if u.enabled}
|
||||||
{#if u.enabled}
|
<span
|
||||||
<span
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
|
{:else}
|
||||||
|
<span
|
||||||
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
{#each u.groups as g}
|
||||||
|
<a
|
||||||
|
href="../groups/{g.id}"
|
||||||
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
|
||||||
|
{/each}
|
||||||
|
</td>
|
||||||
|
{#if active_deletes[u.id] === true}
|
||||||
|
<td
|
||||||
|
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<button
|
||||||
|
on:click={() => {
|
||||||
|
active_deletes[u.id] = false;
|
||||||
|
}}
|
||||||
|
tabindex="0"
|
||||||
|
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
|
||||||
|
Delete</button>
|
||||||
|
<button
|
||||||
|
on:click={() => {
|
||||||
|
UserService.userControllerRemove(u.id, true)
|
||||||
|
.then((resp) => {
|
||||||
|
console.log(resp);
|
||||||
|
// user deleted
|
||||||
|
users_promise.then((data) => {
|
||||||
|
console.log(data);
|
||||||
|
usersstore.set(data);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
// error deleting user
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
tabindex="0"
|
||||||
|
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
|
||||||
|
Delete</button>
|
||||||
|
</td>
|
||||||
{:else}
|
{:else}
|
||||||
<span
|
<td
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
|
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<a
|
||||||
|
href="./{u.id}"
|
||||||
|
class="text-indigo-600 hover:text-indigo-900">Edit</a>
|
||||||
|
{#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
|
||||||
|
<button
|
||||||
|
on:click={() => {
|
||||||
|
active_deletes[u.id] = true;
|
||||||
|
}}
|
||||||
|
tabindex="0"
|
||||||
|
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
{/if}
|
{/if}
|
||||||
</td>
|
</tr>
|
||||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
{/if}
|
||||||
{#each u.groups as g}
|
{/each}
|
||||||
<a
|
</tbody>
|
||||||
href="../groups/{g.id}"
|
</table>
|
||||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
|
</div>
|
||||||
{/each}
|
{/if}
|
||||||
</td>
|
{:catch error}
|
||||||
<td
|
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
<span class="inline-block align-middle mr-8">
|
||||||
<a
|
<b class="capitalize">{$_('general_promise_error')}</b>
|
||||||
href="./{u.id}"
|
{error}
|
||||||
class="text-indigo-600 hover:text-indigo-900">Edit</a>
|
</span>
|
||||||
<span
|
|
||||||
tabindex="0"
|
|
||||||
href="#"
|
|
||||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/await}
|
||||||
{:catch error}
|
{/if}
|
||||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
|
||||||
<span class="inline-block align-middle mr-8">
|
|
||||||
<b class="capitalize">{$_('general_promise_error')}</b>
|
|
||||||
{error}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{/await}
|
|
||||||
|
|||||||
@@ -71,6 +71,7 @@
|
|||||||
"general-stats": "General Stats",
|
"general-stats": "General Stats",
|
||||||
"general_promise_error": "😢 Error",
|
"general_promise_error": "😢 Error",
|
||||||
"goback": "Go Home",
|
"goback": "Go Home",
|
||||||
|
"groups": "Groups",
|
||||||
"hallo": "hello",
|
"hallo": "hello",
|
||||||
"installed-version": "Installed version",
|
"installed-version": "Installed version",
|
||||||
"invalid-mail-reset": "the provided email is invalid",
|
"invalid-mail-reset": "the provided email is invalid",
|
||||||
|
|||||||
@@ -27,6 +27,8 @@ const store = () => {
|
|||||||
AuthService.authControllerRefresh({ token: state.auth.refresh_token }).then((auth) => {
|
AuthService.authControllerRefresh({ token: state.auth.refresh_token }).then((auth) => {
|
||||||
console.log('got new auth');
|
console.log('got new auth');
|
||||||
OpenAPI.TOKEN = auth.access_token;
|
OpenAPI.TOKEN = auth.access_token;
|
||||||
|
const jwtinfo = JSON.parse(atob(auth.access_token.split('.')[1]));
|
||||||
|
state.jwtinfo = jwtinfo;
|
||||||
localForage.setItem('logindata', auth);
|
localForage.setItem('logindata', auth);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -39,8 +41,8 @@ const store = () => {
|
|||||||
//
|
//
|
||||||
state.refreshInterval = setInterval(() => {
|
state.refreshInterval = setInterval(() => {
|
||||||
this.refreshAuth();
|
this.refreshAuth();
|
||||||
// 4min
|
// 2min
|
||||||
}, 4 * 60000);
|
}, 2 * 60000);
|
||||||
//
|
//
|
||||||
return state;
|
return state;
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user