sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

[HIMA-12] added icons of product details

Browse Source
This commit is contained in:
Eraldo Hasanaj
2019-02-06 18:30:45 +01:00
parent 8af4b010c6
commit 4de9eb48c3
7 changed files with 172 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/app/components/product-details/product-details.component.html
View File

@@ -3,21 +3,64 @@
<div class="product-image">
<img [src]="product.productIcon$ | async">
</div>
<div class="product-info">
<div class="autor standart-text">
<span>{{product.author}}</span>
</div>
<div class="title">
<span>{{product.title}}</span>
</div>
<div class="languages standart-text">
<span>{{product.locale}}</span>
</div>
<div class="ean standart-text">
<span>{{product.eanTag}}</span>
</div>
<div class="publication-format-pages">
<div class="product-info-container">
<div class="product-info">
<div class="autor standart-text">
<span>{{product.author}}</span>
</div>
<div class="title">
<span>{{product.title}}</span>
</div>
<div class="type-stock-info">
<div class="type align-left">
<div>
<img class="icon" src="../../../assets/images/Icon_{{product.formatIcon}}.svg">
</div>
<div>
<span>{{product.format}}</span>
</div>
</div>
<div class="stock-info align-right">
<div class="ship-icon">
<img class="icon" src="../../../assets/images/Truck_Icon_2.svg">
</div>
<div class="send-icon">
<img class="icon" src="../../../assets/images/Package_Icon_2.svg">
</div>
<div class="stock-label">
<span>Lieferbar</span>
</div>
<div class="home-icon">
<img class="icon" src="../../../assets/images/Icon_House.svg">
</div>
<div class="stock-quantity">
<span>{{product.quantity}}</span>
</div>
</div>
</div>
<div class="languages standart-text">
<span>{{product.locale}}</span>
</div>
<div class="ean standart-text">
<span>{{product.eanTag}}</span>
</div>
<div class="publication-format-pages standart-text">
<div class="publication">
<span>{{product.publicationDate}}</span>
</div>
<div>
<span>|</span>
</div>
<div class="format">
<span>{{product.format}}</span>
</div>
<div>
<span>|</span>
</div>
<div class="pages">
<span>Seiten</span>
</div>
</div>
</div>
</div>
<div class="product-staus-info"></div>
@@ -32,4 +75,4 @@
<button class="btn" (click)="openModal()">Open checkout</button>
<app-checkout #checkout (closed)="cartActionCompleted($event)"></app-checkout>
<!-- <app-shopping-cart-feedback #feedback></app-shopping-cart-feedback> -->
<!-- <app-shopping-cart-feedback #feedback></app-shopping-cart-feedback> -->

53
src/app/components/product-details/product-details.component.scss
View File

@@ -10,7 +10,8 @@
.general-details {
display: grid;
grid-template-columns: min-content auto min-content;
grid-template-columns: min-content auto;
grid-gap: 37px;
}
.product-details {
@@ -29,12 +30,13 @@
}
.product-image img {
width: 169px;
width: 170px;
height: 275px;
}
.product-info {
display: grid;
grid-template-columns: auto;
grid-template-columns: auto;
}
.title span {
@@ -45,4 +47,49 @@
.standart-text {
font-size: 16px;
line-height: 21px;
}
.publication-format-pages {
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.type-stock-info {
display: grid;
grid-template-columns: auto auto;
}
.stock-info {
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-gap: 2px;
}
.type {
display: grid;
grid-template-columns: min-content auto;
grid-gap: 10px;
}
.type span {
font-size: 18px;
font-weight: bold;
line-height: 21px;
}
.icon {
height: 17px;
margin-top: 2px;
}
.stock-label span {
font-size: 18px;
font-weight: bold;
line-height: 21px;
}
.stock-quantity span {
font-size: 18px;
font-weight: bold;
line-height: 21px;
}

24
src/app/components/product-details/product-details.component.ts
View File

@@ -4,6 +4,7 @@ import { CheckoutComponent } from '../checkout/checkout.component';
import { ProductService } from 'src/app/core/services/product.service';
import { ItemDTO, CatImageService } from 'cat-service';
import { Observable } from 'rxjs';
import { monthNames, getFormatedPublicationDate } from 'src/app/core/utils/product.util';
@Component({
selector: 'app-product-details',
@@ -26,7 +27,10 @@ export class ProductDetailsComponent implements OnInit {
ean: string,
eanTag: string,
locale: string,
publicationDate: Date,
publicationDate: string,
format: string,
formatIcon: string,
quantity: string,
productIcon$: Observable<string>,
fullDescription: string
};
@@ -55,15 +59,20 @@ export class ProductDetailsComponent implements OnInit {
let author: string;
let title: string;
let locale: string;
let publicationDate: Date;
let publicationDate: string;
let format: string;
let formatIcon: string;
let quantity: string;
// product object mapping
if (item.pr) {
ean = item.pr.ean;
eanTag = 'EAN ' + ean;
productIcon$ = this.catImageService.getImageUrl(ean, { width: 369, height: 475});
productIcon$ = this.catImageService.getImageUrl(ean, { width: 469, height: 575});
locale = item.pr.locale;
publicationDate = item.pr.publicationDate;
publicationDate = getFormatedPublicationDate(item.pr.publicationDate);
format = item.pr.formatDetail;
formatIcon = item.pr.format;
}
// text object mapping
@@ -77,6 +86,10 @@ export class ProductDetailsComponent implements OnInit {
title = item.sp.find(s => s.key === this.TITLE).value;
}
if (item.av.length > 0) {
quantity = (item.av[0].qty ? item.av[0].qty : 0) + 'x';
}
return {
author: author,
title: title,
@@ -84,6 +97,9 @@ export class ProductDetailsComponent implements OnInit {
eanTag: eanTag,
locale: locale,
publicationDate: publicationDate,
format: format,
formatIcon: formatIcon,
quantity: quantity,
productIcon$: productIcon$,
fullDescription: fullDescription
};

22
src/app/core/store/state/process.state.ts
View File

@@ -17,7 +17,7 @@ export class ProcessStateModel {
})
export class ProcessState {
constructor(private usersService: UserService) {}
constructor(private usersService: UserService) { }
@Selector()
static getProcesses(state: ProcessStateModel) {
@@ -204,7 +204,7 @@ export class ProcessState {
breadcrumbs: [
...updatedBreadcrumbs
]
}
};
} else if (users.length > 0) {
// Users found, add new breadcrumb for search
return {
@@ -214,20 +214,22 @@ export class ProcessState {
...process.breadcrumbs,
{
name: payload,
path:'/customer-search-result'
path: '/customer-search-result'
}
]
}
};
} else {
// Remove last breadcrumb customer search
const updatedBreadcrumbs = process.breadcrumbs.filter((breadcrumb: Breadcrumb) => breadcrumb.path !== '/customer-search-result');
return {
const removedLastCustomersearchBreadcrumbs = process.breadcrumbs
.filter((breadcrumb: Breadcrumb) =>
breadcrumb.path !== '/customer-search-result');
return {
...process,
users: [],
users: [],
breadcrumbs: [
...updatedBreadcrumbs
]
...removedLastCustomersearchBreadcrumbs
]
};
}
}
@@ -245,7 +247,7 @@ export class ProcessState {
}
@Action(actions.SethUserName)
setUserName (ctx: StateContext<ProcessStateModel>, { payload }: actions.SethUserName) {
setUserName(ctx: StateContext<ProcessStateModel>, { payload }: actions.SethUserName) {
const state = ctx.getState();
const newProcessState = state.processes.map(
(process: Process) => {

9
src/app/core/utils/product.util.ts
View File

@@ -6,3 +6,12 @@ export function getProductTypeIcon(type: string): string {
return 'TypeBook';
}
}
export const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
export function getFormatedPublicationDate(publicationDate: Date): string {
return new Date(publicationDate).getDay().toString() + ' ' + monthNames[new Date(publicationDate).getMonth()]
+ ' ' + new Date(publicationDate).getFullYear();
}

11
src/assets/images/Package_Icon_2.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="18px" viewBox="0 0 17 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Package_Icon</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="UC1_08_01_Hugendubel_Instoreapp_Kunden_Artikeldetailseite" transform="translate(-544.000000, -310.000000)" fill="#000000" stroke="#000000">
<path d="M545.62759,326.37241 L559.769923,326.37241 L559.769923,314.74023 L545.62759,314.74023 L545.62759,326.37241 Z M548.471621,311.627381 L546.056444,314.112639 L552.385066,314.112639 L552.385066,311.627381 L548.471621,311.627381 Z M553.012656,311.627381 L553.012656,314.112639 L559.329982,314.112639 L556.860413,311.627381 L553.012656,311.627381 Z M560.391865,314.369742 C560.39563,314.388361 560.397513,314.406979 560.397513,314.426435 L560.397513,326.686205 C560.397513,326.85942 560.256933,327 560.083718,327 L545.313795,327 C545.14058,327 545,326.85942 545,326.686205 L545,314.426435 C545,314.40928 545.002301,314.392963 545.005021,314.376646 C545.005439,314.373089 545.00523,314.369951 545.006067,314.366604 C545.011087,314.339827 545.020292,314.314724 545.031798,314.291084 C545.034727,314.285018 545.037865,314.279369 545.041212,314.273721 C545.053554,314.251964 545.06778,314.231672 545.084725,314.213263 C545.086398,314.211799 545.087026,314.209707 545.088699,314.208033 L548.113895,311.095185 C548.173097,311.034308 548.254266,311 548.33899,311 L556.991161,311 C557.074422,311 557.154544,311.033262 557.213747,311.092465 L560.306303,314.205314 C560.307559,314.20636 560.307977,314.207824 560.308814,314.20887 C560.327223,314.227488 560.341867,314.248827 560.355046,314.27142 C560.358393,314.277277 560.361531,314.283135 560.36446,314.289202 C560.376384,314.31305 560.386217,314.338363 560.391446,314.365349 C560.391865,314.366604 560.391865,314.368278 560.391865,314.369742 Z M550.252744,320.586674 C550.172412,320.586674 550.092081,320.555922 550.030786,320.494628 C549.908197,320.372038 549.908197,320.17351 550.030786,320.050712 L552.476924,317.605201 C552.599514,317.482612 552.798041,317.482612 552.920631,317.605201 L555.367397,320.050712 C555.489986,320.17351 555.489986,320.372038 555.367397,320.494628 C555.306102,320.555922 555.225561,320.586465 555.145439,320.586465 C555.064689,320.586465 554.984776,320.555922 554.923481,320.494628 L553.012887,318.584451 L553.012887,323.285941 C553.012887,323.458946 552.872306,323.599736 552.699091,323.599736 C552.525876,323.599736 552.385296,323.458946 552.385296,323.285941 L552.385296,318.584661 L550.474702,320.494837 C550.413407,320.556131 550.333075,320.586674 550.252744,320.586674 Z" id="Package_Icon"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

11
src/assets/images/Truck_Icon_2.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="27px" height="17px" viewBox="0 0 27 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Truck_Icon</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="UC1_08_01_Hugendubel_Instoreapp_Kunden_Artikeldetailseite" transform="translate(-508.000000, -311.000000)" fill="#000000" stroke="#000000" stroke-width="0.4">
<path d="M527.679992,317.044525 L529.618629,317.044525 C529.802434,317.044519 529.974883,317.133456 530.081461,317.283221 L532.048606,320.048863 C532.171771,320.222098 532.187932,320.449603 532.090493,320.638512 C531.993054,320.827421 531.798318,320.946127 531.585774,320.946174 L527.679992,320.946174 C527.366343,320.946121 527.112092,320.691855 527.112031,320.378179 L527.112031,317.612531 C527.112086,317.298852 527.366339,317.044578 527.679992,317.044525 Z M528.247953,318.180541 L528.247953,319.810167 L530.48469,319.810167 L529.325607,318.180541 L528.247953,318.180541 Z M510.805342,312.000795 L510.805495,312 L524.869122,312 C525.859479,312 526.674464,312.815048 526.674464,313.805427 L526.674464,315.473098 L530.351895,315.475655 C530.534349,315.475799 530.705629,315.56357 530.812307,315.711587 L533.845146,319.919653 C533.896691,319.975692 533.936445,320.04152 533.962046,320.113227 C533.962103,320.113321 533.962159,320.113416 533.962216,320.113511 C533.962408,320.114457 533.962597,320.115404 533.962784,320.116351 C533.966867,320.127508 533.9706,320.13879 533.973975,320.15018 C533.998394,320.228054 534.005747,320.310274 533.995534,320.391245 L533.995534,323.987733 C533.995534,324.79935 533.327179,325.471048 532.51231,325.471048 L532.284368,325.471048 C531.983138,326.53813 530.997533,327.327165 529.838163,327.327165 C528.678791,327.327165 527.69318,326.53813 527.391955,325.471048 L517.459869,325.471048 C517.158806,326.538442 516.17336,327.327165 515.013306,327.327165 C513.852852,327.327165 512.867846,326.537817 512.566922,325.471048 L510.805342,325.471048 C509.814985,325.471048 509,324.655994 509,323.665603 L509,313.806226 C509,312.815843 509.814985,312.000795 510.805342,312.000795 Z M510.805342,313.13678 C510.432988,313.13678 510.135985,313.433747 510.135985,313.806226 L510.135985,323.665603 C510.135985,324.038094 510.432985,324.334972 510.805342,324.334972 L512.512779,324.334972 C512.727252,323.149474 513.770508,322.242221 515.013306,322.242221 C516.25609,322.242221 517.299367,323.149474 517.513837,324.334972 L525.538238,324.334972 L525.538238,313.806226 C525.538238,313.433747 525.241323,313.13678 524.868969,313.13678 L510.805342,313.13678 Z M526.674311,316.609881 L526.674311,316.609759 L526.674311,324.334859 L527.337633,324.334859 C527.5521,323.14936 528.595363,322.242108 529.838163,322.242108 C531.080961,322.242108 532.124218,323.14936 532.338694,324.334859 L532.51231,324.334859 C532.706696,324.334859 532.859461,324.179631 532.859461,323.98762 L532.859461,320.495885 L530.060425,316.612153 L526.674311,316.609881 Z M515.013306,323.378297 L515.013306,323.379802 C514.231574,323.379802 513.608463,324.002049 513.608463,324.787562 L513.608463,324.791823 C513.611301,325.571143 514.231091,326.19109 515.013306,326.19109 C515.786001,326.19109 516.401649,325.583471 516.418064,324.816676 L516.418064,324.786056 C516.418064,324.000543 515.795005,323.378297 515.013306,323.378297 Z M529.838163,323.378297 C529.056428,323.378297 528.433318,324.000543 528.433318,324.786056 C528.433318,325.567962 529.056428,326.19109 529.838163,326.19109 C530.619896,326.19109 531.243009,325.567934 531.243009,324.786056 C531.243009,324.000543 530.619896,323.378297 529.838163,323.378297 Z M518.234856,315.980996 L523.805593,315.980996 C524.010245,315.978407 524.200469,316.086105 524.30355,316.26292 C524.406631,316.439735 524.406631,316.65833 524.30355,316.835145 C524.200469,317.01196 524.010245,317.119658 523.805593,317.117069 L518.234856,317.117069 C518.030203,317.119658 517.83998,317.01196 517.736899,316.835145 C517.633818,316.65833 517.633818,316.439735 517.736899,316.26292 C517.83998,316.086105 518.030203,315.978407 518.234856,315.980996 Z M515.686129,318.529992 L523.805593,318.529992 C524.010245,318.527404 524.200469,318.635101 524.30355,318.811916 C524.406631,318.988731 524.406631,319.207326 524.30355,319.384141 C524.200469,319.560956 524.010245,319.668654 523.805593,319.666065 L515.686129,319.666065 C515.481477,319.668654 515.291253,319.560956 515.188172,319.384141 C515.085092,319.207326 515.085092,318.988731 515.188172,318.811916 C515.291253,318.635101 515.481477,318.527404 515.686129,318.529992 Z" id="Truck_Icon"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB