added default shopping list, displaying it in Dashboard

src/app/app-routing.module.ts

@@ -4,10 +4,13 @@ import {RouterModule, Routes} from '@angular/router';
 import {DashboardComponent} from './dashboard/dashboard.component';
 import {Error404Component} from './core/error404/error404.component';
 import {AppConfig} from './config/app.config';
+import {ShoppingListDetailComponent} from './shopping/shopping-list-detail/shopping-list-detail.component';
 
 const routes: Routes = [
   {path: '', redirectTo: '/', pathMatch: 'full'},
-  {path: '', component: DashboardComponent, data: {title: 'Dashboard'}},
+  {
+    path: '', component: DashboardComponent, data: {title: 'Dashboard'}
+  },
   {path: AppConfig.routes.shopping, loadChildren: 'app/shopping/shopping.module#ShoppingModule'},
   {path: AppConfig.routes.error404, component: Error404Component},
   {path: '**', redirectTo: '/' + AppConfig.routes.error404}

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {HttpClientModule, HttpClient} from '@angular/common/http';
 
 // Material
@@ -24,17 +24,23 @@ import {SharedModule} from './shared/shared.module';
 import {StateService} from './services/state/state.service';
 import {APP_CONFIG, AppConfig} from './config/app.config';
 
+import {ShoppingService} from './shopping/shared/shopping.service';
+import {CommonModule} from '@angular/common';
+import {SharedComponentsModule} from './shared/shared-components.module';
+
 
 @NgModule({
   declarations: [
     AppComponent,
     DashboardComponent
   ],
   imports: [
+    CommonModule,
     BrowserModule,
     BrowserAnimationsModule,
     MaterialModule,
     FormsModule,
+    ReactiveFormsModule,
     HttpClientModule,
     CoreModule,
     TranslateModule.forRoot({
@@ -45,11 +51,13 @@ import {APP_CONFIG, AppConfig} from './config/app.config';
       }
     }),
     SharedModule.forRoot(),
-    AppRoutingModule
+    AppRoutingModule,
+    SharedComponentsModule
   ],
   providers: [
     {provide: 'state', useClass: StateService},
-    {provide: APP_CONFIG, useValue: AppConfig}
+    {provide: APP_CONFIG, useValue: AppConfig},
+    ShoppingService
   ],
   bootstrap: [AppComponent]
 })

src/app/config/app.config.ts

@@ -13,5 +13,20 @@ export const AppConfig = {
 
   },
   snackBarDuration: 3000,
-  repositoryURL: 'https://github.com/affilnost/angular5-example-shopping-app'
+  repositoryURL: 'https://github.com/affilnost/angular5-example-shopping-app',
+  defultSHContent: '[{"id":"257450194","name":"Chicken salad with leaf vegetables and cherry toma...",' +
+  '"imgUrl":"https://image.shutterstock.com/display_pic_with_logo/236329/257450194/stock-photo-chicken-salad' +
+  '-with-leaf-vegetables-and-cherry-tomatoes-257450194.jpg","description":"Chicken salad with leaf vegetables' +
+  ' and cherry tomatoes"},{"id":"548526682","name":"Easter cake on a white background","imgUrl":"https://ima' +
+  'ge.shutterstock.com/display_pic_with_logo/2675854/548526682/stock-photo-easter-cake-on-a-white-background' +
+  '-548526682.jpg","description":"Easter cake on a white background"},{"id":"591617762","name":"Chocolate egg' +
+  ' exploded","imgUrl":"https://image.shutterstock.com/display_pic_with_logo/685426/591617762/stock-photo-cho' +
+  'colate-egg-exploded-591617762.jpg","description":"Chocolate egg exploded"},{"id":"525754399","name":"Glass' +
+  ' of milk isolated on white","imgUrl":"https://image.shutterstock.com/display_pic_with_logo/371512/52575439' +
+  '9/stock-photo-glass-of-milk-isolated-on-white-525754399.jpg","description":"Glass of milk isolated on whi' +
+  'te"},{"id":"629596088","name":"Bread and Bakery Products Isolated on White. Diffe...","imgUrl":"https://i' +
+  'mage.shutterstock.com/display_pic_with_logo/3011495/629596088/stock-photo-bread-and-bakery-products-isola' +
+  'ted-on-white-different-types-of-bread-sesame-bun-baguette-baked-629596088.jpg","description":"Bread and Ba' +
+  'kery Products Isolated on White. Different types of bread: sesame bun, baguette, baked rolls, rustic brea' +
+  'd, round bun, sesame bun."}]'
 };

src/app/core/header/header.component.scss

@@ -1,6 +1,6 @@
 :host(app-header) {
   padding-top: 0;
-  padding-bottom: 5em;
+  padding-bottom: 4.3em;
   display: grid;
 
   header {

src/app/dashboard/dashboard.component.html

@@ -1,12 +1,12 @@
-<div fxLayout="row">
-  <div fxFlex="10" fxFlex.gt-sm="20"></div>
-  <div fxFlex="90" fxFlex.gt-sm="80">
-    <h1 class="section-title">{{ 'Pages.Dashboard.Headline' | translate}}</h1>
-    <br>
-    <p>{{ "Pages.Dashboard.welcomeText" | translate }} <a routerLink="/shopping">{{ "Pages.Shopping.Title" | translate }}</a>.</p>
-    <mat-card class="welcome-card">
-      <img mat-card-image src="https://media.giphy.com/media/SKGo6OYe24EBG/giphy.gif">
-    </mat-card>
+<mat-card class="main-dashboard-card">
+  <div fxLayout="row">
+    <div fxFlex="10" fxFlex.gt-sm="20"></div>
+    <div fxFlex="90" fxFlex.gt-sm="80">
+      <h1 class="section-title">{{ 'Pages.Dashboard.Headline' | translate}}</h1>
+      <p>{{ "Pages.Dashboard.welcomeText" | translate }} <a routerLink="/shopping">{{ "Pages.Shopping.Title" | translate }}</a>.</p>
+    </div>
+    <div fxFlex="10" fxFlex.gt-sm="20"></div>
   </div>
-  <div fxFlex="10" fxFlex.gt-sm="20"></div>
-</div>
+</mat-card>
+
+<app-shopping-list-detail></app-shopping-list-detail>

src/app/dashboard/dashboard.component.scss

@@ -1,4 +1,12 @@
 .welcome-card {
   margin: 2em auto;
 }
-
+.section-title {
+  padding-top: 0;
+}
+p {
+  text-align: center;
+}
+.main-dashboard-card {
+  margin-bottom: 20px;
+}

src/app/shared/shared-components.module.ts

@@ -0,0 +1,26 @@
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {ShoppingListDetailComponent} from '../shopping/shopping-list-detail/shopping-list-detail.component';
+import {CommonModule} from '@angular/common';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TranslateModule} from '@ngx-translate/core';
+import {MaterialModule} from './material.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    MaterialModule
+  ],
+  declarations: [
+    ShoppingListDetailComponent
+  ],
+  exports: [
+    ShoppingListDetailComponent
+  ]
+})
+
+export class SharedComponentsModule {
+}

src/app/shared/shared.module.ts

@@ -2,13 +2,17 @@ import {ModuleWithProviders, NgModule} from '@angular/core';
 import {MaterialModule} from './material.module';
 import {TranslateModule} from '@ngx-translate/core';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {CommonModule} from '@angular/common';
+
 
 @NgModule({
   imports: [
+    CommonModule,
     MaterialModule,
     FlexLayoutModule,
     TranslateModule
   ],
+  declarations: [],
   exports: [
     MaterialModule,
     FlexLayoutModule,

src/app/shopping/shared/shopping.service.ts

@@ -22,12 +22,14 @@ export class ShoppingService {
   private shoppinglistPrefix: string;
   private shoppinglistsPrefix: string;
   private maxTitleLength: number;
+  private defaultSL: object;
 
   constructor(private http: HttpClient,
               private translateService: TranslateService,
               private snackBar: MatSnackBar) {
     this.productsGetUrl = AppConfig.endpoints.productsBaseUrl + AppConfig.endpoints.productsGetPath;
     this.productsBaseUrl = AppConfig.endpoints.productsBaseUrl;
+    this.defaultSL = AppConfig.defultSHContent;
     this.shoppinglistPrefix = 'shopping-list-';
     this.shoppinglistsPrefix = 'shopping-lists';
     this.maxTitleLength = 50;
@@ -99,6 +101,30 @@ export class ShoppingService {
     localStorage.setItem(this.shoppinglistPrefix + shoppingList.id, JSON.stringify(slProducts));
   }
 
+  isThereShoppingLists(): boolean {
+    if (!this.getAllShoppingLists().length) {
+      return false;
+    }
+    return true;
+  }
+
+  getFirstShoppingList(): ShoppingList {
+    const shLists = this.getAllShoppingLists();
+    if (shLists.length) {
+      return shLists[0];
+    } else {
+      return null;
+    }
+  }
+
+  initShoppingListsWithDefault(): ShoppingList {
+    const shoppingList = new ShoppingList(0, 'Default');
+    const shoppingLists = [shoppingList];
+    localStorage.setItem(this.shoppinglistsPrefix, JSON.stringify(shoppingLists));
+    localStorage.setItem(this.shoppinglistPrefix + 0, this.defaultSL);
+    return shoppingList;
+  }
+
   getAllShoppingLists(): ShoppingList[] {
     return JSON.parse(localStorage.getItem(this.shoppinglistsPrefix)) || [];
   }

src/app/shopping/shopping-list-detail/shopping-list-detail.component.ts

@@ -26,8 +26,17 @@ export class ShoppingListDetailComponent {
     this.activatedRoute.params.subscribe((params: any) => {
       if (params['id']) {
         this.shoppingList = this.shoppingService.getShoppingListById(params['id']);
-        this.shoppingListProducts = this.shoppingService.getProductsByShoppingList(this.shoppingList);
+      } else {
+        if (this.shoppingService.isThereShoppingLists()) {
+          // if there are any shopping lists - get the first one
+          this.shoppingList = this.shoppingService.getFirstShoppingList();
+
+        } else {
+          // if there are no shopping lists
+          this.shoppingList = this.shoppingService.initShoppingListsWithDefault();
+        }
       }
+      this.shoppingListProducts = this.shoppingService.getProductsByShoppingList(this.shoppingList);
     });
 
     this.shoppingService.getProducts().subscribe((products: Array<Product>) => {

src/app/shopping/shopping-lists/shopping-lists.component.scss

@@ -11,6 +11,10 @@
   padding-right: 17%;
 }
 
+.section-title {
+  margin-bottom: 60px;
+}
+
 .clear {
   clear: both;
 }

src/app/shopping/shopping.module.ts

@@ -8,8 +8,8 @@ import {SharedModule} from '../shared/shared.module';
 
 import {ShoppingListsComponent, RemoveShoppingListDialogComponent} from './shopping-lists/shopping-lists.component';
 import {ShoppingService} from './shared/shopping.service';
-import {ShoppingListDetailComponent} from './shopping-list-detail/shopping-list-detail.component';
 import {ShoppingComponent} from './shopping.component';
+import {SharedComponentsModule} from '../shared/shared-components.module';
 
 
 @NgModule({
@@ -18,12 +18,12 @@ import {ShoppingComponent} from './shopping.component';
     FormsModule,
     SharedModule,
     ShoppingRoutingModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    SharedComponentsModule
   ],
   declarations: [
     ShoppingComponent,
     ShoppingListsComponent,
-    ShoppingListDetailComponent,
     RemoveShoppingListDialogComponent
   ],
   entryComponents: [

src/assets/i18n/lang.de.json

@@ -6,7 +6,7 @@
       "welcomeText": "Hier können Sie Ihre Einkaufslisten erstellen und bearbeiten:"
     },
     "Shopping": {
-      "Title": "Einkaufen",
+      "Title": "Einkaufslisten",
       "Headline": "Willkommen in Einkaufen"
     },
     "ShoppingList": {

src/assets/i18n/lang.en.json

@@ -6,7 +6,7 @@
       "welcomeText": "Here you can create and edit your shopping lists:"
     },
     "Shopping": {
-      "Title": "Shopping",
+      "Title": "Shopping Lists",
       "Headline": "Welcome to Shopping"
     },
     "ShoppingList": {

src/scss/basic/_main.scss

@@ -8,7 +8,7 @@
   .col {
     width: 400px;
     min-width: 200px;
-    margin: 20px;
+    margin: 0 20px 20px 20px;
   }
 }
 .productImg {