feat(jobpage): get job info from issue comments

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

@@ -0,0 +1,12 @@
+export interface JobData {
+  jobTitle: string; // 岗位名称
+  companyName: string;
+  companyDescription: string;
+  jobDescription: string;
+  yearRequire: string;
+  workAddress: string;
+  salary: string;
+  contact: string;
+  date: string; // 发布日期
+  htmlUrl: string; // issues comments 的url地址
+}

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

@@ -0,0 +1,39 @@
+<form class="form">
+  <p>
+    <mat-form-field class="half-width">
+      <input matInput placeholder="岗位名称" maxlength="40" value="" />
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field class="full-width">
+      <input matInput placeholder="公司名称" maxlength="40" value="" />
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field class="full-width">
+      <textarea
+        matInput
+        placeholder="公司一句话介绍"
+        maxlength="150"
+      ></textarea>
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field class="full-width">
+      <textarea matInput placeholder="工作简介" style="height: 60px;" maxlength="350"></textarea>
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field class="half-width">
+      <input matInput placeholder="年限要求" maxlength="20" />
+    </mat-form-field>
+    <mat-form-field class="half-width">
+      <input matInput placeholder="工作地址" maxlength="20" />
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <input matInput placeholder="联系方式" />
+    </mat-form-field>
+  </p>
+</form>

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

@@ -0,0 +1,7 @@
+.full-width {
+  width: 100%;
+}
+
+.half-width {
+  width: 50%;
+}

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

@@ -0,0 +1,23 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { 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 {
+  constructor(
+    public dialogRef: MatDialogRef<CreateJobDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: JobData
+  ) {}
+
+  ngOnInit(): void {
+    console.log(this.data);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

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

@@ -1 +1,59 @@
-<p>job works!</p>
+<div class="job">
+  <div class="title">
+    <h2>DevOps 招聘需求</h2>
+    <div class="operate">
+      <button mat-flat-button color="primary" (click)="openDialog()" disabled>
+        发布招聘
+      </button>
+    </div>
+  </div>
+  <div class="content">
+    <ng-container>
+      <table class="job-table">
+        <thead>
+          <tr>
+            <th class="first_td first_td_name">标题</th>
+            <th>公司</th>
+            <th>工作城市</th>
+            <th>发布日期<em class="blue_saojian"></em></th>
+            <th>联系方式</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngIf="!loading">
+            <td colspan="5">
+              <mat-progress-spinner
+                class="spinner"
+                [color]="'primary'"
+                [mode]="'indeterminate'"
+                value="60"
+                diameter="40"
+              >
+              </mat-progress-spinner>
+            </td>
+          </tr>
+          <tr *ngIf="!loading && !jobList.length">
+            <td colspan="5">
+              <div class="error">数据请求失败！</div>
+            </td>
+          </tr>
+          <tr *ngFor="let job of jobList; let index = index">
+            <td>
+              <a
+                href="{{ job.htmlUrl }}"
+                matTooltip="点击查看详情"
+                class="link"
+                target="_blank"
+                >{{ job.jobTitle || 'DevOps工程师' }}</a
+              >
+            </td>
+            <td>{{ job.companyName }}</td>
+            <td>{{ job.workAddress }}</td>
+            <td>{{ job.date }}</td>
+            <td>{{ job.contact }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </ng-container>
+  </div>
+</div>

src/app/presentation/job/job.component.scss

@@ -0,0 +1,48 @@
+.job {
+  padding: 30px 0;
+  margin: 30px auto 0 auto;
+  width: 1200px;
+  background-color: #fff;
+
+  .title {
+    padding-left: 20px;
+    height: 80px;
+    color: #7753df;
+
+    h2 {
+      float: left;
+      width: 300px;
+    }
+  }
+
+  .operate {
+    float: right;
+    width: 150px;
+  }
+}
+
+.job-table {
+  width: 100%;
+
+  tr {
+    th,
+    td {
+      text-align: center;
+      border-bottom: 1px solid #e9ecef;
+      padding: 18px 3px;
+    }
+
+    th {
+      font-size: 16px;
+    }
+
+    .spinner {
+      margin: 0 auto;
+    }
+  }
+
+  .error {
+    color: red;
+    margin: 0 auto;
+  }
+}

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

@@ -1,10 +1,85 @@
+import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { format } from 'date-fns';
+import { CreateJobDialogComponent } from './create-job-dialog/create-job-dialog.component';
+import { JobData } from './create-job-dialog/JobData';
 
 @Component({
   selector: 'app-job',
   templateUrl: './job.component.html',
   styleUrls: ['./job.component.scss'],
 })
 export class JobComponent implements OnInit {
-  ngOnInit(): void {}
+  loading = false;
+  jobList: JobData[] = [];
+
+  constructor(public dialog: MatDialog, private http: HttpClient) {}
+
+  ngOnInit(): void {
+    this.qryJobComments();
+  }
+
+  openDialog(): void {
+    const dialogRef = this.dialog.open(CreateJobDialogComponent, {
+      width: '650px',
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      // console.log('The dialog was closed');
+    });
+  }
+
+  qryJobComments() {
+    this.loading = true;
+    this.http
+      .get('https://api.github.com/repos/phodal/ledge/issues/140/comments')
+      .subscribe(
+        (res: any[]) => {
+          const result: any[] = res || [];
+          const jobList = [];
+          for (const job of result) {
+            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');
+            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['联系方式'];
+            jobList.push(jobInfo);
+          }
+          this.loading = false;
+          this.jobList = jobList;
+        },
+        () => {
+          this.loading = false;
+        }
+      );
+  }
+
+  splitOnFirstColon(str) {
+    const idx = str.indexOf('：');
+    return [str.substr(0, idx), str.substr(idx + 1)];
+  }
 }

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

@@ -6,14 +6,17 @@ 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 { CreateJobDialogComponent } from './create-job-dialog/create-job-dialog.component';
 
 @NgModule({
-  declarations: [JobComponent],
+  declarations: [JobComponent, CreateJobDialogComponent],
   imports: [
     CommonModule,
     FormsModule,
     SharedModule,
     LedgeRenderModule,
+    CustomMaterialModule,
     RouterModule.forChild([{ path: '', component: JobComponent }]),
   ],
 })

src/app/shared/custom-material.module.ts

@@ -16,6 +16,7 @@ import { MatSliderModule } from '@angular/material/slider';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 const modules = [
   MatToolbarModule,
@@ -31,6 +32,7 @@ const modules = [
   MatTooltipModule,
   MatTabsModule,
   MatSelectModule,
+  MatFormFieldModule,
 
   ScrollingModule,
 ];