-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issue #54 - User story 3.6 - Scheduling audits #233
Changes from 46 commits
4089ef1
a99791d
79926ef
750b12e
e324ac4
d11c90a
afc34ea
0f4d870
7138a35
4d6943c
55acfa7
fb4ca56
506e879
42eb82f
9d5792b
e111a0c
6acc5f9
c935b8b
f96cc31
655de63
f2768f5
b6babda
c448e9d
f52fc1f
a3de150
9240c15
4b64d41
0713895
145d7a3
0be413d
88eef72
3e56bd4
be17b67
9b1b5b4
3e05b75
cce6aa4
033f859
c4683cb
f82cf11
24e6b10
0bca33d
a716d26
5270ba6
6212867
5b2d708
c49652f
c395d89
e253a62
7c14c51
2c937ac
a1179fa
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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,83 @@ 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 = ' '; | ||
} | ||
|
||
updateAllCheckbox(type: string): void { | ||
if (type === 'dayCheckbox') { | ||
this.allDaysChecked = | ||
this.recurrenceDay.subCheckBox != null && | ||
this.recurrenceDay.subCheckBox.every((t) => t.checked); | ||
this.errorMessageCheckboxDay = ' '; | ||
} else if (type === 'monthCheckbox') { | ||
this.allMonthsChecked = | ||
this.recurrenceMonth.subCheckBox != null && | ||
this.recurrenceMonth.subCheckBox.every((t) => t.checked); | ||
this.errorMessageCheckboxMonth = ' '; | ||
} | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I didn't check to see if this would work, with the HTML, but I was wondering, could you split this into 2 functions and avoid having to pass in a string? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. updateAllCheckbox has now been split into two function named: updateCheckboxDay and updateCheckboxMonth. |
||
|
||
// @ts-ignore | ||
someCheckbox(type: string): boolean { | ||
if (type === 'dayCheckbox') { | ||
if (this.recurrenceDay.subCheckBox == null) { | ||
return false; | ||
} | ||
return ( | ||
this.recurrenceDay.subCheckBox.filter((t) => t.checked).length > 0 && | ||
!this.allDaysChecked | ||
); | ||
} else if (type === 'monthCheckbox') { | ||
if (this.recurrenceMonth.subCheckBox == null) { | ||
return false; | ||
} | ||
return ( | ||
this.recurrenceMonth.subCheckBox.filter((t) => t.checked).length > 0 && | ||
!this.allMonthsChecked | ||
); | ||
} | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same applies here, I'm not sure if this would fit with the HTML, but if yes, moving this into 2 functions would make more sense to avoid having to check. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. someCheckbox has now been split into two function named: someCheckboxDay and someCheckboxMonth. |
||
|
||
setAllCheckbox(checked: boolean, type: string): void { | ||
if (type === 'dayCheckbox') { | ||
this.allDaysChecked = checked; | ||
if (this.recurrenceDay.subCheckBox == null) { | ||
return; | ||
} | ||
this.recurrenceDay.subCheckBox.forEach((t) => (t.checked = checked)); | ||
} else if (type === 'monthCheckbox') { | ||
this.allMonthsChecked = checked; | ||
if (this.recurrenceMonth.subCheckBox == null) { | ||
return; | ||
} | ||
this.recurrenceMonth.subCheckBox.forEach((t) => (t.checked = checked)); | ||
} | ||
} | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same concept as previous 2 comments There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. setAllCheckbox has now been split into two function named: setAllCheckboxDay and setAllCheckboxMonth. |
||
abstract submitQuery(body: any): void; | ||
|
||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,9 @@ | ||
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'; | ||
|
||
|
||
@Component({ | ||
selector: 'app-create-audit-template', | ||
templateUrl: '../audit-template-view.component.html', | ||
|
@@ -30,26 +29,83 @@ 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, | ||
}; | ||
} | ||
|
||
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.startDate.getMonth() + 1).toString().length === 1) ? | ||
('0' + (this.startDate.getMonth() + 1)) : ((this.startDate.getMonth() + 1)); | ||
const day = (this.startDate.getDate().toString().length === 1) ? ('0' + (this.startDate.getDate())) : (this.startDate.getDate()); | ||
const hour = (parseInt(this.startTime.split(':')[0], 10).toString().length === 1) ? | ||
('0' + (parseInt(this.startTime.split(':')[0], 10))) : (parseInt(this.startTime.split(':')[0], 10)); | ||
const minute = (parseInt(this.startTime.split(':')[1], 10).toString().length === 1) ? | ||
('0' + (parseInt(this.startTime.split(':')[1], 10))) : (parseInt(this.startTime.split(':')[1], 10)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This gives me a headache to look at and try to understand. Can we take each of these statements and inline them with a function instead? This would make them much more readable if the function names are properly defined. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This has been fixed There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I see what you did, but I would prefer each of these assignments were done with their own function instead of dumping the functionality into an already long function. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oops, I see what you meant! Sorry I misunderstood earlier. This has been fixed now 😄 |
||
|
||
// Constructing date and time in ISO 8601 format e.g. 2021-01-18T15:37:42Z | ||
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; | ||
} | ||
} | ||
); | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we not use ng-deep here.
Last time we tried to use this, it ended up modifying the scss for the entire material library and it ended up messing up other components
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also tend to avoid it but unfortunately for checkbox specifically, I have no choice but to use ng-deep in order to force the style down to the child as it won't overwrite the CSS.