Product Catalog: First Design

angular.json

@@ -30,11 +30,13 @@
             ],
             "styles": [
               "src/styles.scss",
-              "src/assets/scss/argon.scss"
+              "src/assets/scss/argon.scss",
+              "src/assets/css/argon-design-system.css"
             ],
             "scripts": [
               "node_modules/chart.js/dist/Chart.min.js",
-              "node_modules/clipboard/dist/clipboard.min.js"
+              "node_modules/clipboard/dist/clipboard.min.js",
+              "src/assets/css/argon-design-system.min.js"
             ]
           },
           "configurations": {

package.json

@@ -38,9 +38,10 @@
     "@angular-devkit/build-angular": "~0.1002.0",
     "@angular/cli": "~10.2.0",
     "@angular/compiler-cli": "~10.2.0",
-    "@types/node": "^12.11.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
+    "@types/nouislider": "^9.0.8",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",

src/app/app.module.ts

@@ -11,21 +11,23 @@ import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component
 import {NgbDatepickerModule, NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
 import { AppRoutingModule } from './app.routing';
-import { ComponentsModule } from './components/components.module';
+import {SharedModule} from './shared/shared.module';
+import {ProductCatalogComponent} from './layouts/product-catalog/product-catalog/product-catalog.component';
 
 
 @NgModule({
   imports: [
     BrowserAnimationsModule,
     FormsModule,
     HttpClientModule,
-    ComponentsModule,
+    SharedModule,
     NgbModule,
     RouterModule,
     AppRoutingModule,
     NgbDatepickerModule
   ],
   declarations: [
+    ProductCatalogComponent,
     AppComponent,
     AdminLayoutComponent,
     AuthLayoutComponent,

src/app/app.routing.ts

@@ -5,6 +5,7 @@ import {Routes, RouterModule} from '@angular/router';
 
 import {AdminLayoutComponent} from './layouts/admin-layout/admin-layout.component';
 import {AuthLayoutComponent} from './layouts/auth-layout/auth-layout.component';
+import {ProductCatalogComponent} from './layouts/product-catalog/product-catalog/product-catalog.component';
 
 const routes: Routes = [
   {
@@ -20,6 +21,16 @@ const routes: Routes = [
         loadChildren: () => import('./layouts/admin-layout/admin-layout.module').then(mod => mod.AdminLayoutModule)
       }
     ]
+  },
+  {
+    path: '',
+    component: ProductCatalogComponent,
+    children: [
+      {
+        path: '',
+        loadChildren: () => import('./layouts/product-catalog/product-catalog.module').then(mod => mod.ProductCatalogModule)
+      }
+    ]
   }, {
     path: '',
     component: AuthLayoutComponent,

src/app/components/catalog/catalog.component.html

@@ -0,0 +1,99 @@
+<div class="header pb-5 pt-5 pt-lg-5 d-flex align-items-center"
+     style="min-height: 300px; background-image: url(assets/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
+  <!-- Mask -->
+  <span class="mask bg-gradient-danger opacity-8"></span>
+  <!-- Header container -->
+  <div class="container-fluid d-flex align-items-center">
+    <div class="row mx-auto text-center">
+      <div class="col-lg-12 col-md-10">
+        <h1 class="display-2 text-white">Hello to {{store?.title}}</h1>
+        <p class="text-white mt-0 mb-5">Browser our product list and buy product online !!</p>
+        <!--        <a href="#!" class="btn btn-info">Edit profile</a>-->
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container-fluid mt--7">
+  <div class="row">
+    <div class="col-lg-3">
+        <!-- Tags -->
+        <div class="card">
+          <!-- Card header -->
+          <div class="card-header">
+            <h3 class="mb-0">Tags</h3>
+          </div>
+          <!-- Card body -->
+          <div class="card-body">
+            <form>
+              <input type="text" class="form-control" value="Bucharest, Cluj, Iasi, Timisoara, Piatra Neamt" data-toggle="tags"/>
+            </form>
+          </div>
+        </div>
+        <!-- slider      -->
+        <div class="card">
+        <!-- Card header -->
+        <div class="card-header">
+          <h3 class="mb-0">Sliders</h3>
+        </div>
+        <!-- Card body -->
+        <div class="card-body">
+          <form>
+            <div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
+              <div class="mb-3">
+                <small class="text-uppercase font-weight-bold">Sliders</small>
+              </div>
+              <!-- Simple slider -->
+              <div class="input-slider-container">
+                <div id="input-slider" class="input-slider" ></div>
+              </div>
+              <!-- Range slider -->
+              <div class="mt-5">
+                <!-- Range slider container -->
+                <div id="input-slider-range"></div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-9">
+      <div class="section list-products bg-secondary skew-separator skew-top">
+        <div class="container">
+          <div class="col-md-8">
+            <h2 class="title">You may also like </h2>
+          </div>
+          <div class="row">
+            <div *ngFor="let i of [1,2,3,4,5,6,7,8,9]" class="col-lg-3 col-md-6">
+              <div class="card card-product">
+                <div class="card-image">
+                  <a href="">
+                    <img class="img rounded" src="assets/img/brand/shirt.png">
+                  </a>
+                </div>
+                <div class="card-body">
+                  <h6 class="category text-warning">Trending</h6>
+                  <h4 class="card-title">
+                    <a href="javascript:;" class="card-link">Gucci</a>
+                  </h4>
+                  <div class="card-description opacity-8 mt-2">
+                    Dolce &amp; Gabbana's 'Greta' tote has been crafted in Italy from hard-wearing red textured-leather.
+                  </div>
+                  <div class="card-footer">
+                    <div class="price-container">
+                      <span class="price">€1,459</span>
+                    </div>
+                    <button class="btn btn-simple btn-warning btn-icon-only btn-sm btn-round pull-right" rel="tooltip"
+                            title="" style="float: right" data-original-title="Add to wishlist">
+                      <i class="ni ni-favourite-28"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/catalog/catalog.component.ts

@@ -0,0 +1,43 @@
+import {AfterViewInit, Component, OnInit} from '@angular/core';
+// @ts-ignore
+import noUiSlider from 'nouislider';
+
+
+@Component({
+  selector: 'app-catalog',
+  templateUrl: './catalog.component.html',
+  styleUrls: ['./catalog.component.css']
+})
+export class CatalogComponent implements OnInit, AfterViewInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit() {
+    const slider = document.getElementById('input-slider');
+
+    noUiSlider.create(slider, {
+      start: 40,
+      connect: [true, false],
+      range: {
+        min: 0,
+        max: 100
+      }
+    });
+
+    const slider2 = document.getElementById('input-slider-range');
+
+    noUiSlider.create(slider2, {
+      start: [20, 60],
+      connect: true,
+      range: {
+        min: 0,
+        max: 100
+      }
+    });
+  }
+
+}

src/app/components/components.module.ts

@@ -5,6 +5,7 @@ import { NavbarComponent } from './navbar/navbar.component';
 import { FooterComponent } from './footer/footer.component';
 import { RouterModule } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { CatalogComponent } from './catalog/catalog.component';
 
 @NgModule({
   imports: [
@@ -15,7 +16,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   declarations: [
     FooterComponent,
     NavbarComponent,
-    SidebarComponent
+    SidebarComponent,
+    CatalogComponent
   ],
   exports: [
     FooterComponent,

src/app/components/navbar/navbar.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit, ElementRef } from '@angular/core';
-import { ROUTES } from '../sidebar/sidebar.component';
-import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
-import { Router } from '@angular/router';
+import {Component, OnInit, ElementRef} from '@angular/core';
+import {ROUTES} from '../sidebar/sidebar.component';
+import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-navbar',
@@ -12,23 +12,26 @@ export class NavbarComponent implements OnInit {
   public focus;
   public listTitles: any[];
   public location: Location;
-  constructor(location: Location,  private element: ElementRef, private router: Router) {
+
+  constructor(location: Location, private element: ElementRef, private router: Router) {
     this.location = location;
   }
 
   ngOnInit() {
     this.listTitles = ROUTES.filter(listTitle => listTitle);
   }
-  getTitle(){
-    var titlee = this.location.prepareExternalUrl(this.location.path());
-    if(titlee.charAt(0) === '#'){
-        titlee = titlee.slice( 1 );
+
+  getTitle() {
+    let titlee = this.location.prepareExternalUrl(this.location.path());
+    if (titlee.charAt(0) === '#') {
+      titlee = titlee.slice(1);
     }
 
-    for(var item = 0; item < this.listTitles.length; item++){
-        if(this.listTitles[item].path === titlee){
-            return this.listTitles[item].title;
-        }
+    // tslint:disable-next-line:prefer-for-of
+    for (let item = 0; item < this.listTitles.length; item++) {
+      if (this.listTitles[item].path === titlee) {
+        return this.listTitles[item].title;
+      }
     }
     return 'Dashboard';
   }

src/app/components/sidebar/sidebar.component.ts

@@ -14,6 +14,7 @@ export const ROUTES: RouteInfo[] = [
   // {path: '/maps', title: 'Maps', icon: 'ni-pin-3 text-orange', class: ''},
   {path: '/user-profile', title: 'User profile', icon: 'ni-single-02 text-yellow', class: ''},
   {path: '/store', title: 'My Stores', icon: 'ni-basket text-red', class: ''},
+  {path: '/catalog', title: 'Product Catalog', icon: 'ni-basket text-red', class: ''},
   // {path: '/login', title: 'Login', icon: 'ni-key-25 text-info', class: ''},
   // {path: '/register', title: 'Register', icon: 'ni-circle-08 text-pink', class: ''}
 ];

src/app/layouts/product-catalog/product-catalog-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import {CatalogComponent} from '../../components/catalog/catalog.component';
+import {ProductCatalogComponent} from './product-catalog/product-catalog.component';
+
+const routes: Routes = [
+  { path: 'catalog',      component: CatalogComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ProductCatalogRoutingModule { }

src/app/layouts/product-catalog/product-catalog.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ProductCatalogRoutingModule } from './product-catalog-routing.module';
+import {SharedModule} from '../../shared/shared.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    ProductCatalogRoutingModule,
+    SharedModule
+  ]
+})
+export class ProductCatalogModule { }

src/app/layouts/product-catalog/product-catalog/product-catalog.component.html

@@ -0,0 +1,10 @@
+<!-- Sidenav -->
+<div class="catalog-content">
+  <!-- Top navbar -->
+  <app-navbar></app-navbar>
+  <!-- Pages -->
+  <router-outlet></router-outlet>
+  <div class="container-fluid">
+    <app-footer></app-footer>
+  </div>
+</div>

src/app/layouts/product-catalog/product-catalog/product-catalog.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-product-catalog',
+  templateUrl: './product-catalog.component.html',
+  styleUrls: ['./product-catalog.component.css']
+})
+export class ProductCatalogComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}