Compare commits
2 Commits
af067f7360
...
1496aa57b1
| Author | SHA1 | Date | |
|---|---|---|---|
| 1496aa57b1 | |||
| fc9ef2f0d7 |
@@ -1,43 +0,0 @@
|
|||||||
# Details
|
|
||||||
|
|
||||||
Date : 2025-03-17 14:20:03
|
|
||||||
|
|
||||||
Directory /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
|
|
||||||
Total : 28 files, 6565 codes, 1027 comments, 1053 blanks, all 8645 lines
|
|
||||||
|
|
||||||
[Summary](results.md) / Details / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
|
|
||||||
|
|
||||||
## Files
|
|
||||||
| filename | language | code | comment | blank | total |
|
|
||||||
| :--- | :--- | ---: | ---: | ---: | ---: |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/README.md](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/README.md) | Markdown | 39 | 0 | 19 | 58 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/AiValidationDialogs.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/AiValidationDialogs.tsx) | TypeScript JSX | 230 | 10 | 8 | 248 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/BaseCellContent.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/BaseCellContent.tsx) | TypeScript JSX | 18 | 0 | 3 | 21 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SaveTemplateDialog.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SaveTemplateDialog.tsx) | TypeScript JSX | 83 | 0 | 4 | 87 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx) | TypeScript JSX | 273 | 19 | 37 | 329 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/TemplateManager.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/TemplateManager.tsx) | TypeScript JSX | 193 | 4 | 15 | 212 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx) | TypeScript JSX | 374 | 42 | 44 | 460 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx) | TypeScript JSX | 1,101 | 234 | 213 | 1,548 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx) | TypeScript JSX | 499 | 48 | 54 | 601 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/CheckboxCell.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/CheckboxCell.tsx) | TypeScript JSX | 112 | 12 | 21 | 145 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx) | TypeScript JSX | 232 | 31 | 32 | 295 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiSelectCell.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiSelectCell.tsx) | TypeScript JSX | 407 | 56 | 52 | 515 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultilineInput.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultilineInput.tsx) | TypeScript JSX | 193 | 23 | 22 | 238 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx) | TypeScript JSX | 289 | 36 | 31 | 356 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useAiValidation.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useAiValidation.tsx) | TypeScript JSX | 500 | 75 | 89 | 664 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useFilters.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useFilters.tsx) | TypeScript JSX | 89 | 12 | 16 | 117 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useTemplates.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useTemplates.tsx) | TypeScript JSX | 204 | 26 | 33 | 263 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx) | TypeScript JSX | 93 | 13 | 18 | 124 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidation.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidation.tsx) | TypeScript JSX | 219 | 39 | 47 | 305 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx) | TypeScript JSX | 1,060 | 228 | 229 | 1,517 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/index.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/index.tsx) | TypeScript JSX | 20 | 6 | 2 | 28 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types.ts) | TypeScript | 4 | 0 | 1 | 5 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types/index.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types/index.ts) | TypeScript | 16 | 4 | 4 | 24 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/dataMutations.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/dataMutations.ts) | TypeScript | 124 | 4 | 14 | 142 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/errorUtils.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/errorUtils.ts) | TypeScript | 21 | 15 | 5 | 41 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/upcValidation.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/upcValidation.ts) | TypeScript | 43 | 24 | 7 | 74 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validation-helper.js](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validation-helper.js) | JavaScript | 28 | 7 | 9 | 44 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validationUtils.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validationUtils.ts) | TypeScript | 101 | 59 | 24 | 184 |
|
|
||||||
|
|
||||||
[Summary](results.md) / Details / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
# Diff Details
|
|
||||||
|
|
||||||
Date : 2025-03-17 14:20:03
|
|
||||||
|
|
||||||
Directory /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
|
|
||||||
Total : 0 files, 0 codes, 0 comments, 0 blanks, all 0 lines
|
|
||||||
|
|
||||||
[Summary](results.md) / [Details](details.md) / [Diff Summary](diff.md) / Diff Details
|
|
||||||
|
|
||||||
## Files
|
|
||||||
| filename | language | code | comment | blank | total |
|
|
||||||
| :--- | :--- | ---: | ---: | ---: | ---: |
|
|
||||||
|
|
||||||
[Summary](results.md) / [Details](details.md) / [Diff Summary](diff.md) / Diff Details
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
# Diff Summary
|
|
||||||
|
|
||||||
Date : 2025-03-17 14:20:03
|
|
||||||
|
|
||||||
Directory /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
|
|
||||||
Total : 0 files, 0 codes, 0 comments, 0 blanks, all 0 lines
|
|
||||||
|
|
||||||
[Summary](results.md) / [Details](details.md) / Diff Summary / [Diff Details](diff-details.md)
|
|
||||||
|
|
||||||
## Languages
|
|
||||||
| language | files | code | comment | blank | total |
|
|
||||||
| :--- | ---: | ---: | ---: | ---: | ---: |
|
|
||||||
|
|
||||||
## Directories
|
|
||||||
| path | files | code | comment | blank | total |
|
|
||||||
| :--- | ---: | ---: | ---: | ---: | ---: |
|
|
||||||
|
|
||||||
[Summary](results.md) / [Details](details.md) / Diff Summary / [Diff Details](diff-details.md)
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
Date : 2025-03-17 14:20:03
|
|
||||||
Directory : /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
Total : 0 files, 0 codes, 0 comments, 0 blanks, all 0 lines
|
|
||||||
|
|
||||||
Languages
|
|
||||||
+----------+------------+------------+------------+------------+------------+
|
|
||||||
| language | files | code | comment | blank | total |
|
|
||||||
+----------+------------+------------+------------+------------+------------+
|
|
||||||
+----------+------------+------------+------------+------------+------------+
|
|
||||||
|
|
||||||
Directories
|
|
||||||
+------+------------+------------+------------+------------+------------+
|
|
||||||
| path | files | code | comment | blank | total |
|
|
||||||
+------+------------+------------+------------+------------+------------+
|
|
||||||
+------+------------+------------+------------+------------+------------+
|
|
||||||
|
|
||||||
Files
|
|
||||||
+----------+----------+------------+------------+------------+------------+
|
|
||||||
| filename | language | code | comment | blank | total |
|
|
||||||
+----------+----------+------------+------------+------------+------------+
|
|
||||||
| Total | | 0 | 0 | 0 | 0 |
|
|
||||||
+----------+----------+------------+------------+------------+------------+
|
|
||||||
File diff suppressed because one or more lines are too long
@@ -1,31 +0,0 @@
|
|||||||
# Summary
|
|
||||||
|
|
||||||
Date : 2025-03-17 14:20:03
|
|
||||||
|
|
||||||
Directory /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
|
|
||||||
Total : 28 files, 6565 codes, 1027 comments, 1053 blanks, all 8645 lines
|
|
||||||
|
|
||||||
Summary / [Details](details.md) / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
|
|
||||||
|
|
||||||
## Languages
|
|
||||||
| language | files | code | comment | blank | total |
|
|
||||||
| :--- | ---: | ---: | ---: | ---: | ---: |
|
|
||||||
| TypeScript JSX | 20 | 6,189 | 914 | 970 | 8,073 |
|
|
||||||
| TypeScript | 6 | 309 | 106 | 55 | 470 |
|
|
||||||
| Markdown | 1 | 39 | 0 | 19 | 58 |
|
|
||||||
| JavaScript | 1 | 28 | 7 | 9 | 44 |
|
|
||||||
|
|
||||||
## Directories
|
|
||||||
| path | files | code | comment | blank | total |
|
|
||||||
| :--- | ---: | ---: | ---: | ---: | ---: |
|
|
||||||
| . | 28 | 6,565 | 1,027 | 1,053 | 8,645 |
|
|
||||||
| . (Files) | 3 | 63 | 6 | 22 | 91 |
|
|
||||||
| components | 13 | 4,004 | 515 | 536 | 5,055 |
|
|
||||||
| components (Files) | 8 | 2,771 | 357 | 378 | 3,506 |
|
|
||||||
| components/cells | 5 | 1,233 | 158 | 158 | 1,549 |
|
|
||||||
| hooks | 6 | 2,165 | 393 | 432 | 2,990 |
|
|
||||||
| types | 1 | 16 | 4 | 4 | 24 |
|
|
||||||
| utils | 5 | 317 | 109 | 59 | 485 |
|
|
||||||
|
|
||||||
Summary / [Details](details.md) / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
Date : 2025-03-17 14:20:03
|
|
||||||
Directory : /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
Total : 28 files, 6565 codes, 1027 comments, 1053 blanks, all 8645 lines
|
|
||||||
|
|
||||||
Languages
|
|
||||||
+----------------+------------+------------+------------+------------+------------+
|
|
||||||
| language | files | code | comment | blank | total |
|
|
||||||
+----------------+------------+------------+------------+------------+------------+
|
|
||||||
| TypeScript JSX | 20 | 6,189 | 914 | 970 | 8,073 |
|
|
||||||
| TypeScript | 6 | 309 | 106 | 55 | 470 |
|
|
||||||
| Markdown | 1 | 39 | 0 | 19 | 58 |
|
|
||||||
| JavaScript | 1 | 28 | 7 | 9 | 44 |
|
|
||||||
+----------------+------------+------------+------------+------------+------------+
|
|
||||||
|
|
||||||
Directories
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
|
|
||||||
| path | files | code | comment | blank | total |
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
|
|
||||||
| . | 28 | 6,565 | 1,027 | 1,053 | 8,645 |
|
|
||||||
| . (Files) | 3 | 63 | 6 | 22 | 91 |
|
|
||||||
| components | 13 | 4,004 | 515 | 536 | 5,055 |
|
|
||||||
| components (Files) | 8 | 2,771 | 357 | 378 | 3,506 |
|
|
||||||
| components/cells | 5 | 1,233 | 158 | 158 | 1,549 |
|
|
||||||
| hooks | 6 | 2,165 | 393 | 432 | 2,990 |
|
|
||||||
| types | 1 | 16 | 4 | 4 | 24 |
|
|
||||||
| utils | 5 | 317 | 109 | 59 | 485 |
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
|
|
||||||
|
|
||||||
Files
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+----------------+------------+------------+------------+------------+
|
|
||||||
| filename | language | code | comment | blank | total |
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+----------------+------------+------------+------------+------------+
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/README.md | Markdown | 39 | 0 | 19 | 58 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/AiValidationDialogs.tsx | TypeScript JSX | 230 | 10 | 8 | 248 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/BaseCellContent.tsx | TypeScript JSX | 18 | 0 | 3 | 21 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SaveTemplateDialog.tsx | TypeScript JSX | 83 | 0 | 4 | 87 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx | TypeScript JSX | 273 | 19 | 37 | 329 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/TemplateManager.tsx | TypeScript JSX | 193 | 4 | 15 | 212 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx | TypeScript JSX | 374 | 42 | 44 | 460 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx | TypeScript JSX | 1,101 | 234 | 213 | 1,548 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx | TypeScript JSX | 499 | 48 | 54 | 601 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/CheckboxCell.tsx | TypeScript JSX | 112 | 12 | 21 | 145 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx | TypeScript JSX | 232 | 31 | 32 | 295 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiSelectCell.tsx | TypeScript JSX | 407 | 56 | 52 | 515 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultilineInput.tsx | TypeScript JSX | 193 | 23 | 22 | 238 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx | TypeScript JSX | 289 | 36 | 31 | 356 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useAiValidation.tsx | TypeScript JSX | 500 | 75 | 89 | 664 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useFilters.tsx | TypeScript JSX | 89 | 12 | 16 | 117 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useTemplates.tsx | TypeScript JSX | 204 | 26 | 33 | 263 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx | TypeScript JSX | 93 | 13 | 18 | 124 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidation.tsx | TypeScript JSX | 219 | 39 | 47 | 305 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx | TypeScript JSX | 1,060 | 228 | 229 | 1,517 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/index.tsx | TypeScript JSX | 20 | 6 | 2 | 28 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types.ts | TypeScript | 4 | 0 | 1 | 5 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types/index.ts | TypeScript | 16 | 4 | 4 | 24 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/dataMutations.ts | TypeScript | 124 | 4 | 14 | 142 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/errorUtils.ts | TypeScript | 21 | 15 | 5 | 41 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/upcValidation.ts | TypeScript | 43 | 24 | 7 | 74 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validation-helper.js | JavaScript | 28 | 7 | 9 | 44 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validationUtils.ts | TypeScript | 101 | 59 | 24 | 184 |
|
|
||||||
| Total | | 6,565 | 1,027 | 1,053 | 8,645 |
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+----------------+------------+------------+------------+------------+
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
# Details
|
|
||||||
|
|
||||||
Date : 2025-03-17 16:02:14
|
|
||||||
|
|
||||||
Directory /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
|
|
||||||
Total : 28 files, 6551 codes, 1023 comments, 1050 blanks, all 8624 lines
|
|
||||||
|
|
||||||
[Summary](results.md) / Details / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
|
|
||||||
|
|
||||||
## Files
|
|
||||||
| filename | language | code | comment | blank | total |
|
|
||||||
| :--- | :--- | ---: | ---: | ---: | ---: |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/README.md](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/README.md) | Markdown | 39 | 0 | 19 | 58 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/AiValidationDialogs.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/AiValidationDialogs.tsx) | TypeScript JSX | 230 | 10 | 8 | 248 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/BaseCellContent.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/BaseCellContent.tsx) | TypeScript JSX | 18 | 0 | 3 | 21 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SaveTemplateDialog.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SaveTemplateDialog.tsx) | TypeScript JSX | 83 | 0 | 4 | 87 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx) | TypeScript JSX | 273 | 19 | 37 | 329 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/TemplateManager.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/TemplateManager.tsx) | TypeScript JSX | 193 | 4 | 15 | 212 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx) | TypeScript JSX | 374 | 42 | 44 | 460 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx) | TypeScript JSX | 971 | 194 | 178 | 1,343 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx) | TypeScript JSX | 499 | 48 | 54 | 601 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/CheckboxCell.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/CheckboxCell.tsx) | TypeScript JSX | 112 | 12 | 21 | 145 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx) | TypeScript JSX | 232 | 31 | 32 | 295 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiSelectCell.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiSelectCell.tsx) | TypeScript JSX | 407 | 56 | 52 | 515 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultilineInput.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultilineInput.tsx) | TypeScript JSX | 193 | 23 | 22 | 238 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx) | TypeScript JSX | 289 | 36 | 31 | 356 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useAiValidation.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useAiValidation.tsx) | TypeScript JSX | 500 | 75 | 89 | 664 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useFilters.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useFilters.tsx) | TypeScript JSX | 89 | 12 | 16 | 117 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useTemplates.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useTemplates.tsx) | TypeScript JSX | 204 | 26 | 33 | 263 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx) | TypeScript JSX | 209 | 49 | 50 | 308 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidation.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidation.tsx) | TypeScript JSX | 219 | 39 | 47 | 305 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx) | TypeScript JSX | 1,060 | 228 | 229 | 1,517 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/index.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/index.tsx) | TypeScript JSX | 20 | 6 | 2 | 28 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types.ts) | TypeScript | 4 | 0 | 1 | 5 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types/index.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types/index.ts) | TypeScript | 16 | 4 | 4 | 24 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/dataMutations.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/dataMutations.ts) | TypeScript | 124 | 4 | 14 | 142 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/errorUtils.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/errorUtils.ts) | TypeScript | 21 | 15 | 5 | 41 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/upcValidation.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/upcValidation.ts) | TypeScript | 43 | 24 | 7 | 74 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validation-helper.js](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validation-helper.js) | JavaScript | 28 | 7 | 9 | 44 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validationUtils.ts](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validationUtils.ts) | TypeScript | 101 | 59 | 24 | 184 |
|
|
||||||
|
|
||||||
[Summary](results.md) / Details / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
# Diff Details
|
|
||||||
|
|
||||||
Date : 2025-03-17 16:02:14
|
|
||||||
|
|
||||||
Directory /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
|
|
||||||
Total : 2 files, -14 codes, -4 comments, -3 blanks, all -21 lines
|
|
||||||
|
|
||||||
[Summary](results.md) / [Details](details.md) / [Diff Summary](diff.md) / Diff Details
|
|
||||||
|
|
||||||
## Files
|
|
||||||
| filename | language | code | comment | blank | total |
|
|
||||||
| :--- | :--- | ---: | ---: | ---: | ---: |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx) | TypeScript JSX | -130 | -40 | -35 | -205 |
|
|
||||||
| [inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx](/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx) | TypeScript JSX | 116 | 36 | 32 | 184 |
|
|
||||||
|
|
||||||
[Summary](results.md) / [Details](details.md) / [Diff Summary](diff.md) / Diff Details
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
# Diff Summary
|
|
||||||
|
|
||||||
Date : 2025-03-17 16:02:14
|
|
||||||
|
|
||||||
Directory /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
|
|
||||||
Total : 2 files, -14 codes, -4 comments, -3 blanks, all -21 lines
|
|
||||||
|
|
||||||
[Summary](results.md) / [Details](details.md) / Diff Summary / [Diff Details](diff-details.md)
|
|
||||||
|
|
||||||
## Languages
|
|
||||||
| language | files | code | comment | blank | total |
|
|
||||||
| :--- | ---: | ---: | ---: | ---: | ---: |
|
|
||||||
| TypeScript JSX | 2 | -14 | -4 | -3 | -21 |
|
|
||||||
|
|
||||||
## Directories
|
|
||||||
| path | files | code | comment | blank | total |
|
|
||||||
| :--- | ---: | ---: | ---: | ---: | ---: |
|
|
||||||
| . | 2 | -14 | -4 | -3 | -21 |
|
|
||||||
| components | 1 | -130 | -40 | -35 | -205 |
|
|
||||||
| hooks | 1 | 116 | 36 | 32 | 184 |
|
|
||||||
|
|
||||||
[Summary](results.md) / [Details](details.md) / Diff Summary / [Diff Details](diff-details.md)
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
Date : 2025-03-17 16:02:14
|
|
||||||
Directory : /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
Total : 2 files, -14 codes, -4 comments, -3 blanks, all -21 lines
|
|
||||||
|
|
||||||
Languages
|
|
||||||
+----------------+------------+------------+------------+------------+------------+
|
|
||||||
| language | files | code | comment | blank | total |
|
|
||||||
+----------------+------------+------------+------------+------------+------------+
|
|
||||||
| TypeScript JSX | 2 | -14 | -4 | -3 | -21 |
|
|
||||||
+----------------+------------+------------+------------+------------+------------+
|
|
||||||
|
|
||||||
Directories
|
|
||||||
+-------------------------------------------------------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
|
|
||||||
| path | files | code | comment | blank | total |
|
|
||||||
+-------------------------------------------------------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
|
|
||||||
| . | 2 | -14 | -4 | -3 | -21 |
|
|
||||||
| components | 1 | -130 | -40 | -35 | -205 |
|
|
||||||
| hooks | 1 | 116 | 36 | 32 | 184 |
|
|
||||||
+-------------------------------------------------------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
|
|
||||||
|
|
||||||
Files
|
|
||||||
+-------------------------------------------------------------------------------------------------------------------------------------+----------------+------------+------------+------------+------------+
|
|
||||||
| filename | language | code | comment | blank | total |
|
|
||||||
+-------------------------------------------------------------------------------------------------------------------------------------+----------------+------------+------------+------------+------------+
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx | TypeScript JSX | -130 | -40 | -35 | -205 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx | TypeScript JSX | 116 | 36 | 32 | 184 |
|
|
||||||
| Total | | -14 | -4 | -3 | -21 |
|
|
||||||
+-------------------------------------------------------------------------------------------------------------------------------------+----------------+------------+------------+------------+------------+
|
|
||||||
File diff suppressed because one or more lines are too long
@@ -1,31 +0,0 @@
|
|||||||
# Summary
|
|
||||||
|
|
||||||
Date : 2025-03-17 16:02:14
|
|
||||||
|
|
||||||
Directory /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
|
|
||||||
Total : 28 files, 6551 codes, 1023 comments, 1050 blanks, all 8624 lines
|
|
||||||
|
|
||||||
Summary / [Details](details.md) / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
|
|
||||||
|
|
||||||
## Languages
|
|
||||||
| language | files | code | comment | blank | total |
|
|
||||||
| :--- | ---: | ---: | ---: | ---: | ---: |
|
|
||||||
| TypeScript JSX | 20 | 6,175 | 910 | 967 | 8,052 |
|
|
||||||
| TypeScript | 6 | 309 | 106 | 55 | 470 |
|
|
||||||
| Markdown | 1 | 39 | 0 | 19 | 58 |
|
|
||||||
| JavaScript | 1 | 28 | 7 | 9 | 44 |
|
|
||||||
|
|
||||||
## Directories
|
|
||||||
| path | files | code | comment | blank | total |
|
|
||||||
| :--- | ---: | ---: | ---: | ---: | ---: |
|
|
||||||
| . | 28 | 6,551 | 1,023 | 1,050 | 8,624 |
|
|
||||||
| . (Files) | 3 | 63 | 6 | 22 | 91 |
|
|
||||||
| components | 13 | 3,874 | 475 | 501 | 4,850 |
|
|
||||||
| components (Files) | 8 | 2,641 | 317 | 343 | 3,301 |
|
|
||||||
| components/cells | 5 | 1,233 | 158 | 158 | 1,549 |
|
|
||||||
| hooks | 6 | 2,281 | 429 | 464 | 3,174 |
|
|
||||||
| types | 1 | 16 | 4 | 4 | 24 |
|
|
||||||
| utils | 5 | 317 | 109 | 59 | 485 |
|
|
||||||
|
|
||||||
Summary / [Details](details.md) / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
Date : 2025-03-17 16:02:14
|
|
||||||
Directory : /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew
|
|
||||||
Total : 28 files, 6551 codes, 1023 comments, 1050 blanks, all 8624 lines
|
|
||||||
|
|
||||||
Languages
|
|
||||||
+----------------+------------+------------+------------+------------+------------+
|
|
||||||
| language | files | code | comment | blank | total |
|
|
||||||
+----------------+------------+------------+------------+------------+------------+
|
|
||||||
| TypeScript JSX | 20 | 6,175 | 910 | 967 | 8,052 |
|
|
||||||
| TypeScript | 6 | 309 | 106 | 55 | 470 |
|
|
||||||
| Markdown | 1 | 39 | 0 | 19 | 58 |
|
|
||||||
| JavaScript | 1 | 28 | 7 | 9 | 44 |
|
|
||||||
+----------------+------------+------------+------------+------------+------------+
|
|
||||||
|
|
||||||
Directories
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
|
|
||||||
| path | files | code | comment | blank | total |
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
|
|
||||||
| . | 28 | 6,551 | 1,023 | 1,050 | 8,624 |
|
|
||||||
| . (Files) | 3 | 63 | 6 | 22 | 91 |
|
|
||||||
| components | 13 | 3,874 | 475 | 501 | 4,850 |
|
|
||||||
| components (Files) | 8 | 2,641 | 317 | 343 | 3,301 |
|
|
||||||
| components/cells | 5 | 1,233 | 158 | 158 | 1,549 |
|
|
||||||
| hooks | 6 | 2,281 | 429 | 464 | 3,174 |
|
|
||||||
| types | 1 | 16 | 4 | 4 | 24 |
|
|
||||||
| utils | 5 | 317 | 109 | 59 | 485 |
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+------------+------------+------------+------------+------------+
|
|
||||||
|
|
||||||
Files
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+----------------+------------+------------+------------+------------+
|
|
||||||
| filename | language | code | comment | blank | total |
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+----------------+------------+------------+------------+------------+
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/README.md | Markdown | 39 | 0 | 19 | 58 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/AiValidationDialogs.tsx | TypeScript JSX | 230 | 10 | 8 | 248 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/BaseCellContent.tsx | TypeScript JSX | 18 | 0 | 3 | 21 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SaveTemplateDialog.tsx | TypeScript JSX | 83 | 0 | 4 | 87 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/SearchableTemplateSelect.tsx | TypeScript JSX | 273 | 19 | 37 | 329 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/TemplateManager.tsx | TypeScript JSX | 193 | 4 | 15 | 212 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationCell.tsx | TypeScript JSX | 374 | 42 | 44 | 460 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationContainer.tsx | TypeScript JSX | 971 | 194 | 178 | 1,343 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/ValidationTable.tsx | TypeScript JSX | 499 | 48 | 54 | 601 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/CheckboxCell.tsx | TypeScript JSX | 112 | 12 | 21 | 145 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/InputCell.tsx | TypeScript JSX | 232 | 31 | 32 | 295 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultiSelectCell.tsx | TypeScript JSX | 407 | 56 | 52 | 515 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/MultilineInput.tsx | TypeScript JSX | 193 | 23 | 22 | 238 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/components/cells/SelectCell.tsx | TypeScript JSX | 289 | 36 | 31 | 356 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useAiValidation.tsx | TypeScript JSX | 500 | 75 | 89 | 664 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useFilters.tsx | TypeScript JSX | 89 | 12 | 16 | 117 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useTemplates.tsx | TypeScript JSX | 204 | 26 | 33 | 263 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useUpcValidation.tsx | TypeScript JSX | 209 | 49 | 50 | 308 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidation.tsx | TypeScript JSX | 219 | 39 | 47 | 305 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/hooks/useValidationState.tsx | TypeScript JSX | 1,060 | 228 | 229 | 1,517 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/index.tsx | TypeScript JSX | 20 | 6 | 2 | 28 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types.ts | TypeScript | 4 | 0 | 1 | 5 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/types/index.ts | TypeScript | 16 | 4 | 4 | 24 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/dataMutations.ts | TypeScript | 124 | 4 | 14 | 142 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/errorUtils.ts | TypeScript | 21 | 15 | 5 | 41 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/upcValidation.ts | TypeScript | 43 | 24 | 7 | 74 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validation-helper.js | JavaScript | 28 | 7 | 9 | 44 |
|
|
||||||
| /Users/matt/Dev/inventory/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStepNew/utils/validationUtils.ts | TypeScript | 101 | 59 | 24 | 184 |
|
|
||||||
| Total | | 6,551 | 1,023 | 1,050 | 8,624 |
|
|
||||||
+------------------------------------------------------------------------------------------------------------------------------------------+----------------+------------+------------+------------+------------+
|
|
||||||
4
.gitignore
vendored
4
.gitignore
vendored
@@ -64,3 +64,7 @@ csv/**/*
|
|||||||
!csv/.gitkeep
|
!csv/.gitkeep
|
||||||
inventory/tsconfig.tsbuildinfo
|
inventory/tsconfig.tsbuildinfo
|
||||||
inventory-server/scripts/.fuse_hidden00000fa20000000a
|
inventory-server/scripts/.fuse_hidden00000fa20000000a
|
||||||
|
|
||||||
|
.VSCodeCounter/
|
||||||
|
.VSCodeCounter/*
|
||||||
|
.VSCodeCounter/**/*
|
||||||
2249
inventory/package-lock.json
generated
2249
inventory/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -10,21 +10,6 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@chakra-ui/button": "^2.1.0",
|
|
||||||
"@chakra-ui/checkbox": "^2.3.2",
|
|
||||||
"@chakra-ui/form-control": "^2.2.0",
|
|
||||||
"@chakra-ui/hooks": "^2.4.3",
|
|
||||||
"@chakra-ui/icons": "^2.2.4",
|
|
||||||
"@chakra-ui/input": "^2.1.2",
|
|
||||||
"@chakra-ui/layout": "^2.3.1",
|
|
||||||
"@chakra-ui/modal": "^2.3.1",
|
|
||||||
"@chakra-ui/popper": "^3.1.0",
|
|
||||||
"@chakra-ui/react": "^2.8.1",
|
|
||||||
"@chakra-ui/select": "^2.1.2",
|
|
||||||
"@chakra-ui/system": "^2.6.2",
|
|
||||||
"@chakra-ui/theme": "^3.4.7",
|
|
||||||
"@chakra-ui/theme-tools": "^2.2.7",
|
|
||||||
"@chakra-ui/utils": "^2.2.3",
|
|
||||||
"@dnd-kit/core": "^6.3.1",
|
"@dnd-kit/core": "^6.3.1",
|
||||||
"@dnd-kit/sortable": "^10.0.0",
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
"@dnd-kit/utilities": "^3.2.2",
|
"@dnd-kit/utilities": "^3.2.2",
|
||||||
@@ -60,8 +45,6 @@
|
|||||||
"@types/js-levenshtein": "^1.1.3",
|
"@types/js-levenshtein": "^1.1.3",
|
||||||
"@types/uuid": "^10.0.0",
|
"@types/uuid": "^10.0.0",
|
||||||
"axios": "^1.8.1",
|
"axios": "^1.8.1",
|
||||||
"chakra-react-select": "^4.7.5",
|
|
||||||
"chakra-ui-steps": "^2.0.4",
|
|
||||||
"chart.js": "^4.4.7",
|
"chart.js": "^4.4.7",
|
||||||
"chartjs-adapter-date-fns": "^3.0.0",
|
"chartjs-adapter-date-fns": "^3.0.0",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
|
|||||||
@@ -1,25 +0,0 @@
|
|||||||
import fs from 'fs-extra';
|
|
||||||
import path from 'path';
|
|
||||||
|
|
||||||
async function copyBuild() {
|
|
||||||
const sourcePath = path.resolve(__dirname, '../build');
|
|
||||||
const targetPath = path.resolve(__dirname, '../../inventory-server/frontend/build');
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Ensure the target directory exists
|
|
||||||
await fs.ensureDir(path.dirname(targetPath));
|
|
||||||
|
|
||||||
// Remove old build if it exists
|
|
||||||
await fs.remove(targetPath);
|
|
||||||
|
|
||||||
// Copy new build
|
|
||||||
await fs.copy(sourcePath, targetPath);
|
|
||||||
|
|
||||||
console.log('Build files copied successfully to server directory!');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error copying build files:', error);
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
copyBuild();
|
|
||||||
@@ -16,7 +16,6 @@ import Forecasting from "@/pages/Forecasting";
|
|||||||
import { Vendors } from '@/pages/Vendors';
|
import { Vendors } from '@/pages/Vendors';
|
||||||
import { Categories } from '@/pages/Categories';
|
import { Categories } from '@/pages/Categories';
|
||||||
import { Import } from '@/pages/Import';
|
import { Import } from '@/pages/Import';
|
||||||
import { ChakraProvider } from '@chakra-ui/react';
|
|
||||||
import { AiValidationDebug } from "@/pages/AiValidationDebug"
|
import { AiValidationDebug } from "@/pages/AiValidationDebug"
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
@@ -53,7 +52,6 @@ function App() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<ChakraProvider>
|
|
||||||
<Toaster richColors position="top-center" />
|
<Toaster richColors position="top-center" />
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/login" element={<Login />} />
|
<Route path="/login" element={<Login />} />
|
||||||
@@ -76,7 +74,6 @@ function App() {
|
|||||||
<Route path="*" element={<Navigate to="/" replace />} />
|
<Route path="*" element={<Navigate to="/" replace />} />
|
||||||
</Route>
|
</Route>
|
||||||
</Routes>
|
</Routes>
|
||||||
</ChakraProvider>
|
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ export function CategoryPerformance() {
|
|||||||
))}
|
))}
|
||||||
</Pie>
|
</Pie>
|
||||||
<Tooltip
|
<Tooltip
|
||||||
formatter={(value: number, name: string, props: any) => [
|
formatter={(value: number, _: string, props: any) => [
|
||||||
`$${value.toLocaleString()}`,
|
`$${value.toLocaleString()}`,
|
||||||
<div key="tooltip">
|
<div key="tooltip">
|
||||||
<div className="font-medium">Category Path:</div>
|
<div className="font-medium">Category Path:</div>
|
||||||
@@ -143,7 +143,7 @@ export function CategoryPerformance() {
|
|||||||
/>
|
/>
|
||||||
<YAxis tickFormatter={(value) => `${value}%`} />
|
<YAxis tickFormatter={(value) => `${value}%`} />
|
||||||
<Tooltip
|
<Tooltip
|
||||||
formatter={(value: number, name: string, props: any) => [
|
formatter={(value: number, _: string, props: any) => [
|
||||||
`${value.toFixed(1)}%`,
|
`${value.toFixed(1)}%`,
|
||||||
<div key="tooltip">
|
<div key="tooltip">
|
||||||
<div className="font-medium">Category Path:</div>
|
<div className="font-medium">Category Path:</div>
|
||||||
|
|||||||
@@ -96,7 +96,7 @@ export function ProfitAnalysis() {
|
|||||||
/>
|
/>
|
||||||
<YAxis tickFormatter={(value) => `${value}%`} />
|
<YAxis tickFormatter={(value) => `${value}%`} />
|
||||||
<Tooltip
|
<Tooltip
|
||||||
formatter={(value: number, name: string, props: any) => [
|
formatter={(value: number, _: string, props: any) => [
|
||||||
`${value.toFixed(1)}%`,
|
`${value.toFixed(1)}%`,
|
||||||
<div key="tooltip">
|
<div key="tooltip">
|
||||||
<div className="font-medium">Category Path:</div>
|
<div className="font-medium">Category Path:</div>
|
||||||
|
|||||||
@@ -33,15 +33,6 @@ interface BestSellerBrand {
|
|||||||
growth_rate: string
|
growth_rate: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface BestSellerCategory {
|
|
||||||
cat_id: number;
|
|
||||||
name: string;
|
|
||||||
units_sold: number;
|
|
||||||
revenue: string;
|
|
||||||
profit: string;
|
|
||||||
growth_rate: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface BestSellersData {
|
interface BestSellersData {
|
||||||
products: Product[]
|
products: Product[]
|
||||||
brands: BestSellerBrand[]
|
brands: BestSellerBrand[]
|
||||||
|
|||||||
@@ -9,8 +9,8 @@ import {
|
|||||||
TableRow,
|
TableRow,
|
||||||
} from "@/components/ui/table"
|
} from "@/components/ui/table"
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
import { AlertCircle, AlertTriangle } from "lucide-react"
|
|
||||||
import config from "@/config"
|
import config from "@/config"
|
||||||
|
import { format } from "date-fns"
|
||||||
|
|
||||||
interface Product {
|
interface Product {
|
||||||
pid: number;
|
pid: number;
|
||||||
@@ -24,6 +24,24 @@ interface Product {
|
|||||||
lead_time_status: string;
|
lead_time_status: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Helper functions
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
return format(new Date(dateString), 'MMM dd, yyyy')
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLeadTimeVariant = (status: string) => {
|
||||||
|
switch (status.toLowerCase()) {
|
||||||
|
case 'critical':
|
||||||
|
return 'destructive'
|
||||||
|
case 'warning':
|
||||||
|
return 'secondary'
|
||||||
|
case 'good':
|
||||||
|
return 'secondary'
|
||||||
|
default:
|
||||||
|
return 'secondary'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export function LowStockAlerts() {
|
export function LowStockAlerts() {
|
||||||
const { data: products } = useQuery<Product[]>({
|
const { data: products } = useQuery<Product[]>({
|
||||||
queryKey: ["low-stock"],
|
queryKey: ["low-stock"],
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import config from "@/config"
|
|||||||
import { formatCurrency } from "@/lib/utils"
|
import { formatCurrency } from "@/lib/utils"
|
||||||
import { ClipboardList, AlertCircle, Layers, DollarSign, ShoppingCart } from "lucide-react" // Importing icons
|
import { ClipboardList, AlertCircle, Layers, DollarSign, ShoppingCart } from "lucide-react" // Importing icons
|
||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
import { PurchaseOrderStatus, ReceivingStatus } from "@/types/status-codes"
|
|
||||||
|
|
||||||
interface PurchaseMetricsData {
|
interface PurchaseMetricsData {
|
||||||
activePurchaseOrders: number // Orders that are not canceled, done, or fully received
|
activePurchaseOrders: number // Orders that are not canceled, done, or fully received
|
||||||
|
|||||||
@@ -41,14 +41,6 @@ export function TrendingProducts() {
|
|||||||
signDisplay: "exceptZero",
|
signDisplay: "exceptZero",
|
||||||
}).format(value / 100)
|
}).format(value / 100)
|
||||||
|
|
||||||
const formatCurrency = (value: number) =>
|
|
||||||
new Intl.NumberFormat("en-US", {
|
|
||||||
style: "currency",
|
|
||||||
currency: "USD",
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
maximumFractionDigits: 2,
|
|
||||||
}).format(value)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
|
|||||||
@@ -169,7 +169,7 @@ export const renderSubComponent = ({ row }: { row: any }) => {
|
|||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{products.map((product) => (
|
{products.map((product: Product) => (
|
||||||
<TableRow key={product.pid}>
|
<TableRow key={product.pid}>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<a
|
<a
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import merge from "lodash/merge"
|
import merge from "lodash/merge"
|
||||||
|
|
||||||
import { Steps } from "./steps/Steps"
|
import { Steps } from "./steps/Steps"
|
||||||
import { rtlThemeSupport, themeOverrides } from "./theme"
|
|
||||||
import { Providers } from "./components/Providers"
|
import { Providers } from "./components/Providers"
|
||||||
import type { RsiProps } from "./types"
|
import type { RsiProps } from "./types"
|
||||||
import { ModalWrapper } from "./components/ModalWrapper"
|
import { ModalWrapper } from "./components/ModalWrapper"
|
||||||
import { translations } from "./translationsRSIProps"
|
import { translations } from "./translationsRSIProps"
|
||||||
|
|
||||||
export const defaultTheme = themeOverrides
|
// Simple empty theme placeholder
|
||||||
|
export const defaultTheme = {}
|
||||||
|
|
||||||
export const defaultRSIProps: Partial<RsiProps<any>> = {
|
export const defaultRSIProps: Partial<RsiProps<any>> = {
|
||||||
autoMapHeaders: true,
|
autoMapHeaders: true,
|
||||||
@@ -27,12 +27,9 @@ export const ReactSpreadsheetImport = <T extends string>(propsWithoutDefaults: R
|
|||||||
const props = merge({}, defaultRSIProps, propsWithoutDefaults)
|
const props = merge({}, defaultRSIProps, propsWithoutDefaults)
|
||||||
const mergedTranslations =
|
const mergedTranslations =
|
||||||
props.translations !== translations ? merge(translations, props.translations) : translations
|
props.translations !== translations ? merge(translations, props.translations) : translations
|
||||||
const mergedThemes = props.rtl
|
|
||||||
? merge(defaultTheme, rtlThemeSupport, props.customTheme)
|
|
||||||
: merge(defaultTheme, props.customTheme)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Providers theme={mergedThemes} rsiValues={{ ...props, translations: mergedTranslations }}>
|
<Providers rsiValues={{ ...props, translations: mergedTranslations }}>
|
||||||
<ModalWrapper isOpen={props.isOpen} onClose={props.onClose}>
|
<ModalWrapper isOpen={props.isOpen} onClose={props.onClose}>
|
||||||
<Steps />
|
<Steps />
|
||||||
</ModalWrapper>
|
</ModalWrapper>
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import { createContext } from "react"
|
||||||
|
import type { RsiProps } from "../types"
|
||||||
|
|
||||||
|
export const RsiContext = createContext({} as any)
|
||||||
|
|
||||||
|
type ProvidersProps<T extends string> = {
|
||||||
|
children: React.ReactNode
|
||||||
|
rsiValues: RsiProps<T>
|
||||||
|
}
|
||||||
|
|
||||||
|
// No need for a root ID as we're not using Chakra anymore
|
||||||
|
export const rootId = "rsi-modal-root"
|
||||||
|
|
||||||
|
export const Providers = <T extends string>({ children, rsiValues }: ProvidersProps<T>) => {
|
||||||
|
if (!rsiValues.fields) {
|
||||||
|
throw new Error("Fields must be provided to react-spreadsheet-import")
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<RsiContext.Provider value={{ ...rsiValues }}>
|
||||||
|
{children}
|
||||||
|
</RsiContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,2 +1,3 @@
|
|||||||
export { StepType } from "./steps/UploadFlow"
|
export { StepType } from "./steps/UploadFlow"
|
||||||
export { ReactSpreadsheetImport } from "./ReactSpreadsheetImport"
|
export { ReactSpreadsheetImport } from "./ReactSpreadsheetImport"
|
||||||
|
export * from "./types"
|
||||||
@@ -0,0 +1,294 @@
|
|||||||
|
import { useCallback, useState, useRef, useEffect, createRef } from "react";
|
||||||
|
import { useRsi } from "../../hooks/useRsi";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import {
|
||||||
|
DndContext,
|
||||||
|
KeyboardSensor,
|
||||||
|
PointerSensor,
|
||||||
|
useSensor,
|
||||||
|
useSensors,
|
||||||
|
DragOverlay
|
||||||
|
} from '@dnd-kit/core';
|
||||||
|
import {
|
||||||
|
sortableKeyboardCoordinates} from '@dnd-kit/sortable';
|
||||||
|
import { Product } from "./types";
|
||||||
|
import { GenericDropzone } from "./components/GenericDropzone";
|
||||||
|
import { UnassignedImagesSection } from "./components/UnassignedImagesSection";
|
||||||
|
import { ProductCard } from "./components/ProductCard/ProductCard";
|
||||||
|
import { useDragAndDrop } from "./hooks/useDragAndDrop";
|
||||||
|
import { useProductImagesInit } from "./hooks/useProductImagesInit";
|
||||||
|
import { useProductImageOperations } from "./hooks/useProductImageOperations";
|
||||||
|
import { useBulkImageUpload } from "./hooks/useBulkImageUpload";
|
||||||
|
import { useUrlImageUpload } from "./hooks/useUrlImageUpload";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
data: Product[];
|
||||||
|
file: File;
|
||||||
|
onBack?: () => void;
|
||||||
|
onSubmit: (data: Product[], file: File) => void | Promise<any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ImageUploadStep = ({
|
||||||
|
data,
|
||||||
|
file,
|
||||||
|
onBack,
|
||||||
|
onSubmit
|
||||||
|
}: Props) => {
|
||||||
|
useRsi();
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
const fileInputRefs = useRef<{ [key: number]: React.RefObject<HTMLInputElement> }>({});
|
||||||
|
|
||||||
|
// Use our hook for product images initialization
|
||||||
|
const { productImages, setProductImages, getFullImageUrl } = useProductImagesInit(data);
|
||||||
|
|
||||||
|
// Use our hook for product image operations
|
||||||
|
const {
|
||||||
|
addImageToProduct,
|
||||||
|
handleImageUpload,
|
||||||
|
removeImage
|
||||||
|
} = useProductImageOperations({
|
||||||
|
data,
|
||||||
|
productImages,
|
||||||
|
setProductImages
|
||||||
|
});
|
||||||
|
|
||||||
|
// Use our hook for URL image uploads
|
||||||
|
const {
|
||||||
|
urlInputs,
|
||||||
|
processingUrls,
|
||||||
|
handleAddImageFromUrl,
|
||||||
|
updateUrlInput
|
||||||
|
} = useUrlImageUpload({
|
||||||
|
data,
|
||||||
|
setProductImages,
|
||||||
|
addImageToProduct
|
||||||
|
});
|
||||||
|
|
||||||
|
// Use our hook for bulk image uploads
|
||||||
|
const {
|
||||||
|
unassignedImages,
|
||||||
|
processingBulk,
|
||||||
|
showUnassigned,
|
||||||
|
setShowUnassigned,
|
||||||
|
handleBulkUpload,
|
||||||
|
assignImageToProduct,
|
||||||
|
removeUnassignedImage,
|
||||||
|
cleanupPreviewUrls
|
||||||
|
} = useBulkImageUpload({
|
||||||
|
data,
|
||||||
|
handleImageUpload
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set up sensors for drag and drop with enhanced configuration
|
||||||
|
const sensors = useSensors(
|
||||||
|
useSensor(PointerSensor, {
|
||||||
|
// Make it responsive with less restrictive constraints
|
||||||
|
activationConstraint: {
|
||||||
|
distance: 1, // Reduced distance for more responsive drag
|
||||||
|
delay: 0, // No delay
|
||||||
|
tolerance: 5
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
useSensor(KeyboardSensor, {
|
||||||
|
coordinateGetter: sortableKeyboardCoordinates,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// Use the drag and drop hook
|
||||||
|
const {
|
||||||
|
activeId,
|
||||||
|
activeImage,
|
||||||
|
activeDroppableId,
|
||||||
|
customCollisionDetection,
|
||||||
|
findContainer,
|
||||||
|
getProductContainerClasses,
|
||||||
|
handleDragStart,
|
||||||
|
handleDragOver,
|
||||||
|
handleDragEnd
|
||||||
|
} = useDragAndDrop({
|
||||||
|
productImages,
|
||||||
|
setProductImages,
|
||||||
|
data
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize refs for each product
|
||||||
|
useEffect(() => {
|
||||||
|
// Create refs for each product's file input
|
||||||
|
data.forEach((_: Product, index: number) => {
|
||||||
|
if (!fileInputRefs.current[index]) {
|
||||||
|
fileInputRefs.current[index] = createRef<HTMLInputElement>();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
// Add this CSS for preventing browser drag behavior
|
||||||
|
useEffect(() => {
|
||||||
|
// Add a custom style element to the document head
|
||||||
|
const styleEl = document.createElement('style');
|
||||||
|
styleEl.textContent = `
|
||||||
|
.no-native-drag {
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.no-native-drag img {
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(styleEl);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
// Clean up on unmount
|
||||||
|
document.head.removeChild(styleEl);
|
||||||
|
// Clean up preview URLs
|
||||||
|
cleanupPreviewUrls();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Handle calling onSubmit with the current data
|
||||||
|
const handleSubmit = useCallback(async () => {
|
||||||
|
setIsSubmitting(true);
|
||||||
|
try {
|
||||||
|
// First, we need to ensure product_images is properly formatted for each product
|
||||||
|
const updatedData = [...data].map((product, index) => {
|
||||||
|
// Get all images for this product
|
||||||
|
const images = productImages
|
||||||
|
.filter(img => img.productIndex === index)
|
||||||
|
.map(img => img.imageUrl)
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
// Update the product with the formatted image URLs
|
||||||
|
return {
|
||||||
|
...product,
|
||||||
|
// Store as comma-separated string to ensure compatibility
|
||||||
|
product_images: images.join(',')
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
await onSubmit(updatedData, file);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Submit error:', error);
|
||||||
|
toast.error(`Failed to submit: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
}, [data, file, onSubmit, productImages]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-[calc(100vh-9.5rem)] overflow-hidden">
|
||||||
|
{/* Header - fixed at top */}
|
||||||
|
<div className="px-8 py-6 bg-background shrink-0">
|
||||||
|
<h2 className="text-2xl font-semibold">Add Product Images</h2>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">
|
||||||
|
Drag images to reorder them or move them between products.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content area - only this part scrolls */}
|
||||||
|
<div className="flex-1 overflow-hidden">
|
||||||
|
<div className="h-full flex flex-col overflow-auto">
|
||||||
|
<div className="px-8 py-4 shrink-0">
|
||||||
|
<GenericDropzone
|
||||||
|
processingBulk={processingBulk}
|
||||||
|
unassignedImages={unassignedImages}
|
||||||
|
showUnassigned={showUnassigned}
|
||||||
|
onDrop={handleBulkUpload}
|
||||||
|
onShowUnassigned={() => setShowUnassigned(true)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="px-8 py-2 shrink-0">
|
||||||
|
<UnassignedImagesSection
|
||||||
|
showUnassigned={showUnassigned}
|
||||||
|
unassignedImages={unassignedImages}
|
||||||
|
data={data}
|
||||||
|
onHide={() => setShowUnassigned(false)}
|
||||||
|
onAssign={assignImageToProduct}
|
||||||
|
onRemove={removeUnassignedImage}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scrollable product cards */}
|
||||||
|
<div className="px-8 py-2 flex-1">
|
||||||
|
<DndContext
|
||||||
|
sensors={sensors}
|
||||||
|
collisionDetection={customCollisionDetection}
|
||||||
|
onDragStart={handleDragStart}
|
||||||
|
onDragOver={handleDragOver}
|
||||||
|
onDragEnd={handleDragEnd}
|
||||||
|
autoScroll={{
|
||||||
|
threshold: {
|
||||||
|
x: 0,
|
||||||
|
y: 0.2,
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{data.map((product: Product, index: number) => (
|
||||||
|
<ProductCard
|
||||||
|
key={index}
|
||||||
|
product={product}
|
||||||
|
index={index}
|
||||||
|
urlInput={urlInputs[index] || ''}
|
||||||
|
processingUrl={processingUrls[index] || false}
|
||||||
|
activeDroppableId={activeDroppableId}
|
||||||
|
activeId={activeId}
|
||||||
|
productImages={productImages}
|
||||||
|
fileInputRef={fileInputRefs.current[index] || createRef()}
|
||||||
|
onUrlInputChange={(value: string) => updateUrlInput(index, value)}
|
||||||
|
onUrlSubmit={(e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (urlInputs[index]) {
|
||||||
|
handleAddImageFromUrl(index, urlInputs[index]);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onImageUpload={(files: FileList | File[]) => handleImageUpload(files, index)}
|
||||||
|
onDragOver={(e: React.DragEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
onRemoveImage={(imageId: string) =>
|
||||||
|
removeImage(productImages.findIndex(img => img.id === imageId))
|
||||||
|
}
|
||||||
|
getProductContainerClasses={() => getProductContainerClasses(index)}
|
||||||
|
findContainer={findContainer}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DragOverlay>
|
||||||
|
{activeImage && (
|
||||||
|
<div className="relative border rounded-md overflow-hidden shadow-md bg-white">
|
||||||
|
<img
|
||||||
|
src={getFullImageUrl(activeImage.imageUrl)}
|
||||||
|
alt={activeImage.fileName}
|
||||||
|
className="w-24 h-24 object-contain "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DragOverlay>
|
||||||
|
</DndContext>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer - fixed at bottom */}
|
||||||
|
<div className="flex items-center justify-between border-t bg-muted px-8 py-4 mt-1 shrink-0">
|
||||||
|
{onBack && (
|
||||||
|
<Button variant="outline" onClick={onBack}>
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
className="ml-auto"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={isSubmitting || unassignedImages.length > 0}
|
||||||
|
>
|
||||||
|
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
{unassignedImages.length > 0 ? 'Assign all images first' : 'Submit'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import { useDroppable } from '@dnd-kit/core';
|
||||||
|
|
||||||
|
interface DroppableContainerProps {
|
||||||
|
id: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
isEmpty: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DroppableContainer = ({ id, children, isEmpty }: DroppableContainerProps) => {
|
||||||
|
const { setNodeRef } = useDroppable({
|
||||||
|
id,
|
||||||
|
data: {
|
||||||
|
type: 'container',
|
||||||
|
isEmpty
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={setNodeRef}
|
||||||
|
id={id}
|
||||||
|
data-droppable="true"
|
||||||
|
data-empty={isEmpty ? "true" : "false"}
|
||||||
|
className="w-full h-full flex flex-row flex-wrap gap-2"
|
||||||
|
style={{ minHeight: '100px' }} // Ensure minimum height for empty containers
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Loader2, Upload } from "lucide-react";
|
||||||
|
import { useDropzone } from "react-dropzone";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface GenericDropzoneProps {
|
||||||
|
processingBulk: boolean;
|
||||||
|
unassignedImages: { previewUrl: string; file: File }[];
|
||||||
|
showUnassigned: boolean;
|
||||||
|
onDrop: (files: File[]) => void;
|
||||||
|
onShowUnassigned: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const GenericDropzone = ({
|
||||||
|
processingBulk,
|
||||||
|
unassignedImages,
|
||||||
|
showUnassigned,
|
||||||
|
onDrop,
|
||||||
|
onShowUnassigned
|
||||||
|
}: GenericDropzoneProps) => {
|
||||||
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||||
|
accept: {
|
||||||
|
'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp']
|
||||||
|
},
|
||||||
|
onDrop,
|
||||||
|
multiple: true
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
{...getRootProps()}
|
||||||
|
className={cn(
|
||||||
|
"border-2 border-dashed border-secondary-foreground/30 bg-muted/90 rounded-md w-full py-6 flex flex-col items-center justify-center cursor-pointer hover:bg-muted/70 transition-colors",
|
||||||
|
isDragActive && "border-primary bg-muted"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<input {...getInputProps()} />
|
||||||
|
<div className="flex flex-col items-center justify-center h-32 py-2">
|
||||||
|
{processingBulk ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-primary mb-2" />
|
||||||
|
<p className="text-base text-muted-foreground">Processing images...</p>
|
||||||
|
</>
|
||||||
|
) : isDragActive ? (
|
||||||
|
<>
|
||||||
|
<Upload className="h-8 w-8 mb-2 text-primary" />
|
||||||
|
<p className="text-base text-muted-foreground mb-2">Drop images here</p>
|
||||||
|
<p className="text-sm text-muted-foreground"> </p>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Upload className="h-8 w-8 mb-2 text-muted-foreground" />
|
||||||
|
<p className="text-base text-muted-foreground mb-2">Drop images here or click to select</p>
|
||||||
|
<p className="text-sm text-muted-foreground">Images dropped here will be automatically assigned to products based on filename</p>
|
||||||
|
{unassignedImages.length > 0 && !showUnassigned && (
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
size="sm"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onShowUnassigned();
|
||||||
|
}}
|
||||||
|
className="mt-2 text-amber-600 dark:text-amber-400"
|
||||||
|
>
|
||||||
|
Show {unassignedImages.length} unassigned {unassignedImages.length === 1 ? 'image' : 'images'}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Copy, Check } from "lucide-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
interface CopyButtonProps {
|
||||||
|
text: string;
|
||||||
|
itemKey: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CopyButton = ({ text }: CopyButtonProps) => {
|
||||||
|
const [isCopied, setIsCopied] = useState(false);
|
||||||
|
const canCopy = text && text !== 'N/A';
|
||||||
|
|
||||||
|
const copyToClipboard = () => {
|
||||||
|
if (!canCopy) return;
|
||||||
|
|
||||||
|
navigator.clipboard.writeText(text)
|
||||||
|
.then(() => {
|
||||||
|
// Show success state
|
||||||
|
setIsCopied(true);
|
||||||
|
|
||||||
|
// Show toast notification
|
||||||
|
toast.success(`Copied: ${text}`);
|
||||||
|
|
||||||
|
// Reset after 2 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsCopied(false);
|
||||||
|
}, 2000);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.error('Failed to copy:', err);
|
||||||
|
toast.error('Failed to copy to clipboard');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
copyToClipboard();
|
||||||
|
}}
|
||||||
|
className={`ml-1 inline-flex items-center justify-center rounded-full p-1 transition-colors ${
|
||||||
|
canCopy
|
||||||
|
? isCopied
|
||||||
|
? "bg-green-100 text-green-600 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400"
|
||||||
|
: "text-muted-foreground hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||||
|
: "opacity-50 cursor-not-allowed"
|
||||||
|
}`}
|
||||||
|
disabled={!canCopy}
|
||||||
|
title={canCopy ? "Copy to clipboard" : "Nothing to copy"}
|
||||||
|
>
|
||||||
|
{isCopied ? (
|
||||||
|
<Check className="h-3 w-3" />
|
||||||
|
) : (
|
||||||
|
<Copy className="h-3 w-3" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import { Upload } from "lucide-react";
|
||||||
|
import { useDropzone } from "react-dropzone";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface ImageDropzoneProps {
|
||||||
|
productIndex: number;
|
||||||
|
onDrop: (files: File[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ImageDropzone = ({ onDrop }: ImageDropzoneProps) => {
|
||||||
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||||
|
accept: {
|
||||||
|
'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp']
|
||||||
|
},
|
||||||
|
onDrop: (acceptedFiles) => {
|
||||||
|
onDrop(acceptedFiles);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
{...getRootProps()}
|
||||||
|
className={cn(
|
||||||
|
"border-2 border-dashed border-secondary-foreground/30 bg-muted/90 rounded-md h-24 w-24 flex flex-col items-center justify-center self-center cursor-pointer hover:bg-muted/70 transition-colors shrink-0",
|
||||||
|
isDragActive && "border-primary bg-muted"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<input {...getInputProps()} />
|
||||||
|
{isDragActive ? (
|
||||||
|
<div className="text-xs text-center text-muted-foreground p-1">Drop images here</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Upload className="h-5 w-5 mb-1 text-muted-foreground" />
|
||||||
|
<span className="text-xs text-muted-foreground">Add Images</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,163 @@
|
|||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Loader2, Link as LinkIcon } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { ImageDropzone } from "./ImageDropzone";
|
||||||
|
import { SortableImage } from "./SortableImage";
|
||||||
|
import { CopyButton } from "./CopyButton";
|
||||||
|
import { ProductImageSortable, Product } from "../../types";
|
||||||
|
import { DroppableContainer } from "../DroppableContainer";
|
||||||
|
import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
|
||||||
|
|
||||||
|
interface ProductCardProps {
|
||||||
|
product: Product;
|
||||||
|
index: number;
|
||||||
|
urlInput: string;
|
||||||
|
processingUrl: boolean;
|
||||||
|
activeDroppableId: string | null;
|
||||||
|
activeId: string | null;
|
||||||
|
productImages: ProductImageSortable[];
|
||||||
|
fileInputRef: React.RefObject<HTMLInputElement>;
|
||||||
|
onUrlInputChange: (value: string) => void;
|
||||||
|
onUrlSubmit: (e: React.FormEvent) => void;
|
||||||
|
onImageUpload: (files: FileList | File[]) => void;
|
||||||
|
onDragOver: (e: React.DragEvent) => void;
|
||||||
|
onRemoveImage: (id: string) => void;
|
||||||
|
getProductContainerClasses: () => string;
|
||||||
|
findContainer: (id: string) => string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ProductCard = ({
|
||||||
|
product,
|
||||||
|
index,
|
||||||
|
urlInput,
|
||||||
|
processingUrl,
|
||||||
|
activeDroppableId,
|
||||||
|
activeId,
|
||||||
|
productImages,
|
||||||
|
fileInputRef,
|
||||||
|
onUrlInputChange,
|
||||||
|
onUrlSubmit,
|
||||||
|
onImageUpload,
|
||||||
|
onDragOver,
|
||||||
|
onRemoveImage,
|
||||||
|
getProductContainerClasses,
|
||||||
|
findContainer
|
||||||
|
}: ProductCardProps) => {
|
||||||
|
// Function to get images for this product
|
||||||
|
const getProductImages = () => {
|
||||||
|
return productImages.filter(img => img.productIndex === index);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Convert string container to number for internal comparison
|
||||||
|
const getContainerAsNumber = (id: string): number | null => {
|
||||||
|
const result = findContainer(id);
|
||||||
|
return result !== null ? parseInt(result) : null;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={cn(
|
||||||
|
"p-3 transition-colors",
|
||||||
|
activeDroppableId === `product-${index}` && activeId &&
|
||||||
|
getContainerAsNumber(activeId) !== index &&
|
||||||
|
"ring-2 ring-primary bg-primary/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2">
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-baseline gap-0.5 lg:gap-4">
|
||||||
|
<h3 className="text-base font-medium">{product.name || `Product #${index + 1}`}</h3>
|
||||||
|
<div className="text-xs lg:text-sm text-muted-foreground">
|
||||||
|
<span className="font-medium">UPC:</span> {product.upc || 'N/A'}
|
||||||
|
<CopyButton text={product.upc || ''} itemKey={`upc-${index}`} />
|
||||||
|
{' | '}
|
||||||
|
<span className="font-medium">Supplier #:</span> {product.supplier_no || 'N/A'}
|
||||||
|
<CopyButton text={product.supplier_no || ''} itemKey={`supplier-${index}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<form
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
onSubmit={onUrlSubmit}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
placeholder="Add image from URL"
|
||||||
|
value={urlInput}
|
||||||
|
onChange={(e) => onUrlInputChange(e.target.value)}
|
||||||
|
className="!text-xs h-8 w-[180px]"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 whitespace-nowrap flex gap-1 items-center text-xs"
|
||||||
|
disabled={processingUrl || !urlInput}
|
||||||
|
>
|
||||||
|
{processingUrl ?
|
||||||
|
<Loader2 className="h-3.5 w-3.5 animate-spin" /> :
|
||||||
|
<LinkIcon className="h-3.5 w-3.5" />}
|
||||||
|
Add
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-2">
|
||||||
|
<div className="flex flex-row gap-2 items-start">
|
||||||
|
<ImageDropzone
|
||||||
|
productIndex={index}
|
||||||
|
onDrop={onImageUpload}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={getProductContainerClasses()}
|
||||||
|
style={{
|
||||||
|
pointerEvents: 'auto',
|
||||||
|
touchAction: 'none',
|
||||||
|
minHeight: '100px',
|
||||||
|
}}
|
||||||
|
onDragOver={onDragOver}
|
||||||
|
>
|
||||||
|
<DroppableContainer
|
||||||
|
id={`product-${index}`}
|
||||||
|
isEmpty={getProductImages().length === 0}
|
||||||
|
>
|
||||||
|
{getProductImages().length > 0 ? (
|
||||||
|
<SortableContext
|
||||||
|
items={getProductImages().map(img => img.id)}
|
||||||
|
strategy={horizontalListSortingStrategy}
|
||||||
|
>
|
||||||
|
{getProductImages().map((image, imgIndex) => (
|
||||||
|
<SortableImage
|
||||||
|
key={image.id}
|
||||||
|
image={image}
|
||||||
|
productIndex={index}
|
||||||
|
imgIndex={imgIndex}
|
||||||
|
productName={product.name}
|
||||||
|
removeImage={onRemoveImage}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</SortableContext>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full" data-empty-placeholder="true"></div>
|
||||||
|
)}
|
||||||
|
</DroppableContainer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
className="hidden"
|
||||||
|
accept="image/*"
|
||||||
|
multiple
|
||||||
|
onChange={(e) => e.target.files && onImageUpload(e.target.files)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,198 @@
|
|||||||
|
import { useState, useRef } from "react";
|
||||||
|
import { useSortable } from "@dnd-kit/sortable";
|
||||||
|
import { CSS } from "@dnd-kit/utilities";
|
||||||
|
import { Loader2, Trash2, Maximize2, GripVertical, X } from "lucide-react";
|
||||||
|
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
// Define the ProductImage interface
|
||||||
|
interface ProductImage {
|
||||||
|
id: string;
|
||||||
|
url?: string;
|
||||||
|
imageUrl?: string;
|
||||||
|
fileName?: string;
|
||||||
|
loading?: boolean;
|
||||||
|
isLoading?: boolean;
|
||||||
|
// Optional fields from the full ProductImage type
|
||||||
|
productIndex?: number;
|
||||||
|
pid?: number;
|
||||||
|
iid?: number;
|
||||||
|
type?: number;
|
||||||
|
order?: number;
|
||||||
|
width?: number;
|
||||||
|
height?: number;
|
||||||
|
hidden?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Define the SortableImageProps interface
|
||||||
|
interface SortableImageProps {
|
||||||
|
image: ProductImage;
|
||||||
|
productIndex: number;
|
||||||
|
imgIndex: number;
|
||||||
|
productName?: string; // Make this optional
|
||||||
|
removeImage: (id: string) => void; // Changed to match ProductCard
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to ensure URLs are properly formatted with absolute paths
|
||||||
|
const getFullImageUrl = (url: string): string => {
|
||||||
|
// If the URL is already absolute (starts with http:// or https://) return it as is
|
||||||
|
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise, it's a relative URL, prepend the domain
|
||||||
|
const baseUrl = 'https://inventory.acot.site';
|
||||||
|
// Make sure url starts with / for path
|
||||||
|
const path = url.startsWith('/') ? url : `/${url}`;
|
||||||
|
return `${baseUrl}${path}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SortableImage = ({
|
||||||
|
image,
|
||||||
|
productIndex,
|
||||||
|
imgIndex,
|
||||||
|
productName,
|
||||||
|
removeImage
|
||||||
|
}: SortableImageProps) => {
|
||||||
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
|
|
||||||
|
const {
|
||||||
|
attributes,
|
||||||
|
listeners,
|
||||||
|
setNodeRef,
|
||||||
|
transform,
|
||||||
|
transition,
|
||||||
|
isDragging
|
||||||
|
} = useSortable({
|
||||||
|
id: image.id,
|
||||||
|
data: {
|
||||||
|
productIndex,
|
||||||
|
image,
|
||||||
|
type: 'image'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create a new style object with fixed dimensions to prevent distortion
|
||||||
|
const style: React.CSSProperties = {
|
||||||
|
transform: CSS.Transform.toString(transform),
|
||||||
|
transition,
|
||||||
|
opacity: isDragging ? 0.5 : 1,
|
||||||
|
zIndex: isDragging ? 999 : 1, // Higher z-index when dragging
|
||||||
|
touchAction: 'none', // Prevent touch scrolling during drag
|
||||||
|
userSelect: 'none', // Prevent text selection during drag
|
||||||
|
cursor: isDragging ? 'grabbing' : 'grab',
|
||||||
|
width: '96px',
|
||||||
|
height: '96px',
|
||||||
|
flexShrink: 0,
|
||||||
|
flexGrow: 0,
|
||||||
|
position: 'relative',
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create a ref for the buttons to exclude them from drag listeners
|
||||||
|
const deleteButtonRef = useRef<HTMLButtonElement>(null);
|
||||||
|
const zoomButtonRef = useRef<HTMLButtonElement>(null);
|
||||||
|
|
||||||
|
const displayName = productName || `Product #${productIndex + 1}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={setNodeRef}
|
||||||
|
style={style}
|
||||||
|
className="relative border rounded-md overflow-hidden flex items-center justify-center shrink-0 cursor-grab active:cursor-grabbing select-none no-native-drag group hover:ring-2 hover:ring-primary/30 transition-all"
|
||||||
|
{...attributes}
|
||||||
|
{...listeners}
|
||||||
|
onDragStart={(e) => {
|
||||||
|
// This ensures the native drag doesn't interfere
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{image.loading ? (
|
||||||
|
<div className="flex flex-col items-center justify-center p-2">
|
||||||
|
<Loader2 className="h-5 w-5 animate-spin mb-1" />
|
||||||
|
<span className="text-xs text-center truncate w-full">{image.fileName}</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<img
|
||||||
|
src={getFullImageUrl(image.url || image.imageUrl || '')}
|
||||||
|
alt={`${displayName} - Image ${imgIndex + 1}`}
|
||||||
|
className="h-full w-full object-cover select-none no-native-drag"
|
||||||
|
draggable={false}
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-200"></div>
|
||||||
|
<div className="absolute right-0 top-0 p-1 opacity-0 group-hover:opacity-90 transition-opacity">
|
||||||
|
<GripVertical className="h-3 w-3 text-white drop-shadow-md" />
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
ref={deleteButtonRef}
|
||||||
|
className="absolute opacity-0 group-hover:opacity-100 transition-opacity duration-200 top-1 right-1 bg-black/40 hover:bg-black/70 hover:scale-110 rounded-full p-1 text-white z-10"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation(); // Prevent triggering drag listeners
|
||||||
|
removeImage(image.id);
|
||||||
|
}}
|
||||||
|
onPointerDown={(e) => {
|
||||||
|
e.stopPropagation(); // Prevent drag from starting
|
||||||
|
}}
|
||||||
|
onMouseDown={(e) => {
|
||||||
|
e.stopPropagation(); // Prevent drag from starting
|
||||||
|
}}
|
||||||
|
onTouchStart={(e) => {
|
||||||
|
e.stopPropagation(); // Prevent drag from starting on touch
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<button
|
||||||
|
ref={zoomButtonRef}
|
||||||
|
className="absolute opacity-0 group-hover:opacity-100 transition-opacity duration-200 bottom-1 left-1 bg-black/40 hover:bg-black/70 hover:scale-110 rounded-full p-1 text-white z-10"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation(); // Prevent triggering drag listeners
|
||||||
|
setDialogOpen(true);
|
||||||
|
}}
|
||||||
|
onPointerDown={(e) => {
|
||||||
|
e.stopPropagation(); // Prevent drag from starting
|
||||||
|
}}
|
||||||
|
onMouseDown={(e) => {
|
||||||
|
e.stopPropagation(); // Prevent drag from starting
|
||||||
|
}}
|
||||||
|
onTouchStart={(e) => {
|
||||||
|
e.stopPropagation(); // Prevent drag from starting on touch
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Maximize2 className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-[650px] max-h-[90vh] p-6 bg-background/95 backdrop-blur-sm border border-border rounded-lg shadow-2xl">
|
||||||
|
<div className="relative flex flex-col items-center justify-center">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="absolute -top-2 -right-2 bg-black/60 text-white hover:bg-black/80 rounded-full z-10 h-8 w-8"
|
||||||
|
onClick={() => setDialogOpen(false)}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<div className="overflow-hidden rounded-md border border-border shadow-md bg-white dark:bg-black">
|
||||||
|
<img
|
||||||
|
src={getFullImageUrl(image.url || image.imageUrl || '')}
|
||||||
|
alt={`${displayName} - Image ${imgIndex + 1}`}
|
||||||
|
className="max-h-[70vh] max-w-full object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-sm text-muted-foreground text-center">
|
||||||
|
{`${displayName} - Image ${imgIndex + 1}`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import { AlertCircle } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { UnassignedImage, Product } from "../types";
|
||||||
|
import { UnassignedImageItem } from "./UnassignedImagesSection/UnassignedImageItem";
|
||||||
|
|
||||||
|
interface UnassignedImagesSectionProps {
|
||||||
|
showUnassigned: boolean;
|
||||||
|
unassignedImages: UnassignedImage[];
|
||||||
|
data: Product[];
|
||||||
|
onHide: () => void;
|
||||||
|
onAssign: (imageIndex: number, productIndex: number) => void;
|
||||||
|
onRemove: (index: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const UnassignedImagesSection = ({
|
||||||
|
showUnassigned,
|
||||||
|
unassignedImages,
|
||||||
|
data,
|
||||||
|
onHide,
|
||||||
|
onAssign,
|
||||||
|
onRemove
|
||||||
|
}: UnassignedImagesSectionProps) => {
|
||||||
|
if (!showUnassigned || unassignedImages.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mb-4 px-4">
|
||||||
|
<div className="bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-md p-3">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<AlertCircle className="h-5 w-5 text-amber-500" />
|
||||||
|
<h3 className="text-sm font-medium text-amber-700 dark:text-amber-400">
|
||||||
|
Unassigned Images ({unassignedImages.length})
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={onHide}
|
||||||
|
className="h-8 text-muted-foreground"
|
||||||
|
>
|
||||||
|
Hide
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||||
|
{unassignedImages.map((image, index) => (
|
||||||
|
<UnassignedImageItem
|
||||||
|
key={index}
|
||||||
|
image={image}
|
||||||
|
index={index}
|
||||||
|
data={data}
|
||||||
|
onAssign={onAssign}
|
||||||
|
onRemove={onRemove}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Trash2, Maximize2, X } from "lucide-react";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { UnassignedImage, Product } from "../../types";
|
||||||
|
|
||||||
|
interface UnassignedImageItemProps {
|
||||||
|
image: UnassignedImage;
|
||||||
|
index: number;
|
||||||
|
data: Product[];
|
||||||
|
onAssign: (imageIndex: number, productIndex: number) => void;
|
||||||
|
onRemove: (index: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const UnassignedImageItem = ({
|
||||||
|
image,
|
||||||
|
index,
|
||||||
|
data,
|
||||||
|
onAssign,
|
||||||
|
onRemove
|
||||||
|
}: UnassignedImageItemProps) => {
|
||||||
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative border rounded-md overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={image.previewUrl}
|
||||||
|
alt={`Unassigned image ${index + 1}`}
|
||||||
|
className="h-full w-full object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 bg-black/60 p-2">
|
||||||
|
<p className="text-white text-xs mb-1 truncate">{image.file.name}</p>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Select onValueChange={(value) => onAssign(index, parseInt(value))}>
|
||||||
|
<SelectTrigger className="h-7 text-xs bg-white dark:bg-gray-800 border-0 text-black dark:text-white">
|
||||||
|
<SelectValue placeholder="Assign to..." />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{data.map((product: Product, productIndex: number) => (
|
||||||
|
<SelectItem key={productIndex} value={productIndex.toString()}>
|
||||||
|
{product.name || `Product #${productIndex + 1}`}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-7 w-7 bg-white dark:bg-gray-800 text-black dark:text-white"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onRemove(index);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Zoom button for unassigned images */}
|
||||||
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<button
|
||||||
|
className="absolute top-1 left-1 bg-black/60 rounded-full p-1 text-white z-10 hover:bg-black/80"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
setDialogOpen(true);
|
||||||
|
}}
|
||||||
|
onPointerDown={(e) => e.stopPropagation()}
|
||||||
|
onMouseDown={(e) => e.stopPropagation()}
|
||||||
|
onTouchStart={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<Maximize2 className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-[650px] max-h-[90vh] p-6 bg-background/95 backdrop-blur-sm border border-border rounded-lg shadow-2xl">
|
||||||
|
<div className="relative flex flex-col items-center justify-center">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="absolute -top-2 -right-2 bg-black/60 text-white hover:bg-black/80 rounded-full z-10 h-8 w-8"
|
||||||
|
onClick={() => setDialogOpen(false)}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<div className="overflow-hidden rounded-md border border-border shadow-md bg-white dark:bg-black">
|
||||||
|
<img
|
||||||
|
src={image.previewUrl}
|
||||||
|
alt={`Unassigned image: ${image.file.name}`}
|
||||||
|
className="max-h-[70vh] max-w-full object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-sm text-muted-foreground text-center">
|
||||||
|
{`Unassigned image: ${image.file.name}`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,183 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { UnassignedImage, Product } from "../types";
|
||||||
|
|
||||||
|
type HandleImageUploadFn = (files: FileList | File[], productIndex: number) => Promise<void>;
|
||||||
|
|
||||||
|
interface UseBulkImageUploadProps {
|
||||||
|
data: Product[];
|
||||||
|
handleImageUpload: HandleImageUploadFn;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useBulkImageUpload = ({ data, handleImageUpload }: UseBulkImageUploadProps) => {
|
||||||
|
const [unassignedImages, setUnassignedImages] = useState<UnassignedImage[]>([]);
|
||||||
|
const [processingBulk, setProcessingBulk] = useState(false);
|
||||||
|
const [showUnassigned, setShowUnassigned] = useState(false);
|
||||||
|
|
||||||
|
// Function to extract identifiers from a filename
|
||||||
|
const extractIdentifiers = (filename: string): string[] => {
|
||||||
|
// Remove file extension and convert to lowercase
|
||||||
|
const nameWithoutExt = filename.split('.').slice(0, -1).join('.').toLowerCase();
|
||||||
|
|
||||||
|
// Split by common separators
|
||||||
|
const parts = nameWithoutExt.split(/[-_\s.]+/);
|
||||||
|
|
||||||
|
// Add the full name without extension as a possible identifier
|
||||||
|
const identifiers = [nameWithoutExt];
|
||||||
|
|
||||||
|
// Add parts with at least 3 characters
|
||||||
|
identifiers.push(...parts.filter(part => part.length >= 3));
|
||||||
|
|
||||||
|
// Look for potential UPC or product codes (digits only)
|
||||||
|
const digitOnlyParts = parts.filter(part => /^\d+$/.test(part) && part.length >= 5);
|
||||||
|
identifiers.push(...digitOnlyParts);
|
||||||
|
|
||||||
|
// Look for product codes (mix of letters and digits)
|
||||||
|
const productCodes = parts.filter(part =>
|
||||||
|
/^[a-z0-9]+$/.test(part) &&
|
||||||
|
/\d/.test(part) &&
|
||||||
|
/[a-z]/.test(part) &&
|
||||||
|
part.length >= 4
|
||||||
|
);
|
||||||
|
identifiers.push(...productCodes);
|
||||||
|
|
||||||
|
return [...new Set(identifiers)]; // Remove duplicates
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to find product index by identifier
|
||||||
|
const findProductByIdentifier = (identifier: string): number => {
|
||||||
|
// Try to match against supplier_no, upc, SKU, or name
|
||||||
|
return data.findIndex((product: Product) => {
|
||||||
|
// Skip if product is missing all identifiers
|
||||||
|
if (!product.supplier_no && !product.upc && !product.sku && !product.name) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const supplierNo = String(product.supplier_no || '').toLowerCase();
|
||||||
|
const upc = String(product.upc || '').toLowerCase();
|
||||||
|
const sku = String(product.sku || '').toLowerCase();
|
||||||
|
const name = String(product.name || '').toLowerCase();
|
||||||
|
const model = String(product.model || '').toLowerCase();
|
||||||
|
|
||||||
|
// For exact matches, prioritize certain fields
|
||||||
|
if (
|
||||||
|
(supplierNo && identifier === supplierNo) ||
|
||||||
|
(upc && identifier === upc) ||
|
||||||
|
(sku && identifier === sku)
|
||||||
|
) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// For partial matches, check if the identifier is contained within the field
|
||||||
|
// or if the field is contained within the identifier
|
||||||
|
return (
|
||||||
|
(supplierNo && (supplierNo.includes(identifier) || identifier.includes(supplierNo))) ||
|
||||||
|
(upc && (upc.includes(identifier) || identifier.includes(upc))) ||
|
||||||
|
(sku && (sku.includes(identifier) || identifier.includes(sku))) ||
|
||||||
|
(model && (model.includes(identifier) || identifier.includes(model))) ||
|
||||||
|
(name && name.includes(identifier))
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to create preview URLs for files
|
||||||
|
const createPreviewUrl = (file: File): string => {
|
||||||
|
return URL.createObjectURL(file);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to handle bulk image upload
|
||||||
|
const handleBulkUpload = async (files: File[]) => {
|
||||||
|
if (!files.length) return;
|
||||||
|
|
||||||
|
setProcessingBulk(true);
|
||||||
|
const unassigned: UnassignedImage[] = [];
|
||||||
|
|
||||||
|
for (const file of files) {
|
||||||
|
// Extract identifiers from filename
|
||||||
|
const identifiers = extractIdentifiers(file.name);
|
||||||
|
let assigned = false;
|
||||||
|
|
||||||
|
// Try to match each identifier
|
||||||
|
for (const identifier of identifiers) {
|
||||||
|
const productIndex = findProductByIdentifier(identifier);
|
||||||
|
|
||||||
|
if (productIndex !== -1) {
|
||||||
|
// Found a match, upload to this product
|
||||||
|
await handleImageUpload([file], productIndex);
|
||||||
|
assigned = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If no match was found, add to unassigned
|
||||||
|
if (!assigned) {
|
||||||
|
unassigned.push({
|
||||||
|
file,
|
||||||
|
previewUrl: createPreviewUrl(file)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update unassigned images
|
||||||
|
setUnassignedImages(prev => [...prev, ...unassigned]);
|
||||||
|
setProcessingBulk(false);
|
||||||
|
|
||||||
|
// Show summary toast
|
||||||
|
const assignedCount = files.length - unassigned.length;
|
||||||
|
if (assignedCount > 0) {
|
||||||
|
toast.success(`Auto-assigned ${assignedCount} ${assignedCount === 1 ? 'image' : 'images'} to products`);
|
||||||
|
}
|
||||||
|
if (unassigned.length > 0) {
|
||||||
|
toast.warning(`Could not auto-assign ${unassigned.length} ${unassigned.length === 1 ? 'image' : 'images'}`);
|
||||||
|
setShowUnassigned(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to manually assign an unassigned image
|
||||||
|
const assignImageToProduct = async (imageIndex: number, productIndex: number) => {
|
||||||
|
const image = unassignedImages[imageIndex];
|
||||||
|
if (!image) return;
|
||||||
|
|
||||||
|
// Upload the image to the selected product
|
||||||
|
await handleImageUpload([image.file], productIndex);
|
||||||
|
|
||||||
|
// Remove from unassigned list
|
||||||
|
setUnassignedImages(prev => prev.filter((_, idx) => idx !== imageIndex));
|
||||||
|
|
||||||
|
// Revoke the preview URL to free memory
|
||||||
|
URL.revokeObjectURL(image.previewUrl);
|
||||||
|
|
||||||
|
toast.success(`Image assigned to ${data[productIndex].name || `Product #${productIndex + 1}`}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to remove an unassigned image
|
||||||
|
const removeUnassignedImage = (index: number) => {
|
||||||
|
const image = unassignedImages[index];
|
||||||
|
if (!image) return;
|
||||||
|
|
||||||
|
// Revoke the preview URL to free memory
|
||||||
|
URL.revokeObjectURL(image.previewUrl);
|
||||||
|
|
||||||
|
// Remove from state
|
||||||
|
setUnassignedImages(prev => prev.filter((_, idx) => idx !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Cleanup function for preview URLs
|
||||||
|
const cleanupPreviewUrls = () => {
|
||||||
|
unassignedImages.forEach(image => {
|
||||||
|
URL.revokeObjectURL(image.previewUrl);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
unassignedImages,
|
||||||
|
setUnassignedImages,
|
||||||
|
processingBulk,
|
||||||
|
showUnassigned,
|
||||||
|
setShowUnassigned,
|
||||||
|
handleBulkUpload,
|
||||||
|
assignImageToProduct,
|
||||||
|
removeUnassignedImage,
|
||||||
|
cleanupPreviewUrls
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,340 @@
|
|||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
DragEndEvent,
|
||||||
|
DragStartEvent,
|
||||||
|
DragMoveEvent,
|
||||||
|
CollisionDetection,
|
||||||
|
pointerWithin,
|
||||||
|
rectIntersection
|
||||||
|
} from '@dnd-kit/core';
|
||||||
|
import { arrayMove } from '@dnd-kit/sortable';
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { ProductImageSortable } from "../types";
|
||||||
|
|
||||||
|
type UseDragAndDropProps = {
|
||||||
|
productImages: ProductImageSortable[];
|
||||||
|
setProductImages: React.Dispatch<React.SetStateAction<ProductImageSortable[]>>;
|
||||||
|
data: any[];
|
||||||
|
};
|
||||||
|
|
||||||
|
type UseDragAndDropReturn = {
|
||||||
|
activeId: string | null;
|
||||||
|
activeImage: ProductImageSortable | null;
|
||||||
|
activeDroppableId: string | null;
|
||||||
|
customCollisionDetection: CollisionDetection;
|
||||||
|
findContainer: (id: string) => string | null;
|
||||||
|
getProductImages: (productIndex: number) => ProductImageSortable[];
|
||||||
|
getProductContainerClasses: (index: number) => string;
|
||||||
|
handleDragStart: (event: DragStartEvent) => void;
|
||||||
|
handleDragOver: (event: DragMoveEvent) => void;
|
||||||
|
handleDragEnd: (event: DragEndEvent) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useDragAndDrop = ({
|
||||||
|
productImages,
|
||||||
|
setProductImages,
|
||||||
|
data
|
||||||
|
}: UseDragAndDropProps): UseDragAndDropReturn => {
|
||||||
|
const [activeId, setActiveId] = useState<string | null>(null);
|
||||||
|
const [activeImage, setActiveImage] = useState<ProductImageSortable | null>(null);
|
||||||
|
const [activeDroppableId, setActiveDroppableId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Custom collision detection algorithm that prioritizes product containers
|
||||||
|
const customCollisionDetection: CollisionDetection = (args) => {
|
||||||
|
// Use the built-in pointerWithin algorithm first for better performance
|
||||||
|
const pointerCollisions = pointerWithin(args);
|
||||||
|
|
||||||
|
if (pointerCollisions.length > 0) {
|
||||||
|
return pointerCollisions;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fall back to rectIntersection if no pointer collisions
|
||||||
|
return rectIntersection(args);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to find container (productIndex) an image belongs to
|
||||||
|
const findContainer = (id: string) => {
|
||||||
|
const image = productImages.find(img => img.id === id);
|
||||||
|
return image ? image.productIndex.toString() : null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to get images for a specific product
|
||||||
|
const getProductImages = (productIndex: number) => {
|
||||||
|
return productImages.filter(img => img.productIndex === productIndex);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle drag start to set active image and prevent default behavior
|
||||||
|
const handleDragStart = (event: DragStartEvent) => {
|
||||||
|
const { active } = event;
|
||||||
|
|
||||||
|
const activeImageItem = productImages.find(img => img.id === active.id);
|
||||||
|
setActiveId(active.id.toString());
|
||||||
|
if (activeImageItem) {
|
||||||
|
setActiveImage(activeImageItem);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle drag over to track which product container is being hovered
|
||||||
|
const handleDragOver = (event: DragMoveEvent) => {
|
||||||
|
const { over } = event;
|
||||||
|
|
||||||
|
if (!over) {
|
||||||
|
setActiveDroppableId(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let overContainer = null;
|
||||||
|
|
||||||
|
// Check if we're over a product container directly
|
||||||
|
if (typeof over.id === 'string' && over.id.toString().startsWith('product-')) {
|
||||||
|
overContainer = over.id.toString();
|
||||||
|
setActiveDroppableId(overContainer);
|
||||||
|
}
|
||||||
|
// Otherwise check if we're over another image
|
||||||
|
else {
|
||||||
|
const overImage = productImages.find(img => img.id === over.id);
|
||||||
|
if (overImage) {
|
||||||
|
overContainer = `product-${overImage.productIndex}`;
|
||||||
|
setActiveDroppableId(overContainer);
|
||||||
|
} else {
|
||||||
|
setActiveDroppableId(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update handleDragEnd to work with the updated product data structure
|
||||||
|
const handleDragEnd = (event: DragEndEvent) => {
|
||||||
|
const { active, over } = event;
|
||||||
|
|
||||||
|
// Reset active droppable
|
||||||
|
setActiveDroppableId(null);
|
||||||
|
|
||||||
|
if (!over) {
|
||||||
|
setActiveId(null);
|
||||||
|
setActiveImage(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const activeId = active.id;
|
||||||
|
const overId = over.id;
|
||||||
|
|
||||||
|
// Find the containers (product indices) for the active element
|
||||||
|
const activeContainer = findContainer(activeId.toString());
|
||||||
|
let overContainer = null;
|
||||||
|
|
||||||
|
// Check if overId is a product container directly
|
||||||
|
if (typeof overId === 'string' && overId.toString().startsWith('product-')) {
|
||||||
|
overContainer = overId.toString().split('-')[1];
|
||||||
|
}
|
||||||
|
// Otherwise check if it's an image, so find its container
|
||||||
|
else {
|
||||||
|
overContainer = findContainer(overId.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
// If we couldn't determine active container, do nothing
|
||||||
|
if (!activeContainer) {
|
||||||
|
setActiveId(null);
|
||||||
|
setActiveImage(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If we couldn't determine the over container, do nothing
|
||||||
|
if (!overContainer) {
|
||||||
|
setActiveId(null);
|
||||||
|
setActiveImage(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert containers to numbers
|
||||||
|
const sourceProductIndex = parseInt(activeContainer);
|
||||||
|
const targetProductIndex = parseInt(overContainer);
|
||||||
|
|
||||||
|
// Find the active image
|
||||||
|
const activeImage = productImages.find(img => img.id === activeId);
|
||||||
|
if (!activeImage) {
|
||||||
|
setActiveId(null);
|
||||||
|
setActiveImage(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// IMPORTANT: If source and target are different products, ALWAYS prioritize moving over reordering
|
||||||
|
if (sourceProductIndex !== targetProductIndex) {
|
||||||
|
// Create a copy of the image with the new product index
|
||||||
|
const newImage: ProductImageSortable = {
|
||||||
|
...activeImage,
|
||||||
|
productIndex: targetProductIndex,
|
||||||
|
// Generate a new ID for the image in its new location
|
||||||
|
id: `image-${targetProductIndex}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
|
||||||
|
};
|
||||||
|
|
||||||
|
// Remove the image from the source product and add to target product
|
||||||
|
setProductImages(items => {
|
||||||
|
// Remove the image from its current product
|
||||||
|
const filteredItems = items.filter(item => item.id !== activeId);
|
||||||
|
|
||||||
|
// Add the image to the target product
|
||||||
|
filteredItems.push(newImage);
|
||||||
|
|
||||||
|
// Show notification
|
||||||
|
toast.success(`Image moved from ${data[sourceProductIndex].name || `Product #${sourceProductIndex + 1}`} to ${data[targetProductIndex].name || `Product #${targetProductIndex + 1}`}`);
|
||||||
|
|
||||||
|
return filteredItems;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Source and target are the same product - this is a reordering operation
|
||||||
|
else {
|
||||||
|
// Only attempt reordering if we have at least 2 images in this container
|
||||||
|
const productImages = getProductImages(sourceProductIndex);
|
||||||
|
|
||||||
|
if (productImages.length >= 2) {
|
||||||
|
// Handle reordering regardless of whether we're over a container or another image
|
||||||
|
setProductImages(items => {
|
||||||
|
// Filter to get only the images for this product
|
||||||
|
const productFilteredItems = items.filter(item => item.productIndex === sourceProductIndex);
|
||||||
|
|
||||||
|
// If dropping onto the container itself, put at the end
|
||||||
|
if (overId.toString().startsWith('product-')) {
|
||||||
|
// Find active index
|
||||||
|
const activeIndex = productFilteredItems.findIndex(item => item.id === activeId);
|
||||||
|
|
||||||
|
if (activeIndex === -1) {
|
||||||
|
return items; // No change needed
|
||||||
|
}
|
||||||
|
|
||||||
|
// Move active item to end (remove and push to end)
|
||||||
|
const newFilteredItems = [...productFilteredItems];
|
||||||
|
const [movedItem] = newFilteredItems.splice(activeIndex, 1);
|
||||||
|
newFilteredItems.push(movedItem);
|
||||||
|
|
||||||
|
// Create a new full list replacing the items for this product with the reordered ones
|
||||||
|
const newItems = items.filter(item => item.productIndex !== sourceProductIndex);
|
||||||
|
newItems.push(...newFilteredItems);
|
||||||
|
|
||||||
|
return newItems;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find indices within the filtered list
|
||||||
|
const activeIndex = productFilteredItems.findIndex(item => item.id === activeId);
|
||||||
|
const overIndex = productFilteredItems.findIndex(item => item.id === overId);
|
||||||
|
|
||||||
|
// If one of the indices is not found or they're the same, do nothing
|
||||||
|
if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) {
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reorder the filtered items
|
||||||
|
const newFilteredItems = arrayMove(productFilteredItems, activeIndex, overIndex);
|
||||||
|
|
||||||
|
// Create a new full list replacing the items for this product with the reordered ones
|
||||||
|
const newItems = items.filter(item => item.productIndex !== sourceProductIndex);
|
||||||
|
newItems.push(...newFilteredItems);
|
||||||
|
|
||||||
|
return newItems;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setActiveId(null);
|
||||||
|
setActiveImage(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Monitor drag events to prevent browser behaviors
|
||||||
|
useEffect(() => {
|
||||||
|
// Add a global event listener to prevent browser's native drag behavior
|
||||||
|
const preventDefaultDragImage = (event: DragEvent) => {
|
||||||
|
if (activeId) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('dragstart', preventDefaultDragImage);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('dragstart', preventDefaultDragImage);
|
||||||
|
};
|
||||||
|
}, [activeId]);
|
||||||
|
|
||||||
|
// Add product IDs to the valid droppable elements
|
||||||
|
useEffect(() => {
|
||||||
|
// Add data-droppable attributes to make product containers easier to identify
|
||||||
|
data.forEach((_, index) => {
|
||||||
|
const container = document.getElementById(`product-${index}`);
|
||||||
|
if (container) {
|
||||||
|
container.setAttribute('data-droppable', 'true');
|
||||||
|
container.setAttribute('aria-dropeffect', 'move');
|
||||||
|
|
||||||
|
// Check if the container has images
|
||||||
|
const hasImages = getProductImages(index).length > 0;
|
||||||
|
|
||||||
|
// Set data-empty attribute for tracking purposes
|
||||||
|
container.setAttribute('data-empty', hasImages ? 'false' : 'true');
|
||||||
|
|
||||||
|
// Ensure the container has sufficient size to be a drop target
|
||||||
|
if (container.offsetHeight < 100) {
|
||||||
|
container.style.minHeight = '100px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [data, productImages]); // Add productImages as a dependency to re-run when images change
|
||||||
|
|
||||||
|
// Effect to register browser-level drag events on product containers
|
||||||
|
useEffect(() => {
|
||||||
|
// For each product container
|
||||||
|
data.forEach((_, index) => {
|
||||||
|
const container = document.getElementById(`product-${index}`);
|
||||||
|
|
||||||
|
if (container) {
|
||||||
|
// Define handlers for native browser drag events
|
||||||
|
const handleNativeDragOver = (e: DragEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setActiveDroppableId(`product-${index}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNativeDragLeave = () => {
|
||||||
|
if (activeDroppableId === `product-${index}`) {
|
||||||
|
setActiveDroppableId(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add these handlers
|
||||||
|
container.addEventListener('dragover', handleNativeDragOver);
|
||||||
|
container.addEventListener('dragleave', handleNativeDragLeave);
|
||||||
|
|
||||||
|
// Return cleanup function
|
||||||
|
return () => {
|
||||||
|
container.removeEventListener('dragover', handleNativeDragOver);
|
||||||
|
container.removeEventListener('dragleave', handleNativeDragLeave);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [data, productImages, activeDroppableId]); // Re-run when data or productImages change
|
||||||
|
|
||||||
|
// Function to add more visual indication when dragging
|
||||||
|
const getProductContainerClasses = (index: number) => {
|
||||||
|
const isValidDropTarget = activeId && findContainer(activeId) !== index.toString();
|
||||||
|
const isActiveDropTarget = activeDroppableId === `product-${index}`;
|
||||||
|
|
||||||
|
return [
|
||||||
|
"flex-1 min-h-[6rem] rounded-md p-2 transition-all",
|
||||||
|
// Only show borders during active drag operations
|
||||||
|
isValidDropTarget && isActiveDropTarget
|
||||||
|
? "border-2 border-dashed border-primary bg-primary/10"
|
||||||
|
: isValidDropTarget
|
||||||
|
? "border border-dashed border-muted-foreground/30"
|
||||||
|
: ""
|
||||||
|
].filter(Boolean).join(" ");
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
activeId,
|
||||||
|
activeImage,
|
||||||
|
activeDroppableId,
|
||||||
|
customCollisionDetection,
|
||||||
|
findContainer,
|
||||||
|
getProductImages,
|
||||||
|
getProductContainerClasses,
|
||||||
|
handleDragStart,
|
||||||
|
handleDragOver,
|
||||||
|
handleDragEnd
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,195 @@
|
|||||||
|
import { toast } from "sonner";
|
||||||
|
import config from "@/config";
|
||||||
|
import { Product, ProductImageSortable } from "../types";
|
||||||
|
|
||||||
|
interface UseProductImageOperationsProps {
|
||||||
|
data: Product[];
|
||||||
|
productImages: ProductImageSortable[];
|
||||||
|
setProductImages: React.Dispatch<React.SetStateAction<ProductImageSortable[]>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useProductImageOperations = ({
|
||||||
|
data,
|
||||||
|
productImages,
|
||||||
|
setProductImages,
|
||||||
|
}: UseProductImageOperationsProps) => {
|
||||||
|
// Function to remove an image URL from a product
|
||||||
|
const removeImageFromProduct = (productIndex: number, imageUrl: string) => {
|
||||||
|
// Create a copy of the data
|
||||||
|
const newData = [...data];
|
||||||
|
|
||||||
|
// Get the current product
|
||||||
|
const product = newData[productIndex];
|
||||||
|
|
||||||
|
// We need to update product_images array directly instead of the image_url field
|
||||||
|
if (!product.product_images) {
|
||||||
|
product.product_images = [];
|
||||||
|
} else if (typeof product.product_images === 'string') {
|
||||||
|
// Handle case where it might be a comma-separated string
|
||||||
|
product.product_images = product.product_images.split(',').filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter out the image URL we're removing
|
||||||
|
if (Array.isArray(product.product_images)) {
|
||||||
|
product.product_images = product.product_images.filter((url: string) => url && url !== imageUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
return newData;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to add an image URL to a product
|
||||||
|
const addImageToProduct = (productIndex: number, imageUrl: string) => {
|
||||||
|
// Create a copy of the data
|
||||||
|
const newData = [...data];
|
||||||
|
|
||||||
|
// Get the current product
|
||||||
|
const product = newData[productIndex];
|
||||||
|
|
||||||
|
// Initialize product_images array if it doesn't exist
|
||||||
|
if (!product.product_images) {
|
||||||
|
product.product_images = [];
|
||||||
|
} else if (typeof product.product_images === 'string') {
|
||||||
|
// Handle case where it might be a comma-separated string
|
||||||
|
product.product_images = product.product_images.split(',').filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure it's an array
|
||||||
|
if (!Array.isArray(product.product_images)) {
|
||||||
|
product.product_images = [product.product_images].filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only add if the URL doesn't already exist
|
||||||
|
if (!product.product_images.includes(imageUrl)) {
|
||||||
|
product.product_images.push(imageUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
return newData;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to handle image upload - update product data
|
||||||
|
const handleImageUpload = async (files: FileList | File[], productIndex: number) => {
|
||||||
|
if (!files || files.length === 0) return;
|
||||||
|
|
||||||
|
for (let i = 0; i < files.length; i++) {
|
||||||
|
const file = files[i];
|
||||||
|
|
||||||
|
// Add placeholder for this image
|
||||||
|
const newImage: ProductImageSortable = {
|
||||||
|
id: `image-${productIndex}-${Date.now()}-${i}`, // Generate a unique ID
|
||||||
|
productIndex,
|
||||||
|
imageUrl: '',
|
||||||
|
loading: true,
|
||||||
|
fileName: file.name,
|
||||||
|
// Add required schema fields for ProductImageSortable
|
||||||
|
pid: data[productIndex].id || 0,
|
||||||
|
iid: 0,
|
||||||
|
type: 0,
|
||||||
|
order: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
hidden: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
setProductImages(prev => [...prev, newImage]);
|
||||||
|
|
||||||
|
// Create form data for upload
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('image', file);
|
||||||
|
formData.append('productIndex', productIndex.toString());
|
||||||
|
formData.append('upc', data[productIndex].upc || '');
|
||||||
|
formData.append('supplier_no', data[productIndex].supplier_no || '');
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Upload the image
|
||||||
|
const response = await fetch(`${config.apiUrl}/import/upload-image`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to upload image');
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
// Update the image URL in our state
|
||||||
|
setProductImages(prev =>
|
||||||
|
prev.map(img =>
|
||||||
|
(img.loading && img.productIndex === productIndex && img.fileName === file.name)
|
||||||
|
? { ...img, imageUrl: result.imageUrl, loading: false }
|
||||||
|
: img
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Update the product data with the new image URL
|
||||||
|
addImageToProduct(productIndex, result.imageUrl);
|
||||||
|
|
||||||
|
toast.success(`Image uploaded for ${data[productIndex].name || `Product #${productIndex + 1}`}`);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Upload error:', error);
|
||||||
|
|
||||||
|
// Remove the failed image from our state
|
||||||
|
setProductImages(prev =>
|
||||||
|
prev.filter(img =>
|
||||||
|
!(img.loading && img.productIndex === productIndex && img.fileName === file.name)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
toast.error(`Failed to upload image: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to remove an image - update to work with product_images
|
||||||
|
const removeImage = async (imageIndex: number) => {
|
||||||
|
const image = productImages[imageIndex];
|
||||||
|
if (!image) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Check if this is an external URL-based image or an uploaded image
|
||||||
|
const isExternalUrl = image.imageUrl.startsWith('http') &&
|
||||||
|
!image.imageUrl.includes(config.apiUrl.replace(/^https?:\/\//, ''));
|
||||||
|
|
||||||
|
// Only call the API to delete the file if it's an uploaded image
|
||||||
|
if (!isExternalUrl) {
|
||||||
|
// Extract the filename from the URL
|
||||||
|
const urlParts = image.imageUrl.split('/');
|
||||||
|
const filename = urlParts[urlParts.length - 1];
|
||||||
|
|
||||||
|
// Call API to delete the image
|
||||||
|
const response = await fetch(`${config.apiUrl}/import/delete-image`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
imageUrl: image.imageUrl,
|
||||||
|
filename
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to delete image');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove the image from our state
|
||||||
|
setProductImages(prev => prev.filter((_, idx) => idx !== imageIndex));
|
||||||
|
|
||||||
|
// Remove the image URL from the product data
|
||||||
|
removeImageFromProduct(image.productIndex, image.imageUrl);
|
||||||
|
|
||||||
|
toast.success('Image removed successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Delete error:', error);
|
||||||
|
toast.error(`Failed to remove image: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
removeImageFromProduct,
|
||||||
|
addImageToProduct,
|
||||||
|
handleImageUpload,
|
||||||
|
removeImage,
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { ProductImageSortable, Product } from "../types";
|
||||||
|
|
||||||
|
export const useProductImagesInit = (data: Product[]) => {
|
||||||
|
// Initialize product images from data
|
||||||
|
const [productImages, setProductImages] = useState<ProductImageSortable[]>(() => {
|
||||||
|
// Convert existing product_images to ProductImageSortable objects
|
||||||
|
const initialImages: ProductImageSortable[] = [];
|
||||||
|
|
||||||
|
data.forEach((product: Product, productIndex: number) => {
|
||||||
|
if (product.product_images) {
|
||||||
|
let images: any[] = [];
|
||||||
|
|
||||||
|
// Handle different formats of product_images
|
||||||
|
if (typeof product.product_images === 'string') {
|
||||||
|
try {
|
||||||
|
// Try to parse as JSON
|
||||||
|
images = JSON.parse(product.product_images);
|
||||||
|
} catch (e) {
|
||||||
|
// If not JSON, split by comma if it's a string
|
||||||
|
images = product.product_images.split(',').filter(Boolean).map((url: string) => ({
|
||||||
|
imageUrl: url.trim(),
|
||||||
|
pid: product.id || 0,
|
||||||
|
iid: 0,
|
||||||
|
type: 0,
|
||||||
|
order: 255,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
hidden: 0
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} else if (Array.isArray(product.product_images)) {
|
||||||
|
// Use the array directly
|
||||||
|
images = product.product_images;
|
||||||
|
} else if (product.product_images) {
|
||||||
|
// Handle case where it might be a single value
|
||||||
|
images = [product.product_images];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create ProductImageSortable objects for each image
|
||||||
|
images.forEach((img, i) => {
|
||||||
|
// Handle both URL strings and structured image objects
|
||||||
|
const imageUrl = typeof img === 'string' ? img : img.imageUrl;
|
||||||
|
|
||||||
|
if (imageUrl && imageUrl.trim()) {
|
||||||
|
initialImages.push({
|
||||||
|
id: `image-${productIndex}-initial-${i}`,
|
||||||
|
productIndex,
|
||||||
|
imageUrl: imageUrl.trim(),
|
||||||
|
loading: false,
|
||||||
|
fileName: `Image ${i + 1}`,
|
||||||
|
// Add schema fields
|
||||||
|
pid: product.id || 0,
|
||||||
|
iid: typeof img === 'object' && img.iid ? img.iid : i,
|
||||||
|
type: typeof img === 'object' && img.type !== undefined ? img.type : 0,
|
||||||
|
order: typeof img === 'object' && img.order !== undefined ? img.order : i,
|
||||||
|
width: typeof img === 'object' && img.width ? img.width : 0,
|
||||||
|
height: typeof img === 'object' && img.height ? img.height : 0,
|
||||||
|
hidden: typeof img === 'object' && img.hidden !== undefined ? img.hidden : 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return initialImages;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Function to ensure URLs are properly formatted with absolute paths
|
||||||
|
const getFullImageUrl = (url: string): string => {
|
||||||
|
// If the URL is already absolute (starts with http:// or https://) return it as is
|
||||||
|
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise, it's a relative URL, prepend the domain
|
||||||
|
const baseUrl = 'https://inventory.acot.site';
|
||||||
|
// Make sure url starts with / for path
|
||||||
|
const path = url.startsWith('/') ? url : `/${url}`;
|
||||||
|
return `${baseUrl}${path}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
productImages,
|
||||||
|
setProductImages,
|
||||||
|
getFullImageUrl
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Product, ProductImageSortable } from "../types";
|
||||||
|
|
||||||
|
type AddImageToProductFn = (productIndex: number, imageUrl: string) => Product[];
|
||||||
|
|
||||||
|
interface UseUrlImageUploadProps {
|
||||||
|
data: Product[];
|
||||||
|
setProductImages: React.Dispatch<React.SetStateAction<ProductImageSortable[]>>;
|
||||||
|
addImageToProduct: AddImageToProductFn;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useUrlImageUpload = ({
|
||||||
|
data,
|
||||||
|
setProductImages,
|
||||||
|
addImageToProduct
|
||||||
|
}: UseUrlImageUploadProps) => {
|
||||||
|
const [urlInputs, setUrlInputs] = useState<{ [key: number]: string }>({});
|
||||||
|
const [processingUrls, setProcessingUrls] = useState<{ [key: number]: boolean }>({});
|
||||||
|
|
||||||
|
// Handle adding an image from a URL - simplified to skip server
|
||||||
|
const handleAddImageFromUrl = async (productIndex: number, url: string) => {
|
||||||
|
if (!url || !url.trim()) {
|
||||||
|
toast.error("Please enter a valid URL");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Set processing state
|
||||||
|
setProcessingUrls(prev => ({ ...prev, [productIndex]: true }));
|
||||||
|
|
||||||
|
// Validate URL format
|
||||||
|
let validatedUrl = url.trim();
|
||||||
|
|
||||||
|
// Add protocol if missing
|
||||||
|
if (!validatedUrl.startsWith('http://') && !validatedUrl.startsWith('https://')) {
|
||||||
|
validatedUrl = `https://${validatedUrl}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Basic URL validation
|
||||||
|
try {
|
||||||
|
new URL(validatedUrl);
|
||||||
|
} catch (e) {
|
||||||
|
toast.error("Invalid URL format. Please enter a valid URL");
|
||||||
|
setProcessingUrls(prev => ({ ...prev, [productIndex]: false }));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a unique ID for this image
|
||||||
|
const imageId = `image-${productIndex}-url-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
||||||
|
|
||||||
|
// Create the new image object with the URL
|
||||||
|
const newImage: ProductImageSortable = {
|
||||||
|
id: imageId,
|
||||||
|
productIndex,
|
||||||
|
imageUrl: validatedUrl,
|
||||||
|
loading: false, // We're not loading from server, so it's ready immediately
|
||||||
|
fileName: "From URL",
|
||||||
|
// Add required schema fields
|
||||||
|
pid: data[productIndex].id || 0,
|
||||||
|
iid: 0,
|
||||||
|
type: 0,
|
||||||
|
order: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
hidden: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add the image directly to the product images list
|
||||||
|
setProductImages(prev => [...prev, newImage]);
|
||||||
|
|
||||||
|
// Update the product data with the new image URL
|
||||||
|
addImageToProduct(productIndex, validatedUrl);
|
||||||
|
|
||||||
|
// Clear the URL input field on success
|
||||||
|
setUrlInputs(prev => ({ ...prev, [productIndex]: '' }));
|
||||||
|
|
||||||
|
toast.success(`Image URL added to ${data[productIndex].name || `Product #${productIndex + 1}`}`);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Add image from URL error:', error);
|
||||||
|
toast.error(`Failed to add image URL: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
||||||
|
} finally {
|
||||||
|
setProcessingUrls(prev => ({ ...prev, [productIndex]: false }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update the URL input value
|
||||||
|
const updateUrlInput = (productIndex: number, value: string) => {
|
||||||
|
setUrlInputs(prev => ({ ...prev, [productIndex]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
urlInputs,
|
||||||
|
processingUrls,
|
||||||
|
handleAddImageFromUrl,
|
||||||
|
updateUrlInput
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
export type ProductImage = {
|
||||||
|
productIndex: number;
|
||||||
|
imageUrl: string;
|
||||||
|
loading: boolean;
|
||||||
|
fileName: string;
|
||||||
|
// Schema fields
|
||||||
|
pid: number;
|
||||||
|
iid: number;
|
||||||
|
type: number;
|
||||||
|
order: number;
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
hidden: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type UnassignedImage = {
|
||||||
|
file: File;
|
||||||
|
previewUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Product ID type to handle the sortable state
|
||||||
|
export type ProductImageSortable = ProductImage & {
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Shared Product interface
|
||||||
|
export interface Product {
|
||||||
|
id?: number;
|
||||||
|
name?: string;
|
||||||
|
upc?: string;
|
||||||
|
supplier_no?: string;
|
||||||
|
sku?: string;
|
||||||
|
model?: string;
|
||||||
|
product_images?: string | string[];
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { motion } from "framer-motion"
|
||||||
|
import { CgCheck } from "react-icons/cg"
|
||||||
|
|
||||||
|
const animationConfig = {
|
||||||
|
transition: {
|
||||||
|
duration: 0.1,
|
||||||
|
},
|
||||||
|
exit: { scale: 0.5, opacity: 0 },
|
||||||
|
initial: { scale: 0.5, opacity: 0 },
|
||||||
|
animate: { scale: 1, opacity: 1 },
|
||||||
|
}
|
||||||
|
|
||||||
|
type MatchIconProps = {
|
||||||
|
isChecked: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MatchIcon = ({ isChecked }: MatchIconProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-center rounded-full border-2 border-yellow-500 bg-background text-background transition-colors duration-100 min-w-6 min-h-6 w-6 h-6 ml-3.5 mr-3 data-[highlighted=true]:bg-green-500 data-[highlighted=true]:border-green-500"
|
||||||
|
data-highlighted={isChecked}
|
||||||
|
data-testid="column-checkmark"
|
||||||
|
>
|
||||||
|
{isChecked && (
|
||||||
|
<motion.div {...animationConfig}>
|
||||||
|
<CgCheck size="24px" />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -4,8 +4,6 @@ import {
|
|||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCell,
|
TableCell,
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
TableRow,
|
||||||
} from "@/components/ui/table"
|
} from "@/components/ui/table"
|
||||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||||
@@ -43,23 +41,7 @@ export const SelectHeaderTable = ({ data, selectedRows, setSelectedRows }: Props
|
|||||||
|
|
||||||
<div className="h-[calc(100vh-23rem)] overflow-auto">
|
<div className="h-[calc(100vh-23rem)] overflow-auto">
|
||||||
<Table className="relative w-full" style={{ tableLayout: 'fixed' }}>
|
<Table className="relative w-full" style={{ tableLayout: 'fixed' }}>
|
||||||
<TableHeader>
|
|
||||||
<TableRow className="grid" style={{ gridTemplateColumns }}>
|
|
||||||
<TableHead className="sticky top-0 z-20 bg-background overflow-hidden">
|
|
||||||
|
|
||||||
</TableHead>
|
|
||||||
{columns.map((column) => (
|
|
||||||
<TableHead
|
|
||||||
key={column.key}
|
|
||||||
className="sticky top-0 z-20 bg-background overflow-hidden"
|
|
||||||
>
|
|
||||||
<div className="truncate">
|
|
||||||
{column.name}
|
|
||||||
</div>
|
|
||||||
</TableHead>
|
|
||||||
))}
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
<TableBody>
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
value={selectedRowIndex?.toString()}
|
value={selectedRowIndex?.toString()}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
// Define MultiSelectCell component to fix the import issue
|
||||||
|
type MultiSelectCellProps = {
|
||||||
|
field: string;
|
||||||
|
value: any;
|
||||||
|
onChange: (value: any) => void;
|
||||||
|
options: any[];
|
||||||
|
hasErrors: boolean;
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Using _ to indicate intentionally unused parameters
|
||||||
|
const MultiSelectCell = (_: MultiSelectCellProps) => {
|
||||||
|
// This is a placeholder implementation
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const BaseCellContent = ({ fieldType, field, value, onChange, options, hasErrors, className }: {
|
||||||
|
fieldType: string;
|
||||||
|
field: string;
|
||||||
|
value: any;
|
||||||
|
onChange: (value: any) => void;
|
||||||
|
options: any[];
|
||||||
|
hasErrors: boolean;
|
||||||
|
className?: string;
|
||||||
|
}) => {
|
||||||
|
if (fieldType === 'multi-select' || fieldType === 'multi-input') {
|
||||||
|
return (
|
||||||
|
<MultiSelectCell
|
||||||
|
field={field}
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
options={options}
|
||||||
|
hasErrors={hasErrors}
|
||||||
|
className={className}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BaseCellContent;
|
||||||
@@ -232,7 +232,7 @@ const SearchableTemplateSelect: React.FC<SearchableTemplateSelectProps> = ({
|
|||||||
aria-expanded={open}
|
aria-expanded={open}
|
||||||
className={cn("w-full justify-between overflow-hidden", triggerClassName)}
|
className={cn("w-full justify-between overflow-hidden", triggerClassName)}
|
||||||
>
|
>
|
||||||
<span className="truncate overflow-hidden mr-2">{getDisplayText()}</span>
|
<span className="truncate overflow-hidden mr-1">{getDisplayText()}</span>
|
||||||
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 flex-none" />
|
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 flex-none" />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
@@ -2,18 +2,19 @@ import React, { useMemo } from 'react'
|
|||||||
import ValidationTable from './ValidationTable'
|
import ValidationTable from './ValidationTable'
|
||||||
import { RowSelectionState } from '@tanstack/react-table'
|
import { RowSelectionState } from '@tanstack/react-table'
|
||||||
import { Fields } from '../../../types'
|
import { Fields } from '../../../types'
|
||||||
|
import { Template } from '../hooks/useValidationState'
|
||||||
|
|
||||||
interface UpcValidationTableAdapterProps<T extends string> {
|
interface UpcValidationTableAdapterProps<T extends string> {
|
||||||
data: any[]
|
data: any[]
|
||||||
fields: Fields<string>
|
fields: Fields<string>
|
||||||
validationErrors: Map<number, Record<string, any[]>>
|
validationErrors: Map<number, Record<string, any[]>>
|
||||||
rowSelection: RowSelectionState
|
rowSelection: RowSelectionState
|
||||||
setRowSelection: (value: RowSelectionState) => void
|
setRowSelection: React.Dispatch<React.SetStateAction<RowSelectionState>>
|
||||||
updateRow: (rowIndex: number, key: T, value: any) => void
|
updateRow: (rowIndex: number, key: T, value: any) => void
|
||||||
filters: any
|
filters: any
|
||||||
templates: any[]
|
templates: Template[]
|
||||||
applyTemplate: (templateId: string, rowIndexes: number[]) => void
|
applyTemplate: (templateId: string, rowIndexes: number[]) => void
|
||||||
getTemplateDisplayText: (templateId: string) => string
|
getTemplateDisplayText: (templateId: string | null) => string
|
||||||
isValidatingUpc: (rowIndex: number) => boolean
|
isValidatingUpc: (rowIndex: number) => boolean
|
||||||
validatingUpcRows: number[]
|
validatingUpcRows: number[]
|
||||||
copyDown: (rowIndex: number, fieldKey: string, endRowIndex?: number) => void
|
copyDown: (rowIndex: number, fieldKey: string, endRowIndex?: number) => void
|
||||||
@@ -93,6 +94,17 @@ function UpcValidationTableAdapter<T extends string>({
|
|||||||
return row;
|
return row;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Create a Map for upcValidationResults with the same structure expected by ValidationTable
|
||||||
|
const upcValidationResultsMap = new Map<number, { itemNumber: string }>();
|
||||||
|
|
||||||
|
// Populate with any item numbers we have from validation
|
||||||
|
data.forEach((_, index) => {
|
||||||
|
const itemNumber = upcValidation.getItemNumber(index);
|
||||||
|
if (itemNumber) {
|
||||||
|
upcValidationResultsMap.set(index, { itemNumber });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ValidationTable
|
<ValidationTable
|
||||||
{...props}
|
{...props}
|
||||||
@@ -105,6 +117,7 @@ function UpcValidationTableAdapter<T extends string>({
|
|||||||
rowSublines={rowSublines}
|
rowSublines={rowSublines}
|
||||||
isLoadingLines={isLoadingLines}
|
isLoadingLines={isLoadingLines}
|
||||||
isLoadingSublines={isLoadingSublines}
|
isLoadingSublines={isLoadingSublines}
|
||||||
|
upcValidationResults={upcValidationResultsMap}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}), [upcValidation.validatingRows, upcValidation.getItemNumber, isLoadingTemplates, copyDown, externalValidatingCells, rowProductLines, rowSublines, isLoadingLines, isLoadingSublines]);
|
}), [upcValidation.validatingRows, upcValidation.getItemNumber, isLoadingTemplates, copyDown, externalValidatingCells, rowProductLines, rowSublines, isLoadingLines, isLoadingSublines]);
|
||||||
@@ -128,7 +141,7 @@ function UpcValidationTableAdapter<T extends string>({
|
|||||||
itemNumbers={new Map()}
|
itemNumbers={new Map()}
|
||||||
isLoadingTemplates={isLoadingTemplates}
|
isLoadingTemplates={isLoadingTemplates}
|
||||||
copyDown={copyDown}
|
copyDown={copyDown}
|
||||||
upcValidationResults={new Map()}
|
upcValidationResults={new Map<number, { itemNumber: string }>()}
|
||||||
rowProductLines={rowProductLines}
|
rowProductLines={rowProductLines}
|
||||||
rowSublines={rowSublines}
|
rowSublines={rowSublines}
|
||||||
isLoadingLines={isLoadingLines}
|
isLoadingLines={isLoadingLines}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { Field, ErrorType } from '../../../types'
|
import { Field, ErrorType } from '../../../types'
|
||||||
import { Loader2, AlertCircle, ArrowDown, X } from 'lucide-react'
|
import { AlertCircle, ArrowDown, X } from 'lucide-react'
|
||||||
import {
|
import {
|
||||||
Tooltip,
|
Tooltip,
|
||||||
TooltipContent,
|
TooltipContent,
|
||||||
@@ -11,6 +11,7 @@ import InputCell from './cells/InputCell'
|
|||||||
import SelectCell from './cells/SelectCell'
|
import SelectCell from './cells/SelectCell'
|
||||||
import MultiSelectCell from './cells/MultiSelectCell'
|
import MultiSelectCell from './cells/MultiSelectCell'
|
||||||
import { TableCell } from '@/components/ui/table'
|
import { TableCell } from '@/components/ui/table'
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton'
|
||||||
|
|
||||||
// Context for copy down selection mode
|
// Context for copy down selection mode
|
||||||
export const CopyDownContext = React.createContext<{
|
export const CopyDownContext = React.createContext<{
|
||||||
@@ -351,12 +352,8 @@ const ValidationCell = React.memo(({
|
|||||||
minWidth: `${width}px`,
|
minWidth: `${width}px`,
|
||||||
maxWidth: `${width}px`,
|
maxWidth: `${width}px`,
|
||||||
boxSizing: 'border-box' as const,
|
boxSizing: 'border-box' as const,
|
||||||
cursor: isInTargetRow ? 'pointer' : undefined,
|
cursor: isInTargetRow ? 'pointer' : undefined
|
||||||
...(isSourceCell ? { backgroundColor: '#dbeafe', borderRadius: '0.375rem', padding: 0, boxShadow: '0 0 0 2px #3b82f6' } :
|
}), [width, isInTargetRow]);
|
||||||
isSelectedTarget ? { backgroundColor: '#bfdbfe', borderRadius: '0.375rem', padding: 0 } :
|
|
||||||
isInTargetRow && isTargetRowHovered ? { backgroundColor: '#dbeafe', borderRadius: '0.375rem', padding: 0, cursor: 'pointer' } :
|
|
||||||
isInTargetRow ? { borderRadius: '0.375rem', padding: 0, cursor: 'pointer' } : {})
|
|
||||||
}), [width, isInTargetRow, isSourceCell, isSelectedTarget, isTargetRowHovered]);
|
|
||||||
|
|
||||||
// Memoize the cell class name to prevent re-calculating on every render
|
// Memoize the cell class name to prevent re-calculating on every render
|
||||||
const cellClassName = React.useMemo(() => {
|
const cellClassName = React.useMemo(() => {
|
||||||
@@ -431,12 +428,21 @@ const ValidationCell = React.memo(({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className={`flex items-center justify-center gap-2 border ${hasError || isRequiredButEmpty ? 'border-red-500' : 'border-input'} rounded-sm px-2 py-1.5`}>
|
<div className={`flex items-center justify-center gap-2 border ${hasError || isRequiredButEmpty ? 'border-red-500' : 'border-input'} rounded-md px-2 py-2`}>
|
||||||
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
|
<Skeleton className="w-full h-4" />
|
||||||
<span>Loading...</span>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className={`truncate overflow-hidden ${isCopyDownHovered && !copyDownContext.isInCopyDownMode ? 'bg-blue-50/50' : ''}`}>
|
<div
|
||||||
|
className={`truncate overflow-hidden ${isCopyDownHovered && !copyDownContext.isInCopyDownMode ? 'bg-blue-50/50' : ''}`}
|
||||||
|
style={{
|
||||||
|
backgroundColor: isSourceCell ? '#dbeafe' :
|
||||||
|
isSelectedTarget ? '#bfdbfe' :
|
||||||
|
isInTargetRow && isTargetRowHovered ? '#dbeafe' :
|
||||||
|
undefined,
|
||||||
|
borderRadius: (isSourceCell || isSelectedTarget || isInTargetRow) ? '0.375rem' : undefined,
|
||||||
|
boxShadow: isSourceCell ? '0 0 0 2px #3b82f6' : undefined
|
||||||
|
}}
|
||||||
|
>
|
||||||
<BaseCellContent
|
<BaseCellContent
|
||||||
field={field}
|
field={field}
|
||||||
value={displayValue}
|
value={displayValue}
|
||||||
@@ -9,7 +9,6 @@ import SearchableTemplateSelect from './SearchableTemplateSelect'
|
|||||||
import { useAiValidation } from '../hooks/useAiValidation'
|
import { useAiValidation } from '../hooks/useAiValidation'
|
||||||
import { AiValidationDialogs } from './AiValidationDialogs'
|
import { AiValidationDialogs } from './AiValidationDialogs'
|
||||||
import { Fields } from '../../../types'
|
import { Fields } from '../../../types'
|
||||||
import { ErrorType, ValidationError, ErrorSources } from '../../../types'
|
|
||||||
import { SearchProductTemplateDialog } from '@/components/templates/SearchProductTemplateDialog'
|
import { SearchProductTemplateDialog } from '@/components/templates/SearchProductTemplateDialog'
|
||||||
import { TemplateForm } from '@/components/templates/TemplateForm'
|
import { TemplateForm } from '@/components/templates/TemplateForm'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
@@ -17,8 +16,7 @@ import { RowSelectionState } from '@tanstack/react-table'
|
|||||||
import { useUpcValidation } from '../hooks/useUpcValidation'
|
import { useUpcValidation } from '../hooks/useUpcValidation'
|
||||||
import { useProductLinesFetching } from '../hooks/useProductLinesFetching'
|
import { useProductLinesFetching } from '../hooks/useProductLinesFetching'
|
||||||
import UpcValidationTableAdapter from './UpcValidationTableAdapter'
|
import UpcValidationTableAdapter from './UpcValidationTableAdapter'
|
||||||
import { clearAllUniquenessCaches } from '../hooks/useValidation'
|
import { Skeleton } from '@/components/ui/skeleton'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ValidationContainer component - the main wrapper for the validation step
|
* ValidationContainer component - the main wrapper for the validation step
|
||||||
*
|
*
|
||||||
@@ -49,7 +47,6 @@ const ValidationContainer = <T extends string>({
|
|||||||
validationErrors,
|
validationErrors,
|
||||||
rowSelection,
|
rowSelection,
|
||||||
setRowSelection,
|
setRowSelection,
|
||||||
updateRow,
|
|
||||||
templates,
|
templates,
|
||||||
selectedTemplateId,
|
selectedTemplateId,
|
||||||
applyTemplate,
|
applyTemplate,
|
||||||
@@ -144,7 +141,6 @@ const ValidationContainer = <T extends string>({
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Add a ref to track the last validation time
|
// Add a ref to track the last validation time
|
||||||
const lastValidationTime = useRef(0);
|
|
||||||
|
|
||||||
// Trigger revalidation only for specifically marked fields
|
// Trigger revalidation only for specifically marked fields
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -301,82 +297,8 @@ const ValidationContainer = <T extends string>({
|
|||||||
}, [prepareRowDataForTemplateForm, fetchFieldOptions]);
|
}, [prepareRowDataForTemplateForm, fetchFieldOptions]);
|
||||||
|
|
||||||
// Create a function to validate uniqueness if validateUniqueItemNumbers is not available
|
// Create a function to validate uniqueness if validateUniqueItemNumbers is not available
|
||||||
const validateUniqueValues = useCallback(() => {
|
|
||||||
// Check if validateUniqueItemNumbers exists on validationState using safer method
|
|
||||||
if ('validateUniqueItemNumbers' in validationState &&
|
|
||||||
typeof (validationState as any).validateUniqueItemNumbers === 'function') {
|
|
||||||
(validationState as any).validateUniqueItemNumbers();
|
|
||||||
} else {
|
|
||||||
// Otherwise fall back to revalidating all rows
|
|
||||||
validationState.revalidateRows(Array.from(Array(data.length).keys()));
|
|
||||||
}
|
|
||||||
}, [validationState, data.length]);
|
|
||||||
|
|
||||||
// Apply item numbers to data and trigger revalidation for uniqueness
|
// Apply item numbers to data and trigger revalidation for uniqueness
|
||||||
const applyItemNumbersAndValidate = useCallback(() => {
|
|
||||||
// Clear uniqueness validation caches to ensure fresh validation
|
|
||||||
clearAllUniquenessCaches();
|
|
||||||
|
|
||||||
upcValidation.applyItemNumbersToData((updatedRowIds) => {
|
|
||||||
console.log(`Revalidating item numbers for ${updatedRowIds.length} rows`);
|
|
||||||
|
|
||||||
// Force clearing all uniqueness errors for item_number and upc fields first
|
|
||||||
const newValidationErrors = new Map(validationErrors);
|
|
||||||
|
|
||||||
// Clear uniqueness errors for all rows that had their item numbers updated
|
|
||||||
updatedRowIds.forEach(rowIndex => {
|
|
||||||
const rowErrors = newValidationErrors.get(rowIndex);
|
|
||||||
if (rowErrors) {
|
|
||||||
// Create a copy of row errors without uniqueness errors for item_number/upc
|
|
||||||
const filteredErrors: Record<string, ValidationError[]> = { ...rowErrors };
|
|
||||||
let hasChanges = false;
|
|
||||||
|
|
||||||
// Clear item_number errors if they exist and are uniqueness errors
|
|
||||||
if (filteredErrors.item_number &&
|
|
||||||
filteredErrors.item_number.some(e => e.type === ErrorType.Unique)) {
|
|
||||||
delete filteredErrors.item_number;
|
|
||||||
hasChanges = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Also clear upc/barcode errors if they exist and are uniqueness errors
|
|
||||||
if (filteredErrors.upc &&
|
|
||||||
filteredErrors.upc.some(e => e.type === ErrorType.Unique)) {
|
|
||||||
delete filteredErrors.upc;
|
|
||||||
hasChanges = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (filteredErrors.barcode &&
|
|
||||||
filteredErrors.barcode.some(e => e.type === ErrorType.Unique)) {
|
|
||||||
delete filteredErrors.barcode;
|
|
||||||
hasChanges = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update the map or remove the row entry if no errors remain
|
|
||||||
if (hasChanges) {
|
|
||||||
if (Object.keys(filteredErrors).length > 0) {
|
|
||||||
newValidationErrors.set(rowIndex, filteredErrors);
|
|
||||||
} else {
|
|
||||||
newValidationErrors.delete(rowIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Call the revalidateRows function directly with affected rows
|
|
||||||
validationState.revalidateRows(updatedRowIds);
|
|
||||||
|
|
||||||
// Immediately run full uniqueness validation across all rows if available
|
|
||||||
// This is crucial to properly identify new uniqueness issues
|
|
||||||
setTimeout(() => {
|
|
||||||
validateUniqueValues();
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
// Mark all updated rows for revalidation
|
|
||||||
updatedRowIds.forEach(rowIndex => {
|
|
||||||
markRowForRevalidation(rowIndex, 'item_number');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}, [upcValidation.applyItemNumbersToData, markRowForRevalidation, clearAllUniquenessCaches, validationErrors, validationState.revalidateRows, validateUniqueValues]);
|
|
||||||
|
|
||||||
// Handle next button click - memoized
|
// Handle next button click - memoized
|
||||||
const handleNext = useCallback(() => {
|
const handleNext = useCallback(() => {
|
||||||
@@ -472,28 +394,22 @@ const ValidationContainer = <T extends string>({
|
|||||||
// This function is defined for potential future use but not currently used
|
// This function is defined for potential future use but not currently used
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
|
||||||
const handleRowSelectionChange = useCallback((newSelection: RowSelectionState) => {
|
const handleRowSelectionChange = useCallback(
|
||||||
setRowSelection(newSelection);
|
(value: React.SetStateAction<RowSelectionState>) => {
|
||||||
}, [setRowSelection]);
|
setRowSelection(value);
|
||||||
|
},
|
||||||
|
[setRowSelection]
|
||||||
|
);
|
||||||
|
|
||||||
// Add scroll container ref at the container level
|
// Add scroll container ref at the container level
|
||||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||||
const lastScrollPosition = useRef({ left: 0, top: 0 });
|
const lastScrollPosition = useRef({ left: 0, top: 0 });
|
||||||
const isScrolling = useRef(false);
|
|
||||||
|
|
||||||
// Track if we're currently validating a UPC
|
// Track if we're currently validating a UPC
|
||||||
const isValidatingUpcRef = useRef(false);
|
|
||||||
|
|
||||||
// Track last UPC update to prevent conflicting changes
|
// Track last UPC update to prevent conflicting changes
|
||||||
const lastUpcUpdate = useRef({
|
|
||||||
rowIndex: -1,
|
|
||||||
supplier: "",
|
|
||||||
upc: ""
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add these ref declarations here, at component level
|
// Add these ref declarations here, at component level
|
||||||
const lastCompanyFetchTime = useRef<Record<string, number>>({});
|
|
||||||
const lastLineFetchTime = useRef<Record<string, number>>({});
|
|
||||||
|
|
||||||
// Memoize scroll handlers - simplified to avoid performance issues
|
// Memoize scroll handlers - simplified to avoid performance issues
|
||||||
const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement> | Event) => {
|
const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement> | Event) => {
|
||||||
@@ -1150,9 +1066,9 @@ const ValidationContainer = <T extends string>({
|
|||||||
{/* Selection Action Bar - only shown when items are selected */}
|
{/* Selection Action Bar - only shown when items are selected */}
|
||||||
{Object.keys(rowSelection).length > 0 && (
|
{Object.keys(rowSelection).length > 0 && (
|
||||||
<div className="fixed bottom-24 left-1/2 transform -translate-x-1/2 z-50 animate-in fade-in slide-in-from-bottom-5 duration-300">
|
<div className="fixed bottom-24 left-1/2 transform -translate-x-1/2 z-50 animate-in fade-in slide-in-from-bottom-5 duration-300">
|
||||||
<div className="bg-card shadow-xl rounded-lg border border-muted px-4 py-3 flex items-center gap-3">
|
<div className="bg-card shadow-xl rounded-2xl border border-gray-200 px-4 py-3 flex items-center gap-3">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<div className="mr-2 bg-muted items-center flex text-primary pl-2 pr-7 h-[32px] flex-shrink-0 rounded-md text-xs font-medium border border-primary">
|
<div className="mr-3 bg-muted shadow-xs items-center flex text-primary pl-2 pr-7 h-8 flex-shrink-0 rounded-md text-xs font-medium border border-muted">
|
||||||
{Object.keys(rowSelection).length} selected
|
{Object.keys(rowSelection).length} selected
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1167,11 +1083,10 @@ const ValidationContainer = <T extends string>({
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center">
|
<div className="flex items-center ml-2 mr-1 shadow-xs">
|
||||||
{isLoadingTemplates ? (
|
{isLoadingTemplates ? (
|
||||||
<Button variant="outline" className="w-[220px] justify-between" disabled>
|
<Button variant="outline" className="w-[250px] justify-between h-8" disabled>
|
||||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
<Skeleton className="h-4 w-full" />
|
||||||
Loading templates...
|
|
||||||
</Button>
|
</Button>
|
||||||
) : templates && templates.length > 0 ? (
|
) : templates && templates.length > 0 ? (
|
||||||
<SearchableTemplateSelect
|
<SearchableTemplateSelect
|
||||||
@@ -1183,11 +1098,11 @@ const ValidationContainer = <T extends string>({
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
getTemplateDisplayText={getTemplateDisplayText}
|
getTemplateDisplayText={getTemplateDisplayText}
|
||||||
placeholder="Apply template to selected"
|
placeholder="Apply template to selected rows"
|
||||||
triggerClassName="w-[220px]"
|
triggerClassName="w-[250px] text-xs h-8"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Button variant="outline" className="w-full justify-between" disabled>
|
<Button variant="outline" className="w-full justify-between text-xs" disabled>
|
||||||
No templates available
|
No templates available
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
@@ -1198,14 +1113,16 @@ const ValidationContainer = <T extends string>({
|
|||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={openTemplateForm}
|
onClick={openTemplateForm}
|
||||||
|
className="h-8 mr-1 shadow-xs"
|
||||||
>
|
>
|
||||||
Save as Template
|
Save as template
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
variant={isFromScratch ? "destructive" : "outline"}
|
variant={"destructive"}
|
||||||
size="sm"
|
size="sm"
|
||||||
|
className="h-8 shadow-xs"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
console.log('Delete/Discard button clicked');
|
console.log('Delete/Discard button clicked');
|
||||||
console.log('Row selection state:', rowSelection);
|
console.log('Row selection state:', rowSelection);
|
||||||
@@ -185,7 +185,10 @@ const ValidationTable = <T extends string>({
|
|||||||
rowProductLines = {},
|
rowProductLines = {},
|
||||||
rowSublines = {},
|
rowSublines = {},
|
||||||
isLoadingLines = {},
|
isLoadingLines = {},
|
||||||
isLoadingSublines = {}
|
isLoadingSublines = {},
|
||||||
|
isValidatingUpc,
|
||||||
|
validatingUpcRows = [],
|
||||||
|
upcValidationResults
|
||||||
}: ValidationTableProps<T>) => {
|
}: ValidationTableProps<T>) => {
|
||||||
const { translations } = useRsi<T>();
|
const { translations } = useRsi<T>();
|
||||||
|
|
||||||
@@ -254,7 +257,7 @@ const ValidationTable = <T extends string>({
|
|||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<div className="flex h-[40px] items-center justify-center">
|
<div className="flex items-center justify-center py-9">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={row.getIsSelected()}
|
checked={row.getIsSelected()}
|
||||||
onCheckedChange={(value) => handleRowSelect(!!value, row)}
|
onCheckedChange={(value) => handleRowSelect(!!value, row)}
|
||||||
@@ -328,6 +331,16 @@ const ValidationTable = <T extends string>({
|
|||||||
copyDown(rowIndex, fieldKey, endRowIndex);
|
copyDown(rowIndex, fieldKey, endRowIndex);
|
||||||
}, [copyDown]);
|
}, [copyDown]);
|
||||||
|
|
||||||
|
// Use validatingUpcRows for calculation
|
||||||
|
const isRowValidatingUpc = useCallback((rowIndex: number) => {
|
||||||
|
return isValidatingUpc?.(rowIndex) || validatingUpcRows.includes(rowIndex);
|
||||||
|
}, [isValidatingUpc, validatingUpcRows]);
|
||||||
|
|
||||||
|
// Use upcValidationResults for display
|
||||||
|
const getRowUpcResult = useCallback((rowIndex: number) => {
|
||||||
|
return upcValidationResults?.get(rowIndex)?.itemNumber;
|
||||||
|
}, [upcValidationResults]);
|
||||||
|
|
||||||
// Memoize field columns with stable handlers
|
// Memoize field columns with stable handlers
|
||||||
const fieldColumns = useMemo(() => fields.map((field): ColumnDef<RowData<T>, any> | null => {
|
const fieldColumns = useMemo(() => fields.map((field): ColumnDef<RowData<T>, any> | null => {
|
||||||
// Don't filter out disabled fields, just pass the disabled state to the cell component
|
// Don't filter out disabled fields, just pass the disabled state to the cell component
|
||||||
@@ -368,6 +381,10 @@ const ValidationTable = <T extends string>({
|
|||||||
if (validatingCells.has(cellLoadingKey)) {
|
if (validatingCells.has(cellLoadingKey)) {
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
}
|
}
|
||||||
|
// Check if UPC is validating for this row and field is item_number
|
||||||
|
else if (fieldKey === 'item_number' && isRowValidatingUpc(row.index)) {
|
||||||
|
isLoading = true;
|
||||||
|
}
|
||||||
// Add loading state for line/subline fields
|
// Add loading state for line/subline fields
|
||||||
else if (fieldKey === 'line' && rowId && isLoadingLines[rowId]) {
|
else if (fieldKey === 'line' && rowId && isLoadingLines[rowId]) {
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
@@ -405,6 +422,12 @@ const ValidationTable = <T extends string>({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Get item number from UPC validation results if available
|
||||||
|
let itemNumber = itemNumbers.get(row.index);
|
||||||
|
if (!itemNumber && fieldKey === 'item_number') {
|
||||||
|
itemNumber = getRowUpcResult(row.index);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MemoizedCell
|
<MemoizedCell
|
||||||
field={fieldWithType as Field<string>}
|
field={fieldWithType as Field<string>}
|
||||||
@@ -414,7 +437,7 @@ const ValidationTable = <T extends string>({
|
|||||||
isValidating={isLoading}
|
isValidating={isLoading}
|
||||||
fieldKey={fieldKey}
|
fieldKey={fieldKey}
|
||||||
options={options}
|
options={options}
|
||||||
itemNumber={itemNumbers.get(row.index)}
|
itemNumber={itemNumber}
|
||||||
width={fieldWidth}
|
width={fieldWidth}
|
||||||
rowIndex={row.index}
|
rowIndex={row.index}
|
||||||
copyDown={(endRowIndex?: number) => handleCopyDown(row.index, field.key as string, endRowIndex)}
|
copyDown={(endRowIndex?: number) => handleCopyDown(row.index, field.key as string, endRowIndex)}
|
||||||
@@ -424,7 +447,9 @@ const ValidationTable = <T extends string>({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
}).filter((col): col is ColumnDef<RowData<T>, any> => col !== null),
|
}).filter((col): col is ColumnDef<RowData<T>, any> => col !== null),
|
||||||
[fields, validationErrors, validatingCells, itemNumbers, handleFieldUpdate, handleCopyDown, optionsCache, data.length, rowProductLines, rowSublines, isLoadingLines, isLoadingSublines]);
|
[fields, validationErrors, validatingCells, itemNumbers, handleFieldUpdate, handleCopyDown, optionsCache,
|
||||||
|
data.length, rowProductLines, rowSublines, isLoadingLines, isLoadingSublines,
|
||||||
|
isRowValidatingUpc, getRowUpcResult]);
|
||||||
|
|
||||||
// Combine columns
|
// Combine columns
|
||||||
const columns = useMemo(() => [selectionColumn, templateColumn, ...fieldColumns], [selectionColumn, templateColumn, fieldColumns]);
|
const columns = useMemo(() => [selectionColumn, templateColumn, ...fieldColumns], [selectionColumn, templateColumn, fieldColumns]);
|
||||||
@@ -590,7 +615,7 @@ const ValidationTable = <T extends string>({
|
|||||||
key={row.id}
|
key={row.id}
|
||||||
className={cn(
|
className={cn(
|
||||||
"hover:bg-muted/50",
|
"hover:bg-muted/50",
|
||||||
row.getIsSelected() ? "bg-muted/50" : "",
|
row.getIsSelected() ? "!bg-blue-50/50" : "",
|
||||||
hasErrors ? "bg-red-50/40" : "",
|
hasErrors ? "bg-red-50/40" : "",
|
||||||
isCopyDownTarget ? "cursor-pointer copy-down-target-row" : ""
|
isCopyDownTarget ? "cursor-pointer copy-down-target-row" : ""
|
||||||
)}
|
)}
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useCallback, useDeferredValue, useTransition, useRef, useEffect, useMemo } from 'react'
|
import React, { useState, useCallback, useTransition, useRef, useEffect, useMemo } from 'react'
|
||||||
import { Field } from '../../../../types'
|
import { Field } from '../../../../types'
|
||||||
import { Input } from '@/components/ui/input'
|
import { Input } from '@/components/ui/input'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
@@ -46,7 +46,6 @@ const InputCell = <T extends string>({
|
|||||||
const [isEditing, setIsEditing] = useState(false);
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
const [editValue, setEditValue] = useState('');
|
const [editValue, setEditValue] = useState('');
|
||||||
const [isPending, startTransition] = useTransition();
|
const [isPending, startTransition] = useTransition();
|
||||||
const deferredEditValue = useDeferredValue(editValue);
|
|
||||||
|
|
||||||
// Use a ref to track if we need to process the value
|
// Use a ref to track if we need to process the value
|
||||||
const needsProcessingRef = useRef(false);
|
const needsProcessingRef = useRef(false);
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import { useState, useCallback } from 'react';
|
import { useState, useCallback } from 'react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { getApiUrl, RowData } from './useValidationState';
|
import { getApiUrl, RowData } from './useValidationState';
|
||||||
import { Fields, InfoWithSource, ErrorSources, ErrorType } from '../../../types';
|
import { Fields } from '../../../types';
|
||||||
import { Meta } from '../types';
|
import { Meta } from '../types';
|
||||||
import { addErrorsAndRunHooks } from '../utils/dataMutations';
|
import { addErrorsAndRunHooks } from '../utils/dataMutations';
|
||||||
import * as Diff from 'diff';
|
import * as Diff from 'diff';
|
||||||
@@ -21,30 +21,22 @@ const isEmpty = (value: any): boolean =>
|
|||||||
(Array.isArray(value) && value.length === 0) ||
|
(Array.isArray(value) && value.length === 0) ||
|
||||||
(typeof value === 'object' && !Array.isArray(value) && Object.keys(value).length === 0);
|
(typeof value === 'object' && !Array.isArray(value) && Object.keys(value).length === 0);
|
||||||
|
|
||||||
// Cache validation results to avoid running expensive validations repeatedly
|
// Create a cache for validation results to avoid repeated validation of the same data
|
||||||
const validationResultCache = new Map<string, ValidationError[]>();
|
const validationResultCache = new Map();
|
||||||
|
const validationCache: Record<string, any> = {};
|
||||||
// Add debounce to prevent rapid successive validations
|
|
||||||
let validateDataTimeoutId: ReturnType<typeof setTimeout> | null = null;
|
|
||||||
|
|
||||||
// Add a function to clear cache for a specific field value
|
// Add a function to clear cache for a specific field value
|
||||||
export const clearValidationCacheForField = (fieldKey: string, value: any) => {
|
export const clearValidationCacheForField = (fieldKey: string) => {
|
||||||
// Create a pattern to match cache keys for this field
|
// Clear cache
|
||||||
const pattern = new RegExp(`^${fieldKey}-`);
|
const cacheKey = `field_${fieldKey}`;
|
||||||
|
delete validationCache[cacheKey];
|
||||||
// Find and clear matching cache entries
|
|
||||||
validationResultCache.forEach((_, key) => {
|
|
||||||
if (pattern.test(key)) {
|
|
||||||
validationResultCache.delete(key);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Add a special function to clear all uniqueness validation caches
|
// Add a special function to clear all uniqueness validation caches
|
||||||
export const clearAllUniquenessCaches = () => {
|
export const clearAllUniquenessCaches = () => {
|
||||||
// Clear cache for common unique fields
|
// Clear cache for common unique fields
|
||||||
['item_number', 'upc', 'barcode', 'supplier_no', 'notions_no'].forEach(fieldKey => {
|
['item_number', 'upc', 'barcode', 'supplier_no', 'notions_no'].forEach(fieldKey => {
|
||||||
clearValidationCacheForField(fieldKey, null);
|
clearValidationCacheForField(fieldKey);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Also clear any cache entries that might involve uniqueness validation
|
// Also clear any cache entries that might involve uniqueness validation
|
||||||
@@ -359,12 +351,12 @@ export const useValidation = <T extends string>(
|
|||||||
// Force cache clearing for uniqueness-validated fields to ensure fresh validation
|
// Force cache clearing for uniqueness-validated fields to ensure fresh validation
|
||||||
if (isUniqueField) {
|
if (isUniqueField) {
|
||||||
console.log(`Clearing validation cache for uniqueness field: ${fieldKey}`);
|
console.log(`Clearing validation cache for uniqueness field: ${fieldKey}`);
|
||||||
clearValidationCacheForField(fieldKey, null);
|
clearValidationCacheForField(fieldKey);
|
||||||
|
|
||||||
// If a field that might affect item_number, also clear item_number cache
|
// If a field that might affect item_number, also clear item_number cache
|
||||||
if (triggersItemNumberValidation) {
|
if (triggersItemNumberValidation) {
|
||||||
console.log('Also clearing item_number validation cache');
|
console.log('Also clearing item_number validation cache');
|
||||||
clearValidationCacheForField('item_number', null);
|
clearValidationCacheForField('item_number');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -9,7 +9,8 @@ export const convertToError = (error: any): ErrorType => {
|
|||||||
return {
|
return {
|
||||||
message: typeof error.message === 'string' ? error.message : String(error.message || ''),
|
message: typeof error.message === 'string' ? error.message : String(error.message || ''),
|
||||||
level: error.level || 'error',
|
level: error.level || 'error',
|
||||||
source: error.source || 'row'
|
source: error.source || 'row',
|
||||||
|
type: error.type || 'custom'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Field, Data, ErrorSources, ErrorType as ValidationErrorType } from '../../../types'
|
import { Field, Data, ErrorSources, ErrorType as ValidationErrorType } from '../../../types'
|
||||||
import { ErrorType } from '../types'
|
import { ErrorType } from '../types/index'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Formats a price value to a consistent format
|
* Formats a price value to a consistent format
|
||||||
@@ -44,7 +44,7 @@ export const translations = {
|
|||||||
backButtonTitle: "Back",
|
backButtonTitle: "Back",
|
||||||
noRowsMessage: "No data found",
|
noRowsMessage: "No data found",
|
||||||
noRowsMessageWhenFiltered: "No data containing errors",
|
noRowsMessageWhenFiltered: "No data containing errors",
|
||||||
discardButtonTitle: "Discard selected rows",
|
discardButtonTitle: "Delete selected rows",
|
||||||
filterSwitchTitle: "Show only rows with errors",
|
filterSwitchTitle: "Show only rows with errors",
|
||||||
},
|
},
|
||||||
imageUploadStep: {
|
imageUploadStep: {
|
||||||
@@ -31,8 +31,6 @@ export type RsiProps<T extends string> = {
|
|||||||
isNavigationEnabled?: boolean
|
isNavigationEnabled?: boolean
|
||||||
// Translations for each text
|
// Translations for each text
|
||||||
translations?: TranslationsRSIProps
|
translations?: TranslationsRSIProps
|
||||||
// Theme configuration passed to underlying Chakra-UI
|
|
||||||
customTheme?: object
|
|
||||||
// Specifies maximum number of rows for a single import
|
// Specifies maximum number of rows for a single import
|
||||||
maxRecords?: number
|
maxRecords?: number
|
||||||
// Maximum upload filesize (in bytes)
|
// Maximum upload filesize (in bytes)
|
||||||
@@ -75,7 +73,7 @@ export type Field<T extends string> = {
|
|||||||
// Alternate labels used for fields' auto-matching, e.g. "fname" -> "firstName"
|
// Alternate labels used for fields' auto-matching, e.g. "fname" -> "firstName"
|
||||||
alternateMatches?: string[]
|
alternateMatches?: string[]
|
||||||
// Validations used for field entries
|
// Validations used for field entries
|
||||||
validations?: ValidationConfig[]
|
validations?: Validation[]
|
||||||
// Field entry component
|
// Field entry component
|
||||||
fieldType: FieldType
|
fieldType: FieldType
|
||||||
// UI-facing values shown to user as field examples pre-upload phase
|
// UI-facing values shown to user as field examples pre-upload phase
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import type { WorkSheet } from "xlsx"
|
||||||
|
|
||||||
|
export const exceedsMaxRecords = (workSheet: WorkSheet, maxRecords: number) => {
|
||||||
|
const [top, bottom] = workSheet["!ref"]?.split(":").map((position: string) => parseInt(position.replace(/\D/g, ""), 10)) || []
|
||||||
|
return bottom - top > maxRecords
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user