Add edit functionality, improve importing (#30)

* Add lodash dependency and refactor loader functions to use static properties | add edit functionality * Fix description handling in vote edit functionality to ensure it defaults to an empty string * extrafields key Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * number of max Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Error handling update Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Loader error handling Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Add default handling for extraFields in vote edit functionality * Add error handling in vote update and loader functions; refactor JSX for extra fields * Add error handling and extraFields support in vote creation and editing * Add planned state handling in Overview component * Add confirmation and deletion handling for removed options in vote edit * Enhance deletion confirmation for options in vote edit with detailed warning and improved button texts * Refactor deletion handling in vote edit to improve confirmation process and update success message
JohanGrims · Dec 7, 2024 · c75fc5d · c75fc5d
1 parent e810628
commit c75fc5d
Show file tree

Hide file tree

Showing 17 changed files with 513 additions and 85 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "javascript-lp-solver": "^0.4.24",
     "jsonpath": "^1.1.1",
     "localforage": "^1.10.0",
+    "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "mathjs": "^12.2.1",
     "mdui": "^2.1.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.jsx b/src/App.jsx
@@ -124,7 +124,7 @@ function App() {
 
 export default App;
 
-export async function loader() {
+App.loader = async function loader() {
   const votes = await getDocs(collection(db, "/votes"));
   const activeVotes = [];
   const expiredVotes = [];
@@ -162,4 +162,4 @@ export async function loader() {
   });
 
   return { activeVotes, expiredVotes, scheduledVotes };
-}
+};
diff --git a/src/Gateway.jsx b/src/Gateway.jsx
@@ -36,7 +36,7 @@ export default function Gateway() {
   return null;
 }
 
-export async function loader({ params }) {
+Gateway.loader = async function loader({ params }) {
   const vote = await getDoc(doc(db, `/votes/${params.id}`));
   if (!vote.exists()) {
     new Response("Not Found", {
@@ -47,4 +47,4 @@ export async function loader({ params }) {
   const voteData = { id: vote.id, ...vote.data() };
 
   return { voteData };
-}
+};
diff --git a/src/Vote.jsx b/src/Vote.jsx
@@ -411,7 +411,7 @@ export default function Vote() {
   );
 }
 
-export async function loader({ params }) {
+Vote.loader = async function loader({ params }) {
   const vote = await getDoc(doc(db, `/votes/${params.id}`));
   if (!vote.exists()) {
     throw new Response("Document not found.", {
@@ -424,4 +424,4 @@ export async function loader({ params }) {
   const optionsData = options.docs.map((e) => ({ id: e.id, ...e.data() }));
 
   return { vote: voteData, options: optionsData };
-}
+};
diff --git a/src/admin/NewVote.jsx b/src/admin/NewVote.jsx
@@ -54,34 +54,43 @@ export default function NewVote() {
     const berlinStartTime = moment.tz(startTime, "Europe/Berlin").toDate();
     const berlinEndTime = moment.tz(endTime, "Europe/Berlin").toDate();
 
-    const vote = await setDoc(doc(db, "/votes", id), {
-      title: title,
-      description: description,
-      selectCount: selectCount,
-      startTime: Timestamp.fromDate(berlinStartTime),
-      endTime: Timestamp.fromDate(berlinEndTime),
-      active: true,
-      version: 3,
-    });
-    const option = options.map(async (e, index) => {
-      return addDoc(collection(db, `/votes/${id}/options`), {
-        title: e.title,
-        max: e.max,
-        teacher: e.teacher,
-        description: e.description,
+    try {
+      await setDoc(doc(db, "/votes", id), {
+        title: title,
+        description: description,
+        selectCount: selectCount,
+        startTime: Timestamp.fromDate(berlinStartTime),
+        endTime: Timestamp.fromDate(berlinEndTime),
+        active: true,
+        version: 3,
+        extraFields: extraFields,
+      });
+      const option = options.map(async (e) => {
+        return addDoc(collection(db, `/votes/${id}/options`), {
+          title: e.title,
+          max: e.max,
+          teacher: e.teacher,
+          description: e.description,
+        });
       });
-    });
 
-    await Promise.all(option);
+      await Promise.all(option);
 
-    console.log("Vote created successfully.");
+      console.log("Vote created successfully.");
 
-    snackbar({
-      message: "Wahl erfolgreich erstellt.",
-      timeout: 5000,
-    });
+      snackbar({
+        message: "Wahl erfolgreich erstellt.",
+        timeout: 5000,
+      });
 
-    navigate(`/admin/${id}`);
+      navigate(`/admin/${id}`);
+    } catch (e) {
+      console.error(e);
+      snackbar({
+        message: "Fehler beim Erstellen der Wahl.",
+        timeout: 5000,
+      });
+    }
   }
 
   const submitDisabled = () => {
@@ -268,6 +277,7 @@ export default function NewVote() {
           )}
           {options.map((e, i) => (
             <mdui-card
+              key={i}
               class="option-preview"
               clickable
               style={{

diff --git a/src/admin/Overview.jsx b/src/admin/Overview.jsx
@@ -54,6 +54,8 @@ export default function Overview() {
             const isActive =
               vote.active && endTime.isAfter(now) && startTime.isBefore(now);
 
+            const isPlanned = startTime.isAfter(now);
+
             return (
               <mdui-card
                 key={vote.id}
@@ -66,7 +68,13 @@ export default function Overview() {
                 <p>
                   <mdui-icon
                     style={{ fontSize: "50px" }}
-                    name={isActive ? "event_available" : "done_all"}
+                    name={
+                      isActive
+                        ? "event_available"
+                        : isPlanned
+                        ? "schedule"
+                        : "done_all"
+                    }
                   ></mdui-icon>
                 </p>
               </mdui-card>
@@ -84,24 +92,15 @@ export default function Overview() {
           </p>
         </mdui-card>
       </div>
-      {/* <mdui-fab
-        icon="add"
-        onClick={() => navigate("/admin/new")}
-        style={{ position: "fixed", bottom: "20px", right: "20px" }}
-        extended
-        variant="surface"
-      >
-        Neue Wahl
-      </mdui-fab> */}
     </div>
   );
 }
 
-export async function loader() {
+Overview.loader = async function loader() {
   const votes = await getDocs(collection(db, "votes"));
   return {
     votes: votes.docs.map((e) => {
       return { id: e.id, ...e.data() };
     }),
   };
-}
+};
diff --git a/src/admin/Students.tsx b/src/admin/Students.tsx
@@ -413,7 +413,7 @@ export default function Students() {
   );
 }
 
-export async function loader() {
+Students.loader = async function loader() {
   const classes = await getDocs(collection(db, "class"));
   return {
     classes: classes.docs.map((e) => {
@@ -423,4 +423,4 @@ export async function loader() {
       };
     }),
   };
-}
+};
diff --git a/src/admin/utils.js b/src/admin/utils.js
@@ -1,9 +1,9 @@
-export function generateRandomHash() {
+export function generateRandomHash(length = 4) {
   let hash = "";
   const characters =
     "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
-  for (let i = 0; i < 4; i++) {
+  for (let i = 0; i < length; i++) {
     hash += characters.charAt(Math.floor(Math.random() * characters.length));
   }
 

diff --git a/src/admin/vote/Answers.jsx b/src/admin/vote/Answers.jsx
@@ -378,7 +378,7 @@ export default function Answers() {
   );
 }
 
-export async function loader({ params }) {
+Answers.loader = async function loader({ params }) {
   const { id } = params;
   const vote = await getDoc(doc(db, `/votes/${id}`));
   const voteData = vote.data();

diff --git a/src/admin/vote/Assign.jsx b/src/admin/vote/Assign.jsx
@@ -800,7 +800,7 @@ export default function Assign() {
   );
 }
 
-export async function loader({ params }) {
+Assign.loader =  async function loader({ params }) {
   const { id } = params;
 
   const vote = await getDoc(doc(db, `/votes/${id}`));