Primary key addition and title description changes

.eslintrc

@@ -4,13 +4,8 @@
     "sourceType": "module",
     "ecmaFeatures": { "jsx": true }
   },
-  "plugins": [
-    "@typescript-eslint/eslint-plugin"
-  ],
-  "extends": [
-    "standard",
-    "plugin:react/recommended"
-  ],
+  "plugins": ["@typescript-eslint/eslint-plugin"],
+  "extends": ["standard", "prettier", "plugin:react/recommended"],
   "settings": {
     "react": { "version": "detect" }
   },
@@ -27,13 +22,38 @@
     "no-useless-constructor": "off",
     "space-before-function-paren": "off",
     "no-dupe-class-members": "off",
-    "comma-dangle": ["error", {
-      "arrays": "always-multiline",
-      "objects": "always-multiline"
-    }],
-    "@typescript-eslint/no-unused-vars": ["error", {
-      "argsIgnorePattern": "^_",
-      "varsIgnorePattern": "^_"
-    }]
-  }
+    "comma-dangle": [
+      "error",
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline"
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+      ],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint", "prettier"],
+      "rules": {
+        "quotes": "off",
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/no-var-requires": 0,
+        "react/prop-types": 0
+      }
+    }
+  ]
 }

package.json

@@ -19,29 +19,38 @@
   "scripts": {
     "analyze": "NODE_ENV=production webpack --profile --json | webpack-bundle-size-analyzer",
     "build": "npm run compile && npm run bundle",
-    "bundle": "rm -rf dist && webpack --progress && NODE_ENV=production webpack --progress",
-    "compile": "rm -rf lib && tsc && cp -r src/images lib && cp -r src/styles lib",
+    "bundle": "rimraf dist && webpack --progress && NODE_ENV=production webpack --progress",
+    "compile": "rimraf dist && tsc && copy -r src/images lib && copy -r src/styles lib",
     "docs": "build-storybook -o build",
     "start": "start-storybook -p 6006",
     "e2e": "cypress run",
-    "format": "prettier --write '{src,test}/**/*.ts*' && eslint --fix '{src,test}/**/*.ts*'",
-    "lint": "prettier --check '{src,test}/**/*.ts*' && eslint '{src,test}/**/*.ts*'",
+    "format": "prettier --write \"{src,test}/**/*.ts*\" && eslint --fix \"{src,test}/**/*.ts*\"",
+    "lint": "prettier --check \"{src,test}/**/*.ts*\" && eslint \"{src,test}/**/*.ts*\"",
     "prepare": "husky install",
     "pretest": "npm run lint",
     "readme": "doctoc --maxlevel 3 README.md",
     "test": "jest --coverage",
     "update": "ncu -u"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.17",
     "@types/lodash": "^4.14.168",
     "@types/marked": "^2.0.1",
     "@types/uuid": "^8.3.0",
+    "bootstrap": "5.1.3",
     "classnames": "^2.3.1",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-prettier": "4.0.0",
     "jsonschema": "^1.4.0",
     "jszip": "^3.6.0",
     "lodash": "^4.17.21",
     "marked": "^2.0.1",
+    "react-json-editor-ajrm": "^2.5.13",
     "react-sortable-hoc": "^2.0.0",
+    "reactstrap": "9.0.1",
+    "rimraf": "3.0.2",
     "tableschema": "^1.12.4",
     "use-async-effect": "^2.2.3",
     "uuid": "^8.3.2"
@@ -64,6 +73,7 @@
     "@types/node-fetch": "^2.5.10",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
+    "@types/react-json-editor-ajrm": "^2.5.2",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@typescript-eslint/parser": "^4.21.0",
     "babel-loader": "^8.2.2",

src/components/Constraints.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react'
+import { UNIQUE, REQUIRED } from '../constants'
+import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Table } from 'reactstrap'
+import { ToggleSwitch } from './toggleSwitch'
+
+/**
+ *
+ */
+export type MultiSelectProps = {
+  toggleModal: any
+  saveConstraint: any
+  removeConstraint: any
+  column: any
+}
+
+export function Constraints(props: MultiSelectProps) {
+  const [constraint, setConstraint] = useState<string>('')
+  const [toggleConstraint, setToggleConstraint] = useState(false)
+  const [requiredChecked, setRequiredChecked] = useState(true)
+  const [uniqueChecked, setUniqueChecked] = useState(true)
+
+  const toggleDropDown = () => {
+    setToggleConstraint(!toggleConstraint)
+  }
+
+  const selectConstraint = (type: string) => {
+    if (type === REQUIRED) {
+      setConstraint(REQUIRED)
+    }
+    if (type === UNIQUE) {
+      setConstraint(UNIQUE)
+    }
+  }
+
+  const setConstraintChecked = (value: boolean) => {
+    if (constraint === REQUIRED) {
+      setRequiredChecked(value)
+    } else if (constraint === UNIQUE) {
+      setUniqueChecked(value)
+    }
+  }
+
+  const setDropdown = () => {
+    return constraint || props.column.field.constraintsAvailable[0]
+  }
+
+  const currentDate = () => {
+    return new Date().toLocaleString().split(',')[0]
+  }
+
+  return (
+    <div className="multiselect">
+      <div className="multiselect-grid">
+        <div className="multiselect-column seprator">
+          <div className="multiselect-body">
+            {props.column.field ? props.column.field.name : ''}
+            <br />
+            <Dropdown toggle={toggleDropDown} isOpen={toggleConstraint}>
+              <DropdownToggle caret>{setDropdown()}</DropdownToggle>
+              <DropdownMenu>
+                {props.column.field.constraintsAvailable &&
+                  props.column.field.constraintsAvailable.map((constraint: any) => (
+                    <DropdownItem
+                      key={'id-' + constraint}
+                      onClick={() => selectConstraint(constraint)}
+                    >
+                      {constraint}
+                    </DropdownItem>
+                  ))}
+              </DropdownMenu>
+            </Dropdown>
+
+            {constraint === REQUIRED && (
+              <div>
+                Required Constraint: <br />
+                <ToggleSwitch
+                  id="onoffConstraint"
+                  checked={requiredChecked}
+                  onFieldChange={(val: boolean) => setConstraintChecked(val)}
+                  name="toggle"
+                  small={false}
+                  disabled={true}
+                ></ToggleSwitch>
+              </div>
+            )}
+
+            {constraint === UNIQUE && (
+              <div>
+                Unique Constraint: <br />
+                <ToggleSwitch
+                  id="switchUnique"
+                  checked={uniqueChecked}
+                  onFieldChange={(val: boolean) => setConstraintChecked(val)}
+                  name="toggle"
+                  small={false}
+                  disabled={true}
+                ></ToggleSwitch>
+              </div>
+            )}
+          </div>
+
+          <div className="multiselect-footer">
+            <button className="cancel-btn" type="button" onClick={props.toggleModal}>
+              Cancel
+            </button>
+            <button
+              className="save-btn"
+              type="button"
+              disabled={!constraint}
+              onClick={() => {
+                setConstraint('')
+                props.saveConstraint(constraint)
+              }}
+            >
+              Save
+            </button>
+          </div>
+        </div>
+
+        <div className="multiselect-column">
+          <div className="multiselect-header">
+            <h5>Previously added</h5>
+          </div>
+          <div className="multiselect-body">
+            <Table>
+              <thead>
+                <tr>
+                  <th>Constraint</th>
+                  <th>Value</th>
+                  <th>Added By</th>
+                  <th>Effective Date</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {props.column.field.constraintList &&
+                  props.column.field.constraintList.map((value: any) => {
+                    return (
+                      <tr key={value}>
+                        <th scope="row">{value}</th>
+                        <td>true</td>
+                        <td>Mark</td>
+                        <td>{currentDate()}</td>
+                        <td>
+                          <button
+                            className="btn-close"
+                            onClick={() => props.removeConstraint(value)}
+                          ></button>
+                        </td>
+                      </tr>
+                    )
+                  })}
+              </tbody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}