-
Notifications
You must be signed in to change notification settings - Fork 50
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(settings): show error alert to user if firebase fail in edit and…
… organization (#1760) * feat(error): show alert box instead of toast * feat(edit): show error to user if firebase fail * feat(organization): add alert on firebase error * chore(): rename variables * chore(): remove unused function * chore(): remove unneccessary if * chore(): refactor moveboard function
- Loading branch information
Showing
14 changed files
with
354 additions
and
182 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
tavla/app/(admin)/edit/[id]/components/MetaSettings/FontSelect.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| 'use client' | ||
| import { Heading3 } from '@entur/typography' | ||
| import { SubmitButton } from 'components/Form/SubmitButton' | ||
| import { TFontSize } from 'types/meta' | ||
| import { saveFont as saveFontAction } from './actions' | ||
| import { TBoardID } from 'types/settings' | ||
| import { useToast } from '@entur/alert' | ||
| import { FontChoiceChip } from './FontChoiceChip' | ||
| import { useActionState } from 'react' | ||
| import { getFormFeedbackForField, TFormFeedback } from 'app/(admin)/utils' | ||
| import { FormError } from 'app/(admin)/components/FormError' | ||
|
|
||
| function FontSelect({ bid, font }: { bid: TBoardID; font: TFontSize }) { | ||
| const { addToast } = useToast() | ||
|
|
||
| const saveFont = async ( | ||
| state: TFormFeedback | undefined, | ||
| data: FormData, | ||
| ) => { | ||
| const formFeedback = await saveFontAction(bid, data) | ||
| if (!formFeedback) { | ||
| addToast('Tekststørrelse lagret!') | ||
| } | ||
| return formFeedback | ||
| } | ||
|
|
||
| const [fontState, fontFormAction] = useActionState(saveFont, undefined) | ||
|
|
||
| return ( | ||
| <form | ||
| action={fontFormAction} | ||
| className="box flex flex-col justify-between" | ||
| > | ||
| <Heading3 margin="bottom">Tekststørrelse </Heading3> | ||
| <FontChoiceChip font={font} /> | ||
| <div className="mt-4"> | ||
| <FormError {...getFormFeedbackForField('general', fontState)} /> | ||
| </div> | ||
| <div className="flex flex-row mt-8 justify-end"> | ||
| <SubmitButton variant="secondary" className="max-sm:w-full"> | ||
| Lagre tekststørrelse | ||
| </SubmitButton> | ||
| </div> | ||
| </form> | ||
| ) | ||
| } | ||
|
|
||
| export { FontSelect } |
84 changes: 84 additions & 0 deletions
84
tavla/app/(admin)/edit/[id]/components/MetaSettings/Organization.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| 'use client' | ||
| import { Dropdown } from '@entur/dropdown' | ||
| import { Checkbox } from '@entur/form' | ||
| import { Heading3 } from '@entur/typography' | ||
| import { FormError } from 'app/(admin)/components/FormError' | ||
| import { useOrganizations } from 'app/(admin)/hooks/useOrganizations' | ||
| import { getFormFeedbackForField } from 'app/(admin)/utils' | ||
| import ClientOnly from 'app/components/NoSSR/ClientOnly' | ||
| import { SubmitButton } from 'components/Form/SubmitButton' | ||
| import { useState, useActionState } from 'react' | ||
| import { TBoardID, TOrganization } from 'types/settings' | ||
| import { moveBoard as moveBoardAction } from './actions' | ||
| import { useToast } from '@entur/alert' | ||
|
|
||
| function Organization({ | ||
| bid, | ||
| organization, | ||
| }: { | ||
| bid: TBoardID | ||
| organization?: TOrganization | ||
| }) { | ||
| const { addToast } = useToast() | ||
|
|
||
| const { organizations, selectedOrganization, setSelectedOrganization } = | ||
| useOrganizations(organization) | ||
| const [personal, setPersonal] = useState(organization ? false : true) | ||
|
|
||
| const moveBoard = async () => { | ||
| const formFeedback = await moveBoardAction( | ||
| bid, | ||
| personal, | ||
| selectedOrganization?.value.id, | ||
| organization?.id, | ||
| ) | ||
| if (!formFeedback) { | ||
| addToast('Tavlen ble flyttet til organisasjon!') | ||
| } | ||
| return formFeedback | ||
| } | ||
|
|
||
| const [moveBoardState, moveBordFormAction] = useActionState( | ||
| moveBoard, | ||
| undefined, | ||
| ) | ||
| return ( | ||
| <form action={moveBordFormAction} className="box flex flex-col"> | ||
| <Heading3 margin="bottom">Organisasjon</Heading3> | ||
| <ClientOnly> | ||
| <Dropdown | ||
| items={organizations} | ||
| label="Dine organisasjoner" | ||
| selectedItem={selectedOrganization} | ||
| onChange={setSelectedOrganization} | ||
| clearable | ||
| className="mb-4" | ||
| aria-required="true" | ||
| disabled={personal} | ||
| /> | ||
| </ClientOnly> | ||
| <Checkbox | ||
| defaultChecked={personal} | ||
| onChange={() => setPersonal(!personal)} | ||
| name="personal" | ||
| > | ||
| Privat tavle | ||
| </Checkbox> | ||
| <div className="mt-4"> | ||
| <FormError | ||
| {...getFormFeedbackForField('organization', moveBoardState)} | ||
| /> | ||
| <FormError | ||
| {...getFormFeedbackForField('general', moveBoardState)} | ||
| /> | ||
| </div> | ||
| <div className="flex flex-row mt-8 justify-end"> | ||
| <SubmitButton variant="secondary" className="max-sm:w-full"> | ||
| Lagre organisasjon | ||
| </SubmitButton> | ||
| </div> | ||
| </form> | ||
| ) | ||
| } | ||
|
|
||
| export { Organization } |
55 changes: 55 additions & 0 deletions
55
tavla/app/(admin)/edit/[id]/components/MetaSettings/Title.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| 'use client' | ||
| import { useToast } from '@entur/alert' | ||
| import { Heading3 } from '@entur/typography' | ||
| import { getFormFeedbackForField, TFormFeedback } from 'app/(admin)/utils' | ||
| import ClientOnlyTextField from 'app/components/NoSSR/TextField' | ||
| import { SubmitButton } from 'components/Form/SubmitButton' | ||
| import { useActionState } from 'react' | ||
| import { saveTitle as saveTitleAction } from './actions' | ||
| import { TBoardID } from 'types/settings' | ||
| import { FormError } from 'app/(admin)/components/FormError' | ||
|
|
||
| function Title({ bid, title }: { bid: TBoardID; title: string }) { | ||
| const { addToast } = useToast() | ||
|
|
||
| const saveTitle = async ( | ||
| state: TFormFeedback | undefined, | ||
| data: FormData, | ||
| ) => { | ||
| const formFeedback = await saveTitleAction(state, bid, data) | ||
| if (!formFeedback) { | ||
| addToast('Navnet på tavlen er lagret!') | ||
| } | ||
| return formFeedback | ||
| } | ||
| const [titleState, saveTitleFormAction] = useActionState( | ||
| saveTitle, | ||
| undefined, | ||
| ) | ||
| return ( | ||
| <form action={saveTitleFormAction} className="box flex flex-col"> | ||
| <Heading3 margin="bottom">Navn</Heading3> | ||
| <div className="h-full"> | ||
| <ClientOnlyTextField | ||
| name="name" | ||
| className="w-full" | ||
| defaultValue={title} | ||
| label="Navn på tavlen" | ||
| maxLength={50} | ||
| {...getFormFeedbackForField('name', titleState)} | ||
| /> | ||
| </div> | ||
| <div className="mt-4"> | ||
| <FormError | ||
| {...getFormFeedbackForField('general', titleState)} | ||
| /> | ||
| </div> | ||
| <div className="flex flex-row justify-end mt-8"> | ||
| <SubmitButton variant="secondary" className="max-sm:w-full"> | ||
| Lagre navn | ||
| </SubmitButton> | ||
| </div> | ||
| </form> | ||
| ) | ||
| } | ||
| export { Title } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.