migrating accept families for enterprise setup component (#8895)

This commit is contained in:
vinith-kovan 2024-05-22 20:05:32 +05:30 committed by GitHub
parent 82a83ead98
commit b672b038b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 46 deletions

View File

@ -1,51 +1,37 @@
<div class="container page-content">
<div class="page-header">
<h1>{{ "sponsoredFamiliesOffer" | i18n }}</h1>
</div>
<div *ngIf="loading" class="mt-5 d-flex justify-content-center">
<div class="tw-container">
<h1 bitTypography="h1">{{ "sponsoredFamiliesOffer" | i18n }}</h1>
<div *ngIf="loading" class="tw-mt-5 tw-flex tw-justify-center">
<i
class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
</div>
<div *ngIf="!loading && badToken" class="mt-5 d-flex justify-content-center">
<div *ngIf="!loading && badToken" class="tw-mt-5 tw-flex tw-justify-center">
<span>{{ "badToken" | i18n }}</span>
</div>
<form
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
ngNativeValidate
*ngIf="!loading && !badToken"
<form [bitSubmit]="submit" [formGroup]="formGroup" *ngIf="!loading && !badToken">
<p bitTypography="body1">{{ "acceptBitwardenFamiliesHelp" | i18n }}</p>
<bit-form-field class="tw-w-1/2">
<bit-label>{{ "sponsoredFamiliesSelectOffer" | i18n }}</bit-label>
<bit-select formControlName="selectedFamilyOrganizationId">
<bit-option value="" label="-- {{ 'select' | i18n }} --" disabled></bit-option>
<bit-option value="createNew" label="{{ 'newFamiliesOrganization' | i18n }}"></bit-option>
<bit-option
*ngFor="let o of existingFamilyOrganizations$ | async"
[label]="o.name"
[value]="o.id"
>
<p>
<span>{{ "acceptBitwardenFamiliesHelp" | i18n }}</span>
</p>
<div class="form-group col-6">
<label for="availableSponsorshipOrg">{{ "sponsoredFamiliesSelectOffer" | i18n }}</label>
<select
id="availableSponsorshipOrg"
name="Available Sponsorship Organization"
[(ngModel)]="selectedFamilyOrganizationId"
class="form-control"
required
>
<option value="" disabled>-- {{ "select" | i18n }} --</option>
<option value="createNew">{{ "newFamiliesOrganization" | i18n }}</option>
<option *ngFor="let o of existingFamilyOrganizations$ | async" [ngValue]="o.id">
{{ o.name }}
</option>
</select>
</div>
<div *ngIf="showNewOrganization" class="col-12">
</bit-option>
</bit-select>
</bit-form-field>
<div *ngIf="showNewOrganization">
<app-organization-plans></app-organization-plans>
</div>
<div class="form-group col-6" *ngIf="!showNewOrganization">
<button class="btn btn-primary mt-2 btn-submit" [disabled]="form.loading" type="submit">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "acceptOffer" | i18n }}</span>
<div class="w-1/2" *ngIf="!showNewOrganization">
<button bitButton buttonType="primary" bitFormButton type="submit">
{{ "acceptOffer" | i18n }}
</button>
</div>
</form>

View File

@ -1,4 +1,5 @@
import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { lastValueFrom, Observable, Subject } from "rxjs";
import { first, map, takeUntil } from "rxjs/operators";
@ -43,7 +44,6 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
loading = true;
badToken = false;
formPromise: Promise<any>;
token: string;
existingFamilyOrganizations: Organization[];
@ -54,7 +54,9 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
_selectedFamilyOrganizationId = "";
private _destroy = new Subject<void>();
formGroup = this.formBuilder.group({
selectedFamilyOrganizationId: ["", Validators.required],
});
constructor(
private router: Router,
private platformUtilsService: PlatformUtilsService,
@ -65,6 +67,7 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
private validationService: ValidationService,
private organizationService: OrganizationService,
private dialogService: DialogService,
private formBuilder: FormBuilder,
) {}
async ngOnInit() {
@ -101,6 +104,9 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
this.selectedFamilyOrganizationId = "createNew";
}
});
this.formGroup.valueChanges.pipe(takeUntil(this._destroy)).subscribe((val) => {
this.selectedFamilyOrganizationId = val.selectedFamilyOrganizationId;
});
}
ngOnDestroy(): void {
@ -108,11 +114,9 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
this._destroy.complete();
}
async submit() {
this.formPromise = this.doSubmit(this._selectedFamilyOrganizationId);
await this.formPromise;
this.formPromise = null;
}
submit = async () => {
await this.doSubmit(this._selectedFamilyOrganizationId);
};
get selectedFamilyOrganizationId() {
return this._selectedFamilyOrganizationId;