update,

002_source/cms/src/app/dashboard/lp/questions.plan/page.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+// RULES:
+// contains list page for lp_questions (QuizLPQuestions)
+// contain definition to collection only
+//
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import { COL_QUIZ_LP_QUESTIONS } from '@/constants';
+import { LoadingButton } from '@mui/lab';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import type { ListResult, RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import { defaultLpQuestion } from '@/components/dashboard/lp_questions.plan/_constants';
+import { LpQuestionsFilters } from '@/components/dashboard/lp_questions.plan/lp-questions-filters';
+import type { Filters } from '@/components/dashboard/lp_questions.plan/lp-questions-filters';
+import { LpQuestionsPagination } from '@/components/dashboard/lp_questions.plan/lp-questions-pagination';
+import { LpQuestionsSelectionProvider } from '@/components/dashboard/lp_questions.plan/lp-questions-selection-context';
+import { LpQuestionsTable } from '@/components/dashboard/lp_questions.plan/lp-questions-table';
+import type { LpQuestion } from '@/components/dashboard/lp_questions.plan/type';
+import FormLoading from '@/components/loading';
+
+export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  const { t } = useTranslation(['lp_questions']);
+  const { email, phone, sortDir, status, name, visible, type } = searchParams;
+  const router = useRouter();
+  const [lessonQuestionsData, setLessonQuestionsData] = React.useState<LpQuestion[]>([]);
+  //
+
+  const [isLoadingAddPage, setIsLoadingAddPage] = React.useState<boolean>(false);
+  const [showLoading, setShowLoading] = React.useState<boolean>(true);
+  const [showError, setShowError] = React.useState({ show: false, detail: '' });
+  //
+  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
+  const [filteredQuestions, setFilteredQuestions] = React.useState<LpQuestion[]>([]);
+  const [currentPage, setCurrentPage] = React.useState<number>(1);
+  const [recordCount, setRecordCount] = React.useState<number>(0);
+  const [listOption, setListOption] = React.useState({});
+  const [listSort, setListSort] = React.useState({});
+
+  //
+  const sortedLessonQuestions = applySort(lessonQuestionsData, sortDir);
+  const filteredLessonQuestions = applyFilters(sortedLessonQuestions, { email, phone, status });
+
+  const reloadRows = async (): Promise<void> => {
+    try {
+      const models: ListResult<RecordModel> = await pb
+        .collection(COL_QUIZ_LP_QUESTIONS)
+        .getList(currentPage + 1, rowsPerPage, {});
+      const { items, totalItems } = models;
+      const tempLessonTypes: LpQuestion[] = items.map((lt) => {
+        return { ...defaultLpQuestion, ...lt };
+      });
+
+      setLessonQuestionsData(tempLessonTypes);
+      setRecordCount(totalItems);
+      setF(tempLessonTypes);
+      console.log({ currentPage, f });
+    } catch (error) {
+      //
+      setShowError({ show: true, detail: JSON.stringify(error) });
+    } finally {
+      setShowLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    void reloadRows();
+  }, [currentPage, rowsPerPage, listOption]);
+
+  if (showLoading) return <FormLoading />;
+
+  if (showError.show)
+    return (
+      <ErrorDisplay
+        message={t('error.unable-to-process-request')}
+        code="500"
+        details={showError.detail}
+      />
+    );
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      <Stack spacing={4}>
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
+          spacing={3}
+          sx={{ alignItems: 'flex-start' }}
+        >
+          <Box sx={{ flex: '1 1 auto' }}>
+            <Typography variant="h4">{t('list.title')}</Typography>
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <LoadingButton
+              loading={isLoadingAddPage}
+              onClick={(): void => {
+                setIsLoadingAddPage(true);
+                router.push(paths.dashboard.lp_questions.create);
+              }}
+              startIcon={<PlusIcon />}
+              variant="contained"
+            >
+              {t('list.add')}
+            </LoadingButton>
+          </Box>
+        </Stack>
+        <LpQuestionsSelectionProvider lessonQuestions={filteredQuestions}>
+          <Card>
+            <LpQuestionsFilters
+              filters={{ email, phone, status, name, visible, type }}
+              fullData={lessonQuestionsData}
+              sortDir={sortDir}
+            />
+            <Divider />
+            <Box sx={{ overflowX: 'auto' }}>
+              <LpQuestionsTable
+                reloadRows={reloadRows}
+                rows={filteredQuestions}
+              />
+            </Box>
+            <Divider />
+            <LpQuestionsPagination
+              count={recordCount}
+              page={currentPage}
+              rowsPerPage={rowsPerPage}
+              setPage={setCurrentPage}
+              setRowsPerPage={setRowsPerPage}
+            />
+          </Card>
+        </LpQuestionsSelectionProvider>
+      </Stack>
+    </Box>
+  );
+}
+
+// Sorting and filtering has to be done on the server.
+
+function applySort(row: LpQuestion[], sortDir: 'asc' | 'desc' | undefined): LpQuestion[] {
+  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: LpQuestion[], { email, phone, status, name, visible }: Filters): LpQuestion[] {
+  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;
+    name?: string;
+    visible?: string;
+    type?: string;
+    //
+  };
+}