-
- {items}
-
-
-
- )
-}
-
-function MessageInput ({ onSendMessage }) {
- const [message, setMessage] = useState('')
-
- function handleEnter (e) {
- e.preventDefault()
- if (!message) return
- setMessage('')
- onSendMessage(message)
- }
-
- return (
-
-
- {setMessage(e.target.value)}} value={message}
- placeholder="Type something ..."/>
-
-
-
- )
-}
-
-function Chat () {
- const [messages, setMessages] = useImmer([])
- const [user, setUser] = useState('unknown')
- const [socket, setSocket] = useState(null)
-
- useEffect(() => {
- if (CHAT_DEBUG) console.log('chat', 'init')
- const socket = socketIOClient(CHAT_SERVER_URL)
- socket.on('connect', () => {
- if (CHAT_DEBUG) console.log('chat', socket.id, 'connected')
- setUser(socket.id)
- setSocket(socket)
- })
- socket.on('chat message', (msg) => {
- if (CHAT_DEBUG) console.log('chat', socket.id, 'receive', msg)
- setMessages(messages => {messages.push(msg)})
- })
- return () => {
- if (CHAT_DEBUG) console.log('chat', socket.id, 'destroyed')
- socket.removeAllListeners()
- socket.close()
- setSocket(null)
- }
- }, [])
-
- function handleSendMessage (message) {
- const msg = { user, message, id: `${Date.now()}-${Math.random()}` }
- socket && socket.emit('chat message', msg)
- if (CHAT_DEBUG) console.log('chat', (socket) ? socket.id : null, 'send', msg)
- }
-
- return (<>
-
-
-
-
-
- )
-}
-
-export default Chat
\ No newline at end of file
diff --git a/apps/_ex02front/containers/FormBlocks.js b/apps/_ex02front/containers/FormBlocks.js
deleted file mode 100644
index 18f2aa73..00000000
--- a/apps/_ex02front/containers/FormBlocks.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useApolloClient } from '@core/next/apollo'
-import { useEffect, useMemo, useState } from 'react'
-import { Select } from 'antd'
-
-function SearchInput ({ search, ...props }) {
- const client = useApolloClient()
- const [selected, setSelected] = useState('')
- const [data, setData] = useState([])
- const [value, setValue] = useState('')
- const options = useMemo(
- () => data.map(d =>
{d.text}),
- [data, value],
- )
-
- async function handleSearch (value) {
- const data = await search(client, (selected) ? selected + ' ' + value : value)
- if (data.length) setData(data)
- setValue(value)
- }
-
- function handleSelect (value, options) {
- setSelected(options.children)
- }
-
- function handleClear () {
- setSelected('')
- }
-
- useEffect(() => {
- handleSearch('')
- }, [])
-
- return
-}
-
-export {
- SearchInput,
-}
diff --git a/apps/_ex02front/containers/FormList.js b/apps/_ex02front/containers/FormList.js
deleted file mode 100644
index bf637c35..00000000
--- a/apps/_ex02front/containers/FormList.js
+++ /dev/null
@@ -1,330 +0,0 @@
-import { Button, Dropdown, Form, Input, List, Menu, Modal, Popconfirm, Skeleton, Typography } from 'antd'
-import { DownOutlined, PlusOutlined } from '@ant-design/icons'
-import styled from '@emotion/styled'
-import React, { useState } from 'react'
-import { useIntl } from '@core/next/intl'
-import { useMutation } from '@core/next/apollo'
-
-import { runMutation } from '../utils/mutations.utils'
-
-const identity = (x) => !!x
-const NON_FIELD_ERROR_NAME = '_NON_FIELD_ERROR_'
-
-class ValidationError extends Error {
- constructor (message, field = NON_FIELD_ERROR_NAME) {
- super(message)
- this.name = 'ValidationError'
- this.field = field
- }
-}
-
-const SListItemForm = styled(Form)`
- width: 100%;
- display: flex;
- flex-flow: row wrap;
- justify-content: center;
- align-items: stretch;
- align-content: stretch;
-`
-
-const SListItem = styled(List.Item)`
- padding: 0 !important;
-`
-
-const SListItemMeta = styled(List.Item.Meta)`
- flex: 1 0 55%;
- margin: 16px 24px;
-`
-
-const SListItemExtra = styled.div`
- flex: none;
- margin: 16px 24px;
-
- & ul:first-child {
- margin-top: 0;
- }
-`
-
-const SSkeleton = styled(Skeleton)`
- margin: 16px 24px;
-`
-
-const SListActionsUl = styled.ul`
- margin: 10px 10px 0;
- text-align: center;
-
- > li {
- margin: 0;
- }
-`
-
-function FormList ({ dataSource, renderItem, ...extra }) {
- if (!renderItem) throw new Error('renderItem prop is required')
-
- return
-
- function renderItemWrapper (item) {
- const itemData = renderItem(item)
- const itemMeta = { key: item.id, ...(itemData.itemMeta || {}) }
- const formMeta = { layout: 'inline', ...(itemData.formMeta || {}) }
- const mainBlockMeta = { key: `m${item.id}`, ...(itemData.mainBlockMeta || {}) }
- const extraBlockMeta = { key: `e${item.id}`, ...(itemData.extraBlockMeta || {}) }
- return
-
-
-
-
- {(itemData.actions && Array.isArray(itemData.actions)) ?
- itemData.actions
- .map((actionsLine, i) => {
- if (!actionsLine) return null
- if (!Array.isArray(actionsLine)) throw new Error('renderItem() => itemData.actions should be array of arrays')
- const cleanedActionsLine = actionsLine.filter(identity)
- const length = cleanedActionsLine.length
- if (length === 0) return null
- return
- {cleanedActionsLine
- .map((action, j) => {
- if (!action) return null
- return
- {action}
- {j !== length - 1 && }
-
- })
- }
-
- })
- .filter(identity)
- : itemData.actions}
-
-
-
-
- }
-}
-
-function CreateFormListItemButton ({ label, ...extra }) {
- return
-}
-
-function ExtraDropdownActionsMenu ({ actions }) {
- const actionsLine = actions.filter(identity)
- const [popConfirmProps, setPopConfirmProps] = useState({ visible: false, title: null, icon: null })
-
- function handleAction ({ key }) {
- const action = actionsLine[key]
- if (action.confirm) {
- setPopConfirmProps({
- visible: true,
- onConfirm: action.action,
- onCancel: () => setPopConfirmProps({ visible: false, title: null, icon: null }),
- ...action.confirm,
- })
- } else {
- setPopConfirmProps({ visible: false, title: null, icon: null })
- action.action()
- }
- }
-
- return
-
- {actionsLine.map((action, i) => {action.label})}
- }>
- ...
-
-
-}
-
-function ExpandableDescription ({ children }) {
- const intl = useIntl()
- const ReadMoreMsg = intl.formatMessage({ id: 'ReadMore' })
- return
- {children}
-
-}
-
-function useCreateAndEditModalForm () {
- const [visible, setIsModalVisible] = useState(false)
- const [editableItem, setModalObject] = useState(null)
-
- function openCreateModal () {
- setIsModalVisible(true)
- setModalObject(null)
- }
-
- function openEditModal (item) {
- setIsModalVisible(true)
- setModalObject(item)
- }
-
- function cancelModal () {
- setIsModalVisible(false)
- setModalObject(null)
- }
-
- return { visible, editableItem, openCreateModal, openEditModal, cancelModal }
-}
-
-function CreateModalFormWithButton ({ CreateButtonLabelMsg, OnCreatedMsg, ...props }) { // eslint-disable-line no-unused-vars
- // TODO(pahaz): use it somewhere as example! (and remove eslint-disable-line)
- const { visible, openCreateModal, cancelModal } = useCreateAndEditModalForm()
-
- const intl = useIntl()
- const CreateMsg = intl.formatMessage({ id: 'Create' })
- const CreatedMsg = intl.formatMessage({ id: 'Created' })
- const SaveMsg = intl.formatMessage({ id: 'Save' })
-
- return <>
-
-
-
-}
-
-function CRUDListBlock () { // eslint-disable-line no-unused-vars
- // TODO(pahaz): inside organizations logic here (and remove eslint-disable-line)
-}
-
-function BaseModalForm ({ action, mutation, mutationExtraVariables, mutationExtraData, mutationOptions, formValuesToMutationDataPreprocessor, formValuesToMutationDataPreprocessorContext, formInitialValues, children, onMutationCompleted, onFormValuesChange, modalExtraFooter = [], visible, cancelModal, ModalTitleMsg, ModalCancelButtonLabelMsg, ModalSaveButtonLabelMsg, ErrorToFormFieldMsgMapping, OnErrorMsg, OnCompletedMsg }) {
- // TODO(pahaz): refactor all (mutation, mutationExtraVariables, mutationOptions, mutationExtraData) and remove it
- if (mutationOptions) throw new Error('mutationOptions is not supported!')
- if (!children) throw new Error('need to define Form.Item inside ModalForm')
- if (!mutation && !action) throw new Error('need to pass mutation or action prop')
- if (action && mutation) throw new Error('impossible to pass mutation and action prop')
- if (action && mutationExtraVariables) throw new Error('impossible to pass action and mutationExtraVariables prop')
- if (action && mutationExtraData) throw new Error('impossible to pass action and mutationExtraData prop')
- if (typeof visible === 'undefined') throw new Error('need to pass visible prop')
- if (typeof cancelModal === 'undefined') throw new Error('need to pass cancelModal prop')
- if (!mutationExtraData) mutationExtraData = {}
- if (!mutationExtraVariables) mutationExtraVariables = {}
- if (typeof mutationExtraData !== 'object') throw new Error('wrong mutationExtraData prop')
- if (typeof mutationExtraVariables !== 'object') throw new Error('wrong mutationExtraVariables prop')
-
- const [form] = Form.useForm()
- const [isLoading, setIsLoading] = useState(false)
- let create = null
- if (!action) {
- [create] = useMutation(mutation) // eslint-disable-line react-hooks/rules-of-hooks
- }
-
- const intl = useIntl()
- const CancelMsg = intl.formatMessage({ id: 'Cancel' })
- const SaveMsg = intl.formatMessage({ id: 'Save' })
- const ClientSideErrorMsg = intl.formatMessage({ id: 'ClientSideError' })
-
- function handleFormSubmit (values) {
- if (values.hasOwnProperty(NON_FIELD_ERROR_NAME)) delete values[NON_FIELD_ERROR_NAME]
- let data
- try {
- data = (formValuesToMutationDataPreprocessor) ? formValuesToMutationDataPreprocessor(values, formValuesToMutationDataPreprocessorContext) : values
- } catch (err) {
- if (err instanceof ValidationError) {
- let errors = []
- if (ErrorToFormFieldMsgMapping) {
- const errorString = `${err}`
- Object.keys(ErrorToFormFieldMsgMapping).forEach((msg) => {
- if (errorString.includes(msg)) {
- errors.push(ErrorToFormFieldMsgMapping[msg])
- }
- })
- }
- if (errors.length === 0) {
- errors = [{ name: err.field || NON_FIELD_ERROR_NAME, errors: [String(err.message)] }]
- }
- form.setFields(errors)
- return
- } else {
- form.setFields([{ name: NON_FIELD_ERROR_NAME, errors: [ClientSideErrorMsg] }])
- throw err // unknown error, rethrow it (**)
- }
- }
- form.setFields([{ name: NON_FIELD_ERROR_NAME, errors: [] }])
- setIsLoading(true)
-
- const actionOrMutationProps = (!action) ?
- { mutation: create, variables: { data: { ...data, ...mutationExtraData }, ...mutationExtraVariables } } :
- { action: () => action({ ...data }) }
-
- return runMutation({
- ...actionOrMutationProps,
- onCompleted: () => {
- if (onMutationCompleted) onMutationCompleted()
- form.resetFields()
- },
- onFinally: () => {
- setIsLoading(false)
- cancelModal()
- },
- intl,
- form,
- ErrorToFormFieldMsgMapping,
- OnErrorMsg,
- OnCompletedMsg,
- })
- }
-
- function handleSave () {
- form.submit()
- }
-
- function handleChangeForm (changedValues, allValues) {
- if (onFormValuesChange) onFormValuesChange(changedValues, allValues)
- }
-
- return (
{ModalCancelButtonLabelMsg || CancelMsg},
- ,
- ]}
- >
-
- )
-}
-
-export {
- ValidationError,
- useCreateAndEditModalForm,
- BaseModalForm,
- CreateFormListItemButton,
- ExtraDropdownActionsMenu,
- ExpandableDescription,
-}
-
-export default FormList
diff --git a/apps/_ex02front/containers/FormTable.js b/apps/_ex02front/containers/FormTable.js
deleted file mode 100644
index e271ad40..00000000
--- a/apps/_ex02front/containers/FormTable.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { Form, Input, Table } from 'antd'
-
-const DEFAULT_ROW_CONTEXT = { editing: false }
-const RowFormContext = React.createContext()
-const RowContext = React.createContext()
-const TableContext = React.createContext()
-
-function DefaultCellWrapper ({ ...props }) {
- return
|
-}
-
-function DefaultCellInner ({ children, record, rowIndex, column }) {
- const inputRef = useRef()
- const form = useContext(RowFormContext)
- // const { editable, setRowContext } = useContext(RowContext)
- const [editing, setEditing] = useState(false)
-
- useEffect(() => {
- if (column.editable && editing && inputRef.current) {
- inputRef.current.focus()
- }
- }, [column, editing, inputRef])
-
- function toggleEdit () {
- setEditing(!editing)
- form.setFieldsValue({
- // GET
- [column.dataIndex]: record[column.dataIndex],
- })
- }
-
- async function handleEdited () {
- try {
- const values = await form.validateFields()
- if (column.onEdited) {
- column.onEdited(record, values)
- } else {
- console.warn('no column.onEdited(record, newValues) callback!', record, values)
- }
- toggleEdit()
- } catch (errInfo) {
- console.log('handleEdited() failed:', errInfo)
- }
- }
-
- if (!column.editable) return children
- if (editing) {
- return
-
-
- } else {
- return
- {children}
-
- }
-}
-
-function EditableCell ({
- record, rowIndex, column, // onCellExtraProps
- children,
- ...props
-}) {
- const { CellWrapper, CellInner } = useContext(TableContext)
-
- // console.log('EditableCell', rowIndex, record, column, children, props)
-
- let Wrapper = CellWrapper || DefaultCellWrapper
- let Inner = CellInner || DefaultCellInner
-
- if (!record || !column) {
- return
{children} | // placeholder time!
- }
-
- return
-
-
-}
-
-function DefaultRowWrapper ({ ...props }) {
- return
|
-}
-
-function DefaultRowInner ({ children, record, rowIndex }) {
- const form = useContext(RowFormContext)
- return
-}
-
-function EditableRow ({
- record, rowIndex, // onRowExtraProps
- children,
- ...props
-}) {
- // Base logic: provide `rowForm` and `rowContext`
- const { RowWrapper, RowInner, rowContextInitialState } = useContext(TableContext)
- const [form] = Form.useForm()
- const [rowContext, setRowContext] = useState(rowContextInitialState || DEFAULT_ROW_CONTEXT)
- const context = useMemo(() => ({
- ...rowContextInitialState || DEFAULT_ROW_CONTEXT,
- ...rowContext,
- setRowContext,
- }), [rowContext])
-
- // console.log('EditableRow', rowIndex, record, children, props)
-
- let Wrapper = RowWrapper || DefaultRowWrapper
- let Inner = RowInner || DefaultRowInner
-
- if (!record) {
- return
{children}
// placeholder time!
- }
-
- return (
-
-
-
-
-
-
-
- )
-}
-
-function EditableBody (props) {
- // console.log('EditableBody', props)
- return
-}
-
-const TABLE_COMPONENTS = {
- body: {
- wrapper: EditableBody,
- row: EditableRow,
- cell: EditableCell,
- },
-}
-
-function _addExtraCellProps (columns) {
- // add: record, rowIndex, column
- return columns
- .map(column => {
- return {
- ...column,
- // Set props on per cell
- onCell: (record, rowIndex) => {
- const baseOnCell = (column.onCell) ? column.onCell(record, rowIndex) : {}
- return {
- ...baseOnCell,
- record,
- column,
- rowIndex,
- }
- },
- }
- })
-}
-
-function _addExtraRowProps (columns, onRow = null) {
- // add: record, rowIndex
- return (record, rowIndex) => {
- const baseOnRow = (onRow) ? onRow(record, rowIndex) : {}
- return {
- ...baseOnRow,
- record,
- rowIndex,
- }
- }
-}
-
-function FormTable ({ columns, dataSource, pagination, onChangeFilterPaginationSort, rowContextInitialState, tableContextInitialState, RowInner, CellInner }) {
- // Each row has RowContext and RowFormContext!
- if (!columns) throw new Error('columns prop is required')
-
- const fixedColumns = useMemo(() => _addExtraCellProps(columns), [columns])
- const fixedOnRow = useMemo(() => _addExtraRowProps(columns), [columns])
-
- // TODO(pahaz): add CellWrapper, RowWrapper if you know any use case?!
- return
-
-
-}
-
-FormTable.TableContext = TableContext
-FormTable.RowFormContext = RowFormContext
-FormTable.RowContext = RowContext
-export default FormTable
diff --git a/apps/_ex02front/containers/FormTableBlocks.js b/apps/_ex02front/containers/FormTableBlocks.js
deleted file mode 100644
index 7e859b7e..00000000
--- a/apps/_ex02front/containers/FormTableBlocks.js
+++ /dev/null
@@ -1,313 +0,0 @@
-import React, { useContext, useEffect } from 'react'
-import { Button, Form, Input, Space } from 'antd'
-import { useIntl } from '@core/next/intl'
-import ExcelExporterButton from './FormTableExcelImport'
-import { CreateFormListItemButton, ExtraDropdownActionsMenu } from './FormList'
-import FormTable from './FormTable'
-import { useAuth } from '@core/next/auth'
-import { useImmerReducer } from 'use-immer'
-import { DeleteOutlined, QuestionCircleOutlined, SaveOutlined } from '@ant-design/icons'
-
-const _USE_TABLE_INITIAL_STATE = {
- actions: {}, // { Create: ({values, item, form, ...}) => { ... }
- // forms: {},
- data: [],
- loading: false,
- pagination: {
- total: undefined,
- current: 1,
- pageSize: 20,
- },
- filters: {},
- sorter: {},
-}
-
-function createNewGQLItem () {
- return {
- id: Math.random(),
- isUnsavedNew: true,
- }
-}
-
-function _tableStateReducer (draft, action) {
- switch (action.type) {
- case 'reset': {
- return _USE_TABLE_INITIAL_STATE
- }
- case 'set': {
- const { key, value } = action
- draft[key] = value
- return undefined
- }
- case 'merge': {
- const { key, value } = action
- draft[key] = { ...draft[key], ...value }
- return undefined
- }
- case 'remove': {
- const { where } = action
- const keys = Object.keys(where)
- const indexes = []
- draft.data.forEach((x, index) => {
- if (keys.every((k) => x[k] === where[k])) {
- indexes.push(index)
- }
- })
- indexes.reverse()
- for (let index of indexes) {
- draft.data.splice(index, 1)
- }
- return undefined
- }
- case 'query': {
- const { pagination, filters, sorter } = action
- if (pagination) draft['pagination'] = { ...draft['pagination'], ...pagination }
- if (filters) draft['filters'] = { ...draft['filters'], ...filters }
- if (sorter) draft['sorter'] = { ...draft['sorter'], ...sorter }
- return undefined
- }
- }
-}
-
-function useTable () {
- const [state, dispatch] = useImmerReducer(_tableStateReducer, _USE_TABLE_INITIAL_STATE)
-
- return {
- state,
- setData: (value) => dispatch({ type: 'set', key: 'data', value }),
- updateFilterPaginationSort: (pagination, filters, sorter) => dispatch({
- type: 'query',
- pagination,
- filters,
- sorter,
- }),
- updateActions: (value) => dispatch({ type: 'merge', key: 'actions', value }),
- action: (name, args) => state.actions[name](args),
- reset: () => dispatch({ type: 'reset' }),
- remove: (where) => dispatch({ type: 'remove', where }),
- }
-}
-
-function _useTableRowForm () {
- const form = useContext(FormTable.RowFormContext)
- const { table } = useContext(FormTable.TableContext)
- const { editing, loading, hidden, setRowContext } = useContext(FormTable.RowContext)
-
- function setEditing (value) {
- return setRowContext(x => ({ ...x, editing: value }))
- }
-
- function setLoading (value) {
- return setRowContext(x => ({ ...x, loading: value }))
- }
-
- function setHidden (value) {
- return setRowContext(x => ({ ...x, hidden: value }))
- }
-
- function action (name, args) {
- table.action(name, args)
- }
-
- function remove (where) {
- table.remove(where)
- }
-
- return {
- action, remove,
- form, editing, loading, hidden,
- setEditing,
- setLoading,
- setHidden,
- }
-}
-
-function RenderActionsColumn (text, item, index) {
- const { user } = useAuth()
-
- const intl = useIntl()
- const AreYouSureMsg = intl.formatMessage({ id: 'AreYouSure' })
- const DeleteMsg = intl.formatMessage({ id: 'Delete' })
- const EditMsg = intl.formatMessage({ id: 'Edit' })
-
- const { isUnsavedNew } = item
- const { action, remove, form, setEditing, setLoading, editing, loading } = _useTableRowForm()
-
- function validateFields () {
- setLoading(true)
- return form.validateFields()
- .then((values) => action('CreateOrUpdate', { values, item, form }))
- .then(() => (isUnsavedNew) ? remove({ id: item.id }) : null)
- .then(() => (isUnsavedNew) ? null : setEditing(false))
- .finally(() => setLoading(false))
- }
-
- function deleteRow () {
- setLoading(false)
- setEditing(false)
- remove({ id: item.id })
- }
-
- return
- {(isUnsavedNew || editing) ?
-
- : null}
- {(isUnsavedNew) ?
-
- :
- ,
- },
- label: DeleteMsg,
- action: () => action('Delete', { values: { id: item.id }, item, form }),
- },
- {
- label: EditMsg,
- action: () => {
- setEditing(true)
- },
- },
- ]}/>
- }
-
-}
-
-function toGQLSortBy (sorter) {
- if (sorter) {
- let { field, order } = sorter
- if (field && order) {
- order = order.toLowerCase()
- if (order === 'asc' || order === 'ascend') order = 'ASC'
- else order = 'DESC'
- return `${field}_${order}`
- }
- }
- return undefined
-}
-
-function toGQLWhere (filters) {
- const where = {}
- Object.keys(filters).forEach((key) => {
- const v = filters[key]
- if (v && v.length === 1) {
- Object.assign(where, JSON.parse(v[0]))
- } else if (v && v.length >= 1) {
- if (where.OR) {
- // TODO(pahaz): it looks a problem in case of multiple OR
- throw new Error('Multiple OR query! Does not support!')
- }
- Object.assign(where, { OR: v.map(JSON.parse) })
- }
- })
- return where
-}
-
-function TableCellInner ({ children, record, rowIndex, column }) {
- const { editable, dataIndex, rules, normalize, editableInput } = column
- const { form, editing } = _useTableRowForm()
-
- const intl = useIntl()
- const FieldIsRequiredMsg = intl.formatMessage({ id: 'FieldIsRequired' })
-
- useEffect(() => {
- form.setFieldsValue({
- // TODO(pahaz): think about normalize!
- [dataIndex]: (normalize) ? normalize(record[dataIndex]) : record[dataIndex],
- })
- }, [])
-
- if (!editable || !editing) return children
- const input = (editableInput) ? editableInput() :
-
- return
- {input}
-
-}
-
-function NewOrExportTableBlock ({ columns, table }) {
- // createNewGQLItem, renderItem
- const data = table.state.data
- const setData = table.setData
-
- const intl = useIntl()
- const CreateMsg = intl.formatMessage({ id: 'Create' })
-
- function handleSetExportData (data) {
- setData(data.map(x => {
- return { ...createNewGQLItem(), ...x }
- }))
- }
-
- function handleAdd () {
- setData([...data, createNewGQLItem()])
- }
-
- // function handleSaveAll () {
- // console.log('TODO ... as child extra actions')
- // }
-
- // console.log('RERDER! NewOrExportTableBlock', columns)
-
- return <>
-
x.importFromFile))} setExportedData={handleSetExportData}/>
-
- {(data.length) ?
-
- {/**/}
- x.create))}
- CellInner={TableCellInner}
- rowContextInitialState={{ editing: true, loading: false }}
- tableContextInitialState={{ table }}
- />
-
- : null}
-
-}
-
-function ViewOrEditTableBlock ({ columns, table }) {
- const data = table.state.data
- const pagination = table.state.pagination
- const onChangeFilterPaginationSort = table.updateFilterPaginationSort
- return
-}
-
-export {
- useTable,
- RenderActionsColumn,
- toGQLSortBy,
- toGQLWhere,
- NewOrExportTableBlock,
- ViewOrEditTableBlock,
-}
diff --git a/apps/_ex02front/containers/FormTableExcelImport.js b/apps/_ex02front/containers/FormTableExcelImport.js
deleted file mode 100644
index f39f3148..00000000
--- a/apps/_ex02front/containers/FormTableExcelImport.js
+++ /dev/null
@@ -1,257 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import XLSX from 'xlsx'
-import { Button, Col, Form, Input, Progress, Row, Select, Table, Tooltip, Typography, Upload } from 'antd'
-import { InboxOutlined } from '@ant-design/icons'
-import { defaultValidator, fromExData, reValidateExData, toExData } from '../utils/excel.utils'
-import { useIntl } from '@core/next/intl'
-import { useImmer } from 'use-immer'
-import styled from '@emotion/styled'
-import { CreateFormListItemButton } from './FormList'
-
-const SHEET_JS_ACCEPT_FILES = [
- 'xlsx', 'xlsb', 'xlsm', 'xls', 'xml', 'csv', 'txt',
- 'ods', 'fods', 'uos', 'sylk', 'dif', 'dbf', 'prn',
- 'qpw', '123', 'wb*', 'wq*', 'html', 'htm',
-].map(function (x) { return '.' + x }).join(',')
-
-const ErrorText = styled.div`
- word-break: break-word;
- background: red;
-`
-
-const OkText = styled.div`
- word-break: break-word;
- background: green;
-`
-
-const WarnText = styled.div`
- word-break: break-word;
- background: yellow;
-`
-
-function MappingForm ({ columns, cols, onChangeMapping, onFinish }) {
- const [form] = Form.useForm()
- const [values, setValues] = useState({})
-
- const intl = useIntl()
- const ColumnMsg = intl.formatMessage({ id: 'containers.FormTableExcelImport.Column' })
- const SelectColumnMsg = intl.formatMessage({ id: 'containers.FormTableExcelImport.SelectColumn' })
- const NextStepButtonLabelMsg = intl.formatMessage({ id: 'containers.FormTableExcelImport.NextStepButtonLabel' })
-
- function handleChanges (changedValues, allValues) {
- const titleToIndex = Object.fromEntries(cols.map((col) => [col.title, col.dataIndex]))
- const remapped = Object.fromEntries(
- Object.entries(allValues)
- .filter(([k, v]) => v)
- .map(([k, v]) => [titleToIndex[v], k]),
- )
- setValues(allValues)
- onChangeMapping(remapped)
- }
-
- {/* disable chrome autofill hack 2 */}
- useEffect(() => {
- document.querySelectorAll('.ant-select-selector input').forEach((e) => {
- e.setAttribute('autocomplete', `stopDamnAutocomplete${Math.random()}`)
- })
- })
-
- const selectColumnComponent = (
-
- )
-
- return
-}
-
-function ExcelExporterButton ({ columns, setExportedData }) {
- if (!columns) throw new Error('no columns prop')
-
- const [step, setStep] = useState(-1)
- const [tableState, setTableState] = useImmer({ data: [], cols: [], mapping: {} })
- const validators = Object.fromEntries(columns.map(column => [column.dataIndex, column.importValidator || defaultValidator]))
-
- const intl = useIntl()
- const ImportFromFileButtonLabelMsg = intl.formatMessage({ id: 'containers.FormTableExcelImport.ImportFromFileButtonLabel' })
- const ClickOrDragImportFileTextMsg = intl.formatMessage({ id: 'containers.FormTableExcelImport.ClickOrDragImportFileText' })
- const ClickOrDragImportFileHintMsg = intl.formatMessage({ id: 'containers.FormTableExcelImport.ClickOrDragImportFileHint' })
- const Step1TextMsg = intl.formatMessage({ id: 'containers.FormTableExcelImport.Step1Text' })
- const Step2TextMsg = intl.formatMessage({ id: 'containers.FormTableExcelImport.Step2Text' })
- const Step3TextMsg = intl.formatMessage({ id: 'containers.FormTableExcelImport.Step3Text' })
- const StepHelpText = {
- 1: Step1TextMsg,
- 2: Step2TextMsg,
- 3: Step3TextMsg,
- }
-
- function handleFile (file/*:File*/) {
- /* Boilerplate to set up FileReader */
- const reader = new FileReader()
- const rABS = !!reader.readAsBinaryString
- reader.onload = (e) => {
- /* Parse data */
- const bstr = e.target.result
- const wb = XLSX.read(bstr, { type: rABS ? 'binary' : 'array' })
- /* Get first worksheet */
- const wsname = wb.SheetNames[0]
- const ws = wb.Sheets[wsname]
- /* Convert array of arrays */
- const cols = makeAntdCols(ws['!ref'], { render: renderCell })
- const data = makeAntdData(ws)
- setStep(2)
- setTableState((draft) => {
- draft.cols = cols
- draft.data = data
- })
- }
- if (rABS) {
- reader.readAsBinaryString(file)
- } else {
- reader.readAsArrayBuffer(file)
- }
- }
-
- function handleChangeMapping (mapping) {
- setTableState(draft => {
- console.log('reValidateExData', tableState.mapping, mapping, validators)
- reValidateExData(draft.data, draft.mapping, mapping, validators)
- draft.mapping = mapping
- })
- }
-
- function handleFinish () {
- setStep(step + 1)
- setExportedData(fromExData(tableState.data, tableState.mapping))
- }
-
- return <>
- setStep(1)} label={ImportFromFileButtonLabelMsg}
- style={{ marginBottom: '16px', width: '100%', display: step === -1 ? 'block' : 'none' }}/>
- {(step > 0) ?
- 
- const menu =
- return isMobile ? (
-