@fixefy/fixefy-ui-components 0.0.37 → 0.0.39

package/src/FxAggregationsBar/helpers/structureReader.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { Box, Stack, Divider } from '@mui/material'
+
+import { FxScore } from '../../FxScore'
+import { FxStatisticsBar } from '../../FxStatisticsBar'
+import { FxProgressCounter } from '../../FxProgressCounter'
+
+export const structureReader = (structure: any, filter: any, collapsed: boolean, initialValues: any) => {
+  const { extended, type } = structure
+  switch (type) {
+    case 'aggregations_primary_container':
+      return structure.children.map((child: any, index: number) =>
+        child.input_type?.value === 'percentage' ? (
+          <FxScore structure={child} key={index} filter={filter} value={initialValues?.score} />
+        ) : child.input_type?.value === 'progress' ? (
+          <FxProgressCounter structure={child} filter={filter} key={index} values={initialValues} />
+        ) : (
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: 'fit-content',
+              padding: 2,
+              borderRadius: 2,
+              backgroundColor: extended?.variables?.bg || '#FFFFFF',
+            }}
+          >
+            <FxStatisticsBar
+              structure={child}
+              key={index}
+              filter={filter}
+              collapsed={collapsed}
+              value={initialValues ? initialValues[child.extended.object_path] : null}
+            />
+          </Box>
+        ),
+      )
+    case 'aggregations_secondary_container':
+      return (
+        <Stack
+          direction='row'
+          divider={<Divider orientation='vertical' flexItem />}
+          spacing={2}
+          sx={{
+            backgroundColor: extended?.variables?.bg || '#FFFFFF',
+            borderRadius: '8px',
+            padding: '24px 16px',
+          }}
+        >
+          {structure.children.map((child: any, index: number) => {
+            return (
+              <FxStatisticsBar
+                structure={child}
+                key={index}
+                filter={filter}
+                collapsed={collapsed}
+                value={initialValues ? initialValues[child.extended.object_path] : null}
+              />
+            )
+          })}
+        </Stack>
+      )
+  }
+}

package/src/FxAggregationsBar/index.ts

@@ -0,0 +1,2 @@
+export { FxAggregationsBar } from './FxAggregations'
+export type { AggregationsDataPropsType, AggreationsBarPropsType } from './aggregations_types'

package/src/FxAggregationsBar/operations/query.ts

@@ -0,0 +1,64 @@
+import { gql } from 'graphql-tag'
+
+export const STRUCTURES = gql`
+  query STRUCTURES {
+    structure(where: { name: "aggregations_invoice" }) {
+      _id
+      bundle_name
+      name
+      title
+      type
+      input_type {
+        name
+        value
+      }
+      readable_id
+      extended {
+        format
+        gql_operation
+        title_path
+        object_path
+        filter
+        variables
+      }
+      children(sort: { index: 1 }) {
+        _id
+        name
+        title
+        type
+        input_type {
+          name
+          value
+        }
+        readable_id
+        extended {
+          format
+          gql_operation
+          title_path
+          object_path
+          filter
+          variables
+        }
+        children(sort: { index: 1 }) {
+          _id
+          name
+          title
+          type
+          input_type {
+            name
+            value
+          }
+          readable_id
+          extended {
+            format
+            gql_operation
+            title_path
+            object_path
+            filter
+            variables
+          }
+        }
+      }
+    }
+  }
+`

package/src/FxAsyncDropdown/FxAsyncDropdown.tsx

@@ -0,0 +1,362 @@
+// @ts-ignore
+import _ from 'lodash'
+
+import {
+  Close as CloseIcon,
+  CheckBox as CheckBoxIcon,
+  CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon,
+  KeyboardArrowDown as ArrowIcon,
+} from '@mui/icons-material'
+
+import { gql } from 'graphql-tag'
+// import { getJPart } from './helpers/helpers'
+import { useLazyQuery } from '@apollo/client'
+import { titleCase } from '@fixefy/fixefy-ui-utils'
+import React, { useEffect, useState, useRef, useImperativeHandle } from 'react'
+import { Button, Checkbox, CircularProgress, useAutocomplete, useTheme, Typography } from '@mui/material'
+
+import { Root, InputWrapper, Listbox, StyledClose, StyledListBox, Loading } from './styles/dropdown.styles'
+
+import { AsyncDropdownPropsType, Option } from './async_dropdown_types'
+
+const icon = <CheckBoxOutlineBlankIcon fontSize='small' />
+const checkedIcon = <CheckBoxIcon fontSize='small' />
+
+export const FxAsyncDropdown = React.forwardRef((props: AsyncDropdownPropsType, parentRef) => {
+  const ref = useRef(null)
+  const theme = useTheme()
+
+  const [options, setOptions] = useState<Option[]>([])
+  const [loadingData, setLoadingData] = useState(false)
+  const [isLastPage, setIsLastPage] = useState(false)
+  const [searchValue, setSearchValue] = useState<string | null>(null)
+  const [hasClearBtn, setHasClearBtn] = useState(false)
+  const [page, setPage] = useState(1)
+  const [prevPage, setPrevPage] = useState(0)
+  const [pageSize] = useState(20)
+
+  const {
+    debug,
+    structure,
+    onChange,
+    onClear,
+    renderOptions,
+    fetcher,
+    initialValue = {},
+    multiple,
+    disabled,
+    type = 'text',
+    showSelectedValue,
+    ...rest
+  } = props
+
+  const { name, extended, children } = structure
+
+  const { search_path, variables } = extended
+  const { method_name } = variables
+
+  const [fetch, { data, loading }] = useLazyQuery(gql(fetcher.query), {
+    ...fetcher.queryOptions,
+    variables: {
+      ...fetcher.queryOptions.variables,
+      where: searchValue
+        ? {
+            ...fetcher.queryOptions.variables.where,
+            [search_path]: searchValue,
+          }
+        : {
+            ...fetcher.queryOptions.variables.where,
+          },
+      skip: page * pageSize - pageSize,
+      limit: pageSize,
+    },
+  })
+
+  const labelOption = structure?.extended?.title_path ?? ('title' as keyof Option)
+
+  const {
+    getRootProps,
+    getInputProps,
+    getClearProps,
+    getListboxProps,
+    getOptionProps,
+    groupedOptions,
+    value,
+    popupOpen,
+    focused,
+    setAnchorEl,
+  } = useAutocomplete({
+    ...rest,
+    defaultValue: initialValue,
+    options: options,
+    disableCloseOnSelect: !!multiple,
+    multiple,
+    disabled: disabled,
+    isOptionEqualToValue: (option: any, value: any) => {
+      return option._id === value._id
+    },
+    getOptionLabel: (option: Option) => titleCase(option[labelOption] ?? (option.title as any)),
+  })
+
+  const onPopupScroll = _.debounce(() => {
+    if (ref && ref.current) {
+      //@ts-ignore
+      const threshHold = ref.current.scrollHeight / 2
+
+      //@ts-ignore
+      if (ref.current.scrollTop > threshHold && !loadingData && !isLastPage) {
+        setLoadingData(true)
+        setPage((prevPage) => prevPage + 1)
+        setPrevPage((prevPage) => prevPage + 1)
+      }
+    }
+  }, 800)
+
+  const createTitle = () => {
+    if (Array.isArray(value)) {
+      if (value && value.length) {
+        return `${titleCase(name)} (${value.length})`
+      }
+    }
+    return titleCase(name)
+  }
+
+  const handleSearch = _.debounce((e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    setSearchValue(e.target.value)
+    setPage(1)
+  }, 300)
+
+  const handleChildrens = ({ structure, ...rest }: { structure: any; onClick: (e: any) => void; startIcon: any }) => {
+    let rv = null
+    const { type, children } = structure
+    debug === true && console.log('handleChildrens', structure)
+    switch (type) {
+      case 'dropdownOptions':
+      case 'dropdown_options': {
+        rv = children.map((child: any) =>
+          handleChildrens({
+            structure: child,
+            ...rest,
+          }),
+        )
+        break
+      }
+      case 'clear': {
+        if (!hasClearBtn) {
+          setHasClearBtn(true)
+        }
+        rv = <Button {...rest}>{structure.title}</Button>
+        break
+      }
+      default: {
+        break
+      }
+    }
+
+    return rv
+  }
+
+  const handleRenderOptions = () => {
+    debug === true && console.log('renderOptions: ', renderOptions)
+
+    if (renderOptions) {
+      return (groupedOptions as typeof options).map((option: Option, index: number) => {
+        const CustomeComponent = renderOptions(option, index)
+        //@ts-ignore
+        return React.cloneElement(CustomeComponent, {
+          ...getOptionProps({ option, index }),
+        })
+      })
+    } else {
+      switch (type) {
+        case 'checkbox': {
+          return (groupedOptions as typeof options).map((option: Option, index: number) => {
+            const isSelected = getOptionProps({
+              option,
+              index,
+            })['aria-selected']
+
+            return (
+              <li {...getOptionProps({ option, index })}>
+                <Checkbox
+                  icon={icon}
+                  checked={Boolean(isSelected)}
+                  checkedIcon={checkedIcon}
+                  sx={{
+                    mr: 1,
+                    minWidth: 24,
+                    minHeight: 24,
+                    p: 0,
+                    ['& svg']: { fill: theme.palette.primary.light },
+                  }}
+                />
+                <Typography variant='table' color={theme.palette.typography.title}>
+                  {titleCase(option?.title)}
+                </Typography>
+              </li>
+            )
+          })
+        }
+
+        case 'text': {
+          return (groupedOptions as typeof options).map((option: Option, index: number) => {
+            debug === true &&
+              console.log(
+                'renderOptions: ',
+                structure?.extended?.title_path,
+                option[structure?.extended?.title_path],
+                options,
+              )
+
+            return (
+              <li {...getOptionProps({ option, index })}>
+                <Typography variant='table' color={theme.palette.typography.title}>
+                  {titleCase(option[structure?.extended?.title_path] ?? option.title)}
+                </Typography>
+              </li>
+            )
+          })
+        }
+
+        default: {
+          return (groupedOptions as typeof options).map((option: Option, index: number) => {
+            debug === true &&
+              console.log(
+                'renderOptions: ',
+                structure?.extended?.title_path,
+                option[structure?.extended?.title_path],
+                options,
+              )
+            return (
+              <li {...getOptionProps({ option, index })}>
+                <Typography variant='table' color={theme.palette.typography.title}>
+                  {titleCase(option[structure?.extended?.title_path] ?? option.title)}
+                </Typography>
+              </li>
+            )
+          })
+        }
+      }
+    }
+  }
+
+  useImperativeHandle(parentRef, () => ({
+    clearDDL: () => {
+      //@ts-ignore
+      getClearProps()?.onClick(null)
+    },
+  }))
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      //@ts-ignore
+      ref.current.addEventListener('scroll', () => onPopupScroll())
+    }
+    return () => {
+      if (ref && ref.current) {
+        //@ts-ignore
+        ref.current.removeEventListener('scroll', () => onPopupScroll())
+      }
+    }
+  }, [groupedOptions])
+
+  useEffect(() => {
+    onChange && onChange(value, name)
+  }, [value])
+
+  useEffect(() => {
+    if (popupOpen && !isLastPage && prevPage < page && !disabled) {
+      fetch()
+    }
+  }, [popupOpen])
+
+  useEffect(() => {
+    if (!disabled) {
+      fetch()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (data && !isLastPage && prevPage < page) {
+      const newOptions: Option[] = data[method_name]
+
+      if (newOptions.length === 0 || newOptions.length < pageSize) {
+        setIsLastPage(true)
+      }
+
+      setOptions([...newOptions, ...options])
+      setLoadingData(false)
+    }
+  }, [data])
+
+  return (
+    <Root>
+      <InputWrapper
+        hasValue={!!(value && Object.keys(value).length)}
+        disabled={disabled}
+        sx={{
+          width: props.styles?.width ?? 180,
+          maxWidth: props.styles?.maxWidth ?? 300,
+        }}
+        {...getRootProps()}
+        ref={setAnchorEl}
+        className={focused ? 'focused' : ''}
+      >
+        <input
+          {...getInputProps()}
+          readOnly
+          onChange={(e) => {
+            //@ts-ignore
+            getInputProps()?.onChange(e)
+            handleSearch(e)
+          }}
+          placeholder={createTitle()}
+          value={showSelectedValue ? titleCase(value.title) : undefined}
+        />
+        {loading ? (
+          <Loading>
+            <CircularProgress />
+          </Loading>
+        ) : (
+          <ArrowIcon />
+        )}
+      </InputWrapper>
+
+      {groupedOptions.length > 0 && !disabled ? (
+        <Listbox
+          // sx={{
+          //   width: props.styles?.width ?? 300,
+          //   maxWidth: props.styles?.maxWidth ?? 300,
+          //   minWidth: props.styles?.width ?? 300,
+          // }}
+          {...getListboxProps()}
+        >
+          <StyledListBox
+            sx={{
+              ...props.styles?.menuSx,
+              // width: props.styles?.width ?? 300,
+            }}
+            hasClearBtn={children?.length}
+            ref={ref}
+          >
+            {handleRenderOptions()}
+          </StyledListBox>
+
+          {children && children.length ? (
+            <StyledClose>
+              {handleChildrens({
+                structure: children[0],
+                onClick: (e: any) => {
+                  onClear && onClear()
+                  //@ts-ignore
+                  getClearProps()?.onClick(e)
+                },
+                startIcon: <CloseIcon />,
+              })}
+            </StyledClose>
+          ) : null}
+        </Listbox>
+      ) : null}
+    </Root>
+  )
+})

package/src/FxAsyncDropdown/async_dropdown_types.d.ts

@@ -0,0 +1,40 @@
+interface Option {
+  title: string
+  value: string | number | boolean
+  [key: string]: any
+}
+
+interface StylesOptions {
+  width?: string | number
+  maxWidth?: string | number
+  inputSx?: object
+  menuSx?: object
+}
+
+export type AsyncDropdownPropsType = {
+  debug?: boolean
+  initialValue?: Option | any
+  styles?: StylesOptions
+  structure: {
+    name: string
+    extended: {
+      title: string
+      title_path: string
+      search_path: string
+      variables: {
+        method_name: string
+      }
+    }
+    children: any
+  }
+  fetcher: {
+    query: any
+    queryOptions: any
+  }
+  multiple?: boolean
+  onChange?: (value: any, name: string) => void
+  type?: 'checkbox' | 'text'
+  renderOptions?: (option: Option, index: number) => void
+  [x: string]: any
+  showSelectedValue?: boolean
+}

package/src/FxAsyncDropdown/helpers/helpers.ts

@@ -0,0 +1,105 @@
+export const getJPart = (j: any, jsonPath: string, defaultValue?: any): any => {
+  // input check - if key is invalid - return error
+  if (isObjectValid(j) === false) return defaultValue
+
+  // convert indexes to properties
+  jsonPath = jsonPath.replace(/\[(\w+)\]/g, '.$1')
+
+  // strip a leading dot
+  jsonPath = jsonPath.replace(/^\./, '')
+
+  // split path by '.'
+  let _isArrayValid = false
+  let _isStringValid = false
+  let currentPathPart: any
+  let isLoop = true
+  
+  const pathParts = jsonPath.split('.')
+
+  for (let i = 0, n = pathParts.length; isLoop && i < n; ++i) {
+    currentPathPart = pathParts[i]
+    _isStringValid = isStringValid(j)
+    _isArrayValid = isArrayValid(j)
+
+    if (_isStringValid === true || _isArrayValid === true) {
+      if (_isStringValid === true) {
+        j = JSON.parse(j)
+      } else {
+        j = j.reduce((acc: Array<any>, cur: any) => {
+          const innerJ = getJPart(
+            cur,
+            pathParts.slice(i).join("."),
+            defaultValue,
+          );
+
+          if (isArrayValid(innerJ)) {
+            acc.push(...innerJ)
+          } else {
+            acc.push({
+              ...innerJ,
+              value: innerJ._id,
+            })
+          }
+
+          return acc
+        }, [])
+
+        isLoop = false
+      }
+    } else {
+      if (currentPathPart in j) {
+        j = j[currentPathPart]
+      } else {
+        // if something in the process failed:
+        //  1. set the rv as the default value
+        //  2. stop the loop`
+        j = defaultValue
+        isLoop = false
+      }
+    }
+  }
+
+  return j
+}
+
+export const isArrayValid = (arr: any[], minLength: number = 1, maxLength: number = 0): boolean => {
+  let rv: boolean =
+    isObjectValid(arr) &&
+    arr.length >= minLength &&
+    //arr instanceof Array
+    Object.prototype.toString.call(arr) == '[object Array]'
+
+  if (maxLength > 0) {
+    rv = rv && arr.length <= maxLength
+  }
+
+  return rv
+}
+
+export const isObjectValid = (obj: any, isCheckKeys: boolean = false): boolean => {
+  let rv: boolean = typeof obj !== 'undefined' && obj !== null
+
+  if (isCheckKeys) {
+    rv = rv && Object.keys(obj).length > 0
+  }
+
+  return rv
+}
+
+export const isStringValid = (str: string, minLength: number | null = null, maxLength: number | null = null, isValidateType: boolean = true): boolean => {
+  let rv = isObjectValid(str) && str.toString().length > 0 && (isValidateType ? typeof str === 'string' : true)
+
+  if (rv === false) return false
+
+  if (minLength && isNaN(minLength) === false && minLength > 0) {
+    rv = rv && str.toString().length >= minLength
+  }
+
+  if (rv === false) return false
+
+  if (maxLength && isNaN(maxLength) === false && maxLength > 0) {
+    rv = rv && str.toString().length <= maxLength
+  }
+
+  return rv
+}

package/src/FxAsyncDropdown/index.ts

@@ -0,0 +1,2 @@
+export { FxAsyncDropdown } from './FxAsyncDropdown'
+export type { AsyncDropdownPropsType } from './async_dropdown_types'