Snygga till redigering av noter lite

Author: stafak

src/components/edit/blocks/EditBelopprad.vue

@@ -27,6 +27,9 @@ const props = defineProps<{
   /** Huruvida borttag ska tillåtas. */
   allowDelete?: boolean;
 
+  /** Huruvida beloppraden ska vara mindre än en typisk belopprad. */
+  small?: boolean;
+
   /** Antal tidigare räkenskapsår som ska visas för belopprader där man kan jämföra mellan år. */
   comparableNumPreviousYears?: number;
 
@@ -78,6 +81,7 @@ const taxonomyItem = computed(() => {
       :belopprad="belopprad"
       :comparable-num-previous-years="comparableNumPreviousYears || 0"
       :multiline="stringMultiline || false"
+      :small="small || false"
       :taxonomy-manager="taxonomyManager"
       @delete="emit('delete')"
     />

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

@@ -19,6 +19,9 @@ export interface EditBeloppradComparablePropsBase {
   /** Huruvida borttag ska tillåtas. */
   allowDelete: boolean;
 
+  /** Huruvida beloppraden ska vara mindre än en typisk belopprad. */
+  small: boolean;
+
   /** Antal tidigare räkenskapsår som ska visas för jämförelse. */
   numPreviousYears: number;
 
@@ -90,6 +93,7 @@ function onBeforeValueInput(event: InputEvent) {
       <input
         v-if="taxonomyItem.properties.abstract !== 'true'"
         v-model.trim="belopprad.not"
+        :class="{ 'form-control-sm': small }"
         class="form-control"
         maxlength="2"
         type="text"
@@ -106,6 +110,7 @@ function onBeforeValueInput(event: InputEvent) {
         <input
           v-if="taxonomyItem.properties.abstract !== 'true'"
           v-model.trim="belopprad.beloppNuvarandeAr"
+          :class="{ 'form-control-sm': small }"
           :disabled="isSummarad"
           class="form-control"
           type="text"
@@ -124,6 +129,7 @@ function onBeforeValueInput(event: InputEvent) {
         <input
           v-if="taxonomyItem.properties.abstract !== 'true'"
           v-model.trim="belopprad.beloppTidigareAr[i - 1]"
+          :class="{ 'form-control-sm': small }"
           :disabled="isSummarad"
           class="form-control"
           type="text"

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

@@ -85,6 +85,7 @@ watch(
     :is-summarad="taxonomyItem.additionalData.isCalculatedItem"
     :num-previous-years="numPreviousYears"
     :show-balance-sign="showBalanceSign"
+    :small="small"
     :taxonomy-manager="taxonomyManager"
     @delete="emit('delete')"
   />

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

@@ -26,6 +26,7 @@ const belopprad = defineModel<BaseBeloppradComparable>("belopprad", {
     :allow-not="allowNot"
     :belopprad="belopprad"
     :num-previous-years="numPreviousYears"
+    :small="small"
     :taxonomy-manager="taxonomyManager"
     @delete="emit('delete')"
   />

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

@@ -23,6 +23,9 @@ const props = defineProps<{
   /** Huruvida borttag ska tillåtas. */
   allowDelete: boolean;
 
+  /** Huruvida beloppraden ska vara mindre än en typisk belopprad. */
+  small: boolean;
+
   /** Huruvida radbrytningar ska vara tillåtna. */
   multiline: boolean;
 
@@ -104,7 +107,12 @@ const trClasses = computed(() => [
       :colspan="comparableNumPreviousYears + 1"
       class="value-container text-left"
     >
-      <input v-model="belopprad.text" class="form-control" type="text" />
+      <input
+        v-model="belopprad.text"
+        :class="{ 'form-control-sm': small }"
+        class="form-control"
+        type="text"
+      />
     </td>
     <td v-if="allowDelete">
       <BaseEditBeloppradDeleteButton

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

@@ -54,34 +54,54 @@ function deleteInstance(index: number) {
     :key="instans.uuid"
   >
     <td colspan="3">
-      <table class="edit-tuple-instance">
-        <tbody>
-          <EditBelopprad
-            v-for="(
-              instansBelopprad, instansBeloppradIndex
-            ) in instans.belopprader"
-            :key="instansBelopprad.taxonomyItemName"
-            v-model:belopprad="instans.belopprader[instansBeloppradIndex]"
-            v-model:belopprader="instans.belopprader"
-            :comparable-num-previous-years="0"
-            :taxonomy-manager="taxonomyManager"
-          />
-        </tbody>
-      </table>
-    </td>
-    <td>
-      <BaseEditBeloppradDeleteButton @delete="deleteInstance(instansIndex)" />
+      <div
+        :class="{ last: instansIndex === belopprad.instanser.length - 1 }"
+        class="edit-tuple-instance-container"
+      >
+        <table class="edit-tuple-instance">
+          <tbody>
+            <EditBelopprad
+              v-for="(
+                instansBelopprad, instansBeloppradIndex
+              ) in instans.belopprader"
+              :key="instansBelopprad.taxonomyItemName"
+              v-model:belopprad="instans.belopprader[instansBeloppradIndex]"
+              v-model:belopprader="instans.belopprader"
+              :comparable-num-previous-years="0"
+              :taxonomy-manager="taxonomyManager"
+              small
+            />
+          </tbody>
+        </table>
+        <BaseEditBeloppradDeleteButton
+          class="edit-tuple-instance-delete"
+          @delete="deleteInstance(instansIndex)"
+        />
+      </div>
     </td>
   </tr>
 </template>
 
 <style lang="scss" scoped>
-table.edit-tuple-instance {
-  margin-top: 0 !important;
+.edit-tuple-instance-container {
+  display: flex;
   margin-left: 2rem;
+  margin-bottom: 0.5rem;
+
+  &.last {
+    margin-bottom: 1.5rem;
+  }
+
+  table.edit-tuple-instance {
+    margin: 0;
+
+    :deep(td.value-container input) {
+      min-width: 200px !important;
+    }
+  }
 
-  :deep(td.value-container input) {
-    min-width: 200px !important;
+  .edit-tuple-instance-delete {
+    margin: 0.25rem 0;
   }
 }
 </style>

src/components/edit/sections/EditBalansrakning.vue

@@ -53,13 +53,13 @@ const groupedBelopprader = groupPrepopulatedSection(belopprader, groups);
   <div class="accordion">
     <div
       v-for="(group, groupIndex) in groups"
-      :key="groupIndex"
+      :key="group[0].xmlName"
       class="accordion-item"
     >
       <div class="accordion-header">
         <button
-          :aria-controls="`balansrakning-accordion${groupIndex}`"
-          :data-bs-target="`#balansrakning-accordion${groupIndex}`"
+          :aria-controls="`balansrakning-accordion-${group[0].xmlName}`"
+          :data-bs-target="`#balansrakning-accordion-${group[0].xmlName}`"
           aria-expanded="true"
           class="accordion-button collapsed"
           data-bs-toggle="collapse"
@@ -69,7 +69,7 @@ const groupedBelopprader = groupPrepopulatedSection(belopprader, groups);
         </button>
       </div>
       <div
-        :id="`balansrakning-accordion${groupIndex}`"
+        :id="`balansrakning-accordion-${group[0].xmlName}`"
         class="accordion-collapse collapse"
       >
         <div class="accordion-body">

src/components/edit/sections/EditForvaltningsberattelse.vue

@@ -52,13 +52,13 @@ const groupedBelopprader = groupPrepopulatedSection(belopprader, groups);
   <div class="accordion">
     <div
       v-for="(group, groupIndex) in groups"
-      :key="groupIndex"
+      :key="group.xmlName"
       class="accordion-item"
     >
       <div class="accordion-header">
         <button
-          :aria-controls="`forvaltningsberattelse-accordion${groupIndex}`"
-          :data-bs-target="`#forvaltningsberattelse-accordion${groupIndex}`"
+          :aria-controls="`forvaltningsberattelse-accordion-${group.xmlName}`"
+          :data-bs-target="`#forvaltningsberattelse-accordion-${group.xmlName}`"
           aria-expanded="true"
           class="accordion-button collapsed"
           data-bs-toggle="collapse"
@@ -68,7 +68,7 @@ const groupedBelopprader = groupPrepopulatedSection(belopprader, groups);
         </button>
       </div>
       <div
-        :id="`forvaltningsberattelse-accordion${groupIndex}`"
+        :id="`forvaltningsberattelse-accordion-${group.xmlName}`"
         class="accordion-collapse collapse"
       >
         <div class="accordion-body">

src/components/edit/sections/EditNoter.vue

@@ -6,14 +6,18 @@
 
 import { type Arsredovisning } from "@/model/arsredovisning/Arsredovisning.ts";
 import EditBelopprad from "@/components/edit/blocks/EditBelopprad.vue";
-import { createBeloppradInList } from "@/model/arsredovisning/Belopprad.ts";
+import {
+  createBelopprad,
+  createBeloppradInList,
+} from "@/model/arsredovisning/Belopprad.ts";
 import { getTaxonomyManager } from "@/util/TaxonomyManager.ts";
 import { getValueColumnHeaderCell } from "@/util/noterUtils.ts";
 import { usePrepopulateSection } from "@/components/edit/composables/usePrepopulateSection.ts";
 import {
   type TaxonomyItem,
   TaxonomyRootName,
 } from "@/model/taxonomy/TaxonomyItem.ts";
+import BaseEditBeloppradTitle from "@/components/edit/blocks/belopprad/BaseEditBeloppradTitle.vue";
 
 // TaxonomyManager och rader
 const taxonomyManager = await getTaxonomyManager(TaxonomyRootName.NOTER);
@@ -42,78 +46,90 @@ const { prepopulateSection, groupPrepopulatedSection } = usePrepopulateSection({
   maxNumPreviousYears: 1,
 });
 
+const groupsOfGroups = availableTaxonomyItems.children[0].children;
+
 const belopprader = prepopulateSection();
-const groups = [
-  availableTaxonomyItems.children[0].children[0],
-  ...availableTaxonomyItems.children[0].children
-    .slice(1)
-    .flatMap((c) => c.children),
-];
+const groups = availableTaxonomyItems.children[0].children.flatMap(
+  (c) => c.children,
+);
 const groupedBelopprader = groupPrepopulatedSection(belopprader, groups);
 </script>
 
 <template>
-  <div class="accordion">
-    <div
-      v-for="(group, groupIndex) in groups"
-      :key="groupIndex"
-      class="accordion-item"
-    >
-      <div class="accordion-header">
-        <button
-          :aria-controls="`noter-accordion${groupIndex}`"
-          :data-bs-target="`#noter-accordion${groupIndex}`"
-          aria-expanded="true"
-          class="accordion-button collapsed"
-          data-bs-toggle="collapse"
-          type="button"
-        >
-          {{ group.additionalData.displayLabel }}
-        </button>
+  <div class="d-flex flex-col gap-4">
+    <div v-for="groupOfGroups in groupsOfGroups" :key="groupOfGroups.xmlName">
+      <div class="mb-2">
+        <BaseEditBeloppradTitle
+          :belopprad="createBelopprad(groupOfGroups)"
+          :taxonomy-manager="taxonomyManager"
+        />
       </div>
-      <div
-        :id="`noter-accordion${groupIndex}`"
-        class="accordion-collapse collapse"
-      >
-        <div class="accordion-body">
-          <table>
-            <thead>
-              <tr>
-                <th scope="col">{{ group.additionalData.displayLabel }}</th>
-                <component
-                  :is="
-                    getValueColumnHeaderCell(
-                      group,
-                      arsredovisning.verksamhetsarNuvarande,
-                    )
-                  "
-                />
-                <component
-                  :is="
-                    getValueColumnHeaderCell(
-                      group,
-                      arsredovisning.verksamhetsarTidigare[0],
-                    )
-                  "
-                  v-if="arsredovisning.verksamhetsarTidigare.length > 0"
-                />
-              </tr>
-            </thead>
-            <tbody>
-              <EditBelopprad
-                v-for="(belopprad, index) in groupedBelopprader[groupIndex]"
-                :key="belopprad.taxonomyItemName"
-                v-model:belopprad="groupedBelopprader[groupIndex][index]"
-                v-model:belopprader="groupedBelopprader[groupIndex]"
-                :comparable-num-previous-years="
-                  Math.min(arsredovisning.verksamhetsarTidigare.length, 1)
-                "
-                :string-minimum-level="1"
-                :taxonomy-manager="taxonomyManager"
-                string-multiline
-              />
-            </tbody>
-          </table>
+
+      <div class="accordion">
+        <div
+          v-for="[groupIndex, group] in [...groups.entries()].filter(([, g]) =>
+            groupOfGroups.children.includes(g),
+          )"
+          :key="group.xmlName"
+          class="accordion-item"
+        >
+          <div class="accordion-header">
+            <button
+              :aria-controls="`noter-accordion-${group.xmlName}`"
+              :data-bs-target="`#noter-accordion-${group.xmlName}`"
+              aria-expanded="true"
+              class="accordion-button collapsed"
+              data-bs-toggle="collapse"
+              type="button"
+            >
+              {{ group.additionalData.displayLabel }}
+            </button>
+          </div>
+          <div
+            :id="`noter-accordion-${group.xmlName}`"
+            class="accordion-collapse collapse"
+          >
+            <div class="accordion-body">
+              <table>
+                <thead v-if="groupedBelopprader[groupIndex].length > 1">
+                  <tr>
+                    <th scope="col">{{ group.additionalData.displayLabel }}</th>
+                    <component
+                      :is="
+                        getValueColumnHeaderCell(
+                          group,
+                          arsredovisning.verksamhetsarNuvarande,
+                        )
+                      "
+                    />
+                    <component
+                      :is="
+                        getValueColumnHeaderCell(
+                          group,
+                          arsredovisning.verksamhetsarTidigare[0],
+                        )
+                      "
+                      v-if="arsredovisning.verksamhetsarTidigare.length > 0"
+                    />
+                  </tr>
+                </thead>
+                <tbody>
+                  <EditBelopprad
+                    v-for="(belopprad, index) in groupedBelopprader[groupIndex]"
+                    :key="belopprad.taxonomyItemName"
+                    v-model:belopprad="groupedBelopprader[groupIndex][index]"
+                    v-model:belopprader="groupedBelopprader[groupIndex]"
+                    :comparable-num-previous-years="
+                      Math.min(arsredovisning.verksamhetsarTidigare.length, 1)
+                    "
+                    :string-minimum-level="1"
+                    :taxonomy-manager="taxonomyManager"
+                    string-multiline
+                  />
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
       </div>
     </div>