🚀RELEASE v0.1.6

ref #12

CHANGELOG.md

@@ -2,8 +2,43 @@
 
 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)
+
+> 10 January 2021
+
+- 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)
+- 📅 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)
+- ✨ added versionbuilder.js script [`1dd6674`](https://git.odit.services/lfk/frontend/commit/1dd6674faad686c0048a62b4cd25ab21b5c8b04f)
+- ⚡ add versionbuilder script to release hook [`16f5724`](https://git.odit.services/lfk/frontend/commit/16f572480ad55425890061f9dad65fe85f2f39ad)
+- 🔨 sample build of index.html with versionbuilder script [`3caa1fc`](https://git.odit.services/lfk/frontend/commit/3caa1fc277b99ee767c1e1fc4a28fd247d98e659)
+
+#### [0.1.4](https://git.odit.services/lfk/frontend/compare/0.1.3...0.1.4)
+
+> 10 January 2021
+
+- Merge commit '45ec97066f425ac2ac66914be649cbd5a1038e10' into dev [`#20`](https://git.odit.services/lfk/frontend/issues/20)
+- 🌎 add remaining translation keys for filepond [`45ec970`](https://git.odit.services/lfk/frontend/commit/45ec97066f425ac2ac66914be649cbd5a1038e10)
+- add basic i18n logic to filepond [`b08c0f1`](https://git.odit.services/lfk/frontend/commit/b08c0f145a13d295b2a51c7a6da76faceb80a90c)
+- 🚀RELEASE v0.1.4 [`4674b52`](https://git.odit.services/lfk/frontend/commit/4674b52717e388122e113553b8a136c649ce030c)
+- 🌎 About - i18n [`692c906`](https://git.odit.services/lfk/frontend/commit/692c906cd26bdb7f7d730b90734d23748e0ab451)
+- ✨ About - change license modal icon to "legal" [`0e31ba2`](https://git.odit.services/lfk/frontend/commit/0e31ba212f99d90b133bc242e5b4d163aa99b93b)
+- new license file version [CI SKIP] [`4f3837a`](https://git.odit.services/lfk/frontend/commit/4f3837ac45a5df9a7476fd68ec9c069dc6b128cd)
+
 #### [0.1.3](https://git.odit.services/lfk/frontend/compare/0.1.2...0.1.3)
 
+> 10 January 2021
+
 - 🌎 improved i18n for AddUserModal and UserDetail [`1c356a4`](https://git.odit.services/lfk/frontend/commit/1c356a41f54a954afaa69ed524f62c1676f7bbee)
 - 🧹 simplified UsersOverview table [`e1d5d54`](https://git.odit.services/lfk/frontend/commit/e1d5d54cfb1fb20e56f0e971e2cfd196e9a913ac)
 - 🌎 added i18n for UsersOverview [`3754f09`](https://git.odit.services/lfk/frontend/commit/3754f09b2f395a82ff8c3a9c655ab8a782e7eb71)
@@ -11,6 +46,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - AddUserModal - data validation [`264e0d7`](https://git.odit.services/lfk/frontend/commit/264e0d7ed98c5000da543af154d6e36a6b956e4a)
 - ✨ sample layout for advanced search [`5ec1dfa`](https://git.odit.services/lfk/frontend/commit/5ec1dfa8b0da4619f14e73794b9a9e22872aa330)
 - userdetail - dynamic buttons [`ded3198`](https://git.odit.services/lfk/frontend/commit/ded31980bfbf9f09afa2818bdcc8cc3e40748441)
+- 🚀RELEASE v0.1.3 [`ccb5125`](https://git.odit.services/lfk/frontend/commit/ccb5125a48486ef55709419eccd7d9e912a1e64c)
 - 🔍 UsersOverview table - basic fuzzy search [`b9e0be4`](https://git.odit.services/lfk/frontend/commit/b9e0be448398d087005e220d08e34461490be14e)
 
 #### [0.1.2](https://git.odit.services/lfk/frontend/compare/0.1.2-1...0.1.2)

package.json

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

public/index.html

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

src/components/FileUpload.svelte

@@ -1,6 +1,7 @@
 <script>
   import "filepond/dist/filepond.css";
   import FilePond from "svelte-filepond";
+  import { _ } from "svelte-i18n";
   let pond;
   // pond.getFiles() will return the active files
   // the name to use for the internal file input
@@ -11,12 +12,60 @@
   function handleAddFile(err, fileItem) {
     // console.log("A file has been added", fileItem);
   }
+  const labelInvalidField = $_("filepond__field-contains-invalid-files");
+  const labelFileWaitingForSize = $_("filepond__waiting-for-size");
+  const labelFileSizeNotAvailable = $_("filepond__size-not-available");
+  const labelFileLoading = $_("filepond__loading");
+  const labelFileLoadError = $_("filepond__error-during-load");
+  const labelFileProcessing = $_("filepond__uploading");
+  const labelFileProcessingComplete = $_("filepond__upload-complete");
+  const labelFileProcessingAborted = $_("filepond__upload-cancelled");
+  const labelFileProcessingError = $_("filepond__error-during-upload");
+  const labelFileProcessingRevertError = $_("filepond__error-during-revert");
+  const labelFileRemoveError = $_("filepond__error-during-remove");
+  const labelTapToCancel = $_("filepond__tap-to-cancel");
+  const labelTapToRetry = $_("filepond__tap-to-retry");
+  const labelTapToUndo = $_("filepond__tap-to-undo");
+  const labelButtonRemoveItem = $_("filepond__remove");
+  const labelButtonAbortItemLoad = $_("filepond__abort");
+  const labelButtonRetryItemLoad = $_("filepond__retry");
+  const labelButtonAbortItemProcessing = $_("filepond__cancel");
+  const labelButtonUndoItemProcessing = $_("filepond__undo");
+  const labelButtonRetryItemProcessing = $_("filepond__retry");
+  const labelButtonProcessItem = $_("filepond__upload");
+  const labelIdle =
+    $_("drag-and-drop-your-files-or") +
+    ` <span class="filepond--label-action"> ` +
+    $_("browse") +
+    ` </span>`;
 </script>
 
 <div class="app">
   <FilePond
     bind:this={pond}
     {name}
+    {labelFileWaitingForSize}
+    {labelFileSizeNotAvailable}
+    {labelFileLoading}
+    {labelFileLoadError}
+    {labelFileProcessing}
+    {labelFileProcessingComplete}
+    {labelFileProcessingAborted}
+    {labelFileProcessingError}
+    {labelFileProcessingRevertError}
+    {labelFileRemoveError}
+    {labelTapToCancel}
+    {labelTapToRetry}
+    {labelTapToUndo}
+    {labelButtonRemoveItem}
+    {labelButtonAbortItemLoad}
+    {labelButtonRetryItemLoad}
+    {labelButtonAbortItemProcessing}
+    {labelButtonUndoItemProcessing}
+    {labelButtonRetryItemProcessing}
+    {labelButtonProcessItem}
+    {labelIdle}
+    {labelInvalidField}
     server="/api"
     allowMultiple={false}
     credits={false}

src/components/Footer.svelte

@@ -1,15 +1,32 @@
 <script>
   import { _ } from "svelte-i18n";
+  const releaseinfo = document
+    .getElementById("buildinfo")
+    .textContent.replace("RELEASE_INFO-", "")
+    .replace("-RELEASE_INFO", "");
+  const year = new Date().getFullYear();
 </script>
 
-<footer class="container">
+<footer class="p-5 w-full">
-  <hr class="mt-2 mb-4 border-b-1 border-gray-300" />
   <p class="text-sm text-gray-500 mt-4">
-    Lauf für Kaya! Läufersystem - Copyright © 2020 + proudly powered by
+    Lauf für Kaya! Läufersystem - Copyright ©
+    {year}
+    + proudly powered by
     <a
       class="underline"
       href="https://odit.services"
       rel="noopener,noreferrer"
       target="_blank">ODIT.Services</a>
   </p>
+  <p class="text-sm text-gray-500 mt-4">
+    <a
+      class="underline"
+      target="_blank"
+      rel="noopener, noreferrer"
+      href="https://git.odit.services/lfk/frontend/">LfK!Frontend</a>@<a
+      class="underline"
+      target="_blank"
+      rel="noopener, noreferrer"
+      href="https://git.odit.services/lfk/frontend/src/tag/{releaseinfo}">{releaseinfo}</a>
+  </p>
 </footer>

src/components/Login.svelte

@@ -4,6 +4,7 @@
   import { _ } from "svelte-i18n";
   store.init();
   import { OpenAPI, AuthService } from "@odit/lfk-client-js";
+  import Footer from "./Footer.svelte";
   import Toastify from "toastify-js";
   // ------
   let username = "demo";
@@ -140,3 +141,4 @@
     </div>
   </div>
 </div>
+<Footer />

src/components/UserDetail.svelte

@@ -165,6 +165,79 @@
         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" />
     </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">&gt;</button>
+          </div>
+
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <button
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&lt;</button>
+          </div>
+        </div>
+        <!--  -->
+        <div class="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>
 {:catch error}
   <PromiseError {error} />

src/components/UsersOverview.svelte

@@ -7,6 +7,7 @@
   import { users as usersstore } from "../store.js";
   import UsersEmptyState from "./UsersEmptyState.svelte";
   $: searchvalue = "";
+  $: active_deletes = [];
   $: userscache = [];
   $: advanced_search = false;
   usersstore.subscribe((val) => {
@@ -120,16 +121,49 @@
                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
                   {/each}
                 </td>
-                <td
+                {#if active_deletes[u.id] === true}
-                  class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <td
-                  <a
+                    class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                    href="./{u.id}"
+                    <button
-                    class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                      on:click={() => {
-                  <span
+                        active_deletes[u.id] = false;
-                    tabindex="0"
+                      }}
-                    href="#"
+                      tabindex="0"
-                    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
+                      class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
-                </td>
+                      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}
+                  <td
+                    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>
+                    <button
+                      on:click={() => {
+                        active_deletes[u.id] = true;
+                      }}
+                      tabindex="0"
+                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                  </td>
+                {/if}
               </tr>
             {/if}
           {/each}

src/locales/en.json

@@ -6,6 +6,7 @@
     "add-your-first-track": "Add your first track",
     "application_name": "Lauf für Kaya! - Admin",
     "author": "Author",
+    "browse": "Browse",
     "by": "by",
     "cancel": "Cancel",
     "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
@@ -39,16 +40,38 @@
     "dependency_name": "Name",
     "dont-have-your-email-connected": "Don't have your email connected?",
     "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
+    "drag-and-drop-your-files-or": "Drag & Drop your files or",
     "e-mail-adress": "E-Mail Adress",
     "email_address_or_username": "Email / username",
     "error_on_login": "Error on login",
     "faq": "FAQ",
+    "filepond__abort": "Abort",
+    "filepond__cancel": "Cancel",
+    "filepond__error-during-load": "Error during load",
+    "filepond__error-during-remove": "Error during remove",
+    "filepond__error-during-revert": "Error during revert",
+    "filepond__error-during-upload": "Error during upload",
+    "filepond__field-contains-invalid-files": "Field contains invalid files",
+    "filepond__loading": "Loading",
+    "filepond__remove": "Remove",
+    "filepond__retry": "Retry",
+    "filepond__size-not-available": "Size not available",
+    "filepond__tap-to-cancel": "tap to cancel",
+    "filepond__tap-to-retry": "tap to retry",
+    "filepond__tap-to-undo": "tap to undo",
+    "filepond__undo": "Undo",
+    "filepond__upload": "Upload",
+    "filepond__upload-cancelled": "Upload cancelled",
+    "filepond__upload-complete": "Upload complete",
+    "filepond__uploading": "Uploading",
+    "filepond__waiting-for-size": "Waiting for size",
     "first-name": "First name",
     "first-name-is-required": "First Name is required",
     "forgot_password?": "Forgot your password?",
     "general-stats": "General Stats",
     "general_promise_error": "😢 Error",
     "goback": "Go Home",
+    "groups": "Groups",
     "hallo": "hello",
     "installed-version": "Installed version",
     "invalid-mail-reset": "the provided email is invalid",

versionbuilder.js

@@ -0,0 +1,5 @@
+const fs = require('fs');
+const package = JSON.parse(fs.readFileSync(`./package.json`, { encoding: 'utf-8' }));
+const original = fs.readFileSync(`./public/index.html`, { encoding: 'utf-8' });
+let out = original.replace(/RELEASE_INFO-(\S)+-RELEASE_INFO/gi, 'RELEASE_INFO-' + package.version + '-RELEASE_INFO');
+fs.writeFileSync(`./public/index.html`, out);