chore(): Lint rule and fixes (#35)

* lint rule modified; fixes

* modified files based on angular style guide rule

* update(user-form): proper regex pattern for emails

- so form could validate

Author: richavyas

mock-api/schemas/users.yaml

@@ -3,10 +3,10 @@
 ---
 initial_entries: 5
 randomize: false
-display_name: _firstname_ _lastname_
+displayName: _firstname_ _lastname_
 id: _firstname_._lastname_
 email: _firstname_._lastname_@_company_.com
 created: _createdtimestamp_
-last_access: _itemtimestamp_
-site_admin: _admin_
+lastAccess: _itemtimestamp_
+siteAdmin: _admin_
 ...

src/app/dashboard-product/dashboard-product.component.spec.ts

@@ -74,19 +74,19 @@ describe('Component: DashboardProduct', () => {
     })));
     responses.set('data/users.json', new Response(new ResponseOptions({
       status: 200, body: JSON.stringify([{
-        display_name : 'Suzy Cuningham',
+        displayName : 'Suzy Cuningham',
         id : 'suzy.cuningham',
         email : '[email protected]',
         created : '10/01/2015 11:05 AM',
-        last_access : '12/23/2015 11:05 AM',
-        site_admin: true,
+        lastAccess : '12/23/2015 11:05 AM',
+        siteAdmin: true,
       }, {
-        display_name : 'Bobby Daniels',
+        displayName : 'Bobby Daniels',
         id : 'bobbyD',
         email : '[email protected]',
         created : '10/01/2015 11:05 AM',
-        last_access : '12/23/2015 11:05 AM',
-        site_admin: false,
+        lastAccess : '12/23/2015 11:05 AM',
+        siteAdmin: false,
       }]),
     })));
 

src/app/dashboard-product/dashboard-product.component.ts

@@ -5,7 +5,7 @@ import { Title } from '@angular/platform-browser';
 import { TdMediaService } from '@covalent/core';
 
 @Component({
-  selector: 'dashboard-product',
+  selector: 'qs-dashboard-product',
   templateUrl: './dashboard-product.component.html',
   styleUrls: ['./dashboard-product.component.scss'],
 })

src/app/dashboard-product/features/+form/form.component.ts

@@ -5,7 +5,7 @@ import { ActivatedRoute } from '@angular/router';
 import { FeaturesService, IFeature } from '../../../../services';
 
 @Component({
-  selector: 'feature-form',
+  selector: 'qs-feature-form',
   templateUrl: './form.component.html',
   styleUrls: ['./form.component.scss'],
   viewProviders: [ FeaturesService ],

src/app/dashboard-product/features/features.component.ts

@@ -7,7 +7,7 @@ import { TdDialogService } from '@covalent/core';
 import { FeaturesService, IFeature } from '../../../services';
 
 @Component({
-  selector: 'product-features',
+  selector: 'qs-product-features',
   templateUrl: './features.component.html',
   styleUrls: ['./features.component.scss'],
   viewProviders: [ FeaturesService ],

src/app/dashboard-product/overview/overview.component.html

@@ -71,7 +71,7 @@ <h3 md-line> {{item.name}} </h3>
                 <template let-user let-last="last" ngFor [ngForOf]="users">
                     <md-list-item layout-align="row">
                     <md-icon md-list-icon>account_box</md-icon>
-                    <h3 md-line> {{user.display_name}} </h3>
+                    <h3 md-line> {{user.displayName}} </h3>
                     <p md-line> {{user.id}} </p>
                     </md-list-item>
                     <md-divider *ngIf="!last" md-inset></md-divider>

src/app/dashboard-product/overview/overview.component.ts

@@ -6,7 +6,7 @@ import { TdLoadingService } from '@covalent/core';
 import { ItemsService, UsersService } from '../../../services';
 
 @Component({
-  selector: 'product-overview',
+  selector: 'qs-product-overview',
   templateUrl: './overview.component.html',
   styleUrls: ['./overview.component.scss'],
   viewProviders: [ ItemsService, UsersService ],

src/app/dashboard-product/stats/stats.component.ts

@@ -8,7 +8,7 @@ const NUMBER_FORMAT: any = (v: {value: number}) => v.value;
 const DECIMAL_FORMAT: any = (v: {value: number}) => v.value.toFixed(2);
 
 @Component({
-  selector: 'product-stats',
+  selector: 'qs-product-stats',
   templateUrl: './stats.component.html',
   styleUrls: ['./stats.component.scss'],
 })

src/app/dashboard/dashboard.component.ts

@@ -9,7 +9,7 @@ import { ItemsService, UsersService, ProductsService, AlertsService } from '../.
 import { multi } from './data';
 
 @Component({
-  selector: 'covalent-dashboard',
+  selector: 'qs-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
   viewProviders: [ ItemsService, UsersService, ProductsService, AlertsService ],

src/app/dashboard/data.ts

@@ -1,4 +1,4 @@
-export var single: any = [
+export let single: any = [
   {
     'name': 'Germany',
     'value': 8940000,
@@ -13,7 +13,7 @@ export var single: any = [
   },
 ];
 
-export var multi: any = [
+export let multi: any = [
   {
     'name': 'Container Apps',
     'series': [

src/app/form/form.component.ts

@@ -3,7 +3,7 @@ import { Component, AfterViewInit } from '@angular/core';
 import { StepState, TdMediaService } from '@covalent/core';
 
 @Component({
-  selector: 'product-form',
+  selector: 'qs-product-form',
   templateUrl: './form.component.html',
   styleUrls: ['./form.component.scss'],
 })

src/app/templates/dashboard/dashboard.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { single, multi } from './data';
 
 @Component({
-  selector: 'covalent-dashboard',
+  selector: 'qs-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
 })

src/app/templates/dashboard/data.ts

@@ -1,4 +1,4 @@
-export var single: any = [
+export let single: any = [
   {
     'name': 'Germany',
     'value': 8940000,
@@ -13,7 +13,7 @@ export var single: any = [
   },
 ];
 
-export var multi: any = [
+export let multi: any = [
   {
     'name': 'Containers',
     'series': [

src/app/templates/editor/data.ts

@@ -1,4 +1,4 @@
-export var single: any = [
+export let single: any = [
   {
     'name': 'Germany',
     'value': 8940000,
@@ -13,7 +13,7 @@ export var single: any = [
   },
 ];
 
-export var multi: any = [
+export let multi: any = [
   {
     'name': 'Containers',
     'series': [

src/app/templates/editor/editor.component.ts

@@ -11,7 +11,7 @@ const DECIMAL_FORMAT: any = (v: {value: number}) => v.value.toFixed(2);
 import { multi } from './data';
 
 @Component({
-  selector: 'covalent-editor',
+  selector: 'qs-editor',
   templateUrl: './editor.component.html',
   styleUrls: ['./editor.component.scss'],
 })

src/app/templates/email/email.component.ts

@@ -3,7 +3,7 @@ import { Component, AfterViewInit } from '@angular/core';
 import { TdMediaService } from '@covalent/core';
 
 @Component({
-  selector: 'covalent-email',
+  selector: 'qs-email',
   templateUrl: './email.component.html',
   styleUrls: ['./email.component.scss'],
 })

src/app/templates/templates.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'covalent-templates',
+  selector: 'qs-templates',
   templateUrl: './templates.component.html',
   styleUrls: ['./templates.component.scss'],
 })

src/app/users/+form/form.component.html

@@ -49,12 +49,14 @@
                       #displayNameControl="ngModel"
                       type="text" 
                       placeholder="Display Name" 
-                      [(ngModel)]="display_name" 
-                      name="display_name" 
+                      [(ngModel)]="displayName" 
+                      name="displayName" 
                       maxlength="20" 
                       required>
               <md-hint align="start">
-                <span [hidden]="displayNameControl.pristine || !displayNameControl.errors?.required" class="tc-red-600">Display Name is required!</span>
+                <span [hidden]="displayNameControl.pristine" class="tc-red-600">
+                  <span [hidden]="!displayNameControl.errors?.required">Required</span>
+                </span>
               </md-hint>
               <md-hint align="end">{{displayNameElement.value.length}} / 20</md-hint>
             </md-input-container>
@@ -69,10 +71,13 @@
                       [(ngModel)]="email" 
                       name="email"
                       maxlength="30"
-                      pattern="^\w+@\w+$"
+                      pattern="^[a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,15})$"
                       required>
               <md-hint align="start">
-                <span [hidden]="emailControl.pristine || !emailControl.errors?.pattern" class="tc-red-600">That's not an email!</span>
+                <span [hidden]="emailControl.pristine" class="tc-red-600">
+                  <span [hidden]="!emailControl.errors?.required">Required</span>
+                  <span [hidden]="!emailControl.errors?.pattern">incorrect pattern</span>
+                </span>
               </md-hint>
               <md-hint align="end">{{emailElement.value.length}} / 30</md-hint>
             </md-input-container>

src/app/users/+form/form.component.ts

@@ -7,14 +7,14 @@ import { TdMediaService } from '@covalent/core';
 import { UsersService, IUser } from '../../../services';
 
 @Component({
-  selector: 'source-form',
+  selector: 'qs-user-form',
   templateUrl: './form.component.html',
   styleUrls: ['./form.component.scss'],
   viewProviders: [ UsersService ],
 })
 export class UsersFormComponent implements OnInit, AfterViewInit {
 
-  display_name: string;
+  displayName: string;
   email: string;
   id: string;
   admin: boolean;
@@ -41,24 +41,24 @@ export class UsersFormComponent implements OnInit, AfterViewInit {
     this._route.params.subscribe((params: {id: string}) => {
       let userId: string = params.id;
       this._usersService.get(userId).subscribe((user: any) => {
-        this.display_name = user.display_name;
+        this.displayName = user.displayName;
         this.email = user.email;
-        this.admin = (user.site_admin === 1 ? true : false);
+        this.admin = (user.siteAdmin === 1 ? true : false);
         this.id = user.id;
       });
     });
   }
 
   save(): void {
-    let site_admin: number = (this.admin ? 1 : 0);
+    let siteAdmin: number = (this.admin ? 1 : 0);
     let now: Date = new Date();
     this.user = {
-      display_name: this.display_name,
+      displayName: this.displayName,
       email: this.email,
-      site_admin: site_admin,
-      id: this.id || this.display_name.replace(/\s+/g, '.'),
+      siteAdmin: siteAdmin,
+      id: this.id || this.displayName.replace(/\s+/g, '.'),
       created: now,
-      last_access: now,
+      lastAccess: now,
     };
     if (this.action === 'add') {
       this._usersService.create(this.user).subscribe(() => {

src/app/users/users.component.html

@@ -56,13 +56,13 @@ <h3>No users to display.</h3>
           <template let-user let-last="last" ngFor [ngForOf]="filteredUsers">
             <md-list-item>
               <md-icon md-list-avatar>person</md-icon>
-              <h3 md-line> {{user.display_name}} </h3>
+              <h3 md-line> {{user.displayName}} </h3>
               <p md-line> {{user.email}} </p>
-              <p md-line hide-gt-md class="md-caption"> last login: {{ user.last_access | timeAgo }} </p>
+              <p md-line hide-gt-md class="md-caption"> last login: {{ user.lastAccess | timeAgo }} </p>
               <span flex></span>
               <span hide-xs hide-sm hide-md flex-gt-xs="60" flex-xs="40" layout-gt-xs="row">
                   <div class="md-caption tc-grey-500" flex-gt-xs="50"> {{ user.created | date }} </div>
-                  <div class="md-caption tc-grey-500" flex-gt-xs="50"> {{ user.last_access | timeAgo }} </div>
+                  <div class="md-caption tc-grey-500" flex-gt-xs="50"> {{ user.lastAccess | timeAgo }} </div>
               </span>
               <span>
                   <button md-icon-button [md-menu-trigger-for]="menu">

src/app/users/users.component.ts

@@ -41,7 +41,7 @@ export class UsersComponent implements AfterViewInit {
 
   filterUsers(displayName: string = ''): void {
     this.filteredUsers = this.users.filter((user: IUser) => {
-      return user.display_name.toLowerCase().indexOf(displayName.toLowerCase()) > -1;
+      return user.displayName.toLowerCase().indexOf(displayName.toLowerCase()) > -1;
     });
   }
 

src/components/chart/chart.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'chart-component',
+  selector: 'qs-chart-component',
   templateUrl: './chart.component.html',
   styleUrls: ['./chart.component.scss'],
 })

src/data/users.json

@@ -1,42 +1,42 @@
 [
   {
-    "display_name" : "Suzy Cuningham",
+    "displayName" : "Suzy Cuningham",
     "id" : "suzy.cuningham",
     "email" : "[email protected]",
     "created" : "10/01/2015 11:05 AM",
-    "last_access" : "12/23/2015 11:05 AM",
-    "site_admin": true
+    "lastAccess" : "12/23/2015 11:05 AM",
+    "siteAdmin": true
   },
   {
-    "display_name" : "Bobby Daniels",
+    "displayName" : "Bobby Daniels",
     "id" : "bobbyD",
     "email" : "[email protected]",
     "created" : "10/01/2015 11:05 AM",
-    "last_access" : "12/23/2015 11:05 AM",
-    "site_admin": false
+    "lastAccess" : "12/23/2015 11:05 AM",
+    "siteAdmin": false
   },
   {
-    "display_name" : "John Walker",
+    "displayName" : "John Walker",
     "id" : "johnnyWalker",
     "email" : "[email protected]",
     "created" : "10/01/2015 11:05 AM",
-    "last_access" : "12/23/2015 11:05 AM",
-    "site_admin": false
+    "lastAccess" : "12/23/2015 11:05 AM",
+    "siteAdmin": false
   },
   {
-     "display_name" : "Eddy Stevens",
+     "displayName" : "Eddy Stevens",
      "id" : "eStevens",
      "email" : "[email protected]",
      "created" : "10/01/2015 11:05 AM",
-     "last_access" : "12/23/2015 11:05 AM",
-     "site_admin": false
+     "lastAccess" : "12/23/2015 11:05 AM",
+     "siteAdmin": false
   },
   {
-     "display_name" : "Jan Williams",
+     "displayName" : "Jan Williams",
      "id" : "jDubz",
      "email" : "[email protected]",
      "created" : "10/01/2015 11:05 AM",
-     "last_access" : "12/23/2015 11:05 AM",
-     "site_admin": false
+     "lastAccess" : "12/23/2015 11:05 AM",
+     "siteAdmin": false
   }
 ]

src/services/users.service.ts

@@ -6,12 +6,12 @@ import { HttpInterceptorService, RESTService } from '@covalent/http';
 import { MOCK_API } from '../config/api.config';
 
 export interface IUser {
-  display_name: string;
+  displayName: string;
   id: string;
   email: string;
   created: Date;
-  last_access: Date;
-  site_admin: number;
+  lastAccess: Date;
+  siteAdmin: number;
 }
 
 @Injectable()

src/test.ts

@@ -22,7 +22,7 @@ Promise.all([
   .then(([testing, testingBrowser]: any[]) => {
     testing.getTestBed().initTestEnvironment(
       testingBrowser.BrowserDynamicTestingModule,
-      testingBrowser.platformBrowserDynamicTesting()
+      testingBrowser.platformBrowserDynamicTesting(),
     );
   })
   // Then we find all the tests.