Merge "Fixes of the darkMode"
[nonrtric.git] / dashboard / webapp-frontend / src / app / policy-control / policy-control.component.ts
1 /*-
2  * ========================LICENSE_START=================================
3  * O-RAN-SC
4  * %%
5  * Copyright (C) 2019 Nordix Foundation
6  * %%
7  * Licensed under the Apache License, Version 2.0 (the "License");
8  * you may not use this file except in compliance with the License.
9  * You may obtain a copy of the License at
10  *
11  *      http://www.apache.org/licenses/LICENSE-2.0
12  *
13  * Unless required by applicable law or agreed to in writing, software
14  * distributed under the License is distributed on an "AS IS" BASIS,
15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16  * See the License for the specific language governing permissions and
17  * limitations under the License.
18  * ========================LICENSE_END===================================
19  */
20 import { Component, OnInit, ViewChild } from '@angular/core';
21 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
22 import { MatSort } from '@angular/material/sort';
23 import { animate, state, style, transition, trigger } from '@angular/animations';
24 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
25
26 import { PolicyService } from '../services/policy/policy.service';
27 import { PolicyType } from '../interfaces/policy.types';
28 import { PolicyTypeDataSource } from './policy-type.datasource';
29 import { PolicyInstanceDataSource } from './policy-instance.datasource';
30 import { getPolicyDialogProperties } from './policy-instance-dialog.component';
31 import { PolicyInstanceDialogComponent } from './policy-instance-dialog.component';
32 import { PolicyInstance } from '../interfaces/policy.types';
33 import { NotificationService } from '../services/ui/notification.service';
34 import { ErrorDialogService } from '../services/ui/error-dialog.service';
35 import { ConfirmDialogService } from './../services/ui/confirm-dialog.service';
36 import { Subject } from 'rxjs';
37 import { UiService } from '../services/ui/ui.service';
38
39 class PolicyTypeInfo {
40     constructor(public type: PolicyType, public isExpanded: boolean) { }
41
42     isExpandedObservers: Subject<boolean> = new Subject<boolean>();
43 }
44
45 @Component({
46     selector: 'rd-policy-control',
47     templateUrl: './policy-control.component.html',
48     styleUrls: ['./policy-control.component.scss'],
49     animations: [
50         trigger('detailExpand', [
51             state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
52             state('expanded', style({ height: '*', visibility: 'visible' })),
53             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
54         ]),
55     ],
56 })
57 export class PolicyControlComponent implements OnInit {
58
59     policyTypesDataSource: PolicyTypeDataSource;
60     @ViewChild(MatSort, { static: true }) sort: MatSort;
61
62     expandedTypes = new Map<string, PolicyTypeInfo>();
63     darkMode: boolean;
64
65     constructor(
66         private policySvc: PolicyService,
67         private dialog: MatDialog,
68         private errorDialogService: ErrorDialogService,
69         private notificationService: NotificationService,
70         private confirmDialogService: ConfirmDialogService,
71         private ui: UiService) { }
72
73     ngOnInit() {
74         this.policyTypesDataSource = new PolicyTypeDataSource(this.policySvc, this.sort, this.notificationService);
75         this.policyTypesDataSource.loadTable();
76         this.ui.darkModeState.subscribe((isDark) => {
77             this.darkMode = isDark;
78         });
79     }
80
81     createPolicyInstance(policyType: PolicyType): void {
82         const dialogRef = this.dialog.open(PolicyInstanceDialogComponent, getPolicyDialogProperties(policyType, null, this.darkMode));
83         const info: PolicyTypeInfo = this.getPolicyTypeInfo(policyType);
84         dialogRef.afterClosed().subscribe(
85             (result: any) => {
86                 info.isExpandedObservers.next(info.isExpanded);
87             }
88         );
89     }
90
91     toggleListInstances(policyType: PolicyType): void {
92         const info = this.getPolicyTypeInfo(policyType);
93         info.isExpanded = !info.isExpanded;
94         info.isExpandedObservers.next(info.isExpanded);
95     }
96
97     getPolicyTypeInfo(policyType: PolicyType): PolicyTypeInfo {
98         let info: PolicyTypeInfo = this.expandedTypes.get(policyType.name);
99         if (!info) {
100             info = new PolicyTypeInfo(policyType, false);
101             this.expandedTypes.set(policyType.name, info);
102         }
103         return info;
104     }
105
106     isInstancesShown(policyType: PolicyType): boolean {
107         return this.getPolicyTypeInfo(policyType).isExpanded;
108     }
109
110     getPolicyTypeName(type: PolicyType): string {
111         const schema = JSON.parse(type.create_schema);
112         if (schema.title) {
113             return schema.title;
114         }
115         return type.name;
116     }
117
118     getObservable(policyType: PolicyType): Subject<boolean> {
119         return this.getPolicyTypeInfo(policyType).isExpandedObservers;
120     }
121 }