feat: ✨ create group page

src/lib/components/SideBar/SideBar.svelte

@@ -17,12 +17,12 @@
 
 <div
   id="sidebar"
-  class="flex flex-col w-full h-full rounded-r-none rounded-left-lg md:rounded-r-lg md:rounded-l-none bg-secondary-400 outline-secondary-800 card outline-5"
+  class="rounded-left-lg outline-5 card flex h-full w-full flex-col rounded-r-none bg-secondary-400 outline-secondary-800 md:rounded-l-none md:rounded-r-lg"
 >
   <div id="sidebar-links" class="flex flex-col">
     {#if displayCloseButton}
-      <div class="w-full flex flex-row justify-end">
-        <button class="p-2 ml-auto" on:click={closeDrawer}>
+      <div class="flex w-full flex-row justify-end">
+        <button class="ml-auto p-2" on:click={closeDrawer}>
           <CloseIcon class="h-12 w-12" />
         </button>
       </div>
@@ -31,7 +31,7 @@
     <SideBarLink Icon={SettingsIcon} label="Settings" href="/settings" />
   </div>
 
-  <div id="sidebar-footer-container" class="mt-auto m-2">
+  <div id="sidebar-footer-container" class="m-2 mt-auto">
     <SideBarFooter />
   </div>
 </div>

src/lib/components/groups/MembersCarousel.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { members } from "$lib/stores/groupStores";
+</script>
+
+<div class="flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth md:gap-4">
+  {#each $members as member (member.id)}
+    <a
+      class="grid align-middle"
+      href={member.profile_page}
+      target="_blank"
+      referrerpolicy="no-referrer"
+    >
+      <div
+        class="card flex h-24 w-24 snap-start rounded-lg bg-cover bg-center px-2 md:h-40 md:w-40"
+        style="background-image:url({member.profile_picture})"
+      ></div>
+      <p
+        class=" mt-auto line-clamp-2 max-h-12 text-left text-lg font-bold text-black hover:text-blue-500 md:text-xl"
+      >
+        @{member.username}
+      </p>
+    </a>
+  {/each}
+</div>

src/lib/components/summary/GroupsCarousel.svelte

@@ -4,7 +4,7 @@
 
 <div class="flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth md:gap-4">
   {#each $groups as group (group.id)}
-    <a href={group.link} target="_blank" referrerpolicy="no-referrer">
+    <a href="groups/{group.id}" target="_blank" referrerpolicy="no-referrer">
       <div
         class="card flex h-24 w-36 snap-start rounded-lg bg-cover bg-center p-3 md:h-36 md:w-64"
         style="background-image:url({group.img})"

src/lib/components/summary/ScheduledMeetingsList.svelte

@@ -2,15 +2,32 @@
   import { RadioGroup, RadioItem } from "@skeletonlabs/skeleton";
 
   import { scheduledMeetings } from "$lib/stores/summaryStores";
+  import type { ScheduledMeeting } from "$lib/types/meetings";
   import {
     convertIsoToWeekdayDate,
     convertTo12HourFormat,
+    filterMeetingsByGroupID,
     groupAndSortScheduledMeetings,
   } from "$lib/utils/summary-helpers";
   import LocationIcon from "~icons/material-symbols/location-on";
   import ClockIcon from "~icons/material-symbols/nest-clock-farsight-analog-outline";
 
-  const sortedMeetings = groupAndSortScheduledMeetings($scheduledMeetings);
+  export let groupID: number | undefined;
+  // const modalStore = getModalStore();
+
+  const filtered = groupID
+    ? filterMeetingsByGroupID($scheduledMeetings, groupID)
+    : $scheduledMeetings;
+  const sortedMeetings = groupAndSortScheduledMeetings(filtered as ScheduledMeeting[]);
+
+  // function modalComponentList(): void {
+  //   const modal: ModalSettings = {
+  //     type: "component",
+  //     component: "meetingUsers",
+  //     title: "Users Attending Meeting",
+  //   };
+  //   modalStore.trigger(modal);
+  // }
 </script>
 
 {#each Object.keys(sortedMeetings) as date}
@@ -45,7 +62,7 @@
             </div>
           </div>
 
-          <div class="flex w-full justify-center md:w-fit">
+          <div class="flex w-full justify-center md:w-fit" role="radiogroup" tabindex="0">
             <RadioGroup
               class="flex h-fit w-fit items-center"
               active="variant-filled-primary"
@@ -54,7 +71,7 @@
               <RadioItem bind:group={meeting.attending} name="justify" value={"Yes"} required
                 >Yes</RadioItem
               >
-              <RadioItem bind:group={meeting.attending} name="justify" value={"No"} required
+              <RadioItem bind:group={meeting.attending} name="justify" value={"No"} required }
                 >No</RadioItem
               >
               <RadioItem bind:group={meeting.attending} name="justify" value={"Maybe"} required

src/lib/components/summary/UnscheduledMeetingsList.svelte

@@ -1,15 +1,21 @@
 <script lang="ts">
   import { unscheduledMeetings } from "$lib/stores/summaryStores";
+  import type { UnscheduledMeeting } from "$lib/types/meetings";
   import {
     convertIsoToDate,
     convertTo12HourFormat,
+    filterMeetingsByGroupID,
     sortUnscheduledMeetingsByDateAndTime,
   } from "$lib/utils/summary-helpers";
   import CalendarIcon from "~icons/material-symbols/calendar-month";
   import LocationIcon from "~icons/material-symbols/location-on";
   import ClockIcon from "~icons/material-symbols/nest-clock-farsight-analog-outline";
 
-  const sortedMeetings = sortUnscheduledMeetingsByDateAndTime($unscheduledMeetings);
+  export let groupID: number | undefined;
+  const filtered = groupID
+    ? filterMeetingsByGroupID($unscheduledMeetings, groupID)
+    : $unscheduledMeetings;
+  const sortedMeetings = sortUnscheduledMeetingsByDateAndTime(filtered as UnscheduledMeeting[]);
 </script>
 
 <div class="flex flex-col gap-2">

src/lib/stores/groupStores.ts

@@ -0,0 +1,63 @@
+import { writable } from "svelte/store";
+
+import type { Member } from "$lib/types/members";
+
+const exampleMembers: Member[] = [
+  {
+    id: "1",
+    username: "georgeconstanza",
+    email: "[email protected]",
+    profile_picture:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    profile_page: `/users/whodunit`,
+    created_at: new Date(),
+  },
+  {
+    id: "2",
+    username: "randyalphari",
+    email: "[email protected]",
+    profile_picture:
+      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    profile_page: `/users/youserone`,
+    created_at: new Date(),
+  },
+  {
+    id: "3",
+    username: "jamescohen",
+    email: "[email protected]",
+    profile_picture:
+      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    profile_page: `/users/salaman`,
+    created_at: new Date(),
+  },
+  {
+    id: "4",
+    username: "adamyoung",
+    email: "[email protected]",
+    profile_picture:
+      "https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    profile_page: `/users/george42`,
+    created_at: new Date(),
+  },
+  {
+    id: "5",
+    username: "davidli",
+    email: "[email protected]",
+    profile_picture:
+      "https://images.unsplash.com/photo-1544168190-79c17527004f?q=80&w=1288&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    profile_page: `/users/ren2`,
+    created_at: new Date(),
+  },
+  {
+    id: "6",
+    username: "christinej",
+    email: "[email protected]",
+    profile_picture:
+      "https://images.unsplash.com/photo-1619895862022-09114b41f16f?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    profile_page: `/users/chlo1`,
+    created_at: new Date(),
+  },
+];
+
+export const members = writable<Member[]>(exampleMembers);
+export const attendees = writable<Member[]>(exampleMembers);

src/lib/stores/summaryStores.ts

@@ -51,6 +51,7 @@ const dummyScheduledMeetings: ScheduledMeeting[] = [
     endTime: "13:30",
     attending: "Yes",
     location: "CSL 8",
+    groupID: 1,
   },
   {
     name: "Meeting Two",
@@ -61,6 +62,7 @@ const dummyScheduledMeetings: ScheduledMeeting[] = [
     endTime: "15:00",
     attending: "No",
     location: "CSL 8",
+    groupID: 2,
   },
   {
     name: "Meeting Three",
@@ -71,6 +73,7 @@ const dummyScheduledMeetings: ScheduledMeeting[] = [
     endTime: "15:00",
     attending: "Yes",
     location: "CSL 8",
+    groupID: 3,
   },
   {
     name: "Meeting Four",
@@ -81,6 +84,7 @@ const dummyScheduledMeetings: ScheduledMeeting[] = [
     endTime: "15:00",
     attending: "Maybe",
     location: "CSL 8",
+    groupID: 4,
   },
 ];
 
@@ -94,6 +98,7 @@ const dummyUnscheduledMeetings: UnscheduledMeeting[] = [
     startTime: "11:00",
     endTime: "13:30",
     location: "CSL 8",
+    groupID: 2,
   },
   {
     name: "Meeting Dos",
@@ -104,6 +109,7 @@ const dummyUnscheduledMeetings: UnscheduledMeeting[] = [
     startTime: "8:00",
     endTime: "15:00",
     location: "CSL 8",
+    groupID: 1,
   },
   {
     name: "Meeting Tres",
@@ -114,6 +120,7 @@ const dummyUnscheduledMeetings: UnscheduledMeeting[] = [
     startTime: "8:00",
     endTime: "15:00",
     location: "CSL 8",
+    groupID: 4,
   },
   {
     name: "Meeting Quatro",
@@ -124,6 +131,7 @@ const dummyUnscheduledMeetings: UnscheduledMeeting[] = [
     startTime: "8:00",
     endTime: "15:00",
     location: "CSL 8",
+    groupID: 3,
   },
 ];
 

src/lib/types/meetings.ts

@@ -11,6 +11,7 @@ export type ScheduledMeeting = {
   endTime: string;
   attending: string;
   location: string;
+  groupID?: number;
 };
 
 export type UnscheduledMeeting = {
@@ -22,4 +23,5 @@ export type UnscheduledMeeting = {
   startTime: string;
   endTime: string;
   location: string;
+  groupID?: number;
 };

src/lib/types/members.ts

@@ -0,0 +1,8 @@
+export type Member = {
+  id: string;
+  username: string;
+  email: string;
+  profile_picture: string;
+  profile_page: string;
+  created_at: Date;
+};

src/lib/utils/summary-helpers.ts

@@ -57,6 +57,12 @@ export function groupAndSortScheduledMeetings(scheduledMeetings: ScheduledMeetin
   return groupedMeetings;
 }
 
+export function filterMeetingsByGroupID(
+  meetings: UnscheduledMeeting[] | ScheduledMeeting[],
+  groupID: number,
+) {
+  return meetings.filter((s) => s.groupID == groupID);
+}
 export function sortScheduledMeetingsByDateAndTime(scheduledMeetings: ScheduledMeeting[]) {
   return scheduledMeetings.sort((a, b) => {
     const dateComparison = a.date.localeCompare(b.date);

src/routes/groups/[groupID]/+page.server.ts

@@ -0,0 +1,5 @@
+export function load({ params }) {
+  const groupID = Number(params.groupID);
+
+  return { groupID };
+}

src/routes/groups/[groupID]/+page.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { TabGroup, Tab } from "@skeletonlabs/skeleton";
+
+  import MembersList from "$lib/components/groups/MembersCarousel.svelte";
+  import ScheduledMeetingsList from "$lib/components/summary/ScheduledMeetingsList.svelte";
+  import UnscheduledMeetingsList from "$lib/components/summary/UnscheduledMeetingsList.svelte";
+  import { groups } from "$lib/stores/summaryStores";
+
+  export let data;
+  const groupID = data.groupID;
+  const group = $groups.find((g) => g.id === groupID)!;
+
+  let tabSet: number = 0;
+</script>
+
+<div class="flex flex-col gap-8 px-4 pb-2 pt-6 md:px-32">
+  <div
+    class="grid-rows-[100px_minmax(0, 1fr)] grid grid-cols-[120px_minmax(0,1fr)] content-start md:grid-cols-2 md:gap-4"
+  >
+    <img
+      src={group.img}
+      alt="A cute dog"
+      class="row-start-1 row-end-2 h-24 w-24 object-cover object-center md:row-start-2 md:row-end-3 md:h-40 md:w-40 lg:h-64 lg:w-64"
+    />
+    <h1
+      class="self-center overflow-visible text-3xl font-bold sm:col-start-2 sm:col-end-3 md:col-span-2 md:text-5xl lg:text-6xl"
+    >
+      {group.name}
+    </h1>
+  </div>
+
+  <div class="flex flex-col gap-4">
+    <h1 class="border-surface-400-500-token border-b text-4xl font-bold">Members</h1>
+    <MembersList />
+  </div>
+
+  <div class="flex flex-col gap-4">
+    <TabGroup>
+      <div class="flex w-full flex-col gap-x-10 gap-y-2">
+        <h1 class="text-4xl font-bold">Meetings</h1>
+        <div class="flex justify-center gap-5">
+          <Tab bind:group={tabSet} name="scheduledTab" value={0}>Scheduled</Tab>
+          <Tab bind:group={tabSet} name="unscheduledTab" value={1}>Unscheduled</Tab>
+        </div>
+      </div>
+
+      <svelte:fragment slot="panel">
+        {#if tabSet === 0}
+          <div class="flex flex-col gap-4"><ScheduledMeetingsList {groupID} /></div>
+        {:else if tabSet === 1}
+          <div class="flex flex-col gap-2">
+            <UnscheduledMeetingsList {groupID} />
+          </div>
+        {/if}
+      </svelte:fragment>
+    </TabGroup>
+  </div>
+</div>