strapi-plugin-navigation 2.1.0-beta.2 → 2.1.0

package/admin/src/pages/View/components/NavigationItemPopup/index.js

@@ -1,9 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = require("lodash");
 const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
@@ -12,7 +35,7 @@ const parsers_1 = require("../../utils/parsers");
 const enums_1 = require("../../utils/enums");
 const NavigationItemPopupHeader_1 = require("./NavigationItemPopupHeader");
 const utils_1 = require("../../../../utils");
-const NavigationItemPopUp = ({ isOpen, isLoading, data, config = {}, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, }) => {
+const NavigationItemPopUp = ({ availableLocale, isOpen, isLoading, data, config = {}, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, readNavigationItemFromLocale, }) => {
     const handleOnSubmit = (payload) => {
         onSubmit(payload);
     };
@@ -45,9 +68,11 @@ const NavigationItemPopUp = ({ isOpen, isLoading, data, config = {}, onSubmit, o
             } : undefined,
         };
     };
+    const preparedData = (0, react_1.useMemo)(prepareFormData.bind(null, data), [data]);
+    const hasViewId = !!data.viewId;
     return (react_1.default.createElement(ModalLayout_1.ModalLayout, { labelledBy: "condition-modal-breadcrumbs", onClose: onClose, isOpen: isOpen },
-        react_1.default.createElement(NavigationItemPopupHeader_1.NavigationItemPopupHeader, { isNewItem: !data.viewId }),
-        react_1.default.createElement(NavigationItemForm_1.default, { data: prepareFormData(data), isLoading: isLoading, additionalFields: additionalFields, contentTypesNameFields: contentTypesNameFields, availableAudience: availableAudience, contentTypes: contentTypes, contentTypeEntities: contentTypeItems, usedContentTypeEntities: usedContentTypeItems, getContentTypeEntities: getContentTypeItems, usedContentTypesData: usedContentTypesData, onSubmit: handleOnSubmit, onCancel: onClose, appendLabelPublicationStatus: appendLabelPublicationStatus, locale: locale })));
+        react_1.default.createElement(NavigationItemPopupHeader_1.NavigationItemPopupHeader, { isNewItem: !hasViewId }),
+        react_1.default.createElement(NavigationItemForm_1.default, { availableLocale: availableLocale, config: config, data: preparedData, isLoading: isLoading, additionalFields: additionalFields, contentTypesNameFields: contentTypesNameFields, availableAudience: availableAudience, contentTypes: contentTypes, contentTypeEntities: contentTypeItems, usedContentTypeEntities: usedContentTypeItems, getContentTypeEntities: getContentTypeItems, usedContentTypesData: usedContentTypesData, onSubmit: handleOnSubmit, onCancel: onClose, appendLabelPublicationStatus: appendLabelPublicationStatus, locale: locale, readNavigationItemFromLocale: readNavigationItemFromLocale })));
 };
 NavigationItemPopUp.propTypes = {
     data: prop_types_1.default.object.isRequired,
@@ -57,7 +82,8 @@ NavigationItemPopUp.propTypes = {
     onSubmit: prop_types_1.default.func.isRequired,
     onClose: prop_types_1.default.func.isRequired,
     getContentTypeItems: prop_types_1.default.func.isRequired,
-    locale: prop_types_1.default.string
+    locale: prop_types_1.default.string,
+    readNavigationItemFromLocale: prop_types_1.default.func.isRequired,
 };
 exports.default = NavigationItemPopUp;
 //# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/Create/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CommonProps, CreateState, FooterActionsFactory, Navigation } from "../types";
+interface Props extends CreateState, CommonProps {
+}
+export declare const INITIAL_NAVIGATION: Navigation;
+export declare const Create: ({ setState, current, isLoading, alreadyUsedNames, }: Props) => JSX.Element;
+export declare const createFooterActions: FooterActionsFactory;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/Create/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFooterActions = exports.Create = exports.INITIAL_NAVIGATION = void 0;
+const Button_1 = require("@strapi/design-system/Button");
+const react_1 = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const utils_1 = require("../../../../../utils");
+const Form_1 = require("../Form");
+exports.INITIAL_NAVIGATION = {
+    name: "Navigation",
+    items: [],
+    visible: true,
+};
+const Create = ({ setState, current, isLoading, alreadyUsedNames, }) => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    const onSubmit = (0, react_1.useCallback)((updated) => {
+        setState({
+            view: "CREATE",
+            current: updated,
+            alreadyUsedNames,
+        });
+    }, [setState]);
+    const validationSchema = (0, react_1.useMemo)(() => (0, Form_1.validationSchemaFactory)(alreadyUsedNames, formatMessage), [alreadyUsedNames]);
+    return (react_1.default.createElement(Form_1.Form, { navigation: current, onChange: onSubmit, isLoading: isLoading, validationSchema: validationSchema }));
+};
+exports.Create = Create;
+const createFooterActions = ({ state, onSubmit, onReset, }) => {
+    return {
+        startActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: onReset, variant: "tertiary" }, (0, utils_1.getMessage)("popup.item.form.button.cancel"))),
+        endActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: onSubmit, variant: "default" }, (0, utils_1.getMessage)("popup.navigation.manage.button.save"))),
+    };
+};
+exports.createFooterActions = createFooterActions;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/Delete/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CommonProps, DeleteState, FooterActionsFactory } from "../types";
+interface Props extends DeleteState, CommonProps {
+}
+export declare const Delete: ({ navigations }: Props) => JSX.Element;
+export declare const deleteFooterActions: FooterActionsFactory;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/Delete/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteFooterActions = exports.Delete = void 0;
+const Button_1 = require("@strapi/design-system/Button");
+const Flex_1 = require("@strapi/design-system/Flex");
+const Grid_1 = require("@strapi/design-system/Grid");
+const Typography_1 = require("@strapi/design-system/Typography");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../../../../utils");
+const Delete = ({ navigations }) => (react_1.default.createElement(Grid_1.Grid, null,
+    react_1.default.createElement(Grid_1.GridItem, { col: 12, paddingBottom: 1 },
+        react_1.default.createElement(Flex_1.Flex, null,
+            react_1.default.createElement(Typography_1.Typography, { variant: "beta" }, (0, utils_1.getMessage)("popup.navigation.manage.delete.header")))),
+    react_1.default.createElement(Grid_1.GridItem, { col: 12, paddingBottom: 1 },
+        react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "semiBold" }, renderItems(navigations)))));
+exports.Delete = Delete;
+const deleteFooterActions = ({ state, onSubmit, onReset, }) => {
+    return {
+        startActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: onReset, variant: "tertiary" }, (0, utils_1.getMessage)("popup.item.form.button.cancel"))),
+        endActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: onSubmit, variant: "danger" }, (0, utils_1.getMessage)("popup.navigation.manage.button.delete"))),
+    };
+};
+exports.deleteFooterActions = deleteFooterActions;
+const renderItems = (navigations) => navigations.map(({ name }) => `"${name}"`).join(", ");
+//# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/Edit/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CommonProps, EditState, FooterActionsFactory } from "../types";
+interface Props extends EditState, CommonProps {
+}
+export declare const Edit: ({ alreadyUsedNames, current, isLoading, navigation: initialValue, setState, }: Props) => JSX.Element;
+export declare const editFooterActions: FooterActionsFactory;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/Edit/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editFooterActions = exports.Edit = void 0;
+const Button_1 = require("@strapi/design-system/Button");
+const react_1 = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const utils_1 = require("../../../../../utils");
+const Form_1 = require("../Form");
+const Edit = ({ alreadyUsedNames, current, isLoading, navigation: initialValue, setState, }) => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    const onChange = (0, react_1.useCallback)((updated) => {
+        setState({
+            view: "EDIT",
+            alreadyUsedNames,
+            current: updated,
+            navigation: initialValue,
+        });
+    }, [setState, initialValue, alreadyUsedNames]);
+    const navigation = (0, react_1.useMemo)(() => current ?? initialValue, [current]);
+    const validationSchema = (0, react_1.useMemo)(() => (0, Form_1.validationSchemaFactory)(alreadyUsedNames, formatMessage), [alreadyUsedNames]);
+    return (react_1.default.createElement(Form_1.Form, { navigation: navigation, onChange: onChange, isLoading: isLoading, validationSchema: validationSchema }));
+};
+exports.Edit = Edit;
+const editFooterActions = ({ state, onSubmit, onReset, }) => {
+    return {
+        startActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: onReset, variant: "tertiary" }, (0, utils_1.getMessage)("popup.item.form.button.cancel"))),
+        endActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: onSubmit, variant: "secondary" }, (0, utils_1.getMessage)("popup.navigation.manage.button.save"))),
+    };
+};
+exports.editFooterActions = editFooterActions;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/Error/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CommonProps, ErrorState, FooterActionsFactory } from "../types";
+interface Props extends ErrorState, CommonProps {
+}
+export declare const ErrorView: ({ errors }: Props) => JSX.Element;
+export declare const errorFooterActions: FooterActionsFactory;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/Error/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.errorFooterActions = exports.ErrorView = void 0;
+const Button_1 = require("@strapi/design-system/Button");
+const Grid_1 = require("@strapi/design-system/Grid");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../../../../../utils");
+const ErrorView = ({ errors }) => {
+    const toggleNotification = (0, helper_plugin_1.useNotification)();
+    (0, react_1.useEffect)(() => {
+        errors.map((error) => {
+            toggleNotification({
+                type: "warning",
+                message: { id: "", defaultMessage: error.message },
+            });
+            console.error(error);
+        });
+    }, []);
+    return (react_1.default.createElement(Grid_1.Grid, null,
+        react_1.default.createElement(Grid_1.GridItem, { col: 12 }, (0, utils_1.getMessage)("popup.navigation.manage.error.message"))));
+};
+exports.ErrorView = ErrorView;
+const errorFooterActions = ({ onReset }) => {
+    return {
+        endActions: (react_1.default.createElement(Button_1.Button, { onClick: onReset, variant: "secondary" }, (0, utils_1.getMessage)("popup.navigation.manage.button.goBack"))),
+    };
+};
+exports.errorFooterActions = errorFooterActions;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/Form/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { Navigation } from "../types";
+import { useIntl } from "react-intl";
+interface Props {
+    navigation: Partial<Navigation>;
+    onChange: (n: Navigation) => void;
+    isLoading?: boolean;
+    validationSchema: ReturnType<typeof validationSchemaFactory>;
+}
+export declare const Form: ({ navigation, onChange: onChangeBase, isLoading, validationSchema, }: Props) => JSX.Element;
+export declare const validationSchemaFactory: (alreadyUsedNames: Array<string>, formatMessage: ReturnType<typeof useIntl>["formatMessage"]) => import("yup/lib/object").OptionalObjectSchema<{
+    name: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
+    visible: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, Record<string, any>>;
+}, Record<string, any>, import("yup/lib/object").TypeOfShape<{
+    name: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
+    visible: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, Record<string, any>>;
+}>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/Form/index.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validationSchemaFactory = exports.Form = void 0;
+const yup = __importStar(require("yup"));
+const Grid_1 = require("@strapi/design-system/Grid");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const formik_1 = require("formik");
+const react_1 = __importStar(require("react"));
+const translations_1 = require("../../../../../translations");
+const Form = ({ navigation, onChange: onChangeBase, isLoading, validationSchema, }) => {
+    const onChange = (0, react_1.useCallback)(({ target: { name, value } }) => {
+        onChangeBase({
+            ...navigation,
+            [name]: value,
+        });
+    }, [onChangeBase, navigation]);
+    const [error, setError] = (0, react_1.useState)(null);
+    const errorProps = (0, react_1.useMemo)(() => ({
+        name: error?.path === "name" ? error.message : undefined,
+        visible: error?.path === "visible" ? error.message : undefined,
+    }), [error]);
+    (0, react_1.useEffect)(() => {
+        validationSchema
+            .validate(navigation)
+            .then(() => setError(null))
+            .catch(setError);
+    }, [navigation, validationSchema, setError]);
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: navigation, onSubmit: onChangeBase },
+        react_1.default.createElement(helper_plugin_1.Form, null,
+            react_1.default.createElement(Grid_1.Grid, { gap: 5 },
+                react_1.default.createElement(Grid_1.GridItem, { col: 6 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...formProps.name, name: "name", description: {
+                            id: (0, translations_1.getTradId)("popup.item.form.title.placeholder"),
+                            defaultMessage: "e.g. Blog",
+                        }, type: "text", error: errorProps.name, onChange: onChange, value: navigation.name, disabled: isLoading, required: true })),
+                react_1.default.createElement(Grid_1.GridItem, { col: 6 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...formProps.visible, name: "visible", type: "bool", error: errorProps.visible, onChange: onChange, value: navigation.visible, disabled: isLoading }))))));
+};
+exports.Form = Form;
+const formProps = {
+    name: {
+        intlLabel: {
+            id: (0, translations_1.getTradId)("popup.navigation.form.name.label"),
+            defaultMessage: "Name",
+        },
+        placeholder: {
+            id: (0, translations_1.getTradId)("popup.navigation.form.name.placeholder"),
+            defaultMessage: "Navigations's name",
+        },
+    },
+    visible: {
+        intlLabel: {
+            id: (0, translations_1.getTradId)("popup.navigation.form.visible.label"),
+            defaultMessage: "Visibility",
+        },
+    },
+};
+const validationSchemaFactory = (alreadyUsedNames, formatMessage) => yup.object({
+    name: yup
+        .string()
+        .notOneOf(alreadyUsedNames, formatMessage({
+        id: (0, translations_1.getTradId)("popup.navigation.form.validation.name.alreadyUsed"),
+    }))
+        .required(formatMessage({
+        id: (0, translations_1.getTradId)("popup.navigation.form.validation.name.required"),
+    }))
+        .min(2, formatMessage({
+        id: (0, translations_1.getTradId)("popup.navigation.form.validation.name.tooShort"),
+    })),
+    visible: yup.boolean().required(formatMessage({
+        id: (0, translations_1.getTradId)("popup.navigation.form.validation.visible.required"),
+    })),
+});
+exports.validationSchemaFactory = validationSchemaFactory;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/List/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CommonProps, FooterActionsFactory, ListState } from "../types";
+interface Props extends ListState, CommonProps {
+}
+export declare const List: ({ navigations, selected, setState }: Props) => JSX.Element;
+export declare const listFooterActions: FooterActionsFactory;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/List/index.js

@@ -0,0 +1,138 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listFooterActions = exports.List = void 0;
+const BaseCheckbox_1 = require("@strapi/design-system/BaseCheckbox");
+const Typography_1 = require("@strapi/design-system/Typography");
+const Box_1 = require("@strapi/design-system/Box");
+const Button_1 = require("@strapi/design-system/Button");
+const Flex_1 = require("@strapi/design-system/Flex");
+const Grid_1 = require("@strapi/design-system/Grid");
+const IconButton_1 = require("@strapi/design-system/IconButton");
+const Table_1 = require("@strapi/design-system/Table");
+const icons_1 = require("@strapi/icons");
+const react_1 = __importStar(require("react"));
+const useDataManager_1 = __importDefault(require("../../../../../hooks/useDataManager"));
+const utils_1 = require("../../../../../utils");
+const Create_1 = require("../Create");
+const List = ({ navigations, selected, setState }) => {
+    const { config: { i18nEnabled }, } = (0, useDataManager_1.default)();
+    const hasAnySelected = !!selected.length;
+    const toggleSelected = (0, react_1.useCallback)(() => setState({
+        navigations,
+        selected: hasAnySelected ? [] : navigations.map((n) => n),
+        view: "LIST",
+    }), [setState, navigations, hasAnySelected]);
+    const currentlySelectedSet = (0, react_1.useMemo)(() => new Set(selected.map(({ id }) => id)), [selected]);
+    const handleSelect = (navigation, isSelected) => () => {
+        setState({
+            navigations,
+            selected: isSelected
+                ? selected.filter(({ id }) => id !== navigation.id)
+                : selected.concat([navigation]),
+            view: "LIST",
+        });
+    };
+    const edit = (navigation) => () => {
+        setState({
+            view: "EDIT",
+            navigation,
+            alreadyUsedNames: navigations
+                .map(({ name }) => name)
+                .filter((name) => name !== navigation.name),
+        });
+    };
+    const _delete = (navigations) => () => {
+        setState({
+            view: "DELETE",
+            navigations,
+        });
+    };
+    const deleteSelected = (0, react_1.useCallback)(_delete(selected), [_delete]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Grid_1.Grid, null,
+            react_1.default.createElement(Grid_1.GridItem, { col: 12, paddingBottom: 3 }, hasAnySelected ? (react_1.default.createElement(Flex_1.Flex, { direction: "row", gap: 1 },
+                react_1.default.createElement(Box_1.Box, { paddingRight: 3 }, (0, utils_1.getMessage)({
+                    id: "popup.navigation.manage.table.hasSelected",
+                    props: {
+                        count: selected.length,
+                    },
+                })),
+                react_1.default.createElement(Button_1.Button, { onClick: deleteSelected, variant: "tertiary" }, (0, utils_1.getMessage)("popup.navigation.manage.button.delete")))) : null)),
+        react_1.default.createElement(Table_1.Table, { rowCount: navigations.length + 1, colCount: i18nEnabled ? 6 : 5 },
+            react_1.default.createElement(Table_1.Thead, null,
+                react_1.default.createElement(Table_1.Tr, null,
+                    react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(BaseCheckbox_1.BaseCheckbox, { onValueChange: toggleSelected, value: hasAnySelected })),
+                    react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, (0, utils_1.getMessage)("popup.navigation.manage.table.id"))),
+                    react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, (0, utils_1.getMessage)("popup.navigation.manage.table.name"))),
+                    i18nEnabled ? (react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, (0, utils_1.getMessage)("popup.navigation.manage.table.locale")))) : null,
+                    react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, (0, utils_1.getMessage)("popup.navigation.manage.table.visibility"))),
+                    react_1.default.createElement(Table_1.Th, null))),
+            react_1.default.createElement(Table_1.Tbody, null, navigations.map((navigation) => (react_1.default.createElement(Table_1.Tr, { key: navigation.id },
+                react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(BaseCheckbox_1.BaseCheckbox, { onValueChange: handleSelect(navigation, currentlySelectedSet.has(navigation.id)), value: currentlySelectedSet.has(navigation.id) })),
+                react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, navigation.id)),
+                react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, navigation.name)),
+                i18nEnabled ? (react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, [navigation.localeCode]
+                        .concat(navigation.localizations?.map(({ localeCode }) => localeCode) || [])
+                        .join(", ")))) : null,
+                react_1.default.createElement(Table_1.Td, null, navigation.visible ? icons.visible : icons.notVisible),
+                react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(Flex_1.Flex, { direction: "row" },
+                        react_1.default.createElement(Box_1.Box, { paddingLeft: 1 },
+                            react_1.default.createElement(IconButton_1.IconButton, { onClick: edit(navigation), label: (0, utils_1.getMessage)("popup.navigation.manage.button.edit"), noBorder: true, icon: icons.edit })),
+                        react_1.default.createElement(Box_1.Box, { paddingLeft: 1 },
+                            react_1.default.createElement(IconButton_1.IconButton, { onClick: _delete([navigation]), label: (0, utils_1.getMessage)("popup.navigation.manage.button.delete"), noBorder: true, icon: icons.delete })))))))))));
+};
+exports.List = List;
+const listFooterActions = ({ onClose, state, setState, navigations, }) => {
+    return {
+        startActions: (react_1.default.createElement(Button_1.Button, { onClick: onClose, variant: "tertiary", disabled: state.isLoading }, (0, utils_1.getMessage)("popup.item.form.button.cancel"))),
+        endActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: () => setState({
+                view: "CREATE",
+                alreadyUsedNames: navigations.map(({ name }) => name),
+                current: Create_1.INITIAL_NAVIGATION,
+            }), variant: "default" }, (0, utils_1.getMessage)("popup.navigation.manage.button.create"))),
+    };
+};
+exports.listFooterActions = listFooterActions;
+const icons = {
+    edit: react_1.default.createElement(icons_1.Pencil, null),
+    delete: react_1.default.createElement(icons_1.Trash, null),
+    visible: react_1.default.createElement(icons_1.Eye, null),
+    notVisible: react_1.default.createElement(icons_1.EyeStriked, null),
+};
+//# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { State } from "./types";
+interface Props {
+    initialState: State;
+    onClose?: () => void;
+    isOpened?: boolean;
+}
+export declare const NavigationManager: ({ initialState, onClose, isOpened, }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map