2024/08/28

src/app/app-routing.module.ts

@@ -44,8 +44,8 @@ const routes: Routes = [
     loadChildren: () => import('./history/history.module').then(m => m.HistoryPageModule)
   },
   {
-    path: 'deny-list',
-    loadChildren: () => import('./deny-list/deny-list.module').then(m => m.DenyListPageModule)
+    path: 'claim-list',
+    loadChildren: () => import('./claim-list/claim-list.module').then(m => m.ClaimListPageModule)
   },
 ];
 

src/app/card-select/card-info/card-info.component.html

@@ -7,8 +7,18 @@
             <ion-col style="width:75%;padding-top:8px;padding-left:10px;">
               <ion-label>クレジットカード</ion-label>
             </ion-col>
-            <ion-col size="auto" style="padding-top:8px;">
-              <div class="common-link" (click)="onClickPass()">定期券</div>
+            <ion-col style="padding-top:8px;">
+              @if (creditCardModel?.denyStatus == 1 && creditCardModel?.deleteDeny == 0) {
+              <div id="denyStatus" role="button" class="text-decoration-underline" style="color:red;">
+                拒否リスト登録</div>
+              <ion-alert trigger="denyStatus" header="拒否リスト削除しますか？" [buttons]="confirmButtons"
+                (didDismiss)="onClickDenyStatus($event)"></ion-alert>
+              } @else if (creditCardModel?.denyStatus == 1 && creditCardModel?.deleteDeny == 1) {
+              <div id="deleteDeny" role="button" class="text-decoration-underline" style="color:red;">
+                拒否リスト削除依頼</div>
+              <ion-alert trigger="deleteDeny" header="拒否リスト削除依頼を取消しますか？" [buttons]="confirmButtons"
+                (didDismiss)="onClickDenyStatus($event)"></ion-alert>
+              }
             </ion-col>
             <ion-col size="auto" align="right" style="padding-top:10px;padding-right:10px;">
               <ion-icon name="trash-outline"></ion-icon>

src/app/card-select/card-info/card-info.component.ts

@@ -17,19 +17,32 @@ import { CreditCardModel } from 'src/app/model/credit-card.model';
 export class CardInfoComponent {
   //クレジットカード情報
   @Input() creditCardModel?: CreditCardModel;
-  @Output() clickPass: EventEmitter<void> = new EventEmitter();
+  @Output() clickDenyStatus: EventEmitter<void> = new EventEmitter();
   @Output() clickTrash: EventEmitter<void> = new EventEmitter();
 
+  public confirmButtons = [
+    {
+      text: 'いいえ',
+      role: 'cancel'
+    },
+    {
+      text: 'はい',
+      role: 'confirm'
+    },
+  ];
+
   /**
    * コンストラクタ
    */
   constructor() { }
 
   /**
-   * 定期券
+   * 拒否リスト状態
    */
-  onClickPass(): void {
-    this.clickPass.emit();
+  onClickDenyStatus(event: any): void {
+    if (event.detail.role === 'confirm') {
+      this.clickDenyStatus.emit();
+    }
   }
 
   /**

src/app/card-select/card-select.page.html

@@ -6,7 +6,7 @@
   <div style="margin-top:10px;margin-left:10px;margin-right:10px;">
     @for (model of cardList;track model.cardNumber) {
     <div style="margin-top:10px;">
-      <app-card-info [creditCardModel]="model" (clickPass)="onClickPass(model)"
+      <app-card-info [creditCardModel]="model" (clickDenyStatus)="onClickDenyStatus(model)"
         (clickTrash)="onClickTrash(model)"></app-card-info>
     </div>
     }

src/app/card-select/card-select.page.ts

@@ -48,11 +48,17 @@ export class CardSelectPage implements OnInit {
   }
 
   /**
-   * 定期券
+   * 拒否リスト状態
    * @param model クレジットカード情報
    */
-  onClickPass(model: CreditCardModel): void {
-    this.routeService.navigatePassSelect(model.tokenId, model.cardNumber);
+  onClickDenyStatus(model: CreditCardModel): void {
+    if (this.cardList) {
+      for (let i = 0; i < this.cardList?.length; i++) {
+        if (this.cardList[i].tokenId === model.tokenId && this.cardList[i].denyStatus == 1) {
+          this.cardList[i].deleteDeny = this.cardList[i].deleteDeny == 0 ? 1 : 0;
+        }
+      }
+    }
   }
 
   /**

src/app/claim-list/claim-info/claim-info.component.html

+<div class="border rounded">
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <ion-grid>
+          <ion-row>
+            <ion-col style="padding-top:5px;">
+              <ion-label>{{model.agencyName}}</ion-label>
+            </ion-col>
+            <ion-col size="auto">
+              @if (model.ngFlag == 1) {
+              <ion-label class="" style="color:red;">前回NG</ion-label>
+              }
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col style="padding-top:5px;" size="auto">
+              <div style="width:80px;">乗車日時</div>
+            </ion-col>
+            <ion-col style="padding-top:5px;">
+              <ion-label>{{model.getonDt | customDatetime}}</ion-label>
+            </ion-col>
+            <ion-col size="auto">
+              @if (model.cancelRequest == 0) {
+              <div role="button" id="cancelReq" class="text-decoration-underline" (click)="onClickBefCancelReq()">取消依頼
+              </div>
+              <ion-alert [isOpen]="isCancelOpen" header="取消依頼しますか？" [buttons]="confirmButtons"
+                (didDismiss)="onClickCancelReq($event)"></ion-alert>
+              } @else {
+              <div role="button" id="cancelReqDone" class="text-decoration-underline" (click)="onClickBefCancelReq()">
+                取消依頼済</div>
+              <ion-alert [isOpen]="isCancelOpen" header="取消依頼を解除しますか？" [buttons]="confirmButtons"
+                (didDismiss)="onClickCancelReq($event)"></ion-alert>
+              }
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col style="padding-top:5px;" size="auto">
+              <div style="width:80px;">降車日時</div>
+            </ion-col>
+            <ion-col style="padding-top:5px;">
+              <ion-label>{{model.getoffDt | customDatetime}}</ion-label>
+            </ion-col>
+            @if (model.ngFlag == 1) {
+            <ion-col size="auto">
+              @if (model.payRequest == 0) {
+              <div role="button" id="payReq" class="text-decoration-underline" (click)="onClickBefPayReq()">支払要求</div>
+              <ion-alert [isOpen]="isPayOpen" header="支払要求しますか？" [buttons]="confirmButtons"
+                (didDismiss)="onClickPayReq($event)"></ion-alert>
+              } @else {
+              <div role="button" id="payReqDone" class="text-decoration-underline" (click)="onClickBefPayReq()">支払要求済
+              </div>
+              <ion-alert [isOpen]="isPayOpen" header="支払要求を解除しますか？" [buttons]="confirmButtons"
+                (didDismiss)="onClickPayReq($event)"></ion-alert>
+              }
+            </ion-col>
+            }
+          </ion-row>
+          <ion-row>
+            <ion-col style="padding-top:5px;" size="auto">
+              <div style="width:80px;">処理日時</div>
+            </ion-col>
+            <ion-col style="padding-top:5px;">
+              <ion-label>{{model.processDt | customDatetime}}</ion-label>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col style="padding-top:5px;" size="auto">
+              <div style="width:80px;">売上日</div>
+            </ion-col>
+            <ion-col style="padding-top:5px;">
+              <ion-label>{{model.earningDate | customDate}}</ion-label>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col style="padding-top:5px;padding-bottom:5px;" size="auto">
+              <div style="width:80px;">請求金額</div>
+            </ion-col>
+            <ion-col style="padding-top:5px;padding-bottom:5px;">
+              <ion-label>{{model.amount | number}}円</ion-label>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</div>
\ No newline at end of file

src/app/deny-list/deny-info/deny-info.component.spec.ts → src/app/claim-list/claim-info/claim-info.component.spec.ts

 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { DenyInfoComponent } from './deny-info.component';
+import { ClaimInfoComponent } from './claim-info.component';
 
-describe('DenyInfoComponent', () => {
-  let component: DenyInfoComponent;
-  let fixture: ComponentFixture<DenyInfoComponent>;
+describe('ClaimInfoComponent', () => {
+  let component: ClaimInfoComponent;
+  let fixture: ComponentFixture<ClaimInfoComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ DenyInfoComponent ],
+      declarations: [ ClaimInfoComponent ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(DenyInfoComponent);
+    fixture = TestBed.createComponent(ClaimInfoComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

src/app/claim-list/claim-info/claim-info.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { ClaimListModel } from 'src/app/model/claim-list.model';
+import { CustomDatePipe } from 'src/app/pipe/custom-date.pipe';
+import { CustomDatetimePipe } from 'src/app/pipe/custom-datetime.pipe';
+import { DecimalPipe } from '@angular/common';
+
+/**
+ * 請求一覧情報
+ */
+@Component({
+  standalone: true,
+  selector: 'app-claim-info',
+  templateUrl: './claim-info.component.html',
+  styleUrls: ['./claim-info.component.scss'],
+  imports: [
+    IonicModule,
+    CustomDatePipe,
+    CustomDatetimePipe,
+    DecimalPipe
+  ]
+})
+export class ClaimInfoComponent implements OnInit {
+  @Input() model: ClaimListModel = new ClaimListModel();
+  @Output() clickPayReq: EventEmitter<ClaimListModel> = new EventEmitter<ClaimListModel>();
+  @Output() clickCancelReq: EventEmitter<ClaimListModel> = new EventEmitter<ClaimListModel>();
+
+  public confirmButtons = [
+    {
+      text: 'いいえ',
+      role: 'cancel'
+    },
+    {
+      text: 'はい',
+      role: 'confirm'
+    },
+  ];
+
+  //取消依頼メッセージダイアログ表示有無
+  isCancelOpen: boolean = false;
+  //支払要求メッセージダイアログ表示有無
+  isPayOpen: boolean = false;
+
+  /**
+   * コンストラクタ
+   */
+  constructor() { }
+
+  /**
+   * 初期化
+   */
+  ngOnInit(): void {
+  }
+
+  /**
+   * 拒否リスト情報取得
+   * @returns 拒否リスト情報
+   */
+  getModel(): ClaimListModel {
+    return this.model;
+  }
+
+  /**
+   * 取消依頼ダイアログを表示する前の処理
+   */
+  onClickBefCancelReq(): void {
+    if (this.model.payRequest === 1) {
+      //既に支払要求済の場合は取消させない
+      alert("既に支払要求済となっています。")
+      return;
+    }
+    this.isCancelOpen = true;
+  }
+
+  /**
+   * 取消依頼ダイアログ
+   * @param event 
+   */
+  onClickCancelReq(event: any): void {
+    if (event.detail.role === 'confirm') {
+      this.clickCancelReq.emit(this.model);
+    }
+    this.isCancelOpen = false;
+  }
+
+  /**
+   * 支払要求ダイアログを表示する前の処理
+   */
+  onClickBefPayReq(): void {
+    if (this.model.cancelRequest === 1) {
+      //既に取消依頼済の場合は支払要求させない
+      alert("既に取消依頼済となっています。");
+      return;
+    }
+    this.isPayOpen = true;
+  }
+
+  /**
+   * 支払要求ダイアログ
+   * @param event 
+   */
+  onClickPayReq(event: any): void {
+    if (event.detail.role === 'confirm') {
+      this.clickPayReq.emit(this.model);
+    }
+    this.isPayOpen = false;
+  }
+}

src/app/deny-list/deny-list-routing.module.ts → src/app/claim-list/claim-list-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { DenyListPage } from './deny-list.page';
+import { ClaimListPage } from './claim-list.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: DenyListPage
+    component: ClaimListPage
   }
 ];
 
@@ -14,4 +14,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class DenyListPageRoutingModule {}
+export class ClaimListPageRoutingModule {}

src/app/deny-list/deny-list.module.ts → src/app/claim-list/claim-list.module.ts

@@ -4,22 +4,22 @@ import { FormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
-import { DenyListPageRoutingModule } from './deny-list-routing.module';
+import { ClaimListPageRoutingModule } from './claim-list-routing.module';
 
-import { DenyListPage } from './deny-list.page';
+import { ClaimListPage } from './claim-list.page';
 
 import { HeaderComponent } from '../common/header/header.component';
-import { DenyInfoComponent } from './deny-info/deny-info.component';
+import { ClaimInfoComponent } from './claim-info/claim-info.component';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    DenyListPageRoutingModule,
-    DenyInfoComponent,
+    ClaimListPageRoutingModule,
+    ClaimInfoComponent,
     HeaderComponent
   ],
-  declarations: [DenyListPage]
+  declarations: [ClaimListPage]
 })
-export class DenyListPageModule { }
+export class ClaimListPageModule { }

src/app/deny-list/deny-list.page.html → src/app/claim-list/claim-list.page.html

@@ -3,14 +3,10 @@
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  @for(model of denyList;track model.getonStopId) {
+  @for(model of claimList;track model.agencyId) {
   <div style="margin-top:10px;margin-left:10px;margin-right:10px;">
-    <app-deny-info [model]="model"></app-deny-info>
+    <app-claim-info [model]="model" (clickPayReq)="onClickPayReq($event)"
+      (clickCancelReq)="onClickCancelReq($event)"></app-claim-info>
   </div>
   }
-  <div style="margin-top:20px;text-align:center;">
-    <ion-button id="delreq" class="common-button rounded" style="margin-top:20px;">削除依頼</ion-button>
-    <ion-alert trigger="delreq" header="拒否リストからの削除を依頼しますか？" [buttons]="confirmButtons"
-      (didDismiss)="onClickDelreq($event)"></ion-alert>
-  </div>
 </ion-content>
\ No newline at end of file

src/app/deny-list/deny-list.page.spec.ts → src/app/claim-list/claim-list.page.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DenyListPage } from './deny-list.page';
+import { ClaimListPage } from './claim-list.page';
 
-describe('DenyListPage', () => {
-  let component: DenyListPage;
-  let fixture: ComponentFixture<DenyListPage>;
+describe('ClaimListPage', () => {
+  let component: ClaimListPage;
+  let fixture: ComponentFixture<ClaimListPage>;
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DenyListPage);
+    fixture = TestBed.createComponent(ClaimListPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/deny-list/deny-list.page.ts → src/app/claim-list/claim-list.page.ts

 import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
-import { DenyListModel } from '../model/deny-list.model';
+import { ClaimListModel } from '../model/claim-list.model';
 import { RouteService } from '../services/route.service';
-import { DenyInfoComponent } from './deny-info/deny-info.component';
-import { DenylistService } from '../services/denylist.service';
+import { ClaimInfoComponent } from './claim-info/claim-info.component';
+import { ClaimlistService } from '../services/claimlist.service';
 
 /**
  * 拒否リスト
  */
 @Component({
-  selector: 'app-deny-list',
-  templateUrl: './deny-list.page.html',
-  styleUrls: ['./deny-list.page.scss'],
+  selector: 'app-claim-list',
+  templateUrl: './claim-list.page.html',
+  styleUrls: ['./claim-list.page.scss'],
 })
-export class DenyListPage implements OnInit {
+export class ClaimListPage implements OnInit {
   public confirmButtons = [
     {
       text: 'いいえ',
@@ -24,26 +24,26 @@ export class DenyListPage implements OnInit {
     },
   ];
 
-  //拒否リスト
-  denyList?: DenyListModel[];
+  //請求一覧
+  claimList?: ClaimListModel[];
 
-  @ViewChildren(DenyInfoComponent) denyInfoList?: QueryList<DenyInfoComponent>;
+  @ViewChildren(ClaimInfoComponent) claimInfoList?: QueryList<ClaimInfoComponent>;
 
   /**
    * コンストラクタ
    * @param routeService 画面遷移サービス
-   * @param denyListService 拒否リストサービス
+   * @param claimListService 請求一覧サービス
    */
-  constructor(private routeService: RouteService, private denyListService: DenylistService) { }
+  constructor(private routeService: RouteService, private claimListService: ClaimlistService) { }
 
   /**
    * 初期化
    */
   ngOnInit() {
     if (this.routeService.customerId) {
-      //this.denyList = this.denyListService.getList(this.routeService.customerId);
-      this.denyListService.getList(this.routeService.customerId).subscribe((ret: DenyListModel[]) => {
-        this.denyList = ret;
+      //this.claimList = this.claimListService.getList(this.routeService.customerId);
+      this.claimListService.getList(this.routeService.customerId).subscribe((ret: ClaimListModel[]) => {
+        this.claimList = ret;
       });
     }
   }
@@ -58,23 +58,32 @@ export class DenyListPage implements OnInit {
   }
 
   /**
-   * 削除依頼
+   * 支払要求
+   * @param model 請求情報
    */
-  onClickDelreq(event: any): void {
-    if (event.detail.role === 'confirm') {
-      let req: DenyListModel[] = [];
-      this.denyInfoList?.forEach(child => {
-        let model = child.getModel();
-        if (model.select) {
-          //拒否リスト削除依頼
-          req.push(model);
+  onClickPayReq(model: ClaimListModel): void {
+    if (this.claimList) {
+      for (let i = 0; i < this.claimList.length; i++) {
+        if (this.claimList[i].tokenId === model.tokenId && this.claimList[i].getonDt === model.getonDt) {
+          this.claimList[i].payRequest = this.claimList[i].payRequest === 0 ? 1 : 0;
+          break;
         }
-      });
-      this.denyListService.reqDelete(req);
-    }
-    if (this.routeService.customerId) {
-      this.routeService.navigateMenu(this.routeService.customerId);
+      }
     }
   }
 
+  /**
+   * 取消依頼
+   * @param model 請求情報
+   */
+  onClickCancelReq(model: ClaimListModel): void {
+    if (this.claimList) {
+      for (let i = 0; i < this.claimList.length; i++) {
+        if (this.claimList[i].tokenId === model.tokenId && this.claimList[i].getonDt === model.getonDt) {
+          this.claimList[i].cancelRequest = this.claimList[i].cancelRequest === 0 ? 1 : 0;
+          break;
+        }
+      }
+    }
+  }
 }

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

-<div class="border rounded">
-  <ion-grid class="</ion-label>">
-    <ion-row>
-      <ion-col style="padding-left:10px;" size="auto">
-        <ion-checkbox class="form-check-input" style="margin-top:80px;"
-          (change)="onChangeSelect($event)"></ion-checkbox>
-      </ion-col>
-      <ion-col>
-        <ion-grid class="</ion-label>">
-          <ion-row>
-            <ion-col style="padding-top:10px;">
-              <ion-label>{{model.getonStopName}}→{{model.getoffStopName}}</ion-label>
-            </ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col style="padding-top:10px;" size="auto">
-              <div style="width:80px;">乗車</div>
-            </ion-col>
-            <ion-col style="padding-top:10px;">
-              <ion-label>{{model.getonDt}}</ion-label>
-            </ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col style="padding-top:10px;" size="auto">
-              <div style="width:80px;">降車</div>
-            </ion-col>
-            <ion-col style="padding-top:10px;">
-              <ion-label>{{model.getoffDt}}</ion-label>
-            </ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col style="padding-top:10px;padding-bottom:10px;" size="auto">
-              <div style="width:80px;">請求金額</div>
-            </ion-col>
-            <ion-col style="padding-top:10px;padding-bottom:10px;">
-              <ion-label>{{amountStr}}円</ion-label>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-</div>
\ No newline at end of file

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

-import { Component, Input, OnInit } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
-import { DenyListModel } from 'src/app/model/deny-list.model';
-
-/**
- * 拒否リスト情報
- */
-@Component({
-  standalone: true,
-  selector: 'app-deny-info',
-  templateUrl: './deny-info.component.html',
-  styleUrls: ['./deny-info.component.scss'],
-  imports: [
-    IonicModule
-  ]
-})
-export class DenyInfoComponent implements OnInit {
-  @Input() model: DenyListModel = new DenyListModel();
-  amountStr?: string;
-
-  /**
-   * コンストラクタ
-   */
-  constructor() { }
-
-  /**
-   * 初期化
-   */
-  ngOnInit(): void {
-    this.amountStr = this.model.amount.toLocaleString();
-  }
-
-  /**
-   * 選択イベント
-   * @param event イベント情報
-   */
-  onChangeSelect(event: any): void {
-    this.model.select = event.target.checked;
-  }
-
-  /**
-   * 拒否リスト情報取得
-   * @returns 拒否リスト情報
-   */
-  getModel(): DenyListModel {
-    return this.model;
-  }
-}

src/app/menu/menu.page.html

@@ -18,7 +18,7 @@
     <ion-row>
       <ion-col>
         <ion-button class="rounded menu-button" style="margin-top:10px;" value=""
-          (click)="onClickDenyList()">拒否リスト</ion-button>
+          (click)="onClickClaimList()">請求一覧</ion-button>
       </ion-col>
     </ion-row>
   </ion-grid>

src/app/menu/menu.page.ts

@@ -40,9 +40,9 @@ export class MenuPage {
   }
 
   /**
-   * 拒否リスト
+   * 請求一覧
    */
-  onClickDenyList(): void {
-    this.routeServive.navigateDenyList();
+  onClickClaimList(): void {
+    this.routeServive.navigateClaimList();
   }
 }

src/app/model/claim-list.model.ts

+/**
+ * 請求情報
+ */
+export class ClaimListModel {
+    //トークンID
+    tokenId?: string;
+    //事業者ID
+    agencyId?: string;
+    //事業者名
+    agencyName?: string;
+    //処理日時
+    processDt?: string;
+    //売上日
+    earningDate?: string;
+    //乗車日時
+    getonDt?: string;
+    //降車日時
+    getoffDt?: string;
+    //請求金額
+    amount: number = 0;
+    //NGフラグ
+    ngFlag: number = 0;
+    //支払要求
+    payRequest: number = 0;
+    //取消依頼
+    cancelRequest: number = 0;
+}
\ No newline at end of file

src/app/model/credit-card.model.ts

@@ -22,4 +22,10 @@ export class CreditCardModel {
 
     //CVC
     cvc: string = "";
+
+    //拒否リスト状態
+    denyStatus: number = 0;
+
+    //拒否リスト削除依頼
+    deleteDeny: number = 1;
 }
\ No newline at end of file

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

-/**
- * 拒否リスト情報
- */
-export class DenyListModel {
-    //選択状態
-    select: boolean = false;
-    //乗車停留所ID
-    getonStopId?: string;
-    //乗車停留所名
-    getonStopName?: string;
-    //降車停留所ID
-    getoffStopId?: string;
-    //降車停留所名
-    getoffStopName?: string;
-    //乗車日時
-    getonDt?: string;
-    //降車日時
-    getoffDt?: string;
-    //請求金額
-    amount: number = 0;
-}
\ No newline at end of file

src/app/pipe/custom-date.pipe.spec.ts

+import { CustomDatePipe } from './custom-date.pipe';
+
+describe('CustomDatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new CustomDatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipe/custom-date.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'customDate',
+  standalone: true
+})
+export class CustomDatePipe implements PipeTransform {
+  /**
+   * YYYYMMDD→YYYY/MM/DD変換
+   * @param value YYYYMMDD
+   * @returns YYYY/MM/DD
+   */
+  transform(value?: string): string {
+    if (!value) {
+      return "";
+    }
+    const year = value.substring(0, 4);
+    const month = value.substring(4, 6);
+    const day = value.substring(6);
+
+    return year + "/" + month + "/" + day;
+  }
+
+}

src/app/pipe/custom-datetime.pipe.spec.ts

+import { CustomDatetimePipe } from './custom-datetime.pipe';
+
+describe('CustomDatetimePipe', () => {
+  it('create an instance', () => {
+    const pipe = new CustomDatetimePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipe/custom-datetime.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'customDatetime',
+  standalone: true
+})
+export class CustomDatetimePipe implements PipeTransform {
+  /**
+   * YYYYMMDDHHMISS→YYYY/MM/DD HH:MI:SS変換
+   * @param value YYYYMMDDHHMISS→YYYY
+   * @returns YYYY/MM/DD HH:MI:SS
+   */
+  transform(value?: string): string {
+    if (!value) {
+      return "";
+    }
+    const year = value.substring(0, 4);
+    const month = value.substring(4, 6);
+    const day = value.substring(6, 8);
+    const hour = value.substring(8, 10);
+    const min = value.substring(10, 12);
+    const sec = value.substring(12);
+
+    return year + "/" + month + "/" + day + " " + hour + ":" + min + ":" + sec;
+  }
+}

src/app/services/card.service.ts

@@ -30,6 +30,10 @@ export class CardService {
       model.cardOwner = "TARO YAMADA";
       model.cardYear = "2023";
       model.cardMonth = "02";
+      if (i == 1) {
+        model.denyStatus = 1;
+      }
+      model.deleteDeny = 0;
       cardList.push(model);
     }
     //return cardList;

src/app/services/denylist.service.spec.ts → src/app/services/claimlist.service.spec.ts

 import { TestBed } from '@angular/core/testing';
 
-import { DenylistService } from './denylist.service';
+import { ClaimlistService } from './claimlist.service';
 
-describe('DenylistService', () => {
-  let service: DenylistService;
+describe('ClaimlistService', () => {
+  let service: ClaimlistService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(DenylistService);
+    service = TestBed.inject(ClaimlistService);
   });
 
   it('should be created', () => {

src/app/services/claimlist.service.ts

+import { Injectable } from '@angular/core';
+import { ClaimListModel } from '../model/claim-list.model';
+import { Observable } from 'rxjs';
+
+/**
+ * 請求一覧サービス
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class ClaimlistService {
+  /**
+   * コンストラクタ
+   */
+  constructor() { }
+
+  /**
+   * 請求一覧取得
+   * @param customerId 利用者ID
+   * @return 請求一覧
+   */
+  getList(customerId: string): Observable<ClaimListModel[]> {
+    //TODO
+    let claimList = new Array();
+    for (let i = 0; i < 2; i++) {
+      let claimListModel = new ClaimListModel();
+      let str = String(i);
+      claimListModel.tokenId = "token001";
+      claimListModel.agencyId = str;
+      claimListModel.agencyName = "XXXXバス";
+      claimListModel.processDt = "20240620103002";
+      claimListModel.earningDate = "20240620";
+      claimListModel.getonDt = "2024062010000" + str;
+      claimListModel.getoffDt = "20240620103004";
+      claimListModel.amount = 1000;
+      if (i == 1) {
+        claimListModel.ngFlag = 1;
+      }
+      claimList.push(claimListModel);
+    }
+    //return claimList;
+    return new Observable<ClaimListModel[]>(o => {
+      o.next(claimList);
+    });
+  }
+
+  /**
+   * 拒否リスト削除依頼
+   * @param list 依頼対象
+   */
+  reqDelete(list: ClaimListModel[]): void {
+    //TODO
+
+  }
+}

src/app/services/denylist.service.ts

-import { Injectable } from '@angular/core';
-import { DenyListModel } from '../model/deny-list.model';
-import { Observable } from 'rxjs';
-
-/**
- * 拒否リストサービス
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class DenylistService {
-  /**
-   * コンストラクタ
-   */
-  constructor() { }
-
-  /**
-   * 拒否リスト取得
-   * @param customerId 利用者ID
-   * @return 拒否リスト
-   */
-  getList(customerId: string): Observable<DenyListModel[]> {
-    //TODO
-    let denyList = new Array();
-    for (let i = 0; i < 4; i++) {
-      let denyListModel = new DenyListModel();
-      let str = String(i);
-      denyListModel.getonStopId = str;
-      denyListModel.getonStopName = "XXXX停留所";
-      denyListModel.getoffStopName = "YYYYY停留所";
-      denyListModel.getonDt = "2024/06/20 10:00:01";
-      denyListModel.getoffDt = "2024/06/20 10:30:02";
-      denyListModel.amount = 1000;
-      denyList.push(denyListModel);
-    }
-    //return denyList;
-    return new Observable<DenyListModel[]>(o => {
-      o.next(denyList);
-    });
-  }
-
-  /**
-   * 拒否リスト削除依頼
-   * @param list 依頼対象
-   */
-  reqDelete(list: DenyListModel[]): void {
-    //TODO
-
-  }
-}

src/app/services/route.service.ts

@@ -128,9 +128,9 @@ export class RouteService {
   }
 
   /**
-   * 拒否リスト管理画面へ遷移
+   * 請求一覧画面へ遷移
    */
-  navigateDenyList() {
-    this.router.navigate(['deny-list']);
+  navigateClaimList() {
+    this.router.navigate(['claim-list']);
   }
 }