install daisyui; add simplehome for member to update profile

2024-08-04 15:50:57 +02:00
9 changed files with 367 additions and 16 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -5,7 +5,9 @@ import preact from "@astrojs/preact";

 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), preact({
+    integrations: [tailwind({
+        applyBaseStyles: false,
+    }), preact({
        compat: true
    })],
 });
--- a/package.json
+++ b/package.json
@ -20,5 +20,8 @@
    "react-icons": "^4.11.0",
    "sharp": "^0.32.5",
    "tailwindcss": "^3.3.3"
+  },
+  "devDependencies": {
+    "daisyui": "^4.12.10"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -33,6 +33,11 @@ dependencies:
    specifier: ^3.3.3
    version: 3.3.3

+devDependencies:
+  daisyui:
+    specifier: ^4.12.10
+    version: 4.12.10(postcss@8.4.40)
+
 packages:

  /@alloc/quick-lru@5.2.0:
@ -1603,7 +1608,6 @@ packages:
  /camelcase-css@2.0.1:
    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
    engines: {node: '>= 6'}
-    dev: false

  /camelcase@7.0.1:
    resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
@ -1815,11 +1819,34 @@ packages:
      which: 2.0.2
    dev: false

+  /css-selector-tokenizer@0.8.0:
+    resolution: {integrity: sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==}
+    dependencies:
+      cssesc: 3.0.0
+      fastparse: 1.1.2
+    dev: true
+
  /cssesc@3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
    hasBin: true
-    dev: false
+
+  /culori@3.3.0:
+    resolution: {integrity: sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
+  /daisyui@4.12.10(postcss@8.4.40):
+    resolution: {integrity: sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==}
+    engines: {node: '>=16.9.0'}
+    dependencies:
+      css-selector-tokenizer: 0.8.0
+      culori: 3.3.0
+      picocolors: 1.0.1
+      postcss-js: 4.0.1(postcss@8.4.40)
+    transitivePeerDependencies:
+      - postcss
+    dev: true

  /debug@4.3.4:
    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@ -2115,6 +2142,10 @@ packages:
      micromatch: 4.0.5
    dev: false

+  /fastparse@1.1.2:
+    resolution: {integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==}
+    dev: true
+
  /fastq@1.15.0:
    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
    dependencies:
@ -3281,7 +3312,6 @@ packages:
    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true
-    dev: false

  /napi-build-utils@1.0.2:
    resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
@ -3539,7 +3569,6 @@ packages:

  /picocolors@1.0.1:
    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
-    dev: false

  /picomatch@2.3.1:
    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@ -3610,6 +3639,16 @@ packages:
      postcss: 8.4.29
    dev: false

+  /postcss-js@4.0.1(postcss@8.4.40):
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.40
+    dev: true
+
  /postcss-load-config@4.0.1(postcss@8.4.29):
    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
    engines: {node: '>= 14'}
@ -3665,7 +3704,6 @@ packages:
      nanoid: 3.3.7
      picocolors: 1.0.1
      source-map-js: 1.2.0
-    dev: false

  /preact-render-to-string@6.2.1(preact@10.17.1):
    resolution: {integrity: sha512-5t7nFeMUextd53igL3GAakAAMaUD+dVWDHaRYaeh1tbPIjQIBtgJnMw6vf8VS/lviV0ggFtkgebatPxvtJsXyQ==}
@ -4141,7 +4179,6 @@ packages:
  /source-map-js@1.2.0:
    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
    engines: {node: '>=0.10.0'}
-    dev: false

  /space-separated-tokens@2.0.2:
    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
--- a/src/components/EspaceMembres.tsx
+++ b/src/components/EspaceMembres.tsx
@ -3,6 +3,7 @@ import Login from "./Login";
 import PocketBase from 'pocketbase';
 import { useContext, useEffect, useState } from "preact/hooks";
 import Home from "./Members/Home";
+import SimpleHome from "./Members/SimpleHome";

 export const pbUrl = import.meta.env.PUBLIC_PB_API;

@ -66,7 +67,8 @@ export default function EspaceMembres() {
        navigate,
      }}>
        {{
-          '/': <Home />,
+          // '/': <Home />,
+          '/': <SimpleHome />,
          '/login': <Login />,
        }[route]}
      </Router.Provider>
--- a/src/components/Members/SimpleHome.tsx
+++ b/src/components/Members/SimpleHome.tsx
@ -0,0 +1,138 @@
+import { useContext, useEffect, useState } from "preact/hooks";
+import { FaEdit, FaPlus, FaTrash } from "react-icons/fa";
+import { Pb } from "../EspaceMembres";
+import type { UsersRecord } from "../../types/pb_types";
+import { createContext } from "preact";
+
+const FormContext = createContext((key: string, value: string) => { });
+
+function SimpleHome() {
+    const pb = useContext(Pb);
+    const { firstname, lastname }: UsersRecord = pb.authStore.model || {};
+    const email = pb.authStore.model?.email || "";
+
+    const [form, setForm] = useState([]);
+
+    const setFormValue = (key: string, value: string) => {
+        setForm((prev) => ({ ...prev, [key]: value }));
+    };
+
+    const onSubmit = (e: Event) => {
+        e.preventDefault();
+        saveForm(form);
+    };
+
+    const saveForm = (data: { [key: string]: string }[]) => {
+        const record = pb.collection("users").update(pb.authStore.model?.id, data);
+        record.then((res) => {
+            console.log(res);
+        }).catch((error) => {
+            console.error(error);
+        });
+    }
+
+    return (
+        <div className="flex gap-8 p-8 flex-col md:flex-row">
+            <section className="w-full md:w-1/2 card bg-base-100 shadow-xl">
+                <div className="card-body">
+                    <div className="flex justify-between items-center mb-4">
+                        <h1 className="text-2xl font-bold">Gallery</h1>
+                        <button className="btn btn-outline">
+                            <FaPlus />
+                        </button>
+                    </div>
+                    <div className="grid grid-cols-3 gap-4">
+                        {[...Array(6)].map((_, i) => (
+                            <Picture key={i} />
+                        ))}
+                    </div>
+                </div>
+            </section>
+            <section className="w-full md:w-1/2 card bg-base-100 shadow-xl">
+                <div className="card-body">
+                    <h2 className="text-2xl font-bold">Informations personnelles</h2>
+                    <FormContext.Provider value={setFormValue}>
+                        <form className="mt-4 flex flex-col gap-2" onSubmit={onSubmit}>
+                            <FormInput label="Nom" id="lastname" value={lastname} />
+                            <FormInput label="Prénom" id="firstname" value={firstname} />
+                            <FormInput label="Email" id="email" type="email" value={email} disabled />
+                            <div className="mt-2">
+                                <button className="btn btn-neutral">Enregistrer</button>
+                            </div>
+                        </form>
+                    </FormContext.Provider>
+                </div>
+            </section>
+        </div>
+    );
+}
+
+function FormInput({
+    label,
+    id,
+    type = "text",
+    value,
+    className,
+    disabled,
+}: {
+    label: string;
+    id: string;
+    type?: string;
+    value?: string;
+    className?: string;
+    disabled?: boolean;
+}) {
+    const setFormValue = useContext(FormContext);
+    const [val, setVal] = useState(value);
+
+    const onChange = (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        setVal(target.value);
+        setFormValue(target.id, target.value);
+    }
+
+    useEffect(() => {
+        setFormValue(id, value || "");
+    }, [value]);
+
+    return (
+        <label htmlFor={id} class="form-control w-full max-w-xs">
+            <div class="label">
+                <span class="label-text">{label}</span>
+            </div>
+            <input
+                type={type}
+                placeholder={label}
+                class="input input-bordered w-full max-w-xs"
+                id={id}
+                value={val}
+                onInput={onChange}
+                disabled={disabled}
+            />
+        </label>
+    );
+}
+
+function Picture() {
+    return (
+        <div className="relative overflow-hidden rounded-lg transition-all after:opacity-0 after:absolute after:inset-0 after:bg-black hover:after:opacity-20 focus:after:opacity-20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group cursor-pointer">
+            <img
+                src="https://picsum.photos/600/600"
+                width={600}
+                height={600}
+                alt="Gallery Image"
+                className="object-cover aspect-square"
+            />
+            <div className="absolute top-2 right-2 gap-2 flex opacity-0 group-hover:opacity-100 transition-all">
+                <button className="btn btn-sm btn-circle btn-primary">
+                    <FaEdit />
+                </button>
+                <button className="btn btn-sm btn-circle btn-error">
+                    <FaTrash />
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export default SimpleHome;
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -1,6 +1,7 @@
 ---
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+import '../styles/base.css';

 interface Props {
 	title: string;
@ -12,7 +13,7 @@ const { title, footer = true, className } = Astro.props;
 ---

 <!doctype html>
-<html lang="fr">
+<html lang="fr" data-theme="light">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
--- a/src/pages/espace-membres.astro
+++ b/src/pages/espace-membres.astro
@ -2,6 +2,6 @@
 import Layout from '../layouts/Layout.astro';
 import EspaceMembres from '../components/EspaceMembres.tsx';
 ---
-<Layout title="Espace membres" footer={false} className='min-h-full max-h-full overflow-y-hidden'>
+<Layout title="Espace membres" footer={false} className='min-h-full max-h-full'>
  <EspaceMembres client:only="preact"/>
 </Layout>
--- a/src/styles/base.css
+++ b/src/styles/base.css
@ -0,0 +1,161 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    body {
+        @apply font-Lato;
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes fade-out {
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes slide-from-right {
+    from {
+        transform: translateX(90px);
+    }
+}
+
+@keyframes slide-to-left {
+    to {
+        transform: translateX(-90px);
+    }
+}
+
+/* define animations for the old and new content */
+::view-transition-old(slide-it) {
+    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(slide-it) {
+    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+/* tie the view transition to a given CSS class */
+.sample-transition {
+    view-transition-name: slide-it;
+}
+
+/***** MODAL DIALOG ****/
+#modal {
+    /* Underlay covers entire screen. */
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+
+    /* Flexbox centers the .modal-content vertically and horizontally */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    /* Animate when opening */
+    animation-name: fadeIn;
+    animation-duration: 300ms;
+    animation-timing-function: ease;
+}
+
+#modal>.modal-underlay {
+    /* underlay takes up the entire viewport. This is only
+	required if you want to click to dismiss the popup */
+    position: absolute;
+    z-index: -1;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+}
+
+#modal>.modal-content {
+    /* color: black; */
+    /* Position visible dialog near the top of the window */
+    margin-top: 10vh;
+
+    /* Sizing for visible dialog */
+    width: 80%;
+    max-width: 400px;
+
+    /* Display properties for visible dialog*/
+    /* border: solid 1px #999;
+    border-radius: 8px;
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    background-color: white;
+    padding: 20px; */
+
+    /* Animate when opening */
+    animation-name: zoomIn;
+    animation-duration: 300ms;
+    animation-timing-function: ease;
+}
+
+#modal.closing {
+    /* Animate when closing */
+    animation-name: fadeOut;
+    animation-duration: 300ms;
+    animation-timing-function: ease;
+}
+
+#modal.closing>.modal-content {
+    /* Animate when closing */
+    animation-name: zoomOut;
+    animation-duration: 300ms;
+    animation-timing-function: ease;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes zoomIn {
+    0% {
+        transform: scale(0.8);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes zoomOut {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.8);
+    }
+}
+
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -2,7 +2,14 @@
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
-		extend: {},
+    extend: {
+      fontFamily: {
+        Lato: ["Lato, sans-serif"],
+      },
+    },
+  },
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["light", "dark"],
  },
-	plugins: [],
 }