feat: Merged next

implerhq · Nov 23, 2023 · a95b7d5 · a95b7d5
2 parents ffa99ff + 3da5c45
commit a95b7d5
Show file tree

Hide file tree

Showing 8 changed files with 190 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@
 <h3 align="center">impler.io</h3>
 
   <p align="center">
-    Open source infrastructure for data import
+    Open source CSV & Excel file Import Experience
     <br />
     <a href="https://docs.impler.io"><strong>Explore the docs »</strong></a>
     <br />
@@ -52,9 +52,9 @@
 <!-- ABOUT THE PROJECT -->
 ## About The Project
 
-All projects need to give some kind of data import facility, so that their users can import data in application through files like `.csv`, `.xls`, `.xlsx`, etc.
+All projects need to give some kind of data import facility so that their users can import data in the application through files like `.csv`, `.xls` and `.xlsx`.
 
-At first it looks like just importing file and inserting in database, but as the app grows facilities like validating data, data mapping, becomes must. `impler` provides infrastructure to applications, so that they don't have to write code for data import.
+At first, it looks like just importing the file and inserting them into the database, but as the app grows facilities like validating data, and data mapping, becomes a must. `impler` provides a readymade import expeerience to applications, so they don't have to build it from scratch.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -68,7 +68,7 @@ At first it looks like just importing file and inserting in database, but as the
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## Setup
-To set up `impler.io` locally, you need the following things installed in your computer.
+To set up `impler.io` locally, you need the following things installed on your computer.
 1. `pnpm`
 2. `localstack`
 3. `mongodb`

diff --git a/apps/api/src/app/template/usecases/get-columns/get-columns.usecase.ts b/apps/api/src/app/template/usecases/get-columns/get-columns.usecase.ts
@@ -8,7 +8,7 @@ export class GetTemplateColumns {
   async execute(_templateId: string) {
     return this.columnRepository.find(
       { _templateId },
-      '_id name key type alternateKeys isRequired isUnique selectValues dateFormats sequence'
+      '_id name key type alternateKeys isRequired isUnique selectValues regex dateFormats sequence'
     );
   }
 }
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -28,7 +28,7 @@
     "react-dom": "18.2.0",
     "react-query": "^3.39.2",
     "rimraf": "^3.0.2",
-    "sharp": "^0.31.3"
+    "sharp": "^0.32.6"
   },
   "devDependencies": {
     "@types/file-saver": "^2.0.5",

diff --git a/apps/web/components/imports/schema/ColumnsTable.tsx b/apps/web/components/imports/schema/ColumnsTable.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { Controller } from 'react-hook-form';
-import { ActionIcon, Checkbox, Flex, Input, Select, Tooltip } from '@mantine/core';
+import { ActionIcon, Checkbox, Select, Flex, Input, Tooltip } from '@mantine/core';
 
 import { colors } from '@config';
 import { Table } from '@ui/table';
@@ -14,20 +14,40 @@ import { EditIcon } from '@assets/icons/Edit.icon';
 import { CloseIcon } from '@assets/icons/Close.icon';
 import { CheckIcon } from '@assets/icons/Check.icon';
 import { DeleteIcon } from '@assets/icons/Delete.icon';
+import { MultiSelect } from '@mantine/core';
 
 interface ColumnsTableProps {
   templateId: string;
 }
 
 export function ColumnsTable({ templateId }: ColumnsTableProps) {
   const [showAddRow, setShowAddRow] = useState(false);
-  const { register, columns, control, handleSubmit, onEditColumnClick, onDeleteColumnClick, isColumnCreateLoading } =
-    useSchema({
-      templateId,
-    });
+  const SelectRef = useRef(false);
+
+  const {
+    register,
+    watch,
+    columns,
+    control,
+    handleSubmit,
+    onEditColumnClick,
+    onDeleteColumnClick,
+    isColumnCreateLoading,
+    formState: { errors },
+  } = useSchema({
+    templateId,
+  });
+
+  const typeValue = watch('type');
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        handleSubmit();
+        SelectRef.current = false;
+      }}
+    >
       <Table<IColumn>
         emptyDataText='No columns found click on "+" to add new column'
         headings={[
@@ -72,29 +92,94 @@ export function ColumnsTable({ templateId }: ColumnsTableProps) {
           <tr>
             {showAddRow ? (
               <>
-                <td>
-                  <Flex gap="xs">
+                <td colSpan={4} style={{ borderRight: 'none' }}>
+                  <Flex gap="xs" align={'center'}>
                     <Input autoFocus required placeholder="Column Name" {...register('name')} />
                     <Input required placeholder="Column Key" {...register('key')} />
-                  </Flex>
-                </td>
-                <td>
-                  <Controller
-                    control={control}
-                    name="type"
-                    render={({ field }) => (
-                      <Select data={COLUMN_TYPES} placeholder="Select Type" variant="default" {...field} />
+                    <Controller
+                      control={control}
+                      name="type"
+                      render={({ field }) => (
+                        <Select
+                          data={COLUMN_TYPES}
+                          placeholder="Select Type"
+                          variant="default"
+                          {...field}
+                          autoFocus={SelectRef.current}
+                          onFocus={() => (SelectRef.current = true)}
+                        />
+                      )}
+                    />
+                    {typeValue === 'Regex' && (
+                      <>
+                        <Input
+                          placeholder="Regular expression"
+                          {...register('regex')}
+                          required
+                          error={errors.regex?.message}
+                        />
+                      </>
                     )}
-                  />
-                </td>
-                <td>
-                  <Checkbox title="Is Required?" {...register('isRequired')} />
-                </td>
-                <td>
-                  <Checkbox title="Is Unique?" {...register('isUnique')} />
+                    {typeValue === 'Select' ? (
+                      <Controller
+                        name="selectValues"
+                        control={control}
+                        render={({ field: { value, onChange } }) => (
+                          <MultiSelect
+                            placeholder="Select Values"
+                            creatable
+                            clearable
+                            searchable
+                            getCreateLabel={(query) => `+ Add ${query}`}
+                            data={Array.isArray(value) ? value : []}
+                            value={value}
+                            onCreate={(newItem) => {
+                              onChange([...(Array.isArray(value) ? value : []), newItem]);
+
+                              return newItem;
+                            }}
+                            onChange={onChange}
+                            style={{ width: '100%' }}
+                          />
+                        )}
+                      />
+                    ) : null}
+                    {typeValue === 'Date' ? (
+                      <Controller
+                        name="dateFormats"
+                        control={control}
+                        render={({ field: { value, onChange } }) => (
+                          <MultiSelect
+                            creatable
+                            clearable
+                            searchable
+                            value={value}
+                            placeholder="Valid Date Formats, i.e. DD/MM/YYYY, DD/MM/YY"
+                            data={[
+                              'DD/MM/YYYY',
+                              'DD/MM/YY',
+                              'MM/DD/YYYY',
+                              'MM/DD/YY',
+                              ...(Array.isArray(value) ? value : []),
+                            ]}
+                            getCreateLabel={(query) => `Add "${query}"`}
+                            onCreate={(newItem) => {
+                              onChange([...(Array.isArray(value) ? value : []), newItem]);
+
+                              return newItem;
+                            }}
+                            onChange={onChange}
+                            style={{ width: '100%' }}
+                          />
+                        )}
+                      />
+                    ) : null}
+                    <Checkbox label="Is Required?" title="Is Required?" {...register('isRequired')} id="isRequired" />{' '}
+                    <Checkbox label="Is Unique?" title="Is Unique?" {...register('isUnique')} id="isUnique" />
+                  </Flex>
                 </td>
-                <td>
-                  <Flex gap="xs" justify="flex-end">
+                <td style={{ borderLeft: 'none' }}>
+                  <Flex justify={'end'}>
                     <ActionIcon color="blue" type="submit" loading={isColumnCreateLoading}>
                       <CheckIcon color={colors.blue} />
                     </ActionIcon>

diff --git a/apps/web/hooks/useSchema.tsx b/apps/web/hooks/useSchema.tsx
@@ -16,7 +16,7 @@ interface UseSchemaProps {
 
 export function useSchema({ templateId }: UseSchemaProps) {
   const queryClient = useQueryClient();
-  const { register, control, reset, setFocus, handleSubmit } = useForm<IColumn>({
+  const { register, control, watch, reset, setFocus, handleSubmit, formState } = useForm<IColumn>({
     defaultValues: {
       type: 'String',
     },
@@ -101,6 +101,8 @@ export function useSchema({ templateId }: UseSchemaProps) {
     control,
     columns,
     register,
+    watch,
+    formState,
     onEditColumnClick,
     onDeleteColumnClick,
     isColumnCreateLoading,

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -42,7 +42,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.39.1",
-    "sharp": "^0.31.3",
+    "sharp": "^0.32.6",
     "typescript": "4.9.5"
   },
   "devDependencies": {

diff --git a/apps/widget/src/store/app.context.tsx b/apps/widget/src/store/app.context.tsx
@@ -27,8 +27,6 @@ const AppContextProvider = ({
   const [uploadInfo, setUploadInfo] = useState<IUpload>({} as IUpload);
 
   const reset = () => {
-    setImportConfig({} as IImportConfig);
-    setTemplateInfo({} as ITemplate);
     setUploadInfo({} as IUpload);
   };