Add dnd sort for list

2025-11-03 11:25:17 +00:00 · 2019-07-08 15:40:01 +02:00 · 2019-07-08 15:40:01 +02:00 · c088a96560
commit c088a96560
parent a481f3a059
9 changed files with 287 additions and 135 deletions
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/constants.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/constants.js
@ -1,3 +1,6 @@
-export const ON_CLICK_EDIT_FIELD = 'contentManager/SettingPage/ON_CLICK_EDIT_FIELD';
-export const ON_CLICK_EDIT_LIST_ITEM = 'contentManager/SettingPage/ON_CLICK_EDIT_LIST_ITEM';
-export const ON_CLICK_EDIT_RELATION = 'contentManager/SettingPage/ON_CLICK_EDIT_RELATION';
+export const ON_CLICK_EDIT_FIELD =
+  'contentManager/SettingPage/ON_CLICK_EDIT_FIELD';
+export const ON_CLICK_EDIT_LIST_ITEM =
+  'contentManager/SettingPage/ON_CLICK_EDIT_LIST_ITEM';
+export const ON_CLICK_EDIT_RELATION =
+  'contentManager/SettingPage/ON_CLICK_EDIT_RELATION';
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListField.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListField.js
@ -1,6 +1,7 @@
-import React, { memo, useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Field, Wrapper, InfoLabel } from './components';
+import { Field, InfoLabel } from './components';
+import { DragSource, DropTarget } from 'react-dnd';

 import GrabIcon from '../../assets/images/icon_grab.svg';
 import GrabIconBlue from '../../assets/images/icon_grab_blue.svg';
@ -8,21 +9,41 @@ import ClickOverHint from '../../components/ClickOverHint';
 import RemoveIcon from '../../components/DraggedRemovedIcon';
 import EditIcon from '../../components/VariableEditIcon';

-function ListField({ index, isSelected, label, name, onClick, onRemove }) {
+import ItemTypes from './itemsTypes';
+
+function ListField({
+  index,
+  isDragging,
+  isSelected,
+  label,
+  name,
+  onClick,
+  onRemove,
+  connectDragSource,
+  connectDropTarget,
+}) {
+  const opacity = isDragging ? 0.2 : 1;
+
+  const ref = useRef(null);
  const [isOver, setIsOver] = useState(false);
  const showLabel =
    (!isOver || isSelected) && label.toLowerCase() !== name.toLowerCase();

+  connectDragSource(ref);
+  connectDropTarget(ref);
+
  return (
-    <Wrapper
-      onMouseEnter={() => setIsOver(true)}
-      onMouseLeave={() => setIsOver(false)}
-      onClick={() => {
-        onClick(index);
-      }}
-    >
-      <div>{index + 1}.</div>
-      <Field isSelected={isSelected}>
+    <>
+      <Field
+        onMouseEnter={() => setIsOver(true)}
+        onMouseLeave={() => setIsOver(false)}
+        onClick={() => {
+          onClick(index);
+        }}
+        ref={ref}
+        isSelected={isSelected}
+        style={{ opacity }}
+      >
        <img src={isSelected ? GrabIconBlue : GrabIcon} />
        <span>{name}</span>
        <ClickOverHint show={isOver && !isSelected} />
@ -39,23 +60,70 @@ function ListField({ index, isSelected, label, name, onClick, onRemove }) {
          />
        )}
      </Field>
-    </Wrapper>
+    </>
  );
 }

 ListField.defaultProps = {
  label: '',
+  move: () => {},
  onClick: () => {},
  onRemove: () => {},
 };

 ListField.propTypes = {
+  connectDragSource: PropTypes.func.isRequired,
+  connectDropTarget: PropTypes.func.isRequired,
  index: PropTypes.number.isRequired,
+  isDragging: PropTypes.bool.isRequired,
  isSelected: PropTypes.bool.isRequired,
  label: PropTypes.string,
+  move: PropTypes.func,
  name: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  onRemove: PropTypes.func,
 };

-export default memo(ListField);
+export default DropTarget(
+  ItemTypes.FIELD,
+  {
+    canDrop: () => false,
+    hover(props, monitor) {
+      const { id: draggedId } = monitor.getItem();
+      const { name: overId } = props;
+
+      if (draggedId !== overId) {
+        const { index: overIndex } = props.findField(overId);
+        props.move(draggedId, overIndex);
+      }
+    },
+  },
+  connect => ({
+    connectDropTarget: connect.dropTarget(),
+  })
+)(
+  DragSource(
+    ItemTypes.FIELD,
+    {
+      beginDrag: props => {
+        return {
+          id: props.name,
+          originalIndex: props.findField(props.name).index,
+        };
+      },
+
+      endDrag(props, monitor) {
+        const { id: droppedId, originalIndex } = monitor.getItem();
+        const didDrop = monitor.didDrop();
+
+        if (!didDrop) {
+          props.move(droppedId, originalIndex);
+        }
+      },
+    },
+    (connect, monitor) => ({
+      connectDragSource: connect.dragSource(),
+      isDragging: monitor.isDragging(),
+    })
+  )(ListField)
+);
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js
@ -1,26 +1,32 @@
-import React from 'react';
+import React, { Fragment, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
+import { DropTarget } from 'react-dnd';

 import { InputsIndex as Input } from 'strapi-helper-plugin';

 import pluginId from '../../pluginId';

 import FormWrapper from '../../components/SettingFormWrapper';
-
+import { Wrapper } from './components';
 import Add from './Add';
 import ListField from './ListField';

+import ItemTypes from './itemsTypes';
+
 function ListLayout({
  addField,
  availableData,
+  connectDropTarget,
  displayedData,
  fieldToEditIndex,
  modifiedData,
+  moveListField,
  onChange,
  onClick,
  onRemove,
 }) {
+  const ref = useRef(null);
  const handleRemove = index => {
    if (displayedData.length > 1) {
      onRemove(index);
@ -29,6 +35,7 @@ function ListLayout({

    strapi.notification.info(`${pluginId}.notification.info.minimumFields`);
  };
+
  const fieldName = displayedData[fieldToEditIndex];
  const fieldPath = ['metadata', fieldName, 'list'];

@ -56,19 +63,54 @@ function ListLayout({
      validations: {},
    },
  ];
+
+  const findField = useCallback(
+    id => {
+      const field = displayedData.filter(current => current === id)[0];
+
+      return {
+        field,
+        index: displayedData.indexOf(field),
+      };
+    },
+    [displayedData]
+  );
+
+  const move = useCallback(
+    (id, atIndex) => {
+      const { index } = findField(id);
+
+      moveListField(index, atIndex);
+    },
+    [displayedData]
+  );
+
+  connectDropTarget(ref);
+
  return (
    <>
-      <div className="col-lg-5 col-md-12">
+      <div className="col-lg-5 col-md-12" ref={ref}>
        {displayedData.map((data, index) => (
-          <ListField
-            key={data}
-            index={index}
-            isSelected={fieldToEditIndex === index}
-            name={data}
-            label={get(modifiedData, ['metadata', data, 'list', 'label'], '')}
-            onClick={onClick}
-            onRemove={handleRemove}
-          />
+          <Fragment key={data}>
+            <Wrapper style={{ display: 'flex' }}>
+              <div>{index + 1}.</div>
+              <ListField
+                findField={findField}
+                index={index}
+                isSelected={fieldToEditIndex === index}
+                move={move}
+                name={data}
+                label={get(
+                  modifiedData,
+                  ['metadata', data, 'list', 'label'],
+                  ''
+                )}
+                onClick={onClick}
+                onRemove={handleRemove}
+              />
+            </Wrapper>
+            <div style={{ marginBottom: '6px' }}></div>
+          </Fragment>
        ))}
        <Add data={availableData} onClick={addField} />
      </div>
@ -104,12 +146,16 @@ ListLayout.defaultProps = {
 ListLayout.propTypes = {
  addField: PropTypes.func,
  availableData: PropTypes.array,
+  connectDropTarget: PropTypes.func.isRequired,
  displayedData: PropTypes.array,
  fieldToEditIndex: PropTypes.number,
  modifiedData: PropTypes.object,
+  moveListField: PropTypes.func.isRequired,
  onChange: PropTypes.func,
  onClick: PropTypes.func,
  onRemove: PropTypes.func,
 };

-export default ListLayout;
+export default DropTarget(ItemTypes.FIELD, {}, connect => ({
+  connectDropTarget: connect.dropTarget(),
+}))(ListLayout);
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js
@ -2,6 +2,7 @@ import {
  ADD_FIELD_TO_LIST,
  GET_DATA,
  GET_DATA_SUCCEEDED,
+  MOVE_FIELD_LIST,
  ON_CHANGE,
  ON_REMOVE_LIST_FIELD,
  ON_RESET,
@ -32,6 +33,14 @@ export function getDataSucceeded(layout) {
  };
 }

+export function moveListField(dragIndex, overIndex) {
+  return {
+    type: MOVE_FIELD_LIST,
+    dragIndex,
+    overIndex,
+  };
+}
+
 export function onChange({ target: { name, value } }) {
  return {
    type: ON_CHANGE,
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/components.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/components.js
@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';

 const Wrapper = styled.div`
  display: flex;
+  width: 100%;
  > div:first-child {
    height: 30px;
    width: 20px;
@ -9,13 +10,15 @@ const Wrapper = styled.div`
    text-align: right;
    line-height: 30px;
  }
+  > div:last-child {
+    flex-grow: 2;
+  }
 `;

 const Field = styled.div`
  position: relative;
  height: 30px;
  width: 100%;
-  margin-bottom: 6px;
  padding-left: 10px;
  justify-content: space-between;
  background: #fafafb;
@ -49,7 +52,7 @@ const InfoLabel = styled.div`
  position: absolute;
  top: 0;
  right: 40px;
-  color: #858b9a;
+  // color: #858b9a;
  font-weight: 400;
  color: #007eff;
 `;
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/constants.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/constants.js
@ -3,6 +3,8 @@ export const ADD_FIELD_TO_LIST =
 export const GET_DATA = 'ContentManager/SettingViewModel/GET_DATA';
 export const GET_DATA_SUCCEEDED =
  'ContentManager/SettingViewModel/GET_DATA_SUCCEEDED';
+export const MOVE_FIELD_LIST =
+  'ContentManager/SettingViewModel/MOVE_FIELD_LIST';
 export const ON_CHANGE = 'ContentManager/SettingViewModel/ON_CHANGE';
 export const ON_REMOVE_LIST_FIELD =
  'ContentManager/SettingViewModel/ON_REMOVE_LIST_FIELD';
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js
@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import { get, isEqual, isEmpty, upperFirst } from 'lodash';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';

 import {
  BackHeader,
@ -26,6 +28,7 @@ import Separator from './Separator';
 import {
  addFieldToList,
  getData,
+  moveListField,
  onChange,
  onReset,
  onSubmit,
@ -54,6 +57,7 @@ function SettingViewModel({
    params: { name, settingType },
  },
  modifiedData,
+  moveListField,
  onChange,
  onRemoveListField,
  onReset,
@ -131,113 +135,118 @@ function SettingViewModel({

  return (
    <>
-      <BackHeader onClick={() => goBack()} />
-      <Container className="container-fluid">
-        <PluginHeader
-          actions={getPluginHeaderActions()}
-          title={{
-            id: `${pluginId}.containers.SettingViewModel.pluginHeader.title`,
-            values: { name: upperFirst(name) },
-          }}
-          description={{
-            id:
-              'content-manager.containers.SettingPage.pluginHeaderDescription',
-          }}
-        />
-        <HeaderNav
-          links={[
-            {
-              name: 'content-manager.containers.SettingPage.listSettings.title',
-              to: getUrl(name, 'list-settings'),
-            },
-            {
-              name: 'content-manager.containers.SettingPage.editSettings.title',
-              to: getUrl(name, 'edit-settings'),
-            },
-          ]}
-        />
-        <div className="row">
-          <Block
-            style={{
-              marginBottom: '13px',
-              paddingBottom: '30px',
-              paddingTop: '30px',
+      <DndProvider backend={HTML5Backend}>
+        <BackHeader onClick={() => goBack()} />
+        <Container className="container-fluid">
+          <PluginHeader
+            actions={getPluginHeaderActions()}
+            title={{
+              id: `${pluginId}.containers.SettingViewModel.pluginHeader.title`,
+              values: { name: upperFirst(name) },
            }}
-          >
-            <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 className="col-12">
-                <Separator />
+            description={{
+              id:
+                'content-manager.containers.SettingPage.pluginHeaderDescription',
+            }}
+          />
+          <HeaderNav
+            links={[
+              {
+                name:
+                  'content-manager.containers.SettingPage.listSettings.title',
+                to: getUrl(name, 'list-settings'),
+              },
+              {
+                name:
+                  'content-manager.containers.SettingPage.editSettings.title',
+                to: getUrl(name, 'edit-settings'),
+              },
+            ]}
+          />
+          <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 className="col-12">
+                  <Separator />
+                </div>
              </div>
-            </div>
-            <SectionTitle />
+              <SectionTitle />

-            <div className="row">
-              <LayoutTitle className="col-12">
-                <FormTitle
-                  title={`${pluginId}.global.displayedFields`}
-                  description={`${pluginId}.containers.SettingPage.${
-                    settingType === 'list-settings'
-                      ? 'attributes'
-                      : 'editSettings'
-                  }.description`}
-                />
-              </LayoutTitle>
+              <div className="row">
+                <LayoutTitle className="col-12">
+                  <FormTitle
+                    title={`${pluginId}.global.displayedFields`}
+                    description={`${pluginId}.containers.SettingPage.${
+                      settingType === 'list-settings'
+                        ? 'attributes'
+                        : 'editSettings'
+                    }.description`}
+                  />
+                </LayoutTitle>

-              {settingType === 'list-settings' && (
-                <ListLayout
-                  addField={addFieldToList}
-                  displayedData={getListDisplayedFields()}
-                  availableData={getListRemainingFields()}
-                  fieldToEditIndex={listFieldToEditIndex}
-                  modifiedData={modifiedData}
-                  onClick={setListFieldToEditIndex}
-                  onChange={onChange}
-                  onRemove={onRemoveListField}
-                />
-              )}
-            </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)}
-      />
+                {settingType === 'list-settings' && (
+                  <ListLayout
+                    addField={addFieldToList}
+                    displayedData={getListDisplayedFields()}
+                    availableData={getListRemainingFields()}
+                    fieldToEditIndex={listFieldToEditIndex}
+                    modifiedData={modifiedData}
+                    moveListField={moveListField}
+                    onClick={setListFieldToEditIndex}
+                    onChange={onChange}
+                    onRemove={onRemoveListField}
+                  />
+                )}
+              </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)}
+        />
+      </DndProvider>
    </>
  );
 }
@ -260,6 +269,7 @@ SettingViewModel.propTypes = {
  }).isRequired,

  modifiedData: PropTypes.object.isRequired,
+  moveListField: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired,
  onRemoveListField: PropTypes.func.isRequired,
  onReset: PropTypes.func.isRequired,
@ -276,6 +286,7 @@ export function mapDispatchToProps(dispatch) {
    {
      addFieldToList,
      getData,
+      moveListField,
      onChange,
      onRemoveListField,
      onReset,
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/itemsTypes.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/itemsTypes.js
@ -0,0 +1,3 @@
+export default {
+  FIELD: 'field',
+};
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js
@ -7,6 +7,7 @@ import { fromJS } from 'immutable';
 import {
  ADD_FIELD_TO_LIST,
  GET_DATA_SUCCEEDED,
+  MOVE_FIELD_LIST,
  ON_CHANGE,
  ON_REMOVE_LIST_FIELD,
  ON_RESET,
@ -34,6 +35,12 @@ function settingViewModelReducer(state = initialState, action) {
        .update('initialData', () => fromJS(action.layout))
        .update('isLoading', () => false)
        .update('modifiedData', () => fromJS(action.layout));
+    case MOVE_FIELD_LIST:
+      return state.updateIn(['modifiedData', 'layouts', 'list'], list => {
+        return list
+          .delete(action.dragIndex)
+          .insert(action.overIndex, list.get(action.dragIndex));
+      });
    case ON_CHANGE:
      return state.updateIn(action.keys, () => action.value);
    case ON_REMOVE_LIST_FIELD: {