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,78 +1,148 @@
 <div class="card" style="background-color: #252525 !important">
-    <div class="card-content">
-      <div
-        class="card-header"
-        style="background-color: #252525 !important"
-      >
-        <h2 style="color: #ffffff">
-          
-        </h2>
-      </div>
-      <div class="card-body">
-        <form
-          [formGroup]="profilInfo"
-          (ngSubmit)="onProjectInfoSubmit()"
-        >
-          <div class="form-body">
-            <div class="row">
-              <div class="col-md-6">
-                <div class="form-group">
-                  <label for="name" style="color: #ffffff"
-                    >Full Name</label
-                  >
-                  <input
-                    type="text"
-                    id="name"
-                    class="form-control"
-                    formControlName="name"
-                    placeholder="Device Name"
-                    [ngClass]="{
-                      'is-invalid': submitted && f.name.errors
-                    }"
-                  />
-                  <small
-                    class="form-text text-muted danger"
-                    *ngIf="submitted && f.name.errors"
-                    class="invalid-feedback"
-                  >
-                    <div *ngIf="f.name.errors.required">
-                      Full Name is required
-                    </div>
-                  </small>
-                </div>
+  <div class="card-content">
+    <div class="card-header" style="background-color: #252525 !important">
+      <h2 style="color: #ffffff"></h2>
+    </div>
+    <div class="card-body">
+      <form [formGroup]="profilInfo" (ngSubmit)="onProjectInfoSubmit()">
+        <div class="form-body">
+          <div class="row">
+            <div class="col-md-8">
+              <div class="form-group">
+                <label for="name" style="color: #ffffff">Full Name</label>
+                <input
+                  type="text"
+                  id="name"
+                  class="form-control"
+                  formControlName="name"
+                  placeholder="John Vander"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.name.errors
+                  }"
+                />
+                <small
+                  class="form-text text-muted danger"
+                  *ngIf="submitted && f.name.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.name.errors.required">
+                    Full Name is required
+                  </div>
+                </small>
               </div>
-              <div class="col-md-6">
-                
+              <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="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">
-            <button
-              type="button"
-              class="btn btn-warning mr-1"
-              style="
-                color: #c3f164 !important;
-                background-color: #000000 !important;
-                border-color: #c3f164 !important;
-              "
-              (click)="cancel()"
-            >
-              <i class="feather ft-x"></i>
-              Edit
-            </button>
-            <button
-              type="submit"
-              class="btn btn-primary"
-              style="
-                color: #000000 !important;
-                background-color: #c3f164 !important;
-              "
-              (click)="saveEdit()"
-            >
-              <i class="la la-check"></i> Save
-            </button>
-          </div>
-        </form>
-      </div>
+        </div>
+        <div class="form-actions text-right">
+          <button
+            type="button"
+            class="btn btn-warning mr-1"
+            style="
+              color: #ffffff !important;
+              background-color: transparent !important;
+              border-color: #ffffff !important;
+              border-radius: 10px;
+              width: 145px;
+            "
+            (click)="cancel()"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            class="btn btn-primary"
+            style="
+              color: #000000 !important;
+              background-color: #c3f164 !important;
+              border-radius: 10px;
+              width: 145px;
+            "
+            (click)="saveEdit()"
+          >
+            Save
+          </button>
+        </div>
+      </form>
     </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,60 +1,60 @@
-import { Component, OnInit } from '@angular/core';
-import { NgBlockUI, BlockUI } from 'ng-block-ui';
+import { Component, OnInit } from "@angular/core";
+import { NgBlockUI, BlockUI } from "ng-block-ui";
 @Component({
-    selector: 'app-dropzone',
-    templateUrl: './dropzone.component.html',
-    styleUrls: ['./dropzone.component.css']
+  selector: "app-dropzone",
+  templateUrl: "./dropzone.component.html",
+  styleUrls: ["./dropzone.component.css"],
 })
 export class DropzoneComponent implements OnInit {
-    public breadcrumb: any;
-    @BlockUI('dropzoneGallery') blockUIDropzone: NgBlockUI;
-    constructor() { }
-    ngOnInit(): void {
-        this.breadcrumb = {
-       'mainlabel': 'Dropzone',
-       'links': [
-       {
-        'name': 'Home',
-        'isLink': true,
-        'link': '/dashboard/sales'
+  public breadcrumb: any;
+  @BlockUI("dropzoneGallery") blockUIDropzone: NgBlockUI;
+  constructor() {}
+  ngOnInit(): void {
+    this.breadcrumb = {
+      mainlabel: "Dropzone",
+      links: [
+        {
+          name: "Home",
+          isLink: true,
+          link: "/dashboard/sales",
         },
         {
-                'name': 'Page',
-                'isLink': true,
-                'link': ''
-            },
-              {
-                'name': 'Dropzone',
-                'isLink': false
-             }
-            ]
-        };
-    }
-    options = {
-      close: true,
-      expand: true,
-      minimize: true,
-      reload: true
+          name: "Page",
+          isLink: true,
+          link: "",
+        },
+        {
+          name: "Dropzone",
+          isLink: false,
+        },
+      ],
     };
-    files: File[] = [];
-    SelectMultipleFile(event) {
-        this.files.push(...event.addedFiles);
-    }
-     file: any;
-      SelectSingleFile(event) {
-        this.file = event.addedFiles;
-    }
-    MultiplefilesonRemove(event) {
-      this.files.splice(this.files.indexOf(event), 1);
-    }
-    SinglefileonRemove(event) {
-      this.file.splice(this.files.indexOf(event), 1);
-    }
-    reloadDorpzone() {
-      this.blockUIDropzone.start('Loading..');
+  }
+  options = {
+    close: true,
+    expand: true,
+    minimize: true,
+    reload: true,
+  };
+  files: File[] = [];
+  SelectMultipleFile(event) {
+    this.files.push(...event.addedFiles);
+  }
+  file: any;
+  SelectSingleFile(event) {
+    this.file = event.addedFiles;
+  }
+  MultiplefilesonRemove(event) {
+    this.files.splice(this.files.indexOf(event), 1);
+  }
+  SinglefileonRemove(event) {
+    this.file.splice(this.files.indexOf(event), 1);
+  }
+  reloadDorpzone() {
+    this.blockUIDropzone.start("Loading..");
 
-      setTimeout(() => {
-        this.blockUIDropzone.stop();
-      }, 2500);
-    }
+    setTimeout(() => {
+      this.blockUIDropzone.stop();
+    }, 2500);
+  }
 }