chore(): started fixing #632

baloise · Jun 16, 2022 · 4c2def0 · 4c2def0
1 parent 72dc328
commit 4c2def0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/packages/components/src/components/form/bal-input/bal-input.tsx b/packages/components/src/components/form/bal-input/bal-input.tsx
@@ -339,7 +339,25 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
           break
         }
         case 'claim-number': {
-          this.inputValue = input.value.replace(/\D/g, '')
+          const inputParts = [
+            input.value.substring(0, MAX_LENGTH_CLAIM_NUMBER - 1),
+            input.value.substring(MAX_LENGTH_CLAIM_NUMBER - 1, MAX_LENGTH_CLAIM_NUMBER),
+            input.value.substring(MAX_LENGTH_CLAIM_NUMBER),
+          ].filter(val => val.length > 0)
+          switch (inputParts.length) {
+            case 1:
+              this.inputValue = `${inputParts[0].replace(/\D/g, '')}`
+              break
+            case 2:
+              this.inputValue = `${inputParts[0].replace(/\D/g, '')}${inputParts[1]}`
+              break
+            default:
+              this.inputValue = `${inputParts[0].replace(/\D/g, '')}${inputParts[1]}${inputParts[2]?.replace(
+                /\D/g,
+                '',
+              )}`
+          }
+          //}
           if (this.inputValue.length > MAX_LENGTH_CLAIM_NUMBER) {
             this.inputValue = this.inputValue.substring(0, MAX_LENGTH_CLAIM_NUMBER)
           }
@@ -371,17 +389,30 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
     }
   }
 
-  private getAllowedKeys() {
+  private getMaskAllowedKeys() {
     return [...NUMBER_KEYS, ...ACTION_KEYS]
   }
 
   private onKeydown = (event: KeyboardEvent) => {
+    console.log(
+      'onKeyDown: ',
+      event.key,
+      this.mask === 'claim-number' && event.key === 'X' && this.inputValue?.length === MAX_LENGTH_CLAIM_NUMBER - 1,
+    )
+    console.log('onKeyDown inputValue: ', this.inputValue)
     if (this.mask !== undefined && !isNil(event) && !isCtrlOrCommandKey(event)) {
-      if (!this.getAllowedKeys().includes(event.key)) {
+      if (
+        !(
+          this.getMaskAllowedKeys().includes(event.key) ||
+          (this.mask === 'claim-number' && event.key === 'X' && this.inputValue?.length === MAX_LENGTH_CLAIM_NUMBER - 1)
+        )
+      ) {
+        console.log('stopped triggering')
         // do not trigger next event -> on input
         return stopEventBubbling(event)
       }
     }
+    console.log('passed x')
   }
 
   private onClick = (event: MouseEvent) => inputHandleClick(this, event)

diff --git a/packages/components/src/components/form/bal-input/test/bal-input-util.spec.ts b/packages/components/src/components/form/bal-input/test/bal-input-util.spec.ts
@@ -26,6 +26,10 @@ describe('bal-input-util testing:', () => {
       const result = formatClaim('730012171699')
       expect(result).toStrictEqual('73/001217/16.9')
     })
+    test('claim number with a sign postfix correctly X', () => {
+      const result = formatClaim('7300772816X')
+      expect(result).toStrictEqual('73/001217/16.X')
+    })
   })
   describe('formatOffer', () => {
     test('full entry:', () => {

diff --git a/packages/components/src/stories/contributors.md b/packages/components/src/stories/contributors.md
@@ -83,6 +83,12 @@
     </h2>
     <h4>svene</h4>
   </a>
+  <a href="https://github.com/m4rc0z" class="feature">
+    <h2>
+      <img src="https://avatars.githubusercontent.com/u/20516386?v=4" alt="m4rc0z" style="width: 64px;">
+    </h2>
+    <h4>m4rc0z</h4>
+  </a>
   <a href="https://github.com/NoraKurzbein" class="feature">
     <h2>
       <img src="https://avatars.githubusercontent.com/u/16286177?v=4" alt="NoraKurzbein" style="width: 64px;">
@@ -95,12 +101,6 @@
     </h2>
     <h4>Flapmax</h4>
   </a>
-  <a href="https://github.com/m4rc0z" class="feature">
-    <h2>
-      <img src="https://avatars.githubusercontent.com/u/20516386?v=4" alt="m4rc0z" style="width: 64px;">
-    </h2>
-    <h4>m4rc0z</h4>
-  </a>
   <a href="https://github.com/aymenfurter" class="feature">
     <h2>
       <img src="https://avatars.githubusercontent.com/u/20464460?v=4" alt="aymenfurter" style="width: 64px;">