mirror of
https://github.com/zitadel/zitadel.git
synced 2025-02-28 20:57:24 +00:00
feat(console): organization overview table, table, org context filtering, fix grpc error log, cleanup pipes (#796)
* chore(deps-dev): bump @angular/cli from 10.0.8 to 10.1.3 in /console (#785) Bumps [@angular/cli](https://github.com/angular/angular-cli) from 10.0.8 to 10.1.3. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v10.0.8...v10.1.3) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular-devkit/build-angular in /console (#784) Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1000.8 to 0.1001.3. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <max@caos.ch> * chore(deps-dev): bump @angular/language-service in /console (#783) Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 10.1.0 to 10.1.3. - [Release notes](https://github.com/angular/angular/releases) - [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md) - [Commits](https://github.com/angular/angular/commits/10.1.3/packages/language-service) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump stylelint from 13.7.1 to 13.7.2 in /console (#782) Bumps [stylelint](https://github.com/stylelint/stylelint) from 13.7.1 to 13.7.2. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint/compare/13.7.1...13.7.2) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump karma from 5.2.1 to 5.2.3 in /console (#781) Bumps [karma](https://github.com/karma-runner/karma) from 5.2.1 to 5.2.3. - [Release notes](https://github.com/karma-runner/karma/releases) - [Changelog](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md) - [Commits](https://github.com/karma-runner/karma/compare/v5.2.1...v5.2.3) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump moment from 2.27.0 to 2.29.0 in /console (#780) Bumps [moment](https://github.com/moment/moment) from 2.27.0 to 2.29.0. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](https://github.com/moment/moment/compare/2.27.0...2.29.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/node from 14.6.4 to 14.11.2 in /console (#778) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.6.4 to 14.11.2. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump prettier from 2.1.1 to 2.1.2 in /console (#757) Bumps [prettier](https://github.com/prettier/prettier) from 2.1.1 to 2.1.2. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/master/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/2.1.1...2.1.2) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump ts-protoc-gen from 0.12.0 to 0.13.0 in /console (#737) Bumps [ts-protoc-gen](https://github.com/improbable-eng/ts-protoc-gen) from 0.12.0 to 0.13.0. - [Release notes](https://github.com/improbable-eng/ts-protoc-gen/releases) - [Changelog](https://github.com/improbable-eng/ts-protoc-gen/blob/master/CHANGELOG.md) - [Commits](https://github.com/improbable-eng/ts-protoc-gen/compare/0.12.0...0.13.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump jasmine-spec-reporter in /console (#762) Bumps [jasmine-spec-reporter](https://github.com/bcaudan/jasmine-spec-reporter) from 5.0.2 to 6.0.0. - [Release notes](https://github.com/bcaudan/jasmine-spec-reporter/releases) - [Changelog](https://github.com/bcaudan/jasmine-spec-reporter/blob/master/CHANGELOG.md) - [Commits](https://github.com/bcaudan/jasmine-spec-reporter/compare/v5.0.2...v6.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <max@caos.ch> * fix: package * change html lang to translation lang * disable detail view org idp * catch errorcode 16 in auth response interceptor * new icons * refactor pipes, idp table config * fix router guard * lint * allowed commonjs deps * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <florian@caos.ch> * clear table warning * org overview table, header filter * toolbar filter * user table filter * fix org filter themed color, reject error * org context filter * button cleanup * commonjs deps, remove a11y module * replace progressbar with spinner * dynamic user, org filter * ts lint, scss lint * cleanup table, row highlighting * lint * fix i18n description, refresh idp list in login p * remove async from grpc services, fix external idp * remove external idp * fix theme toggle * change iam policy header i18n * sticky action columns * lint * add i18n filter to user, remove unused org code Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Florian Forster <florian@caos.ch>
This commit is contained in:
Max Peintner
GitHub
parent
bdcf9fcc5c
commit
124988e2d2
@ -34,9 +34,7 @@
|
||||
"scripts": [],
|
||||
"allowedCommonJsDependencies": [
|
||||
"@angular/common/locales/de",
|
||||
"src/app/proto/generated/*.js",
|
||||
"src/app/proto/generated/**/*.js",
|
||||
"src/app/proto/generated/auth_pb",
|
||||
"src/app/proto/generated/**",
|
||||
"file-saver",
|
||||
"qrcode"
|
||||
]
|
||||
|
||||
@ -77,6 +77,38 @@ export const navAnimations: Array<AnimationTriggerMetadata> = [
|
||||
]),
|
||||
];
|
||||
|
||||
|
||||
export const enterAnimations: Array<AnimationTriggerMetadata> = [
|
||||
trigger('appearfade', [
|
||||
transition(':enter', [
|
||||
style({
|
||||
transform: 'scale(.9) translateY(-10%)',
|
||||
opacity: 0,
|
||||
}),
|
||||
animate(
|
||||
'100ms ease-in-out',
|
||||
style({
|
||||
transform: 'scale(1) translateY(0%)',
|
||||
opacity: 1,
|
||||
}),
|
||||
),
|
||||
]),
|
||||
transition(':leave', [
|
||||
style({
|
||||
transform: 'scale(1) translateY(0%)',
|
||||
opacity: 1,
|
||||
}),
|
||||
animate(
|
||||
'100ms ease-in-out',
|
||||
style({
|
||||
transform: 'scale(.9) translateY(-10%)',
|
||||
opacity: 0,
|
||||
}),
|
||||
),
|
||||
]),
|
||||
]),
|
||||
];
|
||||
|
||||
export const routeAnimations: AnimationTriggerMetadata = trigger('routeAnimations', [
|
||||
transition('HomePage => AddPage', [
|
||||
style({ transform: 'translateX(100%)', opacity: 0.5 }),
|
||||
|
||||
@ -12,22 +12,31 @@
|
||||
</ng-template>
|
||||
</a>
|
||||
|
||||
<button (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button
|
||||
[matMenuTriggerFor]="menu">{{org?.name ? org.name : 'NO NAME'}}
|
||||
<button (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button [matMenuTriggerFor]="menu"
|
||||
(menuOpened)="focusFilter()">{{org?.name ? org.name : 'NO NAME'}}
|
||||
<mat-icon>
|
||||
arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #menu="matMenu">
|
||||
<mat-progress-bar *ngIf="orgLoading" color="accent" mode="indeterminate"></mat-progress-bar>
|
||||
<button class="show-all" mat-menu-item
|
||||
[routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' | translate}}</button>
|
||||
<mat-menu class="menu" #menu="matMenu">
|
||||
<div class="spinner-w">
|
||||
<mat-spinner diameter="20" *ngIf="orgLoading" color="accent">
|
||||
</mat-spinner>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="filter-form" appearance="fill">
|
||||
<input autocomplete="off" matInput (click)="$event.stopPropagation()" (keyup)="applyFilter($event)"
|
||||
placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}" #input>
|
||||
</mat-form-field>
|
||||
|
||||
<button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id"
|
||||
*ngFor="let temporg of orgs" mat-menu-item (click)="setActiveOrg(temporg)">
|
||||
{{temporg?.name ? temporg.name : 'NO NAME'}}
|
||||
</button>
|
||||
|
||||
<button class="show-all" mat-menu-item
|
||||
[routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' | translate}}</button>
|
||||
|
||||
<ng-template appHasRole [appHasRole]="['org.create','iam.write']">
|
||||
<button mat-menu-item [routerLink]="[ '/org/create' ]">
|
||||
<mat-icon class="avatar">add</mat-icon>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
.root-header {
|
||||
position: fixed;
|
||||
@ -159,13 +160,6 @@
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
margin: 1rem;
|
||||
border-radius: 1.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -229,3 +223,35 @@
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin textvar($theme) {
|
||||
.filter-form {
|
||||
margin: 0 .5rem;
|
||||
/* stylelint-disable */
|
||||
|
||||
$foreground: map-get($theme, foreground);
|
||||
color: mat-color($foreground, text) !important;
|
||||
}
|
||||
|
||||
.show-all {
|
||||
$primary: map-get($theme, primary);
|
||||
color: mat-color($primary, 300) !important;
|
||||
border-bottom: 2px solid #8795a1;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
|
||||
.spinner-w {
|
||||
top: 1rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { BreakpointObserver } from '@angular/cdk/layout';
|
||||
import { OverlayContainer } from '@angular/cdk/overlay';
|
||||
import { DOCUMENT, ViewportScroller } from '@angular/common';
|
||||
import { Component, HostBinding, Inject, OnDestroy, ViewChild } from '@angular/core';
|
||||
import { Component, ElementRef, HostBinding, Inject, OnDestroy, ViewChild } from '@angular/core';
|
||||
import { MatIconRegistry } from '@angular/material/icon';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
@ -11,7 +11,13 @@ import { Observable, of, Subscription } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
import { accountCard, navAnimations, routeAnimations, toolbarAnimation } from './animations';
|
||||
import { Org, UserProfileView } from './proto/generated/auth_pb';
|
||||
import {
|
||||
MyProjectOrgSearchKey,
|
||||
MyProjectOrgSearchQuery,
|
||||
Org,
|
||||
SearchMethod,
|
||||
UserProfileView,
|
||||
} from './proto/generated/auth_pb';
|
||||
import { AuthenticationService } from './services/authentication.service';
|
||||
import { GrpcAuthService } from './services/grpc-auth.service';
|
||||
import { ManagementService } from './services/mgmt.service';
|
||||
@ -32,6 +38,7 @@ import { UpdateService } from './services/update.service';
|
||||
})
|
||||
export class AppComponent implements OnDestroy {
|
||||
@ViewChild('drawer') public drawer!: MatDrawer;
|
||||
@ViewChild('input', { static: false }) input!: ElementRef;
|
||||
public isHandset$: Observable<boolean> = this.breakpointObserver
|
||||
.observe('(max-width: 599px)')
|
||||
.pipe(map(result => {
|
||||
@ -172,9 +179,17 @@ export class AppComponent implements OnDestroy {
|
||||
this.orgSub.unsubscribe();
|
||||
}
|
||||
|
||||
public loadOrgs(): void {
|
||||
public loadOrgs(filter?: string): void {
|
||||
let query;
|
||||
if (filter) {
|
||||
query = new MyProjectOrgSearchQuery();
|
||||
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
|
||||
query.setKey(MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME);
|
||||
query.setValue(filter);
|
||||
}
|
||||
|
||||
this.orgLoading = true;
|
||||
this.authService.SearchMyProjectOrgs(10, 0).then(res => {
|
||||
this.authService.SearchMyProjectOrgs(10, 0, query ? [query] : undefined).then(res => {
|
||||
this.orgs = res.toObject().resultList;
|
||||
this.orgLoading = false;
|
||||
}).catch(error => {
|
||||
@ -207,7 +222,6 @@ export class AppComponent implements OnDestroy {
|
||||
this.profile = userprofile;
|
||||
const lang = userprofile.preferredLanguage.match(/en|de/) ? userprofile.preferredLanguage : 'en';
|
||||
this.translate.use(lang);
|
||||
console.log(this.document.documentElement.lang);
|
||||
this.document.documentElement.lang = lang;
|
||||
});
|
||||
}
|
||||
@ -231,5 +245,18 @@ export class AppComponent implements OnDestroy {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public applyFilter(event: Event): void {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.loadOrgs(
|
||||
filterValue.trim().toLowerCase(),
|
||||
);
|
||||
}
|
||||
|
||||
focusFilter(): void {
|
||||
setTimeout(() => {
|
||||
this.input.nativeElement.focus();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,9 +7,12 @@ import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatNativeDateModule } from '@angular/material/core';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
@ -104,8 +107,11 @@ const authConfig: AuthConfig = {
|
||||
MatSidenavModule,
|
||||
MatCardModule,
|
||||
OutsideClickModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
HasRolePipeModule,
|
||||
MatProgressBarModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatToolbarModule,
|
||||
MatMenuModule,
|
||||
MatSnackBarModule,
|
||||
|
||||
@ -18,8 +18,4 @@
|
||||
.ok-button {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -103,11 +103,9 @@ export class ChangesComponent implements OnInit {
|
||||
this._loading.next(true);
|
||||
|
||||
return from(col).pipe(
|
||||
take(1),
|
||||
tap((res: Changes) => {
|
||||
let values = res.toObject().changesList;
|
||||
// If prepending, reverse the batch order
|
||||
values = false ? values.reverse() : values;
|
||||
|
||||
const values = res.toObject().changesList;
|
||||
// update source with new values, done loading
|
||||
this._data.next(values);
|
||||
|
||||
@ -118,12 +116,11 @@ export class ChangesComponent implements OnInit {
|
||||
this._done.next(true);
|
||||
}
|
||||
}),
|
||||
catchError(err => {
|
||||
catchError(_ => {
|
||||
this._loading.next(false);
|
||||
this.bottom = true;
|
||||
return of([]);
|
||||
}),
|
||||
take(1),
|
||||
).subscribe();
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
|
||||
.add-line-btn {
|
||||
margin-bottom: 1rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,7 +54,6 @@
|
||||
margin-top: 3rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
margin-top: 1rem;
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
*ngIf="selection.hasValue() && serviceType!=PolicyComponentServiceType.MGMT" [disabled]="disabled">
|
||||
<i class="las la-trash"></i>
|
||||
</button>
|
||||
<a class="add-button" [routerLink]="createRouterLink" color="primary" mat-raised-button [disabled]="disabled"
|
||||
<a [routerLink]="createRouterLink" color="primary" mat-raised-button [disabled]="disabled"
|
||||
*ngIf="serviceType!=PolicyComponentServiceType.MGMT">
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
@ -85,14 +85,14 @@
|
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row"
|
||||
<tr class="highlight"
|
||||
[ngClass]="{'disabled': serviceType==PolicyComponentServiceType.MGMT && row?.providerType == IdpProviderType.IDPPROVIDERTYPE_SYSTEM}"
|
||||
mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
[routerLink]="serviceType==PolicyComponentServiceType.ADMIN ? routerLinkForRow(row): null">
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<mat-paginator #paginator class="paginator" [length]="idpResult?.totalResult || 0" [pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
|
||||
</div>
|
||||
<mat-paginator #paginator class="paginator" [length]="idpResult?.totalResult || 0" [pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
|
||||
</app-refresh-table>
|
||||
@ -19,14 +19,6 @@
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.data-row {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,10 +30,6 @@ tr {
|
||||
}
|
||||
}
|
||||
|
||||
.add-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
|
||||
@ -33,7 +33,6 @@
|
||||
margin-bottom: 4rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
margin-top: 1rem;
|
||||
|
||||
@ -18,8 +18,4 @@
|
||||
.ok-button {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<app-detail-layout [backRouterLink]="backroutes" [title]="'ORG.POLICY.LOGIN_POLICY.TITLECREATE' | translate"
|
||||
[description]="serviceType==PolicyComponentServiceType.MGMT ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEMGMT' : PolicyComponentServiceType.ADMIN ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEADMIN' : '' | translate">
|
||||
[description]="(serviceType==PolicyComponentServiceType.MGMT ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEMGMT' : PolicyComponentServiceType.ADMIN ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEADMIN' : '') | translate">
|
||||
<ng-container *ngIf="(['policy.delete'] | hasRole | async) && serviceType == PolicyComponentServiceType.MGMT">
|
||||
<!--<button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
|
||||
mat-stroked-button>
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
@ -39,7 +34,6 @@ button {
|
||||
margin-top: 3rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,11 +11,11 @@ import {
|
||||
IdpView as AdminIdpView,
|
||||
} from 'src/app/proto/generated/admin_pb';
|
||||
import {
|
||||
IdpProviderType,
|
||||
IdpProviderView as MgmtIdpProviderView,
|
||||
IdpView as MgmtIdpView,
|
||||
LoginPolicy,
|
||||
LoginPolicyView, OrgDomainView,
|
||||
IdpProviderType,
|
||||
IdpProviderView as MgmtIdpProviderView,
|
||||
IdpView as MgmtIdpView,
|
||||
LoginPolicy,
|
||||
LoginPolicyView,
|
||||
} from 'src/app/proto/generated/management_pb';
|
||||
import { AdminService } from 'src/app/services/admin.service';
|
||||
import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
@ -151,7 +151,9 @@ export class LoginPolicyComponent implements OnDestroy {
|
||||
|
||||
dialogRef.afterClosed().subscribe(resp => {
|
||||
if (resp && resp.idp && resp.type) {
|
||||
this.addIdp(resp.idp, resp.type);
|
||||
this.addIdp(resp.idp, resp.type).then(() => {
|
||||
this.getData();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -177,15 +179,15 @@ export class LoginPolicyComponent implements OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
public get backroutes(): string[] {
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
return ['/org'];
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
return ['/iam'];
|
||||
break;
|
||||
public get backroutes(): string[] {
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
return ['/org'];
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
return ['/iam'];
|
||||
break;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
@ -39,6 +34,5 @@ button {
|
||||
margin-top: 3rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
@ -39,6 +34,5 @@ button {
|
||||
margin-top: 3rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
@ -39,6 +34,5 @@ button {
|
||||
margin-top: 3rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
@ -39,6 +35,5 @@ button {
|
||||
margin-top: 3rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,8 +13,7 @@
|
||||
</ng-template>
|
||||
<ng-template appHasRole actions
|
||||
[appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
|
||||
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
|
||||
mat-raised-button>
|
||||
<a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
</ng-template>
|
||||
@ -84,7 +83,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@ -2,10 +2,6 @@
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
|
||||
@ -31,12 +27,6 @@
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
|
||||
@ -19,8 +19,4 @@
|
||||
.ok-button {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
</button>
|
||||
</ng-template>
|
||||
<ng-template appHasRole [appHasRole]="['project.role.write:' + projectId, 'project.role.write']" actions>
|
||||
<a *ngIf="actionsVisible" [disabled]="disabled" class="rounded-button"
|
||||
[routerLink]="[ '/projects', projectId, 'roles', 'create']" color="primary" mat-raised-button>
|
||||
<a *ngIf="actionsVisible" [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'roles', 'create']"
|
||||
color="primary" mat-raised-button>
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
</ng-template>
|
||||
@ -57,7 +57,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50"
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
|
||||
.rounded-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
@ -31,12 +26,6 @@
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
|
||||
@ -13,9 +13,12 @@
|
||||
</div>
|
||||
<span class="fill-space"></span>
|
||||
<mat-spinner class="spinner" *ngIf="loading" diameter="20"></mat-spinner>
|
||||
<ng-content select="[actions]"></ng-content>
|
||||
|
||||
<button mat-icon-button (click)="emitRefresh()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
<ng-content select="[actions]"></ng-content>
|
||||
</div>
|
||||
<ng-content></ng-content>
|
||||
<div class="table-wrapper">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
@ -30,3 +30,8 @@
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<i class="las la-trash"></i>
|
||||
</button>
|
||||
<a *ngIf="allowCreate && context !== UserGrantContext.USER" matTooltip="{{'GRANTS.ADD' | translate}}" actions
|
||||
color="primary" class="add-button" color="primary" mat-raised-button [routerLink]="routerLink">
|
||||
color="primary" color="primary" mat-raised-button [routerLink]="routerLink">
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
|
||||
</a>
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row">
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@ -1,8 +1,3 @@
|
||||
|
||||
.add-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow: auto;
|
||||
|
||||
|
||||
@ -18,8 +18,4 @@
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,9 +34,9 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'IAM.FAILEDEVENTS.ACTIONS' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let event">
|
||||
<ng-container matColumnDef="actions" stickyEnd>
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td class="back" mat-cell *matCellDef="let event">
|
||||
<button color="warn" mat-icon-button matTooltip="{{'IAM.FAILEDEVENTS.DELETE' | translate}}"
|
||||
(click)="cancelEvent(event.viewName, event.database, event.failedSequence)">
|
||||
<i class="las la-minus-circle"></i>
|
||||
@ -45,7 +45,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="eventDisplayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: eventDisplayedColumns;"></tr>
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: eventDisplayedColumns;"></tr>
|
||||
</table>
|
||||
<mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
|
||||
</mat-paginator>
|
||||
|
||||
@ -27,6 +27,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
button {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
@ -12,8 +12,7 @@
|
||||
</button>
|
||||
</ng-template>
|
||||
<ng-template appHasRole actions [appHasRole]="['iam.member.write']">
|
||||
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
|
||||
mat-raised-button>
|
||||
<a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
</ng-template>
|
||||
@ -76,7 +75,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
.add-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
@ -28,12 +24,6 @@
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<h1>{{'ORG.POLICY.TITLE' | translate}}</h1>
|
||||
<h1>{{'IAM.POLICY.TITLE' | translate}}</h1>
|
||||
|
||||
<p class="top-desc">{{'ORG.POLICY.DESCRIPTION' | translate}}</p>
|
||||
<p class="top-desc">{{'IAM.POLICY.DESCRIPTION' | translate}}</p>
|
||||
|
||||
<div class="row-lyt">
|
||||
<ng-template appHasRole [appHasRole]="['policy.read']">
|
||||
|
||||
@ -70,7 +70,6 @@ h1 {
|
||||
|
||||
button {
|
||||
margin-right: 1rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,22 +2,20 @@
|
||||
<app-refresh-table *ngIf="dataSource" (refreshed)="loadViews()" [dataSize]="dataSource.data.length"
|
||||
[loading]="loading$ | async">
|
||||
|
||||
<table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
|
||||
<table [dataSource]="dataSource" mat-table class="table" aria-label="Elements" matSort>
|
||||
<ng-container matColumnDef="viewName">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let view"> {{view.viewName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="database">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.DATABASE' | translate }} </th>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'IAM.VIEWS.DATABASE' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let view"> {{view.database}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="sequence">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.SEQUENCE' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let view">
|
||||
<span>{{view?.processedSequence}}</span>
|
||||
</td>
|
||||
<td mat-cell *matCellDef="let view"> {{view.processedSequence}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="timestamp">
|
||||
@ -27,8 +25,8 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.ACTIONS' | translate }} </th>
|
||||
<ng-container matColumnDef="actions" stickyEnd>
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let view">
|
||||
<button mat-icon-button matTooltip="{{'IAM.VIEWS.CLEAR' | translate}}"
|
||||
(click)="cancelView(view.viewName, view.database)">
|
||||
@ -38,7 +36,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
|
||||
</mat-paginator>
|
||||
|
||||
@ -27,6 +27,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
button {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
import { AfterViewInit, Component, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { BehaviorSubject, from, Observable, of } from 'rxjs';
|
||||
import { catchError, finalize, map } from 'rxjs/operators';
|
||||
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
|
||||
import { View } from 'src/app/proto/generated/admin_pb';
|
||||
import { AdminService } from 'src/app/services/admin.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-iam-views',
|
||||
@ -12,6 +16,8 @@ import { AdminService } from 'src/app/services/admin.service';
|
||||
styleUrls: ['./iam-views.component.scss'],
|
||||
})
|
||||
export class IamViewsComponent implements AfterViewInit {
|
||||
@ViewChild(MatSort) sort!: MatSort;
|
||||
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
public dataSource!: MatTableDataSource<View.AsObject>;
|
||||
|
||||
@ -19,7 +25,7 @@ export class IamViewsComponent implements AfterViewInit {
|
||||
|
||||
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
|
||||
constructor(private adminService: AdminService) {
|
||||
constructor(private adminService: AdminService, private dialog: MatDialog, private toast: ToastService) {
|
||||
this.loadViews();
|
||||
}
|
||||
|
||||
@ -38,10 +44,31 @@ export class IamViewsComponent implements AfterViewInit {
|
||||
).subscribe(views => {
|
||||
this.dataSource = new MatTableDataSource(views);
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource.sort = this.sort;
|
||||
});
|
||||
}
|
||||
|
||||
public cancelView(viewname: string, db: string): void {
|
||||
this.adminService.ClearView(viewname, db);
|
||||
|
||||
const dialogRef = this.dialog.open(WarnDialogComponent, {
|
||||
data: {
|
||||
confirmKey: 'ACTIONS.CLEAR',
|
||||
cancelKey: 'ACTIONS.CANCEL',
|
||||
titleKey: 'IAM.VIEWS.DIALOG.VIEW_CLEAR_TITLE',
|
||||
descriptionKey: 'IAM.VIEWS.DIALOG.VIEW_CLEAR_DESCRIPTION',
|
||||
},
|
||||
width: '400px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(resp => {
|
||||
if (resp) {
|
||||
this.adminService.ClearView(viewname, db).then(() => {
|
||||
this.toast.showInfo('IAM.VIEWS.CLEARED', true);
|
||||
this.loadViews();
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,6 +63,7 @@ import { IamComponent } from './iam.component';
|
||||
SharedModule,
|
||||
RefreshTableModule,
|
||||
HasRolePipeModule,
|
||||
MatSortModule,
|
||||
],
|
||||
})
|
||||
export class IamModule { }
|
||||
|
||||
@ -85,7 +85,6 @@ h1 {
|
||||
margin-top: 3rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,7 +137,6 @@ h1 {
|
||||
|
||||
.small-button {
|
||||
display: block;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
@ -148,7 +146,6 @@ h1 {
|
||||
.big-button {
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -19,8 +19,4 @@
|
||||
.ok-button {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
|
||||
button {
|
||||
margin: 1rem .5rem;
|
||||
border-radius: .5rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -34,8 +33,4 @@
|
||||
.ok-button {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
mat-icon-button (click)="removeDomain(domain.domain)"><i class="las la-trash"></i></button>
|
||||
</div>
|
||||
<p class="new-desc">{{'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate}}</p>
|
||||
<button [disabled]="(canwrite$ | async) == false" class="add-button" matTooltip="Add domain"
|
||||
mat-raised-button color="primary" (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}}
|
||||
<button [disabled]="(canwrite$ | async) == false" matTooltip="Add domain" mat-raised-button
|
||||
color="primary" (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}}
|
||||
</button>
|
||||
</app-card>
|
||||
</ng-container>
|
||||
|
||||
@ -41,7 +41,6 @@
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
border-radius: .5rem;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@ -50,10 +49,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.add-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.new-desc {
|
||||
font-size: 14px;
|
||||
color: #818a8a;
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
<div class="max-width-container">
|
||||
<h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
|
||||
<p class="top-desc">{{'ORG.PAGES.LISTDESCRIPTION' | translate}}</p>
|
||||
|
||||
<div class="view-toggle">
|
||||
<div class="anim-list" *ngIf="selection.selected.length > 0">
|
||||
</div>
|
||||
<button disabled mat-icon-button>
|
||||
<mat-icon></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
|
||||
|
||||
<div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
|
||||
*ngFor="let org of selection.selected; index as i" (click)="selectOrg(org, $event)"
|
||||
[ngClass]="{ active: activeOrg?.id === org?.id }">
|
||||
<div class="text-part">
|
||||
<span class="description">{{org.id}}</span>
|
||||
|
||||
<span class="name" *ngIf="org.name">{{ org.name }}</span>
|
||||
<span class="name" *ngIf="!org.name">No Name</span>
|
||||
<span class="fill-space"></span>
|
||||
<div class="icons">
|
||||
</div>
|
||||
</div>
|
||||
<button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
|
||||
class="edit-button" mat-icon-button>
|
||||
<mat-icon>push_pin_outline</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
|
||||
|
||||
<div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
|
||||
*ngFor="let org of notPinned; index as i" (click)="selectOrg(org, $event)"
|
||||
[ngClass]="{ active: activeOrg?.id === org?.id }">
|
||||
<div class="text-part">
|
||||
<span class="description">{{org.id}}</span>
|
||||
|
||||
<span class="name" *ngIf="org.name">{{ org.name }}</span>
|
||||
<span class="name" *ngIf="!org.name">No Name</span>
|
||||
<span class="fill-space"></span>
|
||||
<div class="icons">
|
||||
</div>
|
||||
</div>
|
||||
<button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
|
||||
class="edit-button" mat-icon-button>
|
||||
<mat-icon>push_pin_outline</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ng-template appHasRole [appHasRole]="['iam.write']">
|
||||
<div class="card add-org-button" [routerLink]="[ '/org/create' ]">
|
||||
<mat-icon class="icon">add</mat-icon>
|
||||
<span>Add new organization</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,251 +0,0 @@
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.top-desc {
|
||||
color: #8795a1;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: .5rem;
|
||||
border-bottom: 1px solid #2d2e30;
|
||||
|
||||
.anim-list {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button {
|
||||
&.left-button {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -1rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
margin: 1rem;
|
||||
flex-basis: 230px;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1rem;
|
||||
border-radius: .5rem;
|
||||
box-sizing: border-box;
|
||||
min-height: 130px;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 2px solid #38649d;
|
||||
}
|
||||
|
||||
.selection-icon {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -12px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.text-part {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
min-height: 70px;
|
||||
padding: .5rem 0;
|
||||
|
||||
.top {
|
||||
font-size: .8rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: .8rem;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.created {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.organization {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
|
||||
.org_avatar {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin-top: 1rem;
|
||||
transition: all .3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.current {
|
||||
height: 10px;
|
||||
font-size: 14px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(144, 212, 210);
|
||||
display: flex;
|
||||
margin: .5rem 0;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
margin-left: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
color: rgb(144, 212, 210);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
opacity: 0;
|
||||
margin-right: 3px;
|
||||
font-size: 1.3rem;
|
||||
height: 1.4rem;
|
||||
color: #8795a1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
opacity: 0;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
margin-bottom: .25rem;
|
||||
color: #8795a1;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.edit-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.text-part {
|
||||
.icons {
|
||||
.icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.text-part {
|
||||
.icons {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.add-org-button {
|
||||
z-index: 100;
|
||||
flex-basis: 230px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 130px;
|
||||
border-radius: .5rem;
|
||||
margin: 1rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
margin-bottom: 1rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #ffffff25;
|
||||
|
||||
.icon,
|
||||
span {
|
||||
&.disabled {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.n-items {
|
||||
padding: 0 1rem;
|
||||
font-size: .8rem;
|
||||
color: #8795a1;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
@ -1,112 +0,0 @@
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { switchMap, take } from 'rxjs/operators';
|
||||
import { Org } from 'src/app/proto/generated/auth_pb';
|
||||
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-org-grid',
|
||||
templateUrl: './org-grid.component.html',
|
||||
styleUrls: ['./org-grid.component.scss'],
|
||||
})
|
||||
export class OrgGridComponent {
|
||||
public activeOrg!: Org.AsObject;
|
||||
public orgList: Org.AsObject[] = [];
|
||||
|
||||
public selection: SelectionModel<Org.AsObject> = new SelectionModel<Org.AsObject>(true, []);
|
||||
public selectedIndex: number = -1;
|
||||
public loading: boolean = false;
|
||||
|
||||
public notPinned: Array<Org.AsObject> = [];
|
||||
|
||||
constructor(
|
||||
private userService: GrpcAuthService,
|
||||
private toast: ToastService,
|
||||
private router: Router,
|
||||
) {
|
||||
this.loading = true;
|
||||
this.getData(10, 0);
|
||||
|
||||
this.userService.GetActiveOrg().then(org => this.activeOrg = org);
|
||||
|
||||
this.selection.changed.subscribe(selection => {
|
||||
this.setPrefixedItem('pinned-orgs', JSON.stringify(
|
||||
this.selection.selected.map(item => item.id),
|
||||
)).pipe(take(1)).subscribe(() => {
|
||||
selection.added.forEach(element => {
|
||||
const index = this.notPinned.findIndex(item => item.id === element.id);
|
||||
this.notPinned.splice(index, 1);
|
||||
});
|
||||
|
||||
this.notPinned.push(...selection.removed);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public reorganizeItems(): void {
|
||||
this.getPrefixedItem('pinned-orgs').pipe(take(1)).subscribe(storageEntry => {
|
||||
if (storageEntry) {
|
||||
const array: string[] = JSON.parse(storageEntry);
|
||||
const toSelect: Org.AsObject[] = this.orgList.filter((item, index) => {
|
||||
if (array.includes(item.id)) {
|
||||
// this.notPinned.splice(index, 1);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
this.selection.select(...toSelect);
|
||||
|
||||
const toNotPinned: Org.AsObject[] = this.orgList.filter((item, index) => {
|
||||
if (!array.includes(item.id)) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
this.notPinned = toNotPinned;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private getPrefixedItem(key: string): Observable<string | null> {
|
||||
return this.userService.user.pipe(
|
||||
take(1),
|
||||
switchMap(user => {
|
||||
return of(localStorage.getItem(`${user.id}:${key}`));
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
private setPrefixedItem(key: string, value: any): Observable<void> {
|
||||
return this.userService.user.pipe(
|
||||
take(1),
|
||||
switchMap(user => {
|
||||
return of(localStorage.setItem(`${user.id}:${key}`, value));
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
private getData(limit: number, offset: number): void {
|
||||
this.userService.SearchMyProjectOrgs(limit, offset).then(res => {
|
||||
this.orgList = res.toObject().resultList;
|
||||
|
||||
this.notPinned = Object.assign([], this.orgList);
|
||||
this.reorganizeItems();
|
||||
this.loading = false;
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
public selectOrg(item: Org.AsObject, event?: any): void {
|
||||
if (event && !event.target.classList.contains('mat-icon')) {
|
||||
this.userService.setActiveOrg(item);
|
||||
this.routeToOrg(item);
|
||||
}
|
||||
}
|
||||
|
||||
public routeToOrg(item: Org.AsObject): void {
|
||||
this.router.navigate(['/orgs', item.id]);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { OrgListComponent } from './org-list.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: OrgListComponent,
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class OrgListRoutingModule { }
|
||||
56
console/src/app/pages/orgs/org-list/org-list.component.html
Normal file
56
console/src/app/pages/orgs/org-list/org-list.component.html
Normal file
@ -0,0 +1,56 @@
|
||||
<div class="max-width-container">
|
||||
<h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
|
||||
<p class="top-desc">{{'ORG.PAGES.LISTDESCRIPTION' | translate}}</p>
|
||||
|
||||
<app-refresh-table *ngIf="dataSource" (refreshed)="refresh()" [dataSize]="dataSource.data.length"
|
||||
[loading]="loading$ | async">
|
||||
|
||||
<mat-form-field @appearfade *ngIf="orgSearchKey != undefined" actions class="filter">
|
||||
<mat-label>{{'ORG.PAGES.FILTER' | translate}}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}"
|
||||
#input>
|
||||
</mat-form-field>
|
||||
|
||||
<table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
|
||||
|
||||
<ng-container matColumnDef="select">
|
||||
<th class="selection" mat-header-cell *matHeaderCellDef>
|
||||
{{'ORG.PAGES.ACTIVE' | translate}}
|
||||
</th>
|
||||
<td class="selection" mat-cell *matCellDef="let row">
|
||||
<mat-radio-button (change)="selectOrg(row)" color="primary" (click)="$event.stopPropagation()"
|
||||
[checked]="row.id == activeOrg.id">
|
||||
</mat-radio-button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'ORG.PAGES.ID' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let org"> {{org.id}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header
|
||||
[ngClass]="{'search-active': this.orgSearchKey == MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME}">
|
||||
{{ 'ORG.PAGES.NAME' | translate }}
|
||||
<template [ngTemplateOutlet]="templateRef"
|
||||
[ngTemplateOutletContext]="{key: MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME}"></template>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let org"> {{org.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
|
||||
</mat-paginator>
|
||||
</app-refresh-table>
|
||||
</div>
|
||||
|
||||
<ng-template #templateRef let-key="key">
|
||||
<button class="search-button" mat-icon-button
|
||||
(click)="this.orgSearchKey != key ? this.orgSearchKey = key : this.orgSearchKey = undefined">
|
||||
<mat-icon *ngIf="this.orgSearchKey != key">search</mat-icon>
|
||||
<mat-icon *ngIf="this.orgSearchKey == key">search_off</mat-icon>
|
||||
</button>
|
||||
</ng-template>
|
||||
53
console/src/app/pages/orgs/org-list/org-list.component.scss
Normal file
53
console/src/app/pages/orgs/org-list/org-list.component.scss
Normal file
@ -0,0 +1,53 @@
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.top-desc {
|
||||
color: #8795a1;
|
||||
}
|
||||
|
||||
.table,
|
||||
.paginator {
|
||||
width: 100%;
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0 1rem;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
.search-button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.search-active {
|
||||
.search-button {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,20 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { OrgGridComponent } from './org-grid.component';
|
||||
import { OrgListComponent } from './org-list.component';
|
||||
|
||||
describe('OrgGridComponent', () => {
|
||||
let component: OrgGridComponent;
|
||||
let fixture: ComponentFixture<OrgGridComponent>;
|
||||
describe('OrgListComponent', () => {
|
||||
let component: OrgListComponent;
|
||||
let fixture: ComponentFixture<OrgListComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [OrgGridComponent],
|
||||
declarations: [OrgListComponent],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(OrgGridComponent);
|
||||
fixture = TestBed.createComponent(OrgListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
83
console/src/app/pages/orgs/org-list/org-list.component.ts
Normal file
83
console/src/app/pages/orgs/org-list/org-list.component.ts
Normal file
@ -0,0 +1,83 @@
|
||||
import { AfterViewInit, Component, ViewChild } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { BehaviorSubject, from, Observable, of } from 'rxjs';
|
||||
import { catchError, finalize, map } from 'rxjs/operators';
|
||||
import { enterAnimations } from 'src/app/animations';
|
||||
import { MyProjectOrgSearchKey, MyProjectOrgSearchQuery, Org, SearchMethod } from 'src/app/proto/generated/auth_pb';
|
||||
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-org-list',
|
||||
templateUrl: './org-list.component.html',
|
||||
styleUrls: ['./org-list.component.scss'],
|
||||
animations: [
|
||||
enterAnimations,
|
||||
],
|
||||
})
|
||||
export class OrgListComponent implements AfterViewInit {
|
||||
public orgSearchKey: MyProjectOrgSearchKey | undefined = undefined;
|
||||
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
@ViewChild(MatSort) sort!: MatSort;
|
||||
|
||||
public dataSource!: MatTableDataSource<Org.AsObject>;
|
||||
public displayedColumns: string[] = ['select', 'id', 'name'];
|
||||
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
|
||||
public activeOrg!: Org.AsObject;
|
||||
public MyProjectOrgSearchKey: any = MyProjectOrgSearchKey;
|
||||
|
||||
constructor(
|
||||
private authService: GrpcAuthService,
|
||||
) {
|
||||
this.loadOrgs(10, 0);
|
||||
|
||||
this.authService.GetActiveOrg().then(org => this.activeOrg = org);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.loadOrgs(10, 0);
|
||||
}
|
||||
|
||||
public loadOrgs(limit: number, offset: number, filter?: string): void {
|
||||
this.loadingSubject.next(true);
|
||||
let query;
|
||||
if (filter) {
|
||||
query = new MyProjectOrgSearchQuery();
|
||||
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
|
||||
query.setKey(MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME);
|
||||
query.setValue(filter);
|
||||
}
|
||||
|
||||
from(this.authService.SearchMyProjectOrgs(limit, offset, query ? [query] : undefined)).pipe(
|
||||
map(resp => {
|
||||
return resp.toObject().resultList;
|
||||
}),
|
||||
catchError(() => of([])),
|
||||
finalize(() => this.loadingSubject.next(false)),
|
||||
).subscribe(views => {
|
||||
this.dataSource = new MatTableDataSource(views);
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource.sort = this.sort;
|
||||
});
|
||||
}
|
||||
|
||||
public selectOrg(item: Org.AsObject, event?: any): void {
|
||||
this.authService.setActiveOrg(item);
|
||||
}
|
||||
|
||||
public refresh(): void {
|
||||
this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
|
||||
}
|
||||
|
||||
public applyFilter(event: Event): void {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.loadOrgs(
|
||||
this.paginator.pageSize,
|
||||
this.paginator.pageIndex * this.paginator.pageSize,
|
||||
filterValue.trim().toLowerCase(),
|
||||
);
|
||||
}
|
||||
}
|
||||
42
console/src/app/pages/orgs/org-list/org-list.module.ts
Normal file
42
console/src/app/pages/orgs/org-list/org-list.module.ts
Normal file
@ -0,0 +1,42 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSortModule } from '@angular/material/sort';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
|
||||
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
|
||||
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
|
||||
|
||||
import { OrgListRoutingModule } from './org-list-routing.module';
|
||||
import { OrgListComponent } from './org-list.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [OrgListComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
OrgListRoutingModule,
|
||||
MatTableModule,
|
||||
TranslateModule,
|
||||
RefreshTableModule,
|
||||
TimestampToDatePipeModule,
|
||||
LocalizedDatePipeModule,
|
||||
MatPaginatorModule,
|
||||
MatSortModule,
|
||||
MatIconModule,
|
||||
MatButtonModule,
|
||||
MatTooltipModule,
|
||||
MatRadioModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
FormsModule,
|
||||
],
|
||||
})
|
||||
export class OrgListModule { }
|
||||
@ -9,8 +9,7 @@
|
||||
</button>
|
||||
</ng-template>
|
||||
<ng-template appHasRole actions [appHasRole]="['org.member.write:'+org?.id,'org.member.write']">
|
||||
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
|
||||
mat-raised-button>
|
||||
<a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
</ng-template>
|
||||
@ -73,7 +72,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@ -24,12 +24,6 @@
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
@ -37,10 +31,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.add-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
@ -5,7 +5,6 @@ import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules
|
||||
|
||||
import { OrgCreateComponent } from './org-create/org-create.component';
|
||||
import { OrgDetailComponent } from './org-detail/org-detail.component';
|
||||
import { OrgGridComponent } from './org-grid/org-grid.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
@ -82,7 +81,7 @@ const routes: Routes = [
|
||||
},
|
||||
{
|
||||
path: 'overview',
|
||||
component: OrgGridComponent,
|
||||
loadChildren: () => import('./org-list/org-list.module').then(m => m.OrgListModule),
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -25,12 +25,11 @@ import { ChangesModule } from '../../modules/changes/changes.module';
|
||||
import { AddDomainDialogModule } from './org-detail/add-domain-dialog/add-domain-dialog.module';
|
||||
import { DomainVerificationComponent } from './org-detail/domain-verification/domain-verification.component';
|
||||
import { OrgDetailComponent } from './org-detail/org-detail.component';
|
||||
import { OrgGridComponent } from './org-grid/org-grid.component';
|
||||
import { OrgsRoutingModule } from './orgs-routing.module';
|
||||
import { PolicyGridComponent } from './policy-grid/policy-grid.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [OrgDetailComponent, OrgGridComponent, PolicyGridComponent, DomainVerificationComponent],
|
||||
declarations: [OrgDetailComponent, PolicyGridComponent, DomainVerificationComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
HasRolePipeModule,
|
||||
|
||||
@ -70,7 +70,6 @@ h1 {
|
||||
|
||||
button {
|
||||
margin-right: 1rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -142,7 +142,6 @@ p.desc {
|
||||
margin-top: 3rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,8 +42,7 @@
|
||||
</app-card>
|
||||
|
||||
<app-card title="{{ 'APP.OIDC.TITLE' | translate }}" *ngIf="app && app.oidcConfig">
|
||||
<div class="card-actions" card-actions
|
||||
*ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
|
||||
<div card-actions *ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
|
||||
<button mat-stroked-button
|
||||
(click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
|
||||
</div>
|
||||
|
||||
@ -33,12 +33,6 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.compliance .problem {
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -109,7 +103,6 @@
|
||||
margin: 0 -.5rem;
|
||||
|
||||
.submit-button {
|
||||
border-radius: .5rem;
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,10 +18,6 @@
|
||||
.ok-button {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
[routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
|
||||
|
||||
</table>
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
|
||||
.icon-button {
|
||||
display: block;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,14 +32,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.data-row {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<app-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
|
||||
[dataSize]="dataSource.totalResult" [timestamp]="dataSource?.viewTimestamp">
|
||||
<ng-template appHasRole [appHasRole]="['project.app.write']" actions>
|
||||
<a [disabled]="disabled" class="add-button" [routerLink]="[ '/projects', projectId, 'apps', 'create']"
|
||||
color="primary" mat-raised-button>
|
||||
<a [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'apps', 'create']" color="primary"
|
||||
mat-raised-button>
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
</ng-template>
|
||||
@ -31,7 +31,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="25"
|
||||
|
||||
@ -19,14 +19,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.data-row {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
|
||||
@ -23,11 +23,11 @@
|
||||
|
||||
<button mat-stroked-button color="warn"
|
||||
[disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
|
||||
*ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="state-button"
|
||||
*ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE"
|
||||
(click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
|
||||
<button mat-stroked-button color="warn"
|
||||
[disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
|
||||
*ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="state-button"
|
||||
*ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE"
|
||||
(click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
|
||||
|
||||
<div class="full-width">
|
||||
|
||||
@ -9,10 +9,6 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.state-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</ng-template>
|
||||
<ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']"
|
||||
actions>
|
||||
<a [disabled]="disabled" color="primary" class="rounded-button" color="primary" mat-raised-button
|
||||
<a [disabled]="disabled" color="primary" color="primary" mat-raised-button
|
||||
[routerLink]="[ '/projects', projectId, 'grants', 'create']">
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
@ -71,7 +71,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
|
||||
<tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
.rounded-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow: auto;
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
[selection]="selection" [loading]="loading$ | async">
|
||||
|
||||
<ng-template actions appHasRole [appHasRole]="['project.create']">
|
||||
<a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
|
||||
<a [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
</ng-template>
|
||||
@ -62,7 +62,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
[routerLink]="['/projects', row.projectId]"></tr>
|
||||
|
||||
</table>
|
||||
|
||||
@ -41,14 +41,6 @@ h1 {
|
||||
}
|
||||
}
|
||||
|
||||
.data-row {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
|
||||
@ -18,10 +18,9 @@
|
||||
|
||||
<div>
|
||||
<button mat-stroked-button color="warn" *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE"
|
||||
class="state-button"
|
||||
(click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
|
||||
<button mat-stroked-button color="warn"
|
||||
*ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
|
||||
*ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE"
|
||||
(click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -29,10 +29,6 @@
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.state-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.formfield {
|
||||
|
||||
@ -9,8 +9,4 @@
|
||||
.ok-button {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</button>
|
||||
<a color="primary"
|
||||
[disabled]="(['project.grant.member.write','project.grant.member.write:' + grantId] | hasRole | async) == false"
|
||||
class="add-button" (click)="openAddMember()" color="primary" mat-raised-button>
|
||||
(click)="openAddMember()" color="primary" mat-raised-button>
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@ -22,12 +22,6 @@
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
|
||||
@ -32,7 +32,6 @@
|
||||
.domain-button {
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
@ -43,12 +42,10 @@
|
||||
|
||||
.small-button {
|
||||
display: block;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.big-button {
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,7 +50,6 @@
|
||||
margin-top: 3rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
margin-top: 1rem;
|
||||
|
||||
@ -28,7 +28,6 @@
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
}
|
||||
|
||||
@ -57,12 +57,10 @@
|
||||
|
||||
.small-button {
|
||||
display: block;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.big-button {
|
||||
display: block;
|
||||
padding: .5rem 4rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
<app-meta-layout>
|
||||
<div class="max-width-container">
|
||||
<h1 class="h1">{{ 'USER.TITLE' | translate }}</h1>
|
||||
<p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
|
||||
<div class="header-row">
|
||||
<div>
|
||||
<h1 class="h1">{{ 'USER.TITLE' | translate }}</h1>
|
||||
<p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
|
||||
</div>
|
||||
|
||||
<div class="theme">
|
||||
<app-theme-setting></app-theme-setting>
|
||||
</div>
|
||||
</div>
|
||||
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
|
||||
|
||||
<span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
|
||||
@ -20,21 +27,21 @@
|
||||
</div>
|
||||
</app-card>
|
||||
|
||||
<div class="col" *ngIf="user">
|
||||
<app-card class="app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
|
||||
<app-detail-form [genders]="genders" [languages]="languages" [username]="user.userName"
|
||||
[user]="user.human" (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
|
||||
</app-detail-form>
|
||||
</app-card>
|
||||
<!-- <div class="col" *ngIf="user"> -->
|
||||
<app-card *ngIf="user" class="app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
|
||||
<app-detail-form [genders]="genders" [languages]="languages" [username]="user.userName" [user]="user.human"
|
||||
(changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
|
||||
</app-detail-form>
|
||||
</app-card>
|
||||
|
||||
<app-card title="Theme" class="app-card theme-card">
|
||||
<!-- <app-card title="Theme" class="app-card theme-card">
|
||||
<app-theme-setting></app-theme-setting>
|
||||
</app-card>
|
||||
</div>
|
||||
</app-card> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
|
||||
description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
|
||||
<app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
|
||||
description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
|
||||
<app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
|
||||
</app-card>
|
||||
|
||||
<app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
|
||||
@ -44,7 +51,7 @@
|
||||
<span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
|
||||
|
||||
<span>*********</span>
|
||||
<div class="actions">
|
||||
<div>
|
||||
<a [routerLink]="['password']" mat-icon-button>
|
||||
<mat-icon class="icon">chevron_right</mat-icon>
|
||||
</a>
|
||||
@ -69,7 +76,7 @@
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<div>
|
||||
<button (click)="emailEditState = true" mat-icon-button>
|
||||
<mat-icon class="icon">edit</mat-icon>
|
||||
</button>
|
||||
@ -84,9 +91,8 @@
|
||||
<button (click)="emailEditState = false" mat-icon-button>
|
||||
<mat-icon class="icon">close</mat-icon>
|
||||
</button>
|
||||
<button *ngIf="user.human" [disabled]="!user.human.email" class="submit-button" type="button"
|
||||
color="primary" (click)="saveEmail()"
|
||||
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
|
||||
<button *ngIf="user.human" [disabled]="!user.human.email" type="button" color="primary"
|
||||
(click)="saveEmail()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
@ -110,7 +116,7 @@
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<div>
|
||||
<button (click)="phoneEditState = true" mat-icon-button>
|
||||
<mat-icon class="icon">edit</mat-icon>
|
||||
</button>
|
||||
|
||||
@ -1,10 +1,21 @@
|
||||
.h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sub {
|
||||
color: #8795a1;
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sub {
|
||||
color: #8795a1;
|
||||
}
|
||||
|
||||
.theme {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-name-row {
|
||||
@ -50,7 +61,7 @@
|
||||
.method-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
justify-content: space-between;
|
||||
padding: .5rem;
|
||||
border-bottom: 1px solid #ffffff20;
|
||||
flex-wrap: wrap;
|
||||
@ -65,20 +76,16 @@
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
font-size: .9rem;
|
||||
color: #8795a1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
border-radius: .5rem;
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.verify {
|
||||
@ -110,13 +117,13 @@
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.theme-card {
|
||||
max-width: 300px;
|
||||
// .theme-card {
|
||||
// max-width: 300px;
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
// @media only screen and (max-width: 450px) {
|
||||
// max-width: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.side {
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</app-refresh-table>
|
||||
<div class="add-row">
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
margin: -.5rem;
|
||||
|
||||
.button {
|
||||
border-radius: .5rem;
|
||||
margin: .5rem;
|
||||
margin-top: 1rem;
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
@mixin theme-card($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A800);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
/* stylelint-enable */
|
||||
|
||||
.theme-conent,
|
||||
|
||||
@ -1,17 +1,13 @@
|
||||
<input type="checkbox" id="switch" (change)="change($event.target.checked)" [(checked)]="isDarkTheme">
|
||||
<div class="theme-app">
|
||||
<div class="theme-content">
|
||||
<div class="circle">
|
||||
<div class="crescent"></div>
|
||||
</div>
|
||||
<p class="heading">Choose a style</p>
|
||||
<p class="desc">Pop or subtle. Day or night.<br>
|
||||
Customize your interface
|
||||
</p>
|
||||
<label for="switch">
|
||||
<div class="toggle"></div>
|
||||
<div class="names">
|
||||
<p class="light">Light</p>
|
||||
<div class="circle">
|
||||
<div class="crescent"></div>
|
||||
</div>
|
||||
<p class="dark">Dark</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
$dark-background: #2d2e30;
|
||||
$light-background: #fafafa;
|
||||
$dark-background: #212224;
|
||||
$light-background: rgb(220, 220, 220);
|
||||
|
||||
:root {
|
||||
transition: none;
|
||||
@ -16,12 +16,12 @@ $light-background: #fafafa;
|
||||
}
|
||||
|
||||
.circle {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
|
||||
margin: auto;
|
||||
box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
||||
@ -29,8 +29,8 @@ $light-background: #fafafa;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: $light-background;
|
||||
transform: scale(0);
|
||||
transform-origin: top right;
|
||||
@ -41,20 +41,9 @@ p {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 100%;
|
||||
font-weight: bolder;
|
||||
margin: 2rem 0 .2rem 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: #8795a1;
|
||||
}
|
||||
|
||||
label,
|
||||
.toggle {
|
||||
height: 2.8rem;
|
||||
height: 45px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
@ -63,7 +52,6 @@ label {
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
margin: 1rem 0 1rem 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -78,33 +66,37 @@ label {
|
||||
font-weight: bolder;
|
||||
width: 65%;
|
||||
margin-left: 17.5%;
|
||||
margin-top: .5%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
height: 60px;
|
||||
transform: translateY(-7.5px);
|
||||
}
|
||||
|
||||
[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .theme-app .toggle {
|
||||
transform: translateX(100%);
|
||||
background-color: $dark-background;
|
||||
}
|
||||
[type="checkbox"]:checked {
|
||||
.toggle {
|
||||
transform: translateX(100%);
|
||||
background-color: $dark-background;
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .theme-app .dark {
|
||||
opacity: 1;
|
||||
}
|
||||
.light {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .theme-app .light {
|
||||
opacity: .5;
|
||||
}
|
||||
.dark {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .theme-app {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
.theme-app {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .theme-app .crescent {
|
||||
@ -119,3 +111,8 @@ label {
|
||||
[type="checkbox"]:checked + .theme-app .main-circle {
|
||||
background: linear-gradient(40deg, #8983f7, #a3dafb 70%);
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked + .app .toggle {
|
||||
transform: translateX(100%);
|
||||
background-color: #34323d;
|
||||
}
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="btn-container">
|
||||
<button class="submit-button" type="submit" color="primary"
|
||||
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
|
||||
<button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
|
||||
</div>
|
||||
</form>
|
||||
@ -14,8 +14,4 @@
|
||||
.btn-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.submit-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,49 +1,49 @@
|
||||
<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
|
||||
[timestamp]="externalIdpResult?.viewTimestamp" [selection]="selection">
|
||||
[timestamp]="externalIdpResult?.viewTimestamp" [selection]="selection">
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table class="table" mat-table [dataSource]="dataSource">
|
||||
<ng-container matColumnDef="select">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
|
||||
<div class="table-wrapper">
|
||||
<table class="table" mat-table [dataSource]="dataSource">
|
||||
<ng-container matColumnDef="select">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
|
||||
[checked]="selection.hasValue() && isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()">
|
||||
</mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let idp">
|
||||
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
|
||||
</mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let idp">
|
||||
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="idpConfigId">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let idp"> {{idp?.idpConfigId}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="idpConfigId">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let idp"> {{idp?.idpConfigId}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="idpName">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="idpName">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="externalUserDisplayName">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let idp"> {{idp?.externalUserDisplayName}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="externalUserDisplayName">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let idp"> {{idp?.externalUserDisplayName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="externalUserId">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let idp"> {{idp?.externalUserId}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="externalUserId">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let idp"> {{idp?.externalUserId}} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<mat-paginator #paginator class="paginator" [length]="externalIdpResult?.totalResult || 0" [pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
|
||||
</div>
|
||||
</table>
|
||||
<mat-paginator #paginator class="paginator" [length]="externalIdpResult?.totalResult || 0" [pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
|
||||
</div>
|
||||
|
||||
</app-refresh-table>
|
||||
@ -19,21 +19,9 @@
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.data-row {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
@ -1,75 +1,99 @@
|
||||
import {Component, Input, OnInit, ViewChild} from '@angular/core';
|
||||
import {MatPaginator, PageEvent} from '@angular/material/paginator';
|
||||
import {MatTableDataSource} from '@angular/material/table';
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { Component, Input, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
import { ExternalIDPView as AuthExternalIDPView } from '../../../../proto/generated/auth_pb';
|
||||
import {
|
||||
ExternalIDPSearchResponse,
|
||||
ExternalIDPView as MgmtExternalIDPView,
|
||||
IdpView as MgmtIdpView,
|
||||
ExternalIDPSearchResponse,
|
||||
ExternalIDPView as MgmtExternalIDPView,
|
||||
} from '../../../../proto/generated/management_pb';
|
||||
import {
|
||||
ExternalIDPView as AuthExternalIDPView,
|
||||
} from '../../../../proto/generated/auth_pb';
|
||||
import {BehaviorSubject, Observable} from 'rxjs';
|
||||
import {ManagementService} from '../../../../services/mgmt.service';
|
||||
import {ToastService} from '../../../../services/toast.service';
|
||||
import {SelectionModel} from '@angular/cdk/collections';
|
||||
import {GrpcAuthService} from '../../../../services/grpc-auth.service';
|
||||
import { GrpcAuthService } from '../../../../services/grpc-auth.service';
|
||||
import { ManagementService } from '../../../../services/mgmt.service';
|
||||
import { ToastService } from '../../../../services/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-external-idps',
|
||||
templateUrl: './external-idps.component.html',
|
||||
styleUrls: ['./external-idps.component.scss'],
|
||||
selector: 'app-external-idps',
|
||||
templateUrl: './external-idps.component.html',
|
||||
styleUrls: ['./external-idps.component.scss'],
|
||||
})
|
||||
export class ExternalIdpsComponent implements OnInit {
|
||||
@Input() service!: GrpcAuthService | ManagementService;
|
||||
@Input() userId!: string;
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
public externalIdpResult!: ExternalIDPSearchResponse.AsObject;
|
||||
public dataSource: MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
|
||||
= new MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>();
|
||||
public selection: SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
|
||||
= new SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>(true, []);
|
||||
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
|
||||
@Input() public displayedColumns: string[] = [ 'idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName'];
|
||||
@Input() service!: GrpcAuthService | ManagementService;
|
||||
@Input() userId!: string;
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
public externalIdpResult!: ExternalIDPSearchResponse.AsObject;
|
||||
public dataSource: MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
|
||||
= new MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>();
|
||||
public selection: SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
|
||||
= new SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>(true, []);
|
||||
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
|
||||
@Input() public displayedColumns: string[] = ['idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName'];
|
||||
|
||||
constructor(private toast: ToastService) { }
|
||||
constructor(private toast: ToastService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getData(10, 0);
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.getData(10, 0);
|
||||
}
|
||||
|
||||
public isAllSelected(): boolean {
|
||||
const numSelected = this.selection.selected.length;
|
||||
const numRows = this.dataSource.data.length;
|
||||
return numSelected === numRows;
|
||||
}
|
||||
public isAllSelected(): boolean {
|
||||
const numSelected = this.selection.selected.length;
|
||||
const numRows = this.dataSource.data.length;
|
||||
return numSelected === numRows;
|
||||
}
|
||||
|
||||
public masterToggle(): void {
|
||||
this.isAllSelected() ?
|
||||
this.selection.clear() :
|
||||
this.dataSource.data.forEach(row => this.selection.select(row));
|
||||
}
|
||||
public masterToggle(): void {
|
||||
this.isAllSelected() ?
|
||||
this.selection.clear() :
|
||||
this.dataSource.data.forEach(row => this.selection.select(row));
|
||||
}
|
||||
|
||||
public changePage(event: PageEvent): void {
|
||||
this.getData(event.pageSize, event.pageIndex * event.pageSize);
|
||||
}
|
||||
public changePage(event: PageEvent): void {
|
||||
this.getData(event.pageSize, event.pageIndex * event.pageSize);
|
||||
}
|
||||
|
||||
private async getData(limit: number, offset: number): Promise<void> {
|
||||
this.loadingSubject.next(true);
|
||||
private async getData(limit: number, offset: number): Promise<void> {
|
||||
this.loadingSubject.next(true);
|
||||
|
||||
this.service.SearchExternalIdps(this.userId, limit, offset).then(resp => {
|
||||
this.externalIdpResult = resp.toObject();
|
||||
this.dataSource.data = this.externalIdpResult.resultList;
|
||||
console.log(this.externalIdpResult.resultList);
|
||||
this.loadingSubject.next(false);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
this.loadingSubject.next(false);
|
||||
});
|
||||
}
|
||||
let promise;
|
||||
if (this.service instanceof ManagementService) {
|
||||
promise = (this.service as ManagementService).SearchUserExternalIDPs(limit, offset, this.userId);
|
||||
} else if (this.service instanceof GrpcAuthService) {
|
||||
promise = (this.service as GrpcAuthService).SearchMyExternalIdps(limit, offset);
|
||||
}
|
||||
|
||||
public refreshPage(): void {
|
||||
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
|
||||
}
|
||||
if (promise) {
|
||||
promise.then(resp => {
|
||||
this.externalIdpResult = resp.toObject();
|
||||
this.dataSource.data = this.externalIdpResult.resultList;
|
||||
console.log(this.externalIdpResult.resultList);
|
||||
this.loadingSubject.next(false);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
this.loadingSubject.next(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public refreshPage(): void {
|
||||
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
|
||||
}
|
||||
|
||||
public removeExternalIdp(idp: AuthExternalIDPView.AsObject | MgmtExternalIDPView.AsObject): void {
|
||||
let promise;
|
||||
if (this.service instanceof ManagementService) {
|
||||
promise = (this.service as ManagementService).RemoveExternalIDP(idp.externalUserId, idp.idpConfigId, idp.userId);
|
||||
} else if (this.service instanceof GrpcAuthService) {
|
||||
promise = (this.service as GrpcAuthService).RemoveExternalIDP(idp.externalUserId, idp.idpConfigId);
|
||||
}
|
||||
|
||||
if (promise) {
|
||||
promise.then(_ => {
|
||||
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,8 +19,4 @@
|
||||
.ok-button {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
mat-icon-button *ngIf="selection.hasValue()">
|
||||
<i class="las la-trash"></i>
|
||||
</button>
|
||||
<a class="add-button" [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false"
|
||||
color="primary" mat-raised-button (click)="openAddKey()">
|
||||
<a [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false" color="primary"
|
||||
mat-raised-button (click)="openAddKey()">
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
</ng-template>
|
||||
@ -54,7 +54,7 @@
|
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
[routerLink]="row.id ? ['/users', row.id ]: null">
|
||||
</tr>
|
||||
|
||||
|
||||
@ -19,21 +19,9 @@
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.data-row {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
@ -19,10 +19,6 @@
|
||||
.ok-button {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
@ -52,5 +48,4 @@
|
||||
|
||||
.download-button {
|
||||
margin-bottom: 1rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<app-refresh-table class="refresh-table" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
|
||||
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
|
||||
|
||||
<a actions color="primary" class="add-button" (click)="addMember()" color="primary" mat-raised-button>
|
||||
<a actions color="primary" (click)="addMember()" color="primary" mat-raised-button>
|
||||
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
|
||||
</a>
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
.add-button {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.refresh-table {
|
||||
width: 100%;
|
||||
}
|
||||
@ -32,12 +28,6 @@
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
&:hover {
|
||||
background-color: #ffffff05;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 50px;
|
||||
max-width: 50px;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user