penambahan user profile
This commit is contained in:
parent
2a5c1ef7b9
commit
530b64cb10
@ -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;
|
||||
}
|
||||
@ -1,31 +1,21 @@
|
||||
<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 class="card-header" style="background-color: #252525 !important">
|
||||
<h2 style="color: #ffffff"></h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form
|
||||
[formGroup]="profilInfo"
|
||||
(ngSubmit)="onProjectInfoSubmit()"
|
||||
>
|
||||
<form [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"
|
||||
>Full Name</label
|
||||
>
|
||||
<label for="name" style="color: #ffffff">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;
|
||||
"
|
||||
>
|
||||
×
|
||||
</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;
|
||||
background-color: #000000 !important;
|
||||
border-color: #c3f164 !important;
|
||||
color: #ffffff !important;
|
||||
background-color: transparent !important;
|
||||
border-color: #ffffff !important;
|
||||
border-radius: 10px;
|
||||
width: 145px;
|
||||
"
|
||||
(click)="cancel()"
|
||||
>
|
||||
<i class="feather ft-x"></i>
|
||||
Edit
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
@ -66,10 +134,12 @@
|
||||
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>
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: "",
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
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;
|
||||
@BlockUI("dropzoneGallery") blockUIDropzone: NgBlockUI;
|
||||
constructor() {}
|
||||
ngOnInit(): void {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Dropzone',
|
||||
'links': [
|
||||
mainlabel: "Dropzone",
|
||||
links: [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
name: "Home",
|
||||
isLink: true,
|
||||
link: "/dashboard/sales",
|
||||
},
|
||||
{
|
||||
'name': 'Page',
|
||||
'isLink': true,
|
||||
'link': ''
|
||||
name: "Page",
|
||||
isLink: true,
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
'name': 'Dropzone',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
name: "Dropzone",
|
||||
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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user