refactor(Sigsheet): fetch members from database

src/lib/shared.ts

@@ -22,3 +22,13 @@ export const filledSigsheet = {
 };
 
 export const applicant_names_list = writable<string[]>([]);
+
+export interface mem {
+    member_id: number;
+    member_name: string;
+    member_committee: string;
+    role: string;
+    photo: string;
+}
+
+export const members = writable<mem[]>([]);

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import './app.css';
-    import { applicant_names_list, filledSigsheet, gdrive_folder_id, username, uuid } from '$lib/shared';
+    import { applicant_names_list, filledSigsheet, gdrive_folder_id, members, username, uuid } from '$lib/shared';
     import CSI_Logo from '$lib/icons/upcsi.svg';
     import HAM_MENU from '$lib/icons/ham_menu.svg';
     import NavBar from '$lib/NavBar.svelte';
@@ -38,6 +38,19 @@
             applicant_names_list.set(app_data.map(row => row.full_name));
         }
     });
+
+    // Get members list
+    onMount(async () => {
+        console.log('Fetching members list.');
+        const { data: members_data, error: members_error } = await supabase
+            .from('members')
+            .select('member_id, member_name, member_committee, role, photo');
+        if (members_error) {
+            console.error('Error fetching members: ', members_error);
+        } else if (members_data) {
+            members.set(members_data);
+        }
+    });
 </script>
 
 {#if !data.session}

src/routes/sigsheet/MemberCard.svelte

@@ -22,7 +22,7 @@
     </div>
 
     <div>
-        <h2 class="text-csi-white text-left text-lg font-bold">{member.name}</h2>
+        <h2 class="text-csi-white text-left text-lg font-bold">{member.member_name}</h2>
         <h3 class="text-csi-white text-left text-sm">{member.role}</h3>
     </div>
 </main>

src/routes/sigsheet/MemberGrid.svelte

@@ -1,38 +1,47 @@
 <script lang="ts">
+    import { filledSigsheet, type mem, members } from '$lib/shared';
     import { fade } from 'svelte/transition';
 
-    import { type mem, members } from './members';
-
     import MemberCard from './MemberCard.svelte';
     import Modal from './Modal.svelte';
-    import { filledSigsheet } from '$lib/shared';
 
-    const categories = ['Exec', 'M&I', 'Service', 'Innov', 'Engg', 'Exte', 'B&C'];
+    console.log('FILLED SIGSHEET: ', $filledSigsheet);
+    // console.log('MEMBERS', $members);
+
+    const categories = [
+        'Executive',
+        'Membership & Internals',
+        'Service',
+        'Innovation',
+        'Engineering',
+        'External Relations',
+        'Branding & Creatives',
+    ];
 
     const categoryColors: Record<string, string> = {
-        Exec: 'var(--color-csi-blue)',
-        'M&I': 'var(--color-mni-pink)',
+        Executive: 'var(--color-csi-blue)',
+        'Membership & Internals': 'var(--color-mni-pink)',
         Service: 'var(--color-service-yellow)',
-        Innov: 'var(--color-innov-orange)',
-        Engg: 'var(--color-engg-blue)',
-        Exte: 'var(--color-exte-blue)',
-        'B&C': 'var(--color-bnc-green)',
+        Innovation: 'var(--color-innov-orange)',
+        Engineering: 'var(--color-engg-blue)',
+        'External Relations': 'var(--color-exte-blue)',
+        'Branding & Creatives': 'var(--color-bnc-green)',
         CoApp: 'var(--color-csi-white)',
     };
 
     const categoryHeaders: Record<string, string> = {
-        Exec: 'Executive Committee',
-        'M&I': 'Membership & Internals Committee',
+        Executive: 'Executive Committee',
+        'Membership & Internals': 'Membership & Internals Committee',
         Service: 'Service Committee',
-        Innov: 'Innovation Committee',
-        Engg: 'Engineering Committee',
-        Exte: 'External Relations Committee',
-        'B&C': 'Branding & Creatives Committee',
+        Innovation: 'Innovation Committee',
+        Engineering: 'Engineering Committee',
+        'External Relations': 'External Relations Committee',
+        'Branding & Creatives': 'Branding & Creatives Committee',
         CoApp: 'Co-Applicant',
     };
 
-    let activeCategory = $state('Exec');
-    let selectedMember = $state(members[0]);
+    let activeCategory = $state('Executive');
+    let selectedMember = $state($members[0]);
     let showModal = $state(false);
 
     function openModal(member: mem) {
@@ -42,9 +51,9 @@
 
     const coApp_obj = {
         member_id: 0,
-        name: '',
+        member_name: '',
+        member_committee: 'CoApp',
         role: '',
-        category: 'CoApp',
         photo: '',
     };
 
@@ -56,7 +65,7 @@
     function closeModal() {
         showModal = false;
         if (activeCategory === 'CoApp') {
-            activeCategory = 'Exec';
+            activeCategory = 'Executive';
         }
     }
 </script>
@@ -76,7 +85,7 @@
             <div
                 class="grid w-full grid-cols-2 gap-1.5 min-[375px]:gap-3 min-[390px]:gap-4 min-[480px]:grid-cols-4 min-[834px]:flex-1 min-[834px]:grid-cols-4 min-[834px]:gap-4 min-[1280px]:grid-cols-4"
             >
-                {#each members.filter(member => member.category === activeCategory) as member (member.name)}
+                {#each $members.filter(member => member.member_committee === activeCategory) as member (member.member_name)}
                     <div in:fade={{ duration: 1300 }}>
                         <button onclick={() => openModal(member)} class="w-full cursor-pointer">
                             <MemberCard filled={$filledSigsheet.has(member.member_id)} {member} />
@@ -130,7 +139,7 @@
         <div class="flex-center fixed inset-0 justify-center bg-black/50">
             <Modal
                 member_id={selectedMember?.member_id}
-                name={selectedMember?.name}
+                member_name={selectedMember?.member_name}
                 role={selectedMember?.role}
                 {closeModal}
                 {activeCategory}

src/routes/sigsheet/Modal.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { applicant_names_list, filledSigsheet, gdrive_folder_id, username, uuid } from '$lib/shared';
-    const { member_id, name, role, closeModal, activeCategory } = $props();
+    import { writable } from 'svelte/store';
+
+    const { member_id, member_name, role, closeModal, activeCategory } = $props();
     // Implement color of name
 
     const categoryColors: Record<string, string> = {
@@ -105,11 +107,11 @@
             <div class="mx-2">
                 {#if activeCategory !== 'CoApp'}
                     <h2 class="pb-1 text-2xl font-bold md:text-4xl" style="color:{categoryColors[activeCategory]}">
-                        {name}
+                        {member_name}
                     </h2>
                     <h3 class="text-csi-white text-sm">{role}</h3>
                     <input type="text" name="member_id" value={member_id} hidden required />
-                    <input type="text" name="member_name" value={name} hidden required />
+                    <input type="text" name="member_name" value={member_name} hidden required />
                 {:else}
                     <div class="relative w-full">
                         <!-- Dropdown button -->