progress bar component

update yarn lock file fix failing test fix failing test Revert "progress bar component" This reverts commit a6343df.
Real-Dev-Squad · Jul 20, 2023 · 5765e0e · 5765e0e
1 parent d54300d
commit 5765e0e
Show file tree

Hide file tree

Showing 13 changed files with 202 additions and 124 deletions.
diff --git a/app/components/progress-bar.hbs b/app/components/progress-bar.hbs
@@ -1,18 +1,51 @@
-<div>
+<div ...attributes class='progress-bar-container'>
   <input
-    ...attributes
+    {{focus-when this.isEditable}}
+    aria-label='progress slider for IN-Progress tasks'
     data-test-task-progress-bar
     class='progress-bar__input-slider'
-    id='input'
+    id='progress-bar-input'
     type='range'
     value={{@value}}
-    min="0"
-    max="100"
-    step="10"
-    {{on 'change' @onUpdate}}
+    min='0'
+    max='100'
+    step='10'
+    {{on 'change' this.onChange}}
+    {{on 'input' this.onInput}}
+    disabled={{not this.isEditable}}
   />
-  {{@value}}
-  <button type="button">
-
+  <button
+    data-text-progress-bar-button
+    {{on 'click' this.turnEditModeOn}}
+    class='progress-bar__button
+      {{unless this.isEditable "progress-bar__edit-hover"}}'
+    type='button'
+  >
+    {{#if this.isEditable}}
+      {{@value}}
+    {{else}}
+      <svg
+        class='progress-bar__edit-icon'
+        viewBox='0 0 24 24'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        <path
+          class='progress-bar__edit-icon-path-inner'
+          opacity='0.5'
+          d='M4 20H8L18 10L14 6L4 16V20Z'
+          fill='#000000'
+        />
+        <path
+          class='progress-bar__edit-icon-path-outer'
+          d='M18 10L21 7L17 3L14 6M18 10L8 20H4V16L14 6M18 10L14 6'
+          stroke='#000000'
+          stroke-width='1.5'
+          stroke-linecap='round'
+          stroke-linejoin='round'
+        />
+      </svg>
+    {{/if}}
   </button>
-</div> 
+
+</div>
diff --git a/app/components/progress-bar.js b/app/components/progress-bar.js
@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { debounce } from 'lodash';
+export default class ProgressBarComponent extends Component {
+  @tracked isEditable = false;
+  @tracked value = this.args.value;
+  lastEditTime = null;
+
+  @action turnEditModeOn() {
+    this.isEditable = true;
+    this.lastEditTime = Date.now();
+    this.setEditableToFalse();
+  }
+
+  setEditableToFalse() {
+    setTimeout(() => {
+      if (this.isEditable && Date.now() - this.lastEditTime >= 5000) {
+        this.isEditable = false;
+      } else {
+        this.setEditableToFalse();
+      }
+    }, 5000);
+  }
+
+  @action onInput(e) {
+    this.lastEditTime = Date.now();
+    this.value = e.target.value;
+    if (this.args.onInput) {
+      this.args.onInput(this.value);
+    }
+  }
+
+  @action onChange(e) {
+    this.lastEditTime = Date.now();
+    if (this.args.onChange) {
+      this.debouncedChange(e);
+    }
+  }
+
+  debouncedChange = debounce(async (e) => {
+    await this.args.onChange(e);
+    this.isEditable = false;
+  }, 1000);
+}
diff --git a/app/components/task-details.hbs b/app/components/task-details.hbs
@@ -3,9 +3,34 @@
     <p class='task-details__title'>{{@task.title}}</p>
     <div class='task-card__progress-bar-container'>
       <div class='task-card__progress-bar-container__progress-bar'>
+        {{#if @progressBarDev}}
+          {{#if (eq @task.status 'IN_PROGRESS')}}
+            <ProgressBar
+              class='{{@progressBarClass}}'
+              @value={{@percentCompleted}}
+              @onChange={{@onPercentageChange}}
+              @onInput={{@onInputChange}}
+            />
+          {{/if}}
+        {{else}}
+          <Input
+            data-test-task-progress-bar
+            class='progress-bar__input {{@progressBarClass}}'
+            id='input'
+            type='range'
+            name='percentCompleted'
+            value={{@percentCompleted}}
+            min='0'
+            max='100'
+            step='10'
+            {{on 'change' @onPercentageChange}}
+            {{on 'change' (fn @onTaskUpdate @task.id)}}
+            disabled={{@isProgressBarDisabled}}
+          />
+          {{@percentCompleted}}%
+        {{/if}}
 
-        <ProgressBar class='{{@progressBarClass}}' @value={{@percentCompleted}} @onUpdate={{@onPercentageChange}}/>     
-         </div>
+      </div>
     </div>
   </div>
   <div class='task-details__status-purpose-container'>

diff --git a/app/components/task/holder.hbs b/app/components/task/holder.hbs
@@ -7,6 +7,8 @@
     @percentCompleted={{this.percentCompleted}}
     @progressBarClass={{this.progressBarClass}}
     @isProgressBarDisabled={{this.isProgressBarDisabled}}
+    @onInputChange={{this.progressBarInputChange}}
+    @progressBarDev={{@progressBarDev}}
   />
 
   <div class='task-card__status-update-container'>

diff --git a/app/components/task/holder.js b/app/components/task/holder.js
@@ -66,18 +66,23 @@ export default class TasksHolderComponent extends Component {
     return 'progress-bar-yellow';
   }
 
+  @action progressBarInputChange(value) {
+    this.percentCompleted = value;
+  }
+
   get isProgressBarDisabled() {
     return this.args.task.status !== TASK_KEYS.IN_PROGRESS;
   }
 
   @action
-  onPercentageChange(e) {
+  async 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;
     }
+    await this.onUpdate(this.args.task.id);
   }
 
   @action

diff --git a/app/components/tasks.hbs b/app/components/tasks.hbs
@@ -23,6 +23,7 @@
           @onTaskUpdate={{@onTaskUpdate}}
           @userSelectedTask={{@userSelectedTask}}
           @disabled={{@disabled}}
+          @progressBarDev={{@progressBarDev}}
         />
       </div>
     {{/each}}

diff --git a/app/controllers/tasks.js b/app/controllers/tasks.js
@@ -14,7 +14,7 @@ import { toastNotificationTimeoutOptions } from '../constants/toast-notification
 const API_BASE_URL = ENV.BASE_API_URL;
 
 export default class TasksController extends Controller {
-  queryParams = ['dev'];
+  queryParams = ['dev', 'progressBarDev'];
   @service toast;
   TASK_KEYS = TASK_KEYS;
   taskStatusList = TASK_STATUS_LIST;
@@ -25,6 +25,7 @@ export default class TasksController extends Controller {
   DEFAULT_TASK_TYPE = this.allTasksObject;
 
   @tracked dev = false;
+  @tracked progressBarDev = null;
   @tracked isUpdating = false;
   @tracked assignTask = false;
   @tracked closeDisabled = false;

diff --git a/app/modifiers/focus-when.js b/app/modifiers/focus-when.js
@@ -0,0 +1,7 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier(function focusWhen(element, [isFocused]) {
+  if (isFocused) {
+    element.focus();
+  }
+});
diff --git a/app/styles/progress-bar.css b/app/styles/progress-bar.css
@@ -1,119 +1,68 @@
-/* .progress-bar__input {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 80%;
-    height: 9px;
-    cursor: pointer;
-    outline: none;
-    overflow: hidden;
-    border-radius: 9px;
-    border: 2px solid var(--black-grey);
+.progress-bar-container {
+  display: flex;
+  gap: 4px;
 }
 
-.progress-bar__input:disabled {
-    pointer-events: none;
+.progress-bar__button {
+  width: 1.4rem;
+  height: 1.1rem;
+  font-size: 60%;
+  font-weight: bolder;
+  text-justify: auto;
+  border: 2px solid black;
+  border-radius: 4px;
+  background-color: transparent;
 }
 
-.progress-bar__input::-webkit-slider-runnable-track {
-    height: 9px;
-    background: var(--range-slider-background);
-    border-radius: 9px;
+.progress-bar__edit-icon {
+  width: 85%;
+  height: 85%;
 }
-
-.progress-bar__input::-moz-range-track {
-    height: 9px;
-    background: var(--range-slider-background);
-    border-radius: 9px;
+.progress-bar__input-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 90%;
+  height: 1.1rem;
+  cursor: pointer;
+  outline: none;
+  overflow: hidden;
+  border: 2px solid black;
+  border-radius: 4px;
+  cursor: pointer;
 }
-
-.progress-bar__input::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    height: 9px;
-    width: 9px;
-    background-color: var(--progress-bar-color);
-    border-radius: 50%;
-    border: 2px solid var(--progress-bar-color);
-    transition: 0.25s ease-in-out;
-    box-shadow: -407px 0 0 400px var(--progress-bar-color);
+.progress-bar__input-slider:focus {
+  box-shadow: 0 0 0 1px var(--progress-bar-color);
 }
-
-.progress-bar__input::-webkit-slider-thumb:active,
-.task-card__progress-bar-container__progress-bar:hover .progress-bar__input:not(:disabled)::-webkit-slider-thumb {
-    background-color: var(--white);
+.progress-bar__input-slider:disabled {
+  cursor: auto;
 }
 
-.progress-bar__input::-moz-range-thumb {
-    background-color: var(--progress-bar-color);
-    border-radius: 50%;
-    height: 4.5px;
-    width: 4.5px;
-    border: 2px solid var(--progress-bar-color);
-    transition: 0.25s ease-in-out;
-    box-shadow: -407px 0 0 400px var(--progress-bar-color);
+.progress-bar__input-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 0;
+  box-shadow: -20rem 0 0 20rem var(--progress-bar-color);
 }
 
-.progress-bar__input::-moz-range-thumb:active,
-.task-card__progress-bar-container__progress-bar:hover .progress-bar__input:not(:disabled)::-moz-range-thumb {
-    background-color: var(--white);
-} */
-/* 
-.progress-bar__input-slider {
-        -webkit-appearance: none;
-            appearance: none;
-            width: 80%;
-            height: 16px;
-            cursor: pointer;
-            outline: none;
-            overflow: hidden;
-            border: 2px solid var(--black-grey);
-    border-radius: 0.5rem;
-    cursor: row-resize;
-
+.progress-bar__input-slider::-moz-range-thumb {
+  border: none;
+  width: 0;
+  box-shadow: -20rem 0 0 20rem var(--progress-bar-color);
 }
 
 .progress-bar__input-slider[step] {
-    background-color: transparent;
-    background-image: repeating-linear-gradient(to right, green);
-}
-.progress-bar__input-slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 12px;
-    box-shadow: -20rem 0 0 20rem rgba(#000, 0.2);
+  background-color: transparent;
+  background: repeating-linear-gradient(
+    to right,
+    rgb(255, 255, 255),
+    rgb(255, 255, 255) calc(10.05% - 1.5px),
+    black 10.05%
+  );
 }
-.progress-bar__input-slider::-moz-range-thumb {
-    border: none;
-    width: 12px;
-    box-shadow: -20rem 0 0 20rem rgba(#000, 0.2);
-} */
 
-.progress-bar__input-slider {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 20rem;
-    height: 16px;
-    cursor: pointer;
-    outline: none;
-    overflow: hidden;
-    border: 2px solid black;
-    border-radius: 0.5rem;
-    cursor: row-resize;
+.progress-bar__edit-hover:hover {
+  background-color: rgba(128, 128, 128, 0.5);
 }
 
-.progress-bar__input-slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 0;
-    box-shadow: -20rem 0 0 20rem rgba(black, 0.5);
+.progress-bar__edit-icon-path-inner {
+  fill: var(--progress-bar-color);
 }
-
-.progress-bar__input-slider::-moz-range-thumb {
-    border: none;
-    width: 0;
-    box-shadow: -20rem 0 0 20rem rgba(black, 0.5);
-}
-
-.progress-bar__input-slider[step] {
-    background-color: transparent;
-    background: repeating-linear-gradient(to right, #e66465, #e66465 20px, black 25px);
-    /* background: repeating-linear-gradient(to right, , rgba(green, .2) calc(10% - 1px), black 10%); */
-}