From 329e70f331764201702c7a97c1a8bafcfeddf3f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rune=20Moskvil=20Lyng=C3=A5s?=
 <rune.moskvil.lyngaas@vtfk.no>
Date: Thu, 27 Oct 2022 08:20:15 +0200
Subject: [PATCH] Added custom action possibility to `Card`

---
 src/components/Card.svelte | 169 +++++++++++++++++++++++++++++--------
 src/lib/services/store.js  |   4 +
 2 files changed, 138 insertions(+), 35 deletions(-)

diff --git a/src/components/Card.svelte b/src/components/Card.svelte
index 6d8daba..554b19c 100644
--- a/src/components/Card.svelte
+++ b/src/components/Card.svelte
@@ -1,6 +1,6 @@
 <script>
     import { get } from 'svelte/store'
-    import { editingPersonalia, infoOpen } from '../lib/services/store'
+    import { cardAction, editingPersonalia, infoOpen } from '../lib/services/store'
     import Button from './Button.svelte';
     import IconEdit from './Icons/IconEdit.svelte'
     import IconClose from './Icons/IconClose.svelte';
@@ -15,6 +15,13 @@
     export let backgroundColor = '--ecruWhite'
     export let infoBox = undefined // { content: "Det som kommer til å stå på hjelpeboksen, om du vil ha hjelpeboks" }
     export let editable = false
+    export let actionable = false
+    export let actionSuccessMsg = "Fullført"
+    export let isActioningText = "Noe gjøres..."
+    export let actionButtonText = "Åpne gjør noe"
+    export let actionOKButtonText = "Gjør noe"
+    export let actionCancelButtonText = "Avbryt"
+    export let actionRetryButtonText = "Prøv igjen"
     export let canSave = true
     export let saveFunc = async () => { // Only need if editable
         console.log('Æ lagrer')
@@ -22,12 +29,18 @@
     export let cancelFunc = async () => { // Only need if editable
         console.log('Æ kansellerer')
     }
+    export let actionFunc = async () => { // Only needed if actionable
+        console.log('Æ jobbær')
+    }
 
     // State
     let isSaving = false
+    let isActioning = false
     let saveError = false
+    let actionError = false
     let showInfoBox = false
     let showSavedMsg = false
+    let showActionMsg = false
     let successTimeout = null
     let isInfoBoxOpen = false
 
@@ -38,6 +51,11 @@
         editInfo = value
     })
 
+    let actionInfo = get(cardAction)
+    cardAction.subscribe(value => {
+        actionInfo = value
+    })
+
     infoOpen.subscribe(value => {
         if(value !== title) {
             showInfoBox = false
@@ -60,6 +78,16 @@
         }
     }
 
+    const openAction = () => {
+        if (!actionInfo.open) {
+            topOfCard = window.scrollY
+            resetSuccessMsg()
+            cardAction.set({ open: true, block: title })
+        } else if (actionInfo.open && actionInfo.block !== title) {
+            alert(`Du har allerede en action åpen i ${actionInfo.block}, vennligst fullfør eller avbryt den først`)
+        }
+    }
+
     const cancelEdit = () => {
         saveError = null
         resetSuccessMsg()
@@ -68,14 +96,29 @@
         scrollIfNeeded()
     }
 
-    const showSuccess = async () => {
-        showSavedMsg = true
-        await sleep(4000)
-        showSavedMsg = false
+    const cancelAction = () => {
+        actionError = null
+        resetSuccessMsg()
+        cancelFunc()
+        cardAction.set({ open: false, block: 'ingen' })
+        scrollIfNeeded()
+    }
+
+    const showSuccess = async type => {
+        if (type === 'save') {
+            showSavedMsg = true
+            await sleep(4000)
+            showSavedMsg = false
+        } else if (type === 'action') {
+            showActionMsg = true
+            await sleep(4000)
+            showActionMsg = false
+        }
     }
 
     const resetSuccessMsg = () => {
         showSavedMsg = false
+        showActionMsg = false
         clearTimeout(successTimeout)
     }
 
@@ -113,9 +156,9 @@
                 scrollIfNeeded()
                 isSaving = false
                 editingPersonalia.set({ isEditing: false, editBlock: 'ingen' })
-                await showSuccess()
+                await showSuccess('save')
             } catch (error) {
-                console.error('Aiaiaiai:', error)
+                console.error('saveChanges - Aiaiaiai:', error)
                 isSaving = false
                 saveError = error.message
                 scrollIfNeeded()
@@ -123,6 +166,24 @@
         }
     }
 
+    const doAction = async () => {
+        actionError = null
+        resetSuccessMsg()
+        isActioning = true
+        try {
+            await actionFunc()
+            scrollIfNeeded()
+            isActioning = false
+            cardAction.set({ open: false, block: 'ingen' })
+            await showSuccess('action')
+        } catch (error) {
+                console.error('doAction - Aiaiaiai:', error)
+                isActioning = false
+                actionError = error.message
+                scrollIfNeeded()
+            }
+    }
+
     const handleInfoClick = () => {
         isInfoBoxOpen = !isInfoBoxOpen
         if(isInfoBoxOpen === false) {
@@ -157,6 +218,21 @@
                             <Button buttonText="Rediger" onClick={() => openEdit()}><IconEdit slot="before" /></Button>
                         </div>
                     {/if}
+                {:else if actionable}
+                    {#if actionInfo.open && actionInfo.block === title}
+                        {#if isActioning}
+                            <IconSpinner width="2rem" />
+                        {:else if actionError}
+                            <span class="error slide fadeIn">😮 {actionError}</span>
+                        {/if}
+                    {:else}
+                        <div class="editButton">
+                            {#if showActionMsg}
+                                <div class="success slide fadeInOut">{actionSuccessMsg}</div>&nbsp&nbsp
+                            {/if}
+                            <Button buttonText={actionButtonText} onClick={() => openAction()}><IconHelp slot="before" /></Button>
+                        </div>
+                    {/if}
                 {/if}
             </div>
             {#if infoBox}
@@ -167,33 +243,56 @@
             <slot>Her er kortets innhold, hvis du huska å legge det inn. Om du skal kunne redigere kortet MÅ du huske å subscribe på tilhørende edit-store i cardContent</slot>
         </div>
         {#if editInfo.isEditing && editInfo.editBlock === title}
-        <div class="bottomLine">
-            {#if isSaving}
-                <div></div>
-                <div class="saveCancel">
-                    Lagrer...
-                    <!--
-                    <Button buttonText="Lagrer..." disabled={true}></Button>
-                    &nbsp&nbsp
-                    <Button buttonText="Lagrer..." disabled={true}></Button>
-                    -->
-                </div>
-            {:else if saveError}
-                <div></div>
-                <div class="saveCancel">
-                    <Button buttonText="Prøv igjen" disabled={!canSave} onClick={saveChanges}><IconRetry slot="before" /></Button>
-                    &nbsp&nbsp
-                    <Button buttonText="Avbryt" onClick={cancelEdit}><IconClose slot="before" /></Button>
-                </div>
-            {:else}
-                <div></div>
-                <div class="saveCancel">
-                    <Button buttonText="Lagre" disabled={!canSave} onClick={saveChanges}><IconCheck slot="before" /></Button>
-                    &nbsp&nbsp
-                    <Button buttonText="Avbryt" onClick={cancelEdit}><IconClose slot="before" /></Button>
-                </div>
-            {/if}
-        </div>
+            <div class="bottomLine">
+                {#if isSaving}
+                    <div></div>
+                    <div class="saveCancel">
+                        Lagrer...
+                        <!--
+                        <Button buttonText="Lagrer..." disabled={true}></Button>
+                        &nbsp&nbsp
+                        <Button buttonText="Lagrer..." disabled={true}></Button>
+                        -->
+                    </div>
+                {:else if saveError}
+                    <div></div>
+                    <div class="saveCancel">
+                        <Button buttonText="Prøv igjen" disabled={!canSave} onClick={saveChanges}><IconRetry slot="before" /></Button>
+                        &nbsp&nbsp
+                        <Button buttonText="Avbryt" onClick={cancelEdit}><IconClose slot="before" /></Button>
+                    </div>
+                {:else}
+                    <div></div>
+                    <div class="saveCancel">
+                        <Button buttonText="Lagre" disabled={!canSave} onClick={saveChanges}><IconCheck slot="before" /></Button>
+                        &nbsp&nbsp
+                        <Button buttonText="Avbryt" onClick={cancelEdit}><IconClose slot="before" /></Button>
+                    </div>
+                {/if}
+            </div>
+        {:else if actionInfo.open && actionInfo.block === title}
+            <div class="bottomLine">
+                {#if isActioning}
+                    <div></div>
+                    <div class="saveCancel">
+                        {isActioningText}
+                    </div>
+                {:else if actionError}
+                    <div></div>
+                    <div class="saveCancel">
+                        <Button buttonText={actionRetryButtonText} onClick={doAction}><IconRetry slot="before" /></Button> <!-- disabled={!canSave} -->
+                        &nbsp&nbsp
+                        <Button buttonText={actionCancelButtonText} onClick={cancelAction}><IconClose slot="before" /></Button>
+                    </div>
+                {:else}
+                    <div></div>
+                    <div class="saveCancel">
+                        <Button buttonText={actionOKButtonText} onClick={doAction}><IconCheck slot="before" /></Button> <!-- disabled={!canSave} -->
+                        &nbsp&nbsp
+                        <Button buttonText={actionCancelButtonText} onClick={cancelAction}><IconClose slot="before" /></Button>
+                    </div>
+                {/if}
+            </div>
         {/if}
 
     </div>
@@ -306,4 +405,4 @@
         }
     }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/services/store.js b/src/lib/services/store.js
index ba3ad53..ceaead8 100644
--- a/src/lib/services/store.js
+++ b/src/lib/services/store.js
@@ -8,3 +8,7 @@ export const editingPersonalia = writable({
   editBlock: 'ingen akkurat nå'
 })
 export const infoOpen = writable('')
+export const cardAction = writable({
+  open: false,
+  block: 'ingen akkurat nå'
+})