Enhance post creation and update functionality to include tag management

Author: Lukecsharpwalker

llms.txt

@@ -0,0 +1,129 @@
+# Angular
+
+Angular — Deliver web apps with confidence 🚀
+
+## Table of Contents
+
+- [What is Angular](https://angular.dev/overview)
+- [Installation guide](https://angular.dev/installation)
+- [Style Guide](https://next.angular.dev/style-guide)
+
+## Components
+
+- [What is a component](https://angular.dev/guide/components)
+- [Component selectors](https://angular.dev/guide/components/selectors)
+- [Styling components](https://angular.dev/guide/components/styling)
+- [Accepting data with input properties](https://angular.dev/guide/components/inputs)
+- [Custom events with output](https://angular.dev/guide/components/outputs)
+- [Content projection](https://angular.dev/guide/components/content-projection)
+- [Component lifecycle](https://angular.dev/guide/components/lifecycle)
+
+## Templates guides
+
+- [Template Overview](https://angular.dev/guide/templates)
+- [Adding event listeners](https://angular.dev/guide/templates/event-listeners)
+- [Binding text, properties and attributes](https://angular.dev/guide/templates/binding)
+- [Control Flow](https://angular.dev/guide/templates/control-flow)
+- [Template variable declaration](https://angular.dev/guide/templates/variables)
+- [Deferred loading of components](https://angular.dev/guide/templates/defer)
+- [Expression syntax](https://angular.dev/guide/templates/expression-syntax)
+
+## Directives
+
+- [Directives overview](https://angular.dev/guide/directives)
+- [Attribute directives](https://angular.dev/guide/directives/attribute-directives)
+- [Structural directives](https://angular.dev/guide/directives/structural-directives)
+- [Directive composition](https://angular.dev/guide/directives/directive-composition-api)
+- [Optimizing images](https://angular.dev/guide/image-optimization)
+
+## Signals
+
+- [Signals overview](https://angular.dev/guide/signals)
+- [Dependent state with linkedSignal](https://angular.dev/guide/signals/linked-signal)
+- [Async reactivity with resources](https://angular.dev/guide/signals/resource)
+
+## Dependency injection (DI)
+
+- [Dependency Injection overview](https://angular.dev/guide/di)
+- [Understanding Dependency injection](https://angular.dev/guide/di/dependency-injection)
+- [Creating an injectable service](https://angular.dev/guide/di/creating-injectable-service)
+- [Configuring dependency providers](https://angular.dev/guide/di/dependency-injection-providers)
+- [Injection context](https://angular.dev/guide/di/dependency-injection-context)
+- [Hierarchical injectors](https://angular.dev/guide/di/hierarchical-dependency-injection)
+- [Optimizing Injection tokens](https://angular.dev/guide/di/lightweight-injection-tokens)
+
+## RxJS
+
+- [RxJS interop with Angular signals](https://angular.dev/ecosystem/rxjs-interop)
+- [Component output interop](https://angular.dev/ecosystem/rxjs-interop/output-interop)
+
+## Loading Data
+
+- [HttpClient overview](https://angular.dev/guide/http)
+- [Setting up the HttpClient](https://angular.dev/guide/http/setup)
+- [Making requests](https://angular.dev/guide/http/making-requests)
+- [Intercepting requests](https://angular.dev/guide/http/interceptors)
+- [Testing](https://angular.dev/guide/http/testing)
+
+## Forms
+- [Forms overview](https://angular.dev/guide/forms)
+- [Reactive Forms](https://angular.dev/guide/forms/reactive-forms)
+- [Strictly types forms](https://angular.dev/guide/forms/typed-forms)
+- [Template driven forms](https://angular.dev/guide/forms/template-driven-forms)
+- [Validate forms input](https://angular.dev/guide/forms/form-validation)
+- [Building dynamic forms](https://angular.dev/guide/forms/dynamic-forms)
+
+## Routing
+- [Routing overview](https://angular.dev/guide/routing)
+- [Common routing tasks](https://angular.dev/guide/routing/common-router-tasks)
+- [Routing in an SPA](https://angular.dev/guide/routing/router-tutorial)
+- [Creating custom route matches](https://angular.dev/guide/routing/routing-with-urlmatcher)
+
+## Server Side Rendering (SSR)
+
+- [SSR Overview](https://angular.dev/guide/performance)
+- [SSR with Angular](https://angular.dev/guide/ssr)
+- [Build-time prerendering (SSG)](https://angular.dev/guide/prerendering)
+- [Hybrid rendering with server routing](https://angular.dev/guide/hybrid-rendering)
+- [Hydration](https://angular.dev/guide/hydration)
+- [Incremental Hydration](https://angular.dev/guide/incremental-hydration)
+
+# CLI
+[Angular CLI Overview](https://angular.dev/tools/cli)
+
+## Testing
+
+- [Testing overview](https://angular.dev/guide/testing)
+- [Testing coverage](https://angular.dev/guide/testing/code-coverage)
+- [Testing services](https://angular.dev/guide/testing/services)
+- [Basics of component testing](https://angular.dev/guide/testing/components-basics)
+- [Component testing scenarios](https://angular.dev/guide/testing/components-scenarios)
+- [Testing attribute directives](https://angular.dev/guide/testing/attribute-directives
+- [Testing pipes](https://angular.dev/guide/testing/pipes
+- [Debugging tests](https://angular.dev/guide/testing/debugging)
+- [Testing utility apis](https://angular.dev/guide/testing/utility-apis)
+- [Component harness overview](https://angular.dev/guide/testing/component-harnesses-overview)
+- [Using component harness in tests](https://angular.dev/guide/testing/using-component-harnesses)
+- [Creating a component harness for your components](https://angular.dev/guide/testing/creating-component-harnesses)
+
+## Animations
+- [Animations your content](https://angular.dev/guide/animations/css)
+- [Route transition animation](https://angular.dev/guide/animations/route-animations)
+- [Migrating to native CSS animations](https://next.angular.dev/guide/animations/migration)
+
+## APIs
+- [API reference](https://angular.dev/api)
+- [CLI command reference](https://angular.dev/cli)
+
+
+## Others
+
+- [Zoneless](https://angular.dev/guide/experimental/zoneless)
+- [Error encyclopedia](https://angular.dev/errors)
+- [Extended diagnostics](https://angular.dev/extended-diagnostics)
+- [Update guide](https://angular.dev/update-guide)
+- [Contribute to Angular](https://github.com/angular/angular/blob/main/CONTRIBUTING.md)
+- [Angular's Roadmap](https://angular.dev/roadmap)
+- [Keeping your projects up-to-date](https://angular.dev/update)
+- [Security](https://angular.dev/best-practices/security)
+- [Internationalization (i18n)](https://angular.dev/guide/i18n)

src/app/admin/_components/add-post/add-post.component.ts

@@ -95,7 +95,7 @@ export class AddPostComponent implements OnInit {
 
   onSubmit(isDraft = false): void {
     this.highlightContent();
-    //test for description
+    // Test for description
     if (!this.blogForm?.controls?.description?.value) {
       this.blogForm.controls?.description?.setValue(
         this.blogForm.controls.content.value.toString().substring(0, 150),
@@ -107,16 +107,21 @@ export class AddPostComponent implements OnInit {
       const cleanedContent = rawContent.replace(/( |\u00A0)/g, ' ');
       this.blogForm.controls.content.setValue(cleanedContent);
       this.blogForm.controls.is_draft.setValue(isDraft);
+
       if (!this.blogForm.controls.created_at.value) {
         this.blogForm.controls.created_at.setValue(null);
       }
+
+      // Extract form data including tags
+      const formData = {
+        ...this.blogForm.value,
+        tags: this.blogForm.controls.tags.value,
+      };
+
       if (this.postId) {
-        this.apiService.updatePost(
-          this.postId,
-          this.blogForm.value as PostUpdate,
-        );
+        this.apiService.updatePost(this.postId, formData as PostUpdate & { tags: Tag[] });
       } else {
-        this.apiService.addPost(this.blogForm.value as PostInsert);
+        this.apiService.addPost(formData as PostInsert & { tags: Tag[] });
       }
     }
   }

src/app/admin/_services/admin-api.service.ts

@@ -1,6 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import { map, Observable } from 'rxjs';
-import { Post, PostInsert, PostUpdate } from '../../supabase-types';
+import { Post, PostInsert, PostUpdate, Tag } from '../../supabase-types';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { SupabaseService } from '../../services/supabase.service';
 import { environment } from '../../../environments/environment.local';
@@ -12,10 +12,42 @@ export class AdminApiService {
   private readonly baseUrl = `${environment.supabaseUrl}/rest/v1/`;
   private readonly apiKey = environment.supabaseKey;
 
-  async addPost(post: PostInsert): Promise<void> {
-    const { error } = await this.supabaseService.getClient
-      .from('posts')
-      .insert({ ...post });
+  async addPost(post: PostInsert & { tags?: Tag[] }): Promise<void> {
+    const { tags, ...postData } = post;
+
+    try {
+      const { data: insertedPost, error: postError } = await this.supabaseService.getClient
+        .from('posts')
+        .insert({ ...postData })
+        .select('id')
+        .single();
+
+      if (postError) {
+        console.error('Error inserting post:', postError);
+        throw postError;
+      }
+
+      if (tags && tags.length > 0 && insertedPost) {
+        const postTagInserts = tags.map(tag => ({
+          post_id: insertedPost.id,
+          tag_id: tag.id
+        }));
+
+        const { error: tagError } = await this.supabaseService.getClient
+          .from('post_tags')
+          .insert(postTagInserts);
+
+        if (tagError) {
+          console.error('Error inserting post tags:', tagError);
+          throw tagError;
+        }
+      }
+
+      console.log('Post created successfully with tags');
+    } catch (error) {
+      console.error('Failed to create post:', error);
+      throw error;
+    }
   }
 
   getPostById(id: string): Observable<Post> {
@@ -43,13 +75,79 @@ export class AdminApiService {
       .pipe(map((results) => results[0] ?? null));
   }
 
-  async updatePost(id: string, post: PostUpdate): Promise<void> {
-    await this.supabaseService.getClient
-      .from('posts')
-      .update({ ...post })
-      .eq('id', id)
-      .then((x) => {
-        console.log(x);
-      });
+  async updatePost(id: string, post: PostUpdate & { tags?: Tag[] }): Promise<void> {
+    const { tags, ...postData } = post;
+
+    try {
+      // Update the post
+      const { error: postError } = await this.supabaseService.getClient
+        .from('posts')
+        .update({ ...postData })
+        .eq('id', id);
+
+      if (postError) {
+        console.error('Error updating post:', postError);
+        throw postError;
+      }
+
+      // Handle tags if provided
+      if (tags !== undefined) {
+        // Get existing tags for comparison
+        const { data: existingPostTags, error: fetchError } = await this.supabaseService.getClient
+          .from('post_tags')
+          .select('tag_id')
+          .eq('post_id', id);
+
+        if (fetchError) {
+          console.error('Error fetching existing post tags:', fetchError);
+          throw fetchError;
+        }
+
+        const existingTagIds = (existingPostTags || []).map(pt => pt.tag_id).sort();
+        const newTagIds = tags.map(tag => tag.id).sort();
+
+        // Check if tags have actually changed using JSON comparison for better accuracy
+        const tagsChanged = JSON.stringify(existingTagIds) !== JSON.stringify(newTagIds);
+
+        if (tagsChanged) {
+          console.log('Tags changed, updating...');
+
+          // Delete existing post-tag relationships
+          const { error: deleteError } = await this.supabaseService.getClient
+            .from('post_tags')
+            .delete()
+            .eq('post_id', id);
+
+          if (deleteError) {
+            console.error('Error deleting existing post tags:', deleteError);
+            throw deleteError;
+          }
+
+          // Insert new post-tag relationships if tags exist
+          if (tags.length > 0) {
+            const postTagInserts = tags.map(tag => ({
+              post_id: id,
+              tag_id: tag.id
+            }));
+
+            const { error: insertError } = await this.supabaseService.getClient
+              .from('post_tags')
+              .insert(postTagInserts);
+
+            if (insertError) {
+              console.error('Error inserting new post tags:', insertError);
+              throw insertError;
+            }
+          }
+        } else {
+          console.log('Tags unchanged, skipping tag update');
+        }
+      }
+
+      console.log('Post updated successfully');
+    } catch (error) {
+      console.error('Failed to update post:', error);
+      throw error;
+    }
   }
 }

supabase/migrations/20250525091356_remote_schema.sql

@@ -226,7 +226,7 @@ CREATE POLICY "Only Admin can delete comments" ON "public"."comments" FOR DELETE
 
 
 
-CREATE POLICY "Only Admin can delete post_tags" ON "public"."post_tags" FOR DELETE USING (("auth"."role"() = 'Admin'::"text"));
+CREATE POLICY "Only Admin can delete post_tags" ON "public"."post_tags" FOR DELETE USING (((("auth"."jwt"() -> 'app_metadata'::"text") ->> 'role'::"text") = 'Admin'::"text"));