Add colleagues page

src/app.tsx

@@ -13,6 +13,7 @@ import { loadPage } from './data/pages.data'
 import { loadPost } from './data/post.data'
 import { loadSearchPage } from './data/search.data'
 import { loadInformationMenu } from './data/information.data'
+import { loadColleaguesPage } from './data/colleagues.data'
 
 const ROUTES: RouteDefinition[] = [
   {
@@ -70,6 +71,11 @@ const ROUTES: RouteDefinition[] = [
     ],
     load: loadInformationMenu,
   },
+  {
+    path: '/misc/colleagues',
+    component: lazy(() => import('~/pages/Colleagues')),
+    load: loadColleaguesPage,
+  },
   {
     path: '/_debug',
     component: lazy(() => import('~/pages/Debug')),

src/data/colleagues.data.ts

@@ -0,0 +1,71 @@
+import { gql, request } from '@solid-primitives/graphql'
+import { RouteLoadFunc, cache } from '@solidjs/router'
+import { GRAPHQL_BACKEND_URL } from '~/constants'
+import { Category, Colleague } from '~/models/colleague'
+
+const CATEGORY_NAMES: { [K: string]: string } = {
+  '0': 'Vezetőség',
+  '1': 'Tanárok',
+  '2': 'Óraadók',
+  '3': 'Nevelő, oktató munkát közvetlenül segítők',
+  '4': 'Karbantartók, portások, takarítók',
+}
+
+const HEAD_TEACHER = 'Szűcs Sándor'
+
+const QUERY = gql`
+  query Colleagues {
+    colleagues {
+      id
+      name
+      jobs
+      subjects
+      roles
+      awards
+      image
+      category
+    }
+  }
+`
+
+export const queryColleaguesPage = cache(async (): Promise<Category[]> => {
+  type Response = {
+    colleagues: Colleague[]
+  }
+
+  // TODO: error handling
+  const response = await request<Response>(GRAPHQL_BACKEND_URL, QUERY)
+
+  if (response === undefined) {
+    return []
+  }
+
+  const colleagues = Object.groupBy(response.colleagues, ({ category }) => category)
+
+  let categories = []
+
+  for (const [key, value] of Object.entries(colleagues)) {
+    let colleagues = value ?? []
+
+    colleagues.sort((a, b) => {
+      if (a.name === HEAD_TEACHER) {
+        return -1
+      } else if (b.name === HEAD_TEACHER) {
+        return 1
+      }
+
+      return a.name > b.name ? 1 : -1
+    })
+
+    categories.push({
+      name: CATEGORY_NAMES[key],
+      colleagues,
+    } satisfies Category)
+  }
+
+  return categories
+}, 'Colleagues.queryColleaguesPage')
+
+export const loadColleaguesPage: RouteLoadFunc = () => {
+  void queryColleaguesPage()
+}

src/models/colleague.ts

@@ -0,0 +1,15 @@
+export type Colleague = {
+  id: string
+  name: string
+  jobs?: string
+  subjects?: string
+  roles?: string
+  awards?: string
+  image?: string
+  category: number
+}
+
+export type Category = {
+  name: string
+  colleagues: Colleague[]
+}

src/pages/Colleagues.module.scss

@@ -0,0 +1,54 @@
+.container {
+  width: min(var(--page-width), 100% - 2 * var(--page-padding));
+  margin-inline: auto;
+}
+
+.category {
+  margin-top: 3rem;
+
+  h2 {
+    margin-bottom: 1.5rem;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+
+    @include md {
+      grid-template-columns: repeat(auto-fit, minmax(45rem, 1fr));
+    }
+  }
+}
+
+.colleague {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  background-color: var(--color-surface1);
+  border-radius: 0.8rem;
+  padding: 1rem;
+
+  @include md {
+    grid-template-columns: min-content 1fr;
+  }
+
+  img {
+    width: 10rem;
+    border-radius: 0.4rem;
+    aspect-ratio: 1 / 1.42;
+  }
+
+  .name {
+    font-weight: 700;
+    font-size: 2rem;
+    margin-bottom: 1.2rem;
+  }
+
+  .subjects,
+  .jobs,
+  .roles {
+    margin-bottom: 1rem;
+  }
+
+}

src/pages/Colleagues.tsx

@@ -0,0 +1,63 @@
+import { createAsync, RouteSectionProps } from '@solidjs/router'
+import { Component, For, Show, VoidComponent } from 'solid-js'
+import { queryColleaguesPage } from '~/data/colleagues.data'
+import styles from './Colleagues.module.scss'
+import Title from '~/components/Title'
+import { Category as CategoryModel, Colleague as ColleagueModel } from '~/models/colleague'
+
+type ColleagueProps = {
+  colleague: ColleagueModel
+}
+
+const Colleague: VoidComponent<ColleagueProps> = (props) => {
+  const colleague = props.colleague
+
+  return (
+    <div class={styles.colleague}>
+      {/* <img src={colleague.image} alt={colleague.name} /> */}
+      <img src={colleague.image} alt="" />
+      <div>
+        <p class={styles.name}>{colleague.name}</p>
+        <p class={styles.subjects}>{colleague.subjects}</p>
+        <p class={styles.jobs}>{colleague.jobs}</p>
+        <p class={styles.roles}>{colleague.roles}</p>
+        <p>{colleague.awards}</p>
+      </div>
+    </div>
+  )
+}
+
+type CategoryProps = {
+  category: CategoryModel
+}
+
+const Category: VoidComponent<CategoryProps> = (props) => {
+  const category = props.category
+
+  return (
+    <section class={styles.category}>
+      <h2>{category.name}</h2>
+      <div class={styles.grid}>
+        <For each={category.colleagues}>{(colleague) => <Colleague colleague={colleague} />}</For>
+      </div>
+    </section>
+  )
+}
+
+const ColleaguesPage: Component<RouteSectionProps> = () => {
+  const data = createAsync(() => queryColleaguesPage())
+
+  return (
+    <>
+      <Title title="Munkatársak" />
+
+      <Show when={data()}>
+        <div class={styles.container}>
+          <For each={data()}>{(category) => <Category category={category} />}</For>
+        </div>
+      </Show>
+    </>
+  )
+}
+
+export default ColleaguesPage