From a9e319e0c0f2bfaba42bc3af875462e394489dc2 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 12 Jan 2021 20:16:16 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=AA=20UserDetail=20-=20group=20edit=20?=
 =?UTF-8?q?support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 49 +++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index c6642ed4..43197b5e 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
   import store from "../store";
-  import { UserService } from "@odit/lfk-client-js";
+  import { UserService, UserGroupService } from "@odit/lfk-client-js";
   import "gridjs/dist/theme/mermaid.css";
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
@@ -12,12 +12,46 @@
   $: delete_triggered = false;
   $: original_data = {};
   $: editable_userdata = undefined;
+  $: allgroups = [];
+  $: allgroups_ids = [];
+  $: usergroups_array = [];
   user_promise.then((data) => {
+    console.log(data);
     data_loaded = true;
     original_data = Object.assign(original_data, data);
     editable_userdata = data;
+    usergroups_array = [];
+    allgroups.forEach((g) => {
+      allgroups_ids.push(g.id);
+    });
+  });
+  UserGroupService.userGroupControllerGetAll().then((data) => {
+    console.log(data);
+    allgroups = data;
   });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
+  function updateGroups() {
+    console.log("updating groups...");
+    console.log(editable_userdata.groups);
+    allgroups.forEach((g) => {
+      const exists_in_currentstate = editable_userdata.groups.some(
+        (obj) => obj.id === g.id
+      );
+      console.log("exists:" + exists_in_currentstate);
+      if (exists_in_currentstate === true) {
+        editable_userdata.groups = editable_userdata.groups.filter(function (
+          obj
+        ) {
+          return obj.id !== g.id;
+        });
+      } else {
+        console.log("add to arr:" + g.id);
+        editable_userdata.groups.push(g);
+      }
+    });
+    console.log("new groups:");
+    console.log(editable_userdata.groups);
+  }
   function submit() {
     if (data_loaded === true && changes_performed === true) {
       console.log("ok, submitting...");
@@ -235,12 +269,19 @@
     </div>
     <div class="text-sm w-full">
       <span class="font-medium">{$_('groups')}</span>
+      <!-- svelte-ignore a11y-no-onchange -->
       <select
+        on:change={updateGroups}
+        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>
-        <option>Finanzen</option>
-        <option>...</option>
+        {#each allgroups as g}
+          {#if editable_userdata.groups.some((obj) => obj.id === g.id)}
+            <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">