update,

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();