Compare commits

..

3 commits

20 changed files with 275 additions and 542 deletions

14
package-lock.json generated
View file

@ -1,18 +1,17 @@
{ {
"name": "ff-admin", "name": "ff-admin",
"version": "1.4.1", "version": "1.3.5",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "ff-admin", "name": "ff-admin",
"version": "1.4.1", "version": "1.3.5",
"license": "AGPL-3.0-only", "license": "AGPL-3.0-only",
"dependencies": { "dependencies": {
"@fullcalendar/core": "^6.1.15", "@fullcalendar/core": "^6.1.15",
"@fullcalendar/daygrid": "^6.1.15", "@fullcalendar/daygrid": "^6.1.15",
"@fullcalendar/interaction": "^6.1.15", "@fullcalendar/interaction": "^6.1.15",
"@fullcalendar/list": "^6.1.17",
"@fullcalendar/timegrid": "^6.1.15", "@fullcalendar/timegrid": "^6.1.15",
"@fullcalendar/vue3": "^6.1.15", "@fullcalendar/vue3": "^6.1.15",
"@headlessui/vue": "^1.7.23", "@headlessui/vue": "^1.7.23",
@ -2380,15 +2379,6 @@
"@fullcalendar/core": "~6.1.17" "@fullcalendar/core": "~6.1.17"
} }
}, },
"node_modules/@fullcalendar/list": {
"version": "6.1.17",
"resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.17.tgz",
"integrity": "sha512-fkyK49F9IxwlGUBVhJGsFpd/LTi/vRVERLIAe1HmBaGkjwpxnynm8TMLb9mZip97wvDk3CmZWduMe6PxscAlow==",
"license": "MIT",
"peerDependencies": {
"@fullcalendar/core": "~6.1.17"
}
},
"node_modules/@fullcalendar/timegrid": { "node_modules/@fullcalendar/timegrid": {
"version": "6.1.17", "version": "6.1.17",
"resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.17.tgz", "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.17.tgz",

View file

@ -1,6 +1,6 @@
{ {
"name": "ff-admin", "name": "ff-admin",
"version": "1.4.1", "version": "1.3.5",
"description": "Feuerwehr/Verein Mitgliederverwaltung UI", "description": "Feuerwehr/Verein Mitgliederverwaltung UI",
"type": "module", "type": "module",
"scripts": { "scripts": {
@ -27,7 +27,6 @@
"@fullcalendar/core": "^6.1.15", "@fullcalendar/core": "^6.1.15",
"@fullcalendar/daygrid": "^6.1.15", "@fullcalendar/daygrid": "^6.1.15",
"@fullcalendar/interaction": "^6.1.15", "@fullcalendar/interaction": "^6.1.15",
"@fullcalendar/list": "^6.1.17",
"@fullcalendar/timegrid": "^6.1.15", "@fullcalendar/timegrid": "^6.1.15",
"@fullcalendar/vue3": "^6.1.15", "@fullcalendar/vue3": "^6.1.15",
"@headlessui/vue": "^1.7.23", "@headlessui/vue": "^1.7.23",

View file

@ -1,181 +0,0 @@
<template>
<div class="flex flex-col w-full h-full gap-2 justify-between overflow-hidden">
<div
class="flex flex-row gap-2 justify-between max-sm:justify-center"
:class="smallStyling ? 'max-lg:flex-wrap' : 'max-xl:flex-wrap'"
>
<div class="flex flex-row" :class="smallStyling ? 'max-lg:order-2' : 'max-xl:order-2'">
<button
:primary="view == 'dayGridMonth'"
:primary-outline="view != 'dayGridMonth'"
class="rounded-r-none!"
@click="setView('dayGridMonth')"
>
Monat
</button>
<button
:primary="view == 'timeGridWeek'"
:primary-outline="view != 'timeGridWeek'"
class="rounded-none! border-x-0!"
@click="setView('timeGridWeek')"
>
Woche
</button>
<button
:primary="view == 'listMonth'"
:primary-outline="view != 'listMonth'"
class="rounded-l-none!"
@click="setView('listMonth')"
>
Liste
</button>
</div>
<p class="text-3xl w-full text-center" :class="smallStyling ? 'max-lg:order-1' : 'max-xl:order-1'">
{{ currentTitle }}
</p>
<div class="flex flex-row" :class="smallStyling ? 'max-lg:order-3' : 'max-xl:order-3'">
<button primary-outline class="rounded-r-none!" @click="navigateView('prev')">
<ChevronLeftIcon />
</button>
<button
:primary="containsToday"
:primary-outline="!containsToday"
class="rounded-none! border-x-0!"
@click="
calendarApi?.today();
containsToday = true;
"
>
heute
</button>
<button primary-outline class="rounded-l-none!" @click="navigateView('next')">
<ChevronRightIcon />
</button>
</div>
</div>
<div class="flex flex-col w-full grow overflow-hidden">
<FullCalendar ref="fullCalendar" :options="calendarOptions" class="max-h-full h-full" />
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import FullCalendar from "@fullcalendar/vue3";
import deLocale from "@fullcalendar/core/locales/de";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interactionPlugin from "@fullcalendar/interaction";
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
import type { CalendarOptions } from "@fullcalendar/core/index.js";
</script>
<script lang="ts">
export default defineComponent({
props: {
items: {
type: Array as PropType<
{
id: string;
title: string;
start: string;
end: string;
backgroundColor: string;
}[]
>,
default: [],
},
allowInteraction: {
type: Boolean,
default: true,
},
smallStyling: {
type: Boolean,
default: false,
},
},
emits: {
dateSelect: ({ start, end, allDay }: { start: string; end: string; allDay: boolean }) => {
return typeof start == "string" && typeof end == "string" && typeof allDay === "boolean";
},
eventSelect: (id: string) => {
return typeof id == "string";
},
},
data() {
return {
view: "dayGridMonth" as "dayGridMonth" | "timeGridWeek" | "listMonth",
calendarApi: null as null | typeof FullCalendar,
currentTitle: "" as string,
containsToday: false as boolean,
};
},
computed: {
calendarOptions() {
return {
timeZone: "local",
locale: deLocale,
plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
initialView: "dayGridMonth",
eventDisplay: "block",
headerToolbar: false,
weekends: true,
editable: this.allowInteraction,
selectable: this.allowInteraction,
selectMirror: false,
dayMaxEvents: true,
weekNumbers: true,
displayEventTime: true,
nowIndicator: true,
weekText: "KW",
allDaySlot: false,
events: this.items,
select: this.select,
eventClick: this.eventClick,
} as CalendarOptions;
},
},
mounted() {
this.calendarApi = (this.$refs.fullCalendar as typeof FullCalendar).getApi();
this.setTitle();
this.setContainsToday();
},
methods: {
setTitle() {
this.currentTitle = this.calendarApi?.view.title ?? "";
},
setView(view: "dayGridMonth" | "timeGridWeek" | "listMonth") {
this.calendarApi?.changeView(view);
this.view = view;
this.setTitle();
this.setContainsToday();
},
navigateView(change: "prev" | "next") {
if (change == "prev") {
this.calendarApi?.prev();
} else {
this.calendarApi?.next();
}
this.setTitle();
this.setContainsToday();
},
setContainsToday() {
const start = this.calendarApi?.view.currentStart;
const end = this.calendarApi?.view.currentEnd;
const today = new Date();
this.containsToday = today >= start && today < end;
},
select(e: any) {
this.$emit("dateSelect", {
start: e?.startStr ?? new Date().toISOString(),
end: e?.endStr ?? new Date().toISOString(),
allDay: e?.allDay ?? false,
});
},
eventClick(e: any) {
this.$emit("eventSelect", e.event.id);
},
},
});
</script>

View file

@ -30,9 +30,6 @@
v-if="allowPredefinedSelect && can('read', 'configuration', 'query_store')" v-if="allowPredefinedSelect && can('read', 'configuration', 'query_store')"
class="flex flex-row gap-2 max-lg:w-full max-lg:order-10" class="flex flex-row gap-2 max-lg:w-full max-lg:order-10"
> >
<div v-if="!isAsStored" class="p-1 border border-gray-400 bg-gray-100 rounded-md" title="Änderung erkannt">
<DocumentCurrencyRupeeIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
</div>
<select v-model="activeQueryId" class="max-h-[34px] py-0!"> <select v-model="activeQueryId" class="max-h-[34px] py-0!">
<option :value="undefined" disabled>gepeicherte Anfrage auswählen</option> <option :value="undefined" disabled>gepeicherte Anfrage auswählen</option>
<option v-for="query in queries" :key="query.id" :value="query.id"> <option v-for="query in queries" :key="query.id" :value="query.id">
@ -73,7 +70,7 @@
</div> </div>
<div class="p-2 h-44 md:h-60 w-full overflow-y-auto"> <div class="p-2 h-44 md:h-60 w-full overflow-y-auto">
<textarea v-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" /> <textarea v-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
<Table v-else v-model="value" enableOrder /> <Table v-else v-model="value" />
</div> </div>
</div> </div>
</template> </template>
@ -81,7 +78,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue"; import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia"; import { mapActions, mapState, mapWritableState } from "pinia";
import { type DynamicQueryStructure } from "@/types/dynamicQueries"; import type { DynamicQueryStructure } from "@/types/dynamicQueries";
import { import {
ArchiveBoxArrowDownIcon, ArchiveBoxArrowDownIcon,
CommandLineIcon, CommandLineIcon,
@ -91,15 +88,12 @@ import {
RectangleGroupIcon, RectangleGroupIcon,
TrashIcon, TrashIcon,
SparklesIcon, SparklesIcon,
DocumentCurrencyRupeeIcon,
} from "@heroicons/vue/24/outline"; } from "@heroicons/vue/24/outline";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder"; import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import { useModalStore } from "@/stores/modal"; import { useModalStore } from "@/stores/modal";
import Table from "./Table.vue"; import Table from "./Table.vue";
import { useAbilityStore } from "@/stores/ability"; import { useAbilityStore } from "@/stores/ability";
import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore"; import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
import { v4 as uuid } from "uuid";
import cloneDeep from "lodash.clonedeep";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -108,7 +102,6 @@ export default defineComponent({
modelValue: { modelValue: {
type: [Object, String] as PropType<DynamicQueryStructure | string>, type: [Object, String] as PropType<DynamicQueryStructure | string>,
default: { default: {
id: uuid(),
select: "*", select: "*",
table: "", table: "",
where: [], where: [],
@ -133,12 +126,7 @@ export default defineComponent({
} else { } else {
this.queryMode = "builder"; this.queryMode = "builder";
} }
this.value = cloneDeep(query); this.value = query;
}
},
value() {
if (typeof this.value != "string" && !this.value.id) {
this.value.id = uuid();
} }
}, },
}, },
@ -161,11 +149,6 @@ export default defineComponent({
this.$emit("update:model-value", val); this.$emit("update:model-value", val);
}, },
}, },
isAsStored() {
let stored = this.queries.find((q) => q.id == this.activeQueryId);
if (!stored) return true;
return JSON.stringify(this.value) == JSON.stringify(stored.query);
},
}, },
mounted() { mounted() {
this.fetchTableMetas(); this.fetchTableMetas();
@ -180,7 +163,6 @@ export default defineComponent({
this.activeQueryId = undefined; this.activeQueryId = undefined;
if (typeof this.value != "string") { if (typeof this.value != "string") {
this.value = { this.value = {
id: uuid(),
select: "*", select: "*",
table: "", table: "",
where: [], where: [],
@ -200,7 +182,6 @@ export default defineComponent({
this.activeQueryId = undefined; this.activeQueryId = undefined;
if (this.queryMode == "builder") { if (this.queryMode == "builder") {
this.value = { this.value = {
id: uuid(),
select: "*", select: "*",
table: "", table: "",
where: [], where: [],

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-row gap-2 items-center w-full"> <div class="flex flex-row gap-2 items-center w-full">
<select v-if="!isFirst" v-model="concat" class="w-20! h-fit!"> <select v-if="concat != '_'" v-model="concat" class="w-20! h-fit!">
<option value="" disabled>Verknüpfung auswählen</option> <option value="" disabled>Verknüpfung auswählen</option>
<option v-for="operation in ['AND', 'OR']" :value="operation"> <option v-for="operation in ['AND', 'OR']" :value="operation">
{{ operation }} {{ operation }}
@ -68,10 +68,6 @@ import { TrashIcon } from "@heroicons/vue/24/outline";
<script lang="ts"> <script lang="ts">
export default defineComponent({ export default defineComponent({
props: { props: {
isFirst: {
type: Boolean,
default: false,
},
table: { table: {
type: String, type: String,
default: "", default: "",
@ -82,6 +78,9 @@ export default defineComponent({
}, },
}, },
emits: ["update:model-value", "remove"], emits: ["update:model-value", "remove"],
data() {
return {};
},
computed: { computed: {
...mapState(useQueryBuilderStore, ["tableMetas"]), ...mapState(useQueryBuilderStore, ["tableMetas"]),
activeTable() { activeTable() {
@ -145,10 +144,5 @@ export default defineComponent({
}, },
}, },
}, },
mounted() {
if (this.concat == "_") {
this.concat = "AND";
}
},
}); });
</script> </script>

View file

@ -1,13 +1,12 @@
<template> <template>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<p class="w-14 min-w-14 pt-2">I_JOIN</p> <p class="w-14 min-w-14 pt-2">JOIN</p>
<div class="flex flex-row flex-wrap gap-2 items-center w-full"> <div class="flex flex-row flex-wrap gap-2 items-center w-full">
<div class="flex flex-row flex-wrap gap-2 items-center justify-end w-full"> <div class="flex flex-row flex-wrap gap-2 items-center justify-end w-full">
<JoinTable <JoinTable
v-for="(join, index) in value" v-for="(join, index) in value"
:model-value="join" :model-value="join"
:table="table" :table="table"
:alreadyJoined="alreadyJoined"
@update:model-value="($event) => (value[index] = $event)" @update:model-value="($event) => (value[index] = $event)"
@remove="removeAtIndex(index)" @remove="removeAtIndex(index)"
/> />
@ -22,11 +21,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineComponent, type PropType } from "vue"; import { defineComponent, type PropType } from "vue";
import { mapActions, mapState } from "pinia"; import { mapActions, mapState } from "pinia";
import { type DynamicQueryStructure, type JoinStructure } from "@/types/dynamicQueries"; import type { DynamicQueryStructure } from "@/types/dynamicQueries";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder"; import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import { PlusIcon } from "@heroicons/vue/24/outline"; import { PlusIcon } from "@heroicons/vue/24/outline";
import JoinTable from "./JoinTable.vue"; import JoinTable from "./JoinTable.vue";
import { v4 as uuid } from "uuid";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -37,22 +35,24 @@ export default defineComponent({
default: "", default: "",
}, },
modelValue: { modelValue: {
type: Array as PropType<Array<DynamicQueryStructure & JoinStructure>>, type: Array as PropType<Array<DynamicQueryStructure & { foreignColumn: string }>>,
default: [],
},
alreadyJoined: {
type: Array as PropType<Array<string>>,
default: [], default: [],
}, },
}, },
emits: ["update:model-value"], emits: ["update:model-value"],
data() {
return {};
},
computed: { computed: {
...mapState(useQueryBuilderStore, ["tableMetas"]), ...mapState(useQueryBuilderStore, ["tableMetas"]),
activeTable() {
return this.tableMetas.find((tm) => tm.tableName == this.table);
},
value: { value: {
get() { get() {
return this.modelValue; return this.modelValue;
}, },
set(val: Array<DynamicQueryStructure & JoinStructure>) { set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) {
this.$emit("update:model-value", val); this.$emit("update:model-value", val);
}, },
}, },
@ -60,13 +60,11 @@ export default defineComponent({
methods: { methods: {
addToValue() { addToValue() {
this.value.push({ this.value.push({
id: uuid(),
select: "*", select: "*",
table: "", table: "",
where: [], where: [],
join: [], join: [],
orderBy: [], orderBy: [],
type: "defined",
foreignColumn: "", foreignColumn: "",
}); });
}, },

View file

@ -2,52 +2,13 @@
<div class="flex flex-row gap-2 w-full"> <div class="flex flex-row gap-2 w-full">
<div class="flex flex-row gap-2 w-full"> <div class="flex flex-row gap-2 w-full">
<div class="flex flex-col gap-2 w-full"> <div class="flex flex-col gap-2 w-full">
<div class="flex flex-row gap-2 w-full"> <select v-model="foreignColumn" class="w-full">
<div <option value="" disabled>Relation auswählen</option>
v-if="false" <option v-for="relation in activeTable?.relations" :value="relation.column">
class="h-fit p-1 border border-gray-400 hover:bg-gray-200 rounded-md" {{ relation.column }} -> {{ joinTableName(relation.referencedTableName) }}
title="Join Modus wechseln" </option>
@click="swapJoinType(value.type)" </select>
> <Table v-model="value" disable-table-select />
<ArrowsUpDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
</div>
<select v-if="value.type == 'defined'" v-model="context" class="w-full">
<option value="" disabled>Relation auswählen</option>
<option
v-for="relation in activeTable?.relations"
:value="relation.column"
:disabled="
alreadyJoined.includes(joinTableName(relation.referencedTableName)) &&
joinTableName(relation.referencedTableName) != value.table
"
>
{{ relation.column }} -> {{ joinTableName(relation.referencedTableName) }}
<span
v-if="
alreadyJoined.includes(joinTableName(relation.referencedTableName)) &&
joinTableName(relation.referencedTableName) != value.table
"
>
(Join auf dieser Ebene besteht schon)
</span>
</option>
</select>
<div v-else class="flex flex-col w-full">
<select v-model="joinTable">
<option value="" disabled>Tabelle auswählen</option>
<option
v-for="table in tableMetas"
:value="table.tableName"
:disabled="alreadyJoined.includes(table.tableName) && table.tableName != value.table"
>
{{ table.tableName }}
</option>
</select>
<input v-model="context" type="text" placeholder="Join Condition tabA.col = tabB.col" />
</div>
</div>
<Table v-model="value" disable-table-select :show-table-select="false" />
</div> </div>
<div class="h-fit p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')"> <div class="h-fit p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
<TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" /> <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
@ -59,12 +20,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineComponent, type PropType } from "vue"; import { defineComponent, type PropType } from "vue";
import { mapActions, mapState } from "pinia"; import { mapActions, mapState } from "pinia";
import { type DynamicQueryStructure, type JoinStructure } from "@/types/dynamicQueries"; import type { DynamicQueryStructure } from "@/types/dynamicQueries";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder"; import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import Table from "./Table.vue"; import Table from "./Table.vue";
import { ArrowsUpDownIcon, TrashIcon } from "@heroicons/vue/24/outline"; import { TrashIcon } from "@heroicons/vue/24/outline";
import { joinTableName } from "@/helpers/queryFormatter"; import { joinTableName } from "@/helpers/queryFormatter";
import { v4 as uuid } from "uuid";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -75,15 +35,25 @@ export default defineComponent({
default: "", default: "",
}, },
modelValue: { modelValue: {
type: Object as PropType<DynamicQueryStructure & JoinStructure>, type: Object as PropType<
required: true, DynamicQueryStructure & {
}, foreignColumn: string;
alreadyJoined: { }
type: Array as PropType<Array<string>>, >,
default: [], default: {
select: "*",
table: "",
where: [],
join: [],
orderBy: [],
foreignColumn: "",
},
}, },
}, },
emits: ["update:model-value", "remove"], emits: ["update:model-value", "remove"],
data() {
return {};
},
computed: { computed: {
...mapState(useQueryBuilderStore, ["tableMetas"]), ...mapState(useQueryBuilderStore, ["tableMetas"]),
activeTable() { activeTable() {
@ -93,59 +63,27 @@ export default defineComponent({
get() { get() {
return this.modelValue; return this.modelValue;
}, },
set(val: DynamicQueryStructure & JoinStructure) { set(
val: DynamicQueryStructure & {
foreignColumn: string;
}
) {
this.$emit("update:model-value", val); this.$emit("update:model-value", val);
}, },
}, },
context: { foreignColumn: {
get() { get() {
if (this.modelValue.type == "defined") { return this.modelValue.foreignColumn;
return this.modelValue.foreignColumn ?? "";
} else {
return this.modelValue.condition ?? "";
}
},
set(val: string) {
if (this.modelValue.type == "defined") {
let relTable = this.activeTable?.relations.find((r) => r.column == val);
this.$emit("update:model-value", {
...this.modelValue,
foreignColumn: val,
table: joinTableName(relTable?.referencedTableName ?? ""),
});
} else {
this.$emit("update:model-value", {
...this.modelValue,
condition: val,
});
}
},
},
joinTable: {
get(): string {
return this.modelValue.table;
}, },
set(val: string) { set(val: string) {
let relTable = this.activeTable?.relations.find((r) => r.column == val);
this.$emit("update:model-value", { this.$emit("update:model-value", {
...this.modelValue, ...this.modelValue,
table: val, foreignColumn: val,
table: joinTableName(relTable?.referencedTableName ?? ""),
}); });
}, },
}, },
}, },
mounted() {
if (!this.value.id) {
this.value.id = uuid();
}
},
methods: {
swapJoinType(type: string) {
if (type == "defined") {
this.value.type = "custom";
} else {
this.value.type = "defined";
}
},
},
}); });
</script> </script>

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-row gap-2 w-full border border-gray-300 rounded-md p-1"> <div class="flex flex-row gap-2 w-full border border-gray-300 rounded-md p-1">
<select v-if="isFirst" v-model="concat" class="w-20! h-fit!"> <select v-if="concat != '_'" v-model="concat" class="w-20! h-fit!">
<option value="" disabled>Verknüpfung auswählen</option> <option value="" disabled>Verknüpfung auswählen</option>
<option v-for="operation in ['AND', 'OR']" :value="operation"> <option v-for="operation in ['AND', 'OR']" :value="operation">
{{ operation }} {{ operation }}
@ -28,10 +28,6 @@ import NestedWhere from "./NestedWhere.vue";
<script lang="ts"> <script lang="ts">
export default defineComponent({ export default defineComponent({
props: { props: {
isFirst: {
type: Boolean,
default: false,
},
table: { table: {
type: String, type: String,
default: "", default: "",
@ -42,6 +38,9 @@ export default defineComponent({
}, },
}, },
emits: ["update:model-value", "remove"], emits: ["update:model-value", "remove"],
data() {
return {};
},
computed: { computed: {
...mapState(useQueryBuilderStore, ["tableMetas"]), ...mapState(useQueryBuilderStore, ["tableMetas"]),
concat: { concat: {
@ -61,10 +60,5 @@ export default defineComponent({
}, },
}, },
}, },
mounted() {
if (this.concat == "_") {
this.concat = "AND";
}
},
}); });
</script> </script>

View file

@ -1,17 +1,12 @@
<template> <template>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<p class="w-14 min-w-14 pt-2">SORT</p> <p class="w-14 min-w-14 pt-2">ORDER</p>
<div class="flex flex-row flex-wrap gap-2 items-center w-full"> <div class="flex flex-row flex-wrap gap-2 items-center w-full">
<OrderStructure <OrderStructure
v-for="(order, index) in value" v-for="(order, index) in value"
:model-value="order" :model-value="order"
:table="table" :table="table"
:columns="columns" :columns="columns"
:alreadySorted="alreadySorted"
:notFirst="index != 0"
:notLast="index != value.length - 1"
@up="changeSort('up', index)"
@down="changeSort('down', index)"
@update:model-value="($event) => (value[index] = $event)" @update:model-value="($event) => (value[index] = $event)"
@remove="removeAtIndex(index)" @remove="removeAtIndex(index)"
/> />
@ -40,15 +35,9 @@ export default defineComponent({
type: String, type: String,
default: "", default: "",
}, },
// columns: {
// type: [Array, String] as PropType<"*" | Array<string>>,
// default: "*",
// },
columns: { columns: {
type: Array as PropType< type: [Array, String] as PropType<"*" | Array<string>>,
Array<{ table: string; id: string; depth: number; path: string[]; columns: "*" | string[] }> default: "*",
>,
default: [],
}, },
modelValue: { modelValue: {
type: Array as PropType<Array<OrderByStructure>>, type: Array as PropType<Array<OrderByStructure>>,
@ -61,9 +50,6 @@ export default defineComponent({
}, },
computed: { computed: {
...mapState(useQueryBuilderStore, ["tableMetas"]), ...mapState(useQueryBuilderStore, ["tableMetas"]),
alreadySorted() {
return this.modelValue.map((m) => ({ id: m.id, col: m.column }));
},
value: { value: {
get() { get() {
return this.modelValue; return this.modelValue;
@ -76,9 +62,6 @@ export default defineComponent({
methods: { methods: {
addToValue() { addToValue() {
this.value.push({ this.value.push({
id: "",
depth: 0,
table: "",
column: "", column: "",
order: "ASC", order: "ASC",
}); });
@ -86,12 +69,6 @@ export default defineComponent({
removeAtIndex(index: number) { removeAtIndex(index: number) {
this.value.splice(index, 1); this.value.splice(index, 1);
}, },
changeSort(dir: "up" | "down", index: number) {
const swapIndex = dir === "up" ? index - 1 : index + 1;
if (swapIndex >= 0 && swapIndex < this.value.length) {
[this.value[index], this.value[swapIndex]] = [this.value[swapIndex], this.value[index]];
}
},
}, },
}); });
</script> </script>

View file

@ -1,26 +1,15 @@
<template> <template>
<div class="flex flex-row gap-2 items-center w-full"> <div class="flex flex-row gap-2 items-center w-full">
<div class="flex flex-col min-w-fit">
<ChevronUpIcon v-if="notFirst" class="w-4 h-4 stroke-2 cursor-pointer" @click.prevent="$emit('up')" />
<ChevronDownIcon v-if="notLast" class="w-4 h-4 stroke-2 cursor-pointer" @click.prevent="$emit('down')" />
</div>
<select v-model="column" class="w-full"> <select v-model="column" class="w-full">
<option value="" disabled>Spalte auswählen</option> <option value="" disabled>Spalte auswählen</option>
<option <option v-for="column in selectableColumns" :value="column">
v-for="selectable in selectableColumns" {{ column }}
:value="`${selectable.id}_${selectable.column}`"
:disabled="
alreadySorted.some((as) => as.id == selectable.id && as.col == selectable.column) &&
`${selectable.id}_${selectable.column}` != column
"
>
{{ [...selectable.path, selectable.table].join("-") }} -> {{ selectable.column }}
</option> </option>
</select> </select>
<select v-model="order"> <select v-model="order">
<option value="" disabled>Sortierung auswählen</option> <option value="" disabled>Sortierung auswählen</option>
<option v-for="order in orderable" :value="order.key"> <option v-for="order in ['ASC', 'DESC']" :value="order">
{{ order.val }} {{ order }}
</option> </option>
</select> </select>
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')"> <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
@ -34,102 +23,47 @@ import { defineComponent, type PropType } from "vue";
import { mapActions, mapState } from "pinia"; import { mapActions, mapState } from "pinia";
import type { OrderByStructure, OrderByType } from "@/types/dynamicQueries"; import type { OrderByStructure, OrderByType } from "@/types/dynamicQueries";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder"; import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import { TrashIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline"; import { TrashIcon } from "@heroicons/vue/24/outline";
</script> </script>
<script lang="ts"> <script lang="ts">
export default defineComponent({ export default defineComponent({
props: { props: {
notFirst: {
type: Boolean,
defailt: false,
},
notLast: {
type: Boolean,
defailt: false,
},
table: { table: {
type: String, type: String,
default: "", default: "",
}, },
// columns: {
// type: [Array, String] as PropType<"*" | Array<string>>,
// default: "*",
// },
columns: { columns: {
type: Array as PropType< type: [Array, String] as PropType<"*" | Array<string>>,
Array<{ table: string; id: string; depth: number; path: string[]; columns: "*" | string[] }> default: "*",
>,
default: [],
}, },
modelValue: { modelValue: {
type: Object as PropType<OrderByStructure>, type: Object as PropType<OrderByStructure>,
default: {}, default: {},
}, },
alreadySorted: {
type: Array as PropType<Array<{ id: string; col: string }>>,
default: [],
},
},
emits: ["update:model-value", "remove", "up", "down"],
watch: {
columns() {
if (!this.columns.some((c) => c.id == this.modelValue.id)) {
this.$emit("remove");
}
},
}, },
emits: ["update:model-value", "remove"],
data() { data() {
return { return {};
orderable: [
{ key: "ASC", val: "Aufsteigend (ABC)" },
{ key: "DESC", val: "Absteigend (CBA)" },
],
};
}, },
computed: { computed: {
...mapState(useQueryBuilderStore, ["tableMetas"]), ...mapState(useQueryBuilderStore, ["tableMetas"]),
// selectableColumns() {
// if (this.columns == "*") {
// let meta = this.tableMetas.find((tm) => tm.tableName == this.table);
// if (!meta) return [];
// let relCols = meta.relations.map((r) => r.column);
// return meta.columns.map((c) => c.column).filter((c) => !relCols.includes(c));
// } else {
// return this.columns;
// }
// },
selectableColumns() { selectableColumns() {
return this.columns.reduce( if (this.columns == "*") {
(acc, curr) => { let meta = this.tableMetas.find((tm) => tm.tableName == this.table);
if (curr.columns == "*") { if (!meta) return [];
let meta = this.tableMetas.find((tm) => tm.tableName == curr.table); let relCols = meta.relations.map((r) => r.column);
if (meta) { return meta.columns.map((c) => c.column).filter((c) => !relCols.includes(c));
let relCols = meta.relations.map((r) => r.column); } else {
meta.columns return this.columns;
.map((c) => c.column) }
.filter((c) => !relCols.includes(c))
.forEach((c) =>
acc.push({ id: curr.id, depth: curr.depth, table: curr.table, column: c, path: curr.path })
);
}
} else {
curr.columns.forEach((c) =>
acc.push({ id: curr.id, depth: curr.depth, table: curr.table, column: c, path: curr.path })
);
}
return acc;
},
[] as Array<{ id: string; depth: number; table: string; column: string; path: string[] }>
);
}, },
column: { column: {
get() { get() {
return `${this.modelValue.id}_${this.modelValue.column}`; return this.modelValue.column;
}, },
set(val: `${string}_${string}`) { set(val: string) {
let col = this.selectableColumns.find((sc) => sc.id == val.split("_")[0] && sc.column == val.split("_")[1]); this.$emit("update:model-value", { ...this.modelValue, column: val });
this.$emit("update:model-value", { ...this.modelValue, ...col });
}, },
}, },
order: { order: {

View file

@ -1,22 +1,23 @@
<template> <template>
<div class="flex flex-col gap-2 w-full"> <div class="flex flex-col gap-2 w-full">
<TableSelect v-if="showTableSelect" v-model="table" :disableTableSelect="disableTableSelect" /> <TableSelect v-model="table" :disableTableSelect="disableTableSelect" />
<ColumnSelect v-if="table != ''" v-model="columnSelect" :table="table" /> <ColumnSelect v-if="table != ''" v-model="columnSelect" :table="table" />
<Where v-if="table != ''" v-model="where" :table="table" /> <Where v-if="table != ''" v-model="where" :table="table" />
<Join v-if="table != ''" v-model="modelValue.join" :table="table" :alreadyJoined="alreadyJoined" /> <Order v-if="table != ''" v-model="order" :table="table" :columns="columnSelect" />
<Order v-if="table != '' && enableOrder" v-model="order" :table="table" :columns="nestedTablesByDepth" /> <Join v-if="table != ''" v-model="modelValue.join" :table="table" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineComponent, type PropType } from "vue"; import { defineComponent, type PropType } from "vue";
import { type ConditionStructure, type DynamicQueryStructure, type OrderByStructure } from "@/types/dynamicQueries"; import { mapActions, mapState } from "pinia";
import type { ConditionStructure, DynamicQueryStructure, OrderByStructure } from "@/types/dynamicQueries";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import ColumnSelect from "./ColumnSelect.vue"; import ColumnSelect from "./ColumnSelect.vue";
import Where from "./Where.vue"; import Where from "./Where.vue";
import Order from "./Order.vue"; import Order from "./Order.vue";
import Join from "./Join.vue"; import Join from "./Join.vue";
import TableSelect from "./TableSelect.vue"; import TableSelect from "./TableSelect.vue";
import { v4 as uuid } from "uuid";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -24,50 +25,21 @@ export default defineComponent({
props: { props: {
modelValue: { modelValue: {
type: Object as PropType<DynamicQueryStructure>, type: Object as PropType<DynamicQueryStructure>,
required: true, default: {
select: "*",
table: "",
where: [],
join: [],
orderBy: [],
},
}, },
disableTableSelect: { disableTableSelect: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
enableOrder: {
type: Boolean,
default: false,
},
showTableSelect: {
type: Boolean,
default: true,
},
}, },
emits: ["update:model-value"], emits: ["update:model-value"],
computed: { computed: {
alreadyJoined() {
return this.modelValue.join?.map((j) => j.table);
},
nestedTablesByDepth() {
const tables: Array<{ table: string; id: string; depth: number; path: string[]; columns: "*" | string[] }> = [];
function recurse(item: DynamicQueryStructure, path: string[]) {
tables.push({ table: item.table, id: item.id, depth: path.length, path, columns: item.select });
if (item.join) {
item.join.forEach((child) => {
recurse(child, [...path, item.table]);
});
}
}
recurse(this.modelValue, []);
return tables;
},
value: {
get() {
return this.modelValue;
},
set(val: DynamicQueryStructure) {
this.$emit("update:model-value", val);
},
},
table: { table: {
get() { get() {
return this.modelValue.table || ""; return this.modelValue.table || "";
@ -109,10 +81,5 @@ export default defineComponent({
}, },
}, },
}, },
mounted() {
if (!this.value.id) {
this.value.id = uuid();
}
},
}); });
</script> </script>

View file

@ -5,7 +5,6 @@
<div v-for="(condition, index) in value" class="contents"> <div v-for="(condition, index) in value" class="contents">
<NestedCondition <NestedCondition
v-if="condition.structureType == 'nested'" v-if="condition.structureType == 'nested'"
:isFirst="index == 0"
:model-value="condition" :model-value="condition"
:table="table" :table="table"
@update:model-value="($event) => (value[index] = $event)" @update:model-value="($event) => (value[index] = $event)"
@ -13,7 +12,6 @@
/> />
<Condition <Condition
v-else v-else
:isFirst="index == 0"
:model-value="condition" :model-value="condition"
:table="table" :table="table"
@update:model-value="($event) => (value[index] = $event)" @update:model-value="($event) => (value[index] = $event)"
@ -76,14 +74,14 @@ export default defineComponent({
addNestedToValue() { addNestedToValue() {
this.value.push({ this.value.push({
structureType: "nested", structureType: "nested",
concat: "AND", concat: this.value.length == 0 ? "_" : "AND",
conditions: [], conditions: [],
}); });
}, },
addConditionToValue() { addConditionToValue() {
this.value.push({ this.value.push({
structureType: "condition", structureType: "condition",
concat: "AND", concat: this.value.length == 0 ? "_" : "AND",
operation: "eq", operation: "eq",
column: "", column: "",
value: "", value: "",

View file

@ -72,7 +72,7 @@ a[button] {
button[primary]:not([primary="false"]), button[primary]:not([primary="false"]),
a[button][primary]:not([primary="false"]) { a[button][primary]:not([primary="false"]) {
@apply border-2 border-transparent text-white bg-primary hover:bg-primary; @apply border border-transparent text-white bg-primary hover:bg-primary;
} }
button[primary-outline]:not([primary-outline="false"]), button[primary-outline]:not([primary-outline="false"]),
@ -131,3 +131,29 @@ summary > svg {
summary::-webkit-details-marker { summary::-webkit-details-marker {
display: none; display: none;
} }
.fc-button-primary {
@apply bg-primary! border-primary! outline-hidden! ring-0! hover:bg-red-700! hover:border-red-700! h-10 text-center;
}
.fc-button-active {
@apply bg-red-500! border-red-500!;
}
.fc-toolbar {
@apply flex-wrap;
}
/* For screens between 850px and 768px */
@media (max-width: 850px) and (min-width: 768px) {
.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
@apply order-1!;
}
/* Your styles for this range */
}
/* For screens between 525px and 0px */
@media (max-width: 525px) and (min-width: 0px) {
/* Your styles for this range */
.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
@apply order-1!;
}
}

View file

@ -304,6 +304,13 @@ const router = createRouter({
}, },
], ],
}, },
{
path: "unit",
name: "admin-unit",
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "unit" },
beforeEnter: [abilityAndNavUpdate],
},
{ {
path: "configuration", path: "configuration",
name: "admin-configuration", name: "admin-configuration",

View file

@ -57,6 +57,15 @@ export const useNavigationStore = defineStore("navigation", {
} as topLevelNavigationModel, } as topLevelNavigationModel,
] ]
: []), : []),
...(abilityStore.canSection("read", "unit")
? [
{
key: "unit",
title: "Wehr",
levelDefault: "",
} as topLevelNavigationModel,
]
: []),
...(abilityStore.canSection("read", "configuration") ...(abilityStore.canSection("read", "configuration")
? [ ? [
{ {

View file

@ -1,10 +1,9 @@
export interface DynamicQueryStructure { export interface DynamicQueryStructure {
id: string;
select: string[] | "*"; select: string[] | "*";
table: string; table: string;
where?: Array<ConditionStructure>; where?: Array<ConditionStructure>;
join?: Array<DynamicQueryStructure & JoinStructure>; join?: Array<DynamicQueryStructure & { foreignColumn: string }>;
orderBy?: Array<OrderByStructure>; // only at top level orderBy?: Array<OrderByStructure>;
} }
export type ConditionStructure = ( export type ConditionStructure = (
@ -48,12 +47,7 @@ export type WhereOperation =
| "timespanEq"; // Date before x years (YYYY-01-01 <bis> YYYY-12-31) | "timespanEq"; // Date before x years (YYYY-01-01 <bis> YYYY-12-31)
// TODO: age between | age equals | age greater | age smaller // TODO: age between | age equals | age greater | age smaller
export type JoinStructure = { foreignColumn: string; type: "defined" } | { condition: string; type: "custom" };
export type OrderByStructure = { export type OrderByStructure = {
id: string;
depth: number;
table: string;
column: string; column: string;
order: OrderByType; order: OrderByType;
}; };

View file

@ -1,4 +1,4 @@
export type PermissionSection = "club" | "configuration" | "management"; export type PermissionSection = "club" | "unit" | "configuration" | "management";
export type PermissionModule = export type PermissionModule =
| "member" | "member"
@ -44,7 +44,7 @@ export type SectionsAndModulesObject = {
[section in PermissionSection]: Array<PermissionModule>; [section in PermissionSection]: Array<PermissionModule>;
}; };
export const permissionSections: Array<PermissionSection> = ["club", "configuration", "management"]; export const permissionSections: Array<PermissionSection> = ["club", "unit", "configuration", "management"];
export const permissionModules: Array<PermissionModule> = [ export const permissionModules: Array<PermissionModule> = [
"member", "member",
"calendar", "calendar",
@ -71,6 +71,7 @@ export const permissionModules: Array<PermissionModule> = [
export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"]; export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
export const sectionsAndModules: SectionsAndModulesObject = { export const sectionsAndModules: SectionsAndModulesObject = {
club: ["member", "calendar", "newsletter", "protocol", "query", "listprint"], club: ["member", "calendar", "newsletter", "protocol", "query", "listprint"],
unit: [],
configuration: [ configuration: [
"qualification", "qualification",
"award", "award",

View file

@ -4,17 +4,14 @@
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7"> <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Kalender</h1> <h1 class="font-bold text-xl h-8">Kalender</h1>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<PlusIcon <PlusIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="select" />
class="text-gray-500 h-5 w-5 cursor-pointer"
@click="select({ start: '', end: '', allDay: false })"
/>
<LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" /> <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
</div> </div>
</div> </div>
</template> </template>
<template #diffMain> <template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden"> <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
<CustomCalendar :items="formattedItems" @date-select="select" @event-select="eventClick" /> <FullCalendar :options="calendarOptions" class="max-h-full h-full" />
</div> </div>
</template> </template>
</MainTemplate> </MainTemplate>
@ -25,10 +22,14 @@ import { defineComponent, markRaw, defineAsyncComponent } from "vue";
import { mapActions, mapState } from "pinia"; import { mapActions, mapState } from "pinia";
import { useModalStore } from "@/stores/modal"; import { useModalStore } from "@/stores/modal";
import MainTemplate from "@/templates/Main.vue"; import MainTemplate from "@/templates/Main.vue";
import FullCalendar from "@fullcalendar/vue3";
import deLocale from "@fullcalendar/core/locales/de";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { useCalendarStore } from "@/stores/admin/club/calendar"; import { useCalendarStore } from "@/stores/admin/club/calendar";
import { useAbilityStore } from "@/stores/ability"; import { useAbilityStore } from "@/stores/ability";
import { LinkIcon, PlusIcon } from "@heroicons/vue/24/outline"; import { LinkIcon, PlusIcon } from "@heroicons/vue/24/outline";
import CustomCalendar from "@/components/CustomCalendar.vue";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -39,6 +40,33 @@ export default defineComponent({
computed: { computed: {
...mapState(useCalendarStore, ["formattedItems"]), ...mapState(useCalendarStore, ["formattedItems"]),
...mapState(useAbilityStore, ["can"]), ...mapState(useAbilityStore, ["can"]),
calendarOptions() {
return {
timeZone: "local",
locale: deLocale,
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
headerToolbar: {
left: "dayGridMonth,timeGridWeek",
center: "title",
right: "prev,today,next",
},
eventDisplay: "block",
weekends: true,
editable: true,
selectable: true,
selectMirror: false,
dayMaxEvents: true,
weekNumbers: true,
displayEventTime: true,
nowIndicator: true,
weekText: "KW",
allDaySlot: false,
events: this.formattedItems,
select: this.select,
eventClick: this.eventClick,
};
},
}, },
mounted() { mounted() {
this.fetchCalendars(); this.fetchCalendars();
@ -46,22 +74,22 @@ export default defineComponent({
methods: { methods: {
...mapActions(useModalStore, ["openModal"]), ...mapActions(useModalStore, ["openModal"]),
...mapActions(useCalendarStore, ["fetchCalendars"]), ...mapActions(useCalendarStore, ["fetchCalendars"]),
select({ start, end, allDay }: { start: string; end: string; allDay: boolean }) { select(e: any) {
if (!this.can("create", "club", "calendar")) return; if (!this.can("create", "club", "calendar")) return;
this.openModal( this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))), markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))),
{ {
start, start: e?.startStr ?? new Date().toISOString(),
end, end: e?.endStr ?? new Date().toISOString(),
allDay, allDay: e?.allDay ?? false,
} }
); );
}, },
eventClick(id: string) { eventClick(e: any) {
if (!this.can("update", "club", "calendar")) return; if (!this.can("update", "club", "calendar")) return;
this.openModal( this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/UpdateCalendarModal.vue"))), markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/UpdateCalendarModal.vue"))),
id e.event.id
); );
}, },
openLinkModal(e: any) { openLinkModal(e: any) {
@ -71,4 +99,55 @@ export default defineComponent({
}, },
}, },
}); });
/**
locale: deLocale,
events: this.absencesList.map((x) => ({
id: x.absenceId,
start: x.startDate,
end: x.endDate,
allday: true,
backgroundColor: this.getColorForAbsenceType(x.absenceType),
borderColor: '#ffffff',
title: this.getAbsenceType(x.absenceType) + ' ' + x.fullName,
})),
plugins: [
interactionPlugin,
dayGridPlugin,
timeGridPlugin,
listPlugin,
multiMonthPlugin,
],
initialView: 'dayGridMonth',
eventDisplay: 'block',
weekends: false,
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekNumbers: true,
displayEventTime: false,
weekText: 'KW',
validRange: { start: '2023-01-01', end: '' },
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'listMonth,dayGridMonth,multiMonthYear,customview',
},
views: {
customview: {
type: 'multiMonth',
multiMonthMaxColumns: 1,
duration: { month: 12 },
buttonText: 'grid',
},
},
dateClick: this.handleDateSelect.bind(this),
datesSet: this.handleMonthChange.bind(this),
select: this.handleDateSelect.bind(this),
eventClick: this.handleEventClick.bind(this),
eventsSet: this.handleEvents.bind(this),
};
*/
</script> </script>

View file

@ -70,11 +70,14 @@ import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
<script lang="ts"> <script lang="ts">
export default defineComponent({ export default defineComponent({
computed: { computed: {
...mapState(useQueryBuilderStore, ["loading", "loadingData", "data", "totalLength", "queryError"]), ...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength", "queryError"]),
...mapWritableState(useQueryBuilderStore, ["query"]), ...mapWritableState(useQueryBuilderStore, ["query"]),
}, },
mounted() {
this.fetchTableMetas();
},
methods: { methods: {
...mapActions(useQueryBuilderStore, ["sendQuery", "clearResults", "exportData"]), ...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery", "clearResults", "exportData"]),
...mapActions(useQueryStoreStore, ["triggerSave"]), ...mapActions(useQueryStoreStore, ["triggerSave"]),
}, },
}); });

View file

@ -12,12 +12,7 @@
</template> </template>
<template #diffMain> <template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden"> <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
<CustomCalendar <FullCalendar :options="calendarOptions" class="max-h-full h-full" />
:items="formattedItems"
:allow-interaction="false"
:small-styling="true"
@event-select="eventClick"
/>
</div> </div>
</template> </template>
</MainTemplate> </MainTemplate>
@ -28,10 +23,14 @@ import { defineComponent, markRaw, defineAsyncComponent } from "vue";
import { mapActions, mapState } from "pinia"; import { mapActions, mapState } from "pinia";
import { useModalStore } from "@/stores/modal"; import { useModalStore } from "@/stores/modal";
import MainTemplate from "@/templates/Main.vue"; import MainTemplate from "@/templates/Main.vue";
import FullCalendar from "@fullcalendar/vue3";
import deLocale from "@fullcalendar/core/locales/de";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { InformationCircleIcon, LinkIcon } from "@heroicons/vue/24/outline"; import { InformationCircleIcon, LinkIcon } from "@heroicons/vue/24/outline";
import type { CalendarViewModel } from "@/viewmodels/admin/club/calendar.models"; import type { CalendarViewModel } from "@/viewmodels/admin/club/calendar.models";
import { RouterLink } from "vue-router"; import { RouterLink } from "vue-router";
import CustomCalendar from "@/components/CustomCalendar.vue";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -51,6 +50,32 @@ export default defineComponent({
backgroundColor: c.type.color, backgroundColor: c.type.color,
})); }));
}, },
calendarOptions() {
return {
timeZone: "local",
locale: deLocale,
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
headerToolbar: {
left: "dayGridMonth,timeGridWeek",
center: "title",
right: "prev,today,next",
},
eventDisplay: "block",
weekends: true,
editable: false,
selectable: false,
selectMirror: false,
dayMaxEvents: true,
weekNumbers: true,
displayEventTime: true,
nowIndicator: true,
weekText: "KW",
allDaySlot: false,
events: this.formattedItems,
eventClick: this.eventClick,
};
},
}, },
mounted() { mounted() {
this.fetchCalendars(); this.fetchCalendars();
@ -68,10 +93,10 @@ export default defineComponent({
openLinkModal(e: any) { openLinkModal(e: any) {
this.openModal(markRaw(defineAsyncComponent(() => import("@/components/public/calendar/CalendarLinkModal.vue")))); this.openModal(markRaw(defineAsyncComponent(() => import("@/components/public/calendar/CalendarLinkModal.vue"))));
}, },
eventClick(id: string) { eventClick(e: any) {
this.openModal( this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/public/calendar/ShowCalendarEntryModal.vue"))), markRaw(defineAsyncComponent(() => import("@/components/public/calendar/ShowCalendarEntryModal.vue"))),
this.calendars.find((c) => c.id == id) this.calendars.find((c) => c.id == e.event.id)
); );
}, },
}, },