feat(jira): add cfg stepper as its own modal

johannesjo · Dec 6, 2018 · 58ceab8 · 58ceab8
1 parent 0ef1596
commit 58ceab8
Show file tree

Hide file tree

Showing 11 changed files with 153 additions and 66 deletions.
diff --git a/src/app/issue/jira/dialog-jira-initial-setup/dialog-jira-initial-setup.component.html b/src/app/issue/jira/dialog-jira-initial-setup/dialog-jira-initial-setup.component.html
@@ -0,0 +1,7 @@
+<h2 mat-dialog-title>
+  Setup Jira for Project
+</h2>
+<mat-dialog-content>
+  <jira-cfg-stepper (onSaveCfg)="saveJiraCfg($event)"
+                    [cfg]="jiraCfg"></jira-cfg-stepper>
+</mat-dialog-content>
diff --git a/src/app/issue/jira/dialog-jira-initial-setup/dialog-jira-initial-setup.component.scss b/src/app/issue/jira/dialog-jira-initial-setup/dialog-jira-initial-setup.component.scss
diff --git a/src/app/issue/jira/dialog-jira-initial-setup/dialog-jira-initial-setup.component.spec.ts b/src/app/issue/jira/dialog-jira-initial-setup/dialog-jira-initial-setup.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogJiraInitialSetupComponent } from './dialog-jira-initial-setup.component';
+
+describe('DialogJiraInitialSetupComponent', () => {
+  let component: DialogJiraInitialSetupComponent;
+  let fixture: ComponentFixture<DialogJiraInitialSetupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogJiraInitialSetupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogJiraInitialSetupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/issue/jira/dialog-jira-initial-setup/dialog-jira-initial-setup.component.ts b/src/app/issue/jira/dialog-jira-initial-setup/dialog-jira-initial-setup.component.ts
@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { JiraCfg } from '../jira';
+
+@Component({
+  selector: 'dialog-jira-initial-setup',
+  templateUrl: './dialog-jira-initial-setup.component.html',
+  styleUrls: ['./dialog-jira-initial-setup.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DialogJiraInitialSetupComponent implements OnInit {
+  jiraCfg: JiraCfg;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private _matDialogRef: MatDialogRef<DialogJiraInitialSetupComponent>,
+  ) {
+    this.jiraCfg = this.data.jiraCfg;
+  }
+
+  ngOnInit() {
+  }
+
+  saveJiraCfg($event) {
+    this._matDialogRef.close($event);
+  }
+}
diff --git a/src/app/issue/jira/jira.module.ts b/src/app/issue/jira/jira.module.ts
@@ -4,6 +4,7 @@ import { JiraCfgStepperComponent } from './jira-cfg-stepper/jira-cfg-stepper.com
 import { UiModule } from '../../ui/ui.module';
 import { CoreModule } from '../../core/core.module';
 import { NgxElectronModule } from 'ngx-electron';
+import { DialogJiraInitialSetupComponent } from './dialog-jira-initial-setup/dialog-jira-initial-setup.component';
 
 @NgModule({
   imports: [
@@ -12,7 +13,8 @@ import { NgxElectronModule } from 'ngx-electron';
     UiModule,
     NgxElectronModule,
   ],
-  declarations: [JiraCfgStepperComponent],
+  declarations: [JiraCfgStepperComponent, DialogJiraInitialSetupComponent],
+  entryComponents: [DialogJiraInitialSetupComponent],
   exports: [JiraCfgStepperComponent],
 })
 export class JiraModule {

diff --git a/src/app/project/dialogs/create-project/dialog-create-project.component.html b/src/app/project/dialogs/create-project/dialog-create-project.component.html
@@ -12,42 +12,30 @@ <h2 mat-dialog-title>
                  [fields]="formCfg"
                  [options]="formOptions"
                  [form]="form">
+    </formly-form>
 
-      <mat-accordion>
-        <mat-expansion-panel [expanded]="openPanelId==='JIRA'"
-                             (opened)="openPanelId='JIRA'">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <mat-icon *ngIf="!projectData?.issueIntegrationCfgs?.JIRA">explore</mat-icon>
-              <mat-icon *ngIf="projectData?.issueIntegrationCfgs?.JIRA">checkmark</mat-icon>
-              Jira
-            </mat-panel-title>
-            <mat-panel-description>
-              Set up jira issue integration
-            </mat-panel-description>
-          </mat-expansion-panel-header>
-
-          <!--Todo show stepper for first setup, show config section when editing afterwards -->
-          <jira-cfg-stepper (onSaveCfg)="saveJiraCfg($event)"
-                            [cfg]="projectData?.issueIntegrationCfgs?.JIRA"></jira-cfg-stepper>
-        </mat-expansion-panel>
 
-        <mat-expansion-panel [expanded]="openPanelId==='GIT'"
-                             (opened)="openPanelId='GIT'">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <mat-icon *ngIf="!projectData?.issueIntegrationCfgs?.GIT">card_giftcard</mat-icon>
-              <mat-icon *ngIf="projectData?.issueIntegrationCfgs?.GIT">checkmark</mat-icon>
-              GitHub
-            </mat-panel-title>
-            <mat-panel-description>
-              Set up github issue integration
-            </mat-panel-description>
-          </mat-expansion-panel-header>
-        </mat-expansion-panel>
-      </mat-accordion>
-      <br>
-    </formly-form>
+    <div class="issue-provider-cfg">
+      <h3>Issue Provider Configs (optional)</h3>
+      <div class="item">
+        <button mat-raised-button=""
+                color="primary"
+                (click)="openJiraCfg()"
+                type="button">
+          <mat-icon *ngIf="!jiraCfg">explore</mat-icon>
+          <mat-icon *ngIf="jiraCfg">checkmark</mat-icon>
+          Setup Jira Integration
+        </button>
+      </div>
+      <!--<div class="item">-->
+      <!--<button mat-raised-button="" color=primary-->
+      <!--type="button">-->
+      <!--<mat-icon *ngIf="!projectData?.issueIntegrationCfgs?.GIT">card_giftcard</mat-icon>-->
+      <!--<mat-icon *ngIf="projectData?.issueIntegrationCfgs?.GIT">checkmark</mat-icon>-->
+      <!--Setup Github Issue Integration-->
+      <!--</button>-->
+      <!--</div>-->
+    </div>
   </mat-dialog-content>
 
 

diff --git a/src/app/project/dialogs/create-project/dialog-create-project.component.scss b/src/app/project/dialogs/create-project/dialog-create-project.component.scss
@@ -0,0 +1,9 @@
+@import '../../../../variables';
+
+.issue-provider-cfg {
+  .item {
+    margin-bottom: $s;
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/src/app/project/dialogs/create-project/dialog-create-project.component.ts b/src/app/project/dialogs/create-project/dialog-create-project.component.ts
@@ -1,5 +1,5 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
 import { Project } from '../../project.model';
 import { FormGroup } from '@angular/forms';
 import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';
@@ -8,17 +8,17 @@ import { DEFAULT_PROJECT } from '../../project.const';
 import { JiraCfg } from '../../../issue/jira/jira';
 import { BASIC_PROJECT_CONFIG_FORM_CONFIG } from '../../project-form-cfg.const';
 import { IssueIntegrationCfgs } from '../../../issue/issue';
+import { DialogJiraInitialSetupComponent } from '../../../issue/jira/dialog-jira-initial-setup/dialog-jira-initial-setup.component';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'dialog-create-project',
   templateUrl: './dialog-create-project.component.html',
   styleUrls: ['./dialog-create-project.component.scss'],
 })
-export class DialogCreateProjectComponent implements OnInit {
-  public projectData: Project | Partial<Project> = DEFAULT_PROJECT;
-  public jiraCfg: JiraCfg;
-
-  public openPanelId: string;
+export class DialogCreateProjectComponent implements OnInit, OnDestroy {
+  projectData: Project | Partial<Project> = DEFAULT_PROJECT;
+  jiraCfg: JiraCfg;
 
   form = new FormGroup({});
   formOptions: FormlyFormOptions = {
@@ -28,19 +28,33 @@ export class DialogCreateProjectComponent implements OnInit {
   };
   formCfg: FormlyFieldConfig[] = BASIC_PROJECT_CONFIG_FORM_CONFIG.items;
 
+  private _subs = new Subscription();
+
   constructor(
     @Inject(MAT_DIALOG_DATA) private _project: Project,
     private _projectService: ProjectService,
+    private _matDialog: MatDialog,
     private _matDialogRef: MatDialogRef<DialogCreateProjectComponent>,
+    private _cd: ChangeDetectorRef,
   ) {
   }
 
   ngOnInit() {
     if (this._project) {
       this.projectData = Object.assign({}, this._project);
+
+      if (this.projectData.issueIntegrationCfgs) {
+        if (this.projectData.issueIntegrationCfgs.JIRA) {
+          this.jiraCfg = this.projectData.issueIntegrationCfgs.JIRA;
+        }
+      }
     }
   }
 
+  ngOnDestroy(): void {
+    this._subs.unsubscribe();
+  }
+
   submit() {
     const issueIntegrationCfgs: IssueIntegrationCfgs = Object.assign(this.projectData.issueIntegrationCfgs, {
       JIRA: this.jiraCfg,
@@ -60,16 +74,33 @@ export class DialogCreateProjectComponent implements OnInit {
     this._matDialogRef.close();
   }
 
-  saveJiraCfg(jiraCfg: JiraCfg) {
+  cancelEdit() {
+    this._matDialogRef.close();
+  }
+
+  openJiraCfg() {
+    this._subs.add(this._matDialog.open(DialogJiraInitialSetupComponent, {
+      restoreFocus: true,
+      data: {
+        jiraCfg: this.projectData.issueIntegrationCfgs.JIRA,
+      }
+    }).afterClosed().subscribe((jiraCfg: JiraCfg) => {
+      console.log('afterClosed', jiraCfg);
+
+      if (jiraCfg) {
+        this._saveJiraCfg(jiraCfg);
+      }
+    }));
+  }
+
+  private _saveJiraCfg(jiraCfg: JiraCfg) {
     this.jiraCfg = jiraCfg;
 
+    console.log(this.projectData.id);
+
+    // if we're editing save right away
     if (this.projectData.id) {
       this._projectService.updateIssueProviderConfig(this.projectData.id, 'JIRA', this.jiraCfg);
     }
-    this.openPanelId = undefined;
-  }
-
-  cancelEdit() {
-    this._matDialogRef.close();
   }
 }
diff --git a/src/app/project/store/project.actions.ts b/src/app/project/store/project.actions.ts
@@ -17,7 +17,6 @@ export enum ProjectActionTypes {
   UpdateProjectIssueProviderCfg = '[Project] Update Project Issue Provider Cfg',
   DeleteProject = '[Project] Delete Project',
   DeleteProjects = '[Project] Delete Projects',
-  SaveProjectIssueConfig = '[Project] Save Issue Config for Project',
 }
 
 export class LoadProjectState implements Action {
@@ -90,12 +89,6 @@ export class DeleteProjects implements Action {
   }
 }
 
-export class SaveProjectIssueConfig implements Action {
-  readonly type = ProjectActionTypes.SaveProjectIssueConfig;
-
-  constructor(public payload: { projectId: string, issueProviderKey: IssueProviderKey, providerCfg: IssueIntegrationCfg }) {
-  }
-}
 
 export type ProjectActions
   = LoadProjects
@@ -108,6 +101,5 @@ export type ProjectActions
   | UpdateProjectIssueProviderCfg
   | DeleteProject
   | DeleteProjects
-  | SaveProjectIssueConfig
   ;
 
diff --git a/src/app/project/store/project.effects.ts b/src/app/project/store/project.effects.ts
@@ -21,7 +21,7 @@ export class ProjectEffects {
         ProjectActionTypes.SetCurrentProject,
         ProjectActionTypes.UpdateProject,
         ProjectActionTypes.UpdateProjectAdvancedCfg,
-        ProjectActionTypes.SaveProjectIssueConfig,
+        ProjectActionTypes.UpdateProjectIssueProviderCfg,
       ),
       withLatestFrom(
         this._store$.pipe(select(selectProjectFeatureState))

diff --git a/src/app/project/store/project.reducer.ts b/src/app/project/store/project.reducer.ts
@@ -1,4 +1,4 @@
-import { createEntityAdapter, EntityAdapter, EntityState, Update } from '@ngrx/entity';
+import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
 import { Project } from '../project.model';
 import { ProjectActions, ProjectActionTypes } from './project.actions';
 import { createFeatureSelector, createSelector } from '@ngrx/store';
@@ -135,16 +135,22 @@ export function projectReducer(
       }, state);
     }
 
-    case ProjectActionTypes.SaveProjectIssueConfig: {
-      const currentProject = state.entities[payload.projectId];
-      const issueProviderCfg = Object.assign({}, currentProject.issueIntegrationCfgs);
-      const update = {
-        id: payload.projectId,
+    case ProjectActionTypes.UpdateProjectIssueProviderCfg: {
+      const {projectId, providerCfg, issueProviderKey} = action.payload;
+      const currentProject = state.entities[projectId];
+
+      return projectAdapter.updateOne({
+        id: projectId,
         changes: {
-          issueProviderCfg: issueProviderCfg
+          issueIntegrationCfgs: {
+            ...currentProject.issueIntegrationCfgs,
+            [issueProviderKey]: {
+              ...currentProject.issueIntegrationCfgs[issueProviderKey],
+              ...providerCfg,
+            }
+          }
         }
-      } as Update<Project>;
-      return projectAdapter.updateOne(update, state);
+      }, state);
     }
 
     default: {