"Refactor VehiclesPagination.vue: consolidate pagination logic into new TableLabeledPagination component, remove unused imports, and simplify VehiclesTable template structure for improved maintainability and readability."

src/components/displays/pagination/TableLabeledPagination.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { defineProps, ref } from 'vue';
+import {
+  isLoading,
+  loadList,
+  metaCurrentPage,
+  metaItemsPerPage,
+  metaTotalItems,
+  setMetaItemsPerPage,
+  setPage,
+} from "@/components/pagination/paginatedList.vue";
+import PaginationDisplayGeneralSearchReload
+  from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
+import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
+import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+});
+const isSmall = ref(window.innerWidth < 1024);
+</script>
+
+<template>
+  <div>
+    <!-- Label -->
+    <h2 class="subtitle is-5 mb-4">{{ props.label }}</h2>
+    <!-- Search & reload -->
+    <PaginationDisplayGeneralSearchReload/>
+    <!-- Filters -->
+    <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
+      <template #paginationColumns>
+        <slot name="paginationDisplayFiltersElement"></slot>
+        <slot name="leftPaginationColumns"></slot>
+        <div class="column is-auto-fill my-3" v-if="!isSmall"/>
+        <div class="columns is-multiline">
+          <div class="column is-12 p-1 m-0"><label class="label is-small">&nbsp;</label></div>
+          <slot name="rightPaginationColumns"></slot>
+        </div>
+      </template>
+    </PaginationDisplay>
+    <!-- Table -->
+    <section>
+      <slot name="default"></slot>
+    </section>
+    <!-- Pagination -->
+    <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
+  </div>
+</template>
+
+<style scoped>
+</style>

src/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue

@@ -1,27 +1,17 @@
 <script setup>
 import {
-  isLoading,
   list,
   loadList,
-  metaCurrentPage,
-  metaItemsPerPage,
-  metaTotalItems,
   setEndpoint,
-  setMetaItemsPerPage,
-  setPage,
   setFilter,
 } from "@/components/pagination/paginatedList.vue";
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
-import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
 import { useRouter } from "vue-router";
-import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
 import VehiclesTable from "@/components/displays/user/vehicles/vehiclesTable.vue";
-import {defineProps, ref} from "vue";
-import PaginationDisplayGeneralSearchReload
-  from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
+import {defineProps} from "vue";
 import PaginationDisplayFilters from "@/components/displays/pagination/PaginationDisplayFilters.vue";
 import {Colors} from "@/ThemeConfig.vue";
-const isSmall = ref(window.innerWidth < 1024);
+import TableLabeledPagination from "@/components/displays/pagination/TableLabeledPagination.vue";
 
 /**
  * Router
@@ -48,14 +38,15 @@ loadList();
 </script>
 
 <template>
-  <PaginationDisplayGeneralSearchReload/>
-  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
-    <template #paginationColumns>
+  <div>
+  <TableLabeledPagination label="Oversigt over registrerede køretøjer">
+    <template #paginationDisplayFiltersElement>
       <PaginationDisplayFilters
           :productColumn="'type'"
           :columnLabels="{ type: SessionUser.objects.vehicles.columns.type.label }"
       />
-      <div class="column is-auto-fill my-3" v-if="!isSmall"/>
+    </template>
+    <template #rightPaginationColumns>
       <!-- Create a new vehicle, if the route is /user -->
       <div class="column is-narrow is-float-right"
            v-if="router.currentRoute.value.path.startsWith('/user')">
@@ -66,9 +57,11 @@ loadList();
         </button>
       </div>
     </template>
-  </PaginationDisplay>
-  <VehiclesTable :vehicles="list" :show_add_vehicle="props.customer_id" :add_other_customer_id="props.add_other_customer_id"/>
-  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
+    <template #default>
+      <VehiclesTable :vehicles="list" :show_add_vehicle="props.customer_id" :add_other_customer_id="props.add_other_customer_id"/>
+    </template>
+  </TableLabeledPagination>
+  </div>
 </template>
 
 <style scoped>

src/components/displays/user/vehicles/vehiclesTable.vue

@@ -1,6 +1,11 @@
 <script setup>
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
-
+import {ref} from 'vue';
+import { departments, getDepartments} from "@/components/pagination/departmentTabs.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { loadList } from "@/components/pagination/paginatedList.vue";
+import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
+import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 const props = defineProps({
   vehicles: {
     type: Array,
@@ -27,12 +32,6 @@ const props = defineProps({
     default: null
   }
 });
-import { ref } from 'vue';
-import { departments, getDepartments} from "@/components/pagination/departmentTabs.vue";
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import { loadList } from "@/components/pagination/paginatedList.vue";
-import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
-import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 
 
 const reload = () => {
@@ -254,27 +253,6 @@ const isVehicleAddonApplied = (addon) => {
         </ActionSettingsWheelButton>
       </td>
     </tr>
-    <!-- Add vehicle button -->
-    <tr>
-      <td colspan="10">
-        <div class="buttons">
-          <!-- Add own vehicle button (If the add_other_customer_id is not set) -->
-          <button
-              v-if="props.show_add_vehicle && !props.add_other_customer_id"
-              class="button is-small is-text"
-              @click="SessionUser.objects.vehicles.functions.showCreateObjectForCustomerForm(props.show_add_vehicle, () => reload())" style="text-decoration-line: none">
-            Tilføj køretøj
-          </button>
-          <!-- Add other vehicle button -->
-          <button
-              v-if="props.add_other_customer_id"
-              class="button is-small is-text"
-              @click="SessionUser.objects.vehicles.functions.showCreateObjectForCustomerForm(props.add_other_customer_id, () => reload())" style="text-decoration-line: none">
-            Tilføj køretøj til kunde
-          </button>
-        </div>
-      </td>
-    </tr>
     </tbody>
     <tfoot>
     <tr>