@@ -52,8 +50,8 @@
{{on 'click' this.toggleExtensionForm}}
>Extension Status
- {{#if @isLoading}}
-
+ {{#if this.isLoading}}
+
{{/if}}
diff --git a/app/components/task/holder.js b/app/components/task/holder.js
index 5f9ca980..1153550a 100644
--- a/app/components/task/holder.js
+++ b/app/components/task/holder.js
@@ -6,7 +6,9 @@ import { TASK_PERCENTAGE } from '../../constants/tasks';
export default class TasksHolderComponent extends Component {
@tracked percentCompleted = this.args.task.percentCompleted;
+ @tracked status = this.args.task.status;
@tracked extensionFormOpened = false;
+ @tracked isLoading = false;
TASK_KEYS = TASK_KEYS;
availabletaskStatusList = TASK_STATUS_LIST;
@@ -71,15 +73,27 @@ export default class TasksHolderComponent extends Component {
@action
onPercentageChange(e) {
const { value } = e.target;
+ this.percentCompleted = value;
this.args.onTaskChange('percentCompleted', value);
if (value === TASK_PERCENTAGE.completedPercentage) {
this.percentCompleted = this.args.task.percentCompleted;
}
}
+ @action
+ async onUpdate(taskId) {
+ this.isLoading = true;
+ await this.args.onTaskUpdate(taskId, () => {
+ this.percentCompleted = this.args.task.percentCompleted;
+ this.status = this.args.task.status;
+ });
+ this.isLoading = false;
+ }
+
@action
onStatusChange(e) {
const { value } = e.target;
+ this.status = value;
this.args.onTaskChange('status', value);
}
diff --git a/app/components/tasks.hbs b/app/components/tasks.hbs
index 0b5c9743..1ee3fd20 100644
--- a/app/components/tasks.hbs
+++ b/app/components/tasks.hbs
@@ -21,7 +21,6 @@
@onTaskChange={{@onTaskChange}}
@onStausChange={{this.onStatusChange}}
@onTaskUpdate={{@onTaskUpdate}}
- @isLoading={{@isLoading}}
@userSelectedTask={{@userSelectedTask}}
@disabled={{@disabled}}
/>
diff --git a/app/controllers/tasks.js b/app/controllers/tasks.js
index 10e035b4..917d448a 100644
--- a/app/controllers/tasks.js
+++ b/app/controllers/tasks.js
@@ -31,7 +31,6 @@ export default class TasksController extends Controller {
@tracked showDropDown = true;
@tracked taskFields = {};
@tracked allTasks = this.model;
- @tracked isLoading = false;
@tracked userSelectedTask = this.DEFAULT_TASK_TYPE;
@tracked showModal = false;
@tracked tempTaskId = ''; // this Id will be used to update task which are completed 100%
@@ -139,12 +138,10 @@ export default class TasksController extends Controller {
this.taskFields[key] = value;
}
- @action async updateTask(taskId) {
- this.isLoading = true;
+ @action async updateTask(taskId, error) {
this.disabled = true;
this.buttonRequired = false;
const taskData = this.taskFields;
- this.isLoading = true;
const cleanBody = this.constructReqBody(taskData);
if (taskData.status || taskData.percentCompleted) {
@@ -191,6 +188,7 @@ export default class TasksController extends Controller {
toastNotificationTimeoutOptions
);
this.disabled = false;
+ error();
}
} catch (err) {
this.toast.error(
@@ -199,8 +197,8 @@ export default class TasksController extends Controller {
toastNotificationTimeoutOptions
);
console.error('Error : ', err);
+ error();
} finally {
- this.isLoading = false;
this.disabled = false;
}
}
@@ -258,16 +256,15 @@ export default class TasksController extends Controller {
}
}
- @action async handleUpdateTask(taskId) {
+ @action async handleUpdateTask(taskId, error) {
const taskData = this.taskFields;
if (taskData.percentCompleted === TASK_PERCENTAGE.completedPercentage) {
this.message = TASK_MESSAGES.MARK_DONE;
this.showModal = true;
this.buttonRequired = true;
this.tempTaskId = taskId;
- return;
} else {
- this.updateTask(taskId);
+ return this.updateTask(taskId, error);
}
}
}
diff --git a/tests/integration/components/tasks-test.js b/tests/integration/components/tasks-test.js
index b6ade10f..67f44022 100644
--- a/tests/integration/components/tasks-test.js
+++ b/tests/integration/components/tasks-test.js
@@ -1,7 +1,9 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { find, render, waitUntil, fillIn } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
+import { tasks } from 'website-my/tests/fixtures/tasks';
+import { TASK_KEYS } from 'website-my/constants/tasks';
module('Integration | Component | tasks', function (hooks) {
setupRenderingTest(hooks);
@@ -38,4 +40,44 @@ module('Integration | Component | tasks', function (hooks) {
assert.dom('[data-test-fetchSection]').exists();
});
+
+ test('Spinner should be visible only on the current updating card', async function (assert) {
+ tasks[0].status = 'IN_PROGRESS';
+ this.setProperties({
+ onTaskChange: () => {},
+ onTaskUpdate: () => {},
+ showFetchButton: false,
+ handleUpdateTask: async () => new Promise((res) => setTimeout(res, 1000)),
+ handleAssignment: () => {},
+ findingTask: false,
+ dev: true,
+ tasksToShow: tasks,
+ });
+
+ await render(hbs`
+
+ `);
+
+ assert.dom('[data-test-task-spinner]').doesNotExist();
+
+ await fillIn('[data-test-task-status-select]', TASK_KEYS.COMPLETED);
+
+ assert.dom('[data-test-task-spinner]').exists({ count: 1 });
+
+ await waitUntil(
+ () => {
+ return !find('[data-test-task-spinner]');
+ },
+ { timeout: 1000 }
+ );
+ assert.dom('[data-test-task-spinner]').doesNotExist();
+ });
});
diff --git a/tests/integration/components/tasks/holder-test.js b/tests/integration/components/tasks/holder-test.js
index 550fe625..b86538e9 100644
--- a/tests/integration/components/tasks/holder-test.js
+++ b/tests/integration/components/tasks/holder-test.js
@@ -2,7 +2,7 @@ import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { tasks, overDueTask } from 'website-my/tests/fixtures/tasks';
import { TASK_KEYS, TASK_STATUS_LIST } from 'website-my/constants/tasks';
-import { find, render, waitUntil } from '@ember/test-helpers';
+import { find, render, waitUntil, fillIn, select } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | Tasks Holder', function (hooks) {
@@ -145,4 +145,68 @@ module('Integration | Component | Tasks Holder', function (hooks) {
border: '2px solid rgb(255, 0, 0)',
});
});
+
+ test('Verify values of input slider upon api failures', async function (assert) {
+ const testTask = tasksData[3];
+ testTask.percentCompleted = '50';
+ testTask.status = TASK_KEYS.IN_PROGRESS;
+
+ this.set('task', testTask);
+ this.set('mock', () => {});
+ this.set('onTaskUpdate', (taskId, error) => {
+ error();
+ });
+ this.set('isLoading', false);
+ this.set('disabled', false);
+ this.set('defaultType', DEFAULT_TASK_TYPE);
+
+ await render(hbs`
`);
+
+ assert.dom('[data-test-task-progress-bar]').hasValue('50');
+
+ await fillIn('[data-test-task-progress-bar]', '25');
+
+ assert.dom('[data-test-task-progress-bar]').hasValue('50');
+ });
+
+ test('Verify values of task status upon api failures', async function (assert) {
+ const testTask = tasksData[3];
+ testTask.status = TASK_KEYS.IN_PROGRESS;
+
+ this.set('task', testTask);
+ this.set('mock', () => {});
+ this.set('onTaskUpdate', (taskId, error) => {
+ error();
+ });
+ this.set('isLoading', false);
+ this.set('disabled', false);
+ this.set('defaultType', DEFAULT_TASK_TYPE);
+
+ await render(hbs`
`);
+
+ assert
+ .dom('[data-test-task-status-select]')
+ .hasValue(TASK_KEYS.IN_PROGRESS);
+
+ await select('[data-test-task-status-select]', TASK_KEYS.COMPLETED);
+
+ assert
+ .dom('[data-test-task-status-select]')
+ .hasValue(TASK_KEYS.IN_PROGRESS);
+ });
});