2024/07/11

eslint.config.js

+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+  
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);

src/app/menu/deny-list/deny-list.component.html

+<table style="margin-top:20px;">
+    <tr>
+        <td>
+            <span>利用者</span>
+        </td>
+        <td>
+            <span>{{model?.name}}</span>
+        </td>
+    </tr>
+    <tr>
+        <td colspan="2" align="center" style="padding-top:10px;">
+            <input type="button" class="btn common-button" value="削除依頼" (click)="onClickDel()">
+        </td>
+    </tr>
+</table>
+<ag-grid-angular class="ag-theme-quartz" style="height:500px;margin-top:20px;" [rowData]="denyList"
+    [columnDefs]="colDefs" [autoSizeStrategy]="autoSizeStrategy" [rowSelection]="rowSelection" [context]="context"
+    (gridReady)="onGridReady($event)" [pagination]=true></ag-grid-angular>
\ No newline at end of file

src/app/menu/deny-list/deny-list.component.spec.ts

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

src/app/menu/deny-list/deny-list.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { UserInfoModel } from '../../model/user-info.model';
+import { DenyListModel } from '../../model/denylist.model';
+import { ColDef, GridApi } from 'ag-grid-community';
+import { SizeColumnsToFitGridStrategy, SizeColumnsToFitProvidedWidthStrategy, SizeColumnsToContentStrategy } from 'ag-grid-community'
+import { DenyListService } from '../../service/deny-list.service';
+
+@Component({
+  selector: 'app-deny-list',
+  templateUrl: './deny-list.component.html',
+  styleUrl: './deny-list.component.css'
+})
+export class DenyListComponent implements OnInit {
+  @Input() model?: UserInfoModel;
+
+  denyList: DenyListModel[] = [];
+
+  context?: any;
+  private gridApi!: GridApi<DenyListModel>;
+  rowSelection: "single" | "multiple" = "multiple";
+
+  colDefs: ColDef[] = [
+    { headerName: '区間', field: "rideSection", width: 200, checkboxSelection: true, headerCheckboxSelection: true },
+    { headerName: '乗車日時', field: "getonDt", width: 130 },
+    { headerName: '降車日時', field: "getoffDt", width: 130 },
+    { headerName: '請求金額', field: "billingAmount", width: 100 },
+    { headerName: 'ステータス', field: "status", width: 100 },
+    { field: "id", hide: true }
+  ];
+  public autoSizeStrategy:
+    | SizeColumnsToFitGridStrategy
+    | SizeColumnsToFitProvidedWidthStrategy
+    | SizeColumnsToContentStrategy = {
+      type: "fitGridWidth",
+      defaultMinWidth: 100,
+      columnLimits: [
+        {
+          colId: "country",
+          minWidth: 900,
+        },
+      ],
+    };
+
+  /**
+   * コンストラクタ
+   * @param denyListService 拒否リストサービス
+   */
+  constructor(private denyListService: DenyListService) {
+    this.context = {
+      componentParent: this
+    }
+  }
+
+  /**
+   * 初期処理
+   */
+  ngOnInit(): void {
+    if (this.model && this.model.customerId) {
+      this.denyList = this.denyListService.getList(this.model.customerId);
+    }
+  }
+
+  /**
+   * 拒否リスト削除依頼
+   */
+  onClickDel(): void {
+    const list: DenyListModel[] = this.gridApi.getSelectedRows();
+
+    //拒否リスト削除依頼
+    this.denyListService.reqDelete(list);
+
+    //拒否リスト再取得
+    if (this.model && this.model.customerId) {
+      this.denyList = this.denyListService.getList(this.model.customerId);
+    }
+
+    //↓プロトタイプ
+    for (const deny of this.denyList) {
+      for (const model of list) {
+        if (model.id === deny.id) {
+          deny.status = "削除依頼済";
+          break;
+        }
+      }
+    }
+    //↑プロトタイプ
+
+    this.gridApi.setGridOption("rowData", this.denyList);
+  }
+
+  onGridReady(params: any): void {
+    this.gridApi = params.api;
+  }
+}

src/app/menu/earning-list/card-renderer/card-renderer.component.html

+<span>****&nbsp;****&nbsp;****&nbsp;</span><span>{{params.data.cardNumber}}</span>
\ No newline at end of file

src/app/menu/earning-list/card-renderer/card-renderer.component.spec.ts

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

src/app/menu/earning-list/card-renderer/card-renderer.component.ts

+import { Component } from '@angular/core';
+import { ICellRendererParams } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-card-renderer',
+  templateUrl: './card-renderer.component.html',
+  styleUrl: './card-renderer.component.css'
+})
+export class CardRendererComponent {
+  //パラメータ
+  params: any;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+
+}

src/app/menu/earning-list/delreq/delreq.component.html

+@if (params.data.delReq === "1") {
+<span>◯</span>
+}
\ No newline at end of file

src/app/menu/earning-list/delreq/delreq.component.spec.ts

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

src/app/menu/earning-list/delreq/delreq.component.ts

+import { Component } from '@angular/core';
+import { ICellRendererParams } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-delreq',
+  templateUrl: './delreq.component.html',
+  styleUrl: './delreq.component.css'
+})
+export class DelreqComponent {
+  //パラメータ
+  params: any;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+}

src/app/menu/earning-list/earning-date/earning-date.component.html

+<span>{{year}}/{{month}}/{{day}}</span>
\ No newline at end of file

src/app/menu/earning-list/earning-date/earning-date.component.spec.ts

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

src/app/menu/earning-list/earning-date/earning-date.component.ts

+import { Component } from '@angular/core';
+import { ICellRendererParams } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-earning-date',
+  templateUrl: './earning-date.component.html',
+  styleUrl: './earning-date.component.css'
+})
+export class EarningDateComponent {
+  //パラメータ
+  params: any;
+
+  year?: string;
+  month?: string;
+  day?: string;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+    if (params.data.processDateTime) {
+      const dt: string = params.data.processDateTime;
+      this.year = dt.substring(0, 4);
+      this.month = dt.substring(4, 6);
+      this.day = dt.substring(6, 8);
+    }
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+}

src/app/menu/earning-list/earning-list.component.html

+<ag-grid-angular class="ag-theme-quartz" style="height:500px;margin-top:20px;" [rowData]="earningList"
+    [columnDefs]="colDefs" [autoSizeStrategy]="autoSizeStrategy" [context]="context" (gridReady)="onGridReady($event)"
+    [pagination]=true></ag-grid-angular>
\ No newline at end of file

src/app/menu/earning-list/earning-list.component.spec.ts

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

src/app/menu/earning-list/earning-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ColDef, GridApi } from 'ag-grid-community';
+import { SizeColumnsToFitGridStrategy, SizeColumnsToFitProvidedWidthStrategy, SizeColumnsToContentStrategy } from 'ag-grid-community'
+import { EarningModel } from '../../model/earning.model';
+import { CardRendererComponent } from './card-renderer/card-renderer.component';
+import { ProcessDatetimeComponent } from './processdatetime/processdatetime.component';
+import { EarningDateComponent } from './earning-date/earning-date.component';
+import { GetonDatetimeComponent } from './geton-datetime/geton-datetime.component';
+import { GetoffDatetimeComponent } from './getoff-datetime/getoff-datetime.component';
+import { StatusComponent } from './status/status.component';
+import { NgComponent } from './ng/ng.component';
+import { DelreqComponent } from './delreq/delreq.component';
+import { EarningListService } from '../../service/earning-list.service';
+
+@Component({
+  selector: 'app-earning-list',
+  templateUrl: './earning-list.component.html',
+  styleUrl: './earning-list.component.css'
+})
+export class EarningListComponent implements OnInit {
+  earningList?: EarningModel[];
+
+  context?: any;
+  private gridApi!: GridApi<EarningModel>;
+
+  colDefs: ColDef[] = [
+    { headerName: '利用者名', field: "cutomerName", width: 100 },
+    { headerName: 'カード番号', field: "cardNumber", width: 200, cellRenderer: CardRendererComponent },
+    { headerName: '請求番号', field: "billingNumber", width: 200 },
+    { headerName: '請求額', field: "billingAmount", width: 100 },
+    { headerName: '処理日時', field: "processDateTime", width: 300, cellRenderer: ProcessDatetimeComponent },
+    { headerName: '売上日', field: "earningDate", width: 200, cellRenderer: EarningDateComponent },
+    { headerName: '乗車日時', field: "getonDateTime", width: 300, cellRenderer: GetonDatetimeComponent },
+    { headerName: '降車日時', field: "getoffDateTime", width: 300, cellRenderer: GetoffDatetimeComponent },
+    { headerName: '乗降明細', field: "getonoffDetail", width: 300 },
+    { headerName: '新規', field: "status", width: 30, cellRenderer: StatusComponent },
+    { headerName: 'NG', field: "ngFlag", width: 30, cellRenderer: NgComponent },
+    { headerName: '削除依頼', field: "delReq", width: 30, cellRenderer: DelreqComponent }
+  ];
+  public autoSizeStrategy:
+    | SizeColumnsToFitGridStrategy
+    | SizeColumnsToFitProvidedWidthStrategy
+    | SizeColumnsToContentStrategy = {
+      type: "fitGridWidth",
+      defaultMinWidth: 100,
+      columnLimits: [
+        {
+          colId: "country",
+          minWidth: 900,
+        },
+      ],
+    };
+
+  /**
+   * コンストラクタ
+   * @param earningListService トークン売上サービス
+   */
+  constructor(private earningListService: EarningListService) {
+    this.context = {
+      componentParent: this
+    }
+  }
+
+  /**
+   * 初期処理
+   */
+  ngOnInit(): void {
+    this.earningList = this.earningListService.getList();
+  }
+
+  onGridReady(params: any): void {
+    this.gridApi = params.api;
+  }
+}

src/app/menu/earning-list/getoff-datetime/getoff-datetime.component.html

+<span>{{year}}/{{month}}/{{day}}&nbsp;{{hour}}:{{minute}}:{{second}}</span>
\ No newline at end of file

src/app/menu/earning-list/getoff-datetime/getoff-datetime.component.spec.ts

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

src/app/menu/earning-list/getoff-datetime/getoff-datetime.component.ts

+import { Component } from '@angular/core';
+import { ICellRendererParams } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-getoff-datetime',
+  templateUrl: './getoff-datetime.component.html',
+  styleUrl: './getoff-datetime.component.css'
+})
+export class GetoffDatetimeComponent {
+  //パラメータ
+  params: any;
+
+  year?: string;
+  month?: string;
+  day?: string;
+  hour?: string;
+  minute?: string;
+  second?: string;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+    if (params.data.processDateTime) {
+      const dt: string = params.data.processDateTime;
+      this.year = dt.substring(0, 4);
+      this.month = dt.substring(4, 6);
+      this.day = dt.substring(6, 8);
+      this.hour = dt.substring(8, 10);
+      this.minute = dt.substring(10, 12);
+      this.second = dt.substring(12);
+    }
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+}

src/app/menu/earning-list/geton-datetime/geton-datetime.component.html

+<span>{{year}}/{{month}}/{{day}}&nbsp;{{hour}}:{{minute}}:{{second}}</span>
\ No newline at end of file

src/app/menu/earning-list/geton-datetime/geton-datetime.component.spec.ts

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

src/app/menu/earning-list/geton-datetime/geton-datetime.component.ts

+import { Component } from '@angular/core';
+import { ICellRendererParams } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-geton-datetime',
+  templateUrl: './geton-datetime.component.html',
+  styleUrl: './geton-datetime.component.css'
+})
+export class GetonDatetimeComponent {
+  //パラメータ
+  params: any;
+
+  year?: string;
+  month?: string;
+  day?: string;
+  hour?: string;
+  minute?: string;
+  second?: string;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+    if (params.data.processDateTime) {
+      const dt: string = params.data.processDateTime;
+      this.year = dt.substring(0, 4);
+      this.month = dt.substring(4, 6);
+      this.day = dt.substring(6, 8);
+      this.hour = dt.substring(8, 10);
+      this.minute = dt.substring(10, 12);
+      this.second = dt.substring(12);
+    }
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+}

src/app/menu/earning-list/ng/ng.component.html

+@if (params.data.ngFlag === "1") {
+<span>◯</span>
+}
\ No newline at end of file

src/app/menu/earning-list/ng/ng.component.spec.ts

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

src/app/menu/earning-list/ng/ng.component.ts

+import { Component } from '@angular/core';
+import { ICellRendererParams } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-ng',
+  templateUrl: './ng.component.html',
+  styleUrl: './ng.component.css'
+})
+export class NgComponent {
+  //パラメータ
+  params: any;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+}

src/app/menu/earning-list/processdatetime/processdatetime.component.html

+<span>{{year}}/{{month}}/{{day}}&nbsp;{{hour}}:{{minute}}:{{second}}</span>
\ No newline at end of file

src/app/menu/earning-list/processdatetime/processdatetime.component.spec.ts

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

src/app/menu/earning-list/processdatetime/processdatetime.component.ts

+import { Component } from '@angular/core';
+import { ICellRendererParams } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-processdatetime',
+  templateUrl: './processdatetime.component.html',
+  styleUrl: './processdatetime.component.css'
+})
+export class ProcessDatetimeComponent {
+  //パラメータ
+  params: any;
+
+  year?: string;
+  month?: string;
+  day?: string;
+  hour?: string;
+  minute?: string;
+  second?: string;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+    if (params.data.processDateTime) {
+      const dt: string = params.data.processDateTime;
+      this.year = dt.substring(0, 4);
+      this.month = dt.substring(4, 6);
+      this.day = dt.substring(6, 8);
+      this.hour = dt.substring(8, 10);
+      this.minute = dt.substring(10, 12);
+      this.second = dt.substring(12);
+    }
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+}

src/app/menu/earning-list/status/status.component.html

+@if (params.data.status === "0") {
+<span>◯</span>
+}
\ No newline at end of file

src/app/menu/earning-list/status/status.component.spec.ts

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

src/app/menu/earning-list/status/status.component.ts

+import { Component } from '@angular/core';
+import { ICellRendererParams } from 'ag-grid-community';
+
+@Component({
+  selector: 'app-status',
+  templateUrl: './status.component.html',
+  styleUrl: './status.component.css'
+})
+export class StatusComponent {
+  //パラメータ
+  params: any;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+}

src/app/menu/history-list/history-list.component.html

+<table style="margin-top:20px;">
+    <tr>
+        <td>
+            <span>利用者</span>
+        </td>
+        <td>
+            <span>{{model?.name}}</span>
+        </td>
+    </tr>
+</table>
+<ag-grid-angular class="ag-theme-quartz" style="height:500px;margin-top:20px;" [rowData]="historyList"
+    [columnDefs]="colDefs" [autoSizeStrategy]="autoSizeStrategy" [context]="context" (gridReady)="onGridReady($event)"
+    [pagination]=true></ag-grid-angular>
\ No newline at end of file

src/app/menu/history-list/history-list.component.spec.ts

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

src/app/menu/history-list/history-list.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { HistoryModel } from '../../model/history.model';
+import { UserInfoModel } from '../../model/user-info.model';
+import { ColDef, GridApi } from 'ag-grid-community';
+import { SizeColumnsToFitGridStrategy, SizeColumnsToFitProvidedWidthStrategy, SizeColumnsToContentStrategy } from 'ag-grid-community'
+import { StatusLinkComponent } from './status-link/status-link.component';
+import { StatusUpdateService } from '../../service/status-update.service';
+import { HistoryService } from '../../service/history.service';
+
+@Component({
+  selector: 'app-history-list',
+  templateUrl: './history-list.component.html',
+  styleUrl: './history-list.component.css'
+})
+export class HistoryListComponent implements OnInit {
+  //利用者情報
+  @Input() model?: UserInfoModel;
+
+  historyList: HistoryModel[] = [];
+
+  context?: any;
+  private gridApi!: GridApi<HistoryModel>;
+
+  colDefs: ColDef[] = [
+    { headerName: '乗降日時', field: "getonoffDate", width: 400 },
+    { headerName: '', field: "getonoff", width: 100 },
+    { headerName: '乗降停留所', field: "stopName", width: 100 },
+    { headerName: '支払金額', field: "payment", width: 100 },
+    { headerName: 'ステータス', field: "status", width: 80, cellRenderer: StatusLinkComponent },
+  ];
+  public autoSizeStrategy:
+    | SizeColumnsToFitGridStrategy
+    | SizeColumnsToFitProvidedWidthStrategy
+    | SizeColumnsToContentStrategy = {
+      type: "fitGridWidth",
+      defaultMinWidth: 100,
+      columnLimits: [
+        {
+          colId: "country",
+          minWidth: 900,
+        },
+      ],
+    };
+
+  /**
+   * コンストラクタ
+   * @param statusUpdateService ステータス更新サービス
+   * @param historyService 乗降履歴サービス
+   */
+  constructor(private statusUpdateService: StatusUpdateService, private historyService: HistoryService) {
+    this.context = {
+      componentParent: this
+    }
+  }
+
+  /**
+   * 初期処理
+   */
+  ngOnInit(): void {
+    if (this.model && this.model.customerId) {
+      this.historyList = this.historyService.getList(this.model.customerId);
+    }
+  }
+
+  /**
+   * ステータスクリック
+   * @param model 乗車履歴情報
+   */
+  onClickStatus(model: HistoryModel) {
+    if ((this.statusUpdateService.confirm(model)).valueOf()) {
+      this.historyService.changeStatus(model);
+    }
+
+  }
+
+  onGridReady(params: any): void {
+    this.gridApi = params.api;
+  }
+}

src/app/menu/history-list/status-link/status-link.component.html

+@if (params.data.status !== "") {
+<div role="button" class="common-link" (click)="onClickStatus()">{{params.data.status}}</div>
+}
\ No newline at end of file

src/app/menu/history-list/status-link/status-link.component.spec.ts

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

src/app/menu/history-list/status-link/status-link.component.ts

+import { ICellRendererAngularComp } from 'ag-grid-angular';
+import { ICellRendererParams } from 'ag-grid-community';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-status-link',
+  templateUrl: './status-link.component.html',
+  styleUrl: './status-link.component.css'
+})
+export class StatusLinkComponent implements ICellRendererAngularComp {
+  //パラメータ
+  params: any;
+  //親コンポーネント
+  componentParent: any;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+    this.componentParent = this.params.context.componentParent;
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+
+  /**
+   * ボタンクリック
+   */
+  onClickStatus(): void {
+    this.componentParent.onClickStatus(this.params.data);
+  }
+}

src/app/menu/history-list/status-update/status-update.component.html

+<div class="modal-header">
+    <table width="100%">
+        <tr>
+            <td>
+                <span class="modal-title">ステータス更新</span>
+            </td>
+            <td align="right">
+                <button type="button" class="border-0" style="background-color: white;" aria-label="Close"
+                    (click)="onClickClose()">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </td>
+        </tr>
+    </table>
+</div>
+<div class="modal-body border rounded">
+    <select class="form-select mx-auto" style="width:100px;" [(ngModel)]="status">
+        <option value="0">乗降中</option>
+        <option value="1">降車済</option>
+    </select>
+</div>
+<div class="modal-footer d-flex justify-conent-between align-items-center">
+    <table>
+        <tr>
+            <td>
+                <input type="button" class="btn form-control common-button" value="閉じる" (click)="onClickClose()">
+            </td>
+            <td>
+                <input type="button" class="btn form-control common-button" value="更新" (click)="onClickUpdate()">
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file

src/app/menu/history-list/status-update/status-update.component.spec.ts

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

src/app/menu/history-list/status-update/status-update.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { HistoryModel } from '../../../model/history.model';
+
+@Component({
+  selector: 'app-status-update',
+  templateUrl: './status-update.component.html',
+  styleUrl: './status-update.component.css'
+})
+export class StatusUpdateComponent implements OnInit {
+  model?: HistoryModel;
+  status?: string;
+
+  constructor(private activeModal: NgbActiveModal) { }
+
+  ngOnInit(): void {
+    this.status = "0";
+  }
+
+  onClickClose(): void {
+    this.activeModal.dismiss();
+  }
+
+  onClickUpdate(): void {
+    this.activeModal.close();
+  }
+}

src/app/menu/pass-list/pass-list.component.html

+<table style="margin-top:20px;">
+    <tr>
+        <td>
+            <span>利用者</span>
+        </td>
+        <td>
+            <span>{{model?.name}}</span>
+        </td>
+    </tr>
+</table>
+<ag-grid-angular class="ag-theme-quartz" style="height:500px;margin-top:20px;" [rowData]="passList"
+    [columnDefs]="colDefs" [autoSizeStrategy]="autoSizeStrategy" [context]="context" (gridReady)="onGridReady($event)"
+    [pagination]=true></ag-grid-angular>
\ No newline at end of file

src/app/menu/pass-list/pass-list.component.spec.ts

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

src/app/menu/pass-list/pass-list.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { PassModel } from '../../model/pass.model';
+import { ColDef, GridApi } from 'ag-grid-community';
+import { SizeColumnsToFitGridStrategy, SizeColumnsToFitProvidedWidthStrategy, SizeColumnsToContentStrategy } from 'ag-grid-community'
+import { RefundButtonComponent } from './refund-button/refund-button.component';
+import { UserInfoModel } from '../../model/user-info.model';
+import { PassRefundService } from '../../service/pass-refund.service';
+import { PassService } from '../../service/pass.service';
+
+@Component({
+  selector: 'app-pass-list',
+  templateUrl: './pass-list.component.html',
+  styleUrl: './pass-list.component.css'
+})
+export class PassListComponent implements OnInit {
+  //利用者情報
+  @Input() model?: UserInfoModel;
+
+  //定期券一覧
+  passList: PassModel[] = [];
+
+  context?: any;
+  private gridApi!: GridApi<PassModel>;
+
+  colDefs: ColDef[] = [
+    { headerName: '路線', field: "routeName", width: 400 },
+    { headerName: '使用開始日', field: "startDate", width: 100 },
+    { headerName: '使用期間', field: "useTerm", width: 100 },
+    { headerName: '料金区分', field: "priceRange", width: 100 },
+    { headerName: '乗車区間', field: "rideSection", width: 150 },
+    { headerName: 'カード番号', field: "creditCardNumber", width: 150 },
+    { headerName: '', field: "refund", width: 80, cellRenderer: RefundButtonComponent },
+  ];
+  public autoSizeStrategy:
+    | SizeColumnsToFitGridStrategy
+    | SizeColumnsToFitProvidedWidthStrategy
+    | SizeColumnsToContentStrategy = {
+      type: "fitGridWidth",
+      defaultMinWidth: 100,
+      columnLimits: [
+        {
+          colId: "country",
+          minWidth: 900,
+        },
+      ],
+    };
+
+  /**
+   * コンストラクタ
+   * @param passRefundService 
+   * @param passService 
+   */
+  constructor(private passRefundService: PassRefundService, private passService: PassService) {
+    this.context = {
+      componentParent: this
+    }
+  }
+
+  /**
+   * 初期処理
+   */
+  ngOnInit(): void {
+    if (this.model && this.model.customerId) {
+      this.passList = this.passService.getList(this.model.customerId);
+    }
+  }
+
+  /**
+   * 払い戻し
+   * @param model 定期券情報
+   */
+  async onClickRefund(model: PassModel) {
+    if (await this.passRefundService.confirm().valueOf()) {
+      //払戻処理
+      this.passService.refund(model);
+    }
+
+  }
+
+  onGridReady(params: any): void {
+    this.gridApi = params.api;
+  }
+}

src/app/menu/pass-list/pass-refund/pass-refund.component.html

+<div class="modal-header">
+    <table width="100%">
+        <tr>
+            <td>
+                <span class="modal-title">定期券払戻</span>
+            </td>
+            <td align="right">
+                <button type="button" class="border-0" style="background-color: white;" aria-label="Close"
+                    (click)="onClickClose()">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </td>
+        </tr>
+    </table>
+</div>
+<div class="modal-body border rounded">
+    <table width="250px" class=" mx-auto">
+        <tr>
+            <td>
+                <span>カード番号</span>
+            </td>
+            <td>
+                <span>****&nbsp;****&nbsp;****&nbsp;{{model?.creditCardNumber}}</span>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <span>乗車区間</span>
+            </td>
+            <td>
+                <span>{{model?.rideSection}}</span>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <span>購入金額</span>
+            </td>
+            <td align="right">
+                <span>{{purphaseAmount|number}}円</span>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <span>普通運賃</span>
+            </td>
+            <td align="right">
+                <span>{{standardFare|number}}円</span>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <span>使用日数</span>
+            </td>
+            <td align="right">
+                <span>{{useDays}}日</span>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <span>払戻手数料</span>
+            </td>
+            <td align="right">
+                <span>{{refundFee|number}}円</span>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <span>払戻金額</span>
+            </td>
+            <td align="right">
+                <span>{{refundAmount|number}}円</span>
+            </td>
+        </tr>
+    </table>
+</div>
+<div class="modal-footer d-flex justify-conent-between align-items-center">
+    <table>
+        <tr>
+            <td>
+                <input type="button" class="btn form-control common-button" value="閉じる" (click)="onClickClose()">
+            </td>
+            <td>
+                <input type="button" class="btn form-control common-button" value="払戻" (click)="onClickRefund()">
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file

src/app/menu/pass-list/pass-refund/pass-refund.component.spec.ts

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

src/app/menu/pass-list/pass-refund/pass-refund.component.ts

+import { Component } from '@angular/core';
+import { PassModel } from '../../../model/pass.model';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-pass-refund',
+  templateUrl: './pass-refund.component.html',
+  styleUrl: './pass-refund.component.css'
+})
+export class PassRefundComponent {
+  model?: PassModel;
+  purphaseAmount = 0;
+  standardFare = 0;
+  useDays = 0;
+  refundFee = 0;
+  refundAmount = 0;
+
+  constructor(private activeModal: NgbActiveModal) { }
+
+  /**
+   * 払戻
+   */
+  onClickRefund(): void {
+    if (confirm("選択されているクレジットカードで払い戻ししてよろしいですか？")) {
+      this.activeModal.close();
+    }
+  }
+
+  /**
+   * 閉じる
+   */
+  onClickClose(): void {
+    this.activeModal.dismiss();
+  }
+}

src/app/menu/pass-list/refund-button/refund-button.component.html

+<input type="button" class="form-control" style="width:80px;height:38px;line-height: 38px;" data-row="row"
+    (click)="onClickRefund()" value="払戻">
\ No newline at end of file

src/app/menu/pass-list/refund-button/refund-button.component.spec.ts

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

src/app/menu/pass-list/refund-button/refund-button.component.ts

+import { ICellRendererAngularComp } from 'ag-grid-angular';
+import { ICellRendererParams } from 'ag-grid-community';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-refund-button',
+  templateUrl: './refund-button.component.html',
+  styleUrl: './refund-button.component.css'
+})
+export class RefundButtonComponent implements ICellRendererAngularComp {
+  //パラメータ
+  params: any;
+  //親コンポーネント
+  componentParent: any;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+    this.componentParent = this.params.context.componentParent;
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+
+  /**
+   * ボタンクリック
+   */
+  onClickRefund(): void {
+    this.componentParent.onClickRefund(this.params.data);
+  }
+}

src/app/menu/staff-list/custom-button/custom-button.component.html

+<input type="button" class="form-control" style="width:60px;height:38px;line-height: 38px;" data-row="row"
+    (click)="onClickEdit()" value="編集">
\ No newline at end of file

src/app/menu/staff-list/custom-button/custom-button.component.spec.ts

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

src/app/menu/staff-list/custom-button/custom-button.component.ts

+import { ICellRendererAngularComp } from 'ag-grid-angular';
+import { ICellRendererParams } from 'ag-grid-community';
+import { Component } from '@angular/core';
+
+/**
+ * ボタンレンダリング
+ */
+@Component({
+  selector: 'app-custom-button',
+  templateUrl: './custom-button.component.html',
+  styleUrl: './custom-button.component.css'
+})
+export class CustomButtonComponent implements ICellRendererAngularComp {
+  //パラメータ
+  params: any;
+  //親コンポーネント
+  componentParent: any;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+    this.componentParent = this.params.context.componentParent;
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+
+  /**
+   * ボタンクリック
+   */
+  onClickEdit(): void {
+    this.componentParent.onClickEdit(this.params.data);
+  }
+}

src/app/menu/staff-list/staff-list.component.ts

@@ -3,6 +3,7 @@ import { StaffInfoModel } from '../../model/staff-info.model';
 import { CustomButtonComponent } from './custom-button/custom-button.component';
 import { ColDef, GridApi } from 'ag-grid-community';
 import { SizeColumnsToFitGridStrategy, SizeColumnsToFitProvidedWidthStrategy, SizeColumnsToContentStrategy } from 'ag-grid-community'
+import { StaffService } from '../../service/staff.service';
 
 /**
  * 事業所担当者一覧
@@ -55,7 +56,7 @@ export class StaffListComponent implements OnInit {
   /**
    * コンストラクタ
    */
-  constructor() {
+  constructor(private staffService: StaffService) {
     this.context = {
       componentParent: this
     }
@@ -65,14 +66,8 @@ export class StaffListComponent implements OnInit {
    * 初期処理
    */
   ngOnInit(): void {
-    this.agencyList = new Map();
-    for (let i = 0; i < 5; i++) {
-      const str = String(i + 1);
-      this.agencyList.set("000" + str, "事業所" + str);
-      if (i == 0) {
-        this.agencyId = "000" + str;
-      }
-    }
+    this.agencyList = this.staffService.getAgencyList();
+    this.agencyId = this.agencyList.keys().next().value;
   }
 
   /**
@@ -80,19 +75,7 @@ export class StaffListComponent implements OnInit {
    */
   onClickSearch(): void {
     //担当者一覧取得
-    this.staffList = [];
-    for (let i = 0; i < 5; i++) {
-      const model = new StaffInfoModel();
-      model.agencyId = String(i + 1);
-      model.email = "test" + String(i + 1) + "@test.com";
-      model.name = "山田 太郎";
-      model.password = "00000000";
-      model.company = "テスト会社";
-      model.department = "テスト部";
-      model.roleId = "1";
-      model.roleName = "システム管理者";
-      this.staffList.push(model);
-    }
+    this.staffList = this.staffService.getList(this.agencyId);
   }
 
   /**
@@ -114,6 +97,20 @@ export class StaffListComponent implements OnInit {
    */
   onClickDel(): void {
     const list: StaffInfoModel[] = this.gridApi.getSelectedRows();
+
+    //選択担当者情報削除
+    const emailList: string[] = [];
+    for (const staff of list) {
+      if (staff.email) {
+        emailList.push(staff.email);
+      }
+    }
+    this.staffService.delete(emailList);
+
+    //一覧再取得
+    this.staffList = this.staffService.getList(this.agencyId);
+
+    //↓プロトタイプで行削除の動きを見せるため
     const array = [];
     for (const staff of this.staffList) {
       let del = false;
@@ -128,6 +125,7 @@ export class StaffListComponent implements OnInit {
       }
     }
     this.staffList = array;
+    //↑
 
     this.gridApi.setGridOption("rowData", this.staffList);
   }

src/app/menu/staff-regist/staff-regist.component.ts

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { StaffInfoModel } from '../../model/staff-info.model';
+import { StaffService } from '../../service/staff.service';
 
 @Component({
   selector: 'app-staff-regist',
@@ -31,24 +32,17 @@ export class StaffRegistComponent implements OnInit {
   /**
    * コンストラクタ
    */
-  constructor() { }
+  constructor(private staffService: StaffService) { }
 
   /**
    * 初期処理
    */
   ngOnInit(): void {
     //事業所一覧
-    this.agencyList = new Map();
-    for (let i = 0; i < 5; i++) {
-      const str = String(i + 1);
-      this.agencyList?.set(str, "事業所" + str)
-    }
+    this.agencyList = this.staffService.getAgencyList();
+
     //権限一覧
-    this.roleList = new Map();
-    for (let i = 0; i < 3; i++) {
-      const str = String(i + 1);
-      this.roleList?.set(str, "権限" + str)
-    }
+    this.roleList = this.staffService.getRoleList();
 
     if (this.staffInfoModel !== null) {
       this.agencyId = this.staffInfoModel?.agencyId;
@@ -65,6 +59,14 @@ export class StaffRegistComponent implements OnInit {
    */
   onClickRegist(): void {
     //担当者登録
+    const staffInfoModel = new StaffInfoModel();
+    staffInfoModel.email = this.email;
+    staffInfoModel.password = this.password;
+    staffInfoModel.name = this.name;
+    staffInfoModel.department = this.department;
+    staffInfoModel.roleId = this.roleId;
+    staffInfoModel.agencyId = this.agencyId;
+    this.staffService.regist(staffInfoModel);
 
     this.clickBack.emit();
   }
@@ -74,6 +76,14 @@ export class StaffRegistComponent implements OnInit {
    */
   onClickUpdate(): void {
     //担当者更新
+    const staffInfoModel = new StaffInfoModel();
+    staffInfoModel.email = this.email;
+    staffInfoModel.password = this.password;
+    staffInfoModel.name = this.name;
+    staffInfoModel.department = this.department;
+    staffInfoModel.roleId = this.roleId;
+    staffInfoModel.agencyId = this.agencyId;
+    this.staffService.update(staffInfoModel);
     this.clickBack.emit();
   }
 

src/app/menu/user-list/denylist-button/denylist-button.component.html

+<input type="button" class="form-control" style="width:100px;height:38px;line-height: 38px;" data-row="row"
+    (click)="onClickDenyList()" value="拒否リスト">
\ No newline at end of file

src/app/menu/user-list/denylist-button/denylist-button.component.spec.ts

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

src/app/menu/user-list/denylist-button/denylist-button.component.ts

+import { ICellRendererAngularComp } from 'ag-grid-angular';
+import { ICellRendererParams } from 'ag-grid-community';
+import { Component } from '@angular/core';
+
+/**
+ * 拒否リストボタン
+ */
+@Component({
+  selector: 'app-denylist-button',
+  templateUrl: './denylist-button.component.html',
+  styleUrl: './denylist-button.component.css'
+})
+export class DenylistButtonComponent implements ICellRendererAngularComp {
+  //パラメータ
+  params: any;
+  //親コンポーネント
+  componentParent: any;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+    this.componentParent = this.params.context.componentParent;
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+
+
+  /**
+   * ボタンクリック
+   */
+  onClickDenyList(): void {
+    this.componentParent.onClickDenyList(this.params.data);
+  }
+}

src/app/menu/user-list/history-button/history-button.component.html

+<input type="button" class="form-control" style="width:100px;height:38px;line-height: 38px;" data-row="row"
+    (click)="onClickHistory()" value="乗車履歴">
\ No newline at end of file

src/app/menu/user-list/history-button/history-button.component.spec.ts

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

src/app/menu/user-list/history-button/history-button.component.ts

+import { ICellRendererAngularComp } from 'ag-grid-angular';
+import { ICellRendererParams } from 'ag-grid-community';
+import { Component } from '@angular/core';
+
+/**
+ * 乗車履歴ボタン
+ */
+@Component({
+  selector: 'app-history-button',
+  templateUrl: './history-button.component.html',
+  styleUrl: './history-button.component.css'
+})
+export class HistoryButtonComponent implements ICellRendererAngularComp {
+  //パラメータ
+  params: any;
+  //親コンポーネント
+  componentParent: any;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+    this.componentParent = this.params.context.componentParent;
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+
+  /**
+   * ボタンクリック
+   */
+  onClickHistory(): void {
+    this.componentParent.onClickHistory(this.params.data);
+  }
+}

src/app/menu/user-list/pass-button/pass-button.component.html

+<input type="button" class="form-control" style="width:80px;height:38px;line-height: 38px;" data-row="row"
+    (click)="onClickPass()" value="定期券">
\ No newline at end of file

src/app/menu/user-list/pass-button/pass-button.component.spec.ts

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

src/app/menu/user-list/pass-button/pass-button.component.ts

+import { ICellRendererAngularComp } from 'ag-grid-angular';
+import { ICellRendererParams } from 'ag-grid-community';
+import { Component } from '@angular/core';
+
+/**
+ * 定期券ボタン
+ */
+@Component({
+  selector: 'app-pass-button',
+  templateUrl: './pass-button.component.html',
+  styleUrl: './pass-button.component.css'
+})
+export class PassButtonComponent implements ICellRendererAngularComp {
+  //パラメータ
+  params: any;
+  //親コンポーネント
+  componentParent: any;
+
+  /**
+   * 初期処理
+   * @param params パラメータ
+   */
+  agInit(params: ICellRendererParams): void {
+    console.log(params);
+    this.params = params;
+    this.componentParent = this.params.context.componentParent;
+  }
+
+  /**
+   * リフレッシュ
+   * @param params パラメータ 
+   * @returns 正常かどうか
+   */
+  refresh(params: ICellRendererParams) {
+    return true;
+  }
+
+  /**
+   * ボタンクリック
+   */
+  onClickPass(): void {
+    this.componentParent.onClickPass(this.params.data);
+  }
+}

src/app/menu/user-list/user-list.component.ts

@@ -5,6 +5,8 @@ import { HistoryButtonComponent } from './history-button/history-button.componen
 import { DenylistButtonComponent } from './denylist-button/denylist-button.component';
 import { SizeColumnsToFitGridStrategy, SizeColumnsToFitProvidedWidthStrategy, SizeColumnsToContentStrategy } from 'ag-grid-community'
 import { PassRefundService } from '../../service/pass-refund.service';
+import { PassButtonComponent } from './pass-button/pass-button.component';
+import { UserService } from '../../service/user.service';
 
 /**
  * 利用者検索画面
@@ -31,7 +33,7 @@ export class UserListComponent {
     { headerName: 'フリガナ', field: "nameKana", width: 200 },
     { headerName: 'メールアドレス', field: "email", width: 200 },
     { headerName: '電話番号', field: "phoneNumber", width: 200 },
-    //{ headerName: '', field: "pass", width: 80, cellRenderer: PassButtonComponent },
+    { headerName: '', field: "pass", width: 80, cellRenderer: PassButtonComponent },
     { headerName: '', field: "history", width: 80, cellRenderer: HistoryButtonComponent },
     { headerName: '', field: "denyList", width: 80, cellRenderer: DenylistButtonComponent },
   ];
@@ -53,7 +55,7 @@ export class UserListComponent {
   /**
    * コンストラクタ
    */
-  constructor(private passRefundService: PassRefundService) {
+  constructor(private userService: UserService, private passRefundService: PassRefundService) {
     this.context = {
       componentParent: this
     }
@@ -63,16 +65,7 @@ export class UserListComponent {
    * 検索
    */
   onClickSearch(): void {
-    this.userList = [];
-    for (let i = 0; i < 10; i++) {
-      const str = String(i + 1);
-      const model = new UserInfoModel();
-      model.name = "山田太郎" + str;
-      model.nameKana = "ヤマダタロウ" + str;
-      model.email = "tarou_yamada" + str + "@test.com";
-      model.phoneNumber = "09088882456";
-      this.userList.push(model);
-    }
+    this.userList = this.userService.getList(this.userName);
   }
 
   onGridReady(params: any): void {

src/app/model/denylist.model.ts

+export class DenyListModel {
+    id?: string;
+    //区間
+    rideSection?: string;
+    //乗車日時
+    getonDt?: string;
+    //降車日時
+    getoffDt?: string;
+    //請求金額
+    billingAmount = 0;
+    //ステータスID
+    statusId?: string;
+    //ステータス
+    status?: string;
+}
\ No newline at end of file

src/app/model/earning.model.ts

+export class EarningModel {
+    /**
+     * 利用者ID
+     */
+    cutomerId?: string;
+    /**
+     * 利用者名
+     */
+    cutomerName?: string;
+    /**
+     * カード番号(下4桁)
+     */
+    cardNumber?: string;
+    /**
+     * 請求番号
+     */
+    billingNumber?: string;
+    /**
+     * 請求額
+     */
+    billingAmount?: number;
+    /**
+     * 処理日時
+     */
+    processDateTime?: string;
+    /**
+     * 売上日
+     */
+    earningDate?: string;
+    /**
+     * 乗車日時
+     */
+    getonDateTime?: string;
+    /**
+     * 降車日時
+     */
+    getoffDateTime?: string;
+    /**
+     * 乗降明細
+     */
+    getonoffDetail?: string;
+    /**
+     * ステータス
+     */
+    status?: string;
+    /**
+     * NGフラグ
+     */
+    ngFlag?: string;
+    /**
+     * 拒否リスト削除依頼
+     */
+    delReq?: string;
+}
\ No newline at end of file

src/app/model/history.model.ts

+export class HistoryModel {
+    //乗降日時
+    getonoffDate?: string;
+    //乗車/降車
+    getonoff?: string;
+    //乗降停留所ID
+    stopId?: string;
+    //乗降停留所名
+    stopName?: string;
+    //支払い金額
+    payment = 0;
+    //ステータスID
+    statusId?: string;
+    //ステータス
+    status?: string;
+}
\ No newline at end of file

src/app/model/pass.model.ts

+/**
+ * 定期券情報
+ */
+export class PassModel {
+    /**
+     * ID
+     */
+    id?: string;
+    /**
+     * 経路ID
+     */
+    routeId?: string;
+    /**
+     * 経路名
+     */
+    routeName?: string;
+    /**
+     * 使用開始日
+     */
+    startDate?: string;
+    /**
+     * 使用期間ID
+     */
+    useTermId?: string;
+    /**
+     * 使用期間
+     */
+    useTerm?: string;
+    /**
+     * 料金区分ID
+     */
+    priceRangeId?: string;
+    /**
+     * 料金区分
+     */
+    priceRange?: string;
+    /**
+     * 乗車区間
+     */
+    rideSection?: string;
+    /**
+     * 乗車停留所ID
+     */
+    getonStopId?: string;
+    /**
+     * 乗車停留所名
+     */
+    getonStopName?: string;
+    /**
+     * 降車停留所ID
+     */
+    getoffStopId?: string;
+    /**
+     * 降車停留所名
+     */
+    getoffStopName?: string;
+    /**
+     * クレジットカード番号
+     */
+    creditCardNumber?: string;
+
+}
\ No newline at end of file

src/app/model/user-info.model.ts

@@ -2,6 +2,8 @@
  * 利用者情報
  */
 export class UserInfoModel {
+    //利用者ID
+    customerId?: string;
     //氏名
     name?: string;
     //フリガナ

src/app/service/deny-list.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { DenyListService } from './deny-list.service';
+
+describe('DenyListService', () => {
+  let service: DenyListService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DenyListService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/deny-list.service.ts

+import { Injectable } from '@angular/core';
+import { DenyListModel } from '../model/denylist.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DenyListService {
+  /**
+   * 拒否リスト取得
+   * @param customerId 利用者ID
+   * @returns 拒否リスト
+   */
+  getList(customerId: string): DenyListModel[] {
+    const denyList: DenyListModel[] = [];
+    if (customerId) {
+      for (let i = 0; i < 5; i++) {
+        const model: DenyListModel = new DenyListModel();
+        const str = String(i + 1);
+        model.id = str;
+        model.rideSection = "A停留所→B停留所";
+        model.getonDt = "2024/07/01 10:10:10";
+        model.getoffDt = "2024/07/01 10:20:20";
+        model.billingAmount = 100;
+        model.status = "";
+        denyList.push(model);
+      }
+    }
+    return denyList;
+  }
+
+  /**
+   * 拒否リスト削除依頼
+   * @param list 選択拒否リスト
+   */
+  reqDelete(list: DenyListModel[]): void {
+    if (list) {
+      return;
+    }
+  }
+}

src/app/service/earning-list.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { EarningListService } from './earning-list.service';
+
+describe('EarningListService', () => {
+  let service: EarningListService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EarningListService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/earning-list.service.ts

+import { Injectable } from '@angular/core';
+import { EarningModel } from '../model/earning.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EarningListService {
+
+  /**
+   * トークン売上一覧取得
+   */
+  getList(): EarningModel[] {
+    const earningList: EarningModel[] = [];
+    for (let i = 0; i < 10; i++) {
+      const model: EarningModel = new EarningModel();
+      model.cutomerName = "山田太郎";
+      model.cardNumber = "1234";
+      model.billingNumber = "1234567890";
+      model.billingAmount = 300;
+      model.processDateTime = "20240710172800";
+      model.earningDate = "20240710";
+      model.getonDateTime = "20240710070000";
+      model.getoffDateTime = "20240710073000";
+      model.getonoffDetail = "A停留所→B停留所";
+      if (i !== 4) {
+        model.status = "0";
+        model.ngFlag = "0";
+      } else {
+        model.status = "1";
+        model.ngFlag = "1";
+      }
+      if (i !== 6) {
+        model.status = "0";
+        model.delReq = "0";
+      } else {
+        model.status = "1";
+        model.delReq = "1";
+      }
+      earningList.push(model);
+    }
+    return earningList;
+  }
+}

src/app/service/history.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { HistoryService } from './history.service';
+
+describe('HistoryService', () => {
+  let service: HistoryService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HistoryService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/history.service.ts

+import { Injectable } from '@angular/core';
+import { HistoryModel } from '../model/history.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HistoryService {
+  /**
+   * 乗降一覧取得
+   * @param customerId 利用者ID
+   * @returns 乗降一覧
+   */
+  getList(customerId: string): HistoryModel[] {
+    const historyList: HistoryModel[] = [];
+    if (customerId) {
+      for (let i = 0; i < 10; i++) {
+        const model: HistoryModel = new HistoryModel();
+        model.getonoffDate = "2024/07/01";
+        if (i % 2 === 0) {
+          model.getonoff = "乗車";
+          model.stopName = "A停留所";
+        } else {
+          model.getonoff = "降車";
+          model.stopName = "B停留所";
+        }
+        model.payment = 100;
+        model.statusId = "";
+        model.status = "";
+        historyList.push(model);
+      }
+      const model: HistoryModel = new HistoryModel();
+      model.getonoffDate = "2024/07/01";
+      model.getonoff = "乗車";
+      model.stopName = "A停留所";
+      model.payment = 100;
+      model.statusId = "0";
+      model.status = "乗車中";
+      historyList.push(model);
+    }
+
+    return historyList;
+  }
+
+  /**
+   * 乗降ステータス変更
+   * @param model 乗降履歴情報
+   */
+  changeStatus(model: HistoryModel): void {
+    if (model) {
+      return;
+    }
+  }
+}

src/app/service/login.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { LoginService } from './login.service';
+
+describe('LoginService', () => {
+  let service: LoginService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoginService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/login.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+  /**
+   * ログイン処理
+   * @param email メールアドレス 
+   * @param password パスワード
+   * @returns 認証成功(true)/失敗(false)
+   */
+  login(email?: string, password?: string): boolean {
+    if (!email) {
+      alert("メールアドレスが入力されていません");
+      return false;
+    }
+    if (!password) {
+      alert("パスワードが入力されていません");
+      return false;
+    }
+    return true;
+  }
+}

src/app/service/pass-refund.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { PassRefundService } from './pass-refund.service';
+
+describe('PassRefundService', () => {
+  let service: PassRefundService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PassRefundService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/pass-refund.service.ts

+import { Injectable } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { PassRefundComponent } from '../menu/pass-list/pass-refund/pass-refund.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PassRefundService {
+
+  constructor(private modalService: NgbModal) { }
+
+  confirm(): Promise<boolean> {
+    const modalRef = this.modalService.open(PassRefundComponent);
+    return modalRef.result.then(() => {
+      return true;
+    }, () => {
+      return false;
+    });
+  }
+}

src/app/service/pass.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { PassService } from './pass.service';
+
+describe('PassService', () => {
+  let service: PassService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PassService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});