Added csv edit modal (#3351)

* added csv edit modal

* Automatic frontend build

* update icon

* Automatic frontend build

* refined `CsvImportButton`

* Apply eslint-fixer changes

* removed not used prop

* Automatic frontend build

---------

Co-authored-by: Corepex <16717695+Corepex@users.noreply.github.com>

Author: Corepex

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

@@ -0,0 +1,45 @@
+/**
+ * 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 } from 'react'
+import { useTranslation } from 'react-i18next'
+import { IconButton } from '@Pimcore/components/icon-button/icon-button'
+import { CsvImportModal } from '../csv-import-modal/csv-import-modal'
+import { useOperationalGridContext } from '../provider/operational-grid-provider'
+
+export const CsvImportButton = (): React.JSX.Element => {
+  const { t } = useTranslation()
+  const { value, columns, onChange } = useOperationalGridContext()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handleConfirm = (newRows: any[]): void => {
+    onChange?.(newRows)
+    setIsOpen(false)
+  }
+
+  return (
+    <>
+      <IconButton
+        icon={ { value: 'edit-pen' } }
+        onClick={ () => { setIsOpen(true) } }
+        tooltip={ { title: t('operational-grid.csv-import.title') } }
+        type="default"
+      />
+
+      <CsvImportModal
+        columns={ columns }
+        onCancel={ () => { setIsOpen(false) } }
+        onConfirm={ handleConfirm }
+        open={ isOpen }
+        value={ value }
+      />
+    </>
+  )
+}

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/operational-grid.stories.tsx

@@ -15,6 +15,7 @@ import { createColumnHelper, type RowSelectionState, type ColumnDef } from '@tan
 import { DefaultCell } from '../grid/columns/default-cell'
 import { Space } from 'antd'
 import { IconButton } from '../icon-button/icon-button'
+import { CsvImportButton } from './csv-import-button/csv-import-button'
 import { type DragEndEvent } from '@dnd-kit/core'
 
 const config: Meta = {
@@ -82,6 +83,7 @@ const config: Meta = {
                         </IconButton>
                       </>
                     )}
+                    <CsvImportButton />
                   </Space>
                 )
               }}
@@ -322,6 +324,7 @@ export const WithColumnOperations = {
                         </IconButton>
                       </Space>
                     </div>
+                    <CsvImportButton />
                   </Space>
                 )
               }}
@@ -437,6 +440,7 @@ export const WithDragAndDrop = {
                           Reset Order
                         </IconButton>
                       </div>
+                      <CsvImportButton />
                     </Space>
                   )
                 }}

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

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { Box, ButtonGroup, IconButton, OperationalGrid, Space } from '@sdk/components'
+import { Box, ButtonGroup, CsvImportButton, IconButton, OperationalGrid, Space } from '@sdk/components'
 import { type ColumnDef, createColumnHelper } from '@tanstack/react-table'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -138,6 +138,7 @@ export const SelectOptionEntriesGrid = ({ value = [], onChange }: SelectOptionEn
                   tooltip={ { title: t('add') } }
                   type="default"
                 />
+                <CsvImportButton />
               </Space>
             )
           }}

assets/js/src/sdk/components/index.ts

@@ -197,6 +197,7 @@ export * from '@Pimcore/components/vertical-timeline/vertical-timeline'
 export * from '@Pimcore/components/predefined-layouts/config/config-layout'
 export * from '@Pimcore/components/tabpanel/tabpanel'
 export * from '@Pimcore/components/operational-grid/operational-grid'
+export * from '@Pimcore/components/operational-grid/csv-import-button/csv-import-button'
 export * from '@Pimcore/components/operational-grid/hooks/use-operations'
 export * from '@Pimcore/components/url-link/url-link'