From 2fe56c2d2c2a0d940c819011c55a27f50157c7e9 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 23 Jan 2022 21:03:32 +0100
Subject: feat: WIP: Import from json

---
 src/webapp/src/routes/app/_header.svelte           |  47 ++------
 .../src/routes/app/modals/file-import-modal.svelte | 126 +++++++++++++++++++++
 .../app/modals/new-access-token-modal.svelte       |   8 +-
 3 files changed, 143 insertions(+), 38 deletions(-)

(limited to 'src')

diff --git a/src/webapp/src/routes/app/_header.svelte b/src/webapp/src/routes/app/_header.svelte
index 04eb405..d96e73c 100644
--- a/src/webapp/src/routes/app/_header.svelte
+++ b/src/webapp/src/routes/app/_header.svelte
@@ -13,22 +13,20 @@
     import {end_session_async} from "@/lib/api/account";
     import {clear_entries} from "@/lib/stores/entries";
     import AccessTokensModal from "./modals/access-tokens-modal.svelte";
+    import FileImportModal from "./modals/file-import-modal.svelte";
 
     let profile_dropdown_is_open = false;
     let options_dropdown_is_open = false;
     let enable_dark_theme = get(preferences).theme === ApplicationTheme.DARK;
     let enable_site_report = get(preferences).enable_site_report;
     let access_token_modal_is_open = false;
+    let file_import_modal_is_open = false;
 
     preferences.subscribe(e => {
         enable_site_report = e.enable_site_report;
         enable_dark_theme = e.theme === ApplicationTheme.DARK;
     });
 
-    function start_file_import() {
-        alert("Not implemented");
-    }
-
     function download_data() {
         const anchor = document.createElement("a");
         anchor.href = api_base("account/archive");
@@ -36,30 +34,6 @@
         anchor.remove();
     }
 
-    function manage_profile() {
-        alert("Not implemented");
-    }
-
-    function connect_github() {
-        alert("Not implemented");
-    }
-
-    function manage_access_tokens() {
-        access_token_modal_is_open = true;
-    }
-
-    function on_access_tokens_modal_close() {
-        access_token_modal_is_open = false;
-    }
-
-    function toggle_site_report() {
-        set_site_report_state(!enable_site_report);
-    }
-
-    function toggle_dark_theme() {
-        set_theme(enable_dark_theme ? ApplicationTheme.LIGHT : ApplicationTheme.DARK);
-    }
-
     async function handle_logout() {
         await clear_session_async();
         await end_session_async();
@@ -69,7 +43,10 @@
 </script>
 
 <AccessTokensModal open={access_token_modal_is_open}
-                   on:close={on_access_tokens_modal_close}/>
+                   on:close={() => access_token_modal_is_open = false}/>
+
+<FileImportModal open="{file_import_modal_is_open}"
+                 on:close={() => file_import_modal_is_open = false}/>
 
 <Header company="IOL"
         platformName="Bookmark Thing">
@@ -81,11 +58,11 @@
                       transition={false}>
             <HeaderPanelLinks>
                 <HeaderPanelDivider>Actions</HeaderPanelDivider>
-                <HeaderPanelLink on:click={start_file_import}>Import data from file</HeaderPanelLink>
-                <HeaderPanelLink on:click={connect_github}>Connect github</HeaderPanelLink>
+                <HeaderPanelLink on:click={() => alert("Not implemented")}>Import data from file</HeaderPanelLink>
+                <HeaderPanelLink on:click={() => alert("Not implemented")}>Connect github</HeaderPanelLink>
                 <HeaderPanelDivider>Options</HeaderPanelDivider>
                 <HeaderPanelToggle size="sm"
-                                   on:toggle={toggle_site_report}
+                                   on:toggle={() => set_site_report_state(!enable_site_report)}
                                    toggled="{enable_site_report}">
                     <span>Enable site report</span>
                     <Tooltip tooltipBodyId="tooltip-body"
@@ -99,7 +76,7 @@
                     </Tooltip>
                 </HeaderPanelToggle>
                 <HeaderPanelToggle size="sm"
-                                   on:toggle={toggle_dark_theme}
+                                   on:toggle={() => set_theme(enable_dark_theme ? ApplicationTheme.LIGHT : ApplicationTheme.DARK)}
                                    toggled="{enable_dark_theme}">
                     Use dark theme
                 </HeaderPanelToggle>
@@ -112,8 +89,8 @@
                       transition={false}>
             <HeaderPanelLinks>
                 <HeaderPanelDivider>Logged in as {$session?.username}</HeaderPanelDivider>
-                <HeaderPanelLink on:click={manage_profile}>Manage profile</HeaderPanelLink>
-                <HeaderPanelLink on:click={manage_access_tokens}>Manage access tokens</HeaderPanelLink>
+                <HeaderPanelLink on:click={() => alert("Not implemented")}>Manage profile</HeaderPanelLink>
+                <HeaderPanelLink on:click={() => access_token_modal_is_open = true}>Manage access tokens</HeaderPanelLink>
                 <HeaderPanelLink on:click={download_data}>Download data</HeaderPanelLink>
                 <HeaderPanelLink on:click={handle_logout}>Log out</HeaderPanelLink>
             </HeaderPanelLinks>
diff --git a/src/webapp/src/routes/app/modals/file-import-modal.svelte b/src/webapp/src/routes/app/modals/file-import-modal.svelte
index e69de29..b013688 100644
--- a/src/webapp/src/routes/app/modals/file-import-modal.svelte
+++ b/src/webapp/src/routes/app/modals/file-import-modal.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+    import {Modal, FileUploader, Select, SelectItem, Form, FormGroup} from "carbon-components-svelte";
+
+    export let open;
+
+    let available_fields = [];
+    let import_json = [];
+
+    const mappings = {
+        can_map: false,
+        url: {
+            value: "",
+            error: "",
+            validate() {
+            }
+        },
+        tags: {
+            value: "",
+            error: "",
+            available_fields: [],
+            is_array: false,
+            validate() {
+                console.log(import_json);
+                const first_tag = import_json[0][mappings.tags.value];
+                console.log(first_tag);
+                if (typeof first_tag === "object") {
+                    for (const field in first_tag) {
+                        mappings.tags.available_fields.push(field);
+                    }
+                    console.log(mappings.tags.available_fields);
+                    mappings.tags.is_array = true;
+                } else {
+                    mappings.tags.is_array = false;
+                }
+            }
+        },
+        description: {
+            value: "",
+            error: "",
+            validate() {
+            }
+        }
+    };
+
+    async function file_input_change(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+        const text = await file.text();
+        import_json = JSON.parse(text);
+        const first_entry = import_json[0];
+        if (typeof first_entry !== "object") return;
+        for (const field in first_entry) {
+            available_fields.push(field);
+        }
+        mappings.can_map = available_fields.length >= 3;
+    }
+</script>
+
+<Modal size="lg"
+       passiveModal="{true}"
+       preventCloseOnClickOutside
+       modalHeading="Import entries from a json file"
+       on:close
+       bind:open={open}>
+
+    {#if mappings.can_map}
+        <Form>
+            <FormGroup legendText="Mappings"
+                       noMargin
+                       message
+                       messageText="Map the fields you want to import">
+                <Select inline
+                        labelText="Url"
+                        error="{mappings.url.error !== ''}"
+                        errorMessage="{mappings.url.error}"
+                        on:change={mappings.url.validate}
+                        bind:selected={mappings.url.value}>
+                    {#each available_fields as field}
+                        <SelectItem value="{field}"
+                                    text="{field}"/>
+                    {/each}
+                </Select>
+                <Select inline
+                        labelText="Tags"
+                        error="{mappings.tags.error !== ''}"
+                        errorMessage="{mappings.tags.error}"
+                        on:change={mappings.tags.validate}
+                        bind:selected={mappings.tags.value}>
+                    {#each available_fields as field}
+                        <SelectItem value="{field}"
+                                    text="{field}"/>
+                    {/each}
+                </Select>
+                {#if mappings.tags.available_fields.length > 0}
+                    <Select inline
+                            labelText="Tags"
+                            error="{mappings.tags.error !== ''}"
+                            errorMessage="{mappings.tags.error}"
+                            bind:selected={mappings.tags.value}>
+                        {#each mappings.tags.available_fields as field}
+                            <SelectItem value="{field}"
+                                        text="{field}"/>
+                        {/each}
+                    </Select>
+                {/if}
+                <Select inline
+                        labelText="Description"
+                        error="{mappings.description.error !== ''}"
+                        errorMessage="{mappings.description.error}"
+                        on:change={mappings.description.validate}
+                        bind:selected={mappings.description.value}>
+                    {#each available_fields as field}
+                        <SelectItem value="{field}"
+                                    text="{field}"/>
+                    {/each}
+                </Select>
+            </FormGroup>
+        </Form>
+    {/if}
+    <FileUploader
+            buttonLabel="Select json file"
+            accept={[".json"]}
+            on:change={file_input_change}
+            status=""
+    />
+</Modal>
diff --git a/src/webapp/src/routes/app/modals/new-access-token-modal.svelte b/src/webapp/src/routes/app/modals/new-access-token-modal.svelte
index 8999b0b..c130328 100644
--- a/src/webapp/src/routes/app/modals/new-access-token-modal.svelte
+++ b/src/webapp/src/routes/app/modals/new-access-token-modal.svelte
@@ -6,17 +6,19 @@
     import {createEventDispatcher} from "svelte";
 
     export let open = false;
-    const default_expires = (new Date().setTime(new Date().getTime() + 1));
+    const date = new Date();
+    date.setDate(date.getDate() + 1);
+    const default_expiry_date = date;
     const dispatch = createEventDispatcher();
     const form = {
         error: "",
         loading: false,
         expiry_date: {
-            value: default_expires,
+            value: default_expiry_date,
             error: "",
             warning: "",
             reset() {
-                form.expiry_date.value = default_expires;
+                form.expiry_date.value = default_expiry_date;
             },
             change() {
             },
-- 
cgit v1.3