Merge pull request 'feature/16-org-management' (#32) from feature/16-org-management into dev

Reviewed-on: #32
❌ close #16

.drone.yml

@@ -4,18 +4,6 @@ type: docker
 name: build:dev
 
 steps:
-  - name: build dev
-    image: plugins/docker
-    depends_on: [clone]
-    settings:
-      username:
-        from_secret: DOCKER_REGISTRY_USER
-      password:
-        from_secret: DOCKER_REGISTRY_PASSWORD
-      repo: registry.odit.services/lfk/frontend
-      tags:
-        - dev
-      registry: registry.odit.services
   - name: run full license export
     depends_on: ["clone"]
     image: node:alpine
@@ -33,6 +21,18 @@ steps:
       remote: git@git.odit.services:lfk/frontend.git
       ssh_key:
         from_secret: GITLAB_SSHKEY
+  - name: build dev
+    image: plugins/docker
+    depends_on: [clone]
+    settings:
+      username:
+        from_secret: DOCKER_REGISTRY_USER
+      password:
+        from_secret: DOCKER_REGISTRY_PASSWORD
+      repo: registry.odit.services/lfk/frontend
+      tags:
+        - dev
+      registry: registry.odit.services
 
 trigger:
   branch:

CHANGELOG.md

@@ -2,11 +2,28 @@
 
 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)
 
+> 11 January 2021
+
 - 🔒 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 - 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)
 - 🕕 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)

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:15.4.0-alpine3.12
+FROM node:15.5.1-alpine3.12
 WORKDIR /app
 RUN npm i -g pnpm
 COPY package.json ./
@@ -11,6 +11,7 @@ RUN pnpm run build
 # final image
 FROM alpine
 COPY --from=0 /app/build /app
+RUN rm -rf build/sw.js.map build/workbox-*.js.map
 RUN rm -rf /app/build/_dist_/components
 RUN rm -rf /app/build/_dist_/locales
 RUN rm -rf /app/build-manifest.json

package.json

@@ -1,17 +1,16 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "snowpack dev",
 		"build": "snowpack build",
 		"build:sw": "workbox generateSW workbox-config.js",
 		"release": "release-it",
-		"changelog": "npx auto-changelog --commit-limit false --template https://raw.githubusercontent.com/release-it/release-it/master/templates/changelog-compact.hbs",
 		"licenses:export": "license-exporter --json -o public"
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "0.0.10",
+		"@odit/lfk-client-js": "0.0.12",
 		"filepond": "4.25.1",
 		"gridjs": "3.2.1",
 		"localforage": "1.9.0",
@@ -26,13 +25,13 @@
 	},
 	"devDependencies": {
 		"@odit/license-exporter": "0.0.9",
-		"@snowpack/plugin-svelte": "3.4.1",
+		"@snowpack/plugin-svelte": "3.5.1",
 		"auto-changelog": "^2.2.1",
 		"autoprefixer": "10.2.1",
 		"postcss": "8.2.4",
 		"postcss-load-config": "3.0.0",
 		"release-it": "^14.2.2",
-		"snowpack": "3.0.0-rc.2",
+		"snowpack": "3.0.10",
 		"svelte": "3.31.2",
 		"svelte-preprocess": "4.6.1",
 		"workbox-cli": "6.0.2"
@@ -51,7 +50,7 @@
 			"publish": false
 		},
 		"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"
+			"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"
 		}
 	}
 }

public/index.html

@@ -13,7 +13,7 @@
 </head>
 
 <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>
   <script src="/env.js"></script>
   <script defer type="module" src="/_dist_/index.js"></script>

snowpack.config.js

@@ -5,10 +5,11 @@ module.exports = {
 		src: '/_dist_'
 	},
 	plugins: [ '@snowpack/plugin-svelte' ],
-	install: [
+	routes: [
-		/* ... */
+		/* Enable an SPA Fallback in development: */
+		{ match: 'routes', src: '.*', dest: '/index.html' }
 	],
-	installOptions: {
+	packageOptions: {
 		/* ... */
 		sourceMap: false
 	},
@@ -18,13 +19,8 @@ module.exports = {
 	buildOptions: {
 		/* ... */
 	},
-	proxy: {
-		/* ... */
-	},
 	alias: {
 		/* ... */
 	},
-	experiments: {
 	optimize: { bundle: true, minify: true }
-	}
 };

src/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import "./TailwindStyles.svelte";
   import "toastify-js/src/toastify.css";
+  import "gridjs/dist/theme/mermaid.css";
   import { Route, router } from "tinro";
   router.subscribe((routeInfo) => {
     window.scrollTo(0, 0);
@@ -49,7 +50,7 @@
   OpenAPI.BASE = config.baseurl;
   import { register as registerSW } from "./swmodule";
   store.init();
-  registerSW();
+  // registerSW();
 </script>
 
 <Route>

src/components/AddOrgModal.svelte

@@ -0,0 +1,162 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let current_organizations;
+  let name_input_dom;
+  function focus(el) {
+    el.focus();
+  }
+  $: name = "";
+  $: processed_last_submit = true;
+  $: isOrgnameValid = name.trim().length !== 0;
+  $: createbtnenabled = isOrgnameValid;
+  (() => {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: "Organization is being added...",
+        duration: -1,
+      }).showToast();
+      RunnerOrganisationService.runnerOrganisationControllerPost({
+        name,
+        address: undefined,
+        contact: undefined,
+      })
+        .then((result) => {
+          console.log(result);
+          name = "";
+          modal_open = false;
+          //
+          Toastify({
+            text: "Organization added",
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_organizations = current_organizations.concat([result]);
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path
+                  d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                Create a new Organization
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  Please provide the required information to add a new
+                  organization.
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="firstname"
+                    class="block text-sm font-medium text-gray-700">Name</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder="Name"
+                    class:border-red-500={!isOrgnameValid}
+                    class:focus:border-red-500={!isOrgnameValid}
+                    class:focus:ring-red-500={!isOrgnameValid}
+                    bind:value={name}
+                    bind:this={name_input_dom}
+                    type="text"
+                    name="firstname"
+                    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" />
+                  {#if !isOrgnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Organization name is required
+                    </span>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            on:click={submit}
+            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">
+            {$_('create')}
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+            {$_('cancel')}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/components/AddUserModal.svelte

@@ -2,20 +2,21 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import { tracks as usersstore } from "../store.js";
   import { UserService } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import Toastify from "toastify-js";
-  import "toastify-js/src/toastify.css";
   export let modal_open;
+  export let current_users;
   let firstname_input;
   let lastname_input;
   let middlename_input;
+  let username_input;
   let password_input;
   let email_input;
   function focus(el) {
     el.focus();
   }
+  $: username_input_value = "";
   $: middlename_input_value = "";
   $: password_input_value = "";
   $: email_input_value = "";
@@ -49,17 +50,25 @@
         text: "User is being added...",
         duration: -1,
       }).showToast();
-      UserService.userControllerPost({
+      let postdata={
         firstname: firstname_input_value,
         lastname: lastname_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) => {
           firstname_input_value = "";
           lastname_input_value = "";
           middlename_input_value = "";
+          email_input_value = "";
+          username_input_value = "";
           modal_open = false;
           //
           Toastify({
@@ -67,12 +76,8 @@
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          let storeval = [];
+          current_users.push(result);
-          usersstore.subscribe((val) => {
+          current_users=current_users;
-            storeval = val;
-          });
-          storeval.push(result);
-          usersstore.set(storeval);
         })
         .catch((err) => {
           //
@@ -213,6 +218,19 @@
                     </span>
                   {/if}
                 </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">
                   <label
                     for="email"

src/components/Dashboard.svelte

@@ -24,19 +24,40 @@
       )
         check = true;
     })(navigator.userAgent || navigator.vendor || window.opera);
+    const aspectratio=window.innerWidth/window.innerHeight;
+    if(aspectratio<=0.765){
+      check=true;
+    }
     return check;
   }
   $: mobile = ismobile();
+  window.addEventListener('resize', function(){
+    const aspectratio=window.innerWidth/window.innerHeight;
+    if(aspectratio<=0.765){
+      navOpen=false;
+      mobile=true;
+    }else{
+      navOpen=true;
+      mobile=false;
+
+    }
+  });
+//   $: if (mobile===true) {
+//     console.log("changed to mobile");
+// }
+//   $: if (mobile===false) {
+//     console.log("changed to md");
+// }
   function logout() {
     localForage.clear();
     location.replace("/");
   }
 </script>
 
-<section class="min-h-screen bg-gray-50 dark:bg-black dark:text-gray-100">
+<section class="min-h-screen bg-gray-50">
   <nav
     class:hidden={!navOpen && mobile}
-    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0">
+    class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0 bg-gray-50">
     <a href="/" class="flex items-center px-4 py-5">
       <img
         src="/lfk-logo.png"

src/components/DataTable.svelte

@@ -2,7 +2,6 @@
   import { _, json } from "svelte-i18n";
   import { getlang } from "./datatable_i18n";
   import { Grid } from "gridjs";
-  import "gridjs/dist/theme/mermaid.css";
   //
   let table;
   const datatable = new Grid({

src/components/OrgDetail.svelte

@@ -1,14 +1,95 @@
 <script>
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import store from "../store";
+  import PromiseError from "./PromiseError.svelte";
+  $: delete_triggered = false;
+  $: save_enabled = !data_changed;
   export let params;
+  let orgdata = {};
+  let original = {};
+  $: data_loaded = false;
+  $: data_changed = JSON.stringify(orgdata) === JSON.stringify(original);
+  const promise = RunnerOrganisationService.runnerOrganisationControllerGetOne(
+    params.orgid
+  ).then((value) => {
+    data_loaded = true;
+    orgdata = Object.assign(orgdata, value);
+    original = Object.assign(original, value);
+  });
+  function deleteOrganisation() {
+    RunnerOrganisationService.runnerOrganisationControllerRemove(
+      original.id,
+      true
+    )
+      .then((resp) => {
+        location.replace("./");
+      })
+      .catch((err) => {});
+  }
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: "updating organization",
+        duration: 2500,
+      }).showToast();
+      RunnerOrganisationService.runnerOrganisationControllerPut(
+        original.id,
+        orgdata
+      )
+        .then((resp) => {
+          Object.assign(original, orgdata);
+          original = orgdata;
+          Object.assign(original, orgdata);
+          //
+          Toastify({
+            text: "updated organization",
+            duration: 2500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {});
+    } else {
+    }
+  }
 </script>
 
-<section class="container p-5">
+{#if data_loaded}
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
+  <section class="container p-5">
-    Orgs
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original.name}
+      <span data-id="org_actions_${orgdata.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteOrganisation}
+              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>
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              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>
+          {/if}
+          {#if !delete_triggered}
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              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-organization')}</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            on:click={submit}
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
+            type="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}
       </span>
-  <p class="mb-8 text-lg text-gray-500">
+    </div>
-    configure the tracks & minimum lap times
-  </p>
     <div class="flex flex-row mb-4">
       <div class="w-full">
         <nav class="w-full flex">
@@ -80,4 +161,45 @@
         </nav>
       </div>
     </div>
-</section>
+    <div class="text-sm w-full">
+      <label for="name" class="font-medium text-gray-700">Name</label>
+      <input
+        autocomplete="off"
+        placeholder="Name"
+        type="text"
+        bind:value={orgdata.name}
+        name="name"
+        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">
+      <label
+        for="contact"
+        class="font-medium text-gray-700">{$_('contact')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('contact')}
+        type="text"
+        bind:value={orgdata.contact}
+        name="contact"
+        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">
+      <label
+        for="address"
+        class="font-medium text-gray-700">{$_('address')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('address')}
+        type="text"
+        bind:value={orgdata.address}
+        name="address"
+        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>
+  </section>
+{:else}
+  {#await promise}
+    organization detail is being loaded...
+  {:catch error}
+    <PromiseError />
+  {/await}
+{/if}

src/components/OrgOverview.svelte

@@ -0,0 +1,157 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import "gridjs/dist/theme/mermaid.css";
+  import store from "../store";
+  import OrgsEmptyState from "./OrgsEmptyState.svelte";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  export let current_organizations = [];
+
+  const promise = RunnerOrganisationService.runnerOrganisationControllerGetAll().then(
+    (val) => {
+      current_organizations = val;
+    }
+  );
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:GET')}
+  {#await promise}
+    <div
+      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">organizations are being loaded...</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_organizations.length === 0}
+      <OrgsEmptyState />
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+      <div
+        class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+        <table class="divide-y divide-gray-200 w-full">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Name
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Address
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Contact
+              </th>
+              <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 current_organizations as o}
+              {#if Object.values(o)
+                .toString()
+                .toLowerCase()
+                .includes(searchvalue)}
+                <tr data-rowid="org_{o.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {o.name}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {#if o.address}
+                            {JSON.stringify(o.address)}
+                          {:else}no address specified{/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {#if o.contact}
+                            {JSON.stringify(o.contact)}
+                          {:else}no contact specified{/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  {#if active_deletes[o.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[o.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
+                        Delete</button>
+                      <button
+                        on:click={() => {
+                          RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, true)
+                            .then((resp) => {
+                              current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
+                            })
+                            .catch((err) => {
+                              // error deleting user
+                            });
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
+                        Delete</button>
+                    </td>
+                  {:else}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <a
+                        href="./{o.id}"
+                        class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[o.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <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}
+{/if}

src/components/Orgs.svelte

@@ -1,13 +1,31 @@
 <script>
   import { _ } from "svelte-i18n";
+  import store from "../store";
+  import AddOrgModal from "./AddOrgModal.svelte";
+  export let modal_open = false;
+  import OrgOverview from "./OrgOverview.svelte";
+  console.log(store.state.jwtinfo.userdetails.permissions);
+  let current_organizations = [];
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    Orgs
+    {$_('organizations')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:CREATE')}
+      <button
+        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">
+        {$_('create-organization')}
+      </button>
+    {/if}
   </span>
-  <p class="mb-8 text-lg text-gray-500">
+  <p class="mb-8 text-lg text-gray-500">manage runner organizations</p>
-    add, delete, edit organizations
+  <OrgOverview bind:current_organizations />
-  </p>
-  <nav><a class="underline" href="./1">Org 1</a></nav>
 </section>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:CREATE')}
+  <AddOrgModal bind:current_organizations bind:modal_open />
+{/if}

src/components/OrgsEmptyState.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddOrgModal from "./AddOrgModal.svelte";
+  let modal_open = false;
+  let current_organizations = [];
+</script>
+
+<div class="text-center items-center justify-center">
+  <p class="mb-16 text-lg text-gray-500">
+    <span class="font-bold">There are no organizations added yet.</span><br />
+    <span>Add your first organization</span>
+  </p>
+</div>
+
+<AddOrgModal bind:modal_open bind:current_organizations />

src/components/Tracks.svelte

@@ -6,7 +6,6 @@
   const tracks_promise = TrackService.trackControllerGetAll();
   import { getlang } from "./datatable_i18n";
   import { Grid, html } from "gridjs";
-  import "gridjs/dist/theme/mermaid.css";
   import { tracks as tracksstore } from "../store.js";
   $: trackscache = [];
   $: blocked = [];

src/components/UserDetail.svelte

@@ -2,47 +2,89 @@
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
   import store from "../store";
-  import { UserService } from "@odit/lfk-client-js";
+  import {
-  import "gridjs/dist/theme/mermaid.css";
+    UserService,
+    UserGroupService,
+    PermissionService,
+  } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
   $: delete_triggered = false;
   $: original_data = {};
-  $: editable_userdata = undefined;
+  $: editable_userdata = {};
+  $: allpermissions = [];
+  $: allgroups = [];
+  $: allgroups_ids = [];
+  $: usergroups_array_objects = [];
+  $: usergroups_array = [];
+  let usergroups_array_original = [];
   user_promise.then((data) => {
     data_loaded = true;
     original_data = Object.assign(original_data, 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);
+  $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
+  $: save_enabled = changes_performed||!groups_changed;
   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)
         .then((resp) => {
-          console.log(resp);
           Object.assign(original_data, editable_userdata);
           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) => {
-          console.log(err);
         });
     } else {
-      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>
@@ -120,27 +162,19 @@
         {/if}
         {#if !delete_triggered}
           <button
-            disabled={!changes_performed}
+            disabled={!save_enabled}
-            class:opacity-50={!changes_performed}
+            class:opacity-50={!save_enabled}
             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>
     </div>
-
-    <!--  -->
     <div class="mt-2 flex items-center">
       <img
         alt={$_('profile-picture')}
         class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
         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
         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>
@@ -210,65 +244,88 @@
         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">
+      <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">
       <span class="font-medium">{$_('groups')}</span>
+      <!-- svelte-ignore a11y-no-onchange -->
       <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"
         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>
     </div>
     <div class="text-sm w-full">
       <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="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 class="my-1 px-1 w-full overflow-hidden sm:w-1/2">erteilte</div>
         </div>
         <!--  -->
         <div class="flex flex-wrap -mx-1 overflow-hidden">
+          {#if allpermissions.length > 0}
             <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">
+                {#each allpermissions as p}
+                  {#if !editable_userdata.permissions.includes(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}
-              </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.push(p);
-                DEMO_PERMISSION
+                          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 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">
+                {#each allpermissions as p}
+                  {#if editable_userdata.permissions.includes(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}
-              </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
+                        }}
+                        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>
+          {/if}
         </div>
-        TODO: permission picker 🔒
       </div>
     </div>
   </section>

src/components/Users.svelte

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

src/components/UsersOverview.svelte

@@ -1,21 +1,19 @@
 <script>
   import { _ } from "svelte-i18n";
-  import Toastify from "toastify-js";
   import { UserService } from "@odit/lfk-client-js";
   const users_promise = UserService.userControllerGetAll();
-  import "gridjs/dist/theme/mermaid.css";
   import { users as usersstore } from "../store.js";
   import store from "../store";
   import UsersEmptyState from "./UsersEmptyState.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
-  $: userscache = [];
+  export let current_users=[];
   $: advanced_search = false;
   usersstore.subscribe((val) => {
     userscache = val;
+    current_users=val;
   });
   users_promise.then((data) => {
-    console.log(data);
     usersstore.set(data);
   });
 </script>
@@ -28,8 +26,8 @@
       <p class="font-bold">users are being loaded...</p>
       <p class="text-sm">{$_('this-might-take-a-moment')}</p>
     </div>
-  {:then users}
+  {:then}
-    {#if userscache.length === 0}
+    {#if current_users.length === 0}
       <UsersEmptyState />
     {:else}
       {#if advanced_search}
@@ -78,12 +76,12 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
-            {#each users as u}
+            {#each current_users as u}
               {#if Object.values(u)
                 .toString()
                 .toLowerCase()
                 .includes(searchvalue)}
-                <tr>
+                <tr data-rowid="user_{u.id}">
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       {#if u.profilePic}
@@ -137,12 +135,7 @@
                         on:click={() => {
                           UserService.userControllerRemove(u.id, true)
                             .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) => {
                               // error deleting user

src/locales/en.json

@@ -117,8 +117,16 @@
   "track-length-in-m": "Track Length in m",
   "track-name": "Track name",
   "tracks": "Tracks",
+  "updating-user": "updating user...",
+  "user-updated": "User updated",
+  "username": "Username",
   "users": "Users",
   "valid-email-is-required": "valid email is required",
   "welcome_wavinghand": "Welcome 👋",
-    "your_profile": "Your Profile"
+  "your_profile": "Your Profile",
+  "organizations": "Organizations",
+  "create-organization": "Create Organization",
+  "contact": "Contact",
+  "address": "Address",
+  "delete-organization": "Delete Organization"
 }