Skip to content

Commit

Permalink
feat: new design
Browse files Browse the repository at this point in the history
  • Loading branch information
@PupoSDC
PupoSDC committed Feb 7, 2024
1 parent 1be6979 commit dbf5035
Show file tree
Hide file tree
Showing 9 changed files with 160 additions and 321 deletions.
108 changes: 49 additions & 59 deletions apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
import { useRouter } from "next/router";
import { Box, Tab, TabList, TabPanel, Tabs, tabClasses } from "@mui/joy";
import { default as RightArrow } from "@mui/icons-material/ChevronRightOutlined";
import {
Divider,
Tab,
TabList,
TabPanel,
Tabs,
tabClasses,
tabPanelClasses,
} from "@mui/joy";
import { AppHead } from "@chair-flight/react/components";
import {
LayoutModule,
QuestionEditorAnnexes,
QuestionEditorExplanation,
QuestionEditorLearningObjectives,
QuestionEditorPreview,
QuestionEditorRelatedQuestions,
QuestionEditorVariant,
} from "@chair-flight/react/containers";
Expand All @@ -14,38 +23,17 @@ import type { QuestionBankName } from "@chair-flight/core/question-bank";
import type { Breadcrumbs } from "@chair-flight/react/containers";
import type { NextPage } from "next";

type QueryParams = {
tab?: string;
};

type PageParams = QueryParams & {
type PageParams = {
questionBank: QuestionBankName;
questionId: string;
};

type PageProps = {
questionBank: QuestionBankName;
questionId: string;
tab: string;
};

const Page: NextPage<PageProps> = ({
questionBank,
questionId,
tab: initialTab,
}) => {
const router = useRouter();
const query = router.query as PageParams;
const tab = query.tab ?? initialTab;

const updateQuery = (query: QueryParams) => {
router.push(
{ ...router, query: { ...router.query, ...query } },
undefined,
{ shallow: true },
);
};

const Page: NextPage<PageProps> = ({ questionBank, questionId }) => {
const crumbs = [
[questionBank.toUpperCase(), `/modules/${questionBank}`],
["Questions", `/modules/${questionBank}/questions`],
Expand All @@ -59,77 +47,79 @@ const Page: NextPage<PageProps> = ({
breadcrumbs={crumbs}
fixedHeight
noPadding
sx={{ flexDirection: "row" }}
>
<AppHead
linkTitle={`Chair Flight [${questionId}]`}
linkDescription={""}
/>

<Tabs
value={tab}
onChange={(_, v) => updateQuery({ tab: v as string })}
defaultValue={"question"}
sx={{
backgroundColor: "transparent",
display: "flex",
flexDirection: "column",
height: "100%",
pl: 1,
flex: 1,
background: "transparent",

[`& .${tabPanelClasses.root}`]: {
flex: 1,
overflow: "hidden",
my: 1,
py: 0,
},

[`& .${tabClasses.selected}`]: {
color: "primary.plainColor",
background: "transparent",
},
}}
>
<TabList
sx={{
position: "fixed",
bgcolor: "background.surface",
width: "100%",
height: (theme) => `calc(${theme.spacing(5)} + 2px)`,

[`& .${tabClasses.selected}`]: {
color: "primary.plainColor",
},
}}
>
<TabList sx={{ justifyContent: "center" }}>
<Tab value={"question"}>Question</Tab>
<Tab value={"explanation"}>Explanation</Tab>
<Tab value={"los"}>Learning Objectives</Tab>
<Tab value={"relatedQs"}>Related Questions</Tab>
<Tab value={"los"}>LOs</Tab>
<Tab value={"annexes"}>Annexes</Tab>
<Tab value={"relatedQs"}>Related</Tab>
</TabList>
<Box sx={{ height: (theme) => `calc(${theme.spacing(5)} + 2px)` }} />
<TabPanel value={"question"} sx={{ flex: 1, overflow: "hidden" }}>
<TabPanel value={"question"} sx={{ px: 0 }}>
<QuestionEditorVariant
noSsr
questionBank={questionBank}
questionId={questionId}
/>
</TabPanel>
<TabPanel value={"explanation"} sx={{ flex: 1, overflow: "hidden" }}>
<TabPanel value={"explanation"} sx={{ px: 0 }}>
<QuestionEditorExplanation
noSsr
questionBank={questionBank}
questionId={questionId}
/>
</TabPanel>
<TabPanel value={"los"} sx={{ flex: 1, overflow: "hidden" }}>
<QuestionEditorLearningObjectives
noSsr
questionBank={questionBank}
questionId={questionId}
/>
</TabPanel>
<TabPanel value={"relatedQs"} sx={{ flex: 1, overflow: "hidden" }}>
<QuestionEditorRelatedQuestions
<TabPanel value={"annexes"} sx={{ px: 0 }}>
<QuestionEditorAnnexes
noSsr
questionBank={questionBank}
questionId={questionId}
sx={{ height: "100%" }}
/>
</TabPanel>
<TabPanel value={"annexes"} sx={{ flex: 1, overflow: "hidden" }}>
<QuestionEditorAnnexes
<TabPanel value={"los"} sx={{ flex: 1, overflow: "hidden" }}>
<QuestionEditorLearningObjectives
noSsr
questionBank={questionBank}
questionId={questionId}
sx={{ height: "100%" }}
/>
</TabPanel>
</Tabs>
<Divider orientation="vertical">
<RightArrow size="lg" />
</Divider>
<QuestionEditorPreview
questionBank={questionBank}
questionId={questionId}
sx={{ flex: 1, overflow: "hidden", height: "100%", pr: 1 }}
/>
</LayoutModule>
);
};
Expand Down
1 change: 1 addition & 0 deletions libs/react/containers/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,4 @@ export * from "./tests/test-review";
export * from "./tests/test-search";
export * from "./tests/test-study";
export * from "./user/user-settings";
export * from "./questions/question-editor-preview";
3 changes: 2 additions & 1 deletion libs/react/containers/src/layouts/layout-module/layout-module.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ type Params = {
type Data = AppRouterOutput["containers"]["layouts"]["getLayoutModule"];

export const LayoutModule = container<Props, Params, Data>(
({ children, fixedHeight, noPadding, questionBank, breadcrumbs }) => {
({ children, fixedHeight, noPadding, questionBank, breadcrumbs, sx }) => {
const { isTransitioning } = usePageTransition();
const router = useRouter();
const data = LayoutModule.useData({ questionBank });
Expand Down Expand Up @@ -231,6 +231,7 @@ export const LayoutModule = container<Props, Params, Data>(
...(fixedHeight
? { height: `calc(100vh - ${HEADER_HEIGHT}px)` }
: {}),
...sx,
}}
/>
<UserBugReport />
Expand Down
1 change: 0 additions & 1 deletion libs/react/containers/src/questions/hooks/use-question-editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,6 @@ export const useQuestionEditor = create<QuestionEditor>()(
questionA: questionAid,
questionB: questionBid,
}) => {
const router = trpc.common.questions;
const questionA = get()[questionBank].afterState[questionAid];
const questionB = get()[questionBank].afterState[questionBid];

Expand Down
108 changes: 55 additions & 53 deletions libs/react/containers/src/questions/question-editor-annexes/question-editor-annexes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,7 @@ import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { default as AddIcon } from "@mui/icons-material/Add";
import { default as DeleteIcon } from "@mui/icons-material/DeleteOutlineOutlined";
import {
Box,
Button,
ListItemContent,
Stack,
Tooltip,
Typography,
} from "@mui/joy";
import { Button, ListItemContent, Stack, Tooltip, Typography } from "@mui/joy";
import { annexSearchFilters } from "@chair-flight/core/search";
import {
ImageWithModal,
Expand Down Expand Up @@ -81,20 +74,21 @@ export const QuestionEditorAnnexes = container<Props, Params, Data>(
};

return (
<Stack direction="row" component={component} sx={sx}>
<Stack height="100%" flex={1}>
<SearchHeader
search={search}
searchPlaceholder="Search Annexes..."
filters={serverData.filters}
filterValues={filterForm.watch()}
isLoading={searchAnnexes.isLoading}
isError={searchAnnexes.isError}
onSearchChange={setSearch}
onFilterValuesChange={(k, v) =>
filterForm.setValue(k as FilterKeys, v)
}
/>
<Stack component={component} sx={sx}>
<SearchHeader
search={search}
searchPlaceholder="Search Annexes..."
mobileBreakpoint="force-mobile"
filters={serverData.filters}
filterValues={filterForm.watch()}
isLoading={searchAnnexes.isLoading}
isError={searchAnnexes.isError}
onSearchChange={setSearch}
onFilterValuesChange={(k, v) =>
filterForm.setValue(k as FilterKeys, v)
}
/>
<Stack flex={1} flexDirection={"row"} overflow={"hidden"}>
<SearchList
forceMode={"mobile"}
loading={searchAnnexes.isLoading}
Expand All @@ -105,22 +99,16 @@ export const QuestionEditorAnnexes = container<Props, Params, Data>(
renderThead={() => null}
renderTableRow={() => null}
renderListItemContent={(result) => (
<ListItemContent sx={{ display: "flex" }}>
<ImageWithModal
href={result.href}
alt=""
width={100}
height={100}
/>
<Box sx={{ flex: 1, px: 1 }}>
<ListItemContent>
<Stack
direction={"row"}
gap={1}
alignItems={"center"}
justifyContent={"space-between"}
>
<Typography level="h5" sx={{ fontSize: "xs" }}>
{result.id}
</Typography>
<Typography level="body-xs" sx={{ minHeight: "4em" }}>
{result.description}
</Typography>
</Box>
<Box>
<Tooltip title="Add to Question">
<Button
sx={{ px: 1 }}
Expand All @@ -131,13 +119,22 @@ export const QuestionEditorAnnexes = container<Props, Params, Data>(
children={<AddIcon />}
/>
</Tooltip>
</Box>
</Stack>
<Stack direction={"row"} gap={1}>
<ImageWithModal
href={result.href}
alt=""
width={100}
height={100}
/>
<Typography level="body-xs" sx={{ minHeight: "4em" }}>
{result.description}
</Typography>
</Stack>
</ListItemContent>
)}
/>
</Stack>
<VerticalDivider />
<Stack height="100%" flex={1}>
<VerticalDivider />
<SearchList
forceMode={"mobile"}
noDataMessage="No Annexes selected"
Expand All @@ -148,22 +145,16 @@ export const QuestionEditorAnnexes = container<Props, Params, Data>(
renderThead={() => null}
renderTableRow={() => null}
renderListItemContent={(result) => (
<ListItemContent sx={{ display: "flex" }}>
<ImageWithModal
href={result.href}
alt=""
width={100}
height={100}
/>
<Box sx={{ flex: 1, px: 1 }}>
<ListItemContent>
<Stack
direction={"row"}
gap={1}
alignItems={"center"}
justifyContent={"space-between"}
>
<Typography level="h5" sx={{ fontSize: "xs" }}>
{result.id}
</Typography>
<Typography level="body-xs" sx={{ minHeight: "4em" }}>
{result.description}
</Typography>
</Box>
<Box>
<Tooltip title="Remove from Question">
<Button
sx={{ px: 1 }}
Expand All @@ -173,7 +164,18 @@ export const QuestionEditorAnnexes = container<Props, Params, Data>(
children={<DeleteIcon />}
/>
</Tooltip>
</Box>
</Stack>
<Stack direction={"row"} gap={1}>
<ImageWithModal
href={result.href}
alt=""
width={100}
height={100}
/>
<Typography level="body-xs" sx={{ minHeight: "4em" }}>
{result.description}
</Typography>
</Stack>
</ListItemContent>
)}
/>
Expand Down
Loading

0 comments on commit dbf5035

Please sign in to comment.