GENERAL: do some minor changes

README.md

@@ -1,6 +1,21 @@
 # NearbyShopsFront
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.1.2.
+This is a coding challenge for Hidden founders.
+
+This is just the Front-Service using Angula 6.1.2.
+You can find the Back-Service [Here](https://github.com/karim88/nearby-shops-back-service).
+
+# Installation
+
+* First you need Angula CLI: `npm i @angular/cil -g`
+* Clone the project `git clone [email protected]:karim88/nearby-shops-front-service.git`
+* Navigate to the project folder  `cd nearby-shops-front-service`
+* Install dependencies `npm i`
+* Now you are Ready To Go you can run `ng serve --aot` for developement or `ng seve --prod` for production.
+
+```
+Note: don't forget to change the environement files.
+```
 
 ## Development server
 

src/app/app-routing.module.ts

@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { AuthComponent } from './components/layouts/auth/auth.component';
 import { AppComponent } from './components/layouts/app/app.component';
 import { PublicGuard, ProtectedGuard } from 'ngx-auth';
-import {LogoutComponent} from './modules/auth/components/logout/logout.component';
+import { LogoutComponent } from './modules/auth/components/logout/logout.component';
 
 const routes: Routes = [
   {

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import {CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';

src/app/components/card-list/card-list.component.css

@@ -1,3 +1,7 @@
-.card-columns {
-  padding-top: 85px;
+.pagination-row {
+  margin-top: 30px;
+}
+
+.pagination-component {
+  display: flex;
 }

src/app/components/card-list/card-list.component.html

@@ -1,10 +1,14 @@
-<div class="card-columns">
-  <app-card *ngFor="let shop of data" [shop]="shop" (liked)="updateShops($event)" [is_favorite]="is_favorite"></app-card>
+<div class="row">
+  <div class="col-md-4"  *ngFor="let shop of data">
+    <app-card [shop]="shop" (liked)="updateShops($event)" [is_favorite]="is_favorite"></app-card>
+  </div>
 </div>
 
-<div class="row">
+<div class="row pagination-row">
   <div class="col-xs-12 col-12">
-    <pagination [totalItems]="shops.total" [(ngModel)]="shops.current_page" [maxSize]="5" [boundaryLinks]="true" [itemsPerPage]="12" (pageChanged)="pageChanged($event)"></pagination>
+    <pagination class="mx-auto pagination-component" [totalItems]="shops.total" [(ngModel)]="shops.current_page"
+                [maxSize]="5" [boundaryLinks]="true" [itemsPerPage]="12"
+                (pageChanged)="pageChanged($event)"></pagination>
   </div>
 </div>
 

src/app/components/card-list/card-list.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 
 
 @Component({

src/app/components/card/card.component.ts

@@ -1,6 +1,6 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {ShopsService} from '../../services/shops.service';
-import {ToastrService} from 'ngx-toastr';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ShopsService } from '../../services/shops.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-card',
@@ -13,7 +13,7 @@ export class CardComponent implements OnInit {
   @Input() is_favorite: boolean;
   @Output() liked = new EventEmitter<boolean>();
   constructor(public shopsService: ShopsService,
-              public toastr: ToastrService) {
+    public toastr: ToastrService) {
   }
 
   ngOnInit() {

src/app/components/layouts/app/app.component.ts

@@ -1,5 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-import {Router} from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-app',
@@ -19,7 +19,7 @@ export class AppComponent implements OnInit {
   /**
    * Change route url to be for active class
    */
-  changeRoute () {
+  changeRoute() {
     this.current_url = this.router.url;
   }
 

src/app/modules/auth/components/register/register.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import {AuthenticationService} from '../../../../services/authentication.service';
-import {ToastrService} from 'ngx-toastr';
-import {Router} from '@angular/router';
+import { AuthenticationService } from '../../../../services/authentication.service';
+import { ToastrService } from 'ngx-toastr';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-register',
@@ -14,8 +14,8 @@ export class RegisterComponent implements OnInit {
 
 
   constructor(public auth: AuthenticationService,
-              public toastr: ToastrService,
-              public router: Router) { }
+    public toastr: ToastrService,
+    public router: Router) { }
 
   ngOnInit() {
   }

src/app/modules/shops/components/favorites/favorites.component.css

@@ -0,0 +1,3 @@
+.container {
+  margin-top: 85px;
+}

src/app/modules/shops/components/favorites/favorites.component.html

@@ -1,3 +1,10 @@
-<div class="container" *ngIf="data">
+<div class="container" *ngIf="data && data.data.length > 0">
   <app-card-list [shops]="data" (paginate)="paginated($event)" [is_favorite]="true"></app-card-list>
 </div>
+
+<div class="container" *ngIf="!data || data.data.length === 0">
+  <div class="alert alert-warning" role="alert">
+    You did not like any shop, why?<br>
+    do some likes and come back ;-)
+  </div>
+</div>

src/app/modules/shops/components/favorites/favorites.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import {ShopsService} from '../../../../services/shops.service';
-import {ToastrService} from 'ngx-toastr';
+import { ShopsService } from '../../../../services/shops.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-favorites',
@@ -11,7 +11,7 @@ export class FavoritesComponent implements OnInit {
 
   data: any;
   constructor(public shopsService: ShopsService,
-              public toastr: ToastrService) {
+    public toastr: ToastrService) {
   }
 
   ngOnInit() {

src/app/modules/shops/components/nearby/nearby.component.css

@@ -0,0 +1,3 @@
+.container {
+  margin-top: 85px;
+}

src/app/modules/shops/components/nearby/nearby.component.html

@@ -1,3 +1,10 @@
 <div class="container" *ngIf="data">
   <app-card-list [shops]="data" (paginate)="paginated($event)" [is_favorite]="false"></app-card-list>
 </div>
+
+<div class="container" *ngIf="!data || data.data.length === 0">
+  <div class="alert alert-warning" role="alert">
+    Something bad occured while fetching data<br>
+    Please allow localisation of you position to get the list of shops ;-(
+  </div>
+</div>

src/app/modules/shops/components/nearby/nearby.component.ts

@@ -1,6 +1,6 @@
-import {Component, OnInit} from '@angular/core';
-import {ShopsService} from '../../../../services/shops.service';
-import {ToastrService} from 'ngx-toastr';
+import { Component, OnInit } from '@angular/core';
+import { ShopsService } from '../../../../services/shops.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-nearby',
@@ -11,7 +11,7 @@ export class NearbyComponent implements OnInit {
 
   data: any;
   constructor(public shopsService: ShopsService,
-              public toastr: ToastrService) {
+    public toastr: ToastrService) {
   }
 
   ngOnInit() {

src/app/modules/shops/shops.module.ts

@@ -1,13 +1,13 @@
-import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ShopsRoutingModule } from './shops-routing.module';
 import { FavoritesComponent } from './components/favorites/favorites.component';
 import { NearbyComponent } from './components/nearby/nearby.component';
-import {CardListComponent} from '../../components/card-list/card-list.component';
-import {CardComponent} from '../../components/card/card.component';
-import {PaginationModule} from 'ngx-bootstrap/pagination';
-import {FormsModule} from '@angular/forms';
+import { CardListComponent } from '../../components/card-list/card-list.component';
+import { CardComponent } from '../../components/card/card.component';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [

src/app/services/shops.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
-import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {environment} from '../../environments/environment';
-import {Observable} from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'