Merge branch 'milestone/ff-admin-unit' into unit/#70-build-ui-demo
This commit is contained in:
commit
00fad29b25
18 changed files with 219 additions and 43 deletions
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal">abbrechen</button>
|
||||
<button primary-outline @click="closeModal">schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Newsletter Mail Empfänger</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<p v-if="receivers.length == 0">keine Empfänger gefunden</p>
|
||||
<p v-else>{{ receivers.length }} Empfänger gefunden</p>
|
||||
<div class="flex flex-col gap-2 h-96 overflow-y-scroll">
|
||||
<p
|
||||
v-for="rec in receivers"
|
||||
:key="rec.id"
|
||||
class="bg-primary p-2 text-white flex flex-row justify-between items-center rounded-md"
|
||||
>
|
||||
{{ rec.lastname }}, {{ rec.firstname }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-4 py-2 w-full">
|
||||
<button primary @click="start">Versand starten</button>
|
||||
<button primary-outline @click="closeModal">Versand abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useNewsletterPrintoutStore } from "@/stores/admin/club/newsletter/newsletterPrintout";
|
||||
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
receivers: [] as Array<MemberViewModel>,
|
||||
error: null as null | string,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.fetchNewsletterMailReceivers()
|
||||
.then((res) => {
|
||||
this.receivers = res.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.error = "Fehler beim Laden der Empfänger";
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useNewsletterPrintoutStore, ["fetchNewsletterMailReceivers", "createNewsletterSend"]),
|
||||
...mapActions(useModalStore, ["openModal", "closeModal"]),
|
||||
start() {
|
||||
this.createNewsletterSend();
|
||||
this.openMailLogs();
|
||||
},
|
||||
openMailLogs() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterMailProgressModal.vue"))
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal">abbrechen</button>
|
||||
<button primary-outline @click="closeModal">schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Newsletter Druck Empfänger</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<p v-if="receivers.length == 0">keine Empfänger gefunden</p>
|
||||
<p v-else>{{ receivers.length }} Empfänger gefunden</p>
|
||||
<div class="flex flex-col gap-2 h-96 overflow-y-scroll">
|
||||
<p
|
||||
v-for="rec in receivers"
|
||||
:key="rec.id"
|
||||
class="bg-primary p-2 text-white flex flex-row justify-between items-center rounded-md"
|
||||
>
|
||||
{{ rec.lastname }}, {{ rec.firstname }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-4 py-2 w-full">
|
||||
<button primary @click="start">Druck starten</button>
|
||||
<button primary-outline @click="closeModal">Druck abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useNewsletterPrintoutStore } from "@/stores/admin/club/newsletter/newsletterPrintout";
|
||||
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
receivers: [] as Array<MemberViewModel>,
|
||||
error: null as null | string,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.fetchNewsletterPrintReceivers()
|
||||
.then((res) => {
|
||||
this.receivers = res.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.error = "Fehler beim Laden der Empfänger";
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useNewsletterPrintoutStore, ["fetchNewsletterPrintReceivers", "createNewsletterPrintout"]),
|
||||
...mapActions(useModalStore, ["openModal", "closeModal"]),
|
||||
start() {
|
||||
this.createNewsletterPrintout();
|
||||
this.openPdfLogs();
|
||||
},
|
||||
openPdfLogs() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterPrintingProgressModal.vue"))
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
>
|
||||
<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">
|
||||
<option v-for="query in queries" :key="query.id" :value="query.id">
|
||||
{{ query.title }}
|
||||
</option>
|
||||
</select>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
class="p-1"
|
||||
:class="typeof value == 'object' ? 'bg-gray-200' : ''"
|
||||
title="Visual Builder"
|
||||
@click="queryMode = 'builder'"
|
||||
@click="changeMode('builder')"
|
||||
>
|
||||
<RectangleGroupIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
class="p-1"
|
||||
:class="typeof value == 'string' ? 'bg-gray-200' : ''"
|
||||
title="SQL Editor"
|
||||
@click="queryMode = 'editor'"
|
||||
@click="changeMode('editor')"
|
||||
>
|
||||
<CommandLineIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
||||
</div>
|
||||
|
|
@ -116,21 +116,9 @@ export default defineComponent({
|
|||
},
|
||||
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() {
|
||||
if (this.activeQueryId == undefined) return;
|
||||
|
||||
let query = this.queries.find((t) => t.id == this.activeQueryId)?.query;
|
||||
if (query != undefined) {
|
||||
if (typeof query == "string") {
|
||||
|
|
@ -188,6 +176,22 @@ export default defineComponent({
|
|||
showStructure() {
|
||||
this.openModal(markRaw(defineAsyncComponent(() => import("@/components/queryBuilder/StructureModal.vue"))));
|
||||
},
|
||||
changeMode(mode: "editor" | "builder") {
|
||||
this.queryMode = mode;
|
||||
|
||||
this.activeQueryId = undefined;
|
||||
if (this.queryMode == "builder") {
|
||||
this.value = {
|
||||
select: "*",
|
||||
table: "",
|
||||
where: [],
|
||||
join: [],
|
||||
orderBy: [],
|
||||
};
|
||||
} else {
|
||||
this.value = "";
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue