update,

2025-04-26 09:40:10 +08:00
parent 45d5c23512
commit 957df690f4
3 changed files with 193 additions and 79 deletions
--- a/002_source/cms/src/app/dashboard/teachers/list/page.tsx
+++ b/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 { SampleTeachers } from './SampleTeachers';
+import type { Teacher } from '@/components/dashboard/teacher/type.d';
 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}%"`);
    }
--- a/002_source/cms/src/app/dashboard/vocabularies/list/page.tsx
+++ b/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;
  };
 }
--- a/002_source/cms/src/components/dashboard/vocabulary/vocabularies-filters.tsx
+++ b/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();