From 115931fa6d717bd6f6fa3b60db3ca2cfa12cb6c2 Mon Sep 17 00:00:00 2001 From: hawariMuflihMunte Date: Fri, 16 Jun 2023 00:47:00 +0700 Subject: [PATCH 1/6] Fix update data bug: + Disable filtering data + Accept all newly inserted data and push to storage --- src/scripts/classes/Presenter.js | 118 +++++++++++++++---------------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/src/scripts/classes/Presenter.js b/src/scripts/classes/Presenter.js index ac462bc..a1c95f1 100644 --- a/src/scripts/classes/Presenter.js +++ b/src/scripts/classes/Presenter.js @@ -2,7 +2,7 @@ import _ from 'lodash'; import Swal from 'sweetalert2'; class Presenter { - constructor({ listContainer }) { + constructor({listContainer}) { this._listContainer = listContainer; // console.log('Presenter class init.'); @@ -73,7 +73,7 @@ class Presenter { renderListItems(data, container, controllerHandler) { if (!(data instanceof Array)) { console.log( - ` + ` Data that is passed into \'renderListItems\' is not a valid Array `.trim() @@ -82,7 +82,7 @@ class Presenter { } if (!(container instanceof HTMLElement)) { - console.log("Container for 'renderListItems' is not valid!"); + console.log('Container for \'renderListItems\' is not valid!'); return false; } @@ -100,7 +100,7 @@ class Presenter { controllerHandler == null || controllerHandler == undefined ) { - console.error("'controllerHandler' is not defined!"); + console.error('\'controllerHandler\' is not defined!'); return false; } @@ -162,7 +162,7 @@ class Presenter { 'September', 'Oktober', 'November', - 'Desember', + 'Desember' ]; } return months; @@ -227,14 +227,14 @@ class Presenter { * @return {HTMLElement} progressBar */ circularProgress( - value, - size = 60, - loaderOptions = { - strokeColor: 'blue', - strokeLineColor: '#ededed', - centerColor: 'white', - valueColor: 'blue', - } + value, + size = 60, + loaderOptions = { + strokeColor: 'blue', + strokeLineColor: '#ededed', + centerColor: 'white', + valueColor: 'blue' + } ) { const progressBar = document.createElement('div'); progressBar.classList.add('progress__component'); @@ -298,8 +298,8 @@ class Presenter { const progress = setInterval(() => { progressBarValue.textContent = `${incrementer}%`; progressBar.setAttribute( - 'style', - ` + 'style', + ` background: conic-gradient( ${loaderOptions.strokeColor} @@ -349,7 +349,7 @@ class Presenter { title, description, date, - tasks, + tasks } = data; const cardContainer = document.createElement('a'); @@ -441,8 +441,8 @@ class Presenter { const _dueDate = document.createElement('p'); const _date = this.convertDateIntoConsumableString( - date, - this.customMonthNames() + date, + this.customMonthNames() ); _dueDate.textContent = _date; @@ -487,16 +487,16 @@ class Presenter { } */ - const { id, createdAt, title, description, date, tasks } = data; + const {id, createdAt, title, description, date, tasks} = data; const cardContainer = document.createElement('div'); cardContainer.classList.add('detail'); const makeTimeString = createdAt.split('-'); const makeTimeNumber = new Date( - makeTimeString[2], - makeTimeString[1] - 1, - makeTimeString[0] + makeTimeString[2], + makeTimeString[1] - 1, + makeTimeString[0] ); cardContainer.setAttribute('created-at', makeTimeNumber.getTime()); @@ -784,8 +784,8 @@ class Presenter { const _dueDate = document.createElement('p'); const _date = this.convertDateIntoConsumableString( - date, - this.customMonthNames() + date, + this.customMonthNames() ); _dueDate.textContent = _date; @@ -958,7 +958,7 @@ class Presenter { icon: 'error', title: 'Limit!', text: `Maximum item limit reached: - ${inputsContainer.childElementCount} items.`.replace(/\s+/g, ' '), + ${inputsContainer.childElementCount} items.`.replace(/\s+/g, ' ') }); return false; @@ -1062,13 +1062,13 @@ class Presenter { showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#3085d6', - confirmButtonText: 'Yes, delete it!', + confirmButtonText: 'Yes, delete it!' }).then((result) => { if (result.isConfirmed) { Swal.fire( - 'Task Deleted!', - 'The selected task has been deleted.', - 'success' + 'Task Deleted!', + 'The selected task has been deleted.', + 'success' ); if (this.controller) { @@ -1093,16 +1093,16 @@ class Presenter { // return; const inputsValue = getInputsValue - .map((input) => input.value) - .filter((value) => value !== '') - .map((value) => ({ - task: value, - isDone: false, - })); + .map((input) => input.value) + .filter((value) => value !== '') + .map((value) => ({ + task: value, + isDone: false + })); - const mergeData = [...currentData, ...inputsValue]; - const filterData = - getInputsValue.length === 0 ? [] : _.uniqBy(mergeData, 'task'); + // const mergeData = [...currentData, ...inputsValue]; + const filterData = inputsValue; + // getInputsValue.length === 0 ? [] : _.uniqBy(mergeData, 'task'); // Debugging purpose-only // console.log(filterData); @@ -1113,12 +1113,12 @@ class Presenter { title: titleInput.value, description: descriptionInput.value, date: new Date(dateInput.value) - .toLocaleDateString('en-GB') - .split('/') - .join('-'), + .toLocaleDateString('en-GB') + .split('/') + .join('-'), // The result is taken from merging previous data and newly // added data in the edit session. - tasks: filterData, + tasks: filterData }; // Debugging purpose-only @@ -1132,7 +1132,7 @@ class Presenter { Swal.fire({ icon: 'success', title: 'Task Updated!', - text: 'The selected task has been updated.', + text: 'The selected task has been updated.' }); } else { console.warn('Please set the controller first to pass the data.'); @@ -1172,7 +1172,7 @@ class Presenter { multipleInputsQuery, btnAddInput, btnRemoveInput, - inputClassName = '', + inputClassName = '' }) { if (!(form instanceof HTMLFormElement)) { console.error('Not valid HTMLFormElement is being passed!'); @@ -1232,7 +1232,7 @@ class Presenter { icon: 'error', title: 'Limit!', text: `Maximum item limit reached: - ${inputsContainer.childElementCount} items.`.replace(/\s+/g, ' '), + ${inputsContainer.childElementCount} items.`.replace(/\s+/g, ' ') }); return false; @@ -1243,8 +1243,8 @@ class Presenter { newInputElement.type = 'text'; const string = _query; - const start = string.indexOf("'") + 1; - const end = string.lastIndexOf("'"); + const start = string.indexOf('\'') + 1; + const end = string.lastIndexOf('\''); const value = string.substring(start, end); newInputElement.name = value; @@ -1270,12 +1270,12 @@ class Presenter { const _dateValue = _date.value; const _inputs = Array.from(document.querySelectorAll(_query)); const _inputsValue = _inputs - .map((input) => input.value) - .filter((value) => value !== '') - .map((value) => ({ - task: value, - isDone: false, - })); + .map((input) => input.value) + .filter((value) => value !== '') + .map((value) => ({ + task: value, + isDone: false + })); /** * Return random number between 1 - 99999 @@ -1285,7 +1285,7 @@ class Presenter { const minId = 1; const maxId = 99999; const combineMinMax = Math.floor( - Math.random() * (maxId - minId + 1) + minId + Math.random() * (maxId - minId + 1) + minId ); const timeStamp = Number(new Date()); const id = Number(combineMinMax + timeStamp); @@ -1301,10 +1301,10 @@ class Presenter { description: _descriptionValue, // date: DD-MM-YYYY date: new Date(_dateValue) - .toLocaleDateString('en-GB') - .split('/') - .join('-'), - tasks: _inputsValue, + .toLocaleDateString('en-GB') + .split('/') + .join('-'), + tasks: _inputsValue }; // Debugging purpose-only @@ -1318,7 +1318,7 @@ class Presenter { Swal.fire({ icon: 'success', title: 'New Task Added!', - text: 'The newest task has been saved in the data storage.', + text: 'The newest task has been saved in the data storage.' }); } else { console.warn('Please set the controller first to pass the data.'); From 5b41d68bcab942a036254a5a91998c9601a83615 Mon Sep 17 00:00:00 2001 From: hawariMuflihMunte Date: Fri, 16 Jun 2023 01:51:53 +0700 Subject: [PATCH 2/6] Comment unused variable and import --- src/scripts/classes/Presenter.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scripts/classes/Presenter.js b/src/scripts/classes/Presenter.js index a1c95f1..0fb6651 100644 --- a/src/scripts/classes/Presenter.js +++ b/src/scripts/classes/Presenter.js @@ -1,4 +1,4 @@ -import _ from 'lodash'; +// import _ from 'lodash'; import Swal from 'sweetalert2'; class Presenter { @@ -1086,7 +1086,7 @@ class Presenter { taskOptionsModalForm.addEventListener('submit', (event) => { event.preventDefault(); - const currentData = tasks; + // const currentData = tasks; const getInputsValue = Array.from(inputsContainer.childNodes); // console.log(getInputsValue); From c0850c89fc099943583e0353659b3b4d4daad04b Mon Sep 17 00:00:00 2001 From: RidwanMiftahulFalah Date: Fri, 16 Jun 2023 10:40:27 +0700 Subject: [PATCH 3/6] Add `id` property to `search bar` and `search button` element --- src/scripts/views/pages/dashboard.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scripts/views/pages/dashboard.js b/src/scripts/views/pages/dashboard.js index 2ad157e..368e895 100644 --- a/src/scripts/views/pages/dashboard.js +++ b/src/scripts/views/pages/dashboard.js @@ -15,6 +15,7 @@ const Dashboard = { - - -
-

task Your Task

-
- - - - - -
-
- - `.trim(); - }, - - async next() { - Drawer.renderDrawer(); - - const backlog = new Backlog(CONFIG.APP_LOCAL_STORAGE_KEY); - const presenter = new Presenter({ - listContainer: document.getElementById('data-list') - }); - const controller = new Controller(backlog, presenter); - controller.renderList(); - - presenter.setController(controller); - - presenter.formAddData({ - form: document.getElementById('add-task'), - title: document.getElementById('title'), - description: document.getElementById('description'), - date: document.getElementById('due-date'), - inputsContainer: document.getElementById('task-items'), - multipleInputsQuery: 'input[name=\'task\']', - btnAddInput: document.getElementById('add-task-item'), - btnRemoveInput: document.getElementById('remove-task-item'), - inputClassName: 'form-control mb-2' - }); - } -}; - -export default Dashboard; +import CONFIG from '../../global/config'; +import Backlog from '../../classes/Backlog'; +import Presenter from '../../classes/Presenter'; +import Controller from '../../classes/Controller'; +import Drawer from '../../classes/UtilsDrawer'; + +const Dashboard = { + async render() { + return ` + ${Drawer.renderInterface()} +
+
+ + search + + + + +
+
+

task Your Task

+
+ + + + + +
+
+
+ `.trim(); + }, + + async next() { + Drawer.renderDrawer(); + + const backlog = new Backlog(CONFIG.APP_LOCAL_STORAGE_KEY); + const presenter = new Presenter({ + listContainer: document.getElementById('data-list') + }); + const controller = new Controller(backlog, presenter); + controller.renderList(); + + presenter.setController(controller); + + presenter.formAddData({ + form: document.getElementById('add-task'), + title: document.getElementById('title'), + description: document.getElementById('description'), + date: document.getElementById('due-date'), + inputsContainer: document.getElementById('task-items'), + multipleInputsQuery: 'input[name=\'task\']', + btnAddInput: document.getElementById('add-task-item'), + btnRemoveInput: document.getElementById('remove-task-item'), + inputClassName: 'form-control mb-2' + }); + + const searchButton = document.getElementById('search-button'); + searchButton.addEventListener('click', () => { + controller.searchData(); + }); + } +}; + +export default Dashboard; From 4474904efb3499bd89b976faa25a0627842e050e Mon Sep 17 00:00:00 2001 From: RidwanMiftahulFalah Date: Fri, 16 Jun 2023 11:30:26 +0700 Subject: [PATCH 5/6] Refactor `searchData` method --- src/scripts/classes/Controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scripts/classes/Controller.js b/src/scripts/classes/Controller.js index b0af247..e42df13 100644 --- a/src/scripts/classes/Controller.js +++ b/src/scripts/classes/Controller.js @@ -79,8 +79,8 @@ class Controller { return false; } - const searchResult = data.filter((dataItem) => - dataItem.title.trim().toLowerCase().includes(searchQuery) + const searchResult = data.filter((task) => + task.title.trim().toLowerCase().includes(searchQuery) ); if (searchResult.length === 0) { From feb0f55909887f416bfd17aa2139c317e30e7edc Mon Sep 17 00:00:00 2001 From: RidwanMiftahulFalah Date: Fri, 16 Jun 2023 11:49:15 +0700 Subject: [PATCH 6/6] Refactor `searchData` method --- src/scripts/classes/Controller.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/scripts/classes/Controller.js b/src/scripts/classes/Controller.js index e42df13..f75626f 100644 --- a/src/scripts/classes/Controller.js +++ b/src/scripts/classes/Controller.js @@ -71,16 +71,22 @@ class Controller { } searchData() { - const searchQuery = document.getElementById('search-bar').value.trim().toLowerCase(); + const searchBar = document.getElementById('search-bar'); + const searchQuery = (searchBar.value).trim().toLowerCase(); const data = this.backlog.getData(); + const renderSearchResult = (result) => { + searchBar.value = ''; + this.presenter.renderList(result); + }; + if (!searchQuery) { - this.presenter.renderList(data); + renderSearchResult(data); return false; } const searchResult = data.filter((task) => - task.title.trim().toLowerCase().includes(searchQuery) + (task.title.trim().toLowerCase()).includes(searchQuery) ); if (searchResult.length === 0) { @@ -90,10 +96,11 @@ class Controller { text: 'We cannot find the task you are looking for. Perhaps it has been deleted, or you can try to use a different search keyword.' }); + renderSearchResult(data); return false; } - this.presenter.renderList(searchResult); + renderSearchResult(searchResult); return true; } };