feat(folder): folder dropdown with all options (#1851)

* feat(folder): set folder to default in drodown when create board

* feat(folder): remove private baord check and add no folder as dropdown option

* refactor(): rename variable

Author: emilielr

tavla/app/(admin)/boards/[id]/page.tsx

@@ -51,7 +51,7 @@ async function FolderPage(props: TProps) {
                     {folder.name}
                 </Heading1>
                 <div className="flex flex-row gap-4">
-                    <CreateBoard />
+                    <CreateBoard folder={folder} />
                     <Button
                         variant="secondary"
                         as={Link}

tavla/app/(admin)/components/CreateBoard/NameAndOrganizationSelector.tsx

@@ -1,25 +1,21 @@
 'use client'
-import { Dropdown } from '@entur/dropdown'
-import { Checkbox } from '@entur/form'
 import { Paragraph, Label, Heading2 } from '@entur/typography'
-import { useOrganizations } from 'app/(admin)/hooks/useOrganizations'
 import { getFormFeedbackForField } from 'app/(admin)/utils'
 import { HiddenInput } from 'components/Form/HiddenInput'
 import { SubmitButton } from 'components/Form/SubmitButton'
-import { useActionState, useState } from 'react'
+import { useActionState } from 'react'
 import { createBoard } from './actions'
 import { FormError } from '../FormError'
 import ClientOnlyTextField from 'app/components/NoSSR/TextField'
+import { TOrganization } from 'types/settings'
+import { Dropdown } from '@entur/dropdown'
+import { useOrganizations } from 'app/(admin)/hooks/useOrganizations'
 
-function NameAndOrganizationSelector() {
+function NameAndOrganizationSelector({ folder }: { folder?: TOrganization }) {
     const [state, action] = useActionState(createBoard, undefined)
 
     const { organizations, selectedOrganization, setSelectedOrganization } =
-        useOrganizations()
-
-    const [isPersonal, setIsPersonal] = useState<boolean>(false)
-
-    const disableOrg = isPersonal || organizations().length == 0
+        useOrganizations(folder)
 
     return (
         <form action={action} className="md:px-10">
@@ -44,28 +40,12 @@ function NameAndOrganizationSelector() {
                 <Dropdown
                     items={organizations}
                     label="Dine mapper"
-                    selectedItem={isPersonal ? null : selectedOrganization}
+                    selectedItem={selectedOrganization}
                     onChange={setSelectedOrganization}
-                    clearable
                     aria-required="true"
                     className="mb-4"
-                    disabled={disableOrg}
-                    {...getFormFeedbackForField('organization', state)}
-                />
-                <Checkbox
-                    checked={disableOrg}
-                    onChange={() => {
-                        setSelectedOrganization(null)
-                        setIsPersonal(!isPersonal)
-                    }}
-                    name="personal"
-                >
-                    Privat tavle
-                </Checkbox>
-                <HiddenInput
-                    id="organization"
-                    value={selectedOrganization?.value.id}
                 />
+                <HiddenInput id="oid" value={selectedOrganization?.value.id} />
             </div>
             <div className="mt-4">
                 <FormError {...getFormFeedbackForField('general', state)} />

tavla/app/(admin)/components/CreateBoard/actions.ts

@@ -18,10 +18,7 @@ export async function createBoard(
     const name = data.get('name') as string
     if (!name) return getFormFeedbackForError('board/name-missing')
 
-    const oid = data.get('organization') as TOrganizationID
-    const personal = data.get('personal')
-    if (!oid && !personal)
-        return getFormFeedbackForError('create/organization-missing')
+    const oid = data.get('oid') as TOrganizationID
 
     const board = {
         tiles: [],
@@ -58,7 +55,7 @@ export async function createBoard(
 
         firestore()
             .collection(oid ? 'organizations' : 'users')
-            .doc(oid ? String(oid) : String(user.uid))
+            .doc(oid ? oid : user.uid)
             .update({
                 [oid ? 'boards' : 'owner']:
                     admin.firestore.FieldValue.arrayUnion(createdBoard.id),

tavla/app/(admin)/components/CreateBoard/index.tsx

@@ -5,8 +5,9 @@ import { NameAndOrganizationSelector } from './NameAndOrganizationSelector'
 import { Button } from '@entur/button'
 import { BoardIcon } from '@entur/icons'
 import Link from 'next/link'
+import { TOrganization } from 'types/settings'
 
-function CreateBoard() {
+function CreateBoard({ folder }: { folder?: TOrganization }) {
     const [open, close] = useSearchParamsModal('board')
 
     return (
@@ -21,7 +22,7 @@ function CreateBoard() {
                 onDismiss={() => close()}
                 closeLabel="Avbryt opprettelse av tavle"
             >
-                <NameAndOrganizationSelector />
+                <NameAndOrganizationSelector folder={folder} />
             </Modal>
         </>
     )

tavla/app/(admin)/edit/[id]/components/Settings/actions.ts

@@ -42,12 +42,8 @@ export async function saveSettings(data: FormData) {
     const theme = data.get('theme') as TTheme
     const font = data.get('font') as TFontSize
 
-    let newOrganization = data.get('newOrganization') as string | undefined
-    const oldOrganization = data.get('oldOrganization') as string
-    const personal = (data.get('personal') as string) === 'on'
-    if (newOrganization === 'undefined') {
-        newOrganization = undefined
-    }
+    const newOrganization = data.get('newOid') as TOrganizationID | undefined
+    const oldOrganization = data.get('oldOid') as TOrganizationID | undefined
 
     let location: TLocation | undefined | string = data.get(
         'newLocation',
@@ -74,17 +70,12 @@ export async function saveSettings(data: FormData) {
         if (isEmptyOrSpaces(title))
             errors['name'] = getFormFeedbackForError('board/tiles-name-missing')
 
-        if (!personal && !newOrganization)
-            errors['organization'] = getFormFeedbackForError(
-                'create/organization-missing',
-            )
-
         if (Object.keys(errors).length !== 0) {
             return errors
         }
 
         await saveTitle(bid, title)
-        await moveBoard(bid, personal, newOrganization, oldOrganization)
+        await moveBoard(bid, newOrganization, oldOrganization)
         await saveLocation(board, location)
         await saveFont(bid, font)
         await setTheme(bid, theme)
@@ -260,8 +251,7 @@ async function getTilesWithDistance(board: TBoard, location?: TLocation) {
 
 async function moveBoard(
     bid: TBoardID,
-    personal: boolean,
-    toOrganization: TOrganizationID | undefined,
+    toOrganization?: TOrganizationID,
     fromOrganization?: TOrganizationID,
 ) {
     const user = await getUserFromSessionCookie()
@@ -291,7 +281,7 @@ async function moveBoard(
                 .doc(user.uid)
                 .update({ owner: firestore.FieldValue.arrayRemove(bid) })
 
-        if (toOrganization && !personal)
+        if (toOrganization)
             await firestore()
                 .collection('organizations')
                 .doc(toOrganization)

tavla/app/(admin)/edit/[id]/components/Settings/components/Organization.tsx

@@ -1,22 +1,11 @@
 'use client'
 import { Dropdown } from '@entur/dropdown'
-import { Checkbox } from '@entur/form'
 import { Heading4 } from '@entur/typography'
-import { FormError } from 'app/(admin)/components/FormError'
 import { useOrganizations } from 'app/(admin)/hooks/useOrganizations'
-import { TFormFeedback } from 'app/(admin)/utils'
 import { HiddenInput } from 'components/Form/HiddenInput'
-import { useState } from 'react'
 import { TOrganization } from 'types/settings'
 
-function Organization({
-    organization,
-    feedback,
-}: {
-    organization?: TOrganization
-    feedback?: TFormFeedback
-}) {
-    const [personal, setPersonal] = useState(organization ? false : true)
+function Organization({ organization }: { organization?: TOrganization }) {
     const { organizations, selectedOrganization, setSelectedOrganization } =
         useOrganizations(organization)
 
@@ -28,27 +17,11 @@ function Organization({
                 label="Dine mapper"
                 selectedItem={selectedOrganization}
                 onChange={setSelectedOrganization}
-                clearable
-                className="mb-4"
                 aria-required="true"
-                disabled={personal}
-            />
-
-            <Checkbox
-                defaultChecked={personal}
-                onChange={() => setPersonal(!personal)}
-                name="personal"
-            >
-                Privat tavle
-            </Checkbox>
-            <HiddenInput id="oldOrganization" value={organization?.id ?? ''} />
-            <HiddenInput
-                id="newOrganization"
-                value={selectedOrganization?.value.id}
+                className="mb-4"
             />
-            <div className="mt-4">
-                <FormError {...feedback} />
-            </div>
+            <HiddenInput id="oldOid" value={organization?.id} />
+            <HiddenInput id="newOid" value={selectedOrganization?.value.id} />
         </div>
     )
 }

tavla/app/(admin)/edit/[id]/components/Settings/index.tsx

@@ -66,13 +66,7 @@ function Settings({
                                 formErrors.name,
                             )}
                         />
-                        <Organization
-                            organization={organization}
-                            feedback={getFormFeedbackForField(
-                                'organization',
-                                formErrors.organization,
-                            )}
-                        />
+                        <Organization organization={organization} />
                     </div>
                 </div>
                 <div className="box">

tavla/app/(admin)/hooks/useOrganizations.ts

@@ -3,24 +3,31 @@ import { useCallback, useEffect, useState } from 'react'
 import { getOrganizationsForUser } from '../actions'
 import { TOrganization } from 'types/settings'
 import { organizationToDropdownItem } from '../edit/utils'
+import { FolderIcon } from '@entur/icons'
+
+const NO_FOLDER = {
+    value: {},
+    label: 'Ingen mappe',
+}
 
 function useOrganizations(organization?: TOrganization) {
     const [organizationList, setOrganizationList] = useState<
         NormalizedDropdownItemType<TOrganization>[]
     >([])
+
     const [selectedOrganization, setSelectedOrganization] =
         useState<NormalizedDropdownItemType<TOrganization> | null>(
-            organization ? organizationToDropdownItem(organization) : null,
+            organization ? organizationToDropdownItem(organization) : NO_FOLDER,
         )
 
     useEffect(() => {
         getOrganizationsForUser().then((res) => {
-            setOrganizationList(
-                res?.map((o) => ({
-                    value: o ?? undefined,
-                    label: o.name ?? '',
-                })),
-            )
+            const organizations = res?.map((organization) => ({
+                value: organization ?? undefined,
+                label: organization.name ?? '',
+                icons: [FolderIcon],
+            }))
+            setOrganizationList([...organizations, NO_FOLDER])
         })
     }, [])
 

tavla/app/(admin)/utils/index.ts

@@ -155,18 +155,6 @@ export function getFormFeedbackForError(
                 feedback: 'Du har ikke gitt tavla et navn',
                 variant: 'negative',
             }
-        case 'create/organization-missing':
-            return {
-                form_type: 'organization',
-                feedback: 'Du har ikke valgt mappe',
-                variant: 'negative',
-            }
-        case 'board/tiles-missing':
-            return {
-                form_type: 'general',
-                feedback: 'Du har ikke lagt til noen stoppesteder',
-                variant: 'negative',
-            }
         case 'board/tiles-name-missing':
             return {
                 form_type: 'name',