TimeUnit - first version

backend/src/routes/timeUnit.ts

@@ -1,5 +1,6 @@
 import { Router } from 'express'
-import { getAllTimeUnits, getTimeUnitDetails } from '../services/timeUnit'
+import { getAllTimeUnits, getTimeUnitDetails, getTimeUnitLocalities } from '../services/timeUnit'
+import { fixBigInt } from '../utils/common'
 
 const router = Router()
 
@@ -14,4 +15,10 @@ router.get('/:id', async (req, res) => {
   res.status(200).send(time_unit)
 })
 
+router.get('/localities/:id', async (req, res) => {
+  const id = req.params.id
+  const localities = await getTimeUnitLocalities(id)
+  return res.status(200).send(fixBigInt(localities))
+})
+
 export default router

backend/src/services/locality.ts

@@ -17,7 +17,16 @@ export const getAllLocalities = async (onlyPublic: boolean) => {
   const where = onlyPublic ? { loc_status: false } : {}
 
   const result = await prisma.now_loc.findMany({
-    select: { lid: true, loc_name: true, max_age: true, min_age: true, country: true, loc_status: true },
+    select: {
+      lid: true,
+      loc_name: true,
+      bfa_max: true,
+      bfa_min: true,
+      max_age: true,
+      min_age: true,
+      country: true,
+      loc_status: true,
+    },
     where,
   })
   return result

backend/src/services/timeUnit.ts

@@ -34,6 +34,21 @@ export const getAllTimeUnits = async () => {
 
 export const getTimeUnitDetails = async (id: string) => {
   // TODO: Check if user has access
-  const result = await prisma.now_time_unit.findUnique({ where: { tu_name: id } })
+  const result = await prisma.now_time_unit.findUnique({
+    where: { tu_name: id },
+    include: {
+      now_tu_sequence: {},
+      now_tu_bound_now_time_unit_low_bndTonow_tu_bound: {},
+      now_tu_bound_now_time_unit_up_bndTonow_tu_bound: {},
+    },
+  })
+  return result
+}
+
+export const getTimeUnitLocalities = async (id: string) => {
+  // TODO: Check if user has access
+  const result = await prisma.now_loc.findMany({
+    where: { bfa_max: id },
+  })
   return result
 }

frontend/src/App.tsx

@@ -9,6 +9,7 @@ import { ReferenceTable } from './components/Reference/ReferenceTable'
 import { RegionTable } from './components/Region/RegionTable'
 import { RegionDetails } from './components/Region/RegionDetails'
 import { SpeciesTable } from './components/Species/SpeciesTable'
+import { TimeUnitDetails } from './components/TimeUnit/TimeUnitDetails'
 import { TimeUnitTable } from './components/TimeUnit/TimeUnitTable'
 import { Login } from './components/Login'
 import { LocalityDetails } from './components/Locality/LocalityDetails'
@@ -35,6 +36,7 @@ const App = () => {
               <Route element={<RegionDetails />} path="/region/:id" />
               <Route element={<SpeciesDetails />} path="/species/:id" />
               <Route element={<SpeciesTable />} path="/species/" />
+              <Route element={<TimeUnitDetails />} path="/time-unit/:id" />
               <Route element={<TimeUnitTable />} path="/time-unit/" />
               <Route element={<FrontPage />} path="/" />
               <Route element={<Login />} path="/login" />

frontend/src/backendTypes.d.ts

@@ -33,6 +33,8 @@ export type LocalityDetails = Omit<Prisma.now_loc, 'now_mus'> & { museums: Array
 export type Locality = {
   lid: number
   loc_name: string
+  bfa_max: string | null
+  bfa_min: string | null
   max_age: number
   min_age: number
   country: string | null
@@ -95,4 +97,6 @@ export type TimeUnit = {
   rank: string
 }
 
-export type TimeUnitDetails = Prisma.now_time_unit
+// export type TimeUnitDetails = Prisma.now_time_unit
+export type TimeUnitDetails = Prisma.now_time_unit & { now_tu_sequence: Array<Editable<TimeUnitSequence>> }
+export type TimeUnitSequence = Prisma.now_tu_sequence

frontend/src/components/TimeUnit/Tabs/LocalityTab.tsx

@@ -0,0 +1,43 @@
+import { Locality } from '@/backendTypes'
+import { useGetTimeUnitLocalitiesQuery } from '@/redux/timeUnitReducer'
+import { CircularProgress } from '@mui/material'
+import { TableView } from '../../TableView/TableView'
+
+export const LocalityTab = () => {
+  const { data, isError } = useGetTimeUnitLocalitiesQuery('aragonian')
+
+  if (isError) return 'Error loading Localities.'
+  if (!data) return <CircularProgress />
+
+  const columns = [
+    {
+      accessorKey: 'loc_name',
+      header: 'Locality',
+    },
+    {
+      accessorKey: 'country',
+      header: 'Country',
+    },
+    {
+      accessorKey: 'max_age',
+      header: 'Max Age',
+    },
+    {
+      accessorKey: 'min_age',
+      header: 'Min Age',
+    },
+  ]
+  const checkRowRestriction = (row: Locality) => {
+    return !!row.loc_status
+  }
+
+  return (
+    <TableView<Locality>
+      checkRowRestriction={checkRowRestriction}
+      idFieldName="lid"
+      columns={columns}
+      data={data}
+      url="locality"
+    />
+  )
+}

frontend/src/components/TimeUnit/Tabs/TimeUnitTab.tsx

@@ -0,0 +1,26 @@
+import { TimeUnitDetails } from '@/backendTypes'
+import { ArrayFrame } from '@/components/DetailView/common/tabLayoutHelpers'
+import { useDetailContext } from '@/components/DetailView/hooks'
+
+export const TimeUnitTab = () => {
+  const { textField } = useDetailContext<TimeUnitDetails>()
+
+  const timeUnit = [
+    ['Name', textField('tu_display_name')],
+    ['Rank', textField('rank')],
+    ['Sequence', textField('sequence')],
+    ['Comment', textField('tu_comment')],
+  ]
+
+  const upperTimeUnitBound = [['ID', textField('up_bnd')]]
+
+  const lowerTimeUnitBound = [['ID', textField('low_bnd')]]
+
+  return (
+    <>
+      <ArrayFrame array={timeUnit} title="Time Unit" />
+      <ArrayFrame array={upperTimeUnitBound} title="Upper Time Unit Bound" />
+      <ArrayFrame array={lowerTimeUnitBound} title="Lower Time Unit Bound" />
+    </>
+  )
+}

frontend/src/components/TimeUnit/TimeUnitDetails.tsx

@@ -0,0 +1,27 @@
+import { useParams } from 'react-router-dom'
+import { useGetTimeUnitDetailsQuery } from '../../redux/timeUnitReducer'
+import { CircularProgress } from '@mui/material'
+import { DetailView, TabType } from '../DetailView/DetailView'
+import { LocalityTab } from './Tabs/LocalityTab'
+import { TimeUnitTab } from './Tabs/TimeUnitTab'
+
+export const TimeUnitDetails = () => {
+  const { id } = useParams()
+  const { isLoading, isError, data } = useGetTimeUnitDetailsQuery(id!)
+
+  if (isError) return <div>Error loading data</div>
+  if (isLoading || !data) return <CircularProgress />
+
+  const tabs: TabType[] = [
+    {
+      title: 'Time Unit',
+      content: <TimeUnitTab />,
+    },
+    {
+      title: 'Localities',
+      content: <LocalityTab />,
+    },
+  ]
+
+  return <DetailView tabs={tabs} data={data} onWrite={() => {}} validator={() => null} />
+}

frontend/src/redux/timeUnitReducer.ts

@@ -1,5 +1,5 @@
 import { api } from './api'
-import { TimeUnit, TimeUnitDetails } from '@/backendTypes'
+import { Locality, TimeUnit, TimeUnitDetails } from '@/backendTypes'
 
 const timeunitsApi = api.injectEndpoints({
   endpoints: builder => ({
@@ -13,7 +13,12 @@ const timeunitsApi = api.injectEndpoints({
         url: `/time-unit/${id}`,
       }),
     }),
+    getTimeUnitLocalities: builder.query<Locality[], string>({
+      query: id => ({
+        url: `/time-unit/localities/${id}`,
+      }),
+    }),
   }),
 })
 
-export const { useGetAllTimeUnitsQuery, useGetTimeUnitDetailsQuery } = timeunitsApi
+export const { useGetAllTimeUnitsQuery, useGetTimeUnitLocalitiesQuery, useGetTimeUnitDetailsQuery } = timeunitsApi