This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Added All the styles and form inputs for the add project dialog (#770)

  • Loading branch information...
nakhbari committed Apr 30, 2018
1 parent 54d02ea commit 0efd594e88ff45f061141386f839e41cb128274b
View
@@ -20,7 +20,9 @@
"prefix": "fci",
"styles": [
"global/theme.scss",
"global/grid.scss"
"global/input.scss",
"global/grid.scss",
"global/dialog.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
@@ -12,7 +12,7 @@ class RepoViewModel
attr_reader :url
def initialize(repo:)
@full_name = repo.slug
@full_name = repo.full_name
@url = repo.url
end
end
@@ -1,3 +1,50 @@
<p>
add-project-dialog works!
</p>
<div mat-dialog-title>Add a project</div>
<div mat-dialog-content>
<div class="fci-dialog-form-section fci-input-container">
<div class="fci-section-title">For my project</div>
<input placeholder="Project Name" [(ngModel)]="project.project_name">
</div>
<div class="fci-dialog-form-section fci-input-container">
<div class="fci-section-title">With the repo</div>
<mat-select class="fci-repo-select" [(value)]="project.repo_name">
<mat-option *ngFor="let repo of repositories" [value]="repo.fullName">
{{repo.fullName}}
</mat-option>
</mat-select>
</div>
<div class="fci-dialog-form-section fci-input-container">
<div class="fci-section-title">I want to run the lane</div>
<mat-select class="fci-lane-select" [(value)]="project.lane">
<mat-option *ngFor="let lane of FAKE_LANES" [value]="lane">
{{lane}}
</mat-option>
</mat-select>
</div>
<div class="fci-dialog-form-section fci-input-container">
<div class="fci-section-title">With builds being triggered</div>
<mat-select class="fci-trigger-select" [(value)]="project.trigger_type">
<mat-option *ngFor="let triggerOption of TRIGGER_OPTIONS" [value]="triggerOption.value">
{{triggerOption.viewValue}}
</mat-option>
</mat-select>
<ng-container *ngIf="project.trigger_type === 'nightly'">
<span class="fci-at-time">at</span>
<mat-select class="fci-hour-select" [(value)]="timeSelectorData.hour">
<mat-option *ngFor="let hour of HOURS" [value]="hour">
{{hour}}
</mat-option>
</mat-select>
<mat-select class="fci-am-pm-select" [(value)]="timeSelectorData.isAm">
<mat-option [value]="true">AM</mat-option>
<mat-option [value]="false">PM</mat-option>
</mat-select>
</ng-container>
</div>
</div>
<div mat-dialog-actions>
<button mat-button>Close</button>
<button mat-raised-button color="primary" (click)="addProject()">Add Project</button>
</div>
<button mat-icon-button class="fci-dialog-icon-close-button">
<mat-icon>close</mat-icon>
</button>
@@ -0,0 +1,39 @@
.fci-dialog-form-section {
font-family: 'Roboto';
padding-bottom: 16px;
&:last-child {
padding-bottom: 74px;
}
.fci-section-title {
padding-bottom: 4px;
}
input {
width: 320px;
}
.mat-select.fci-lane-select,
.mat-select.fci-repo-select {
min-width: 200px
}
.mat-select.fci-trigger-select {
// This needs to change if you change the name of the
// longest select options
min-width: 178px;
}
.mat-select.fci-am-pm-select,
.mat-select.fci-hour-select {
min-width: 26px;
}
.fci-at-time {
padding: 0 8px;
}
}
.mat-select-value {
width: auto;
max-width: 100%;
}
.mat-dialog-actions {
justify-content: flex-end;
padding-bottom: 24px;
}
@@ -1,16 +1,39 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {CommonModule} from '@angular/common';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {FormsModule} from '@angular/forms';
import {MatButtonModule, MatDialogModule, MatIconModule, MatSelectModule} from '@angular/material';
import {MAT_DIALOG_DATA} from '@angular/material';
import {Subject} from 'rxjs/Subject';
import { AddProjectDialogComponent } from './add-project-dialog.component';
import {Repository} from '../../models/repository';
import {AddProjectDialogComponent} from './add-project-dialog.component';
describe('AddProjectDialogComponent', () => {
let component: AddProjectDialogComponent;
let fixture: ComponentFixture<AddProjectDialogComponent>;
let reposSubject: Subject<Repository[]>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddProjectDialogComponent ]
})
.compileComponents();
reposSubject = new Subject<Repository[]>();
TestBed
.configureTestingModule({
declarations: [AddProjectDialogComponent],
providers: [{
provide: MAT_DIALOG_DATA,
useValue: {repositories: reposSubject.asObservable()}
}],
imports: [
MatDialogModule,
MatButtonModule,
MatSelectModule,
MatIconModule,
CommonModule,
FormsModule,
]
})
.compileComponents();
}));
beforeEach(() => {
@@ -1,12 +1,71 @@
import {Component, OnInit} from '@angular/core';
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';
import {Observable} from 'rxjs/Observable';
import {Repository} from '../../models/repository';
import {AddProjectRequest} from '../../services/data.service';
export interface AddProjectDialogConfig {
repositories: Observable<Repository[]>;
}
interface TriggerOption {
viewValue: string;
value: 'commit'|'nightly';
}
interface TimeSelectorData {
hour: number;
isAm: boolean;
}
function timeSelectDataToMilitaryTime(timeData: TimeSelectorData): number {
return this.timeSelectorData.hour * (this.timeSelectorData.isAm ? 1 : 2) % 24;
}
@Component({
selector: 'fci-add-project-dialog',
templateUrl: './add-project-dialog.component.html',
styleUrls: ['./add-project-dialog.component.scss']
})
export class AddProjectDialogComponent implements OnInit {
constructor() {}
isLoadingRepositories = true;
repositories: Repository[];
readonly timeSelectorData: TimeSelectorData = {hour: 12, isAm: false};
// TODO: do something to make these properties camelCase
readonly project: AddProjectRequest = {
lane: '',
repo_org: '',
repo_name: '',
project_name: '',
trigger_type: 'commit',
};
readonly TRIGGER_OPTIONS: TriggerOption[] = [
{viewValue: 'for every commit and PR', value: 'commit'},
{viewValue: 'nightly', value: 'nightly'},
];
readonly HOURS: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
// TODO: get real lanes
readonly FAKE_LANES: string[] = ['ios test', 'ios beta', 'ios deploy'];
constructor(@Inject(MAT_DIALOG_DATA) private readonly data:
AddProjectDialogConfig) {}
ngOnInit() {
this.data.repositories.subscribe((repositories) => {
this.repositories = repositories;
this.project.repo_name = this.repositories[0].fullName;
this.isLoadingRepositories = false;
});
// TODO Get Lanes
this.project.lane = this.FAKE_LANES[0];
}
addProject() {
if (this.project.trigger_type === 'nightly') {
this.project.hour = timeSelectDataToMilitaryTime(this.timeSelectorData);
}
ngOnInit() {}
console.log('Project: ', this.project);
}
}
@@ -0,0 +1,25 @@
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {MatButtonModule, MatDialogModule, MatIconModule, MatSelectModule} from '@angular/material';
import {AddProjectDialogComponent} from './add-project-dialog.component';
@NgModule({
declarations: [
AddProjectDialogComponent,
],
entryComponents: [
AddProjectDialogComponent,
],
imports: [
/** Angular Library Imports */
CommonModule, FormsModule,
/** Internal Imports */
/** Angular Material Imports */
MatDialogModule, MatButtonModule, MatSelectModule, MatIconModule,
/** Third-Party Module Imports */
],
})
export class AddProjectDialogModule {
}
@@ -1,3 +1,4 @@
@import "../../shared/layout";
.fci-dashboard-header {
background-color: #E1BEE7;
.fci-dashboard-welcome {
@@ -17,7 +18,6 @@
line-height: 24px;
}
button {
text-transform: uppercase;
margin-top: 25px;
}
}
@@ -22,7 +22,10 @@ describe('DashboardComponent', () => {
let dataService: jasmine.SpyObj<Partial<DataService>>;
beforeEach(() => {
dataService = {getProjects: jasmine.createSpy()};
dataService = {
getProjects: jasmine.createSpy(),
getRepos: jasmine.createSpy()
};
TestBed
.configureTestingModule({
@@ -1,9 +1,12 @@
import {Component, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
import {Observable} from 'rxjs/Observable';
import {ProjectSummary, ProjectSummaryResponse} from '../models/project_summary';
import {Repository} from '../models/repository';
import {DataService} from '../services/data.service';
import {AddProjectDialogComponent} from './add-project-dialog/add-project-dialog.component';
import {AddProjectDialogComponent, AddProjectDialogConfig} from './add-project-dialog/add-project-dialog.component';
@Component({
selector: 'fci-dashboard',
@@ -16,6 +19,7 @@ export class DashboardComponent implements OnInit {
['name', 'latestBuild', 'repo', 'lane'];
isLoading = true;
projects: ProjectSummary[];
repositories: Observable<Repository[]>;
constructor(
private readonly dataService: DataService,
@@ -26,11 +30,19 @@ export class DashboardComponent implements OnInit {
this.projects = projects;
this.isLoading = false;
});
// Load repositories for adding a project ahead of time
this.repositories = this.dataService.getRepos();
}
openAddProjectDialog() {
const dialogRef =
this.dialog.open(AddProjectDialogComponent, {width: '250px', data: {}});
this.dialog.open<AddProjectDialogComponent, AddProjectDialogConfig>(
AddProjectDialogComponent, {
panelClass: 'fci-dialog-xs-fullscreen',
width: '637px',
data: {repositories: this.repositories}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
@@ -11,23 +11,22 @@ import {ProjectComponent} from '../project/project.component';
import {DataService} from '../services/data.service';
import {SharedMaterialModule} from '../shared_material.module';
import {AddProjectDialogComponent} from './add-project-dialog/add-project-dialog.component';
import {AddProjectDialogModule} from './add-project-dialog/add-project-dialog.modules';
@NgModule({
declarations: [
DashboardComponent,
AddProjectDialogComponent,
],
entryComponents: [
DashboardComponent,
AddProjectDialogComponent,
],
imports: [
/** Angular Library Imports */
RouterModule, // For routerLink directive
CommonModule, // For ngIf and other common directives
BrowserAnimationsModule,
/** Internal Imports */
CommonComponentsModule,
CommonComponentsModule, AddProjectDialogModule,
/** Angular Material Imports */
SharedMaterialModule, MatDialogModule,
/** Third-Party Module Imports */
View
@@ -0,0 +1,25 @@
@import '../shared/layout';
.mat-dialog-container {
position: relative; // needed to position close icon
}
// TODO: Fixed action buttons in fullscreen mode
.fci-dialog-xs-fullscreen .mat-dialog-container {
@include narrowCanvas {
border-radius: 0 !important;
height: 100%;
left: 0;
max-width: 100%;
max-height: 100%;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
}
.mat-icon-button.fci-dialog-icon-close-button {
position: absolute;
right: 8px;
top: 8px;
}
Oops, something went wrong.

0 comments on commit 0efd594

Please sign in to comment.