Handle submit for settingviewmodel

2025-11-01 18:33:55 +00:00 · 2019-07-05 10:54:34 +02:00 · 2019-07-05 10:54:34 +02:00 · 00cea393eb
commit 00cea393eb
parent de9ee49878
13 changed files with 343 additions and 25 deletions
--- a/packages/strapi-plugin-content-manager/admin/src/components/SectionTitle/Title.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SectionTitle/Title.js
@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Title = styled.div`
+  color: #787e8f;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.77px;
+  text-transform: uppercase;
+`;
+
+export default Title;
--- a/packages/strapi-plugin-content-manager/admin/src/components/SectionTitle/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SectionTitle/index.js
@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import pluginId from '../../pluginId';
+import Title from './Title';
+
+const SectionTitle = ({ isSettings }) => {
+  const suffix = isSettings ? 'settings' : 'layout';
+  const msgId = `${pluginId}.containers.SettingPage.${suffix}`;
+
+  return (
+    <div style={{ marginBottom: '18px' }}>
+      <FormattedMessage id={msgId}>
+        {msg => <Title>{msg}</Title>}
+      </FormattedMessage>
+    </div>
+  );
+};
+
+SectionTitle.propTypes = {
+  isSettings: PropTypes.bool,
+};
+
+SectionTitle.defaultProps = {
+  isSettings: false,
+};
+
+export default SectionTitle;
--- a/packages/strapi-plugin-content-manager/admin/src/containers/Main/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/Main/index.js
@ -23,15 +23,15 @@ function Main({ isLoading, emitEvent }) {
    return <LoadingIndicatorPage />;
  }

-  const renderRoute = props => (
-    <SettingsView emitEvent={emitEvent} {...props} />
+  const renderRoute = (props, Component) => (
+    <Component emitEvent={emitEvent} {...props} />
  );

  return (
    <Switch>
      <Route
        path="/plugins/content-manager/ctm-configurations/models/:name/:settingType"
-        component={SettingViewModel}
+        component={props => renderRoute(props, SettingViewModel)}
      />
      <Route
        path="/plugins/content-manager/ctm-configurations/groups/:name"
@ -39,7 +39,7 @@ function Main({ isLoading, emitEvent }) {
      />
      <Route
        path="/plugins/content-manager/ctm-configurations/:type"
-        render={renderRoute}
+        render={props => renderRoute(props, SettingsView)}
      />
    </Switch>
  );
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js
@ -1,4 +1,11 @@
-import { GET_DATA, GET_DATA_SUCCEEDED } from './constants';
+import {
+  GET_DATA,
+  GET_DATA_SUCCEEDED,
+  ON_CHANGE,
+  ON_RESET,
+  ON_SUBMIT,
+  SUBMIT_SUCCEEDED,
+} from './constants';

 export function getData(uid) {
  return {
@ -13,3 +20,30 @@ export function getDataSucceeded(layout) {
    layout,
  };
 }
+
+export function onChange({ target: { name, value } }) {
+  return {
+    type: ON_CHANGE,
+    keys: ['modifiedData', ...name.split('.')],
+    value,
+  };
+}
+
+export function onReset() {
+  return {
+    type: ON_RESET,
+  };
+}
+export function onSubmit(uid, emitEvent) {
+  return {
+    type: ON_SUBMIT,
+    uid,
+    emitEvent,
+  };
+}
+
+export function submitSucceeded() {
+  return {
+    type: SUBMIT_SUCCEEDED,
+  };
+}
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/constants.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/constants.js
@ -1,3 +1,8 @@
 export const GET_DATA = 'ContentManager/SettingViewModel/GET_DATA';
 export const GET_DATA_SUCCEEDED =
  'ContentManager/SettingViewModel/GET_DATA_SUCCEEDED';
+export const ON_CHANGE = 'ContentManager/SettingViewModel/ON_CHANGE';
+export const ON_RESET = 'ContentManager/SettingViewModel/ON_RESET';
+export const ON_SUBMIT = 'ContentManager/SettingViewModel/ON_SUBMIT';
+export const SUBMIT_SUCCEEDED =
+  'ContentManager/SettingViewModel/SUBMIT_SUCCEEDED';
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/forms.json
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/forms.json
@ -0,0 +1,65 @@
+{
+  "list-settings": [
+    {
+      "label": { "id": "content-manager.form.Input.search" },
+      "customBootstrapClass": "col-md-4",
+      "didCheckErrors": false,
+      "errors": [],
+      "name": "settings.searchable",
+      "type": "toggle",
+      "validations": {}
+    },
+    {
+      "label": { "id": "content-manager.form.Input.filters" },
+      "customBootstrapClass": "col-md-4",
+      "didCheckErrors": false,
+      "errors": [],
+      "name": "settings.filterable",
+      "type": "toggle",
+      "validations": {}
+    },
+    {
+      "label": { "id": "content-manager.form.Input.bulkActions" },
+      "customBootstrapClass": "col-md-4",
+      "didCheckErrors": false,
+      "errors": [],
+      "name": "settings.bulkable",
+      "type": "toggle",
+      "validations": {}
+    },
+    {
+      "label": { "id": "content-manager.form.Input.pageEntries" },
+      "customBootstrapClass": "col-md-4",
+      "didCheckErrors": false,
+      "errors": [],
+      "inputDescription": { "id": "content-manager.form.Input.pageEntries.inputDescription" },
+      "name": "settings.pageSize",
+      "selectOptions": ["10", "20", "50", "100"],
+      "type": "select",
+      "validations": {}
+    },
+    {
+      "label": { "id": "content-manager.form.Input.defaultSort" },
+      "customBootstrapClass": "col-md-4 ml-md-auto",
+      "didCheckErrors": false,
+      "errors": [],
+      "style": { "marginRight": "-20px" },
+      "name": "settings.defaultSortBy",
+      "selectOptions": ["id"],
+      "type": "select",
+      "validations": {}
+    },
+    {
+      "label": "",
+      "customBootstrapClass": "col-md-1",
+      "didCheckErrors": false,
+      "errors": [],
+
+      "name": "settings.defaultSortOrder",
+      "selectOptions": ["ASC", "DESC"],
+      "type": "select",
+      "validations": {}
+    }
+  ],
+  "edit-settings": []
+}
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js
@ -1,42 +1,99 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
-import { upperFirst } from 'lodash';
+import { get, isEqual, upperFirst } from 'lodash';

-import { BackHeader, HeaderNav, PluginHeader } from 'strapi-helper-plugin';
+import {
+  BackHeader,
+  HeaderNav,
+  InputsIndex as Input,
+  PluginHeader,
+  PopUpWarning,
+} from 'strapi-helper-plugin';
 import pluginId from '../../pluginId';

+import Block from '../../components/Block';
 import Container from '../../components/Container';
+import SectionTitle from '../../components/SectionTitle';

-import { getData } from './actions';
+import { getData, onChange, onReset, onSubmit } from './actions';
 import reducer from './reducer';
 import saga from './saga';
 import makeSelectSettingViewModel from './selectors';

+import forms from './forms.json';
+
 const getUrl = (name, to) =>
  `/plugins/${pluginId}/ctm-configurations/models/${name}/${to}`;

 function SettingViewModel({
+  emitEvent,
  getData,
  history: { goBack },
+  initialData,
  match: {
-    params: { name },
+    params: { name, settingType },
  },
+  modifiedData,
+  onChange,
+  onReset,
+  onSubmit,
+  shouldToggleModalSubmit,
 }) {
  strapi.useInjectReducer({ key: 'settingViewModel', reducer, pluginId });
  strapi.useInjectSaga({ key: 'settingViewModel', saga, pluginId });
+  const [showWarningSubmit, setWarningSubmit] = useState(false);
+  const [showWarningCancel, setWarningCancel] = useState(false);
+  const toggleWarningSubmit = () => setWarningSubmit(prevState => !prevState);
+  const toggleWarningCancel = () => setWarningCancel(prevState => !prevState);

  useEffect(() => {
    getData(name);
  }, []);
+  useEffect(() => {
+    if (showWarningSubmit) {
+      toggleWarningSubmit();
+    }
+  }, [shouldToggleModalSubmit]);
+
+  const getPluginHeaderActions = () => {
+    if (isEqual(modifiedData, initialData)) {
+      return [];
+    }
+
+    return [
+      {
+        label: 'content-manager.popUpWarning.button.cancel',
+        kind: 'secondary',
+        onClick: toggleWarningCancel,
+        type: 'button',
+      },
+      {
+        kind: 'primary',
+        label: 'content-manager.containers.Edit.submit',
+        onClick: () => {
+          toggleWarningSubmit();
+          emitEvent('willSaveContentTypeLayout');
+        },
+        type: 'submit',
+      },
+    ];
+  };
+  const getSelectOptions = input => {
+    if (input.name === 'settings.defaultSortBy') {
+      return get(modifiedData, ['layouts', 'list'], []);
+    }
+
+    return input.selectOptions;
+  };

  return (
    <>
      <BackHeader onClick={() => goBack()} />
      <Container className="container-fluid">
        <PluginHeader
-          actions={[]}
+          actions={getPluginHeaderActions()}
          title={{
            id: `${pluginId}.containers.SettingViewModel.pluginHeader.title`,
            values: { name: upperFirst(name) },
@ -58,22 +115,81 @@ function SettingViewModel({
            },
          ]}
        />
+        <div className="row">
+          <Block
+            style={{
+              marginBottom: '13px',
+              paddingBottom: '30px',
+              paddingTop: '30px',
+            }}
+          >
+            <SectionTitle isSettings />
+            <div className="row">
+              {forms[settingType].map(input => {
+                return (
+                  <Input
+                    key={input.name}
+                    {...input}
+                    onChange={onChange}
+                    selectOptions={getSelectOptions(input)}
+                    value={get(modifiedData, input.name)}
+                  />
+                );
+              })}
+            </div>
+          </Block>
+        </div>
      </Container>
+      <PopUpWarning
+        isOpen={showWarningCancel}
+        toggleModal={toggleWarningCancel}
+        content={{
+          title: 'content-manager.popUpWarning.title',
+          message: 'content-manager.popUpWarning.warning.cancelAllSettings',
+          cancel: 'content-manager.popUpWarning.button.cancel',
+          confirm: 'content-manager.popUpWarning.button.confirm',
+        }}
+        popUpWarningType="danger"
+        onConfirm={() => {
+          onReset();
+          toggleWarningCancel();
+        }}
+      />
+      <PopUpWarning
+        isOpen={showWarningSubmit}
+        toggleModal={toggleWarningSubmit}
+        content={{
+          title: 'content-manager.popUpWarning.title',
+          message: 'content-manager.popUpWarning.warning.updateAllSettings',
+          cancel: 'content-manager.popUpWarning.button.cancel',
+          confirm: 'content-manager.popUpWarning.button.confirm',
+        }}
+        popUpWarningType="danger"
+        onConfirm={() => onSubmit(name, emitEvent)}
+      />
    </>
  );
 }

 SettingViewModel.defaultProps = {};
 SettingViewModel.propTypes = {
+  emitEvent: PropTypes.func.isRequired,
  getData: PropTypes.func.isRequired,
  history: PropTypes.shape({
    goBack: PropTypes.func,
  }).isRequired,
+  initialData: PropTypes.object.isRequired,
  match: PropTypes.shape({
    params: PropTypes.shape({
      name: PropTypes.string,
    }),
  }).isRequired,
+
+  modifiedData: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onReset: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  shouldToggleModalSubmit: PropTypes.bool.isRequired,
 };

 const mapStateToProps = makeSelectSettingViewModel();
@ -82,6 +198,9 @@ export function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      getData,
+      onChange,
+      onReset,
+      onSubmit,
    },
    dispatch
  );
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js
@ -3,20 +3,34 @@
 * settingViewModel reducer
 */

-import { fromJS, Map } from 'immutable';
-import { GET_DATA_SUCCEEDED } from './constants';
+import { fromJS } from 'immutable';
+import {
+  GET_DATA_SUCCEEDED,
+  ON_CHANGE,
+  ON_RESET,
+  SUBMIT_SUCCEEDED,
+} from './constants';

 export const initialState = fromJS({
-  initialData: Map({}),
-  modifiedData: Map({}),
+  initialData: fromJS({}),
+  modifiedData: fromJS({}),
+  shouldToggleModalSubmit: true,
 });

 function settingViewModelReducer(state = initialState, action) {
  switch (action.type) {
    case GET_DATA_SUCCEEDED:
      return state
-        .update('initialData', () => Map(action.layout))
-        .update('modifiedData', () => Map(action.layout));
+        .update('initialData', () => fromJS(action.layout))
+        .update('modifiedData', () => fromJS(action.layout));
+    case ON_CHANGE:
+      return state.updateIn(action.keys, () => action.value);
+    case ON_RESET:
+      return state.update('modifiedData', () => state.get('initialData'));
+    case SUBMIT_SUCCEEDED:
+      return state
+        .update('initialData', () => state.get('modifiedData'))
+        .update('shouldToggleModalSubmit', v => !v);
    default:
      return state;
  }
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/saga.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/saga.js
@ -1,9 +1,10 @@
-import { all, fork, put, call, takeLatest } from 'redux-saga/effects';
+import { all, fork, put, call, takeLatest, select } from 'redux-saga/effects';
 import { request } from 'strapi-helper-plugin';

 import pluginId from '../../pluginId';
-import { getDataSucceeded } from './actions';
-import { GET_DATA } from './constants';
+import { getDataSucceeded, submitSucceeded } from './actions';
+import { GET_DATA, ON_SUBMIT } from './constants';
+import { makeSelectModifiedData } from './selectors';

 const getRequestUrl = path => `/${pluginId}/fixtures/${path}`;

@ -19,9 +20,27 @@ export function* getData({ uid }) {
  }
 }

+export function* submit({ emitEvent, uid }) {
+  try {
+    const body = yield select(makeSelectModifiedData());
+
+    yield call(request, getRequestUrl(`layouts/${uid}`), {
+      method: 'PUT',
+      body,
+    });
+    emitEvent('didSaveContentTypeLayout');
+    yield put(submitSucceeded());
+  } catch (err) {
+    strapi.notification.error('notification.error');
+  }
+}
+
 function* defaultSaga() {
  try {
-    yield all([fork(takeLatest, GET_DATA, getData)]);
+    yield all([
+      fork(takeLatest, GET_DATA, getData),
+      fork(takeLatest, ON_SUBMIT, submit),
+    ]);
  } catch (err) {
    // Do nothing
  }
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/selectors.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/selectors.js
@ -24,5 +24,13 @@ const makeSelectSettingViewModel = () =>
    }
  );

+const makeSelectModifiedData = () =>
+  createSelector(
+    settingViewModelDomain(),
+    substate => {
+      return substate.get('modifiedData').toJS();
+    }
+  );
+
 export default makeSelectSettingViewModel;
-export { settingViewModelDomain };
+export { settingViewModelDomain, makeSelectModifiedData };
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingsView/forms.json
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingsView/forms.json
@ -32,7 +32,7 @@
    "didCheckErrors": false,
    "errors": [],
    "inputDescription": { "id": "content-manager.form.Input.pageEntries.inputDescription" },
-    "name": "pageEntries",
+    "name": "pageSize",
    "selectOptions": ["10", "20", "50", "100"],
    "type": "select",
    "validations": {}
--- a/packages/strapi-plugin-content-manager/config/routes.json
+++ b/packages/strapi-plugin-content-manager/config/routes.json
@ -48,6 +48,14 @@
        "policies": []
      }
    },
+    {
+      "method": "PUT",
+      "path": "/fixtures/layouts/:uid",
+      "handler": "ContentManagerFixtures.updateLayout",
+      "config": {
+        "policies": []
+      }
+    },
    {
      "method": "GET",
      "path": "/explorer/:model",
--- a/packages/strapi-plugin-content-manager/controllers/ContentManagerFixtures.js
+++ b/packages/strapi-plugin-content-manager/controllers/ContentManagerFixtures.js
@ -3,7 +3,7 @@ module.exports = {
    const generalSettings = {
      bulkable: true,
      filters: true,
-      pageEntries: 10,
+      pageSize: 20,
      search: true,
    };

@ -23,7 +23,6 @@ module.exports = {
  },

  getLayout: ctx => {
-    console.log('ooo');
    const layouts = {
      article: {
        uid: 'article',
@ -48,6 +47,7 @@ module.exports = {
        settings: {
          mainField: 'id',
          defaultSortBy: 'id',
+          defaultSortOrder: 'ASC',
          searchable: true,
          filterable: true,
          bulkable: false,
@ -158,6 +158,7 @@ module.exports = {
        settings: {
          mainField: 'id',
          defaultSortBy: 'id',
+          defaultSortOrder: 'ASC',
          searchable: true,
          filterable: true,
          bulkable: false,
@ -311,4 +312,9 @@ module.exports = {
    // Here it should update all the other settings
    ctx.body = { ok: true };
  },
+
+  updateLayout: ctx => {
+    // Update specific layout
+    ctx.body = { ok: true };
+  },
 };