Merge branch 'bug-pr-feedback-official-release'

Author: RafaelGB

src/cdm/DatabaseModel.ts

@@ -1,19 +1,18 @@
 import { RowType } from "cdm/RowTypeModel"
-import { Literal } from "obsidian-dataview/lib/data-model/value";
 import { LocalSettings } from "Settings"
 
 /** database column */
-export type DatabaseColumn = {
-    input: string,
-    accessor: string,
-    label: string,
-    key?: string,
-    position?: number,
-    isMetadata?: boolean,
-    skipPersist?: boolean,
-    csvCandidate?: boolean,
-    isInline?: boolean,
-    [key: string]: RowType
+export interface DatabaseColumn {
+    input: string;
+    accessor: string;
+    label: string;
+    key: string;
+    position?: number;
+    isMetadata?: boolean;
+    skipPersist?: boolean;
+    csvCandidate?: boolean;
+    isInline?: boolean;
+    [key: string]: RowType;
 }
 
 /** database yaml */

src/cdm/FolderModel.ts

@@ -34,24 +34,23 @@ export type Models = {
     [key: string]: FolderModel
 }
 
-export type TableColumn = {
-    id: string,
-    Header?: any,
-    label?: string,
-    key: string,
-    position: number,
-    accessor: any,
-    minWidth?: number,
-    width?: number
-    dataType?: string,
-    options?: RowSelectOption[]
-    Cell?: any,
-    getHeaderProps?: any,
-    getResizerProps?: any,
-    isMetadata?: boolean,
-    skipPersist?: boolean,
-    isInline?: boolean,
-    csvCandidate: boolean
+export interface TableColumn {
+    id: string;
+    label: string;
+    key: string;
+    position: number;
+    accessor: any;
+    minWidth?: number;
+    width?: number;
+    dataType?: string;
+    options?: RowSelectOption[];
+    Cell?: any;
+    getHeaderProps?: any;
+    getResizerProps?: any;
+    isMetadata?: boolean;
+    skipPersist?: boolean;
+    isInline?: boolean;
+    csvCandidate: boolean;
 }
 
 export type RowDataType = {

src/components/Columns.tsx

@@ -22,7 +22,6 @@ export async function obtainMetadataColumns(
     ...MetadataDatabaseColumns.FILE,
     ...(yamlColumns[MetadataColumns.FILE] ?? {}),
   };
-
   yamlColumns[MetadataColumns.ADD_COLUMN] = MetadataDatabaseColumns.ADD_COLUMN;
   return yamlColumns;
 }
@@ -46,24 +45,35 @@ export async function obtainColumnsFromFolder(
   return sortColumnsByPosition(columns);
 }
 
+function parseDatabaseToTableColumn(
+  databaseColumn: DatabaseColumn,
+  columnKey: string,
+  index: number
+): TableColumn {
+  const tableColumn: TableColumn = {
+    ...(databaseColumn as Partial<TableColumn>),
+    id: columnKey,
+    position: databaseColumn.position ?? index,
+    key: databaseColumn.key ?? columnKey,
+    label: databaseColumn.label,
+    accessor: databaseColumn.accessor ?? dbTrim(databaseColumn.label),
+    csvCandidate: databaseColumn.csvCandidate ?? true,
+  };
+  return tableColumn;
+}
+
 async function columnOptions(
   columnKey: string,
   index: number,
   column: DatabaseColumn
 ): Promise<TableColumn> {
   LOGGER.debug(`=> columnOptions. column: ${JSON.stringify(column)}`);
   const options: RowSelectOption[] = [];
-  const tableRow: TableColumn = {
-    id: columnKey,
-    position: column.position ?? index,
-    label: column.label,
-    key: column.key ?? columnKey,
-    accessor: column.accessor ?? dbTrim(column.label),
-    isMetadata: column.isMetadata ?? false,
-    skipPersist: column.skipPersist ?? false,
-    csvCandidate: column.csvCandidate ?? true,
-    isInline: column.isInline ?? false,
-  };
+  const tableRow: TableColumn = parseDatabaseToTableColumn(
+    column,
+    columnKey,
+    index
+  );
   /**
    * return plain text
    * @returns {TableColumn}

src/components/HeaderMenu.tsx

@@ -70,6 +70,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   const [settingsPopperElement, setSettingsPopperElement] = useState(null);
   const [showSettings, setShowSettings] = useState(false);
 
+  // Manage errors
+  const [labelStateInvalid, setLabelStateInvalid] = useState(false);
   useEffect(() => {
     if (created) {
       setExpanded(true);
@@ -208,9 +210,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     }
   );
 
-  function persistLabelChange() {
-    // trim label will get a valid yaml key
-    const newKey = dbTrim(labelState);
+  function persistLabelChange(newKey: string) {
     const futureOrder = headerMenuProps.headerProps.allColumns.map(
       (o: Column) => (o.id === column.id ? newKey : o.id)
     );
@@ -239,12 +239,26 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   }
   function handleKeyDown(e: any) {
     if (e.key === "Enter") {
-      persistLabelChange();
+      // trim label will get a valid yaml key
+      const newKey = dbTrim(labelState);
+      // Check if key already exists. If so, mark it as invalid
+      if (
+        headerMenuProps.headerProps.allColumns.find(
+          (o: Column) => o.id === newKey
+        )
+      ) {
+        setLabelStateInvalid(true);
+        return;
+      }
+      persistLabelChange(newKey);
     }
   }
 
   function handleChange(e: any) {
     setLabelState(e.target.value);
+    if (labelStateInvalid) {
+      setLabelStateInvalid(false);
+    }
   }
 
   /**
@@ -292,7 +306,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
           <div
             className={`menu ${c("popper")}`}
             style={{
-              width: 240
+              width: 240,
             }}
           >
             {/** Edit header label section */}
@@ -305,7 +319,11 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
             >
               <div className="is-fullwidth" style={{ marginBottom: 12 }}>
                 <input
-                  className="form-input"
+                  className={
+                    labelStateInvalid
+                      ? `${c("invalid-form")}`
+                      : `${c("form-input")}`
+                  }
                   ref={setInputRef}
                   type="text"
                   value={labelState}
@@ -356,7 +374,10 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                 >
                   {types.map((type) => (
                     <div key={type.label}>
-                      <div className="menu-item sort-button" onClick={type.onClick}>
+                      <div
+                        className="menu-item sort-button"
+                        onClick={type.onClick}
+                      >
                         <span className="svg-icon svg-text icon-margin">
                           {type.icon}
                         </span>
@@ -439,9 +460,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
             </div>
           </div>
         </div>
-      )
-      }
-    </div >
+      )}
+    </div>
   );
 };
 

src/components/Table.tsx

@@ -14,12 +14,12 @@ import { TableDataType, RowDataType, TableColumn } from "cdm/FolderModel";
 import { DatabaseView } from "DatabaseView";
 import StateManager from "StateManager";
 import { getNormalizedPath } from "helpers/VaultManagement";
-import { ActionTypes, DatabaseCore } from "helpers/Constants";
+import { ActionTypes, DatabaseCore, MetadataColumns } from "helpers/Constants";
 import PlusIcon from "components/img/Plus";
 import { LOGGER } from "services/Logger";
 import DefaultCell from "components/Cell";
 import Header from "components/Header";
-import { c } from "helpers/StylesHelper";
+import { c, getTotalWidth } from "helpers/StylesHelper";
 import { HeaderNavBar } from "components/NavBar";
 import { getColumnsWidthStyle } from "components/styles/ColumnWidthStyle";
 import { HeaderContext } from "components/contexts/HeaderContext";
@@ -196,6 +196,21 @@ export function Table(initialState: TableDataType) {
   // Manage input of new row
   const [inputNewRow, setInputNewRow] = React.useState("");
   const newRowRef = React.useRef(null);
+  function handleKeyDown(e: any) {
+    if (e.key === "Enter") {
+      handleAddNewRow();
+    }
+  }
+
+  function handleAddNewRow() {
+    dataDispatch({
+      type: ActionTypes.ADD_ROW,
+      filename: inputNewRow,
+    });
+    setInputNewRow("");
+    newRowRef.current.value = "";
+  }
+
   // Manage NavBar
   const csvButtonProps = {
     columns: columns,
@@ -215,7 +230,7 @@ export function Table(initialState: TableDataType) {
         {...getTableProps({
           style: {
             ...getTableProps().style,
-            width: totalColumnsWidth,
+            minWidth: totalColumnsWidth,
           },
         })}
         className={`${c("table noselect")}`}
@@ -234,7 +249,7 @@ export function Table(initialState: TableDataType) {
             csvButtonProps={csvButtonProps}
             globalFilterRows={globalFilterRows}
             headerGroupProps={headerGroups[0].getHeaderGroupProps({
-              style: { width: totalColumnsWidth },
+              style: { width: getTotalWidth(columnsWidthState) },
             })}
           />
           {/** Headers */}
@@ -280,6 +295,11 @@ export function Table(initialState: TableDataType) {
                     {...headerGroup.getHeaderGroupProps({
                       style: {
                         ...getDndListStyle(snapshot.isDraggingOver),
+                        width:
+                          getTotalWidth(columnsWidthState) -
+                          columnsWidthState.widthRecord[
+                            MetadataColumns.ADD_COLUMN
+                          ],
                       },
                     })}
                     ref={provided.innerRef}
@@ -291,6 +311,9 @@ export function Table(initialState: TableDataType) {
                         draggableId={`${column.id}`}
                         index={index}
                         isDragDisabled={(column as any).skipPersist}
+                        disableInteractiveElementBlocking={
+                          (column as any).skipPersist
+                        }
                       >
                         {(provided, snapshot) => {
                           const tableCellBaseProps = {
@@ -342,7 +365,7 @@ export function Table(initialState: TableDataType) {
               <div
                 {...row.getRowProps({
                   style: {
-                    maxWidth: `${totalColumnsWidth}px`,
+                    minWidth: `${totalColumnsWidth}px`,
                   },
                 })}
                 className={`${c("tr")}`}
@@ -372,20 +395,11 @@ export function Table(initialState: TableDataType) {
                 onChange={(e) => {
                   setInputNewRow(e.target.value);
                 }}
+                onKeyDown={handleKeyDown}
                 placeholder="filename of new row"
               />
             </div>
-            <div
-              className={`${c("td")}`}
-              onClick={() => {
-                dataDispatch({
-                  type: ActionTypes.ADD_ROW,
-                  filename: inputNewRow,
-                });
-                setInputNewRow("");
-                newRowRef.current.value = "";
-              }}
-            >
+            <div className={`${c("td")}`} onClick={handleAddNewRow}>
               <span className="svg-icon svg-gray" style={{ marginRight: 4 }}>
                 <PlusIcon />
               </span>

src/helpers/Constants.ts

@@ -42,7 +42,6 @@ export const MetadataDatabaseColumns = Object.freeze({
   {
     key: MetadataColumns.FILE,
     input: DataTypes.MARKDOWN,
-    Header: MetadataColumns.FILE,
     label: MetadataLabels.FILE,
     accessor: MetadataColumns.FILE,
     isMetadata: true,
@@ -52,7 +51,6 @@ export const MetadataDatabaseColumns = Object.freeze({
   },
   ADD_COLUMN: {
     key: MetadataColumns.ADD_COLUMN,
-    Header: MetadataColumns.ADD_COLUMN,
     input: DataTypes.NEW_COLUMN,
     disableResizing: true,
     label: MetadataLabels.ADD_COLUMN,

src/helpers/StylesHelper.ts

@@ -26,4 +26,17 @@ export function shortId() {
  */
 export function dbTrim(str: string) {
     return str.trim().replaceAll("\n", "").replaceAll("\t", "").replaceAll(" ", "_");
+}
+
+/**
+ * Calculate summatory of column widths
+ * @param state 
+ * @returns 
+ */
+export function getTotalWidth(state: ColumnWidthState): number {
+    let totalWidth: number = 0;
+    Object.keys(state.widthRecord).forEach((key) => {
+        totalWidth += state.widthRecord[key];
+    });
+    return totalWidth;
 }

styles.css

@@ -54,7 +54,7 @@
   transform: rotate(180deg);
 }
 
-.form-input {
+.database-plugin__form-input {
   padding: 0.375rem;
   background-color: var(--background-primary);
   border: none;
@@ -63,11 +63,20 @@
   color: var(--text-normal);
 }
 
-.form-input:focus {
+.database-plugin__form-input:focus {
   outline: none;
   box-shadow: 0 0 1px 2px var(--background-modifier-border);
 }
 
+.database-plugin__invalid-form{
+  padding: 0.375rem;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  color: var(--text-error);
+  background-color: var(--background-modifier-error);
+}
+
 .is-fullwidth {
   width: 100%;
 }