ff-admin/src/views/admin/unit/inspectionPlan/InspectionPlan.vue

65 lines
2.1 KiB
Vue

<template>
<MainTemplate title="Prüfpläne">
<template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
<Pagination
:items="inspectionPlans"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
useSearch
:useScanner="false"
@load-data="(offset, count, search) => fetchInspectionPlans(offset, count, search)"
@search="(search) => fetchInspectionPlans(0, maxEntriesPerPage, search, true)"
>
<template #pageRow="{ row }: { row: InspectionPlanViewModel }">
<InspectionPlanListItem :inspectionPlan="row" />
</template>
</Pagination>
<div class="flex flex-row gap-4">
<RouterLink
v-if="can('create', 'unit', 'inspection_plan')"
:to="{ name: 'admin-unit-inspection_plan-create' }"
primary
button
class="w-fit!"
>
Prüfplan erstellen
</RouterLink>
</div>
</div>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
import Pagination from "@/components/Pagination.vue";
import { useAbilityStore } from "@/stores/ability";
import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
import InspectionPlanListItem from "@/components/admin/unit/inspectionPlan/InspectionPlanListItem.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
currentPage: 0,
maxEntriesPerPage: 25,
};
},
computed: {
...mapState(useInspectionPlanStore, ["inspectionPlans", "totalCount", "loading"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchInspectionPlans(0, this.maxEntriesPerPage, "", true);
},
methods: {
...mapActions(useInspectionPlanStore, ["fetchInspectionPlans"]),
},
});
</script>