fix: TTL-985 add debouncing to clock in buttons (#1006)

Author: mmaquina

src/app/modules/shared/components/details-fields/details-fields.component.html

@@ -151,7 +151,7 @@
     </fieldset>
   </div>
   <div class="modal-footer">
-    <button type="submit" class="btn btn-primary">Save</button>
+    <button type="submit" id=submitButton class="btn btn-primary">Save</button>
     <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
   </div>
 </form>

src/app/modules/shared/components/details-fields/details-fields.component.ts

@@ -333,6 +333,14 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   onSubmit() {
+
+    // Debounce submit (Save) button
+    const button = document.querySelector('#submitButton');
+    button.setAttribute('disabled', 'true');
+    setTimeout(() => {
+      button.removeAttribute('disabled');
+      }, 3000);
+
     const emptyValue = '';
     const { project_name, uri, description } = this.entryForm.value;
     const areEmptyValues = [uri, description].every(item => item === emptyValue);

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts

@@ -106,13 +106,26 @@ export class ProjectListHoverComponent implements OnInit, OnDestroy {
   }
 
   clockIn(selectedProject, customerName, name) {
+
+    // Debounce 'Clock In' buttons
+    const buttons = document.getElementsByClassName('btn btn-sm btn-primary btn-select');
+    for (const button of buttons) {
+      button.setAttribute('disabled', 'true');
+    }
+    setTimeout(() => {
+      for (const button of buttons) {
+        button.removeAttribute('disabled');
+      }
+    }, 3000);
+
     const entry = {
       project_id: selectedProject,
       start_date: new Date().toISOString(),
       timezone_offset: new Date().getTimezoneOffset(),
       technologies: [],
       activity_id: head(this.activities).id,
     };
+
     this.store.dispatch(new entryActions.ClockIn(entry));
     this.projectsForm.setValue({ project_id: `${customerName} - ${name}` });
     setTimeout(() => {

tsconfig.json

@@ -17,7 +17,8 @@
     ],
     "lib": [
       "es2018",
-      "dom"
+      "dom",
+      "dom.Iterable"
     ]
   },
   "angularCompilerOptions": {