From 8a16f510e65e290013d8608d78093589c8fe6519 Mon Sep 17 00:00:00 2001 From: Jacqueline O Date: Mon, 21 Feb 2022 01:40:04 -0600 Subject: [PATCH 1/7] Modified styles.css & src/ReactApp.tsx to fix issue #3 --- src/ReactApp.tsx | 2 +- styles.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ReactApp.tsx b/src/ReactApp.tsx index 3a9c7da..ebd1468 100644 --- a/src/ReactApp.tsx +++ b/src/ReactApp.tsx @@ -561,7 +561,7 @@ export default function ReactApp(settings: any) { let list = generateList(getItemsOfGivenTypeAndStatus(activeTab, SECTIONS[i])); result.push( -
+

{ SECTIONS[i].includes('To') ? SECTIONS[i].replace('To', 'to') : SECTIONS[i] }

{ list.length != 0 ?

handleSectionHideClick(lowercaseSection) }>{ getTabLedgerSectionHideValue(lowercaseSection) ? 'Show' : 'hide' }

: null } diff --git a/styles.css b/styles.css index a5e80e1..cef9f2f 100644 --- a/styles.css +++ b/styles.css @@ -1,10 +1,11 @@ body { - color: white; + /* color: white; */ } .item { border: 1px solid var(--background-modifier-border); padding: 10px; + color: white; } p { From ec2af4f90f639ae23cfb21813263bf24eeab3e10 Mon Sep 17 00:00:00 2001 From: Jacqueline O Date: Sun, 6 Mar 2022 12:42:56 -0600 Subject: [PATCH 2/7] refactor(ReactApp): Modified dashboard's padding and margins --- src/ReactApp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ReactApp.tsx b/src/ReactApp.tsx index ebd1468..49d55e3 100644 --- a/src/ReactApp.tsx +++ b/src/ReactApp.tsx @@ -104,7 +104,7 @@ export default function ReactApp(settings: any) { const { isGamificationOn } = settings.settings; result = array.map((item, index) => -
handleItemClick(event, item) }> +
handleItemClick(event, item) }>

{ item.name }

{ item.impact ?

{ item.impact.replace(' ', '-') } 👊

: null } @@ -561,9 +561,9 @@ export default function ReactApp(settings: any) { let list = generateList(getItemsOfGivenTypeAndStatus(activeTab, SECTIONS[i])); result.push( -
+
-

{ SECTIONS[i].includes('To') ? SECTIONS[i].replace('To', 'to') : SECTIONS[i] }

+

{ SECTIONS[i].includes('To') ? SECTIONS[i].replace('To', 'to') : SECTIONS[i] }

{ list.length != 0 ?

handleSectionHideClick(lowercaseSection) }>{ getTabLedgerSectionHideValue(lowercaseSection) ? 'Show' : 'hide' }

: null }
{ getTabLedgerSectionHideValue(lowercaseSection) ? null : list } From 960d540d91fe010220e7099f96d57ca4bb33bc44 Mon Sep 17 00:00:00 2001 From: Jacqueline O Date: Sun, 6 Mar 2022 12:44:06 -0600 Subject: [PATCH 3/7] refactor(tabs): Modified default color for tabs --- src/components/HorizontalTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HorizontalTabs.tsx b/src/components/HorizontalTabs.tsx index 045879c..6c9d643 100644 --- a/src/components/HorizontalTabs.tsx +++ b/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 ( From 5d171e7d1a15e8b8baa597133ca387c70a8274cc Mon Sep 17 00:00:00 2001 From: Jacqueline O Date: Sun, 6 Mar 2022 12:45:44 -0600 Subject: [PATCH 4/7] refactor(styling): Modified succcessPlanItem default color --- styles.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/styles.css b/styles.css index cef9f2f..b0d17b5 100644 --- a/styles.css +++ b/styles.css @@ -1,11 +1,8 @@ -body { - /* color: white; */ -} .item { border: 1px solid var(--background-modifier-border); padding: 10px; - color: white; + color: var(--text-normal); } p { From 07e63ca08dd033394d73ca7a923272a4b382656f Mon Sep 17 00:00:00 2001 From: Jacqueline O Date: Mon, 7 Mar 2022 19:53:29 -0600 Subject: [PATCH 5/7] refactor(itemModal): Modify date picker element for Do Date, Due Date and Closing Date --- src/components/ItemModal.ts | 99 ++++++++++++++++++++++++++----------- 1 file changed, 69 insertions(+), 30 deletions(-) diff --git a/src/components/ItemModal.ts b/src/components/ItemModal.ts index 58baec8..6cf3d85 100644 --- a/src/components/ItemModal.ts +++ b/src/components/ItemModal.ts @@ -112,38 +112,77 @@ 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); - new Setting(contentEl) - .setName("Closing Date") - .addMomentFormat((cb) => - cb - .setDefaultFormat(this.dateFormat) - .setValue(this.successPlanItem.closing_date != "" ? this.successPlanItem.closing_date.format(this.dateFormat) : "") - .onChange(async (val) => { - this.successPlanItem.closing_date = moment(val); - }) - ); + // 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("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); + // }) + // ); + + // 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); + // }) + // ); + + // new Setting(contentEl) + // .setName("Closing Date") + // .addMomentFormat((cb) => + // cb + // .setDefaultFormat(this.dateFormat) + // .setValue(this.successPlanItem.closing_date != "" ? this.successPlanItem.closing_date.format(this.dateFormat) : "") + // .onChange(async (val) => { + // this.successPlanItem.closing_date = moment(val); + // }) + // ); /* // Upstream and Downstream isn't currently functional new Setting(contentEl) From be7f935c82b534f014d91992813774ed3a5f5c44 Mon Sep 17 00:00:00 2001 From: Jacqueline O Date: Sun, 13 Mar 2022 21:53:49 -0600 Subject: [PATCH 6/7] feat(ReactApp, ItemModal): Implemented Upstream functionality --- src/ReactApp.tsx | 16 ++++++-- src/components/ItemModal.ts | 77 ++++++++++++++++++------------------- styles.css | 4 ++ 3 files changed, 54 insertions(+), 43 deletions(-) diff --git a/src/ReactApp.tsx b/src/ReactApp.tsx index 1950f2b..2d69e91 100644 --- a/src/ReactApp.tsx +++ b/src/ReactApp.tsx @@ -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) { @@ -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); diff --git a/src/components/ItemModal.ts b/src/components/ItemModal.ts index 6cf3d85..7f60cfd 100644 --- a/src/components/ItemModal.ts +++ b/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"] }); @@ -151,49 +172,27 @@ export class ItemModal extends Modal { closingDate_setting_item.append(closingDate_setting_item_info); closingDate_setting_item.append(closingDate_setting_item_control); - // 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); - // }) - // ); - - // 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); - // }) - // ); - - // new Setting(contentEl) - // .setName("Closing Date") - // .addMomentFormat((cb) => - // cb - // .setDefaultFormat(this.dateFormat) - // .setValue(this.successPlanItem.closing_date != "" ? this.successPlanItem.closing_date.format(this.dateFormat) : "") - // .onChange(async (val) => { - // this.successPlanItem.closing_date = moment(val); - // }) - // ); - - /* // Upstream and Downstream isn't currently functional new Setting(contentEl) .setName("Upstream") - .addSearch((cb) => + .setClass("upstream-setting") + .setDesc("Ctrl/Command + Click to select multiple options") + .addDropdown((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) + .addOptions(upstream) + .setValue(this.successPlanItem.upstream != "" ? this.successPlanItem.upstream : "") + .onChange(async (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) // this can be one or more items .setName("Downstream") .addSearch((cb) => diff --git a/styles.css b/styles.css index b0d17b5..3eb57cf 100644 --- a/styles.css +++ b/styles.css @@ -22,4 +22,8 @@ p { .modal_disabled_submit_btn { background-color: lightgrey !important; color: gray !important; +} + +.upstream-setting .setting-item-control select{ + height: 38px !important; } \ No newline at end of file From 36108588550ebcf9185acc04748c2416439329a0 Mon Sep 17 00:00:00 2001 From: Jacqueline O Date: Sun, 13 Mar 2022 23:00:20 -0600 Subject: [PATCH 7/7] feat(ReactApp, ItemModal): Implemented Downstream Functionality --- src/ReactApp.tsx | 3 +-- src/components/ItemModal.ts | 25 +++++++++++++++++-------- styles.css | 6 +++++- 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/ReactApp.tsx b/src/ReactApp.tsx index 2d69e91..2ee6295 100644 --- a/src/ReactApp.tsx +++ b/src/ReactApp.tsx @@ -358,7 +358,6 @@ export default function ReactApp(settings: any) { } result = (secondHalf.length == 1) ? secondHalf : streamItems; } - return result; } @@ -611,7 +610,7 @@ export default function ReactApp(settings: any) { "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" + - "Downstream:: " + (isNotBlankOrUndefined(successPlanItem.downstream) ? ("[[" + successPlanItem.downstream + "]]") : "") + "\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" + "Do Date:: " + (isNotBlankOrUndefined(successPlanItem.do_date) ? ("[[" + convertMomentToDateFormat(successPlanItem.do_date) + "]]") : "") + "\n\n" + diff --git a/src/components/ItemModal.ts b/src/components/ItemModal.ts index 7f60cfd..06075a8 100644 --- a/src/components/ItemModal.ts +++ b/src/components/ItemModal.ts @@ -174,7 +174,7 @@ export class ItemModal extends Modal { new Setting(contentEl) .setName("Upstream") - .setClass("upstream-setting") + .setClass("updown-stream-setting") .setDesc("Ctrl/Command + Click to select multiple options") .addDropdown((cb) => cb @@ -192,16 +192,25 @@ export class ItemModal extends Modal { .selectEl.multiple = true ); - /* // Upstream and Downstream isn't currently functional - new Setting(contentEl) // this can be one or more items + new Setting(contentEl) .setName("Downstream") - .addSearch((cb) => + .setClass("updown-stream-setting") + .setDesc("Ctrl/Command + Click to select multiple options") + .addDropdown((cb) => cb - .setPlaceholder("Coming Soon!") - .setValue(this.successPlanItem.downstream != "" ? this.successPlanItem.downstream : "") - // 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) + .addOptions(downstream) + .setValue(this.successPlanItem.downstream != "" ? this.successPlanItem.downstream : "") + .onChange(async (val) => { + let values = Array.from(cb.selectEl.selectedOptions).map(value => value.text); + let downstreamString = '', value; + while(values.length > 0){ + value = values.shift(); + (values.length < 1 ) ? downstreamString += '[[' + value + ']]' : downstreamString += '[[' + value + ']],'; + } + this.successPlanItem.downstream = downstreamString; + }) + .selectEl.multiple = true ); - */ if (this.successPlanItem.type == "Task") { new Setting(contentEl) diff --git a/styles.css b/styles.css index 3eb57cf..f37c8ff 100644 --- a/styles.css +++ b/styles.css @@ -24,6 +24,10 @@ p { color: gray !important; } -.upstream-setting .setting-item-control select{ +.updown-stream-setting .setting-item-control .dropdown{ height: 38px !important; +} + +.updown-stream-setting select option{ + background-color: var(--background-modifier-form-field) !important; } \ No newline at end of file