Skip to content

Commit

Permalink
argoproj#46 Added 'Slack Channels' side panel, style adjustment.
Browse files Browse the repository at this point in the history
  • Loading branch information
@wokeGit
wokeGit committed Oct 9, 2017
1 parent eeef181 commit ccb7f69
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 22 deletions.
53 changes: 43 additions & 10 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
Expand Up @@ -11,7 +11,6 @@ export class SetupJobNotificationsComponent implements OnInit {
@Output()
public onChange: EventEmitter<any> = new EventEmitter();

public notificationRules: PolicyNotification[] = [];

public eventTypes: any = {
items: [
Expand All @@ -30,12 +29,20 @@ export class SetupJobNotificationsComponent implements OnInit {
isVisible: false,
isStaticList: true,
isDisplayedInline: true,
isArgoUsersAndGroupsVisible: false
isArgoUsersAndGroupsVisible: false,
isSlackChannelsVisible: false,
notificationRules: {
whom: [],
when: []
}
};

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


Expand All @@ -46,18 +53,14 @@ export class SetupJobNotificationsComponent implements OnInit {
}

public onEventTypeChange(when: string[], index) {
console.log('onEventTypeChange', event, index);
this.notificationRules[index].when = when;
console.log('this.notificationRules', this.notificationRules);
this.eventTypes[index].notificationRules.when = when;
}

public addNotificationRule() {
this.eventTypesList.push(JSON.parse(JSON.stringify(this.eventTypes)));
this.notificationRules.push({ whom: [], when: []});
}

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

Expand All @@ -70,8 +73,38 @@ export class SetupJobNotificationsComponent implements OnInit {
this.isVisibleUserSelectorPanel = false;
}

public updateUsersList(whom: string[]) {
console.log('updateUsersList', whom, this.selectedId, this. notificationRules);
this.notificationRules[this.selectedId].whom = whom;
public openSlackChannelPanel(index) {
this.isVisibleSlackPanel = true;
this.selectedId = index;
}

public closeSlackChannelPalen() {
this.isVisibleSlackPanel = false;
}

public getOutsideUsers(index) {
return this.eventTypesList[index].notificationRules.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();
}

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

public updateUsersList(users: string[]) {
this.updateNotificationWhomList(users);
}

public updateSlackChannelsList(channels: string[]) {
let axSlackChannelsList = channels.map(channel => `${channel}@slack`);
this.updateNotificationWhomList(axSlackChannelsList);
}

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 );
}
}
46 changes: 34 additions & 12 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
Expand Up @@ -35,7 +35,7 @@ <h5>{{ 'Select Recipients:' | uppercase }}</h5>
<hr>

<div>
<div class="">
<div class="notification-row__list-item">
<div class="ax-checkbox">
<input type="checkbox" id="users_and_groups_{{ i }}" [(ngModel)]="eventType.isArgoUsersAndGroupsVisible">
<span><i class="fa fa-check"></i></span>
Expand All @@ -45,35 +45,56 @@ <h5>{{ 'Select Recipients:' | uppercase }}</h5>
<div [hidden]="!eventType.isArgoUsersAndGroupsVisible">
<div class="labels-horizontal-list">
<div class="labels-horizontal-list__top">
<div class="labels-horizontal-list__add">
<a (click)="openUserSelectorPanel(i)"><span>+</span> add users</a>
<div class="labels-horizontal-list__add labels-horizontal-list__add--no-padding">
<a (click)="openUserSelectorPanel(i)"><i class="ax-icon-new"></i></a>
</div>
</div>
<div class="labels-horizontal-list__content">
<div class="labels-horizontal-list__white-panel clickable" (click)="openUserSelectorPanel(i)">
<template ngFor let-user [ngForOf]="notificationRules[i].whom ? notificationRules[i].whom : []">
<span>{{ user }}</span>
</template>
<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) : []">
<span>{{ user }}</span>
</template>
</div>
</div>
</div>
</div>
</div>
</div>

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

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

<div [hidden]="!eventType.isSlackChannelsVisible">
<div class="labels-horizontal-list">
<div class="labels-horizontal-list__top">
<div class="labels-horizontal-list__add labels-horizontal-list__add--no-padding">
<a (click)="openSlackChannelPanel(i)"><i class="ax-icon-new"></i></a>
</div>
</div>
<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) : []">
<span>{{ channel }}</span>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Expand All @@ -84,4 +105,5 @@ <h5>{{ 'Select Recipients:' | uppercase }}</h5>
</div>
</div>

<ax-users-selector-panel [show]="isVisibleUserSelectorPanel" [selectedUsers]="notificationRules[selectedId].whom ? notificationRules[selectedId].whom : []" (onChange)="updateUsersList($event)" (onClose)="closeUserSelectorPanel()"></ax-users-selector-panel>
<ax-users-selector-panel [show]="isVisibleUserSelectorPanel" [selectedUsers]="[]" (onChange)="updateUsersList($event)" (onClose)="closeUserSelectorPanel()"></ax-users-selector-panel>
<ax-slack-channels-panel [show]="isVisibleSlackPanel" [selectedChannels]="[]" (onChange)="updateSlackChannelsList($event)" (onClose)="closeSlackChannelPalen()"></ax-slack-channels-panel>
14 changes: 14 additions & 0 deletions ...common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,19 @@

&__events-selector {
margin-top: 20px;
width: 50%;
}

&__input-adjustment {
margin-left: 30px;
margin-right: 60px;
}

&__list-item {
margin-bottom: 15px;

label {
font-size: 14px;
}
}
}
12 changes: 12 additions & 0 deletions saas/axops/src/ui/src/assets/styles/elements/_labels-horizontal-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,14 @@
line-height: 20px;
vertical-align: middle;
}

&--no-padding {
padding: 0;

i {
font-size: 38px;
}
}
}

&__content {
Expand Down Expand Up @@ -64,5 +72,9 @@
padding: 1px 10px;
border-radius: $border-radius;
}

&--small {
min-height: 36px;
}
}
}

0 comments on commit ccb7f69

Please sign in to comment.