Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kun et skjema åpent omgangen! #2400

Merged
merged 3 commits into from
Mar 5, 2025
Merged

Kun et skjema åpent omgangen! #2400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a0d1431
only open one stepform at a time. Change next button to secondary var…
MaPoKen Mar 5, 2025
1d08a47
Change text to Gå videre
MaPoKen Mar 5, 2025
e525a83
Rename formId to selectedLearningpathStepId
MaPoKen Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 20 additions & 9 deletions src/containers/MyNdla/Learningpath/EditLearningpathStepsPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ interface Props {

export const EditLearningpathStepsPageContent = ({ learningpath }: Props) => {
const { t, i18n } = useTranslation();
const [isCreating, setIsCreating] = useState(false);
const [selectedLearningpathStepId, setSelectedLearningpathStepId] = useState<undefined | number>(undefined);
const [createStep] = useCreateLearningpathStep(learningpath.id.toString() ?? "");
const toast = useToast();

Expand All @@ -55,7 +55,7 @@ export const EditLearningpathStepsPageContent = ({ learningpath }: Props) => {
},
});
if (!errors?.length) {
setIsCreating(false);
setSelectedLearningpathStepId(undefined);
toast.create({ title: t("myNdla.learningpath.form.steps.created", { name: values.title }) });
}
}
Expand All @@ -69,23 +69,34 @@ export const EditLearningpathStepsPageContent = ({ learningpath }: Props) => {
</Heading>
<StyledOl>
{learningpath.learningsteps?.map((step) => (
<LearningpathStepListItem learningpathId={learningpath.id ?? -1} step={step} key={step.id} />
<LearningpathStepListItem
learningpathId={learningpath.id ?? -1}
step={step}
key={step.id}
selectedLearningpathStepId={selectedLearningpathStepId}
setSelectedLearningpathStepId={setSelectedLearningpathStepId}
/>
))}
</StyledOl>
{!isCreating ? (
<AddButton variant="secondary" onClick={() => setIsCreating(true)}>
{!selectedLearningpathStepId || selectedLearningpathStepId !== -1 ? (
<AddButton variant="secondary" onClick={() => setSelectedLearningpathStepId(-1)}>
<AddLine />
{t("myNdla.learningpath.form.steps.add")}
</AddButton>
) : (
<LearningpathStepForm stepType="text" onClose={() => setIsCreating(false)} onSave={onSaveStep} />
)}
) : null}
{selectedLearningpathStepId === -1 ? (
<LearningpathStepForm
stepType="text"
onClose={() => setSelectedLearningpathStepId(undefined)}
onSave={onSaveStep}
/>
) : null}
</Stack>
<Stack justify="space-between" direction="row">
<SafeLinkButton variant="secondary" to={routes.myNdla.learningpathEditTitle(learningpath.id)}>
{t("myNdla.learningpath.form.back")}
</SafeLinkButton>
<SafeLinkButton to={routes.myNdla.learningpathPreview(learningpath.id)}>
<SafeLinkButton variant="secondary" to={routes.myNdla.learningpathPreview(learningpath.id)}>
{t("myNdla.learningpath.form.next")}
</SafeLinkButton>
</Stack>
Expand Down
2 changes: 1 addition & 1 deletion src/containers/MyNdla/Learningpath/EditLearningpathTitlePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export const EditLearningpathTitlePage = () => {
}}
/>
<Stack justify="flex-end" direction="row">
<Button type="submit" form="titleForm">
<Button variant="secondary" type="submit" form="titleForm">
{t("myNdla.learningpath.form.next")}
</Button>
</Stack>
Expand Down
2 changes: 1 addition & 1 deletion src/containers/MyNdla/Learningpath/PreviewLearningpathPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export const PreviewLearningpathPage = () => {
<SafeLinkButton variant="secondary" to={routes.myNdla.learningpathEditSteps(learningpath.id)}>
{t("myNdla.learningpath.form.back")}
</SafeLinkButton>
<SafeLinkButton to={routes.myNdla.learningpathSave(learningpath.id)}>
<SafeLinkButton variant="secondary" to={routes.myNdla.learningpathSave(learningpath.id)}>
{t("myNdla.learningpath.form.next")}
</SafeLinkButton>
</LearningpathFormButtonContainer>
Expand Down
27 changes: 17 additions & 10 deletions src/containers/MyNdla/Learningpath/components/LearningpathStepListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*
*/

import { useState } from "react";
import { Dispatch, SetStateAction } from "react";
import { useTranslation } from "react-i18next";
import { PencilLine, CloseLine } from "@ndla/icons";
import { Button, Text } from "@ndla/primitives";
Expand Down Expand Up @@ -45,11 +45,16 @@ const ContentWrapper = styled("div", {
interface LearningpathStepListItemProps {
learningpathId: number;
step: GQLMyNdlaLearningpathStepFragment;
selectedLearningpathStepId: number | undefined;
setSelectedLearningpathStepId: Dispatch<SetStateAction<number | undefined>>;
}

export const LearningpathStepListItem = ({ step, learningpathId }: LearningpathStepListItemProps) => {
const [isEditing, setIsEditing] = useState(false);

export const LearningpathStepListItem = ({
step,
learningpathId,
selectedLearningpathStepId,
setSelectedLearningpathStepId,
}: LearningpathStepListItemProps) => {
const { t, i18n } = useTranslation();
const toast = useToast();

Expand All @@ -65,7 +70,7 @@ export const LearningpathStepListItem = ({ step, learningpathId }: LearningpathS
params: { ...transformedData, language: i18n.language, revision: step.revision },
},
});
setIsEditing(false);
setSelectedLearningpathStepId(undefined);
};

const onDelete = async (close: VoidFunction) => {
Expand All @@ -85,25 +90,27 @@ export const LearningpathStepListItem = ({ step, learningpathId }: LearningpathS

return (
<li>
<ContentWrapper editing={isEditing}>
<ContentWrapper editing={step.id === selectedLearningpathStepId}>
<Stack gap="xxsmall">
<Text fontWeight="bold" textStyle="label.medium">
{step.title}
</Text>
<Text textStyle="label.small">{t(`myNdla.learningpath.form.options.${stepType}`)}</Text>
</Stack>
{!isEditing ? (
<Button variant="tertiary" onClick={() => setIsEditing(true)}>
{step.id !== selectedLearningpathStepId ? (
<Button variant="tertiary" onClick={() => setSelectedLearningpathStepId(step.id)}>
{t("myNdla.learningpath.form.steps.edit")} <PencilLine />
</Button>
) : (
<Button variant="tertiary" onClick={() => setIsEditing(false)}>
<Button variant="tertiary" onClick={() => setSelectedLearningpathStepId(undefined)}>
<CloseLine />
{t("close")}
</Button>
)}
</ContentWrapper>
{isEditing ? <LearningpathStepForm step={step} stepType={stepType} onSave={onSave} onDelete={onDelete} /> : null}
{step.id === selectedLearningpathStepId ? (
<LearningpathStepForm step={step} stepType={stepType} onSave={onSave} onDelete={onDelete} />
) : null}
</li>
);
};
4 changes: 3 additions & 1 deletion src/containers/MyNdla/Learningpath/components/TitleForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,9 @@ export const TitleForm = ({ onSave, initialValues }: Props) => {
<SafeLinkButton to={routes.myNdla.learningpath} variant="secondary">
{t("cancel")}
</SafeLinkButton>
<Button type="submit">{t("myNdla.learningpath.form.next")}</Button>
<Button variant="secondary" type="submit">
{t("myNdla.learningpath.form.next")}
</Button>
</Stack>
) : null}
</StyledForm>
Expand Down
2 changes: 1 addition & 1 deletion src/messages/messagesEN.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ const messages = {
editLearningpathTitle: "Edit learningpath title",
form: {
delete: "Delete",
next: "Next",
next: "Proceed",
back: "Back",
deleteStep: "Delete step",
deleteBody: "Content cannot be restored",
Expand Down
2 changes: 1 addition & 1 deletion src/messages/messagesNB.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ const messages = {
editLearningpathTitle: "Rediger tittel på læringssti",
form: {
delete: "Slett",
next: "Neste",
next: "Gå videre",
back: "Forrige",
deleteStep: "Slett steg",
deleteBody: "Innholdet kan ikke gjenopprettes",
Expand Down
2 changes: 1 addition & 1 deletion src/messages/messagesNN.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ const messages = {
editLearningpathTitle: "Rediger læringsstitittel",
form: {
delete: "Slett",
next: "Neste",
next: "Gå vidare",
back: "Førre",
deleteStep: "Slett trinn",
deleteBody: "Innhaldet kan ikkje gjenopprettast",
Expand Down
2 changes: 1 addition & 1 deletion src/messages/messagesSE.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ const messages = {
editLearningpathTitle: "Rediger læringsstitittel",
form: {
delete: "Slett",
next: "Neste",
next: "Gå videre",
back: "Forrige",
deleteStep: "Slett trinn",
deleteBody: "Innholdet kan ikke gjenopprettes",
Expand Down