Skip to content

Feature/update chat design #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Dimas-Prasetya wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

Feature/update chat design #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
874eba6
Remove unused html component
Sep 4, 2017
f3085bc
Add some important html component for validator form
Sep 4, 2017
4985e18
remove unused function
Sep 4, 2017
e75e531
add some function for validator form
Sep 4, 2017
a26c259
Merge pull request #47 from angular-indonesia/hotfix/Rendys
dmastag Sep 4, 2017
dbb32f7
whitespace
Sep 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions src/app/home-page/chat-room-page/chat-room-page.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,4 @@
// flex: 1 1 auto;
// // padding: 10px;
// overflow: auto;
// }


// }
165 changes: 120 additions & 45 deletions src/app/home-page/crud-page/crud-page.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,57 +133,132 @@
<button class="delete" aria-label="close" (click)="closeAdd()"></button>
</header>
<section class="modal-card-body">
<label class="label is-small">Full Name</label>
<div class="field-label is-normal">
<input class="input" type="text" placeholder="Full Name" [(ngModel)]="fullName">
</div>
<form #heroForm="ngForm">
<div class="form-group">
<label class="label is-small">Full Name</label>
<input id="name" name="name" class="form-control" required minlength="4" [(ngModel)]="fullName" #name="ngModel" class="input"
type="text" placeholder="Full Name">

<label class="label is-small">Address</label>
<div class="field-label is-normal">
<input class="input" type="text" placeholder="Address" [(ngModel)]="address">
</div>
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">

<label class="label is-small">Email</label>
<div class="field-label is-normal">
<input class="input" type="text" placeholder="Email" [(ngModel)]="email">
</div>
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>

<label class="label is-small">Place Of Birthday</label>
<div class="field-label is-normal">
<input class="input" type="text" placeholder="Place Of Birthday" [(ngModel)]="placeBirth">
</div>
</div>

<label class="label is-small">Date Of Birthday</label>
<div class="field-label is-normal">
<input class="input" type="date" placeholder="Date Of Birthday" [(ngModel)]="dateBirth">
</div>
<label class="label is-small">Email</label>
<input id="mail" name="mail" class="form-control" required [(ngModel)]="email" #mail="ngModel" class="input" type="text"
placeholder="Your Email">

<label class="label is-small">No.Telephone</label>
<div class="field-label is-normal">
<input class="input" type="number" placeholder="No.Telephone" [(ngModel)]="noPhone">
</div>
<div *ngIf="mail.invalid && (mail.dirty || mail.touched)" class="alert alert-danger">

<div *ngIf="mail.errors.required">
Email is required.
</div>

</div>

<label class="label is-small">Address</label>
<input id="addr" name="addr" class="form-control" required minlength="5" [(ngModel)]="address" #addr="ngModel" class="input"
type="text" placeholder="Your Address">

<div *ngIf="addr.invalid && (addr.dirty || addr.touched)" class="alert alert-danger">

<div *ngIf="addr.errors.required">
Address is required.
</div>
<div *ngIf="addr.errors.minlength">
Address must be at least 5 characters long.
</div>

</div>

<label class="label is-small">Place Of Birthday</label>
<input id="place" name="place" class="form-control" required minlength="3" [(ngModel)]="placeBirth" #place="ngModel" class="input"
type="text" placeholder="Place Of Birthday">

<div *ngIf="place.invalid && (place.dirty || place.touched)" class="alert alert-danger">

<div *ngIf="place.errors.required">
Place Of Birthday is required.
</div>
<div *ngIf="place.errors.minlength">
Place Of Birthday must be at least 3 characters long.
</div>

</div>

<label class="label is-small">Date Of Birthday</label>
<input id="date" name="date" class="form-control" required [(ngModel)]="dateBirth" #date="ngModel" class="input" type="date"
placeholder="placeBirth">

<div *ngIf="date.invalid && (date.dirty || date.touched)" class="alert alert-danger">

<div *ngIf="date.errors.required">
Date Of Birthday Of Birthday is required.
</div>

</div>

<label class="label is-small">No.Telephone</label>
<input id="phone" name="phone" class="form-control" required [(ngModel)]="noPhone" #phone="ngModel" class="input" type="text"
placeholder="No.Telephone" pattern="^[0-9]+$">
<div *ngIf="phone.invalid && (phone.dirty || phone.touched)" class="alert alert-danger">

<div *ngIf="phone.errors.required">
No. Telephone is required.
</div>

</div>

<label class="label is-small">Photo Profile</label>
<div class="file has-name is-fullwidth">
<label class="file-label">
<input id="photo" name="file[]" class="file-input" required
(change)="uploadProses($event)" type="file">

<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
{{ defaultFileTitle }}
</span>
</label>
</div>

<div *ngIf="place.invalid && (place.dirty || place.touched)" class="alert alert-danger">

<div *ngIf="place.errors.required">
Place Of Birthday is required.
</div>
<div *ngIf="place.errors.minlength">
Place Of Birthday must be at least 3 characters long.
</div>

</div>
</div>
<div class="modal-card-foot">
<button type="submit" class="button is-success" [disabled]="heroForm.invalid" (click)="createData()">Submit</button>
<button type="button" class="button is-danger" (click)="heroForm.resetForm({})">Reset</button>

<div [ngStyle]="{'display': hiddenValid}">
<div class="notification is-danger" style="width: 60% !important;">
<button class="delete" (click)="closeValid()"></button>Foto must be attachment.
</div>
</div>

</div>
</form>

<label class="label is-small">Photo Profile</label>
<div class="file has-name is-fullwidth">
<label class="file-label">
<input class="file-input" type="file" name="file[]" (change)="uploadProses($event)">
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
{{ defaultFileTitle }}
</span>
</label>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success" (click)="createData()">Save changes</button>
<button class="button" (click)="closeAdd()">Cancel</button>
</footer>
</div>
</div>
58 changes: 38 additions & 20 deletions src/app/home-page/crud-page/crud-page.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,20 @@ export class CrudPageComponent implements OnInit {
public hiddenData: String = 'none';
public hiddenTable: String = 'none';
public hiddenSuccess: String = 'none';
public hiddenValid: String = 'none';
public alertVisible: any;
public alertNotif: any;
public displayModalEdit: any;
public displayModalAdd: any;
public visibleModal: any;

constructor(
public profileDataApi: ProfiledataApi,
public storageCustom: StorageSimpleUploadApi
) {
this.displayModalEdit = 'modal';
this.displayModalAdd = 'modal';

this.visibleModal = false;

this.alertNotif = 'none';
Expand Down Expand Up @@ -157,25 +160,31 @@ export class CrudPageComponent implements OnInit {
}

public createData() {
this.folderName = this.fullName + this.makeid().toString();
console.log(this.folderName, 'FOLDER');
this.profileDataApi.create({
fullName: this.fullName,
address: this.address,
email: this.email,
placeOfBirth: this.placeBirth,
birthDate: this.dateBirth,
noPhone: this.noPhone,
folder: this.folderName,
photoProfile: this.nameFile
}).subscribe((results) => {
console.log('Sukses');

this.uploadFoto(this.folderName);

}, (error) => {
console.log(error);
});
if (this.nameFile === '') {
console.log('Sorry Files Is Empty');
this.hiddenValid = 'block';
this.closedValid();
} else {
this.folderName = this.fullName + '_' + this.makeid().toString();
console.log(this.folderName, 'FOLDER');
this.profileDataApi.create({
fullname: this.fullName,
address: this.address,
email: this.email,
placeofbirth: this.placeBirth,
birthdate: this.dateBirth,
nophone: this.noPhone,
folder: this.folderName,
photoprofile: this.nameFile
}).subscribe((results) => {
console.log('Sukses');

this.uploadFoto(this.folderName);

}, (error) => {
console.log(error);
});
}
}


Expand Down Expand Up @@ -203,7 +212,7 @@ export class CrudPageComponent implements OnInit {
console.log('Data');
this.profileDataApi.find({
where: {
fullName: { 'neq': '' }
fullname: { 'neq': '' }
}
}).subscribe((result) => {
console.log(result, 'Data');
Expand Down Expand Up @@ -266,6 +275,9 @@ export class CrudPageComponent implements OnInit {
public closeAlert() {
this.hiddenSuccess = 'none';
}
public closeValid() {
this.hiddenValid = 'none';
}

public saveChange(datas) {
console.log(this.idEdit, 'Data');
Expand Down Expand Up @@ -334,6 +346,12 @@ export class CrudPageComponent implements OnInit {
}, 3000);
}

public closedValid() {
setTimeout(() => {
this.hiddenValid = 'none';
}, 3000);
}

public editPhoto(event) {
console.log(event);
if (this.nameFile === '') {
Expand Down