Issue #54 - User story 3.6 - Scheduling audits

.github/workflows/pylint.yml

@@ -8,6 +8,14 @@ on:
 jobs:
   pylint:
     runs-on: ubuntu-latest
+    env: 
+      DJANGO_SETTINGS_MODULE: django_server.settings
+    services:
+      mongodb:
+        image: mongo
+        ports:
+          - 27017:27017
+
     steps:
     - uses: actions/checkout@v2
     - name: Set up Python 3.8

client/src/app/components/audit-template/Template.ts

@@ -6,4 +6,9 @@ export interface Template {
   bins: any;
   part_number: any;
   serial_number: any;
+  start_date: any;
+  repeat_every: any;
+  on_day: any;
+  for_month: any;
+  time_zone_utc: any;
 }

client/src/app/components/audit-template/audit-template-view/audit-template-view.component.scss

@@ -18,14 +18,6 @@
   background: map-get($alta-primary, A50) !important;
 }
 
-.icon-padding-add {
-  padding-top: 30px;
-}
-
-.icon-padding-remove {
-  padding-top: 10px;
-}
-
 input[type="time"]::-webkit-calendar-picker-indicator {
   background: none;
   display: none;
@@ -36,11 +28,17 @@ input[type="time"]::-webkit-calendar-picker-indicator {
 }
 
 /* Create two equal columns that floats next to each other */
-.column {
+.column-2 {
   float: left;
   width: 50%;
   padding: 10px;
-  border-right: 1px solid #E0E0E0;
+}
+
+/* Create three equal columns that floats next to each other */
+.column-3 {
+  float: left;
+  width: 33.33%;
+  padding: 10px;
 }
 
 /* Clear floats after the columns */
@@ -50,8 +48,8 @@ input[type="time"]::-webkit-calendar-picker-indicator {
   clear: both;
 }
 
-.no-border {
-  border-style: none;
+.border-right {
+  border-right: 1px solid #E0E0E0;
 }
 
 .half-width {
@@ -68,11 +66,38 @@ input[type="time"]::-webkit-calendar-picker-indicator {
   text-align: center;
 }
 
-div.column.no-border > mat-card-title {
-  text-align: center !important;
-}
-
 mat-label {
   color: map-get($alta-primary, A800);
   font-size: 115%;
 }
+
+.position-right {
+  float: right;
+}
+
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
+  opacity: 0.03 !important;
+  background-color: map-get($alta-primary, A100);
+}
+
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
+  background-color: map-get($alta-primary, A100);
+}
+
+.button-padding {
+  margin: 5px;
+}
+
+::ng-deep .mat-checkbox-label {
+  padding-top: 2px;
+}
+
+.text-padding-left-align {
+  padding-top: 25px;
+  padding-left: 0;
+  text-align: left;
+}
+
+.text-align-center {
+  text-align: center !important;
+}

client/src/app/components/audit-template/audit-template-view/audit-template-view.component.ts

@@ -1,13 +1,70 @@
 import {Component, OnInit} from '@angular/core';
 import {Template} from '../Template';
+import timeZones from '../audit-template-view/create-audit-template/timezone.json';
 
+interface DaysCheckBox {
+  name: string;
+  checked: boolean;
+  subCheckBox?: DaysCheckBox[];
+}
+
+interface MonthsCheckBox {
+  name: string;
+  checked: boolean;
+  subCheckBox?: MonthsCheckBox[];
+}
 
 @Component({
   template: ''
 })
 export abstract class AuditTemplateViewComponent implements OnInit {
 
   errorMessage: string | undefined;
+  errorMessageCheckboxDay: string | undefined;
+  errorMessageCheckboxMonth: string | undefined;
+  startDate = new Date();
+  startTime = '00:00:00';
+  allDaysChecked = false;
+  allMonthsChecked = false;
+  panelOpenState = false;
+  isRecurrenceChosen = false;
+  repeatEvery = '1';
+  timeZone = timeZones;
+  timeZoneUTC = timeZones[15].utc[0];
+  selectedTimeZone = timeZones[15];
+  dayArray = [];
+  monthArray = [];
+  recurrenceDay: DaysCheckBox = {
+    name: 'All',
+    checked: false,
+    subCheckBox: [
+      { name: 'Sun', checked: true },
+      { name: 'Mon', checked: false },
+      { name: 'Tue', checked: false },
+      { name: 'Wed', checked: false },
+      { name: 'Thu', checked: false },
+      { name: 'Fri', checked: false },
+      { name: 'Sat', checked: false },
+    ],
+  };
+  recurrenceMonth: MonthsCheckBox = {
+    name: 'All',
+    checked: false,
+    subCheckBox: [
+      { name: 'Jan', checked: true },
+      { name: 'Feb', checked: false },
+      { name: 'Mar', checked: false },
+      { name: 'Apr', checked: false },
+      { name: 'May', checked: false },
+      { name: 'Jun', checked: false },
+      { name: 'Jul', checked: false },
+      { name: 'Aug', checked: false },
+      { name: 'Sep', checked: false },
+      { name: 'Oct', checked: false },
+      { name: 'Nov', checked: false },
+      { name: 'Dec', checked: false },
+    ],
+  };
 
   template: Template = {
     location: [],
@@ -17,6 +74,11 @@ export abstract class AuditTemplateViewComponent implements OnInit {
     bins: [],
     part_number: [],
     serial_number: [],
+    start_date: '',
+    repeat_every: '',
+    on_day: [],
+    for_month: [],
+    time_zone_utc: ''
   };
   templateValues: Template | undefined;
   title = '';
@@ -67,6 +129,84 @@ export abstract class AuditTemplateViewComponent implements OnInit {
     }
   }
 
+  timeZoneChange(event: { value: { utc: string[]; }; }): void {
+    this.timeZoneUTC = event.value.utc[0];
+  }
+
+  recurrenceExpand(): void {
+    this.repeatEvery = '1';
+    this.isRecurrenceChosen = true;
+    this.panelOpenState = true;
+  }
+
+  recurrenceCollapsed(): void {
+    this.isRecurrenceChosen = false;
+    this.panelOpenState = false;
+    this.allDaysChecked = false;
+    this.allMonthsChecked = false;
+    this.repeatEvery = '1';
+    this.recurrenceDay.subCheckBox?.forEach((t) => (t.checked = false));
+    this.recurrenceMonth.subCheckBox?.forEach((t) => (t.checked = false));
+    // @ts-ignore
+    this.recurrenceDay.subCheckBox[0].checked = true;
+    // @ts-ignore
+    this.recurrenceMonth.subCheckBox[0].checked = true;
+    this.errorMessageCheckboxDay = ' ';
+    this.errorMessageCheckboxMonth = ' ';
+  }
+
+  updateCheckboxDay(): void {
+      this.allDaysChecked =
+        this.recurrenceDay.subCheckBox != null &&
+        this.recurrenceDay.subCheckBox.every((t) => t.checked);
+      this.errorMessageCheckboxDay = ' ';
+  }
+
+  updateCheckboxMonth(): void {
+      this.allMonthsChecked =
+        this.recurrenceMonth.subCheckBox != null &&
+        this.recurrenceMonth.subCheckBox.every((t) => t.checked);
+      this.errorMessageCheckboxMonth = ' ';
+  }
+
+  // @ts-ignore
+  someCheckboxDay(): boolean {
+      if (this.recurrenceDay.subCheckBox == null) {
+        return false;
+      }
+      return (
+        this.recurrenceDay.subCheckBox.filter((t) => t.checked).length > 0 &&
+        !this.allDaysChecked
+      );
+  }
+
+  // @ts-ignore
+  someCheckboxMonth(): boolean {
+      if (this.recurrenceMonth.subCheckBox == null) {
+        return false;
+      }
+      return (
+        this.recurrenceMonth.subCheckBox.filter((t) => t.checked).length > 0 &&
+        !this.allMonthsChecked
+      );
+  }
+
+  setAllCheckboxDay(checked: boolean): void {
+      this.allDaysChecked = checked;
+      if (this.recurrenceDay.subCheckBox == null) {
+        return;
+      }
+      this.recurrenceDay.subCheckBox.forEach((t) => (t.checked = checked));
+  }
+
+  setAllCheckboxMonth(checked: boolean): void {
+      this.allMonthsChecked = checked;
+      if (this.recurrenceMonth.subCheckBox == null) {
+        return;
+      }
+      this.recurrenceMonth.subCheckBox.forEach((t) => (t.checked = checked));
+  }
+
   abstract submitQuery(body: any): void;
 
 }

client/src/app/components/audit-template/audit-template-view/create-audit-template/create-audit-template.component.ts

@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
-import {Router} from '@angular/router';
-import {AuditTemplateService} from '../../../../services/audit-template.service';
+import { Router } from '@angular/router';
+import { AuditTemplateService } from '../../../../services/audit-template.service';
 import { Template } from '../../Template';
-import {AuditTemplateViewComponent} from '../audit-template-view.component';
-
+import { AuditTemplateViewComponent } from '../audit-template-view.component';
 
 @Component({
   selector: 'app-create-audit-template',
@@ -30,26 +29,86 @@ export class CreateAuditTemplateComponent extends AuditTemplateViewComponent {
       bins: '',
       part_number: '',
       serial_number: '',
+      start_date: '',
+      repeat_every: this.repeatEvery,
+      on_day: this.dayArray,
+      for_month: this.monthArray,
+      time_zone_utc: this.timeZoneUTC,
     };
   }
 
+  checkLeadingZero(toCheck: string): string {
+    return (toCheck.length === 1) ? ('0' + toCheck) : toCheck;
+  }
+
   submitQuery(body: Template): void {
-    this.auditTemplateService.createTemplate(body).subscribe(
-      () => {
-        setTimeout(() => {
-          // Redirect user back to list of templates
-          this.router.navigate(['template']);
-        }, 1000); // Waiting 1 second before redirecting the user
-        this.initializeForm();
-        this.errorMessage = '';
-
-      },
-      (err) => {
-        // if backend returns an error
-        if (err.error) {
-          this.errorMessage = err.error;
+    this.dayArray = [];
+    this.monthArray = [];
+    const year = this.startDate.getFullYear();
+    const month = this.checkLeadingZero((this.startDate.getMonth() + 1).toString());
+    const day = this.checkLeadingZero(this.startDate.getDate().toString());
+    const hour = this.checkLeadingZero(this.startTime.split(':')[0].toString());
+    const minute = this.checkLeadingZero(this.startTime.split(':')[1].toString());
+
+    // Constructing date and time in ISO 8601 format e.g. 2021-01-18T15:37:42
+    const date = year + '-' + month + '-' + day + 'T' + hour + ':' + minute + ':00';
+
+    let checkedDay = false;
+    let checkedMonth = false;
+
+    if (!this.isRecurrenceChosen) {
+      // @ts-ignore
+      this.repeatEvery = null;
+    } else {
+      // Checking if at least one checkbox is checked from the sub checkbox as well as populating dayArray
+      // @ts-ignore
+      for (const checkbox of this.recurrenceDay.subCheckBox) {
+        // @ts-ignore
+        this.dayArray.push(checkbox.checked);
+        if (checkbox.checked) {
+          checkedDay = true;
         }
       }
-    );
+      // Checking if at least one checkbox is checked from the sub checkbox as well as populating monthArray
+      // @ts-ignore
+      for (const checkbox of this.recurrenceMonth.subCheckBox) {
+        // @ts-ignore
+        this.monthArray.push(checkbox.checked);
+        if (checkbox.checked) {
+          checkedMonth = true;
+        }
+      }
+    }
+
+    body.start_date = date;
+    body.repeat_every = this.repeatEvery;
+    body.on_day = this.dayArray;
+    body.for_month = this.monthArray;
+    body.time_zone_utc = this.timeZoneUTC;
+
+    if (this.panelOpenState && !checkedDay) {
+      this.errorMessageCheckboxDay = 'Please choose at least one day';
+    } else if (this.panelOpenState && !checkedMonth) {
+      this.errorMessageCheckboxMonth = 'Please choose at least one month';
+    } else {
+      this.auditTemplateService.createTemplate(body).subscribe(
+        () => {
+          setTimeout(() => {
+            // Redirect user back to list of templates
+            this.router.navigate(['template']).then(() => {
+            });
+          }, 1000); // Waiting 1 second before redirecting the user
+          this.initializeForm();
+          this.errorMessage = '';
+        },
+        (err) => {
+          // if backend returns an error
+          if (err.error) {
+            this.errorMessage = err.error;
+          }
+        }
+      );
+    }
   }
+
 }