update,

002_source/cms/src/app/dashboard/teachers/list/page.tsx

@@ -9,7 +9,6 @@ import { useRouter } from 'next/navigation';
 import { COL_TEACHERS } from '@/constants';
 import { LoadingButton } from '@mui/lab';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
@@ -17,21 +16,17 @@ import Typography from '@mui/material/Typography';
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
 import type { ListResult, RecordModel } from 'pocketbase';
 
-import { config } from '@/config';
 import { TeachersFilters } from '@/components/dashboard/teacher/teachers-filters';
-// import type { Filters } from '@/components/dashboard/teacher/customers-filters';
 import { TeachersPagination } from '@/components/dashboard/teacher/teachers-pagination';
 import { TeachersSelectionProvider } from '@/components/dashboard/teacher/teachers-selection-context';
 import { TeachersTable } from '@/components/dashboard/teacher/teachers-table';
-import type { Teacher, Filters } from '@/components/dashboard/teacher/type.d';
+import type { Teacher } from '@/components/dashboard/teacher/type.d';
-import { SampleTeachers } from './SampleTeachers';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
 import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
-import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
 import { defaultTeacher } from '@/components/dashboard/teacher/_constants';
 import FormLoading from '@/components/loading';
@@ -112,6 +107,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     if (email) {
       tempFilter.push(`email ~ "%${email}%"`);
     }
+
     if (phone) {
       tempFilter.push(`phone ~ "%${phone}%"`);
     }

002_source/cms/src/app/dashboard/vocabularies/list/page.tsx

@@ -21,11 +21,9 @@ import { paths } from '@/paths';
 import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
-// import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
 import { defaultVocabulary } from '@/components/dashboard/vocabulary/_constants';
 import { VocabulariesFilters } from '@/components/dashboard/vocabulary/vocabularies-filters';
-import type { Filters } from '@/components/dashboard/vocabulary/vocabularies-filters';
 import { VocabulariesPagination } from '@/components/dashboard/vocabulary/vocabularies-pagination';
 import { VocabulariesSelectionProvider } from '@/components/dashboard/vocabulary/vocabularies-selection-context';
 import { VocabulariesTable } from '@/components/dashboard/vocabulary/vocabularies-table';
@@ -36,7 +34,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const { t } = useTranslation();
   const router = useRouter();
 
-  const { email, phone, sortDir, status, name, visible, type } = searchParams;
+  const { email, phone, sortDir, status, name, visible, type, word, category } = searchParams;
 
   const [lessonCategoriesData, setLessonCategoriesData] = React.useState<Vocabulary[]>([]);
 
@@ -118,6 +116,14 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       tempFilter.push(`type ~ "%${type}%"`);
     }
 
+    if (word) {
+      tempFilter.push(`word ~ "%${word}%"`);
+    }
+
+    if (category) {
+      tempFilter.push(`cat_id ~ "%000000000000003%"`);
+    }
+
     let preFinalListOption = {};
     if (tempFilter.length > 0) {
       preFinalListOption = { filter: tempFilter.join(' && ') };
@@ -126,7 +132,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
     }
     setListOption(preFinalListOption);
-  }, [visible, sortDir, name, type]);
+  }, [visible, sortDir, name, type, word, category]);
 
   // return <>helloworld</>;
 
@@ -136,7 +142,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     return (
       <ErrorDisplay
         message={t('error.unable-to-process-request')}
-        code="500"
+        code={-1}
         details={showError.detail}
       />
     );
@@ -177,7 +183,8 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
         <VocabulariesSelectionProvider lessonCategories={f}>
           <Card>
             <VocabulariesFilters
-              filters={{ email, phone, status, name, visible, type }}
+              // category
+              filters={{ email, phone, status, name, visible, type, word, category }}
               fullData={lessonCategoriesData}
               sortDir={sortDir}
             />
@@ -206,62 +213,16 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   );
 }
 
-// Sorting and filtering has to be done on the server.
-
-// function applySort(row: Vocabulary[], sortDir: 'asc' | 'desc' | undefined): Vocabulary[] {
-//   return row.sort((a, b) => {
-//     if (sortDir === 'asc') {
-//       return a.createdAt.getTime() - b.createdAt.getTime();
-//     }
-
-//     return b.createdAt.getTime() - a.createdAt.getTime();
-//   });
-// }
-
-// function applyFilters(row: Vocabulary[], { email, phone, status, name, visible }: Filters): Vocabulary[] {
-//   return row.filter((item) => {
-//     if (email) {
-//       if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
-//         return false;
-//       }
-//     }
-
-//     if (phone) {
-//       if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
-//         return false;
-//       }
-//     }
-
-//     if (status) {
-//       if (item.status !== status) {
-//         return false;
-//       }
-//     }
-
-//     if (name) {
-//       if (!item.name?.toLowerCase().includes(name.toLowerCase())) {
-//         return false;
-//       }
-//     }
-
-//     if (visible) {
-//       if (!item.visible?.toLowerCase().includes(visible.toLowerCase())) {
-//         return false;
-//       }
-//     }
-
-//     return true;
-//   });
-// }
-
 interface PageProps {
   searchParams: {
     email?: string;
     phone?: string;
     sortDir?: 'asc' | 'desc';
     status?: string;
+    word?: string;
     name?: string;
     visible?: string;
     type?: string;
+    category?: string;
   };
 }

002_source/cms/src/components/dashboard/vocabulary/vocabularies-filters.tsx

@@ -24,6 +24,9 @@ import { Option } from '@/components/core/option';
 
 import { useVocabulariesSelection } from './vocabularies-selection-context';
 import type { Vocabulary } from './type';
+import { listLessonCategories } from '@/db/LessonCategories/listLessonCategories';
+import { MenuItem } from '@mui/material';
+import { logger } from '@/lib/default-logger';
 
 export interface Filters {
   email?: string;
@@ -32,6 +35,8 @@ export interface Filters {
   name?: string;
   visible?: string;
   type?: string;
+  word?: string;
+  category?: string;
 }
 
 export type SortDir = 'asc' | 'desc';
@@ -48,34 +53,19 @@ export function VocabulariesFilters({
   fullData,
 }: VocabulariesFiltersProps): React.JSX.Element {
   const { t } = useTranslation();
-  const { email, phone, status, name, visible, type } = filters;
+  const router = useRouter();
+
+  const { email, phone, status, name, visible, type, word, category } = filters;
 
   const [totalCount, setTotalCount] = React.useState<number>(0);
   const [visibleCount, setVisibleCount] = React.useState<number>(0);
   const [hiddenCount, setHiddenCount] = React.useState<number>(0);
 
-  const router = useRouter();
-
   const selection = useVocabulariesSelection();
 
-  function getVisible(): number {
-    return fullData.reduce((count, item: Vocabulary) => {
-      return item.visible === 'visible' ? count + 1 : count;
-    }, 0);
-  }
-
-  function getHidden(): number {
-    return fullData.reduce((count, item: Vocabulary) => {
-      return item.visible === 'hidden' ? count + 1 : count;
-    }, 0);
-  }
-
   // The tabs should be generated using API data.
   const tabs = [
     { label: t('All'), value: '', count: totalCount },
-    // { label: 'Active', value: 'active', count: 3 },
-    // { label: 'Pending', value: 'pending', count: 1 },
-    // { label: 'Blocked', value: 'blocked', count: 1 },
     { label: t('visible'), value: 'visible', count: visibleCount },
     { label: t('hidden'), value: 'hidden', count: hiddenCount },
   ] as const;
@@ -104,6 +94,10 @@ export function VocabulariesFilters({
         searchParams.set('name', newFilters.name);
       }
 
+      if (newFilters.category) {
+        searchParams.set('category', newFilters.category);
+      }
+
       if (newFilters.type) {
         searchParams.set('type', newFilters.type);
       }
@@ -112,6 +106,10 @@ export function VocabulariesFilters({
         searchParams.set('visible', newFilters.visible);
       }
 
+      if (newFilters.word) {
+        searchParams.set('word', newFilters.word);
+      }
+
       router.push(`${paths.dashboard.vocabularies.list}?${searchParams.toString()}`);
     },
     [router]
@@ -142,6 +140,20 @@ export function VocabulariesFilters({
     [updateSearchParams, filters, sortDir]
   );
 
+  const handleWordChange = React.useCallback(
+    (value?: string) => {
+      updateSearchParams({ ...filters, word: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
+  const handleCategoryChange = React.useCallback(
+    (value?: string) => {
+      updateSearchParams({ ...filters, category: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
   const handleTypeChange = React.useCallback(
     (value?: string) => {
       updateSearchParams({ ...filters, type: value }, sortDir);
@@ -170,6 +182,32 @@ export function VocabulariesFilters({
     [updateSearchParams, filters]
   );
 
+  const [allCategories, setAllCategories] = React.useState<{ value: string; label: string }[]>([]);
+  async function listAllCategories() {
+    try {
+      let result = await listLessonCategories();
+      const tempAllCategories = result.map((c) => {
+        return {
+          value: c.id,
+          label: c.cat_name,
+        };
+      });
+      setAllCategories(tempAllCategories);
+    } catch (error) {
+      logger.error(error);
+    }
+  }
+
+  const [displayCategory, setDisplayCategory] = React.useState<string>('');
+  React.useEffect(() => {
+    const found = allCategories.filter((c) => c.value === category);
+    if (found.length > 0) {
+      setDisplayCategory(found[0].label);
+    } else {
+      setDisplayCategory('');
+    }
+  }, [category, allCategories]);
+
   React.useEffect(() => {
     const fetchCount = async (): Promise<void> => {
       try {
@@ -186,9 +224,11 @@ export function VocabulariesFilters({
       }
     };
     void fetchCount();
+
+    void listAllCategories();
   }, []);
 
-  const hasFilters = status || email || phone || visible || name || type;
+  const hasFilters = status || email || phone || visible || name || type || word || category;
 
   return (
     <div>
@@ -227,6 +267,33 @@ export function VocabulariesFilters({
           spacing={2}
           sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}
         >
+          <FilterButton
+            displayValue={word}
+            label={t('Word')}
+            onFilterApply={(value) => {
+              handleWordChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handleWordChange();
+            }}
+            popover={<WordFilterPopover />}
+            value={word}
+          />
+
+          {/* CategoryFilterPopover */}
+          <FilterButton
+            displayValue={displayCategory}
+            label={t('Category')}
+            onFilterApply={(value) => {
+              handleCategoryChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handleCategoryChange();
+            }}
+            popover={<CategoryFilterPopover allCategories={allCategories} />}
+            value={category}
+          />
+
           <FilterButton
             displayValue={name}
             label={t('Name')}
@@ -330,6 +397,96 @@ function TypeFilterPopover(): React.JSX.Element {
   );
 }
 
+function WordFilterPopover(): React.JSX.Element {
+  const { t } = useTranslation();
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover
+      anchorEl={anchorEl}
+      onClose={onClose}
+      open={open}
+      title={t('Filter by word')}
+    >
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        {t('Apply')}
+      </Button>
+    </FilterPopover>
+  );
+}
+
+function CategoryFilterPopover({
+  allCategories,
+}: {
+  allCategories: { value: string; label: string }[];
+}): React.JSX.Element {
+  const { t } = useTranslation();
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover
+      anchorEl={anchorEl}
+      onClose={onClose}
+      open={open}
+      title={t('Filter by category')}
+    >
+      <FormControl>
+        <Select
+          value={value}
+          onChange={(event: SelectChangeEvent) => {
+            setValue(event.target.value);
+          }}
+        >
+          {allCategories.map((c) => (
+            <MenuItem
+              key={c.value}
+              value={c.value}
+            >
+              {c.label}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        {t('Apply')}
+      </Button>
+    </FilterPopover>
+  );
+}
+
 function NameFilterPopover(): React.JSX.Element {
   const { t } = useTranslation();
   const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();