2024/07/10

angular.json

@@ -113,8 +113,22 @@
               "node_modules/jquery/dist/jquery.min.js"
             ]
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
+  },
+  "cli": {
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
-}
\ No newline at end of file
+}

package.json

@@ -6,11 +6,12 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.0",
+    "@angular/animations": "^18.0.3",
     "@angular/cdk": "^18.0.3",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
@@ -26,6 +27,7 @@
     "bootstrap": "^5.3.2",
     "jquery": "^3.7.1",
     "jqwidgets-ng": "^19.2.2",
+    "ngx-bootstrap": "^6.2.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -36,12 +38,15 @@
     "@angular/compiler-cli": "^18.0.0",
     "@angular/localize": "^18.0.0",
     "@types/jasmine": "~5.1.0",
+    "angular-eslint": "18.0.1",
+    "eslint": "^9.3.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.4.2"
+    "typescript": "~5.4.2",
+    "typescript-eslint": "8.0.0-alpha.20"
   }
-}
+}
\ No newline at end of file

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { jqxGridModule } from 'jqwidgets-ng/jqxgrid';
 import { CommonModule } from '@angular/common';
 import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
+import { AgGridAngular } from 'ag-grid-angular';
 
 import { TopComponent } from './top/top.component';
 import { HeaderComponent } from './header/header.component';
@@ -16,7 +17,28 @@ import { StaffListComponent } from './menu/staff-list/staff-list.component';
 import { UserListComponent } from './menu/user-list/user-list.component';
 import { RoleMstComponent } from './menu/master/role-mst/role-mst.component';
 import { PassFareComponent } from './menu/master/pass-fare/pass-fare.component';
-import { StaffRegistComponent } from './menu/staff-regist/staff-regist.component'
+import { StaffRegistComponent } from './menu/staff-regist/staff-regist.component';
+import { CustomButtonComponent } from './menu/staff-list/custom-button/custom-button.component';
+import { PassButtonComponent } from './menu/user-list/pass-button/pass-button.component';
+import { HistoryButtonComponent } from './menu/user-list/history-button/history-button.component';
+import { DenylistButtonComponent } from './menu/user-list/denylist-button/denylist-button.component';
+import { PassListComponent } from './menu/pass-list/pass-list.component';
+import { RefundButtonComponent } from './menu/pass-list/refund-button/refund-button.component';
+import { PassRefundComponent } from './menu/pass-list/pass-refund/pass-refund.component';
+import { HistoryListComponent } from './menu/history-list/history-list.component';
+import { StatusLinkComponent } from './menu/history-list/status-link/status-link.component';
+import { StatusUpdateComponent } from './menu/history-list/status-update/status-update.component';
+import { DenyListComponent } from './menu/deny-list/deny-list.component';
+import { EarningListComponent } from './menu/earning-list/earning-list.component';
+import { CardRendererComponent } from './menu/earning-list/card-renderer/card-renderer.component';
+import { ProcessDatetimeComponent } from './menu/earning-list/processdatetime/processdatetime.component';
+import { EarningDateComponent } from './menu/earning-list/earning-date/earning-date.component';
+import { GetonDatetimeComponent } from './menu/earning-list/geton-datetime/geton-datetime.component';
+import { GetoffDatetimeComponent } from './menu/earning-list/getoff-datetime/getoff-datetime.component';
+import { StatusComponent } from './menu/earning-list/status/status.component';
+import { NgComponent } from './menu/earning-list/ng/ng.component';
+import { DelreqComponent } from './menu/earning-list/delreq/delreq.component';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -27,7 +49,27 @@ import { StaffRegistComponent } from './menu/staff-regist/staff-regist.component
     UserListComponent,
     RoleMstComponent,
     PassFareComponent,
-    StaffRegistComponent
+    StaffRegistComponent,
+    CustomButtonComponent,
+    PassButtonComponent,
+    HistoryButtonComponent,
+    DenylistButtonComponent,
+    PassListComponent,
+    RefundButtonComponent,
+    PassRefundComponent,
+    HistoryListComponent,
+    StatusLinkComponent,
+    StatusUpdateComponent,
+    DenyListComponent,
+    EarningListComponent,
+    CardRendererComponent,
+    ProcessDatetimeComponent,
+    EarningDateComponent,
+    GetonDatetimeComponent,
+    GetoffDatetimeComponent,
+    StatusComponent,
+    NgComponent,
+    DelreqComponent
   ],
   imports: [
     BrowserModule,
@@ -38,7 +80,8 @@ import { StaffRegistComponent } from './menu/staff-regist/staff-regist.component
     CommonModule,
     CdkListbox,
     CdkOption,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    AgGridAngular
   ],
   providers: [
     provideAnimationsAsync()

src/app/header/header.component.html

@@ -6,7 +6,7 @@
             </td>
             @if (mode === 1) {
             <td class="logout" style="text-align: right;">
-                <div (click)="onClickLogout()">ログアウト</div>
+                <div role="button" (click)="onClickLogout()">ログアウト</div>
             </td>
             }
         </tr>

src/app/header/header.component.ts

@@ -11,7 +11,7 @@ import { RouteService } from '../service/route.service';
 })
 export class HeaderComponent {
   //モード(0:タイトルのみ、1:ログアウトあり)
-  @Input() mode: number = 0;
+  @Input() mode = 0;
 
   /**
    * コンストラクタ

src/app/menu/master/pass-fare/pass-fare.component.ts

@@ -38,7 +38,7 @@ export class PassFareComponent implements OnInit {
   //降車停留所ID
   getoffStopId?: string;
   //運賃
-  fare: number = 0;
+  fare = 0;
 
   /**
    * コンストラクタ
@@ -52,7 +52,7 @@ export class PassFareComponent implements OnInit {
     //事業所一覧
     this.agencyList = new Map();
     for (let i = 0; i < 5; i++) {
-      let str = String(i + 1);
+      const str = String(i + 1);
       this.agencyList.set(str, "事業所" + str);
     }
     this.agencyId = "1";
@@ -67,7 +67,7 @@ export class PassFareComponent implements OnInit {
     //路線一覧
     this.routeList = new Map();
     for (let i = 0; i < 5; i++) {
-      let str = String(i + 1);
+      const str = String(i + 1);
       this.routeList.set(str, "路線" + str);
     }
     this.routeId = "1";
@@ -82,7 +82,7 @@ export class PassFareComponent implements OnInit {
     //停留所
     this.stopList = new Map();
     for (let i = 0; i < 5; i++) {
-      let str = String(i + 1);
+      const str = String(i + 1);
       this.stopList.set(str, "停留所" + str);
     }
   }
@@ -94,13 +94,13 @@ export class PassFareComponent implements OnInit {
     //停留所
     this.stopList = new Map();
     for (let i = 0; i < 5; i++) {
-      let str = String(i + 1);
+      const str = String(i + 1);
       this.stopList.set(str, "停留所" + str);
     }
 
-    this.passFareList = new Array();
+    this.passFareList = [];
     for (let i = 0; i < 10; i++) {
-      let model: PassFareModel = new PassFareModel();
+      const model: PassFareModel = new PassFareModel();
       model.id = String(i + 1);
       model.agencyId = this.agencyId;
       model.routeId = this.routeId;
@@ -131,7 +131,7 @@ export class PassFareComponent implements OnInit {
    * 追加
    */
   onClickAdd(): void {
-    let model: PassFareModel = new PassFareModel();
+    const model: PassFareModel = new PassFareModel();
     model.id = String(this.passFareList.length + 1);
     model.agencyId = this.agencyId;
     model.routeId = this.routeId;
@@ -158,25 +158,25 @@ export class PassFareComponent implements OnInit {
    * 更新
    */
   onClickUpdate(): void {
-    let list = this.formControl.value;
+    const list = this.formControl.value;
     if (list !== null) {
-      let model = list[0];
+      const model = list[0];
 
-      for (let i = 0; i < this.passFareList.length; i++) {
-        if (this.passFareList[i].id === model.id) {
-          this.passFareList[i].useTermId = this.useTermId;
+      for (const passFare of this.passFareList) {
+        if (passFare.id === model.id) {
+          passFare.useTermId = this.useTermId;
           if (typeof this.useTermId !== 'undefined') {
-            this.passFareList[i].useTermName = this.useTermList?.get(this.useTermId);
+            passFare.useTermName = this.useTermList?.get(this.useTermId);
           }
-          this.passFareList[i].getonStopId = this.getonStopId;
+          passFare.getonStopId = this.getonStopId;
           if (typeof this.getonStopId !== 'undefined') {
-            this.passFareList[i].getonStopName = this.stopList?.get(this.getonStopId);
+            passFare.getonStopName = this.stopList?.get(this.getonStopId);
           }
-          this.passFareList[i].getoffStopId = this.getoffStopId;
+          passFare.getoffStopId = this.getoffStopId;
           if (typeof this.getoffStopId !== 'undefined') {
-            this.passFareList[i].getoffStopName = this.stopList?.get(this.getoffStopId);
+            passFare.getoffStopName = this.stopList?.get(this.getoffStopId);
           }
-          this.passFareList[i].fare = this.fare;
+          passFare.fare = this.fare;
           break;
         }
       }
@@ -187,14 +187,14 @@ export class PassFareComponent implements OnInit {
    * 削除
    */
   onClickDel(): void {
-    let list = this.formControl.value;
+    const list = this.formControl.value;
     if (list !== null) {
-      let model = list[0];
+      const model = list[0];
 
-      let newList = new Array();
-      for (let i = 0; i < this.passFareList.length; i++) {
-        if (this.passFareList[i].id !== model.id) {
-          newList.push(this.passFareList[i]);
+      const newList = [];
+      for (const passFare of this.passFareList) {
+        if (passFare.id !== model.id) {
+          newList.push(passFare);
         }
       }
       this.passFareList = newList;

src/app/menu/master/role-mst/role-mst.component.ts

@@ -22,17 +22,17 @@ export class RoleMstComponent implements OnInit {
   //権限名
   roleName?: string;
   //事業所担当者
-  staffRole: number = 0;
+  staffRole = 0;
   //利用者検索
-  userRole: number = 0;
+  userRole = 0;
   //定期券検索
-  passRole: number = 0;
+  passRole = 0;
   //乗降履歴
-  historyRole: number = 0;
+  historyRole = 0;
   //拒否リスト
-  denyListRole: number = 0;
+  denyListRole = 0;
   //マスタメンテ
-  masterRole: number = 0;
+  masterRole = 0;
 
   /**
    * コンストラクタ
@@ -47,7 +47,7 @@ export class RoleMstComponent implements OnInit {
    * 初期化
    */
   ngOnInit(): void {
-    this.roleList = new Array();
+    this.roleList = [];
     let model: RoleModel = new RoleModel;
     model.roleId = "1";
     model.name = "担当";
@@ -84,7 +84,7 @@ export class RoleMstComponent implements OnInit {
    * 追加
    */
   onClickAdd(): void {
-    let model: RoleModel = new RoleModel();
+    const model: RoleModel = new RoleModel();
     model.roleId = String(this.roleList.length + 1);
     model.name = this.roleName;
     model.staffRole = this.staffRole;
@@ -100,19 +100,19 @@ export class RoleMstComponent implements OnInit {
    * 更新
    */
   onClickUpdate(): void {
-    let list = this.formControl.value;
+    const list = this.formControl.value;
     if (list !== null) {
-      let model = list[0];
+      const model = list[0];
 
-      for (let i = 0; i < this.roleList.length; i++) {
-        if (this.roleList[i].roleId === model.roleId) {
-          this.roleList[i].name = this.roleName;
-          this.roleList[i].staffRole = this.staffRole;
-          this.roleList[i].userRole = this.userRole;
-          this.roleList[i].passRole = this.passRole;
-          this.roleList[i].historyRole = this.historyRole;
-          this.roleList[i].denyListRole = this.denyListRole;
-          this.roleList[i].masterRole = this.masterRole;
+      for (const role of this.roleList) {
+        if (role.roleId === model.roleId) {
+          role.name = this.roleName;
+          role.staffRole = this.staffRole;
+          role.userRole = this.userRole;
+          role.passRole = this.passRole;
+          role.historyRole = this.historyRole;
+          role.denyListRole = this.denyListRole;
+          role.masterRole = this.masterRole;
           break;
         }
       }
@@ -123,14 +123,14 @@ export class RoleMstComponent implements OnInit {
    * 削除
    */
   onClickDel(): void {
-    let list = this.formControl.value;
+    const list = this.formControl.value;
     if (list !== null) {
-      let model = list[0];
+      const model = list[0];
 
-      let newList = new Array();
-      for (let i = 0; i < this.roleList.length; i++) {
-        if (this.roleList[i].roleId !== model.roleId) {
-          newList.push(this.roleList[i]);
+      const newList = [];
+      for (const role of this.roleList) {
+        if (role.roleId !== model.roleId) {
+          newList.push(role);
         }
       }
       this.roleList = newList;

src/app/menu/menu.component.html

@@ -2,22 +2,33 @@
 <div class="container" style="max-width:100%;height:96%;">
     <div class="row h-100">
         <div class="col-md-auto border">
-            <div class="common-link" type="button" style="margin-top:20px;" (click)="onClickBusiness()">事業所担当者</div>
-            <div class="common-link" type="button" style="margin-top:10px;" (click)=" onClickUser()">利用者検索</div>
-            <div class="common-link" type="button" style="margin-top:10px;" (click)="onClickRoleMst()">権限マスタ</div>
-            <div class="common-link" type="button" style="margin-top:10px;" (click)="onClickPassFare()">定期券運賃マスタ</div>
+            <div class="common-link" role="button" style="margin-top:20px;" (click)="onClickBusiness()">事業所担当者</div>
+            <div class="common-link" role="button" style="margin-top:10px;" (click)="onClickUser()">利用者検索</div>
+            <div class="common-link" role="button" style="margin-top:10px;" (click)="onClickEarning()">売上予定一覧</div>
+            <div class="common-link" role="button" style="margin-top:10px;" (click)="onClickRoleMst()">権限マスタ</div>
+            <!-- div class="common-link" type="button" style="margin-top:10px;" (click)="onClickPassFare()">定期券運賃マスタ</div -->
         </div>
         <div class="col">
-            @if (mode === 0) {
+            @if (mode === 1) {
             <app-staff-list (clickNew)="onClickNew()" (clickEdit)="onClickEdit($event)"></app-staff-list>
-            } @else if (mode === 1) {
-            <app-user-list></app-user-list>
+            } @else if (mode === 11) {
+            <app-staff-regist [mode]="staffEditMode" [staffInfoModel]="staffInfoModel"
+                (clickBack)="onClickRegist()"></app-staff-regist>
             } @else if (mode === 2) {
-            <app-staff-regist [mode]="staffEditMode" (clickBack)="onClickRegist()"></app-staff-regist>
+            <app-user-list (clickPass)="onClickPass($event)" (clickHistory)="onClickHistory($event)"
+                (clickDenyList)="onClickDenyList($event)"></app-user-list>
+            } @else if (mode === 21) {
+            <app-pass-list [model]="userInfoModel"></app-pass-list>
+            } @else if (mode === 22) {
+            <app-history-list [model]="userInfoModel"></app-history-list>
+            } @else if (mode === 23) {
+            <app-deny-list [model]="userInfoModel"></app-deny-list>
             } @else if (mode === 3) {
             <app-role-mst></app-role-mst>
             } @else if (mode === 4) {
             <app-pass-fare></app-pass-fare>
+            } @else if (mode === 5) {
+            <app-earning-list></app-earning-list>
             }
         </div>
     </div>

src/app/menu/menu.component.ts

-import { FlatTreeControl } from '@angular/cdk/tree';
 import { Component } from '@angular/core';
-
-interface ExampleFlatNode {
-  expandable: boolean;
-  name: string;
-  level: number;
-}
+import { StaffInfoModel } from '../model/staff-info.model';
+import { PassModel } from '../model/pass.model';
+import { UserInfoModel } from '../model/user-info.model';
 
 @Component({
   selector: 'app-menu',
@@ -13,23 +9,25 @@ interface ExampleFlatNode {
   styleUrl: './menu.component.css'
 })
 export class MenuComponent {
-  //モード(0:事業所担当者、1:利用者検索、2:利用者登録・更新、3:権限マスタ、4:定期券運賃マスタ)
-  mode: number = 0;
+  //モード(1:事業所担当者、2:利用者検索、21:利用者登録・更新、3:権限マスタ、4:定期券運賃マスタ)
+  mode = 1;
 
   //担当者編集モード(0:登録、1:編集)
-  staffEditMode: number = 0;
+  staffEditMode = 0;
+
+  //担当者情報
+  staffInfoModel?: StaffInfoModel;
+
+  //利用者情報
+  userInfoModel?: UserInfoModel;
+
+  //定期券情報
+  passModel?: PassModel;
 
   /**
    * 事業所担当者
    */
   onClickBusiness(): void {
-    this.mode = 0;
-  }
-
-  /**
-   * 利用者検索
-   */
-  onClickUser(): void {
     this.mode = 1;
   }
 
@@ -37,22 +35,59 @@ export class MenuComponent {
    * 新規
    */
   onClickNew(): void {
-    this.mode = 2;
+    this.mode = 11;
+    this.staffEditMode = 0;
   }
 
   /**
    * 編集
    * @param row 行番号
    */
-  onClickEdit(row: number): void {
-    this.mode = 2;
+  onClickEdit(data: StaffInfoModel): void {
+    this.mode = 11;
+    this.staffEditMode = 1;
+    this.staffInfoModel = data;
   }
 
   /**
    * 担当者登録後
    */
   onClickRegist(): void {
-    this.mode = 0;
+    this.mode = 1;
+  }
+
+  /**
+   * 利用者検索
+   */
+  onClickUser(): void {
+    this.mode = 2;
+  }
+
+  /**
+ * 定期券クリック
+ * @param model 利用者情報
+ */
+  onClickPass(model: UserInfoModel): void {
+    this.mode = 21;
+    this.userInfoModel = model;
+  }
+
+  /**
+   * 乗車履歴クリック
+   * @param model 利用者情報
+   */
+  onClickHistory(model: UserInfoModel): void {
+    this.mode = 22;
+    this.userInfoModel = model;
+  }
+
+  /**
+   * 拒否リストクリック
+   * @param model 利用者情報
+   */
+  onClickDenyList(model: UserInfoModel): void {
+    this.mode = 23;
+    this.userInfoModel = model;
   }
 
   /**
@@ -68,4 +103,12 @@ export class MenuComponent {
   onClickPassFare(): void {
     this.mode = 4;
   }
+
+  /**
+   * 売上一覧
+   */
+  onClickEarning(): void {
+    this.mode = 5;
+  }
+
 }

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

@@ -25,6 +25,6 @@
         </td>
     </tr>
 </table>
-<jqxGrid style="margin-top:20px;" [width]="770" [selectionmode]="'checkbox'" [source]="source" [theme]="'material'"
-    [autoheight]="true" [pageable]="true" [altrows]="true" [filterable]="true" [sortable]="true" [columns]="columns"
-    #grid></jqxGrid>
\ No newline at end of file
+<ag-grid-angular class="ag-theme-quartz" style="height:500px;margin-top:20px;" [rowData]="staffList"
+    [columnDefs]="colDefs" [autoSizeStrategy]="autoSizeStrategy" [context]="context" [rowSelection]="rowSelection"
+    (gridReady)="onGridReady($event)" [pagination]=true></ag-grid-angular>
\ No newline at end of file

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

-import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { StaffInfoModel } from '../../model/staff-info.model';
-import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
+import { CustomButtonComponent } from './custom-button/custom-button.component';
+import { ColDef, GridApi } from 'ag-grid-community';
+import { SizeColumnsToFitGridStrategy, SizeColumnsToFitProvidedWidthStrategy, SizeColumnsToContentStrategy } from 'ag-grid-community'
 
 /**
  * 事業所担当者一覧
@@ -11,44 +13,53 @@ import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
   styleUrl: './staff-list.component.css'
 })
 export class StaffListComponent implements OnInit {
-  @Output() clickNew: EventEmitter<void> = new EventEmitter();
-  @Output() clickEdit: EventEmitter<number> = new EventEmitter();
-  @ViewChild('grid', { static: false }) myGrid?: jqxGridComponent;
+  @Output() clickNew: EventEmitter<void> = new EventEmitter<void>();
+  @Output() clickEdit: EventEmitter<StaffInfoModel> = new EventEmitter<StaffInfoModel>();
+
   //事業所ID
-  agencyId: string = "";
+  agencyId = "";
   //事業所一覧
-  agencyList: Map<string, string> = new Map();
+  agencyList = new Map<string, string>();
   //担当者一覧
   staffList: StaffInfoModel[] = [];
+  context: any;
+  private gridApi!: GridApi<StaffInfoModel>;
+  rowSelection: "single" | "multiple" = "multiple";
 
-  source: any = {
-    datatype: 'json',
-    datafields: [
-      { name: 'update', type: 'string' },
-      { name: 'email', type: 'string' },
-      { name: 'name', type: 'string' },
-      { name: 'company', type: 'string' },
-      { name: 'department', type: 'string' },
-      { name: 'roleName', type: 'string' }
-    ]
-  }
-  columns = [
-    {
-      text: '', datafield: 'update', width: 40, cellsrenderer: function (row: any, column: any, value: any) {
-        return '<input type="button" style="width:40px;height:100%;" data-row="' + row + '" onclick="onClickEdit(' + row + ')" value="編集">';
-      }
-    },
-    { text: 'メールアドレス', datafield: 'email', width: 200, },
-    { text: '氏名', datafield: 'name', width: 200 },
-    { text: '会社', datafield: 'company', width: 100 },
-    { text: '部署', datafield: 'department', width: 100 },
-    { text: '権限', datafield: 'roleName', width: 100 }
+  colDefs: ColDef[] = [
+    { headerName: '', field: "update", width: 40, cellRenderer: CustomButtonComponent, checkboxSelection: true, headerCheckboxSelection: true },
+    { headerName: 'メールアドレス', field: "email", width: 190 },
+    { headerName: '氏名', field: "name", width: 160 },
+    { headerName: '会社', field: "company", width: 160 },
+    { headerName: '部署', field: "department", width: 160 },
+    { headerName: '権限', field: "roleName", width: 140 },
+    { field: "agencyId", hide: true },
+    { field: "password", hide: true },
+    { field: "roleId", hide: true }
   ];
 
+  public autoSizeStrategy:
+    | SizeColumnsToFitGridStrategy
+    | SizeColumnsToFitProvidedWidthStrategy
+    | SizeColumnsToContentStrategy = {
+      type: "fitGridWidth",
+      defaultMinWidth: 100,
+      columnLimits: [
+        {
+          colId: "country",
+          minWidth: 900,
+        },
+      ],
+    };
+
   /**
    * コンストラクタ
    */
-  constructor() { }
+  constructor() {
+    this.context = {
+      componentParent: this
+    }
+  }
 
   /**
    * 初期処理
@@ -56,7 +67,7 @@ export class StaffListComponent implements OnInit {
   ngOnInit(): void {
     this.agencyList = new Map();
     for (let i = 0; i < 5; i++) {
-      let str = String(i + 1);
+      const str = String(i + 1);
       this.agencyList.set("000" + str, "事業所" + str);
       if (i == 0) {
         this.agencyId = "000" + str;
@@ -69,20 +80,19 @@ export class StaffListComponent implements OnInit {
    */
   onClickSearch(): void {
     //担当者一覧取得
-    this.staffList = new Array();
+    this.staffList = [];
     for (let i = 0; i < 5; i++) {
-      let model = new StaffInfoModel();
+      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 = "0";
+      model.roleId = "1";
       model.roleName = "システム管理者";
       this.staffList.push(model);
     }
-
-    this.source.localdata = JSON.stringify(this.staffList);
-    this.myGrid?.updatebounddata();
   }
 
   /**
@@ -95,20 +105,34 @@ export class StaffListComponent implements OnInit {
   /**
    * 編集
    */
-  onClickEdit(row: number): void {
-    this.clickEdit.emit(row);
+  onClickEdit(data: StaffInfoModel): void {
+    this.clickEdit.emit(data);
   }
 
   /**
    * 削除
    */
   onClickDel(): void {
-    //TODO
-    if (typeof this.myGrid !== "undefined") {
-      let rows = this.myGrid.getselectedrowindexes();
-      for (let i = 0; i < rows.length; i++) {
-        console.log(rows[i]);
+    const list: StaffInfoModel[] = this.gridApi.getSelectedRows();
+    const array = [];
+    for (const staff of this.staffList) {
+      let del = false;
+      for (const model of list) {
+        if (model.email === staff.email) {
+          del = true;
+          break;
+        }
+      }
+      if (!del) {
+        array.push(staff);
       }
     }
+    this.staffList = array;
+
+    this.gridApi.setGridOption("rowData", this.staffList);
+  }
+
+  onGridReady(params: any): void {
+    this.gridApi = params.api;
   }
 }

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';
 
 @Component({
   selector: 'app-staff-regist',
@@ -6,8 +7,10 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
   styleUrl: './staff-regist.component.css'
 })
 export class StaffRegistComponent implements OnInit {
-  @Input() mode: number = 0;
-  @Output() clickBack: EventEmitter<void> = new EventEmitter();
+  @Input() mode = 0;
+  @Input() staffInfoModel?: StaffInfoModel;
+  @Output() clickBack: EventEmitter<void> = new EventEmitter<void>();
+
   //事業所ID
   agencyId?: string;
   //事業所一覧
@@ -37,15 +40,24 @@ export class StaffRegistComponent implements OnInit {
     //事業所一覧
     this.agencyList = new Map();
     for (let i = 0; i < 5; i++) {
-      let str = String(i + 1);
+      const str = String(i + 1);
       this.agencyList?.set(str, "事業所" + str)
     }
     //権限一覧
     this.roleList = new Map();
     for (let i = 0; i < 3; i++) {
-      let str = String(i + 1);
+      const str = String(i + 1);
       this.roleList?.set(str, "権限" + str)
     }
+
+    if (this.staffInfoModel !== null) {
+      this.agencyId = this.staffInfoModel?.agencyId;
+      this.email = this.staffInfoModel?.email;
+      this.password = this.staffInfoModel?.password;
+      this.name = this.staffInfoModel?.name;
+      this.department = this.staffInfoModel?.department;
+      this.roleId = this.staffInfoModel?.roleId;
+    }
   }
 
   /**

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

@@ -11,5 +11,6 @@
         </td>
     </tr>
 </table>
-<jqxGrid style="margin-top:20px;" [width]="940" [source]="source" [theme]="'material'" [autoheight]="true"
-    [pageable]="true" [altrows]="true" [filterable]="true" [sortable]="true" [columns]="columns" #grid></jqxGrid>
\ No newline at end of file
+<ag-grid-angular class="ag-theme-quartz" style="height:500px;margin-top:20px;" [rowData]="userList"
+    [columnDefs]="colDefs" [autoSizeStrategy]="autoSizeStrategy" [context]="context" (gridReady)="onGridReady($event)"
+    [pagination]=true></ag-grid-angular>
\ No newline at end of file

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

-import { Component, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { UserInfoModel } from '../../model/user-info.model';
-import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
+import { ColDef, GridApi } from 'ag-grid-community';
+import { HistoryButtonComponent } from './history-button/history-button.component';
+import { DenylistButtonComponent } from './denylist-button/denylist-button.component';
+import { SizeColumnsToFitGridStrategy, SizeColumnsToFitProvidedWidthStrategy, SizeColumnsToContentStrategy } from 'ag-grid-community'
+import { PassRefundService } from '../../service/pass-refund.service';
 
 /**
  * 利用者検索画面
@@ -11,67 +15,91 @@ import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';
   styleUrl: './user-list.component.css'
 })
 export class UserListComponent {
-  @ViewChild('grid', { static: false }) myGrid?: jqxGridComponent;
+  @Output() clickPass: EventEmitter<UserInfoModel> = new EventEmitter<UserInfoModel>();
+  @Output() clickHistory: EventEmitter<UserInfoModel> = new EventEmitter<UserInfoModel>();
+  @Output() clickDenyList: EventEmitter<UserInfoModel> = new EventEmitter<UserInfoModel>();
+
   //利用者名
   userName?: string;
   //利用者一覧
   userList: UserInfoModel[] = [];
+  context: any;
+  private gridApi!: GridApi<UserInfoModel>;
 
-  source: any = {
-    datatype: 'json',
-    datafields: [
-      { name: 'name', type: 'string' },
-      { name: 'nameKana', type: 'string' },
-      { name: 'email', type: 'string' },
-      { name: 'phoneNumber', type: 'string' },
-      { name: 'pass', type: 'string' },
-      { name: 'history', type: 'string' },
-      { name: 'denyList', type: 'string' }
-    ]
-  }
-  columns = [
-    { text: '氏名', datafield: 'name', width: 200, },
-    { text: 'フリガナ', datafield: 'nameKana', width: 200 },
-    { text: 'メールアドレス', datafield: 'email', width: 200 },
-    { text: '電話番号', datafield: 'phoneNumber', width: 100 },
-    {
-      text: '', datafield: 'pass', width: 80, cellsrenderer: function (row: any, column: any, value: any) {
-        return '<input type="button" style="width:80px;height:100%;" data-row="' + row + '" onclick="onClickPass(' + row + ')" value="定期券">';
-      }
-    },
-    {
-      text: '', datafield: 'history', width: 80, cellsrenderer: function (row: any, column: any, value: any) {
-        return '<input type="button" style="width:80px;height:100%;" data-row="' + row + '" onclick="onClickHistory(' + row + ')" value="乗降履歴">';
-      }
-    },
-    {
-      text: '', datafield: 'denyList', width: 80, cellsrenderer: function (row: any, column: any, value: any) {
-        return '<input type="button" style="width:80px;height:100%;" data-row="' + row + '" onclick="onClickHistory(' + row + ')" value="拒否リスト">';
-      }
-    }
+  colDefs: ColDef[] = [
+    { headerName: '氏名', field: "name", width: 200 },
+    { headerName: 'フリガナ', field: "nameKana", width: 200 },
+    { headerName: 'メールアドレス', field: "email", width: 200 },
+    { headerName: '電話番号', field: "phoneNumber", width: 200 },
+    //{ headerName: '', field: "pass", width: 80, cellRenderer: PassButtonComponent },
+    { headerName: '', field: "history", width: 80, cellRenderer: HistoryButtonComponent },
+    { headerName: '', field: "denyList", width: 80, cellRenderer: DenylistButtonComponent },
   ];
+  public autoSizeStrategy:
+    | SizeColumnsToFitGridStrategy
+    | SizeColumnsToFitProvidedWidthStrategy
+    | SizeColumnsToContentStrategy = {
+      type: "fitGridWidth",
+      defaultMinWidth: 100,
+      columnLimits: [
+        {
+          colId: "country",
+          minWidth: 900,
+        },
+      ],
+    };
+
 
   /**
    * コンストラクタ
    */
-  constructor() { }
+  constructor(private passRefundService: PassRefundService) {
+    this.context = {
+      componentParent: this
+    }
+  }
 
   /**
    * 検索
    */
   onClickSearch(): void {
-    this.userList = new Array();
+    this.userList = [];
     for (let i = 0; i < 10; i++) {
-      let str = String(i + 1);
-      let model = new UserInfoModel();
+      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.source.localdata = JSON.stringify(this.userList);
-    this.myGrid?.updatebounddata();
+  onGridReady(params: any): void {
+    this.gridApi = params.api;
+  }
+
+  /**
+   * 定期券クリック
+   * @param model 利用者情報
+   */
+  onClickPass(model: UserInfoModel): void {
+    this.clickPass.emit(model);
+  }
+
+  /**
+   * 乗車履歴クリック
+   * @param model  利用者情報
+   */
+  onClickHistory(model: UserInfoModel): void {
+    this.clickHistory.emit(model);
+  }
+
+  /**
+   * 拒否リストクリック
+   * @param model 利用者情報
+   */
+  onClickDenyList(model: UserInfoModel): void {
+    this.clickDenyList.emit(model);
   }
 }