Settings and edit bio (#356)

* Fixed overlapping elements, access to edit-bio and settings * Removed unusued import * made button color white * refactored FormData handling for settings * removed unused imports * add settings-related seeding --------- Co-authored-by: Alfred Grip <[email protected]>
Dsek-LTH · Nov 9, 2024 · c837b82 · c837b82
1 parent 36658d2
commit c837b82
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 30 deletions.
diff --git a/src/database/seed/data.ts b/src/database/seed/data.ts
@@ -3,6 +3,7 @@ import { type SeedClientOptions } from "@snaplet/seed";
 import dayjs from "dayjs";
 import apiNames from "$lib/utils/apiNames";
 import * as positionEnums from "$lib/utils/committee-ordering/enums";
+import { NotificationType } from "$lib/utils/notifications/types";
 
 const getObjectValues = (obj: unknown): string[] => {
   if (obj && typeof obj === "object") {
@@ -278,4 +279,16 @@ export const models: SeedClientOptions["models"] = {
       deletedAt: null,
     },
   },
+  subscriptionSetting: {
+    data: {
+      type: () => faker.helpers.arrayElement(Object.keys(NotificationType)),
+    },
+  },
+  tag: {
+    data: {
+      name: () => faker.lorem.word(),
+      nameEn: () => faker.lorem.word(),
+      color: () => faker.internet.color(),
+    },
+  },
 };
diff --git a/src/database/seed/main.ts b/src/database/seed/main.ts
@@ -22,6 +22,8 @@ const main = async () => {
 
   await seed.$resetDatabase();
 
+  await seed.tag((x) => x(10));
+
   if (process.env["USER"]) {
     await seed.member([{ studentId: process.env["USER"] }]);
   }
@@ -66,6 +68,8 @@ const main = async () => {
 
   await seed.song((x) => x(50));
 
+  await seed.subscriptionSetting((x) => x(100));
+
   process.exit();
 };
 

diff --git a/src/lib/components/member/SettingsPage.svelte b/src/lib/components/member/SettingsPage.svelte
@@ -30,22 +30,22 @@
   };
 </script>
 
-<PageHeader title={m.setting_title()} />
+<PageHeader title={m.setting_title()} class="text-center" />
 <div class="relative">
   <form
     method="POST"
     class="mt-2 flex w-full flex-col items-center justify-start gap-8 pb-24 lg:flex-row lg:items-start lg:justify-center"
   >
     <div class="flex w-full max-w-2xl flex-col items-center lg:p-0">
-      <h2 class="mb-2 self-start text-2xl font-bold">
+      <h2 class="mb-2 self-center text-2xl font-bold">
         {m.setting_notification()}
       </h2>
-      <ul class="divide-y-2 [&>*]:py-4">
+      <ul class="w-full divide-y-2 [&>*]:py-4">
         {#each Object.entries(NotificationSettingType) as notificationSettingType}
           <li class="w-full space-y-2 first:pt-0 last:pb-0">
             <!-- Web notification -->
             <label class="flex cursor-pointer flex-row justify-between">
-              <span class="flex-1 text-sm font-medium">
+              <span class="flex-1 text-wrap text-sm font-medium">
                 {getNotificationText(notificationSettingType[1])}</span
               >
               <input
@@ -85,13 +85,13 @@
       </ul>
     </div>
     <div class="flex w-full max-w-2xl flex-col items-center lg:p-0">
-      <h2 class="mb-2 self-start text-2xl font-bold">
+      <h2 class="mb-2 self-center text-2xl font-bold">
         {m.setting_subscription()}
       </h2>
       <SubscriptionTags {tags} subscribedTags={subscribedTags.subscribedTags} />
     </div>
     <button
-      class="btn absolute bottom-0 mb-4 mt-4 w-full max-w-xl bg-primary"
+      class="btn btn-primary absolute bottom-0 mb-4 mt-4 w-full max-w-xl bg-primary"
       type="submit">{m.setting_apply()}</button
     >
   </form>

diff --git a/src/lib/components/member/SubscriptionTags.svelte b/src/lib/components/member/SubscriptionTags.svelte
@@ -12,11 +12,11 @@
     .filter((t) => t != "");
 </script>
 
-<div class="flex flex-col items-center sm:grid sm:grid-cols-2">
+<div class={"flex flex-col items-center xl:grid xl:grid-cols-2"}>
   {#each tags as tag}
-    <div class="m-1 flex">
+    <div class="m-1 flex w-full justify-self-center">
       <label
-        class="flex cursor-pointer items-center whitespace-nowrap rounded-full border pl-2"
+        class="ml-auto mr-auto flex max-w-full cursor-pointer items-center rounded-full border pl-2"
         style={"border-color: " + tag.color + ";"}
       >
         <input
@@ -26,11 +26,13 @@
           bind:group={selectedTags}
           value={tag.id}
         />
-        <span class="ms-3 pb-1 pt-1 text-sm font-medium">
+        <span
+          class="ms-3 box-border max-w-80 break-words pb-1 pt-1 text-center text-sm font-medium xl:max-w-44"
+        >
           {tag.name}
         </span>
         <div
-          class="peer relative ml-2 mr-1 h-5 w-9 rounded-full bg-gray-300 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-gray-800 rtl:peer-checked:after:-translate-x-full"
+          class="peer relative ml-2 mr-1 h-5 w-9 rounded-full bg-gray-300 pr-9 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-gray-800 rtl:peer-checked:after:-translate-x-full"
         ></div>
       </label>
     </div>

diff --git a/src/lib/member/settings.ts b/src/lib/member/settings.ts
@@ -52,25 +52,33 @@ export const settingsActions = {
 
     // Try-catch if for some reason form data isn't correct
     try {
-      await prisma.subscriptionSetting.deleteMany({
-        where: {
-          memberId: user.memberId,
-        },
-      });
-      await prisma.subscriptionSetting.createMany({
-        data: subscription.map((sub) => {
-          return {
-            memberId: user.memberId as string,
-            type: sub.toString(),
-            pushNotification: push.find(
-              (tag) => sub.toString() == tag.toString(),
-            )
-              ? true
-              : false,
-          };
-        }),
+      await prisma.$transaction(async (tx) => {
+        await tx.subscriptionSetting.deleteMany({
+          where: {
+            memberId: user.memberId,
+          },
+        });
+        const res = await tx.subscriptionSetting.createMany({
+          data: subscription.map((sub) => {
+            return {
+              memberId: user.memberId as string,
+              type: sub.toString(),
+              pushNotification: push.find(
+                (tag) => sub.toString() == tag.toString(),
+              )
+                ? true
+                : false,
+            };
+          }),
+        });
+        if (res.count != push.length) {
+          // If nbr created isn't the same as number of subscribed tags, something went wrong, do rollback
+          throw new Error(
+            `${res.count} created but supposed to be ${push.length}`,
+          );
+        }
       });
-      await prisma.member.update({
+      prisma.member.update({
         where: {
           id: user.memberId as string,
         },
@@ -84,7 +92,8 @@ export const settingsActions = {
           },
         },
       });
-    } catch {
+    } catch (error) {
+      console.log(error);
       return fail(400, { form });
     }
   },