Fix issues with merging inline and file metadata in table view

mgmeyers · May 1, 2024 · fac03e1 · fac03e1
1 parent 09b500c
commit fac03e1
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 99 deletions.
diff --git a/src/KanbanView.tsx b/src/KanbanView.tsx
@@ -335,7 +335,7 @@ export class KanbanView extends TextFileView implements HoverParent {
   }
 
   async initHeaderButtons() {
-    await new Promise((res) => setTimeout(res));
+    await new Promise((res) => activeWindow.setTimeout(res));
     if (Platform.isPhone) return;
     const stateManager = this.plugin.getStateManager(this.file);
 

diff --git a/src/Settings.ts b/src/Settings.ts
@@ -36,6 +36,7 @@ import { frontmatterKey } from './parsers/common';
 import {
   createSearchSelect,
   defaultDateTrigger,
+  defaultMetadataPosition,
   defaultTimeTrigger,
   getListOptions,
 } from './settingHelpers';
@@ -60,15 +61,17 @@ export interface KanbanSettings {
   'date-picker-week-start'?: number;
   'date-time-display-format'?: string;
   'date-trigger'?: string;
+  'full-list-lane-width'?: boolean;
   'hide-card-count'?: boolean;
   'inline-metadata-position'?: 'body' | 'footer' | 'metadata-table';
-  'tag-action'?: 'kanban' | 'obsidian';
   'lane-width'?: number;
-  'full-list-lane-width'?: boolean;
   'link-date-to-daily-note'?: boolean;
   'list-collapse'?: boolean[];
   'max-archive-size'?: number;
   'metadata-keys'?: DataKey[];
+  'move-dates'?: boolean;
+  'move-tags'?: boolean;
+  'move-task-metadata'?: boolean;
   'new-card-insertion-method'?: 'prepend' | 'prepend-compact' | 'append';
   'new-line-trigger'?: 'enter' | 'shift-enter';
   'new-note-folder'?: string;
@@ -79,17 +82,14 @@ export interface KanbanSettings {
   'show-checkboxes'?: boolean;
   'show-relative-date'?: boolean;
   'show-search'?: boolean;
-  'show-view-as-markdown'?: boolean;
   'show-set-view'?: boolean;
+  'show-view-as-markdown'?: boolean;
   'table-sizing'?: Record<string, number>;
-  'tag-sort'?: TagSort[];
+  'tag-action'?: 'kanban' | 'obsidian';
   'tag-colors'?: TagColor[];
+  'tag-sort'?: TagSort[];
   'time-format'?: string;
   'time-trigger'?: string;
-
-  'move-dates'?: boolean;
-  'move-tags'?: boolean;
-  'move-task-metadata'?: boolean;
 }
 
 export interface KanbanViewSettings {
@@ -177,7 +177,7 @@ export class SettingsManager {
     this.applyDebounceTimer = this.win.setTimeout(() => {
       this.settings = update(this.settings, spec);
       this.config.onSettingsChange(this.settings);
-    }, 200);
+    }, 1000);
   }
 
   getSetting(key: keyof KanbanSettings, local: boolean) {
@@ -1177,7 +1177,9 @@ export class SettingsManager {
 
           const [value, globalValue] = this.getSetting('inline-metadata-position', local);
 
-          dropdown.setValue(value?.toString() || globalValue?.toString() || 'body');
+          dropdown.setValue(
+            value?.toString() || globalValue?.toString() || defaultMetadataPosition
+          );
           dropdown.onChange((value: 'body' | 'footer' | 'metadata-table') => {
             if (value) {
               this.applySettingsUpdate({
@@ -1196,7 +1198,7 @@ export class SettingsManager {
             .setTooltip(t('Reset to default'))
             .onClick(() => {
               const [, globalValue] = this.getSetting('inline-metadata-position', local);
-              input.setValue((globalValue as string) || 'body');
+              input.setValue((globalValue as string) || defaultMetadataPosition);
 
               this.applySettingsUpdate({
                 $unset: ['inline-metadata-position'],

diff --git a/src/components/Item/InlineMetadata.tsx b/src/components/Item/InlineMetadata.tsx
@@ -21,38 +21,45 @@ interface InlineMetadataProps {
 export function InlineMetadata({ item, stateManager }: InlineMetadataProps) {
   const search = useContext(SearchContext);
   const metaKeys = stateManager.getSetting('metadata-keys');
-  const displayMetadataInFooter = stateManager.useSetting('inline-metadata-position') === 'footer';
-  const moveTaskMetadata = stateManager.useSetting('move-task-metadata');
+  const showInlineMetadata = stateManager.useSetting('inline-metadata-position') === 'footer';
+  const showTaskMetadata = stateManager.useSetting('move-task-metadata');
   const { inlineMetadata } = item.data.metadata;
 
-  if (!inlineMetadata || (displayMetadataInFooter && !moveTaskMetadata)) return null;
+  if (!inlineMetadata || (!showInlineMetadata && !showTaskMetadata)) return null;
 
   const dataview = getDataviewPlugin();
 
   return (
     <span className={c('item-task-metadata')}>
       {inlineMetadata.map((m, i) => {
         const data = parseMetadataWithOptions(m, metaKeys);
-        const { metadataKey: key, value } = data;
+        const { metadataKey: key, value, label: explicitLabel } = data;
         const isTaskMetadata = taskFields.has(key);
-        if (!moveTaskMetadata && isTaskMetadata) return null;
-        if (!displayMetadataInFooter && !isTaskMetadata) return null;
+
+        if (!showTaskMetadata && isTaskMetadata) return null;
+        if (!showInlineMetadata && !isTaskMetadata) return null;
 
         const isEmoji = m.wrapping === 'emoji-shorthand';
         const val = dataview?.api?.parse(value) ?? value;
         const isEmojiPriority = isEmoji && key === 'priority';
         const isDate = !!val?.ts;
+        const classNameSlug = key.replace(/[^a-zA-Z0-9_]/g, '-');
+
+        let label = '';
 
-        let label = isEmoji ? lableToIcon(key, value) : lableToName(key);
-        const slug = key.replace(/[^a-zA-Z0-9_]/g, '-');
+        if (explicitLabel && !isTaskMetadata) {
+          label = explicitLabel;
+        } else {
+          label = isEmoji ? lableToIcon(key, value) : lableToName(key);
+        }
 
         if (!isEmoji) label += ': ';
 
         return (
           <span
             className={classcat([
               c('item-task-inline-metadata-item'),
-              c(`inline-metadata__${slug}`),
+              c(`inline-metadata__${classNameSlug}`),
               {
                 'is-task-metadata': isTaskMetadata,
                 'is-emoji': isEmoji,

diff --git a/src/components/Item/Item.tsx b/src/components/Item/Item.tsx
@@ -107,9 +107,6 @@ const ItemInner = memo(function ItemInner({
     return {};
   }, [editState]);
 
-  const inlineMetadataPosition = stateManager.getSetting('inline-metadata-position');
-  const metadataKeys = stateManager.getSetting('metadata-keys');
-
   return (
     <div
       // eslint-disable-next-line react/no-unknown-property
@@ -135,12 +132,7 @@ const ItemInner = memo(function ItemInner({
         />
         <ItemMenuButton editState={editState} setEditState={setEditState} showMenu={showItemMenu} />
       </div>
-      <ItemMetadata
-        searchQuery={isMatch ? searchQuery : undefined}
-        item={item}
-        mergeInlineMetadata={inlineMetadataPosition === 'metadata-table'}
-        metadataKeys={metadataKeys}
-      />
+      <ItemMetadata searchQuery={isMatch ? searchQuery : undefined} item={item} />
     </div>
   );
 });

diff --git a/src/components/Item/ItemContent.tsx b/src/components/Item/ItemContent.tsx
@@ -120,20 +120,10 @@ function checkCheckbox(stateManager: StateManager, title: string, checkboxIndex:
   return results.join('\n');
 }
 
-export function Tags({
-  tags,
-  searchQuery,
-  isDisplay = true,
-}: {
-  tags?: string[];
-  searchQuery?: string;
-  isDisplay?: boolean;
-}) {
+export function Tags({ tags, searchQuery }: { tags?: string[]; searchQuery?: string }) {
   const { stateManager, getTagColor } = useContext(KanbanContext);
   const search = useContext(SearchContext);
 
-  const moveTags = isDisplay && stateManager.useSetting('move-tags');
-  if (!moveTags || !tags?.length) return null;
   return (
     <div className={c('item-tags')}>
       {tags.map((tag, i) => {

diff --git a/src/components/Item/MetadataTable.tsx b/src/components/Item/MetadataTable.tsx
@@ -1,7 +1,7 @@
 import classcat from 'classcat';
 import { TFile, moment } from 'obsidian';
 import { ComponentChild } from 'preact';
-import { memo, useContext } from 'preact/compat';
+import { memo, useContext, useMemo } from 'preact/compat';
 import { KanbanView } from 'src/KanbanView';
 import { StateManager } from 'src/StateManager';
 import { InlineField, taskFields } from 'src/parsers/helpers/inlineMetadata';
@@ -14,8 +14,6 @@ import { Tags } from './ItemContent';
 
 export interface ItemMetadataProps {
   item: Item;
-  mergeInlineMetadata?: boolean;
-  metadataKeys?: DataKey[];
   searchQuery?: string;
 }
 
@@ -34,33 +32,38 @@ function mergeMetadata(
   }, fileMetadata || {});
 }
 
-export function ItemMetadata({
-  item,
-  mergeInlineMetadata,
-  metadataKeys,
-  searchQuery,
-}: ItemMetadataProps) {
-  if (
-    !item.data.metadata.fileMetadata &&
-    (!item.data.metadata.inlineMetadata?.length || !mergeInlineMetadata)
-  )
+export function ItemMetadata({ item, searchQuery }: ItemMetadataProps) {
+  const { stateManager } = useContext(KanbanContext);
+  const mergeInlineMetadata =
+    stateManager.useSetting('inline-metadata-position') === 'metadata-table';
+  const metadataKeys = stateManager.useSetting('metadata-keys');
+
+  const { fileMetadata, fileMetadataOrder, inlineMetadata } = item.data.metadata;
+
+  if (!fileMetadata && (!mergeInlineMetadata || !inlineMetadata?.length)) {
     return null;
+  }
 
-  const metadata = mergeInlineMetadata
-    ? mergeMetadata(
-        item.data.metadata.fileMetadata,
-        item.data.metadata.inlineMetadata,
-        metadataKeys || []
-      )
-    : item.data.metadata.fileMetadata;
+  const metadata = useMemo(() => {
+    return mergeInlineMetadata
+      ? mergeMetadata(fileMetadata, inlineMetadata, metadataKeys || [])
+      : fileMetadata;
+  }, [fileMetadata, inlineMetadata, metadataKeys]);
+
+  const order = useMemo(() => {
+    const metadataOrder = new Set(fileMetadataOrder || []);
+    if (mergeInlineMetadata && inlineMetadata?.length) {
+      inlineMetadata.forEach((m) => {
+        if (!metadataOrder.has(m.key)) metadataOrder.add(m.key);
+      });
+    }
+
+    return Array.from(metadataOrder);
+  }, [fileMetadataOrder, mergeInlineMetadata, inlineMetadata]);
 
   return (
     <div className={c('item-metadata-wrapper')}>
-      <MetadataTable
-        metadata={metadata}
-        order={item.data.metadata.fileMetadataOrder}
-        searchQuery={searchQuery}
-      />
+      <MetadataTable metadata={metadata} order={order} searchQuery={searchQuery} />
     </div>
   );
 }
@@ -208,11 +211,8 @@ export const MetadataTable = memo(function MetadataTable({
 }: MetadataTableProps) {
   const { stateManager } = useContext(KanbanContext);
 
-  if (!order || order.length) {
-    if (!metadata) return null;
-
-    order = Object.keys(metadata);
-  }
+  if (!metadata) return null;
+  if (!order?.length) order = Object.keys(metadata);
 
   return (
     <table className={c('meta-table')}>
@@ -241,7 +241,7 @@ export const MetadataTable = memo(function MetadataTable({
                 data-value={pageDataToString(data, stateManager)}
               >
                 {k === 'tags' ? (
-                  <Tags searchQuery={searchQuery} tags={data.value as string[]} isDisplay={false} />
+                  <Tags searchQuery={searchQuery} tags={data.value as string[]} />
                 ) : (
                   <MetadataValue data={data} searchQuery={searchQuery} />
                 )}