From 874eba66c428e7988e5c3c0d8a392ba85de6f84a Mon Sep 17 00:00:00 2001
From: Rendy Sutandy <rendy.sutandy@dataon.com>
Date: Mon, 4 Sep 2017 17:02:42 +0700
Subject: [PATCH 1/5] Remove unused html component

---
 .../crud-page/crud-page.component.html        | 45 -------------------
 1 file changed, 45 deletions(-)

diff --git a/src/app/home-page/crud-page/crud-page.component.html b/src/app/home-page/crud-page/crud-page.component.html
index ea44f41..435b67b 100644
--- a/src/app/home-page/crud-page/crud-page.component.html
+++ b/src/app/home-page/crud-page/crud-page.component.html
@@ -133,57 +133,12 @@
       <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>
 
-      <label class="label is-small">Address</label>
-      <div class="field-label is-normal">
-        <input class="input" type="text" placeholder="Address" [(ngModel)]="address">
-      </div>
 
-      <label class="label is-small">Email</label>
-      <div class="field-label is-normal">
-        <input class="input" type="text" placeholder="Email" [(ngModel)]="email">
-      </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>
 
-      <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">No.Telephone</label>
-      <div class="field-label is-normal">
-        <input class="input" type="number" placeholder="No.Telephone" [(ngModel)]="noPhone">
-      </div>
 
-      <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>
\ No newline at end of file

From f3085bc146784aa28922c08e5cc408b78a6d5196 Mon Sep 17 00:00:00 2001
From: Rendy Sutandy <rendy.sutandy@dataon.com>
Date: Mon, 4 Sep 2017 17:03:31 +0700
Subject: [PATCH 2/5] Add some important html component for validator form

---
 .../crud-page/crud-page.component.html        | 120 ++++++++++++++++++
 1 file changed, 120 insertions(+)

diff --git a/src/app/home-page/crud-page/crud-page.component.html b/src/app/home-page/crud-page/crud-page.component.html
index 435b67b..831a120 100644
--- a/src/app/home-page/crud-page/crud-page.component.html
+++ b/src/app/home-page/crud-page/crud-page.component.html
@@ -133,11 +133,131 @@
       <button class="delete" aria-label="close" (click)="closeAdd()"></button>
     </header>
     <section class="modal-card-body">
+      <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">
 
+          <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
 
+            <div *ngIf="name.errors.required">
+              Name is required.
+            </div>
+            <div *ngIf="name.errors.minlength">
+              Name must be at least 4 characters long.
+            </div>
 
+          </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">
 
+          <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>
 
     </section>
   </div>

From 4985e18e6c44036c3e066c90cebd98977f9efcd8 Mon Sep 17 00:00:00 2001
From: Rendy Sutandy <rendy.sutandy@dataon.com>
Date: Mon, 4 Sep 2017 17:03:59 +0700
Subject: [PATCH 3/5] remove unused function

---
 .../crud-page/crud-page.component.ts          | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/src/app/home-page/crud-page/crud-page.component.ts b/src/app/home-page/crud-page/crud-page.component.ts
index 37ca726..a6070f9 100644
--- a/src/app/home-page/crud-page/crud-page.component.ts
+++ b/src/app/home-page/crud-page/crud-page.component.ts
@@ -157,25 +157,6 @@ 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);
-    });
   }
 
 
@@ -203,7 +184,6 @@ export class CrudPageComponent implements OnInit {
     console.log('Data');
     this.profileDataApi.find({
       where: {
-        fullName: { 'neq': '' }
       }
     }).subscribe((result) => {
       console.log(result, 'Data');

From e75e5311cb6028dfccadb3e55d8bb490623286e4 Mon Sep 17 00:00:00 2001
From: Rendy Sutandy <rendy.sutandy@dataon.com>
Date: Mon, 4 Sep 2017 17:04:34 +0700
Subject: [PATCH 4/5] add some function for validator form

---
 .../crud-page/crud-page.component.ts          | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/app/home-page/crud-page/crud-page.component.ts b/src/app/home-page/crud-page/crud-page.component.ts
index a6070f9..8f03b83 100644
--- a/src/app/home-page/crud-page/crud-page.component.ts
+++ b/src/app/home-page/crud-page/crud-page.component.ts
@@ -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';
@@ -157,6 +160,31 @@ export class CrudPageComponent implements OnInit {
   }
 
   public createData() {
+    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);
+      });
+    }
   }
 
 
@@ -184,6 +212,7 @@ export class CrudPageComponent implements OnInit {
     console.log('Data');
     this.profileDataApi.find({
       where: {
+        fullname: { 'neq': '' }
       }
     }).subscribe((result) => {
       console.log(result, 'Data');
@@ -246,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');
@@ -314,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 === '') {

From dbb32f711bfac9be0c24e426b5210e8147b79e1b Mon Sep 17 00:00:00 2001
From: "dimas.prasetya" <dimas.prasetya@dataon.com>
Date: Wed, 13 Sep 2017 16:52:26 +0700
Subject: [PATCH 5/5] whitespace

---
 .../home-page/chat-room-page/chat-room-page.component.scss    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/home-page/chat-room-page/chat-room-page.component.scss b/src/app/home-page/chat-room-page/chat-room-page.component.scss
index ba56bed..a5c717d 100644
--- a/src/app/home-page/chat-room-page/chat-room-page.component.scss
+++ b/src/app/home-page/chat-room-page/chat-room-page.component.scss
@@ -107,6 +107,4 @@
     //     flex: 1 1 auto;
     //     // padding: 10px;
     //     overflow: auto;
-    //   }
-    
-    
\ No newline at end of file
+    //   }
\ No newline at end of file