dinocollab-core 1.0.0

package/src/lab/create.select-mul-with-api/table-custom.tsx

@@ -0,0 +1,194 @@
+import React, { Component, ReactNode } from 'react'
+import { Box, styled, Typography } from '@mui/material'
+import { DataGrid, DataGridProps, GridColDef, GridFeatureMode, GridPaginationModel, GridRowSelectionModel } from '@mui/x-data-grid'
+import { SelectModel } from './types'
+
+const tableCustomClasses = {
+  root: 'TableCustom-root',
+  content: 'TableCustom-content',
+  header: 'TableCustom-header',
+  contentInner: 'TableCustom-contentInner'
+}
+
+interface IProps {
+  title: string
+  rows: SelectModel[]
+  featureMode?: GridFeatureMode
+  totalRows?: number
+  maxSelected?: number
+  pagination?: GridPaginationModel
+  defaultPagination?: GridPaginationModel
+  loading?: boolean
+  onPaginationChange?: DataGridProps['onPaginationModelChange']
+  isRowSelectable?: DataGridProps['isRowSelectable']
+  slots?: {
+    title?: { before?: ReactNode; after?: ReactNode }
+    renderAction?: (value: SelectModel) => ReactNode
+    renderHeaderAction?: (parmas: { rowSelecteds: GridRowSelectionModel }) => ReactNode
+    header?: ReactNode
+    topBar?: ReactNode
+    dataGridProps?: Partial<DataGridProps>
+  }
+}
+
+export class TableCustom extends Component<IProps> {
+  rowSelecteds: GridRowSelectionModel
+  constructor(props: IProps) {
+    super(props)
+    this.rowSelecteds = []
+  }
+
+  shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<{}>, nextContext: any): boolean {
+    if (this.props.rows.length !== nextProps.rows.length) this.rowSelecteds = []
+    return true
+  }
+
+  render() {
+    return (
+      <Wrap className={tableCustomClasses.root}>
+        <Box className={tableCustomClasses.header}>
+          {this.props.slots?.title?.before}
+          <Typography variant='subtitle1' gutterBottom sx={{ fontWeight: 700, flex: 1 }}>
+            {this.props.title}
+          </Typography>
+          {this.props.slots?.title?.after}
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px', height: '48px', mb: '4px' }}>{this.props.slots?.topBar}</Box>
+        <div className={tableCustomClasses.content}>
+          <div className={tableCustomClasses.contentInner}>
+            <DataGridCustom {...this.getDataGridProps()} {...this.props.slots?.dataGridProps} />
+          </div>
+        </div>
+      </Wrap>
+    )
+  }
+
+  getDataGridProps = (): DataGridProps => {
+    const columns: GridColDef[] = this.getColumns()
+    const data = this.getData()
+    let obj: DataGridProps = {
+      rows: data.rows,
+      columns: columns,
+      getRowId: (x) => x.value,
+      initialState: { pagination: { paginationModel: this.props.defaultPagination } },
+      rowSelectionModel: data.rowSelecteds,
+      onRowSelectionModelChange: this.handleRowSelectionChange,
+      isRowSelectable: (x) => !x.row.disabled,
+      getRowClassName: (x) => (x.row.disabled ? 'Mui-disabled-row' : ''),
+      checkboxSelection: true
+    }
+    if (this.props.featureMode === 'server') {
+      obj = {
+        ...obj,
+        paginationMode: this.props.featureMode,
+        loading: this.props.loading,
+        rowCount: this.props.totalRows,
+        paginationModel: this.props.pagination,
+        onPaginationModelChange: this.props.onPaginationChange
+      }
+    }
+    return obj
+  }
+
+  getData = () => {
+    let list = [...this.props.rows]
+    const rowSelecteds = this.rowSelecteds.filter((x) => list.some((i) => i.value === x.toString() && !i.disabled))
+
+    if (this.props.maxSelected && rowSelecteds.length >= this.props.maxSelected) {
+      const selectedSet = new Set(rowSelecteds)
+      list = this.props.rows.map((x) => (selectedSet.has(x.value) ? x : { ...x, disabled: true }))
+    }
+
+    return { rows: list, rowSelecteds }
+  }
+
+  getColumns = (): GridColDef[] => {
+    const { slots } = this.props
+    const data = this.getData()
+    return [
+      {
+        field: 'value',
+        headerName: 'Medias',
+        sortable: false,
+        disableColumnMenu: true,
+        filterable: false,
+        flex: 1,
+        renderHeader: () => (
+          <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', pr: '2px' }}>
+            {this.renderHeader()}
+            {slots?.renderHeaderAction && slots.renderHeaderAction({ rowSelecteds: data.rowSelecteds })}
+          </Box>
+        ),
+        renderCell: (params: { row: SelectModel }) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+            <Typography variant='body2' noWrap sx={{ flex: 1 }}>
+              {params.row.label ?? params.row.value}
+            </Typography>
+            {this.props.slots?.renderAction && this.props.slots.renderAction(params.row)}
+          </Box>
+        )
+      }
+    ]
+  }
+
+  renderHeader = () => {
+    const { slots } = this.props
+    if (!slots?.header || typeof slots?.header === 'string') {
+      return (
+        <Typography variant='body2' noWrap sx={{ flex: 1, fontWeight: 700 }}>
+          {slots?.header ?? 'Media'}
+        </Typography>
+      )
+    }
+    return slots?.header
+  }
+
+  handleRowSelectionChange = (value: GridRowSelectionModel) => {
+    if (this.props.maxSelected && value.length > this.props.maxSelected) {
+      this.rowSelecteds = value.slice(0, this.props.maxSelected)
+    } else {
+      this.rowSelecteds = value
+    }
+    this.forceUpdate()
+  }
+}
+
+const DataGridCustom = styled(DataGrid)({
+  border: 'none',
+  '.MuiDataGrid-columnHeaderTitleContainerContent': {
+    width: '100%'
+  },
+  '.Mui-disabled-row': {
+    pointerEvents: 'none',
+    opacity: 0.4
+  },
+  '& .MuiDataGrid-cell': {
+    borderBottom: 'none'
+  }
+})
+
+const Wrap = styled(Box)({
+  flex: 1,
+  paddingTop: '10px',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '300px',
+  [`.${tableCustomClasses.header}`]: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  [`.${tableCustomClasses.content}`]: {
+    flex: 1,
+    position: 'relative'
+  },
+  [`.${tableCustomClasses.contentInner}`]: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%'
+  }
+})
+
+const Custom = styled(Box)(({ theme }) => ({}))

package/src/lab/create.select-mul-with-api/types.ts

@@ -0,0 +1,26 @@
+import { FilterState } from '../filter-bar'
+
+export interface SelectModel<F = any> {
+  value: string
+  label?: string
+  disabled?: boolean
+  other?: F
+}
+
+export interface PaginationModel {
+  /** @default 0 */
+  page: number
+  /** @default 100 */
+  pageSize: number
+}
+
+export interface FilterStateCustom<T> extends FilterState<T> {
+  pagination: PaginationModel
+}
+
+export type SeclectMulFetchData<T> = (
+  filterState: FilterStateCustom<T>,
+  signal?: AbortSignal
+) => Promise<{ items: SelectModel<T>[]; totalItems: number }>
+
+export type SeclectMulFetchTotal = (signal?: AbortSignal) => Promise<number>

package/src/lab/create.select-mul-with-api/ui.units.tsx

@@ -0,0 +1,163 @@
+import React, { ChangeEvent, FC, useState } from 'react'
+import { IconButton, InputAdornment, InputBase, InputBaseProps } from '@mui/material'
+import { Box, Button, ButtonProps, FormControlLabel, styled, Switch, SwitchProps, Typography } from '@mui/material'
+import EastIcon from '@mui/icons-material/East'
+import ClearIcon from '@mui/icons-material/Clear'
+import CheckIcon from '@mui/icons-material/Check'
+import RemoveIcon from '@mui/icons-material/Remove'
+import SearchIcon from '@mui/icons-material/Search'
+import PlaylistRemoveIcon from '@mui/icons-material/PlaylistRemove'
+import { SelectModel } from './types'
+import { LoadingButton, LoadingButtonProps } from '../../components/loading-buttons'
+import HelpTooltip from '../../components/help-tooltip'
+
+export const ButtonAddToRight: FC<ButtonProps> = (props) => (
+  <Button size='small' endIcon={<EastIcon fontSize='small' />} sx={{ whiteSpace: 'nowrap', flex: '0 0 auto', textTransform: 'none' }} {...props}>
+    Add to Right
+  </Button>
+)
+
+export const ButtonRemoveSelected: FC<ButtonProps> = (props) => (
+  <Button
+    size='small'
+    endIcon={<PlaylistRemoveIcon fontSize='small' />}
+    sx={{ whiteSpace: 'nowrap', flex: '0 0 auto', textTransform: 'none' }}
+    {...props}
+  >
+    Remove Selected
+  </Button>
+)
+
+export const ButtonAdd: FC<Omit<ButtonProps, 'value'> & { value: SelectModel }> = ({ value, ...props }) => {
+  if (value.disabled) {
+    return (
+      <Box sx={{ padding: '5px' }}>
+        <CheckIcon fontSize='small' />
+      </Box>
+    )
+  }
+  return (
+    <IconButton size='small' {...props}>
+      <EastIcon fontSize='small' />
+    </IconButton>
+  )
+}
+
+export const ButtonRemove: FC<ButtonProps> = (props) => (
+  <IconButton size='small' {...props}>
+    <RemoveIcon fontSize='small' />
+  </IconButton>
+)
+
+export const ButtonSubmit: FC<LoadingButtonProps> = (props) => (
+  <LoadingButton size='small' variant='contained' sx={{ minWidth: '120px' }} {...props}>
+    Submit
+  </LoadingButton>
+)
+
+export const Buttons = {
+  AddToRight: ButtonAddToRight,
+  RemoveSelected: ButtonRemoveSelected,
+  Add: ButtonAdd,
+  Remove: ButtonRemove,
+  Submit: ButtonSubmit
+}
+
+// export const FooterBar: FC<ButtonProps> = (props) => (
+//   <Box sx={{ display: 'flex', justifyContent: 'flex-end', padding: '5px 10px 5px' }}>
+//     <Button size='small' variant='contained' disabled={props.disabled} onClick={props.onClick}>
+//       Confirm Selection
+//     </Button>
+//   </Box>
+// )
+
+export const SwitchUnselected: FC<SwitchProps & { totalHidden?: number }> = ({ totalHidden: hiddenCount, ...props }) => (
+  <FormControlLabel
+    control={<Switch size='small' {...props} />}
+    label={
+      <Typography variant='body2'>
+        only unselected <Typography variant='caption'> (hidden: {hiddenCount ?? 0})</Typography>
+      </Typography>
+    }
+  />
+)
+
+interface InputSearchLocalProps extends Omit<InputBaseProps, 'onChange'> {
+  onChange?: (value: string) => void
+}
+
+export const InputSearchLocal: FC<InputSearchLocalProps> = ({ onChange, ...props }) => {
+  const [value, setValue] = useState('')
+
+  const searchIncludes = ['Media name']
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+    onChange && onChange(event.target.value)
+  }
+
+  const handleClear = () => {
+    setValue('')
+    onChange && onChange('')
+  }
+
+  return (
+    <InputBaseCustom
+      placeholder='Find in selected list'
+      fullWidth
+      value={value}
+      onChange={handleChange}
+      startAdornment={
+        <InputAdornment position='start'>
+          <SearchIcon />
+        </InputAdornment>
+      }
+      endAdornment={
+        <InputAdornment position='end'>
+          {value && (
+            <IconButton size='small' onClick={handleClear}>
+              <ClearIcon fontSize='small' />
+            </IconButton>
+          )}
+          <HelpTooltip small title='The search includes'>
+            <WrapList>
+              {searchIncludes.map((item, index) => (
+                <Typography key={index} component='li' variant='body2'>
+                  {item}
+                </Typography>
+              ))}
+            </WrapList>
+          </HelpTooltip>
+        </InputAdornment>
+      }
+      {...props}
+    />
+  )
+}
+
+const InputBaseCustom = styled(InputBase)({
+  height: '44px',
+  borderRadius: '6px',
+  padding: '0 10px',
+  transition: 'all linear 0.2s',
+  backgroundColor: '#fafafa',
+  '&:hover': { backgroundColor: '#ededed' }
+})
+
+const WrapList = styled('ul')({
+  paddingLeft: '1.7rem',
+  marginBottom: 0,
+  li: {
+    position: 'relative',
+    textAlign: 'justify',
+    '&::before': {
+      content: '"►"',
+      display: 'block',
+      position: 'absolute',
+      top: '50%',
+      right: 'calc(100% + 6px)',
+      transform: 'translateY(-50%)',
+      fontSize: '0.9em'
+    }
+  }
+})

package/src/lab/filter-bar/base.tsx

@@ -0,0 +1,162 @@
+import React, { Component } from 'react'
+import { EFieldValidate, ESearchMatch, FilterField, FilterFields, FilterItemModel, FilterModel, FilterState } from './types'
+
+export const filterPanelClasses = {
+  root: 'FilterPanel-root',
+  list: 'FilterPanel-list',
+  item: 'FilterPanel-item'
+}
+
+export default class FilterBarBase<P, S, T = any> extends Component<P, S> {
+  //#region Filter
+  mergeFilter = (f1?: FilterState<T>, f2?: FilterState<T>): FilterState<T> => {
+    const mergedFilter: FilterModel<T> = f2?.filter ?? {}
+
+    if (f1?.filter) {
+      for (const key in f1?.filter) {
+        const fieldKey = key as keyof T
+        const existingItems = mergedFilter[fieldKey] ?? []
+        const newItems = f1?.filter[fieldKey] ?? []
+
+        const existingValues = new Set(existingItems.map((item) => item.value))
+
+        const mergedItems = [...existingItems, ...newItems.filter((item) => !existingValues.has(item.value))]
+
+        if (mergedItems.length > 0) {
+          mergedFilter[fieldKey] = mergedItems
+        }
+      }
+    }
+
+    const result: FilterState<T> = {
+      filter: Object.keys(mergedFilter).length ? mergedFilter : {},
+      details: f2?.details ?? f1?.details
+    }
+
+    return result
+  }
+
+  patchFilterWithKey = (filterState: FilterState<T>, key: keyof FilterModel<T>, value: FilterItemModel) => {
+    const clonedFilter: FilterModel<T> = { ...(filterState.filter || {}) }
+    let filter = clonedFilter[key] ?? []
+    const isChanged = !filter.map((x) => x.value).includes(value.value)
+    if (isChanged) filter = [...filter, value]
+    clonedFilter[key] = filter
+    return { isChanged, filterState: { ...filterState, filter: clonedFilter } }
+  }
+
+  deleteFilterWithKey = (filterState: FilterState<T>, key: keyof FilterModel<T>) => {
+    const clonedFilter: FilterModel<T> = { ...(filterState.filter || {}) }
+    const isChanged = key in clonedFilter
+    if (isChanged) delete clonedFilter[key]
+    return { isChanged, filterState: { ...filterState, filter: clonedFilter } }
+  }
+
+  isFilterEmpty = (filterState: FilterState<T>) => {
+    const values = Object.values(filterState.filter ?? {})
+    return values.length < 1 || values.every((x) => x.length < 1)
+  }
+  //#endregion
+
+  //#region Field
+  isYoutubeLink = (val: string) => /^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\//.test(val)
+
+  isGenericLink = (val: string) => /^https?:\/\/[^ ]+$/.test(val)
+
+  isGuid = (val: string) => /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(val)
+
+  getFieldsMatches = (fields: FilterFields<T>, keyword: string, showAll?: boolean): FilterFields<T> => {
+    const trimmed = keyword.trim().toLowerCase()
+    if (!trimmed) return fields
+
+    const matched: FilterFields<T> = {}
+
+    for (const key in fields) {
+      const field = key as keyof FilterFields<T>
+      const config = fields[field]
+      if (!config) continue
+
+      const matches = Array.isArray(config.searchMatches) ? config.searchMatches : config.searchMatches ? [config.searchMatches] : []
+
+      let visible = false
+
+      for (const matchObj of matches) {
+        switch (matchObj.rule) {
+          case ESearchMatch.AlwaysVisible:
+            visible = true
+            break
+          case ESearchMatch.MatchOnly:
+            if (typeof matchObj.match === 'function') {
+              if (matchObj.match(trimmed)) visible = true
+            }
+            break
+          case ESearchMatch.LinkYoutube:
+            if (this.isYoutubeLink(trimmed)) visible = true
+            break
+          case ESearchMatch.Link:
+            if (this.isGenericLink(trimmed)) visible = true
+            break
+          case ESearchMatch.Guid:
+            if (this.isGuid(trimmed)) visible = true
+            break
+          default:
+            break
+        }
+
+        if (visible) break
+      }
+
+      if (visible) matched[field] = config
+    }
+    return Object.keys(matched).length === 0 ? (showAll ? fields : {}) : matched
+  }
+
+  validated = (value: string, fieldKey: keyof FilterModel<T>, filterField?: FilterField): { error: boolean; message?: string } => {
+    const trimmed = value.trim().toLowerCase()
+    if (!trimmed) return { error: true, message: `The ${fieldKey.toString()} is required ` }
+    const validate = Array.isArray(filterField?.validate) ? (filterField?.validate ?? []) : filterField?.validate ? [filterField.validate] : []
+    const obj: { error: boolean; message?: string } = { error: false }
+    for (const validateObj of validate) {
+      switch (validateObj.rule) {
+        case EFieldValidate.LinkYoutube:
+          if (!this.isYoutubeLink(trimmed)) {
+            obj.error = true
+            obj.message = `The ${filterField?.label ?? fieldKey.toString()} must be a valid YouTube link`
+          }
+          break
+
+        case EFieldValidate.Link:
+          if (!this.isGenericLink(trimmed)) {
+            obj.error = true
+            obj.message = `The ${filterField?.label ?? fieldKey.toString()} must be a valid URL link`
+          }
+          break
+
+        case EFieldValidate.Custom:
+          if (typeof validateObj.custom === 'function' && !validateObj.custom(trimmed)) {
+            obj.error = true
+            obj.message = `The ${filterField?.label ?? fieldKey.toString()} is invalid`
+          }
+          break
+        default:
+          break
+      }
+      if (obj.error) break
+    }
+    return obj
+  }
+  //#endregion
+
+  //#region Sort
+  getSortFields = (fields: FilterFields<T>) => {
+    const keys = Object.keys(fields) as (keyof FilterFields<T>)[]
+    return keys.reduce<FilterFields<T>>((a, b) => {
+      const item = fields[b]
+      if (item?.sortable !== false) {
+        a[b] = item
+      }
+      return a
+    }, {})
+  }
+  //#endregion
+}