@akemona-org/strapi-plugin-i18n 3.7.0

package/admin/src/components/ModalDelete/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@buffetjs/core';
+import { ModalConfirm } from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+import useDeleteLocale from '../../hooks/useDeleteLocale';
+import { getTrad } from '../../utils';
+
+const ModalDelete = ({ localeToDelete, onClose }) => {
+  const { isDeleting, deleteLocale } = useDeleteLocale();
+  const { formatMessage } = useIntl();
+  const isOpened = Boolean(localeToDelete);
+
+  const handleDelete = () => deleteLocale(localeToDelete.id).then(onClose);
+
+  return (
+    <ModalConfirm
+      confirmButtonLabel={{
+        id: getTrad('Settings.locales.modal.delete.confirm'),
+      }}
+      showButtonLoader={isDeleting}
+      isOpen={isOpened}
+      toggle={onClose}
+      onClosed={onClose}
+      onConfirm={handleDelete}
+      type="warning"
+      content={{
+        id: getTrad(`Settings.locales.modal.delete.message`),
+      }}
+    >
+      <Text fontWeight="bold">
+        {formatMessage({ id: getTrad('Settings.locales.modal.delete.secondMessage') })}
+      </Text>
+    </ModalConfirm>
+  );
+};
+
+ModalDelete.defaultProps = {
+  localeToDelete: undefined,
+};
+
+ModalDelete.propTypes = {
+  localeToDelete: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+  }),
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ModalDelete;

package/admin/src/components/ModalEdit/AdvancedForm.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text, Checkbox, Padded } from '@buffetjs/core';
+import { useFormikContext } from 'formik';
+import { useIntl } from 'react-intl';
+import { BaselineAlignment } from 'strapi-helper-plugin';
+import { getTrad } from '../../utils';
+
+const AdvancedForm = ({ isDefaultLocale }) => {
+  const { values, setFieldValue } = useFormikContext();
+  const { formatMessage } = useIntl();
+
+  return (
+    <div>
+      <BaselineAlignment top size="2px" />
+      <Padded bottom size="sm">
+        <Text color="grey" textTransform="uppercase">
+          {formatMessage({
+            id: getTrad('Settings.locales.modal.advanced.settings'),
+          })}
+        </Text>
+      </Padded>
+
+      <BaselineAlignment top size="10px" />
+      <Checkbox
+        id="default-checkbox"
+        name="default-checkbox"
+        onChange={() => setFieldValue('isDefault', !values.isDefault)}
+        message={formatMessage({
+          id: getTrad('Settings.locales.modal.advanced.setAsDefault'),
+        })}
+        someChecked={false}
+        value={values.isDefault}
+        disabled={isDefaultLocale}
+        htmlFor="default-checkbox"
+      />
+
+      <Text color="grey" fontSize="sm">
+        {formatMessage({
+          id: getTrad('Settings.locales.modal.advanced.setAsDefault.hint'),
+        })}
+      </Text>
+    </div>
+  );
+};
+
+AdvancedForm.propTypes = {
+  isDefaultLocale: PropTypes.bool.isRequired,
+};
+
+export default AdvancedForm;

package/admin/src/components/ModalEdit/BaseForm.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label } from '@buffetjs/core';
+import { Inputs } from '@buffetjs/custom';
+import Select from 'react-select';
+import { Col, Row } from 'reactstrap';
+import { useIntl } from 'react-intl';
+import { useTheme } from 'styled-components';
+import { BaselineAlignment, selectStyles, DropdownIndicator } from 'strapi-helper-plugin';
+import { useFormikContext } from 'formik';
+import { getTrad } from '../../utils';
+
+const BaseForm = ({ options, defaultOption }) => {
+  const { formatMessage } = useIntl();
+  const { values, handleChange } = useFormikContext();
+  const theme = useTheme();
+  const styles = selectStyles(theme);
+
+  return (
+    <Row>
+      <Col>
+        <span id="locale-code">
+          <Label htmlFor="">
+            {formatMessage({
+              id: getTrad('Settings.locales.modal.edit.locales.label'),
+            })}
+          </Label>
+        </span>
+
+        <BaselineAlignment top size="5px" />
+
+        <Select
+          aria-labelledby="locale-code"
+          options={options}
+          defaultValue={defaultOption}
+          isDisabled
+          components={{ DropdownIndicator }}
+          styles={{
+            ...styles,
+            control: (base, state) => ({ ...base, ...styles.control(base, state), height: '34px' }),
+            indicatorsContainer: (base, state) => ({
+              ...base,
+              ...styles.indicatorsContainer(base, state),
+              height: '32px',
+            }),
+          }}
+        />
+      </Col>
+      <Col>
+        <BaselineAlignment top size="2px" />
+
+        <Inputs
+          label={formatMessage({
+            id: getTrad('Settings.locales.modal.locales.displayName'),
+          })}
+          name="displayName"
+          description={formatMessage({
+            id: getTrad('Settings.locales.modal.locales.displayName.description'),
+          })}
+          type="text"
+          value={values.displayName}
+          onChange={handleChange}
+          validations={{
+            max: 50,
+          }}
+          translatedErrors={{
+            max: formatMessage({
+              id: getTrad('Settings.locales.modal.locales.displayName.error'),
+            }),
+          }}
+        />
+      </Col>
+    </Row>
+  );
+};
+
+BaseForm.defaultProps = {
+  defaultOption: undefined,
+};
+
+BaseForm.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.exact({ value: PropTypes.number.isRequired, label: PropTypes.string.isRequired })
+  ).isRequired,
+  defaultOption: PropTypes.exact({
+    value: PropTypes.number.isRequired,
+    label: PropTypes.string.isRequired,
+  }),
+};
+
+export default BaseForm;

package/admin/src/components/ModalEdit/index.js

@@ -0,0 +1,122 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalFooter, TabPanel, useGlobalContext } from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+import { Button } from '@buffetjs/core';
+import { Formik } from 'formik';
+import localeFormSchema from '../../schemas';
+import useEditLocale from '../../hooks/useEditLocale';
+import { getTrad } from '../../utils';
+import BaseForm from './BaseForm';
+import AdvancedForm from './AdvancedForm';
+import SettingsModal from '../SettingsModal';
+
+const ModalEdit = ({ localeToEdit, onClose, locales }) => {
+  const { isEditing, editLocale } = useEditLocale();
+  const shouldUpdateMenu = useRef(false);
+  const { updateMenu } = useGlobalContext();
+  const { formatMessage } = useIntl();
+  const isOpened = Boolean(localeToEdit);
+
+  const handleSubmit = ({ displayName, isDefault }) => {
+    const id = localeToEdit.id;
+    const name = displayName || localeToEdit.code;
+
+    return editLocale(id, { name, isDefault })
+      .then(() => {
+        shouldUpdateMenu.current = true;
+      })
+      .then(onClose);
+  };
+
+  const handleClose = () => {
+    if (shouldUpdateMenu.current) {
+      updateMenu();
+    }
+
+    shouldUpdateMenu.current = false;
+  };
+
+  let options = [];
+  let defaultOption;
+
+  if (localeToEdit) {
+    options = locales.map(locale => ({ label: locale.code, value: locale.id }));
+    defaultOption = options.find(option => option.value === localeToEdit.id);
+  }
+
+  return (
+    <Modal isOpen={isOpened} onToggle={onClose} onClosed={handleClose}>
+      <Formik
+        initialValues={{
+          displayName: localeToEdit ? localeToEdit.name : '',
+          isDefault: localeToEdit ? localeToEdit.isDefault : false,
+        }}
+        onSubmit={handleSubmit}
+        validationSchema={localeFormSchema}
+      >
+        {({ handleSubmit, errors }) => (
+          <form onSubmit={handleSubmit}>
+            <SettingsModal
+              title={formatMessage({
+                id: getTrad('Settings.locales.modal.title'),
+              })}
+              breadCrumb={[getTrad('Settings.list.actions.edit')]}
+              tabsAriaLabel={formatMessage({
+                id: getTrad('Settings.locales.modal.edit.tab.label'),
+              })}
+              tabsId="i18n-settings-tabs-edit"
+            >
+              <TabPanel>
+                <BaseForm options={options} defaultOption={defaultOption} />
+              </TabPanel>
+              <TabPanel>
+                <AdvancedForm isDefaultLocale={Boolean(localeToEdit && localeToEdit.isDefault)} />
+              </TabPanel>
+            </SettingsModal>
+
+            <ModalFooter>
+              <section>
+                <Button type="button" color="cancel" onClick={onClose}>
+                  {formatMessage({ id: 'app.components.Button.cancel' })}
+                </Button>
+                <Button
+                  color="success"
+                  type="submit"
+                  isLoading={isEditing}
+                  disabled={Object.keys(errors).length > 0}
+                >
+                  {formatMessage({ id: getTrad('Settings.locales.modal.edit.confirmation') })}
+                </Button>
+              </section>
+            </ModalFooter>
+          </form>
+        )}
+      </Formik>
+    </Modal>
+  );
+};
+
+ModalEdit.defaultProps = {
+  localeToEdit: undefined,
+  locales: [],
+};
+
+ModalEdit.propTypes = {
+  localeToEdit: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    code: PropTypes.string.isRequired,
+    isDefault: PropTypes.bool.isRequired,
+  }),
+  onClose: PropTypes.func.isRequired,
+  locales: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      name: PropTypes.string,
+      code: PropTypes.string,
+    })
+  ),
+};
+
+export default ModalEdit;

package/admin/src/components/SettingsModal.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ModalHeader,
+  HeaderModal,
+  HeaderModalTitle,
+  ModalForm,
+  Tabs,
+  TabsNav,
+  Tab,
+  TabsPanel,
+} from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../utils';
+
+const SettingsModal = ({ children, title, breadCrumb, tabsAriaLabel, tabsId }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <HeaderModal>
+        <ModalHeader headerBreadcrumbs={breadCrumb} />
+      </HeaderModal>
+
+      <div className="container-fluid">
+        <div className="container-fluid">
+          <HeaderModalTitle
+            style={{
+              fontSize: '1.8rem',
+              height: '65px',
+              fontWeight: 'bold',
+              alignItems: 'center',
+              marginBottom: '-39px',
+              paddingTop: '16px',
+            }}
+          >
+            {title}
+          </HeaderModalTitle>
+
+          <ModalForm>
+            <div style={{ marginTop: '-40px' }}>
+              <TabsNav defaultSelection={0} label={tabsAriaLabel} id={tabsId}>
+                <Tabs position="right">
+                  <Tab>{formatMessage({ id: getTrad('Settings.locales.modal.base') })}</Tab>
+                  <Tab>{formatMessage({ id: getTrad('Settings.locales.modal.advanced') })}</Tab>
+                </Tabs>
+
+                <TabsPanel>{children}</TabsPanel>
+              </TabsNav>
+            </div>
+          </ModalForm>
+        </div>
+      </div>
+    </>
+  );
+};
+
+SettingsModal.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  breadCrumb: PropTypes.arrayOf(PropTypes.string).isRequired,
+  tabsAriaLabel: PropTypes.string.isRequired,
+  tabsId: PropTypes.string.isRequired,
+};
+
+export default SettingsModal;

package/admin/src/components/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as LocaleRow } from './LocaleRow';

package/admin/src/containers/Initializer.js

@@ -0,0 +1,31 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import pluginId from '../pluginId';
+import useLocales from '../hooks/useLocales';
+
+const Initializer = ({ updatePlugin }) => {
+  const { isLoading, locales } = useLocales();
+  const ref = useRef();
+
+  ref.current = updatePlugin;
+
+  useEffect(() => {
+    if (!isLoading && locales.length > 0) {
+      ref.current(pluginId, 'isReady', true);
+    }
+  }, [isLoading, locales]);
+
+  return null;
+};
+
+Initializer.propTypes = {
+  updatePlugin: PropTypes.func.isRequired,
+};
+
+export default Initializer;

package/admin/src/containers/SettingsPage/LocaleSettingsPage.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { BaselineAlignment } from 'strapi-helper-plugin';
+import { Header } from '@buffetjs/custom';
+import { Button } from '@buffetjs/core';
+import { getTrad } from '../../utils';
+import LocaleList from '../../components/LocaleList';
+
+const LocaleSettingsPage = ({
+  canReadLocale,
+  canCreateLocale,
+  canDeleteLocale,
+  canUpdateLocale,
+}) => {
+  const { formatMessage } = useIntl();
+  const [isOpenedCreateModal, setIsOpenedCreateModal] = useState(false);
+
+  const handleToggleModalCreate = canCreateLocale
+    ? () => setIsOpenedCreateModal(s => !s)
+    : undefined;
+
+  const actions = [
+    {
+      label: formatMessage({ id: getTrad('Settings.list.actions.add') }),
+      onClick: handleToggleModalCreate,
+      color: 'primary',
+      type: 'button',
+      icon: true,
+      Component: props => (canCreateLocale ? <Button {...props} /> : null),
+      style: {
+        paddingLeft: 15,
+        paddingRight: 15,
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Header
+        title={{
+          label: formatMessage({ id: getTrad('plugin.name') }),
+        }}
+        content={formatMessage({ id: getTrad('Settings.list.description') })}
+        actions={actions}
+      />
+
+      <BaselineAlignment top size="3px" />
+
+      {canReadLocale ? (
+        <LocaleList
+          canUpdateLocale={canUpdateLocale}
+          canDeleteLocale={canDeleteLocale}
+          onToggleCreateModal={handleToggleModalCreate}
+          isCreating={isOpenedCreateModal}
+        />
+      ) : null}
+    </>
+  );
+};
+
+LocaleSettingsPage.propTypes = {
+  canReadLocale: PropTypes.bool.isRequired,
+  canCreateLocale: PropTypes.bool.isRequired,
+  canUpdateLocale: PropTypes.bool.isRequired,
+  canDeleteLocale: PropTypes.bool.isRequired,
+};
+
+export default LocaleSettingsPage;

package/admin/src/containers/SettingsPage/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useUserPermissions } from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
+import LocaleSettingsPage from './LocaleSettingsPage';
+import i18nPermissions from '../../permissions';
+import { getTrad } from '../../utils';
+
+const ProtectedLocaleSettingsPage = () => {
+  const { formatMessage } = useIntl();
+  const {
+    isLoading,
+    allowedActions: { canRead, canUpdate, canCreate, canDelete },
+  } = useUserPermissions(i18nPermissions);
+
+  if (isLoading) {
+    return (
+      <div>
+        <p>{formatMessage({ id: getTrad('Settings.permissions.loading') })}</p>
+      </div>
+    );
+  }
+
+  return (
+    <LocaleSettingsPage
+      canReadLocale={canRead}
+      canCreateLocale={canCreate}
+      canUpdateLocale={canUpdate}
+      canDeleteLocale={canDelete}
+    />
+  );
+};
+
+export default ProtectedLocaleSettingsPage;