Merge branch 'ctm/repeatable-list-view' of github.com:strapi/strapi into ctm/repeatable-list-view

jest.config.front.js

@@ -43,6 +43,8 @@ module.exports = {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/fileTransformer.js',
   },
-  transformIgnorePatterns: ['node_modules/(?!(react-dnd|dnd-core|react-dnd-html5-backend)/)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(react-dnd|dnd-core|react-dnd-html5-backend)/)',
+  ],
   testURL: 'http://localhost:4000/admin',
 };

packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListField.js

@@ -1,6 +1,5 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Field, InfoLabel } from './components';
 import { DragSource, DropTarget } from 'react-dnd';
 
 import GrabIcon from '../../assets/images/icon_grab.svg';
@@ -8,6 +7,7 @@ import GrabIconBlue from '../../assets/images/icon_grab_blue.svg';
 import ClickOverHint from '../../components/ClickOverHint';
 import RemoveIcon from '../../components/DraggedRemovedIcon';
 import EditIcon from '../../components/VariableEditIcon';
+import { Field, InfoLabel } from './components';
 
 import ItemTypes from './itemsTypes';
 
@@ -33,34 +33,32 @@ function ListField({
   connectDropTarget(ref);
 
   return (
-    <>
-      <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} />
-        {showLabel && <InfoLabel>{label}</InfoLabel>}
-        {isSelected && !isOver ? (
-          <EditIcon />
-        ) : (
-          <RemoveIcon
-            isDragging={isSelected && isOver}
-            onRemove={e => {
-              e.stopPropagation();
-              onRemove(index);
-            }}
-          />
-        )}
-      </Field>
-    </>
+    <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} />
+      {showLabel && <InfoLabel>{label}</InfoLabel>}
+      {isSelected && !isOver ? (
+        <EditIcon />
+      ) : (
+        <RemoveIcon
+          isDragging={isSelected && isOver}
+          onRemove={e => {
+            e.stopPropagation();
+            onRemove(index);
+          }}
+        />
+      )}
+    </Field>
   );
 }
 

packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js

@@ -93,7 +93,7 @@ function ListLayout({
       <div className="col-lg-5 col-md-12" ref={ref}>
         {displayedData.map((data, index) => (
           <Fragment key={data}>
-            <Wrapper style={{ display: 'flex' }}>
+            <Wrapper>
               <div>{index + 1}.</div>
               <ListField
                 findField={findField}

packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/components.js

@@ -52,7 +52,7 @@ const InfoLabel = styled.div`
   position: absolute;
   top: 0;
   right: 40px;
-  // color: #858b9a;
+
   font-weight: 400;
   color: #007eff;
 `;

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

@@ -134,124 +134,119 @@ function SettingViewModel({
   };
 
   return (
-    <>
-      <DndProvider backend={HTML5Backend}>
-        <BackHeader onClick={() => goBack()} />
-        <Container className="container-fluid">
-          <PluginHeader
-            actions={getPluginHeaderActions()}
-            title={{
-              id: `${pluginId}.containers.SettingViewModel.pluginHeader.title`,
-              values: { name: upperFirst(name) },
+    <DndProvider backend={HTML5Backend}>
+      <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',
             }}
-            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>
-              <SectionTitle />
-
-              <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}
-                    moveListField={moveListField}
-                    onClick={setListFieldToEditIndex}
+          >
+            <SectionTitle isSettings />
+            <div className="row">
+              {forms[settingType].map(input => {
+                return (
+                  <Input
+                    key={input.name}
+                    {...input}
                     onChange={onChange}
-                    onRemove={onRemoveListField}
+                    selectOptions={getSelectOptions(input)}
+                    value={get(modifiedData, input.name)}
                   />
-                )}
+                );
+              })}
+              <div className="col-12">
+                <Separator />
               </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>
-    </>
+            </div>
+            <SectionTitle />
+
+            <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}
+                  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>
   );
 }
 
-SettingViewModel.defaultProps = {};
 SettingViewModel.propTypes = {
   addFieldToList: PropTypes.func.isRequired,
   emitEvent: PropTypes.func.isRequired,

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

@@ -36,11 +36,15 @@ function settingViewModelReducer(state = initialState, action) {
         .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));
-      });
+      return state
+        .updateIn(['modifiedData', 'layouts', 'list'], list => {
+          return list
+            .delete(action.dragIndex)
+            .insert(action.overIndex, list.get(action.dragIndex));
+        })
+        .update('listFieldToEditIndex', () => {
+          return action.overIndex;
+        });
     case ON_CHANGE:
       return state.updateIn(action.keys, () => action.value);
     case ON_REMOVE_LIST_FIELD: {

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

@@ -126,5 +126,5 @@
   "popUpWarning.warning.updateAllSettings": "Cela modifiera tous vos précédents paramètres.",
   "success.record.delete": "Supprimé",
   "success.record.save": "Sauvegardé",
-  "notification.info.minimumFields": "Vous devez avoir au moins un champs d'affiché"
+  "notification.info.minimumFields": "Vous devez avoir au moins un champ d'affiché"
 }