diff --git a/packages/components/src/entry-input-layout.tsx b/packages/components/src/entry-input-layout.tsx index 71a502a..203f3a7 100644 --- a/packages/components/src/entry-input-layout.tsx +++ b/packages/components/src/entry-input-layout.tsx @@ -4,6 +4,7 @@ import styled from 'styled-components' import { Spacings } from './spacing' import { FontSizes } from './font-size' import { BorderRadii } from './border-radius' +import Highlighter from './highlighter' const ActionWrapper = styled.div` display: flex; @@ -118,13 +119,6 @@ const TextWrapper = styled(ValueBase)` padding-left: 0; ` -const Text = styled.p` - margin: 0; - padding: 0; - white-space: pre-wrap; - word-break: break-word; -` - const Time = styled(ValueBase)` width: 100px; text-align: right; @@ -193,17 +187,26 @@ interface EntryInputLayoutProps extends HTMLAttributes, EntryContai text: string time: string actions: JSX.Element + term: string clickHandler: React.Dispatch> } -export const EntryInputLayout: React.FC = ({ text, time, actions, clickHandler, ...rest }) => { +export const EntryInputLayout: React.FC = ({ + text, + time, + actions, + term, + clickHandler, + ...rest +}) => { + console.log(term) return ( <> clickHandler(true)}> - {text} + {text} diff --git a/packages/components/src/highlighter.tsx b/packages/components/src/highlighter.tsx new file mode 100644 index 0000000..838eb51 --- /dev/null +++ b/packages/components/src/highlighter.tsx @@ -0,0 +1,40 @@ +interface highlighterProps { + term: string + children: string +} + +const Highlighter: React.FC = ({ term, children }) => { + if (!term) { + return <>{children} + } + const regex = new RegExp(`(${term})`, 'gi') + const parts = children.split(regex) + console.log(parts) + + return ( + <> +
test
+ {parts.map((part: string, index: number) => + regex.test(part) ? ( + + {part} + + ) : ( + part + ) + )} + + ) +} + +export default Highlighter diff --git a/packages/frontend/src/components/day-input.tsx b/packages/frontend/src/components/day-input.tsx index b927367..8991bca 100644 --- a/packages/frontend/src/components/day-input.tsx +++ b/packages/frontend/src/components/day-input.tsx @@ -66,6 +66,7 @@ interface DayInputProps { disabled?: boolean reportStatus?: ReportStatus primary?: boolean + term: string updateMessageDay?: (message: string, commentId: string) => void updateMessageEntry?: ( message: string, @@ -86,6 +87,7 @@ const DayInput: React.FunctionComponent = ({ primary, updateMessageDay, updateMessageEntry, + term, }) => { const { getTotalMinutes } = useDayHelper() const { addToast } = useToastContext() @@ -232,6 +234,7 @@ const DayInput: React.FunctionComponent = ({ } > & { entries: (Pick & { comments: (Pick & { @@ -49,6 +50,7 @@ const EntriesInput: React.FC = ({ handleStatusChange, trainee, updateMessage, + term, }) => { const [createEntryMutation] = useCreateEntryMutation() const { addToast } = useToastContext() @@ -107,6 +109,7 @@ const EntriesInput: React.FC = ({ .sort((a, b) => a.orderId - b.orderId) .map((entry) => ( > updateMessage?: (message: string, commentId: string) => void + term: string } const EntryInput: React.FC = ({ @@ -65,6 +66,7 @@ const EntryInput: React.FC = ({ showContextMenu, setShowContextMenu, updateMessage, + term, }) => { const { loading, data } = useEntryInputDataQuery() @@ -301,6 +303,7 @@ const EntryInput: React.FC = ({ ) : ( { const [allChecked, setAllChecked] = React.useState(false) const [selectedTrainee, setSelectedTrainee] = React.useState(undefined) + const [term, setTerm] = React.useState(undefined) const getArchivedReports = React.useCallback(() => { if (!data) return [] @@ -215,6 +216,8 @@ const ArchivePage: React.FunctionComponent = () => { let weekEnd: number | undefined = undefined let searchText: string | undefined = undefined + setTerm(value) + const yearMatch = yearMonthRegex.exec(value) if (yearMonthRegex.test(value) && yearMatch) { year = parseInt(yearMatch[1], 10) @@ -346,8 +349,8 @@ const ArchivePage: React.FunctionComponent = () => { const link = data?.currentUser?.__typename === UserTypeEnum.Trainer - ? `/report/${traineeId}/${year}/${week}` - : `/report/${year}/${week}` + ? `/report/${traineeId}/${year}/${week}/${term ? term : ''}` + : `/report/${year}/${week}/${term ? term : ''}` return ( diff --git a/packages/frontend/src/pages/dashboard-page.tsx b/packages/frontend/src/pages/dashboard-page.tsx index 58ff648..2394ed5 100644 --- a/packages/frontend/src/pages/dashboard-page.tsx +++ b/packages/frontend/src/pages/dashboard-page.tsx @@ -63,6 +63,7 @@ const DashboardPage: React.FunctionComponent = () => { { const navigate = useNavigate() const { getFinishedDays } = useReportHelper() - const { trainee, year, week } = useParams() + const { trainee, year, week, term } = useParams() const variables: ReportPageDataQueryVariables = { year: parseInt(year ?? '', 10), @@ -282,6 +282,7 @@ const ReportPage: React.FunctionComponent = () => { {report?.days.map((day) => ( { <> {day.entries.map((entry, entryIndex) => ( = ({ currentUser }) => { <> } /> } /> + } /> } /> } /> } />