Created many things

Author: KuessiAnsan

angular.json

@@ -56,7 +56,13 @@
               "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
-              "namedChunks": true
+              "namedChunks": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

src/app/features/features.module.ts

@@ -2,6 +2,8 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UploadPageComponent } from './pages/upload-page/upload-page.component';
 import { ContentListPageComponent } from './pages/content-list-page/content-list-page.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http'
 
 
 
@@ -11,7 +13,10 @@ import { ContentListPageComponent } from './pages/content-list-page/content-list
     ContentListPageComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule
   ]
 })
 export class FeaturesModule { }

src/app/features/pages/content-list-page/content-list-page.component.html

@@ -4,64 +4,18 @@
             <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Users</h2>
         </div>
         <div class="grid gap-8 mb-6 lg:mb-16 md:grid-cols-2">
-            <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700">
-                <a href="#">
+            <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700" *ngFor="let user of users">
+                <a>
                     <img class="w-full rounded-lg sm:rounded-none sm:rounded-l-lg"
-                        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
+                        [src]="localhost + user.profileImage"
                         alt="Bonnie Avatar">
                 </a>
                 <div class="p-5">
                     <h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-                        <a href="#">Bonnie Green</a>
+                        <a>{{user.name}}</a>
                     </h3>
-                    <span class="text-gray-500 dark:text-gray-400">CEO & Web Developer</span>
-                    <p class="mt-3 mb-4 font-light text-gray-500 dark:text-gray-400">Bonnie drives the technical
-                        strategy of the flowbite platform and brand.</p>
-                </div>
-            </div>
-            <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700">
-                <a href="#">
-                    <img class="w-full rounded-lg sm:rounded-none sm:rounded-l-lg"
-                        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
-                        alt="Jese Avatar">
-                </a>
-                <div class="p-5">
-                    <h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-                        <a href="#">Jese Leos</a>
-                    </h3>
-                    <span class="text-gray-500 dark:text-gray-400">CTO</span>
-                    <p class="mt-3 mb-4 font-light text-gray-500 dark:text-gray-400">Jese drives the technical strategy
-                        of the flowbite platform and brand.</p>
-                </div>
-            </div>
-            <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700">
-                <a href="#">
-                    <img class="w-full rounded-lg sm:rounded-none sm:rounded-l-lg"
-                        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png"
-                        alt="Michael Avatar">
-                </a>
-                <div class="p-5">
-                    <h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-                        <a href="#">Michael Gough</a>
-                    </h3>
-                    <span class="text-gray-500 dark:text-gray-400">Senior Front-end Developer</span>
-                    <p class="mt-3 mb-4 font-light text-gray-500 dark:text-gray-400">Michael drives the technical
-                        strategy of the flowbite platform and brand.</p>
-                </div>
-            </div>
-            <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700">
-                <a href="#">
-                    <img class="w-full rounded-lg sm:rounded-none sm:rounded-l-lg"
-                        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/sofia-mcguire.png"
-                        alt="Sofia Avatar">
-                </a>
-                <div class="p-5">
-                    <h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-                        <a href="#">Lana Byrd</a>
-                    </h3>
-                    <span class="text-gray-500 dark:text-gray-400">Marketing & Sale</span>
-                    <p class="mt-3 mb-4 font-light text-gray-500 dark:text-gray-400">Lana drives the technical strategy
-                        of the flowbite platform and brand.</p>
+                    <span class="text-gray-500 dark:text-gray-400">{{user.profession}}</span>
+                    <p class="mt-3 mb-4 font-light text-gray-500 dark:text-gray-400">{{user.bio}}</p>
                 </div>
             </div>
         </div>

src/app/features/pages/content-list-page/content-list-page.component.ts

@@ -1,19 +1,29 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { initFlowbite } from 'flowbite';
+import { UploadService } from '../../services/upload.service';
 
 @Component({
   selector: 'app-content-list-page',
   templateUrl: './content-list-page.component.html',
   styleUrls: ['./content-list-page.component.scss']
 })
 export class ContentListPageComponent implements OnInit{
-
-  constructor(private router:Router){}
+  users!: any[];
+  localhost = 'http://localhost:9090/'
+  constructor(private router:Router, private userService:UploadService){}
 
 
   ngOnInit(): void {
     initFlowbite()
+    this.getAllUsers()
+  }
+
+  getAllUsers(){
+    this.userService.getAllUsers().subscribe((data)=>{
+      this.users = data;
+      console.log(this.users);
+    });
   }
 
   addUser(){

src/app/features/pages/upload-page/upload-page.component.html

@@ -1,7 +1,7 @@
 <section class="bg-white dark:bg-gray-900">
     <div class="py-8 px-4 mx-auto max-w-2xl lg:py-16">
         <h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">Add a new user</h2>
-        <form action="#">
+        <form [formGroup]="userForm">
             <div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
                 <div class="sm:col-span-2">
                     <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Profile image</label>
@@ -20,36 +20,52 @@ <h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">Add a new user<
                                     or drag and drop</p>
                                 <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
                             </div>
-                            <input id="dropzone-file" type="file" class="hidden" />
+                            <input id="dropzone-file" (change)="handleImageInput($event)" type="file" class="hidden" />
                         </label>
+                        
                     </div>
+                    <small class="text-danger" *ngIf="!imageToUpload">Add your profile image !</small>
+                </div>
+                <div class="sm:col-span-2">
+                    <img width="100%" *ngIf="imageUrl" [src]="imageUrl" class="image">
                 </div>
                 <div class="sm:col-span-2">
                     <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
                     <input type="email" name="email" id="email"
+                        formControlName="email"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="Email" required="">
+                        <small class="text-danger" *ngIf="emailControl?.touched && emailControl?.hasError('required')">This field is required !</small>
+                        <small class="text-danger" *ngIf="emailControl?.touched && emailControl?.hasError('pattern')">This field is required !</small>
                 </div>
                 <div class="w-full">
                     <label for="name"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
                     <input type="text" name="name" id="name"
+                        formControlName="name"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="Name" required="">
+                        <small class="text-danger" *ngIf="nameControl?.touched && nameControl?.hasError('required')">This field is required !</small>
+
                 </div>
                 <div class="w-full">
                     <label for="price"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Profession</label>
                     <input type="text" name="profession" id="profession"
+                        formControlName="profession"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="Profession" required="">
+                        <small class="text-danger" *ngIf="professionControl?.touched && professionControl?.hasError('required')">This field is required !</small>
+
                 </div>
                 <div class="sm:col-span-2">
                     <label for="bio"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Bio</label>
                     <textarea id="bio" rows="8"
+                        formControlName="bio"
                         class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="Your bio here"></textarea>
+                        <small class="text-danger" *ngIf="bioControl?.touched && bioControl?.hasError('required')">This field is required !</small>
                 </div>
             </div>
         </form>

src/app/features/pages/upload-page/upload-page.component.ts

@@ -1,23 +1,74 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { initFlowbite } from 'flowbite';
+import { UploadService } from '../../services/upload.service';
 
 @Component({
   selector: 'app-upload-page',
   templateUrl: './upload-page.component.html',
   styleUrls: ['./upload-page.component.scss']
 })
 export class UploadPageComponent implements OnInit{
+  imageToUpload!: any;
+  imageUrl: any;
+  userForm!: FormGroup;
 
-  constructor(private router: Router) { }
+  constructor(private router: Router, private formBuilder:FormBuilder, private userService:UploadService) { }
 
 
   ngOnInit(): void {
-    initFlowbite()
+    initFlowbite();
+    this.initializeUserForm();
+  }
+
+  initializeUserForm(){
+    this.userForm = this.formBuilder.group({
+      email: [null, [Validators.required, Validators.pattern('')]],
+      name: [null, Validators.required],
+      profession: [null, Validators.required],
+      bio: [null, Validators.required],
+      profileImage: [null]
+    })
+  }
+
+  get emailControl(){
+    return this.userForm.get('email')
+  }
+  
+  get nameControl() {
+    return this.userForm.get('name')
+  }
+
+  get professionControl() {
+    return this.userForm.get('profession')
+  }
+
+  get bioControl() {
+    return this.userForm.get('bio')
+  }
+
+  handleImageInput(event:any){
+    this.imageToUpload = event?.target.files.item(0);
+    let reader = new FileReader();
+    reader.onload = (event:any)=>{
+      this.imageUrl = event.target.result;
+    }
+    reader.readAsDataURL(this.imageToUpload);
   }
 
   addUser() {
-    this.navigateToUserList();
+    const formData = new FormData();
+    formData.append('user', JSON.stringify(this.userForm.value));
+    formData.append('image', this.imageToUpload);
+    this.userService.saveUser(formData).subscribe((data)=>{
+      console.log("SAVED")
+      this.navigateToUserList();
+    },
+    (error)=>{
+      console.error(error);
+    }
+    )
   }
 
   navigateToUserList(){

src/app/features/services/upload.service.ts

@@ -1,9 +1,23 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http'
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+
 
 @Injectable({
   providedIn: 'root'
 })
 export class UploadService {
 
-  constructor() { }
+  apiUrl = environment.apiUrl + 'users'
+
+  constructor(private httpClient:HttpClient) { }
+
+  saveUser(data:any):Observable<any>{
+    return this.httpClient.post(this.apiUrl, data);
+  }
+
+  getAllUsers(): Observable<any> {
+    return this.httpClient.get(this.apiUrl);
+  }
 }

src/environments/environment.development.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    apiUrl: 'http://localhost:9090/api/'
+};

src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    apiUrl: 'http://localhost:9090/api/'
+};

src/styles.scss

@@ -1,4 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.text-danger{
+    color: red;
+}