Added csv edit modal

assets/js/src/core/components/operational-grid/csv-import-modal/csv-import-modal.tsx

@@ -0,0 +1,80 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import React, { useState, useEffect } from 'react'
+import { Modal } from '@Pimcore/components/modal/modal'
+import { Input } from 'antd'
+import { type ColumnDef } from '@tanstack/react-table'
+import { useTranslation } from 'react-i18next'
+
+export interface CsvImportModalProps {
+  open: boolean
+  columns: Array<ColumnDef<any>>
+  value: any[]
+  onConfirm: (newRows: any[]) => void
+  onCancel: () => void
+}
+
+const getColumnKeys = (columns: Array<ColumnDef<any>>): string[] => {
+  return columns
+    .filter(col => 'accessorKey' in col)
+    .map(col => ('accessorKey' in col ? (col.accessorKey as string) : ''))
+    .filter(key => key !== '')
+}
+
+const rowsToCsv = (rows: any[], colKeys: string[]): string => {
+  return rows.map(row => colKeys.map(k => row[k] ?? '').join(',')).join('\n')
+}
+
+const csvToRows = (csv: string, colKeys: string[]): any[] => {
+  return csv.split('\n')
+    .filter(line => line.trim() !== '')
+    .map(line => {
+      const cells = line.split(',')
+      return Object.fromEntries(colKeys.map((k, i) => [k, cells[i]?.trim() ?? '']))
+    })
+}
+
+export const CsvImportModal = (props: CsvImportModalProps): React.JSX.Element => {
+  const { open, columns, value, onConfirm, onCancel } = props
+  const { t } = useTranslation()
+  const [csvText, setCsvText] = useState('')
+
+  const colKeys = getColumnKeys(columns)
+
+  useEffect(() => {
+    if (open) {
+      setCsvText(rowsToCsv(value, colKeys))
+    }
+  }, [open])
+
+  const handleOk = (): void => {
+    const newRows = csvToRows(csvText, colKeys)
+    onConfirm(newRows)
+  }
+
+  return (
+    <Modal
+      cancelText={ t('operational-grid.csv-import.cancel') }
+      okText={ t('operational-grid.csv-import.ok') }
+      onCancel={ onCancel }
+      onOk={ handleOk }
+      open={ open }
+      title={ t('operational-grid.csv-import.title') }
+    >
+      <p>{t('operational-grid.csv-import.description')}</p>
+      <Input.TextArea
+        onChange={ (e) => { setCsvText(e.target.value) } }
+        rows={ 10 }
+        value={ csvText }
+      />
+    </Modal>
+  )
+}

assets/js/src/core/components/operational-grid/hooks/use-operations.tsx

@@ -11,6 +11,8 @@
 import { useOperationalGridContext } from '../provider/operational-grid-provider'
 import { type ColumnDef } from '@tanstack/react-table'
 import { isNil } from 'lodash'
+import React, { useState } from 'react'
+import { CsvImportModal } from '../csv-import-modal/csv-import-modal'
 
 export interface UseOperationsReturn {
   addRow: (data?: any) => void
@@ -21,13 +23,16 @@ export interface UseOperationsReturn {
   addColumn: (column: ColumnDef<any>, defaultValue?: any) => void
   removeColumn: (columnId: string) => void
   updateColumn: (columnId: string, updatedColumn: ColumnDef<any>) => void
+  openCsvImport?: () => void
+  csvImportModal: React.JSX.Element | null
 }
 
 export const useOperations = (): UseOperationsReturn => {
-  const { value, onChange, finalGridProps, columns, onColumnsChange } = useOperationalGridContext()
+  const { value, onChange, finalGridProps, columns, onColumnsChange, disableCsvImport } = useOperationalGridContext()
   const selectedRows = finalGridProps.selectedRows
   const onSelectedRowsChange = finalGridProps.onSelectedRowsChange
   const setRowId = finalGridProps.setRowId
+  const [isCsvImportOpen, setIsCsvImportOpen] = useState(false)
 
   const getRowId = (row: any, index: number): string => {
     if (!isNil(setRowId)) {
@@ -122,6 +127,33 @@ export const useOperations = (): UseOperationsReturn => {
     onColumnsChange?.(newColumns)
   }
 
+  const handleCsvImportConfirm = (newRows: any[]): void => {
+    onChange?.(newRows)
+    setIsCsvImportOpen(false)
+  }
+
+  const handleCsvImportCancel = (): void => {
+    setIsCsvImportOpen(false)
+  }
+
+  const csvEnabled = disableCsvImport !== true
+
+  const openCsvImport = csvEnabled
+    ? (): void => { setIsCsvImportOpen(true) }
+    : undefined
+
+  const csvImportModal = csvEnabled
+    ? (
+      <CsvImportModal
+        columns={ columns }
+        onCancel={ handleCsvImportCancel }
+        onConfirm={ handleCsvImportConfirm }
+        open={ isCsvImportOpen }
+        value={ value }
+      />
+      )
+    : null
+
   return {
     addRow,
     clearAll,
@@ -130,6 +162,8 @@ export const useOperations = (): UseOperationsReturn => {
     getSelectedRowsData,
     addColumn,
     removeColumn,
-    updateColumn
+    updateColumn,
+    openCsvImport,
+    csvImportModal
   }
 }

assets/js/src/core/components/operational-grid/operational-grid.stories.tsx

@@ -82,6 +82,15 @@ const config: Meta = {
                         </IconButton>
                       </>
                     )}
+                    {operations.openCsvImport !== undefined && (
+                      <IconButton
+                        icon={ { value: 'edit-pen' } }
+                        onClick={ operations.openCsvImport }
+                      >
+                        Import CSV
+                      </IconButton>
+                    )}
+                    {operations.csvImportModal}
                   </Space>
                 )
               }}
@@ -322,6 +331,15 @@ export const WithColumnOperations = {
                         </IconButton>
                       </Space>
                     </div>
+                    {operations.openCsvImport !== undefined && (
+                      <IconButton
+                        icon={ { value: 'edit-pen' } }
+                        onClick={ operations.openCsvImport }
+                      >
+                        Import CSV
+                      </IconButton>
+                    )}
+                    {operations.csvImportModal}
                   </Space>
                 )
               }}
@@ -437,6 +455,15 @@ export const WithDragAndDrop = {
                           Reset Order
                         </IconButton>
                       </div>
+                      {operations.openCsvImport !== undefined && (
+                        <IconButton
+                          icon={ { value: 'edit-pen' } }
+                          onClick={ operations.openCsvImport }
+                        >
+                          Import CSV
+                        </IconButton>
+                      )}
+                      {operations.csvImportModal}
                     </Space>
                   )
                 }}
@@ -450,3 +477,17 @@ export const WithDragAndDrop = {
     return <ComponentWrapper />
   }
 }
+
+export const WithCsvImportDisabled = {
+  args: {
+    value: initialData,
+    columns,
+    enableSorting: true,
+    enableRowSelection: true,
+    enableMultipleRowSelection: true,
+    disableCsvImport: true,
+    onChange: (value: Item[]) => {
+      console.log('Data changed:', value)
+    }
+  }
+}

assets/js/src/core/components/operational-grid/operational-grid.tsx

@@ -21,10 +21,11 @@ export interface OperationalGridProps extends Omit<GridProps, 'data' | 'onUpdate
   onColumnsChange?: (columns: Array<ColumnDef<any>>) => void
   children: React.ReactNode
   onUpdateCellData?: GridProps['onUpdateCellData']
+  disableCsvImport?: boolean
 }
 
 const OperationalGrid = (props: OperationalGridProps): React.JSX.Element => {
-  const { value = [], onChange, onColumnsChange, children, onUpdateCellData, columns = [], ...gridProps } = props
+  const { value = [], onChange, onColumnsChange, children, onUpdateCellData, columns = [], disableCsvImport, ...gridProps } = props
 
   const defaultOnUpdateCellData: GridProps['onUpdateCellData'] = (event) => {
     const { columnId, rowIndex, value: newCellValue } = event
@@ -44,6 +45,7 @@ const OperationalGrid = (props: OperationalGridProps): React.JSX.Element => {
   return (
     <OperationalGridProvider
       columns={ columns }
+      disableCsvImport={ disableCsvImport }
       finalGridProps={ finalGridProps }
       onChange={ onChange }
       onColumnsChange={ onColumnsChange }

assets/js/src/core/components/operational-grid/provider/operational-grid-provider.tsx

@@ -18,6 +18,7 @@ export interface IOperationalGridContext {
   columns: Array<ColumnDef<any>>
   onColumnsChange?: (columns: Array<ColumnDef<any>>) => void
   finalGridProps: GridProps
+  disableCsvImport?: boolean
 }
 
 export const OperationalGridContext = createContext<IOperationalGridContext | undefined>(undefined)

assets/js/src/core/modules/select-option/components/select-option-editor/select-option-entries-grid.tsx

@@ -138,6 +138,15 @@ export const SelectOptionEntriesGrid = ({ value = [], onChange }: SelectOptionEn
                   tooltip={ { title: t('add') } }
                   type="default"
                 />
+                {operations.openCsvImport !== undefined && (
+                  <IconButton
+                    icon={ { value: 'edit-pen' } }
+                    onClick={ operations.openCsvImport }
+                    tooltip={ { title: t('operational-grid.csv-import.title') } }
+                    type="default"
+                  />
+                )}
+                {operations.csvImportModal}
               </Space>
             )
           }}