Automatically fill columns

admin/src/components/HistoryTable/index.js

@@ -1,8 +1,8 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { Table, Button } from "@buffetjs/core";
-import moment from "moment";
-import { LoadingIndicator, PopUpWarning } from "strapi-helper-plugin";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Table, Button } from '@buffetjs/core';
+import moment from 'moment';
+import { LoadingIndicator, PopUpWarning } from 'strapi-helper-plugin';
 
 class HistoryTable extends Component {
   state = {
@@ -25,35 +25,35 @@ class HistoryTable extends Component {
     const updatedAt = moment(updated_at);
     let source;
     switch (row.source) {
-      case "upload":
+      case 'upload':
         source = row.options.filename;
         break;
-      case "url":
+      case 'url':
         source = row.options.url;
         break;
       default:
-        source = "unknown";
+        source = 'unknown';
     }
     return (
       <tr style={{ paddingTop: 18 }}>
         <td>{source}</td>
         <td>{contentType}</td>
-        <td>{updatedAt.format("LLL")}</td>
+        <td>{updatedAt.format('LLL')}</td>
         <td>{importedCount}</td>
         <td>{ongoing ? <LoadingIndicator /> : <span>Ready</span>} </td>
         <td>
-          <div className={"row"}>
+          <div className={'row'}>
             <div
               style={{
                 marginRight: 18,
                 marginLeft: 18
               }}
               onClick={() => this.undoImport(id)}
             >
-              <i className={"fa fa-undo"} role={"button"} />
+              <i className={'fa fa-undo'} role={'button'} />
             </div>
             <div onClick={() => this.deleteImport(id)}>
-              <i className={"fa fa-trash"} role={"button"} />
+              <i className={'fa fa-trash'} role={'button'} />
             </div>
           </div>
         </td>
@@ -64,16 +64,16 @@ class HistoryTable extends Component {
   render() {
     const { configs } = this.props;
     const props = {
-      title: "Import History",
-      subtitle: "Manage the Initiated Imports"
+      title: 'Import History',
+      subtitle: 'Manage the Initiated Imports'
     };
     const headers = [
-      { name: "Source", value: "source" },
-      { name: "Content Type", value: "contentType" },
-      { name: "Updated At", value: "updatedAt" },
-      { name: "Items", value: "items" },
-      { name: "Progress State", value: "progress" },
-      { name: "Actions", value: "actions" }
+      { name: 'Source', value: 'source' },
+      { name: 'Content Type', value: 'contentType' },
+      { name: 'Updated At', value: 'updatedAt' },
+      { name: 'Items', value: 'items' },
+      { name: 'Progress State', value: 'progress' },
+      { name: 'Actions', value: 'actions' }
     ];
     const items = [...configs];
     const {
@@ -83,13 +83,13 @@ class HistoryTable extends Component {
       showUndoModal
     } = this.state;
     return (
-      <div className={"col-md-12"} style={{ paddingTop: 12 }}>
+      <div className={'col-md-12'} style={{ paddingTop: 12 }}>
         <PopUpWarning
           isOpen={showDeleteModal}
           toggleModal={() => this.setState({ showDeleteModal: null })}
           content={{
-            title: `Please confirm`,
-            message: `Are you sure you want to delete this entry?`
+            title: 'Please confirm',
+            message: 'Are you sure you want to delete this entry?'
           }}
           popUpWarningType="danger"
           onConfirm={async () => {
@@ -100,8 +100,8 @@ class HistoryTable extends Component {
           isOpen={showUndoModal}
           toggleModal={() => this.setState({ showUndoModal: null })}
           content={{
-            title: `Please confirm`,
-            message: `Are you sure you want to undo this entry?`
+            title: 'Please confirm',
+            message: 'Are you sure you want to undo this entry?'
           }}
           popUpWarningType="danger"
           onConfirm={async () => {

admin/src/components/Label/index.js

@@ -1,4 +1,4 @@
-import styled, { css, keyframes } from "styled-components";
+import styled, { css, keyframes } from 'styled-components';
 
 const Label = styled.label`
   position: relative;
@@ -16,7 +16,7 @@ const Label = styled.label`
   .icon {
     width: 82px;
     path {
-      fill: ${({ showLoader }) => (showLoader ? "#729BEF" : "#ccd0da")};
+      fill: ${({ showLoader }) => (showLoader ? '#729BEF' : '#ccd0da')};
       transition: fill 0.3s ease;
     }
   }
@@ -42,22 +42,22 @@ const Label = styled.label`
 
 
   ${({ isDragging }) => {
-  if (isDragging) {
-    return css`
+    if (isDragging) {
+      return css`
         background-color: rgba(28, 93, 231, 0.01) !important;
         border: 2px dashed rgba(28, 93, 231, 0.1) !important;
       `;
     }
   }}
 
   ${({ showLoader }) => {
-  if (showLoader) {
-    return css`
-        animation: ${smoothBlink("transparent", "rgba(28,93,231,0.05)")} 2s
+    if (showLoader) {
+      return css`
+        animation: ${smoothBlink('transparent', 'rgba(28,93,231,0.05)')} 2s
           linear infinite;
       `;
-  }
-}}
+    }
+  }}
 `;
 
 const smoothBlink = (firstColor, secondColor) => keyframes`

admin/src/components/MappingTable/CollectionFieldSelect.js

@@ -1,40 +1,54 @@
-import React, { Component } from "react";
-import { Select } from "@buffetjs/core";
+import React, { Component } from 'react';
+import { Select } from '@buffetjs/core';
+import {NONE} from '../../utils/constants';
 
 class CollectionFieldSelect extends Component {
 
   state = {
-    selectedTarget: ""
+    selectedTarget: ''
   };
 
   componentDidMount() {
-    const options = this.fillOptions();
-    this.setState({ selectedTarget: options && options[0] });
+    this.setDefaultOption(this.getDefaultSelectionBasedOnName());
   }
 
   onChange(selectedTarget) {
     this.props.onChange(selectedTarget);
     this.setState({ selectedTarget });
   }
 
+  getDefaultSelectionBasedOnName() {
+    const {fieldName, model, mapping} = this.props;
+    if(mapping[fieldName].destination !== 'none'){
+      let target = model.schema.attributes[fieldName];
+      return target ? target.target: null;
+    }
+    return null;
+  }
 
   fillOptions() {
     const { models } = this.props;
-
     const options = models
       .map(element => {
-        const collectionName = element.apiID
+        const collectionName = element.apiID;
         return { label: collectionName, value: collectionName };
-      })
-
+      });
+    return [NONE, ...options];
+  }
 
-    return [{ label: "None", value: "none" }, ...options];
+  setDefaultOption(target) {
+    if (target) {
+      const targetId = target.split('.')[1];
+      this.onChange(targetId);
+      this.setState({selectedTarget: targetId});
+    }
   }
+
   render() {
 
     return (
       <Select
-        name={"targetCollectionField"}
+        name={'targetCollectionField'}
         value={this.state.selectedTarget}
         options={this.fillOptions()}
         onChange={({ target: { value } }) => this.onChange(value)}

admin/src/components/MappingTable/MappingOptions.js

@@ -1,42 +1,48 @@
-import React from "react";
-import TargetFieldSelect from "./TargetFieldSelect";
-import {Label} from "@buffetjs/core";
-import {IMPORT_STATE, MATCH_ON_KEY} from "../../utils/constants";
+import React, { useEffect } from 'react';
+import {Label} from '@buffetjs/core';
+import {IMPORT_STATE, MATCH_ON_KEY, REL_COL_ID} from '../../utils/constants';
 
 const MappingOptions = ({stat, onChange, targetModel, importState}) => {
+  const matchOnChecked = stat.fieldName === REL_COL_ID ? 'checked' : null;
+  useEffect(() => {
+    if(matchOnChecked){
+      onChange({[MATCH_ON_KEY]: true});
+    }
+  }, [stat]);
   return importState === IMPORT_STATE.content ? (
-      <div>
-        {stat.format === "xml" && (
-          <div>
-            <Label htmlFor={"stripCheckbox"} message={"Strip Tags"}/>
-            <input
-              name={"stripCheckbox"}
-              type="checkbox"
-              onChange={e => onChange({stripTags: e.target.checked})}
-            />
-          </div>
-        )}
+    <div>
+      {stat.format === 'xml' && (
+        <div>
+          <Label htmlFor={'stripCheckbox'} message={'Strip Tags'}/>
+          <input
+            name={'stripCheckbox'}
+            type="checkbox"
+            onChange={e => onChange({stripTags: e.target.checked})}
+          />
+        </div>
+      )}
 
-        {stat.hasMediaUrls && (
-          <div>
-            <Label htmlFor={"mediaTargetSelect"} message={"Import as Media"} />
-            <input
-              name={"mediaTargetSelect"}
-              type="checkbox"
-              onChange={e => onChange({ importMediaToField: e.target.checked })}
-            />
-          </div>
-        )}
-      </div>
-    ) :
+      {stat.hasMediaUrls && (
+        <div>
+          <Label htmlFor={'mediaTargetSelect'} message={'Import as Media'} />
+          <input
+            name={'mediaTargetSelect'}
+            type="checkbox"
+            onChange={e => onChange({ importMediaToField: e.target.checked })}
+          />
+        </div>
+      )}
+    </div>
+  ) :
     <div>
-      <Label htmlFor={"MatchOnIDRadio"} message={"Match on"}/>
+      <Label htmlFor={'MatchOnIDRadio'} message={'Match on'}/>
       <input
-        name={"MatchOnIDRadio"}
+        name={'MatchOnIDRadio'}
         type="radio"
         onChange={e => onChange({[MATCH_ON_KEY]: e.target.checked})}
+        checked={matchOnChecked}
       />
-    </div>
+    </div>;
 
 };
 

admin/src/components/MappingTable/RowAux.js

@@ -1,8 +1,8 @@
-import MappingOptions from "./MappingOptions";
-import TargetFieldSelect from "./TargetFieldSelect";
-import CollectionFieldSelect from "./CollectionFieldSelect";
-import {ID_MAPPING} from "../../utils/constants";
-import React from "react";
+import MappingOptions from './MappingOptions';
+import TargetFieldSelect from './TargetFieldSelect';
+import CollectionFieldSelect from './CollectionFieldSelect';
+import {ID_MAPPING} from '../../utils/constants';
+import React from 'react';
 
 export const ContentCustomRow = ({ row }) => {
 
@@ -15,13 +15,13 @@ export const ContentCustomRow = ({ row }) => {
         <p>{count}</p>
       </td>
       <td>
-        {format === "string" && <TextIcon fill="#fdd835" />}
-        {format === "number" && <NumberIcon fill="#fdd835" />}
-        {format === "boolean" && <BoolIcon fill="#fdd835" />}
-        {format === "object" && <JsonIcon fill="#fdd835" />}
-        {format === "email" && <EmailIcon fill="#fdd835" />}
-        {format === "date" && <DateIcon fill="#fdd835" />}
-        {format === "xml" && <XmlIcon fill="#fdd835" />}
+        {format === 'string' && <TextIcon fill="#fdd835" />}
+        {format === 'number' && <NumberIcon fill="#fdd835" />}
+        {format === 'boolean' && <BoolIcon fill="#fdd835" />}
+        {format === 'object' && <JsonIcon fill="#fdd835" />}
+        {format === 'email' && <EmailIcon fill="#fdd835" />}
+        {format === 'date' && <DateIcon fill="#fdd835" />}
+        {format === 'xml' && <XmlIcon fill="#fdd835" />}
         <p>{format}</p>
       </td>
       <td>