Merge pull request '#14-intelligent-groups' (#21) from #14-intelligent-groups into main
Reviewed-on: Ehrenamt/member-administration-ui#21
This commit is contained in:
commit
5ab65ef0c1
34 changed files with 2558 additions and 553 deletions
1042
package-lock.json
generated
1042
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -40,7 +40,7 @@
|
|||
"lodash.isequal": "^4.5.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pdf-dist": "^1.0.0",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia": "^2.3.0",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.2",
|
||||
"socket.io-client": "^4.5.0",
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
"typescript": "~5.4.0",
|
||||
"vite": "^5.3.1",
|
||||
"vite-plugin-pwa": "^0.17.4",
|
||||
"vite-plugin-vue-devtools": "^7.3.1",
|
||||
"vite-plugin-vue-devtools": "^7.6.8",
|
||||
"vue-tsc": "^2.0.21"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
public/administration-db.png
Normal file
BIN
public/administration-db.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 641 KiB |
1
public/administration-db.svg
Normal file
1
public/administration-db.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 MiB |
|
|
@ -64,10 +64,11 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" generic="T">
|
||||
<script setup lang="ts" generic="T extends { id: FieldType }">
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { ChevronRightIcon, ChevronLeftIcon, XMarkIcon } from "@heroicons/vue/20/solid";
|
||||
import Spinner from "./Spinner.vue";
|
||||
import type { FieldType } from "@/types/dynamicQueries";
|
||||
|
||||
const props = defineProps({
|
||||
items: { type: Array<T>, default: [] },
|
||||
|
|
@ -105,6 +106,9 @@ const emit = defineEmits({
|
|||
search(search: string) {
|
||||
return typeof search == "number";
|
||||
},
|
||||
clickRow(id: FieldType) {
|
||||
return true;
|
||||
},
|
||||
});
|
||||
|
||||
const entryCount = computed(() => props.totalCount ?? props.items.length);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Abfrage abspeichern</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
|
||||
<div>
|
||||
<label for="title">Titel</label>
|
||||
<input type="text" id="title" required />
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</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 class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useQueryStoreStore } from "@/stores/admin/queryStore";
|
||||
import type { CreateQueryViewModel } from "@/viewmodels/admin/query.models";
|
||||
import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["query"]),
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useQueryStoreStore, ["createQueryStore"]),
|
||||
triggerCreate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let createAward: CreateQueryViewModel = {
|
||||
title: formData.title.value,
|
||||
query: this.query ?? "",
|
||||
};
|
||||
this.createQueryStore(createAward)
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Auszeichnung {{ query?.title }} löschen?</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useQueryStoreStore } from "@/stores/admin/queryStore";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useQueryStoreStore, ["queries"]),
|
||||
query() {
|
||||
return this.queries.find((t) => t.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useQueryStoreStore, ["deleteQueryStore"]),
|
||||
triggerDelete() {
|
||||
this.deleteQueryStore(this.data)
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
|
||||
<div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
|
||||
<p>{{ queryItem.title }}</p>
|
||||
<div class="flex flex-row">
|
||||
<div @click="loadUpdate">
|
||||
<EyeIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
<div v-if="can('update', 'settings', 'query_store')" @click="loadUpdate">
|
||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
<div v-if="can('delete', 'settings', 'query_store')" @click="openDeleteModal">
|
||||
<TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
|
||||
import { mapState, mapActions, mapWritableState } from "pinia";
|
||||
import { EyeIcon, PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import type { QueryViewModel } from "@/viewmodels/admin/query.models";
|
||||
import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
queryItem: { type: Object as PropType<QueryViewModel>, default: {} },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
...mapWritableState(useQueryBuilderStore, ["query", "activeQueryId"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
loadUpdate() {
|
||||
this.activeQueryId = this.queryItem.id;
|
||||
this.query = this.queryItem.query;
|
||||
this.$router.push({ name: "admin-club-query_builder" });
|
||||
},
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/settings/queryStore/DeleteQueryStoreModal.vue"))),
|
||||
this.queryItem.id
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Abfrage aktualisieren</p>
|
||||
</div>
|
||||
<br />
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<p>Abfrage mit dem Titel: "{{ activeQuery?.title }}" überschreiben</p>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="changeToCreate">
|
||||
neu speichern
|
||||
</button>
|
||||
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerUpdate">
|
||||
überschreiben
|
||||
</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useQueryStoreStore } from "@/stores/admin/queryStore";
|
||||
import type { CreateQueryViewModel, UpdateQueryViewModel } from "@/viewmodels/admin/query.models";
|
||||
import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useQueryBuilderStore, ["query"]),
|
||||
...mapState(useQueryStoreStore, ["queries"]),
|
||||
activeQuery() {
|
||||
return this.queries.find((t) => t.id == this.data);
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal", "openModal"]),
|
||||
...mapActions(useQueryStoreStore, ["updateActiveQueryStore"]),
|
||||
changeToCreate() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/settings/queryStore/CreateQueryStoreModal.vue")))
|
||||
);
|
||||
},
|
||||
triggerUpdate() {
|
||||
let updateQuery: UpdateQueryViewModel = {
|
||||
id: this.data,
|
||||
query: this.query ?? "",
|
||||
};
|
||||
this.updateActiveQueryStore(updateQuery)
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
201
src/components/queryBuilder/BuilderHost.vue
Normal file
201
src/components/queryBuilder/BuilderHost.vue
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
<template>
|
||||
<div class="flex flex-col border border-gray-300 rounded-md select-none">
|
||||
<div class="flex flex-row max-lg:flex-wrap gap-2 border-b border-gray-300 p-2">
|
||||
<div
|
||||
class="p-1 border border-gray-400 bg-green-200 rounded-md"
|
||||
title="Abfrage starten"
|
||||
@click="$emit('query:run')"
|
||||
>
|
||||
<PlayIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
<div
|
||||
class="p-1 border border-gray-400 bg-gray-100 rounded-md"
|
||||
title="Ergebnisse exportieren"
|
||||
@click="$emit('results:export')"
|
||||
>
|
||||
<ArchiveBoxArrowDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
<div
|
||||
class="p-1 border border-gray-400 bg-red-200 rounded-md"
|
||||
title="Ergebnisse leeren"
|
||||
@click="$emit('results:clear')"
|
||||
>
|
||||
<NoSymbolIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
<div class="p-1 border border-gray-400 bg-red-200 rounded-md" title="Anfrage löschen" @click="clearQuery">
|
||||
<TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
<div class="grow"></div>
|
||||
<div
|
||||
v-if="allowPredefinedSelect && can('read', 'settings', 'query_store')"
|
||||
class="flex flex-row gap-2 max-lg:w-full max-lg:order-10"
|
||||
>
|
||||
<select v-model="activeQueryId" class="max-h-[34px] !py-0">
|
||||
<option :value="undefined" disabled>gepeicherte Anfrage auswählen</option>
|
||||
<option v-for="query in queries" :key="query.id" :value="query.id" @click="value = query.query">
|
||||
{{ query.title }}
|
||||
</option>
|
||||
</select>
|
||||
<div
|
||||
v-if="can('create', 'settings', 'query_store')"
|
||||
class="p-1 border border-gray-400 bg-gray-100 rounded-md"
|
||||
title="Abfrage speichern"
|
||||
@click="$emit('query:save')"
|
||||
>
|
||||
<InboxArrowDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow max-lg:hidden"></div>
|
||||
<div class="flex flex-row min-w-fit overflow-hidden border border-gray-400 rounded-md">
|
||||
<div
|
||||
class="p-1"
|
||||
:class="queryMode == 'structure' ? 'bg-gray-200' : ''"
|
||||
title="Schema-Struktur"
|
||||
@click="queryMode = 'structure'"
|
||||
>
|
||||
<SparklesIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
<div
|
||||
class="p-1"
|
||||
:class="typeof value == 'object' && queryMode != 'structure' ? 'bg-gray-200' : ''"
|
||||
title="Visual Builder"
|
||||
@click="queryMode = 'builder'"
|
||||
>
|
||||
<RectangleGroupIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
<div
|
||||
class="p-1"
|
||||
:class="typeof value == 'string' && queryMode != 'structure' ? 'bg-gray-200' : ''"
|
||||
title="SQL Editor"
|
||||
@click="queryMode = 'editor'"
|
||||
>
|
||||
<CommandLineIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 h-44 md:h-60 w-full overflow-y-auto">
|
||||
<div v-if="queryMode == 'structure'">
|
||||
<img src="/administration-db.png" class="h-full w-full cursor-pointer" @click="showStructure" />
|
||||
</div>
|
||||
<textarea v-else-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
|
||||
<Table v-else v-model="value" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
|
||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||
import type { DynamicQueryStructure } from "../../types/dynamicQueries";
|
||||
import {
|
||||
ArchiveBoxArrowDownIcon,
|
||||
CommandLineIcon,
|
||||
InboxArrowDownIcon,
|
||||
NoSymbolIcon,
|
||||
PlayIcon,
|
||||
RectangleGroupIcon,
|
||||
TrashIcon,
|
||||
SparklesIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import { useModalStore } from "../../stores/modal";
|
||||
import Table from "./Table.vue";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useQueryStoreStore } from "@/stores/admin/queryStore";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
modelValue: {
|
||||
type: [Object, String] as PropType<DynamicQueryStructure | string>,
|
||||
default: {
|
||||
select: "*",
|
||||
table: "",
|
||||
where: [],
|
||||
join: [],
|
||||
orderBy: [],
|
||||
},
|
||||
},
|
||||
allowPredefinedSelect: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value", "query:run", "query:save", "results:export", "results:clear"],
|
||||
watch: {
|
||||
queryMode() {
|
||||
if (this.queryMode == "builder") {
|
||||
this.value = {
|
||||
select: "*",
|
||||
table: "",
|
||||
where: [],
|
||||
join: [],
|
||||
orderBy: [],
|
||||
};
|
||||
} else {
|
||||
this.value = "";
|
||||
}
|
||||
this.activeQueryId = undefined;
|
||||
},
|
||||
activeQueryId() {
|
||||
let query = this.queries.find((t) => t.id == this.activeQueryId)?.query;
|
||||
if (query != undefined) {
|
||||
if (typeof query == "string") {
|
||||
this.queryMode = "editor";
|
||||
} else {
|
||||
this.queryMode = "builder";
|
||||
}
|
||||
this.value = query;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
autoChangeFlag: false as boolean,
|
||||
queryMode: "builder" as "builder" | "editor" | "structure",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
...mapState(useQueryBuilderStore, ["tableMetas", "loading"]),
|
||||
...mapWritableState(useQueryBuilderStore, ["activeQueryId"]),
|
||||
...mapState(useQueryStoreStore, ["queries"]),
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: DynamicQueryStructure) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchTableMetas();
|
||||
this.fetchQueries();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
...mapActions(useQueryBuilderStore, ["fetchTableMetas"]),
|
||||
...mapActions(useQueryStoreStore, ["fetchQueries"]),
|
||||
clearQuery() {
|
||||
this.$emit("update:model-value", undefined);
|
||||
this.activeQueryId = undefined;
|
||||
if (typeof this.value != "string") {
|
||||
this.value = {
|
||||
select: "*",
|
||||
table: "",
|
||||
where: [],
|
||||
join: [],
|
||||
orderBy: [],
|
||||
};
|
||||
} else {
|
||||
this.value = "";
|
||||
}
|
||||
},
|
||||
showStructure() {
|
||||
this.openModal(markRaw(defineAsyncComponent(() => import("@/components/queryBuilder/StructureModal.vue"))));
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
80
src/components/queryBuilder/ColumnSelect.vue
Normal file
80
src/components/queryBuilder/ColumnSelect.vue
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="w-14 min-w-14 pt-2">SELECT</p>
|
||||
<div class="flex flex-row flex-wrap gap-2 items-center">
|
||||
<p
|
||||
class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
|
||||
:class="value == '*' ? 'border-gray-600 bg-gray-200' : ''"
|
||||
@click="value = '*'"
|
||||
>
|
||||
*
|
||||
</p>
|
||||
<p
|
||||
v-for="col in activeTable?.columns"
|
||||
:key="col.column"
|
||||
class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
|
||||
:class="value.includes(col.column) ? 'border-gray-600 bg-gray-200' : ''"
|
||||
@click="value = [col.column]"
|
||||
>
|
||||
{{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: [Array, String] as PropType<"*" | Array<string>>,
|
||||
default: "*",
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
activeTable() {
|
||||
return this.tableMetas.find((tm) => tm.tableName == this.table);
|
||||
},
|
||||
foreignColumns() {
|
||||
return this.activeTable?.relations.map((r) => r.column);
|
||||
},
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: "*" | Array<string>) {
|
||||
let tmp = this.modelValue;
|
||||
if (val == "*") {
|
||||
tmp = val;
|
||||
} else {
|
||||
if (Array.isArray(tmp)) {
|
||||
let index = tmp.findIndex((t) => t == val[0]);
|
||||
if (index == -1) tmp.push(val[0]);
|
||||
else tmp.splice(index, 1);
|
||||
} else {
|
||||
tmp = val;
|
||||
}
|
||||
}
|
||||
if (tmp != "*" && tmp.length == 0) {
|
||||
tmp = "*";
|
||||
}
|
||||
this.$emit("update:model-value", tmp);
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
148
src/components/queryBuilder/Condition.vue
Normal file
148
src/components/queryBuilder/Condition.vue
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 items-center w-full">
|
||||
<select v-if="concat != '_'" v-model="concat" class="!w-20 !h-fit">
|
||||
<option value="" disabled>Verknüpfung auswählen</option>
|
||||
<option v-for="operation in ['AND', 'OR']" :value="operation">
|
||||
{{ operation }}
|
||||
</option>
|
||||
</select>
|
||||
<select v-model="column">
|
||||
<option value="" disabled>Verknüpfung auswählen</option>
|
||||
<option v-for="col in activeTable?.columns" :value="col.column">
|
||||
{{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
|
||||
</option>
|
||||
</select>
|
||||
<select v-model="operation" class="!w-fit !h-fit">
|
||||
<option value="" disabled>Vergleich auswählen</option>
|
||||
<option v-for="op in whereOperationArray" :value="op">
|
||||
{{ op }}
|
||||
</option>
|
||||
</select>
|
||||
<div v-if="!operation.toLowerCase().includes('null')" class="contents">
|
||||
<div v-if="operation == 'between'" class="contents">
|
||||
<input
|
||||
:value="(value as any)?.start"
|
||||
@input="(e) => ((value as any).start = (e.target as HTMLInputElement).value)"
|
||||
:type="inputType"
|
||||
:min="columnType == 'boolean' ? 0 : undefined"
|
||||
:max="columnType == 'boolean' ? 1 : undefined"
|
||||
/>
|
||||
<p>-</p>
|
||||
<input
|
||||
:value="(value as any)?.end"
|
||||
@input="(e) => ((value as any).end = (e.target as HTMLInputElement).value)"
|
||||
:type="inputType"
|
||||
:min="columnType == 'boolean' ? 0 : undefined"
|
||||
:max="columnType == 'boolean' ? 1 : undefined"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
v-else
|
||||
v-model="value"
|
||||
:type="inputType"
|
||||
:min="columnType == 'boolean' ? 0 : undefined"
|
||||
:max="columnType == 'boolean' ? 1 : undefined"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="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" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import {
|
||||
whereOperationArray,
|
||||
type ConditionStructure,
|
||||
type ConditionValue,
|
||||
type WhereOperation,
|
||||
type WhereType,
|
||||
} from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: Object as PropType<ConditionStructure & { structureType: "condition" }>,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value", "remove"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
activeTable() {
|
||||
return this.tableMetas.find((tm) => tm.tableName == this.table);
|
||||
},
|
||||
foreignColumns() {
|
||||
return this.activeTable?.relations.map((r) => r.column);
|
||||
},
|
||||
columnType() {
|
||||
return this.activeTable?.columns.find((c) => c.column == this.column)?.type;
|
||||
},
|
||||
inputType() {
|
||||
if (this.operation.includes("timespan")) return "number";
|
||||
switch (this.columnType) {
|
||||
case "int":
|
||||
return "number";
|
||||
case "varchar":
|
||||
return "text";
|
||||
case "date":
|
||||
return "date";
|
||||
case "boolean":
|
||||
return "number"; // "checkbox";
|
||||
default:
|
||||
return "text";
|
||||
}
|
||||
},
|
||||
concat: {
|
||||
get() {
|
||||
return this.modelValue.concat;
|
||||
},
|
||||
set(val: WhereType) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, concat: val });
|
||||
},
|
||||
},
|
||||
column: {
|
||||
get() {
|
||||
return this.modelValue.column;
|
||||
},
|
||||
set(val: string) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, column: val });
|
||||
},
|
||||
},
|
||||
operation: {
|
||||
get() {
|
||||
return this.modelValue.operation;
|
||||
},
|
||||
set(val: WhereOperation) {
|
||||
if (val == "between") {
|
||||
this.$emit("update:model-value", { ...this.modelValue, operation: val, value: { start: "", end: "" } });
|
||||
} else {
|
||||
this.$emit("update:model-value", { ...this.modelValue, operation: val });
|
||||
}
|
||||
},
|
||||
},
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue.value;
|
||||
},
|
||||
set(val: ConditionValue) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, value: val });
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
76
src/components/queryBuilder/Join.vue
Normal file
76
src/components/queryBuilder/Join.vue
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2">
|
||||
<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 justify-end w-full">
|
||||
<JoinTable
|
||||
v-for="(join, index) in value"
|
||||
:model-value="join"
|
||||
:table="table"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addToValue">
|
||||
<PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { DynamicQueryStructure } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import { PlusIcon } from "@heroicons/vue/24/outline";
|
||||
import JoinTable from "./JoinTable.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: Array as PropType<Array<DynamicQueryStructure & { foreignColumn: string }>>,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
activeTable() {
|
||||
return this.tableMetas.find((tm) => tm.tableName == this.table);
|
||||
},
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addToValue() {
|
||||
this.value.push({
|
||||
select: "*",
|
||||
table: "",
|
||||
where: [],
|
||||
join: [],
|
||||
orderBy: [],
|
||||
foreignColumn: "",
|
||||
});
|
||||
},
|
||||
removeAtIndex(index: number) {
|
||||
this.value.splice(index, 1);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
89
src/components/queryBuilder/JoinTable.vue
Normal file
89
src/components/queryBuilder/JoinTable.vue
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<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">
|
||||
<select v-model="foreignColumn" class="w-full">
|
||||
<option value="" disabled>Relation auswählen</option>
|
||||
<option v-for="relation in activeTable?.relations" :value="relation.column">
|
||||
{{ relation.column }} -> {{ joinTableName(relation.referencedTableName) }}
|
||||
</option>
|
||||
</select>
|
||||
<Table v-model="value" disable-table-select />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { DynamicQueryStructure } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import Table from "./Table.vue";
|
||||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { joinTableName } from "@/helpers/queryFormatter";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: Object as PropType<
|
||||
DynamicQueryStructure & {
|
||||
foreignColumn: string;
|
||||
}
|
||||
>,
|
||||
default: {
|
||||
select: "*",
|
||||
table: "",
|
||||
where: [],
|
||||
join: [],
|
||||
orderBy: [],
|
||||
foreignColumn: "",
|
||||
},
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value", "remove"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
activeTable() {
|
||||
return this.tableMetas.find((tm) => tm.tableName == this.table);
|
||||
},
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(
|
||||
val: DynamicQueryStructure & {
|
||||
foreignColumn: string;
|
||||
}
|
||||
) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
foreignColumn: {
|
||||
get() {
|
||||
return this.modelValue.foreignColumn;
|
||||
},
|
||||
set(val: string) {
|
||||
let relTable = this.activeTable?.relations.find((r) => r.column == val);
|
||||
this.$emit("update:model-value", {
|
||||
...this.modelValue,
|
||||
foreignColumn: val,
|
||||
table: joinTableName(relTable?.referencedTableName ?? ""),
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
64
src/components/queryBuilder/NestedCondition.vue
Normal file
64
src/components/queryBuilder/NestedCondition.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 w-full border border-gray-300 rounded-md p-1">
|
||||
<select v-if="concat != '_'" v-model="concat" class="!w-20 !h-fit">
|
||||
<option value="" disabled>Verknüpfung auswählen</option>
|
||||
<option v-for="operation in ['AND', 'OR']" :value="operation">
|
||||
{{ operation }}
|
||||
</option>
|
||||
</select>
|
||||
<NestedWhere v-model="conditions" :table="table" />
|
||||
<div
|
||||
class="flex items-center justify-center h-full 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" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { ConditionStructure, WhereType } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import NestedWhere from "./NestedWhere.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: Object as PropType<ConditionStructure & { structureType: "nested" }>,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value", "remove"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
concat: {
|
||||
get() {
|
||||
return this.modelValue.concat;
|
||||
},
|
||||
set(val: WhereType) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, concat: val });
|
||||
},
|
||||
},
|
||||
conditions: {
|
||||
get() {
|
||||
return this.modelValue.conditions;
|
||||
},
|
||||
set(val: Array<ConditionStructure>) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, conditions: val });
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
94
src/components/queryBuilder/NestedWhere.vue
Normal file
94
src/components/queryBuilder/NestedWhere.vue
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 w-full">
|
||||
<div class="flex flex-row flex-wrap gap-2 items-center w-full">
|
||||
<div v-for="(condition, index) in value" class="contents">
|
||||
<NestedCondition
|
||||
v-if="condition.structureType == 'nested'"
|
||||
:model-value="condition"
|
||||
:table="table"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
<Condition
|
||||
v-else
|
||||
:model-value="condition"
|
||||
:table="table"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 items-center justify-end w-full">
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addConditionToValue">
|
||||
<PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addNestedToValue">
|
||||
<RectangleStackIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { ConditionStructure } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import NestedCondition from "./NestedCondition.vue";
|
||||
import Condition from "./Condition.vue";
|
||||
import { PlusIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: Array as PropType<Array<ConditionStructure>>,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
activeTable() {
|
||||
return this.tableMetas.find((tm) => tm.tableName == this.table);
|
||||
},
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: Array<ConditionStructure>) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addNestedToValue() {
|
||||
this.value.push({
|
||||
structureType: "nested",
|
||||
concat: this.value.length == 0 ? "_" : "AND",
|
||||
conditions: [],
|
||||
});
|
||||
},
|
||||
addConditionToValue() {
|
||||
this.value.push({
|
||||
structureType: "condition",
|
||||
concat: this.value.length == 0 ? "_" : "AND",
|
||||
operation: "eq",
|
||||
column: "",
|
||||
value: "",
|
||||
});
|
||||
},
|
||||
removeAtIndex(index: number) {
|
||||
this.value.splice(index, 1);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
74
src/components/queryBuilder/Order.vue
Normal file
74
src/components/queryBuilder/Order.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="w-14 min-w-14 pt-2">ORDER</p>
|
||||
<div class="flex flex-row flex-wrap gap-2 items-center w-full">
|
||||
<OrderStructure
|
||||
v-for="(order, index) in value"
|
||||
:model-value="order"
|
||||
:table="table"
|
||||
:columns="columns"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
<div class="flex flex-row gap-2 items-center justify-end w-full">
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addToValue">
|
||||
<PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { OrderByStructure } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import OrderStructure from "./OrderStructure.vue";
|
||||
import { PlusIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
columns: {
|
||||
type: [Array, String] as PropType<"*" | Array<string>>,
|
||||
default: "*",
|
||||
},
|
||||
modelValue: {
|
||||
type: Array as PropType<Array<OrderByStructure>>,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: Array<OrderByStructure>) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addToValue() {
|
||||
this.value.push({
|
||||
column: "",
|
||||
order: "ASC",
|
||||
});
|
||||
},
|
||||
removeAtIndex(index: number) {
|
||||
this.value.splice(index, 1);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
79
src/components/queryBuilder/OrderStructure.vue
Normal file
79
src/components/queryBuilder/OrderStructure.vue
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 items-center w-full">
|
||||
<select v-model="column" class="w-full">
|
||||
<option value="" disabled>Spalte auswählen</option>
|
||||
<option v-for="column in selectableColumns" :value="column">
|
||||
{{ column }}
|
||||
</option>
|
||||
</select>
|
||||
<select v-model="order">
|
||||
<option value="" disabled>Sortierung auswählen</option>
|
||||
<option v-for="order in ['ASC', 'DESC']" :value="order">
|
||||
{{ order }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="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" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { OrderByStructure, OrderByType } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
columns: {
|
||||
type: [Array, String] as PropType<"*" | Array<string>>,
|
||||
default: "*",
|
||||
},
|
||||
modelValue: {
|
||||
type: Object as PropType<OrderByStructure>,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value", "remove"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...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;
|
||||
}
|
||||
},
|
||||
column: {
|
||||
get() {
|
||||
return this.modelValue.column;
|
||||
},
|
||||
set(val: string) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, column: val });
|
||||
},
|
||||
},
|
||||
order: {
|
||||
get() {
|
||||
return this.modelValue.order;
|
||||
},
|
||||
set(val: OrderByType) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, order: val });
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
32
src/components/queryBuilder/StructureModal.vue
Normal file
32
src/components/queryBuilder/StructureModal.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class="flex flex-col w-full h-full overflow-hidden">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Datenstruktur</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="grow w-full overflow-hidden">
|
||||
<img src="/administration-db.png" class="max-h-full max-w-full h-auto w-auto mx-auto" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal">schnließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
85
src/components/queryBuilder/Table.vue
Normal file
85
src/components/queryBuilder/Table.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<TableSelect v-model="table" :disableTableSelect="disableTableSelect" />
|
||||
<ColumnSelect v-if="table != ''" v-model="columnSelect" :table="table" />
|
||||
<Where v-if="table != ''" v-model="where" :table="table" />
|
||||
<Order v-if="table != ''" v-model="order" :table="table" :columns="columnSelect" />
|
||||
<Join v-if="table != ''" v-model="modelValue.join" :table="table" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { ConditionStructure, DynamicQueryStructure, OrderByStructure } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import ColumnSelect from "./ColumnSelect.vue";
|
||||
import Where from "./Where.vue";
|
||||
import Order from "./Order.vue";
|
||||
import Join from "./Join.vue";
|
||||
import TableSelect from "./TableSelect.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object as PropType<DynamicQueryStructure>,
|
||||
default: {
|
||||
select: "*",
|
||||
table: "",
|
||||
where: [],
|
||||
join: [],
|
||||
orderBy: [],
|
||||
},
|
||||
},
|
||||
disableTableSelect: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value"],
|
||||
computed: {
|
||||
table: {
|
||||
get() {
|
||||
return this.modelValue.table || "";
|
||||
},
|
||||
set(val: string) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, table: val });
|
||||
},
|
||||
},
|
||||
columnSelect: {
|
||||
get() {
|
||||
return this.modelValue.select;
|
||||
},
|
||||
set(val: "*" | Array<string>) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, select: val });
|
||||
},
|
||||
},
|
||||
where: {
|
||||
get() {
|
||||
return this.modelValue.where;
|
||||
},
|
||||
set(val: Array<ConditionStructure>) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, where: val });
|
||||
},
|
||||
},
|
||||
order: {
|
||||
get() {
|
||||
return this.modelValue.orderBy;
|
||||
},
|
||||
set(val: Array<OrderByStructure>) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, orderBy: val });
|
||||
},
|
||||
},
|
||||
join: {
|
||||
get() {
|
||||
return this.modelValue.join;
|
||||
},
|
||||
set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, join: val });
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
44
src/components/queryBuilder/TableSelect.vue
Normal file
44
src/components/queryBuilder/TableSelect.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="w-14 min-w-14 pt-2">FROM</p>
|
||||
<select v-model="value" :disabled="disableTableSelect">
|
||||
<option value="" disabled>Tabelle auswählen</option>
|
||||
<option v-for="table in tableMetas" :value="table.tableName">
|
||||
{{ table.tableName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState } from "pinia";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disableTableSelect: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value"],
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: string) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
95
src/components/queryBuilder/Where.vue
Normal file
95
src/components/queryBuilder/Where.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 w-full">
|
||||
<p class="w-14 min-w-14 pt-2">WHERE</p>
|
||||
<div class="flex flex-row flex-wrap gap-2 items-center w-full">
|
||||
<div v-for="(condition, index) in value" class="contents">
|
||||
<NestedCondition
|
||||
v-if="condition.structureType == 'nested'"
|
||||
:model-value="condition"
|
||||
:table="table"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
<Condition
|
||||
v-else
|
||||
:model-value="condition"
|
||||
:table="table"
|
||||
@update:model-value="($event) => (value[index] = $event)"
|
||||
@remove="removeAtIndex(index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 items-center justify-end w-full">
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addConditionToValue">
|
||||
<PlusIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
<div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="addNestedToValue">
|
||||
<RectangleStackIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import type { ConditionStructure } from "../../types/dynamicQueries";
|
||||
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
|
||||
import NestedCondition from "./NestedCondition.vue";
|
||||
import Condition from "./Condition.vue";
|
||||
import { PlusIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: {
|
||||
type: Array as PropType<Array<ConditionStructure>>,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["tableMetas"]),
|
||||
activeTable() {
|
||||
return this.tableMetas.find((tm) => tm.tableName == this.table);
|
||||
},
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: Array<ConditionStructure>) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addNestedToValue() {
|
||||
this.value.push({
|
||||
structureType: "nested",
|
||||
concat: this.value.length == 0 ? "_" : "AND",
|
||||
conditions: [],
|
||||
});
|
||||
},
|
||||
addConditionToValue() {
|
||||
this.value.push({
|
||||
structureType: "condition",
|
||||
concat: this.value.length == 0 ? "_" : "AND",
|
||||
operation: "eq",
|
||||
column: "",
|
||||
value: "",
|
||||
});
|
||||
},
|
||||
removeAtIndex(index: number) {
|
||||
this.value.splice(index, 1);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
58
src/helpers/queryFormatter.ts
Normal file
58
src/helpers/queryFormatter.ts
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { joinTableFormatter, type FieldType, type QueryResult } from "../types/dynamicQueries";
|
||||
|
||||
export function joinTableName(name: string): string {
|
||||
let normalized = joinTableFormatter[name];
|
||||
return normalized ?? name;
|
||||
}
|
||||
|
||||
export function flattenQueryResult(result: Array<QueryResult>): Array<{ [key: string]: FieldType }> {
|
||||
function flatten(row: QueryResult, prefix: string = ""): Array<{ [key: string]: FieldType }> {
|
||||
let results: Array<{ [key: string]: FieldType }> = [{}];
|
||||
|
||||
for (const key in row) {
|
||||
const value = row[key];
|
||||
const newKey = prefix ? `${prefix}.${key}` : key;
|
||||
|
||||
if (Array.isArray(value) && value.every((item) => typeof item === "object" && item !== null)) {
|
||||
console.log(value, newKey);
|
||||
const arrayResults: Array<{ [key: string]: FieldType }> = [];
|
||||
value.forEach((item) => {
|
||||
const flattenedItems = flatten(item, newKey);
|
||||
arrayResults.push(...flattenedItems);
|
||||
});
|
||||
|
||||
const tempResults: Array<{ [key: string]: FieldType }> = [];
|
||||
results.forEach((res) => {
|
||||
arrayResults.forEach((arrRes) => {
|
||||
tempResults.push({ ...res, ...arrRes });
|
||||
});
|
||||
});
|
||||
results = tempResults;
|
||||
} else if (value && typeof value === "object" && !Array.isArray(value)) {
|
||||
console.log(value, newKey);
|
||||
const objResults = flatten(value as QueryResult, newKey);
|
||||
const tempResults: Array<{ [key: string]: FieldType }> = [];
|
||||
results.forEach((res) => {
|
||||
objResults.forEach((objRes) => {
|
||||
tempResults.push({ ...res, ...objRes });
|
||||
});
|
||||
});
|
||||
results = tempResults;
|
||||
} else {
|
||||
results.forEach((res) => {
|
||||
res[newKey] = String(value);
|
||||
});
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
const flattenedResults: Array<{ [key: string]: FieldType }> = [];
|
||||
|
||||
result.forEach((item) => {
|
||||
const flattenedItems = flatten(item);
|
||||
flattenedResults.push(...flattenedItems);
|
||||
});
|
||||
|
||||
return flattenedResults;
|
||||
}
|
||||
|
|
@ -79,17 +79,20 @@ a[button].disabled {
|
|||
}
|
||||
|
||||
input:not([type="checkbox"]),
|
||||
textarea {
|
||||
textarea,
|
||||
select {
|
||||
@apply rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none;
|
||||
}
|
||||
|
||||
input[readonly],
|
||||
textarea[readonly] {
|
||||
textarea[readonly],
|
||||
select[readonly] {
|
||||
@apply pointer-events-none;
|
||||
}
|
||||
|
||||
input[disabled],
|
||||
textarea[disabled] {
|
||||
textarea[disabled],
|
||||
select[disabled] {
|
||||
@apply opacity-75 pointer-events-none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -239,6 +239,13 @@ const router = createRouter({
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "query-builder",
|
||||
name: "admin-club-query_builder",
|
||||
component: () => import("@/views/admin/club/query/Builder.vue"),
|
||||
meta: { type: "read", section: "club", module: "query" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -324,22 +331,22 @@ const router = createRouter({
|
|||
],
|
||||
},
|
||||
{
|
||||
path: "communication",
|
||||
name: "admin-settings-communication-route",
|
||||
path: "communication-type",
|
||||
name: "admin-settings-communication_type-route",
|
||||
component: () => import("@/views/RouterView.vue"),
|
||||
meta: { type: "read", section: "settings", module: "communication" },
|
||||
meta: { type: "read", section: "settings", module: "communication_type" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "admin-settings-communication",
|
||||
name: "admin-settings-communication_type",
|
||||
component: () => import("@/views/admin/settings/CommunicationType.vue"),
|
||||
},
|
||||
{
|
||||
path: ":id/edit",
|
||||
name: "admin-settings-communication-edit",
|
||||
name: "admin-settings-communication_type-edit",
|
||||
component: () => import("@/views/admin/settings/CommunicationTypeEdit.vue"),
|
||||
meta: { type: "update", section: "settings", module: "communication" },
|
||||
meta: { type: "update", section: "settings", module: "communication_type" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
|
|
@ -389,6 +396,13 @@ const router = createRouter({
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "query-store",
|
||||
name: "admin-settings-query_store",
|
||||
component: () => import("@/views/admin/settings/QueryStore.vue"),
|
||||
meta: { type: "read", section: "settings", module: "query_store" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@ export const useNavigationStore = defineStore("navigation", {
|
|||
...(abilityStore.can("read", "club", "calendar") ? [{ key: "calendar", title: "Kalender" }] : []),
|
||||
...(abilityStore.can("read", "club", "protocol") ? [{ key: "protocol", title: "Protokolle" }] : []),
|
||||
...(abilityStore.can("read", "club", "newsletter") ? [{ key: "newsletter", title: "Newsletter" }] : []),
|
||||
...(abilityStore.can("read", "club", "query") ? [{ key: "query_builder", title: "Query Builder" }] : []),
|
||||
],
|
||||
},
|
||||
settings: {
|
||||
|
|
@ -102,8 +103,8 @@ export const useNavigationStore = defineStore("navigation", {
|
|||
...(abilityStore.can("read", "settings", "executive_position")
|
||||
? [{ key: "executive_position", title: "Vereinsämter" }]
|
||||
: []),
|
||||
...(abilityStore.can("read", "settings", "communication")
|
||||
? [{ key: "communication", title: "Kommunikationsarten" }]
|
||||
...(abilityStore.can("read", "settings", "communication_type")
|
||||
? [{ key: "communication_type", title: "Kommunikationsarten" }]
|
||||
: []),
|
||||
...(abilityStore.can("read", "settings", "membership_status")
|
||||
? [{ key: "membership_status", title: "Mitgliedsstatus" }]
|
||||
|
|
@ -111,6 +112,7 @@ export const useNavigationStore = defineStore("navigation", {
|
|||
...(abilityStore.can("read", "settings", "calendar_type")
|
||||
? [{ key: "calendar_type", title: "Terminarten" }]
|
||||
: []),
|
||||
...(abilityStore.can("read", "settings", "query") ? [{ key: "query_store", title: "Query Store" }] : []),
|
||||
],
|
||||
},
|
||||
user: {
|
||||
|
|
|
|||
93
src/stores/admin/queryBuilder.ts
Normal file
93
src/stores/admin/queryBuilder.ts
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { http } from "@/serverCom";
|
||||
import type { TableMeta } from "../../viewmodels/admin/query.models";
|
||||
import type { DynamicQueryStructure, FieldType } from "../../types/dynamicQueries";
|
||||
import { flattenQueryResult } from "../../helpers/queryFormatter";
|
||||
|
||||
export const useQueryBuilderStore = defineStore("queryBuilder", {
|
||||
state: () => {
|
||||
return {
|
||||
tableMetas: [] as Array<TableMeta>,
|
||||
loading: "loading" as "loading" | "fetched" | "failed",
|
||||
data: [] as Array<{ id: FieldType; [key: string]: FieldType }>,
|
||||
totalLength: 0 as number,
|
||||
loadingData: "fetched" as "loading" | "fetched" | "failed",
|
||||
queryError: "" as string | { sql: string; code: string; msg: string },
|
||||
query: undefined as undefined | DynamicQueryStructure | string,
|
||||
activeQueryId: undefined as undefined | number,
|
||||
isLoadedQuery: undefined as undefined | number,
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
fetchTableMetas() {
|
||||
this.loading = "loading";
|
||||
http
|
||||
.get("/admin/querybuilder/tables")
|
||||
.then((result) => {
|
||||
this.tableMetas = result.data;
|
||||
this.loading = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading = "failed";
|
||||
});
|
||||
},
|
||||
sendQuery(offset = 0, count = 25) {
|
||||
this.queryError = "";
|
||||
this.data = [];
|
||||
this.totalLength = 0;
|
||||
if (this.query == undefined || this.query == "" || (typeof this.query != "string" && this.query.table == ""))
|
||||
return;
|
||||
this.loadingData = "loading";
|
||||
http
|
||||
.post(`/admin/querybuilder/query?offset=${offset}&count=${count}`, {
|
||||
query: this.query,
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.data.stats == "success") {
|
||||
this.data = flattenQueryResult(result.data.rows).map((row) => ({
|
||||
id: row.id ?? "", // Ensure id is present
|
||||
...row,
|
||||
}));
|
||||
this.totalLength = result.data.total;
|
||||
this.loadingData = "fetched";
|
||||
} else {
|
||||
this.queryError = result.data ?? "An error occurred";
|
||||
this.loadingData = "failed";
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.queryError = "An error occurred";
|
||||
this.loadingData = "failed";
|
||||
});
|
||||
},
|
||||
clearResults() {
|
||||
this.data = [];
|
||||
this.totalLength = 0;
|
||||
this.queryError = "";
|
||||
this.loadingData = "fetched";
|
||||
},
|
||||
exportData() {
|
||||
if (this.data.length == 0) return;
|
||||
const csvString = [Object.keys(this.data[0]), ...this.data.map((d) => Object.values(d))]
|
||||
.map((e) => e.join(";"))
|
||||
.join("\n");
|
||||
|
||||
// Create a Blob from the CSV string
|
||||
const blob = new Blob([csvString], { type: "text/csv" });
|
||||
|
||||
// Create a download link
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "items.csv";
|
||||
|
||||
// Append the link to the document and trigger the download
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
},
|
||||
},
|
||||
});
|
||||
77
src/stores/admin/queryStore.ts
Normal file
77
src/stores/admin/queryStore.ts
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import { defineStore } from "pinia";
|
||||
import type { CreateQueryViewModel, QueryViewModel, UpdateQueryViewModel } from "@/viewmodels/admin/query.models";
|
||||
import { http } from "@/serverCom";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { useQueryBuilderStore } from "./queryBuilder";
|
||||
import { useModalStore } from "../modal";
|
||||
import { defineAsyncComponent, markRaw } from "vue";
|
||||
import { useAbilityStore } from "../ability";
|
||||
|
||||
export const useQueryStoreStore = defineStore("queryStore", {
|
||||
state: () => {
|
||||
return {
|
||||
queries: [] as Array<QueryViewModel>,
|
||||
loading: "loading" as "loading" | "fetched" | "failed",
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
fetchQueries() {
|
||||
this.loading = "loading";
|
||||
http
|
||||
.get("/admin/querystore")
|
||||
.then((result) => {
|
||||
this.queries = result.data;
|
||||
this.loading = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading = "failed";
|
||||
});
|
||||
},
|
||||
fetchQueryById(id: number): Promise<AxiosResponse<any, any>> {
|
||||
return http.get(`/admin/querystore/${id}`);
|
||||
},
|
||||
triggerSave() {
|
||||
const queryBuilderStore = useQueryBuilderStore();
|
||||
const modalStore = useModalStore();
|
||||
const abilityStore = useAbilityStore();
|
||||
if (queryBuilderStore.activeQueryId != undefined && abilityStore.can("update", "settings", "query_store")) {
|
||||
modalStore.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(() => import("@/components/admin/settings/queryStore/UpdateQueryStoreModal.vue"))
|
||||
),
|
||||
queryBuilderStore.activeQueryId
|
||||
);
|
||||
} else {
|
||||
modalStore.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(() => import("@/components/admin/settings/queryStore/CreateQueryStoreModal.vue"))
|
||||
)
|
||||
);
|
||||
}
|
||||
},
|
||||
async createQueryStore(query: CreateQueryViewModel): Promise<AxiosResponse<any, any>> {
|
||||
const result = await http.post(`/admin/querystore`, {
|
||||
query: query.query,
|
||||
title: query.title,
|
||||
});
|
||||
if (result.status == 200) {
|
||||
const queryBuilderStore = useQueryBuilderStore();
|
||||
queryBuilderStore.activeQueryId = result.data;
|
||||
}
|
||||
this.fetchQueries();
|
||||
return result;
|
||||
},
|
||||
async updateActiveQueryStore(query: UpdateQueryViewModel): Promise<AxiosResponse<any, any>> {
|
||||
const result = await http.patch(`/admin/querystore/${query.id}`, {
|
||||
query: query.query,
|
||||
});
|
||||
this.fetchQueries();
|
||||
return result;
|
||||
},
|
||||
async deleteQueryStore(queryStore: number): Promise<AxiosResponse<any, any>> {
|
||||
const result = await http.delete(`/admin/querystore/${queryStore}`);
|
||||
this.fetchQueries();
|
||||
return result;
|
||||
},
|
||||
},
|
||||
});
|
||||
87
src/types/dynamicQueries.ts
Normal file
87
src/types/dynamicQueries.ts
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
export interface DynamicQueryStructure {
|
||||
select: string[] | "*";
|
||||
table: string;
|
||||
where?: Array<ConditionStructure>;
|
||||
join?: Array<DynamicQueryStructure & { foreignColumn: string }>;
|
||||
orderBy?: Array<OrderByStructure>;
|
||||
}
|
||||
|
||||
export type ConditionStructure = (
|
||||
| {
|
||||
structureType: "condition";
|
||||
column: string;
|
||||
operation: WhereOperation;
|
||||
value: ConditionValue;
|
||||
}
|
||||
| {
|
||||
structureType: "nested";
|
||||
invert?: boolean;
|
||||
conditions: Array<ConditionStructure>;
|
||||
}
|
||||
) & {
|
||||
concat: WhereType;
|
||||
structureType: "condition" | "nested";
|
||||
};
|
||||
|
||||
export type ConditionValue = FieldType | Array<FieldType> | { start: FieldType; end: FieldType };
|
||||
export type FieldType = number | string | Date | boolean;
|
||||
|
||||
export type WhereType = "OR" | "AND" | "_"; // _ represents initial where in (sub-)query
|
||||
|
||||
export type WhereOperation =
|
||||
| "eq" // Equal
|
||||
| "neq" // Not equal
|
||||
| "lt" // Less than
|
||||
| "lte" // Less than or equal to
|
||||
| "gt" // Greater than
|
||||
| "gte" // Greater than or equal to
|
||||
| "in" // Included in an array
|
||||
| "notIn" // Not included in an array
|
||||
| "contains" // Contains
|
||||
| "notContains" // Does not contain
|
||||
| "null" // Is null
|
||||
| "notNull" // Is not null
|
||||
| "between" // Is between
|
||||
| "startsWith" // Starts with
|
||||
| "endsWith" // Ends with
|
||||
| "timespanEq"; // Date before x years (YYYY-01-01 <bis> YYYY-12-31)
|
||||
// TODO: age between | age equals | age greater | age smaller
|
||||
|
||||
export type OrderByStructure = {
|
||||
column: string;
|
||||
order: OrderByType;
|
||||
};
|
||||
|
||||
export type OrderByType = "ASC" | "DESC";
|
||||
|
||||
export type QueryResult = {
|
||||
[key: string]: FieldType | QueryResult | Array<QueryResult>;
|
||||
};
|
||||
|
||||
export const whereOperationArray = [
|
||||
"eq",
|
||||
"neq",
|
||||
"lt",
|
||||
"lte",
|
||||
"gt",
|
||||
"gte",
|
||||
// "in",
|
||||
// "notIn",
|
||||
"contains",
|
||||
"notContains",
|
||||
"null",
|
||||
"notNull",
|
||||
"between",
|
||||
"startsWith",
|
||||
"endsWith",
|
||||
"timespanEq",
|
||||
];
|
||||
|
||||
export const joinTableFormatter: { [key: string]: string } = {
|
||||
member_awards: "memberAwards",
|
||||
membership_status: "membershipStatus",
|
||||
member_qualifications: "memberQualifications",
|
||||
member_executive_positions: "memberExecutivePositions",
|
||||
communication_type: "communicationType",
|
||||
executive_position: "executivePosition",
|
||||
};
|
||||
|
|
@ -8,11 +8,13 @@ export type PermissionModule =
|
|||
| "qualification"
|
||||
| "award"
|
||||
| "executive_position"
|
||||
| "communication"
|
||||
| "communication_type"
|
||||
| "membership_status"
|
||||
| "calendar_type"
|
||||
| "user"
|
||||
| "role";
|
||||
| "role"
|
||||
| "query"
|
||||
| "query_store";
|
||||
|
||||
export type PermissionType = "read" | "create" | "update" | "delete";
|
||||
|
||||
|
|
@ -44,15 +46,25 @@ export const permissionModules: Array<PermissionModule> = [
|
|||
"qualification",
|
||||
"award",
|
||||
"executive_position",
|
||||
"communication",
|
||||
"communication_type",
|
||||
"membership_status",
|
||||
"calendar_type",
|
||||
"user",
|
||||
"role",
|
||||
"query",
|
||||
"query_store",
|
||||
];
|
||||
export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
|
||||
export const sectionsAndModules: SectionsAndModulesObject = {
|
||||
club: ["member", "calendar", "newsletter", "protocol"],
|
||||
settings: ["qualification", "award", "executive_position", "communication", "membership_status", "calendar_type"],
|
||||
club: ["member", "calendar", "newsletter", "protocol", "query"],
|
||||
settings: [
|
||||
"qualification",
|
||||
"award",
|
||||
"executive_position",
|
||||
"communication_type",
|
||||
"membership_status",
|
||||
"calendar_type",
|
||||
"query_store",
|
||||
],
|
||||
user: ["user", "role"],
|
||||
};
|
||||
|
|
|
|||
23
src/viewmodels/admin/query.models.ts
Normal file
23
src/viewmodels/admin/query.models.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import type { DynamicQueryStructure } from "../../types/dynamicQueries";
|
||||
|
||||
export interface TableMeta {
|
||||
tableName: string;
|
||||
columns: Array<{ column: string; type: string }>;
|
||||
relations: Array<{ column: string; relationType: string; referencedTableName: string }>;
|
||||
}
|
||||
|
||||
export interface QueryViewModel {
|
||||
id: number;
|
||||
title: string;
|
||||
query: string | DynamicQueryStructure;
|
||||
}
|
||||
|
||||
export interface CreateQueryViewModel {
|
||||
title: string;
|
||||
query: string | DynamicQueryStructure;
|
||||
}
|
||||
|
||||
export interface UpdateQueryViewModel {
|
||||
id: number;
|
||||
query: string | DynamicQueryStructure;
|
||||
}
|
||||
|
|
@ -53,52 +53,6 @@ export default defineComponent({
|
|||
computed: {
|
||||
...mapState(useMemberStore, ["members", "totalCount", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
entryCount() {
|
||||
return this.totalCount ?? this.members.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.members, this.showingStart, this.showingEnd);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchMembers(0, this.maxEntriesPerPage, true);
|
||||
|
|
@ -106,22 +60,6 @@ export default defineComponent({
|
|||
methods: {
|
||||
...mapActions(useMemberStore, ["fetchMembers"]),
|
||||
...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.members, pageStart, pageEnd).length;
|
||||
if (loadedElementCount < this.maxEntriesPerPage) this.fetchMembers(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/member/CreateMemberModal.vue")))
|
||||
|
|
|
|||
84
src/views/admin/club/query/Builder.vue
Normal file
84
src/views/admin/club/query/Builder.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<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">Query Builder</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
|
||||
<BuilderHost
|
||||
v-model="query"
|
||||
allow-predefined-select
|
||||
@query:run="sendQuery"
|
||||
@query:save="triggerSave"
|
||||
@results:clear="clearResults"
|
||||
@results:export="exportData"
|
||||
/>
|
||||
<p>Ergebnisse:</p>
|
||||
<div
|
||||
v-if="loadingData == 'failed'"
|
||||
class="flex flex-col p-2 border border-red-600 bg-red-200 rounded-md select-none"
|
||||
>
|
||||
<p v-if="typeof queryError == 'string'">
|
||||
{{ queryError }}
|
||||
</p>
|
||||
<div v-else>
|
||||
<p>
|
||||
CODE: <br />
|
||||
{{ queryError.code }}
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
MSG: <br />
|
||||
{{ queryError.msg }}
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
RESULTING SQL: <br />
|
||||
{{ queryError.sql }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Pagination
|
||||
v-else
|
||||
:items="data"
|
||||
:totalCount="totalLength"
|
||||
:indicateLoading="loadingData == 'loading'"
|
||||
@load-data="(offset, count) => sendQuery(offset, count)"
|
||||
>
|
||||
<template #pageRow="{ row }: { row: { id: FieldType; [key: string]: FieldType } }">
|
||||
<p>{{ row }}</p>
|
||||
</template>
|
||||
</Pagination>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import Pagination from "@/components/Pagination.vue";
|
||||
import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
|
||||
import BuilderHost from "../../../../components/queryBuilder/BuilderHost.vue";
|
||||
import type { DynamicQueryStructure, FieldType } from "@/types/dynamicQueries";
|
||||
import { useQueryStoreStore } from "@/stores/admin/queryStore";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
computed: {
|
||||
...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength", "queryError"]),
|
||||
...mapWritableState(useQueryBuilderStore, ["query"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchTableMetas();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery", "clearResults", "exportData"]),
|
||||
...mapActions(useQueryStoreStore, ["triggerSave"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
57
src/views/admin/settings/QueryStore.vue
Normal file
57
src/views/admin/settings/QueryStore.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<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">gespeicherte Abfragen</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col gap-4 grow pl-7">
|
||||
<div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
|
||||
<QueryStoreListItem v-for="query in queries" :key="query.id" :queryItem="query" />
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<RouterLink
|
||||
v-if="can('create', 'settings', 'query_store')"
|
||||
:to="{ name: 'admin-club-query_builder' }"
|
||||
button
|
||||
primary
|
||||
class="!w-fit"
|
||||
>
|
||||
Abfrage erstellen
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions, mapWritableState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
|
||||
import { useQueryStoreStore } from "@/stores/admin/queryStore";
|
||||
import QueryStoreListItem from "@/components/admin/settings/queryStore/QueryStoreListItem.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
computed: {
|
||||
...mapState(useQueryStoreStore, ["queries"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
...mapWritableState(useQueryBuilderStore, ["query"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchQueries();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useQueryStoreStore, ["fetchQueries"]),
|
||||
loadCreate() {
|
||||
this.query = undefined;
|
||||
this.$router.push({ name: "admin-club-query_builder" });
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in a new issue