From d2193bf428d021328f407e6be1e661b582fd2a1d Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Thu, 25 Feb 2021 20:27:03 +0100
Subject: [PATCH] Finished group creation modal

ref #48
---
 src/components/groups/AddGroupModal.svelte | 195 +++------------------
 1 file changed, 29 insertions(+), 166 deletions(-)

diff --git a/src/components/groups/AddGroupModal.svelte b/src/components/groups/AddGroupModal.svelte
index b635d6a3..ab16b2c7 100644
--- a/src/components/groups/AddGroupModal.svelte
+++ b/src/components/groups/AddGroupModal.svelte
@@ -2,56 +2,19 @@
   import { _ } from "svelte-i18n";
   import { clickOutside } from "../base/outsideclick";
   import { focusTrap } from "svelte-focus-trap";
-  import {
-    RunnerService,
-    RunnerTeamService,
-    RunnerOrganizationService,
-  } from "@odit/lfk-client-js";
-  import isEmail from "validator/es/lib/isEmail";
-  import isMobilePhone from "validator/es/lib/isMobilePhone";
   import Toastify from "toastify-js";
+import { UserGroupService } from "@odit/lfk-client-js";
   export let modal_open;
-  export let current_runners;
-  $: selected_team = undefined;
-  let firstname_input;
-  let lastname_input;
-  let middlename_input;
-  let phone_input;
-  let email_input;
-  let teams = [];
-  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = val;
-  });
-  let orgs = [];
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
-  });
+  export let current_groups;
+  let description_input_value;
   function focus(el) {
     el.focus();
   }
-  $: middlename_input_value = "";
-  $: phone_input_value = "";
-  $: email_input_value = "";
-  $: lastname_input_value = "";
-  $: firstname_input_value = "";
+  $: description_input_value = "";
+  $: name_input_value = "";
   $: processed_last_submit = true;
-  $: isPhoneValidOrEmpty =
-    isMobilePhone(
-      phone_input_value
-        .replaceAll("(", "")
-        .replaceAll(")", "")
-        .replaceAll("-", "")
-        .replaceAll(" ", "")
-    ) || phone_input_value === "";
-  $: isEmailValidOrEmpty =
-    isEmail(email_input_value) || email_input_value === "";
-  $: isLastnameValid = lastname_input_value.trim().length !== 0;
-  $: isFirstnameValid = firstname_input_value.trim().length !== 0;
-  $: createbtnenabled =
-    isFirstnameValid &&
-    isLastnameValid &&
-    isEmailValidOrEmpty &&
-    isPhoneValidOrEmpty;
+  $: isNameValid = name_input_value.trim().length !== 0;
+  $: createbtnenabled = isNameValid;
   (() => {
     document.onkeydown = (e) => {
       e = e || window.event;
@@ -70,38 +33,26 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: "Runner is being added...",
+        text: "Group is being added...",
         duration: -1,
       }).showToast();
       let postdata = {
-        group: selected_team,
-        firstname: firstname_input_value,
-        lastname: lastname_input_value,
-      };
-      if (middlename_input_value) {
-        postdata.middlename = middlename_input_value;
+        name: name_input_value,
+        description: description_input_value
       }
-      if (phone_input_value) {
-        postdata.phone = phone_input_value;
-      }
-      if (email_input_value) {
-        postdata.email = email_input_value;
-      }
-      RunnerService.runnerControllerPost(postdata)
+      UserGroupService.userGroupControllerPost(postdata)
         .then((result) => {
-          firstname_input_value = "";
-          lastname_input_value = "";
-          middlename_input_value = "";
-          email_input_value = "";
+          name_input_value = "";
+          description_input_value = "";
           modal_open = false;
           //
           Toastify({
-            text: "Runner added",
+            text: "Group added",
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          current_runners.push(result);
-          current_runners = current_runners;
+          current_groups.push(result);
+          current_groups = current_groups;
         })
         .catch((err) => {
           //
@@ -154,136 +105,48 @@
             </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-runner')}
+                Create a new user group
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  {$_('please-provide-the-required-information-to-add-a-new-runner')}
+                  Please provide the required information for creating a new user group.
                 </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">{$_('first-name')}</label>
+                    class="block text-sm font-medium text-gray-700">Name</label>
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder={$_('first-name')}
-                    class:border-red-500={!isFirstnameValid}
-                    class:focus:border-red-500={!isFirstnameValid}
-                    class:focus:ring-red-500={!isFirstnameValid}
-                    bind:value={firstname_input_value}
-                    bind:this={firstname_input}
+                    placeholder="Name"
+                    class:border-red-500={!isNameValid}
+                    class:focus:border-red-500={!isNameValid}
+                    class:focus:ring-red-500={!isNameValid}
+                    bind:value={name_input_value}
                     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 !isFirstnameValid}
+                  {#if !isNameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('first-name-is-required')}
+                      Name is required
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                    class="block text-sm font-medium text-gray-700">Description(optional)</label>
                   <input
                     autocomplete="off"
-                    placeholder={$_('middle-name')}
-                    bind:value={middlename_input_value}
-                    bind:this={middlename_input}
+                    placeholder="Something about the group.."
+                    bind:value={description_input_value}
                     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="lastname"
-                    class="block text-sm font-medium text-gray-700">Last Name</label>
-                  <input
-                    autocomplete="off"
-                    placeholder="Last Name"
-                    class:border-red-500={!isLastnameValid}
-                    class:focus:border-red-500={!isLastnameValid}
-                    class:focus:ring-red-500={!isLastnameValid}
-                    bind:value={lastname_input_value}
-                    bind:this={lastname_input}
-                    type="text"
-                    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 rounded-md p-2" />
-                  {#if !isLastnameValid}
-                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('last-name-is-required')}
-                    </span>
-                  {/if}
-                </div>
-                <div class="col-span-6">
-                  <label
-                    for="team"
-                    class="block text-sm font-medium text-gray-700">{$_('team')}</label>
-                  <select
-                    name="team"
-                    bind:value={selected_team}
-                    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">
-                    {#each teams as team}
-                      <option value={team.id}>
-                        {team.parentGroup.name}
-                        &gt;
-                        {team.name}
-                      </option>
-                    {/each}
-                    {#each orgs as org}
-                      <option value={org.id}>{org.name}</option>
-                    {/each}
-                  </select>
-                </div>
-                <div class="col-span-6">
-                  <label
-                    for="phone"
-                    class="block text-sm font-medium text-gray-700">Phone</label>
-                  <input
-                    autocomplete="off"
-                    placeholder="Phone"
-                    class:border-red-500={!isPhoneValidOrEmpty}
-                    class:focus:border-red-500={!isPhoneValidOrEmpty}
-                    class:focus:ring-red-500={!isPhoneValidOrEmpty}
-                    bind:value={phone_input_value}
-                    bind:this={phone_input}
-                    type="tel"
-                    name="phone"
-                    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 !isPhoneValidOrEmpty}
-                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('the-provided-phone-number-is-invalid-less-than-br-greater-than-please-enter-a-valid-international-number')}
-                    </span>
-                  {/if}
-                </div>
-                <div class="col-span-6">
-                  <label
-                    for="email"
-                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
-                  <input
-                    autocomplete="off"
-                    placeholder={$_('e-mail-adress')}
-                    class:border-red-500={!isEmailValidOrEmpty}
-                    class:focus:border-red-500={!isEmailValidOrEmpty}
-                    class:focus:ring-red-500={!isEmailValidOrEmpty}
-                    bind:value={email_input_value}
-                    bind:this={email_input}
-                    type="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 rounded-md p-2" />
-                  {#if !isEmailValidOrEmpty}
-                    <span
-                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('valid-email-is-required')}
-                    </span>
-                  {/if}
-                </div>
               </div>
             </div>
           </div>