integrate api workspaces

frontend/package.json

@@ -24,6 +24,7 @@
     "axios": "^0.21.1",
     "colormap": "^2.3.2",
     "flexlayout-react": "^0.5.12",
+    "moment": "^2.29.4",
     "notistack": "^2.0.3",
     "plotly.js": "^2.6.0",
     "qs": "^6.11.2",

frontend/src/api/Workspace/index.ts

@@ -0,0 +1,42 @@
+import axios from 'utils/axios'
+import qs from 'qs'
+import { ItemsWorkspace, WorkspaceDataDTO } from 'store/slice/Workspace/WorkspaceType'
+
+export type WorkspacePostDataDTO = { name: string; id?: number }
+
+export const getWorkspacesApi = async (params: { [key: string]: number }): Promise<WorkspaceDataDTO> => {
+  const paramsNew = qs.stringify(params, { indices: false })
+  const response = await axios.get(`/workspaces?${paramsNew}`)
+  return response.data
+}
+
+export const delWorkspaceApi = async (id: number): Promise<boolean> => {
+  const response = await axios.delete(`/workspace/${id}`)
+  return response.data
+}
+
+export const postWorkspaceApi = async (
+  data: WorkspacePostDataDTO,
+): Promise<ItemsWorkspace> => {
+  const response = await axios.post(`/workspace`, data)
+  return response.data
+}
+
+export const putWorkspaceApi = async (
+  data: WorkspacePostDataDTO,
+): Promise<ItemsWorkspace> => {
+  const response = await axios.put(`/workspace/${data.id}`, { name: data.name })
+  return response.data
+}
+
+export const importWorkspaceApi = async (
+  data: Object,
+): Promise<ItemsWorkspace> => {
+  const response = await axios.post(`/workspace/import`, { todo_dummy: data })
+  return response.data
+}
+
+export const exportWorkspaceApi = async (id: number): Promise<void> => {
+  const response = await axios.get(`/workspace/export/${id}`)
+  return response.data
+}

frontend/src/api/users/UsersApiDTO.ts

@@ -1,4 +1,5 @@
 export type UserDTO = {
+  id: number
   uid: string
   email: string
 }

frontend/src/components/Database/DatabaseCells.tsx

@@ -3,7 +3,6 @@ import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import DialogImage from '../common/DialogImage'
 import {
-  GridCallbackDetails,
   GridEnrichedColDef,
   GridFilterModel,
   GridSortDirection,
@@ -63,24 +62,26 @@ const columns = (handleOpenDialog: (value: string[]) => void) => [
     width: 160,
     filterable: false,
     sortable: false,
-    renderCell: (params: { row: DatabaseType }) => (
-      <Box
-        sx={{
-          cursor: 'pointer',
-          display: 'flex',
-        }}
-        onClick={() => params.row?.cell_image_url && handleOpenDialog([params.row.cell_image_url])}
-      >
-        {params.row?.cell_image_url && (
+    renderCell: (params: { row: DatabaseType }) => {
+      const { cell_image_url } = params.row
+      if (!cell_image_url) return null
+      return (
+        <Box
+          sx={{
+            cursor: 'pointer',
+            display: 'flex',
+          }}
+          onClick={() => handleOpenDialog([cell_image_url])}
+        >
           <img
             src={params.row?.cell_image_url}
             alt={''}
             width={'100%'}
             height={'100%'}
           />
-        )}
-      </Box>
-    ),
+        </Box>
+      )
+    },
   },
 ]
 
@@ -124,23 +125,23 @@ const DatabaseCells = ({ user }: CellProps) => {
 
   const dataParamsFilter = useMemo(
     () => ({
-      brain_area: searchParams.get('brain_area') || '',
-      cre_driver: searchParams.get('cre_driver') || '',
-      reporter_line: searchParams.get('reporter_line') || '',
+      brain_area: searchParams.get('brain_area') || undefined,
+      cre_driver: searchParams.get('cre_driver') || undefined,
+      reporter_line: searchParams.get('reporter_line') || undefined,
       imaging_depth: Number(searchParams.get('imaging_depth')) || undefined,
     }),
     [searchParams],
   )
 
   const fetchApi = () => {
     const api = !user ? getCellsPublicDatabase : getCellsDatabase
-    dispatch(api(dataParams))
+    dispatch(api({ ...dataParamsFilter, ...dataParams }))
   }
 
   useEffect(() => {
     fetchApi()
     //eslint-disable-next-line
-  }, [dataParams, user])
+  }, [dataParams, user, dataParamsFilter])
 
   const handleOpenDialog = (data: string[]) => {
     setDataDialog({ type: 'image', data })
@@ -180,30 +181,19 @@ const DatabaseCells = ({ user }: CellProps) => {
     [pagiFilter, getParamsData],
   )
 
-  const handleFilter = (
-    model: GridFilterModel | any,
-    details: GridCallbackDetails,
-  ) => {
-    let filter: string
+  const handleFilter = (model: GridFilterModel) => {
+    let filter = ''
     if (!!model.items[0]?.value) {
-      //todo multiple filter with version pro. Issue task #55
       filter = model.items
-        .filter((item: { [key: string]: string }) => item.value)
+        .filter((item) => item.value)
         .map((item: any) => {
           return `${item.field}=${item?.value}`
         })
         .join('&')
-    } else {
-      filter = ''
-    }
-    if (!model.items[0]) {
-      setParams(
-        `${filter}&sort=${dataParams.sort[0]}&sort=${dataParams.sort[1]}&${pagiFilter}`,
-      )
-      return
     }
+    const { sort } = dataParams
     setParams(
-      `${filter}&sort=${dataParams.sort[0]}&sort=${dataParams.sort[1]}&${pagiFilter}`,
+      `${filter}&sort=${sort[0] || ''}&sort=${sort[1] || ''}&${pagiFilter}`,
     )
   }
 
@@ -219,7 +209,7 @@ const DatabaseCells = ({ user }: CellProps) => {
             <Box sx={{ display: 'flex' }}>
               {params.row.graph_urls?.[index]?.[0] ? (
                 <img
-                  src={params.row.graph_urls?.[index]?.[0] }
+                  src={params.row.graph_urls?.[index]?.[0]}
                   alt={''}
                   width={'100%'}
                   height={'100%'}

frontend/src/components/Database/DatabaseExperiments.tsx

@@ -10,7 +10,6 @@ import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
 import SwitchCustom from '../common/SwitchCustom'
 import {
-  GridCallbackDetails,
   GridEnrichedColDef,
   GridFilterModel,
   GridSortDirection,
@@ -262,7 +261,7 @@ const DatabaseExperiments = ({ user, cellPath }: DatabaseProps) => {
   }
 
   const handleChangeAttributes = (event: any) => {
-    setDataDialog(pre => ({...pre, data: event.target.value}))
+    setDataDialog((pre) => ({ ...pre, data: event.target.value }))
   }
 
   const getParamsData = () => {
@@ -305,23 +304,20 @@ const DatabaseExperiments = ({ user, cellPath }: DatabaseProps) => {
     [pagiFilter, getParamsData],
   )
 
-  const handleFilter = (
-    model: GridFilterModel | any,
-    details: GridCallbackDetails,
-  ) => {
-    let filter: string
+  const handleFilter = (model: GridFilterModel) => {
+    let filter = ''
     if (!!model.items[0]?.value) {
       filter = model.items
-        .filter((item: { [key: string]: string }) => item.value)
+        .filter((item) => item.value)
         .map((item: any) => {
           return `${item.field}=${item?.value}`
         })
         .join('&')
-    } else {
-      filter = ''
     }
-    const {sort} = dataParams
-    setParams(`${filter}&sort=${sort[0] || ''}&sort=${sort[1] || ''}&${pagiFilter()}`)
+    const { sort } = dataParams
+    setParams(
+      `${filter}&sort=${sort[0] || ''}&sort=${sort[1] || ''}&${pagiFilter()}`,
+    )
   }
 
   const getColumns = useMemo(() => {