feat(boards): visual overhaul

next-tavla/app/(admin)/actions.ts

@@ -75,7 +75,7 @@ export async function getBoardsForOrganization(oid: TOrganizationID) {
         .flat()
 }
 
-export async function getBoardsForUser() {
+export async function getPrivateBoardsForUser() {
     const user = await getUser()
     if (!user)
         throw new TavlaError({
@@ -104,3 +104,32 @@ export async function getBoardsForUser() {
         )
         .flat()
 }
+
+export async function getAllBoardsForUser() {
+    const user = await getUser()
+    if (!user) return redirect('/')
+
+    const privateBoardIDs = concat(user.owner ?? [], user.editor ?? [])
+
+    const organizations = await getOrganizationsForUser()
+    const organizationBoardIDs = organizations.map((o) => o.boards)
+
+    const boardIDs = concat(privateBoardIDs, organizationBoardIDs.flat())
+
+    const batchedBoardIDs = chunk(boardIDs, 20)
+
+    const boardQueries = batchedBoardIDs.map((batch) =>
+        firestore()
+            .collection('boards')
+            .where(firestore.FieldPath.documentId(), 'in', batch)
+            .get(),
+    )
+
+    const boardRefs = await Promise.all(boardQueries)
+
+    return boardRefs
+        .map((ref) =>
+            ref.docs.map((doc) => ({ id: doc.id, ...doc.data() } as TBoard)),
+        )
+        .flat()
+}

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

@@ -1,80 +1,59 @@
 import { permanentRedirect } from 'next/navigation'
-import { SelectOrganization } from '../components/SelectOrganization'
 import { Search } from '../components/Search'
 import { FilterButton } from '../components/FilterButton'
-import { ToggleBoardsColumns } from '../components/ToggleBoardsColumns'
 import { BoardTable } from '../components/BoardTable'
 import { Metadata } from 'next'
 import React from 'react'
 import {
-    getBoardsForOrganization,
-    getBoardsForUser,
-    getOrganizationIfUserHasAccess,
+    getAllBoardsForUser,
     getOrganizationsForUser,
 } from 'app/(admin)/actions'
 import { initializeAdminApp } from 'app/(admin)/utils/firebase'
 import { getUserFromSessionCookie } from 'app/(admin)/utils/server'
+import { Heading1 } from '@entur/typography'
+import { TBoard, TBoardWithOrganization } from 'types/settings'
 
 initializeAdminApp()
 
-type TProps = {
-    params: { id: string[] }
+export const metadata: Metadata = {
+    title: `Tavler | Entur Tavla`,
 }
 
-export async function generateMetadata({ params }: TProps): Promise<Metadata> {
-    const { id } = params
-
-    const organization = id
-        ? await getOrganizationIfUserHasAccess(id[0] ?? '')
-        : { name: 'Mine' }
-
-    return {
-        title: `${organization?.name} tavler | Entur Tavla`,
-    }
-}
-
-async function OrganizationsBoardsPage({ params }: TProps) {
-    const { id } = params
+async function OrganizationsBoardsPage() {
     const user = await getUserFromSessionCookie()
     if (!user) permanentRedirect('/')
-    const organizations = await getOrganizationsForUser()
-    const activeOrganization = await getOrganizationIfUserHasAccess(
-        (id ?? '')[0],
-    )
-
-    const hasAccess =
-        activeOrganization &&
-        (activeOrganization.owners?.includes(user.uid) ||
-            activeOrganization.editors?.includes(user.uid))
 
-    if (id && !hasAccess) {
-        return <div>Du har ikke tilgang til denne organisasjonen</div>
-    }
+    const boards = await getAllBoardsForUser()
 
-    const boards = id
-        ? await getBoardsForOrganization(id[0] ?? '')
-        : await getBoardsForUser()
+    const boardsWithOrganization = await getBoardsWithOrganization(boards)
 
     return (
-        <div className="flex flex-col md:flex-row gap-3 justify-center">
-            <SelectOrganization
-                organizations={organizations}
-                active={activeOrganization}
-            />
-            <div className="flex flex-col mt-4 md:mt-8 gap-3 grow">
-                <div className="flex flex-col sm:flex-row md:items-center gap-3">
-                    <Search />
-                    <div className="flex flex-col md:flex-row gap-3">
-                        <FilterButton boards={boards} />
-                        <ToggleBoardsColumns />
-                    </div>
-                </div>
-                <div className="overflow-x-auto">
-                    <BoardTable boards={boards} />
-                </div>
+        <div className="flex flex-col gap-8">
+            <Heading1>Tavler</Heading1>
+            <div className="flex flex-col sm:flex-row md:items-center gap-3">
+                <Search />
+                <FilterButton boards={boards} />
             </div>
+            <BoardTable boardsWithOrgs={boardsWithOrganization} />
         </div>
     )
 }
 
 export default OrganizationsBoardsPage
+
+async function getBoardsWithOrganization(boards: TBoard[]) {
+    const organizations = await getOrganizationsForUser()
+
+    const boardsWithOrganization = boards.map((board: TBoard) => {
+        const org = organizations.find((org) =>
+            org.boards?.includes(board.id ?? ''),
+        )
+
+        return {
+            board: { ...board },
+            organization: { ...org },
+        } as TBoardWithOrganization
+    })
+
+    return boardsWithOrganization
+}

next-tavla/app/(admin)/boards/components/BoardTable/index.tsx

@@ -1,17 +1,20 @@
 'use client'
-import { TableHeader } from 'app/(admin)/boards/components/TableHeader'
 import { TableRows } from 'app/(admin)/boards/components/TableRows'
-import { TBoard } from 'types/settings'
+import { TBoardWithOrganization } from 'types/settings'
 import { isEmpty } from 'lodash'
-import { useSearchParam } from '../../hooks/useSearchParam'
 import { IllustratedInfo } from 'app/(admin)/components/IllustratedInfo'
-import { DEFAULT_BOARD_COLUMNS, TBoardsColumn } from 'app/(admin)/utils/types'
+import { Table, useSortableData } from '@entur/table'
+import { TableHeader } from '../TableHeader'
 
-function BoardTable({ boards }: { boards: TBoard[] }) {
-    const value = useSearchParam('columns')
-    const columns = value?.split(',') ?? DEFAULT_BOARD_COLUMNS
+function BoardTable({
+    boardsWithOrgs,
+}: {
+    boardsWithOrgs: TBoardWithOrganization[]
+}) {
+    const { sortedData, getSortableHeaderProps, getSortableTableProps } =
+        useSortableData(boardsWithOrgs)
 
-    if (isEmpty(boards))
+    if (isEmpty(boardsWithOrgs))
         return (
             <IllustratedInfo
                 title="Her var det tomt"
@@ -20,15 +23,10 @@ function BoardTable({ boards }: { boards: TBoard[] }) {
         )
 
     return (
-        <div
-            className="grid items-center"
-            style={{
-                gridTemplateColumns: `repeat(${columns.length},auto)`,
-            }}
-        >
-            <TableHeader columns={columns as TBoardsColumn[]} />
-            <TableRows boards={boards} />
-        </div>
+        <Table {...getSortableTableProps}>
+            <TableHeader getSortableHeaderProps={getSortableHeaderProps} />
+            <TableRows boardsWithOrgs={sortedData} />
+        </Table>
     )
 }
 export { BoardTable }

next-tavla/app/(admin)/boards/components/Column/Column.tsx

@@ -8,7 +8,7 @@ function Column({
     children: React.ReactNode
 }) {
     return (
-        <div id={column} className="min-h-9 flex flex-row items-center">
+        <div id={column} className="pl-2 flex flex-row items-center">
             {children}
         </div>
     )

next-tavla/app/(admin)/boards/components/Column/Name.tsx

@@ -1,8 +1,16 @@
 import { DEFAULT_BOARD_NAME } from 'app/(admin)/utils/constants'
 import { Column } from './Column'
+import { TBoard } from 'types/settings'
+import Link from 'next/link'
 
-function Name({ name = DEFAULT_BOARD_NAME }: { name?: string }) {
-    return <Column column="name">{name}</Column>
+function Name({ board }: { board: TBoard }) {
+    return (
+        <Column column="name">
+            <Link href={`/edit/${board.id}`} className="hover:underline">
+                {board.meta?.title ?? DEFAULT_BOARD_NAME}
+            </Link>
+        </Column>
+    )
 }
 
 export { Name }

next-tavla/app/(admin)/boards/components/Column/Organization.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { Column } from './Column'
+import { TOrganization } from 'types/settings'
+
+function Organization({ organization }: { organization: TOrganization }) {
+    const orgName = organization.name ?? 'Privat'
+
+    return (
+        <Column column="organization">
+            {organization.id ? (
+                <Link
+                    href={`/organizations/${organization.id}`}
+                    className="hover:underline"
+                >
+                    {orgName}
+                </Link>
+            ) : (
+                <p>{orgName}</p>
+            )}
+        </Column>
+    )
+}
+
+export { Organization }

next-tavla/app/(admin)/boards/components/Search/index.tsx

@@ -7,7 +7,6 @@ function Search() {
     const [value, replace] = useSearchParamReplacer('search')
     return (
         <TextField
-            className="w-full md:w-1/2"
             label="Søk på navn på tavle"
             prepend={<SearchIcon inline aria-hidden="true" />}
             defaultValue={value}