update and remove columns

ROADMAP.md

@@ -37,19 +37,19 @@
 
 ### Functionality:
 
-- Hide/Show columns
-- Delete columns
-- Edit columns
-- Delete tables
-- Edit tables
-- Hide tables
+- Delete columns✅
+- Edit columns✅
 - Fixed column
+- Hide/Show columns
 - resizable column ✅
 - keyboard Navigation:
   - Up key to move to the cell above ✅
   - Down key to move to the cell bellow, if last cell create a new row ✅
   - Tab to go to the next cell ✅
 - column / table Create/edit validation
+- Delete tables
+- Edit tables
+- Hide tables
 
 ## V1
 

src/components/Fields/UrlLink.tsx

@@ -11,7 +11,7 @@ const UrlLink = (props: Props) => {
   return value ? (
     <>
       <EditIcon />
-      <a href={value} target="_blank">
+      <a href={value} target="_blank" rel="noopener noreferrer">
         {value}
       </a>
     </>

src/components/Table/HeaderPopper.tsx

@@ -23,6 +23,7 @@ import VisibilityOffIcon from "@material-ui/icons/VisibilityOff";
 import FormatItalicIcon from "@material-ui/icons/FormatItalic";
 import FormatUnderlinedIcon from "@material-ui/icons/FormatUnderlined";
 import FormatColorFillIcon from "@material-ui/icons/FormatColorFill";
+import DeleteIcon from "@material-ui/icons/Delete";
 
 const useStyles = makeStyles(Theme =>
   createStyles({
@@ -91,7 +92,7 @@ const HeaderPopper = (props: any) => {
   };
 
   useEffect(() => {
-    if (column && !column.isNew)
+    if (column && !column.isNew) {
       setValues(oldValues => ({
         ...oldValues,
         name: column.name,
@@ -99,6 +100,7 @@ const HeaderPopper = (props: any) => {
         key: column.key,
         isNew: column.isNew,
       }));
+    }
   }, [column]);
   const onClickAway = (event: any) => {
     const dropDownClicked = isFieldType(event.target.dataset.value);
@@ -118,6 +120,20 @@ const HeaderPopper = (props: any) => {
     actions.add(name, type);
     handleClose();
   };
+  const deleteColumn = () => {
+    actions.remove(props.column.idx);
+    handleClose();
+  };
+  const updateColumn = () => {
+    console.log(values, props);
+    const updatables = [
+      { field: "name", value: values.name },
+      { field: "type", value: values.type },
+      { field: "resizable", value: flags.includes("resizable") },
+    ];
+    actions.update(props.column.idx, updatables);
+    handleClose();
+  };
 
   if (column) {
     return (
@@ -139,24 +155,24 @@ const HeaderPopper = (props: any) => {
                     onChange={handleToggle}
                     arial-label="column settings"
                   >
-                    <ToggleButton value="editable" aria-label="bold">
+                    <ToggleButton value="editable" aria-label="editable">
                       {flags.includes("editable") ? (
                         <LockOpenIcon />
                       ) : (
                         <LockIcon />
                       )}
                     </ToggleButton>
-                    <ToggleButton value="visible" aria-label="italic">
+                    <ToggleButton value="visible" aria-label="visible">
                       {flags.includes("visible") ? (
                         <VisibilityIcon />
                       ) : (
                         <VisibilityOffIcon />
                       )}
                     </ToggleButton>
-                    <ToggleButton value="freeze" aria-label="underlined">
+                    <ToggleButton value="freeze" aria-label="freeze">
                       <FormatUnderlinedIcon />
                     </ToggleButton>
-                    <ToggleButton value="resize" aria-label="color">
+                    <ToggleButton value="resizable" aria-label="resizable">
                       <FormatColorFillIcon />
                     </ToggleButton>
                   </ToggleButtonGroup>
@@ -174,9 +190,18 @@ const HeaderPopper = (props: any) => {
                   <FormControl className={classes.formControl}>
                     <InputLabel htmlFor="Field-select">Field Type</InputLabel>
                     {FieldsDropDown(values.type, handleChange)}
-                    {column.isNew && (
+                    {column.isNew ? (
                       <Button onClick={createNewColumn}>Add</Button>
+                    ) : (
+                      <Button onClick={updateColumn}>update</Button>
                     )}
+                    <Button
+                      variant="outlined"
+                      color="secondary"
+                      onClick={deleteColumn}
+                    >
+                      <DeleteIcon /> Delete
+                    </Button>
                     <Button color="secondary" onClick={handleClose}>
                       cancel
                     </Button>

src/components/Table/index.tsx

@@ -152,11 +152,11 @@ function Table(props: any) {
   if (tableState.columns) {
     let columns = tableState.columns.map((column: any) => ({
       width: 220,
-      resizable: true,
+
       key: column.fieldName,
       name: column.columnName,
       editable: editable(column.type),
-      resizeable: true,
+      resizable: true,
       headerRenderer: headerRenderer,
       formatter: formatter(column.type, column.fieldName),
       ...column,

src/hooks/useFiretable/index.ts

@@ -4,7 +4,13 @@ import useCell, { Cell } from "./useCell";
 
 export type FiretableActions = {
   cell: { set: Function; update: Function };
-  column: { add: Function; resize: Function; rename: Function };
+  column: {
+    add: Function;
+    resize: Function;
+    rename: Function;
+    remove: Function;
+    update: Function;
+  };
   row: { add: any; delete: Function };
   table: { set: Function };
 };
@@ -38,6 +44,8 @@ const useFiretable = (collectionName: string) => {
       add: configActions.add,
       resize: configActions.resize,
       rename: configActions.rename,
+      update: configActions.update,
+      remove: configActions.remove,
     },
     row: { add: tableActions.addRow, delete: tableActions.deleteRow },
     table: { set: setTable },

src/hooks/useFiretable/useTableConfig.ts

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import useDoc, { DocActions } from "../useDoc";
 import { FieldType } from "../../components/Fields";
 import _camelCase from "lodash/camelCase";
+
 const useTableConfig = (tablePath: string) => {
   const [tableConfigState, documentDispatch] = useDoc({
     path: `${tablePath}/_FIRETABLE_`,
@@ -29,12 +30,25 @@ const useTableConfig = (tablePath: string) => {
     columns[index].width = width;
     documentDispatch({ action: DocActions.update, data: { columns } });
   };
-  const rename = () => {};
+  const update = (index: number, updatables: any) => {
+    const { columns } = tableConfigState;
+    updatables.forEach((updatable: any) => {
+      columns[index][updatable.field] = updatable.value;
+    });
+    documentDispatch({ action: DocActions.update, data: { columns } });
+  };
+
+  const remove = (index: number) => {
+    const { columns } = tableConfigState;
+    columns.splice(index, 1);
+    documentDispatch({ action: DocActions.update, data: { columns } });
+  };
   const actions = {
+    update,
     add,
     resize,
-    rename,
     setTable,
+    remove,
   };
   return [tableConfigState, actions];
 };