14 | {{post.title}}
11 |{{post.date | date }}
12 | 13 | 14 | 15 |
16 |
11 | {{admin.payload.val().email}}
12 |
2 |
9 |
10 |
11 |
12 |
17 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/add-customer/add-customer.component.scss:
--------------------------------------------------------------------------------
1 | .customer-form {
2 | box-sizing: border-box;
3 | padding: 0 30px 30px 30px;
4 | }
5 |
6 | button {
7 | margin-top: 30px;
8 | }
9 |
10 | .mat-input-container,
11 | .mat-raised-button {
12 | display: block;
13 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/add-customer/add-customer.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AddCustomerComponent } from './add-customer.component';
4 |
5 | describe('AddCustomerComponent', () => {
6 | let component: AddCustomerComponent;
7 | let fixture: ComponentFixture3 | Add a 4 | Edit 5 | Customer 6 |
7 | 8 |
2 |
9 | This product has a change awaiting moderation
10 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
30 |
31 |
38 |
39 |
46 |
47 |
54 |
55 |
64 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/add-product-category/add-product-category.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../variables.scss';
2 |
3 | .category-form {
4 | box-sizing: border-box;
5 | padding: 0 30px 30px 30px;
6 | }
7 |
8 | .highlight.small {
9 | cursor: pointer;
10 | margin-bottom: 30px;
11 | opacity: .7;
12 |
13 | .action {
14 | color: $color-white;
15 | font-weight: 800;
16 | margin-left: auto;
17 | }
18 | }
19 |
20 | button {
21 | margin-top: 30px;
22 | }
23 |
24 | .mat-input-container {
25 | display: block;
26 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/add-product-category/add-product-category.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AddProductCategoryComponent } from './add-product-category.component';
4 |
5 | describe('AddProductCategoryComponent', () => {
6 | let component: AddProductCategoryComponent;
7 | let fixture: ComponentFixture3 | Add a 4 | Edit 5 | Category 6 |
7 | 8 |
11 | View Approvals
12 |
13 |
2 |
6 |
7 |
8 |
26 |
27 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-admins/admin-admins.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../variables.scss';
2 |
3 | .button-container {
4 | h2 {
5 | display: inline-block;
6 | }
7 |
8 | button {
9 | float: right;
10 | margin: 18px 30px 30px 30px;
11 | }
12 | }
13 |
14 | .admin {
15 | .content {
16 | display: inline-block;
17 | margin-top: 13px;
18 | vertical-align: top;
19 | width: calc(100% - 210px);
20 | }
21 |
22 | .active {
23 | display: inline-block;
24 | text-align: center;
25 | width: 200px;
26 |
27 | span {
28 | font-size: .8em;
29 |
30 | &.active-user {
31 | color: $color-green;
32 | }
33 |
34 | &.inactive-user {
35 | color: $color-grey;
36 | }
37 | }
38 |
39 | button {
40 | margin: 10px 0 0 0;
41 | }
42 | }
43 | }
44 |
45 | .admin-photo {
46 | border-radius: 50%;
47 | height: 45px;
48 | margin-right: 15px;
49 | vertical-align: middle;
50 | width: 45px;
51 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-admins/admin-admins.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminAdminsComponent } from './admin-admins.component';
4 |
5 | describe('AdminAdminsComponent', () => {
6 | let component: AdminAdminsComponent;
7 | let fixture: ComponentFixture
9 | .photoURL }})
10 |
11 | {{admin.payload.val().email}}
12 |
13 |
11 | {{admin.payload.val().email}}
12 |
14 |
25 |
15 | {{ admin.payload.val().role }}
16 |
17 | (activeinactive)
18 |
19 |
20 |
23 |
24 |
2 |
6 |
10 |
18 |
28 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-customers/admin-customers.component.scss:
--------------------------------------------------------------------------------
1 | .button-container{
2 | h2 {
3 | display: inline-block;
4 | }
5 |
6 | button {
7 | float: right;
8 | margin: 18px 30px 30px 30px;
9 | }
10 | }
11 |
12 | .customer {
13 | cursor: pointer;
14 |
15 | .content {
16 | display: inline-block;
17 | margin-top: 13px;
18 | vertical-align: top;
19 | width: calc(100% - 220px);
20 | }
21 |
22 | .active {
23 | display: inline-block;
24 | text-align: center;
25 | width: 210px;
26 |
27 | span {
28 | font-size: .9em;
29 | }
30 |
31 | button {
32 | margin-top: 10px;
33 | }
34 | }
35 | }
36 |
37 | .customer-photo {
38 | border-radius: 50%;
39 | height: 45px;
40 | margin-right: 15px;
41 | vertical-align: middle;
42 | width: 45px;
43 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-customers/admin-customers.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminCustomersComponent } from './admin-customers.component';
4 |
5 | describe('AdminCustomersComponent', () => {
6 | let component: AdminCustomersComponent;
7 | let fixture: ComponentFixture7 | No customers yet 8 |
9 |
19 | {{customer.payload.val().orders | objectCount}} orders
20 |
23 |
26 |
27 |
2 | Primary Nav
5 |
25 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-menus/admin-menus.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../variables.scss';
2 |
3 | .mat-card {
4 | cursor: move !important;
5 | }
6 |
7 | .mat-icon {
8 | color: $color-grey;
9 | display: block;
10 | margin: 0 auto;
11 | pointer-events: none;
12 | }
13 |
14 | .button-add-menu {
15 | margin-top: 20px;
16 | }
17 |
18 | mat-toolbar {
19 | margin-bottom: 5px;
20 | }
21 |
22 | .actions {
23 | float: right;
24 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-menus/admin-menus.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminMenusComponent } from './admin-menus.component';
4 |
5 | describe('AdminMenusComponent', () => {
6 | let component: AdminMenusComponent;
7 | let fixture: ComponentFixtureMenus
3 | 4 |6 | No menu items yet 7 |
8 | 22 | 23 | 24 |
2 |
6 |
10 |
31 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-orders/admin-orders.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../variables.scss';
2 |
3 | .button-container {
4 | h2 {
5 | display: inline-block;
6 | }
7 |
8 | button {
9 | float: right;
10 | margin: 18px 30px 30px 30px;
11 | }
12 | }
13 |
14 | .order {
15 | cursor: pointer;
16 |
17 | .content {
18 | display: inline-block;
19 | width: calc(100% - 220px);
20 |
21 | .date {
22 | color: $color-grey;
23 | font-size: .8em;
24 | }
25 | }
26 |
27 | .action {
28 | display: inline-block;
29 | margin-top: 15px;
30 | vertical-align: top;
31 | width: 210px;
32 | }
33 | }
34 |
35 | .view {
36 | text-align: center;
37 |
38 | button {
39 | margin-top: 20px;
40 | }
41 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-orders/admin-orders.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminOrdersComponent } from './admin-orders.component';
4 |
5 | describe('AdminOrdersComponent', () => {
6 | let component: AdminOrdersComponent;
7 | let fixture: ComponentFixture7 | No orders yet 8 |
9 |
11 |
14 | Order #{{order.key}}
12 |{{order.payload.val().date | date }}
13 |
15 |
30 |
16 |
29 |
17 |
18 | {{ (users | async | getUser: order.payload.val().uid)?.email }}
19 |
20 | Guest Customer
21 |
22 |
25 |
28 |
2 |
6 |
10 |
28 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-pages/admin-pages.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../variables.scss';
2 |
3 | .button-container {
4 | h2 {
5 | display: inline-block;
6 | }
7 |
8 | button {
9 | float: right;
10 | margin: 18px 30px 30px 30px;
11 | }
12 | }
13 |
14 | .page {
15 | cursor: pointer;
16 |
17 | .content {
18 | display: inline-block;
19 | width: calc(100% - 410px);
20 |
21 | h3 {
22 | margin: 0 0 10px 0;
23 | }
24 |
25 | .date {
26 | color: $color-grey;
27 | font-size: .8em;
28 | }
29 | }
30 |
31 | .publish {
32 | float: right;
33 | text-align: right;
34 | vertical-align: top;
35 | width: 400px;
36 | }
37 | }
38 |
39 | .mat-slide-toggle {
40 | margin: 0 20px 0 45px;
41 | width: 130px;
42 | }
43 |
44 | .edit {
45 | display: inline-block;
46 | text-align: center;
47 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-pages/admin-pages.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminPagesComponent } from './admin-pages.component';
4 |
5 | describe('AdminPagesComponent', () => {
6 | let component: AdminPagesComponent;
7 | let fixture: ComponentFixture7 | No pages yet 8 |
9 |
11 |
13 | {{page.payload.val().title}}
12 |
14 |
15 | Publish
16 | Un-Publish
17 |
18 |
27 |
19 |
22 |
25 |
26 |
2 |
6 |
10 |
29 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-posts/admin-posts.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../variables.scss';
2 |
3 | .button-container {
4 | h2 {
5 | display: inline-block;
6 | }
7 |
8 | button {
9 | float: right;
10 | margin: 18px 30px 30px 30px;
11 | }
12 | }
13 |
14 | .post {
15 | cursor: pointer;
16 |
17 | .content {
18 | display: inline-block;
19 | width: calc(100% - 410px);
20 |
21 | h3 {
22 | margin: 0 0 10px 0;
23 | }
24 |
25 | .date {
26 | color: $color-grey;
27 | font-size: .8em;
28 | }
29 | }
30 |
31 | .publish {
32 | float: right;
33 | margin-top: 10px;
34 | text-align: right;
35 | vertical-align: top;
36 | width: 400px;
37 | }
38 | }
39 |
40 | .mat-slide-toggle {
41 | margin: 0 20px 0 45px;
42 | width: 130px;
43 | }
44 |
45 | .edit {
46 | display: inline-block;
47 | text-align: center;
48 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-posts/admin-posts.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminPostsComponent } from './admin-posts.component';
4 |
5 | describe('AdminPostsComponent', () => {
6 | let component: AdminPostsComponent;
7 | let fixture: ComponentFixture7 | No posts yet 8 |
9 |
11 |
14 | {{post.payload.val().title}}
12 |{{post.payload.val().date | date }}
13 |
15 |
16 | Publish
17 | Un-Publish
18 |
19 |
28 |
20 |
23 |
26 |
27 |
2 |
6 |
10 |
28 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-product-categories/admin-product-categories.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../variables.scss';
2 |
3 | .button-container {
4 | h2 {
5 | display: inline-block;
6 | }
7 |
8 | button {
9 | float: right;
10 | margin: 18px 30px 30px 30px;
11 | }
12 | }
13 |
14 | .category {
15 | cursor: pointer;
16 |
17 | .content {
18 | display: inline-block;
19 | width: calc(100% - 410px);
20 |
21 | h3 {
22 | margin: 0 0 10px 0;
23 | }
24 | }
25 |
26 | .publish {
27 | float: right;
28 | text-align: right;
29 | vertical-align: top;
30 | width: 400px;
31 | }
32 | }
33 |
34 | .edit {
35 | display: inline-block;
36 | text-align: center;
37 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-product-categories/admin-product-categories.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminProductCategoriesComponent } from './admin-product-categories.component';
4 |
5 | describe('AdminProductCategoriesComponent', () => {
6 | let component: AdminProductCategoriesComponent;
7 | let fixture: ComponentFixture7 | No categories yet 8 |
9 |
11 |
17 | 12 | 13 | {{category.payload.val().name}} 14 | 15 |
16 |
18 |
27 |
19 |
22 |
25 |
26 |
2 |
6 |
10 |
29 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-products/admin-products.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../variables.scss';
2 |
3 | .button-container {
4 | h2 {
5 | display: inline-block;
6 | }
7 |
8 | button {
9 | float: right;
10 | margin: 18px 30px 30px 30px;
11 | }
12 | }
13 |
14 | .product {
15 | cursor: pointer;
16 |
17 | .content {
18 | display: inline-block;
19 | width: calc(100% - 410px);
20 |
21 | h3 {
22 | margin: 0 0 10px 0;
23 | }
24 |
25 | .price {
26 | color: $color-grey;
27 | font-size: .8em;
28 | }
29 | }
30 |
31 | .publish {
32 | float: right;
33 | margin-top: 10px;
34 | text-align: right;
35 | vertical-align: top;
36 | width: 400px;
37 | }
38 | }
39 |
40 | .mat-slide-toggle {
41 | margin: 0 20px 0 45px;
42 | width: 130px;
43 | }
44 |
45 | .edit {
46 | display: inline-block;
47 | text-align: center;
48 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-products/admin-products.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminProductsComponent } from './admin-products.component';
4 |
5 | describe('AdminProductsComponent', () => {
6 | let component: AdminProductsComponent;
7 | let fixture: ComponentFixture7 | No products yet 8 |
9 |
11 |
14 | {{product.payload.val().title}}
12 |{{product.payload.val().price | currency:'USD':true }}
13 |
15 |
16 | Publish
17 | Un-Publish
18 |
19 |
28 |
20 |
23 |
26 |
27 |
2 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-theme/admin-theme.component.scss:
--------------------------------------------------------------------------------
1 | button {
2 | display: block;
3 | }
--------------------------------------------------------------------------------
/src/app/admin/admin-components/admin-theme/admin-theme.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AdminThemeComponent } from './admin-theme.component';
4 |
5 | describe('AdminThemeComponent', () => {
6 | let component: AdminThemeComponent;
7 | let fixture: ComponentFixtureTheme
3 | 4 |Are you sure?
2 | 3 | 4 | -------------------------------------------------------------------------------- /src/app/admin/admin-components/approve-dialog/approve-dialog.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/app/admin/admin-components/approve-dialog/approve-dialog.component.scss -------------------------------------------------------------------------------- /src/app/admin/admin-components/approve-dialog/approve-dialog.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ApproveDialogComponent } from './approve-dialog.component'; 4 | 5 | describe('ApproveDialogComponent', () => { 6 | let component: ApproveDialogComponent; 7 | let fixture: ComponentFixtureAre you sure?
2 | 3 | 4 | -------------------------------------------------------------------------------- /src/app/admin/admin-components/delete-dialog/delete-dialog.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/app/admin/admin-components/delete-dialog/delete-dialog.component.scss -------------------------------------------------------------------------------- /src/app/admin/admin-components/delete-dialog/delete-dialog.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DeleteDialogComponent } from './delete-dialog.component'; 4 | 5 | describe('DeleteDialogComponent', () => { 6 | let component: DeleteDialogComponent; 7 | let fixture: ComponentFixture{{ (theme | async)?.siteName }}
4 | 5 |-
6 |
12 |
-
13 |
search 14 |
15 | -
16 |
17 |
18 | -
19 |
20 |
21 | 22 | 23 | 24 |
25 | - 26 | 27 | 28 |
33 |
34 | {{item.label}}
35 |
36 |
37 |
2 | shopping_cart
3 | {{ cartItems }}
4 |
5 |
--------------------------------------------------------------------------------
/src/app/storefront-components/cart-icon/cart-icon.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../variables.scss';
2 |
3 | .cart-icon {
4 | @extend %transition;
5 | cursor: pointer;
6 | transform: translateY(8px);
7 | transition-property: color;
8 |
9 | @include tablet {
10 | transform: translateY(5px);
11 | }
12 |
13 | &:hover {
14 | color: $color-main;
15 | }
16 | }
17 |
18 | .icon-container {
19 | display: inline-block;
20 | position: relative;
21 | }
22 |
23 | .cart-counter {
24 | bottom: 2px;
25 | color: $color-white;
26 | font-size: 8px;
27 | pointer-events: none;
28 | position: absolute;
29 | right: 9px;
30 |
31 | @include tablet {
32 | bottom: 5px;
33 | }
34 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/cart-icon/cart-icon.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CartIconComponent } from './cart-icon.component';
4 |
5 | describe('CartIconComponent', () => {
6 | let component: CartIconComponent;
7 | let fixture: ComponentFixture
2 |
4 |
9 |
11 |
29 |
30 |
34 |
35 |
--------------------------------------------------------------------------------
/src/app/storefront-components/cart/cart.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../variables.scss';
2 |
3 | h3,
4 | .no-items {
5 | text-align: center;
6 | }
7 |
8 | .cart-header {
9 | display: none;
10 | margin-bottom: 10px;
11 |
12 | @include tablet {
13 | display: block;
14 | }
15 |
16 | .quantity {
17 | @include tablet {
18 | transform: none;
19 | }
20 | }
21 | }
22 |
23 | .product {
24 | min-height: 30px;
25 | padding: 24px 16px;
26 | }
27 |
28 | .item {
29 | display: block;
30 | width: 100%;
31 |
32 | @include tablet {
33 | float: left;
34 | width: 35%;
35 | }
36 |
37 | img {
38 | display: block;
39 | margin: 0 auto;
40 | max-width: 70%;
41 |
42 | @include tablet {
43 | display: inline-block;
44 | height: 50px;
45 | margin-top: -8px;
46 | object-fit: cover;
47 | vertical-align: middle;
48 | width: 50px;
49 | }
50 | }
51 | }
52 |
53 | .price,
54 | .quantity,
55 | .total {
56 | display: inline-block;
57 | width: 45%;
58 |
59 | @include tablet {
60 | float: left;
61 | width: 15%;
62 | }
63 | }
64 |
65 | .price {
66 | @include tablet {
67 | width: 20%;
68 | }
69 | }
70 |
71 | .total {
72 | display: none;
73 |
74 | @include tablet {
75 | display: inline-block;
76 | }
77 | }
78 |
79 | .quantity {
80 | position: relative;
81 | text-align: right;
82 |
83 | @include tablet {
84 | text-align: left;
85 | transform: translateY(-22px);
86 | }
87 |
88 | .quantity-label {
89 | color: $color-grey;
90 | display: inline-block;
91 | font-size: .8em;
92 | position: absolute;
93 | right: 40px;
94 | top: 0px;
95 |
96 | @include tablet {
97 | display: none;
98 | }
99 | }
100 |
101 | .mat-input-container {
102 | width: 35px;
103 | }
104 | }
105 |
106 | .remove {
107 | display: block;
108 | text-align: center;
109 | width: 100%;
110 |
111 | @include tablet {
112 | display: inline-block;
113 | text-align: left;
114 | width: 5%;
115 | }
116 | }
117 |
118 | .checkout-cta {
119 | box-sizing: border-box;
120 | float: right;
121 | margin: 20px 0 30px 0;
122 | width: 100%;
123 |
124 | @include tablet {
125 | width: 330px;
126 | }
127 |
128 | button {
129 | display: block;
130 | float: right;
131 | }
132 | }
133 |
134 | .subtotal-label,
135 | .subtotal {
136 | display: inline-block;
137 | width: 48%;
138 | }
139 |
140 | .subtotal {
141 | text-align: right;
142 | }
143 |
144 | .hide {
145 | display: none;
146 | }
147 |
148 | .no-padding {
149 | padding: 20px 0 0 0;
150 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/cart/cart.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CartComponent } from './cart.component';
4 |
5 | describe('CartComponent', () => {
6 | let component: CartComponent;
7 | let fixture: ComponentFixtureCart
3 |Item
5 | Price
6 | Qty
7 | Total
8 | No items in the cart. Keep shopping!
10 |
12 | ![{{item.title}}]()
13 | 
14 | {{item.title}}
15 |
16 |
14 | {{item.title}}
15 | {{item.price | currency:'USD':true}}
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | {{item.total | currency:'USD':true}}
25 |
26 |
27 |
28 | Subtotal
31 |{{cartTotal | currency:'USD':true}}
32 | 33 |Billing info
3 |Order Confirmation
3 |Thank you for submitting your order!
4 | 5 |Payment Info
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | /
18 |
19 |
20 |
21 |
22 |
23 |
24 | {{ newCreditCard.error }}
25 | Review Order
3 | 4 |Shipping Info
5 | {{ order.shipping.name }}6 | {{ order.shipping.email }}
7 | {{ order.shipping.company }}
8 | {{ order.shipping.address }}
9 | {{ order.shipping.city }}, {{ order.shipping.state }}, {{ order.shipping.zip }}
10 | 11 |
Billing Info
12 | {{ order.billing.name }}13 | {{ order.billing.email }}
14 | {{ order.billing.company }}
15 | {{ order.billing.address }}
16 | {{ order.billing.city }}, {{ order.billing.state }}, {{ order.billing.zip }}
17 | 18 |
Payment Info
19 |
20 |
21 | {{ newCharge.source.monbrand }} …{{ newCharge.source.last4 }}
22 | (exp. {{ newCharge.source.exp_th }}/{{ newCharge.source.exp_year }})
23 |
24 |
27 |
28 | Subtotal: {{ order.total | currency:'USD':true }}
33 | 34 | 35 | 36 |{{ newCharge.error }}
37 | Shipping Info
3 |
2 |
39 |
--------------------------------------------------------------------------------
/src/app/storefront-components/login/login.component.scss:
--------------------------------------------------------------------------------
1 | .login-frame {
2 | align-items: center;
3 | display: flex;
4 | flex-direction: column;
5 | height: 100vh;
6 | justify-content: center;
7 | margin-top: -10vh;
8 | }
9 |
10 | .block {
11 | display: block;
12 | }
13 |
14 | .sign-up-trigger {
15 | margin-top: 20px;
16 | text-align: center;
17 |
18 | a {
19 | cursor: pointer;
20 | text-decoration: underline;
21 | }
22 | }
23 |
24 | button {
25 | margin-bottom: 20px;
26 | max-width: 100%;
27 | width: 100%;
28 |
29 | &.logout {
30 | max-width: 200px;
31 | }
32 | }
33 |
34 | button img {
35 | margin-right: 10px;
36 | vertical-align: middle;
37 | width: 20px;
38 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/login/login.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { LoginComponent } from './login.component';
4 |
5 | describe('LoginComponent', () => {
6 | let component: LoginComponent;
7 | let fixture: ComponentFixture
3 |
8 |
10 | or
9 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
20 |
21 |
22 |
31 |
23 | Don't have an account? Sign up
24 |
25 |
26 |
29 |
30 |
32 | Already have an account? Log in
33 |
34 |
35 | You must be an approved admin to access the admin panel
36 |
37 |
38 |
2 |
32 |
37 |
38 |
39 |
46 |
47 |
48 |
49 |
52 |
--------------------------------------------------------------------------------
/src/app/storefront-components/order/order.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../variables.scss';
2 |
3 | .order-container {
4 | margin: 0;
5 | text-align: left;
6 | }
7 |
8 | .order-date {
9 | text-align: left;
10 | }
11 |
12 | .order-left {
13 | display: inline-block;
14 | text-align: left;
15 | vertical-align: top;
16 | width: 100%;
17 |
18 | @include tablet {
19 | width: 49%;
20 | }
21 | }
22 |
23 | .order-right {
24 | display: inline-block;
25 | text-align: right;
26 | vertical-align: top;
27 | width: 100%;
28 |
29 | @include tablet {
30 | width: 49%;
31 | }
32 | }
33 |
34 | .user-photo {
35 | border-radius: 50%;
36 | margin-right: 10px;
37 | vertical-align: middle;
38 | width: 40px;
39 | }
40 |
41 | .product {
42 | height: 27px;
43 | padding: 24px 16px;
44 | }
45 |
46 | .item {
47 | display: inline-block;
48 | width: 30%;
49 |
50 | @include tablet {
51 | float: left;
52 | width: 50%;
53 | }
54 | }
55 |
56 | .price,
57 | .quantity,
58 | .total {
59 | display: inline-block;
60 | width: 20%;
61 |
62 | @include tablet {
63 | float: left;
64 | width: 15%;
65 | }
66 | }
67 |
68 | .quantity {
69 | span {
70 | @include tablet {
71 | margin-left: 13px;
72 | }
73 | }
74 | }
75 |
76 | .order-summary {
77 | box-sizing: border-box;
78 | margin: 20px 0;
79 | width: 100%;
80 |
81 | @include tablet {
82 | float: right;
83 | width: 330px;
84 | }
85 | }
86 |
87 | .subtotal-label,
88 | .subtotal {
89 | display: inline-block;
90 | width: 48%;
91 | }
92 |
93 | .subtotal {
94 | text-align: right;
95 | }
96 |
97 | .mat-raised-button {
98 | margin-top: 20px;
99 | }
100 |
101 | .order-info {
102 | margin-top: 30px;
103 | text-align: left;
104 |
105 | @include tablet {
106 | display: flex;
107 | flex-direction: row;
108 | }
109 |
110 | .mat-card {
111 | box-sizing: border-box;
112 | display: inline-block;
113 | width: 100%;
114 | }
115 |
116 | .mat-card:last-of-type {
117 |
118 | @include tablet {
119 | margin-left: 30px;
120 | }
121 | }
122 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/order/order.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { OrderComponent } from './order.component';
4 |
5 | describe('OrderComponent', () => {
6 | let component: OrderComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ OrderComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(OrderComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/order/order.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Title, Meta } from '@angular/platform-browser';
3 | import { ActivatedRoute, Params, Router } from '@angular/router';
4 | import { AngularFireDatabase } from '@angular/fire/database';
5 | import { Observable } from 'rxjs';
6 |
7 | @Component({
8 | selector: 'order',
9 | templateUrl: './order.component.html',
10 | styleUrls: ['./order.component.scss']
11 | })
12 | export class OrderComponent implements OnInit {
13 | orderContent: any;
14 | order: any;
15 | admin: boolean;
16 | customers: Observable;
17 |
18 | constructor(
19 | public db: AngularFireDatabase,
20 | public route: ActivatedRoute,
21 | public router: Router,
22 | private title: Title,
23 | private meta: Meta
24 | ) {
25 | this.admin = false;
26 | this.customers = db.list('/users').valueChanges();
27 | }
28 |
29 | ngOnInit() {
30 | if (this.router.url.includes('admin')) {
31 | this.admin = true;
32 | }
33 |
34 | this.route.params.subscribe((params: Params) => {
35 | this.title.setTitle('Order #' + params.key);
36 | this.meta.updateTag({ content: 'View the order dtails' }, "name='description'");
37 |
38 | this.orderContent = this.db.object('/orders/' + params.key);
39 | this.orderContent.valueChanges().subscribe((o) => {
40 | if (o) {
41 | this.order = o;
42 | this.order.key = params.key;
43 | } else {
44 | this.order = {
45 | title: 'Order Not Found',
46 | body: ''
47 | }
48 | }
49 | });
50 | });
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/app/storefront-components/orders/orders.component.html:
--------------------------------------------------------------------------------
1 | ;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ OrdersComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(OrdersComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/orders/orders.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Params, Router } from '@angular/router';
3 | import { Title, Meta } from '@angular/platform-browser';
4 | import { Observable } from 'rxjs';
5 | import { AngularFireDatabase } from '@angular/fire/database';
6 | import { AngularFireAuth } from '@angular/fire/auth';
7 | import * as firebase from 'firebase/app';
8 | import { GlobalService } from '../../services/global.service';
9 |
10 | @Component({
11 | selector: 'orders',
12 | templateUrl: './orders.component.html',
13 | styleUrls: ['./orders.component.scss']
14 | })
15 | export class OrdersComponent implements OnInit {
16 | user: Observable;
17 | userObject: any;
18 | userOrders: any;
19 | orderDates: any;
20 |
21 | constructor(
22 | public db: AngularFireDatabase,
23 | public globalService: GlobalService,
24 | public router: Router,
25 | public route: ActivatedRoute,
26 | public afAuth: AngularFireAuth,
27 | private title: Title,
28 | private meta: Meta
29 | ) {
30 | let userOrders;
31 | this.user = afAuth.authState;
32 | this.user.subscribe(currentUser => {
33 | if (currentUser && currentUser.uid) {
34 | this.userObject = currentUser;
35 | this.db.object('/users/' + currentUser.uid).valueChanges().subscribe((theuser:any) => {
36 | if (theuser && theuser.orders) {
37 | this.userOrders = Object.keys(theuser.orders);
38 | this.orderDates = Object.keys(theuser.orders).map(it => theuser.orders[it])
39 | }
40 | });
41 | } else {
42 | router.navigateByUrl('products');
43 | }
44 | });
45 | }
46 |
47 | ngOnInit() {
48 | this.title.setTitle('Orders');
49 | this.meta.updateTag({ content: 'View all of your past orders' }, "name='description'");
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/storefront-components/page/page.component.html:
--------------------------------------------------------------------------------
1 | ;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ PageComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(PageComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/page/page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Params, Router } from '@angular/router';
3 | import { Title, Meta } from '@angular/platform-browser';
4 | import { AngularFireDatabase } from '@angular/fire/database';
5 |
6 | @Component({
7 | selector: 'page',
8 | templateUrl: './page.component.html',
9 | styleUrls: ['./page.component.scss']
10 | })
11 | export class PageComponent implements OnInit {
12 | pageContent: any;
13 | page: any;
14 |
15 | constructor(
16 | public db: AngularFireDatabase,
17 | public route: ActivatedRoute,
18 | private title: Title,
19 | private meta: Meta
20 | ) {}
21 |
22 | ngOnInit() {
23 | this.route.params.subscribe((params: Params) => {
24 | this.pageContent = this.db.list('/pages', ref => ref.orderByChild('url').equalTo(params.url));
25 | this.pageContent.valueChanges().subscribe(p => {
26 | if (p[0].published) {
27 | this.page = p[0];
28 | this.title.setTitle(this.page.title);
29 | this.meta.updateTag({ content: 'View ' + this.page.title }, "name='description'");
30 | } else {
31 | this.page = {
32 | title: 'Page Not Found',
33 | body: ''
34 | }
35 | }
36 | });
37 | });
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/app/storefront-components/pages/pages.component.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/src/app/storefront-components/pages/pages.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/app/storefront-components/pages/pages.component.scss
--------------------------------------------------------------------------------
/src/app/storefront-components/pages/pages.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PagesComponent } from './pages.component';
4 |
5 | describe('PagesComponent', () => {
6 | let component: PagesComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ PagesComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(PagesComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/pages/pages.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { AngularFireDatabase } from '@angular/fire/database';
3 | import { Observable } from 'rxjs';
4 |
5 | @Component({
6 | selector: 'pages',
7 | templateUrl: './pages.component.html',
8 | styleUrls: ['./pages.component.scss']
9 | })
10 | export class PagesComponent implements OnInit {
11 | pages: Observable;
12 |
13 | constructor(db: AngularFireDatabase) {
14 | this.pages = db.list('/pages', ref => ref.orderByChild('title')).valueChanges();
15 | }
16 |
17 | ngOnInit() {
18 | }
19 |
20 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/post/post.component.html:
--------------------------------------------------------------------------------
1 | ;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ PostComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(PostComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/post/post.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Title, Meta } from '@angular/platform-browser';
3 | import { ActivatedRoute, Params, Router } from '@angular/router';
4 | import { AngularFireDatabase } from '@angular/fire/database';
5 |
6 | @Component({
7 | selector: 'post',
8 | templateUrl: './post.component.html',
9 | styleUrls: ['./post.component.scss']
10 | })
11 | export class PostComponent implements OnInit {
12 | postContent: any;
13 | post: any;
14 |
15 | constructor(
16 | public db: AngularFireDatabase,
17 | public route: ActivatedRoute,
18 | private title: Title,
19 | private meta: Meta
20 | ) {}
21 |
22 | ngOnInit() {
23 | this.route.params.subscribe((params: Params) => {
24 | this.postContent = this.db.list('/posts', ref => ref.orderByChild('url').equalTo(params.url));
25 | this.postContent.valueChanges().subscribe(p => {
26 | if (p[0].published) {
27 | this.post = p[0];
28 | this.title.setTitle(this.post.title);
29 | this.meta.updateTag({ content: 'View ' + this.post.title }, "name='description'");
30 | } else {
31 | this.post = {
32 | title: 'Post Not Found',
33 | body: ''
34 | }
35 | }
36 | });
37 | });
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/app/storefront-components/posts/posts.component.html:
--------------------------------------------------------------------------------
1 | ;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ PostsComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(PostsComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/posts/posts.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Title, Meta } from '@angular/platform-browser';
3 | import { Router } from '@angular/router';
4 | import { AngularFireDatabase } from '@angular/fire/database';
5 | import { GlobalService } from '../../services/global.service';
6 | import { Observable } from 'rxjs';
7 |
8 | @Component({
9 | selector: 'posts',
10 | templateUrl: './posts.component.html',
11 | styleUrls: ['./posts.component.scss']
12 | })
13 | export class PostsComponent implements OnInit {
14 | posts: Observable;
15 | searchTerm: string;
16 |
17 | constructor(
18 | public db: AngularFireDatabase,
19 | public globalService: GlobalService,
20 | public router: Router,
21 | private title: Title,
22 | private meta: Meta
23 | ) {
24 | this.posts = db.list('/posts', ref => ref.orderByChild('published').equalTo(true).limitToLast(20)).valueChanges();
25 |
26 | this.globalService.searchTerm.subscribe((term) => {
27 | this.searchTerm = term;
28 | });
29 | }
30 |
31 | ngOnInit() {
32 | this.title.setTitle('Blog');
33 | this.meta.updateTag({ content: 'View recent blog posts' }, "name='description'");
34 |
35 | if (this.router.url.includes('blog')) {
36 | this.globalService.searchTerm.next('');
37 | }
38 | }
39 |
40 | getPostImage(post:any) {
41 | if (post.thumbnail) {
42 | return post.thumbnail;
43 | } else {
44 | return '../../assets/placeholder.jpg';
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/app/storefront-components/product-categories/product-categories.component.html:
--------------------------------------------------------------------------------
1 |
2 |
4 | ;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ ProductCategoriesComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ProductCategoriesComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/product-categories/product-categories.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Title, Meta } from '@angular/platform-browser';
3 | import { AngularFireDatabase } from '@angular/fire/database';
4 | import { Observable } from 'rxjs';
5 |
6 | @Component({
7 | selector: 'product-categories',
8 | templateUrl: './product-categories.component.html',
9 | styleUrls: ['./product-categories.component.scss']
10 | })
11 | export class ProductCategoriesComponent implements OnInit {
12 | categories: Observable;
13 |
14 | constructor(
15 | public db: AngularFireDatabase,
16 | private title: Title,
17 | private meta: Meta
18 | ) {
19 | this.categories = db.list('/categories', ref => ref.orderByChild('weight').limitToLast(999)).valueChanges();
20 | }
21 |
22 | ngOnInit() {
23 | this.title.setTitle('Products');
24 | this.meta.updateTag({ content: 'Browse products and product categories' }, "name='description'");
25 | }
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/storefront-components/product-category/product-category.component.html:
--------------------------------------------------------------------------------
1 | ;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ ProductCategoryComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ProductCategoryComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/product-category/product-category.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 | import { ActivatedRoute, Params, Router } from '@angular/router';
3 | import { Title, Meta } from '@angular/platform-browser';
4 | import { AngularFireDatabase } from '@angular/fire/database';
5 | import { Observable } from 'rxjs';
6 |
7 | @Component({
8 | selector: 'product-category',
9 | templateUrl: './product-category.component.html',
10 | styleUrls: ['./product-category.component.scss']
11 | })
12 | export class ProductCategoryComponent implements OnInit {
13 | products: Observable;
14 | categories: Observable;
15 | category: Observable;
16 | categoryObject: any;
17 | categoryName: string;
18 | categoryProducts: any;
19 | @Input() categoryInput: any;
20 |
21 | constructor(
22 | public db: AngularFireDatabase,
23 | public route: ActivatedRoute,
24 | public router: Router,
25 | private title: Title,
26 | private meta: Meta
27 | ) {
28 | this.categories = db.list('/categories').valueChanges();
29 | this.products = db.list('/products', ref => ref.orderByChild('published').equalTo(true)).valueChanges();
30 | this.categoryObject = {};
31 | }
32 |
33 | ngOnInit() {
34 | if (this.categoryInput) {
35 | this.category = this.categoryInput;
36 | this.categoryObject.slug = this.categoryInput.slug;
37 | this.categoryObject.name = this.categoryInput.name;
38 | this.categoryObject.products = Object.keys(this.categoryInput.products);
39 | this.products.subscribe((p:any) => {
40 | this.categoryProducts = p.filter((item) => {
41 | return item.category === this.categoryInput.entityKey;
42 | });
43 | });
44 | } else {
45 | this.route.params.subscribe((params: Params) => {
46 | this.category = this.db.list('/categories', ref => ref.orderByChild('slug').equalTo(params.slug)).valueChanges();
47 |
48 | this.category.subscribe((cat:any) => {
49 | this.categoryObject.slug = cat[0].slug;
50 | this.categoryObject.name = cat[0].name;
51 | this.categoryObject.products = Object.keys(cat[0].products);
52 | this.products.subscribe((p:any) => {
53 | this.categoryProducts = p.filter((item:any) => {
54 | return item.category === cat[0].entityKey;
55 | });
56 | });
57 |
58 | this.title.setTitle(this.categoryObject.name);
59 | this.meta.addTag({ name: 'description', content: 'View all products in the ' + this.categoryObject.name + ' category' });
60 | });
61 | });
62 | }
63 | }
64 |
65 | getProductImage(product:any) {
66 | if (product && product.thumbnail) {
67 | return product.thumbnail;
68 | } else {
69 | return '../../assets/placeholder.jpg';
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/app/storefront-components/product/product.component.html:
--------------------------------------------------------------------------------
1 | ;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ ProductComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ProductComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/products/products.component.html:
--------------------------------------------------------------------------------
1 | ;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ ProductsComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ProductsComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/products/products.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Title, Meta } from '@angular/platform-browser';
3 | import { AngularFireDatabase } from '@angular/fire/database';
4 | import { Router } from '@angular/router';
5 | import { GlobalService } from '../../services/global.service';
6 | import { Observable } from 'rxjs';
7 |
8 | @Component({
9 | selector: 'products',
10 | templateUrl: './products.component.html',
11 | styleUrls: ['./products.component.scss']
12 | })
13 | export class ProductsComponent implements OnInit {
14 | products: Observable;
15 | searchTerm: string;
16 |
17 | constructor(
18 | public db: AngularFireDatabase,
19 | public globalService: GlobalService,
20 | public router: Router,
21 | private title: Title,
22 | private meta: Meta
23 | ) {
24 | this.products = db.list('/products', ref => ref.orderByChild('published').equalTo(true).limitToLast(20)).valueChanges();
25 |
26 | this.globalService.searchTerm.subscribe((term) => {
27 | this.searchTerm = term;
28 | });
29 | }
30 |
31 | ngOnInit() {
32 | this.title.setTitle('Products');
33 | this.meta.updateTag({ content: 'View all products' }, "name='description'");
34 |
35 | if (this.router.url.includes('product')) {
36 | this.globalService.searchTerm.next('');
37 | }
38 | }
39 |
40 | getProductImage(product:any) {
41 | if (product.thumbnail) {
42 | return product.thumbnail;
43 | } else {
44 | return '../../assets/placeholder.jpg';
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/app/storefront-components/search-results/search-results.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ SearchResultsComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(SearchResultsComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should be created', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/storefront-components/search-results/search-results.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
2 | import { Title, Meta } from '@angular/platform-browser';
3 | import { GlobalService } from '../../services/global.service';
4 |
5 | @Component({
6 | selector: 'app-search-results',
7 | templateUrl: './search-results.component.html',
8 | styleUrls: ['./search-results.component.scss']
9 | })
10 | export class SearchResultsComponent implements OnInit {
11 | @ViewChild('searchit') private elementRef: ElementRef;
12 | searchTerm: string;
13 |
14 | constructor(
15 | public globalService: GlobalService,
16 | private cdRef: ChangeDetectorRef,
17 | private title: Title,
18 | private meta: Meta
19 | ) {
20 | this.globalService.searchTerm.next('');
21 | this.globalService.searchTerm.subscribe((term) => {
22 | this.searchTerm = term;
23 | });
24 | }
25 |
26 | ngOnInit() {
27 | this.title.setTitle('Search');
28 | this.meta.updateTag({ content: 'Search products and blog posts' }, "name='description'");
29 | }
30 |
31 | public ngAfterViewInit(): void {
32 | this.elementRef.nativeElement.focus();
33 | this.cdRef.detectChanges();
34 | }
35 |
36 | performSearch(event) {
37 | this.globalService.searchTerm.next(event);
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/assets/google-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/assets/google-icon.png
--------------------------------------------------------------------------------
/src/assets/icons/icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/assets/icons/icon-144x144.png
--------------------------------------------------------------------------------
/src/assets/icons/icon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/assets/icons/icon-16x16.png
--------------------------------------------------------------------------------
/src/assets/icons/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/assets/icons/icon-192x192.png
--------------------------------------------------------------------------------
/src/assets/icons/icon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/assets/icons/icon-32x32.png
--------------------------------------------------------------------------------
/src/assets/icons/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/assets/icons/icon-512x512.png
--------------------------------------------------------------------------------
/src/assets/placeholder.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/assets/placeholder.jpg
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Firebase Shop + Blog
5 |
3 |
6 |
13 | Order #{{ order.key }}
4 |{{ order.date | date }}
5 |
14 |
15 |
17 | {{ order.shipping.company }}
18 | {{ order.shipping.email }}
19 | {{ order.shipping.address }}
20 | {{ order.shipping.city }}, {{ order.shipping.state }} {{ order.shipping.zip }} 21 |
22 |
23 |
25 | {{ order.billing.company }}
26 | {{ order.billing.email }}
27 | {{ order.billing.address }}
28 | {{ order.billing.city }}, {{ order.billing.state }} {{ order.billing.zip }} 29 |
30 |
31 | Shipping info
16 | {{ order.shipping.name }}17 | {{ order.shipping.company }}
18 | {{ order.shipping.email }}
19 | {{ order.shipping.address }}
20 | {{ order.shipping.city }}, {{ order.shipping.state }} {{ order.shipping.zip }} 21 |
Billing info
24 | {{ order.billing.name }}25 | {{ order.billing.company }}
26 | {{ order.billing.email }}
27 | {{ order.billing.address }}
28 | {{ order.billing.city }}, {{ order.billing.state }} {{ order.billing.zip }} 29 |
Item
33 | Price
34 | Qty
35 | Total
36 | {{item.title}}
40 | {{item.price | currency:'USD':true }}
41 |
42 | {{item.quantity}}
43 |
44 | {{item.total | currency:'USD':true }}
45 | Subtotal
50 |{{order.total | currency:'USD':true}}
51 |
2 |
8 |
18 |
19 |
--------------------------------------------------------------------------------
/src/app/storefront-components/orders/orders.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../variables.scss';
2 |
3 | .order {
4 | cursor: pointer;
5 |
6 | .order-info {
7 | display: inline-block;
8 | width: 100%;
9 |
10 | @include tablet {
11 | width: calc(100% - 220px);
12 | }
13 |
14 | h3 {
15 | margin-top: 0;
16 | }
17 | }
18 |
19 | .actions {
20 | text-align: right;
21 | width: 100%;
22 |
23 | @include tablet {
24 | display: inline-block;
25 | float: none;
26 | text-align: center;
27 | vertical-align: top;
28 | width: 210px;
29 | }
30 | }
31 |
32 | .totals {
33 | float: right;
34 | }
35 |
36 | .mat-raised-button {
37 | margin-top: 17px;
38 | }
39 | }
40 |
41 | .user-photo {
42 | border-radius: 50%;
43 | height: 50px;
44 | margin-right: 10px;
45 | vertical-align: middle;
46 | width: 50px;
47 | }
48 |
49 | .price {
50 | color: $color-grey;
51 | font-size: 0.8em;
52 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/orders/orders.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { OrdersComponent } from './orders.component';
4 |
5 | describe('OrdersComponent', () => {
6 | let component: OrdersComponent;
7 | let fixture: ComponentFixtureMy Orders
3 |4 | Guest Customer 5 |
6 | 7 |
9 |
14 | 10 | #{{order}} 11 |
12 |{{ orderDates[i] | date }}
13 |
15 |
16 |
17 | No orders
20 |
2 |
3 |
--------------------------------------------------------------------------------
/src/app/storefront-components/page/page.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexabbott/firebase-cms/9b2e0ebd86485a2937b05dae0c2d5c365daf0562/src/app/storefront-components/page/page.component.scss
--------------------------------------------------------------------------------
/src/app/storefront-components/page/page.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PageComponent } from './page.component';
4 |
5 | describe('PageComponent', () => {
6 | let component: PageComponent;
7 | let fixture: ComponentFixture{{page.title}}
3 |{{page.body | truncate: 20 }}
4 |
2 |
9 |
--------------------------------------------------------------------------------
/src/app/storefront-components/post/post.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../variables.scss';
2 |
3 | .post-header {
4 | p {
5 | color: $color-grey;
6 | font-size: 0.8em;
7 | }
8 |
9 | img {
10 | max-width: 150px;
11 | }
12 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/post/post.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PostComponent } from './post.component';
4 |
5 | describe('PostComponent', () => {
6 | let component: PostComponent;
7 | let fixture: ComponentFixture
3 | ![{{post.title}}]()
4 |
7 |
8 | {{post.title}}
5 |Published {{post.date | date}}
6 |
2 |
8 | ![{{post.title}}]()
9 |
17 |
18 |
--------------------------------------------------------------------------------
/src/app/storefront-components/posts/posts.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../variables.scss';
2 |
3 | .post {
4 | cursor: pointer;
5 | margin-bottom: 10px;
6 |
7 | @include tablet {
8 | margin-bottom: 5px;
9 | }
10 |
11 | img {
12 | display: inline-block;
13 | margin-right: 20px;
14 | max-width: 100%;
15 |
16 | @include tablet {
17 | max-width: 150px;
18 | }
19 | }
20 |
21 | h3 {
22 | @include tablet {
23 | margin-top: 0;
24 | }
25 | }
26 |
27 | .post-content {
28 | display: inline-block;
29 | vertical-align: top;
30 | width: 100%;
31 |
32 | @include tablet {
33 | width: calc(100% - 180px);
34 | }
35 | }
36 |
37 | .date {
38 | color: $color-grey;
39 | font-size: 0.8em;
40 | }
41 |
42 | button {
43 | float: right;
44 | }
45 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/posts/posts.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PostsComponent } from './posts.component';
4 |
5 | describe('PostsComponent', () => {
6 | let component: PostsComponent;
7 | let fixture: ComponentFixtureNo posts
19 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/src/app/storefront-components/product-categories/product-categories.component.scss:
--------------------------------------------------------------------------------
1 | div {
2 | margin: 30px auto;
3 | text-align: center;
4 | width: 100%;
5 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/product-categories/product-categories.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ProductCategoriesComponent } from './product-categories.component';
4 |
5 | describe('ProductCategoriesComponent', () => {
6 | let component: ProductCategoriesComponent;
7 | let fixture: ComponentFixture
2 |
4 |
5 |
28 |
29 | {{ categoryObject.name }}
3 |
6 |
7 | ![{{product.title}}]()
8 |
20 |
21 |
22 |
27 |
9 |
19 | 10 | 11 | {{ product.title }} 12 | 13 |
14 | 15 |
16 | {{ product.price | currency:'USD':true }}
17 |
18 |
30 |
31 |
--------------------------------------------------------------------------------
/src/app/storefront-components/product-category/product-category.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../variables.scss';
2 |
3 | h3 {
4 | margin-left: .7%;
5 | text-align: center;
6 |
7 | @include tablet {
8 | text-align: left;
9 | }
10 | }
11 |
12 | .grid {
13 | display: flex;
14 | flex-flow: row;
15 | flex-wrap: wrap;
16 |
17 | .grid-tile {
18 | height: 300px;
19 | width: 100%;
20 |
21 | @include tablet {
22 | width: 50%;
23 | }
24 |
25 | @include desktop {
26 | width: 25%;
27 | }
28 | }
29 | }
30 |
31 | .product,
32 | .see-more {
33 | cursor: pointer;
34 | height: 235px;
35 | margin: 0 auto;
36 | width: auto;
37 |
38 | @include tablet {
39 | width: 80%;
40 | }
41 |
42 | .price {
43 | color: $color-grey;
44 | font-size: 0.8em;
45 | }
46 |
47 | img {
48 | display: block;
49 | height: 155px;
50 | margin: 0 auto;
51 | max-height: 155px;
52 | max-width: 100%;
53 | object-fit: cover;
54 | }
55 |
56 | .product-content {
57 | display: block;
58 | }
59 | }
60 |
61 | .grid .button-container {
62 | box-sizing: border-box;
63 | display: inline-block;
64 | height: 70px;
65 | margin: 0 auto;
66 | padding-top: 30px;
67 | text-align: center;
68 |
69 | @include tablet {
70 | height: 300px;
71 | padding-top: 130px;
72 | }
73 | }
74 |
75 | .categories {
76 | padding: 30px 30px 0 30px;
77 | }
78 |
79 | .categories .grid span {
80 | display: none;
81 | }
82 |
83 | .categories .grid span:nth-of-type(1),
84 | .categories .grid span:nth-of-type(2),
85 | .categories .grid span:nth-of-type(3) {
86 | display: block;
87 | }
88 |
89 | .categories .grid span:nth-of-type(1) + .button-container,
90 | .categories .grid span:nth-of-type(2) + .button-container {
91 | display: none;
92 | }
93 |
94 | .category .button-container {
95 | display: none;
96 | }
97 |
98 | .see-more:not([class*=mat-elevation-z]) {
99 | cursor: default;
100 | }
101 |
102 | .bottom-cta {
103 | margin-bottom: 30px;
104 | text-align: center;
105 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/product-category/product-category.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ProductCategoryComponent } from './product-category.component';
4 |
5 | describe('ProductCategoryComponent', () => {
6 | let component: ProductCategoryComponent;
7 | let fixture: ComponentFixture
2 |
22 |
23 |
--------------------------------------------------------------------------------
/src/app/storefront-components/product/product.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../variables.scss';
2 |
3 | .container {
4 | display: flex;
5 | flex-direction: column;
6 |
7 | @include tablet {
8 | flex-direction: row;
9 | }
10 | }
11 |
12 | .featured-image {
13 | max-width: 100%;
14 | }
15 |
16 | .product-left,
17 | .product-right {
18 | box-sizing: border-box;
19 | display: inline-block;
20 | width: 100%;
21 |
22 | @include tablet {
23 | padding: 20px;
24 | }
25 | }
26 |
27 | .product-left {
28 | text-align: right;
29 | }
30 |
31 | .quantity-label,
32 | .quantity {
33 | display: inline-block;
34 | }
35 |
36 | .quantity-label {
37 | color: $color-grey;
38 | transform: translateY(-2px);
39 | }
40 |
41 | .quantity {
42 | width: 35px;
43 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/product/product.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ProductComponent } from './product.component';
4 |
5 | describe('ProductComponent', () => {
6 | let component: ProductComponent;
7 | let fixture: ComponentFixture
3 | ![{{product.title}}]()
4 |
5 |
6 |
5 |
7 |
13 |
14 |
15 |
20 |
21 | {{product.title}}
8 | 9 |{{product.price | currency:'USD':true}}
10 | 11 |Qty
12 |
2 |
--------------------------------------------------------------------------------
/src/app/storefront-components/products/products.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../variables.scss';
2 |
3 | .grid {
4 | display: flex;
5 | flex-flow: row;
6 | flex-wrap: wrap;
7 |
8 | .grid-tile {
9 | height: 300px;
10 | width: 100%;
11 |
12 | @include tablet {
13 | width: 50%;
14 | }
15 |
16 | @include desktop {
17 | width: 25%;
18 | }
19 | }
20 | }
21 |
22 | .product {
23 | cursor: pointer;
24 | height: 235px;
25 | margin: 0 auto;
26 | width: auto;
27 |
28 | @include tablet {
29 | width: 80%;
30 | }
31 |
32 | .price {
33 | color: $color-grey;
34 | font-size: 0.8em;
35 | }
36 |
37 | img {
38 | display: block;
39 | height: 155px;
40 | margin: 0 auto;
41 | max-height: 155px;
42 | max-width: 100%;
43 | object-fit: cover;
44 | }
45 |
46 | .product-content {
47 | display: block;
48 | }
49 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/products/products.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ProductsComponent } from './products.component';
4 |
5 | describe('ProductsComponent', () => {
6 | let component: ProductsComponent;
7 | let fixture: ComponentFixture
3 |
19 |
4 |
5 | ![{{product.title}}]()
6 |
16 |
17 |
7 |
15 | 8 | 9 | {{product.title}} 10 | 11 |
12 | 13 |{{product.price | currency:'USD':true }}
14 | No products
18 |
5 | Products
6 | Blog Posts
9 |
--------------------------------------------------------------------------------
/src/app/storefront-components/search-results/search-results.component.scss:
--------------------------------------------------------------------------------
1 | .highlight {
2 | box-sizing: border-box;
3 | margin: 30px 30px 0 30px;
4 | width: calc(100% - 60px);
5 | }
6 |
7 | .search-big {
8 | display: block;
9 | margin: 30px 30px 0 30px;
10 | width: calc(100% - 60px);
11 | }
--------------------------------------------------------------------------------
/src/app/storefront-components/search-results/search-results.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SearchResultsComponent } from './search-results.component';
4 |
5 | describe('SearchResultsComponent', () => {
6 | let component: SearchResultsComponent;
7 | let fixture: ComponentFixture