Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added custom action possibility to Card #21

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added custom action possibility to Card #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 134 additions & 35 deletions src/components/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -15,19 +15,32 @@
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')
}
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

Expand All @@ -38,6 +51,11 @@
editInfo = value
})

let actionInfo = get(cardAction)
cardAction.subscribe(value => {
actionInfo = value
})

infoOpen.subscribe(value => {
if(value !== title) {
showInfoBox = false
Expand All @@ -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()
Expand All @@ -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)
}

Expand Down Expand Up @@ -113,16 +156,34 @@
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()
}
}
}

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) {
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down Expand Up @@ -306,4 +405,4 @@
}
}

</style>
</style>
4 changes: 4 additions & 0 deletions src/lib/services/store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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å'
})