feat(create.component): set max ID value (#3113)

Co-authored-by: Francesco Borzì <[email protected]>

libs/features/spell/src/select-spell/select-spell.component.html

@@ -24,6 +24,7 @@
       [customStartingId]="customStartingId"
       [handlerService]="handlerService"
       [queryService]="queryService"
+      [maxEntryValue]="2147483647"
     />
   </div>
   <div class="content-block">

libs/shared/base-editor-components/src/create/create.component.html

@@ -8,7 +8,15 @@
 <div class="row">
   <div class="form-inline">
     <div class="form-group col-12">
-      <input type="number" class="form-control form-control-sm" id="id" [(ngModel)]="idModel" (input)="checkId()" />
+      <input
+        type="number"
+        class="form-control form-control-sm"
+        id="id"
+        [(ngModel)]="idModel"
+        (input)="checkId()"
+        [max]="maxEntryValue"
+        (change)="checkMaxValue()"
+      />
       <button
         class="btn btn-success btn-sm ms-2"
         id="select-button"

libs/shared/base-editor-components/src/create/create.component.spec.ts

@@ -1,13 +1,13 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { MockHandlerService } from '@keira/shared/base-abstract-classes';
+import { TableRow } from '@keira/shared/constants';
+import { MysqlQueryService } from '@keira/shared/db-layer';
 import { PageObject, TranslateTestingModule } from '@keira/shared/test-utils';
 import { of, throwError } from 'rxjs';
 import { anything, instance, mock, reset, when } from 'ts-mockito';
 import { CreateComponent } from './create.component';
-import { MysqlQueryService } from '@keira/shared/db-layer';
-import { TableRow } from '@keira/shared/constants';
-import { MockHandlerService } from '@keira/shared/base-abstract-classes';
 import Spy = jasmine.Spy;
 
 class CreateComponentPage extends PageObject<CreateComponent<TableRow>> {
@@ -33,6 +33,7 @@ describe('CreateComponent', () => {
   const mockId = 'mockId';
   const takenId = 100;
   const maxId = 12;
+  const MAX_INT_UNSIGNED_VALUE = 4294967295;
 
   beforeEach(waitForAsync(() => {
     spyError = spyOn(console, 'error');
@@ -54,6 +55,7 @@ describe('CreateComponent', () => {
     component.entityIdField = mockId;
     component.handlerService = instance(mock(MockHandlerService));
     component.queryService = instance(MockedMysqlQueryService);
+    component.maxEntryValue = MAX_INT_UNSIGNED_VALUE;
     page = new CreateComponentPage(fixture);
     fixture.autoDetectChanges(true);
     fixture.detectChanges();
@@ -107,6 +109,15 @@ describe('CreateComponent', () => {
     expect(selectSpy).toHaveBeenCalledWith(true, id);
   });
 
+  it('does not allow a higher value than max value', () => {
+    const unallowedIdValue = MAX_INT_UNSIGNED_VALUE + 1;
+    component.idModel = unallowedIdValue;
+
+    component['checkMaxValue']();
+
+    expect(component.idModel).toEqual(MAX_INT_UNSIGNED_VALUE);
+  });
+
   it('the customStartId should be preferred when greater than the currentMax', () => {
     component.customStartingId = 10;
     expect(component['calculateNextId'](5)).toEqual(10);

libs/shared/base-editor-components/src/create/create.component.ts

@@ -7,11 +7,12 @@ import { SubscriptionHandler } from '@keira/shared/utils';
 import { TranslateModule } from '@ngx-translate/core';
 import { QueryError } from 'mysql2';
 
+const MAX_INT_UNSIGNED_VALUE = 4294967295;
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'keira-create',
   templateUrl: './create.component.html',
-  styleUrls: ['./create.component.scss'],
   standalone: true,
   imports: [TranslateModule, FormsModule],
 })
@@ -21,6 +22,7 @@ export class CreateComponent<T extends TableRow> extends SubscriptionHandler imp
   @Input({ required: true }) customStartingId!: number;
   @Input({ required: true }) handlerService!: HandlerService<T>;
   @Input({ required: true }) queryService!: MysqlQueryService;
+  @Input() maxEntryValue = MAX_INT_UNSIGNED_VALUE;
 
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
 
@@ -74,6 +76,12 @@ export class CreateComponent<T extends TableRow> extends SubscriptionHandler imp
     );
   }
 
+  protected checkMaxValue(): void {
+    if (this.idModel > MAX_INT_UNSIGNED_VALUE) {
+      this.idModel = MAX_INT_UNSIGNED_VALUE;
+    }
+  }
+
   private calculateNextId(currentMax: number): number {
     return currentMax < this.customStartingId ? this.customStartingId : currentMax + 1;
   }