Admin table: add option to show only active courses

Author: erikao1998

src/client/components/Admin/ChatInstances/ChatInstanceTable.tsx

@@ -7,7 +7,13 @@ import TableCell from '@mui/material/TableCell'
 import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TablePagination from '@mui/material/TablePagination'
-import { TextField, Link, TableSortLabel } from '@mui/material'
+import {
+  TextField,
+  Link,
+  TableSortLabel,
+  Checkbox,
+  InputLabel,
+} from '@mui/material'
 import TableRow from '@mui/material/TableRow'
 import { debounce } from 'lodash'
 import Paper from '@mui/material/Paper'
@@ -192,6 +198,7 @@ const ChatInstanceTable = () => {
   const [order, setOrder] = React.useState<Order>('asc')
   const [orderBy, setOrderBy] =
     React.useState<keyof ChatInstanceWithTokens>('name')
+  const [showActiveCourses, setShowActiveCourses] = React.useState(false)
 
   const [page, setPage] = React.useState(0)
   const [rowsPerPage, setRowsPerPage] = React.useState(10)
@@ -202,6 +209,7 @@ const ChatInstanceTable = () => {
     search: deferredSearch,
     order,
     orderBy,
+    showActiveCourses,
   })
 
   const handleChangePage = React.useCallback(
@@ -242,6 +250,16 @@ const ChatInstanceTable = () => {
   return (
     <Box sx={{ width: '100%' }}>
       <Paper sx={{ width: '100%', mb: 2 }}>
+        <Box>
+          <InputLabel>
+            <Checkbox
+              checked={showActiveCourses}
+              onChange={() => setShowActiveCourses(!showActiveCourses)}
+              inputProps={{ 'aria-label': 'controlled' }}
+            />
+            Näytä aktiiviset kurssit
+          </InputLabel>
+        </Box>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <TextField
             label={t('admin:searchCourse')}

src/client/components/Admin/ChatInstances/useChatInstances.ts

@@ -14,15 +14,19 @@ const useChatInstances = ({
   search = '',
   order = '',
   orderBy = '',
+  showActiveCourses = false,
 }) => {
-  const queryKey = ['chatInstances', { limit, offset, search, order, orderBy }]
+  const queryKey = [
+    'chatInstances',
+    { limit, offset, search, order, orderBy, showActiveCourses },
+  ]
 
   const queryFn = async (): Promise<{
     chatInstances: ChatInstanceWithTokens[]
     count: number
   }> => {
     const res = await apiClient.get(
-      `/chatinstances?limit=${limit}&offset=${offset}&search=${search}&orderBy=${orderBy}&order=${order}`
+      `/chatinstances?limit=${limit}&offset=${offset}&search=${search}&orderBy=${orderBy}&order=${order}&showActiveCourses=${showActiveCourses}`
     )
 
     const { data } = res

src/server/routes/chatInstance.ts

@@ -15,12 +15,14 @@ chatInstanceRouter.get('/', async (req, res) => {
     search: searchRaw,
     order: orderRaw,
     orderBy: orderByRaw,
+    showActiveCourses: showActiveCoursesRaw,
   } = req.query
   const limit = limitStr ? parseInt(limitStr as string, 10) : 100
   const offset = offsetStr ? parseInt(offsetStr as string, 10) : 0
   const search = String(searchRaw)
   const order = String(orderRaw)
   const orderBy = String(orderByRaw)
+  const showActiveCourses = String(showActiveCoursesRaw)
   const hasSearch = search && search.length >= 4
 
   const { rows: chatInstances, count } = await ChatInstance.findAndCountAll({
@@ -45,16 +47,27 @@ chatInstanceRouter.get('/', async (req, res) => {
       ],
       exclude: ['updatedAt', 'createdAt'],
     },
-    where: hasSearch
-      ? {
-          [Op.or]: [
-            { courseId: { [Op.like]: `${search}%` } },
-            { 'name.en': { [Op.iLike]: `%${search}%` } },
-            { 'name.fi': { [Op.iLike]: `%${search}%` } },
-            { 'name.sv': { [Op.iLike]: `%${search}%` } },
-          ],
-        }
-      : undefined,
+    where:
+      // eslint-disable-next-line no-nested-ternary
+      showActiveCourses === 'true'
+        ? {
+            'activityPeriod.endDate': {
+              [Op.gt]: new Date().toISOString(),
+            },
+            'activityPeriod.startDate': {
+              [Op.lt]: new Date().toISOString(),
+            },
+          }
+        : hasSearch
+          ? {
+              [Op.or]: [
+                { courseId: { [Op.like]: `${search}%` } },
+                { 'name.en': { [Op.iLike]: `%${search}%` } },
+                { 'name.fi': { [Op.iLike]: `%${search}%` } },
+                { 'name.sv': { [Op.iLike]: `%${search}%` } },
+              ],
+            }
+          : undefined,
     limit,
     offset,
     order: [