Skip to content

Commit

Permalink
argoproj#46 Added 'Email' input to be able to add any user by email, …
Browse files Browse the repository at this point in the history 
…added validation.
  • Loading branch information
@wokeGit
wokeGit committed Oct 10, 2017
1 parent ccb7f69 commit f51e7d4
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 46 deletions.
137 changes: 105 additions & 32 deletions ...ultiple-service-launch-panel/setup-job-notifications/setup-job-notifications.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Component, Output, EventEmitter, OnInit } from '@angular/core';

import { PolicyNotification } from '../../../model';
import { CustomRegex } from '../../customValidators/CustomRegex';

@Component({
selector: 'ax-setup-job-notifications',
Expand All @@ -11,57 +12,65 @@ export class SetupJobNotificationsComponent implements OnInit {
@Output()
public onChange: EventEmitter<any> = new EventEmitter();


public eventTypes: any = {
items: [
{name: 'on_change', value: 'on_change', checked: false},
{name: 'on_cron', value: 'on_cron', checked: false},
{name: 'on_failure', value: 'on_failure', checked: false},
{name: 'on_pull_request', value: 'on_pull_request', checked: false},
{name: 'on_pull_request_merge', value: 'on_pull_request_merge', checked: false},
{name: 'on_push', value: 'on_push', checked: false},
{name: 'on_start', value: 'on_start', checked: false},
{name: 'on_success', value: 'on_success', checked: false},
],
messages: {
name: 'JOB EVENTS',
public notification: any = {
eventType: {
items: [
{name: 'on_change', value: 'on_change', checked: false},
{name: 'on_cron', value: 'on_cron', checked: false},
{name: 'on_failure', value: 'on_failure', checked: false},
{name: 'on_pull_request', value: 'on_pull_request', checked: false},
{name: 'on_pull_request_merge', value: 'on_pull_request_merge', checked: false},
{name: 'on_push', value: 'on_push', checked: false},
{name: 'on_start', value: 'on_start', checked: false},
{name: 'on_success', value: 'on_success', checked: false},
],
messages: {
name: 'JOB EVENTS',
},
isVisible: false,
isStaticList: true,
isDisplayedInline: true,
},
isVisible: false,
isStaticList: true,
isDisplayedInline: true,

isArgoUsersAndGroupsVisible: false,
isSlackChannelsVisible: false,
notificationRules: {
isEmailVisible: false,
rules: {
whom: [],
when: []
},
outsideUsers: [],
filteredOutsideUsers: [],
validationMessages: {
eventType: { show: false, text: 'You have to choose at least one Event Type' },
wrongFormatRecipients: { show: false, text: 'Recipients have to be an email format' }
}
};

public notificationRules: PolicyNotification[] = [];
public eventTypesList: any[] = [];
public rules: PolicyNotification[] = [];
public notificationsList: any[] = [];
public isVisibleUserSelectorPanel: boolean = false;
public isVisibleSlackPanel: boolean = false;
public axUsersAndGroupsList: string[] = [];
public axSlackChannelsList: string[] = [];
public selectedId: number = 0;


ngOnInit() {
if (!this.notificationRules.length) {
if (!this.rules.length) {
this.addNotificationRule();
}
}

public onEventTypeChange(when: string[], index) {
this.eventTypes[index].notificationRules.when = when;
public onRuleChange(when: string[], index) {
this.notificationsList[index].rules.when = when;
this.notificationsList[index].validationMessages.eventType.show = false;
}

public addNotificationRule() {
this.eventTypesList.push(JSON.parse(JSON.stringify(this.eventTypes)));
this.notificationsList.push(JSON.parse(JSON.stringify(this.notification)));
}

public removeNotificationRule(index) {
this.eventTypesList.splice(index, 1);
this.notificationsList.splice(index, 1);
}

public openUserSelectorPanel(index) {
Expand All @@ -83,15 +92,18 @@ export class SetupJobNotificationsComponent implements OnInit {
}

public getOutsideUsers(index) {
return this.eventTypesList[index].notificationRules.whom.filter(recipient => recipient.indexOf('@user') !== -1).sort();
this.notificationsList[index].filteredOutsideUsers =
this.notificationsList[index].rules.whom.recipients.filter(recipient => recipient.indexOf('@user') !== -1).sort();
this.notificationsList[index].outsideUsers = this.notificationsList[index].filteredOutsideUsers.map(user => user.substring(0, user.indexOf('@user')));
return this.notificationsList[index].rules.whom.filter(recipient => recipient.indexOf('@user') !== -1).sort();
}

public getOnlyUsersAndGroups(index) {
return this.eventTypesList[index].notificationRules.whom.filter(recipient => recipient.indexOf('@slack') === -1 && recipient.indexOf('@user') === -1).sort();
return this.notificationsList[index].rules.whom.filter(recipient => recipient.indexOf('@slack') === -1 && recipient.indexOf('@user') === -1).sort();
}

public getOnlySlackChannels(index) {
return this.eventTypesList[index].notificationRules.whom.filter(recipient => recipient.indexOf('@slack') !== -1).sort();
return this.notificationsList[index].rules.whom.filter(recipient => recipient.indexOf('@slack') !== -1).sort();
}

public updateUsersList(users: string[]) {
Expand All @@ -104,7 +116,68 @@ export class SetupJobNotificationsComponent implements OnInit {
}

public updateNotificationWhomList(list: string[]) {
this.eventTypesList[this.selectedId].notificationRules.whom =
this.eventTypesList[this.selectedId].notificationRules.whom.concat(list).filter((value, index, self) => self.indexOf(value) === index );
this.notificationsList[this.selectedId].rules.whom =
this.notificationsList[this.selectedId].rules.whom.concat(list).filter((value, index, self) => self.indexOf(value) === index );
}

public updateOutsideUsers(users: string, index) {
// i moved scope up, to be able to validate on click submit btn
this.notificationsList[index].outsideUsers = users.split(',');
this.notificationsList[index].filteredOutsideUsers =
this.notificationsList[index].outsideUsers.filter(user => CustomRegex.emailPattern.test(user.trim())).map(user => `${user}@user`);
this.notificationsList[index].validationMessages.wrongFormatRecipients.show = false;
}

public argoUsersAndGroupsCheckboxChange(notification) {
notification.isArgoUsersAndGroupsVisible = !notification.isArgoUsersAndGroupsVisible;
if (!notification.isArgoUsersAndGroupsVisible) {
notification.rules.whom = notification.rules.whom.filter(recipient => (recipient.indexOf('@slack') !== -1 || recipient.indexOf('@user') !== -1)).sort();
}
}

public emailCheckboxChange(notification) {
notification.isEmailVisible = !notification.isEmailVisible;
if (!notification.isEmailVisible) {
notification.outsideUsers = [];
notification.filteredOutsideUsers = [];
notification.rules.whom = notification.rules.whom.filter(recipient => (recipient.indexOf('@user') === -1)).sort();
}
}

public slackChannelsCheckboxChange(notification) {
notification.isSlackChannelsVisible = !notification.isSlackChannelsVisible;
if (!notification.isSlackChannelsVisible) {
notification.rules.whom = notification.rules.whom.filter(recipient => (recipient.indexOf('@slack') === -1)).sort();
}
}

test() {
let isAnyError = false;
this.notificationsList.forEach(notification => {
if (!notification.rules.when.length) {
notification.validationMessages.eventType.show = true;
isAnyError = true;
}

if (notification.outsideUsers.length !== notification.filteredOutsideUsers.length && notification.outsideUsers.toString().length) {
notification.validationMessages.wrongFormatRecipients.show = true;
isAnyError = true;
} else {
// remove all '@user' elements from rules.whom
notification.rules.whom = notification.rules.whom.filter(item => item.indexOf('@user') === -1);
this.updateNotificationWhomList(notification.filteredOutsideUsers);
}
});

// if there is error in any notification rule, don't allow to submit
if (isAnyError) {
return;
}

let notifications = this.notificationsList.map(notification => {
return notification.rules;
});

console.log('notificationsList', notifications, this.notificationsList);
}
}
41 changes: 27 additions & 14 deletions ...common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<div class="panel-box__content">
<div class="panel-box__title">
Set Up Job Notifications
<button class="ax-button ax-button--base" (click)="test()">TEST</button>
</div>
<div class="panel-box__subtitle">
Set up notifications for job events.
Expand All @@ -12,7 +13,7 @@
<span class="notification-row__plus-icon">+</span> {{ 'Add Notification Rule' | translate | uppercase }}
</a>
</div>
<div *ngFor="let eventType of eventTypesList; let i = index">
<div *ngFor="let notification of notificationsList; let i = index">
<div class="shaded-box__content margin-bottom-medium">
<a class="fr" (click)="removeNotificationRule(i)"><i class="ax-icon-close"></i></a>
<div class="notification-row">
Expand All @@ -22,13 +23,14 @@ <h5>{{ 'Selected Job Events:' | uppercase }}</h5>
<div class="notification-row__events-selector">
<ax-filter-multi-select
[brightStyle]="true"
[texts]="eventType.messages"
[items]="eventType.items"
[isStaticList]="eventType.isStaticList"
[isDisplayedInline]="eventType.isDisplayedInline"
[texts]="notification.eventType.messages"
[items]="notification.eventType.items"
[isStaticList]="notification.eventType.isStaticList"
[isDisplayedInline]="notification.eventType.isDisplayedInline"
[selectedItems]="[]"
(onChange)="onEventTypeChange($event, i)">
(onChange)="onRuleChange($event, i)">
</ax-filter-multi-select>
<span class="error-msg" *ngIf="notification.validationMessages.eventType.show">{{ notification.validationMessages.eventType.text }}</span>
</div>

<h5>{{ 'Select Recipients:' | uppercase }}</h5>
Expand All @@ -37,12 +39,12 @@ <h5>{{ 'Select Recipients:' | uppercase }}</h5>
<div>
<div class="notification-row__list-item">
<div class="ax-checkbox">
<input type="checkbox" id="users_and_groups_{{ i }}" [(ngModel)]="eventType.isArgoUsersAndGroupsVisible">
<input type="checkbox" id="users_and_groups_{{ i }}" (change)="argoUsersAndGroupsCheckboxChange(notification)">
<span><i class="fa fa-check"></i></span>
</div>
<label for="users_and_groups_{{ i }}">{{ 'Argo Users and Groups' | translate }}</label>

<div [hidden]="!eventType.isArgoUsersAndGroupsVisible">
<div [hidden]="!notification.isArgoUsersAndGroupsVisible">
<div class="labels-horizontal-list">
<div class="labels-horizontal-list__top">
<div class="labels-horizontal-list__add labels-horizontal-list__add--no-padding">
Expand All @@ -52,7 +54,7 @@ <h5>{{ 'Select Recipients:' | uppercase }}</h5>
<div class="labels-horizontal-list__content">
<div class="notification-row__input-adjustment">
<div class="labels-horizontal-list__white-panel labels-horizontal-list__white-panel--small clickable" (click)="openUserSelectorPanel(i)">
<template ngFor let-user [ngForOf]="eventTypesList[i].notificationRules.whom ? getOnlyUsersAndGroups(i) : []">
<template ngFor let-user [ngForOf]="notification.rules.whom ? getOnlyUsersAndGroups(i) : []">
<span>{{ user }}</span>
</template>
</div>
Expand All @@ -64,20 +66,31 @@ <h5>{{ 'Select Recipients:' | uppercase }}</h5>

<div class="notification-row__list-item">
<div class="ax-checkbox">
<input type="checkbox" id="email">
<input type="checkbox" id="email_{{ i }}" (change)="emailCheckboxChange(notification)">
<span><i class="fa fa-check"></i></span>
</div>
<label for="email">{{ 'Email' | translate }}</label>
<label for="email_{{ i }}">{{ 'Email' | translate }}</label>

<div [hidden]="!notification.isEmailVisible">
<div class="labels-horizontal-list">
<div class="labels-horizontal-list__content notification-row__input-adjustment">
<textarea [ngModel]="notification.outsideUsers" (ngModelChange)='updateOutsideUsers($event, i)' placeholder="jondoe@mail.com, johnsmith@mail.com"></textarea>
<span class="error-msg" *ngIf="notification.validationMessages.wrongFormatRecipients.show">
{{ notification.validationMessages.wrongFormatRecipients.text }}
</span>
</div>
</div>
</div>
</div>

<div class="notification-row__list-item">
<div class="ax-checkbox">
<input type="checkbox" id="slack_channels_{{ i }}" [(ngModel)]="eventType.isSlackChannelsVisible">
<input type="checkbox" id="slack_channels_{{ i }}" (change)="slackChannelsCheckboxChange(notification)">
<span><i class="fa fa-check"></i></span>
</div>
<label for="slack_channels_{{ i }}">{{ 'Slack Channels' | translate }}</label>

<div [hidden]="!eventType.isSlackChannelsVisible">
<div [hidden]="!notification.isSlackChannelsVisible">
<div class="labels-horizontal-list">
<div class="labels-horizontal-list__top">
<div class="labels-horizontal-list__add labels-horizontal-list__add--no-padding">
Expand All @@ -87,7 +100,7 @@ <h5>{{ 'Select Recipients:' | uppercase }}</h5>
<div class="labels-horizontal-list__content">
<div class="notification-row__input-adjustment">
<div class="labels-horizontal-list__white-panel labels-horizontal-list__white-panel--small clickable" (click)="openSlackChannelPanel(i)">
<template ngFor let-channel [ngForOf]="eventTypesList[i].notificationRules.whom ? getOnlySlackChannels(i) : []">
<template ngFor let-channel [ngForOf]="notification.rules.whom ? getOnlySlackChannels(i) : []">
<span>{{ channel }}</span>
</template>
</div>
Expand Down

0 comments on commit f51e7d4

Please sign in to comment.