Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance Answers and Match Components in Admin Voting Interface #43

Merged
merged 3 commits into from
Dec 12, 2024
Merged

Enhance Answers and Match Components in Admin Voting Interface #43

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da8b164
New Views and functionallity for Answers and Match components
JohanGrims Dec 12, 2024
ce40ddd
Update src/admin/vote/Answers.jsx
JohanGrims Dec 12, 2024
4f345de
Refactor URL search parameter retrieval in Answers component for impr…
JohanGrims Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 193 additions & 13 deletions src/admin/vote/Answers.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import {
getDoc,
getDocs,
onSnapshot,
setDoc,
} from "firebase/firestore";
import { confirm, snackbar } from "mdui";
import { confirm, prompt, snackbar } from "mdui";
import React from "react";
import { useLoaderData, useNavigate } from "react-router-dom";
import { db } from "../../firebase";
Expand All @@ -17,8 +18,14 @@ export default function Answers() {
const [loading, setLoading] = React.useState(true);

const search = new URLSearchParams(window.location.search).get("search");
const grade = new URLSearchParams(window.location.search).get("grade");
const listIndex = new URLSearchParams(window.location.search).get(
"listIndex"
);

const [mode, setMode] = React.useState(search ? "by-name" : "by-option");
const [mode, setMode] = React.useState(
search || grade || listIndex ? "by-name" : "by-option"
);
const [answers, setAnswers] = React.useState([]);

const grades = [...new Set(answers.map((answer) => answer.grade))];
Expand Down Expand Up @@ -80,7 +87,43 @@ export default function Answers() {
searchField.value = search;
}
}
}, [search, mode, answers, loading]);
if (grade && listIndex && mode === "by-name") {
const elements = document.querySelectorAll("tbody tr");
elements.forEach((element) => {
const gradeCell = element.querySelector("td:nth-child(2)").textContent;
const listIndexCell =
element.querySelector("td:nth-child(3)").textContent;
if (gradeCell == grade && listIndexCell == listIndex) {
element.style.display = "";
} else {
element.style.display = "none";
}
});
}
}, [search, mode, answers, loading, grade, listIndex]);
JohanGrims marked this conversation as resolved.
Show resolved Hide resolved

async function updateAnswer({ id, data }) {
try {
await setDoc(doc(db, `/votes/${vote.id}/choices/${id}`), data, {
merge: true,
});
snackbar({
message: "Antwort erfolgreich aktualisiert.",
timeout: 5000,
});
// update the answers
const newAnswers = answers.map((answer) =>
answer.id === id ? { ...answer, ...data } : answer
);
setAnswers(newAnswers);
} catch (error) {
snackbar({
message: "Fehler beim Aktualisieren der Antwort.",
timeout: 5000,
});
console.error(error);
}
}

if (loading) {
return <mdui-linear-progress />;
Expand Down Expand Up @@ -119,6 +162,9 @@ export default function Answers() {
<mdui-radio value="by-name" onClick={() => setMode("by-name")}>
Nach Name
</mdui-radio>
<mdui-radio value="by-date" onClick={() => setMode("by-date")}>
Nach Datum
</mdui-radio>
</mdui-radio-group>
<br />

Expand Down Expand Up @@ -255,7 +301,17 @@ export default function Answers() {
.sort((a, b) => a.listIndex - b.listIndex)
.map((answer, i) => (
<tr key={i}>
<td>{answer.name}</td>
<td>
<a
style={{ cursor: "pointer" }}
onClick={() => {
setMode("by-name");
navigate(`.?search=${answer.id}`);
}}
>
{answer.name}
</a>
</td>
<td>{answer.listIndex}</td>
{answer.selected.map((selected, i) => (
<td key={i}>
Expand Down Expand Up @@ -305,6 +361,14 @@ export default function Answers() {
navigate(`.?search=${e.target.value}`);
}}
></mdui-text-field>
{grade && listIndex && (
<>
<p />
<mdui-chip selectable selected disabled>
{`Klasse ${grade}, #${listIndex}`}
</mdui-chip>
</>
)}
<div className="mdui-table" style={{ width: "100%" }}>
<table style={{ overflowX: "hidden" }}>
<thead>
Expand All @@ -329,7 +393,7 @@ export default function Answers() {
</th>
))}
<th>
<b>ID</b>
<b>Antwort-Id</b>
</th>
<th></th>
</tr>
Expand Down Expand Up @@ -357,20 +421,73 @@ export default function Answers() {
<td
style={{
cursor: "pointer",
color: "rgb(255, 100, 100)",
color: "rgb(var(--mdui-color-tertiary-dark))",
}}
onClick={() => {
let data = JSON.stringify(answer, null, 2);
prompt({
placeholder: "JSON-2Daten",
confirmText: "Speichern",
cancelText: "Abbrechen",
headline: "Antwort bearbeiten",
description:
"Beachten Sie: bei fehlerhaften Daten kann diese Antwort unbrauchbar werden. Stellen Sie vor dem Speichern sicher, dass die Daten korrekt sind.",
onConfirm: (value) => {
try {
const data = JSON.parse(value);
console.log(data);
updateAnswer({ id: answer.id, data });
} catch (error) {
snackbar("Ungültige JSON-Daten.");
}
},
textFieldOptions: {
value: data,
oninput: (e) => {
data = e.target.value;
},
autosize: true,
rows: 5,
},
validator: (value) => {
try {
JSON.parse(value);
return true;
} catch (error) {
return false;
}
},
});
}}
>
Bearbeiten
</td>
<td
style={{
cursor: "pointer",
color: "rgb(var(--mdui-color-primary-dark))",
}}
onClick={() => {
confirm({
headline: "Löschen",
description:
"Sind Sie sicher, dass Sie diese Antwort löschen möchten?",
}).then(() => {
// Löschen
deleteDoc(
doc(db, `/votes/${vote.id}/choices/${answer.id}`)
).then(() => {
window.location.reload();
});
confirmText: "Löschen",
cancelText: "Abbrechen",
onConfirm: () => {
deleteDoc(
doc(
db,
`/votes/${vote.id}/choices/${answer.id}`
)
).then(() => {
snackbar({
message: "Antwort erfolgreich gelöscht.",
timeout: 5000,
});
window.location.reload();
});
},
});
}}
>
Expand All @@ -383,6 +500,69 @@ export default function Answers() {
</div>
</div>
)}

{mode === "by-date" && (
<div style={{ padding: "10px" }}>
<div className="mdui-prose">
Hinweis: Als Datenschutzmaßnahme wird die Uhrzeit vorerst nicht
angezeigt. Die Antworten sind nach der Uhrzeit sortiert. Erst beim
Klicken auf das Datum wird die Uhrzeit sichtbar. Diese Ansicht kann
Ihnen helfen, sich einen Überblick über die letzten Antworten zu
verschaffen.
</div>
<div className="mdui-table" style={{ width: "100%" }}>
<table>
<thead>
<tr>
<th>
<b>Name</b>
</th>
<th>
<b>Klasse</b>
</th>
<th>
<b>Datum</b>
</th>
</tr>
</thead>
<tbody>
{answers
.sort((a, b) => b.timestamp.seconds - a.timestamp.seconds)
.map((answer, i) => (
JohanGrims marked this conversation as resolved.
Show resolved Hide resolved
<tr key={answer.id}>
<td>
<a
style={{ cursor: "pointer" }}
onClick={() => {
setMode("by-name");
navigate(`.?search=${answer.id}`);
}}
>
{answer.name}
</a>
</td>
<td>{answer.grade}</td>
<td>
<mdui-tooltip
content={new Date(
answer.timestamp.seconds * 1000
).toLocaleString("de-DE")}
trigger="click"
>
<span>
{new Date(
answer.timestamp.seconds * 1000
).toLocaleDateString("de-DE")}
</span>
</mdui-tooltip>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
</div>
);
}
Expand Down
37 changes: 15 additions & 22 deletions src/admin/vote/Match.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,7 @@ export default function Match() {
<td>{s.listIndex}</td>
<td>
<Link
to={`../answers?search=${
choices.filter(
(choice) =>
choice.listIndex ===
s.listIndex.toString() &&
choice.grade === c.grade.toString()
)[0]?.id
}`}
to={`../answers?grade=${c.grade}&listIndex=${s.listIndex}`}
>
{
choices.filter(
Expand All @@ -71,21 +64,21 @@ export default function Match() {
choice.grade === c.grade.toString()
)[0]?.name
}
{choices.filter(
(choice) =>
choice.listIndex === s.listIndex.toString() &&
choice.grade === c.grade.toString()
).length > 1 &&
" + " +
(choices.filter(
(choice) =>
choice.listIndex ===
s.listIndex.toString() &&
choice.grade === c.grade.toString()
).length -
1) +
" weitere"}
</Link>
{choices.filter(
(choice) =>
choice.listIndex === s.listIndex.toString() &&
choice.grade === c.grade.toString()
).length > 1 &&
" + " +
(choices.filter(
(choice) =>
choice.listIndex ===
s.listIndex.toString() &&
choice.grade === c.grade.toString()
).length -
1) +
" weitere"}{" "}
{choices.filter(
(choice) =>
choice.listIndex === s.listIndex.toString() &&
Expand Down
Loading