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