266 lines
15 KiB
JavaScript
266 lines
15 KiB
JavaScript
import { ref, computed, mergeProps, createVNode, resolveDynamicComponent, unref, useSSRContext } from 'vue';
|
|
import { ssrRenderAttrs, ssrRenderVNode, ssrInterpolate, ssrRenderComponent, ssrRenderList, ssrRenderAttr, ssrRenderClass, ssrIncludeBooleanAttr } from 'vue/server-renderer';
|
|
import { Table2, Grid3x3, UserPlus, Loader2, Edit, Trash2, Mail, Phone, MapPin, FileText, Clock, AlertCircle } from 'lucide-vue-next';
|
|
import { u as useAuthStore } from './server.mjs';
|
|
import { u as useHead } from './composables-CK-Mp9jS.mjs';
|
|
import '../nitro/nitro.mjs';
|
|
import 'node:http';
|
|
import 'node:https';
|
|
import 'node:events';
|
|
import 'node:buffer';
|
|
import 'node:fs';
|
|
import 'node:path';
|
|
import 'node:crypto';
|
|
import 'node:url';
|
|
import '../routes/renderer.mjs';
|
|
import 'vue-bundle-renderer/runtime';
|
|
import 'unhead/server';
|
|
import 'devalue';
|
|
import 'unhead/utils';
|
|
import 'pinia';
|
|
import 'vue-router';
|
|
|
|
const _sfc_main = {
|
|
__name: "mitglieder",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const authStore = useAuthStore();
|
|
const isLoading = ref(true);
|
|
const isSaving = ref(false);
|
|
const members = ref([]);
|
|
const showModal = ref(false);
|
|
const editingMember = ref(null);
|
|
const errorMessage = ref("");
|
|
const viewMode = ref("table");
|
|
const formData = ref({
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phone: "",
|
|
address: "",
|
|
notes: ""
|
|
});
|
|
const canEdit = computed(() => {
|
|
return authStore.role === "admin" || authStore.role === "vorstand";
|
|
});
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return "";
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString("de-DE", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit"
|
|
});
|
|
};
|
|
useHead({
|
|
title: "Mitgliederliste - Harheimer TC"
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ class: "min-h-full py-16 bg-gray-50" }, _attrs))}><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between items-center mb-6"><div><h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-2"> Mitgliederliste </h1><div class="w-24 h-1 bg-primary-600 mb-4"></div></div><div class="flex items-center space-x-3"><button class="flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold rounded-lg transition-colors">`);
|
|
ssrRenderVNode(_push, createVNode(resolveDynamicComponent(viewMode.value === "cards" ? unref(Table2) : unref(Grid3x3)), {
|
|
size: 20,
|
|
class: "mr-2"
|
|
}, null), _parent);
|
|
_push(` ${ssrInterpolate(viewMode.value === "cards" ? "Tabelle" : "Karten")}</button>`);
|
|
if (canEdit.value) {
|
|
_push(`<button class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors">`);
|
|
_push(ssrRenderComponent(unref(UserPlus), {
|
|
size: 20,
|
|
class: "mr-2"
|
|
}, null, _parent));
|
|
_push(` Mitglied hinzufügen </button>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></div>`);
|
|
if (isLoading.value) {
|
|
_push(`<div class="flex items-center justify-center py-12">`);
|
|
_push(ssrRenderComponent(unref(Loader2), {
|
|
size: 40,
|
|
class: "animate-spin text-primary-600"
|
|
}, null, _parent));
|
|
_push(`</div>`);
|
|
} else if (viewMode.value === "table") {
|
|
_push(`<div class="bg-white rounded-xl shadow-lg overflow-hidden"><div class="overflow-x-auto"><table class="min-w-full divide-y divide-gray-200"><thead class="bg-gray-50"><tr><th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th><th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">E-Mail</th><th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Telefon</th><th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>`);
|
|
if (canEdit.value) {
|
|
_push(`<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</tr></thead><tbody class="bg-white divide-y divide-gray-200"><!--[-->`);
|
|
ssrRenderList(members.value, (member) => {
|
|
_push(`<tr class="hover:bg-gray-50"><td class="px-4 py-3 whitespace-nowrap"><div class="text-sm font-medium text-gray-900">${ssrInterpolate(member.name)}</div>`);
|
|
if (member.notes) {
|
|
_push(`<div class="text-xs text-gray-500">${ssrInterpolate(member.notes)}</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</td><td class="px-4 py-3 whitespace-nowrap">`);
|
|
if (member.email) {
|
|
_push(`<a${ssrRenderAttr("href", `mailto:${member.email}`)} class="text-sm text-primary-600 hover:text-primary-800">${ssrInterpolate(member.email)}</a>`);
|
|
} else {
|
|
_push(`<span class="text-sm text-gray-400">-</span>`);
|
|
}
|
|
_push(`</td><td class="px-4 py-3 whitespace-nowrap">`);
|
|
if (member.phone) {
|
|
_push(`<a${ssrRenderAttr("href", `tel:${member.phone}`)} class="text-sm text-primary-600 hover:text-primary-800">${ssrInterpolate(member.phone)}</a>`);
|
|
} else {
|
|
_push(`<span class="text-sm text-gray-400">-</span>`);
|
|
}
|
|
_push(`</td><td class="px-4 py-3 whitespace-nowrap"><div class="flex items-center space-x-2">`);
|
|
if (member.hasLogin) {
|
|
_push(`<span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full"> Login </span>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<span class="${ssrRenderClass([member.source === "manual" ? "bg-blue-100 text-blue-800" : "bg-purple-100 text-purple-800", "px-2 py-1 text-xs font-medium rounded-full"])}">${ssrInterpolate(member.source === "manual" ? "Manuell" : "System")}</span></div></td>`);
|
|
if (canEdit.value) {
|
|
_push(`<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">`);
|
|
if (member.editable) {
|
|
_push(`<div class="flex justify-end space-x-2"><button class="text-blue-600 hover:text-blue-900" title="Bearbeiten">`);
|
|
_push(ssrRenderComponent(unref(Edit), { size: 18 }, null, _parent));
|
|
_push(`</button><button class="text-red-600 hover:text-red-900" title="Löschen">`);
|
|
_push(ssrRenderComponent(unref(Trash2), { size: 18 }, null, _parent));
|
|
_push(`</button></div>`);
|
|
} else {
|
|
_push(`<span class="text-gray-400 text-xs">Nicht editierbar</span>`);
|
|
}
|
|
_push(`</td>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</tr>`);
|
|
});
|
|
_push(`<!--]--></tbody></table></div>`);
|
|
if (members.value.length === 0) {
|
|
_push(`<div class="text-center py-12 text-gray-500"> Keine Mitglieder gefunden. </div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
} else {
|
|
_push(`<div class="space-y-4"><!--[-->`);
|
|
ssrRenderList(members.value, (member) => {
|
|
_push(`<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100"><div class="flex justify-between items-start"><div class="flex-1"><div class="flex items-center mb-2"><h3 class="text-xl font-semibold text-gray-900">${ssrInterpolate(member.name)}</h3>`);
|
|
if (member.hasLogin) {
|
|
_push(`<span class="ml-3 px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full"> Hat Login </span>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (member.source === "manual") {
|
|
_push(`<span class="ml-2 px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full"> Manuell </span>`);
|
|
} else {
|
|
_push(`<span class="ml-2 px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full"> Aus Login-System </span>`);
|
|
}
|
|
_push(`</div><div class="grid sm:grid-cols-2 gap-3 text-gray-600">`);
|
|
if (member.email) {
|
|
_push(`<div class="flex items-center">`);
|
|
_push(ssrRenderComponent(unref(Mail), {
|
|
size: 16,
|
|
class: "mr-2 text-primary-600"
|
|
}, null, _parent));
|
|
_push(`<a${ssrRenderAttr("href", `mailto:${member.email}`)} class="hover:text-primary-600">${ssrInterpolate(member.email)}</a></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (member.phone) {
|
|
_push(`<div class="flex items-center">`);
|
|
_push(ssrRenderComponent(unref(Phone), {
|
|
size: 16,
|
|
class: "mr-2 text-primary-600"
|
|
}, null, _parent));
|
|
_push(`<a${ssrRenderAttr("href", `tel:${member.phone}`)} class="hover:text-primary-600">${ssrInterpolate(member.phone)}</a></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (member.address) {
|
|
_push(`<div class="flex items-start col-span-2">`);
|
|
_push(ssrRenderComponent(unref(MapPin), {
|
|
size: 16,
|
|
class: "mr-2 text-primary-600 mt-0.5"
|
|
}, null, _parent));
|
|
_push(`<span>${ssrInterpolate(member.address)}</span></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (member.notes) {
|
|
_push(`<div class="flex items-start col-span-2">`);
|
|
_push(ssrRenderComponent(unref(FileText), {
|
|
size: 16,
|
|
class: "mr-2 text-primary-600 mt-0.5"
|
|
}, null, _parent));
|
|
_push(`<span>${ssrInterpolate(member.notes)}</span></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
if (member.lastLogin) {
|
|
_push(`<div class="flex items-center col-span-2 text-sm text-gray-500">`);
|
|
_push(ssrRenderComponent(unref(Clock), {
|
|
size: 16,
|
|
class: "mr-2"
|
|
}, null, _parent));
|
|
_push(` Letzter Login: ${ssrInterpolate(formatDate(member.lastLogin))}</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></div>`);
|
|
if (canEdit.value && member.editable) {
|
|
_push(`<div class="flex space-x-2 ml-4"><button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="Bearbeiten">`);
|
|
_push(ssrRenderComponent(unref(Edit), { size: 20 }, null, _parent));
|
|
_push(`</button><button class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="Löschen">`);
|
|
_push(ssrRenderComponent(unref(Trash2), { size: 20 }, null, _parent));
|
|
_push(`</button></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></div>`);
|
|
});
|
|
_push(`<!--]-->`);
|
|
if (members.value.length === 0) {
|
|
_push(`<div class="text-center py-12 text-gray-500"> Keine Mitglieder gefunden. </div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
}
|
|
if (showModal.value) {
|
|
_push(`<div class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"><div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full p-8"><h2 class="text-2xl font-display font-bold text-gray-900 mb-6">${ssrInterpolate(editingMember.value ? "Mitglied bearbeiten" : "Mitglied hinzufügen")}</h2><form class="space-y-4"><div class="grid grid-cols-2 gap-4"><div><label class="block text-sm font-medium text-gray-700 mb-2">Vorname *</label><input${ssrRenderAttr("value", formData.value.firstName)} type="text" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"${ssrIncludeBooleanAttr(isSaving.value) ? " disabled" : ""}></div><div><label class="block text-sm font-medium text-gray-700 mb-2">Nachname *</label><input${ssrRenderAttr("value", formData.value.lastName)} type="text" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"${ssrIncludeBooleanAttr(isSaving.value) ? " disabled" : ""}></div></div><div><label class="block text-sm font-medium text-gray-700 mb-2">E-Mail</label><input${ssrRenderAttr("value", formData.value.email)} type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"${ssrIncludeBooleanAttr(isSaving.value) ? " disabled" : ""}></div><div><label class="block text-sm font-medium text-gray-700 mb-2">Telefon</label><input${ssrRenderAttr("value", formData.value.phone)} type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"${ssrIncludeBooleanAttr(isSaving.value) ? " disabled" : ""}></div><div><label class="block text-sm font-medium text-gray-700 mb-2">Adresse</label><input${ssrRenderAttr("value", formData.value.address)} type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"${ssrIncludeBooleanAttr(isSaving.value) ? " disabled" : ""}></div><div><label class="block text-sm font-medium text-gray-700 mb-2">Notizen</label><textarea rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"${ssrIncludeBooleanAttr(isSaving.value) ? " disabled" : ""}>${ssrInterpolate(formData.value.notes)}</textarea></div>`);
|
|
if (errorMessage.value) {
|
|
_push(`<div class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm">`);
|
|
_push(ssrRenderComponent(unref(AlertCircle), {
|
|
size: 20,
|
|
class: "mr-2"
|
|
}, null, _parent));
|
|
_push(` ${ssrInterpolate(errorMessage.value)}</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<div class="flex justify-end space-x-4 pt-4"><button type="button" class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"${ssrIncludeBooleanAttr(isSaving.value) ? " disabled" : ""}> Abbrechen </button><button type="submit" class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center"${ssrIncludeBooleanAttr(isSaving.value) ? " disabled" : ""}>`);
|
|
if (isSaving.value) {
|
|
_push(ssrRenderComponent(unref(Loader2), {
|
|
size: 20,
|
|
class: "animate-spin mr-2"
|
|
}, null, _parent));
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<span>${ssrInterpolate(isSaving.value ? "Speichert..." : "Speichern")}</span></button></div></form></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></div>`);
|
|
};
|
|
}
|
|
};
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/mitgliederbereich/mitglieder.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as default };
|
|
//# sourceMappingURL=mitglieder--YAYTNgB.mjs.map
|