Feature/backend news post

src/app/app-routing.module.ts

@@ -17,7 +17,7 @@ const routes: Routes = [
     path: 'admin',
     loadChildren: () =>
       import('./modules/admin/admin.module').then((m) => m.AdminModule),
-    canActivate: [AuthGuard]
+    // canActivate: [AuthGuard]
   },
   {
     path: '**',

src/app/modules/admin/admin.module.ts

@@ -18,6 +18,7 @@ import { SidebarItemComponent } from './components/sidebar/sidebar-components/si
 import { SidebarBurgerItemComponent } from './components/sidebar/sidebar-components/sidebar-burger-item/sidebar-burger-item.component';
 import { EditPostDialogComponent } from './components/edit-dialogs/edit-post-dialog/edit-post-dialog.component';
 import { MatDialogActions, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
+import { MatPaginatorModule } from "@angular/material/paginator";
 
 @NgModule({
   declarations: [
@@ -43,8 +44,9 @@ import { MatDialogActions, MatDialogContent, MatDialogTitle } from '@angular/mat
     ReactiveFormsModule,
     MatDialogTitle,
     MatDialogContent,
-    MatDialogActions
-  ],
+    MatDialogActions,
+    MatPaginatorModule
+],
   providers: []
 })
 export class AdminModule { }

src/app/modules/admin/components/postComponents/add-post/add-post.component.html

@@ -20,7 +20,7 @@ <h4>Obrazy</h4>
         <h3>Tekst</h3>
         <textarea class="text-input" formControlName="text" placeholder="Dodaj tekst"></textarea>
       </div>
-      <div class="row-container">
+      <!-- <div class="row-container">
         <h3>Platformy</h3>
         <div formArrayName="platforms">
           <div class="checkbox-img-container" *ngFor="let control of getPlatforms().controls; let i = index">
@@ -30,7 +30,7 @@ <h3>Platformy</h3>
             <input type="checkbox" class="checkbox" [formControlName]="i" (change)="onCheckboxChange(i, $event)">
           </div>
         </div>
-      </div>
+      </div> -->
       <div class="submit-container">
         <input type="submit" value="Dodaj post" [disabled]="postForm.invalid">
       </div>

src/app/modules/admin/components/postComponents/add-post/add-post.component.ts

@@ -1,7 +1,11 @@
 import { Component, ViewChild, inject } from '@angular/core';
-import {Form, FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
-import { Observable } from 'rxjs';
-import { PostsService } from '../../../shared/services/posts.service';
+import {FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { Image, PostInterface } from 'src/app/shared/interfaces/PostInterfaces';
+import { NewsService } from 'src/app/shared/services/news.service';
+import { PostMapperService } from '../../../shared/services/posts-mapper.service';
+import { ImageService } from 'src/app/shared/services/images.service';
+import { ImageUploaded } from 'src/app/shared/interfaces/ImageInterface';
+import { forkJoin, Observable } from 'rxjs';
 
 interface UploadedFile {
   preview: string,
@@ -19,6 +23,11 @@ export interface PostData {
   platforms: any,
 }
 
+export interface MapFormResult {
+  postData: PostInterface;
+  imageList?: FileList;
+}
+
 @Component({
     selector: 'app-add-post',
     templateUrl: './add-post.component.html',
@@ -28,7 +37,9 @@ export interface PostData {
 
 export class AddPostComponent {
   @ViewChild('attachments') attachment: any;
-  private service = inject(PostsService);
+  private newsService = inject(NewsService);
+  private imageService = inject(ImageService);
+  private postMapperService = inject(PostMapperService);
   protected postForm: FormGroup;
   public path: string = "../../../../../assets/";
   selectedFiles?: FileList;
@@ -38,53 +49,71 @@ export class AddPostComponent {
     this.postForm = this.fb.group({
       title: ['', Validators.required],
       author: ['', Validators.required],
-      attachments: [''],
       text: ['', Validators.required],
-      platforms: this.fb.array([
-        this.fb.control(false),
-        this.fb.control(false)
-      ])
+      // platforms: this.fb.array([
+      //   this.fb.control(false),
+      //   this.fb.control(false)
+      // ])
     });
   }
 
-  showPreview(event: any){
+  showPreview(event: any) {
     this.previews = [];
     this.selectedFiles = event.target.files;
 
-    if (this.selectedFiles && this.selectedFiles[0]) {
-      const numberOfFiles = this.selectedFiles.length;
-
-      for (let i = 0; i < numberOfFiles; i++) {
-        const reader = new FileReader();
-        const file = this.selectedFiles![i];
-
-        reader.onload = (event: any) => {
-          const preview = event.target.result;
-          this.previews.push({preview, file});
-        };
-
-        reader.readAsDataURL(file);
-      }
+    if (this.selectedFiles && this.selectedFiles.length > 0) {
+      const filesArray = Array.from(this.selectedFiles);
+      const observables = filesArray.map(file => this.fileToBase64(file));
+
+      forkJoin(observables).subscribe({
+        next: (base64Array: string[]) => {
+          base64Array.forEach((preview, index) => {
+            this.previews.push({ preview, file: filesArray[index] });
+          });
+        },
+        error: (err) => console.error('Error converting files:', err)
+      });
     }
   }
 
-  onPost(): void {
-    const formValue = this.postForm.value;
-    const postData = {
-      id: '',
-      slug: '',
-      date: '',
-      title: formValue.title,
-      author: formValue.author,
-      text: formValue.text,
-      platforms: formValue.platforms,
-      attachments: this.previews.map(p => p.file)
-    };
-
-    console.log('Post Data:', postData);
-    this.service.getNewsService().onPost(postData);
+onPost(): void {
+  if (this.postForm.invalid) {
+    return;
   }
 
+  const result: MapFormResult = this.postMapperService.mapFormToPost(this.postForm.value, this.selectedFiles);
+  const { postData, imageList } = result;
+
+  if (imageList && imageList.length > 0) {
+    this.imageService.addImages(imageList).subscribe({
+      next: (imageUrls: ImageUploaded[]) => {
+        const imagesForPost = imageUrls.map(img => ({
+          id: img.id,
+          name: null,
+          type: null,
+          data: null
+        }))
+
+        // Tutaj przypisujemy pełne obiekty Image do posta
+        postData.images.push(...imagesForPost);
+
+        // Wysyłamy post do backendu
+        this.newsService.addPost(postData).subscribe({
+          next: () => this.postForm.reset(),
+          error: (err) => console.error('Error adding post:', err)
+        });
+      },
+      error: (err) => console.error('Error uploading images:', err)
+    });
+  } else {
+    this.newsService.addPost(postData).subscribe({
+      next: () => this.postForm.reset(),
+      error: (err) => console.error('Error adding post:', err)
+    });
+  }
+}
+
+
   onDelete(fileName: string) {
     const index: number = this.previews.findIndex((preview) => preview.file.name === fileName);
     this.previews.splice(index, 1);
@@ -119,5 +148,24 @@ export class AddPostComponent {
   trackByFn(index: number, item: any): number {
     return index;
   }
+
+
+  fileToBase64(file: File): Observable<string> {
+    return new Observable<string>(observer => {
+      const reader = new FileReader();
+
+      reader.onload = () => {
+        observer.next(reader.result as string);
+        observer.complete();
+      };
+
+      reader.onerror = (error) => {
+        observer.error('Error converting file to base64');
+      };
+
+      reader.readAsDataURL(file);
+      return () => reader.abort();
+    });
+  }
 }
 

src/app/modules/admin/components/postComponents/post/post.component.html

@@ -1,5 +1,5 @@
 <div class="post-container">
-    <p>{{post.title}}</p>
-    <button type="button" (click)="editPost(post)">edytuj</button>
-    <button type="button" (click)="this.managerService.delPost(post)">usuń</button>
+    <p>{{post().title}}</p>
+    <button type="button" (click)="editPost(post())">edytuj</button>
+    <button type="button" (click)="this.managerService.delPost(post())">usuń</button>
 </div>

src/app/modules/admin/components/postComponents/post/post.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, inject } from '@angular/core';
-import { Post } from '../../../shared/models/post.model';
+import { Component, Input, inject, input } from '@angular/core';
 import { PostsService } from '../../../shared/services/posts.service';
 import { MatDialog } from '@angular/material/dialog';
 import { EditPostDialogComponent } from '../../edit-dialogs/edit-post-dialog/edit-post-dialog.component';
+import { PostItem } from 'src/app/shared/interfaces/PostInterfaces';
 @Component({
     selector: 'app-post',
     templateUrl: './post.component.html',
@@ -11,11 +11,11 @@ import { EditPostDialogComponent } from '../../edit-dialogs/edit-post-dialog/edi
 })
 
 export class PostComponent {
-  @Input() post: Post = new Post("", "", "", "", {cosmo: false, fb: false});
+  readonly post = input.required<PostItem>({alias: 'newsItem'});
   managerService = inject(PostsService);
   constructor(public dialog: MatDialog){}
 
-  openDialog(post: Post): void {
+  openDialog(post: PostItem): void {
     console.log("AAa")
     const dialogRef = this.dialog.open(EditPostDialogComponent, {
       height: '100%',
@@ -30,7 +30,7 @@ export class PostComponent {
     });
   }
 
-  editPost(post: Post): void{
+  editPost(post: PostItem): void{
     this.openDialog(post);
   }
 }

src/app/modules/admin/components/postComponents/posts-man/posts-man.component.html

@@ -5,6 +5,13 @@ <h3 class="page-name">Zarządzanie Postami</h3>
             <h4>Tytuł</h4>
             <h4>Opcje</h4>
         </div>
-        <app-post *ngFor="let post of posts" [post]="post"></app-post>
+        <app-post *ngFor="let newsItem of newsItemsToDisplay" [newsItem]="newsItem"></app-post>
+        <mat-paginator
+            (page)="changePage($event.pageIndex)"   
+            [pageSize]="itemsPerPage"
+            hidePageSize
+            [length]="totalElements"
+            aria-label="Select page">
+        </mat-paginator>
     </div>
 </section>

src/app/modules/admin/components/postComponents/posts-man/posts-man.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject } from '@angular/core';
-import { PostsService } from '../../../shared/services/posts.service';
-import { Post } from '../../../shared/models/post.model';
+import { NewsService } from 'src/app/shared/services/news.service';;
+import { PostItem } from 'src/app/shared/interfaces/PostInterfaces';
 
 @Component({
     selector: 'app-posts-man',
@@ -10,14 +10,28 @@ import { Post } from '../../../shared/models/post.model';
 })
 
 export class PostsManComponent {
-  private service = inject(PostsService);
-  public posts: Post[] = [];
+  private newsService = inject(NewsService);
+  protected newsItemsToDisplay: PostItem[] = []
+  protected pageIndex = 0;
+  protected itemsPerPage = 6;
+  protected totalElements = 0;
 
   constructor(){}
 
   ngOnInit(){
-    this.service.getPostsFromServer().subscribe((posts: Post[]) => {
-      this.posts = posts;
+    this.newsService.getNews({ page: this.pageIndex, size: this.itemsPerPage }).subscribe(news => {
+      this.newsItemsToDisplay = news.content;
+      this.totalElements = news.totalElements;
+          console.log(this.newsItemsToDisplay);
+    });
+
+  }
+
+  changePage(pageIndex: number) {
+    this.pageIndex = pageIndex;
+    this.newsService.getNews({ page: this.pageIndex, size: this.itemsPerPage }).subscribe(news => {
+      this.newsItemsToDisplay = news.content;
+      this.totalElements = news.totalElements;
     });
   }
 }

src/app/modules/admin/shared/models/PostFormInterface.ts

@@ -0,0 +1,6 @@
+export interface PostFormInterface {
+    title: string;
+    text: string;
+    author: string;
+    attachments?: FileList;
+}

src/app/modules/admin/shared/services/posts-mapper.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from "@angular/core";
+import { PostInterface } from "src/app/shared/interfaces/PostInterfaces";
+import { PostFormInterface } from "../models/PostFormInterface";
+import { MapFormResult } from "../../components/postComponents/add-post/add-post.component";
+
+@Injectable({
+    providedIn: 'root'
+})
+
+export class PostMapperService {
+    constructor(){}
+
+    mapFormToPost(postForm: PostFormInterface, selectedFiles: FileList | undefined): MapFormResult {
+        const postData: PostInterface = {
+            title: postForm.title,
+            description: postForm.text,
+            author: postForm.author,
+            images: []
+        };
+
+        const imageList: FileList | undefined = selectedFiles?.length ? selectedFiles : undefined;
+
+        return {
+            postData,
+            imageList
+        };
+    }
+}

src/app/modules/admin/shared/services/posts.service.ts

@@ -39,7 +39,7 @@ export class PostsService {
     //edytowanko
   }
 
-  delPost(post: Post){
+  delPost(post: PostItem){
     const index: number = this.posts.findIndex((e) => e.title == post.title);
     this.posts.splice(index, 1);
   }

src/app/modules/news/components/news-list/news-list.component.html

@@ -37,6 +37,6 @@ <h3>{{ newsItem.title }}</h3>
     (page)="changePage($event.pageIndex)"
     [pageSize]="itemsPerPage"
     hidePageSize
-    [length]="totalPages"
+    [length]="totalElements"
     aria-label="Select page">
   </mat-paginator>