dinocollab-core 1.0.0

package/src/lab/table-grid/item-actions.tsx

@@ -0,0 +1,138 @@
+import React, { Component, ComponentType, ReactNode } from 'react'
+import { Box, colors, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemProps, ListItemText, styled } from '@mui/material'
+import EditIcon from '@mui/icons-material/Edit'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
+import { ClosePopover, GlobalModalState, MapGlobalModalContext, PopoverGlobal } from '../../api-context'
+
+export type TableGridItemActionType = 'Edit' | 'Delete'
+
+const mapIcons: { [key in TableGridItemActionType]: ReactNode } = {
+  Edit: <EditIcon fontSize='small' color='primary' />,
+  Delete: <DeleteOutlineIcon fontSize='small' color='error' />
+}
+
+export interface TableGridItemActionsProps<T> {
+  value: T
+}
+
+type FormRenderFunc<T> = (value: T) => React.ReactNode
+
+interface ListItemDef<T> {
+  name: string
+  icon?: ReactNode
+  /** Whether this item should trigger a close action when clicked. @default true */
+  closableOnClick?: boolean
+  /** Handler called when item is clicked */
+  onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, value: T) => void
+  listItemProps?: ListItemProps
+  /**
+   * Optional custom ReactNode to override the entire ListItem UI.
+   * If provided, this will be rendered instead of the default ListItem structure
+   * (icon + text + click behavior).
+   */
+  override?: ComponentType<{ onClose?: ClosePopover }>
+}
+
+export interface TableGridItemActionsConfig<T> {
+  formEdit?: FormRenderFunc<T>
+  formDelete?: FormRenderFunc<T>
+  buttonEditConfig?: GlobalModalState
+  buttonDeleteConfig?: GlobalModalState
+  menuList?: {
+    before?: SingleOrArray<ListItemDef<T>>
+    after?: ListItemDef<T>
+  }
+}
+
+interface IProps<T> extends TableGridItemActionsProps<T>, TableGridItemActionsConfig<T> {}
+
+export function CreateTableGridItemActions<T>() {
+  class TableGridItemActions extends Component<IProps<T>> {
+    render() {
+      if (!this.isVisible()) return <></>
+      return (
+        <Wrap>
+          <IconButton
+            size='small'
+            onClick={(e) => {
+              PopoverGlobal.Api.open({
+                anchorEl: e.currentTarget,
+                popoverProps: { anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' } },
+                content: (
+                  <List>
+                    {this.renderItems(this.props.menuList?.before)}
+                    {this.renderItemWithForm('Edit', this.props.formEdit, this.props.buttonEditConfig)}
+                    {this.renderItemWithForm('Delete', this.props.formDelete, this.props.buttonEditConfig ?? { backdropActivated: true })}
+                    {this.renderItems(this.props.menuList?.after)}
+                  </List>
+                )
+              })
+            }}
+          >
+            <MoreVertIcon fontSize='small' />
+          </IconButton>
+        </Wrap>
+      )
+    }
+
+    isVisible = () => {
+      return !!this.props.formEdit || !!this.props.formDelete
+    }
+
+    renderItems = (value?: SingleOrArray<ListItemDef<T>>) => {
+      if (!value) return <></>
+      const list = Array.isArray(value) ? value : [value]
+      return list.map((item, index) => {
+        const key = item.name + index
+        const { override: Override } = item
+        if (Override) return <Override key={key} onClose={PopoverGlobal.Api.close} />
+        return (
+          <ListItem
+            key={key}
+            disablePadding
+            sx={{ minWidth: '170px' }}
+            onClick={(e) => {
+              if (item.closableOnClick !== false) PopoverGlobal.Api.close()
+              item.onClick && item.onClick(e, this.props.value)
+            }}
+            {...item.listItemProps}
+          >
+            <ListItemButton>
+              <ListItemIcon>{item.icon}</ListItemIcon>
+              <ListItemText primary={item.name} />
+            </ListItemButton>
+          </ListItem>
+        )
+      })
+    }
+
+    renderItemWithForm = (name: TableGridItemActionType, form?: FormRenderFunc<T>, globalState?: GlobalModalState) => {
+      if (!form) return <></>
+      return MapGlobalModalContext((context) => (
+        <ListItem
+          disablePadding
+          sx={{ minWidth: '170px' }}
+          onClick={() => {
+            PopoverGlobal.Api.close()
+            context.show({ renderContent: () => form(this.props.value), ...globalState })
+          }}
+        >
+          <ListItemButton>
+            <ListItemIcon>{mapIcons[name]}</ListItemIcon>
+            <ListItemText primary={name} />
+          </ListItemButton>
+        </ListItem>
+      ))
+    }
+  }
+  return TableGridItemActions
+}
+
+const Wrap = styled(Box)({
+  background: colors.common.white,
+  borderRadius: '6px',
+  '& > .MuiButtonBase-root': {
+    borderRadius: '6px'
+  }
+})

package/src/lab/table-grid/toolbar-pannel.tsx

@@ -0,0 +1,98 @@
+import React, { Component } from 'react'
+import { Box, BoxProps, Button, ButtonProps, styled, Tooltip, Typography, TypographyProps } from '@mui/material'
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
+import { MapGlobalModalContext } from '../../api-context'
+import CustomBreadcrumbs, { CustomBreadcrumbConfig } from '../../components/custom.breadcrumbs'
+
+interface SectionSlots {
+  before?: React.ReactNode
+  after?: React.ReactNode
+}
+
+export interface ToolbarPannelProps {
+  /** @default true */
+  visible?: boolean
+  searchInclude?: string[]
+  breadcrumbs?: CustomBreadcrumbConfig[]
+  title?: React.ReactNode
+  titleSlots?: SectionSlots
+  formCreate?: React.ReactNode
+  actionSlots?: SectionSlots
+  slots?: {
+    rootProps?: BoxProps
+    buttonCreateProps?: ButtonProps
+  }
+}
+
+class ToolbarPannel extends Component<ToolbarPannelProps> {
+  render() {
+    if (this.props.visible === false) return
+    return (
+      <Wrap {...this.props.slots?.rootProps}>
+        {this.props.titleSlots?.before}
+        {this.renderTitle()}
+        {this.props.titleSlots?.after}
+        <Box sx={{ flex: 1 }} />
+        {this.props.actionSlots?.before}
+        {this.renderButtonCreate()}
+        {this.props.actionSlots?.after}
+      </Wrap>
+    )
+  }
+
+  renderButtonCreate = () => {
+    if (!this.props.formCreate) return <></>
+    return MapGlobalModalContext((context) => (
+      <Tooltip title='Create new'>
+        <Button
+          size='small'
+          onClick={() => context.show({ renderContent: () => this.props.formCreate })}
+          startIcon={<AddCircleOutlineIcon fontSize='small' />}
+          sx={{ fontWeight: 600 }}
+          variant='contained'
+          {...this.props.slots?.buttonCreateProps}
+        >
+          Create
+        </Button>
+      </Tooltip>
+    ))
+  }
+
+  renderTitle = () => {
+    const { title, breadcrumbs } = this.props ?? {}
+    if (breadcrumbs) return <CustomBreadcrumbs value={breadcrumbs} />
+    if (typeof title === 'string') return <Title>{title}</Title>
+    return <>{title}</>
+  }
+}
+
+export default ToolbarPannel
+
+// const SeachHelp = styled('ul')({
+//   margin: '0 0 0 18px',
+//   padding: 0,
+//   li: {
+//     position: 'relative'
+//   },
+//   'li::after': {
+//     content: '"►"',
+//     display: 'inline-block',
+//     top: '50%',
+//     transform: 'translateY(-50%)',
+//     position: 'absolute',
+//     left: '-18px'
+//   }
+// })
+
+const Title = styled((props: TypographyProps) => <Typography noWrap variant='subtitle1' {...props} />)({
+  fontWeight: 700,
+  flex: 1
+})
+
+const Wrap = styled(Box)({
+  height: 'var(--height-toolbar, 56px)',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '0 6px'
+})

package/src/lab/table-grid/types.ts

@@ -0,0 +1,68 @@
+import { ComponentType, ReactNode } from 'react'
+import { GridProps, RegularBreakpoints } from '@mui/material'
+import { FilterBarParams, FilterState } from '../filter-bar'
+import { ToolbarPannelProps } from './toolbar-pannel'
+import { TableGridItemActionsConfig, TableGridItemActionsProps } from './item-actions'
+
+export interface TableGridItemProps<T = any> {
+  value: T
+}
+
+export type GetSelecterIdFunc<T> = (item: T) => string
+
+export interface PaginationModel {
+  page: number
+  pageSize: number
+}
+
+export interface TableGridFilter<T> extends FilterState<T> {
+  pagination: PaginationModel
+  loading?: boolean
+}
+
+export interface TableGridFlexibleSlots<T> {
+  item?: ComponentType<TableGridItemProps<T>>
+}
+
+export interface TableGridSlots<T> extends TableGridFlexibleSlots<T> {
+  flex?: boolean
+  gridContainer?: GridProps
+  gridItem?: GridProps
+  toolbar?: ComponentType
+  toolbarProps?: ToolbarPannelProps
+  action?: ComponentType<TableGridItemActionsProps<T>>
+  actionProps?: TableGridItemActionsConfig<T>
+}
+
+export interface TableGridInnerSlots<T> extends TableGridSlots<T> {
+  TableGridItem: ComponentType<TableGridItemProps<T>>
+  ToolbarPannel: ComponentType<ToolbarPannelProps>
+}
+
+export interface TableGridParams<T> extends TableGridFlexibleSlots<T> {
+  getSelecterId: GetSelecterIdFunc<T>
+  title?: ReactNode
+  filterBarConfig?: FilterBarParams<T>
+  size?: RegularBreakpoints
+  slots?: TableGridSlots<T>
+}
+
+export interface TableGridData<T> {
+  items?: T[]
+  totalItems?: number
+}
+
+export interface TableGridProps<T> {
+  data: TableGridData<T>
+  filter?: TableGridFilter<T>
+  onFilterChange?: (value: TableGridFilter<T>) => void
+  slots?: TableGridSlots<T>
+}
+
+export interface TableGridReduxState<T> {
+  tableData: TableGridData<T>
+  tableFilter: TableGridFilter<T>
+  tableFilterThunk: TableGridFilter<T>
+}
+
+export type TableGridStateRedux<T, K extends keyof TableGridReduxState<T> = keyof TableGridReduxState<T>> = Pick<TableGridReduxState<T>, K>

package/src/redux/create.hoc-lazy.tsx

@@ -0,0 +1,80 @@
+import React, { Component, PropsWithChildren } from 'react'
+import { IErrorViewDefaultProps, IHocLazyWrapperProps } from './ui.units'
+import { ELazyStatus, DinoReduxDispatch, DinoReduxState, ReturnDispatch } from './types'
+import UIErrorPage from './ui.error-page'
+
+interface IHocLazyBase<TModel> extends DinoReduxState, DinoReduxDispatch<TModel> {}
+
+export interface IOptionBase {
+  ErrorScreen?: React.ComponentType<IErrorViewDefaultProps>
+  LazySpinner: React.ComponentType<PropsWithChildren<IHocLazyWrapperProps>>
+}
+
+export interface IHocLazyOtherProps<TModel> {
+  param?: TModel
+}
+
+export interface IHocLazyOptions<TModel> extends IHocLazyOtherProps<TModel>, Omit<IOptionBase, 'LazySpinner'> {
+  LazySpinner?: React.ComponentType<PropsWithChildren<IHocLazyWrapperProps>>
+}
+
+export const EmptyComponent: React.FC<React.PropsWithChildren<any>> = ({ children }) => <>{children}</>
+
+export const OptionHocLazyDefault: IOptionBase = {
+  LazySpinner: EmptyComponent
+}
+
+const CreateHocLazy = function <TChildProp extends IHocLazyBase<TModel>, TModel = any>(
+  ChildComponent: React.ComponentType<TChildProp>,
+  options?: IHocLazyOptions<TModel>
+) {
+  type TProps = TChildProp & IHocLazyOtherProps<TModel>
+  class HocComponent extends Component<TProps> {
+    optionsMerge: IOptionBase
+    tokenSources?: AbortController
+    fetchSource?: ReturnDispatch
+    constructor(props: TProps) {
+      super(props)
+      this.optionsMerge = Object.assign({}, OptionHocLazyDefault, options) as IOptionBase
+    }
+
+    render() {
+      const { optionsMerge: OptionsMerge } = this
+      switch (this.props.status) {
+        case ELazyStatus.Loading:
+        case ELazyStatus.Loaded:
+          return (
+            <OptionsMerge.LazySpinner loading={this.props.status === ELazyStatus.Loading}>
+              <ChildComponent {...this.props} />
+            </OptionsMerge.LazySpinner>
+          )
+        case ELazyStatus.Error:
+          return <UIErrorPage />
+        default:
+          return <div></div>
+      }
+    }
+
+    initialParam = (): TModel => {
+      const oData = options?.param ?? {}
+      const pData = this.props?.param ?? {}
+      return Object.assign({}, oData, pData) as TModel
+    }
+
+    componentDidMount = () => {
+      if (this.props.fetchData) {
+        const param = this.initialParam()
+        this.tokenSources?.abort()
+        this.tokenSources = new AbortController()
+        this.fetchSource = this.props.fetchData(param, this.tokenSources.signal)
+      }
+    }
+
+    componentWillUnmount() {
+      this.tokenSources?.abort()
+      this.fetchSource?.abort && this.fetchSource.abort()
+    }
+  }
+  return HocComponent
+}
+export default CreateHocLazy

package/src/redux/dino.ts

@@ -0,0 +1,9 @@
+import CreateHocLazy from './create.hoc-lazy'
+
+class DinoReduxBase {
+  createHocLazy = CreateHocLazy
+}
+
+const DinoRedux = new DinoReduxBase()
+
+export default DinoRedux

package/src/redux/index.ts

@@ -0,0 +1,6 @@
+export * from './types'
+
+export { default as DinoRedux } from './dino'
+
+export { default as CreateHocLazy } from './create.hoc-lazy'
+export * from './create.hoc-lazy'

package/src/redux/types.ts

@@ -0,0 +1,27 @@
+export enum ELazyStatus {
+  Loading = 'Loading',
+  Loaded = 'Loaded',
+  Error = 'Error'
+}
+
+export interface DinoReduxState {
+  status: ELazyStatus
+  requestedId?: string
+}
+
+export interface ReturnDispatch {
+  abort?: () => void
+}
+
+export interface DinoReduxDispatch<P = any> {
+  fetchData?: (params?: P, signal?: AbortSignal) => ReturnDispatch
+  setStatus: (status: ELazyStatus) => void
+}
+
+interface Actions<T, Id extends keyof T> {
+  create: (value: Partial<T>, signal?: AbortSignal) => Promise<void>
+  update: (id: T[Id], value: Partial<T>, signal?: AbortSignal) => Promise<void>
+  delete: (id: T[Id], value?: Partial<T>, signal?: AbortSignal) => Promise<void>
+}
+
+export type DinoReduxActions<T, Id extends keyof T, K extends keyof Actions<T, Id> = keyof Actions<T, Id>> = Pick<Actions<T, Id>, K>

package/src/redux/ui.error-page.tsx

@@ -0,0 +1,62 @@
+import React, { FC } from 'react'
+import { Box, BoxProps, Button, ButtonProps, Stack, styled, Typography } from '@mui/material'
+import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
+import Error404Vector from './vector-404.webp'
+
+const UIErrorPage: FC = () => (
+  <Stack sx={{ alignItems: 'center' }}>
+    <WrapImage>
+      <img src={Error404Vector} alt='error-404-vector' />
+    </WrapImage>
+    <Typography variant='subtitle1' component='p' sx={{ textAlign: 'center', mt: '20px' }}>
+      Sorry, page not found or connection to server lost. Please come back later....
+    </Typography>
+    <CustomButton href='/'>Back to home page</CustomButton>
+  </Stack>
+)
+export default UIErrorPage
+
+const WrapImage = styled(({ children, ...props }: BoxProps) => (
+  <Box {...props}>
+    <div>{children}</div>
+  </Box>
+))({
+  width: '100%',
+  maxWidth: '560px',
+  flex: '0 0 auto',
+  '& > div': {
+    width: '100%',
+    paddingBottom: '100%',
+    position: 'relative'
+  },
+  '& img': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%'
+  }
+})
+
+const CustomButton = styled((p: ButtonProps & { href: string }) => {
+  return <Button component='a' color='inherit' variant='contained' size='large' endIcon={<ArrowRightAltIcon fontSize='small' />} {...p} />
+})({
+  backgroundColor: 'var(--color-black)',
+  color: 'var(--color-text-light)',
+  minWidth: '250px',
+  marginTop: '24px',
+  height: '56px',
+  textTransform: 'none',
+  fontWeight: 600,
+  transition: '0.3s',
+  '&:hover': {
+    backgroundColor: 'var(--color-black2)',
+    color: 'var(--color-text-light)'
+  },
+  '& .MuiButton-icon.MuiButton-endIcon': {
+    transition: '0.3s'
+  },
+  '&:hover .MuiButton-icon.MuiButton-endIcon': {
+    marginLeft: '16px'
+  }
+})

package/src/redux/ui.units.tsx

@@ -0,0 +1,41 @@
+import React, { FC, PropsWithChildren } from 'react'
+import { Box, Button, Fade, Stack, styled, Typography } from '@mui/material'
+
+export interface IErrorViewDefaultProps {}
+
+export const ErrorViewDefault: FC<IErrorViewDefaultProps> = () => (
+  <Stack sx={{ height: '100vh', alignItems: 'center', justifyContent: 'center' }}>
+    <Typography variant='h1'>Errors Something</Typography>
+    <Typography variant='subtitle1'>Please try again :{'(('}</Typography>
+    <Button variant='outlined' color='inherit' LinkComponent='a' href='/'>
+      Try again
+    </Button>
+  </Stack>
+)
+
+export interface IHocLazyWrapperProps extends PropsWithChildren {
+  loading?: boolean
+  backdrop?: boolean
+}
+
+export const HocLazyWrapper: FC<IHocLazyWrapperProps> = (props) => (
+  <React.Fragment>
+    {props.children}
+    <Fade in={props.loading === true && props.backdrop !== false} unmountOnExit>
+      <Wrapper />
+    </Fade>
+  </React.Fragment>
+)
+
+const Wrapper = styled(Box)({
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  position: 'fixed',
+  background: 'rgb(0,0,0,0.15)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  zIndex: 1150
+})

package/src/table/context.tsx

@@ -0,0 +1,16 @@
+import React, { createContext } from 'react'
+import { TCloseModal, TShowModal } from '../api-context'
+
+export interface ITableBaseContext {
+  showModal: TShowModal
+  closeModal: TCloseModal
+}
+
+export const TableBaseContext = createContext<ITableBaseContext>({
+  showModal: () => {},
+  closeModal: () => {}
+})
+
+export const MapTableBaseContext = (context: (context: ITableBaseContext) => React.ReactNode) => (
+  <TableBaseContext.Consumer>{context}</TableBaseContext.Consumer>
+)

package/src/table/create.action-row.tsx

@@ -0,0 +1,91 @@
+import React, { Component } from 'react'
+import { Box, BoxProps, IconButton, Tooltip } from '@mui/material'
+import EditIcon from '@mui/icons-material/Edit'
+import DeleteIcon from '@mui/icons-material/Delete'
+import { GlobalModalState } from '../api-context'
+import { ITableBaseContext, MapTableBaseContext } from './context'
+import { mergeObjects } from '../utils'
+
+export interface IActionRowProps<T> {
+  value: T
+  formEdit?: (value: T, tableContext: ITableBaseContext) => React.ReactNode
+  formDelete?: (value: T, tableContext: ITableBaseContext) => React.ReactNode
+  after?: (value: T, tableContext: ITableBaseContext) => React.ReactNode
+  before?: (value: T, tableContext: ITableBaseContext) => React.ReactNode
+  wrapProps?: BoxProps
+  buttonEditConfig?: GlobalModalState
+  buttonDeleteConfig?: GlobalModalState
+}
+
+function CreateActionRow<T>(params?: Omit<IActionRowProps<T>, 'value'>) {
+  class ActionRow extends Component<IActionRowProps<T>> {
+    get propsMerge() {
+      return mergeObjects<IActionRowProps<T>>(params, this.props)
+    }
+
+    getButtons = function* (that: ActionRow, thatProps: Omit<IActionRowProps<T>, 'value'>, tableContext: ITableBaseContext) {
+      const beforeFunc = that.props?.before ?? thatProps?.before
+      if (beforeFunc) {
+        yield <React.Fragment key='Before'>{beforeFunc(that.props.value, tableContext)}</React.Fragment>
+      }
+      const editFunc = that.props?.formEdit ?? thatProps?.formEdit
+      const editContent = editFunc ? editFunc(that.props.value, tableContext) : undefined
+      if (editFunc && !!editContent) {
+        yield (
+          <Tooltip title='Edit' arrow key='Edit'>
+            <IconButton
+              color='primary'
+              onClick={() => {
+                tableContext?.showModal({
+                  renderContent: () => editContent || <React.Fragment />,
+                  sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+                  backdropActivated: true,
+                  ...params?.buttonEditConfig
+                })
+              }}
+            >
+              <EditIcon fontSize='small' />
+            </IconButton>
+          </Tooltip>
+        )
+      }
+      const deleteFunc = that.props?.formDelete ?? thatProps?.formDelete
+      const deleteContent = deleteFunc ? deleteFunc(that.props.value, tableContext) : undefined
+      if (deleteFunc && !!deleteContent) {
+        yield (
+          <Tooltip title='Delete' arrow key='Delete'>
+            <IconButton
+              color='error'
+              onClick={() => {
+                tableContext?.showModal({
+                  renderContent: () => deleteContent || <React.Fragment />,
+                  sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+                  backdropActivated: true,
+                  ...params?.buttonDeleteConfig
+                })
+              }}
+            >
+              <DeleteIcon fontSize='small' />
+            </IconButton>
+          </Tooltip>
+        )
+      }
+      const afterFunc = that.props?.after ?? thatProps?.after
+      if (afterFunc) {
+        yield <React.Fragment key='After'>{afterFunc(that.props.value, tableContext)}</React.Fragment>
+      }
+    }
+
+    render() {
+      return MapTableBaseContext((context) => (
+        <Box sx={{ display: 'flex', alignItems: 'center', height: '100%' }} {...this.propsMerge.wrapProps}>
+          {Array.from(this.getButtons(this, this.propsMerge, context))}
+        </Box>
+      ))
+    }
+  }
+
+  return ActionRow
+}
+
+export default CreateActionRow