WIP

src/app/cell-group/join-domain/join-domain.component.html

@@ -0,0 +1,17 @@
+<nb-card status="success">
+    <nb-card-header>
+        加入小組
+    </nb-card-header>
+    <nb-card-body>
+        <div class='col-12 col-md-6'>
+            <div class='form-group'>
+                <label for='domain' class='label'>小組</label>
+                <op-drop-down name='domain' id='domain' [(ngModel)]='domainId' [source]='domainOptions'></op-drop-down>
+            </div>
+        </div>
+    </nb-card-body>
+    <nb-card-footer>
+        <button class="float-right mr-2" fullWidth nbButton hero status="primary" size="large"
+            (click)="joinDomain()">加入小組</button>
+    </nb-card-footer>
+</nb-card>

src/app/cell-group/join-domain/join-domain.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JoinDomainComponent } from './join-domain.component';
+
+describe('JoinDomainComponent', () => {
+  let component: JoinDomainComponent;
+  let fixture: ComponentFixture<JoinDomainComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ JoinDomainComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JoinDomainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/cell-group/join-domain/join-domain.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DomainType, PastoralDomain } from '../../entity/PastoralDomain';
+import { PastoralDomainService } from '../../services/crudServices/pastoral-domain.service';
+import { StateService } from '../../services/state.service';
+import { MyAppBase } from '../MyAppBase';
+import { first } from 'rxjs/operators';
+import { DropDownOption } from '../../entity/dropDownOption';
+
+@Component({
+  selector: 'ngx-join-domain',
+  templateUrl: './join-domain.component.html',
+  styleUrls: ['./join-domain.component.scss']
+})
+export class JoinDomainComponent extends MyAppBase {
+
+  constructor(
+    protected stateService: StateService,
+    protected route: ActivatedRoute,
+    protected pastoralDomainService: PastoralDomainService
+  ) {
+    super(stateService, route, pastoralDomainService);
+    this.redirectIfNoDomains = false;
+  }
+  domainId: string;
+  allDomains: PastoralDomain[];
+  domainOptions: DropDownOption[] = [];
+  pageOnInit(): void {
+    this.isLoading = true;
+    this.pastoralDomainService.getAll().pipe(first()).subscribe(result => {
+      this.allDomains = result.filter(d => d.type == DomainType.CellGroup || d.type == DomainType.HappinessGroup);
+      this.domainOptions = this.allDomains.map(d => new DropDownOption(d.id, d.name));
+      this.isLoading = false;
+    });
+  }
+  joinDomain() {
+
+  }
+}