BOM import

.gitignore

@@ -539,3 +539,9 @@ $RECYCLE.BIN/
 Binner/BinnerInstaller/BinnerSetup.exe
 Binner/Binner.Web/ClientApp/.vscode/settings.json
 *.bak
+
+# Slickedit
+*.vpj
+*.vtg
+*.vpw
+*.vpwhist

Binner/Binner.Web/ClientApp/public/locales/de/translation.json

@@ -99,6 +99,11 @@
     "boms": {
       "header": {
         "description": "Die Stückliste ermöglicht es Ihnen, den Lagerbestand pro Projekt zu verwalten. Sie können die Mengen für jede hergestellte Leiterplatte reduzieren, und überprüfen welche Teile Sie in höherer Stückzahl kaufen müssen um die Kosten zu analysieren.<br/><br/>Wählen Sie das Projekt aus, für das Sie die Stückliste (BOM) verwalten möchten, oder erstellen Sie ein neues Projekt.<br/>" 
+      },
+      "acceptedFileTypes": "Accepted file types: \"*.xls, *.xlsx, *.csv\""
+      "import": {
+          "success": "BOM Imported!",
+          "failure": "Failed to import BOM!"
       }
     },
     "partTypes": {
@@ -636,6 +641,7 @@
   },
   "button": {
     "addBomProject": "Stücklistenprojekt hinzufügen",
+    "importBomProject": "Import BOM Project",
     "addPart": "Bauteil hinzufügen",
     "save": "Speichern",
     "download": "Download",

Binner/Binner.Web/ClientApp/public/locales/en/translation.json

@@ -98,6 +98,11 @@
     "boms": {
       "header": {
         "description": "Bill of Materials, or BOM allows you to manage inventory quantities per project. You can reduce quantities for each PCB you produce, check which parts you need to buy more of and analyze costs.<br/><br/>Choose or create the project to manage BOM for.<br/>" 
+      },
+      "acceptedFileTypes": "Accepted file types: \"*.xls, *.xlsx, *.csv\""
+      "import": {
+          "success": "BOM Imported!",
+          "failure": "Failed to import BOM!"
       }
     },
     "partTypes": {
@@ -638,6 +643,7 @@
   },
   "button": {
     "addBomProject": "Add BOM Project",
+    "importBomProject": "Import BOM Project",
     "addPart": "Add Part",
     "save": "Save",
     "download": "Download",

Binner/Binner.Web/ClientApp/public/locales/es/translation.json

@@ -89,6 +89,11 @@
     "boms": {
       "header": {
         "description": "Bill of Materials, or BOM allows you to manage inventory quantities per project. You can reduce quantities for each PCB you produce, check which parts you need to buy more of and analyze costs.<br/><br/>Choose or create the project to manage BOM for.<br/>" 
+      },
+      "acceptedFileTypes": "Accepted file types: \"*.xls, *.xlsx, *.csv\""
+      "import": {
+          "success": "BOM Imported!",
+          "failure": "Failed to import BOM!"
       }
     },
     "partTypes": {
@@ -457,6 +462,7 @@
   },
   "button": {
     "addBomProject": "Add BOM Project",
+    "importBomProject": "Import BOM Project",
     "addPart": "Add Part",
     "save": "Save",
     "download": "Download",

Binner/Binner.Web/ClientApp/public/locales/fr/translation.json

@@ -89,6 +89,11 @@
     "boms": {
       "header": {
         "description": "La nomenclature, ou BOM, vous permet de gérer les quantités d'inventaire par projet. Vous pouvez réduire les quantités pour chaque PCB que vous produisez, vérifier quelles pièces vous devez acheter en plus et analyser les coûts.<br/><br/>Choisissez ou créez le projet pour lequel vous souhaitez gérer la nomenclature.<br/>"
+      },
+      "acceptedFileTypes": "Accepted file types: \"*.xls, *.xlsx, *.csv\""
+      "import": {
+          "success": "BOM Imported!",
+          "failure": "Failed to import BOM!"
       }
     },
     "partTypes": {

Binner/Binner.Web/ClientApp/public/locales/it/translation.json

@@ -98,6 +98,11 @@
 		"boms": {
 			"header": {
 				"description": "La Distinta Base, (DBA), consente di gestire le quantità dei componenti per progetto. Si può ridurre le quantità di ogni PCB da produrre, verificare quali componenti occorre acquistare ancora e analizzare i costi.<br/><br/>Scegliere o creare il progetto di cui gestire la DBA.<br/>" 
+            },
+            "acceptedFileTypes": "Accepted file types: \"*.xls, *.xlsx, *.csv\""
+            "import": {
+                "success": "BOM Imported!",
+                "failure": "Failed to import BOM!"
 			}
 		},
 		"partTypes": {
@@ -635,6 +640,7 @@
   	},
 	"button": {
 		"addBomProject": "Aggiungi un Progetto DBA",
+        "importBomProject": "Import BOM Project",
 		"addPart": "Aggiungi componente",
 		"save": "Salva",
 		"download": "Download",

Binner/Binner.Web/ClientApp/public/locales/zh/translation.json

@@ -90,6 +90,11 @@
     "boms": {
       "header": {
         "description": "你可以使用物料清单工具，按照项目来管理零部件。你可以直接按照PCB板的套数扣除对应零件数量，或者检查还需要购买哪些零件以及分析成本。<br/><br/>请选择或创建需要管理BOM的项目。<br/>" 
+      },
+      "acceptedFileTypes": "Accepted file types: \"*.xls, *.xlsx, *.csv\""
+      "import": {
+          "success": "BOM Imported!",
+          "failure": "Failed to import BOM!"
       }
     },
     "partTypes": {
@@ -468,6 +473,7 @@
   },
   "button": {
     "addBomProject": "创建BOM工程文件",
+    "importBomProject": "Import BOM Project",
     "addPart": "添加部件",
     "save": "保存",
     "download": "下载",

Binner/Binner.Web/ClientApp/src/pages/Boms.js

@@ -7,6 +7,10 @@ import _ from 'underscore';
 import { toast } from "react-toastify";
 import { fetchApi } from '../common/fetchApi';
 import { ProjectColors } from "../common/Types";
+import { useDropzone } from "react-dropzone";
+import { humanFileSize } from "../common/files";
+import axios from "axios";
+import { getAuthToken } from "../common/authentication";
 
 export function Boms (props) {
   const { t } = useTranslation();
@@ -22,6 +26,7 @@ export function Boms (props) {
   const [pageSize, setPageSize] = useState(parseInt(localStorage.getItem("bomsRecordsPerPage")) || 5);
   const [loading, setLoading] = useState(true);
   const [addVisible, setAddVisible] = useState(false);
+  const [importVisible, setImportVisible] = useState(false);
   const [project, setProject] = useState(defaultProject);
   const [projects, setProjects] = useState([]);
   const [changeTracker, setChangeTracker] = useState([]);
@@ -32,6 +37,7 @@ export function Boms (props) {
   const [confirmDeleteIsOpen, setConfirmDeleteIsOpen] = useState(false);
   const [confirmPartDeleteContent, setConfirmProjectDeleteContent] = useState(null);
   const [confirmDeleteSelectedProject, setConfirmDeleteSelectedProject] = useState(null);
+  const [acceptedFile, setAcceptedFile] = useState(null);
 
   const [colors] = useState(_.map(ProjectColors, function (c) {
     return {
@@ -50,6 +56,26 @@ export function Boms (props) {
     { key: 5, text: '100', value: 100 },
   ];
 
+  const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
+    maxFiles: 1,
+    onDrop: (acceptedFiles, rejectedFiles, e) => {
+      // do accept manually
+      const acceptedMimeTypes = ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "text/csv"];
+      let errorMsg = "";
+      for (let i = 0; i < acceptedFiles.length; i++) {
+        if (!acceptedMimeTypes.includes(acceptedFiles[i].type)) {
+          errorMsg += `${t('page.exportData.fileNotSupported', "File '{{name}}' with mime type '{{type}}' is not an accepted image type!", { name: acceptedFiles[i].name, type: acceptedFiles[i].type})}\r\n`;
+        }
+      }
+      if (errorMsg.length > 0) {
+        setAcceptedFile(null);
+        toast.error(errorMsg);
+      } else {
+        setAcceptedFile(acceptedFiles[0]);
+      }
+    }
+  });
+
   const loadProjects = async (page, pageSize, reset = false) => {
     setLoading(true);
     let endOfData = false;
@@ -115,6 +141,10 @@ export function Boms (props) {
     setAddVisible(!addVisible);
   };
 
+  const handleShowImport = () => {
+    setImportVisible(!importVisible);
+  };
+
   const handleLoadBom = (e, p) => {
     e.preventDefault();
     e.stopPropagation();
@@ -139,10 +169,42 @@ export function Boms (props) {
       // reset form
       setProject(defaultProject);
       setAddVisible(false);
+      setImportVisible(false);
       loadProjects(page, pageSize, true);
     }
   };
 
+  const onImportProject = async () => {
+    if (acceptedFile != null) {
+      const formData = new FormData();
+      formData.set("name", project.name);
+      formData.set("description", project.description);
+      formData.set("file", acceptedFile, acceptedFile.name);
+
+      fetchApi("api/authentication/identity").then((_) => {
+        axios
+          .request({
+            method: "post",
+            url: `api/project/import`,
+            data: formData,
+            headers: { Authorization: `Bearer ${getAuthToken()}` }
+          })
+          .then((response) => {
+            toast.dismiss();
+            if (response.status === 200) {
+              toast.success(t("page.boms.import.success", "BOM Imported!"));
+              setProject(defaultProject);
+              setAddVisible(false);
+              setImportVisible(false);
+              loadProjects(page, pageSize, true);
+            } else {
+              toast.error(t("page.boms.import.failure", `Failed to import BOM!`), { autoClose: 10000 });
+            } 
+          });
+        });
+      }
+    };
+
   const handleSort = (clickedColumn) => () => {
     if (column !== clickedColumn) {
       setColumn(clickedColumn);
@@ -281,6 +343,7 @@ export function Boms (props) {
 
       <div style={{ minHeight: '35px' }}>
         <Button primary onClick={handleShowAdd} icon size='mini' floated='right'><Icon name='plus' /> <Trans i18nKey="button.addBomProject">Add BOM Project</Trans></Button>
+        <Button primary onClick={handleShowImport} icon size='mini' floated='right'><Icon name='plus' /> <Trans i18nKey="button.importBomProject">Import BOM Project</Trans></Button>
       </div>
       <div>
         {addVisible &&
@@ -297,6 +360,33 @@ export function Boms (props) {
           </Segment>
         }
       </div>
+      <div>
+        {importVisible &&
+          <Segment style={{marginBottom: '10px'}}>
+            <Form onSubmit={onImportProject}>
+              <Form.Input width={6} label={t('label.name', 'Name')} required placeholder='555 Timer Project' focus value={project.name} onChange={handleChange} name='name' />
+              <Form.Field width={10} control={TextArea} label={t('label.description', 'Description')} value={project.description} onChange={handleChange} name='description' style={{height: '60px'}} />
+                  <div
+                    style={{ border: "1px dashed #000", padding: "50px", marginBottom: "20px", backgroundColor: "#f5f5f5" }}
+                    {...getRootProps({ className: "dropzone" })}
+                  >
+                    <span style={{ fontSize: "0.6em" }}>{t('page.exportData.uploadNote', "Drag a document to upload, or click to select files")}</span>
+                    <input {...getInputProps()} />
+                    <div style={{ fontSize: "0.6em" }}>{t('page.boms.acceptedFileTypes', "Accepted file types: \"*.xls, *.xlsx, *.csv\"")}</div>
+                  </div>
+                  <aside>
+                    <ol>
+                      {acceptedFile && 
+                      <li key={acceptedFile.path}>
+                        {acceptedFile.path} - {humanFileSize(acceptedFile.size)}
+                      </li>}
+                    </ol>
+                  </aside>
+                  <Button primary disabled={!acceptedFile}>{t('button.import', "Import")}</Button>
+            </Form>
+          </Segment>
+        }
+      </div>
       <Segment style={{marginTop: '0'}}>
         <div style={{float: 'right', verticalAlign: 'middle', fontSize: '0.9em'}}>
           <Dropdown 

Binner/Binner.Web/Controllers/ProjectController.cs

@@ -5,6 +5,7 @@
 using Binner.Model.Requests;
 using Binner.Model.Responses;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Http;
 using Microsoft.Extensions.Logging;
 using System;
 using System.Collections.Generic;
@@ -87,6 +88,19 @@ public async Task<IActionResult> CreateProjectAsync(CreateProjectRequest request
             return Ok(project);
         }
 
+        /// <summary>
+        /// Import a new project
+        /// </summary>
+        /// <param name="import"></param>
+        /// <returns></returns>
+        [HttpPost("import")]
+        [Consumes("multipart/form-data")]
+        public async Task<IActionResult> ImportProjectAsync([FromForm] ImportProjectRequest request)
+        {
+            var project = await _projectService.ImportProjectAsync(request);
+            return Ok(project);
+        }
+
         /// <summary>
         /// Update an existing project
         /// </summary>