fix(components/lookup): open lookup show more modal correctly when no…

… value is given while in single select mode (#53)
blackbaud · Mar 10, 2022 · e296d9f · e296d9f
1 parent 06c15fa
commit e296d9f
Show file tree

Hide file tree

Showing 14 changed files with 552 additions and 2 deletions.
diff --git a/apps/playground/src/app/app.module.ts b/apps/playground/src/app/app.module.ts
@@ -1,12 +1,13 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule],
+  imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule],
   providers: [],
   bootstrap: [AppComponent],
 })

diff --git a/apps/playground/src/app/components/components.module.ts b/apps/playground/src/app/components/components.module.ts
@@ -7,6 +7,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./datetime/datetime.module').then((m) => m.DatetimeModule),
   },
+  {
+    path: 'lookup',
+    loadChildren: () =>
+      import('./lookup/lookup.module').then((m) => m.LookupModule),
+  },
 ];
 
 @NgModule({

diff --git a/apps/playground/src/app/components/lookup/lookup.module.ts b/apps/playground/src/app/components/lookup/lookup.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: 'lookup',
+    loadChildren: () =>
+      import('./lookup/lookup.module').then((m) => m.LookupModule),
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LookupRoutingModule {}
+
+@NgModule({
+  imports: [LookupRoutingModule],
+})
+export class LookupModule {}
diff --git a/apps/playground/src/app/components/lookup/lookup/lookup-custom-picker.component.html b/apps/playground/src/app/components/lookup/lookup/lookup-custom-picker.component.html
@@ -0,0 +1,20 @@
+<sky-modal>
+  <sky-modal-header> Custom picker </sky-modal-header>
+  <sky-modal-content>
+    This is a custom picker!
+    <form [formGroup]="myForm">
+      <sky-checkbox formControlName="selectLast">
+        <sky-checkbox-label> Select last item </sky-checkbox-label>
+      </sky-checkbox>
+    </form>
+  </sky-modal-content>
+  <sky-modal-footer>
+    <button
+      class="sky-btn sky-btn-primary"
+      type="button"
+      (click)="modalInstance.save(myForm.get('selectLast').value)"
+    >
+      Save
+    </button>
+  </sky-modal-footer>
+</sky-modal>
diff --git a/apps/playground/src/app/components/lookup/lookup/lookup-custom-picker.component.ts b/apps/playground/src/app/components/lookup/lookup/lookup-custom-picker.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { SkyLookupShowMoreCustomPickerContext } from '@skyux/lookup';
+import { SkyModalInstance } from '@skyux/modals';
+
+@Component({
+  selector: 'app-lookup-custom-picker',
+  templateUrl: './lookup-custom-picker.component.html',
+})
+export class LookupCustomPickerComponent implements OnInit {
+  public myForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    public context: SkyLookupShowMoreCustomPickerContext,
+    public modalInstance: SkyModalInstance
+  ) {}
+
+  public ngOnInit(): void {
+    this.myForm = this.formBuilder.group({
+      selectLast: new FormControl(false),
+    });
+  }
+}
diff --git a/apps/playground/src/app/components/lookup/lookup/lookup-routing.module.ts b/apps/playground/src/app/components/lookup/lookup/lookup-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { LookupComponent } from './lookup.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: LookupComponent,
+      },
+    ]),
+  ],
+})
+export class LookupRoutingModule {}
diff --git a/apps/playground/src/app/components/lookup/lookup/lookup.component.html b/apps/playground/src/app/components/lookup/lookup/lookup.component.html
@@ -0,0 +1,197 @@
+<div class="app-screenshot" id="lookup-visual">
+  <form novalidate [formGroup]="friendsForm">
+    <div class="sky-form-group">
+      <label class="sky-control-label" id="my-friends-label">
+        Who are your friends?
+      </label>
+      <sky-lookup
+        ariaLabelledBy="my-friends-label"
+        formControlName="friends"
+        idProperty="id"
+        placeholderText="Type a person's name..."
+        [data]="people"
+        [disabled]="disabled"
+        [enableShowMore]="true"
+        [debounceTime]="1000"
+        [showAddButton]="true"
+      >
+      </sky-lookup>
+    </div>
+
+    <p>
+      <button
+        class="sky-btn sky-btn-default"
+        [ngClass]="{ 'sky-btn-disabled': disabled }"
+        id="btn-disable-lookup"
+        type="button"
+        (click)="disableLookup()"
+      >
+        Disable lookup
+      </button>
+    </p>
+
+    <sky-input-box [disabled]="disabled" class="sky-margin-stacked-lg">
+      <label class="sky-control-label" skyId #friendsInputBoxLabel="skyId">
+        Who are your friends?
+      </label>
+      <sky-lookup
+        formControlName="friends2"
+        idProperty="id"
+        placeholderText="Type a person's name..."
+        [ariaLabelledBy]="friendsInputBoxLabel.id"
+        [data]="people"
+        [debounceTime]="1000"
+        [disabled]="disabled"
+      >
+      </sky-lookup>
+    </sky-input-box>
+  </form>
+</div>
+
+<table>
+  <tr>
+    <th>Touched</th>
+    <td>{{ friendsForm.touched }}</td>
+  </tr>
+  <tr>
+    <th>Pristine</th>
+    <td>{{ friendsForm.pristine }}</td>
+  </tr>
+  <tr>
+    <th>Valid</th>
+    <td>{{ friendsForm.valid }}</td>
+  </tr>
+  <tr>
+    <th>Value</th>
+    <td>
+      <ng-container *ngFor="let friend of friendsForm.value.friends">
+        {{ friend.name }}
+      </ng-container>
+    </td>
+  </tr>
+</table>
+
+<div>
+  <p class="lookup-single-controls">
+    <button
+      class="sky-btn sky-btn-default"
+      [ngClass]="{ 'sky-btn-disabled': disabled }"
+      id="btn-toggle-select-mode"
+      type="button"
+      (click)="toggleSelectMode()"
+    >
+      Toggle select mode
+    </button>
+    <button
+      class="sky-btn sky-btn-default"
+      [ngClass]="{ 'sky-btn-disabled': disabled }"
+      id="btn-reset-value"
+      type="button"
+      (click)="onResetValueClick()"
+    >
+      Reset value
+    </button>
+    <button
+      class="sky-btn sky-btn-default"
+      id="btn-toggle-disabled"
+      type="button"
+      (click)="disabled = !disabled"
+    >
+      {{ disabled ? 'Enable' : 'Disable' }}
+    </button>
+    <sky-checkbox (change)="toggleCustomPicker()">
+      <sky-checkbox-label> Enable Custom Picker </sky-checkbox-label>
+    </sky-checkbox>
+  </p>
+
+  <div class="app-screenshot" id="lookup-single-visual">
+    <form novalidate [formGroup]="bestFriendsForm">
+      <sky-input-box [disabled]="disabled" class="sky-margin-stacked-lg">
+        <label class="sky-control-label"> Who is your best friend? </label>
+        <sky-lookup
+          formControlName="bestFriend"
+          idProperty="id"
+          placeholderText="Type a person's name..."
+          [selectMode]="bestFriendSelectMode"
+          [data]="people"
+          [disabled]="disabled"
+          [debounceTime]="1000"
+          [enableShowMore]="true"
+          [searchResultTemplate]="itemTemplate"
+          [showAddButton]="true"
+          [showMoreConfig]="showMoreConfig"
+          (addClick)="addButtonClicked()"
+        >
+        </sky-lookup>
+      </sky-input-box>
+    </form>
+  </div>
+
+  <div class="app-screenshot" id="lookup-single-async-visual">
+    <form novalidate [formGroup]="bestFriendsForm">
+      <sky-input-box [disabled]="disabled" class="sky-margin-stacked-lg">
+        <label class="sky-control-label">
+          Who is your best friend? (async)</label
+        >
+        <sky-lookup
+          formControlName="bestFriendAsync"
+          idProperty="id"
+          placeholderText="Type a person's name..."
+          [selectMode]="bestFriendSelectMode"
+          [disabled]="disabled"
+          [debounceTime]="1000"
+          [enableShowMore]="true"
+          [searchResultTemplate]="itemTemplate"
+          [showAddButton]="true"
+          [showMoreConfig]="showMoreConfig"
+          (searchAsync)="bestFriendSearch($event)"
+          (addClick)="addButtonClicked()"
+        >
+        </sky-lookup>
+      </sky-input-box>
+    </form>
+  </div>
+</div>
+
+<ng-template let-item="item" #itemTemplate>
+  <strong>{{ item.name }}</strong
+  ><br />
+  {{ item.id }}
+</ng-template>
+<ng-template let-item="item" #itemTemplate2>
+  {{ item.name }}<br />
+  {{ item.id }}
+</ng-template>
+
+<table id="single-mode-info">
+  <tr>
+    <th>Touched</th>
+    <td>{{ bestFriendsForm.touched }}</td>
+  </tr>
+  <tr>
+    <th>Pristine</th>
+    <td>{{ bestFriendsForm.pristine }}</td>
+  </tr>
+  <tr>
+    <th>Valid</th>
+    <td>{{ bestFriendsForm.valid }}</td>
+  </tr>
+  <tr>
+    <th>Value</th>
+    <td>
+      <ng-container *ngFor="let friend of bestFriendsForm.value.bestFriend">
+        {{ friend.name }}
+      </ng-container>
+    </td>
+  </tr>
+  <tr>
+    <th>Value async</th>
+    <td>
+      <ng-container
+        *ngFor="let friend of bestFriendsForm.value.bestFriendAsync"
+      >
+        {{ friend.name }}
+      </ng-container>
+    </td>
+  </tr>
+</table>
diff --git a/apps/playground/src/app/components/lookup/lookup/lookup.component.scss b/apps/playground/src/app/components/lookup/lookup/lookup.component.scss
@@ -0,0 +1,7 @@
+#lookup-visual,
+#lookup-single-visual,
+#theme-controls,
+.lookup-single-controls {
+  position: relative;
+  z-index: 1;
+}