Complete Initial Import View

admin/src/components/DataMapper/index.js

@@ -1,5 +1,6 @@
 import React, { useState, useMemo, memo } from "react";
 import PropTypes from "prop-types";
+import { Prompt } from "react-router-dom";
 
 import { Row } from "../common";
 import { TableWrapper } from "./styles";
@@ -8,6 +9,17 @@ import { Button } from "@buffetjs/core";
 import DataHeader from "./DataHeader";
 import DataBody from "./DataBody";
 
+// FORMATS
+import {
+  Bool as BoolIcon,
+  Json as JsonIcon,
+  Text as TextIcon,
+  NumberIcon,
+  Email as EmailIcon,
+  Calendar as DateIcon,
+  RichText as RichTextIcon,
+} from "@buffetjs/icons";
+
 const filterIgnoreFields = (fieldName) =>
   ![
     "id",
@@ -25,10 +37,20 @@ function DataMapper({ data, mapper, onSuccess, onCancel }) {
   const { fieldsInfo, parsedData } = data;
   const { uid, attributes } = mapper;
 
+  const filteredAttributes = useMemo(
+    () =>
+      Object.keys(attributes)
+        .filter(filterIgnoreFields)
+        .filter((field) => filterIgnoreTypes(attributes[field].type)),
+    [attributes]
+  );
+
   // Manipulation over maping columns
   const [mappedFields, setMappedFields] = useState(
     fieldsInfo.reduce((mappedFields, { fieldName }) => {
-      mappedFields[fieldName] = attributes[fieldName] ? fieldName : "none";
+      mappedFields[fieldName] = filteredAttributes.includes(fieldName)
+        ? fieldName
+        : "none";
       return mappedFields;
     }, {})
   );
@@ -37,18 +59,8 @@ function DataMapper({ data, mapper, onSuccess, onCancel }) {
     setMappedFields({ ...mappedFields, [source]: value });
   };
 
-  const destinationOptions = useMemo(
-    () =>
-      [{ label: "None", value: "none" }].concat(
-        Object.keys(attributes)
-          .filter(filterIgnoreFields)
-          .filter((field) => filterIgnoreTypes(attributes[field].type))
-          .map((field) => ({
-            label: field,
-            value: field,
-          }))
-      ),
-    [attributes]
+  const destinationOptions = [{ label: "None", value: "none" }].concat(
+    filteredAttributes.map((field) => ({ label: field, value: field }))
   );
 
   // Manipulation over Rows
@@ -62,10 +74,11 @@ function DataMapper({ data, mapper, onSuccess, onCancel }) {
 
   // UploadData
   const handleUploadItems = () =>
-    onSuccess({ uid, fields: mappedFields, importItems });
+    onSuccess({ target: uid, fields: mappedFields, items: importItems });
 
   return (
     <div className="pt-3 col-12">
+      <Prompt message="import.mapper.unsaved" />
       <Row>
         <h2>Map the Import Data to Destination Field</h2>
         <TableWrapper>

admin/src/components/DataMapper/styles.js

@@ -13,15 +13,11 @@ const TableWrapper = styled.div`
     width: 100%;
     text-align: center;
 
-    th,
-    td {
-      padding: 15px;
-    }
-
     th {
       min-width: 15ch;
       background-color: #f3f3f4;
       font-weight: bold;
+      padding: 10px;
     }
 
     th:last-child {
@@ -61,6 +57,7 @@ const TableWrapper = styled.div`
       }
 
       td {
+        padding: 15px;
         cursor: auto;
         max-width: 15ch;
         white-space: nowrap;

admin/src/containers/ExportPage/index.js

@@ -15,7 +15,7 @@ function ImportPage({ contentTypes }) {
       description="Configure the Import Source & Destination"
       style={{ marginBottom: 12 }}
     >
-      <h1>Happy Coding</h1>
+      <h1>Work in Progress</h1>
     </Block>
   );
 }

admin/src/containers/ImportPage/index.js

@@ -84,19 +84,37 @@ function ImportPage({ contentTypes }) {
   };
 
   // Upload Data
-  const uploadData = ({ uid, fields, importItems }) => {
+  const uploadData = async ({ target, fields, items }) => {
+    // Finish with the import
+    endImport();
+
     // Prevent Upload Empty Data;
-    if (importItems.length === 0) {
+    if (items.length === 0) {
       strapi.notification.toggle({
         type: "warning",
         message: "import.items.empty",
       });
     }
 
-    console.log(uid, fields, importItems);
+    try {
+      // Send Request
+      const response = await request(`/${pluginId}/import`, {
+        method: "POST",
+        body: { target, fields, items },
+      });
 
-    // Finish with the import
-    endImport();
+      console.log(response);
+
+      strapi.notification.toggle({
+        type: "success",
+        message: `import.items.succesfully`,
+      });
+    } catch (error) {
+      strapi.notification.toggle({
+        type: "warning",
+        message: `import.items.error`,
+      });
+    }
   };
 
   // Reset analysis and mapper

admin/src/translations/en.json

@@ -1,4 +1,12 @@
 {
-  "import.file.type.error": "File Type is not accepted",
+  "import.mapper.unsaved": "",
+  "import.destination.empty": "",
+  "import.analyze.success": "",
+  "import.analyze.error": "",
+  "import.items.empty": "",
+  "import.items.succesfully": "",
+  "import.items.error": "",
+  "import.file.content.error": "",
+  "import.file.type.error": "",
   "plugin.name": "Import / Export Content"
 }

admin/src/translations/es.json

@@ -1,6 +1,12 @@
 {
-  "import.file.type.error": "El tipo de archivo no es valido",
-  "import.page.title": "Importar Datos",
-  "import.analyze.success": "Import Analyze Success (es)",
+  "import.mapper.unsaved": "",
+  "import.destination.empty": "",
+  "import.analyze.success": "",
+  "import.analyze.error": "",
+  "import.items.empty": "",
+  "import.items.succesfully": "",
+  "import.items.error": "",
+  "import.file.content.error": "",
+  "import.file.type.error": "",
   "plugin.name": "Importar / Exportar Contenido"
 }

config/routes.json

@@ -19,7 +19,7 @@
     {
       "method": "POST",
       "path": "/import",
-      "handler": "import-export-content.importContent",
+      "handler": "import-export-content.importItems",
       "config": {
         "policies": []
       }

controllers/import-export-content.js

@@ -39,12 +39,12 @@ module.exports = {
     }
   },
 
-  importContent: async (ctx) => {
+  importItems: async (ctx) => {
     // const { user } = ctx.state;
 
     const data = ctx.request.body;
-    const { targetModel, source, kind } = data;
-    if (!targetModel || !source || !kind) {
+    const { target, fields, items } = data;
+    if (!target || !fields || !items) {
       return ctx.throw(400, "Required parameters missing");
     }