feat(job): create job with github api

src/app/presentation/job/create-job-dialog/JobData.ts

@@ -1,3 +1,5 @@
+export const GITHUB_TOKEN = 'github token';
+
 export interface JobData {
  jobTitle: string; // 岗位名称
  companyName: string;
@@ -10,3 +12,50 @@ export interface JobData {
  date: string; // 发布日期
  htmlUrl: string; // issues comments 的url地址
 }
+
+export function issueToForm(info) {
+ const obj: JobData = {
+ jobTitle: '',
+ companyName: '',
+ companyDescription: '',
+ jobDescription: '',
+ yearRequire: '',
+ workAddress: '',
+ salary: '',
+ contact: '',
+ date: '',
+ htmlUrl: '',
+ };
+ /* tslint:disable : no-string-literal */
+ obj.jobTitle = info['岗位名称'] || '';
+ obj.companyName = info['公司名称'];
+ obj.companyDescription = info['公司一行简介'];
+ obj.workAddress = info['工作地址'];
+ obj.jobDescription = info['工作简介'];
+ obj.yearRequire = info['年限要求'];
+ obj.salary = info['待遇水平'];
+ obj.contact = info['联系方式'];
+
+ return obj;
+}
+
+export function formToIssue(data: JobData) {
+ const str =
+ '岗位名称：' +
+ data.jobTitle +
+ '\r\n公司名称：' +
+ data.companyName +
+ '\r\n公司一行简介：' +
+ data.companyDescription +
+ '\r\n工作地址：' +
+ data.workAddress +
+ '\r\n工作简介：' +
+ data.jobDescription +
+ '\r\n年限要求：' +
+ data.yearRequire +
+ '\r\n待遇水平：' +
+ data.salary +
+ '\r\n联系方式：' +
+ data.contact;
+ return str;
+}

src/app/presentation/job/create-job-dialog/create-job-dialog.component.html

@@ -1,12 +1,25 @@
-<form class="form">
+<form class="form" [formGroup]="jobForm">
+ <span class="close" (click)="close()">X</span>
  <p>
  <mat-form-field class="half-width">
- <input matInput placeholder="岗位名称" maxlength="40" value="" />
+ <input
+ matInput
+ placeholder="岗位名称"
+ maxlength="40"
+ formControlName="jobTitle"
+ required
+ />
  </mat-form-field>
  </p>
  <p>
  <mat-form-field class="full-width">
- <input matInput placeholder="公司名称" maxlength="40" value="" />
+ <input
+ matInput
+ placeholder="公司名称"
+ maxlength="40"
+ formControlName="companyName"
+ required
+ />
  </mat-form-field>
  </p>
  <p>
@@ -15,25 +28,69 @@
  matInput
  placeholder="公司一句话介绍"
  maxlength="150"
+ formControlName="companyDescription"
+ required
  ></textarea>
  </mat-form-field>
  </p>
  <p>
  <mat-form-field class="full-width">
- <textarea matInput placeholder="工作简介" style="height: 60px;" maxlength="350"></textarea>
+ <textarea
+ matInput
+ placeholder="工作简介"
+ style="height: 60px;"
+ maxlength="350"
+ formControlName="jobDescription"
+ required
+ ></textarea>
  </mat-form-field>
  </p>
  <p>
  <mat-form-field class="half-width">
- <input matInput placeholder="年限要求" maxlength="20" />
+ <input
+ matInput
+ formControlName="yearRequire"
+ required
+ placeholder="年限要求"
+ maxlength="20"
+ />
  </mat-form-field>
- <mat-form-field class="half-width">
- <input matInput placeholder="工作地址" maxlength="20" />
+ <mat-form-field class="half-width margin-left">
+ <input
+ matInput
+ formControlName="workAddress"
+ required
+ placeholder="工作地址"
+ maxlength="20"
+ />
  </mat-form-field>
  </p>
  <p>
- <mat-form-field>
- <input matInput placeholder="联系方式" />
+ <mat-form-field class="half-width">
+ <input
+ matInput
+ formControlName="salary"
+ placeholder="待遇水平"
+ required
+ />
+ </mat-form-field>
+ <mat-form-field class="half-width margin-left">
+ <input
+ matInput
+ formControlName="contact"
+ placeholder="联系方式"
+ required
+ clear
+ />
  </mat-form-field>
  </p>
+ <div class="operate">
+ <button mat-raised-button color="primary" (click)="onSubmit()">
+ 确认
+ </button>
+ <button mat-raised-button (click)="onReset()" style="margin-left: 15px;">
+ 清空
+ </button>
+ </div>
+ <p *ngIf="errorMessage" class="error">{{ errorMessage }}</p>
 </form>

src/app/presentation/job/create-job-dialog/create-job-dialog.component.scss

@@ -1,7 +1,32 @@
+@import '../../../../styles/color';
+
 .full-width {
  width: 100%;
 }
 
 .half-width {
- width: 50%;
+ width: 48%;
+}
+
+.margin-left {
+ margin-left: 15px;
+}
+
+.operate {
+ float: right;
+}
+
+.error {
+ color: $error-color;
+}
+
+form {
+ position: relative;
+}
+
+.close {
+ position: absolute;
+ right: -10px;
+ top: -10px;
+ cursor: pointer;
 }

src/app/presentation/job/create-job-dialog/create-job-dialog.component.ts

@@ -1,23 +1,83 @@
+import { HttpClient } from '@angular/common/http';
 import { Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { JobData } from './JobData';
+import { formToIssue, GITHUB_TOKEN, JobData } from './JobData';
 
 @Component({
  selector: 'create-job-dialog',
  templateUrl: './create-job-dialog.component.html',
  styleUrls: ['./create-job-dialog.component.scss'],
 })
 export class CreateJobDialogComponent implements OnInit {
+ jobForm: FormGroup;
+ errorMessage: string;
  constructor(
  public dialogRef: MatDialogRef<CreateJobDialogComponent>,
- @Inject(MAT_DIALOG_DATA) public data: JobData
- ) {}
+ @Inject(MAT_DIALOG_DATA) public data: JobData,
+ private fb: FormBuilder,
+ private http: HttpClient
+ ) {
+ this.jobForm = this.fb.group({
+ jobTitle: ['', Validators.required],
+ companyName: ['', Validators.required],
+ companyDescription: ['', Validators.required],
+ jobDescription: ['', Validators.required],
+ yearRequire: ['', Validators.required],
+ workAddress: ['', Validators.required],
+ salary: ['', Validators.required],
+ contact: ['', Validators.required],
+ });
+ }
+
+ ngOnInit(): void {}
+
+ close(flag = false): void {
+ this.dialogRef.close(flag);
+ }
 
- ngOnInit(): void {
- console.log(this.data);
+ onSubmit() {
+ this.errorMessage = '';
+ for (const key of Object.keys(this.jobForm.controls)) {
+ this.jobForm.controls[key].markAsDirty();
+ this.jobForm.controls[key].updateValueAndValidity();
+ }
+ if (this.jobForm.status === 'INVALID') {
+ return;
+ }
+
+ this.commentOnGithubIssue(this.jobForm.value);
+ }
+
+ onReset() {
+ this.errorMessage = '';
+ this.jobForm.reset();
  }
 
- onNoClick(): void {
- this.dialogRef.close();
+ commentOnGithubIssue(formValue) {
+ const body = formToIssue(formValue);
+
+ this.http
+ .post(
+ 'https://api.github.com/repos/phodal/ledge/issues/140/comments',
+ { body },
+ {
+ headers: {
+ Authorization: `token ${GITHUB_TOKEN}`,
+ },
+ }
+ )
+ .subscribe(
+ (res: any) => {
+ if (res.id) {
+ this.close(true);
+ } else {
+ this.errorMessage = res.message;
+ }
+ },
+ (err) => {
+ this.errorMessage = err.message;
+ }
+ );
  }
 }

src/app/presentation/job/job.component.html

@@ -2,7 +2,7 @@
  <div class="title">
  <h2>DevOps 招聘需求</h2>
  <div class="operate">
- <button mat-flat-button color="primary" (click)="openDialog()" disabled>
+ <button mat-flat-button color="primary" (click)="openDialog()">
  发布招聘
  </button>
  </div>
@@ -12,12 +12,12 @@ <h2>DevOps 招聘需求</h2>
  <table class="job-table">
  <thead>
  <tr>
- <th class="first_td first_td_name">标题</th>
+ <th>标题</th>
  <th>公司</th>
  <th>工作城市</th>
  <th>发布日期</th>
- <th>联系方式</th>
  <th>工作年限</th>
+ <th>联系方式</th>
  </tr>
  </thead>
  <tbody>

src/app/presentation/job/job.component.ts

@@ -1,10 +1,10 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { Title } from '@angular/platform-browser';
 import { format } from 'date-fns';
 import { CreateJobDialogComponent } from './create-job-dialog/create-job-dialog.component';
-import { JobData } from './create-job-dialog/JobData';
-import { Title } from '@angular/platform-browser';
+import { issueToForm, JobData } from './create-job-dialog/JobData';
 
 @Component({
  selector: 'app-job',
@@ -34,7 +34,9 @@ export class JobComponent implements OnInit {
  });
 
  dialogRef.afterClosed().subscribe((result) => {
- // console.log('The dialog was closed');
+ if (result) {
+ this.qryJobComments();
+ }
  });
  }
 
@@ -46,35 +48,16 @@ export class JobComponent implements OnInit {
  (res: any[]) => {
  const result: any[] = res || [];
  const jobList = [];
- for (const job of result) {
+ for (const job of result.reverse()) {
  const arr = job.body.replace(/:/g, '：').split('\r\n');
- const jobInfo: JobData = {
- jobTitle: '',
- companyName: '',
- companyDescription: '',
- jobDescription: '',
- yearRequire: '',
- workAddress: '',
- salary: '',
- contact: '',
- date: '',
- htmlUrl: '',
- };
  const info = {};
  for (const str of arr) {
  const [key, value] = this.splitOnFirstColon(str);
  info[key] = value;
  }
- jobInfo.date = format(new Date(job.updated_at), 'yyyy/MM/dd');
+ const jobInfo = issueToForm(info);
  jobInfo.htmlUrl = job.html_url;
- /* tslint:disable : no-string-literal */
- jobInfo.companyName = info['公司名称'];
- jobInfo.companyDescription = info['公司一行简介'];
- jobInfo.workAddress = info['工作地址'];
- jobInfo.jobDescription = info['工作简介'];
- jobInfo.yearRequire = info['年限要求'];
- jobInfo.salary = info['待遇水平'];
- jobInfo.contact = info['联系方式'];
+ jobInfo.date = format(new Date(job.updated_at), 'yyyy/MM/dd');
  jobList.push(jobInfo);
  }
  this.loading = false;

src/app/presentation/job/job.module.ts

@@ -1,13 +1,12 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { JobComponent } from './job.component';
-import { FormsModule } from '@angular/forms';
 import { LedgeRenderModule } from '@ledge-framework/render';
-
-import { SharedModule } from '../../shared/shared.module';
 import { CustomMaterialModule } from '../../shared/custom-material.module';
+import { SharedModule } from '../../shared/shared.module';
 import { CreateJobDialogComponent } from './create-job-dialog/create-job-dialog.component';
+import { JobComponent } from './job.component';
 
 @NgModule({
  declarations: [JobComponent, CreateJobDialogComponent],
@@ -17,6 +16,7 @@ import { CreateJobDialogComponent } from './create-job-dialog/create-job-dialog.
  SharedModule,
  LedgeRenderModule,
  CustomMaterialModule,
+ ReactiveFormsModule,
  RouterModule.forChild([{ path: '', component: JobComponent }]),
  ],
 })