[PIE-29] New recipe form submission (#15)

Basic form submission of recipe. Not everything is handled yet: images, tags, and step-associated-ingredients are not handled, as they do not have an interface in the recipe form yet.
Co-authored-by: June <self@breadone.net>
Co-committed-by: June <self@breadone.net>

astro.config.mjs

@@ -7,8 +7,6 @@ import tailwindcss from '@tailwindcss/vite';
 
 import { loadEnv } from "vite";
 
-const { PUBLIC_PB_URL } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
-
 // https://astro.build/config
 export default defineConfig({
   output: 'server',
@@ -19,5 +17,8 @@ export default defineConfig({
 
   vite: {
     plugins: [tailwindcss()],
+    server: {
+      cors: false
+    }
   }
 });

src/components/Card/TagRow.astro

@@ -6,7 +6,7 @@ const { tags } = Astro.props
     {
         (tags ?? []).map(tag => (
             <a 
-                href={`/tag/${tag.id}`}
+                href={`/tags/${tag.name}`}
                 class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30" 
             >
                 {tag.name}

src/components/Detail/InfoView.astro

@@ -15,8 +15,19 @@ function formatTime(seconds) {
     return result;
 }
 
-const workTime = formatTime(re.worktime)
+function formatTimeMin(minutes) {
-const waitTime = formatTime(re.waittime)
+    if (minutes === 0) return null
+    const h = Math.floor(minutes / 60);
+    const m = minutes % 60;
+    let result = "";
+    if (h > 0) result += `${h}h`;
+    if (m > 0) result += `${m}m`;
+    if (result === "") result = "0m";
+    return result;
+}
+
+const workTime = formatTimeMin(re.worktime)
+const waitTime = formatTimeMin(re.waittime)
 ---
 
 <p class="text-white/60 text-sm mt-1 italic">{re.description}</p>

src/components/Header.astro

@@ -8,7 +8,8 @@
 
     <div class="ml-auto space-x-5">
         <a class="hover:underline underline-offset-4" href="/recipe/new">new</a>
-        <a class="hover:underline underline-offset-4 " >tags</a>
+        <a class="hover:underline underline-offset-4" href="/recipe/import">add</a>
+        <!-- <a class="hover:underline underline-offset-4" href="/tags">tags</a> -->
         <a class="hover:underline underline-offset-4" >search</a>
     </div>
 </div>

src/data/pocketbase.ts

@@ -7,41 +7,30 @@ import {
     Collection
 } from './schema'
 
-const raw_client = new Pocketbase("http://localhost:4321")
-raw_client.autoCancellation(false)
-
-// Return a relative url for file instead of full path including localhost, which breaks external access
-raw_client.files.getRelativeURL = (record: { [key: string]: any; }, filename: string, queryParams?: FileOptions | undefined) => {
-    const res = raw_client.files.getURL(record, filename)
-    return res.substring(21)
-}
-
-export { raw_client };
-
 class APIClient {
-    client: Pocketbase
+    pb: Pocketbase
 
     constructor() {
-        this.client = new Pocketbase("http://localhost:4321")
+        this.pb = new Pocketbase("http://localhost:4321")
-        this.client.autoCancellation(false)
+        this.pb.autoCancellation(false)
     }
 
     async getRecipesPage(page: number, perPage: number = 30, options: RecordListOptions) {
-        return await this.client.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options)
+        return await this.pb.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options)
     }
 
     async getAllRecipes() {
-        return await this.client.collection<Recipe>(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' })
+        return await this.pb.collection<Recipe>(Collection.RECIPES).getFullList({ expand: 'ingredients,tags,steps,images,steps.ingredients' })
     }
 
     async getRecipe(id: string) {
-        return await this.client.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps,images,steps.ingredients' })
+        return await this.pb.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps,images,steps.ingredients' })
     }
 
     // IMAGE
     async getImageURL(imgID: string, relative: boolean = true) {
-        const record = await this.client.collection("images").getOne(imgID)
+        const record = await this.pb.collection(Collection.IMAGES).getOne(imgID)
-        const res = this.client.files.getURL(record, record.image)
+        const res = this.pb.files.getURL(record, record.image)
         return relative ? res.substring(21) : res
     }
 
@@ -55,6 +44,28 @@ class APIClient {
         return urls
     }
 
+    async getAllTags() {
+        return await this.pb.collection<Tag>(Collection.TAGS).getFullList()
+    }
+
+    async getTag(name: string) {
+        return await this.pb.collection<Tag>(Collection.TAGS).getList(1, 50, { filter: `name = '${name}'` })
+    }
+
+    async getRecipesOfTag(tagName: string) {
+        // get the tag id first
+        const tagResult = await this.getTag(tagName)
+        if (tagResult.items.length === 0) {
+            return []
+        }
+        const tag = tagResult.items[0]
+
+        return await this.pb.collection<Recipe>(Collection.RECIPES).getFullList({ 
+            filter: `tags ~ '${tag.id}'`,
+            expand: 'ingredients,tags,steps,images,steps.ingredients' 
+        })
+    }
+
 }
 const client = new APIClient()
 export default client;

src/layouts/base.astro

@@ -10,7 +10,7 @@ import Header from "@/components/Header";
 	<body>
 		<main id="main" class="flex-1">
 			<Header/>
-			<div class="px-3 md:px-5 pt-2">
+			<div class="px-3 mb-5 md:px-5 pt-2">
 				<slot />
 			</div>
 		</main>

src/pages/404.astro

@@ -0,0 +1,9 @@
+---
+import Base from "@/layouts/base";
+---
+
+<Base>
+    <div class="flex items-center justify-center text-3xl font-bold">
+        🥧 404 🥧
+    </div>
+</Base>

src/pages/api/[...proxy].ts

@@ -11,5 +11,9 @@ const getProxyUrl = (request: Request) => {
 export const ALL: APIRoute = async ({ request }) => {
   const proxyUrl = getProxyUrl(request);
   const response = await fetch(proxyUrl.href, request);
-  return new Response(response.body);
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers: response.headers
+  });
 };

src/pages/index.astro

@@ -9,7 +9,7 @@ const recipes = await client.getAllRecipes()
 <PageLayout>	
 	<!-- <p class="pb-2">What would you like today?</p> -->
 
-	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
+	<div class="grid gap-3 grid-cols-1 py-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
 		{
 			recipes.map(r => (
 				<OverviewCard recipe={r} />

src/pages/recipe/new.astro

@@ -13,7 +13,18 @@ async function submitRecipe() {
 
 <SiteLayout>
     <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
-        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
+        <div class="flex md:flex-1/3 flex-col sticky">
+
+            <div class="flex mb-2 items-center">
+                <p class="text-[28pt] mr-auto">New Recipe</p>
+                <button
+                    id="btn-save"
+                    class="px-1 w-15 h-9 bg-white/10 active:bg-white/20 transition-colors rounded-lg"
+                >
+                    Save
+                </button>
+            </div>
+
             <div class="relative">
                 <input 
                     id="photo" 
@@ -28,20 +39,55 @@ async function submitRecipe() {
                            [&::-webkit-file-upload-button]:hidden"
                 >
             </div>
+
+            <!-- Details -->
             <textarea
                 id="rec-name"
                 rows="1"
                 placeholder="Name"
                 class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
                 oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
+            />
+            <textarea
+                id="rec-desc"
+                rows="3"
+                placeholder="Description"
+                class="text-sm italic leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden p-2"
+                oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
             />
                 <!-- if it works :3  -->
 
-            <!-- Details -->
+            <!-- Smaller details -->
-            <!-- <InfoView re={re} /> -->
+            <div class="flex mt-2 h-9 space-x-2">
+                <input
+                    id="rec-servings"
+                    type="number"
+                    class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
+                    placeholder="Servings"
+                />
+                <input
+                    id="rec-worktime"
+                    type="text"
+                    class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
+                    placeholder="Work Time"
+                />
+                <input
+                    id="rec-waittime"
+                    type="text"
+                    class="bg-white/10 px-2 rounded-lg w-24 overflow-hidden"
+                    placeholder="Wait Time"
+                />
+                <input
+                    id="rec-rating"
+                    type="number"
+                    class="bg-white/10 px-2 rounded-lg w-23 overflow-hidden"
+                    placeholder="Rating"
+                />
+            </div>
+
 
             <div class="flex flex-row align-middle items-center">
-                <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
+                <p class="mt-4 text-[22pt] font-bold">Ingredients</p>
                 <button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
             </div>
             <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
@@ -69,7 +115,7 @@ async function submitRecipe() {
             </table>
         </div>
         
-        <div class="flex mt-4 md:flex-2/3 w-full flex-col md:ml-3">
+        <div class="flex mt-4 md:mt-16 md:flex-2/3 w-full flex-col md:ml-3">
             <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
 
             <!-- Steps -->

src/pages/tags/[name].astro

@@ -0,0 +1,22 @@
+---
+import SiteLayout from "@/layouts/base";
+import client from "@/data/pocketbase";
+import OverviewCard from "@/components/Card/OverviewCard";
+
+const { name } = Astro.params
+const recipes = await client.getRecipesOfTag(name) // todo redir to 404 if not found
+---
+
+<SiteLayout>
+    <p class="text-xl pb-2">
+        {recipes.length} { recipes.length == 1 ? "Recipe" : "Recipes" } with: <code class="bg-white/10 p-1 text-sm rounded-lg" >{name}</code>
+    </p>
+
+    <div class="grid md:gap-2 gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
+		{
+			recipes.map(r => (
+				<OverviewCard recipe={r} />
+			))
+		}
+	</div>
+</SiteLayout>

src/pages/tags/index.astro

@@ -0,0 +1,24 @@
+---
+import client from "@/data/pocketbase";
+import SiteLayout from "@/layouts/base";
+
+const tags = await client.getAllTags()
+
+const countsPerTag = await Promise.all(
+    tags.map(async t => (await client.getRecipesOfTag(t.name)).length)
+)
+---
+
+<SiteLayout>
+    <p class="title pb-2">
+        {tags.length} Tags
+    </p>
+    {
+        (tags ?? []).map((t, i) => (
+            // <p>{t.name} -&gt; {countsPerTag[i]} {countsPerTag[i] == 1 ? "Recipe" : "Recipes" } </p>
+            <a class="hover:underline" href={`/tags/${t.name}`}>
+                {t.name} ({countsPerTag[i]})
+            </a><br/>
+        ))
+    }
+</SiteLayout>

src/script/newRecipe.ts

@@ -1,3 +1,5 @@
+import client from "@/data/pocketbase"
+
 let ingredientFields: HTMLInputElement[] = []
 let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
 let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
@@ -8,13 +10,26 @@ let stepList: HTMLUListElement = document.querySelector('#step-list')!
 let currentStepIndex = 0
 
 // - VARS
-let ingredients: {qty: string, unit: string, name: string}[] = []
+let ingredients: {quantity: string, unit: string, name: string}[] = []
 let steps: {
     index: number,
     instruction: string,
     ingredients: string[], // IDs of ingredient fields
 }[] = []
 
+const formFields = () => {
+    return {
+        name: (document.querySelector("#rec-name") as HTMLTextAreaElement).value ?? "",
+        description: (document.querySelector("#rec-desc") as HTMLTextAreaElement).value ?? "",
+        servings: (document.querySelector("#rec-servings") as HTMLInputElement).value ?? "",
+        worktime: (document.querySelector("#rec-worktime") as HTMLInputElement).value ?? "",
+        waittime: (document.querySelector("#rec-waittime") as HTMLInputElement).value ?? "",
+        rating: (document.querySelector("#rec-rating") as HTMLInputElement).value ?? "",
+        ings: ingredients,
+        stepList: steps
+    }
+}
+
 // - INIT
 document.addEventListener('DOMContentLoaded', function() {
     
@@ -25,6 +40,7 @@ document.addEventListener('DOMContentLoaded', function() {
     )
 
     stepInput.addEventListener('input', showAddStepButton)
+    document.querySelector('#btn-save')?.addEventListener('click', addRecipe)
     
     // show plus button once the user types in the text fields
     ingredientFields.forEach(f => {
@@ -60,9 +76,35 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 // - ADD
+async function addRecipe() {
+    const comps = formFields()
+    console.log(comps.ings)
+    
+    const ingredientIDs = await Promise.all(
+        comps.ings.map(async it => (await client.pb.collection('ingredients').create(it)).id) // get the id of the returned record
+    )
+
+    const stepIDs = await Promise.all(
+        comps.stepList.map(async it => (await client.pb.collection('steps').create(it)).id)
+    )
+
+    const recipe = await client.pb.collection('recipes').create({
+        name: comps.name,
+        description: comps.description,
+        servings: comps.servings,
+        worktime: comps.worktime,
+        waittime: comps.waittime,
+        rating: comps.rating,
+        ingredients: ingredientIDs,
+        steps: stepIDs
+    })
+
+    console.log(recipe)
+}
+
 function addIngredient() {
     const ing = {
-        qty: ingredientFields[0].value,
+        quantity: ingredientFields[0].value,
         unit: ingredientFields[1].value,
         name: ingredientFields[2].value
     }
@@ -71,7 +113,7 @@ function addIngredient() {
     
     const newRow = document.createElement('tr')
     newRow.innerHTML = `
-        <td class="px-4 py-2 border-t border-white/10">${ing.qty}</td>
+        <td class="px-4 py-2 border-t border-white/10">${ing.quantity}</td>
         <td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
         <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
     `

src/styles/global.css

@@ -8,3 +8,7 @@ html {
     @apply font-sans;
     /* font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; */
 }
+
+.title {
+    @apply text-2xl;
+}