feat(playground): improve playground

Tahul · Tahul · commit c635109c4deb · 2024-02-21T19:28:31.000+01:00
diff --git a/playground/dbschema/migrations/00001.edgeql b/playground/dbschema/migrations/00001.edgeql
@@ -1,12 +1,14 @@
-CREATE MIGRATION m1axchg2g3dqbqj3762e34ypgx6ndkiyr6fpl2niu2elb3d3kr5nfq
+CREATE MIGRATION m1nsxvycfjoyjrxdeejwuuovtufkpjn3vxqg3hsxfxrvwcicxtquya
     ONTO initial
 {
   CREATE EXTENSION pgcrypto VERSION '1.3';
   CREATE EXTENSION auth VERSION '1.0';
+
   CREATE TYPE default::User {
       CREATE REQUIRED LINK identity: ext::auth::Identity;
       CREATE REQUIRED PROPERTY name: std::str;
   };
+
   CREATE GLOBAL default::current_user := (std::assert_single((SELECT
       default::User {
           id,
@@ -15,12 +17,29 @@ CREATE MIGRATION m1axchg2g3dqbqj3762e34ypgx6ndkiyr6fpl2niu2elb3d3kr5nfq
   FILTER
       (.identity = GLOBAL ext::auth::ClientTokenIdentity)
   )));
+
   CREATE TYPE default::BlogPost {
-      CREATE REQUIRED LINK author: default::User;
+      CREATE REQUIRED LINK author: default::User {
+          SET default := (GLOBAL default::current_user);
+      };
       CREATE ACCESS POLICY author_has_full_access
           ALLOW ALL USING ((.author ?= GLOBAL default::current_user));
       CREATE ACCESS POLICY others_read_only
           ALLOW SELECT ;
-      CREATE REQUIRED PROPERTY text: std::str;
+      CREATE PROPERTY content: std::str {
+          SET default := 'My super blog post.';
+      };
+      CREATE PROPERTY description: std::str {
+          SET default := 'My blog post description.';
+      };
+      CREATE PROPERTY title: std::str {
+          SET default := 'My blog super blog post title.';
+      };
+  };
+
+  ALTER TYPE default::User {
+      CREATE MULTI LINK posts: default::BlogPost {
+          ON SOURCE DELETE DELETE TARGET;
+      };
   };
 };
diff --git a/playground/dbschema/migrations/00002.edgeql b/playground/dbschema/migrations/00002.edgeql
diff --git a/playground/dbschema/migrations/00003.edgeql b/playground/dbschema/migrations/00003.edgeql
diff --git a/playground/dbschema/migrations/00004.edgeql b/playground/dbschema/migrations/00004.edgeql
diff --git a/playground/pages/auth/forgot-password.vue b/playground/pages/auth/forgot-password.vue
@@ -14,14 +14,15 @@
               type="email"
               :value="email"
               placeholder="your@email.com"
-              @change="(e) => updateEmail(e.target.value)"
+              @change="(e: any) => updateEmail(e.target.value)"
             />
           </UFormGroup>
         </div>
 
         <template #footer>
           <UButton
             type="button"
+            color="gray"
             :loading="loading"
             @click="(e) => submit()"
           >
diff --git a/playground/pages/auth/login.vue b/playground/pages/auth/login.vue
@@ -15,15 +15,17 @@
               type="email"
               :value="email"
               placeholder="your@email.com"
-              @change="(e) => updateEmail(e.target.value)"
+              @change="(e: any) => updateEmail(e.target.value)"
+              @keyup.enter="() => submit()"
             />
           </UFormGroup>
           <UFormGroup label="Password">
             <UInput
               type="password"
               :value="password"
               placeholder="password"
-              @change="(e) => updatePassword(e.target.value)"
+              @change="(e: any) => updatePassword(e.target.value)"
+              @keyup.enter="() => submit()"
             />
           </UFormGroup>
         </div>
@@ -32,8 +34,9 @@
           <div class="flex items-center gap-2">
             <UButton
               type="button"
+              color="gray"
               :loading="loading"
-              @click="(e) => submit()"
+              @click="() => submit()"
             >
               Login
             </UButton>
diff --git a/playground/pages/auth/reset-password.vue b/playground/pages/auth/reset-password.vue
@@ -14,16 +14,17 @@
               type="password"
               :value="password"
               placeholder="your@email.com"
-              @change="(e) => updatePassword(e.target.value)"
+              @change="(e: any) => updatePassword(e.target.value)"
             />
           </UFormGroup>
         </div>
 
         <template #footer>
           <UButton
             type="button"
+            color="gray"
             :loading="loading"
-            @click="(e) => submit()"
+            @click="() => submit()"
           >
             Send reset email
           </UButton>
diff --git a/playground/pages/auth/signup.vue b/playground/pages/auth/signup.vue
@@ -14,25 +14,28 @@
               type="email"
               :value="email"
               placeholder="your@email.com"
-              @change="(e) => updateEmail(e.target.value)"
+              @change="(e: any) => updateEmail(e.target.value)"
+              @keyup.enter="() => submit()"
             />
           </UFormGroup>
           <UFormGroup label="Password">
             <UInput
               type="password"
               :value="password"
               placeholder="password"
-              @change="(e) => updatePassword(e.target.value)"
+              @change="(e: any) => updatePassword(e.target.value)"
+              @keyup.enter="() => submit()"
             />
           </UFormGroup>
         </div>
 
         <template #footer>
           <div class="flex items-center gap-2">
             <UButton
+              color="gray"
               type="button"
               :loading="loading"
-              @click="(e) => submit()"
+              @click="() => submit()"
             >
               Signup
             </UButton>
diff --git a/playground/pages/auth/verify.vue b/playground/pages/auth/verify.vue
@@ -8,7 +8,7 @@
         <template #header>
           <h2>Email verification</h2>
         </template>
-        <UButton :loading="loading">
+        <UButton :loading="loading" color="gray">
           Loading...
         </UButton>
       </UCard>
diff --git a/playground/pages/blogposts/[id].vue b/playground/pages/blogposts/[id].vue
@@ -23,7 +23,9 @@ const { data: blogpost } = await useAsyncData<BlogPost>(
 
       <template #footer>
         <NuxtLink to="/">
-          <UButton>Home</UButton>
+          <UButton color="gray">
+            Home
+          </UButton>
         </NuxtLink>
       </template>
     </UCard>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -11,10 +11,9 @@ const { data, refresh } = await useAsyncData<BlogPost[]>(
 async function deleteBlogPost(id: string) {
   await $fetch('/api/blogpost', {
     method: 'DELETE',
-    body: {
-      id,
-    },
+    query: { id },
   })
+
   await refresh()
 }
 </script>
@@ -28,23 +27,36 @@ async function deleteBlogPost(id: string) {
       <template #header>
         <div class="flex items-center justify-between">
           <h2>{{ blogpost.title }}</h2>
+        </div>
+      </template>
+
+      <p class="text-sm opacity-50">
+        {{ blogpost.description }}
+      </p>
+
+      <template #footer>
+        <div class="flex items-center justify-between">
+          <div>
+            <UButton color="gray">
+              <NuxtLink :to="`/blogposts/${blogpost.id}`">
+                Read more
+              </NuxtLink>
+            </UButton>
+          </div>
+
           <div
             v-if="isLoggedIn"
             class="cursor-pointer"
             @click="() => deleteBlogPost(blogpost.id)"
           >
-            <UIcon name="i-heroicons-trash" />
+            <UButton icon="i-heroicons-trash" color="red" variant="outline">
+              <NuxtLink :to="`/blogposts/${blogpost.id}`">
+                Delete
+              </NuxtLink>
+            </UButton>
           </div>
         </div>
       </template>
-
-      <p>{{ blogpost.description }}</p>
-
-      <template #footer>
-        <NuxtLink :to="`/blogposts/${blogpost.id}`">
-          Read more
-        </NuxtLink>
-      </template>
     </UCard>
   </UContainer>
 </template>
diff --git a/playground/pages/new.vue b/playground/pages/new.vue
@@ -5,27 +5,38 @@ const success = ref()
 const title = ref()
 const description = ref()
 const content = ref()
+const router = useRouter()
+const { isLoggedIn } = useEdgeDbIdentity()
 
 let timeout: undefined | NodeJS.Timeout
+
+if (!isLoggedIn.value)
+  router.push('/')
+
 async function submit() {
   loading.value = true
   error.value = ''
   clearTimeout(timeout)
+
   try {
-    await $fetch('/api/blogpost', {
+    const blogPost = await $fetch('/api/blogpost', {
       method: 'POST',
       body: {
         title: title.value,
         description: description.value,
         content: content.value,
       },
     })
+
+    router.push(`/blogposts/${blogPost.id}`)
+
     success.value = true
   }
   catch (e: any) {
     console.log(e)
     error.value = e
   }
+
   timeout = setTimeout(() => (success.value = undefined), 1000)
   loading.value = false
 }
@@ -59,7 +70,7 @@ async function submit() {
       </UFormGroup>
     </div>
     <template #footer>
-      <UButton @click="submit">
+      <UButton color="gray" @click="submit">
         {{ loading ? 'Loading...' : 'Submit' }}
       </UButton>
     </template>
diff --git a/playground/server/api/blogpost.ts b/playground/server/api/blogpost.ts
@@ -3,15 +3,13 @@ import { useEdgeDbQueries } from '#edgedb/server'
 import type { BlogPost } from '#edgedb/interfaces'
 
 export default defineEventHandler(async (req) => {
-  const query = getQuery(req)
   const { insertBlogPost, allBlogPosts, deleteBlogPost, getBlogPost } = useEdgeDbQueries(req)
+  const query = getQuery(req)
+  const id = query?.id as string | undefined
 
   if (isMethod(req, 'POST')) {
-    const {
-      title,
-      description,
-      content,
-    } = await readBody(req)
+    const body = await readBody(req)
+    const { title, description, content } = body
 
     const blogPost = await insertBlogPost({
       blogpost_title: title,
@@ -23,16 +21,18 @@ export default defineEventHandler(async (req) => {
   }
 
   if (isMethod(req, 'GET')) {
-    if (query?.id) {
-      const blogpost = await getBlogPost({ blogpost_id: query.id.toString() })
+    if (id) {
+      const blogpost = await getBlogPost({ blogpost_id: id })
       return blogpost as BlogPost
     }
 
-    return await allBlogPosts()
+    const count = await useEdgeDb().query('select count(BlogPost);').then(([count]) => count)
+
+    return count ? await allBlogPosts() : []
   }
 
-  if (isMethod(req, 'DELETE') && query?.id) {
-    await deleteBlogPost({ blogpost_id: query.id.toString() })
-    return { deleted: query?.id }
+  if (isMethod(req, 'DELETE') && id) {
+    await deleteBlogPost({ blogpost_id: id })
+    return { deleted: id }
   }
 })
