NAILED IT. CSV upload is a thing

RobJellinghaus · RobJellinghaus · commit 1747fa3f35a9 · 2025-07-18T17:02:36.000-04:00
diff --git a/backend/graphql/mutation.rs b/backend/graphql/mutation.rs
@@ -124,4 +124,34 @@ impl MutationRoot {
             .map(|count| count > 0)
             .map_err(|e| async_graphql::Error::new(format!("Database error: {}", e)))
     }
+
+    async fn import_suppliers(&self, ctx: &Context<'_>, suppliers: Vec<CreateSupplierInput>) -> Result<Vec<Suppliers>> {
+        let mut con = get_connection(ctx)?;
+        let mut created_suppliers = Vec::new();
+        
+        for supplier_input in suppliers {
+            let new_supplier = CreateSuppliers {
+                name: supplier_input.name,
+                address: supplier_input.address,
+                city: supplier_input.city,
+                state: supplier_input.state,
+                zip_code: supplier_input.zip_code,
+                country: supplier_input.country,
+                contact_name: supplier_input.contact_name,
+                contact_email: supplier_input.contact_email,
+                contact_phone: supplier_input.contact_phone,
+                website: supplier_input.website,
+            };
+            
+            match Suppliers::create(&mut con, &new_supplier) {
+                Ok(supplier) => created_suppliers.push(supplier),
+                Err(e) => {
+                    // Log the error but continue with other suppliers
+                    eprintln!("Error creating supplier {}: {}", new_supplier.name, e);
+                }
+            }
+        }
+        
+        Ok(created_suppliers)
+    }
 }
diff --git a/frontend/src/containers/SupplierList.tsx b/frontend/src/containers/SupplierList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { graphql, usePreloadedQuery, useMutation, useQueryLoader } from 'react-relay';
 import type { SupplierListQuery } from '../__generated__/SupplierListQuery.graphql.ts';
 
@@ -57,6 +57,27 @@ const deleteSupplierMutation = graphql`
   }
 `;
 
+// Define the bulk import suppliers mutation
+const importSuppliersMutation = graphql`
+  mutation SupplierListImportMutation($suppliers: [CreateSupplierInput!]!) {
+    importSuppliers(suppliers: $suppliers) {
+      id
+      name
+      address
+      city
+      state
+      zipCode
+      country
+      contactName
+      contactEmail
+      contactPhone
+      website
+      createdAt
+      updatedAt
+    }
+  }
+`;
+
 interface Supplier {
   id: string;
   name: string;
@@ -95,6 +116,8 @@ const SupplierListContent = ({
   loadQuery: (variables: { page: number; pageSize: number }, options?: { fetchPolicy?: string }) => void;
 }) => {
   const [showCreateForm, setShowCreateForm] = useState<boolean>(false);
+  const [isImportPending, setIsImportPending] = useState<boolean>(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [createForm, setCreateForm] = useState<CreateSupplierInput>({
     name: '',
     address: '',
@@ -112,6 +135,7 @@ const SupplierListContent = ({
 
   const [createSupplier, isCreatePending] = useMutation(createSupplierMutation);
   const [deleteSupplier, isDeletePending] = useMutation(deleteSupplierMutation);
+  const [importSuppliers] = useMutation(importSuppliersMutation);
 
   const suppliers = data.suppliers?.items || [];
   const totalItems = data.suppliers?.totalItems || 0;
@@ -188,6 +212,149 @@ const SupplierListContent = ({
     });
   };
 
+  const parseCSV = (csvText: string): CreateSupplierInput[] => {
+    const lines = csvText.trim().split('\n');
+    if (lines.length < 2) {
+      throw new Error('CSV must have header row and at least one data row');
+    }
+
+    const headers = lines[0].split(',').map(h => h.replace(/"/g, '').trim());
+    const suppliers: CreateSupplierInput[] = [];
+
+    for (let i = 1; i < lines.length; i++) {
+      const line = lines[i];
+      if (line.trim() === '') continue;
+
+      // Simple CSV parsing (handles quoted fields)
+      const values: string[] = [];
+      let currentValue = '';
+      let inQuotes = false;
+      
+      for (let j = 0; j < line.length; j++) {
+        const char = line[j];
+        if (char === '"') {
+          inQuotes = !inQuotes;
+        } else if (char === ',' && !inQuotes) {
+          values.push(currentValue.trim());
+          currentValue = '';
+        } else {
+          currentValue += char;
+        }
+      }
+      values.push(currentValue.trim()); // Push the last value
+
+      const supplier: CreateSupplierInput = {
+        name: '',
+        address: '',
+        city: '',
+        state: '',
+        zipCode: '',
+        country: '',
+        contactName: '',
+        contactEmail: '',
+        contactPhone: '',
+        website: ''
+      };
+
+      // Map CSV columns to supplier fields
+      headers.forEach((header, index) => {
+        const value = values[index] || '';
+        switch (header.toLowerCase()) {
+          case 'name':
+            supplier.name = value;
+            break;
+          case 'address':
+            supplier.address = value;
+            break;
+          case 'city':
+            supplier.city = value;
+            break;
+          case 'state':
+            supplier.state = value;
+            break;
+          case 'zipcode':
+          case 'zip_code':
+            supplier.zipCode = value;
+            break;
+          case 'country':
+            supplier.country = value;
+            break;
+          case 'contactname':
+          case 'contact_name':
+            supplier.contactName = value;
+            break;
+          case 'contactemail':
+          case 'contact_email':
+            supplier.contactEmail = value;
+            break;
+          case 'contactphone':
+          case 'contact_phone':
+            supplier.contactPhone = value;
+            break;
+          case 'website':
+            supplier.website = value || undefined;
+            break;
+        }
+      });
+
+      // Validate required fields
+      if (supplier.name && supplier.contactEmail) {
+        suppliers.push(supplier);
+      }
+    }
+
+    return suppliers;
+  };
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (!file.name.toLowerCase().endsWith('.csv')) {
+      alert('Please select a CSV file');
+      return;
+    }
+
+    setIsImportPending(true);
+
+    try {
+      const text = await file.text();
+      const suppliersData = parseCSV(text);
+
+      if (suppliersData.length === 0) {
+        alert('No valid supplier data found in CSV file');
+        setIsImportPending(false);
+        return;
+      }
+
+      importSuppliers({
+        variables: { suppliers: suppliersData },
+        onCompleted: (response) => {
+          alert(`Successfully imported ${response.importSuppliers?.length || 0} suppliers`);
+          setIsImportPending(false);
+          // Clear the file input
+          if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+          }
+          // Refresh the list
+          loadQuery(
+            { page: 0, pageSize: 10 },
+            { fetchPolicy: 'network-only' }
+          );
+        },
+        onError: (error) => {
+          console.error('Error importing suppliers:', error);
+          alert('Error importing suppliers. Please check the file format and try again.');
+          setIsImportPending(false);
+        }
+      });
+    } catch (error) {
+      console.error('Error parsing CSV:', error);
+      alert('Error parsing CSV file. Please check the file format.');
+      setIsImportPending(false);
+    }
+  };
+
   return (
     <div style={{ display: 'flex', flexFlow: 'column', textAlign: 'left' }}>
       <h1>Suppliers</h1>
@@ -196,10 +363,24 @@ const SupplierListContent = ({
         <button 
           onClick={() => setShowCreateForm(true)}
           disabled={showCreateForm}
-          style={{ marginBottom: '20px' }}
+          style={{ marginBottom: '20px', marginRight: '10px' }}
         >
           Add New Supplier
         </button>
+        <input
+          type="file"
+          accept=".csv"
+          onChange={handleFileUpload}
+          style={{ display: 'none' }}
+          ref={fileInputRef}
+        />
+        <button 
+          onClick={() => fileInputRef.current?.click()}
+          disabled={isImportPending}
+          style={{ marginBottom: '20px' }}
+        >
+          {isImportPending ? 'Importing...' : 'Import CSV'}
+        </button>
       </div>
 
       {showCreateForm && (
diff --git a/frontend/src/schema.graphql b/frontend/src/schema.graphql
@@ -80,6 +80,7 @@ type Mutation {
   createSupplier(input: CreateSupplierInput!): Supplier!
   updateSupplier(id: ID!, input: UpdateSupplierInput!): Supplier!
   deleteSupplier(id: ID!): Boolean!
+  importSuppliers(suppliers: [CreateSupplierInput!]!): [Supplier!]!
 }
 
 schema {
diff --git a/tests/suppliers.spec.ts b/tests/suppliers.spec.ts
@@ -329,4 +329,100 @@ test.describe('Supplier Tests', () => {
     await expect(page.locator('text=Page 1 of 1')).toBeVisible();
   });
 
+  test('should upload and import CSV file successfully', async ({ page }) => {
+    await page.click('a:has-text("Suppliers")');
+    
+    // Verify we start with empty state
+    await expect(page.locator('text=No suppliers found. Create one to get started!')).toBeVisible();
+    
+    // Create a small test CSV file
+    const csvContent = `name,address,city,state,zipCode,country,contactName,contactEmail,contactPhone,website
+"Test Corp","123 Test St","Test City","CA","12345","USA","John Test","john@test.com","555-1234","https://test.com"
+"Another Corp","456 Another Ave","Another City","NY","67890","USA","Jane Another","jane@another.com","555-5678","https://another.com"`;
+    
+    // Create a File object for the CSV
+    const file = new File([csvContent], 'test-suppliers.csv', { type: 'text/csv' });
+    
+    // Find the hidden file input and set the file
+    const fileInput = page.locator('input[type="file"][accept=".csv"]');
+    await fileInput.setInputFiles({
+      name: 'test-suppliers.csv',
+      mimeType: 'text/csv',
+      buffer: Buffer.from(csvContent)
+    });
+    
+    // Set up dialog handler to accept the success message
+    page.on('dialog', dialog => {
+      expect(dialog.message()).toContain('Successfully imported 2 suppliers');
+      dialog.accept();
+    });
+    
+    // Click the import button to trigger the upload
+    await page.click('button:has-text("Import CSV")');
+    
+    // Wait for the import to complete and page to update
+    await page.waitForLoadState('networkidle');
+    
+    // Verify suppliers were imported
+    await expect(page.locator('text=Test Corp')).toBeVisible();
+    await expect(page.locator('text=Another Corp')).toBeVisible();
+    await expect(page.locator('text=john@test.com')).toBeVisible();
+    await expect(page.locator('text=jane@another.com')).toBeVisible();
+    
+    // Verify empty state is no longer visible
+    await expect(page.locator('text=No suppliers found. Create one to get started!')).not.toBeVisible();
+    
+    // Verify we have supplier rows with proper data
+    await expect(page.locator('text=Contact: John Test (john@test.com)')).toBeVisible();
+    await expect(page.locator('text=Address: 123 Test St, Test City, CA 12345, USA')).toBeVisible();
+    await expect(page.locator('text=Contact: Jane Another (jane@another.com)')).toBeVisible();
+    await expect(page.locator('text=Address: 456 Another Ave, Another City, NY 67890, USA')).toBeVisible();
+  });
+
+  test('should handle invalid CSV file gracefully', async ({ page }) => {
+    await page.click('a:has-text("Suppliers")');
+    
+    // Create an invalid CSV file (missing required headers)
+    const invalidCsvContent = `invalid,headers,here
+"Some","Data","Here"`;
+    
+    // Find the hidden file input and set the invalid file
+    const fileInput = page.locator('input[type="file"][accept=".csv"]');
+    await fileInput.setInputFiles({
+      name: 'invalid.csv',
+      mimeType: 'text/csv',
+      buffer: Buffer.from(invalidCsvContent)
+    });
+    
+    // Set up dialog handler to catch the error message
+    page.on('dialog', dialog => {
+      expect(dialog.message()).toContain('No valid supplier data found in CSV file');
+      dialog.accept();
+    });
+    
+    // Click the import button
+    await page.click('button:has-text("Import CSV")');
+    
+    // Wait for the error handling
+    await page.waitForLoadState('networkidle');
+    
+    // Verify empty state is still visible (no suppliers were imported)
+    await expect(page.locator('text=No suppliers found. Create one to get started!')).toBeVisible();
+  });
+
+  test('should show import button and accept CSV files only', async ({ page }) => {
+    await page.click('a:has-text("Suppliers")');
+    
+    // Verify import button is visible and enabled
+    await expect(page.locator('button:has-text("Import CSV")')).toBeVisible();
+    await expect(page.locator('button:has-text("Import CSV")')).toBeEnabled();
+    
+    // Verify file input accepts only CSV files
+    const fileInput = page.locator('input[type="file"][accept=".csv"]');
+    await expect(fileInput).toHaveAttribute('accept', '.csv');
+    
+    // Verify file input is hidden
+    await expect(fileInput).toHaveCSS('display', 'none');
+  });
+
 });

Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,7 @@ type Mutation {`
`80`	`80`	`createSupplier(input: CreateSupplierInput!): Supplier!`
`81`	`81`	`updateSupplier(id: ID!, input: UpdateSupplierInput!): Supplier!`
`82`	`82`	`deleteSupplier(id: ID!): Boolean!`
	`83`	`+ importSuppliers(suppliers: [CreateSupplierInput!]!): [Supplier!]!`
`83`	`84`	`}`
`84`	`85`
`85`	`86`	`schema {`