From ccb7f69a7dff4a691756663e28f3eb2493a72157 Mon Sep 17 00:00:00 2001 From: wokeGit Date: Mon, 9 Oct 2017 16:44:22 +0200 Subject: [PATCH] #46 Added 'Slack Channels' side panel, style adjustment. --- .../setup-job-notifications.component.ts | 53 +++++++++++++++---- .../setup-job-notifications.html | 46 +++++++++++----- .../setup-job-notifications.scss | 14 +++++ .../elements/_labels-horizontal-list.scss | 12 +++++ 4 files changed, 103 insertions(+), 22 deletions(-) diff --git a/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.component.ts b/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.component.ts index f1b893c8222b..bc3e53a6ef64 100644 --- a/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.component.ts +++ b/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.component.ts @@ -11,7 +11,6 @@ export class SetupJobNotificationsComponent implements OnInit { @Output() public onChange: EventEmitter = new EventEmitter(); - public notificationRules: PolicyNotification[] = []; public eventTypes: any = { items: [ @@ -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; @@ -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); } @@ -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 ); } } diff --git a/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.html b/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.html index 88f2ef8a5ae0..cfa63b478c96 100644 --- a/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.html +++ b/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.html @@ -35,7 +35,7 @@
{{ 'Select Recipients:' | uppercase }}
-
+
@@ -45,22 +45,24 @@
{{ 'Select Recipients:' | uppercase }}
-
- + add users +
+
-
- +
+
+ +
-
+
@@ -68,12 +70,31 @@
{{ 'Select Recipients:' | uppercase }}
-
+
- +
- + + +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
@@ -84,4 +105,5 @@
{{ 'Select Recipients:' | uppercase }}
- \ No newline at end of file + + \ No newline at end of file diff --git a/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.scss b/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.scss index 8a242322931e..19ffef4248ff 100644 --- a/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.scss +++ b/saas/axops/src/ui/src/app/common/multiple-service-launch-panel/setup-job-notifications/setup-job-notifications.scss @@ -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; + } } } \ No newline at end of file diff --git a/saas/axops/src/ui/src/assets/styles/elements/_labels-horizontal-list.scss b/saas/axops/src/ui/src/assets/styles/elements/_labels-horizontal-list.scss index 5ec21f1817f8..8725250c1228 100644 --- a/saas/axops/src/ui/src/assets/styles/elements/_labels-horizontal-list.scss +++ b/saas/axops/src/ui/src/assets/styles/elements/_labels-horizontal-list.scss @@ -25,6 +25,14 @@ line-height: 20px; vertical-align: middle; } + + &--no-padding { + padding: 0; + + i { + font-size: 38px; + } + } } &__content { @@ -64,5 +72,9 @@ padding: 1px 10px; border-radius: $border-radius; } + + &--small { + min-height: 36px; + } } } \ No newline at end of file