From 43878f868207e6043eb9f7ed2002e9beda9ea42c Mon Sep 17 00:00:00 2001 From: ZecD Date: Wed, 7 Aug 2024 14:52:29 +0200 Subject: [PATCH 1/8] WIP --- src/pages/UxDashboard/index.tsx | 52 ++++++++++++++++----------------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/src/pages/UxDashboard/index.tsx b/src/pages/UxDashboard/index.tsx index fe9c0aa9..9aa101c9 100644 --- a/src/pages/UxDashboard/index.tsx +++ b/src/pages/UxDashboard/index.tsx @@ -70,33 +70,31 @@ const UxDashboard = () => { Tool di compilazione - Il CompilationTool รจ temporaneamente disabilitato. Contatta il - supporto se ha bisogno di effettuare modifiche. - {/* <BSGrid> - <ResponsiveCol size="col-lg-3" lgOrder={1}> - <Sidebar /> - </ResponsiveCol> - <ResponsiveCol size="col-lg-9" lgOrder={0}> - <StyledSteps - current={currentStep} - className="aq-my-4" - direction="horizontal" - > - <StyledSteps.Step isCompleted={true} title={"Form"} /> - <StyledSteps.Step - isCompleted={currentStep > 0} - title={"Preview"} - /> - <StyledSteps.Step - isCompleted={currentStep > 1} - title={"Publish"} - /> - </StyledSteps> - {currentStep === 0 && <UxDashboardForm />} - {currentStep === 1 && <Preview />} - {currentStep === 2 && <ResultsPage />} - </ResponsiveCol> - </BSGrid> */} + <BSGrid> + <ResponsiveCol size="col-lg-3" lgOrder={1}> + <Sidebar /> + </ResponsiveCol> + <ResponsiveCol size="col-lg-9" lgOrder={0}> + <StyledSteps + current={currentStep} + className="aq-my-4" + direction="horizontal" + > + <StyledSteps.Step isCompleted={true} title={"Form"} /> + <StyledSteps.Step + isCompleted={currentStep > 0} + title={"Preview"} + /> + <StyledSteps.Step + isCompleted={currentStep > 1} + title={"Publish"} + /> + </StyledSteps> + {currentStep === 0 && <UxDashboardForm />} + {currentStep === 1 && <Preview />} + {currentStep === 2 && <ResultsPage />} + </ResponsiveCol> + </BSGrid> From 9c39f103e082d8d927f0cc9ba8cbeb446a0ee17a Mon Sep 17 00:00:00 2001 From: ZecD Date: Thu, 8 Aug 2024 11:39:37 +0200 Subject: [PATCH 2/8] changed flow, removed steps to align to unguess tagging tool --- src/pages/UxDashboard/ResultsPage/index.tsx | 2 +- src/pages/UxDashboard/Sidebar.tsx | 172 +++++++----------- src/pages/UxDashboard/UxForm/FormProvider.tsx | 9 +- src/pages/UxDashboard/index.tsx | 41 +---- src/services/tryberApi/index.ts | 43 ++--- src/utils/schema.ts | 46 ++--- 6 files changed, 121 insertions(+), 192 deletions(-) diff --git a/src/pages/UxDashboard/ResultsPage/index.tsx b/src/pages/UxDashboard/ResultsPage/index.tsx index 5d2f6335..db4ea6b2 100644 --- a/src/pages/UxDashboard/ResultsPage/index.tsx +++ b/src/pages/UxDashboard/ResultsPage/index.tsx @@ -52,7 +52,7 @@ const ResultsPage = () => { saveDashboard({ campaign: id, body: { - status: "publish", + visible: 1, }, }) .unwrap() diff --git a/src/pages/UxDashboard/Sidebar.tsx b/src/pages/UxDashboard/Sidebar.tsx index e063f9d2..2202c1ce 100644 --- a/src/pages/UxDashboard/Sidebar.tsx +++ b/src/pages/UxDashboard/Sidebar.tsx @@ -1,21 +1,15 @@ -import { - Card, - Button, - Text, - Steps, -} from "@appquality/appquality-design-system"; +import { Button, Card, Steps } from "@appquality/appquality-design-system"; import { useFormikContext } from "formik"; -import { FormValuesInterface } from "./UxForm/FormProvider"; -import { usePatchCampaignsByCampaignUxMutation } from "src/services/tryberApi"; import { useParams } from "react-router-dom"; import siteWideMessageStore from "src/redux/siteWideMessages"; +import { usePatchCampaignsByCampaignUxMutation } from "src/services/tryberApi"; import { useAppDispatch, useAppSelector } from "src/store"; import { setCurrentFormSection, - setCurrentStep, setIsProgrammaticallyScrolling, setPublishStatus, } from "./uxDashboardSlice"; +import { FormValuesInterface } from "./UxForm/FormProvider"; const Sidebar = () => { const { id } = useParams<{ id: string }>(); @@ -23,12 +17,13 @@ const Sidebar = () => { const { submitForm, values, isSubmitting, isValid } = useFormikContext(); const [saveDashboard] = usePatchCampaignsByCampaignUxMutation(); - const { currentStep, currentFormSection, publishStatus } = useAppSelector( + const { currentFormSection, publishStatus } = useAppSelector( (state) => state.uxDashboard ); const dispatch = useAppDispatch(); const handleSaveDraft = () => { + values.visible = 0; submitForm(); if (!isValid) { add({ @@ -38,102 +33,75 @@ const Sidebar = () => { } }; - if (currentStep >= 2) return null; + const handlePublish = async () => { + dispatch(setPublishStatus("publishing")); + await saveDashboard({ + campaign: id, + body: { + visible: 1, + }, + }) + .unwrap() + .then((res) => { + dispatch(setPublishStatus("success")); + add({ + type: "success", + message: `Dashboard published`, + expire: 8, + }); + }) + .catch((err) => { + dispatch(setPublishStatus("failed")); + }); + }; return (
- {currentStep === 0 && ( - <> - - - Per pubblicare passa prima dalla preview - - - - )} - {currentStep === 1 && ( - <> - - - Pubblica per rendere disponibile la dashboard anche al cliente - - - - )} - - {currentStep === 0 && ( - - { - if (index === current) return; - dispatch(setCurrentFormSection(index)); - dispatch(setIsProgrammaticallyScrolling(true)); - }} + <> + + + + + + + { + if (index === current) return; + dispatch(setCurrentFormSection(index)); + dispatch(setIsProgrammaticallyScrolling(true)); + }} + > + + + + +
); }; diff --git a/src/pages/UxDashboard/UxForm/FormProvider.tsx b/src/pages/UxDashboard/UxForm/FormProvider.tsx index bf8244eb..cfbbac59 100644 --- a/src/pages/UxDashboard/UxForm/FormProvider.tsx +++ b/src/pages/UxDashboard/UxForm/FormProvider.tsx @@ -27,7 +27,7 @@ export interface FormSentiment { comment: string; } export interface FormValuesInterface { - status?: GetCampaignsByCampaignUxApiResponse["status"]; + visible?: GetCampaignsByCampaignUxApiResponse["visible"]; goal: GetCampaignsByCampaignUxApiResponse["goal"]; methodology: GetCampaignsByCampaignUxApiResponse["methodology"]; questions: FormQuestion[]; @@ -48,10 +48,9 @@ const FormProvider = ({ children }: { children: ReactNode }) => { }); const { data: campaignData, isLoading: campaignDataLoading } = useGetCampaignsByCampaignQuery({ campaign: id }); - const initialValues: FormValuesInterface = useMemo( () => ({ - status: currentData?.status, + visible: currentData?.visible ?? undefined, goal: currentData?.goal || "", methodology: currentData?.methodology || { name: campaignData?.type || "", @@ -91,7 +90,7 @@ const FormProvider = ({ children }: { children: ReactNode }) => { } const validationSchema = object({ - status: string(), + visible: number(), goal: string().required("Campo obbligatorio"), methodology: object().shape({ name: string(), @@ -164,13 +163,13 @@ const FormProvider = ({ children }: { children: ReactNode }) => { initialValues={initialValues} enableReinitialize onSubmit={async (values, formikHelpers) => { - // todo: better typing for values because validationSchema prevent usersNumber to be undefined if (values.usersNumber === undefined) return; formikHelpers.setSubmitting(true); const res = await saveDashboard({ campaign: id, body: { + visible: values.visible, goal: values.goal, questions: values.questions.map((question) => ({ id: question.id, diff --git a/src/pages/UxDashboard/index.tsx b/src/pages/UxDashboard/index.tsx index 9aa101c9..4dfbc503 100644 --- a/src/pages/UxDashboard/index.tsx +++ b/src/pages/UxDashboard/index.tsx @@ -3,27 +3,17 @@ import { BSGrid, Container, PageTitle, - Steps, Title, } from "@appquality/appquality-design-system"; +import { useParams } from "react-router-dom"; import ErrorUnauthorized from "src/features/ErrorUnauthorized/ErrorUnauthorized"; +import { PageTemplate } from "src/features/PageTemplate"; import { useGetCampaignsByCampaignQuery } from "src/services/tryberApi"; -import UxDashboardForm from "./UxForm"; -import { useParams } from "react-router-dom"; -import Preview from "./Preview"; -import Sidebar from "./Sidebar"; -import FormProvider from "./UxForm/FormProvider"; -import ResultsPage from "./ResultsPage"; -import { useAppSelector } from "src/store"; import styled from "styled-components"; -import { PageTemplate } from "src/features/PageTemplate"; +import Sidebar from "./Sidebar"; import useCanSee from "./useCanSee"; - -const StyledSteps = styled(Steps)` - .step-status-icon { - background-color: ${({ theme }) => theme.colors.gray100}; - } -`; +import UxDashboardForm from "./UxForm"; +import FormProvider from "./UxForm/FormProvider"; const ResponsiveCol = styled(BSCol)<{ lgOrder: number }>` @media (min-width: ${({ theme }) => theme.grid.breakpoints.lg}) { @@ -33,7 +23,6 @@ const ResponsiveCol = styled(BSCol)<{ lgOrder: number }>` const UxDashboard = () => { const { id } = useParams<{ id: string }>(); - const { currentStep } = useAppSelector((state) => state.uxDashboard); const { isError, isLoading, hasPermission } = useCanSee(id); @@ -53,7 +42,6 @@ const UxDashboard = () => { } if (hasPermission) { - // todo: discuss about appq_video_dashboard permission (change tests) return ( @@ -75,24 +63,7 @@ const UxDashboard = () => { - - - 0} - title={"Preview"} - /> - 1} - title={"Publish"} - /> - - {currentStep === 0 && } - {currentStep === 1 && } - {currentStep === 2 && } + diff --git a/src/services/tryberApi/index.ts b/src/services/tryberApi/index.ts index ca02ebd2..2eeb11ad 100644 --- a/src/services/tryberApi/index.ts +++ b/src/services/tryberApi/index.ts @@ -1464,7 +1464,6 @@ export type PutCampaignsByCampaignTasksAndTaskApiArg = { }; export type GetCampaignsByCampaignUxApiResponse = /** status 200 A UseCase linked with the Campaign */ { - status: "draft" | "published" | "draft-modified"; goal: string; usersNumber: number; sentiments: { @@ -1485,6 +1484,7 @@ export type GetCampaignsByCampaignUxApiResponse = id: number; name: string; }[]; + visible: number; }; export type GetCampaignsByCampaignUxApiArg = { /** A campaign id */ @@ -1494,28 +1494,25 @@ export type PatchCampaignsByCampaignUxApiResponse = /** status 200 OK */ {}; export type PatchCampaignsByCampaignUxApiArg = { /** A campaign id */ campaign: string; - body: - | { - goal: string; - usersNumber: number; - sentiments: { - id?: number; - clusterId: number; - value: number; - comment: string; - }[]; - methodology: { - type: "qualitative" | "quantitative" | "quali-quantitative"; - description: string; - }; - questions: { - id?: number; - name: string; - }[]; - } - | { - status: "publish"; - }; + body: { + goal?: string; + usersNumber?: number; + visible?: number; + methodology?: { + description: string; + type: string; + }; + sentiments?: { + clusterId: number; + value: number; + comment: string; + id?: number; + }[]; + questions?: { + name: string; + id?: number; + }[]; + }; }; export type PostCampaignsFormsApiResponse = /** status 201 Created */ { id: number; diff --git a/src/utils/schema.ts b/src/utils/schema.ts index bae05e84..c35cea1a 100644 --- a/src/utils/schema.ts +++ b/src/utils/schema.ts @@ -1966,8 +1966,6 @@ export interface operations { 200: { content: { "application/json": { - /** @enum {string} */ - status: "draft" | "published" | "draft-modified"; goal: string; usersNumber: number; sentiments: { @@ -1989,6 +1987,7 @@ export interface operations { id: number; name: string; }[]; + visible: number; }; }; }; @@ -2015,30 +2014,25 @@ export interface operations { }; requestBody: { content: { - "application/json": - | { - goal: string; - usersNumber: number; - sentiments: { - id?: number; - clusterId: number; - value: number; - comment: string; - }[]; - methodology: { - /** @enum {string} */ - type: "qualitative" | "quantitative" | "quali-quantitative"; - description: string; - }; - questions: { - id?: number; - name: string; - }[]; - } - | { - /** @enum {string} */ - status: "publish"; - }; + "application/json": { + goal?: string; + usersNumber?: number; + visible?: number; + methodology?: { + description: string; + type: string; + }; + sentiments?: { + clusterId: number; + value: number; + comment: string; + id?: number; + }[]; + questions?: { + name: string; + id?: number; + }[]; + }; }; }; }; From f9a42cf50deabb226cd79d218b56fb67553dafdf Mon Sep 17 00:00:00 2001 From: ZecD Date: Fri, 9 Aug 2024 17:49:57 +0200 Subject: [PATCH 3/8] WIP --- src/pages/UxDashboard/Sidebar.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/pages/UxDashboard/Sidebar.tsx b/src/pages/UxDashboard/Sidebar.tsx index 2202c1ce..6f43f5f4 100644 --- a/src/pages/UxDashboard/Sidebar.tsx +++ b/src/pages/UxDashboard/Sidebar.tsx @@ -35,10 +35,11 @@ const Sidebar = () => { const handlePublish = async () => { dispatch(setPublishStatus("publishing")); + debugger await saveDashboard({ campaign: id, body: { - visible: 1, + visible: values.visible === 1 ? 0 : 1, }, }) .unwrap() @@ -68,7 +69,7 @@ const Sidebar = () => { disabled={isSubmitting} onClick={handleSaveDraft} > - Salva e nascondi + Salva From a9162b4e23183a6c4f986439673b8106ad0432b8 Mon Sep 17 00:00:00 2001 From: sinatragianpaolo Date: Wed, 14 Aug 2024 13:27:55 +0200 Subject: [PATCH 4/8] chore: update api and schema --- src/services/tryberApi/index.ts | 33 ++++++++++++++++++++++----- src/utils/schema.ts | 40 ++++++++++++++++++++++++++------- 2 files changed, 59 insertions(+), 14 deletions(-) diff --git a/src/services/tryberApi/index.ts b/src/services/tryberApi/index.ts index 2eeb11ad..6299c2c0 100644 --- a/src/services/tryberApi/index.ts +++ b/src/services/tryberApi/index.ts @@ -2130,7 +2130,9 @@ export type GetUsersMeCampaignsByCampaignIdDevicesApiArg = { campaignId: string; }; export type GetUsersMeCampaignsByCampaignIdFormsApiResponse = - /** status 200 OK */ (PreselectionFormQuestion & { + /** status 200 OK */ ({ + question: string; + short_name?: string; value?: | number | { @@ -2144,7 +2146,19 @@ export type GetUsersMeCampaignsByCampaignIdFormsApiResponse = error?: string; }; id: number; - })[]; + } & ( + | { + type: PreselectionQuestionSimple; + } + | { + type: PreselectionQuestionMultiple; + options: string[]; + } + | { + type: PreselectionQuestionCuf; + options?: number[]; + } + ))[]; export type GetUsersMeCampaignsByCampaignIdFormsApiArg = { campaignId: string; }; @@ -2829,22 +2843,29 @@ export type TaskRequired = { campaign_id: number; }; export type Task = TaskOptional & TaskRequired; +export type PreselectionQuestionSimple = + | "gender" + | "text" + | "phone_number" + | "address"; +export type PreselectionQuestionMultiple = "multiselect" | "select" | "radio"; +export type PreselectionQuestionCuf = string; export type PreselectionFormQuestion = { question: string; short_name?: string; } & ( | { - type: "text" | "gender" | "phone_number" | "address"; + type: PreselectionQuestionSimple; } | { - type: "multiselect" | "select" | "radio"; - options: { + type: PreselectionQuestionMultiple; + options?: { value: string; isInvalid?: boolean; }[]; } | { - type: string; + type: PreselectionQuestionCuf; options?: { value: number; isInvalid?: boolean; diff --git a/src/utils/schema.ts b/src/utils/schema.ts index c35cea1a..b39399fa 100644 --- a/src/utils/schema.ts +++ b/src/utils/schema.ts @@ -805,19 +805,17 @@ export interface components { short_name?: string; } & ( | { - /** @enum {string} */ - type: "text" | "gender" | "phone_number" | "address"; + type: components["schemas"]["PreselectionQuestionSimple"]; } | { - /** @enum {string} */ - type: "multiselect" | "select" | "radio"; - options: { + type: components["schemas"]["PreselectionQuestionMultiple"]; + options?: { value: string; isInvalid?: boolean; }[]; } | { - type: string; + type: components["schemas"]["PreselectionQuestionCuf"]; options?: { value: number; isInvalid?: boolean; @@ -947,6 +945,18 @@ export interface components { productType?: number; notes?: string; }; + /** + * PreselectionQuestionSimple + * @enum {string} + */ + PreselectionQuestionSimple: "gender" | "text" | "phone_number" | "address"; + /** + * PreselectionQuestionMultiple + * @enum {string} + */ + PreselectionQuestionMultiple: "multiselect" | "select" | "radio"; + /** PreselectionQuestionCuf */ + PreselectionQuestionCuf: string; }; responses: { /** A user */ @@ -3299,7 +3309,9 @@ export interface operations { /** OK */ 200: { content: { - "application/json": (components["schemas"]["PreselectionFormQuestion"] & { + "application/json": ({ + question: string; + short_name?: string; value?: | number | { @@ -3313,7 +3325,19 @@ export interface operations { error?: string; }; id: number; - })[]; + } & ( + | { + type: components["schemas"]["PreselectionQuestionSimple"]; + } + | { + type: components["schemas"]["PreselectionQuestionMultiple"]; + options: string[]; + } + | { + type: components["schemas"]["PreselectionQuestionCuf"]; + options?: number[]; + } + ))[]; }; }; 403: components["responses"]["NotAuthorized"]; From 87f9481b465acc3e4d166e8ce7462b3639b2fc19 Mon Sep 17 00:00:00 2001 From: sinatragianpaolo Date: Wed, 14 Aug 2024 13:28:16 +0200 Subject: [PATCH 5/8] refactor: Remove unnecessary title element in UxDashboard --- src/pages/UxDashboard/index.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/pages/UxDashboard/index.tsx b/src/pages/UxDashboard/index.tsx index 4dfbc503..5309285e 100644 --- a/src/pages/UxDashboard/index.tsx +++ b/src/pages/UxDashboard/index.tsx @@ -57,16 +57,14 @@ const UxDashboard = () => { > Tool di compilazione - - <BSGrid> - <ResponsiveCol size="col-lg-3" lgOrder={1}> - <Sidebar /> - </ResponsiveCol> - <ResponsiveCol size="col-lg-9" lgOrder={0}> - <UxDashboardForm /> - </ResponsiveCol> - </BSGrid> - + + + + + + + + From 5d320c297714550d4b98125a744c2ee5fbfd5159 Mon Sep 17 00:00:00 2001 From: sinatragianpaolo Date: Wed, 14 Aug 2024 13:29:23 +0200 Subject: [PATCH 6/8] Remove "Nel dettaglio" step from UxDashboard Sidebar --- src/pages/UxDashboard/Sidebar.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/UxDashboard/Sidebar.tsx b/src/pages/UxDashboard/Sidebar.tsx index 6f43f5f4..e1985a3e 100644 --- a/src/pages/UxDashboard/Sidebar.tsx +++ b/src/pages/UxDashboard/Sidebar.tsx @@ -35,7 +35,6 @@ const Sidebar = () => { const handlePublish = async () => { dispatch(setPublishStatus("publishing")); - debugger await saveDashboard({ campaign: id, body: { @@ -98,7 +97,6 @@ const Sidebar = () => { > - From 06bc068383f86b838be224cb56ab6d09546c5f77 Mon Sep 17 00:00:00 2001 From: sinatragianpaolo Date: Wed, 14 Aug 2024 15:26:17 +0200 Subject: [PATCH 7/8] feat: exclude visible status from Save button --- src/pages/UxDashboard/Sidebar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/UxDashboard/Sidebar.tsx b/src/pages/UxDashboard/Sidebar.tsx index e1985a3e..3964900f 100644 --- a/src/pages/UxDashboard/Sidebar.tsx +++ b/src/pages/UxDashboard/Sidebar.tsx @@ -23,7 +23,6 @@ const Sidebar = () => { const dispatch = useAppDispatch(); const handleSaveDraft = () => { - values.visible = 0; submitForm(); if (!isValid) { add({ From 583064e106859e0d4e1d499b7f68c410c7c08b61 Mon Sep 17 00:00:00 2001 From: sinatragianpaolo Date: Wed, 14 Aug 2024 17:37:07 +0200 Subject: [PATCH 8/8] refactor: Update expire time for success message in Sidebar component --- src/pages/UxDashboard/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/UxDashboard/Sidebar.tsx b/src/pages/UxDashboard/Sidebar.tsx index 3964900f..c3375b86 100644 --- a/src/pages/UxDashboard/Sidebar.tsx +++ b/src/pages/UxDashboard/Sidebar.tsx @@ -46,7 +46,7 @@ const Sidebar = () => { add({ type: "success", message: `Dashboard published`, - expire: 8, + expire: 5, }); }) .catch((err) => {