Skip to content

Commit

Permalink
add for single page
Browse files Browse the repository at this point in the history
  • Loading branch information
qdraw committed Feb 22, 2024
1 parent 319aa5d commit ac43e8c
Show file tree
Hide file tree
Showing 6 changed files with 191 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,21 @@ describe("ModalDesktopEditorOpenConfirmation", () => {
state,
jest.fn(),
"",
jest.fn()
jest.fn(),
false
);
expect(result).toBeFalsy();
});

it("readonly", async () => {
const result = await StartMenuOptionDesktopEditorOpenSelection(
["test"],
false,
state,
jest.fn(),
"",
jest.fn(),
true
);
expect(result).toBeFalsy();
});
Expand Down Expand Up @@ -420,7 +434,8 @@ describe("ModalDesktopEditorOpenConfirmation", () => {
state,
setIsError,
messageDesktopEditorUnableToOpen,
setModalConfirmationOpenFiles
setModalConfirmationOpenFiles,
false
);
expect(setModalConfirmationOpenFiles).toHaveBeenCalledWith(true);
expect(setIsError).not.toHaveBeenCalled(); // Error should not be set in this case
Expand Down Expand Up @@ -449,7 +464,8 @@ describe("ModalDesktopEditorOpenConfirmation", () => {
state,
setIsError,
messageDesktopEditorUnableToOpen,
setModalConfirmationOpenFiles
setModalConfirmationOpenFiles,
false
);
expect(setModalConfirmationOpenFiles).not.toHaveBeenCalled(); // Modal confirmation should not be set in this case
expect(setIsError).not.toHaveBeenCalled(); // Error should not be set in this case
Expand Down Expand Up @@ -488,7 +504,8 @@ describe("ModalDesktopEditorOpenConfirmation", () => {
state,
setIsError,
messageDesktopEditorUnableToOpen,
setModalConfirmationOpenFiles
setModalConfirmationOpenFiles,
false
);
expect(setModalConfirmationOpenFiles).not.toHaveBeenCalled(); // Modal confirmation should not be set in this case
expect(setIsError).toHaveBeenCalled();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { IArchiveProps } from "../../../interfaces/IArchiveProps";
import MoreMenu from "../../atoms/more-menu/more-menu";
import MenuOptionDesktopEditorOpenSelection from "./menu-option-desktop-editor-open-selection";

export default {
title: "components/molecules/menu-option-desktop-editor-open"
title: "components/molecules/menu-option-desktop-editor-open-selection"
};

export const Default = () => {
Expand All @@ -17,7 +18,7 @@ export const Default = () => {
parentDirectory: "/"
}
]
} as any
} as unknown as IArchiveProps
}
isReadOnly={false}
select={["default.jpg"]}
Expand All @@ -28,19 +29,19 @@ export const Default = () => {

Default.storyName = "default (no dialog)";

export const Case2 = () => {
export const WithDialog = () => {
return (
<MoreMenu enableMoreMenu={true} setEnableMoreMenu={() => {}}>
<MenuOptionDesktopEditorOpenSelection
state={
{
fileIndexItems: [
{
fileName: "true.jpg",
fileName: "true.jpg", // in mock is set that true.jpg gives a dialog
parentDirectory: "/"
}
]
} as any
} as unknown as IArchiveProps
}
isReadOnly={false}
select={["true.jpg"]}
Expand All @@ -49,4 +50,27 @@ export const Case2 = () => {
);
};

Case2.storyName = "with dialog";
WithDialog.storyName = "with dialog";

export const ReadOnly = () => {
return (
<MoreMenu enableMoreMenu={true} setEnableMoreMenu={() => {}}>
<MenuOptionDesktopEditorOpenSelection
state={
{
fileIndexItems: [
{
fileName: "default.jpg",
parentDirectory: "/"
}
]
} as unknown as IArchiveProps
}
isReadOnly={true}
select={["default.jpg"]}
/>
</MoreMenu>
);
};

ReadOnly.storyName = "ReadOnly";
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,11 @@ export async function StartMenuOptionDesktopEditorOpenSelection(
state: IArchiveProps,
setIsError: React.Dispatch<React.SetStateAction<string>>,
messageDesktopEditorUnableToOpen: string,
setModalConfirmationOpenFiles: (value: React.SetStateAction<boolean>) => void
setModalConfirmationOpenFiles: (value: React.SetStateAction<boolean>) => void,
isReadOnly: boolean
) {
const toDesktopOpenList = new URLPath().MergeSelectFileIndexItem(select, state.fileIndexItems);
if (!toDesktopOpenList || toDesktopOpenList.length === 0) return;
if (!toDesktopOpenList || toDesktopOpenList.length === 0 || isReadOnly) return;
const selectParams = new URLPath().ArrayToCommaSeparatedStringOneParent(toDesktopOpenList, "");
const urlCheck = new UrlQuery().UrlApiDesktopEditorOpenAmountConfirmationChecker();

Expand Down Expand Up @@ -102,7 +103,8 @@ const MenuOptionDesktopEditorOpenSelection: React.FunctionComponent<IMenuOptionD
state,
setIsError,
MessageDesktopEditorUnableToOpen,
setModalConfirmationOpenFiles
setModalConfirmationOpenFiles,
isReadOnly
).then(() => {
// do nothing
});
Expand Down Expand Up @@ -141,7 +143,8 @@ const MenuOptionDesktopEditorOpenSelection: React.FunctionComponent<IMenuOptionD
state,
setIsError,
MessageDesktopEditorUnableToOpen,
setModalConfirmationOpenFiles
setModalConfirmationOpenFiles,
isReadOnly
)
}
localization={
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import MoreMenu from "../../atoms/more-menu/more-menu";
import MenuOptionDesktopEditorOpenSingle from "./menu-option-desktop-editor-open-single";

export default {
title: "components/molecules/menu-option-desktop-editor-open-single"
};

export const Default = () => {
return (
<MoreMenu enableMoreMenu={true} setEnableMoreMenu={() => {}}>
<MenuOptionDesktopEditorOpenSingle
subPath="/test.jpg"
collections={true}
isReadOnly={false}
/>
</MoreMenu>
);
};

Default.storyName = "default (no dialog)";

export const ReadOnly = () => {
return (
<MoreMenu enableMoreMenu={true} setEnableMoreMenu={() => {}}>
<MenuOptionDesktopEditorOpenSingle subPath="/test.jpg" collections={true} isReadOnly={true} />
</MoreMenu>
);
};

ReadOnly.storyName = "readonly";
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React, { memo, useState } from "react";
import useFetch from "../../../hooks/use-fetch";
import useGlobalSettings from "../../../hooks/use-global-settings";
import useHotKeys from "../../../hooks/use-keyboard/use-hotkeys";
import { IEnvFeatures } from "../../../interfaces/IEnvFeatures";
import localization from "../../../localization/localization.json";
import FetchPost from "../../../shared/fetch/fetch-post";
import { Language } from "../../../shared/language";
import { UrlQuery } from "../../../shared/url-query";
import MenuOption from "../../atoms/menu-option/menu-option";
import Notification, { NotificationType } from "../../atoms/notification/notification";

interface IMenuOptionDesktopEditorOpenSingleProps {
subPath: string;
collections: boolean;
isReadOnly: boolean;
setEnableMoreMenu?: React.Dispatch<React.SetStateAction<boolean>>;
}

export async function OpenDesktopSingle(
subPath: string,
collections: boolean,
setIsError: React.Dispatch<React.SetStateAction<string>>,
messageDesktopEditorUnableToOpen: string,
isReadOnly: boolean
) {
if (isReadOnly) {
return;
}
const urlOpen = new UrlQuery().UrlApiDesktopEditorOpen();

const bodyParams = new URLSearchParams();
bodyParams.append("f", subPath);
bodyParams.append("collections", collections.toString());

const openDesktopResult = await FetchPost(urlOpen, bodyParams.toString());
if (openDesktopResult.statusCode >= 300) {
setIsError(messageDesktopEditorUnableToOpen);
}
}

const MenuOptionDesktopEditorOpenSingle: React.FunctionComponent<IMenuOptionDesktopEditorOpenSingleProps> =
memo(({ subPath, collections, isReadOnly }) => {
// Check API to know if feature is needed!
const featuresResult = useFetch(new UrlQuery().UrlApiFeaturesAppSettings(), "get");
const dataFeatures = featuresResult?.data as IEnvFeatures | undefined;

// Get language keys
const settings = useGlobalSettings();
const language = new Language(settings.language);
const MessageDesktopEditorUnableToOpen = language.key(
localization.MessageDesktopEditorUnableToOpen
);

// for showing a notification
const [isError, setIsError] = useState("");

/**
* Open editor with keys
*/
useHotKeys({ key: "e", ctrlKeyOrMetaKey: true }, () => {
OpenDesktopSingle(
subPath,
collections,
setIsError,
MessageDesktopEditorUnableToOpen,
isReadOnly
).then(() => {
// do nothing
});
});

return (
<>
{isError !== "" ? (
<Notification callback={() => setIsError("")} type={NotificationType.danger}>
{isError}
</Notification>
) : null}

{dataFeatures?.openEditorEnabled === true ? (
<MenuOption
isReadOnly={isReadOnly}
testName={"menu-option-desktop-editor-open"}
onClickKeydown={() =>
OpenDesktopSingle(
subPath,
collections,
setIsError,
MessageDesktopEditorUnableToOpen,
isReadOnly
)
}
localization={localization.MessageDesktopEditorOpenSingleFile}
/>
) : null}
</>
);
});

export default MenuOptionDesktopEditorOpenSingle;
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { IArchiveProps } from "../../../interfaces/IArchiveProps";
import ModalDesktopEditorOpenSelectionConfirmation from "./modal-desktop-editor-open-selection-confirmation";

export default {
Expand All @@ -15,7 +16,7 @@ export const Default = () => {
parentDirectory: "/"
}
]
} as any
} as unknown as IArchiveProps
}
isCollections={true}
select={[]}
Expand Down

0 comments on commit ac43e8c

Please sign in to comment.