Formatera organisationsnummer automatiskt

Author: stafak

src/components/edit/EditNewArsredovisningModal.vue

@@ -17,6 +17,7 @@ import createClient from "openapi-fetch";
 import type { paths } from "@/openapi/gredor-backend-v1";
 import { getConfigValue } from "@/util/configUtils.ts";
 import type { ComponentExposed } from "vue-component-type-helpers";
+import { tryFormatOrgnr } from "@/util/formatUtils.ts";
 
 const emit = defineEmits<{
   /** Triggas när användaren är färdig med flödet. */
@@ -106,7 +107,7 @@ async function fetchRecords() {
   // TODO: Om krav på revisionsberättelse, visa meddelande
 }
 
-const orgnrRegex = /^\d{6}-\d{4}$/;
+const orgnrRegex = /^\d{6}-?\d{4}$/;
 </script>
 
 <template>
@@ -123,14 +124,18 @@ const orgnrRegex = /^\d{6}-\d{4}$/;
         företagets namn och senaste räkenskapsår från Bolagsverket.
       </p>
 
-      <p>Format: XXXXXX-XXXX (10 siffror med bindestreck)</p>
-
       <input
         v-model.trim="arsredovisning.foretagsinformation.organisationsnummer"
         :disabled="busy"
         maxlength="11"
         placeholder="Skriv företagets organisationsnummer här…"
         type="text"
+        @input="
+          arsredovisning.foretagsinformation.organisationsnummer =
+            tryFormatOrgnr(
+              arsredovisning.foretagsinformation.organisationsnummer,
+            )
+        "
       />
 
       <h5>Bokföringsimport (frivilligt)</h5>

src/components/edit/sections/EditGrunduppgifter.vue

@@ -7,6 +7,7 @@
 import { type Arsredovisning } from "@/model/arsredovisning/Arsredovisning.ts";
 import { REDOVISNINGSVALUTOR } from "@/data/redovisningsvalutor.ts";
 import { FORFATTARE_TYPER } from "@/data/forfattare.ts";
+import { tryFormatOrgnr } from "@/util/formatUtils.ts";
 
 /** Årsredovisningen som innehåller grunduppgifterna. */
 defineModel<Arsredovisning>("arsredovisning", {
@@ -32,6 +33,12 @@ defineModel<Arsredovisning>("arsredovisning", {
         v-model.trim="arsredovisning.foretagsinformation.organisationsnummer"
         class="input-field"
         type="text"
+        @input="
+          arsredovisning.foretagsinformation.organisationsnummer =
+            tryFormatOrgnr(
+              arsredovisning.foretagsinformation.organisationsnummer,
+            )
+        "
       />
     </div>
   </div>

src/util/formatUtils.ts

@@ -45,3 +45,18 @@ export function formatDateForFlerarsoversikt(balanceDateStr: string): string {
   // Annars, returnera år och månad
   return `${year}-${month.toString().padStart(2, "0")}`;
 }
+
+/**
+ * Formatera ett organisationsnummer om möjligt (lägg till bindestreck). Indatat
+ * formateras endast om det är en sträng som endast innehåller tio siffror.
+ *
+ * @param orgnr - Organisationsnumret att försöka formatera
+ * @returns Det formaterade organisationsnumret om det formaterades, annars det
+ * värde som skickades in i funktionen
+ */
+export function tryFormatOrgnr(orgnr: string) {
+  if (/^\d{10}$/.test(orgnr)) {
+    return orgnr.substring(0, 6) + "-" + orgnr.substring(6);
+  }
+  return orgnr;
+}