protocol base views
This commit is contained in:
parent
f453bdc7d3
commit
c1e9784b4a
14 changed files with 708 additions and 24 deletions
151
src/views/admin/protocol/Protocol.vue
Normal file
151
src/views/admin/protocol/Protocol.vue
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #topBar>
|
||||
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
|
||||
<h1 class="font-bold text-xl h-8">Protokolle</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
|
||||
<div class="flex flex-col w-full grow gap-2 pr-2 overflow-y-scroll">
|
||||
<ProtocolListItem v-for="protocol in protocols" :key="protocol.id" :protocol="protocol" />
|
||||
</div>
|
||||
<div class="flex flex-row w-full justify-between select-none">
|
||||
<p class="text-sm font-normal text-gray-500">
|
||||
Elemente <span class="font-semibold text-gray-900">{{ showingText }}</span> von
|
||||
<span class="font-semibold text-gray-900">{{ entryCount }}</span>
|
||||
</p>
|
||||
<ul class="flex flex-row text-sm h-8">
|
||||
<li
|
||||
class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
|
||||
:class="[currentPage > 0 ? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700' : 'opacity-50']"
|
||||
@click="loadPage(currentPage - 1)"
|
||||
>
|
||||
<ChevronLeftIcon class="h-4" />
|
||||
</li>
|
||||
<li
|
||||
v-for="page in displayedPagesNumbers"
|
||||
:key="page"
|
||||
class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 first:rounded-s-lg last:rounded-e-lg"
|
||||
:class="[currentPage == page ? 'font-bold border-primary' : '', page != '.' ? ' cursor-pointer' : '']"
|
||||
@click="loadPage(page)"
|
||||
>
|
||||
{{ typeof page == "number" ? page + 1 : "..." }}
|
||||
</li>
|
||||
<li
|
||||
class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
|
||||
:class="[
|
||||
currentPage + 1 < countOfPages ? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700' : 'opacity-50',
|
||||
]"
|
||||
@click="loadPage(currentPage + 1)"
|
||||
>
|
||||
<ChevronRightIcon class="h-4" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-4">
|
||||
<button primary class="!w-fit" @click="openCreateModal">Protokoll erstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/vue/20/solid";
|
||||
import { useProtocolStore } from "@/stores/admin/protocol";
|
||||
import ProtocolListItem from "@/components/admin/club/protocol/ProtocolListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
currentPage: 0,
|
||||
maxEntriesPerPage: 25,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useProtocolStore, ["protocols", "totalCount"]),
|
||||
entryCount() {
|
||||
return this.totalCount ?? this.protocols.length;
|
||||
},
|
||||
showingStart() {
|
||||
return this.currentPage * this.maxEntriesPerPage;
|
||||
},
|
||||
showingEnd() {
|
||||
let max = this.currentPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
|
||||
if (max > this.entryCount) max = this.entryCount;
|
||||
return max;
|
||||
},
|
||||
showingText() {
|
||||
return `${this.entryCount != 0 ? this.showingStart + 1 : 0} - ${this.showingEnd}`;
|
||||
},
|
||||
countOfPages() {
|
||||
return Math.ceil(this.entryCount / this.maxEntriesPerPage);
|
||||
},
|
||||
displayedPagesNumbers(): Array<number | "."> {
|
||||
//indicate if "." or page number gets pushed
|
||||
let stateOfPush = false;
|
||||
|
||||
return [...new Array(this.countOfPages)].reduce((acc, curr, index) => {
|
||||
if (
|
||||
// always display first 2 pages
|
||||
index <= 1 ||
|
||||
// always display last 2 pages
|
||||
index >= this.countOfPages - 2 ||
|
||||
// always display 1 pages around current page
|
||||
(this.currentPage - 1 <= index && index <= this.currentPage + 1)
|
||||
) {
|
||||
acc.push(index);
|
||||
stateOfPush = false;
|
||||
return acc;
|
||||
}
|
||||
// abort if placeholder already added to array
|
||||
if (stateOfPush == true) return acc;
|
||||
// show placeholder if pagenumber is not actively rendered
|
||||
acc.push(".");
|
||||
stateOfPush = true;
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
},
|
||||
visibleRows() {
|
||||
return this.filterData(this.protocols, this.showingStart, this.showingEnd);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchProtocols(0, this.maxEntriesPerPage, true);
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useProtocolStore, ["fetchProtocols"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
loadPage(newPage: number | ".") {
|
||||
if (newPage == ".") return;
|
||||
if (newPage < 0 || newPage >= this.countOfPages) return;
|
||||
|
||||
let pageStart = newPage * this.maxEntriesPerPage;
|
||||
let pageEnd = newPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
|
||||
if (pageEnd > this.entryCount) pageEnd = this.entryCount;
|
||||
|
||||
let loadedElementCount = this.filterData(this.protocols, pageStart, pageEnd).length;
|
||||
if (loadedElementCount < this.maxEntriesPerPage) this.fetchProtocols(pageStart, this.maxEntriesPerPage);
|
||||
|
||||
this.currentPage = newPage;
|
||||
},
|
||||
filterData(array: Array<any>, start: number, end: number): Array<any> {
|
||||
return array.filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
|
||||
},
|
||||
openCreateModal() {
|
||||
// this.openModal(
|
||||
// markRaw(defineAsyncComponent(() => import("@/components/admin/club/protocol/CreateProtocolModal.vue")))
|
||||
// );
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
111
src/views/admin/protocol/ProtocolEdit.vue
Normal file
111
src/views/admin/protocol/ProtocolEdit.vue
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<form
|
||||
v-else-if="protocol != null"
|
||||
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
|
||||
@submit.prevent="triggerUpdate"
|
||||
>
|
||||
<p class="mx-auto">Protokoll bearbeiten</p>
|
||||
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
|
||||
verwerfen
|
||||
</button>
|
||||
<button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
|
||||
speichern
|
||||
</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useProtocolStore } from "@/stores/admin/protocol";
|
||||
import type { ProtocolViewModel, UpdateProtocolViewModel } from "@/viewmodels/admin/protocol.models";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
import isEqual from "lodash.isEqual";
|
||||
import { Salutation } from "@/enums/salutation";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
protocolId: String,
|
||||
},
|
||||
watch: {
|
||||
loadingActive() {
|
||||
if (this.loading == "loading") {
|
||||
this.loading = this.loadingActive;
|
||||
}
|
||||
if (this.loadingActive == "fetched") this.protocol = cloneDeep(this.activeProtocolObj);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: "loading" as "loading" | "fetched" | "failed",
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
protocol: null as null | ProtocolViewModel,
|
||||
timeout: null as any,
|
||||
salutations: [] as Array<string>,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canSaveOrReset(): boolean {
|
||||
return isEqual(this.activeProtocolObj, this.protocol);
|
||||
},
|
||||
...mapState(useProtocolStore, ["activeProtocolObj", "loadingActive"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItem();
|
||||
this.salutations = Object.values(Salutation);
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useProtocolStore, ["fetchProtocolByActiveId", "updateActiveProtocol"]),
|
||||
resetForm() {
|
||||
this.protocol = cloneDeep(this.activeProtocolObj);
|
||||
},
|
||||
fetchItem() {
|
||||
this.fetchProtocolByActiveId();
|
||||
},
|
||||
triggerUpdate(e: any) {
|
||||
if (this.protocol == null) return;
|
||||
let formData = e.target.elements;
|
||||
let updateProtocol: UpdateProtocolViewModel = {
|
||||
id: this.protocol.id,
|
||||
title: formData.title.value,
|
||||
date: formData.date.value,
|
||||
};
|
||||
this.status = "loading";
|
||||
this.updateActiveProtocol(updateProtocol)
|
||||
.then(() => {
|
||||
this.fetchItem();
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.status = null;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
34
src/views/admin/protocol/ProtocolOverview.vue
Normal file
34
src/views/admin/protocol/ProtocolOverview.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div v-if="activeProtocol != null" class="flex flex-col gap-2 w-full">Protokoll Details</div>
|
||||
|
||||
<Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingActive == 'failed'" @click="fetchProtocolByActiveId" class="cursor-pointer">
|
||||
↺ laden fehlgeschlagen
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import { useProtocolStore } from "@/stores/admin/protocol";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
protocolId: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useProtocolStore, ["activeProtocol", "loadingActive"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchProtocolByActiveId();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useProtocolStore, ["fetchProtocolByActiveId"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
82
src/views/admin/protocol/ProtocolRouting.vue
Normal file
82
src/views/admin/protocol/ProtocolRouting.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #headerInsert>
|
||||
<RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
|
||||
</template>
|
||||
<template #topBar>
|
||||
<div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
|
||||
<h1 class="font-bold text-xl h-8 min-h-fit grow">
|
||||
{{ activeProtocolObj?.title }}, {{ activeProtocolObj?.date }}
|
||||
</h1>
|
||||
<RouterLink :to="{ name: 'admin-club-protocol-edit' }">
|
||||
<PencilIcon class="w-5 h-5" />
|
||||
</RouterLink>
|
||||
<TrashIcon class="w-5 h-5 cursor-pointer" @click="openDeleteModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col gap-2 grow px-7 overflow-hidden">
|
||||
<div class="flex flex-col grow gap-2 overflow-hidden">
|
||||
<div class="w-full flex flex-row max-lg:flex-wrap justify-center">
|
||||
<RouterLink
|
||||
v-for="tab in tabs"
|
||||
:key="tab.route"
|
||||
v-slot="{ isActive }"
|
||||
:to="{ name: tab.route }"
|
||||
class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
|
||||
isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
|
||||
]"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</p>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<RouterView />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { RouterLink, RouterView } from "vue-router";
|
||||
import { useProtocolStore } from "@/stores/admin/protocol";
|
||||
import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
protocolId: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [{ route: "admin-club-protocol-overview", title: "Übersicht" }],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useProtocolStore, ["activeProtocolObj"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchProtocolByActiveId();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useProtocolStore, ["fetchProtocolByActiveId"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openDeleteModal() {
|
||||
// this.openModal(
|
||||
// markRaw(defineAsyncComponent(() => import("@/components/admin/club/protocol/DeleteProtocolModal.vue"))),
|
||||
// parseInt(this.protocolId ?? "")
|
||||
// );
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue