Merge branch '48-fr-create-new-filerow-from-template'

Author: RafaelGB

docs/docs/changelog.md

@@ -1,6 +1,7 @@
 ## 1.8.0
 ### Shiny new things
 - New source option: query. Use your own dataview query as source of the database. Start the query with the `FROM` term, since the plugin will autocomplete the beginning with `TABLE` and the column fields[ISSUE#156](https://github.com/RafaelGB/obsidian-db-folder/issues/156)
+- Templates for new rows added! now you can choose a template folder on settings menu, then you can choose your template file easily near of the add row button[ISSUE#48](https://github.com/RafaelGB/obsidian-db-folder/issues/48)
 ### Improved
 - Inline fields now supports render embed images with ![[note]] syntax. [ISSUE#136](https://github.com/RafaelGB/obsidian-db-folder/issues/136)
 ### No longer broken

src/Settings.ts

@@ -12,6 +12,7 @@ import { media_settings_section } from "settings/MediaSection";
 import { source_settings_section } from "settings/SourceSection";
 import { DatabaseSettings } from "cdm/SettingsModel";
 import editing_engine_settings_section from "settings/EditingEngineSection";
+import rows_settings_section from "settings/RowsSection";
 
 export type SettingRetriever = <K extends keyof DatabaseSettings>(
   key: K,
@@ -81,6 +82,8 @@ export class SettingsManager {
     }
     /** Columns section */
     columns_settings_section.run(settingHandlerResponse);
+    /** Rows section */
+    rows_settings_section.run(settingHandlerResponse);
     /** Editing engine section */
     editing_engine_settings_section.run(settingHandlerResponse);
     /** Media section */

src/cdm/FolderModel.ts

@@ -138,6 +138,11 @@ export type RelationshipProps = {
     backgroundColor: string
 }
 
+export type RowTemplateOption = {
+    label: string,
+    value: string
+}
+
 export type NoteContentAction = {
     file: TFile,
     action: string,

src/cdm/SettingsModel.ts

@@ -23,6 +23,8 @@ export interface LocalSettings {
     source_data: string;
     source_form_result: string;
     frontmatter_quote_wrap: boolean;
+    row_templates_folder: string;
+    current_row_template: string;
 }
 
 export interface DatabaseSettings {

src/components/Table.tsx

@@ -10,7 +10,12 @@ import {
   Column,
 } from "react-table";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
-import { TableDataType, RowDataType, TableColumn } from "cdm/FolderModel";
+import {
+  TableDataType,
+  RowDataType,
+  TableColumn,
+  RowTemplateOption,
+} from "cdm/FolderModel";
 import { DatabaseView } from "DatabaseView";
 import StateManager from "StateManager";
 import { getNormalizedPath } from "helpers/VaultManagement";
@@ -28,7 +33,10 @@ import { c, getTotalWidth } from "helpers/StylesHelper";
 import { HeaderNavBar } from "components/NavBar";
 import { getColumnsWidthStyle } from "components/styles/ColumnWidthStyle";
 import { HeaderContext } from "components/contexts/HeaderContext";
-import { getDndListStyle, getDndItemStyle } from "./styles/DnDStyle";
+import { getDndListStyle, getDndItemStyle } from "components/styles/DnDStyle";
+import CustomTemplateSelectorStyles from "components/styles/RowTemplateStyles";
+import Select, { ActionMeta, OnChangeValue } from "react-select";
+import { get_tfiles_from_folder } from "helpers/FileManagement";
 
 const defaultColumn = {
   minWidth: 25,
@@ -229,7 +237,32 @@ export function Table(tableData: TableDataType) {
     globalFilter: (state as any).globalFilter,
     setGlobalFilter: setGlobalFilter,
   };
+  // Manage Templates
+  const [rowTemplateState, setRowTemplateState] = React.useState(
+    view.diskConfig.yaml.config.current_row_template
+  );
+  const rowTemplatesOptions = get_tfiles_from_folder(
+    view.diskConfig.yaml.config.row_templates_folder
+  ).map((tfile) => {
+    return {
+      value: tfile.path,
+      label: tfile.path,
+    };
+  });
+
+  function handleChangeRowTemplate(
+    newValue: OnChangeValue<RowTemplateOption, false>,
+    actionMeta: ActionMeta<RowTemplateOption>
+  ) {
+    const settingsValue = !!newValue ? newValue.value : "";
+    dataDispatch({
+      type: ActionTypes.CHANGE_ROW_TEMPLATE,
+      template: settingsValue,
+    });
+    setRowTemplateState(settingsValue);
+  }
   LOGGER.debug(`<= Table`);
+
   return (
     <>
       <div
@@ -445,6 +478,23 @@ export function Table(tableData: TableDataType) {
                 </span>
                 New
               </div>
+              <div className={`${c("padding-left")}`}>
+                <Select
+                  styles={CustomTemplateSelectorStyles}
+                  options={rowTemplatesOptions}
+                  value={{
+                    label: rowTemplateState,
+                    value: rowTemplateState,
+                  }}
+                  isClearable={true}
+                  isMulti={false}
+                  onChange={handleChangeRowTemplate}
+                  defaultValue={{ label: "Choose a Template", value: "None" }}
+                  menuPortalTarget={document.body}
+                  menuShouldBlockScroll={true}
+                  isSearchable
+                />
+              </div>
             </div>
           </div>
         </div>

src/components/portals/TagsPortal.tsx

@@ -2,7 +2,7 @@ import { RowSelectOption, TagsProps } from "cdm/ComponentsModel";
 import Relationship from "components/RelationShip";
 import CustomTagsStyles from "components/styles/TagsStyles";
 import CreatableSelect from "react-select/creatable";
-import { grey, randomColor } from "helpers/Colors";
+import { randomColor } from "helpers/Colors";
 import React, { useState } from "react";
 import { ActionMeta, OnChangeValue } from "react-select";
 import { c } from "helpers/StylesHelper";

src/components/reducers/DatabaseDispatch.tsx

@@ -26,6 +26,7 @@ import { obtainUniqueOptionValues } from "helpers/SelectHelper";
 import { Literal } from "obsidian-dataview/lib/data-model/value";
 import { DateTime } from "luxon";
 import { RowSelectOption } from "cdm/ComponentsModel";
+import { viewport } from "@popperjs/core";
 
 export function databaseReducer(state: TableDataType, action: ActionType) {
   LOGGER.debug(`<=>databaseReducer action: ${action.type}`, action);
@@ -80,7 +81,8 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
       VaultManagerDB.create_markdown_file(
         state.view.file.parent,
         action.filename,
-        rowRecord
+        rowRecord,
+        state.view.diskConfig.yaml.config
       );
       const metadata: Record<string, Literal> = {};
       metadata[MetadataColumns.CREATED] = DateTime.now();
@@ -106,6 +108,27 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
           rows: { $push: [row] },
         },
       });
+    /**
+     * Add new row into table
+     */
+    case ActionTypes.CHANGE_ROW_TEMPLATE:
+      state.view.diskConfig.updateConfig(
+        "current_row_template",
+        action.template
+      );
+      return update(state, {
+        view: {
+          diskConfig: {
+            yaml: {
+              config: {
+                current_row_template: {
+                  $set: action.template,
+                },
+              },
+            },
+          },
+        },
+      });
     /**
      * Modify column label of its header.
      * Update key of column in all rows

src/components/styles/RowTemplateStyles.ts

@@ -0,0 +1,14 @@
+import { GroupBase, StylesConfig } from "react-select";
+
+const CustomTemplateSelectorStyles: StylesConfig<any, true, GroupBase<any>> = {
+    option: (styles, { data, isDisabled, isFocused, isSelected }) => {
+        return {
+            ...styles,
+            fontSize: '12px',
+            textAlign: 'left',
+            width: 'auto',
+        }
+    },
+}
+
+export default CustomTemplateSelectorStyles;

src/errors/HelperError.ts

@@ -0,0 +1,10 @@
+import { DbFolderError } from 'errors/AbstractError';
+
+/**
+ * Custom error for parser yaml of dbfolder
+ */
+export class HelperError extends DbFolderError {
+    constructor(message: string) {
+        super(message, {});
+    }
+}

src/helpers/Constants.ts

@@ -6,6 +6,7 @@ import { DatabaseSettings } from "cdm/SettingsModel";
 export const ActionTypes = Object.freeze({
   ADD_OPTION_TO_COLUMN: 'add_option_to_column',
   ADD_ROW: 'add_row',
+  CHANGE_ROW_TEMPLATE: 'change_row_template',
   UPDATE_COLUMN_TYPE: 'update_column_type',
   UPDATE_COLUMN_LABEL: 'update_column_label',
   UPDATE_CELL: 'update_cell',
@@ -137,7 +138,8 @@ export const TableColumnsTemplate: Partial<TableColumn> =
 }
 
 export const DatabaseCore = Object.freeze({
-  FRONTMATTER_KEY: 'database-plugin'
+  FRONTMATTER_KEY: 'database-plugin',
+  DATAVIEW_FILE: 'file',
 });
 
 export const DatabaseFrontmatterOptions = Object.freeze({
@@ -277,6 +279,8 @@ export const DEFAULT_SETTINGS: DatabaseSettings = {
     show_metadata_tasks: false,
     source_data: SourceDataTypes.CURRENT_FOLDER,
     source_form_result: 'root',
-    frontmatter_quote_wrap: false
+    frontmatter_quote_wrap: false,
+    row_templates_folder: '/',
+    current_row_template: '',
   }
 };