mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-15 18:02:13 +00:00
feat(console): stripe (#1590)
* prepare request for sub service * show detail, i18n * form dialog * country * stripe button * feature * flex * rm logs * org creationdate, lint * rm log
This commit is contained in:
Max Peintner
@@ -39,6 +39,16 @@
|
||||
<td mat-cell *matCellDef="let org"> {{org.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="creationDate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header
|
||||
[ngClass]="{'search-active': this.orgSearchKey == OrgListSearchKey.NAME}">
|
||||
{{ 'ORG.PAGES.CREATIONDATE' | translate }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let org">
|
||||
{{org.details?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr (click)="setAndNavigateToOrg(row)" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
@@ -11,102 +11,102 @@ import { Org, OrgNameQuery, OrgQuery } from 'src/app/proto/generated/zitadel/org
|
||||
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
|
||||
|
||||
enum OrgListSearchKey {
|
||||
NAME = 'NAME',
|
||||
NAME = 'NAME',
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-org-list',
|
||||
templateUrl: './org-list.component.html',
|
||||
styleUrls: ['./org-list.component.scss'],
|
||||
animations: [
|
||||
enterAnimations,
|
||||
],
|
||||
selector: 'app-org-list',
|
||||
templateUrl: './org-list.component.html',
|
||||
styleUrls: ['./org-list.component.scss'],
|
||||
animations: [
|
||||
enterAnimations,
|
||||
],
|
||||
})
|
||||
export class OrgListComponent implements AfterViewInit {
|
||||
public orgSearchKey: OrgListSearchKey | undefined = undefined;
|
||||
public orgSearchKey: OrgListSearchKey | undefined = undefined;
|
||||
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
@ViewChild(MatSort) sort!: MatSort;
|
||||
@ViewChild('input') public filter!: Input;
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
@ViewChild(MatSort) sort!: MatSort;
|
||||
@ViewChild('input') public filter!: Input;
|
||||
|
||||
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 OrgListSearchKey: any = OrgListSearchKey;
|
||||
public dataSource!: MatTableDataSource<Org.AsObject>;
|
||||
public displayedColumns: string[] = ['select', 'id', 'name', 'creationDate'];
|
||||
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
|
||||
public activeOrg!: Org.AsObject;
|
||||
public OrgListSearchKey: any = OrgListSearchKey;
|
||||
|
||||
constructor(
|
||||
private authService: GrpcAuthService,
|
||||
private router: Router,
|
||||
) {
|
||||
this.loadOrgs(10, 0);
|
||||
constructor(
|
||||
private authService: GrpcAuthService,
|
||||
private router: Router,
|
||||
) {
|
||||
this.loadOrgs(10, 0);
|
||||
|
||||
this.authService.getActiveOrg().then(org => this.activeOrg = org);
|
||||
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 OrgQuery();
|
||||
const orgNameQuery = new OrgNameQuery();
|
||||
orgNameQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
|
||||
orgNameQuery.setName(filter);
|
||||
query.setNameQuery(orgNameQuery);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.loadOrgs(10, 0);
|
||||
from(this.authService.listMyProjectOrgs(limit, offset, query ? [query] : undefined)).pipe(
|
||||
map(resp => {
|
||||
return resp.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 setFilter(key: OrgListSearchKey): void {
|
||||
setTimeout(() => {
|
||||
if (this.filter) {
|
||||
(this.filter as any).nativeElement.focus();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
if (this.orgSearchKey !== key) {
|
||||
this.orgSearchKey = key;
|
||||
} else {
|
||||
this.orgSearchKey = undefined;
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
public loadOrgs(limit: number, offset: number, filter?: string): void {
|
||||
this.loadingSubject.next(true);
|
||||
let query;
|
||||
if (filter) {
|
||||
query = new OrgQuery();
|
||||
const orgNameQuery = new OrgNameQuery();
|
||||
orgNameQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
|
||||
orgNameQuery.setName(filter);
|
||||
query.setNameQuery(orgNameQuery);
|
||||
}
|
||||
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(),
|
||||
);
|
||||
}
|
||||
|
||||
from(this.authService.listMyProjectOrgs(limit, offset, query ? [query] : undefined)).pipe(
|
||||
map(resp => {
|
||||
return resp.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 setFilter(key: OrgListSearchKey): void {
|
||||
setTimeout(() => {
|
||||
if (this.filter) {
|
||||
(this.filter as any).nativeElement.focus();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
if (this.orgSearchKey !== key) {
|
||||
this.orgSearchKey = key;
|
||||
} else {
|
||||
this.orgSearchKey = undefined;
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
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(),
|
||||
);
|
||||
}
|
||||
|
||||
public setAndNavigateToOrg(org: Org.AsObject): void {
|
||||
this.authService.setActiveOrg(org);
|
||||
this.router.navigate(['/org']);
|
||||
}
|
||||
public setAndNavigateToOrg(org: Org.AsObject): void {
|
||||
this.authService.setActiveOrg(org);
|
||||
this.router.navigate(['/org']);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user