@digi-frontend/dgate-api-documentation 1.0.0 → 1.0.1

package/src/components/table/table.tsx

@@ -0,0 +1,490 @@
+import React, { useState } from 'react'
+import './style.scss'
+import { Button, Input, SelectGroupV2, Switch, TextArea } from 'digitinary-ui'
+import Tooltip from '../Tooltip/Tooltip'
+import SVGLoader from '../SVGLoader/SVGLoader'
+import { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'
+import PlusIcon from '../../assets/icons/Plus.svg'
+import PlusSquare from '../../assets/icons/PlusSquare.svg'
+import styles from '../MethodAccordion/MethodAccordion.module.scss'
+import { useFormik } from 'formik'
+import * as yup from 'yup'
+import { capitalize } from '../../helpers/methodAccordion.helper'
+import regex from '../../constants/regex'
+
+const ParamterTable = ({
+  id,
+  headCells,
+  data,
+  isFormOpen,
+  setIsFormOpen,
+  saveNewRow,
+  readOnly,
+  isRequest = true,
+}) => {
+  const [text, setText] = useState('')
+  const [tooltipRef, setTooltipRef] = useState(null)
+  const [tooltipEnumRef, setTooltipEnumRef] = useState(null)
+  const [enumFields, setEnumFields] = useState<string[]>([])
+  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
+    validateOnMount: true,
+    initialValues: {
+      name: '',
+      in: isRequest ? 'query' : 'header',
+      schema: {
+        type: 'string',
+        enum: [],
+        items: {
+          type: 'string',
+        },
+      },
+      required: true,
+      description: '',
+    },
+    validationSchema: yup.object().shape({
+      name: yup.string().default('').trim().required('Parameter name is required'),
+      in: yup.string().required('Paramter type is required'),
+      schema: yup.object().shape({
+        type: yup.string().required('Parameter schema type is required'),
+        enum: yup.array(yup.string()).optional(),
+        items: yup.object().shape({
+          type: yup.string().optional(),
+        }),
+      }),
+      required: yup.boolean().when('in', {
+        is: 'path',
+        then: (schema) => schema.oneOf([true], 'Path parameters must be required.'),
+        otherwise: (schema) => schema.optional(),
+      }),
+      description: yup.string().default('').trim().optional(),
+    }),
+    onSubmit: (values) => {
+      if (values && !values?.schema?.items?.type) {
+        delete values?.schema?.items?.type
+      }
+      saveNewRow(values)
+      setIsFormOpen(undefined)
+      setText('')
+      resetForm()
+    },
+  })
+
+  return (
+    <div className="tableSectionContainer">
+      <div className="tableContainer">
+        <table id={id || ''} className={`table borderRadiusTop borderRadiusBottom`}>
+          <thead className="tableHead">
+            <tr>
+              {headCells?.map((headCell) => (
+                <th
+                  key={headCell.id}
+                  className={`tableHeadCell ${headCell.classes || ''}`}
+                  style={{ width: headCell.width, minWidth: headCell.minWidth }}
+                >
+                  <div
+                    className="headContainer"
+                    data-id={`${
+                      typeof headCell.label === 'string'
+                        ? headCell.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g, '_')
+                        : 'UNKNOWN_LABEL'
+                    }_COLUMN`}
+                  >
+                    {headCell.label}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="tableBody" data-id="TABLE_BODY">
+            {data?.map((row, rowIndex) => {
+              return (
+                <tr key={rowIndex} data-i={rowIndex} className={`row`}>
+                  {headCells?.map((headCell) => {
+                    const cellContent = row[headCell.id] !== '_' && (
+                      <div
+                        data-id="TEXT_DESCRIPTION"
+                        className="tableData"
+                        style={{
+                          width: headCell.width,
+                          minWidth: headCell.minWidth,
+                        }}
+                      >
+                        {row[headCell.id]}
+                      </div>
+                    )
+
+                    return (
+                      <td
+                        key={headCell.id}
+                        style={{
+                          width: headCell.width,
+                          minWidth: headCell.minWidth,
+                        }}
+                      >
+                        {cellContent}
+                      </td>
+                    )
+                  })}
+                </tr>
+              )
+            })}
+            {data?.length === 0 && readOnly && (
+              <tr className="fallbackTableRow">
+                <td className="fallbackContainer" colSpan={headCells?.length}>
+                  <div className="fallbackTextContainer">
+                    <span className="fallbackText"> No Data Available</span>
+                  </div>
+                </td>
+              </tr>
+            )}
+
+            {isFormOpen && !readOnly ? (
+              <tr className={`row`}>
+                <td key={'Parameter name'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <Input
+                      placeholder="Parameter name"
+                      size="large"
+                      type="text"
+                      onChange={(value) => {
+                        if (value === '' || regex.ASCII.test(value as string))
+                          setFieldValue('name', value)
+                      }}
+                      value={values.name}
+                      disabled={readOnly}
+                    />
+                  </div>
+                </td>
+
+                <td key={'parameter in'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <SelectGroupV2
+                      disabled={readOnly}
+                      value={{
+                        label: capitalize(values.in),
+                        value: values.in,
+                      }}
+                      onChange={(item) => {
+                        setFieldValue('in', item?.value?.toLowerCase())
+                        if (item?.value == 'in') {
+                          setFieldValue('required', true)
+                        }
+                      }} // Updates state on selection
+                      options={[
+                        {
+                          list: isRequest
+                            ? [
+                                { label: 'Query', value: 'query' },
+                                { label: 'Header', value: 'header' },
+                                { label: 'Path', value: 'path' },
+                              ]
+                            : [{ label: 'Header', value: 'header' }],
+                        },
+                      ]}
+                      errorMsg={!!errors.in && errors.in}
+                      isMultiple={false}
+                      withSearch={false}
+                      clearable={false}
+                    />{' '}
+                  </div>
+                </td>
+
+                <td key={'parameter schema type'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData select-inputs">
+                    <SelectGroupV2
+                      disabled={readOnly}
+                      clearable={false}
+                      value={{
+                        label: capitalize(values?.schema?.type),
+                        value: values?.schema?.type,
+                      }}
+                      errorMsg={!!errors.schema && errors.schema}
+                      onChange={(item) => setFieldValue('schema.type', item?.value?.toLowerCase())} // Updates state on selection
+                      options={[
+                        {
+                          list: [
+                            { label: 'String', value: 'string' },
+                            { label: 'Integer', value: 'integer' },
+                            { label: 'Boolean', value: 'boolean' },
+                            { label: 'Object', value: 'object' },
+                            { label: 'Array', value: 'array' },
+                            { label: 'Number', value: 'number' },
+                          ],
+                        },
+                      ]}
+                      isMultiple={false}
+                      withSearch={false}
+                    />{' '}
+                    {!!values?.schema?.type && values?.schema?.type.toLowerCase() === 'array' ? (
+                      <SelectGroupV2
+                        disabled={readOnly}
+                        clearable={false}
+                        value={{
+                          label: capitalize(values?.schema?.items?.type),
+                          value: values.schema?.items?.type,
+                        }}
+                        errorMsg={!!errors?.schema?.items?.type && errors?.schema?.items?.type}
+                        onChange={(item) =>
+                          setFieldValue('schema.items.type', item?.value?.toLowerCase())
+                        } // Updates state on selection
+                        options={[
+                          {
+                            list: [
+                              { label: 'String', value: 'string' },
+                              { label: 'Integer', value: 'integer' },
+                              { label: 'Boolean', value: 'boolean' },
+                              { label: 'Object', value: 'object' },
+                              { label: 'Array', value: 'array' },
+                              { label: 'Number', value: 'number' },
+                            ],
+                          },
+                        ]}
+                        isMultiple={false}
+                        withSearch={false}
+                      />
+                    ) : (
+                      ''
+                    )}
+                  </div>
+                </td>
+
+                <td key={'parameter enum'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <Tooltip
+                      disabled={
+                        values?.schema?.type?.toLowerCase() == 'array' ||
+                        values?.schema?.type?.toLowerCase() == 'object'
+                      }
+                      arrowWithBorder
+                      placement="bottom-end"
+                      type="function"
+                      trigger="click"
+                      delay={[0, 0]}
+                      onCreate={(instance) => setTooltipEnumRef(instance)}
+                      content={
+                        <div className={styles.editDescTooltipContent}>
+                          <p className={styles.editDescTooltipContent_header}>Enum</p>
+                          {!!values?.schema?.enum &&
+                            !!values?.schema?.enum.length &&
+                            values?.schema?.enum?.map((item, index) => (
+                              <Input
+                                key={index}
+                                className={'methodDescForEnum'}
+                                required
+                                clearable={false}
+                                placeholder="Enter Enum value..."
+                                value={item}
+                                onChange={(value) => {
+                                  setFieldValue(`schema.enum[${index}]`, value)
+                                }}
+                              />
+                            ))}
+                          {enumFields &&
+                            enumFields?.map((item, index) => (
+                              <Input
+                                key={index}
+                                className={'methodDescForEnum'}
+                                required
+                                clearable={false}
+                                placeholder={`Enter Enum value...`}
+                                value={item}
+                                onChange={(value) => {
+                                  let _values = [...enumFields]
+                                  _values[index] = value
+                                  setEnumFields(_values)
+                                }}
+                              />
+                            ))}
+                          <p
+                            className={'addEnumButton'}
+                            onClick={() => {
+                              setEnumFields((prev) => [...prev, ''])
+                            }}
+                          >
+                            <SVGLoader src={PlusSquare} />
+                            Add New Enum
+                          </p>
+                          {!readOnly && (
+                            <Button
+                              className={styles.editDescTooltipContent_btn}
+                              variant="outlined"
+                              size="small"
+                              type="button"
+                              onClick={() => {
+                                setFieldValue('schema.enum', [
+                                  ...values?.schema?.enum,
+                                  ...enumFields,
+                                ])
+                                setEnumFields([])
+                                tooltipEnumRef?.hide()
+                              }}
+                              disabled={
+                                (enumFields.length > 0 &&
+                                  enumFields?.filter((item) => !item).length) ||
+                                (values?.schema?.enum.length > 0 &&
+                                  values?.schema?.enum?.filter((item) => !item).length)
+                              }
+                            >
+                              Apply
+                            </Button>
+                          )}
+                        </div>
+                      }
+                    >
+                      <Button
+                        className={styles.editDescBtn}
+                        id="EnumButton"
+                        variant="link"
+                        color="action"
+                        disabled={
+                          values?.schema?.type?.toLowerCase() == 'array' ||
+                          values?.schema?.type?.toLowerCase() == 'object'
+                        }
+                        endIcon={
+                          <SVGLoader id="enumIcon" src={PlusIcon} width="1.5rem" height="1.5rem" />
+                        }
+                      >
+                        Add
+                      </Button>
+                    </Tooltip>
+                  </div>
+                </td>
+
+                <td key={'parameter required'}>
+                  <div data-id="is required" className="tableData">
+                    {readOnly ? (
+                      <>{values.required ? 'True' : 'False'}</>
+                    ) : (
+                      <Switch
+                        checked={
+                          values && values.in && values.in.toLowerCase() == 'path'
+                            ? true
+                            : values.required
+                        }
+                        disabled={values && values.in && values.in.toLowerCase() == 'path'}
+                        onClick={() => {
+                          if (readOnly) {
+                            return
+                          }
+                          setFieldValue('required', !values.required)
+                        }}
+                      />
+                    )}
+                  </div>
+                </td>
+
+                <td key={'parameter schema desc'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <div className={styles.paramDescContainer}>
+                      <Tooltip
+                        arrowWithBorder
+                        placement="bottom-end"
+                        type="function"
+                        trigger="click"
+                        delay={[0, 0]}
+                        onCreate={(instance) => setTooltipRef(instance)}
+                        content={
+                          <div className={styles.editDescTooltipContent}>
+                            <p className={styles.editDescTooltipContent_header}>Description</p>
+                            <TextArea
+                              value={text || values.description}
+                              onChange={(value) => {
+                                if (value === '' || regex.ASCII.test(value)) setText(value)
+                              }}
+                              disabled={readOnly}
+                              placeholder="Describe parameter..."
+                              maxLength={120}
+                            />
+                            {!readOnly && (
+                              <Button
+                                className={styles.editDescTooltipContent_btn}
+                                variant="outlined"
+                                size="small"
+                                onClick={() => {
+                                  setFieldValue('description', text?.trim())
+                                  tooltipRef?.hide()
+                                }}
+                                disabled={text?.trim() === ''}
+                              >
+                                Apply
+                              </Button>
+                            )}
+                          </div>
+                        }
+                      >
+                        <Button
+                          className={styles.editDescBtn}
+                          variant="link"
+                          color="action"
+                          endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                        >
+                          {readOnly ? 'View ' : 'Add '} Description
+                        </Button>
+                      </Tooltip>
+
+                      <div className={styles.paramDescContainer_separator}></div>
+                      {!readOnly && (
+                        <Button
+                          className={styles.deleteParamBtn}
+                          variant="link"
+                          color="error"
+                          endIcon={
+                            <SVGLoader src={DeleteIcon} width="1.125rem" height="1.125rem" />
+                          }
+                          onClick={() => {
+                            resetForm()
+                            setText('')
+                            setIsFormOpen(undefined)
+                          }} // Correctly delete the new row
+                        />
+                      )}
+
+                      {!readOnly && (
+                        <Tooltip
+                          disabled={!!values.name.trim()}
+                          content={`Parameter name can't be empty `}
+                        >
+                          <Button
+                            className={styles.deleteParamBtn}
+                            variant="link"
+                            color="success"
+                            disabled={!values.name.trim()}
+                            endIcon={<SVGLoader src={AddRow} width="0.125rem" height="0.125rem" />}
+                            onClick={() => {
+                              setText('')
+                              submitForm()
+                            }} // Save the new row when clicked
+                          />
+                        </Tooltip>
+                      )}
+                    </div>{' '}
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              <>
+                {!readOnly && (
+                  <tr key={'addNew'} data-i={'addNew'} className={`row`}>
+                    <td colSpan={6}>
+                      <Button
+                        variant="link"
+                        color="primary"
+                        onClick={() => {
+                          setIsFormOpen((prev) => (!prev ? (isRequest ? 'Req' : 'Res') : undefined))
+                        }}
+                      >
+                        + Add Parameter
+                      </Button>
+                    </td>
+                  </tr>
+                )}
+              </>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default ParamterTable