Route Approach + Responsive Fixes

.firebaserc

@@ -1,16 +1,16 @@
 {
   "projects": {
-    "default": "fir-cms-76f54",
-    "cm": "fir-cms-76f54",
-    "cms": "fir-cms-76f54"
+    "default": "fir-cms-vnext",
+    "cm": "fir-cms-vnext",
+    "cms": "fir-cms-vnext"
   },
   "targets": {
     "ng6-fire-shop": {
       "hosting": {
         "firebase-cms": [
-          "ng6-fire-shop"
+          "firebase-cms-vnext"
         ]
       }
     }
   }
-}
+}

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,17 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_FIR_CMS_VNEXT }}'
+          projectId: fir-cms-vnext
+        env:
+          FIREBASE_CLI_PREVIEWS: hostingchannels

.gitignore

@@ -50,3 +50,5 @@ testem.log
 .DS_Store
 Thumbs.db
 /.vs
+/.firebase/hosting.ZGlzdA.cache
+/.firebase/hosting.ZGlzdFxmaXJlYmFzZS1jbXM.cache

README.md

@@ -1,6 +1,6 @@
 # FirebaseCMS
 
-FirebasCMS is an e-commerce and blogging platform with a storefront and CMS built with Angular 4 (Angular CLI), Firebase (AngularFire2), Angular Material and Stripe. Create, moderate and manage pages, blog posts, products, orders, customers, carts, navigation, themes, admins and more with this web application.
+FirebasCMS is an e-commerce and blogging platform with a storefront and CMS built with Angular 11 (Angular CLI), Firebase (@angular/fire), Angular Material and Stripe. Create, moderate and manage pages, blog posts, products, orders, customers, carts, navigation, themes, admins and more with this web application.
 
 
 ## Demo

angular.json

@@ -31,6 +31,11 @@
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/"
+              ]
+            },
             "scripts": []
           },
           "configurations": {
@@ -131,4 +136,4 @@
     }
   },
   "defaultProject": "firebase-cms"
-}
+}

functions/.gitignore

@@ -0,0 +1,9 @@
+# Compiled JavaScript files
+lib/**/*.js
+lib/**/*.js.map
+
+# TypeScript v1 declaration files
+typings/
+
+# Node.js dependency directory
+node_modules/

functions/package.json

@@ -1,11 +1,27 @@
 {
-  "name": "stripe-functions",
-  "description": "Stripe Firebase Functions",
+  "name": "functions",
+  "scripts": {
+    "build": "tsc",
+    "serve": "npm run build && firebase emulators:start --only functions",
+    "shell": "npm run build && firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "engines": {
+    "node": "12"
+  },
+  "main": "lib/index.js",
   "dependencies": {
-    "@google-cloud/logging": "^0.7.1",
-    "firebase-admin": "^4.0.5",
-    "firebase-functions": "^0.5.1",
+    "firebase-admin": "^9.2.0",
+    "firebase-functions": "^3.11.0",
     "stripe": "^4.15.0",
-    "nodemailer": "^4.0.1"
-  }
+    "nodemailer": "^4.0.1",
+    "@google-cloud/logging": "^0.7.1"
+  },
+  "devDependencies": {
+    "typescript": "^3.8.0",
+    "firebase-functions-test": "^0.2.0"
+  },
+  "private": true
 }

functions/src/index.ts

@@ -0,0 +1,9 @@
+import * as functions from "firebase-functions";
+
+// // Start writing Firebase Functions
+// // https://firebase.google.com/docs/functions/typescript
+//
+// export const helloWorld = functions.https.onRequest((request, response) => {
+//   functions.logger.info("Hello logs!", {structuredData: true});
+//   response.send("Hello from Firebase!");
+// });

functions/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "outDir": "lib",
+    "sourceMap": true,
+    "strict": true,
+    "target": "es2017"
+  },
+  "compileOnSave": true,
+  "include": [
+    "src"
+  ]
+}

package.json

@@ -11,6 +11,7 @@
     "e2e": "ng e2e",
     "hashcode": "node scripts/hashcode.js",
     "deploy": "ng build --prod; firebase deploy",
+    "deploy-hosting-only": "ng build --prod && firebase deploy --only hosting",
     "build-static": "node scripts/static-generator.js",
     "deploy-static": "ng build --prod; node scripts/static-generator.js; mv static/* dist/; firebase deploy"
   },
@@ -27,7 +28,6 @@
     "@angular/platform-browser": "~11.2.3",
     "@angular/platform-browser-dynamic": "~11.2.3",
     "@angular/router": "~11.2.3",
-    "@types/ckeditor": "^4.9.10",
     "core-js": "^3.11.0",
     "firebase": "^7.0 || ^8.0",
     "firebase-admin": "^9.6.0",
@@ -45,6 +45,7 @@
     "@angular/compiler-cli": "~11.2.3",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
+    "@types/ckeditor": "^4.9.10",
     "cheerio": "^1.0.0-rc.6",
     "codelyzer": "^6.0.0",
     "firebase-tools": "^8.0.0",

src/app/admin/admin-components/add-page/add-page.component.scss

@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .page-form {
     box-sizing: border-box;
@@ -30,4 +30,4 @@
 ckeditor {
     display: block;
     margin-top: 30px;
-}
+}

src/app/admin/admin-components/add-post/add-post.component.html

@@ -71,15 +71,15 @@ <h2>
         mat-raised-button
         (click)="submitForModeration(newURL, newDate, newTitle, newBody, newPublished)"
         class="submit"
-        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin') || currentAdmin.uid === entityObject.updatedBy)">
+        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin') || currentAdmin?.uid === entityObject.updatedBy)">
         Save Draft
     </button>
 
     <button
         mat-raised-button
         (click)="deleteItem($event)"
         class="submit"
-        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin') || currentAdmin.uid === entityObject.updatedBy)">
+        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin') || currentAdmin?.uid === entityObject.updatedBy)">
         Delete Draft
     </button>
 
@@ -95,7 +95,7 @@ <h2>
         mat-raised-button
         (click)="addPost(newURL, newDate, newTitle, newBody, newPublished)"
         class="submit"
-        *ngIf="!router.url.includes('approval') && (currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin')">
+        *ngIf="!router.url.includes('approval') && (currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin')">
         <span *ngIf="!editMode">Add</span>
         <span *ngIf="editMode">Save</span>
         Post

src/app/admin/admin-components/add-post/add-post.component.scss

@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .post-form {
     box-sizing: border-box;
@@ -68,4 +68,4 @@ ckeditor {
     cursor: pointer;
     font-size: 0.8em;
     margin: 5px 0 0 0;
-}
+}

src/app/admin/admin-components/add-post/add-post.component.ts

@@ -7,6 +7,9 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
 import { FirebaseApp } from '@angular/fire';
 import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
 import { take } from 'rxjs/operators'
+import { AngularFireStorage } from '@angular/fire/storage';
+
+const FIREBASE_POSTS_STORAGE_PATH = "firebase-cms-products";
 
 @Component({
   selector: 'add-post',
@@ -42,7 +45,9 @@ export class AddPostComponent implements OnInit {
     public globalService: GlobalService,
     public router: Router,
     public route: ActivatedRoute,
-      public dialog: MatDialog
+    public dialog: MatDialog,
+    public storage: AngularFireStorage
+
   ) {
 
     this.newPublished = false;
@@ -113,18 +118,20 @@ export class AddPostComponent implements OnInit {
   }
 
   uploadImage() {
-    let storageRef = this.af.storage().ref();
+    let storageRef = this.storage.ref(FIREBASE_POSTS_STORAGE_PATH); //this.af.storage().ref();
     let path = Date.now().toString() + '-' + this.file.name;
     let iRef = storageRef.child('posts/' + path);
     let me = this;
     iRef.put(this.file).then((snapshot) => {
         let snackBarRef = this.snackBar.open('Image uploaded', 'OK!', {
           duration: 3000
         });
-        this.storageRef.child('posts/' + path).getDownloadURL().then(function(url) {
-          me.imageUrl = url;
-          me.newThumbnail = url;
-        });
+
+      snapshot.ref.getDownloadURL().then(function (url) {
+        me.imageUrl = url;
+        me.newThumbnail = url;
+      });
+
     });
   }
 
@@ -133,15 +140,11 @@ export class AddPostComponent implements OnInit {
   }
 
   deleteImageRef() {
-    let storage = this.af.storage();
-    let imageRef = storage.refFromURL(this.imageUrl);
-
-    let me = this;
-    imageRef.delete().then(function() {
-      me.imageUrl = null;
-    }).catch(function(error) {
-      console.log('error', error);
-    });
+    let imageRef = this.storage.refFromURL(this.imageUrl);
+    imageRef.delete().subscribe(() => {
+      this.imageUrl = null;
+    })
+
   }
 
   addPost(newURL: string, newDate: string, newTitle: string, newBody: string, newPublished: boolean) {

src/app/admin/admin-components/add-product-category/add-product-category.component.scss

@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .category-form {
     box-sizing: border-box;
@@ -23,4 +23,4 @@ button {
 
 .mat-input-container {
     display: block;
-}
+}

src/app/admin/admin-components/add-product/add-product.component.html

@@ -56,23 +56,23 @@ <h2>
         mat-raised-button
         (click)="approveItem(newTitle, newPrice, newCategory, newWeight, newDescription, newPublished)"
         class="submit"
-        *ngIf="router.url.includes('approval') && (currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin')">
+        *ngIf="router.url.includes('approval') && (currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin')">
         <span>Approve</span>
     </button>
 
     <button
         mat-raised-button
         (click)="submitForModeration(newTitle, newPrice, newCategory, newWeight, newDescription, newPublished)"
         class="submit"
-        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin') || currentAdmin.uid === entityObject.updatedBy)">
+        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin') || currentAdmin?.uid === entityObject.updatedBy)">
         Save Draft
     </button>
 
     <button
         mat-raised-button
         (click)="deleteItem($event)"
         class="submit"
-        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin') || currentAdmin.uid === entityObject.updatedBy)">
+        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin') || currentAdmin?.uid === entityObject.updatedBy)">
         Delete Draft
     </button>
 
@@ -88,9 +88,9 @@ <h2>
         mat-raised-button
         (click)="addProduct(newTitle, newPrice, newCategory, newWeight, newDescription, newPublished, false)"
         class="submit"
-        *ngIf="!router.url.includes('approval') && (currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin')">
+        *ngIf="!router.url.includes('approval') && (currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin')">
         <span *ngIf="!editMode">Add</span>
         <span *ngIf="editMode">Save</span>
         Product
     </button>
-</div>
+</div>

src/app/admin/admin-components/add-product/add-product.component.scss

@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .product-form {
     box-sizing: border-box;
@@ -63,4 +63,4 @@ ckeditor {
     cursor: pointer;
     font-size: 0.8em;
     margin: 5px 0 0 0;
-}
+}