Gör det möjligt att lägga till en logotyp i årsredovisningen

cypress/e2e/editing.cy.ts

@@ -788,18 +788,18 @@ it("can create and edit manually", function () {
   cy.get("#verksamhetsarTidigareAktivt3").check();
   cy.get("#verksamhetsarTidigareAktivt2").uncheck();
   cy.get("#verksamhetsarTidigareAktivt3").check();
-  cy.get("div:nth-child(6) #startdatumTidigare").click();
-  cy.get("div:nth-child(6) #startdatumTidigare").clear();
-  cy.get("div:nth-child(6) #startdatumTidigare").type("2023-01-01");
-  cy.get("div:nth-child(6) #slutdatumTidigare").click();
-  cy.get("div:nth-child(6) #slutdatumTidigare").clear();
-  cy.get("div:nth-child(6) #slutdatumTidigare").type("2023-12-31");
-  cy.get("div:nth-child(7) #startdatumTidigare").click();
-  cy.get("div:nth-child(7) #startdatumTidigare").clear();
-  cy.get("div:nth-child(7) #slutdatumTidigare").click();
-  cy.get("div:nth-child(7) #startdatumTidigare").type("2022-01-01");
-  cy.get("div:nth-child(7) #slutdatumTidigare").clear();
-  cy.get("div:nth-child(7) #slutdatumTidigare").type("2022-12-31");
+  cy.get("#startdatumTidigare2").click();
+  cy.get("#startdatumTidigare2").clear();
+  cy.get("#startdatumTidigare2").type("2023-01-01");
+  cy.get("#slutdatumTidigare2").click();
+  cy.get("#slutdatumTidigare2").clear();
+  cy.get("#slutdatumTidigare2").type("2023-12-31");
+  cy.get("#startdatumTidigare3").click();
+  cy.get("#startdatumTidigare3").clear();
+  cy.get("#slutdatumTidigare3").click();
+  cy.get("#startdatumTidigare3").type("2022-01-01");
+  cy.get("#slutdatumTidigare3").clear();
+  cy.get("#slutdatumTidigare3").type("2022-12-31");
   cy.get(
     "#arsredovisning-for-export div:nth-child(1) > table > thead > tr > th:nth-child(2)",
   ).should("have.text", "2025");

cypress/e2e/logo.cy.ts

@@ -0,0 +1,64 @@
+describe("logo", () => {
+  it("can be added", () => {
+    cy.viewport(1400, 960);
+
+    cy.visit("http://localhost:4173", {
+      onBeforeLoad(win) {
+        win.localStorage.setItem("AppShowFirstLaunchScreen", "false");
+      },
+    });
+
+    cy.get("#editor button.btn").click();
+    cy.get('[data-testid="request-open-file-input"]').selectFile(
+      "cypress/fixtures/input/logo/logo-valid.png",
+      { force: true },
+    );
+
+    cy.get("#editor img.logo").should("be.visible");
+    cy.get("#arsredovisning-for-export img.logo.right").should("be.visible");
+    cy.get("#editor div.editor > div:nth-child(2)").click();
+
+    cy.get("#logotyp-placering").select("topp");
+    cy.get("#arsredovisning-for-export img.logo.top").should("be.visible");
+  });
+
+  it("is rejected if file too large", () => {
+    cy.viewport(1400, 960);
+
+    cy.visit("http://localhost:4173", {
+      onBeforeLoad(win) {
+        win.localStorage.setItem("AppShowFirstLaunchScreen", "false");
+      },
+    });
+
+    cy.get("#editor button.btn").click();
+    cy.get('[data-testid="request-open-file-input"]').selectFile(
+      "cypress/fixtures/input/logo/logo-filetoolarge.png",
+      { force: true },
+    );
+
+    cy.get("div.message-modal-content p").should(
+      "have.text",
+      "Logotypen får inte vara större än 512 kB.",
+    );
+    cy.get('[data-testid="wizard-next-button"]').click();
+
+    cy.get("#editor img.logo").should("not.exist");
+    cy.get("#arsredovisning-for-export img.logo.right").should("not.exist");
+  });
+
+  it("shows up from loaded files", () => {
+    cy.viewport(1400, 960);
+
+    cy.visit("http://localhost:4173");
+
+    cy.get(
+      '[data-testid="first-launch-screen-open-arsredovisning-button"]',
+    ).click();
+    cy.get('[data-testid="request-open-file-input"]').selectFile(
+      "cypress/fixtures/input/gredor/TestfilD.gredorfardig",
+      { force: true },
+    );
+    cy.get("#arsredovisning-for-export img.logo.left").should("be.visible");
+  });
+});

cypress/e2e/send.cy.ts

@@ -99,7 +99,7 @@ describe("go through send wizard", () => {
     cy.wait(1000); // Behövs för att input-fält inte ska bete sig knasigt
 
     // Steg 1 - Ladda upp fil
-    cy.get(".drop-zone").selectFile(
+    cy.get('[data-testid="send-wizard-gredor-file-input"]').selectFile(
       `cypress/fixtures/input/gredor/TestfilC.gredorfardig`,
       { action: "drag-drop" },
     );

cypress/e2e/sieimport.cy.ts

@@ -44,9 +44,12 @@ describe("importing SIE files", () => {
     cy.get('[data-testid="new-arsredovisning-modal-orgnr"]').type(
       "556002-1361",
     );
-    cy.get(".drop-zone").selectFile(`cypress/fixtures/input/sie/SIETest.se`, {
-      action: "drag-drop",
-    });
+    cy.get('[data-testid="new-arsredovisning-sie-file-input"]').selectFile(
+      `cypress/fixtures/input/sie/SIETest.se`,
+      {
+        action: "drag-drop",
+      },
+    );
     cy.get("div.message-modal-content p:nth-child(2)").should(
       "have.text",
       'Belopprad "Resultat efter finansiella poster" har avrundningsfel. Du kan behöva justera detta manuellt.',

cypress/e2e/xbrloutput.cy.ts

@@ -83,7 +83,7 @@ describe("validate generated XBRL data", () => {
         cy.wait(1000); // Behövs för att input-fält inte ska bete sig knasigt
 
         // Steg 1 - Ladda upp fil
-        cy.get(".drop-zone").selectFile(
+        cy.get('[data-testid="send-wizard-gredor-file-input"]').selectFile(
           `cypress/fixtures/input/gredor/${testFileName}.gredorfardig`,
           { action: "drag-drop" },
         );

cypress/fixtures/input/gredor/README.md

@@ -58,7 +58,7 @@ Innehåller:
 ## TestfilD
 
 Testfil med alla fält ifyllda. Värdena går inte ihop logiskt utan detta är bara
-till för regressionstestning.
+till för regressionstestning. Innehåller även logotyp.
 
 
 ## TestfilE

src/assets/render.scss

@@ -22,6 +22,7 @@
   width: 100%;
   font-family: "EB Garamond", serif;
   padding: 1.25rem;
+  line-height: 1.2;
 
   @media screen {
     // För att det ska bli snyggt när årsredovisningen visas i Bolagsverkets

src/components/common/CommonFileInput.vue

@@ -19,6 +19,9 @@ const props = defineProps<{
    * fil. */
   disabled?: boolean;
 
+  /** Huruvida namnet på den valda filen ska döljas. */
+  hideSelectedFileName?: boolean;
+
   /** Skriver över texten "Dra och släpp din .filtyp-fil här" med det angivna */
   dragAndDropTextOverride?: string;
 }>();
@@ -60,7 +63,14 @@ function onFilePicked(file: File | null | undefined) {
 </script>
 
 <template>
-  <div ref="dropZoneRef" :class="{ hover: isOverDropZone }" class="drop-zone">
+  <div
+    ref="dropZoneRef"
+    :class="{
+      hover: isOverDropZone,
+      'hide-selected-file-name': hideSelectedFileName,
+    }"
+    class="drop-zone"
+  >
     {{
       dragAndDropTextOverride ??
       `Dra och släpp din ${allowedFileExtensions.join("/")}-fil här`
@@ -72,10 +82,13 @@ function onFilePicked(file: File | null | undefined) {
     >
       Eller tryck här för att välja fil
     </button>
-    <div v-if="filename" class="filename">
-      Vald fil: {{ filename }} <i class="bi bi-check-lg"></i>
-    </div>
-    <div v-else>&nbsp;</div>
+
+    <template v-if="!hideSelectedFileName">
+      <div v-if="filename" class="filename">
+        Vald fil: {{ filename }} <i class="bi bi-check-lg"></i>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </div>
 </template>
 
@@ -97,6 +110,11 @@ function onFilePicked(file: File | null | undefined) {
     background-color: lighten($primary-color, 40%);
   }
 
+  &.hide-selected-file-name {
+    height: 8rem;
+    padding-bottom: 0.5rem;
+  }
+
   .filename {
     padding: 0 $spacing-md;
   }

src/components/edit/EditNewArsredovisningModal.vue

@@ -252,6 +252,7 @@ const orgnrCorrectFormatButInvalidLuhn = computed(
       <CommonFileInput
         :allowed-file-extensions="['.se', '.si', '.sie']"
         :disabled="busy"
+        data-testid="new-arsredovisning-sie-file-input"
         @file-picked="handleSieFile"
       />
     </CommonModalContents>

src/components/edit/sections/EditGrunduppgifter.vue

@@ -8,11 +8,37 @@ import { type Arsredovisning } from "@/model/arsredovisning/Arsredovisning.ts";
 import { REDOVISNINGSVALUTOR } from "@/data/redovisningsvalutor.ts";
 import { AVGIVANDE_TYPER } from "@/data/avgivande.ts";
 import { tryFormatOrgnr } from "@/util/formatUtils.ts";
+import CommonFileInput from "@/components/common/CommonFileInput.vue";
+import { useModalStore } from "@/components/common/composables/useModalStore.ts";
+import CommonDeleteButton from "@/components/common/CommonDeleteButton.vue";
 
 /** Årsredovisningen som innehåller grunduppgifterna. */
-defineModel<Arsredovisning>("arsredovisning", {
+const arsredovisning = defineModel<Arsredovisning>("arsredovisning", {
   required: true,
 });
+
+const { showMessageModal } = useModalStore();
+
+const maxLogoSizeKB = 512;
+
+function onLogoFilePicked(file: File) {
+  if (file.size > maxLogoSizeKB * 1024) {
+    showMessageModal(
+      `Logotypen får inte vara större än ${maxLogoSizeKB} kB.`,
+      "Fel",
+    );
+    return;
+  }
+
+  const fileReader = new FileReader();
+  fileReader.addEventListener("load", () => {
+    if (typeof fileReader.result !== "string") {
+      throw new Error("Unexpected file reader result type");
+    }
+    arsredovisning.value.foretagsinformation.logotyp.base64 = fileReader.result;
+  });
+  fileReader.readAsDataURL(file);
+}
 </script>
 
 <template>
@@ -46,6 +72,52 @@ defineModel<Arsredovisning>("arsredovisning", {
     </div>
   </div>
 
+  <div class="card mb-4 p-4">
+    <div class="mb-3">
+      <label class="form-label"
+        >Logotyp (valfri; max {{ maxLogoSizeKB }} kB):</label
+      >
+      <CommonFileInput
+        v-if="arsredovisning.foretagsinformation.logotyp.base64 == null"
+        :allowed-data-types="['image/png', 'image/jpeg', 'image/gif']"
+        :allowed-file-extensions="['.png', '.jpg', '.jpeg', '.gif']"
+        hide-selected-file-name
+        @file-picked="onLogoFilePicked"
+      />
+      <div v-else class="d-flex justify-content-between">
+        <div class="logo-container">
+          <img
+            :src="arsredovisning.foretagsinformation.logotyp.base64"
+            alt="Logotyp"
+            class="logo"
+          />
+        </div>
+        <CommonDeleteButton
+          description="Ta bort logotyp"
+          @delete="
+            () => {
+              arsredovisning.foretagsinformation.logotyp.base64 = null;
+            }
+          "
+        />
+      </div>
+    </div>
+    <div v-if="arsredovisning.foretagsinformation.logotyp.base64" class="mb-3">
+      <label class="form-label" for="logotyp-placering"
+        >Placering av logotyp:</label
+      >
+      <select
+        id="logotyp-placering"
+        v-model="arsredovisning.foretagsinformation.logotyp.placering"
+        class="form-select"
+      >
+        <option value="vänster">Vänster</option>
+        <option value="höger">Höger</option>
+        <option value="topp">Topp</option>
+      </select>
+    </div>
+  </div>
+
   <div class="card mb-4 p-4">
     <div class="mb-3">
       <label class="form-label" for="avgivande"
@@ -86,7 +158,10 @@ defineModel<Arsredovisning>("arsredovisning", {
     </div>
   </div>
 
-  <div class="card mb-4 p-4">
+  <div
+    class="card mb-4 p-4"
+    data-testid="edit-grunduppgifter-rakenskapsar-nuvarande"
+  >
     <div class="mb-3">
       <label class="form-label" for="startdatumNuvarande">
         Startdatum räkenskapsår för årsredovisningen:
@@ -115,10 +190,16 @@ defineModel<Arsredovisning>("arsredovisning", {
     </div>
   </div>
 
-  <div v-for="i in 3" :key="i" :class="{ 'mb-4': i < 3 }" class="card p-4">
+  <div
+    v-for="i in 3"
+    :key="i"
+    :class="{ 'mb-4': i < 3 }"
+    :data-testid="`edit-grunduppgifter-rakenskapsar-nuvarande-${i}`"
+    class="card p-4"
+  >
     <div class="form-check mb-3">
       <input
-        :id="'verksamhetsarTidigareAktivt' + i"
+        :id="`verksamhetsarTidigareAktivt${i}`"
         :checked="arsredovisning.verksamhetsarTidigare[i - 1] != null"
         class="form-check-input"
         type="checkbox"
@@ -139,30 +220,30 @@ defineModel<Arsredovisning>("arsredovisning", {
           }
         "
       />
-      <label :for="'verksamhetsarTidigareAktivt' + i" class="form-check-label">
+      <label :for="`verksamhetsarTidigareAktivt${i}`" class="form-check-label">
         Verksamheten existerade {{ i }} år före årsredovisningens räkenskapsår
       </label>
     </div>
     <template v-if="arsredovisning.verksamhetsarTidigare.length > i - 1">
       <div class="mb-3">
-        <label class="form-label" for="startdatumTidigare"
+        <label :for="`startdatumTidigare${i}`" class="form-label"
           >Startdatum tidigare räkenskapsår, {{ i }} år före årsredovisningens
           räkenskapsår:</label
         >
         <input
-          id="startdatumTidigare"
+          :id="`startdatumTidigare${i}`"
           v-model.trim="arsredovisning.verksamhetsarTidigare[i - 1].startdatum"
           class="form-control"
           type="date"
         />
       </div>
       <div class="mb-3">
-        <label class="form-label" for="slutdatumTidigare"
+        <label :for="`slutdatumTidigare${i}`" class="form-label"
           >Slutdatum tidigare räkenskapsår, {{ i }} år före årsredovisningens
           räkenskapsår:</label
         >
         <input
-          id="slutdatumTidigare"
+          :id="`slutdatumTidigare${i}`"
           v-model.trim="arsredovisning.verksamhetsarTidigare[i - 1].slutdatum"
           class="form-control"
           type="date"
@@ -172,4 +253,12 @@ defineModel<Arsredovisning>("arsredovisning", {
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.logo-container {
+  border: 1px solid black;
+
+  .logo {
+    height: 2.48rem; // Matcha rendering
+  }
+}
+</style>