Init Edit view

packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js

@@ -1,7 +1,129 @@
-import React from 'react';
+import React, { memo, useEffect, useReducer } from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import {
+  getQueryParameters,
+  LoadingIndicatorPage,
+  PluginHeader,
+  request,
+  templateObject,
+} from 'strapi-helper-plugin';
+import pluginId from '../../pluginId';
 
-function EditView() {
+import Container from '../../components/Container';
-  return <div>Coming soon</div>;
+
+import init from './init';
+import reducer, { initialState } from './reducer';
+
+const getRequestUrl = path => `/${pluginId}/explorer/${path}`;
+
+function EditView({
+  layouts,
+  location: { search },
+  match: {
+    params: { slug, id },
+  },
+}) {
+  const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState)
+  );
+  const layout = get(layouts, [slug], {});
+  const displayedFieldNameInHeader = get(
+    layout,
+    ['settings', 'mainField'],
+    'id'
+  );
+  const state = reducerState.toJS();
+  const { initialData, isLoading, isSubmitting } = state;
+  const isCreatingEntry = id === 'create';
+  const source = getQueryParameters(search, 'source');
+  const shouldShowLoader = !isCreatingEntry && isLoading;
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await request(getRequestUrl(`${slug}/${id}`), {
+        method: 'GET',
+        params: { source },
+      });
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        data,
+      });
+    };
+
+    if (!isCreatingEntry) {
+      fetchData();
+    }
+  }, [id, isCreatingEntry, slug, source]);
+
+  if (shouldShowLoader) {
+    return <LoadingIndicatorPage />;
+  }
+
+  const handleSubmit = e => {
+    e.preventDefault();
+  };
+
+  const pluginHeaderTitle = isCreatingEntry
+    ? { id: `${pluginId}.containers.Edit.pluginHeader.title.new` }
+    : templateObject({ mainField: displayedFieldNameInHeader }, initialData)
+        .mainField;
+
+  return (
+    <Container className="container-fluid">
+      <form onSubmit={handleSubmit}>
+        <PluginHeader
+          actions={[
+            {
+              label: `${pluginId}.containers.Edit.reset`,
+              kind: 'secondary',
+              onClick: () => {},
+              type: 'button',
+              disabled: isSubmitting, // TODO STATE WHEN SUBMITING
+            },
+            {
+              kind: 'primary',
+              label: `${pluginId}.containers.Edit.submit`,
+              type: 'submit',
+              loader: isSubmitting,
+              style: isSubmitting
+                ? { marginRight: '18px', flexGrow: 2 }
+                : { flexGrow: 2 },
+              disabled: isSubmitting, // TODO STATE WHEN SUBMITING
+            },
+          ]}
+          subActions={
+            isCreatingEntry
+              ? []
+              : [
+                  {
+                    label: 'app.utils.delete',
+                    kind: 'delete',
+                    onClick: () => {},
+                    type: 'button',
+                    disabled: isSubmitting, // TODO STATE WHEN SUBMITING
+                  },
+                ]
+          }
+          title={pluginHeaderTitle}
+        />
+      </form>
+    </Container>
+  );
 }
 
-export default EditView;
+EditView.propTypes = {
+  layouts: PropTypes.object,
+  location: PropTypes.shape({
+    search: PropTypes.string,
+  }),
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      slug: PropTypes.string.isRequired,
+    }),
+  }),
+};
+
+export default memo(EditView);

packages/strapi-plugin-content-manager/admin/src/containers/EditView/init.js

@@ -0,0 +1,5 @@
+function init(initialState) {
+  return initialState;
+}
+
+export default init;

packages/strapi-plugin-content-manager/admin/src/containers/EditView/reducer.js

@@ -0,0 +1,23 @@
+import { fromJS } from 'immutable';
+
+const initialState = fromJS({
+  initialData: {},
+  isLoading: true,
+  modifiedData: {},
+  isSubmitting: false,
+});
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'GET_DATA_SUCCEEDED':
+      return state
+        .update('isLoading', () => false)
+        .update('initialData', () => fromJS(action.data))
+        .update('modifiedData', () => fromJS(action.data));
+    default:
+      return state;
+  }
+}
+
+export default reducer;
+export { initialState };

packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js

@@ -145,7 +145,6 @@ function ListView({
       return { ...getMetaDatas([label, 'list']), name: label };
     });
   };
-
   const handleChangeListLabels = ({ name, value }) => {
     const currentSort = getSearchParams()._sort;
 
@@ -187,7 +186,6 @@ function ListView({
     setIdToDelete(id);
     toggleModalDelete();
   };
-
   const handleSubmit = (filters = []) => {
     emitEvent('didFilterEntries');
     toggleFilterPickerState();

packages/strapi-plugin-content-manager/admin/src/containers/Main/index.js

@@ -38,31 +38,24 @@ function Main({ emitEvent, getLayout, layouts, location: { pathname } }) {
   const renderRoute = (props, Component) => (
     <Component emitEvent={emitEvent} layouts={layouts} {...props} />
   );
+  const routes = [
+    {
+      path: 'ctm-configurations/models/:name/:settingType',
+      comp: SettingViewModel,
+    },
+    { path: 'ctm-configurations/groups/:name', comp: SettingViewGroup },
+    { path: 'ctm-configurations/:type', comp: SettingsView },
+    { path: ':slug/:id', comp: EditView },
+    { path: ':slug', comp: ListView },
+  ].map(({ path, comp }) => (
+    <Route
+      key={path}
+      path={`/plugins/${pluginId}/${path}`}
+      render={props => renderRoute(props, comp)}
+    />
+  ));
 
-  return (
+  return <Switch>{routes}</Switch>;
-    <Switch>
-      <Route
-        path={`/plugins/${pluginId}/ctm-configurations/models/:name/:settingType`}
-        render={props => renderRoute(props, SettingViewModel)}
-      />
-      <Route
-        path={`/plugins/${pluginId}/ctm-configurations/groups/:name`}
-        component={SettingViewGroup}
-      />
-      <Route
-        path={`/plugins/${pluginId}/ctm-configurations/:type`}
-        render={props => renderRoute(props, SettingsView)}
-      />
-      <Route
-        path={`/plugins/${pluginId}/:slug/:id`}
-        render={props => renderRoute(props, EditView)}
-      />
-      <Route
-        path={`/plugins/${pluginId}/:slug`}
-        render={props => renderRoute(props, ListView)}
-      />
-    </Switch>
-  );
 }
 
 Main.propTypes = {

packages/strapi-plugin-content-manager/admin/src/containers/SettingsView/index.js

@@ -106,17 +106,17 @@ function SettingsView({
         actions={getPluginHeaderActions()}
         title="Content Manager"
         description={{
-          id: 'content-manager.containers.SettingsPage.pluginHeaderDescription',
+          id: `${pluginId}.containers.SettingsPage.pluginHeaderDescription`,
         }}
       />
       <PopUpWarning
         isOpen={showWarningSubmit}
         toggleModal={toggleWarningSubmit}
         content={{
-          title: 'content-manager.popUpWarning.title',
+          title: `${pluginId}.popUpWarning.title`,
-          message: 'content-manager.popUpWarning.warning.updateAllSettings',
+          message: `${pluginId}.popUpWarning.warning.updateAllSettings`,
-          cancel: 'content-manager.popUpWarning.button.cancel',
+          cancel: `${pluginId}.popUpWarning.button.cancel`,
-          confirm: 'content-manager.popUpWarning.button.confirm',
+          confirm: `${pluginId}.popUpWarning.button.confirm`,
         }}
         popUpWarningType="danger"
         onConfirm={() => onSubmit()}
@@ -125,10 +125,10 @@ function SettingsView({
         isOpen={showWarningCancel}
         toggleModal={toggleWarningCancel}
         content={{
-          title: 'content-manager.popUpWarning.title',
+          title: `${pluginId}.popUpWarning.title`,
-          message: 'content-manager.popUpWarning.warning.cancelAllSettings',
+          message: `${pluginId}.popUpWarning.warning.cancelAllSettings`,
-          cancel: 'content-manager.popUpWarning.button.cancel',
+          cancel: `${pluginId}.popUpWarning.button.cancel`,
-          confirm: 'content-manager.popUpWarning.button.confirm',
+          confirm: `${pluginId}.popUpWarning.button.confirm`,
         }}
         popUpWarningType="danger"
         onConfirm={() => {
@@ -138,8 +138,8 @@ function SettingsView({
       />
       <Row className="row">
         <Block
-          description="content-manager.containers.SettingsPage.Block.generalSettings.description"
+          description={`${pluginId}.containers.SettingsPage.Block.generalSettings.description`}
-          title="content-manager.containers.SettingsPage.Block.generalSettings.title"
+          title={`${pluginId}.containers.SettingsPage.Block.generalSettings.title`}
           style={{ marginBottom: 7 }}
         >
           <form style={{ paddingTop: '2.6rem' }}>

packages/strapi-plugin-content-manager/admin/src/translations/en.json

@@ -33,6 +33,7 @@
   "components.TableEmpty.withSearch": "There is no {contentType} corresponding to the search ({search})...",
   "components.TableEmpty.withoutFilter": "There is no {contentType}...",
   "containers.Edit.addAnItem": "Add an item...",
+  "containers.Edit.pluginHeader.title.new": "Create an Entry",
   "containers.Edit.clickToJump": "Click to jump to the entry",
   "containers.Edit.delete": "Delete",
   "containers.Edit.editing": "Editing...",

packages/strapi-plugin-content-manager/admin/src/translations/fr.json

@@ -31,6 +31,7 @@
   "components.TableEmpty.withSearch": "Aucun {contentType} n'a été trouvé avec cette recherche ({search})...",
   "components.TableEmpty.withoutFilter": "Aucun {contentType} n'a été trouvé...",
   "containers.Edit.addAnItem": "Ajouter un élément...",
+  "containers.Edit.pluginHeader.title.new": "Créer un document",
   "containers.Edit.clickToJump": "Cliquer pour voir l'entrée",
   "containers.Edit.delete": "Supprimer",
   "containers.Edit.editing": "Édition en cours...",

packages/strapi-plugin-content-manager/controllers/ContentManagerFixtures.js

@@ -256,7 +256,7 @@ module.exports = {
           },
         },
         settings: {
-          mainField: 'id',
+          mainField: 'title',
           defaultSortBy: 'id',
           defaultSortOrder: 'ASC',
           searchable: true,