Skip to content

Commit b8aeaeb

Browse files
BlariBlari
committed
Add UI block pages
1 parent 65379d5 commit b8aeaeb

File tree

53 files changed

+2892
-169
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+2892
-169
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@auth0/angular-jwt": "^3.0.1",
2525
"@danielmoncada/angular-datetime-picker": "^13.1.1",
2626
"@ng-select/ng-select": "^8.1.1",
27+
"@ngbmodule/material-carousel": "^0.7.2",
2728
"angular-calendar": "^0.28.20",
2829
"apexcharts": "^3.35.3",
2930
"date-fns": "^2.14.0",
@@ -33,7 +34,7 @@
3334
"ng-apexcharts": "^1.7.1",
3435
"ngx-echarts": "^4.2.2",
3536
"ngx-smart-popover": "^1.4.0",
36-
"ngx-toastr": "^14.2.1",
37+
"ngx-toastr": "^12.0.1",
3738
"ngx-trend": "^5.0.1",
3839
"rxjs": "~6.5.5",
3940
"tslib": "^2.0.0",

‎src/app/app-routing.module.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,26 @@ const route: Routes = [
3939
}
4040
]
4141
},
42+
{
43+
path: 'e-commerce',
44+
canActivate: [AuthGuard],
45+
loadChildren: () => import('./modules/e-commerce/e-commerce.module').then(m => m.ECommerceModule)
46+
},
47+
{
48+
path: 'core',
49+
canActivate: [AuthGuard],
50+
loadChildren: () => import('./modules/templates/core/core.module').then(m => m.CoreModule)
51+
},
52+
{
53+
path: 'tables',
54+
canActivate: [AuthGuard],
55+
loadChildren: () => import('./modules/templates/tables/tables.module').then(m => m.TablesModule)
56+
},
57+
{
58+
path: 'ui',
59+
canActivate: [AuthGuard],
60+
loadChildren: () => import('./modules/templates/ui-elements/ui-elements.module').then(m => m.UiElementsModule)
61+
},
4262
{
4363
path: 'admin',
4464
loadChildren: () =>

‎src/app/consts/routes.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,51 @@ export enum routes {
99
Users = '/admin/users',
1010
Users_CREATE = '/admin/users/new',
1111
Users_EDIT = '/admin/users/edit',
12+
13+
// --- E-commerce ---//
14+
15+
MANAGEMENT = '/e-commerce/management',
16+
PRODUCT_EDIT = '/e-commerce/edit',
17+
PRODUCT_CREATE = '/e-commerce/create',
18+
PRODUCTS = '/e-commerce/products',
19+
PRODUCT = '/e-commerce/product',
20+
21+
// --- Documentation ---//
22+
23+
LIBS = '/documentation/libs',
24+
STRUCTURE = '/documentation/structure',
25+
OVERVIEW = '/documentation/overview',
26+
LICENCES = '/documentation/licences',
27+
QUICK_START = '/documentation/quick start',
28+
CHARTS = '/documentation/charts',
29+
FORMS = '/documentation/forms',
30+
UI = '/documentation/ui',
31+
MAPS = '/documentation/maps',
32+
TABLES = '/documentation/tables',
33+
34+
// --- Core module ---//
35+
36+
TYPOGRAPHY = '/core/typography',
37+
COLORS = '/core/colors',
38+
GRID = '/core/grid',
39+
40+
// --- Tables module ---//
41+
42+
TABLES_BASIC = '/tables/basic',
43+
TABLES_DYNAMIC = '/tables/dynamic',
44+
45+
// --- Ui Elements module --- //
46+
47+
ICONS = '/ui/icons',
48+
BADGE = '/ui/badge',
49+
CAROUSEL = '/ui/carousel',
50+
CARDS = '/ui/cards',
51+
MODAL = '/ui/modal',
52+
NOTIFICATION = '/ui/notification',
53+
NAVBAR = '/ui/navbar',
54+
TOOLTIPS = '/ui/tooltips',
55+
TABS = '/ui/tabs',
56+
PAGINATION = '/ui/pagination',
57+
PROGRESS = '/ui/progress',
58+
WIDGET = '/ui/widget',
1259
}

‎src/app/modules/e-commerce/components/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './product-card/product-card.component';
2+
export * from './product-edit-form/product-edit-form.component';

‎src/app/modules/e-commerce/components/product-card/product-card.component.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<mat-card class="product-card" [routerLink]="[routes.PRODUCT, product.id]">
2+
<mat-card-content>
3+
<img src="{{product.image}}" alt="{{product.title}}" class="product-img">
4+
<mat-chip-list>
5+
<mat-chip class="product-status" [color]="product.status === 'Sale' ? 'warn' : 'primary'" selected>{{product.status}}</mat-chip>
6+
</mat-chip-list>
7+
8+
<div class="product-title-wrapper">
9+
<p class="product-title">{{product.title}}</p>
10+
<p class="product-subtitle">{{product.subtitle}}</p>
11+
</div>
12+
13+
<div class="product-price-wrapper">
14+
<p class="product-price">{{product.price}}</p>
15+
16+
<div class="product-pop-wrapper">
17+
<p class="product-pop">{{product.rating}}</p>
18+
<mat-icon color="accent" class="pop-icon">star</mat-icon>
19+
</div>
20+
</div>
21+
</mat-card-content>
22+
</mat-card>

‎src/app/modules/e-commerce/components/product-card/product-card.component.scss

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
@import "src/app/styles/font";
2+
@import "src/app/styles/colors";
3+
4+
.product-card {
5+
padding: 0;
6+
overflow: hidden;
7+
width: 100%;
8+
cursor: pointer;
9+
}
10+
11+
.product-img {
12+
width: 100%;
13+
}
14+
15+
.product-status {
16+
outline: none;
17+
border-radius: 32px;
18+
padding: 6px 10px;
19+
position: absolute;
20+
z-index: 1;
21+
top: 12px;
22+
left: 12px;
23+
font-size: $fs-small;
24+
font-weight: $fw-lighter;
25+
color: $white;
26+
margin: 0;
27+
}
28+
29+
.Sale {
30+
background-color: $pink;
31+
}
32+
33+
.New {
34+
background-color: $green;
35+
}
36+
37+
.product-title-wrapper {
38+
padding: 16px;
39+
}
40+
41+
.product-title {
42+
font-size: $fs-medium;
43+
font-weight: $fw-lighter;
44+
color: $dark-grey;
45+
margin-bottom: 8px;
46+
}
47+
48+
.product-title {
49+
font-size: $fs-medium;
50+
font-weight: $fw-lighter;
51+
color: $dark-grey;
52+
margin-bottom: 8px;
53+
}
54+
55+
.product-subtitle {
56+
font-size: $fs-small;
57+
font-weight: $fw-lighter;
58+
color: $grey;
59+
margin: 0;
60+
}
61+
62+
.product-price-wrapper {
63+
padding: 16px;
64+
display: flex;
65+
justify-content: space-between;
66+
align-items: center;
67+
}
68+
69+
.product-price {
70+
font-size: $fs-normal;
71+
font-weight: $fw-bold;
72+
color: $dark-grey;
73+
margin: 0;
74+
}
75+
76+
.product-pop-wrapper {
77+
display: flex;
78+
justify-content: space-between;
79+
align-items: center;
80+
}
81+
82+
.product-pop {
83+
font-size: $fs-normal;
84+
font-weight: $fw-lighter;
85+
color: $yellow;
86+
margin: 0;
87+
}
88+
89+
.pop-icon {
90+
padding: 0;
91+
font-size: 16px;
92+
width: 19px;
93+
height: 19px;
94+
margin-left: 4px;
95+
}

‎src/app/modules/e-commerce/components/product-card/product-card.component.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {Component, Input} from '@angular/core';
2+
import {ProductCard} from '../../models';
3+
import {routes} from '../../../../consts';
4+
5+
@Component({
6+
selector: 'app-product-card',
7+
templateUrl: './product-card.component.html',
8+
styleUrls: ['./product-card.component.scss']
9+
})
10+
export class ProductCardComponent {
11+
@Input() product: ProductCard;
12+
public routes: typeof routes = routes;
13+
}

‎src/app/modules/e-commerce/components/product-edit-form/product-edit-form.component.html

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<mat-card class="card">
2+
<mat-card-title>
3+
<p>New product</p>
4+
</mat-card-title>
5+
6+
<mat-card-content>
7+
8+
<div class="input-wrapper">
9+
<p class="input-title">Image</p>
10+
<mat-form-field class="input-field" appearance="standard">
11+
<mat-select [(value)]="selected" [ngClass]="selected">
12+
<mat-option>None</mat-option>
13+
<mat-option value="option">Option 1</mat-option>
14+
<mat-option value="option2">Option 2</mat-option>
15+
<mat-option value="option3">Option 3</mat-option>
16+
</mat-select>
17+
</mat-form-field>
18+
</div>
19+
20+
<div class="input-wrapper">
21+
<p class="input-title">Title</p>
22+
<mat-form-field appearance="outline" class="input-field">
23+
<input matInput [formControl]="title" class="input-text">
24+
</mat-form-field>
25+
</div>
26+
27+
<div class="input-wrapper">
28+
<p class="input-title">Subtitle</p>
29+
<mat-form-field appearance="outline" class="input-field">
30+
<input matInput [formControl]="subtitle" class="input-text">
31+
</mat-form-field>
32+
</div>
33+
34+
<div class="input-wrapper">
35+
<p class="input-title">Price</p>
36+
<mat-form-field appearance="outline" class="input-field">
37+
<input matInput [formControl]="price" class="input-text" type="number">
38+
</mat-form-field>
39+
</div>
40+
41+
<div class="input-wrapper">
42+
<p class="input-title">Discount</p>
43+
<mat-form-field appearance="outline" class="input-field">
44+
<input matInput [formControl]="discount" class="input-text" type="number">
45+
</mat-form-field>
46+
</div>
47+
48+
<div class="input-wrapper">
49+
<p class="input-title">Description 1</p>
50+
<mat-form-field appearance="outline" class="input-field">
51+
<input matInput [formControl]="description1" class="input-text">
52+
</mat-form-field>
53+
</div>
54+
55+
<div class="input-wrapper">
56+
<p class="input-title">Description 2</p>
57+
<mat-form-field appearance="outline" class="input-field">
58+
<input matInput [formControl]="description2" class="input-text">
59+
</mat-form-field>
60+
</div>
61+
62+
<div class="input-wrapper">
63+
<p class="input-title">Code</p>
64+
<mat-form-field appearance="outline" class="input-field">
65+
<input matInput [formControl]="code" class="input-text" type="number">
66+
</mat-form-field>
67+
</div>
68+
69+
<div class="input-wrapper">
70+
<p class="input-title">Hashtag</p>
71+
<mat-form-field appearance="outline" class="input-field">
72+
<input matInput [formControl]="hashtag" class="input-text">
73+
</mat-form-field>
74+
</div>
75+
76+
<div class="input-wrapper">
77+
<p class="input-title">Technology</p>
78+
<mat-form-field appearance="outline" class="input-field">
79+
<input matInput [formControl]="technology" class="input-text">
80+
</mat-form-field>
81+
</div>
82+
83+
<div class="input-wrapper">
84+
<p class="input-title">Rating</p>
85+
<mat-form-field appearance="outline" class="input-field">
86+
<input matInput [formControl]="rating" class="input-text" type="number">
87+
</mat-form-field>
88+
</div>
89+
90+
<button mat-flat-button color="success" (click)="save()">save</button>
91+
<button mat-flat-button color="defailt" routerLink="{{router.MANAGEMENT}}">back</button>
92+
93+
</mat-card-content>
94+
</mat-card>

0 commit comments

Comments
 (0)