Merge remote-tracking branch 'refs/remotes/origin/main'

Author: spuxx-dev

apps/spuxx-client/public/fonts/Magelove.otf

@@ -3,12 +3,19 @@ main:
   page:
     login:
       login-via-oidc: Anmelden via auth.spuxx.dev
+    root:
+      title: Hallo {name}!
+    not-found:
+      title: Hoppla!
+      text: Diese Seite kann ich nicht finden. Bist Du falsch abgebogen?
+      back: Bring mich zurück!
 lists:
   component:
     create-list-button:
       title: Neue Liste
       new-list-name: Neue Liste
-
+    settings:
+      title: Einstellungen
 layout:
   side-nav:
     lists:

apps/spuxx-client/src/assets/locales/de.yaml

@@ -0,0 +1,15 @@
+import { ListItem as Item } from '@/services/api/lists/lists.types';
+import { Container } from '@spuxx/solid';
+import { Component } from 'solid-js';
+
+interface Props {
+  item: Item;
+}
+
+export const ListItem: Component<Props> = (props) => {
+  return (
+    <Container variant="contained" color="surface">
+      {props.item.text}
+    </Container>
+  );
+};

apps/spuxx-client/src/features/lists/components/list-item.component.tsx

@@ -0,0 +1,22 @@
+import { List } from '@/services/api/lists/lists.types';
+import { Component, createEffect, createSignal, For, Show } from 'solid-js';
+import { ListItem } from './list-item.component';
+
+interface Props {
+  list: List;
+}
+
+export const ListItems: Component<Props> = (props) => {
+  const [checkedAmount, setCheckedAmount] = createSignal<number>(0);
+  createEffect(() => {
+    const checkedItems = props.list.items?.filter((item) => item.checked) ?? [];
+    setCheckedAmount(checkedItems.length);
+  });
+
+  return (
+    <>
+      <For each={props.list.items}>{(item) => <ListItem item={item} />}</For>
+      <Show when={checkedAmount() > 0}>{checkedAmount()}</Show>
+    </>
+  );
+};

apps/spuxx-client/src/features/lists/components/list-items.component.tsx

@@ -0,0 +1,12 @@
+import { List } from '@/services/api/lists/lists.types';
+import { intl } from '@spuxx/js-utils';
+import { Container } from '@spuxx/solid';
+import { Component } from 'solid-js';
+
+interface Props {
+  list: List;
+}
+
+export const ListSettings: Component<Props> = (props) => {
+  return <Container>{intl('lists.component.settings.title')}</Container>;
+};

apps/spuxx-client/src/features/lists/components/list-settings.component.tsx

@@ -0,0 +1,22 @@
+import { List } from '@/services/api/lists/lists.types';
+import { Container, Heading, Icon } from '@spuxx/solid';
+import { Component } from 'solid-js';
+import { ListItems } from './list-items.component';
+import { ListSettings } from './list-settings.component';
+
+interface Props {
+  list: List;
+}
+
+export const ListView: Component<Props> = (props) => {
+  return (
+    <Container class="text-center">
+      <Heading level={2}>
+        <Icon icon={props.list.icon} />
+        {props.list.name}
+      </Heading>
+      <ListItems list={props.list} />
+      <ListSettings list={props.list} />
+    </Container>
+  );
+};

apps/spuxx-client/src/features/lists/components/list-view.component.tsx

@@ -3,7 +3,7 @@ import { ListPage } from './pages/list.page';
 
 export const listsRoutes: RouteProps<string, never>[] = [
   {
-    path: '/list/:id',
+    path: '/lists/:id',
     component: ListPage,
   },
 ];

apps/spuxx-client/src/features/lists/lists.routes.ts

@@ -1,5 +1,36 @@
-import { Component } from 'solid-js';
+import { Api } from '@/services/api';
+import { List } from '@/services/api/lists/lists.types';
+import { Params, useParams } from '@solidjs/router';
+import { HttpRequestStatus } from '@spuxx/js-utils';
+import { Container, Icon } from '@spuxx/solid';
+import { Component, createEffect, createSignal, Show } from 'solid-js';
+import { ListView } from '../components/list-view.component';
 
 export const ListPage: Component = () => {
-  return <div>List</div>;
+  const params = useParams<Params>();
+  const [list, setList] = createSignal<List | null>(null);
+  const [status, setStatus] = createSignal<HttpRequestStatus>(
+    HttpRequestStatus.pending
+  );
+  createEffect(async () => {
+    setStatus(HttpRequestStatus.pending);
+    const request = Api.findListById({ args: { id: params.id } });
+    await request.promise;
+    setStatus(request.status);
+    setList(request.transformedResult);
+  });
+
+  createEffect(() => {});
+
+  return (
+    <Container class="text-center m-auto">
+      <Show when={status() === HttpRequestStatus.pending}>
+        {/* TODO: Move to Loader component in @spuxx/solid?  */}
+        <Icon icon="svg-spinners:ring-resize" class="text-2xl" />
+      </Show>
+      <Show when={status() === HttpRequestStatus.success && list()}>
+        <ListView list={list()!} />
+      </Show>
+    </Container>
+  );
 };

apps/spuxx-client/src/features/lists/pages/list.page.tsx

@@ -1,6 +1,7 @@
 import { RouteProps } from '@solidjs/router';
 import { RootPage } from './pages/root.page';
 import { LoginPage } from './pages/login.page';
+import { NotFoundPage } from './pages/not-found.page';
 
 export const mainRoutes: RouteProps<string, never>[] = [
   {
@@ -11,4 +12,8 @@ export const mainRoutes: RouteProps<string, never>[] = [
     path: '/login',
     component: LoginPage,
   },
+  {
+    path: '/*',
+    component: NotFoundPage,
+  },
 ];

apps/spuxx-client/src/features/main/main.routes.ts

@@ -0,0 +1,21 @@
+import { intl } from '@spuxx/js-utils';
+import { ButtonLink, Container, Heading } from '@spuxx/solid';
+import { Component } from 'solid-js';
+
+export const NotFoundPage: Component = () => {
+  return (
+    <Container class="text-center">
+      <Heading level={2}>{intl('main.page.not-found.title')}</Heading>
+      <p>{intl('main.page.not-found.text')}</p>
+      <br />
+      <ButtonLink
+        href="/"
+        variant="contained"
+        color="primary"
+        icon="mdi:arrow-left"
+      >
+        {intl('main.page.not-found.back')}
+      </ButtonLink>
+    </Container>
+  );
+};