Merge branch '378-fr-column-option-to-wrap-content'

RafaelGB · RafaelGB · commit 0ef9b24ede63 · 2022-09-25T16:47:35.000+02:00
diff --git a/src/cdm/FolderModel.ts b/src/cdm/FolderModel.ts
@@ -40,6 +40,7 @@ export interface ConfigColumn {
     media_height: number;
     isInline: boolean;
     content_alignment?: string;
+    wrap_content?: boolean;
     task_hide_completed?: boolean;
     formula_query?: string;
     persist_formula?: boolean;
diff --git a/src/components/cellTypes/FormulaCell.tsx b/src/components/cellTypes/FormulaCell.tsx
@@ -46,9 +46,7 @@ const FormulaCell = (mdProps: CellComponentProps) => {
   return (
     <span
       ref={formulaRef}
-      className={`${c(
-        "md_cell " + getAlignmentClassname(tableColumn.config.content_alignment)
-      )}`}
+      className={`${c("md_cell " + getAlignmentClassname(tableColumn.config))}`}
       key={`formula_${cell.id}`}
     />
   );
diff --git a/src/components/cellTypes/NumberCell.tsx b/src/components/cellTypes/NumberCell.tsx
@@ -70,11 +70,11 @@ const NumberCell = (props: CellComponentProps) => {
       onChange={handleOnChange}
       onKeyDown={handleKeyDown}
       onBlur={handleOnBlur}
-      className={c(getAlignmentClassname(tableColumn.config.content_alignment))}
+      className={c(getAlignmentClassname(tableColumn.config))}
     />
   ) : (
     <span
-      className={c(getAlignmentClassname(tableColumn.config.content_alignment))}
+      className={c(getAlignmentClassname(tableColumn.config))}
       onClick={handleEditableOnclick}
       style={{ width: column.getSize() }}
     >
diff --git a/src/components/cellTypes/TextCell.tsx b/src/components/cellTypes/TextCell.tsx
@@ -73,7 +73,7 @@ const TextCell = (props: CellComponentProps) => {
       ref={containerCellRef}
       onClick={handleEditableOnclick}
       style={{ width: column.getSize() }}
-      className={c(getAlignmentClassname(tableColumn.config.content_alignment))}
+      className={c(getAlignmentClassname(tableColumn.config))}
     />
   );
 };
diff --git a/src/components/modals/columnSettings/ColumnSections.ts b/src/components/modals/columnSettings/ColumnSections.ts
@@ -7,7 +7,8 @@ import { SelectedColumnOptionsHandler } from "components/modals/columnSettings/h
 import { HideCompletedTaskToggleHandler } from "components/modals/columnSettings/handlers/tasks/HideCompletedTaskToggleHandler";
 import { LinkAliasToggleHandler } from "components/modals/columnSettings/handlers/media/LinkAliasToggleHandler";
 import { FormulaInputHandler } from "components/modals/columnSettings/handlers/automations/FormulaInputHandler";
-import { AlignmentSelectorHandler } from "components/modals/columnSettings/handlers/AlignmentSelectorHandler";
+import { AlignmentSelectorHandler } from "components/modals/columnSettings/handlers/styles/AlignmentSelectorHandler";
+import { ToggleWrapContentHandler } from "components/modals/columnSettings/handlers/styles/ToggleWrapContentHandler";
 import { InputType } from "helpers/Constants";
 import { AbstractChain } from "patterns/AbstractFactoryChain";
 import { AbstractHandler } from "patterns/AbstractHandler";
@@ -31,6 +32,7 @@ class StyleSetttingsSection extends AbstractChain<ColumnSettingsHandlerResponse>
             case InputType.NUMBER:
             case InputType.FORMULA:
                 particularHandlers.push(new AlignmentSelectorHandler());
+                particularHandlers.push(new ToggleWrapContentHandler());
                 break;
             default:
             // do nothing
diff --git a/src/components/modals/columnSettings/handlers/styles/AlignmentSelectorHandler.tsx b/src/components/modals/columnSettings/handlers/styles/AlignmentSelectorHandler.tsx
diff --git a/src/components/modals/columnSettings/handlers/styles/ToggleWrapContentHandler.ts b/src/components/modals/columnSettings/handlers/styles/ToggleWrapContentHandler.ts
@@ -0,0 +1,28 @@
+import { add_toggle } from "settings/SettingsComponents";
+import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
+import { AbstractHandlerClass } from "patterns/AbstractHandler";
+export class ToggleWrapContentHandler extends AbstractHandlerClass<ColumnSettingsHandlerResponse> {
+  settingTitle: string = "Wrap content";
+  handle(
+    columnHandlerResponse: ColumnSettingsHandlerResponse
+  ): ColumnSettingsHandlerResponse {
+    const { column, containerEl, columnSettingsManager } =
+      columnHandlerResponse;
+    const { view } = columnSettingsManager.modal;
+    const wrap_content_togle_promise = async (value: boolean): Promise<void> => {
+      // Persist value
+      await view.diskConfig.updateColumnConfig(column.key, {
+        wrap_content: value,
+      });
+      columnSettingsManager.modal.enableReset = true;
+    };
+    add_toggle(
+      containerEl,
+      this.settingTitle,
+      "Wrap content of the cells in the column",
+      column.config.wrap_content,
+      wrap_content_togle_promise
+    );
+    return this.goNext(columnHandlerResponse);
+  }
+}
diff --git a/src/components/portals/SelectPortal.tsx b/src/components/portals/SelectPortal.tsx
@@ -94,7 +94,9 @@ const SelectPortal = (popperProps: CellComponentProps) => {
           menuPortalTarget={activeDocument.body}
           menuPlacement="auto"
           menuShouldBlockScroll={true}
-          className="react-select-container"
+          className={`react-select-container ${c(
+            "tags-container text-align-center"
+          )}`}
           classNamePrefix="react-select"
           key={`${tableColumn.key}-select-open`}
         />
@@ -109,7 +111,7 @@ const SelectPortal = (popperProps: CellComponentProps) => {
       ) : (
         /* Current value of the select */
         <div
-          className="cell-padding d-flex cursor-default align-items-center flex-1"
+          className={`${c("text-align-center")}`}
           onClick={() => setShowSelect(true)}
           style={{ width: column.getSize() }}
         >
diff --git a/src/components/portals/TagsPortal.tsx b/src/components/portals/TagsPortal.tsx
@@ -107,10 +107,12 @@ const TagsPortal = (tagsProps: CellComponentProps) => {
           onBlur={() => setShowSelectTags(false)}
           onChange={handleOnChange}
           menuPortalTarget={activeDocument.body}
+          className={`react-select-container ${c(
+            "tags-container text-align-center"
+          )}`}
+          classNamePrefix="react-select"
           menuPlacement="auto"
           menuShouldBlockScroll={true}
-          className="react-select-container"
-          classNamePrefix="react-select"
         />
       </div>
     );
@@ -121,9 +123,7 @@ const TagsPortal = (tagsProps: CellComponentProps) => {
         ? TagsForm()
         : tagsState && (
             <div
-              className={
-                c("tags-container") + " cell-padding d-flex flex-wrap-wrap"
-              }
+              className={c("tags-container text-align-center")}
               onClick={() => setShowSelectTags(true)}
               style={{ width: column.getSize() }}
             >
diff --git a/src/components/styles/TextAlignmentSelector.tsx b/src/components/styles/TextAlignmentSelector.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
 import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
 import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
+import FormatAlignJustifyIcon from "@mui/icons-material/FormatAlignJustify";
 import Stack from "@mui/material/Stack";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
@@ -71,6 +72,18 @@ export default function TextAlignmentSelector(props: TextAlignmentProps) {
         >
           <FormatAlignRightIcon />
         </ToggleButton>
+        <ToggleButton
+          value={COLUMN_ALIGNMENT_OPTIONS.JUSTIFY}
+          aria-label="justified"
+          sx={{
+            color: StyleVariables.TEXT_NORMAL,
+            "&.Mui-selected, &.Mui-selected:hover": {
+              color: StyleVariables.TEXT_ACCENT,
+            },
+          }}
+        >
+          <FormatAlignJustifyIcon />
+        </ToggleButton>
       </ToggleButtonGroup>
     </Stack>
   );
diff --git a/src/helpers/Constants.ts b/src/helpers/Constants.ts
@@ -74,6 +74,9 @@ export const COLUMN_ALIGNMENT_OPTIONS = Object.freeze({
   LEFT: 'text-align-left',
   CENTER: 'text-align-center',
   RIGHT: 'text-align-right',
+  JUSTIFY: 'text-align-justify',
+  NOWRAP: 'text-nowrap',
+  WRAP: 'text-wrap',
 });
 
 export const DEFAULT_COLUMN_CONFIG: ConfigColumn = Object.freeze({
diff --git a/src/helpers/StylesHelper.ts b/src/helpers/StylesHelper.ts
@@ -1,3 +1,4 @@
+import { ConfigColumn } from "cdm/FolderModel";
 import { COLUMN_ALIGNMENT_OPTIONS, DatabaseCore, MetadataLabels } from "helpers/Constants";
 
 /**
@@ -41,6 +42,17 @@ export function getLabelHeader(input: string) {
     return labelCandidate === undefined ? input : labelCandidate[1];
 }
 
-export function getAlignmentClassname(alignment: string) {
-    return alignment === undefined ? COLUMN_ALIGNMENT_OPTIONS.LEFT : alignment;
+export function getAlignmentClassname(configColumn: ConfigColumn) {
+    const classes: string[] = [];
+    classes.push(
+        configColumn.content_alignment === undefined ?
+            COLUMN_ALIGNMENT_OPTIONS.LEFT :
+            configColumn.content_alignment
+    );
+    classes.push(
+        configColumn.wrap_content ?
+            COLUMN_ALIGNMENT_OPTIONS.WRAP :
+            COLUMN_ALIGNMENT_OPTIONS.NOWRAP
+    );
+    return classes.join(' ');
 }
diff --git a/src/parsers/RowDatabaseFieldsToFile.ts b/src/parsers/RowDatabaseFieldsToFile.ts
@@ -1,20 +1,17 @@
 import { RowDatabaseFields } from "cdm/DatabaseModel";
 import { LocalSettings } from "cdm/SettingsModel";
 import { InputType } from "helpers/Constants";
-import { Literal } from "obsidian-dataview/lib/data-model/value";
+import { stringifyYaml } from "obsidian";
 import { DataviewService } from "services/DataviewService";
-export const parseFrontmatterFieldsToString = (databaseFields: RowDatabaseFields, localSettings: LocalSettings, deletedColumn?: string): string => {
+export const parseFrontmatterFieldsToString = (databaseFields: RowDatabaseFields, deletedColumn?: string): string => {
     const frontmatterFields = databaseFields.frontmatter;
-    let array: string[] = [];
-    Object.keys(frontmatterFields).forEach(key => {
-        if (key !== deletedColumn) {
-            array.push(...parseLiteralToString(frontmatterFields[key], 0, localSettings, key));
-        }
-    });
-    if (array.length > 0) {
-        array = [`---`, ...array, `---`];
+    delete frontmatterFields[deletedColumn];
+    let stringify: string = "";
+    if (Object.keys(frontmatterFields).length > 0) {
+        const stringifiedFrontmatter = stringifyYaml(frontmatterFields);
+        stringify = `---\n${stringifiedFrontmatter}---`;
     }
-    return array.join('\n');
+    return stringify;
 }
 
 export const parseInlineFieldsToString = (inlineFields: RowDatabaseFields): string => {
@@ -25,24 +22,6 @@ export const parseInlineFieldsToString = (inlineFields: RowDatabaseFields): stri
     return array.join('\n');
 }
 
-function parseLiteralToString(literal: Literal, level: number, localSettings: LocalSettings, key?: string): string[] {
-    const literalBlock: string[] = [];
-    literal = DataviewService.parseDataArray(literal);
-    // Manage Arrays
-    if (DataviewService.getDataviewAPI().value.isArray(literal)) {
-        literalBlock.push(`${" ".repeat(level)}${key}:`);
-        literal.forEach((literal, index) => {
-            literalBlock.push(...parseLiteralToString(literal, level + 1, localSettings));
-        });
-    }
-    else if (key) {
-        literalBlock.push(`${" ".repeat(level)}${key}: ${DataviewService.parseLiteral(literal, InputType.MARKDOWN, localSettings)}`);
-    } else {
-        literalBlock.push(`${" ".repeat(level)}- ${DataviewService.parseLiteral(literal, InputType.MARKDOWN, localSettings)}`);
-    }
-    return literalBlock;
-}
-
 export function parseValuetoSanitizeYamlValue(value: string, localSettings: LocalSettings): string {
     return DataviewService.parseLiteral(value, InputType.MARKDOWN, localSettings).toString();
 }
diff --git a/src/services/EditEngineService.ts b/src/services/EditEngineService.ts
@@ -83,7 +83,7 @@ class EditEngine {
 
         async function persistFrontmatter(deletedColumn?: string): Promise<void> {
             const frontmatterGroupRegex = contentHasFrontmatter ? /^---[\s\S]+?---/g : /(^[\s\S]*$)/g;
-            const frontmatterFieldsText = parseFrontmatterFieldsToString(rowFields, ddbbConfig, deletedColumn);
+            const frontmatterFieldsText = parseFrontmatterFieldsToString(rowFields, deletedColumn);
             const noteObject = {
                 action: 'replace',
                 file: file,
diff --git a/src/services/FileManagerService.ts b/src/services/FileManagerService.ts
@@ -24,7 +24,7 @@ class VaultManager {
       targetFolder,
       filename ?? "Untitled"
     );
-    let content = databasefields ? parseFrontmatterFieldsToString(databasefields, localSettings).concat("\n").concat(parseInlineFieldsToString(databasefields)) : "";
+    let content = databasefields ? parseFrontmatterFieldsToString(databasefields).concat("\n").concat(parseInlineFieldsToString(databasefields)) : "";
 
     // Custom content by source
     switch (localSettings.source_data) {
diff --git a/styles.css b/styles.css
@@ -484,7 +484,9 @@ div.database-plugin__checkbox {
 .database-plugin__tags-container {
   gap: 0.3rem;
 }
-
+/************************************************************
+ *  CELL CONTENT STYLES
+ ************************************************************/
 .database-plugin__text-align-right {
   display: flex;
   justify-content: flex-end;
@@ -503,35 +505,24 @@ div.database-plugin__checkbox {
   text-align: left;
 }
 
-.cell-padding {
-  padding: 0.5rem;
-}
-
-.d-flex {
+.database-plugin__text-align-justify {
   display: flex;
+  text-align: justify;
 }
 
-.cursor-default {
-  cursor: default;
-}
-
-.align-items-center {
-  align-items: center;
+.database-plugin__text-wrap {
+  white-space: normal;
 }
 
-.flex-wrap-wrap {
-  flex-wrap: wrap;
+.database-plugin__text-nowrap {
+  white-space: nowrap;
 }
 
 .menu.database-plugin__popper {
   position: relative;
   padding: 0;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .icon-margin {
   margin-right: 4px;
 }
@@ -544,10 +535,6 @@ div.database-plugin__checkbox {
   font-size: 0.75rem;
 }
 
-.flex-1 {
-  flex: 1;
-}
-
 /**
 *  Database Styles
 */
