Implemented Upstream Functionality

src/ReactApp.tsx

@@ -104,7 +104,7 @@ export default function ReactApp(settings: any) {
     const { isGamificationOn } = settings.settings;
 
     result = array.map((item, index) => 
-      <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }} key={ index } className={'item'} onClick={(event) => handleItemClick(event, item) }>
+      <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginLeft: 'clamp(5px, 5px, 10px)', marginRight: 'clamp(5px, 9px, 10px)' }} key={ index } className={'item'} onClick={(event) => handleItemClick(event, item) }>
         <p>{ item.name }</p>
         <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
           { item.impact ? <p style={ getImpactStyling(item.impact) }>{ item.impact.replace(' ', '-') } 👊</p> : null }
@@ -339,6 +339,7 @@ export default function ReactApp(settings: any) {
   function getValueFromStreamOrDateStr(text: string): any {
     let result: string | any;
     let secondHalf = text.split('::')[1].trim();
+    let streamArray, item, streamItems = [];
 
     if (text.includes('Date')) {
 
@@ -348,7 +349,14 @@ export default function ReactApp(settings: any) {
         result = secondHalf;
       }
     } else { // Upstream/Downstream
-      result = "";
+      if (secondHalf.length > 1){
+        streamArray = secondHalf.split(',');
+        while (streamArray.length > 0){
+          item = streamArray.shift();
+          streamItems.push(item);
+        }
+      }
+      result =  (secondHalf.length == 1) ? secondHalf : streamItems; 
     }
 
     return result;
@@ -424,7 +432,7 @@ export default function ReactApp(settings: any) {
         .setIcon("pencil")
         .onClick(async () => {
           //new Notice("Edit");
-          new ItemModal(this.app, dateFormat, 'EDIT', successPlanItem, async (result) => {
+          new ItemModal(this.app, dateFormat, successPlanItems, 'EDIT', successPlanItem, async (result) => {
             new Notice(`Updated File: ${result.type} - ${result.name}`);
             //console.log('Outputted SuccessPlanItem:', result);
             if (result.name_was_edited) {
@@ -561,7 +569,7 @@ export default function ReactApp(settings: any) {
       let list = generateList(getItemsOfGivenTypeAndStatus(activeTab, SECTIONS[i]));
 
       result.push(
-        <div key={ i } style={{ display: 'flex', flexDirection: 'column' }}>
+        <div key={ i } style={{ display: 'flex', flexDirection: 'column', color: 'var(--text-normal)', paddingLeft: 'clamp(15px, 0.5%, 50px)' }}>
           <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
               <h3 style={{ marginRight: 5, color: 'var(--h3-color, var(--text-title-h3, var(--text-normal)))', fontSize: 'clamp(16px, 1.25vw, 22px)' }}>{ SECTIONS[i].includes('To') ? SECTIONS[i].replace('To', 'to') : SECTIONS[i] }</h3>
               { list.length != 0 ? <p onClick={ () => handleSectionHideClick(lowercaseSection) }>{ getTabLedgerSectionHideValue(lowercaseSection) ? 'show' : 'hide' }</p> : null }
@@ -602,7 +610,7 @@ export default function ReactApp(settings: any) {
     let properties: string = "Type:: \#type/" + lowercaseAndReplaceSep(successPlanItem.type, ' ', '-') + "\n\n" + 
     "Description:: " + (isNotBlankOrUndefined(successPlanItem.description) ? successPlanItem.description : "") + "\n\n" +
     "Share with Family:: " + (isNotBlankOrUndefined(successPlanItem.share_with_family) ? ("\#share-with-family/" + (successPlanItem.share_with_family === 'True' ? 'true' : 'false')) : "") + "\n\n" +
-    "Upstream:: " + (isNotBlankOrUndefined(successPlanItem.upstream) ? ("[[" + successPlanItem.upstream + "]]") : "") + "\n\n" +
+    "Upstream:: " + (isNotBlankOrUndefined(successPlanItem.upstream) ? successPlanItem.upstream : "") + "\n\n" +
     "Downstream:: " + (isNotBlankOrUndefined(successPlanItem.downstream) ? ("[[" + successPlanItem.downstream + "]]") : "") + "\n\n" +
     "Impact:: " + (isNotBlankOrUndefined(successPlanItem.impact) ? ("\#impact/" + lowercaseAndReplaceSep(successPlanItem.impact, ' ', '-')) : "") + "\n\n" +
     "Status:: " + (isNotBlankOrUndefined(successPlanItem.status) ? ("\#status/" + lowercaseAndReplaceSep(successPlanItem.status, ' ', '-')) : "") + "\n\n" +
@@ -646,7 +654,7 @@ export default function ReactApp(settings: any) {
 
     const { dateFormat } = settings.settings;
 
-    new ItemModal(this.app, dateFormat, 'CREATE', defaultItem, async (result) => {
+    new ItemModal(this.app, dateFormat, successPlanItems, 'CREATE', defaultItem, async (result) => {
       new Notice(`New ${result.type} Created`);
       //console.log('Outputted SuccessPlanItem:', result); 
       await createSuccessPlanItem(result);

src/components/HorizontalTabs.tsx

@@ -9,7 +9,7 @@ export default function HorizontalTabs(Props: TabProps) {
 
     function getStyling(tab: string): any {
         return Props.activeTab == tab ?
-            { fontWeight: 'bold', color: '#7F6DF2' } : { fontWeight: 'normal', color: 'white' }
+            { fontWeight: 'bold', color: 'var(--h1-color, var(--text-title-h1, var(--text-normal,#7F6DF2)))' } : { fontWeight: 'normal', color: 'var(--text-normal)' }
     }
 
     return (

src/components/ItemModal.ts

@@ -9,11 +9,13 @@ export class ItemModal extends Modal {
   isValidName: boolean;
   dateFormat: string;
   originalName: boolean;
+  successPlanItems: any;
 
-  constructor(app: App, dateFormat: string, action: string, successPlanItem: any, onSubmit: (result: any) => void) {
+  constructor(app: App, dateFormat: string, successPlanItems: any, action: string, successPlanItem: any, onSubmit: (result: any) => void) {
     super(app);
     this.onSubmit = onSubmit;
     this.successPlanItem = successPlanItem;
+    this.successPlanItems = successPlanItems;
     this.action = action;
     this.isValidName = this.checkIfNameisValid(successPlanItem.name);
     this.dateFormat = dateFormat ? dateFormat : 'MM-DD-YYYY';
@@ -27,7 +29,26 @@ export class ItemModal extends Modal {
     return this.isValidName ? "" : "This is an invalid name. Name's can't include /, \\, :, or .";
   }
 
+
+  onLoadbyType() {
+    let upstreamitems = [];
+    let downstreamitems = [];
+
+    for (let i of this.successPlanItems){
+        if (this.successPlanItem.type == 'Task'){ (i.name.includes('Project')) ? upstreamitems.push(i.name) : ''; }
+        else if (this.successPlanItem.type == 'Project'){
+            (i.name.includes('Key Result')) ? upstreamitems.push(i.name) : (i.name.includes('Task')) ? downstreamitems.push(i.name) : '';
+        }
+        else if (this.successPlanItem.type == 'Key Result'){
+            (i.name.includes('Goal')) ? upstreamitems.push(i.name) : (i.name.includes('Project')) ? downstreamitems.push(i.name) : '';
+        }
+        else if (this.successPlanItem.type == 'Goal'){ (i.name.includes('Key Result')) ? downstreamitems.push(i.name) : ''; }
+    }
+    return [upstreamitems, downstreamitems];
+  }
+
   onOpen() {
+    let [upstream, downstream] = this.onLoadbyType();
     let { contentEl } = this;
     contentEl.createEl("h3", { text: this.action == 'EDIT' ? "Edit Item" : "Create Item", cls: "center_flex" });
     contentEl.createEl("p", { text: this.getErrorMessage(), cls: ["center_flex", "error_msg"] });
@@ -112,49 +133,66 @@ export class ItemModal extends Modal {
         );
     }
 
-    new Setting(contentEl)
-    .setName("Do Date")
-    .addMomentFormat((cb) =>
-        cb
-        .setDefaultFormat(this.dateFormat)
-        .setValue(this.successPlanItem.do_date != "" ? this.successPlanItem.do_date.format(this.dateFormat) : "")
-        .onChange(async (val) => {
-            this.successPlanItem.do_date = moment(val);
-        })
-    );
+    // Do Date Setting 
+    const doDate_setting_item = contentEl.createEl("div", {cls: "setting-item"});
+    const doDate_setting_item_info = contentEl.createEl("div", {cls: "setting-item-info"});
+    doDate_setting_item_info.append(contentEl.createEl("div", { text: 'Do Date', cls: "setting-item-name"}));
+    const doDate_setting_item_control = contentEl.createEl("div", {cls: "setting-item-control"});
+    const doDate_picker = contentEl.createEl("input", {type: "text", value: this.successPlanItem.do_date != "" ? this.successPlanItem.do_date._i : ""  });
+    doDate_picker.onfocus = () => {doDate_picker.type = 'date'; doDate_picker.className="dropdown"; doDate_picker.value = this.successPlanItem.do_date.format("YYYY-MM-DD");};
+    doDate_picker.onchange = async (event) => {this.successPlanItem.do_date = moment(event.target.value)};
+    doDate_picker.onblur = () => {doDate_picker.type = 'text'; doDate_picker.value = this.successPlanItem.do_date.format(this.dateFormat)};
+    doDate_setting_item_control.append(doDate_picker);
+    doDate_setting_item.append(doDate_setting_item_info);
+    doDate_setting_item.append(doDate_setting_item_control);
 
-    new Setting(contentEl)
-    .setName("Due Date")
-    .addMomentFormat((cb) =>
-        cb
-        .setDefaultFormat(this.dateFormat)
-        .setValue(this.successPlanItem.due_date != "" ? this.successPlanItem.due_date.format(this.dateFormat) : "")
-        .onChange(async (val) => {
-            this.successPlanItem.due_date = moment(val);
-        })
-    );
+    // Due Date Setting 
+    const dueDate_setting_item = contentEl.createEl("div", {cls: "setting-item"});
+    const dueDate_setting_item_info = contentEl.createEl("div", {cls: "setting-item-info"});
+    dueDate_setting_item_info.append(contentEl.createEl("div", { text: 'Due Date', cls: "setting-item-name"}));
+    const dueDate_setting_item_control = contentEl.createEl("div", {cls: "setting-item-control"});
+    const dueDate_picker = contentEl.createEl("input", {type: "text", value: this.successPlanItem.due_date != "" ? this.successPlanItem.due_date._i : ""  });
+    dueDate_picker.onfocus = () => {dueDate_picker.type = 'date'; dueDate_picker.className="dropdown"; dueDate_picker.value = this.successPlanItem.due_date.format("YYYY-MM-DD");};
+    dueDate_picker.onchange = async (event) => {this.successPlanItem.due_date = moment(event.target.value)};
+    dueDate_picker.onblur = () => {dueDate_picker.type = 'text'; dueDate_picker.value = this.successPlanItem.due_date.format(this.dateFormat)};
+    dueDate_setting_item_control.append(dueDate_picker);
+    dueDate_setting_item.append(dueDate_setting_item_info);
+    dueDate_setting_item.append(dueDate_setting_item_control);
+
+    // Closing Date Setting
+    const closingDate_setting_item = contentEl.createEl("div", {cls: "setting-item"});
+    const closingDate_setting_item_info = contentEl.createEl("div", {cls: "setting-item-info"});
+    closingDate_setting_item_info.append(contentEl.createEl("div", { text: 'Closing Date', cls: "setting-item-name"}));
+    const closingDate_setting_item_control = contentEl.createEl("div", {cls: "setting-item-control"});
+    const closingDate_picker = contentEl.createEl("input", {type: "text", value: this.successPlanItem.closing_date != "" ? this.successPlanItem.closing_date._i : ""  });
+    closingDate_picker.onfocus = () => {closingDate_picker.type = 'date'; closingDate_picker.className="dropdown"; closingDate_picker.value = this.successPlanItem.closing_date.format("YYYY-MM-DD");};
+    closingDate_picker.onchange = async (event) => {this.successPlanItem.closing_date = moment(event.target.value)};
+    closingDate_picker.onblur = () => {closingDate_picker.type = 'text'; closingDate_picker.value = this.successPlanItem.closing_date.format(this.dateFormat)};
+    closingDate_setting_item_control.append(closingDate_picker);
+    closingDate_setting_item.append(closingDate_setting_item_info);
+    closingDate_setting_item.append(closingDate_setting_item_control);
 
     new Setting(contentEl)
-    .setName("Closing Date")
-    .addMomentFormat((cb) =>
+    .setName("Upstream")
+    .setClass("upstream-setting")
+    .setDesc("Ctrl/Command + Click to select multiple options")
+    .addDropdown((cb) =>
         cb
-        .setDefaultFormat(this.dateFormat)
-        .setValue(this.successPlanItem.closing_date != "" ? this.successPlanItem.closing_date.format(this.dateFormat) : "")
+        .addOptions(upstream) 
+        .setValue(this.successPlanItem.upstream != "" ? this.successPlanItem.upstream : "") 
         .onChange(async (val) => {
-            this.successPlanItem.closing_date = moment(val);
+            let values = Array.from(cb.selectEl.selectedOptions).map(value => value.text);
+            let upstreamString = '', value;
+            while(values.length > 0){
+                value = values.shift();
+                (values.length < 1 ) ? upstreamString += '[[' + value + ']]' : upstreamString += '[[' + value + ']],';
+            }
+            this.successPlanItem.upstream = upstreamString
         })
+        .selectEl.multiple = true
     );
 
     /* // Upstream and Downstream isn't currently functional
-    new Setting(contentEl)
-    .setName("Upstream")
-    .addSearch((cb) =>
-        cb
-        .setPlaceholder("Upstream Items (Hierarchy: Tasks > Projects > Key Results > Goals")
-        .setValue(this.successPlanItem.upstream != "" ? this.successPlanItem.upstream : "")
-        // TODO: In the onChange method, search for the items that corresponds to the item that is being looked at (ex. Projects if this is a Task)
-    );
-
     new Setting(contentEl) // this can be one or more items
     .setName("Downstream")
     .addSearch((cb) =>

styles.css

@@ -1,10 +1,8 @@
-body {
-    color: white;
-}
 
 .item {
     border: 1px solid var(--background-modifier-border);
     padding: 10px;
+    color: var(--text-normal);
 }
 
 p {
@@ -24,4 +22,8 @@ p {
 .modal_disabled_submit_btn {
     background-color: lightgrey !important;
     color: gray !important;
+}
+
+.upstream-setting .setting-item-control select{
+    height: 38px !important;
 }