Ny modal för att redigera förändringar i eget kapital

Author: stafak

src/App.vue

@@ -311,7 +311,7 @@ main {
     /* För skuggan */
     padding: 0 0.5rem 0.5rem 0;
 
-    @media screen and (max-width: 1599px) {
+    @media screen and (max-width: 1600px) {
       width: calc(210mm * 0.76);
       scale: 0.75;
       transform-origin: top left;

src/components/common/CommonModal.vue

@@ -70,8 +70,13 @@ onMounted(() => {
 
 .modal-body {
   display: flex;
+  max-width: 98vw;
   max-height: 75vh;
   overflow-y: auto;
   padding-bottom: 2rem;
 }
+
+h3 {
+  font-size: 1.5rem;
+}
 </style>

src/components/common/CommonModalSubtitle.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+/**
+ * En generell komponent för modala fönsters underrubriker.
+ */
+</script>
+
+<template>
+  <h4>
+    <slot />
+  </h4>
+</template>
+
+<style lang="scss" scoped>
+h4 {
+  font-size: 1.25rem;
+}
+</style>

src/components/edit/EditNewArsredovisningModal.vue

@@ -147,8 +147,9 @@ const orgnrRegex = /^\d{6}-?\d{4}$/;
       </p>
 
       <p>
-        Tänk på att kontrollera i efterhand att fälten blev korrekt ifyllda, och
-        att själv fylla i de uppgifter som återstår (bland annat noter).
+        Tänk på att kontrollera efteråt att fälten blev korrekt ifyllda, och att
+        själv fylla i de uppgifter som återstår – oftast delar av
+        förvaltningsberättelsen och noterna.
       </p>
 
       <CommonFileInput

src/components/edit/blocks/belopprad/EditBeloppradString.vue

@@ -59,7 +59,7 @@ const trClasses = computed(() => [
 <template>
   <template v-if="multiline && !isAbstract">
     <tr :class="trClasses">
-      <td :colspan="comparableNumPreviousYears + 2">
+      <td :colspan="comparableNumPreviousYears + (allowDelete ? 2 : 1)">
         <BaseEditBeloppradTitle
           :belopprad="belopprad"
           :taxonomy-manager="taxonomyManager"

src/components/edit/sections/EditForvaltningsberattelse.vue

@@ -13,6 +13,10 @@ import EditForvaltningsberattelseForandringar from "@/components/edit/sections/f
 import BaseEditBeloppradTitle from "@/components/edit/blocks/belopprad/BaseEditBeloppradTitle.vue";
 import { usePrepopulateSection } from "@/components/edit/composables/usePrepopulateSection.ts";
 import { TaxonomyRootName } from "@/model/taxonomy/TaxonomyItem.ts";
+import CommonModal from "@/components/common/CommonModal.vue";
+import { useTemplateRef } from "vue";
+import type { ComponentExposed } from "vue-component-type-helpers";
+import CommonWizardButtons from "@/components/common/CommonWizardButtons.vue";
 
 // TaxonomyManager och rader
 const taxonomyManager = await getTaxonomyManager(
@@ -26,6 +30,10 @@ const arsredovisning = defineModel<Arsredovisning>("arsredovisning", {
   required: true,
 });
 
+// Modal för förändringar i eget kapital
+const forandringarModal =
+  useTemplateRef<ComponentExposed<typeof CommonModal>>("forandringarModal");
+
 // Förpopulera rader
 const { prepopulateSection, groupPrepopulatedSection } = usePrepopulateSection({
   taxonomyManager,
@@ -74,16 +82,14 @@ const groupedBelopprader = groupPrepopulatedSection(belopprader, groups);
             "
             :taxonomy-manager="taxonomyManager"
           />
-          <EditForvaltningsberattelseForandringar
+          <template
             v-else-if="group.xmlName === 'se-gen-base:ForandringEgetKapital'"
-            :arsredovisning="arsredovisning"
-            :group-taxonomy-item="
-              availableTaxonomyItems.childrenFlat.find(
-                (item) => item.xmlName === 'se-gen-base:ForandringEgetKapital',
-              )!
-            "
-            :taxonomy-manager="taxonomyManager"
-          />
+          >
+            <!-- Vi har denna som en modal pga att den blir för bred annars -->
+            <button class="btn btn-primary" @click="forandringarModal?.show()">
+              Visa tabell
+            </button>
+          </template>
           <table v-else>
             <thead v-if="groupedBelopprader[groupIndex].length > 1">
               <tr>
@@ -112,6 +118,27 @@ const groupedBelopprader = groupPrepopulatedSection(belopprader, groups);
       </div>
     </div>
   </div>
+
+  <CommonModal
+    id="edit-forvaltningsberattelse-forandringar-modal"
+    ref="forandringarModal"
+    title="Förändringar i eget kapital"
+  >
+    <EditForvaltningsberattelseForandringar
+      :arsredovisning="arsredovisning"
+      :group-taxonomy-item="
+        availableTaxonomyItems.childrenFlat.find(
+          (item) => item.xmlName === 'se-gen-base:ForandringEgetKapital',
+        )!
+      "
+      :taxonomy-manager="taxonomyManager"
+    />
+    <CommonWizardButtons
+      next-button-text="Klar"
+      previous-button-hidden
+      @go-to-next-step="forandringarModal?.hide()"
+    />
+  </CommonModal>
 </template>
 
 <style lang="scss" scoped></style>

src/components/edit/sections/forvaltningsberattelse/EditForvaltningsberattelseForandringar.vue

@@ -7,16 +7,9 @@
 import { TaxonomyManager } from "@/util/TaxonomyManager.ts";
 import type { Arsredovisning } from "@/model/arsredovisning/Arsredovisning.ts";
 import { computed } from "vue";
-import {
-  createBelopprad,
-  createBeloppradInList,
-  deleteBelopprad,
-  isBeloppradInTaxonomyItemList,
-} from "@/model/arsredovisning/Belopprad.ts";
-import BaseEditBeloppradDeleteButton from "@/components/edit/blocks/belopprad/BaseEditBeloppradDeleteButton.vue";
 import { getForandringarAsTable } from "@/util/forandringarUtils.ts";
-import BaseEditBeloppradTitle from "@/components/edit/blocks/belopprad/BaseEditBeloppradTitle.vue";
 import type { TaxonomyItem } from "@/model/taxonomy/TaxonomyItem.ts";
+import { usePrepopulateSection } from "@/components/edit/composables/usePrepopulateSection.ts";
 
 const props = defineProps<{
   /** TaxonomyManager för att hantera taxonomiobjekt i förändringar i eget kapital. */
@@ -36,15 +29,15 @@ const groupTaxonomyItemFull = computed(() =>
     "se-gen-base:ForandringEgetKapitalAbstract",
   ),
 );
+const { prepopulateSection } = usePrepopulateSection({
+  taxonomyManager: props.taxonomyManager,
+  availableTaxonomyItems: props.groupTaxonomyItem,
+  arsredovisning: arsredovisning,
+  sectionName: "forvaltningsberattelse",
+  maxNumPreviousYears: 0,
+});
 
-const belopprader = computed(() =>
-  arsredovisning.value.forvaltningsberattelse.filter((belopprad) =>
-    isBeloppradInTaxonomyItemList(
-      groupTaxonomyItemFull.value.childrenFlat,
-      belopprad,
-    ),
-  ),
-);
+const belopprader = prepopulateSection();
 
 const forandringarTable = computed(() =>
   getForandringarAsTable(
@@ -53,31 +46,13 @@ const forandringarTable = computed(() =>
     belopprader.value,
   ),
 );
-
-const overgangK2AbstractItem = props.taxonomyManager.getItemByName(
-  "se-gen-base:ForandringIngaendeEgetKapitalOvergangK2Abstract",
-);
-
-// Hjälpfunktioner
-function addBelopprad(taxonomyItem: TaxonomyItem) {
-  createBeloppradInList(
-    props.taxonomyManager,
-    arsredovisning.value.forvaltningsberattelse,
-    taxonomyItem,
-  );
-}
 </script>
 
 <template>
-  <table>
+  <table class="edit-forandringar-table">
     <thead>
       <tr>
-        <th scope="col">
-          <BaseEditBeloppradTitle
-            :belopprad="createBelopprad(groupTaxonomyItem)"
-            :taxonomy-manager="taxonomyManager"
-          />
-        </th>
+        <th></th>
         <th
           v-for="columnName in forandringarTable.columnNames"
           :key="columnName"
@@ -91,11 +66,14 @@ function addBelopprad(taxonomyItem: TaxonomyItem) {
     <tbody>
       <tr v-for="(row, rowIndex) in forandringarTable.table" :key="rowIndex">
         <td>
-          {{ forandringarTable.rowNames[rowIndex] }}
+          <div class="row-label">
+            {{ forandringarTable.rowNames[rowIndex] }}
+          </div>
         </td>
         <td
           v-for="(cell, columnIndex) in row"
           :key="columnIndex"
+          :class="{ 'empty-container': cell == null }"
           class="value-container"
         >
           <div v-if="cell != null" class="value-contents">
@@ -104,55 +82,92 @@ function addBelopprad(taxonomyItem: TaxonomyItem) {
               class="form-control"
               type="text"
             />
-            <BaseEditBeloppradDeleteButton
-              @delete="
-                () =>
-                  deleteBelopprad(
-                    taxonomyManager,
-                    cell.belopprad,
-                    arsredovisning.forvaltningsberattelse,
-                  )
-              "
-            />
           </div>
         </td>
       </tr>
     </tbody>
   </table>
-
-  <!--
-  Vi vill inte ha med "Specifikation av förändringar i ingående eget kapital vid övergång till K2",
-  det är extremt osannolikt att någon kommer ha nytta av den numera så det skräpar bara ner.
-  -->
-  <EditItemSelector
-    :taxonomy-items="[
-      groupTaxonomyItemFull,
-      ...groupTaxonomyItemFull.childrenFlat.filter(
-        (child) =>
-          child.xmlName !== overgangK2AbstractItem.xmlName &&
-          !overgangK2AbstractItem.childrenFlat.includes(child),
-      ),
-    ]"
-    @add-belopprad="addBelopprad"
-  />
 </template>
 
 <style lang="scss" scoped>
 @import "@/assets/extendables.scss";
 
-.value-contents {
-  display: flex;
+@mixin auto-font-sizes {
+  @media (max-width: 1500px) {
+    font-size: 0.7rem;
+  }
+
+  @media (min-width: 1500px) and (max-width: 1700px) {
+    font-size: 0.8rem;
+  }
+
+  @media (min-width: 1700px) and (max-width: 1900px) {
+    font-size: 0.9rem;
+  }
+}
+
+table.edit-forandringar-table {
+  width: min-content;
+
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    position: sticky;
+    top: -1rem;
+    background: white;
+  }
+
+  th,
+  td {
+    @include auto-font-sizes;
+
+    border: 1px solid lightgray;
+
+    &:not(:last-child) {
+      border-right: none;
+    }
+  }
+
+  tr:not(:last-child) {
+    td {
+      border-bottom: none;
+    }
+  }
+
+  th {
+    padding-left: 1rem;
+    border-bottom-width: 4px;
+  }
+
+  td {
+    .row-label {
+      width: max-content;
+    }
+
+    &.value-container {
+      &.empty-container {
+        background: lightgray;
+      }
+
+      .value-contents input {
+        width: 100%;
+
+        &.form-control {
+          @extend %text-input;
+          @include auto-font-sizes;
 
-  input {
-    flex: 1;
-    margin-right: 0.25rem;
-    min-width: 100px !important;
+          @media (max-width: 1500px) {
+            min-width: 80px;
+          }
 
-    &.form-control {
-      @extend %text-input;
+          @media (min-width: 1500px) and (max-width: 1700px) {
+            min-width: 100px;
+          }
 
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
+          padding: 0.25rem 0.5rem;
+        }
+      }
     }
   }
 }

src/components/tools/finish/common/steps/CommonBolagsverketAgreement.vue

@@ -14,6 +14,7 @@ import CommonWizardButtons, {
   type CommonWizardButtonsEmits,
 } from "@/components/common/CommonWizardButtons.vue";
 import type { CommonStepProps } from "@/components/tools/finish/common/steps/CommonStepProps.ts";
+import CommonModalSubtitle from "@/components/common/CommonModalSubtitle.vue";
 
 const props = defineProps<
   CommonStepProps & {
@@ -80,9 +81,9 @@ onMounted(() => {
 
 <template>
   <div>
-    <h4>
+    <CommonModalSubtitle>
       Steg {{ currentStepNumber }}/{{ numSteps }}: Information från Bolagsverket
-    </h4>
+    </CommonModalSubtitle>
 
     <div v-if="loading">Laddar…</div>
 

src/components/tools/finish/common/steps/CommonValidateReport.vue

@@ -18,6 +18,7 @@ import CommonWizardButtons, {
   type CommonWizardButtonsEmits,
 } from "@/components/common/CommonWizardButtons.vue";
 import type { CommonStepProps } from "@/components/tools/finish/common/steps/CommonStepProps.ts";
+import CommonModalSubtitle from "@/components/common/CommonModalSubtitle.vue";
 
 const props = defineProps<
   CommonStepProps & {
@@ -86,9 +87,9 @@ onMounted(() => {
 
 <template>
   <div>
-    <h4>
+    <CommonModalSubtitle>
       Steg {{ currentStepNumber }}/{{ numSteps }}: Bolagsverkets kontroller
-    </h4>
+    </CommonModalSubtitle>
 
     <div v-if="loading">Kontrollerar – det kan ta några sekunder…</div>