├── .editorconfig
├── .firebase
    └── hosting.ZGlzdFxoYW5kbWFkZS1wcm9qZWN0.cache
├── .firebaserc
├── .gitignore
├── README.md
├── angular.json
├── firebase.json
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── app-routing.module.ts
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── components
    │   │   ├── about-us
    │   │   │   ├── about-us.component.css
    │   │   │   ├── about-us.component.html
    │   │   │   └── about-us.component.ts
    │   │   ├── cart-page
    │   │   │   ├── cart-products
    │   │   │   │   ├── cart-products.component.css
    │   │   │   │   ├── cart-products.component.html
    │   │   │   │   ├── cart-products.component.spec.ts
    │   │   │   │   └── cart-products.component.ts
    │   │   │   ├── cart
    │   │   │   │   ├── cart.component.css
    │   │   │   │   ├── cart.component.html
    │   │   │   │   ├── cart.component.spec.ts
    │   │   │   │   └── cart.component.ts
    │   │   │   └── empty-cart
    │   │   │   │   ├── empty-cart.component.css
    │   │   │   │   ├── empty-cart.component.html
    │   │   │   │   ├── empty-cart.component.spec.ts
    │   │   │   │   └── empty-cart.component.ts
    │   │   ├── checkout
    │   │   │   ├── checkout.component.css
    │   │   │   ├── checkout.component.html
    │   │   │   ├── checkout.component.spec.ts
    │   │   │   └── checkout.component.ts
    │   │   ├── client-orders
    │   │   │   ├── client-orders.component.css
    │   │   │   ├── client-orders.component.html
    │   │   │   ├── client-orders.component.spec.ts
    │   │   │   └── client-orders.component.ts
    │   │   ├── contact-us
    │   │   │   ├── contact-us.component.css
    │   │   │   ├── contact-us.component.html
    │   │   │   ├── contact-us.component.spec.ts
    │   │   │   └── contact-us.component.ts
    │   │   ├── create-product
    │   │   │   ├── add-new-product.component.css
    │   │   │   ├── add-new-product.component.html
    │   │   │   ├── add-new-product.component.spec.ts
    │   │   │   └── add-new-product.component.ts
    │   │   ├── create-workshop
    │   │   │   ├── create-workshop.component.css
    │   │   │   ├── create-workshop.component.html
    │   │   │   ├── create-workshop.component.spec.ts
    │   │   │   └── create-workshop.component.ts
    │   │   ├── edit-product
    │   │   │   ├── edit-product.component.css
    │   │   │   ├── edit-product.component.html
    │   │   │   ├── edit-product.component.spec.ts
    │   │   │   └── edit-product.component.ts
    │   │   ├── edit-workshop
    │   │   │   ├── edit-workshop.component.css
    │   │   │   ├── edit-workshop.component.html
    │   │   │   ├── edit-workshop.component.spec.ts
    │   │   │   └── edit-workshop.component.ts
    │   │   ├── favorite-page
    │   │   │   ├── empty-favourites
    │   │   │   │   ├── empty-favourites.component.css
    │   │   │   │   ├── empty-favourites.component.html
    │   │   │   │   ├── empty-favourites.component.spec.ts
    │   │   │   │   └── empty-favourites.component.ts
    │   │   │   ├── favourite-products
    │   │   │   │   ├── favourite-products.component.css
    │   │   │   │   ├── favourite-products.component.html
    │   │   │   │   ├── favourite-products.component.spec.ts
    │   │   │   │   └── favourite-products.component.ts
    │   │   │   └── favourite
    │   │   │   │   ├── favourite.component.css
    │   │   │   │   ├── favourite.component.html
    │   │   │   │   ├── favourite.component.spec.ts
    │   │   │   │   └── favourite.component.ts
    │   │   ├── footer
    │   │   │   ├── footer.component.css
    │   │   │   ├── footer.component.html
    │   │   │   ├── footer.component.spec.ts
    │   │   │   └── footer.component.ts
    │   │   ├── forget-password-page
    │   │   │   ├── request-reset
    │   │   │   │   ├── request-reset.component.css
    │   │   │   │   ├── request-reset.component.html
    │   │   │   │   ├── request-reset.component.spec.ts
    │   │   │   │   └── request-reset.component.ts
    │   │   │   ├── response-reset-password
    │   │   │   │   ├── response-reset-password.component.css
    │   │   │   │   ├── response-reset-password.component.html
    │   │   │   │   ├── response-reset-password.component.spec.ts
    │   │   │   │   └── response-reset-password.component.ts
    │   │   │   └── success-modal
    │   │   │   │   ├── success-modal.component.css
    │   │   │   │   ├── success-modal.component.html
    │   │   │   │   ├── success-modal.component.spec.ts
    │   │   │   │   └── success-modal.component.ts
    │   │   ├── go-to-login
    │   │   │   ├── go-to-login.component.css
    │   │   │   ├── go-to-login.component.html
    │   │   │   ├── go-to-login.component.spec.ts
    │   │   │   └── go-to-login.component.ts
    │   │   ├── home-page
    │   │   │   ├── banner
    │   │   │   │   ├── banner.component.css
    │   │   │   │   ├── banner.component.html
    │   │   │   │   ├── banner.component.spec.ts
    │   │   │   │   └── banner.component.ts
    │   │   │   ├── home
    │   │   │   │   ├── home.component.css
    │   │   │   │   ├── home.component.html
    │   │   │   │   ├── home.component.spec.ts
    │   │   │   │   └── home.component.ts
    │   │   │   ├── horizontall-scroll
    │   │   │   │   ├── horizontall-scroll.component.css
    │   │   │   │   ├── horizontall-scroll.component.html
    │   │   │   │   ├── horizontall-scroll.component.spec.ts
    │   │   │   │   └── horizontall-scroll.component.ts
    │   │   │   ├── sellers-section
    │   │   │   │   ├── sellers-section.component.css
    │   │   │   │   ├── sellers-section.component.html
    │   │   │   │   ├── sellers-section.component.spec.ts
    │   │   │   │   └── sellers-section.component.ts
    │   │   │   ├── top-selling-products
    │   │   │   │   ├── top-selling-products.component.css
    │   │   │   │   ├── top-selling-products.component.html
    │   │   │   │   ├── top-selling-products.component.spec.ts
    │   │   │   │   └── top-selling-products.component.ts
    │   │   │   ├── top2sellers
    │   │   │   │   ├── top2sellers.component.css
    │   │   │   │   ├── top2sellers.component.html
    │   │   │   │   ├── top2sellers.component.spec.ts
    │   │   │   │   └── top2sellers.component.ts
    │   │   │   └── workshop-home-section
    │   │   │   │   ├── workshop-home-section.component.css
    │   │   │   │   ├── workshop-home-section.component.html
    │   │   │   │   ├── workshop-home-section.component.spec.ts
    │   │   │   │   └── workshop-home-section.component.ts
    │   │   ├── landing-page
    │   │   │   ├── landing-page.component.css
    │   │   │   ├── landing-page.component.html
    │   │   │   ├── landing-page.component.spec.ts
    │   │   │   └── landing-page.component.ts
    │   │   ├── navbar
    │   │   │   ├── header
    │   │   │   │   ├── header.component.css
    │   │   │   │   ├── header.component.html
    │   │   │   │   ├── header.component.spec.ts
    │   │   │   │   └── header.component.ts
    │   │   │   ├── notification
    │   │   │   │   ├── notification.component.css
    │   │   │   │   ├── notification.component.html
    │   │   │   │   ├── notification.component.spec.ts
    │   │   │   │   └── notification.component.ts
    │   │   │   ├── search-bar
    │   │   │   │   ├── search-bar.component.css
    │   │   │   │   ├── search-bar.component.html
    │   │   │   │   ├── search-bar.component.spec.ts
    │   │   │   │   └── search-bar.component.ts
    │   │   │   └── sidebar
    │   │   │   │   ├── sidebar.component.css
    │   │   │   │   ├── sidebar.component.html
    │   │   │   │   ├── sidebar.component.spec.ts
    │   │   │   │   └── sidebar.component.ts
    │   │   ├── products-page
    │   │   │   ├── filter
    │   │   │   │   ├── filter.component.css
    │   │   │   │   ├── filter.component.html
    │   │   │   │   ├── filter.component.spec.ts
    │   │   │   │   └── filter.component.ts
    │   │   │   ├── product-card
    │   │   │   │   ├── product-card.component.css
    │   │   │   │   ├── product-card.component.html
    │   │   │   │   ├── product-card.component.spec.ts
    │   │   │   │   └── product-card.component.ts
    │   │   │   ├── product-details
    │   │   │   │   ├── product-details.component.css
    │   │   │   │   ├── product-details.component.html
    │   │   │   │   ├── product-details.component.spec.ts
    │   │   │   │   └── product-details.component.ts
    │   │   │   └── products
    │   │   │   │   ├── products-page.component.css
    │   │   │   │   ├── products-page.component.html
    │   │   │   │   ├── products-page.component.spec.ts
    │   │   │   │   └── products-page.component.ts
    │   │   ├── profile
    │   │   │   ├── animated-number
    │   │   │   │   ├── animated-number.component.css
    │   │   │   │   ├── animated-number.component.html
    │   │   │   │   ├── animated-number.component.spec.ts
    │   │   │   │   └── animated-number.component.ts
    │   │   │   ├── edit-profile
    │   │   │   │   ├── edit-profile.component.css
    │   │   │   │   ├── edit-profile.component.html
    │   │   │   │   ├── edit-profile.component.spec.ts
    │   │   │   │   └── edit-profile.component.ts
    │   │   │   └── user-profile
    │   │   │   │   ├── user-profile.component.css
    │   │   │   │   ├── user-profile.component.html
    │   │   │   │   ├── user-profile.component.spec.ts
    │   │   │   │   └── user-profile.component.ts
    │   │   ├── registration-page
    │   │   │   ├── registration
    │   │   │   │   ├── registration.component.css
    │   │   │   │   ├── registration.component.html
    │   │   │   │   ├── registration.component.spec.ts
    │   │   │   │   └── registration.component.ts
    │   │   │   ├── signin
    │   │   │   │   ├── signin.component.css
    │   │   │   │   ├── signin.component.html
    │   │   │   │   ├── signin.component.spec.ts
    │   │   │   │   └── signin.component.ts
    │   │   │   └── signup
    │   │   │   │   ├── signup.component.css
    │   │   │   │   ├── signup.component.html
    │   │   │   │   ├── signup.component.spec.ts
    │   │   │   │   └── signup.component.ts
    │   │   ├── seller-orders-page
    │   │   │   ├── seller-order-card
    │   │   │   │   ├── seller-order-card.component.css
    │   │   │   │   ├── seller-order-card.component.html
    │   │   │   │   ├── seller-order-card.component.spec.ts
    │   │   │   │   └── seller-order-card.component.ts
    │   │   │   └── seller-orders
    │   │   │   │   ├── seller-orders.component.css
    │   │   │   │   ├── seller-orders.component.html
    │   │   │   │   ├── seller-orders.component.spec.ts
    │   │   │   │   └── seller-orders.component.ts
    │   │   ├── seller-products-page
    │   │   │   ├── seller-product-card
    │   │   │   │   ├── seller-product-card.component.css
    │   │   │   │   ├── seller-product-card.component.html
    │   │   │   │   ├── seller-product-card.component.spec.ts
    │   │   │   │   └── seller-product-card.component.ts
    │   │   │   └── seller-products
    │   │   │   │   ├── seller-products.component.css
    │   │   │   │   ├── seller-products.component.html
    │   │   │   │   ├── seller-products.component.spec.ts
    │   │   │   │   └── seller-products.component.ts
    │   │   ├── seller-workshop-page
    │   │   │   ├── myworkshop
    │   │   │   │   ├── myworkshop.component.css
    │   │   │   │   ├── myworkshop.component.html
    │   │   │   │   └── myworkshop.component.ts
    │   │   │   └── sellerworkshops
    │   │   │   │   ├── sellerworkshops.component.css
    │   │   │   │   ├── sellerworkshops.component.html
    │   │   │   │   ├── sellerworkshops.component.spec.ts
    │   │   │   │   └── sellerworkshops.component.ts
    │   │   ├── sellers-page
    │   │   │   ├── sellercard
    │   │   │   │   ├── sellercard.component.css
    │   │   │   │   ├── sellercard.component.html
    │   │   │   │   ├── sellercard.component.spec.ts
    │   │   │   │   └── sellercard.component.ts
    │   │   │   └── sellers
    │   │   │   │   ├── sellers.component.css
    │   │   │   │   ├── sellers.component.html
    │   │   │   │   ├── sellers.component.spec.ts
    │   │   │   │   └── sellers.component.ts
    │   │   ├── spinner
    │   │   │   ├── spinner.component.css
    │   │   │   ├── spinner.component.html
    │   │   │   ├── spinner.component.spec.ts
    │   │   │   └── spinner.component.ts
    │   │   ├── stripe
    │   │   │   ├── stripe.component.css
    │   │   │   ├── stripe.component.html
    │   │   │   ├── stripe.component.spec.ts
    │   │   │   └── stripe.component.ts
    │   │   └── workshop-page
    │   │   │   ├── workshop-card
    │   │   │       ├── workshop-card.component.css
    │   │   │       ├── workshop-card.component.html
    │   │   │       ├── workshop-card.component.spec.ts
    │   │   │       └── workshop-card.component.ts
    │   │   │   └── workshop-page
    │   │   │       ├── workshop-page.component.css
    │   │   │       ├── workshop-page.component.html
    │   │   │       ├── workshop-page.component.spec.ts
    │   │   │       └── workshop-page.component.ts
    │   ├── directives
    │   │   ├── drag.directive.spec.ts
    │   │   ├── drag.directive.ts
    │   │   ├── set-direction.directive.spec.ts
    │   │   └── set-direction.directive.ts
    │   ├── error
    │   │   ├── error.component.css
    │   │   ├── error.component.html
    │   │   └── error.component.ts
    │   ├── guard
    │   │   ├── auth.guard.spec.ts
    │   │   ├── auth.guard.ts
    │   │   ├── customer.guard.spec.ts
    │   │   ├── customer.guard.ts
    │   │   ├── seller.guard.spec.ts
    │   │   └── seller.guard.ts
    │   ├── helpers
    │   │   ├── AuthConfig.interceptor.ts
    │   │   ├── auth.interceptor.ts
    │   │   ├── cache.interceptor.ts
    │   │   └── loading.interceptor.ts
    │   ├── model
    │   │   ├── cart.model.ts
    │   │   ├── category.model.ts
    │   │   ├── file-handler.model.ts
    │   │   ├── order.model.ts
    │   │   ├── product.model.ts
    │   │   ├── seller.model.ts
    │   │   ├── userProfile.model.ts
    │   │   └── workshop.model.ts
    │   ├── pipes
    │   │   ├── time-ago.pipe.spec.ts
    │   │   └── time-ago.pipe.ts
    │   └── services
    │   │   ├── auth
    │   │       ├── auth.service.spec.ts
    │   │       └── auth.service.ts
    │   │   ├── cart
    │   │       ├── cart.service.spec.ts
    │   │       └── cart.service.ts
    │   │   ├── favorite
    │   │       ├── favourite.service.spec.ts
    │   │       └── favourite.service.ts
    │   │   ├── loader
    │   │       ├── loader.service.spec.ts
    │   │       └── loader.service.ts
    │   │   ├── order
    │   │       ├── order.service.spec.ts
    │   │       └── order.service.ts
    │   │   ├── payment
    │   │       ├── payment.service.spec.ts
    │   │       └── payment.service.ts
    │   │   ├── product
    │   │       ├── product.service.spec.ts
    │   │       └── product.service.ts
    │   │   ├── seller
    │   │       ├── seller.service.spec.ts
    │   │       └── seller.service.ts
    │   │   ├── token
    │   │       ├── token-storage.service.spec.ts
    │   │       └── token-storage.service.ts
    │   │   ├── user
    │   │       ├── user.service.spec.ts
    │   │       └── user.service.ts
    │   │   └── workshop
    │   │       ├── workshop.service.spec.ts
    │   │       └── workshop.service.ts
    ├── assets
    │   ├── .gitkeep
    │   ├── Images
    │   │   ├── 1600w-dzssuRtOTn8.webp
    │   │   ├── 20210902_103708.jpg
    │   │   ├── assortment-with-clay-pots.jpg
    │   │   ├── banner1.jpg
    │   │   ├── banner2.jpg
    │   │   ├── banner3.jpg
    │   │   ├── banner4.jpg
    │   │   ├── emptyWishList.jpg
    │   │   ├── emptycart.jpg
    │   │   ├── hands-creating-design-with-needle-sewing-thread.jpg
    │   │   ├── pexels-amina-filkins-5409681.jpg
    │   │   ├── pexels-amina-filkins-5409703.jpg
    │   │   ├── pexels-anna-shvets-5760814.jpg
    │   │   ├── pexels-askar-abayev-6190983.jpg
    │   │   ├── pexels-askar-abayev-6190985.jpg
    │   │   ├── pexels-brett-sayles-6424244.jpg
    │   │   ├── pexels-cottonbro-studio-3738098.jpg
    │   │   ├── pexels-cottonbro-studio-6694304.jpg
    │   │   ├── pexels-digital-buggu-186846.jpg
    │   │   ├── pexels-dominika-roseclay-2089949.jpg
    │   │   ├── pexels-eneida-nieves-905844.jpg
    │   │   ├── pexels-giovana-spiller-6679220.jpg
    │   │   ├── pexels-hitesh-choudhary-909495.jpg
    │   │   ├── pexels-jenny-mavimiro-14579871.jpg
    │   │   ├── pexels-julie-aagaard-2766335.jpg
    │   │   ├── pexels-lil-artsy-3427720.jpg
    │   │   ├── pexels-mikhail-nilov-9304551.jpg
    │   │   ├── pexels-min-an-713661.jpg
    │   │   ├── pexels-monicore-135486.jpg
    │   │   ├── pexels-monstera-5302891.jpg
    │   │   ├── pexels-olga-kalinina-a10824516.jpg
    │   │   ├── pexels-regiane-tosatti-22823.jpg
    │   │   ├── pexels-vincent-rivaud-2333855.jpg
    │   │   ├── pexels-vlada-karpovich-6755860.jpg
    │   │   ├── unfinished-jug.jpg
    │   │   └── woman-craftmaster-pottery-shop.jpg
    │   ├── i18n
    │   │   ├── ar.json
    │   │   └── en.json
    │   └── svg
    │   │   ├── cash.svg
    │   │   ├── forget-password.svg
    │   │   ├── money.svg
    │   │   ├── revenue.svg
    │   │   └── sendmail.svg
    ├── environments
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    └── styles.css
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = false
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "threadsandbeads-4863e"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # Compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | /bazel-out
 8 | 
 9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 | 
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 | 
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 | 
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 | 
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 | 
44 | .vscode
45 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "dist/handmade-project",
 4 |     "ignore": [
 5 |       "firebase.json",
 6 |       "**/.*",
 7 |       "**/node_modules/**"
 8 |     ],
 9 |     "rewrites": [
10 |       {
11 |         "source": "**",
12 |         "destination": "/index.html"
13 |       }
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "handmade-project",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "watch": "ng build --watch --configuration development",
 9 |     "test": "ng test",
10 |     "extract-translations": "ngx-translate-extract --input ./src --output ./src/assets/i18n/en.json ./src/assets/i18n/ar.json --clean --sort --format namespaced-json --marker _"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@abacritt/angularx-social-login": "2.0",
15 |     "@angular/animations": "^16.0.1",
16 |     "@angular/cdk": "^16.0.1",
17 |     "@angular/common": "^16.0.1",
18 |     "@angular/compiler": "^16.0.1",
19 |     "@angular/core": "^16.0.1",
20 |     "@angular/forms": "^16.0.1",
21 |     "@angular/material": "^16.0.1",
22 |     "@angular/platform-browser": "^16.0.1",
23 |     "@angular/platform-browser-dynamic": "^16.0.1",
24 |     "@angular/router": "^16.0.1",
25 |     "@biesbjerg/ngx-translate-extract": "^7.0.4",
26 |     "@ng-bootstrap/ng-bootstrap": "^14.1.1",
27 |     "@ngx-translate/core": "^15.0.0",
28 |     "@ngx-translate/http-loader": "^8.0.0",
29 |     "@popperjs/core": "^2.11.7",
30 |     "@types/socket.io-client": "^3.0.0",
31 |     "bootstrap": "^5.2.3",
32 |     "bootstrap-icons": "^1.10.5",
33 |     "jquery": "^3.6.4",
34 |     "rxjs": "~7.8.0",
35 |     "socket.io-client": "^4.6.1",
36 |     "tslib": "^2.3.0",
37 |     "zone.js": "~0.13.0"
38 |   },
39 |   "devDependencies": {
40 |     "@angular-devkit/build-angular": "^16.0.1",
41 |     "@angular/cli": "~16.0.1",
42 |     "@angular/compiler-cli": "^16.0.1",
43 |     "@bartholomej/ngx-translate-extract": "^8.0.2",
44 |     "@types/bootstrap": "^5.2.6",
45 |     "@types/jasmine": "~4.3.0",
46 |     "@types/jquery": "^3.5.16",
47 |     "jasmine-core": "~4.5.0",
48 |     "karma": "~6.4.0",
49 |     "karma-chrome-launcher": "~3.1.0",
50 |     "karma-coverage": "~2.2.0",
51 |     "karma-jasmine": "~5.1.0",
52 |     "karma-jasmine-html-reporter": "~2.0.0",
53 |     "typescript": "~4.9.4"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | .all-container{
2 |     min-height:80vh;
3 | }


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <app-header
 2 |   *ngIf="router.url !== '/auth' && router.url !== '/welcome'"
 3 | ></app-header>
 4 | <div class="all-container">
 5 |   <router-outlet appSetDirection></router-outlet>
 6 | </div>
 7 | 
 8 | <!-- <app-client-orders></app-client-orders> -->
 9 | <!-- <app-stripe></app-stripe> -->
10 | 
11 | <app-spinner
12 |   *ngIf="router.url !== '/auth' && router.url !== '/welcome'"
13 | ></app-spinner>
14 | <!-- <app-sidebar></app-sidebar> -->
15 | <app-footer
16 |   *ngIf="router.url !== '/auth' && router.url !== '/welcome'"
17 | ></app-footer>
18 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | import { RouterTestingModule } from '@angular/router/testing';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   beforeEach(async () => {
 7 |     await TestBed.configureTestingModule({
 8 |       imports: [
 9 |         RouterTestingModule
10 |       ],
11 |       declarations: [
12 |         AppComponent
13 |       ],
14 |     }).compileComponents();
15 |   });
16 | 
17 |   it('should create the app', () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.componentInstance;
20 |     expect(app).toBeTruthy();
21 |   });
22 | 
23 |   it(`should have as title 'handmadeProject'`, () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     const app = fixture.componentInstance;
26 |     expect(app.title).toEqual('handmadeProject');
27 |   });
28 | 
29 |   it('should render title', () => {
30 |     const fixture = TestBed.createComponent(AppComponent);
31 |     fixture.detectChanges();
32 |     const compiled = fixture.nativeElement as HTMLElement;
33 |     expect(compiled.querySelector('.content span')?.textContent).toContain('handmadeProject app is running!');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | 
 4 | @Component({
 5 |   selector: 'app-root',
 6 |   templateUrl: './app.component.html',
 7 |   styleUrls: ['./app.component.css']
 8 | })
 9 | export class AppComponent {
10 |   constructor(public router: Router){
11 |    
12 |   }
13 |   title = 'handmadeProject';
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/components/about-us/about-us.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container-fluid" style="margin-top: 150px;margin-bottom:150px;">
 2 | 
 3 | 
 4 |   <a id="button" class="fa-beat" style="z-index:99999999999;"></a>
 5 | 
 6 |   <div class="bgimg-1">
 7 |     <div class="caption" >
 8 |       <span class="border">{{"AboutUs.title" | translate}}</span><br><br>
 9 |       <i class="fa fa-chevron-down fa-4x fa-beat"></i>
10 |     </div>
11 |   </div>
12 | 
13 |   <div style="color:#777;background-color:white;text-align:center;padding:50px 80px;text-align:justify;">
14 |     <p class="text text-center mt-5">{{"AboutUs.slogan" | translate}}</p>
15 |   </div>
16 | 
17 |   <div class="bgimg-2">
18 |     <div class="caption">
19 |       <span class="border middleSpan"
20 |         style="background-color:transparent;font-size:25px;color:#000;text-transform:uppercase;">{{"AboutUs.canva" | translate}}</span>
21 |     </div>
22 |   </div>
23 | 
24 |   <div class="bgimg-3">
25 |     <div class="caption">
26 |       <span class="border middleSpan"
27 |         style="background-color:transparent;font-size:25px;color:#000;text-transform:uppercase;">{{"AboutUs.Fiber" | translate}}
28 | </span>
29 |     </div>
30 |   </div>
31 | 
32 |   <div class="bgimg-4">
33 |     <div class="caption">
34 |       <span class="border middleSpan"
35 |         style="background-color:transparent;font-size:25px;color:#000;text-transform:uppercase;">{{"AboutUs.Jewelry" | translate}}</span>
36 |     </div>
37 |   </div>
38 | 
39 |   <div style="position:relative;">
40 |     <div style="color:#000;background-color:#F6EEC9;text-align:center;padding:50px 80px;text-align:justify;">
41 | <p class="text text-center">{{"AboutUs.brief" | translate}}</p>
42 | 
43 |     </div>
44 |   </div>
45 | 
46 |   <div class="bgimg-1">
47 |     <div class="caption">
48 |       <span class="border">{{"AboutUs.thankyou" | translate}}</span>
49 |     </div>
50 |   </div>
51 | 
52 |   <!--jQuery CDN link-->
53 |   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'> </script>
54 | 
55 |   <script src="js/script.js"></script>
56 | </div>


--------------------------------------------------------------------------------
/src/app/components/about-us/about-us.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-about-us',
 5 |   templateUrl: './about-us.component.html',
 6 |   styleUrls: ['./about-us.component.css']
 7 | })
 8 | export class AboutUsComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/components/cart-page/cart-products/cart-products.component.css:
--------------------------------------------------------------------------------
 1 | .cart-container{
 2 |   display: block;
 3 |   max-width: 900px;
 4 |   overflow-x: auto;
 5 | }
 6 | .table{
 7 |   border: 1px solid #e8e8e8;
 8 |   border-collapse: collapse;
 9 |  
10 | }
11 | 
12 | .table td,
13 | .table th{
14 |   vertical-align: middle;
15 |   padding: 15px;
16 | }
17 | 
18 | .table th{
19 |   border-bottom: 1px solid #e8e8e8;
20 |   line-height: 2;
21 |   letter-spacing: 2px;
22 |   font-size: 18px;
23 |   font-weight: 500;
24 | }
25 | 
26 | .table td .product-name{
27 |   line-height: 2;
28 |   letter-spacing: 1.5px;
29 | }
30 | 
31 | .table td img{
32 |   width: 70px ;
33 |   height: 85px ;
34 | }
35 | 
36 | .table td input{
37 |   width: 110px;
38 |   padding: 5px 30px;
39 |   text-align: center;
40 | }
41 | 
42 | .table .bi{
43 |   cursor: pointer;
44 |   margin: auto 0;
45 | }
46 | 
47 | .table td .bi-dash,
48 | .table td .bi-plus{
49 |   position: absolute;
50 |   top: 50%;
51 |   transform: translateY(-50%);
52 | }
53 | 
54 | .table td .bi-dash{
55 |   left: 25px;
56 | }
57 | 
58 | .table td .bi-plus{
59 |   left: 95px;
60 | }
61 | 
62 | .table td .bi-x:hover {
63 |   color: #A20A0A;
64 | }
65 | 
66 | .table tfoot button{
67 |   padding: 8px 15px;
68 |   text-transform: uppercase;
69 |   border: 2px solid #A20A0A;
70 |   transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
71 |   color: white;
72 |   background-color: #A20A0A;
73 | }
74 | 
75 | 
76 | .table tfoot button:hover{
77 |   background-color: transparent;
78 |   color: black;
79 | }


--------------------------------------------------------------------------------
/src/app/components/cart-page/cart-products/cart-products.component.html:
--------------------------------------------------------------------------------
 1 | <div class="cart-container">
 2 |   <table class="table w-100" *ngIf="cartProducts">
 3 |     <thead>
 4 |       <th colspan="2">{{ "cart.productName" | translate }}</th>
 5 |       <th colspan="1">{{ "cart.productPrice" | translate }}</th>
 6 |       <th colspan="1">{{ "cart.productQuantity" | translate }}</th>
 7 |       <th colspan="1">{{ "cart.productTotalPrice" | translate }}</th>
 8 |       <th colspan="1"></th>
 9 |     </thead>
10 |     <tbody>
11 |       <tr *ngFor="let product of cartProducts">
12 |         <td colspan="2 d-flex">
13 |           <img [src]="product.productId.images[0]" class="me-3" alt="" />
14 |           <p class="product-name d-inline-block">
15 |             {{ product.productId.name }}
16 |           </p>
17 |         </td>
18 |         <td colspan="1">EGP {{ product.productId.actualPrice }}</td>
19 |         <td colspan="1" class="position-relative">
20 |           <i
21 |             class="bi bi-dash fs-5 pointer"
22 |             (click)="decrementQuantity(product)"
23 |           ></i>
24 |           <input
25 |             type="text"
26 |             name="quantity"
27 |             id="quantity"
28 |             min="1"
29 |             [(ngModel)]="product.quantity"
30 |             (change)="changeQuantity(product)"
31 |           />
32 |           <i class="bi bi-plus fs-5" (click)="incrementQuantity(product)"></i>
33 |         </td>
34 |         <td colspan="1">
35 |           EGP {{ product.productId.actualPrice * product.quantity }}
36 |         </td>
37 |         <td colspan="1">
38 |           <i class="bi bi-x fs-4" (click)="deleteProduct(product)"></i>
39 |         </td>
40 |       </tr>
41 |     </tbody>
42 |     <tfoot>
43 |       <tr>
44 |         <td colspan="6">
45 |           <div class="d-flex justify-content-between">
46 |             <a routerLink="/products" class="text-decoration-none text-dark">
47 |               <i
48 |                 class="bi bi-chevron-double-left"
49 |                 style="vertical-align: middle"
50 |               >
51 |                 {{ "cart.backToShopping" | translate }}</i
52 |               >
53 |             </a>
54 |             <div>
55 |               <button (click)="clearCart()">
56 |                 {{ "cart.clear" | translate }}
57 |               </button>
58 |             </div>
59 |           </div>
60 |         </td>
61 |       </tr>
62 |     </tfoot>
63 |   </table>
64 | </div>
65 | 


--------------------------------------------------------------------------------
/src/app/components/cart-page/cart-products/cart-products.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { CartProductsComponent } from './cart-products.component';
 4 | 
 5 | describe('CartProductsComponent', () => {
 6 |   let component: CartProductsComponent;
 7 |   let fixture: ComponentFixture<CartProductsComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ CartProductsComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(CartProductsComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/cart-page/cart/cart.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { CartComponent } from './cart.component';
 4 | 
 5 | describe('CartComponent', () => {
 6 |   let component: CartComponent;
 7 |   let fixture: ComponentFixture<CartComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [CartComponent]
12 |     });
13 |     fixture = TestBed.createComponent(CartComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/cart-page/empty-cart/empty-cart.component.css:
--------------------------------------------------------------------------------
 1 | button{
 2 |   padding: 10px 50px;
 3 |   border: 2px solid #A20A0A;
 4 |   margin: 5px;
 5 |   border-radius: 5px;
 6 | }
 7 | 
 8 | .goBack{
 9 |   background-color: transparent;
10 |   transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
11 | }
12 | 
13 | .goBack:hover{
14 |   background-color: #A20A0A;
15 |   color: white;
16 | }
17 | 
18 | .shop{
19 |   background-color: #A20A0A;
20 |   color: white;
21 |   transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
22 | }
23 | 
24 | .shop:hover{
25 |   background-color: transparent;
26 |   color: black;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app/components/cart-page/empty-cart/empty-cart.component.html:
--------------------------------------------------------------------------------
1 | <div class="col-12 col-md-6 mx-auto d-flex flex-column justify-content-center">
2 |   <img src="../../../assets/Images/emptycart.jpg" class="empty-cart-img mx-auto col-5" alt="Empty Cart">
3 |   <p class="fs-5 fw-bold mb-0 pt-0 mt-3 text-center"> {{ "emptyCart.empty" | translate }} </p>
4 |   <p class="text-center ">{{ "emptyCart.paragraph" | translate }}.</p>
5 |   <div class="btns text-center">
6 |     <button class="goBack" (click)="goBack()">{{ "emptyCart.goBack" | translate }}</button>
7 |     <button class="shop" routerLink="/products">{{ "emptyCart.startShopping" | translate }}</button>
8 |   </div>
9 | </div>


--------------------------------------------------------------------------------
/src/app/components/cart-page/empty-cart/empty-cart.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { EmptyCartComponent } from './empty-cart.component';
 4 | 
 5 | describe('EmptyCartComponent', () => {
 6 |   let component: EmptyCartComponent;
 7 |   let fixture: ComponentFixture<EmptyCartComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ EmptyCartComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(EmptyCartComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/cart-page/empty-cart/empty-cart.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { Location } from '@angular/common';
 3 | 
 4 | @Component({
 5 |   selector: 'app-empty-cart',
 6 |   templateUrl: './empty-cart.component.html',
 7 |   styleUrls: ['./empty-cart.component.css'],
 8 | })
 9 | export class EmptyCartComponent {
10 |   constructor(private location: Location) {}
11 | 
12 |   goBack(): void {
13 |     this.location.back();
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/components/checkout/checkout.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { CheckoutComponent } from './checkout.component';
 4 | 
 5 | describe('CheckoutComponent', () => {
 6 |   let component: CheckoutComponent;
 7 |   let fixture: ComponentFixture<CheckoutComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [CheckoutComponent]
12 |     });
13 |     fixture = TestBed.createComponent(CheckoutComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/client-orders/client-orders.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ClientOrdersComponent } from './client-orders.component';
 4 | 
 5 | describe('ClientOrdersComponent', () => {
 6 |   let component: ClientOrdersComponent;
 7 |   let fixture: ComponentFixture<ClientOrdersComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ClientOrdersComponent]
12 |     });
13 |     fixture = TestBed.createComponent(ClientOrdersComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/contact-us/contact-us.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ContactUsComponent } from './contact-us.component';
 4 | 
 5 | describe('ContactUsComponent', () => {
 6 |   let component: ContactUsComponent;
 7 |   let fixture: ComponentFixture<ContactUsComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ ContactUsComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(ContactUsComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/contact-us/contact-us.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-contact-us',
 5 |   templateUrl: './contact-us.component.html',
 6 |   styleUrls: ['./contact-us.component.css']
 7 | })
 8 | export class ContactUsComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/components/create-product/add-new-product.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { AddNewProductComponent } from './add-new-product.component';
 4 | 
 5 | describe('AddNewProductComponent', () => {
 6 |   let component: AddNewProductComponent;
 7 |   let fixture: ComponentFixture<AddNewProductComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ AddNewProductComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(AddNewProductComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/create-workshop/create-workshop.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { CreateWorkshopComponent } from './create-workshop.component';
 4 | 
 5 | describe('CreateWorkshopComponent', () => {
 6 |   let component: CreateWorkshopComponent;
 7 |   let fixture: ComponentFixture<CreateWorkshopComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [CreateWorkshopComponent]
12 |     });
13 |     fixture = TestBed.createComponent(CreateWorkshopComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/edit-product/edit-product.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { EditProductComponent } from './edit-product.component';
 4 | 
 5 | describe('EditProductComponent', () => {
 6 |   let component: EditProductComponent;
 7 |   let fixture: ComponentFixture<EditProductComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [EditProductComponent]
12 |     });
13 |     fixture = TestBed.createComponent(EditProductComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/edit-workshop/edit-workshop.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { EditWorkshopComponent } from './edit-workshop.component';
 4 | 
 5 | describe('EditWorkshopComponent', () => {
 6 |   let component: EditWorkshopComponent;
 7 |   let fixture: ComponentFixture<EditWorkshopComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [EditWorkshopComponent]
12 |     });
13 |     fixture = TestBed.createComponent(EditWorkshopComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/favorite-page/empty-favourites/empty-favourites.component.css:
--------------------------------------------------------------------------------
 1 | button{
 2 |   padding: 10px 50px;
 3 |   border: 2px solid #A20A0A;
 4 |   margin: 5px;
 5 |   border-radius: 5px;
 6 | }
 7 | 
 8 | .shop{
 9 |   background-color: #A20A0A;
10 |   color: white;
11 |   transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
12 | }
13 | 
14 | .shop:hover{
15 |   background-color: transparent;
16 |   color: black;
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app/components/favorite-page/empty-favourites/empty-favourites.component.html:
--------------------------------------------------------------------------------
1 | <div class="col-12 col-md-6 mx-auto d-flex flex-column justify-content-center">
2 |   <img src="../../../assets/Images/emptyWishList.jpg" class="empty-cart-img mx-auto col-5" alt="Empty Cart">
3 |   <p class="fw-bold mb-0 pt-0 mt-3 text-center"style="font-size: 25px"> {{ "emptyWishList.empty" | translate }} </p>
4 |   <p class="text-center ">{{ "emptyWishList.paragraph" | translate }}.</p>
5 |   <div class="btns text-center">
6 |     <button class="shop" routerLink="/products">{{ "emptyWishList.goProducts" | translate }}</button>
7 |   </div>
8 | </div>


--------------------------------------------------------------------------------
/src/app/components/favorite-page/empty-favourites/empty-favourites.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { EmptyFavouritesComponent } from './empty-favourites.component';
 4 | 
 5 | describe('EmptyFavouritesComponent', () => {
 6 |   let component: EmptyFavouritesComponent;
 7 |   let fixture: ComponentFixture<EmptyFavouritesComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [EmptyFavouritesComponent]
12 |     });
13 |     fixture = TestBed.createComponent(EmptyFavouritesComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/favorite-page/empty-favourites/empty-favourites.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-empty-favourites',
 5 |   templateUrl: './empty-favourites.component.html',
 6 |   styleUrls: ['./empty-favourites.component.css']
 7 | })
 8 | export class EmptyFavouritesComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/components/favorite-page/favourite-products/favourite-products.component.html:
--------------------------------------------------------------------------------
 1 | <div class="col-md-12">
 2 |   <div class="wsk-cp-product">
 3 |     <i
 4 |       class="bi bi-x fs-3 removeProduct"
 5 |       (click)="deleteProduct(product.product._id)"
 6 |     ></i>
 7 |     <div class="wsk-cp-img">
 8 |       <img
 9 |         [src]="product.product.images[0]"
10 |         alt="Product"
11 |         class="img-responsive"
12 |       />
13 |     </div>
14 |     <div class="wsk-cp-text">
15 |       <div class="title-product">
16 |         <h3>{{ product.product.name }}</h3>
17 |       </div>
18 |       <div class="category-prod text-muted">
19 |         <p>
20 |           {{ product.product.category }}
21 |         </p>
22 |       </div>
23 |       <div class="card-footer">
24 |         <div class="wcf-left">
25 |           <span class="price">$ {{ product.product.price }}</span>
26 |         </div>
27 |         <div class="wcf-right d-flex">
28 |           <a class="my-auto" (click)="addToCart(product._id)"
29 |             ><i class="bi bi-cart-plus fs-4"></i
30 |           ></a>
31 |         </div>
32 |       </div>
33 |     </div>
34 |   </div>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/src/app/components/favorite-page/favourite-products/favourite-products.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { FavouriteProductsComponent } from './favourite-products.component';
 4 | 
 5 | describe('FavouriteProductsComponent', () => {
 6 |   let component: FavouriteProductsComponent;
 7 |   let fixture: ComponentFixture<FavouriteProductsComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [FavouriteProductsComponent]
12 |     });
13 |     fixture = TestBed.createComponent(FavouriteProductsComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/favorite-page/favourite-products/favourite-products.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input } from '@angular/core';
 2 | import { FavouriteService } from 'src/app/services/favorite/favourite.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-favourite-products',
 6 |   templateUrl: './favourite-products.component.html',
 7 |   styleUrls: ['./favourite-products.component.css'],
 8 | })
 9 | export class FavouriteProductsComponent {
10 |   @Input() product: any;
11 | 
12 |   constructor(private favouriteService: FavouriteService) {}
13 | 
14 |   deleteProduct(productId: any) {
15 |     this.favouriteService.deleteProduct(productId).subscribe({
16 |       next: () => {
17 |         this.favouriteService.favoritesUpdatedSubject.next();
18 |       },
19 |       error: (error) => {
20 |         console.log(error);
21 |       },
22 |     });
23 |   }
24 | 
25 |   addToCart(productId: any){
26 | 
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/app/components/favorite-page/favourite/favourite.component.css:
--------------------------------------------------------------------------------
 1 | .clear button{
 2 |   padding: 8px 15px;
 3 |   text-transform: uppercase;
 4 |   border: 2px solid #A20A0A;
 5 |   transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
 6 |   color: white;
 7 |   background-color: #A20A0A;
 8 | }
 9 | 
10 | 
11 | .clear button:hover{
12 |   background-color: transparent;
13 |   color: black;
14 | }


--------------------------------------------------------------------------------
/src/app/components/favorite-page/favourite/favourite.component.html:
--------------------------------------------------------------------------------
 1 | <div class="" style="padding: 100px 50px">
 2 |   <div
 3 |     class="clear d-flex justify-content-end"
 4 |     *ngIf="favouriteProducts && favouriteProducts.length > 0"
 5 |   >
 6 |     <button (click)="clearFavourite()">
 7 |       {{ "favourite.clear" | translate }}
 8 |     </button>
 9 |   </div>
10 |   <div
11 |     *ngIf="favouriteProducts && favouriteProducts.length > 0"
12 |     class="d-flex justify-content-center gap-4 row flex-wrap"
13 |   >
14 |     <div
15 |       class="product col-12 col-sm-6 col-md-4 col-lg-3"
16 |       *ngFor="let product of favouriteProducts"
17 |     >
18 |       <app-favourite-products [product]="product"></app-favourite-products>
19 |     </div>
20 |   </div>
21 |   <div
22 |     *ngIf="!favouriteProducts || favouriteProducts.length === 0"
23 |     class="d-flex justify-content-center"
24 |   >
25 |     <app-empty-favourites></app-empty-favourites>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/src/app/components/favorite-page/favourite/favourite.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { FavouriteComponent } from './favourite.component';
 4 | 
 5 | describe('FavouriteComponent', () => {
 6 |   let component: FavouriteComponent;
 7 |   let fixture: ComponentFixture<FavouriteComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [FavouriteComponent]
12 |     });
13 |     fixture = TestBed.createComponent(FavouriteComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/favorite-page/favourite/favourite.component.ts:
--------------------------------------------------------------------------------
 1 | import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 2 | import { FavouriteService } from 'src/app/services/favorite/favourite.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-favourite',
 6 |   templateUrl: './favourite.component.html',
 7 |   styleUrls: ['./favourite.component.css'],
 8 | })
 9 | export class FavouriteComponent implements OnInit {
10 |   favouriteProducts: any[] = [];
11 |   constructor(private favouriteService: FavouriteService, private cdr: ChangeDetectorRef) {}
12 | 
13 |   ngOnInit(): void {
14 |     this.getFavouriteProducts();
15 |     this.favouriteService.favoritesUpdated$.subscribe(() => {
16 |       this.getFavouriteProducts();
17 |       this.cdr.detectChanges();
18 |     });
19 |   }
20 | 
21 |   clearFavourite() {
22 |     this.favouriteService.clearFavourite().subscribe({
23 |       next: () => {
24 |         this.favouriteService.favoritesUpdatedSubject.next();
25 |       },
26 |       error: (error) => {
27 |         console.log(error);
28 |       },
29 |     });
30 |   }
31 | 
32 |   getFavouriteProducts() {
33 |     this.favouriteService.getFavouritesProducts().subscribe({
34 |       next: (response: any) => {
35 |         if (response.data && response.data.products) {
36 |           this.favouriteProducts = response.data.products;
37 |         } else {
38 |           this.favouriteProducts = [];
39 |         }
40 |       },
41 |       error: (error) => {
42 |         console.log(error);
43 |       },
44 |     });
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/app/components/footer/footer.component.css:
--------------------------------------------------------------------------------
  1 | .footer {
  2 |   z-index: 1;
  3 |   --footer-background: #0f0f0f;
  4 |   display: grid;
  5 |   position: relative;
  6 |   grid-area: footer;
  7 |   min-height: 10rem;
  8 |   left:0;
  9 |   bottom: 0;
 10 |   width: 100%;
 11 | }
 12 | .footer .content {
 13 |   z-index: 2;
 14 |   display: grid;
 15 |   background: var(--footer-background);
 16 | }
 17 | 
 18 | .footer .content a, .footer .content p {
 19 |   color: #f5f7fa;
 20 |   text-decoration: none;
 21 |   margin-right: 70%;
 22 | }
 23 | 
 24 | .footer .content b {
 25 |   color: white;
 26 |   margin-right: 70%;
 27 | }
 28 | 
 29 | .footer .content p {
 30 |   margin: 0;
 31 |   font-size: 1.2rem;
 32 | }
 33 | 
 34 | .logo {
 35 |   font-family: 'Delicious Handrawn', cursive;
 36 |   font-size: 40px;
 37 | }
 38 | 
 39 | h1{
 40 |   color: white;
 41 |   font-size: 15px;
 42 | }
 43 | 
 44 | 
 45 | .social-links,
 46 | .flex-center {
 47 |   display: flex;
 48 |   justify-content: center;
 49 |   align-items: center;
 50 | }
 51 | 
 52 | .social-btn {
 53 |   cursor: pointer;
 54 |   height: 40px;
 55 |   width: 40px;
 56 |   font-family: 'Titillium Web', sans-serif;
 57 |   color: #333;
 58 |   border-radius: 10px;
 59 |   box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
 60 |   background: white;
 61 |   margin: 5px;
 62 |   transition: 0.3s;
 63 |   justify-content: center;
 64 | }
 65 | 
 66 | .social-btn svg {
 67 |   height: 24px;
 68 |   width: 24px;
 69 | }
 70 | 
 71 | .social-btn span {
 72 |   width: 0px;
 73 |   overflow: hidden;
 74 |   transition: 0.3s;
 75 |   text-align: center;
 76 |   margin-left: 5px;
 77 | }
 78 | 
 79 | .social-btn:hover {
 80 |   width: 150px;
 81 |   border-radius: 5px;
 82 | }
 83 | 
 84 | .social-btn:hover span {
 85 |   padding: 2px;
 86 |   width: 80px;
 87 | }
 88 | 
 89 | #twitter svg {
 90 |   fill: #1da1f2;
 91 | }
 92 | 
 93 | #linkedin svg {
 94 |   fill: #0e76a8;
 95 | }
 96 | 
 97 | #github {
 98 |   fill: #333;
 99 | }
100 | 
101 | .cr-con{
102 |   background-color:black ;
103 | }
104 | 
105 | 


--------------------------------------------------------------------------------
/src/app/components/footer/footer.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { FooterComponent } from './footer.component';
 4 | 
 5 | describe('FooterComponent', () => {
 6 |   let component: FooterComponent;
 7 |   let fixture: ComponentFixture<FooterComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ FooterComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(FooterComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/footer/footer.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-footer',
 5 |   templateUrl: './footer.component.html',
 6 |   styleUrls: ['./footer.component.css']
 7 | })
 8 | export class FooterComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/components/forget-password-page/request-reset/request-reset.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container d-flex align-items-center forget-password-container" style="height: 100vh; width: 100%">
 2 |   <div class="row g-0" style="width: 100%">
 3 |     <div class="form-container">
 4 |       <div class="wrapper container-fluid form card-body pb-3 d-flex flex-column">
 5 |         <div class="d-flex mb-5">
 6 |         </div>
 7 |         <div class="justify-content-center">
 8 |           <div class="animatedCloud d-flex justify-content-center">
 9 |             <div class="wrapper">
10 |               <div class="cloud">
11 |                 <div class="cloud_left"></div>
12 |                 <div class="cloud_right"></div>
13 |               </div>
14 |               <div class="rain">
15 |                 <div class="drop"></div>
16 |                 <div class="drop"></div>
17 |                 <div class="drop"></div>
18 |                 <div class="drop"></div>
19 |                 <div class="drop"></div>
20 |               </div>
21 |               <div class="surface">
22 |                 <div class="hit"></div>
23 |                 <div class="hit"></div>
24 |                 <div class="hit"></div>
25 |                 <div class="hit"></div>
26 |                 <div class="hit"></div>
27 |               </div>
28 |             </div>
29 |           </div>
30 |           <form action="" [formGroup]="RequestResetForm" (ngSubmit)="RequestResetUser(RequestResetForm)">
31 |             <h2>Forgot Password?</h2>
32 |             <input type="email" placeholder="Email" name="email" formControlName="email" />
33 |             <div class="error" *ngIf="errorMessage">{{ errorMessage }}</div>
34 |             <div class="error" *ngIf="successMessage">{{ successMessage }}</div>
35 |             <span *ngIf="!RequestResetForm.get('email').valid && !IsvalidForm" class="help-block text-center">Please enter a valid email!</span>
36 |             <div class="d-flex justify-content-center align-items-center">
37 |               <button type="submit"><img src="assets/svg/sendmail.svg" alt="" /><span>Send Email</span></button>
38 |             </div>
39 |           </form>
40 |         </div>
41 |       </div>
42 |     </div>
43 |   </div>
44 | 
45 | 


--------------------------------------------------------------------------------
/src/app/components/forget-password-page/request-reset/request-reset.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { RequestResetComponent } from './request-reset.component';
 4 | 
 5 | describe('RequestResetComponent', () => {
 6 |   let component: RequestResetComponent;
 7 |   let fixture: ComponentFixture<RequestResetComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ RequestResetComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(RequestResetComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/forget-password-page/request-reset/request-reset.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { FormControl, FormGroup, Validators } from '@angular/forms';
 3 | import { Router } from '@angular/router';
 4 | import { AuthService } from 'src/app/services/auth/auth.service';
 5 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 6 | import { SuccessModalComponent } from 'src/app/components/forget-password-page/success-modal/success-modal.component';
 7 | @Component({
 8 |   selector: 'app-request-reset',
 9 |   templateUrl: './request-reset.component.html',
10 |   styleUrls: ['./request-reset.component.css']
11 | })
12 | export class RequestResetComponent implements OnInit {
13 |   RequestResetForm: any;
14 |   forbiddenEmails: any;
15 |   errorMessage: any;
16 |   successMessage: any;
17 |   IsvalidForm = true;
18 | 
19 |   constructor(
20 |     private authService: AuthService,
21 |     private router: Router,
22 |     private modalService: NgbModal
23 |   ) {}
24 | 
25 |   ngOnInit() {
26 |     this.RequestResetForm = new FormGroup({
27 |       email: new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
28 |     });
29 |   }
30 | 
31 |   RequestResetUser(form: any) {
32 |     if (form.valid) {
33 |       this.IsvalidForm = true;
34 |       this.authService.requestReset(this.RequestResetForm.value).subscribe({
35 |         next: (data) => {
36 |           this.RequestResetForm.reset();
37 |           this.successMessage = 'Reset password link sent to email successfully.';
38 |           this.modalService.open(SuccessModalComponent, { centered: true });
39 |         },
40 |         error: (err) => {
41 |           if (err.error.message) {
42 |             this.errorMessage = err.error.message;
43 |           }
44 |         },
45 |       });
46 |     } else {
47 |       this.IsvalidForm = false;
48 |     }
49 |   }
50 | }


--------------------------------------------------------------------------------
/src/app/components/forget-password-page/response-reset-password/response-reset-password.component.html:
--------------------------------------------------------------------------------
 1 | <div
 2 |   class="container d-flex align-items-center forget-password-container"
 3 |   style="height: 100vh; width: 100%"
 4 | >
 5 |   <div class="row g-0" style="width: 100%">
 6 |     <div class="form-container">
 7 |       <div
 8 |         class="wrapper container-fluid form card-body pb-3 d-flex flex-column"
 9 |       >
10 |         <div class="d-flex mb-5">
11 |           <a href="" class="threadsAndBeads"
12 |             ><h1 class="logo">Threads & Beads</h1></a
13 |           >
14 |         </div>
15 |         <div class="justify-content-center">
16 |           <form
17 |             action=""
18 |             [formGroup]="ResponseResetForm"
19 |             (ngSubmit)="ResetPassword(ResponseResetForm)"
20 |           >
21 |             <h2>Set New Password</h2>
22 |             <input
23 |               _ngcontent-c0=""
24 |               class="form-control form-control-lg"
25 |               placeholder="Password"
26 |               type="password"
27 |               id="password"
28 |               formControlName="password"
29 |             />
30 | 
31 |             <div id="errorMsg" class="error" *ngIf="errorMessage">
32 |               <span>{{ errorMessage }}</span>
33 |             </div>
34 |             <div id="successMsg" class="error" *ngIf="successMessage">
35 |               <span>{{ successMessage }}</span>
36 |             </div>
37 |             <span
38 |               *ngIf="
39 |                 !ResponseResetForm.get('password').valid && !IsResetFormValid
40 |               "
41 |               class="help-block"
42 |               >Password is required with at least 6 characters.</span
43 |             >
44 |             <div class="d-flex justify-content-center align-items-center">
45 |               <button type="submit">
46 |                 <img src="assets/svg/sendmail.svg" alt="" />
47 |                 <span>Update Password</span>
48 |               </button>
49 |             </div>
50 |           </form>
51 |         </div>
52 |       </div>
53 |     </div>
54 |   </div>
55 | </div>
56 | 


--------------------------------------------------------------------------------
/src/app/components/forget-password-page/response-reset-password/response-reset-password.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ResponseResetPasswordComponent } from './response-reset-password.component';
 4 | 
 5 | describe('ResposeResetPasswordComponent', () => {
 6 |   let component: ResponseResetPasswordComponent;
 7 |   let fixture: ComponentFixture<ResponseResetPasswordComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ ResponseResetPasswordComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(ResponseResetPasswordComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/forget-password-page/success-modal/success-modal.component.css:
--------------------------------------------------------------------------------
 1 | .loader {
 2 |   position: relative;
 3 |   border-style: solid;
 4 |   box-sizing: border-box;
 5 |   border-width: 40px 60px 30px 60px;
 6 |   border-color: #3760C9 #96DDFC #96DDFC #36BBF7;
 7 |   animation: envFloating 1s ease-in infinite alternate;
 8 | }
 9 | 
10 | .loader:after {
11 |   content: "";
12 |   position: absolute;
13 |   right: 62px;
14 |   top: -40px;
15 |   height: 70px;
16 |   width: 50px;
17 |   background-image: linear-gradient(#fff 45px, transparent 0),
18 |     linear-gradient(#fff 45px, transparent 0),
19 |     linear-gradient(#fff 45px, transparent 0);
20 |   background-repeat: no-repeat;
21 |   background-size: 30px 4px;
22 |   background-position: 0px 11px, 8px 35px, 0px 60px;
23 |   animation: envDropping 0.75s linear infinite;
24 | }
25 | 
26 | @keyframes envFloating {
27 |   0% {
28 |     transform: translate(-2px, -5px)
29 |   }
30 | 
31 |   100% {
32 |     transform: translate(0, 5px)
33 |   }
34 | }
35 | 
36 | @keyframes envDropping {
37 |   0% {
38 |     background-position: 100px 11px, 115px 35px, 105px 60px;
39 |     opacity: 1;
40 |   }
41 | 
42 |   50% {
43 |     background-position: 0px 11px, 20px 35px, 5px 60px;
44 |   }
45 | 
46 |   60% {
47 |     background-position: -30px 11px, 0px 35px, -10px 60px;
48 |   }
49 | 
50 |   75%,
51 |   100% {
52 |     background-position: -30px 11px, -30px 35px, -30px 60px;
53 |     opacity: 0;
54 |   }
55 | }
56 | 
57 | .emailContainer{
58 |   transform: translate(166px, 10px);
59 |   width: 100px;
60 | }
61 | 
62 | /* .modal-content{
63 |   background-color: red !important;
64 | } */


--------------------------------------------------------------------------------
/src/app/components/forget-password-page/success-modal/success-modal.component.html:
--------------------------------------------------------------------------------
 1 | <div class="modal-header"style=" background-color: #00000047 !important;">
 2 |   <h5 class="modal-title">Success!</h5>
 3 |   <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 4 |     <span aria-hidden="true">&times;</span>
 5 |   </button> -->
 6 | </div>
 7 | <div class="modal-body" style="  background-color: #00000047 !important;">
 8 |   <p>An email has been sent to your email address with further instructions on how to reset your password.</p>
 9 |   <div class="emailContainer">
10 |     <div class="loader"></div>
11 |   </div>
12 | </div>
13 | <div class="modal-footer" style="  background-color: #00000047 !important;">
14 |   <button type="button" class="btn btn-danger" (click)="closeModal()">Close</button>


--------------------------------------------------------------------------------
/src/app/components/forget-password-page/success-modal/success-modal.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SuccessModalComponent } from './success-modal.component';
 4 | 
 5 | describe('SuccessModalComponent', () => {
 6 |   let component: SuccessModalComponent;
 7 |   let fixture: ComponentFixture<SuccessModalComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [SuccessModalComponent]
12 |     });
13 |     fixture = TestBed.createComponent(SuccessModalComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/forget-password-page/success-modal/success-modal.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 3 | 
 4 | @Component({
 5 |   selector: 'app-success-modal',
 6 |   templateUrl: './success-modal.component.html',
 7 |   styleUrls: ['./success-modal.component.css']
 8 | })
 9 | export class SuccessModalComponent {
10 |   constructor(public activeModal: NgbActiveModal) {}
11 | 
12 |   closeModal() {
13 |     this.activeModal.dismiss();
14 |   }
15 | }


--------------------------------------------------------------------------------
/src/app/components/go-to-login/go-to-login.component.css:
--------------------------------------------------------------------------------
 1 | .welcome-container {
 2 |   background-image: url("/assets/Images/pexels-min-an-713661.jpg");
 3 |   background-position: center;
 4 |   background-repeat: no-repeat;
 5 |   background-size: cover;
 6 |   height: 100vh;
 7 | }
 8 | 
 9 | .vertical-line {
10 |   position: relative;
11 |   width: 1px;
12 |   height: 100%;
13 |   left: 7%;
14 | }
15 | .welcome-logo {
16 |   font-family: "Times New Roman", serif;
17 |   color: #fff;
18 | }
19 | .vertical-line::before {
20 |   content: "";
21 |   position: absolute;
22 |   top: 0;
23 |   left: 0;
24 |   height: 100%;
25 |   width: 100%;
26 |   background: linear-gradient(
27 |     to bottom,
28 |     rgba(255, 255, 255, 0),
29 |     rgba(255, 255, 255, 0.75),
30 |     rgba(255, 255, 255, 0)
31 |   );
32 | }
33 | hr {
34 |   border: 0;
35 |   height: 1px;
36 |   width: 200px;
37 |   background-image: linear-gradient(
38 |     to right,
39 |     rgba(255, 255, 255, 0),
40 |     rgba(255, 255, 255, 0.75),
41 |     rgba(255, 255, 255, 0)
42 |   );
43 | }
44 | .paragraph-container {
45 |   color: #fff;
46 |   font-size: 1.3em;
47 | }
48 | .words-container {
49 |   width: 50%;
50 |   background-color: rgb(69, 98, 104, 0.65);
51 |   height: 100%;
52 | }
53 | .welcome-word h1 {
54 |   font-family: "Times New Roman", serif;
55 |   font-size: 10em;
56 |   line-height: 0.9;
57 |   font-weight: 1000;
58 |   color: #fff;
59 |   margin-top: 20%;
60 |   margin-left: 25%;
61 | }
62 | 
63 | .welcome-word span {
64 |   color: #f9d949;
65 | }
66 | 
67 | .login-button {
68 |   padding: 10px 50px;
69 |   border: none;
70 |   outline: none;
71 |   font-family: "Times New Roman", serif;
72 |   font-size: 18px;
73 |   cursor: pointer;
74 |   background-color: white;
75 |   color: #3c486b;
76 | }
77 | @media only screen and (max-width: 768px) {
78 |   .welcome-container {
79 |     min-height: auto;
80 |   }
81 |   .paragraph-container {
82 |     display: none !important;
83 |   }
84 |   .welcome-word h1 {
85 |     font-size: 5em;
86 |     margin-top: 60%;
87 |   }
88 |   .login-button {
89 |     margin-top: 30px;
90 |     margin-left: -30%;
91 |   }
92 | }
93 | 


--------------------------------------------------------------------------------
/src/app/components/go-to-login/go-to-login.component.html:
--------------------------------------------------------------------------------
 1 | <div class="welcome-container">
 2 |   <div class="words-container d-flex justify-content-center">
 3 |     <div class="vertical-line me-5"></div>
 4 |     <div>
 5 |       <div class="welcome-word">
 6 |         <h1 class="me-5">Welc<span>o</span>me</h1>
 7 |       </div>
 8 |       <div class="d-flex me-5 justify-content-end">
 9 |         <hr class="center-ball" />
10 |         <h4 class="welcome-logo">To Threads & Beads</h4>
11 |       </div>
12 |       <div class="paragraph-container container p-5 d-flex">
13 |         <p>
14 |           {{ "WelcomePage.message" | translate }}
15 |         </p>
16 |       </div>
17 |       <div class="d-flex justify-content-end">
18 |         <a href="/auth"><button class="login-button">{{ "WelcomePage.login" | translate }}</button></a>
19 |       </div>
20 |     </div>
21 |   </div>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/src/app/components/go-to-login/go-to-login.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { GoToLoginComponent } from './go-to-login.component';
 4 | 
 5 | describe('GoToLoginComponent', () => {
 6 |   let component: GoToLoginComponent;
 7 |   let fixture: ComponentFixture<GoToLoginComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [GoToLoginComponent]
12 |     });
13 |     fixture = TestBed.createComponent(GoToLoginComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/go-to-login/go-to-login.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-go-to-login',
 5 |   templateUrl: './go-to-login.component.html',
 6 |   styleUrls: ['./go-to-login.component.css']
 7 | })
 8 | export class GoToLoginComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/banner/banner.component.html:
--------------------------------------------------------------------------------
 1 | <section>
 2 |   <div class="banner-slider h-100 w-100 d-flex">
 3 |     <div class="banner-content h-100 w-100 position-relative">
 4 |       <div class="banner-image h-100 w-100">
 5 |         <img src="../../../assets/Images/pexels-anna-shvets-5760814.jpg" alt="Image Slider" >
 6 |       </div>
 7 |       <div class="banner-info col-12 col-md-10 col-lg-9 col-xl-8">
 8 |         <h2 class="banner-title">{{"Banner.title1.1"| translate}} <span><br>{{"Banner.title1.2"| translate}}</span></h2>
 9 |         <p class="banner-description">{{"Banner.p1"| translate}}</p>
10 |         <a href="/workshops" class="banner-button">{{"Banner.btn1"| translate}}</a>
11 |       </div>
12 |     </div>
13 | 
14 |     <div class="banner-content h-100 w-100 position-relative">
15 |       <div class="banner-image h-100 w-100">
16 |         <img src="../../../assets/Images/banner1.jpg" alt="Image Slider" >
17 |       </div>
18 |       <div class="banner-info col-12 col-md-10 col-lg-9 col-xl-8">
19 |         <h2 class="banner-title">{{"Banner.title2.1"| translate}}<br>{{"Banner.title2.2"| translate}}</h2>
20 |         <p class="banner-description">{{"Banner.p2"| translate}}</p>
21 |         <a class="banner-button">{{"Banner.btn2"| translate}}</a>
22 |       </div>
23 |     </div>
24 | 
25 |     <div class="banner-content h-100 w-100 position-relative">
26 |       <div class="banner-image h-100 w-100">
27 |         <img src="../../../assets/Images/banner3.jpg" alt="Image Slider">
28 |       </div>
29 |       <div class="banner-info col-12 col-md-10 col-lg-9 col-xl-8">
30 |         <h2 class="banner-title">{{"Banner.title3"| translate}}</h2>
31 |         <p class="banner-description">{{"Banner.p3"| translate}}</p>
32 |         <a class="banner-button">{{"Banner.btn3"| translate}}</a>
33 |       </div>
34 |     </div>
35 |   </div>
36 | 
37 |   <ul class="slide-dashes d-flex justify-content-center">
38 |     <li class="active"><p></p></li>
39 |     <li><p></p></li>
40 |     <li><p></p></li>
41 |   </ul>
42 | 
43 | </section>
44 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/banner/banner.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { BannerComponent } from './banner.component';
 4 | 
 5 | describe('BannerComponent', () => {
 6 |   let component: BannerComponent;
 7 |   let fixture: ComponentFixture<BannerComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ BannerComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(BannerComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/banner/banner.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-banner',
 5 |   templateUrl: './banner.component.html',
 6 |   styleUrls: ['./banner.component.css'],
 7 | })
 8 | export class BannerComponent implements OnInit {
 9 |   slides!: NodeListOf<HTMLDivElement>;
10 |   dashes!: NodeListOf<HTMLLIElement>;
11 |   bannerInfo!: NodeListOf<HTMLDivElement>;
12 |   slideIndex: number = 0;
13 | 
14 |   ngOnInit() {
15 |     this.slides = document.querySelectorAll('.banner-content');
16 |     this.dashes = document.querySelectorAll('.slide-dashes li');
17 |     this.bannerInfo = document.querySelectorAll('.banner-info');
18 |     
19 |     this.bannerInfo[0].style.transform = 'translateY(-50%)';
20 |     
21 |     setInterval(() => {
22 |       this.MoveSlide(1);
23 |     }, 8000);
24 | 
25 |     this.dashes.forEach((dash, i) => {
26 |       dash.addEventListener('click', () => {
27 |         this.slideIndex = i;
28 |         this.MoveSlide(0);
29 |       });
30 |     });
31 |   }
32 | 
33 |   MoveSlide(n: any) {
34 |     this.slideIndex += n;
35 |     if (this.slideIndex >= this.slides.length) this.slideIndex = 0;
36 |     if (this.slideIndex < 0) this.slideIndex = this.slides.length - 1;
37 |     for (let i = 0; i < this.slides.length; i++) {
38 |       this.slides[i].style.transform = `translateX(${
39 |         -this.slideIndex * 100
40 |       }%)`;
41 |       this.bannerInfo[i].style.transform = 'translateY(-95%)';
42 |       if (this.dashes[i].classList.contains('active')) {
43 |         this.dashes[i].classList.remove('active');
44 |       }
45 |     }
46 | 
47 |     this.dashes[this.slideIndex].classList.add('active');
48 |     this.bannerInfo[this.slideIndex].style.transform = 'translateY(-50%)';
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/home/home.component.css:
--------------------------------------------------------------------------------
1 | hr {
2 |   border: 0;
3 |   height: 1px;
4 |   background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
5 | }


--------------------------------------------------------------------------------
/src/app/components/home-page/home/home.component.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   <app-banner></app-banner>
 3 |   <app-sellers-section></app-sellers-section>
 4 |   <hr class="center-ball" />
 5 |   <app-top2sellers></app-top2sellers>
 6 |   <hr class="center-ball" />
 7 |   <app-horizontall-scroll></app-horizontall-scroll>
 8 |   <hr class="center-ball" />
 9 |   <app-workshop-home-section></app-workshop-home-section>
10 |   <hr class="center-ball" />
11 |   <app-top-selling-products></app-top-selling-products>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/home/home.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HomeComponent } from './home.component';
 4 | 
 5 | describe('HomeComponent', () => {
 6 |   let component: HomeComponent;
 7 |   let fixture: ComponentFixture<HomeComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ HomeComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(HomeComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/home/home.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Product } from 'src/app/model/product.model';
 3 | import { ProductService } from 'src/app/services/product/product.service';
 4 | 
 5 | @Component({
 6 |   selector: 'app-home',
 7 |   templateUrl: './home.component.html',
 8 |   styleUrls: ['./home.component.css'],
 9 | })
10 | export class HomeComponent implements OnInit {
11 |   ngOnInit(): void {
12 |     document.documentElement.setAttribute('dir', 'ltr');
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/horizontall-scroll/horizontall-scroll.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HorizontallScrollComponent } from './horizontall-scroll.component';
 4 | 
 5 | describe('HorizontallScrollComponent', () => {
 6 |   let component: HorizontallScrollComponent;
 7 |   let fixture: ComponentFixture<HorizontallScrollComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ HorizontallScrollComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(HorizontallScrollComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/horizontall-scroll/horizontall-scroll.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-horizontall-scroll',
 5 |   templateUrl: './horizontall-scroll.component.html',
 6 |   styleUrls: ['./horizontall-scroll.component.css']
 7 | })
 8 | export class HorizontallScrollComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/sellers-section/sellers-section.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SellersSectionComponent } from './sellers-section.component';
 4 | 
 5 | describe('SellersSectionComponent', () => {
 6 |   let component: SellersSectionComponent;
 7 |   let fixture: ComponentFixture<SellersSectionComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ SellersSectionComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(SellersSectionComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/sellers-section/sellers-section.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-sellers-section',
 5 |   templateUrl: './sellers-section.component.html',
 6 |   styleUrls: ['./sellers-section.component.css']
 7 | })
 8 | export class SellersSectionComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/top-selling-products/top-selling-products.component.html:
--------------------------------------------------------------------------------
 1 | <div class="py-5">
 2 |   <h1
 3 |     class="title text-dark text-center"
 4 |     style="font-family: 'Delicious Handrawn', cursive"
 5 |   >
 6 |     {{ "topSellerHome.title" | translate }}
 7 |   </h1>
 8 |   <div class="slider" x-data="{start: true, end: false}">
 9 |     <div
10 |       class="slider__content"
11 |       x-ref="slider"
12 |       x-on:scroll.debounce="$refs.slider.scrollLeft == 0 ? start = true : start = false; Math.abs(($refs.slider.scrollWidth - $refs.slider.offsetWidth) - $refs.slider.scrollLeft) < 5 ? end = true : end = false;"
13 |     >
14 |       <div
15 |         class="slider__item"
16 |         style="width: 100px; height: 400px"
17 |         *ngFor="let product of products"
18 |       >
19 |         <div class="img-content">
20 |           <img class="slider__image" [src]="product.images[0]" alt="Image" />
21 |         </div>
22 |         <div class="slider__info d-flex flex-column justify-content-end">
23 |           <p class="title m-0 p-0">
24 |             {{ product.name }}<br /><span>EGP {{ product.price }}</span>
25 |           </p>
26 |           <div class="d-flex justify-content-between w-100">
27 |             <a
28 |               href="#"
29 |               class="details"
30 |               [routerLink]="['/user/productDetails', product._id]"
31 |             >
32 |               {{ "productCard.detailsBtn" | translate }}
33 |             </a>
34 | 
35 |             <ul class="sci m-0 p-0">
36 |               <li>
37 |                 <a (click)="addToCart(product._id)"
38 |                   ><i class="bi bi-cart-plus fs-5" style="color: #c8d8e4"></i
39 |                 ></a>
40 |               </li>
41 |               <li>
42 |                 <a (click)="toggleFavourite(product._id, $event)"
43 |                   ><i
44 |                     class="bi bi-heart-fill fs-5"
45 |                     id="{{ product._id }}"
46 |                     style="color: #c8d8e4"
47 |                   ></i
48 |                 ></a>
49 |               </li>
50 |             </ul>
51 |           </div>
52 |         </div>
53 |       </div>
54 |     </div>
55 |   </div>
56 | </div>
57 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/top-selling-products/top-selling-products.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { TopSellingProductsComponent } from './top-selling-products.component';
 4 | 
 5 | describe('TopSellingProductsComponent', () => {
 6 |   let component: TopSellingProductsComponent;
 7 |   let fixture: ComponentFixture<TopSellingProductsComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [TopSellingProductsComponent]
12 |     });
13 |     fixture = TestBed.createComponent(TopSellingProductsComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/top2sellers/top2sellers.component.html:
--------------------------------------------------------------------------------
 1 | <div class="wrapperMain">
 2 |   <section id="amazingTeam" class="clear">
 3 |     <div class="containerContent">
 4 |       <div class="set_size_section1">
 5 |         <h2 class="services_h2 center p-4">
 6 |           {{ "TopSellerSection.header" | translate }}
 7 |         </h2>
 8 |         <article class="article_center4 d-flex justify-content-center flex-wrap">
 9 |           <div class="md-modal md-effect-9" id="modal-9"></div>
10 |           <div class="col-12 col-sm-6 col-md-4" *ngFor="let seller of topSellers">
11 |             <div class="thumbnail">
12 |               <article class="section4_article article1">
13 |                 <div class="itemli">
14 |                   <div class="ch-item">
15 |                     <div class="ch-info">
16 |                       <div
17 |                         class="ch-info-front ch-img-1"
18 |                         [style.background-image]="
19 |                           'url(' + seller.sellerImage + ')'
20 |                         "
21 |                       ></div>
22 |                       <div class="ch-info-back">
23 |                         <h3>{{ seller.sellerName }}</h3>
24 |                         <p>
25 |                           {{ "TopSellerSection.products" | translate }}
26 |                           <a class="md-trigger" id="idPerson1">{{
27 |                             seller.sellerProductsCount
28 |                           }}</a>
29 |                         </p>
30 |                       </div>
31 |                     </div>
32 |                   </div>
33 |                 </div>
34 |                 <h3 class="text-capitalize">{{ seller.sellerName }}</h3>
35 |               </article>
36 |             </div>
37 |           </div>
38 |         </article>
39 |       </div>
40 |     </div>
41 |   </section>
42 | </div>
43 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/top2sellers/top2sellers.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { Top2sellersComponent } from './top2sellers.component';
 4 | 
 5 | describe('Top2sellersComponent', () => {
 6 |   let component: Top2sellersComponent;
 7 |   let fixture: ComponentFixture<Top2sellersComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [Top2sellersComponent]
12 |     });
13 |     fixture = TestBed.createComponent(Top2sellersComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/top2sellers/top2sellers.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { SellerService } from 'src/app/services/seller/seller.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-top2sellers',
 6 |   templateUrl: './top2sellers.component.html',
 7 |   styleUrls: ['./top2sellers.component.css']
 8 | })
 9 | export class Top2sellersComponent implements OnInit {
10 |   topSellers: any[] = [];
11 |   constructor(private sellerService: SellerService) {}
12 | 
13 |   ngOnInit() {
14 |     this.sellerService.getTopSellers().subscribe(
15 |       {
16 |         next:(data : any)=>{
17 |           this.topSellers = data.data.result;                    
18 |         }, error: (err)=>{
19 |           console.log(err);
20 |           
21 |         }
22 |       }
23 |     );
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/workshop-home-section/workshop-home-section.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { WorkshopHomeSectionComponent } from './workshop-home-section.component';
 4 | 
 5 | describe('WorkshopHomeSectionComponent', () => {
 6 |   let component: WorkshopHomeSectionComponent;
 7 |   let fixture: ComponentFixture<WorkshopHomeSectionComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ WorkshopHomeSectionComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(WorkshopHomeSectionComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/home-page/workshop-home-section/workshop-home-section.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-workshop-home-section',
 5 |   templateUrl: './workshop-home-section.component.html',
 6 |   styleUrls: ['./workshop-home-section.component.css']
 7 | })
 8 | export class WorkshopHomeSectionComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/components/landing-page/landing-page.component.css:
--------------------------------------------------------------------------------
 1 | .welcome-container {
 2 |   background-image: url("/assets/Images/pexels-min-an-713661.jpg");
 3 |   background-position: center;
 4 |   background-repeat: no-repeat;
 5 |   background-size: cover;
 6 |   height: 100vh;
 7 | }
 8 | 
 9 | .vertical-line {
10 |   position: relative;
11 |   width: 1px;
12 |   height: 100%;
13 |   left: 7%;
14 | }
15 | .welcome-logo {
16 |   font-family: "Times New Roman", serif;
17 |   color: #fff;
18 | }
19 | .vertical-line::before {
20 |   content: "";
21 |   position: absolute;
22 |   top: 0;
23 |   left: 0;
24 |   height: 100%;
25 |   width: 100%;
26 |   background: linear-gradient(
27 |     to bottom,
28 |     rgba(255, 255, 255, 0),
29 |     rgba(255, 255, 255, 0.75),
30 |     rgba(255, 255, 255, 0)
31 |   );
32 | }
33 | hr {
34 |   border: 0;
35 |   height: 1px;
36 |   width: 200px;
37 |   background-image: linear-gradient(
38 |     to right,
39 |     rgba(255, 255, 255, 0),
40 |     rgba(255, 255, 255, 0.75),
41 |     rgba(255, 255, 255, 0)
42 |   );
43 | }
44 | .paragraph-container {
45 |   color: #fff;
46 |   font-size: 1.3em;
47 | }
48 | .words-container {
49 |   width: 50%;
50 |   background-color: rgb(69, 98, 104, 0.65);
51 |   height: 100%;
52 | }
53 | .welcome-word h1 {
54 |   font-family: "Times New Roman", serif;
55 |   font-size: 10em;
56 |   line-height: 0.9;
57 |   font-weight: 1000;
58 |   color: #fff;
59 |   margin-top: 20%;
60 |   margin-left: 25%;
61 | }
62 | 
63 | .welcome-word span {
64 |   color: #f9d949;
65 | }
66 | 
67 | .home-button {
68 |   padding: 10px 50px;
69 |   border: none;
70 |   outline: none;
71 |   font-family: "Times New Roman", serif;
72 |   font-size: 18px;
73 |   cursor: pointer;
74 |   background-color: white;
75 |   color: #3c486b;
76 | }
77 | 
78 | @media only screen and (max-width: 768px) {
79 |   .welcome-container {
80 |     min-height: auto;
81 |   }
82 |   .paragraph-container {
83 |     display: none !important;
84 |   }
85 |   .welcome-word h1 {
86 |     font-size: 5em;
87 |     margin-top: 60%;
88 |   }
89 |   .home-button {
90 |     margin-top: 30px;
91 |     margin-left: -30%;
92 |   }
93 | }
94 | 


--------------------------------------------------------------------------------
/src/app/components/landing-page/landing-page.component.html:
--------------------------------------------------------------------------------
 1 | <div class="welcome-container">
 2 |   <div class="words-container d-flex justify-content-center">
 3 |     <div class="vertical-line me-5"></div>
 4 |     <div>
 5 |       <div class="welcome-word">
 6 |         <h1 class="me-5">Welc<span>o</span>me</h1>
 7 |       </div>
 8 |       <div class="d-flex me-5 justify-content-end">
 9 |         <hr class="center-ball" />
10 |         <h4 class="welcome-logo">To Threads & Beads</h4>
11 |       </div>
12 |       <div class="paragraph-container container px-5 py-3">
13 |         <p>
14 |           {{ "LandingPage.message" | translate }}
15 |         </p>
16 |       </div>
17 |       <div class="d-flex justify-content-end">
18 |         <a href="/home"><button class="home-button">{{ "LandingPage.home" | translate }}</button></a>
19 |       </div>
20 |     </div>
21 |   </div>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/src/app/components/landing-page/landing-page.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { LandingPageComponent } from './landing-page.component';
 4 | 
 5 | describe('LandingPageComponent', () => {
 6 |   let component: LandingPageComponent;
 7 |   let fixture: ComponentFixture<LandingPageComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [LandingPageComponent]
12 |     });
13 |     fixture = TestBed.createComponent(LandingPageComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/landing-page/landing-page.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-landing-page',
 5 |   templateUrl: './landing-page.component.html',
 6 |   styleUrls: ['./landing-page.component.css'],
 7 | })
 8 | export class LandingPageComponent {
 9 |   
10 | }


--------------------------------------------------------------------------------
/src/app/components/navbar/header/header.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HeaderComponent } from './header.component';
 4 | 
 5 | describe('HeaderComponent', () => {
 6 |   let component: HeaderComponent;
 7 |   let fixture: ComponentFixture<HeaderComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ HeaderComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(HeaderComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/notification/notification.component.css:
--------------------------------------------------------------------------------
 1 | .notification-container {
 2 |   position: relative;
 3 | }
 4 | 
 5 | .notification-dropdown {
 6 |   position: absolute;
 7 |   top: 100%;
 8 |   right: 0;
 9 |   z-index: 1;
10 |   height: 120px;
11 |   overflow-y: auto;
12 |   border-bottom: 1px solid #eee;
13 |   border-left: 1px solid #eee;
14 | }
15 | 
16 | .notification-dropdown ul {
17 |   list-style: none;
18 |   padding: 0;
19 |   margin: 0;
20 | }
21 | 
22 | .notification-dropdown li {
23 |   padding: 5px;
24 |   background-color: white;
25 |   min-width: 200px;
26 | }
27 | .notification-dropdown p {
28 |   margin: 0;
29 | }
30 | 
31 | .notification-dropdown .data {
32 |   font-weight: bold;
33 |   color: #333;
34 |   font-size: 10px;
35 | }
36 | 
37 | .notification-dropdown .timestamp {
38 |   color: #888;
39 |   font-size: 8px;
40 | }
41 | .notification-icon {
42 |   position: relative;
43 |   cursor: pointer;
44 | }
45 | 
46 | .notification-dot {
47 |   position: absolute;
48 |   top: -5px;
49 |   right: -5px;
50 |   width: 10px;
51 |   height: 10px;
52 |   background-color: red;
53 |   border-radius: 50%;
54 | }
55 | .notification-dropdown::-webkit-scrollbar-track {
56 |   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
57 |   background-color: #f5f5f5;
58 |   border-radius: 5px;
59 | }
60 | 
61 | .notification-dropdown::-webkit-scrollbar {
62 |   width: 10px;
63 |   background-color: #f5f5f5;
64 |   border-radius: 5px;
65 | }
66 | 
67 | .notification-dropdown::-webkit-scrollbar-thumb {
68 |   background-color: black;
69 |   border: 2px solid black;
70 |   border-radius: 5px;
71 | }
72 | @media screen and (max-width: 767px) {
73 |   .notification-dropdown {
74 |     left: 0;
75 |     right: auto;
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/notification/notification.component.html:
--------------------------------------------------------------------------------
 1 | <div class="notification-container">
 2 |   <div
 3 |     class="notification-icon"
 4 |     id="notification"
 5 |     (click)="showNotifications()"
 6 |   >
 7 |     <span class="notification-dot" *ngIf="hasUnreadNotifications"></span>
 8 |     <i class="bi bi-bell"></i>
 9 |   </div>
10 | 
11 |   <div class="notification-dropdown" *ngIf="showDropdown">
12 |     <ul>
13 |       <li *ngFor="let notification of notifications">
14 |         <div class="row me-0">
15 |           <div class="col-2">
16 |             <i
17 |               *ngIf="notification.data == 'cancel'"
18 |               class="bi bi-x-circle-fill"
19 |             ></i>
20 |             <i *ngIf="notification.data == 'Add'" class="bi bi-plus-circle"></i>
21 |           </div>
22 |           <div class="col-9 px-0">
23 |             <p class="data">
24 |               {{
25 |                 notification.data == "cancel"
26 |                   ? "Customer cancel his order"
27 |                   : "You have a new order"
28 |               }}
29 |             </p>
30 |             <p class="timestamp">{{ notification.timestamp | timeAgo }}</p>
31 |           </div>
32 |         </div>
33 |       </li>
34 |     </ul>
35 |   </div>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/notification/notification.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { NotificationComponent } from './notification.component';
 4 | 
 5 | describe('NotificationComponent', () => {
 6 |   let component: NotificationComponent;
 7 |   let fixture: ComponentFixture<NotificationComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [NotificationComponent]
12 |     });
13 |     fixture = TestBed.createComponent(NotificationComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/notification/notification.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 2 | import { TokenStorageService } from 'src/app/services/token/token-storage.service';
 3 | import {io}  from 'socket.io-client';
 4 | import { UserService } from 'src/app/services/user/user.service';
 5 | import { environment } from 'src/environments/environment';
 6 | @Component({
 7 |   selector: 'app-notification',
 8 |   templateUrl: './notification.component.html',
 9 |   styleUrls: ['./notification.component.css']
10 | })
11 | export class NotificationComponent implements OnInit {
12 |   notifications: any[] = []; 
13 |   hasUnreadNotifications: boolean = false; 
14 |   showDropdown: boolean = false; 
15 |   private socket: any;
16 |   apiUrl = environment.apiUrl;
17 |   constructor(
18 |     private tokenService: TokenStorageService,    private userService: UserService 
19 |   ) {
20 |     this.socket = io(this.apiUrl, { transports: ['websocket'] });
21 |   }
22 |   ngOnInit() {
23 |     let userId = this.tokenService.getUser();
24 |     if(userId && this.tokenService.isSeller()){
25 |       userId = userId._id
26 |       const room = `seller_${userId}`;
27 |       this.socket.emit("join", room);
28 |       this.socket.on("notification", (data: any) => {
29 | 
30 |         this.notifications.unshift(data); 
31 |         this.notifications.sort(this.compareTimestamps);
32 |         this.hasUnreadNotifications = true; 
33 |           });
34 |   
35 |       this.userService.getSellerNotifications(userId)
36 |         .subscribe(
37 |           (notifications) => {
38 |             this.notifications = this.normalizeNotifications(notifications);
39 |             this.notifications.sort(this.compareTimestamps);
40 |           },
41 |           (error) => {
42 |             console.error('Failed to retrieve notifications:', error);
43 |           }
44 |         );
45 |     }
46 |   }
47 |     
48 |   compareTimestamps(a: any, b: any) {
49 |     return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
50 |   }
51 |   showNotifications(): void {
52 |     this.hasUnreadNotifications = false; 
53 |     this.showDropdown = !this.showDropdown; 
54 |   }
55 | 
56 |   normalizeNotifications(notifications: any[]): any[] {
57 | 
58 |     return notifications.map((notification) => {
59 |       return { 
60 |         data: notification.notificationDetails ,
61 |         timestamp: notification.timestamp,
62 |       }; 
63 |     });
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/search-bar/search-bar.component.css:
--------------------------------------------------------------------------------
  1 | .search {
  2 |   position: relative;
  3 |   display: inline-flex;
  4 |   align-items: center;
  5 | }
  6 | .search input[type="text"] {
  7 |   margin-left: 8px;
  8 |   height: 100%;
  9 |   flex-grow: 1;
 10 |   border: none;
 11 |   outline: none;
 12 | }
 13 | .dropdown {
 14 |   position: absolute;
 15 |   top: 100%;
 16 |   left: 0;
 17 |   right: 0;
 18 |   background-color: rgba(235, 235, 235);
 19 |   max-height: 200px;
 20 |   overflow-y: auto;
 21 |   z-index: 1;
 22 |   width: 200px;
 23 |   border-radius: 10px;
 24 |   margin-left: 5px;
 25 | }
 26 | hr {
 27 |   margin: 0;
 28 |   border: 0;
 29 |   height: 1px;
 30 |   background-image: linear-gradient(
 31 |     to right,
 32 |     rgba(0, 0, 0, 0),
 33 |     rgba(0, 0, 0, 0.75),
 34 |     rgba(0, 0, 0, 0)
 35 |   );
 36 | }
 37 | .product-results,
 38 | .workshop-results {
 39 |   margin: 8px;
 40 | }
 41 | 
 42 | .search-box {
 43 |   transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
 44 |   width: 40px;
 45 |   height: 40px;
 46 |   border-radius: 20px;
 47 |   border: none;
 48 |   cursor: pointer;
 49 |   background: rgba(235, 235, 235, 0);
 50 | }
 51 | .search-box + label .search-icon {
 52 |   color: black;
 53 | }
 54 | .search-box:hover {
 55 |   background: rgb(200, 200, 200);
 56 | }
 57 | 
 58 | .search-box:focus {
 59 |   transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s,
 60 |     background 0.6s;
 61 |   border: none;
 62 |   outline: none;
 63 |   box-shadow: none;
 64 |   padding-left: 15px;
 65 |   cursor: text;
 66 |   width: 150px;
 67 |   border-radius: auto;
 68 |   background: rgb(235, 235, 235);
 69 |   color: black;
 70 | }
 71 | .search-box:focus + label .search-icon {
 72 |   color: black;
 73 | }
 74 | .search-box:not(:focus) {
 75 |   text-indent: -5000px; /* for more-graceful falling back (:not browsers likely support indent) */
 76 | }
 77 | .search-box:not(:focus-within) .dropdown {
 78 |   display: none !important;
 79 | }
 80 | #search-submit {
 81 |   position: relative;
 82 |   left: -5000px;
 83 | }
 84 | .search-icon {
 85 |   position: relative;
 86 |   left: -30px;
 87 |   color: white;
 88 |   cursor: pointer;
 89 | }
 90 | @media (max-width: 991px) {
 91 |   .search {
 92 |     margin-left: auto;
 93 |     width: fit-content;
 94 |   }
 95 | }
 96 | /* @media screen and (max-width: 1250px) {
 97 |   .search-box:focus {
 98 |     width: calc(100vw - 60px);
 99 |   }
100 | } */
101 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/search-bar/search-bar.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SearchBarComponent } from './search-bar.component';
 4 | 
 5 | describe('SearchBarComponent', () => {
 6 |   let component: SearchBarComponent;
 7 |   let fixture: ComponentFixture<SearchBarComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [SearchBarComponent]
12 |     });
13 |     fixture = TestBed.createComponent(SearchBarComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/search-bar/search-bar.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, HostListener } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | import { Product } from 'src/app/model/product.model';
 4 | import { Workshop } from 'src/app/model/workshop.model';
 5 | import { ProductService } from 'src/app/services/product/product.service';
 6 | 
 7 | @Component({
 8 |   selector: 'app-search-bar',
 9 |   templateUrl: './search-bar.component.html',
10 |   styleUrls: ['./search-bar.component.css']
11 | })
12 | 
13 | export class SearchBarComponent {
14 |   showSearch = false;
15 |   showDropdown = false;
16 |   query = '';
17 |   products: Product[] = [];
18 |   workshops: Workshop[] = [];
19 |   constructor(
20 |     private router: Router,
21 |     private productService: ProductService, 
22 | 
23 |   ) {
24 | 
25 |   }
26 | 
27 |   search() {
28 |     if (!this.query) {
29 |       this.products = [];
30 |       this.workshops = [];
31 |       this.showDropdown = false;
32 |       return;
33 |     }
34 | 
35 |     this.productService.search(this.query).subscribe(
36 |       (response : any) => {
37 |         this.products = response.products;
38 |         this.workshops = response.workshops;
39 |         this.showDropdown = true;    
40 |         },
41 |       (error) => {
42 |         console.error('Error', error);
43 |       }
44 |     
45 |     );
46 |   }
47 | 
48 |   navigate(page :any){
49 |     this.showDropdown = false;
50 |     this.router.navigate([page]);
51 |   }
52 | 
53 |   @HostListener('window:click', ['$event'])
54 |   onClick(event :any) {    
55 |     const dropdown = document.querySelector('.dropdown') ;
56 |     const searchBox = document.querySelector('#search-box');
57 |     if (!dropdown?.contains(event.target) && !searchBox?.contains(event.target)) {
58 |       this.showDropdown = false;
59 |     }
60 |   }
61 | 
62 | }
63 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/sidebar/sidebar.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SidebarComponent } from './sidebar.component';
 4 | 
 5 | describe('SidebarComponent', () => {
 6 |   let component: SidebarComponent;
 7 |   let fixture: ComponentFixture<SidebarComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ SidebarComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(SidebarComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/navbar/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { TokenStorageService } from 'src/app/services/token/token-storage.service';
 3 | import * as bootstrap from 'bootstrap';
 4 | import * as jQuery from 'jquery';
 5 | import { AuthService } from 'src/app/services/auth/auth.service';
 6 | 
 7 | @Component({
 8 |   selector: 'app-sidebar',
 9 |   templateUrl: './sidebar.component.html',
10 |   styleUrls: ['./sidebar.component.css']
11 | })
12 | export class SidebarComponent implements OnInit {
13 |   currentUser: any;
14 |   isCustomer: any;
15 |   constructor(
16 |     private tokenService: TokenStorageService,
17 |     private authService: AuthService) {
18 |   }
19 |   ngOnInit(): void {
20 |     
21 |     this.currentUser = this.tokenService.getUser();
22 |     this.isCustomer = !this.tokenService.isSeller();
23 |   }
24 |   ngAfterViewInit() {
25 |     jQuery('body').on({
26 |       click: (e: MouseEvent) => {
27 |         const myOffcanvas = jQuery('#offcanvasRight')[0];
28 |         const bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
29 |         e.stopPropagation();
30 |         bsOffcanvas.toggle();
31 |       }
32 |     }, '.toggle_btn');
33 |   }
34 |   onLogoutClick() {
35 |     this.authService.logOut().subscribe({
36 |       next: (response) => {
37 |         // console.log(response);
38 |       },
39 |       error: (error) => {
40 |         // console.log(error);
41 |       },
42 |       });
43 |     }
44 |   }
45 | 
46 | 


--------------------------------------------------------------------------------
/src/app/components/products-page/filter/filter.component.html:
--------------------------------------------------------------------------------
 1 | <div class="col-12 h-100" style="padding: 90px 15px 0; ">
 2 |   <div class="categories-filter pb-2" style="border-bottom: 1px solid #F2F2F2;">
 3 |     <h6 class="filter-item-title">{{"productFilter.categoryFilter" | translate }}</h6>
 4 |     <div class="filter-category">
 5 |       <div class="filter-checkbox-item d-flex justify-content-between" *ngFor="let category of categories">
 6 |         <input type="checkbox" class="filter-checkbox-value" name="filter-category-checkbox" id="filter-category{{category.id}}" (click)="categoriesFilter()">
 7 |         <label for="filter-category{{category.id}}" class="filter-checkbox-text">{{ category.name }}</label>
 8 |         <div class="filter-item-quantity">{{ category.productNum }}</div>
 9 |       </div>
10 |     </div>
11 |   </div>
12 |   <div class="filter-price pt-2" style="border-bottom: 1px solid #F2F2F2;">
13 |     <h6 class="filter-item-title pb-3">{{"productFilter.priceFilter" | translate }}</h6>
14 |     <div class="slider">
15 |       <div class="progress"></div>
16 |     </div>
17 |     <div class="range-input">
18 |       <input type="range" step='5' [min]="minPrice" [max]="maxPrice" [(ngModel)]="minInputPrice" (ngModelChange)="updateMaxInputPrice()" (mouseleave)="priceFilter()">
19 |       <input type="range" step='5' [min]="minPrice" [max]="maxPrice" [(ngModel)]="maxInputPrice" (ngModelChange)="updateMinInputPrice()" (mouseleave)="priceFilter()">
20 |     </div>
21 | 
22 |     <div class="price-wrap m-3 text-center">
23 |       <span class="min">EGP {{ minInputPrice }}</span>
24 |       -
25 |       <span class="max">EGP {{ maxInputPrice }}</span>
26 |     </div>
27 |   </div>
28 | </div>


--------------------------------------------------------------------------------
/src/app/components/products-page/filter/filter.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { FilterComponent } from './filter.component';
 4 | 
 5 | describe('FilterComponent', () => {
 6 |   let component: FilterComponent;
 7 |   let fixture: ComponentFixture<FilterComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [FilterComponent]
12 |     });
13 |     fixture = TestBed.createComponent(FilterComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/products-page/product-card/product-card.component.html:
--------------------------------------------------------------------------------
 1 | <div class="col-md-12">
 2 |   <div class="wsk-cp-product">
 3 |     <div
 4 |       class="wsk-cp-img"
 5 |       [routerLink]="['/user/productDetails', product._id]"
 6 |     >
 7 |       <img [src]="product.images[0]" alt="Product" class="img-responsive" />
 8 |     </div>
 9 |     <div class="wsk-cp-text">
10 |       <div class="title-product">
11 |         <h3>{{ product.name }}</h3>
12 |       </div>
13 |       <div class="category-prod text-muted">
14 |         <p>
15 |           {{ product.category }}
16 |         </p>
17 |       </div>
18 |       <div class="card-footer">
19 |         <div class="wcf-left">
20 |           <ng-container *ngIf="product.priceDiscount > 0; else noDiscount">
21 |             <span class="discount-price price"
22 |               >EGP {{ product.price - product.priceDiscount }}</span
23 |             >
24 |             <span class="original-price">EGP {{ product.price }}</span>
25 |           </ng-container>
26 |           <ng-template #noDiscount>
27 |             <span class="price">EGP {{ product.price }}</span>
28 |           </ng-template>
29 |         </div>
30 |         <div class="wcf-right d-flex">
31 |           <a class="my-auto" (click)="addToCart(product._id)"
32 |             ><i class="bi bi-cart-plus fs-4"></i
33 |           ></a>
34 |           <label class="favouriteContainer my-auto ms-1">
35 |             <input
36 |               type="checkbox"
37 |               (click)="toggleFavourite($event)"
38 |               [checked]="isFavourite"
39 |             />
40 |             <svg
41 |               id="Layer_1"
42 |               version="1.0"
43 |               viewBox="0 0 24 24"
44 |               xml:space="preserve"
45 |               xmlns="http://www.w3.org/2000/svg"
46 |               xmlns:xlink="http://www.w3.org/1999/xlink"
47 |             >
48 |               <path
49 |                 d="M16.4,4C14.6,4,13,4.9,12,6.3C11,4.9,9.4,4,7.6,4C4.5,4,2,6.5,2,9.6C2,14,12,22,12,22s10-8,10-12.4C22,6.5,19.5,4,16.4,4z"
50 |               ></path>
51 |             </svg>
52 |           </label>
53 |         </div>
54 |       </div>
55 |     </div>
56 |   </div>
57 | </div>
58 | 


--------------------------------------------------------------------------------
/src/app/components/products-page/product-card/product-card.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ProductCardComponent } from './product-card.component';
 4 | 
 5 | describe('ProductCardComponent', () => {
 6 |   let component: ProductCardComponent;
 7 |   let fixture: ComponentFixture<ProductCardComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ ProductCardComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(ProductCardComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/products-page/product-details/product-details.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ProductDetailsComponent } from './product-details.component';
 4 | 
 5 | describe('ProductDetailsComponent', () => {
 6 |   let component: ProductDetailsComponent;
 7 |   let fixture: ComponentFixture<ProductDetailsComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ProductDetailsComponent]
12 |     });
13 |     fixture = TestBed.createComponent(ProductDetailsComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/products-page/products/products-page.component.css:
--------------------------------------------------------------------------------
 1 | .filter{
 2 |   padding: 3px 5px;
 3 |   background-color: #e9ecef;
 4 |   color: #000;
 5 |   border-radius: 10px;
 6 |   margin-right: 10px;
 7 |   font-size: 13px;
 8 |   border: 1px solid #f1f1f1;
 9 |   box-sizing: border-box;
10 |   height: 27px;
11 | }
12 | 
13 | .filter i{
14 |   cursor: pointer;
15 |   font-size: 14px;
16 | }
17 | 
18 | .filter:hover{
19 |   color: #eee;
20 |   background-color: #7e7e7e;
21 | }
22 | 
23 | .FilterClearAll{
24 |   cursor: pointer;
25 |   font-size: 14px;
26 | }
27 | 
28 | .FilterClearAll:hover{
29 |   color: red;
30 | }
31 | 
32 | button {
33 |   color: #000;
34 |   text-transform: uppercase;
35 |   letter-spacing: 5px;
36 |   font-weight: bold;
37 |   font-size: 17px;
38 |   padding: 0.5rem 1rem;
39 |   border: 1px solid #ffffff1f;
40 |   border-radius: 20px;
41 |   background-color: #F6EEC9;
42 |   -webkit-box-shadow: 5px 5px 15px #cccccc,
43 |     -5px -5px 15px #ffffff;
44 |   box-shadow: 5px 5px 15px #cccccc,
45 |     -5px -5px 15px #ffffff;
46 |   -webkit-transition: box-shadow 0.3s ease-in-out;
47 |   transition: box-shadow 0.3s ease-in-out;
48 | }
49 | 
50 | button:hover {
51 |   color: #357af0;
52 |   background-color: linear-gradient(145deg, #d4d4d4, #fbfbfb);
53 |   -webkit-box-shadow: 5px 5px 15px #cccccc,
54 |     -5px -5px 15px #ffffff;
55 |   box-shadow: 5px 5px 15px #cccccc,
56 |     -5px -5px 15px #ffffff;
57 | }
58 | 
59 | button:active {
60 |   color: #357af0;
61 |   background-color: #ebebeb;
62 |   -webkit-box-shadow: inset 5px 5px 15px #cccccc,
63 |     inset -5px -5px 15px #ffffff;
64 |   box-shadow: inset 5px 5px 15px #cccccc,
65 |     inset -5px -5px 15px #ffffff;
66 | }
67 | 
68 | 
69 | @media(max-width: 768px){
70 |   .filterBy{
71 |     position: absolute;
72 |     left: 0;
73 |     top: 0;
74 |     z-index: 5;
75 |     background-color: #fff;
76 |   }
77 | }
78 | 
79 | @media(min-width: 769px){
80 |   .toggleFilter{
81 |     display: none;
82 |   }
83 | }
84 | 
85 | .toggleFilter {
86 |   position: absolute;
87 |   right: -45px;
88 |   top: 150px;
89 |   padding: 0 10px;
90 | }
91 | 
92 | .toggleFilter:hover {
93 |   background-color: #000;
94 |   color: #fff;
95 | }


--------------------------------------------------------------------------------
/src/app/components/products-page/products/products-page.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ProductsPageComponent } from './products-page.component';
 4 | 
 5 | describe('ProductsPageComponent', () => {
 6 |   let component: ProductsPageComponent;
 7 |   let fixture: ComponentFixture<ProductsPageComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ ProductsPageComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(ProductsPageComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/profile/animated-number/animated-number.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/app/components/profile/animated-number/animated-number.component.css


--------------------------------------------------------------------------------
/src/app/components/profile/animated-number/animated-number.component.html:
--------------------------------------------------------------------------------
1 | <h4 #animatedDigit>{{ digit }}</h4>
2 | 


--------------------------------------------------------------------------------
/src/app/components/profile/animated-number/animated-number.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { AnimatedNumberComponent } from './animated-number.component';
 4 | 
 5 | describe('AnimatedNumberComponent', () => {
 6 |   let component: AnimatedNumberComponent;
 7 |   let fixture: ComponentFixture<AnimatedNumberComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [AnimatedNumberComponent]
12 |     });
13 |     fixture = TestBed.createComponent(AnimatedNumberComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/profile/animated-number/animated-number.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ElementRef, Input, SimpleChanges, ViewChild } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-animated-number',
 5 |   templateUrl: './animated-number.component.html',
 6 |   styleUrls: ['./animated-number.component.css']
 7 | })
 8 | export class AnimatedNumberComponent {
 9 |   @Input() duration: any;
10 |   @Input() digit: any;
11 |   steps: any;
12 |   @ViewChild("animatedDigit") animatedDigit: any;
13 | 
14 |   animateCount() {
15 |     if (!this.duration) {
16 |       this.duration = 1000;
17 |     }
18 | 
19 |     if (typeof this.digit === "number") {
20 |       this.counterFunc(this.digit, this.duration, this.animatedDigit);
21 |     }
22 |   }
23 | 
24 |   counterFunc(endValue:any, durationMs:any, element:any) {
25 |     if (!this.steps) {
26 |       this.steps = 12;
27 |     }
28 | 
29 |     const stepCount = Math.abs(durationMs / this.steps);
30 |     const valueIncrement = (endValue - 0) / stepCount;
31 |     const sinValueIncrement = Math.PI / stepCount;
32 | 
33 |     let currentValue = 0;
34 |     let currentSinValue = 0;
35 | 
36 |     function step() {
37 |       currentSinValue += sinValueIncrement;
38 |       currentValue += valueIncrement * Math.sin(currentSinValue) ** 2 * 2;
39 | 
40 |       element.nativeElement.textContent = Math.abs(Math.floor(currentValue));
41 | 
42 |       if (currentSinValue < Math.PI) {
43 |         window.requestAnimationFrame(step);
44 |       }
45 |     }
46 | 
47 |     step();
48 |   }
49 | 
50 |   ngAfterViewInit() {
51 |     if (this.digit) {
52 |       this.animateCount();
53 |     }
54 |   }
55 | 
56 |   // ngOnChanges(changes: SimpleChanges) {
57 |   //   if (changes["digit"]) {
58 |   //     this.animateCount();
59 |   //   }
60 |   // }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/app/components/profile/edit-profile/edit-profile.component.css:
--------------------------------------------------------------------------------
 1 | input{
 2 |   border: none;
 3 | }
 4 | 
 5 | .dropzone {
 6 |   height: 150px;
 7 |   min-width: 100px;
 8 |   display: table;
 9 |   background-color: #eee;
10 |   width: 300px;
11 |   border: dashed 1px #aaa;
12 |   border-radius: 10px;
13 |   margin-left: auto;
14 |   margin-right: auto;
15 | }
16 | .text-wrapper {
17 |   display: table-cell;
18 |   vertical-align: middle;
19 | }
20 | .centered {
21 |   text-align: center;
22 | }
23 | .browse-btn {
24 |   color: #456268;
25 |   cursor: pointer;
26 | }


--------------------------------------------------------------------------------
/src/app/components/profile/edit-profile/edit-profile.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { EditProfileComponent } from './edit-profile.component';
 4 | 
 5 | describe('EditProfileComponent', () => {
 6 |   let component: EditProfileComponent;
 7 |   let fixture: ComponentFixture<EditProfileComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [EditProfileComponent]
12 |     });
13 |     fixture = TestBed.createComponent(EditProfileComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/profile/user-profile/user-profile.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { UserProfileComponent } from './user-profile.component';
 4 | 
 5 | describe('UserProfileComponent', () => {
 6 |   let component: UserProfileComponent;
 7 |   let fixture: ComponentFixture<UserProfileComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ UserProfileComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(UserProfileComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/registration-page/registration/registration.component.html:
--------------------------------------------------------------------------------
 1 | <section>
 2 |   <div class="container">
 3 |     <app-signin></app-signin>
 4 |     <app-signup></app-signup>
 5 |     <div class="overlay-container">
 6 |       <div class="overlay">
 7 |         <div class="overlay-left">
 8 |           <h1>Create Account</h1>
 9 |           <p>or</p>
10 |           <button id="signInButton">Log In</button>
11 |         </div>
12 |         <div class="overlay-right">
13 |           <h1>Please, Log In</h1>
14 |           <p>or</p>
15 |           <button id="signUpButton">Create Account</button>
16 |         </div>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </section>
21 | 
22 | 


--------------------------------------------------------------------------------
/src/app/components/registration-page/registration/registration.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { RegistrationComponent } from './registration.component';
 4 | 
 5 | describe('RegistrationComponent', () => {
 6 |   let component: RegistrationComponent;
 7 |   let fixture: ComponentFixture<RegistrationComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ RegistrationComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(RegistrationComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/registration-page/registration/registration.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-registration',
 5 |   templateUrl: './registration.component.html',
 6 |   styleUrls: ['./registration.component.css'],
 7 | })
 8 | export class RegistrationComponent implements OnInit {
 9 |   constructor() {}
10 | 
11 |   ngOnInit(): void {
12 |     const signIn = document.getElementById('signInButton') as HTMLButtonElement;
13 |     const signUp = document.getElementById('signUpButton') as HTMLButtonElement;
14 |     const signInForm = document.querySelector(
15 |       '.sign-in-form'
16 |     ) as HTMLDivElement;
17 |     const signUpForm = document.querySelector(
18 |       '.sign-up-form'
19 |     ) as HTMLDivElement;
20 |     const overlay_container = document.querySelector(
21 |       '.overlay-container'
22 |     ) as HTMLDivElement;
23 |     const overlay = document.querySelector('.overlay') as HTMLDivElement;
24 | 
25 |     signIn.addEventListener('click', () => {
26 |       // overlay_container.style.transform = 'translateX(100%)';
27 |       // overlay.style.transform = 'translateX(-50%)';
28 |       const screenWidth = window.innerWidth;
29 |       if (screenWidth <= 767) {
30 |         // Change translateX to translateY on mobile screens
31 |         overlay_container.style.transform = 'translateY(150%)';
32 |         overlay.style.transform = 'translateY(-50%)';
33 |       } else {
34 |         // Use translateX on larger screens
35 |         overlay_container.style.transform = 'translateX(100%)';
36 |         overlay.style.transform = 'translateX(-50%)';
37 |       }
38 |       signInForm.classList.add('active');
39 |       signUpForm.classList.remove('active');
40 |     });
41 | 
42 |     signUp.addEventListener('click', () => {
43 |       // overlay_container.style.transform = 'translateX(0)';
44 |       // overlay.style.transform = 'translateX(0)';
45 |       const screenWidth = window.innerWidth;
46 |       if (screenWidth <= 767) {
47 |         // Change translateX to translateY on mobile screens
48 |         overlay_container.style.transform = 'translateY(0)';
49 |         overlay.style.transform = 'translateY(0)';
50 |       } else {
51 |         // Use translateX on larger screens
52 |         overlay_container.style.transform = 'translateX(0)';
53 |         overlay.style.transform = 'translateX(0)';
54 |       }
55 |       signUpForm.classList.add('active');
56 |       signInForm.classList.remove('active');
57 |     });
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/app/components/registration-page/signin/signin.component.css:
--------------------------------------------------------------------------------
  1 | .form {
  2 |   position: absolute;
  3 |   top: 0;
  4 |   text-align: center;
  5 |   padding: 0 20px;
  6 |   width: 50%;
  7 |   height: 100%;
  8 |   display: flex;
  9 |   align-items: center;
 10 |   justify-content: center;
 11 |   background-color: #f6f5f7;
 12 |   transition: 0.7s ease-in-out transform;
 13 |   overflow: hidden;
 14 | }
 15 | 
 16 | .form.sign-in-form {
 17 |   left: 0;
 18 | }
 19 | 
 20 | .form .wrapper {
 21 |   position: absolute;
 22 |   top: 0;
 23 |   left: 0;
 24 |   height: 100%;
 25 |   width: 100%;
 26 |   display: flex;
 27 |   align-items: center;
 28 |   justify-content: center;
 29 |   transition: 0.7s ease-in-out transform;
 30 | }
 31 | .form.sign-in-form .wrapper {
 32 |   transform: translateX(100%);
 33 | }
 34 | .sign-in-form.active .wrapper {
 35 |   transform: translateX(0);
 36 | }
 37 | .form h1 {
 38 |   font-family: "Montserrat";
 39 |   font-size: 40px;
 40 |   font-weight: 300;
 41 |   text-transform: capitalize;
 42 |   margin-bottom: 30px;
 43 | }
 44 | 
 45 | .form input {
 46 |   display: block;
 47 |   width: 300px;
 48 |   margin-bottom: 20px;
 49 |   height: 35px;
 50 |   font-family: "Montserrat";
 51 |   font-size: 14px;
 52 |   padding-left: 15px;
 53 |   border: none;
 54 |   background-color: rgba(199, 197, 197, 0.425);
 55 |   outline: none;
 56 | }
 57 | 
 58 | .form input::placeholder {
 59 |   color: rgba(0, 0, 0, 0.658);
 60 | }
 61 | 
 62 | .form button {
 63 |   padding: 10px 50px;
 64 |   border: none;
 65 |   outline: none;
 66 |   font-family: "Montserrat";
 67 |   font-size: 18px;
 68 |   background-color: #a20a0a;
 69 |   cursor: pointer;
 70 |   color: #f6f5f7;
 71 | }
 72 | 
 73 | a {
 74 |   color: black;
 75 |   text-decoration: none;
 76 |   margin-bottom: 15px;
 77 |   display: block;
 78 |   margin-top: 10px;
 79 | }
 80 | 
 81 | .error {
 82 |   display: block;
 83 |   width: fit-content;
 84 |   height: 25px;
 85 |   font-family: "Montserrat";
 86 |   font-size: 12px;
 87 |   padding-left: 15px;
 88 |   color: red;
 89 |   position: relative;
 90 | }
 91 | @media screen and (max-width: 767px) {
 92 |   .form.sign-in-form .wrapper {
 93 |     transform: translateY(0);
 94 |   }
 95 |   .sign-in-form .active .wrapper {
 96 |     transform: translateY(100%);
 97 |   }
 98 | 
 99 |   .form {
100 |     width: 100%;
101 |     height: 50%;
102 |     /* top: 50%; */
103 |     /* z-index: 10; */
104 |   }
105 |   .form .wrapper {
106 |     /* bottom: 50px; */
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/src/app/components/registration-page/signin/signin.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SigninComponent } from './signin.component';
 4 | 
 5 | describe('SigninComponent', () => {
 6 |   let component: SigninComponent;
 7 |   let fixture: ComponentFixture<SigninComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ SigninComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(SigninComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/registration-page/signup/signup.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SignupComponent } from './signup.component';
 4 | 
 5 | describe('SignupComponent', () => {
 6 |   let component: SignupComponent;
 7 |   let fixture: ComponentFixture<SignupComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ SignupComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(SignupComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/seller-orders-page/seller-order-card/seller-order-card.component.css:
--------------------------------------------------------------------------------
 1 | .order {
 2 |     cursor:move;
 3 |     background-color:#fff;
 4 |     padding:1rem;
 5 |     border-radius:8px;
 6 |     width:100%;
 7 |     box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
 8 |     margin-bottom:1rem;
 9 |     border:3px dashed transparent;
10 | }   
11 | .order:hover {
12 |     box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
13 |     border-color:rgba(162,179,207,.2)!important;
14 | }
15 | 
16 | p {
17 |     font-size:15px;
18 |     margin:1.2rem 0;
19 | }
20 | .order__tag {
21 |     border-radius:100px;
22 |     padding:2px 13px;
23 |     font-size:12px;
24 | } 
25 |      
26 | .order__tag { 
27 |     width:100%;
28 |     display:flex;
29 |     justify-content:space-between;
30 | }
31 |     
32 | .order__options {
33 | background:transparent; 
34 | border:0;
35 | color:#c4cad3;
36 | font-size:17px;
37 | }
38 |     
39 | .order__stats {
40 | 
41 | position:relative;
42 | width:100%;
43 | color:#b0b1b2;
44 | 
45 | font-size:12px;
46 | }
47 | .order__stats  span:not(:last-of-type){
48 | margin-right:1rem;
49 | }
50 | .order__stats svg {
51 | margin-right:5px;
52 | }
53 |     
54 | .order__owner {
55 | width:25px;
56 | height:25px;
57 | border-radius:100rem;
58 | background:#7784ee;
59 | position:absolute;
60 | display:inline-block;
61 | right:0;
62 | bottom:0;
63 | }
64 | .product-details span{
65 |     font-size: 12px;
66 | 
67 | } 
68 | .order__tag--copyright {
69 |     color:#fff;
70 |     width: fit-content;
71 |     background-color:#484848
72 |   }
73 | 
74 | 
75 | .client-address{
76 | color: #909090;
77 | font-size: 12px;
78 | }


--------------------------------------------------------------------------------
/src/app/components/seller-orders-page/seller-order-card/seller-order-card.component.html:
--------------------------------------------------------------------------------
 1 | <div class="order" draggable="true">
 2 |   <div class="order__tags">
 3 |     <span class="order__tag order__tag--copyright">{{
 4 |       order.client_name
 5 |     }}</span>
 6 |     <span class="client-address"
 7 |       >{{ "sellerOrderCard.address" | translate }}:
 8 |       {{ order.clientAddress.city }},{{ order.clientAddress.address }}</span
 9 |     >
10 |   </div>
11 |   <div class="example-box" *ngFor="let product of order.products">
12 |     <div class="d-flex justify-content-between product-details">
13 |       <span>{{ product?.product?.name }}</span>
14 |       <span class="quantity"
15 |         >{{ "sellerOrderCard.quantity" | translate }}:
16 |         {{ product.quantity }}</span
17 |       >
18 |     </div>
19 |   </div>
20 |   <div class="order__stats">
21 |     <span
22 |       ><time datetime="2021-11-24T20:00:00"
23 |         ><i class="bi bi-flag me-1"></i
24 |         >{{ order.orderDate | date : "dd MMMM yyyy" }}</time
25 |       ></span
26 |     >
27 |     <span
28 |       ><i class="bi bi-cash-coin me-1"></i>EGP {{ "sellerOrderCard.total" | translate }} {{ order.totalPrice }}</span
29 |     >
30 |   </div>
31 | </div>
32 | 


--------------------------------------------------------------------------------
/src/app/components/seller-orders-page/seller-order-card/seller-order-card.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SellerOrderCardComponent } from './seller-order-card.component';
 4 | 
 5 | describe('SellerOrderCardComponent', () => {
 6 |   let component: SellerOrderCardComponent;
 7 |   let fixture: ComponentFixture<SellerOrderCardComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [SellerOrderCardComponent]
12 |     });
13 |     fixture = TestBed.createComponent(SellerOrderCardComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/seller-orders-page/seller-order-card/seller-order-card.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnInit } from '@angular/core';
 2 | import { OrderService } from 'src/app/services/order/order.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-seller-order-card',
 6 |   templateUrl: './seller-order-card.component.html',
 7 |   styleUrls: ['./seller-order-card.component.css']
 8 | })
 9 | export class SellerOrderCardComponent implements OnInit {
10 |   @Input() order: any
11 |   constructor(protected orderService: OrderService) {}
12 | 
13 | 
14 |   ngOnInit(): void {
15 |     console.log(this.order.products[0]!.productId);
16 |     const productId=this.order.products[0]!.productId
17 |    
18 |   }
19 |   
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/components/seller-orders-page/seller-orders/seller-orders.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SellerOrdersComponent } from './seller-orders.component';
 4 | 
 5 | describe('SellerOrdersComponent', () => {
 6 |   let component: SellerOrdersComponent;
 7 |   let fixture: ComponentFixture<SellerOrdersComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [SellerOrdersComponent]
12 |     });
13 |     fixture = TestBed.createComponent(SellerOrdersComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/seller-products-page/seller-product-card/seller-product-card.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SellerProductCardComponent } from './seller-product-card.component';
 4 | 
 5 | describe('SellerProductCardComponent', () => {
 6 |   let component: SellerProductCardComponent;
 7 |   let fixture: ComponentFixture<SellerProductCardComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [SellerProductCardComponent]
12 |     });
13 |     fixture = TestBed.createComponent(SellerProductCardComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/seller-products-page/seller-product-card/seller-product-card.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input } from '@angular/core';
 2 | import { ProductService } from 'src/app/services/product/product.service';
 3 | import { Router } from '@angular/router';
 4 | import { CartService } from 'src/app/services/cart/cart.service';
 5 | @Component({
 6 |   selector: 'app-seller-product-card',
 7 |   templateUrl: './seller-product-card.component.html',
 8 |   styleUrls: ['./seller-product-card.component.css']
 9 | })
10 | export class SellerProductCardComponent {
11 |   @Input() product: any
12 |   productIdToDelete: any;
13 |   constructor(
14 |     protected productService: ProductService,
15 |     protected cartService: CartService,
16 |     private router: Router
17 |   ) { }
18 | 
19 |   deleteProduct(productId:string) {
20 |     this.productService.deleteProduct(productId).subscribe(res => {
21 |       location.reload();
22 |       this.cartService.cartUpdatedSubject.next();
23 |       this.router.navigate(['seller/sellerProducts']);
24 |     });
25 | 
26 |   }
27 |   openEditProductModal(productId: string) {
28 |     this.router.navigate(['seller/editProduct', productId]);
29 |   }
30 | 
31 | }
32 | 


--------------------------------------------------------------------------------
/src/app/components/seller-products-page/seller-products/seller-products.component.css:
--------------------------------------------------------------------------------
 1 | button {
 2 |   color: #000;
 3 |   text-transform: uppercase;
 4 |   letter-spacing: 5px;
 5 |   font-weight: bold;
 6 |   font-size: 17px;
 7 |   padding: 0.5rem 1rem;
 8 |   border: 1px solid #ffffff1f;
 9 |   border-radius: 20px;
10 |   background-color: #f6eec9;
11 |   -webkit-box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
12 |   box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
13 |   -webkit-transition: box-shadow 0.3s ease-in-out;
14 |   transition: box-shadow 0.3s ease-in-out;
15 | }
16 | 
17 | button:hover {
18 |   color: #357af0;
19 |   background-color: linear-gradient(145deg, #d4d4d4, #fbfbfb);
20 |   -webkit-box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
21 |   box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
22 | }
23 | 
24 | button:active {
25 |   color: #357af0;
26 |   background-color: #ebebeb;
27 |   -webkit-box-shadow: inset 5px 5px 15px #cccccc, inset -5px -5px 15px #ffffff;
28 |   box-shadow: inset 5px 5px 15px #cccccc, inset -5px -5px 15px #ffffff;
29 | }
30 | 


--------------------------------------------------------------------------------
/src/app/components/seller-products-page/seller-products/seller-products.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container" style="margin-top: 150px">
 2 |   <div *ngIf="productService.products.length > 0; else NoProduct">
 3 |     <div class="row d-flex flex-wrap">
 4 |       <app-seller-product-card
 5 |         *ngFor="let product of productService.products"
 6 |         class="pdtCard col-12 col-md-4 col-lg-3"
 7 |         [product]="product"
 8 |       >
 9 |       </app-seller-product-card>
10 |     </div>
11 |     <nav aria-label="Page navigation example" class="align-self-center mx-auto">
12 |       <ul class="pagination">
13 |         <li class="page-item">
14 |           <button (click)="previous()" class="page-link" aria-label="Previous">
15 |             <span aria-hidden="true">&laquo;</span>
16 |           </button>
17 |         </li>
18 |         <!-- <li
19 |           class="page-item"
20 |           *ngFor="let page of pages"
21 |           (click)="navToPage(page)"
22 |         >
23 |           <button class="page-link">{{ page }}</button>
24 |         </li> -->
25 | 
26 |         <li class="page-item">
27 |           <button (click)="next()" class="page-link" aria-label="Next">
28 |             <span aria-hidden="true">&raquo;</span>
29 |           </button>
30 |         </li>
31 |       </ul>
32 |     </nav>
33 |   </div>
34 |   <ng-template #NoProduct>
35 |     <div
36 |       class="text-center mt-5 d-flex justify-content-center align-items-center"
37 |     >
38 |       <h3>You don't have any product</h3>
39 |     </div>
40 |   </ng-template>
41 | </div>
42 | 


--------------------------------------------------------------------------------
/src/app/components/seller-products-page/seller-products/seller-products.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SellerProductsComponent } from './seller-products.component';
 4 | 
 5 | describe('SellerProductsComponent', () => {
 6 |   let component: SellerProductsComponent;
 7 |   let fixture: ComponentFixture<SellerProductsComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [SellerProductsComponent]
12 |     });
13 |     fixture = TestBed.createComponent(SellerProductsComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/seller-products-page/seller-products/seller-products.component.ts:
--------------------------------------------------------------------------------
 1 | import { HttpErrorResponse } from '@angular/common/http';
 2 | import { Component, OnInit, Output } from '@angular/core';
 3 | import { ProductService } from 'src/app/services/product/product.service';
 4 | import { TokenStorageService } from 'src/app/services/token/token-storage.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-seller-products',
 8 |   templateUrl: './seller-products.component.html',
 9 |   styleUrls: ['./seller-products.component.css']
10 | })
11 | export class SellerProductsComponent implements OnInit {
12 |   page = 1;
13 |   limit = 10;
14 |   NumberOfPages!: number;
15 |   currentUser: any;
16 |   currentUserId: any;
17 | 
18 | 
19 |   constructor(protected productService: ProductService,
20 |     private tokenService: TokenStorageService,) {}
21 | 
22 |   ngOnInit() {
23 |     this.currentUser = this.tokenService.getUser();
24 |     this.currentUserId = this.currentUser._id;
25 |     this.getProducts();
26 |   }
27 | 
28 |   getProducts() {
29 |     this.productService.products = [];
30 |     this.productService.getUserProducts(this.page, this.limit,this.currentUserId).subscribe(
31 |       (response: any) => {
32 |         const { products } = response.data;
33 |         this.NumberOfPages = Math.ceil(response.data.totalRecords / this.limit);
34 | 
35 |         this.productService.products.push(...products);
36 |       },
37 |       ({ status, message }: HttpErrorResponse) => {
38 |         console.log(`Error ${status}: ${message}`);
39 |       }
40 |     );
41 |   }
42 |   get pages(): number[] {
43 |     return Array.from({ length: this.NumberOfPages }, (_, i) => i + 1);
44 |   }
45 |   previous() {
46 |     if (this.page > 1) {
47 |       this.page--;
48 |       this.getProducts();
49 |     }
50 |   }
51 | 
52 |   next() {
53 |     if (this.page < this.NumberOfPages) {
54 |       this.page++;
55 |       this.getProducts();
56 |     }
57 |   }
58 | 
59 |   // navToPage(page: number){
60 |   //   this.page = page;
61 |   //   this.getProducts();
62 |   // };
63 | }
64 | 


--------------------------------------------------------------------------------
/src/app/components/seller-workshop-page/myworkshop/myworkshop.component.css:
--------------------------------------------------------------------------------
 1 | button {
 2 |   color: #000;
 3 |   text-transform: uppercase;
 4 |   letter-spacing: 5px;
 5 |   font-weight: bold;
 6 |   font-size: 17px;
 7 |   padding: 0.5rem 1rem;
 8 |   border: 1px solid #ffffff1f;
 9 |   border-radius: 20px;
10 |   background-color: #f6eec9;
11 |   -webkit-box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
12 |   box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
13 |   -webkit-transition: box-shadow 0.3s ease-in-out;
14 |   transition: box-shadow 0.3s ease-in-out;
15 | }
16 | 
17 | button:hover {
18 |   color: #357af0;
19 |   background-color: linear-gradient(145deg, #d4d4d4, #fbfbfb);
20 |   -webkit-box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
21 |   box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
22 | }
23 | 
24 | button:active {
25 |   color: #357af0;
26 |   background-color: #ebebeb;
27 |   -webkit-box-shadow: inset 5px 5px 15px #cccccc, inset -5px -5px 15px #ffffff;
28 |   box-shadow: inset 5px 5px 15px #cccccc, inset -5px -5px 15px #ffffff;
29 | }
30 | 


--------------------------------------------------------------------------------
/src/app/components/seller-workshop-page/myworkshop/myworkshop.component.html:
--------------------------------------------------------------------------------
 1 | <div class="my-workshops w-100 container" style="margin-top: 120px">
 2 |   <div *ngIf="workshops.length > 0; else NoWorkshop" class="row g-2">
 3 |     <div
 4 |       class="col-12 col-md-6 col-lg-4 mb-4 row d-flex flex-wrap"
 5 |       *ngFor="let workshop of workshops; let i = index"
 6 |     >
 7 |       <app-sellerworkshops
 8 |         class="w-100 mx-1"
 9 |         [workshop]="workshop"
10 |         [index]="i"
11 |       ></app-sellerworkshops>
12 |     </div>
13 |     <nav aria-label="Page navigation example" class="align-self-center mx-auto">
14 |       <ul class="pagination">
15 |         <li class="page-item">
16 |           <button (click)="previous()" class="page-link" aria-label="Previous">
17 |             <span aria-hidden="true">&laquo;</span>
18 |           </button>
19 |         </li>
20 |         <!-- <li
21 |           class="page-item"
22 |           *ngFor="let page of pages"
23 |           (click)="navToPage(page)"
24 |         >
25 |           <button class="page-link">{{ page }}</button>
26 |         </li> -->
27 | 
28 |         <li class="page-item">
29 |           <button (click)="next()" class="page-link" aria-label="Next">
30 |             <span aria-hidden="true">&raquo;</span>
31 |           </button>
32 |         </li>
33 |       </ul>
34 |     </nav>
35 |   </div>
36 | 
37 |   <ng-template #NoWorkshop>
38 |     <div
39 |       class="text-center mt-5 d-flex justify-content-center align-items-center"
40 |     >
41 |       <h3>You don't have any workshop</h3>
42 |     </div>
43 |   </ng-template>
44 | </div>
45 | 


--------------------------------------------------------------------------------
/src/app/components/seller-workshop-page/myworkshop/myworkshop.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 2 | import { Workshop } from '../../../model/workshop.model';
 3 | import { WorkshopService } from '../../../services/workshop/workshop.service';
 4 | import { TokenStorageService } from '../../../services/token/token-storage.service';
 5 | import { HttpErrorResponse } from '@angular/common/http';
 6 | import * as bootstrap from 'bootstrap';
 7 | 
 8 | 
 9 | 
10 | @Component({
11 |   selector: 'app-myworkshop',
12 |   templateUrl: './myworkshop.component.html',
13 |   styleUrls: ['./myworkshop.component.css']
14 | })
15 | export class MyworkshopComponent implements OnInit {
16 |   @ViewChild('myModal') myModal!: ElementRef;
17 | 
18 |   page = 1;
19 |   limit = 3;
20 |   NumberOfPages!: number;
21 |   currentUser: any;
22 |   currentUserId: any;
23 |   workshops: Workshop[] = [];
24 | 
25 | 
26 |   constructor(protected workshopService:WorkshopService,
27 |     private tokenService: TokenStorageService,) {}
28 | 
29 |   ngOnInit() {
30 |     this.currentUser = this.tokenService.getUser();
31 |     this.currentUserId = this.currentUser._id;
32 |     console.log(this.currentUserId );
33 |     
34 |     this.getWorkshops();
35 | 
36 |   }
37 | 
38 |   getWorkshops() {
39 |     // this.workshopService.products = [];
40 |     this.workshopService.getSellerWorkshops(this.page, this.limit,this.currentUserId).subscribe(
41 |       (response: any) => {
42 | 
43 |         this.workshops  = response.data.workshops;
44 |         this.NumberOfPages = Math.ceil(response.data.totalRecords / this.limit);
45 |         // this.productService.products.push(...products);
46 |       },
47 |       ({ status, message }: HttpErrorResponse) => {
48 |         console.log(`Error ${status}: ${message}`);
49 |       }
50 |     );
51 |   }
52 |   get pages(): number[] {
53 |     return Array.from({ length: this.NumberOfPages }, (_, i) => i + 1);
54 |   }
55 |   previous() {
56 |     if (this.page > 1) {
57 |       this.page--;
58 |       this.getWorkshops();
59 |     }
60 |   }
61 | 
62 |   next() {
63 |     if (this.page < this.NumberOfPages) {
64 |       this.page++;
65 |       this.getWorkshops();
66 |     }
67 |   }
68 | 
69 |   // navToPage(page: number){
70 |   //   this.page = page;
71 |   //   this.getWorkshops();
72 |   // };
73 |   showModal() {
74 |     const modal = new bootstrap.Modal(this.myModal.nativeElement);
75 |     modal.show();
76 |   }
77 | }
78 | 
79 | 
80 | 
81 | 
82 | 
83 | 
84 | 
85 | 
86 | 
87 | 
88 | 
89 | 
90 | 
91 | 
92 | 
93 | 


--------------------------------------------------------------------------------
/src/app/components/seller-workshop-page/sellerworkshops/sellerworkshops.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SellerworkshopsComponent } from './sellerworkshops.component';
 4 | 
 5 | describe('SellerworkshopsComponent', () => {
 6 |   let component: SellerworkshopsComponent;
 7 |   let fixture: ComponentFixture<SellerworkshopsComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [SellerworkshopsComponent]
12 |     });
13 |     fixture = TestBed.createComponent(SellerworkshopsComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/seller-workshop-page/sellerworkshops/sellerworkshops.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 2 | import { FormBuilder, NgForm } from '@angular/forms';
 3 | import { DomSanitizer } from '@angular/platform-browser';
 4 | import { NavigationExtras, Router } from '@angular/router';
 5 | import * as bootstrap from 'bootstrap';
 6 | import { Workshop } from 'src/app/model/workshop.model';
 7 | import { WorkshopService } from 'src/app/services/workshop/workshop.service';
 8 | 
 9 | @Component({
10 |   selector: 'app-sellerworkshops',
11 |   templateUrl: './sellerworkshops.component.html',
12 |   styleUrls: ['./sellerworkshops.component.css'],
13 | })
14 | export class SellerworkshopsComponent {
15 |   @Input() workshop: any;
16 |   @Input() index: any;
17 |   workshopIdToDelete: any;
18 | 
19 |   @ViewChild('myModal') myModal!: ElementRef;
20 |   constructor(
21 |     private workshopService: WorkshopService,
22 |     private router: Router
23 |   ) {}
24 | 
25 |   deleteWorkshop(workshopId: string) {
26 |     console.log(workshopId);
27 | 
28 |     this.workshopService.deleteWorkshop(workshopId).subscribe({
29 |       next: (data) => {
30 |         location.reload();
31 |         this.router.navigate(['seller/myWorkshops']);
32 |       },
33 |       error: (err) => {},
34 |     });
35 |   }
36 | 
37 |   showModal() {
38 |     const modal = new bootstrap.Modal(this.myModal.nativeElement);
39 |     modal.show();
40 |   }
41 | 
42 |   openEditWorkshopModal() {
43 |     let navigationExtras: NavigationExtras = {
44 |       queryParams: {
45 |         special: JSON.stringify(this.workshop),
46 |       },
47 |     };
48 | 
49 |     this.router.navigate([
50 |       `seller/editWorkshop/${this.workshop._id}`,
51 |       navigationExtras,
52 |     ]);
53 |   }
54 | 
55 |   calculateDuration() {
56 |     const start = new Date(this.workshop.startDate);
57 |     const end = new Date(this.workshop.endDate);
58 |     const durationInMilliseconds = end.getTime() - start.getTime();
59 |     const durationInDays = Math.floor(
60 |       durationInMilliseconds / (1000 * 60 * 60 * 24)
61 |     );
62 |     return `From ${this.formatDate(start)} to ${this.formatDate(end)} (${durationInDays} days)`;
63 |   }
64 | 
65 |   formatDate(date: Date) {
66 |     const day = date.getDate();
67 |     const month = new Intl.DateTimeFormat('en', { month: 'short' }).format(
68 |       date
69 |     );
70 |     return `${day} ${month}`;
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/app/components/sellers-page/sellercard/sellercard.component.css:
--------------------------------------------------------------------------------
  1 | .card {
  2 |   position: relative;
  3 |   background: #f9f1eb;
  4 |   width: 190px;
  5 |   height: 265px;
  6 |   cursor: pointer;
  7 |   transition: all .3 ease;
  8 |   overflow: visible;
  9 |   box-shadow: 0px 1px 5px rgba(0, 0, 0, .3);
 10 | }
 11 | 
 12 | .product {
 13 |   content: "";
 14 |   position: absolute;
 15 |   top: 10%;
 16 |   left: 50%;
 17 |   transform: translate(-50%, 0);
 18 |   width: 150px;
 19 |   height: 150px;
 20 |   background-color: #faf3e8;
 21 |   z-index: 1;
 22 | }
 23 | 
 24 | .product p {
 25 |   font-size: 17px;
 26 |   text-align: center;
 27 |   color: #181818;
 28 |   line-height: 150px;
 29 | }
 30 | 
 31 | .shine {
 32 |   position: relative;
 33 |   top: 0;
 34 |   left: 0;
 35 |   width: 190px;
 36 |   height: 265px;
 37 |   overflow: hidden;
 38 | }
 39 | 
 40 | .shine-effect {
 41 |   position: absolute;
 42 |   top: -15%;
 43 |   left: 150%;
 44 |   width: 25px;
 45 |   height: 400px;
 46 |   background-color: #ffffff2a;
 47 |   box-shadow: 0 0 15px 2px #ffffff42;
 48 |   transform: rotate(25deg);
 49 |   transition: all 1s cubic-bezier(0.78, 0.02, 0.5, 0.77);
 50 |   z-index: 5;
 51 | }
 52 | 
 53 | .pattern-1 {
 54 |   position: absolute;
 55 |   top: 0;
 56 |   left: 0;
 57 |   width: 125px;
 58 |   height: auto;
 59 |   z-index: 2;
 60 | }
 61 | 
 62 | .pattern-2 {
 63 |   position: absolute;
 64 |   top: -10%;
 65 |   left: -10%;
 66 |   width: 200px;
 67 |   height: auto;
 68 |   z-index: 2;
 69 | }
 70 | 
 71 | .tree {
 72 |   position: absolute;
 73 |   bottom: 1%;
 74 |   right: -2%;
 75 |   width: 100px;
 76 |   height: auto;
 77 |   transform-origin: 100% 0;
 78 |   transform: rotate(-15deg);
 79 |   z-index: 3;
 80 | }
 81 | 
 82 | .card:hover {
 83 |   transform: scale(1.02);
 84 | }
 85 | 
 86 | .card:hover .shine-effect {
 87 |   left: -100%;
 88 | }
 89 | 
 90 | .card:active {
 91 |   transform: scale(1.02) translate(0, 5%);
 92 | }
 93 | 
 94 | .fil-pattern-1 {
 95 |   fill: #f3d78a00
 96 | }
 97 | 
 98 | .fil-pattern-2 {
 99 |   fill: #996d4700;
100 |   fill-rule: nonzero
101 | }
102 | 
103 | .fil0 {
104 |   fill: #996d47
105 | }
106 | 


--------------------------------------------------------------------------------
/src/app/components/sellers-page/sellercard/sellercard.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SellercardComponent } from './sellercard.component';
 4 | 
 5 | describe('SellercardComponent', () => {
 6 |   let component: SellercardComponent;
 7 |   let fixture: ComponentFixture<SellercardComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ SellercardComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(SellercardComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/sellers-page/sellercard/sellercard.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Input, OnInit } from '@angular/core';
 2 | import { SellerService } from 'src/app/services/seller/seller.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-sellercard',
 6 |   templateUrl: './sellercard.component.html',
 7 |   styleUrls: ['./sellercard.component.css'],
 8 | })
 9 | export class SellercardComponent implements OnInit {
10 |   @Input() seller: any;
11 |   totalOrders: any;
12 |   constructor(private sellerService: SellerService) {}
13 |   ngOnInit(): void {
14 |     this.getSellerStatistics();
15 |   }
16 |   getSellerStatistics() {
17 |     this.sellerService.getSellerStatistics(this.seller._id).subscribe({
18 |       next: (data: any) => {
19 |         this.totalOrders = data.totalOrders;
20 |       },
21 |       error: (error: any) => {
22 |         console.log(error);
23 |       },
24 |     });
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/app/components/sellers-page/sellers/sellers.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/app/components/sellers-page/sellers/sellers.component.css


--------------------------------------------------------------------------------
/src/app/components/sellers-page/sellers/sellers.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container" style="margin-top: 150px">
 2 |   <div class="row d-flex flex-wrap">
 3 |     <app-sellercard
 4 |       *ngFor="let seller of sellerService.sellers"
 5 |       class="pdtCard col-12 col-md-4 col-lg-3 d-flex justify-content-center"
 6 |       [seller]="seller"
 7 |     ></app-sellercard>
 8 |   </div>
 9 |   <nav aria-label="Page navigation example">
10 |     <ul class="pagination">
11 |       <li class="page-item">
12 |         <button (click)="previous()" class="page-link" aria-label="Previous">
13 |           <span aria-hidden="true">&laquo;</span>
14 |         </button>
15 |       </li>
16 |       <li
17 |         class="page-item"
18 |         *ngFor="let page of pages"
19 |         (click)="navToPage(page)"
20 |       >
21 |         <button class="page-link">{{ page }}</button>
22 |       </li>
23 |       <li class="page-item">
24 |         <button (click)="next()" class="page-link" aria-label="Next">
25 |           <span aria-hidden="true">&raquo;</span>
26 |         </button>
27 |       </li>
28 |     </ul>
29 |   </nav>
30 | </div>
31 | 


--------------------------------------------------------------------------------
/src/app/components/sellers-page/sellers/sellers.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SellersComponent } from './sellers.component';
 4 | 
 5 | describe('SellersComponent', () => {
 6 |   let component: SellersComponent;
 7 |   let fixture: ComponentFixture<SellersComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ SellersComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(SellersComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/sellers-page/sellers/sellers.component.ts:
--------------------------------------------------------------------------------
 1 | import { HttpErrorResponse } from '@angular/common/http';
 2 | import { Component } from '@angular/core';
 3 | import { SellerService } from 'src/app/services/seller/seller.service';
 4 | 
 5 | @Component({
 6 |   selector: 'app-sellers',
 7 |   templateUrl: './sellers.component.html',
 8 |   styleUrls: ['./sellers.component.css']
 9 | })
10 | export class SellersComponent {
11 |   page = 1;
12 |   limit = 2;
13 |   NumberOfPages!: number;
14 | 
15 |   constructor(protected sellerService: SellerService) {}
16 | 
17 |   ngOnInit() {
18 |     this.getProducts();
19 |   }
20 | 
21 |   getProducts() {
22 |     this.sellerService.sellers = [];
23 |     this.sellerService.getAllSellers(this.page, this.limit).subscribe(
24 |       (response: any) => {
25 |         const { sellers } = response.data;        
26 |         this.NumberOfPages = Math.ceil(response.data.totalRecords / this.limit);
27 | 
28 |         this.sellerService.sellers.push(...sellers);
29 |       },
30 |       ({ status, message }: HttpErrorResponse) => {
31 |         // console.log(`Error ${status}: ${message}`);
32 |       }
33 |     );
34 |   }
35 |   get pages(): number[] {
36 |     return Array.from({ length: this.NumberOfPages }, (_, i) => i + 1);
37 |   }
38 |   previous() {
39 |     if (this.page > 1) {
40 |       this.page--;
41 |       this.getProducts();
42 |     }
43 |   }
44 | 
45 |   next() {
46 |     if (this.page < this.NumberOfPages) {
47 |       this.page++;
48 |       this.getProducts();
49 |     }
50 |   }
51 | 
52 |   navToPage(page: number){
53 |     this.page = page;
54 |     this.getProducts();
55 |   };
56 | }
57 | 


--------------------------------------------------------------------------------
/src/app/components/spinner/spinner.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SpinnerComponent } from './spinner.component';
 4 | 
 5 | describe('SpinnerComponent', () => {
 6 |   let component: SpinnerComponent;
 7 |   let fixture: ComponentFixture<SpinnerComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ SpinnerComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(SpinnerComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/spinner/spinner.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { LoaderService } from 'src/app/services/loader/loader.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-spinner',
 6 |   templateUrl: './spinner.component.html',
 7 |   styleUrls: ['./spinner.component.css']
 8 | })
 9 | export class SpinnerComponent {
10 |   constructor(public loader: LoaderService) { }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/components/stripe/stripe.component.css:
--------------------------------------------------------------------------------
1 | .testMode{
2 |   display: none !important;
3 | }


--------------------------------------------------------------------------------
/src/app/components/stripe/stripe.component.html:
--------------------------------------------------------------------------------
 1 | <!-- <div class="container">
 2 |   <h2 class="mt-5 mb-4">Angular Stripe Checkout Example</h2>
 3 |   <div class="col-md-5 mb-2">
 4 |     <button (click)="makePayment(15)" class="btn btn-danger btn-block">Pay $15</button>
 5 |   </div>
 6 |   <div class="col-md-5 mb-2">
 7 |     <button (click)="makePayment(25)" class="btn btn-primary btn-block">Pay $25</button>
 8 |   </div>
 9 |   <div class="col-md-5">
10 |     <button (click)="makePayment(35)" class="btn btn-success btn-block">Pay $35</button>
11 |   </div>
12 | </div> -->


--------------------------------------------------------------------------------
/src/app/components/stripe/stripe.component.spec.ts:
--------------------------------------------------------------------------------
 1 | // import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | // import { StripeComponent } from './stripe.component';
 4 | 
 5 | // describe('StripeComponent', () => {
 6 | //   let component: StripeComponent;
 7 | //   let fixture: ComponentFixture<StripeComponent>;
 8 | 
 9 | //   beforeEach(() => {
10 | //     TestBed.configureTestingModule({
11 | //       declarations: [StripeComponent]
12 | //     });
13 | //     fixture = TestBed.createComponent(StripeComponent);
14 | //     component = fixture.componentInstance;
15 | //     fixture.detectChanges();
16 | //   });
17 | 
18 | //   it('should create', () => {
19 | //     expect(component).toBeTruthy();
20 | //   });
21 | // });
22 | 


--------------------------------------------------------------------------------
/src/app/components/stripe/stripe.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { PaymentService } from 'src/app/services/payment/payment.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-stripe',
 6 |   templateUrl: './stripe.component.html',
 7 |   styleUrls: ['./stripe.component.css']
 8 | })
 9 | export class StripeComponent {
10 |   paymentHandler: any = null;
11 |   constructor(private paymentService: PaymentService) {}
12 |   // ngOnInit() {
13 |   //   this.invokeStripe();
14 |   //   this.makePayment();
15 |   // }
16 |   makePayment() {
17 |     const amount = this.paymentService.getAmount();
18 |     console.log(amount);
19 |      this.paymentHandler = (<any>window).StripeCheckout.configure({
20 |       key: 'pk_test_51N8TnoIudPN1uZnnijC0SWZydb6SEHCPOYhHrs1WLbpxtdTWyjOmqbx6SS6EAMKlUCYYAd9JZ7GyobbGQ4bMJ8pY005OrIYVCA',
21 |       locale: 'auto',
22 |       token: function (stripeToken: any) {
23 |         console.log(stripeToken);
24 |         alert('Stripe token generated!');
25 |         //call create order endpoint
26 | 
27 |       },
28 |     });
29 |     if (this.paymentHandler) {
30 |       this.openPayment(amount);
31 |     }
32 |     // else {
33 |     //   setTimeout(() => {
34 |     //     this.makePayment();
35 |     //   }, 500);
36 |     // }
37 |   }
38 |   openPayment(amount: number) {
39 |     this.paymentHandler.open({
40 |       name: 'Positronx',
41 |       description: '3 widgets',
42 |       amount: amount * 100,
43 |     });
44 |   }
45 |   invokeStripe() {
46 |     if (!window.document.getElementById('stripe-script')) {
47 |       const script = window.document.createElement('script');
48 |       script.id = 'stripe-script';
49 |       script.type = 'text/javascript';
50 |       script.src = 'https://checkout.stripe.com/checkout.js';
51 |       script.onload = () => {
52 |         this.paymentHandler = (<any>window).StripeCheckout.configure({
53 |           key: 'pk_test_51N8TnoIudPN1uZnnijC0SWZydb6SEHCPOYhHrs1WLbpxtdTWyjOmqbx6SS6EAMKlUCYYAd9JZ7GyobbGQ4bMJ8pY005OrIYVCA',
54 |           locale: 'auto',
55 |           token: function (stripeToken: any) {
56 |             console.log(stripeToken);
57 |             alert('Payment has been successfull!');
58 |           },
59 |         });
60 |       };
61 |       window.document.body.appendChild(script);
62 |     }
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/app/components/workshop-page/workshop-card/workshop-card.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { WorkshopCardComponent } from './workshop-card.component';
 4 | 
 5 | describe('WorkshopCardComponent', () => {
 6 |   let component: WorkshopCardComponent;
 7 |   let fixture: ComponentFixture<WorkshopCardComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ WorkshopCardComponent ]
12 |     })
13 |     .compileComponents();
14 | 
15 |     fixture = TestBed.createComponent(WorkshopCardComponent);
16 |     component = fixture.componentInstance;
17 |     fixture.detectChanges();
18 |   });
19 | 
20 |   it('should create', () => {
21 |     expect(component).toBeTruthy();
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/src/app/components/workshop-page/workshop-card/workshop-card.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 2 | import { Workshop } from 'src/app/model/workshop.model';
 3 | import { WorkshopService } from 'src/app/services/workshop/workshop.service';
 4 | import { TokenStorageService } from '../../../services/token/token-storage.service';
 5 | import { AuthService } from '../../../services/auth/auth.service';
 6 | 
 7 | @Component({
 8 |   selector: 'app-workshop-card',
 9 |   templateUrl: './workshop-card.component.html',
10 |   styleUrls: ['./workshop-card.component.css'],
11 | })
12 | export class WorkshopCardComponent implements OnInit {
13 |   @Input() workshop: any;
14 |   sellerImage: any;
15 | 
16 |   constructor(
17 |     private workshopService: WorkshopService,
18 |     private AuthService: AuthService
19 |   ) {}
20 | 
21 |   ngOnInit(): void {
22 |     this.getSeller(this.workshop.seller_id);
23 |   }
24 | 
25 |   getSeller(userId: any) {
26 |     this.AuthService.getUserByID(userId).subscribe({
27 |       next: (response: any) => {
28 |         if (response.data.user.image){
29 |           this.sellerImage = response.data.user.image;
30 |         } else {
31 |           
32 |         }
33 |         // console.log(this.sellerImage);
34 |       },
35 |       error: (error) => {
36 |         // console.log(error);
37 |       },
38 |     });
39 |   }
40 | 
41 |   sendWorkshopEmail() {
42 |     const nameInput = document.getElementById('nameInput') as HTMLInputElement;
43 |     const emailInput = document.getElementById(
44 |       'emailInput'
45 |     ) as HTMLInputElement;
46 | 
47 |     const data = {
48 |       name: nameInput.value,
49 |       email: emailInput.value,
50 |     };
51 |     this.workshopService.sendWorkshopEmail(data).subscribe({
52 |       next: (response: any) => {
53 |         console.log(response);
54 |       },
55 |       error: (error: any) => {
56 |         console.log(error);
57 |       },
58 |     });
59 |   }
60 | }
61 | 
62 | 
63 | 
64 | 
65 | 


--------------------------------------------------------------------------------
/src/app/components/workshop-page/workshop-page/workshop-page.component.css:
--------------------------------------------------------------------------------
 1 | 
 2 | button {
 3 |   color: black;
 4 |   text-transform: uppercase;
 5 |   letter-spacing: 5px;
 6 |   font-weight: bold;
 7 |   font-size: 17px;
 8 |   padding: 0.5rem 1rem;
 9 |   border: 1px solid #ffffff1f;
10 |   border-radius: 20px;
11 |   background: #F6EEC9;
12 |   -webkit-box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
13 |   box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
14 |   -webkit-transition: box-shadow 0.3s ease-in-out;
15 |   transition: box-shadow 0.3s ease-in-out;
16 | }
17 | 
18 | button:hover {
19 |   color: #357af0;
20 |   background: linear-gradient(145deg, #d4d4d4, #fbfbfb);
21 |   -webkit-box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
22 |   box-shadow: 5px 5px 15px #cccccc, -5px -5px 15px #ffffff;
23 | }
24 | 
25 | button:active {
26 |   color: #357af0;
27 |   background: #ebebeb;
28 |   -webkit-box-shadow: inset 5px 5px 15px #cccccc, inset -5px -5px 15px #ffffff;
29 |   box-shadow: inset 5px 5px 15px #cccccc, inset -5px -5px 15px #ffffff;
30 | }
31 | 
32 | .workshop-cover {
33 |   position: relative;
34 |   background-image: url("/assets/Images/pexels-brett-sayles-6424244.jpg") !important;
35 |   width: 100%;
36 |   height: 550px;
37 |   background-repeat: no-repeat;
38 |   background-position: center;
39 |   background-size: cover;
40 |   margin-bottom: 9rem;
41 | }
42 | .workshop-header {
43 |   position: absolute;
44 |   top: 65%;
45 |   left: 10%;
46 |   background-color: #996d47;
47 |   width: 46%;
48 |   height: 300px;
49 |   padding: 5%;
50 |   color: white;
51 |   line-height: 1.6;
52 | }
53 | .workshop-header h1 {
54 |   font-family: "Delicious Handrawn", cursive;
55 | }
56 | @media only screen and (max-width: 768px) {
57 |   .workshop-header {
58 |     top: 25%;
59 |     left: 10%;
60 |     width: 80%;
61 |     padding: 20px;
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/app/components/workshop-page/workshop-page/workshop-page.component.html:
--------------------------------------------------------------------------------
 1 | <div class="w-100 d-flex flex-column" style="padding-top: 85px">
 2 |   <div class="workshop-cover">
 3 |     <div class="workshop-header">
 4 |       <h1>{{ "WorkshopsPage.Header" | translate }}</h1>
 5 |       <p>
 6 |         {{ "WorkshopsPage.paragraph" | translate }}
 7 |       </p>
 8 |     </div>
 9 |   </div>
10 |   <div class="mt-5 mx-3">
11 |     <app-workshop-card
12 |       *ngFor="let workshop of workshops"
13 |       class="pdtCard col-12 d-flex"
14 |       [workshop]="workshop"
15 |     ></app-workshop-card>
16 |   </div>
17 |   <nav aria-label="Page navigation example" class="align-self-center">
18 |     <ul class="pagination">
19 |       <li class="page-item">
20 |         <button (click)="previous()" class="page-link" aria-label="Previous">
21 |           <span aria-hidden="true">&laquo;</span>
22 |         </button>
23 |       </li>
24 |       <li
25 |         class="page-item"
26 |         *ngFor="let page of pages"
27 |         (click)="navToPage(page)"
28 |       >
29 |         <button class="page-link">{{ page }}</button>
30 |       </li>
31 | 
32 |       <li class="page-item">
33 |         <button (click)="next()" class="page-link" aria-label="Next">
34 |           <span aria-hidden="true">&raquo;</span>
35 |         </button>
36 |       </li>
37 |     </ul>
38 |   </nav>
39 | </div>
40 | 


--------------------------------------------------------------------------------
/src/app/components/workshop-page/workshop-page/workshop-page.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { WorkshopPageComponent } from './workshop-page.component';
 4 | 
 5 | describe('WorkshopPageComponent', () => {
 6 |   let component: WorkshopPageComponent;
 7 |   let fixture: ComponentFixture<WorkshopPageComponent>;
 8 | 
 9 |   beforeEach(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [WorkshopPageComponent]
12 |     });
13 |     fixture = TestBed.createComponent(WorkshopPageComponent);
14 |     component = fixture.componentInstance;
15 |     fixture.detectChanges();
16 |   });
17 | 
18 |   it('should create', () => {
19 |     expect(component).toBeTruthy();
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/components/workshop-page/workshop-page/workshop-page.component.ts:
--------------------------------------------------------------------------------
 1 | import { HttpErrorResponse } from '@angular/common/http';
 2 | import { Component, OnInit } from '@angular/core';
 3 | import { WorkshopService } from 'src/app/services/workshop/workshop.service';
 4 | 
 5 | @Component({
 6 |   selector: 'app-workshop-page',
 7 |   templateUrl: './workshop-page.component.html',
 8 |   styleUrls: ['./workshop-page.component.css'],
 9 | })
10 | export class WorkshopPageComponent implements OnInit {
11 |   constructor(
12 |     protected workshopService: WorkshopService,
13 |   ) {}
14 |   page = 1;
15 |   limit = 8;
16 |   NumberOfPages!: number;
17 |   workshops = [];
18 |   ngOnInit(): void {
19 |     this.getWorkshops();
20 |   }
21 | 
22 |   getWorkshops() {
23 |     this.workshopService.getAllWorkshops(this.page, this.limit).subscribe({
24 |       next: (response: any) => {
25 |         this.workshops = response.data.workshops;
26 |         this.NumberOfPages = Math.ceil(response.data.totalRecords / this.limit);
27 |       },
28 |       error: ({ status, message }: HttpErrorResponse) => {
29 |         // console.log(`Error ${status}: ${message}`);
30 |       }
31 |   });
32 |   }
33 | 
34 |   get pages(): number[] {
35 |     return Array.from({ length: this.NumberOfPages }, (_, i) => i + 1);
36 |   }
37 |   
38 |   previous() {
39 |     if (this.page > 1) {
40 |       this.page--;
41 |       this.getWorkshops();
42 |     }
43 |   }
44 | 
45 |   next() {
46 |     if (this.page < this.NumberOfPages) {
47 |       this.page++;
48 |       this.getWorkshops();
49 |     }
50 |   }
51 | 
52 |   navToPage(page: number) {
53 |     this.page = page;
54 |     this.getWorkshops();
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/app/directives/drag.directive.spec.ts:
--------------------------------------------------------------------------------
1 | import { DragDirective } from './drag.directive';
2 | 
3 | describe('DragDirective', () => {
4 |   it('should create an instance', () => {
5 |     const directive = new DragDirective();
6 |     expect(directive).toBeTruthy();
7 |   });
8 | });
9 | 


--------------------------------------------------------------------------------
/src/app/directives/drag.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';
 2 | import { DomSanitizer } from '@angular/platform-browser';
 3 | import { FileHandle } from '../model/file-handler.model';
 4 | 
 5 | @Directive({
 6 |   selector: '[appDrag]'
 7 | })
 8 | export class DragDirective {
 9 |   @Output() files :EventEmitter<FileHandle> = new EventEmitter();
10 |   @HostBinding("style.background") private background = "#fff";
11 |   constructor(private sanitizer : DomSanitizer) { }
12 | 
13 | 
14 |   @HostListener("dragover", ["$event"])
15 |   public ondragover(evt : DragEvent){
16 | 
17 |     evt.preventDefault();
18 |     evt.stopPropagation();
19 |     this.background = "#999"
20 |   }
21 |   @HostListener("dragleave", ["$event"])
22 |   public ondragleave(evt : DragEvent){
23 |     evt.preventDefault();
24 |     evt.stopPropagation();
25 |     this.background = "#fff"
26 | 
27 |   }
28 |   @HostListener("drop", ["$event"])
29 |   public ondrop(evt : DragEvent){
30 |     evt.preventDefault();
31 |     evt.stopPropagation();
32 |     this.background = "#fff"
33 |     let fileHandle : FileHandle  ;
34 |     const file = evt.dataTransfer?.files[0] ;
35 |     const url =  this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file!));
36 |     fileHandle = {file , url} ;
37 |     this.files.emit(fileHandle);
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/app/directives/set-direction.directive.spec.ts:
--------------------------------------------------------------------------------
1 | import { SetDirectionDirective } from './set-direction.directive';
2 | 
3 | describe('SetDirectionDirective', () => {
4 |   it('should create an instance', () => {
5 |     const directive = new SetDirectionDirective();
6 |     expect(directive).toBeTruthy();
7 |   });
8 | });
9 | 


--------------------------------------------------------------------------------
/src/app/directives/set-direction.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, HostListener, OnInit } from '@angular/core';
 2 | import { RouterOutlet } from '@angular/router';
 3 | import { TranslateService } from '@ngx-translate/core';
 4 | 
 5 | @Directive({
 6 |   selector: '[appSetDirection]'
 7 | })
 8 | export class SetDirectionDirective {
 9 |   constructor(private routerOutlet: RouterOutlet , private translate:TranslateService) { }
10 | 
11 |   @HostListener('activate')
12 |   onActivate() {
13 |     let lang =  localStorage.getItem('language')
14 |     const dir = lang === 'ar' ? 'rtl' : 'ltr';
15 |     document.documentElement.setAttribute('dir', dir);
16 |     this.translate.use(lang!);
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app/error/error.component.html:
--------------------------------------------------------------------------------
 1 | 
 2 |   <div class="box">
 3 |     <nav class="shelf">
 4 |       <a routerLinkActive="active" routerLink="/home" class="book home-page">Home page</a>
 5 |       <a routerLinkActive="active" routerLink="/about" class="book about-us">About us</a>
 6 |       <a routerLinkActive="active" routerLink="/contact" class="book contact">Contact</a>
 7 |       <a routerLinkActive="active" routerLink="/faq" class="book faq">F.A.Q.</a>
 8 | 
 9 | 
10 |       <span class="book not-found"></span>
11 | 
12 |       <span class="door left"></span>
13 |       <span class="door right"></span>
14 |     </nav>
15 |     <h1>Error 404</h1>
16 |     <p>Oops!! The page you're looking for can't be found</p>
17 |     </div>
18 | 


--------------------------------------------------------------------------------
/src/app/error/error.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-error',
 5 |   templateUrl: './error.component.html',
 6 |   styleUrls: ['./error.component.css']
 7 | })
 8 | export class ErrorComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/guard/auth.guard.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | import { CanActivateFn } from '@angular/router';
 3 | 
 4 | import { authGuard } from './auth.guard';
 5 | 
 6 | describe('authGuard', () => {
 7 |   const executeGuard: CanActivateFn = (...guardParameters) => 
 8 |       TestBed.runInInjectionContext(() => authGuard(...guardParameters));
 9 | 
10 |   beforeEach(() => {
11 |     TestBed.configureTestingModule({});
12 |   });
13 | 
14 |   it('should be created', () => {
15 |     expect(executeGuard).toBeTruthy();
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/src/app/guard/auth.guard.ts:
--------------------------------------------------------------------------------
 1 | import { ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 2 | import { TokenStorageService } from '../services/token/token-storage.service';
 3 | import { Observable } from 'rxjs/internal/Observable';
 4 | import { inject } from '@angular/core';
 5 | 
 6 | export const AuthGuard: CanActivateFn = (
 7 |   route: ActivatedRouteSnapshot,
 8 |   state: RouterStateSnapshot
 9 | ):
10 |   | Observable<boolean | UrlTree>
11 |   | Promise<boolean | UrlTree>
12 |   | boolean
13 |   | UrlTree => {
14 |   const router: Router = inject(Router);
15 |   const tokenStorage: TokenStorageService = inject(TokenStorageService);
16 | 
17 |   if (!tokenStorage.isLoggedIn()) return router.navigate(['auth']);
18 |   return true;
19 | 
20 | };


--------------------------------------------------------------------------------
/src/app/guard/customer.guard.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | import { CanActivateFn } from '@angular/router';
 3 | 
 4 | import { customerGuard } from './customer.guard';
 5 | 
 6 | describe('customerGuard', () => {
 7 |   const executeGuard: CanActivateFn = (...guardParameters) => 
 8 |       TestBed.runInInjectionContext(() => customerGuard(...guardParameters));
 9 | 
10 |   beforeEach(() => {
11 |     TestBed.configureTestingModule({});
12 |   });
13 | 
14 |   it('should be created', () => {
15 |     expect(executeGuard).toBeTruthy();
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/src/app/guard/customer.guard.ts:
--------------------------------------------------------------------------------
 1 | import { inject } from '@angular/core';
 2 | import { ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 3 | import { TokenStorageService } from '../services/token/token-storage.service';
 4 | import { Observable } from 'rxjs';
 5 | 
 6 | export const CustomerGuard: CanActivateFn = (
 7 |   route: ActivatedRouteSnapshot,
 8 |   state: RouterStateSnapshot
 9 | ):
10 |   | Observable<boolean | UrlTree>
11 |   | Promise<boolean | UrlTree>
12 |   | boolean
13 |   | UrlTree => {
14 |   const router: Router = inject(Router);
15 |   const tokenStorage: TokenStorageService = inject(TokenStorageService);
16 | 
17 |   if (!tokenStorage.isSeller()) return true;
18 |   return router.navigate(["**"]);
19 | };


--------------------------------------------------------------------------------
/src/app/guard/seller.guard.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | import { CanActivateFn } from '@angular/router';
 3 | 
 4 | import { sellerGuard } from './seller.guard';
 5 | 
 6 | describe('sellerGuard', () => {
 7 |   const executeGuard: CanActivateFn = (...guardParameters) => 
 8 |       TestBed.runInInjectionContext(() => sellerGuard(...guardParameters));
 9 | 
10 |   beforeEach(() => {
11 |     TestBed.configureTestingModule({});
12 |   });
13 | 
14 |   it('should be created', () => {
15 |     expect(executeGuard).toBeTruthy();
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/src/app/guard/seller.guard.ts:
--------------------------------------------------------------------------------
 1 | import { inject } from '@angular/core';
 2 | import { ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 3 | import { Observable } from 'rxjs/internal/Observable';
 4 | import { TokenStorageService } from '../services/token/token-storage.service';
 5 | 
 6 | export const SellerGuard: CanActivateFn = (
 7 |   route: ActivatedRouteSnapshot,
 8 |   state: RouterStateSnapshot
 9 | ):
10 |   | Observable<boolean | UrlTree>
11 |   | Promise<boolean | UrlTree>
12 |   | boolean
13 |   | UrlTree => {
14 |   const router: Router = inject(Router);
15 |   const tokenStorage: TokenStorageService = inject(TokenStorageService);
16 | 
17 |   if (tokenStorage.isSeller()) return true;
18 |   return false;
19 | };


--------------------------------------------------------------------------------
/src/app/helpers/AuthConfig.interceptor.ts:
--------------------------------------------------------------------------------
 1 | import { GoogleLoginProvider, SocialAuthService } from "@abacritt/angularx-social-login";
 2 | 
 3 | 
 4 | // let config=new SocialAuthService([
 5 | //     {
 6 | //         id:GoogleLoginProvider.PROVIDER_ID,
 7 | //         provider: new GoogleLoginProvider("748389809881-itoacndij8kntn22ovrorg263d3nlujp.apps.googleusercontent.com")
 8 | //     }
 9 | // ])
10 | 


--------------------------------------------------------------------------------
/src/app/helpers/auth.interceptor.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import {
 3 |   HttpRequest,
 4 |   HttpHandler,
 5 |   HttpEvent,
 6 |   HttpInterceptor
 7 | } from '@angular/common/http';
 8 | import { Observable } from 'rxjs';
 9 | import { TokenStorageService } from '../services/token/token-storage.service';
10 | 
11 | const TOKEN_ACCESS_KEY = 'Authorization'
12 | 
13 | @Injectable()
14 | export class AuthInterceptor implements HttpInterceptor {
15 | 
16 |   constructor(private token: TokenStorageService) {}
17 | 
18 |   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<unknown>> {
19 |     let authRequest = request;
20 |     const token = this.token.getToken();
21 |     if(token != null) {
22 |       authRequest = request.clone({
23 |         headers: request.headers.set(TOKEN_ACCESS_KEY, 'Bearer ' + token),
24 |       });
25 |     }
26 |     return next.handle(authRequest);
27 |   }
28 |   
29 | }
30 | 


--------------------------------------------------------------------------------
/src/app/helpers/cache.interceptor.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   HttpEvent,
 3 |   HttpHandler,
 4 |   HttpInterceptor,
 5 |   HttpRequest,
 6 |   HttpResponse,
 7 | } from '@angular/common/http';
 8 | import { Observable, of } from 'rxjs';
 9 | 
10 | import { Injectable } from '@angular/core';
11 | import { tap } from 'rxjs/operators';
12 | 
13 | @Injectable()
14 | export class CacheInterceptor implements HttpInterceptor {
15 |   private _cache: Map<
16 |     string,
17 |     {
18 |       response: HttpResponse<any>;
19 |     }
20 |   > = new Map();
21 | 
22 |   constructor() {}
23 | 
24 |   intercept(
25 |     request: HttpRequest<any>,
26 |     next: HttpHandler
27 |   ): Observable<HttpEvent<any>> {
28 |     if (request.method !== 'GET') {
29 |       return next.handle(request);
30 |     }
31 | 
32 |     const cachedResponse = this._cache.get(request.url);
33 | 
34 | 
35 |     return cachedResponse
36 |       ? of(cachedResponse.response)
37 |       : this._sendRequest(request, next);
38 |   }
39 | 
40 |   private _sendRequest(
41 |     request: HttpRequest<any>,
42 |     next: HttpHandler
43 |   ): Observable<HttpEvent<any>> {
44 |     const cachedResponse = this._cache.get(request.url);
45 |     console.log(request.url);
46 |     return next.handle(request).pipe(
47 |       tap((event) => {
48 |         if (event instanceof HttpResponse) {
49 |           if (!cachedResponse || !this._isResponseEqual(event, cachedResponse.response)) {
50 |             this._cache.set(request.url, {
51 |               response: event,
52 |             });
53 |           }
54 |         }
55 |       })
56 |     );
57 |   }
58 | 
59 |   private _isResponseEqual(
60 |     response1: HttpResponse<any>,
61 |     response2: HttpResponse<any>
62 |   ): boolean {
63 |     if (response1.status !== response2.status) {
64 |       return false;
65 |     }
66 | 
67 |     const keys1 = response1.headers.keys();
68 |     const keys2 = response2.headers.keys();
69 | 
70 |     if (keys1.length !== keys2.length) {
71 |       return false;
72 |     }
73 | 
74 |     for (const key of keys1) {
75 |       if (response1.headers.get(key) !== response2.headers.get(key)) {
76 |         return false;
77 |       }
78 |     }
79 | 
80 |     return JSON.stringify(response1.body) === JSON.stringify(response2.body);
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/src/app/helpers/loading.interceptor.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import {
 3 |   HttpRequest,
 4 |   HttpHandler,
 5 |   HttpEvent,
 6 |   HttpInterceptor,
 7 |   HttpResponse
 8 | } from '@angular/common/http';
 9 | import { Observable } from 'rxjs';
10 | import { finalize, delay, tap } from 'rxjs/operators';
11 | import { LoaderService } from '../services/loader/loader.service';
12 | 
13 | 
14 | @Injectable()
15 | export class LoadingInterceptor implements HttpInterceptor {
16 | 
17 |   private totalRequests = 0;
18 | 
19 |   constructor(
20 |     private loadingService: LoaderService
21 |   ) {}
22 | 
23 |   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
24 |     this.totalRequests++;
25 |     this.loadingService.setLoading(true);
26 |     return next.handle(request).pipe(
27 |       finalize(() => {
28 |         this.totalRequests--;
29 |         if (this.totalRequests == 0) {
30 |           this.loadingService.setLoading(false);
31 |         }
32 |       })
33 |     );
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/app/model/cart.model.ts:
--------------------------------------------------------------------------------
 1 | import { Product } from "./product.model";
 2 | 
 3 | export interface Cart {
 4 |   _id?: string;
 5 |   userId: string;
 6 |   products: {
 7 |     productId: Product;
 8 |     quantity: number;
 9 |   }[];
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/model/category.model.ts:
--------------------------------------------------------------------------------
1 | export interface Category {
2 |   id: number;
3 |   name: string;
4 |   productNum: number;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/app/model/file-handler.model.ts:
--------------------------------------------------------------------------------
1 | import { SafeUrl } from "@angular/platform-browser";
2 | 
3 | export interface FileHandle {
4 |     file? :File , 
5 |     url : SafeUrl 
6 | 
7 | }


--------------------------------------------------------------------------------
/src/app/model/order.model.ts:
--------------------------------------------------------------------------------
 1 | // import { FileHandle } from "./file-handler.model";
 2 | 
 3 | import { Product } from "./product.model";
 4 | 
 5 | export interface Order {
 6 | 
 7 |     _id?: string | null, 
 8 |     userId: string | null,
 9 |     client_name : string ,
10 |     phone : string ,
11 |     totalPrice : number ,
12 |     address : string ,
13 |     orderDate:Date,
14 |     orderStatus:string,
15 |     products: [{Product:any,quantity:number}],
16 |     payment_method:string
17 | }


--------------------------------------------------------------------------------
/src/app/model/product.model.ts:
--------------------------------------------------------------------------------
 1 | import { FileHandle } from "./file-handler.model";
 2 | 
 3 | export interface Product {
 4 |   _id?: string | null;
 5 |   user_id: string | null;
 6 |   name: string;
 7 |   description: string;
 8 |   category: string;
 9 |   price: number;
10 |   inStock: number;
11 |   actualPrice?:number| null;
12 |   priceDiscount: number;
13 |   images: FileHandle[];
14 | }


--------------------------------------------------------------------------------
/src/app/model/seller.model.ts:
--------------------------------------------------------------------------------
1 | export interface Seller {
2 |     name : string ,
3 |     email : string ,
4 | }


--------------------------------------------------------------------------------
/src/app/model/userProfile.model.ts:
--------------------------------------------------------------------------------
 1 | import { FileHandle } from "./file-handler.model";
 2 | 
 3 | export interface User {
 4 |   _id: string;
 5 |     name : string ,
 6 |     email : string ,
 7 |     type : string ,
 8 |   image: FileHandle,
 9 |   phone: Number | null,
10 |     address: {
11 |     appartmentNo: number | null;
12 |       city: string;
13 |       country: string;
14 |     };
15 |     socialMediaLinks: {
16 |      name: string;
17 |      link: string;
18 |     }[];
19 | 
20 | }


--------------------------------------------------------------------------------
/src/app/model/workshop.model.ts:
--------------------------------------------------------------------------------
 1 | import { FileHandle } from "./file-handler.model";
 2 | 
 3 | export interface Workshop {
 4 | 
 5 |     _id?: string | null, 
 6 |     seller_id: string | null,
 7 |     seller_name:string,
 8 |     title : string ,
 9 |     description : string ,
10 |     price : number ,
11 |     startDate : Date |null,
12 |     endDate :Date | null,
13 |     image: FileHandle | null
14 | 
15 | }


--------------------------------------------------------------------------------
/src/app/pipes/time-ago.pipe.spec.ts:
--------------------------------------------------------------------------------
1 | import { TimeAgoPipe } from './time-ago.pipe';
2 | 
3 | describe('TimeAgoPipe', () => {
4 |   it('create an instance', () => {
5 |     const pipe = new TimeAgoPipe();
6 |     expect(pipe).toBeTruthy();
7 |   });
8 | });
9 | 


--------------------------------------------------------------------------------
/src/app/pipes/time-ago.pipe.ts:
--------------------------------------------------------------------------------
 1 | import { Pipe, PipeTransform } from '@angular/core';
 2 | 
 3 | @Pipe({
 4 |   name: 'timeAgo'
 5 | })
 6 | export class TimeAgoPipe implements PipeTransform {
 7 | 
 8 |   transform(timestamp: string): string {
 9 |     const seconds = Math.floor((+new Date() - +new Date(timestamp)) / 1000);
10 |     // console.log(timestamp);
11 |     if(!seconds){
12 |       return `now`;
13 |     }
14 |     if (seconds < 60) {
15 |       return `${seconds} seconds ago`;
16 |     }
17 |     const minutes = Math.floor(seconds / 60);
18 |     if (minutes < 60) {
19 |       return `${minutes} minutes ago`;
20 |     }
21 | 
22 |     const hours = Math.floor(minutes / 60);
23 |     if (hours < 24) {
24 |       return `${hours} hours ago`;
25 |     }
26 | 
27 |     const days = Math.floor(hours / 24);
28 |     return `${days} days ago`;
29 |   }
30 | 
31 | }
32 | 


--------------------------------------------------------------------------------
/src/app/services/auth/auth.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { AuthService } from './auth.service';
 4 | 
 5 | describe('AuthService', () => {
 6 |   let service: AuthService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(AuthService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | 
17 | 
18 |   
19 | });
20 | 


--------------------------------------------------------------------------------
/src/app/services/auth/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { Observable} from 'rxjs';
 4 | import { TokenStorageService } from '../token/token-storage.service';
 5 | import { environment } from 'src/environments/environment';
 6 | 
 7 | // const BASEURL = 'http://localhost:7000/api/v1/users';
 8 | declare const FB: any;
 9 | @Injectable({
10 |   providedIn: 'root',
11 | })
12 | export class AuthService {
13 |   apiUrl = environment.apiUrl;
14 |   BASEURL = this.apiUrl + '/api/v1/users';
15 |   constructor(
16 |     private http: HttpClient,
17 |     private tokenStorage: TokenStorageService) { }
18 | 
19 |   login(userData: any): Observable<any> {
20 |     console.log(this.BASEURL);
21 |     return this.http.post(`${this.BASEURL}/login`, userData)
22 |   }
23 | 
24 |   signup(userData: any): Observable<any> {
25 |     return this.http.post(`${this.BASEURL}/signup`, userData)
26 |   }
27 |   logOut(): Observable<any> {
28 |     this.tokenStorage.removeUser();
29 |     this.tokenStorage.removeToken();
30 |     return this.http.get(`${this.BASEURL}/logout`)
31 |   }
32 |   requestReset(body: FormData): Observable<any> {
33 |     return this.http.post(`${this.BASEURL}/forgotPassword`, body);
34 |   }
35 |   updateProfile(body: any,userID: any) {
36 |     return this.http.patch(`${this.BASEURL}/${userID}`, body);
37 |   }
38 |   getUserByID(userID: any): Observable<any>  {
39 |     return this.http.get(`${this.BASEURL}/${userID}`);
40 |   }
41 |   uploadImage(image: FormData, userID: any) {
42 |     return this.http.patch(`${this.BASEURL}/${userID}`,image);
43 |   }
44 |   newPassword(body: any,token:string): Observable<any> {
45 |     return this.http.patch(`${this.BASEURL}/resetPassword/${token}`, body);
46 |   }
47 |   ValidPasswordToken(body:string): Observable<any> {
48 |     return this.http.post(`${this.BASEURL}/valid-password-token`, body);
49 |   }
50 |   fbLogin() {
51 |     return this.http.get(`${this.BASEURL}/facebook`);
52 |   }
53 |   googleLogin(socialData:any){
54 |     return this.http.post(`${this.BASEURL}/google`,socialData);
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/app/services/cart/cart.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { CartService } from '../cart/cart.service';
 4 | 
 5 | describe('CartService', () => {
 6 |   let service: CartService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(CartService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/cart/cart.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { Observable, Subject } from 'rxjs';
 4 | import { Cart } from 'src/app/model/cart.model';
 5 | import { environment } from 'src/environments/environment';
 6 | 
 7 | @Injectable({
 8 |   providedIn: 'root',
 9 | })
10 | export class CartService {
11 |   apiUrl = environment.apiUrl;
12 |   BASE_URL = this.apiUrl + '/api/v1/cart';
13 |   public cartUpdatedSubject: Subject<void> = new Subject<void>();
14 |   public cartUpdated$: Observable<void> =
15 |     this.cartUpdatedSubject.asObservable();
16 | 
17 |   constructor(private httpClient: HttpClient) {}
18 | 
19 |   public getCartProducts(): Observable<any> {
20 |     const url = `${this.BASE_URL}/`;
21 |     return this.httpClient.get<any>(url);
22 |   }
23 | 
24 |   public deleteProduct(productId: any): Observable<any> {
25 |     const url = `${this.BASE_URL}/${productId}`;
26 |     return this.httpClient.delete<any>(url, productId);
27 |   }
28 | 
29 |   public clearCart(): Observable<any> {
30 |     const url = `${this.BASE_URL}/`;
31 |     return this.httpClient.delete<any>(url);
32 |   }
33 | 
34 |   public editProduct(data: any): Observable<any> {
35 |     const url = `${this.BASE_URL}/${data.productId._id}`;
36 |     return this.httpClient.patch<any>(url, data);
37 |   }
38 | 
39 |   public getProductsCount(): Observable<any> {
40 |     const url = `${this.BASE_URL}/count`;
41 |     return this.httpClient.get<any>(url);
42 |   }
43 | 
44 |   public addToCart(data: any): Observable<any> {
45 |     const url = `${this.BASE_URL}`;
46 |     return this.httpClient.post<any>(url, data);
47 |   }
48 | 
49 |   public isValidCoupon(coupon: any): Observable<any> {
50 |     const url = `${this.BASE_URL}/coupon`;
51 |     return this.httpClient.post<any>(url, { coupon });
52 |   }
53 | }


--------------------------------------------------------------------------------
/src/app/services/favorite/favourite.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { FavouriteService } from '../favorite/favourite.service';
 4 | 
 5 | describe('FavouriteService', () => {
 6 |   let service: FavouriteService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(FavouriteService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/favorite/favourite.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { Observable, Subject } from 'rxjs';
 4 | import { environment } from 'src/environments/environment';
 5 | 
 6 | @Injectable({
 7 |   providedIn: 'root',
 8 | })
 9 | export class FavouriteService {
10 |   apiUrl = environment.apiUrl;
11 |   BASE_URL = this.apiUrl + '/api/v1/favourites';
12 |   public favoritesUpdatedSubject: Subject<void> = new Subject<void>();
13 |   public favoritesUpdated$: Observable<void> = this.favoritesUpdatedSubject.asObservable();
14 | 
15 |   constructor(private httpClient: HttpClient) {}
16 | 
17 |   public getFavouritesProducts(): Observable<any> {
18 |     const url = `${this.BASE_URL}/`;
19 |     return this.httpClient.get<any>(url);
20 |   }
21 | 
22 |   public getFavouritesProductsCount(): Observable<any> {
23 |     const url = `${this.BASE_URL}/getTotal/`;
24 |     return this.httpClient.get<any>(url);
25 |   }
26 | 
27 |   public deleteProduct(productId: any): Observable<any> {
28 |     const url = `${this.BASE_URL}/${productId}`;
29 |     return this.httpClient.delete<any>(url);
30 |   }
31 | 
32 |   public clearFavourite(): Observable<any> {
33 |     const url = `${this.BASE_URL}/`;
34 |     return this.httpClient.delete<any>(url);
35 |   }
36 | 
37 |   public addToFavourite(data: any): Observable<any> {
38 |     const url = `${this.BASE_URL}/`;
39 |     return this.httpClient.post(url, data);
40 |   }
41 | 
42 |   public isInFavourite(productId: any): Observable<any> {
43 |     const url = `${this.BASE_URL}/${productId}/`;
44 |     return this.httpClient.get<any>(url);
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/app/services/loader/loader.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { LoaderService } from '../loader/loader.service';
 4 | 
 5 | describe('LoaderService', () => {
 6 |   let service: LoaderService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(LoaderService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/loader/loader.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable({
 4 |   providedIn: 'root'
 5 | })
 6 | export class LoaderService {
 7 | 
 8 |   private loading: boolean = false;
 9 | 
10 |   constructor() { }
11 | 
12 |   setLoading(loading: boolean) {
13 |     this.loading = loading;
14 |   }
15 | 
16 |   getLoading(): boolean {
17 |     return this.loading;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/app/services/order/order.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { OrderService } from '../order/order.service';
 4 | 
 5 | describe('OrderService', () => {
 6 |   let service: OrderService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(OrderService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/order/order.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { Order } from '../../model/order.model';
 3 | import { HttpClient } from '@angular/common/http';
 4 | import { Product } from '../../model/product.model';
 5 | import { environment } from 'src/environments/environment';
 6 | 
 7 | @Injectable({
 8 |   providedIn: 'root'
 9 | })
10 | export class OrderService {
11 |   apiUrl = environment.apiUrl;
12 |   BASE_URL = this.apiUrl + '/api/v1/orders';
13 |   seller_orders: any[] = [];
14 |   constructor(private httpClient: HttpClient) { }
15 | 
16 |   public createOrder(order: any) {
17 |     return this.httpClient.post<Order>(`${this.BASE_URL}/`, order);
18 |   }
19 |   public getSellerOrder(id:any) {
20 |     return this.httpClient.get(`${this.BASE_URL}/${id}`);
21 |   }
22 |   public getClientOrder(id:any) {
23 |     return this.httpClient.get(`${this.BASE_URL}/client/${id}`);
24 |   }
25 |   public manageOrder(order: any){
26 |     return this.httpClient.patch(`${this.BASE_URL}/manageOrder`, order);
27 |   }
28 |   public cancelOrder(id:any) {
29 |     return this.httpClient.delete(`${this.BASE_URL}/cancelOrder/${id}`);
30 |   }
31 | 
32 | }
33 | 


--------------------------------------------------------------------------------
/src/app/services/payment/payment.service.spec.ts:
--------------------------------------------------------------------------------
 1 | // import { TestBed } from '@angular/core/testing';
 2 | 
 3 | // import { PaymentService } from './payment.service';
 4 | 
 5 | // describe('PaymentService', () => {
 6 | //   let service: PaymentService;
 7 | 
 8 | //   beforeEach(() => {
 9 | //     TestBed.configureTestingModule({});
10 | //     service = TestBed.inject(PaymentService);
11 | //   });
12 | 
13 | //   it('should be created', () => {
14 | //     expect(service).toBeTruthy();
15 | //   });
16 | // });
17 | 


--------------------------------------------------------------------------------
/src/app/services/payment/payment.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { HttpClient } from '@angular/common/http';
 3 | import { environment } from 'src/environments/environment';
 4 | 
 5 | @Injectable({
 6 |   providedIn: 'root'
 7 | })
 8 | export class PaymentService {
 9 |   apiUrl = environment.apiUrl;
10 |   BASE_URL = this.apiUrl + '/api/v1/processPayment';
11 |   private amount: number = 0;
12 |   paymentHandler: any = null;
13 | 
14 |   setAmount(amount: number) {
15 |     this.amount = amount;
16 |   }
17 | 
18 |   getAmount(): number {
19 |     return this.amount;
20 |   }
21 | 
22 |   constructor(private httpClient: HttpClient) { }
23 | 
24 |   makePayment() {
25 |     const amount = this.getAmount();
26 |     if (this.paymentHandler) {
27 |       this.openPayment(amount);
28 |     }
29 |   }
30 | 
31 |   openPayment(amount: number) {
32 |     this.paymentHandler.open({
33 |       name: 'Positronx',
34 |       description: '3 widgets',
35 |       amount: amount * 100,
36 |     });
37 |   }
38 | 
39 |   public stripePayment(body: any) {
40 |     return this.httpClient.post<any>(`${this.BASE_URL}`, body);
41 |   }
42 | 
43 |   invokeStripe() {
44 |     if (!window.document.getElementById('stripe-script')) {
45 |       const script = window.document.createElement('script');
46 |       script.id = 'stripe-script';
47 |       script.type = 'text/javascript';
48 |       script.src = 'https://checkout.stripe.com/checkout.js';
49 |       script.onload = () => {
50 |         this.paymentHandler = (<any>window).StripeCheckout.configure({
51 |           key: 'pk_test_51N8TnoIudPN1uZnnijC0SWZydb6SEHCPOYhHrs1WLbpxtdTWyjOmqbx6SS6EAMKlUCYYAd9JZ7GyobbGQ4bMJ8pY005OrIYVCA',
52 |           locale: 'auto',
53 |           token: function (stripeToken: any) {
54 | 
55 |           },
56 |         });
57 | 
58 |         this.makePayment();
59 |       };
60 |       window.document.body.appendChild(script);
61 |     } else {
62 |       this.makePayment();
63 |     }
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/app/services/product/product.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ProductService } from '../product/product.service';
 4 | 
 5 | describe('ProductService', () => {
 6 |   let service: ProductService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(ProductService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/product/product.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { Product } from '../../model/product.model';
 4 | import { Observable } from 'rxjs';
 5 | import { environment } from 'src/environments/environment';
 6 | 
 7 | @Injectable({
 8 |   providedIn: 'root',
 9 | })
10 | export class ProductService {
11 |   products: Product[] = [];
12 |   apiUrl = environment.apiUrl;
13 |   BASE_URL = this.apiUrl + '/api/v1/products';
14 | 
15 |   constructor(private httpClient: HttpClient) {}
16 | 
17 |   public addProduct(product: FormData) {
18 |     return this.httpClient.post<Product>(`${this.BASE_URL}/`, product);
19 |   }
20 |   public updateProduct(product: FormData, product_id: any) {
21 |     return this.httpClient.patch<Product>(`${this.BASE_URL}/${product_id}`, product);
22 |   }
23 |   public getTopDiscountedProduct() {
24 |     const url = `${this.BASE_URL}/discountedproducts`;
25 |     return this.httpClient.get<Product[]>(url);
26 |   }
27 | 
28 |   public getAllProducts(page: number, limit: number, filter?: string) {
29 |     let url = `${this.BASE_URL}/?page=${page}&limit=${limit}`;
30 |     if(filter){
31 |       url += `&${filter}`;
32 |     }
33 |     return this.httpClient.get<any>(url);
34 |   }
35 |   public getOneProduct(productId:any) {
36 |     return this.httpClient.get<Product>(`${this.BASE_URL}/${productId}`);
37 |   }
38 |   public getUserProducts(page: number, limit: number, user_id: any) {
39 |     const url = `${this.BASE_URL}/?page=${page}&limit=${limit}&user_id=${user_id}`;
40 |     return this.httpClient.get<any>(url);
41 |   }
42 | 
43 |   public deleteProduct(product_id: any) {
44 |     const url = `${this.BASE_URL}/${product_id}`;
45 |     return this.httpClient.delete<any>(url);
46 |   }
47 | 
48 |   public getAllCategories() {
49 |     const url = `${this.BASE_URL}/categories`;
50 |     return this.httpClient.get(url);
51 |   }
52 | 
53 |   public priceRange() {
54 |     const url = `${this.BASE_URL}/priceRange`;
55 |     return this.httpClient.get(url);
56 |   }
57 | 
58 |   search(query: string) {
59 |     const url = `${this.BASE_URL}/search/?q=${query}`;
60 |     return this.httpClient.get<SearchResult>(url);
61 |   }
62 | }
63 | 
64 | interface SearchResult {
65 |   products: any[];
66 |   workshops: any[];
67 | }
68 | 
69 | 


--------------------------------------------------------------------------------
/src/app/services/seller/seller.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { SellerService } from '../seller/seller.service';
 4 | 
 5 | describe('SellerService', () => {
 6 |   let service: SellerService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(SellerService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/seller/seller.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { Observable } from 'rxjs';
 4 | import { Seller } from '../../model/seller.model';
 5 | import { environment } from 'src/environments/environment';
 6 | 
 7 | @Injectable({
 8 |   providedIn: 'root'
 9 | })
10 | export class SellerService {
11 | 
12 |   sellers: Seller[] = [];
13 | 
14 |   apiUrl = environment.apiUrl;
15 |   BASE_URL = this.apiUrl + '/api/v1/users';
16 | 
17 |   constructor(private httpClient: HttpClient) {}
18 | 
19 |   public getAllSellers(page:number,limit:number) {
20 |     const url = `${this.BASE_URL}/sellers/?page=${page}&limit=${limit}`;
21 |     return this.httpClient.get<any>(url);
22 |   }
23 |   public getTopSellers(): Observable<Seller[]> {
24 |     const url = `${this.BASE_URL}/top-sellers`;
25 |     return this.httpClient.get<any[]>(url);
26 |   }
27 | 
28 |   public getSellerStatistics(sellerId:any){
29 |     const url = `${this.BASE_URL}/revenue/${sellerId}`;
30 |     return this.httpClient.get<any>(url);
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/app/services/token/token-storage.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { TokenStorageService } from '../token/token-storage.service';
 4 | 
 5 | describe('TokenStorageService', () => {
 6 |   let service: TokenStorageService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(TokenStorageService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/token/token-storage.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | 
 4 | @Injectable({
 5 |   providedIn: 'root'
 6 | })
 7 | 
 8 | export class TokenStorageService {
 9 |   constructor() { }
10 |   private TOKEN_KEY = 'threadAndBeads_token_' ;
11 |   private USER_ID_KEY = 'threadAndBeads_user_id_' ;
12 | 
13 |   public setToken(token: string): void {
14 |     sessionStorage.setItem(this.TOKEN_KEY, token);
15 |   }
16 | 
17 |   public setUser(user: any): void {
18 |     sessionStorage.setItem(this.USER_ID_KEY, JSON.stringify(user));
19 |   }
20 | 
21 |   public getToken(): any {
22 |     return sessionStorage.getItem(this.TOKEN_KEY);
23 |   }
24 | 
25 |   public getUser(): any {
26 |     const user = sessionStorage.getItem(this.USER_ID_KEY);
27 |     if (user) {
28 |       return JSON.parse(user);
29 |     }
30 |     return null;
31 |   }
32 | 
33 |   public removeUser(): void {
34 |     sessionStorage.removeItem(this.USER_ID_KEY);
35 |   }
36 | 
37 |   public removeToken(): void {
38 |     sessionStorage.removeItem(this.TOKEN_KEY);
39 |   }
40 |   public isLoggedIn(): boolean {
41 |     const token = this.getToken();
42 |     return !!token;
43 |   }
44 |   public isSeller(): boolean {
45 |     if(this.isLoggedIn())
46 |     if(this.getUser().type === "seller"){
47 |       return true;
48 |     }
49 |       return false;
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/app/services/user/user.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { UserService } from '../user/user.service';
 4 | 
 5 | describe('UserService', () => {
 6 |   let service: UserService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(UserService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/user/user.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { Observable } from 'rxjs';
 4 | import { environment } from 'src/environments/environment';
 5 | 
 6 | @Injectable({
 7 |   providedIn: 'root'
 8 | })
 9 | export class UserService {
10 | 
11 |   apiUrl = environment.apiUrl;
12 |   BASEURL = this.apiUrl + '/api/v1/users';
13 |   constructor(private http: HttpClient) { }
14 | 
15 |   getSellerNotifications(sellerId: string): Observable<any> {
16 |     const url = `${this.BASEURL}/notification/${sellerId}`;
17 |     return this.http.get<any>(url);
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/app/services/workshop/workshop.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { WorkshopService } from '../workshop/workshop.service';
 4 | 
 5 | describe('WorkshopService', () => {
 6 |   let service: WorkshopService;
 7 | 
 8 |   beforeEach(() => {
 9 |     TestBed.configureTestingModule({});
10 |     service = TestBed.inject(WorkshopService);
11 |   });
12 | 
13 |   it('should be created', () => {
14 |     expect(service).toBeTruthy();
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/app/services/workshop/workshop.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { HttpClient, HttpHeaders } from '@angular/common/http';
 3 | import { Observable } from 'rxjs';
 4 | import { Workshop } from '../../model/workshop.model';
 5 | import { map } from 'rxjs/operators';
 6 | import { environment } from 'src/environments/environment';
 7 | 
 8 | @Injectable({
 9 |   providedIn: 'root'
10 | })
11 | export class WorkshopService {
12 |   apiUrl = environment.apiUrl;
13 |   BASE_URL = this.apiUrl + '/api/v1/workshops';
14 | 
15 | 
16 |   constructor(private httpClient: HttpClient) { }
17 |   public getAllWorkshops(page:number,limit:number) {
18 |     return this.httpClient.get<any>(`${this.BASE_URL}/?page=${page}&limit=${limit}`);
19 |   }
20 | 
21 | 
22 |   public getSellerWorkshops(page:number,limit:number,user_id: any) {
23 |     const url = `${this.BASE_URL}/?page=${page}&limit=${limit}&seller_id=${user_id}`;
24 |     return this.httpClient.get<any>(url);
25 |   }
26 |   public addWorkshop(workshop: FormData) {
27 |     return this.httpClient.post<Workshop>(`${this.BASE_URL}/`, workshop);
28 |   }
29 |   public deleteWorkshop(workshop_id: any) {
30 |     const url = `${this.BASE_URL}/${workshop_id}`;
31 |     return this.httpClient.delete<any>(url);
32 |   }
33 |   public getWorkshopById(workshop_id: any): Observable<Workshop> {
34 |     const url = `${this.BASE_URL}/${workshop_id}`;
35 |     return this.httpClient.get<Workshop>(url);
36 |   }
37 |   public updateWorkshop(workshop_id: any, workshop: FormData): Observable<Workshop> {
38 |     const url = `${this.BASE_URL}/${workshop_id}`;
39 |     return this.httpClient.patch<Workshop>(url, workshop);
40 |   }
41 |   public sendWorkshopEmail(body: any) {
42 |     return this.httpClient.post<Workshop>(`${this.BASE_URL}/sendEmail`, body);
43 |   }
44 | }
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/assets/Images/1600w-dzssuRtOTn8.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/1600w-dzssuRtOTn8.webp


--------------------------------------------------------------------------------
/src/assets/Images/20210902_103708.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/20210902_103708.jpg


--------------------------------------------------------------------------------
/src/assets/Images/assortment-with-clay-pots.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/assortment-with-clay-pots.jpg


--------------------------------------------------------------------------------
/src/assets/Images/banner1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/banner1.jpg


--------------------------------------------------------------------------------
/src/assets/Images/banner2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/banner2.jpg


--------------------------------------------------------------------------------
/src/assets/Images/banner3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/banner3.jpg


--------------------------------------------------------------------------------
/src/assets/Images/banner4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/banner4.jpg


--------------------------------------------------------------------------------
/src/assets/Images/emptyWishList.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/emptyWishList.jpg


--------------------------------------------------------------------------------
/src/assets/Images/emptycart.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/emptycart.jpg


--------------------------------------------------------------------------------
/src/assets/Images/hands-creating-design-with-needle-sewing-thread.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/hands-creating-design-with-needle-sewing-thread.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-amina-filkins-5409681.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-amina-filkins-5409681.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-amina-filkins-5409703.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-amina-filkins-5409703.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-anna-shvets-5760814.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-anna-shvets-5760814.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-askar-abayev-6190983.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-askar-abayev-6190983.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-askar-abayev-6190985.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-askar-abayev-6190985.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-brett-sayles-6424244.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-brett-sayles-6424244.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-cottonbro-studio-3738098.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-cottonbro-studio-3738098.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-cottonbro-studio-6694304.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-cottonbro-studio-6694304.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-digital-buggu-186846.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-digital-buggu-186846.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-dominika-roseclay-2089949.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-dominika-roseclay-2089949.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-eneida-nieves-905844.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-eneida-nieves-905844.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-giovana-spiller-6679220.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-giovana-spiller-6679220.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-hitesh-choudhary-909495.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-hitesh-choudhary-909495.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-jenny-mavimiro-14579871.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-jenny-mavimiro-14579871.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-julie-aagaard-2766335.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-julie-aagaard-2766335.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-lil-artsy-3427720.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-lil-artsy-3427720.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-mikhail-nilov-9304551.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-mikhail-nilov-9304551.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-min-an-713661.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-min-an-713661.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-monicore-135486.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-monicore-135486.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-monstera-5302891.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-monstera-5302891.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-olga-kalinina-a10824516.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-olga-kalinina-a10824516.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-regiane-tosatti-22823.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-regiane-tosatti-22823.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-vincent-rivaud-2333855.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-vincent-rivaud-2333855.jpg


--------------------------------------------------------------------------------
/src/assets/Images/pexels-vlada-karpovich-6755860.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/pexels-vlada-karpovich-6755860.jpg


--------------------------------------------------------------------------------
/src/assets/Images/unfinished-jug.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/unfinished-jug.jpg


--------------------------------------------------------------------------------
/src/assets/Images/woman-craftmaster-pottery-shop.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/assets/Images/woman-craftmaster-pottery-shop.jpg


--------------------------------------------------------------------------------
/src/assets/svg/cash.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" height="48px" id="Layer_1" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="#000" clip-rule="evenodd" d="M47,40L47,40c0,2.762-2.238,5-5,5l0,0H6l0,0c-2.762,0-5-2.238-5-5V11  c0-2.209,1.791-4,4-4l0,0h20.171l8.099-2.934c0.513-0.187,1.081,0.078,1.268,0.589L35.391,7H39c2.209,0,4,1.791,4,4v2l0,0  c2.209,0,4,1.791,4,4V40z M5,9L5,9c-1.104,0-2,0.896-2,2s0.896,2,2,2h3.445l0,0h0.189c0.013-0.005,0.021-0.016,0.034-0.021L19.65,9  H5z M34.078,9.181l-1.062-2.924l-0.001,0v0L30.964,7h0.003l-5.514,2h-0.01l-11.039,4h21.062L34.078,9.181z M41,11  c0-1.104-0.896-2-2-2h-2.883l1.454,4H41l0,0V11z M43,15H5l0,0c-0.732,0-1.41-0.211-2-0.555V40c0,1.657,1.344,3,3,3h36  c1.657,0,3-1.343,3-3v-7h-4c-2.209,0-4-1.791-4-4s1.791-4,4-4h4v-8C45,15.896,44.104,15,43,15z M45,31v-4h-4c-1.104,0-2,0.896-2,2  s0.896,2,2,2H45z M41,28h2v2h-2V28z" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/src/assets/svg/money.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 50 50" height="50px" id="Layer_1" version="1.1" viewBox="0 0 50 50" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect fill="none" height="50" width="50"/><ellipse cx="35" cy="6" fill="none" rx="14" ry="5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M21,7c0,0.912,0,5.088,0,6c0,2.761,6.266,5,14,5s14-2.239,14-5c0-0.912,0-5.088,0-6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M28.55,24.439C30.48,24.797,32.674,25,35,25c7.734,0,14-2.239,14-5c0-0.912,0-5.088,0-6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M21,14c0,0.912,0,4.27,0,4.27" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M29.025,31.523C30.837,31.829,32.862,32,35,32c7.734,0,14-2.238,14-5c0-0.912,0-5.088,0-6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M28.948,38.51C30.779,38.824,32.832,39,35,39c7.734,0,14-2.238,14-5c0-0.912,0-5.088,0-6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><ellipse cx="15" cy="23" fill="none" rx="14" ry="5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M1,24c0,0.912,0,5.088,0,6c0,2.762,6.266,5,14,5s14-2.238,14-5c0-0.912,0-5.088,0-6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M1,31c0,0.912,0,5.088,0,6c0,2.762,6.266,5,14,5s14-2.238,14-5c0-0.912,0-5.088,0-6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><path d="  M1,38c0,0.912,0,5.088,0,6c0,2.762,6.266,5,14,5s14-2.238,14-5c0-0.912,0-5.088,0-6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/></svg>


--------------------------------------------------------------------------------
/src/assets/svg/sendmail.svg:
--------------------------------------------------------------------------------
1 | 
2 |   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="#fff" d="M5 13c0-5.088 2.903-9.436 7-11.182C16.097 3.564 19 7.912 19 13c0 .823-.076 1.626-.22 2.403l1.94 1.832a.5.5 0 0 1 .095.603l-2.495 4.575a.5.5 0 0 1-.793.114l-2.234-2.234a1 1 0 0 0-.707-.293H9.414a1 1 0 0 0-.707.293l-2.234 2.234a.5.5 0 0 1-.793-.114l-2.495-4.575a.5.5 0 0 1 .095-.603l1.94-1.832C5.077 14.626 5 13.823 5 13zm1.476 6.696l.817-.817A3 3 0 0 1 9.414 18h5.172a3 3 0 0 1 2.121.879l.817.817.982-1.8-1.1-1.04a2 2 0 0 1-.593-1.82c.124-.664.187-1.345.187-2.036 0-3.87-1.995-7.3-5-8.96C8.995 5.7 7 9.13 7 13c0 .691.063 1.372.187 2.037a2 2 0 0 1-.593 1.82l-1.1 1.039.982 1.8zM12 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>
3 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: false,
3 |   apiUrl: 'https://threadsbeads.onrender.com'
4 |   // apiUrl: 'http://localhost:7000'
5 | };


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThreadsAndBeads/FrontEnd/d5f50830e680b0ed83aae247f1c3ff4436028b38/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>HandmadeProject</title>
 6 |     <base href="/" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |     <script src="https://accounts.google.com/gsi/client" async defer></script>
 9 |     <link rel="icon" type="image/x-icon" href="favicon.ico" />
10 |       <link rel="preconnect" href="https://fonts.gstatic.com">
11 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
12 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
13 | </head>
14 |   <body class="mat-typography">
15 |     <app-root></app-root>
16 |     <script src="//connect.facebook.net/en_US/sdk.js"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | 
3 | import { AppModule } from './app/app.module';
4 | 
5 | 
6 | platformBrowserDynamic().bootstrapModule(AppModule)
7 |   .catch(err => console.error(err));
8 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   padding: 0;
 3 |   margin: 0;
 4 |   box-sizing: border-box;
 5 |   /* border: 1px solid red; */
 6 | }
 7 | html,
 8 | body {
 9 |   height: 100%;
10 | }
11 | body {
12 |   margin: 0;
13 |   font-family: Roboto, "Helvetica Neue", sans-serif;
14 | }
15 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "noImplicitOverride": true,
10 |     "noPropertyAccessFromIndexSignature": true,
11 |     "noImplicitReturns": true,
12 |     "noFallthroughCasesInSwitch": true,
13 |     "sourceMap": true,
14 |     "declaration": false,
15 |     "downlevelIteration": true,
16 |     "experimentalDecorators": true,
17 |     "moduleResolution": "node",
18 |     "importHelpers": true,
19 |     "target": "ES2022",
20 |     "module": "ES2022",
21 |     "useDefineForClassFields": false,
22 |     "lib": [
23 |       "ES2022",
24 |       "dom"
25 |     ]
26 |   },
27 |   "angularCompilerOptions": {
28 |     "enableI18nLegacyMessageIdFormat": false,
29 |     "strictInjectionParameters": true,
30 |     "strictInputAccessModifiers": true,
31 |     "strictTemplates": true
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "include": [
11 |     "src/**/*.spec.ts",
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------