WIP - Added stacked input & mostly fleshed out

cloudfoundry · KlapTrap · Feb 19, 2019 · Jan 25, 2019 · Jan 25, 2019 · Jan 25, 2019
commit b59bb536c16e7594a8a25f549864b2104f5bae80
diff --git a/src/frontend/app/features/cloud-foundry/cloud-foundry.module.ts b/src/frontend/app/features/cloud-foundry/cloud-foundry.module.ts
@@ -153,7 +153,7 @@ import { UsersRolesComponent } from './users/manage-users/manage-users.component
     CloudFoundryRoutesComponent,
     UserInviteConfigurationDialogComponent,
     InviteUsersComponent,
-    InviteUsersCreateComponent
+    InviteUsersCreateComponent,
   ],
   providers: [
     CFEndpointsListConfigService,

diff --git a/...s/cloud-foundry/users/invite-users/invite-users-create/invite-users-create.component.html b/...s/cloud-foundry/users/invite-users/invite-users-create/invite-users-create.component.html
@@ -1,3 +1 @@
-<p>
-  invite-users-create works!
-</p>
+<app-stacked-input-actions [state$]="state.asObservable()" (update)="updateUsers($event)"></app-stacked-input-actions>
diff --git a/...s/cloud-foundry/users/invite-users/invite-users-create/invite-users-create.component.scss b/...s/cloud-foundry/users/invite-users/invite-users-create/invite-users-create.component.scss
@@ -0,0 +1,3 @@
+:host {
+  flex: 1;
+}
diff --git a/...res/cloud-foundry/users/invite-users/invite-users-create/invite-users-create.component.ts b/...res/cloud-foundry/users/invite-users/invite-users-create/invite-users-create.component.ts
@@ -1,5 +1,11 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Observable, of as observableOf } from 'rxjs';
+import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
+
+import {
+  StackedInputActionsState,
+  StackedInputActionsUpdate,
+} from '../../../../../shared/components/stacked-input-actions/stacked-input-actions.component';
+import { ActiveRouteCfOrgSpace } from '../../../cf-page.types';
 
 @Component({
   selector: 'app-invite-users-create',
@@ -8,9 +14,21 @@ import { Observable, of as observableOf } from 'rxjs';
 })
 export class InviteUsersCreateComponent implements OnInit, OnDestroy {
 
-  valid$: Observable<boolean> = observableOf(false);
+  valid$: Observable<boolean>;
+  stepValid = new BehaviorSubject<boolean>(false);
+  // state$: Observable<StackedInputActionsState[]>;
+  state = new BehaviorSubject<StackedInputActionsState[]>([]);
+  isSpace = false;
+  // createUserResults$: Observable<StackedInputActionsState[]>;
 
-  constructor() { }
+  constructor(private activeRouteCfOrgSpace: ActiveRouteCfOrgSpace) {
+    this.valid$ = this.stepValid.asObservable();
+    this.isSpace = !!this.activeRouteCfOrgSpace.spaceGuid || true; // TODO: RC
+  }
+
+  updateUsers(users: StackedInputActionsUpdate) {
+    this.stepValid.next(users.valid);
+  }
 
   ngOnInit() {
   }
@@ -47,7 +65,8 @@ export class InviteUsersCreateComponent implements OnInit, OnDestroy {
 
   onNext = () => {
     // this.store.dispatch(new UsersRolesSetUsers(this.cfUserService.activeRouteCfOrgSpace.cfGuid, [user.entity]));
-
+    // TODO: RC wire in invite service create user function to here
+    // TODO: RC what happens if some pass and some fail? Do we re-attempt the passed?
     return observableOf({ success: false });
   }
 

diff --git a/src/frontend/app/shared/components/boolean-indicator/boolean-indicator.component.ts b/src/frontend/app/shared/components/boolean-indicator/boolean-indicator.component.ts
@@ -6,7 +6,8 @@ export enum BooleanIndicatorType {
   unlockedLocked = 'unlocked-locked',
   yesNo = 'yes-no',
   trueFalse = 'true-false',
-  healthyUnhealthy = 'healthy-unhealthy'
+  healthyUnhealthy = 'healthy-unhealthy',
+  succeededFailed = 'success-failed'
 }
 
 
@@ -32,10 +33,12 @@ export class BooleanIndicatorComponent {
     Enabled: 'check_circle',
     Healthy: 'check_circle',
     True: 'check_circle',
+    Succeeded: 'check_circle',
     Add: 'add_circle',
     No: 'highlight_off',
     Disabled: 'highlight_off',
     Unhealthy: 'highlight_off',
+    Failed: 'remove_circle',
     False: 'highlight_off',
     Remove: 'remove_circle',
     Locked: 'lock_outline',
@@ -52,7 +55,7 @@ export class BooleanIndicatorComponent {
     return this.capitalizeFirstLetter(value ? enabledText : disabledText);
   }
 
-  getTypeText = (s) => s.split('-');
+  getTypeText = (s: string) => s.split('-');
 
   capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1);
 }
diff --git a/...components/stacked-input-actions/stacked-input-action/stacked-input-action.component.html b/...components/stacked-input-actions/stacked-input-action/stacked-input-action.component.html
@@ -0,0 +1,22 @@
+<!-- // TODO: rc generic validation OR change name -->
+<div class="input-action">
+  <form class="input-action__form stepper-form">
+    <mat-form-field class="">
+      <input matInput placeholder="Email" [formControl]="emailFormControl">
+      <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
+        Please enter a valid email address
+      </mat-error>
+      <mat-error *ngIf="emailFormControl.hasError('required')">
+        Email is required
+      </mat-error>
+    </mat-form-field>
+  </form>
+  <div class="input-action__detail">
+    <mat-icon class="input-action__detail__remove" (click)="remove.emit()">indeterminate_check_box</mat-icon>
+    <div *ngIf="state" class="input-action__detail__result">
+      <app-boolean-indicator *ngIf="state.result === result.SUCCEEDED || state.result === result.FAILED" [isTrue]="state.result === result.SUCCEEDED" type="succeeded-failed"></app-boolean-indicator>
+      {{ state.message }}
+    </div>
+  </div>
+
+</div>
diff --git a/...components/stacked-input-actions/stacked-input-action/stacked-input-action.component.scss b/...components/stacked-input-actions/stacked-input-action/stacked-input-action.component.scss
@@ -0,0 +1,37 @@
+.input-action {
+  align-items: center;
+  display: flex;
+  // flex-direction: row;
+
+   > *, &__detail > *, &__detail__result app-boolean-indicator { // TODO: RC flatten
+    margin-right: 10px;
+   }
+
+  &__form {
+    align-items: center;
+    flex: 1;
+    flex-direction: row;
+  }
+  &__detail {
+    align-items: center;
+    display: flex;
+    margin-top: 20px;
+    > * {
+      // margin-right: 10px;
+    }
+
+    &__remove {
+      cursor: pointer;
+      // padding-left: 10px;
+    }
+
+    &__result {
+      align-items: center;
+      display: flex;
+      app-boolean-indicator {
+        // margin-right: 10px;
+      }
+    }
+  }
+
+}
diff --git a/...ponents/stacked-input-actions/stacked-input-action/stacked-input-action.component.spec.ts b/...ponents/stacked-input-actions/stacked-input-action/stacked-input-action.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StackedInputActionComponent } from './stacked-input-action.component';
+
+describe('StackedInputActionComponent', () => {
+  let component: StackedInputActionComponent;
+  let fixture: ComponentFixture<StackedInputActionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StackedInputActionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StackedInputActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/...d/components/stacked-input-actions/stacked-input-action/stacked-input-action.component.ts b/...d/components/stacked-input-actions/stacked-input-action/stacked-input-action.component.ts
@@ -0,0 +1,58 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { Observable, Subscription } from 'rxjs';
+
+import { safeUnsubscribe } from '../../../../core/utils.service';
+import { StackedInputActionsState } from '../stacked-input-actions.component';
+
+export enum StackedInputActionResult {
+  PROCESSING = 'PROCESSING',
+  SUCCEEDED = 'SUCCEEDED',
+  FAILED = 'FAILED'
+}
+
+export interface StackedInputActionUpdate { value: string; valid: boolean; }
+
+@Component({
+  selector: 'app-stacked-input-action',
+  templateUrl: './stacked-input-action.component.html',
+  styleUrls: ['./stacked-input-action.component.scss']
+})
+export class StackedInputActionComponent implements OnInit, OnDestroy {
+
+
+  @Input() state$: Observable<StackedInputActionsState>;
+  result = StackedInputActionResult;
+  @Output() update = new EventEmitter<StackedInputActionUpdate>();
+  @Output() remove = new EventEmitter<any>();
+
+  emailFormControl = new FormControl('', [
+    Validators.required,
+    Validators.email,
+  ]);
+  state: StackedInputActionsState;
+  subs: Subscription[] = [];
+
+  constructor() { }
+
+  ngOnInit() {
+    this.subs.push(this.emailFormControl.valueChanges.subscribe((value) => {
+      this.update.emit({ value, valid: this.emailFormControl.valid });
+    }));
+
+    this.subs.push(this.state$.subscribe(incState => {
+      this.state = incState;
+      if (incState && incState.result === StackedInputActionResult.PROCESSING) {
+        this.emailFormControl.disable();
+      } else {
+        this.emailFormControl.enable();
+      }
+    }));
+  }
+
+  ngOnDestroy(): void {
+    safeUnsubscribe(...this.subs);
+  }
+
+
+}
diff --git a/...frontend/app/shared/components/stacked-input-actions/stacked-input-actions.component.html b/...frontend/app/shared/components/stacked-input-actions/stacked-input-actions.component.html
@@ -0,0 +1,6 @@
+<div class="stacked-input__inputs">
+  <div #inputs></div>
+</div>
+<button class="stacked-input__add" mat-button color="accent" (click)="add()">Add another <mat-icon class="">add_box</mat-icon></button>
+<!-- <span class="stacked-input__add" (click)="add()">Add another <mat-icon class="">add_box</mat-icon></span> -->
+<!-- <mat-icon class="" (click)="add()">person_add</mat-icon> -->
diff --git a/...frontend/app/shared/components/stacked-input-actions/stacked-input-actions.component.scss b/...frontend/app/shared/components/stacked-input-actions/stacked-input-actions.component.scss
@@ -0,0 +1,10 @@
+.stacked-input {
+  &__add {
+    // cursor: pointer;
+    .mat-button-wrapper {
+      align-items: center;
+      display: flex;
+    }
+
+  }
+}
diff --git a/...ntend/app/shared/components/stacked-input-actions/stacked-input-actions.component.spec.ts b/...ntend/app/shared/components/stacked-input-actions/stacked-input-actions.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StackedInputActionsComponent } from './stacked-input-actions.component';
+
+describe('StackedInputActionsComponent', () => {
+  let component: StackedInputActionsComponent;
+  let fixture: ComponentFixture<StackedInputActionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StackedInputActionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StackedInputActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});