feat: add attribute in nested table

concord-consortium · Sep 17, 2024 · acd2f84 · acd2f84
1 parent 2e11cab
commit acd2f84
Show file tree

Hide file tree

Showing 17 changed files with 590 additions and 147 deletions.
diff --git a/src/components/add-attribute-button.scss b/src/components/add-attribute-button.scss
@@ -0,0 +1,33 @@
+.addAttributeButtonContainer {
+  display: inline-block;
+  margin-left: 10px;
+
+  .addAttributeButton {
+    all: unset;
+    align-items: center;
+    border-radius: 50%;
+    color: #333;
+    cursor: pointer;
+    display: flex;
+    font-size: 11px;
+    font-weight: bold;
+    height: 12px;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    svg {
+      background: #333;
+      border-radius: 50%;
+      height: 12px;
+      margin-right: 5px;
+      width: 12px;
+
+      path {
+        fill: white;
+      }
+    }
+  }
+}
diff --git a/src/components/add-attribute-button.tsx b/src/components/add-attribute-button.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { ICollection, ICollections } from "../types";
+
+import AddIcon from "../assets/add-icon.svg";
+
+import css from "./add-attribute-button.scss";
+
+interface IProps {
+  collectionId: number;
+  collections: ICollections;
+  handleAddAttribute?: (collection: ICollection, attrName: string) => Promise<void>;
+}
+
+export const AddAttributeButton: React.FC<IProps> = ({collections, collectionId, handleAddAttribute}: IProps) => {
+
+  const handleAddAttributeToCollection = async () => {
+    const collection = collections.find((c) => c.id === collectionId);
+    collection && handleAddAttribute && await handleAddAttribute(collection, "");
+  };
+
+  return (
+    <div className={css.addAttributeButtonContainer}>
+      <button onClick={handleAddAttributeToCollection} className={css.addAttributeButton}>
+        <AddIcon /> Add Attribute to Collection
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -13,7 +13,7 @@ function App() {
          handleSelectDataSet: _handleSelectDataSet, handleUpdateAttributePosition,
          handleAddCollection, handleAddAttribute, handleSetCollections, handleSelectSelf,
          updateTitle, selectCODAPCases, listenForSelectionChanges,
-         handleCreateCollectionFromAttribute, handleUpdateCollections
+         handleCreateCollectionFromAttribute, renameAttribute
         } = useCodapState();
 
   useEffect(() => {
@@ -32,10 +32,14 @@ function App() {
     updateInteractiveState({view});
   }, [updateInteractiveState]);
 
-  const handleSelectDataSet = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleSelectDataSet = useCallback((e: React.ChangeEvent<HTMLSelectElement>, defaultDisplayMode?: string) => {
     const dataSetName = e.target.value;
     _handleSelectDataSet(dataSetName);
-    updateInteractiveState({dataSetName});
+    const update: Partial<InteractiveState> = {dataSetName};
+    if (defaultDisplayMode) {
+      update.displayMode = defaultDisplayMode;
+    }
+    updateInteractiveState(update);
   }, [_handleSelectDataSet, updateInteractiveState]);
 
   const handleShowComponent = () => {
@@ -104,7 +108,8 @@ function App() {
           handleUpdateAttributePosition={handleUpdateAttributePosition}
           handleSetCollections={handleSetCollections}
           handleCreateCollectionFromAttribute={handleCreateCollectionFromAttribute}
-          handleUpdateCollections={handleUpdateCollections}
+          handleAddAttribute={handleAddAttribute}
+          renameAttribute={renameAttribute}
         />
       );
 

diff --git a/src/components/draggable-table-tags.tsx b/src/components/draggable-table-tags.tsx
@@ -5,8 +5,10 @@ import { useTableTopScrollTopContext } from "../hooks/useTableScrollTop";
 import { useCodapState } from "../hooks/useCodapState";
 import { getAttribute } from "@concord-consortium/codap-plugin-api";
 import { getCollectionById } from "../utils/apiHelpers";
-import { PropsWithChildren } from "../types";
+import { ICollection, ICollections, PropsWithChildren } from "../types";
 import { EditableTableCell } from "./editable-table-cell";
+import { AddAttributeButton } from "./add-attribute-button";
+import { EditableTableHeader } from "./editable-table-header";
 
 import AddIcon from "../assets/plus-level-1.svg";
 import DropdownIcon from "../assets/dropdown-arrow-icon.svg";
@@ -38,10 +40,14 @@ interface DraggagleTableHeaderProps {
   colSpan?: number;
   dataSetName: string;
   dataSetTitle: string;
+  editableHasFocus?: boolean;
+  isParent?: boolean;
+  attrId?: number;
+  renameAttribute: (collectionName: string, attrId: number, oldName: string, newName: string) => Promise<void>;
 }
 
 export const DraggagleTableHeader: React.FC<PropsWithChildren<DraggagleTableHeaderProps>> = (props) => {
-  const {collectionId, attrTitle, dataSetName, children} = props;
+  const {collectionId, attrTitle, dataSetName, editableHasFocus, children, isParent, attrId, renameAttribute} = props;
   const {dragOverId, dragSide, handleDragStart, handleDragOver, handleOnDrop, handleDragEnter,
     handleDragLeave, handleDragEnd} = useDraggableTableContext();
   const {handleSortAttribute} = useCodapState();
@@ -69,8 +75,7 @@ export const DraggagleTableHeader: React.FC<PropsWithChildren<DraggagleTableHead
     };
   }, [showHeaderMenu, tableContainer]);
 
-
-  const handleShowHeaderMenu = (e: React.MouseEvent<HTMLTableHeaderCellElement>) => {
+  const handleShowHeaderMenu = (e: React.MouseEvent<HTMLTableCellElement | HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
     setShowHeaderMenu(!showHeaderMenu);
@@ -83,6 +88,7 @@ export const DraggagleTableHeader: React.FC<PropsWithChildren<DraggagleTableHead
     handleSortAttribute(dataSetName, attribute.id, isDescending);
     setShowHeaderMenu(false);
   };
+
   return (
     <>
       <th
@@ -97,19 +103,27 @@ export const DraggagleTableHeader: React.FC<PropsWithChildren<DraggagleTableHead
         onDragEnter={handleDragEnter}
         onDragLeave={handleDragLeave}
         onDragEnd={handleDragEnd}
-        onMouseEnter={() => setShowDropdownIcon(true)}
-        onMouseLeave={() => setShowDropdownIcon(false)}
-        onClick={handleShowHeaderMenu}
       >
-        <div className={css.thChildContainer}>
-          <div>{children}</div>
-          {showDropdownIcon &&
-            <div className={css.dropdownIcon}>
-              <DropdownIcon
-                onClick={handleShowHeaderMenu}
-                className={css.dropdownIcon}
-              />
-            </div>
+        <div className={`${css.thChildContainer} ${isParent ? css.isParent : ""}`}>
+          <button
+            onMouseEnter={() => setShowDropdownIcon(true)}
+            onMouseLeave={() => setShowDropdownIcon(false)}
+            onClick={handleShowHeaderMenu}
+          >
+            {String(children).match(/^newAttr/) && attrId
+               ? <EditableTableHeader
+                    attrId={attrId}
+                    collectionName={String(children)}
+                    collectionId={collectionId}
+                    hasFocus={editableHasFocus}
+                    renameAttribute={renameAttribute}
+                 />
+               : children}
+          </button>
+          {
+            <button className={css.dropdownIcon} onClick={handleShowHeaderMenu}>
+              {showDropdownIcon && <DropdownIcon className={css.dropdownIcon} />}
+            </button>
           }
         </div>
       </th>
@@ -130,14 +144,16 @@ export const DraggagleTableHeader: React.FC<PropsWithChildren<DraggagleTableHead
 };
 
 interface DroppableTableHeaderProps {
+  collections: ICollections;
+  childCollectionId: number;
   collectionId: number;
+  dataSetName: string;
+  handleAddAttribute?: (collection: ICollection, attrName: string) => Promise<void>;
 }
 
 export const DroppableTableHeader: React.FC<PropsWithChildren<DroppableTableHeaderProps>> = (props) => {
-  const {collectionId, children} = props;
-  const {dragOverId, handleDragOver, handleOnDrop, handleDragEnter,
-    handleDragLeave} = useDraggableTableContext();
-
+  const {childCollectionId, collectionId, collections, children, handleAddAttribute} = props;
+  const {dragOverId, handleDragOver, handleOnDrop, handleDragEnter, handleDragLeave} = useDraggableTableContext();
   const id = `${collectionId}`;
   const style = getStyle(id, dragOverId, "left");
 
@@ -150,7 +166,14 @@ export const DroppableTableHeader: React.FC<PropsWithChildren<DroppableTableHead
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
     >
-      {children}
+      <div className={css.parentCollHeader}>
+        {children}
+        <AddAttributeButton
+          collectionId={childCollectionId}
+          collections={collections}
+          handleAddAttribute={handleAddAttribute}
+        />
+      </div>
     </th>
   );
 };
@@ -161,15 +184,12 @@ interface DraggagleTableDataProps {
   caseId: string;
   style?: React.CSSProperties;
   isParent?: boolean;
-  resizeCounter?: number;
   parentLevel?: number;
   selectedDataSetName: string;
-  handleUpdateCollections: () => void;
 }
 
 export const DraggagleTableData: React.FC<PropsWithChildren<DraggagleTableDataProps>> = (props) => {
-  const {collectionId, attrTitle, children, caseId, isParent, resizeCounter, parentLevel=0,
-         selectedDataSetName, handleUpdateCollections} = props;
+  const {collectionId, attrTitle, children, caseId, isParent, parentLevel=0, selectedDataSetName} = props;
   const {dragOverId, dragSide} = useDraggableTableContext();
   const {style} = getIdAndStyle(collectionId, attrTitle, dragOverId, dragSide);
   const {tableScrollTop, scrollY} = useTableTopScrollTopContext();
@@ -205,15 +225,13 @@ export const DraggagleTableData: React.FC<PropsWithChildren<DraggagleTableDataPr
       }
       return newTop;
     }
-  // resizeCounter is a hack to force rerender of text positioning when window is resized
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tableScrollTop, isParent, scrollY, parentLevel, resizeCounter]);
+  }, [tableScrollTop, isParent, scrollY, parentLevel]);
 
   const EditableCell = () => {
     return (
       <EditableTableCell
         attrTitle={attrTitle}
-        handleUpdateCollections={handleUpdateCollections}
         caseId={caseId}
         selectedDataSetName={selectedDataSetName}
       >

diff --git a/src/components/editable-table-cell.scss b/src/components/editable-table-cell.scss
@@ -1,5 +1,23 @@
 .editableTableCell {
+  height: 100%;
+  min-height: 16px;
+  width: 100%;
+
+  div:first-child {
+    height: 100%;
+    min-height: 16px;
+    width: 100%;
+
+    span:empty {
+      display: block;
+      height: 100%;
+      min-height: 16px;
+      width: 100%;
+    }
+  }
+
   input {
+    background: white;
     width: calc(100% - 8px);
   }
 }
diff --git a/src/components/editable-table-cell.tsx b/src/components/editable-table-cell.tsx
@@ -1,20 +1,20 @@
 import React, { ReactNode, useState } from "react";
 import { Editable, EditablePreview, EditableInput } from "@chakra-ui/react";
-import { updateCaseById } from "@concord-consortium/codap-plugin-api";
+import { useCodapState } from "../hooks/useCodapState";
 
 import css from "./editable-table-cell.scss";
 
 interface IProps {
   attrTitle: string;
   caseId: string;
   children: ReactNode;
-  handleUpdateCollections: () => void;
   selectedDataSetName: string;
 }
 
 export const EditableTableCell = (props: IProps) => {
-  const { attrTitle, caseId, children, handleUpdateCollections, selectedDataSetName } = props;
-  const displayValue = String(children);
+  const { attrTitle, caseId, children } = props;
+  const { editCaseValue } = useCodapState();
+  const [displayValue, setDisplayValue] = useState(String(children));
   const [editingValue, setEditingValue] = useState(displayValue);
   const [isEditing, setIsEditing] = useState(false);
 
@@ -28,11 +28,16 @@ export const EditableTableCell = (props: IProps) => {
   };
 
   const handleSubmit = async (newValue: string) => {
+    if (newValue === displayValue) {
+      setIsEditing(false);
+      return;
+    }
+
     try {
-      await updateCaseById(selectedDataSetName, caseId, {[attrTitle]: newValue});
+      await editCaseValue(newValue, caseId, attrTitle);
+      setDisplayValue(newValue);
       setEditingValue(newValue);
       setIsEditing(false);
-      handleUpdateCollections();
     } catch (e) {
       console.error("Case not updated: ", e);
     }

diff --git a/src/components/editable-table-header.tsx b/src/components/editable-table-header.tsx
@@ -0,0 +1,64 @@
+import React, { ReactNode, useState } from "react";
+import { Editable, EditablePreview, EditableInput } from "@chakra-ui/react";
+
+import css from "./editable-table-cell.scss";
+
+interface IProps {
+  attrId: number;
+  collectionName: string;
+  collectionId: number;
+  children?: ReactNode;
+  hasFocus?: boolean;
+  selectedDataSetName?: string;
+  renameAttribute: (collectionName: string, attrId: number, oldName: string, newName: string) => Promise<void>;
+}
+
+export const EditableTableHeader = (props: IProps) => {
+  const { attrId, collectionName, hasFocus, renameAttribute } = props;
+  const [displayValue, setDisplayValue] = useState(collectionName);
+  const [editingValue, setEditingValue] = useState(displayValue);
+  const [isEditing, setIsEditing] = useState(hasFocus);
+
+  const handleChangeValue = (newValue: string) => {
+    setEditingValue(newValue);
+  };
+
+  const handleCancel = () => {
+    setEditingValue(displayValue);
+    setIsEditing(false);
+  };
+
+  const handleSubmit = async (newValue: string) => {
+    if (newValue === displayValue) {
+      setIsEditing(false);
+      return;
+    }
+
+    try {
+      await renameAttribute(collectionName, attrId, displayValue, newValue);
+      setDisplayValue(newValue);
+      setEditingValue(newValue);
+      setIsEditing(false);
+    } catch (e) {
+      console.error("Case not updated: ", e);
+    }
+  };
+
+  return (
+    <div className={css.editableTableCell}>
+      <Editable
+        isPreviewFocusable={true}
+        onCancel={handleCancel}
+        onChange={handleChangeValue}
+        onEdit={() => setIsEditing(true)}
+        onSubmit={handleSubmit}
+        startWithEditView={hasFocus}
+        submitOnBlur={true}
+        value={isEditing ? editingValue : displayValue}
+      >
+        {!isEditing && <EditablePreview />}
+        <EditableInput />
+      </Editable>
+    </div>
+  );
+};