penambahan user profile

src/app/content/hemat-app/user-profile/profil-information/profil-information.component.css

@@ -0,0 +1,23 @@
+.image-container {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+}
+
+img {
+  height: 200px;
+  width: 200px;
+  border: 5px solid #000;
+  border-radius: 50%;
+}
+
+.select-profile-picture {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}

src/app/content/hemat-app/user-profile/profil-information/profil-information.component.html

@@ -1,31 +1,21 @@
 <div class="card" style="background-color: #252525 !important">
   <div class="card-content">
-      <div
+    <div class="card-header" style="background-color: #252525 !important">
-        class="card-header"
+      <h2 style="color: #ffffff"></h2>
-        style="background-color: #252525 !important"
-      >
-        <h2 style="color: #ffffff">
-          
-        </h2>
     </div>
     <div class="card-body">
-        <form
+      <form [formGroup]="profilInfo" (ngSubmit)="onProjectInfoSubmit()">
-          [formGroup]="profilInfo"
-          (ngSubmit)="onProjectInfoSubmit()"
-        >
         <div class="form-body">
           <div class="row">
-              <div class="col-md-6">
+            <div class="col-md-8">
               <div class="form-group">
-                  <label for="name" style="color: #ffffff"
+                <label for="name" style="color: #ffffff">Full Name</label>
-                    >Full Name</label
-                  >
                 <input
                   type="text"
                   id="name"
                   class="form-control"
                   formControlName="name"
-                    placeholder="Device Name"
+                  placeholder="John Vander"
                   [ngClass]="{
                     'is-invalid': submitted && f.name.errors
                   }"
@@ -40,25 +30,103 @@
                   </div>
                 </small>
               </div>
+              <div class="form-group">
+                <label for="email" style="color: #ffffff">Email</label>
+                <input
+                  type="text"
+                  id="email"
+                  class="form-control"
+                  formControlName="email"
+                  placeholder="email@email.com"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.email.errors
+                  }"
+                />
+                <small
+                  class="form-text text-muted danger"
+                  *ngIf="submitted && f.email.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.email.errors.required">Email is required</div>
+                </small>
               </div>
-              <div class="col-md-6">
+              <div class="form-group">
-                
+                <label for="phone" style="color: #ffffff">Phone</label>
+                <input
+                  type="text"
+                  id="phone"
+                  class="form-control"
+                  formControlName="phone"
+                  placeholder="08**************"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.phone.errors
+                  }"
+                />
+                <small
+                  class="form-text text-muted danger"
+                  *ngIf="submitted && f.phone.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.phone.errors.required">Phone is required</div>
+                </small>
+              </div>
+            </div>
+            <div class="col-md-4 d-flex justify-content-center align-items-center">
+              <div class="image-container text-center" style="position: relative">
+                <button
+                  *ngIf="url"
+                  (click)="delete()"
+                  class="btn btn-danger"
+                  style="
+                    position: absolute;
+                    top: 10px;
+                    right: 10px;
+                    padding: 5px 10px;
+                  "
+                >
+                  &times;
+                </button>
+                <label class="hoverable" for="fileInput">
+                  <img
+                    [src]="
+                      url
+                        ? url
+                        : 'https://www.w3schools.com/howto/img_avatar.png'
+                    "
+                    alt="Profile Picture"
+                    class="img-fluid"
+                  />
+                  <!-- <div class="hover-text">Choose file</div> -->
+                  <div class="background"></div>
+                </label>
+                <br />
+                <input
+                  id="fileInput"
+                  type="file"
+                  formControlName="profilePicture"
+                  class="select-profile-picture"
+                  (change)="onSelectFile($event)"
+                  accept="image/*"
+                  style="display: none"
+                />
               </div>
             </div>
           </div>
-          <div class="form-actions">
+        </div>
+        <div class="form-actions text-right">
           <button
             type="button"
             class="btn btn-warning mr-1"
             style="
-                color: #c3f164 !important;
+              color: #ffffff !important;
-                background-color: #000000 !important;
+              background-color: transparent !important;
-                border-color: #c3f164 !important;
+              border-color: #ffffff !important;
+              border-radius: 10px;
+              width: 145px;
             "
             (click)="cancel()"
           >
-              <i class="feather ft-x"></i>
+            Cancel
-              Edit
           </button>
           <button
             type="submit"
@@ -66,13 +134,15 @@
             style="
               color: #000000 !important;
               background-color: #c3f164 !important;
+              border-radius: 10px;
+              width: 145px;
             "
             (click)="saveEdit()"
           >
-              <i class="la la-check"></i> Save
+            Save
           </button>
         </div>
       </form>
     </div>
   </div>
-  </div>
+</div>

src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts

@@ -13,6 +13,8 @@ export class ProfilInformationComponent {
   activeTab: string = "profile-info2";
   submitted = false;
 
+  url: any = '';
+
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -22,9 +24,40 @@ export class ProfilInformationComponent {
   ngOnInit(): void {
     this.profilInfo = this.formBuilder.group({
       name: ["", Validators.required],
+      email: ["", Validators.required],
+      phone: ["", Validators.required],
+      profilePicture: [null]
     });
   }
 
+  onSelectFile(event) {
+    if (event.target.files && event.target.files[0]) {
+      const file = event.target.files[0];
+
+      // Check if selected file is an image
+      if (!file.type.startsWith('image')) {
+        alert('Please select an image file.');
+        this.profilInfo.patchValue({
+          profilePicture: null
+        });
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+
+      reader.onload = (e) => {
+        this.url = e.target.result;
+      };
+    }
+  }
+
+  public delete() {
+    this.url = null;
+    this.profilInfo.patchValue({ profilePicture: null });
+  }
+
+
   selectTab(tabName: string) {
     this.activeTab = tabName;
   }
@@ -40,7 +73,6 @@ export class ProfilInformationComponent {
   cancel() {}
 
   saveEdit() {
-    console.log('save');
+    console.log("save");
-    
   }
 }

src/app/content/hemat-app/user-profile/user-profile.module.ts

@@ -9,6 +9,7 @@ import { UpdatePasswordComponent } from "./update-password/update-password.compo
 import { ProfilInformationComponent } from './profil-information/profil-information.component';
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { NgSelectModule } from "@ng-select/ng-select";
+import { NgxDropzoneModule } from "ngx-dropzone";
 
 @NgModule({
   declarations: [
@@ -24,6 +25,7 @@ import { NgSelectModule } from "@ng-select/ng-select";
     NgSelectModule,
     FormsModule,
     ReactiveFormsModule,
+    NgxDropzoneModule,
     RouterModule.forChild([
       {
         path: "",

src/app/content/pages/dropzone/dropzone.component.ts

@@ -1,40 +1,40 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
-import { NgBlockUI, BlockUI } from 'ng-block-ui';
+import { NgBlockUI, BlockUI } from "ng-block-ui";
 @Component({
-    selector: 'app-dropzone',
+  selector: "app-dropzone",
-    templateUrl: './dropzone.component.html',
+  templateUrl: "./dropzone.component.html",
-    styleUrls: ['./dropzone.component.css']
+  styleUrls: ["./dropzone.component.css"],
 })
 export class DropzoneComponent implements OnInit {
   public breadcrumb: any;
-    @BlockUI('dropzoneGallery') blockUIDropzone: NgBlockUI;
+  @BlockUI("dropzoneGallery") blockUIDropzone: NgBlockUI;
-    constructor() { }
+  constructor() {}
   ngOnInit(): void {
     this.breadcrumb = {
-       'mainlabel': 'Dropzone',
+      mainlabel: "Dropzone",
-       'links': [
+      links: [
         {
-        'name': 'Home',
+          name: "Home",
-        'isLink': true,
+          isLink: true,
-        'link': '/dashboard/sales'
+          link: "/dashboard/sales",
         },
         {
-                'name': 'Page',
+          name: "Page",
-                'isLink': true,
+          isLink: true,
-                'link': ''
+          link: "",
         },
         {
-                'name': 'Dropzone',
+          name: "Dropzone",
-                'isLink': false
+          isLink: false,
-             }
+        },
-            ]
+      ],
     };
   }
   options = {
     close: true,
     expand: true,
     minimize: true,
-      reload: true
+    reload: true,
   };
   files: File[] = [];
   SelectMultipleFile(event) {
@@ -51,7 +51,7 @@ export class DropzoneComponent implements OnInit {
     this.file.splice(this.files.indexOf(event), 1);
   }
   reloadDorpzone() {
-      this.blockUIDropzone.start('Loading..');
+    this.blockUIDropzone.start("Loading..");
 
     setTimeout(() => {
       this.blockUIDropzone.stop();