├── .editorconfig
├── .github
    ├── FUNDING.yml
    └── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
├── .gitignore
├── .postcssrc.js
├── LICENSE
├── README.md
├── assets
    ├── change_request.png
    ├── customer_management.png
    ├── dashboard.png
    ├── footer.png
    ├── login.png
    └── profile.png
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── app-logo-128x128.png
    ├── icons
    │   ├── apple-icon-120x120.png
    │   ├── apple-icon-152x152.png
    │   ├── apple-icon-167x167.png
    │   ├── apple-icon-180x180.png
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── favicon-96x96.png
    │   ├── favicon.ico
    │   ├── icon-128x128.png
    │   ├── icon-192x192.png
    │   ├── icon-256x256.png
    │   ├── icon-384x384.png
    │   ├── icon-512x512.png
    │   ├── ms-icon-144x144.png
    │   └── safari-pinned-tab.svg
    └── images
    │   ├── autumn.jpg
    │   ├── lake.jpg
    │   ├── logo.jpg
    │   ├── logo.png
    │   ├── nature.jpg
    │   ├── pattern.jpg
    │   ├── pharmacy.jpg
    │   └── shop.jpg
├── quasar.conf.js
└── src
    ├── App.vue
    ├── assets
        ├── category.png
        ├── details.png
        ├── footer.png
        ├── home.png
        ├── login.png
        ├── quasar-logo-full.svg
        └── sad.svg
    ├── boot
        └── .gitkeep
    ├── components
        └── EssentialLink.vue
    ├── css
        ├── app.sass
        └── quasar.variables.sass
    ├── index.template.html
    ├── layouts
        └── MainLayout.vue
    ├── pages
        ├── Error404.vue
        ├── category.vue
        ├── change_request.vue
        ├── customer_management.vue
        ├── dashboard.vue
        ├── details.vue
        ├── home.vue
        ├── login.vue
        └── my_profile.vue
    └── router
        ├── index.js
        └── routes.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: [mayur091193] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: ['https://www.buymeacoffee.com/mayur091193','https://paypal.me/mayurpp'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | .thumbs.db
 3 | node_modules
 4 | 
 5 | # Quasar core related directories
 6 | .quasar
 7 | /dist
 8 | 
 9 | # Cordova related directories and files
10 | /src-cordova/node_modules
11 | /src-cordova/platforms
12 | /src-cordova/plugins
13 | /src-cordova/www
14 | 
15 | # Capacitor related directories and files
16 | /src-capacitor/www
17 | /src-capacitor/node_modules
18 | 
19 | # BEX related directories and files
20 | /src-bex/www
21 | /src-bex/js/core
22 | 
23 | # Log files
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # Editor directories and files
29 | .idea
30 | .vscode
31 | *.suo
32 | *.ntvs*
33 | *.njsproj
34 | *.sln
35 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   plugins: [
5 |     // to edit target browsers: use "browserslist" field in package.json
6 |     require('autoprefixer')
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Mayur Patel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Quasar Shopping
  2 | 
  3 | A free and beautiful eCommerce UI template written in Vue.js/Quasar.
  4 | 
  5 | ## Site: [https://quasar-shopping.netlify.com/](https://quasar-shopping.netlify.com/)
  6 | 
  7 | ## Support
  8 | 
  9 | If this hepls you in any way, you can contribute to this project by supporting me:
 10 | 
 11 | ### [💜 Support my open-source work on GitHub](https://github.com/sponsors/mayur091193)
 12 | 
 13 | Please check out my sponsor page.
 14 | 
 15 | (Every small appreciation can make my day!)
 16 | 
 17 | Thank you very much!!
 18 | 
 19 | ## Resources used
 20 | * [Quasar Framework](https://quasar.dev/)
 21 | * [Vue.js](https://vuejs.org/)
 22 | 
 23 | ## What it deliveres
 24 | * eCommerce UI template written in Vue.js/Quasar
 25 | 
 26 | ## Future release:
 27 | * Mobile friendly
 28 | * Seller related pages
 29 | * Backend(planning to use [Python](https://www.python.org/))
 30 | 
 31 | 
 32 | ## Installation
 33 | 
 34 | * **Clone the repository**
 35 | 
 36 | ```
 37 | git clone https://github.com/mayur091193/quasar-shopping.git
 38 | ```
 39 | 
 40 | ## Install the dependencies
 41 | ```bash
 42 | cd quasar-shopping
 43 | npm install
 44 | ```
 45 | 
 46 | ### To run the app in development mode (hot-code reloading, error reporting, etc.)
 47 | ```bash
 48 | quasar dev
 49 | ```
 50 | 
 51 | 
 52 | ### Build the application
 53 | ```bash
 54 | quasar build
 55 | ```
 56 | 
 57 | Reach out to me at "mayur091193@gmail.com" for queries.
 58 | 
 59 | ## Screens UI
 60 | **Login**
 61 | <p float="left">
 62 |         <kbd>
 63 | <img src="src/assets/login.png" border="1" alt="Login"
 64 |         title="Login"  />
 65 |                 </kbd>
 66 | </p>
 67 | 
 68 | **Home**
 69 | <p float="left">
 70 | 	<kbd>
 71 | <img src="src/assets/home.png" border="1" alt="Home"
 72 | 	title="Home"  />
 73 | 		</kbd>
 74 | </p>
 75 | 
 76 | **Details**
 77 | <p float="left">
 78 | 	<kbd>
 79 | <img src="src/assets/details.png" border="1" alt="Details"
 80 | 	title="Details"  />	
 81 | 	</kbd>
 82 | </p>
 83 | 
 84 | **Category**
 85 | <p float="left">
 86 | 	<kbd>
 87 | <img src="src/assets/category.png" border="1" alt="Category"
 88 | 	title="Category"  />
 89 | 	</kbd>
 90 | </p>
 91 | 
 92 | **Footer**
 93 | <p float="left">
 94 | 	<kbd>
 95 | <img src="src/assets/footer.png" border="1" alt="Footer"
 96 | 	title="Footer"  />
 97 | 	</kbd>
 98 | </p>
 99 | 
100 | ### Customize the configuration
101 | See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
102 | 
103 | ## License
104 | 
105 | [MIT](http://opensource.org/licenses/MIT)
106 | 


--------------------------------------------------------------------------------
/assets/change_request.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/assets/change_request.png


--------------------------------------------------------------------------------
/assets/customer_management.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/assets/customer_management.png


--------------------------------------------------------------------------------
/assets/dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/assets/dashboard.png


--------------------------------------------------------------------------------
/assets/footer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/assets/footer.png


--------------------------------------------------------------------------------
/assets/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/assets/login.png


--------------------------------------------------------------------------------
/assets/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/assets/profile.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@quasar/babel-preset-app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "src/*": ["src/*"],
 6 |       "app/*": ["*"],
 7 |       "components/*": ["src/components/*"],
 8 |       "layouts/*": ["src/layouts/*"],
 9 |       "pages/*": ["src/pages/*"],
10 |       "assets/*": ["src/assets/*"],
11 |       "boot/*": ["src/boot/*"],
12 |       "vue$": ["node_modules/vue/dist/vue.esm.js"]
13 |     }
14 |   },
15 |   "exclude": [
16 |     "dist",
17 |     ".quasar",
18 |     "node_modules"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "quasar_shopping",
 3 |   "version": "0.0.1",
 4 |   "description": "Quasar Shopping.",
 5 |   "productName": "Quasar Shopping",
 6 |   "cordovaId": "org.cordova.quasar.app",
 7 |   "capacitorId": "",
 8 |   "author": "Mayur Patel",
 9 |   "private": true,
10 |   "scripts": {
11 |     "test": "echo \"No test specified\" && exit 0"
12 |   },
13 |   "dependencies": {
14 |     "@quasar/extras": "^1.9.17",
15 |     "apexcharts": "^3.25.0",
16 |     "echarts": "^5.0.2",
17 |     "quasar": "^1.15.4",
18 |     "vue-apexcharts": "^1.6.0",
19 |     "vue-echarts-v3": "^2.0.1",
20 |     "vue-winwheel": "^1.0.0",
21 |     "vuedraggable": "^2.24.3"
22 |   },
23 |   "devDependencies": {
24 |     "@quasar/app": "^2.1.15"
25 |   },
26 |   "engines": {
27 |     "node": ">= 10.18.1",
28 |     "npm": ">= 6.13.4",
29 |     "yarn": ">= 1.21.1"
30 |   },
31 |   "browserslist": [
32 |     "last 1 version, not dead, ie >= 11"
33 |   ]
34 | }
35 | 


--------------------------------------------------------------------------------
/public/app-logo-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/app-logo-128x128.png


--------------------------------------------------------------------------------
/public/icons/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/apple-icon-120x120.png


--------------------------------------------------------------------------------
/public/icons/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/apple-icon-152x152.png


--------------------------------------------------------------------------------
/public/icons/apple-icon-167x167.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/apple-icon-167x167.png


--------------------------------------------------------------------------------
/public/icons/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/apple-icon-180x180.png


--------------------------------------------------------------------------------
/public/icons/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/favicon-16x16.png


--------------------------------------------------------------------------------
/public/icons/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/favicon-32x32.png


--------------------------------------------------------------------------------
/public/icons/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/favicon-96x96.png


--------------------------------------------------------------------------------
/public/icons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/favicon.ico


--------------------------------------------------------------------------------
/public/icons/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/icon-128x128.png


--------------------------------------------------------------------------------
/public/icons/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/icon-192x192.png


--------------------------------------------------------------------------------
/public/icons/icon-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/icon-256x256.png


--------------------------------------------------------------------------------
/public/icons/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/icon-384x384.png


--------------------------------------------------------------------------------
/public/icons/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/icon-512x512.png


--------------------------------------------------------------------------------
/public/icons/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/icons/ms-icon-144x144.png


--------------------------------------------------------------------------------
/public/icons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1240" height="1240"><path d="M585.5 119.157c-24.392 1.775-55.454 6.582-80.743 12.495l-10.743 2.512-.257 65.522-.257 65.523-12.5 4.911c-24.453 9.608-54.301 25.574-75.692 40.488-14.402 10.041-29.52 22.393-29.025 23.713.243.648 1.692 5.443 3.22 10.655 11.868 40.48 32.267 84.639 55.173 119.442l8.503 12.917 6.683-12.417c23.502-43.672 46.807-74.722 84.066-112.002 25.738-25.754 47.825-44.173 78.072-65.109 33.386-23.108 77-46.934 117.761-64.332l16.261-6.94-.261-40.974-.261-40.973-4.5-1.319c-8.958-2.625-43.862-9.169-59.5-11.155-31.749-4.032-66.513-5.102-96-2.957M734.906 277.25c-22.472 24.627-42.334 51.05-58.443 77.75-5.099 8.45-21.464 39.014-21.462 40.083 0 .229 14.287.445 31.75.479 33.627.065 45.612 1.017 75.303 5.978 85.759 14.331 172.63 53.33 254.813 114.394l15.221 11.31 25.706-14.808c14.138-8.144 30.112-17.312 35.497-20.372l9.79-5.564-.61-3.5c-1.096-6.29-14.149-44.185-19.977-58-17.139-40.622-35.248-72.077-61.599-107-11.686-15.488-30.818-37.844-39.039-45.62l-4.356-4.119-55 31.858c-30.25 17.522-55.747 32.106-56.66 32.408-1.079.358-4.75-1.93-10.5-6.543-20.084-16.116-40.545-29.274-64.607-41.547C777.601 277.739 748.585 265 746.461 265c-.207 0-5.407 5.512-11.555 12.25m-483.911 2.889c-52.729 57.452-89.592 121.745-111.254 194.044l-3.501 11.683 56.707 32.735 56.706 32.734-1.326 7.583c-4.069 23.272-5.894 57.248-4.381 81.582.926 14.898 4.591 46.254 5.526 47.28.898.986 34.289 8.122 48.028 10.264 28.958 4.515 64.488 6.499 90.867 5.074 10.377-.56 19.07-1.222 19.319-1.471.248-.248-2.035-4.306-5.074-9.017-37.96-58.843-62.879-131.564-72.005-210.13-3.219-27.711-3.869-43.866-3.307-82.149.534-36.338 1.631-53.441 5.12-79.832.798-6.039 1.368-11.04 1.266-11.112-.102-.073-15.261-8.815-33.686-19.427-18.425-10.613-34.464-19.919-35.642-20.682-2.027-1.312-2.739-.735-13.363 10.841M606.5 522.653c-25.669 4.073-49.712 18.357-64.437 38.283-12.956 17.531-18.769 33.768-19.713 55.064-1.087 24.502 5.901 45.6 21.676 65.452 13.091 16.473 32.315 28.634 53.974 34.141 10.222 2.599 34.507 2.629 44 .054 24.469-6.637 42.328-18.418 56.253-37.107 8.576-11.511 13.261-21.347 17.403-36.54 2.782-10.202 2.502-34.762-.523-46-4.654-17.286-13.403-32.422-26.057-45.076-18.639-18.639-40.322-27.911-66.576-28.47-7.15-.152-14.35-.062-16 .199m243.676 14.396c-9.529.421-17.487.928-17.685 1.126-.198.198 3.43 6.427 8.061 13.843 9.872 15.805 25.076 45.255 32.515 62.982 17.89 42.628 30.726 92.267 36.33 140.5 5.776 49.707 5.41 110.661-.955 158.936-.793 6.015-1.442 12.144-1.442 13.62 0 2.476 2.712 4.248 35.027 22.888 19.264 11.113 35.44 20.059 35.946 19.88.506-.178 5.205-4.957 10.444-10.619 40.968-44.285 71.417-91.321 94.113-145.385 7.518-17.906 21.003-57.989 20.208-60.062-.302-.785-25.229-15.681-55.393-33.103-30.165-17.421-55.37-32.011-56.011-32.422-.843-.54-.908-2.132-.233-5.74 6.158-32.924 6.854-78.418 1.771-115.688l-2.141-15.695-10.616-2.49c-29.261-6.862-56.983-10.974-81.615-12.105-25.026-1.149-31.483-1.212-48.324-.466M173.193 732.877c-18.869 10.91-34.771 20.301-35.338 20.868-.708.708.416 5.685 3.59 15.893 22.372 71.955 57.534 133.26 108.468 189.112 6.144 6.737 11.715 12.235 12.379 12.217.665-.019 26.402-14.607 57.195-32.419l55.987-32.386 5.013 4.231c28.719 24.239 69.849 48.122 106.705 61.961l6.691 2.512 11.972-13.183c14.282-15.727 20.74-23.512 31.675-38.183 15.78-21.171 34.174-51.134 42.972-70l4.197-9-32.6-.072c-33.662-.073-44.236-.877-72.599-5.517-52.086-8.52-104.017-26.026-157-52.926-34.47-17.5-69.941-39.589-100.682-62.699-7.525-5.657-13.825-10.277-14-10.266-.175.011-15.756 8.946-34.625 19.857M791.52 772.25c-22.058 42.207-48.977 78.371-85.449 114.795-38.124 38.072-77.236 67.416-127.546 95.69-17.969 10.099-51.743 26.686-70.775 34.76l-13.75 5.834v82.327l13.75 3.194c23.233 5.395 43.059 8.689 68.25 11.336 16.09 1.691 73.361 1.705 89 .021 25.772-2.774 47.439-6.375 68.25-11.344l12.75-3.045V974.95l2.75-1.001c20.982-7.643 52.157-22.755 69.847-33.859 18.882-11.852 45.274-31.559 45.357-33.868.102-2.831-15.119-46.644-20.841-59.99-7.171-16.726-16.651-35.878-24.655-49.808-6.712-11.68-20.708-33.401-21.531-33.415-.315-.005-2.748 4.154-5.407 9.241" fill="#42a5f5" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/public/images/autumn.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/images/autumn.jpg


--------------------------------------------------------------------------------
/public/images/lake.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/images/lake.jpg


--------------------------------------------------------------------------------
/public/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/images/logo.jpg


--------------------------------------------------------------------------------
/public/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/images/logo.png


--------------------------------------------------------------------------------
/public/images/nature.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/images/nature.jpg


--------------------------------------------------------------------------------
/public/images/pattern.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/images/pattern.jpg


--------------------------------------------------------------------------------
/public/images/pharmacy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/images/pharmacy.jpg


--------------------------------------------------------------------------------
/public/images/shop.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/public/images/shop.jpg


--------------------------------------------------------------------------------
/quasar.conf.js:
--------------------------------------------------------------------------------
  1 | // Configuration for your app
  2 | // https://quasar.dev/quasar-cli/quasar-conf-js
  3 | 
  4 | module.exports = function (ctx) {
  5 |   return {
  6 |     // app boot file (/src/boot)
  7 |     // --> boot files are part of "main.js"
  8 |     // https://quasar.dev/quasar-cli/cli-documentation/boot-files
  9 |     boot: [
 10 |     ],
 11 | 
 12 |     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
 13 |     css: [
 14 |       'app.sass'
 15 |     ],
 16 | 
 17 |     // https://github.com/quasarframework/quasar/tree/dev/extras
 18 |     extras: [
 19 |       // 'ionicons-v4',
 20 |       // 'mdi-v4',
 21 |       'fontawesome-v5',
 22 |       // 'eva-icons',
 23 |       // 'themify',
 24 |       // 'line-awesome',
 25 |       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
 26 | 
 27 |       'roboto-font', // optional, you are not bound to it
 28 |       'material-icons' // optional, you are not bound to it
 29 |     ],
 30 | 
 31 |     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
 32 |     framework: {
 33 |       iconSet: 'material-icons', // Quasar icon set
 34 |       lang: 'en-us', // Quasar language pack
 35 | 
 36 |       // Possible values for "all":
 37 |       // * 'auto' - Auto-import needed Quasar components & directives
 38 |       //            (slightly higher compile time; next to minimum bundle size; most convenient)
 39 |       // * false  - Manually specify what to import
 40 |       //            (fastest compile time; minimum bundle size; most tedious)
 41 |       // * true   - Import everything from Quasar
 42 |       //            (not treeshaking Quasar; biggest bundle size; convenient)
 43 |       all: 'auto',
 44 | 
 45 |       components: [],
 46 |       directives: [],
 47 | 
 48 |       // Quasar plugins
 49 |       plugins: [
 50 |         'QIcon',
 51 |         'QScrollArea'
 52 |       ]
 53 |     },
 54 | 
 55 |     // https://quasar.dev/quasar-cli/cli-documentation/supporting-ie
 56 |     supportIE: true,
 57 | 
 58 |     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
 59 |     build: {
 60 |       scopeHoisting: true,
 61 |       vueRouterMode: 'history', // available values: 'hash', 'history'
 62 |       showProgress: true,
 63 |       gzip: false,
 64 |       analyze: false,
 65 |       // Options below are automatically set depending on the env, set them if you want to override
 66 |       // preloadChunks: false,
 67 |       // extractCSS: false,
 68 | 
 69 |       // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
 70 |       extendWebpack (cfg) {
 71 |       }
 72 |     },
 73 | 
 74 |     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
 75 |     devServer: {
 76 |       https: false,
 77 |       port: 8080,
 78 |       open: false // opens browser window automatically
 79 |     },
 80 | 
 81 |     // animations: 'all', // --- includes all animations
 82 |     // https://quasar.dev/options/animations
 83 |     animations: [],
 84 | 
 85 |     // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
 86 |     ssr: {
 87 |       pwa: false
 88 |     },
 89 | 
 90 |     // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
 91 |     pwa: {
 92 |       workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
 93 |       workboxOptions: {}, // only for GenerateSW
 94 |       manifest: {
 95 |         name: 'Quasar Shopping',
 96 |         short_name: 'Quasar Shopping',
 97 |         description: 'An open source Quasar Shopping cart template!',
 98 |         display: 'standalone',
 99 |         orientation: 'portrait',
100 |         background_color: '#ffffff',
101 |         theme_color: '#027be3',
102 |         icons: [
103 |           {
104 |             'src': 'icons/icon-128x128.png',
105 |             'sizes': '128x128',
106 |             'type': 'image/png'
107 |           },
108 |           {
109 |             'src': 'icons/icon-192x192.png',
110 |             'sizes': '192x192',
111 |             'type': 'image/png'
112 |           },
113 |           {
114 |             'src': 'icons/icon-256x256.png',
115 |             'sizes': '256x256',
116 |             'type': 'image/png'
117 |           },
118 |           {
119 |             'src': 'icons/icon-384x384.png',
120 |             'sizes': '384x384',
121 |             'type': 'image/png'
122 |           },
123 |           {
124 |             'src': 'icons/icon-512x512.png',
125 |             'sizes': '512x512',
126 |             'type': 'image/png'
127 |           }
128 |         ]
129 |       }
130 |     },
131 | 
132 |     // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
133 |     cordova: {
134 |       // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
135 |       id: 'org.cordova.quasar.app'
136 |     },
137 | 
138 | 
139 |     // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
140 |     capacitor: {
141 |       hideSplashscreen: true
142 |     },
143 | 
144 |     // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
145 |     electron: {
146 |       bundler: 'packager', // 'packager' or 'builder'
147 | 
148 |       packager: {
149 |         // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
150 | 
151 |         // OS X / Mac App Store
152 |         // appBundleId: '',
153 |         // appCategoryType: '',
154 |         // osxSign: '',
155 |         // protocol: 'myapp://path',
156 | 
157 |         // Windows only
158 |         // win32metadata: { ... }
159 |       },
160 | 
161 |       builder: {
162 |         // https://www.electron.build/configuration/configuration
163 | 
164 |         appId: 'Quasar_Shopping'
165 |       },
166 | 
167 |       // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
168 |       nodeIntegration: true,
169 | 
170 |       extendWebpack (cfg) {
171 |         // do something with Electron main process Webpack cfg
172 |         // chainWebpack also available besides this extendWebpack
173 |       }
174 |     }
175 |   }
176 | }
177 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="q-app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'App'
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/assets/category.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/src/assets/category.png


--------------------------------------------------------------------------------
/src/assets/details.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/src/assets/details.png


--------------------------------------------------------------------------------
/src/assets/footer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/src/assets/footer.png


--------------------------------------------------------------------------------
/src/assets/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/src/assets/home.png


--------------------------------------------------------------------------------
/src/assets/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/src/assets/login.png


--------------------------------------------------------------------------------
/src/assets/quasar-logo-full.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
  3 | 
  4 | <svg
  5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  6 |    xmlns:cc="http://creativecommons.org/ns#"
  7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  8 |    xmlns:svg="http://www.w3.org/2000/svg"
  9 |    xmlns="http://www.w3.org/2000/svg"
 10 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 11 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 12 |    width="67.407623mm"
 13 |    height="62.908276mm"
 14 |    viewBox="0 0 238.84591 222.90334"
 15 |    id="svg3570"
 16 |    version="1.1"
 17 |    inkscape:version="0.91 r13725"
 18 |    sodipodi:docname="quasar-logo-full.svg">
 19 |   <defs
 20 |      id="defs3572" />
 21 |   <sodipodi:namedview
 22 |      id="base"
 23 |      pagecolor="#ffffff"
 24 |      bordercolor="#666666"
 25 |      borderopacity="1.0"
 26 |      inkscape:pageopacity="0.0"
 27 |      inkscape:pageshadow="2"
 28 |      inkscape:zoom="1.979899"
 29 |      inkscape:cx="-39.753589"
 30 |      inkscape:cy="27.706388"
 31 |      inkscape:document-units="px"
 32 |      inkscape:current-layer="g4895-4-4"
 33 |      showgrid="false"
 34 |      fit-margin-top="0"
 35 |      fit-margin-left="0"
 36 |      fit-margin-right="0"
 37 |      fit-margin-bottom="0"
 38 |      inkscape:window-width="1920"
 39 |      inkscape:window-height="1056"
 40 |      inkscape:window-x="0"
 41 |      inkscape:window-y="24"
 42 |      inkscape:window-maximized="1" />
 43 |   <metadata
 44 |      id="metadata3575">
 45 |     <rdf:RDF>
 46 |       <cc:Work
 47 |          rdf:about="">
 48 |         <dc:format>image/svg+xml</dc:format>
 49 |         <dc:type
 50 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 51 |         <dc:title />
 52 |       </cc:Work>
 53 |     </rdf:RDF>
 54 |   </metadata>
 55 |   <g
 56 |      inkscape:label="Layer 1"
 57 |      inkscape:groupmode="layer"
 58 |      id="layer1"
 59 |      transform="translate(-277.71988,-312.33911)">
 60 |     <g
 61 |        id="g4895-4-4"
 62 |        transform="translate(1419.0442,398.9018)">
 63 |       <g
 64 |          transform="translate(-29.620665,-4)"
 65 |          id="g4579-2-20">
 66 |         <g
 67 |            id="g4445-2-0"
 68 |            transform="translate(12.499948,7.809312)">
 69 |           <g
 70 |              inkscape:export-ydpi="44.860481"
 71 |              inkscape:export-xdpi="44.860481"
 72 |              inkscape:export-filename="/home/emanuele/Desktop/logo1.png"
 73 |              transform="translate(-712.85583,-503.26814)"
 74 |              id="g4561-6-7-0">
 75 |             <g
 76 |                transform="translate(16.233481,0)"
 77 |                style="font-style:normal;font-weight:normal;font-size:50.25774765px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#263238;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 78 |                id="flowRoot4513-6-6-08">
 79 |               <path
 80 |                  d="m -402.73125,631.46823 q -0.6125,0.0438 -1.3125,0.0875 -0.65625,0 -1.4,0 l -9.31875,0 q -12.81875,0 -12.81875,-8.44375 l 0,-13.475 q 0,-8.26875 12.6,-8.26875 l 9.75625,0 q 12.6,0 12.6,8.26875 l 0,13.475 q 0,5.03125 -4.4625,7.04375 l 3.10625,2.14375 q 1.35625,0.83125 1.35625,1.70625 0,0.875 -0.7,1.3125 -0.65625,0.48125 -1.88125,0.48125 -0.30625,0 -0.7875,-0.13125 -0.4375,-0.0875 -1.05,-0.48125 l -5.6875,-3.71875 z m 5.38125,-21.74375 q 0,-4.76875 -7.9625,-4.76875 l -9.58125,0 q -7.9625,0 -7.9625,4.76875 l 0,13.3875 q 0,4.94375 8.3125,4.94375 l 8.88125,0 q 8.3125,0 8.3125,-4.94375 l 0,-13.3875 z"
 81 |                  style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
 82 |                  id="path3428" />
 83 |               <path
 84 |                  d="m -368.0585,631.64323 q -11.2875,0 -11.2875,-6.9125 l 0,-12.73125 q 0,-1.8375 2.31875,-1.8375 2.31875,0 2.31875,1.8375 l 0,12.775 q 0,3.325 6.475,3.325 l 8.3125,0 q 6.475,0 6.475,-3.325 l 0,-12.775 q 0,-1.8375 2.31875,-1.8375 2.3625,0 2.3625,1.8375 l 0,12.73125 q 0,6.9125 -11.2875,6.9125 l -8.00625,0 z"
 85 |                  style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
 86 |                  id="path3430" />
 87 |               <path
 88 |                  d="m -327.2833,631.64323 q -9.3625,0 -9.3625,-5.81875 l 0,-2.49375 q 0,-5.775 9.3625,-5.775 l 18.59375,0 0,-0.65625 q 0,-3.0625 -5.38125,-3.0625 l -6.16875,0 q -2.1875,0 -2.1875,-1.70625 0,-1.75 2.1875,-1.75 l 6.16875,0 q 9.93125,0 9.93125,6.51875 l 0,8.575 q 0,6.16875 -9.5375,6.16875 l -13.60625,0 z m 13.34375,-3.4125 q 5.25,0 5.25,-2.8875 l 0,-4.76875 -18.24375,0 q -5.11875,0 -5.11875,2.66875 l 0,2.275 q 0,2.7125 5.11875,2.7125 l 12.99375,0 z"
 89 |                  style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
 90 |                  id="path3432" />
 91 |               <path
 92 |                  d="m -262.77031,626.74323 q 0,4.9 -9.975,4.9 l -17.0625,0 q -2.1875,0 -2.1875,-1.70625 0,-1.70625 2.1875,-1.70625 l 17.0625,0 q 5.38125,0 5.38125,-1.4875 l 0,-2.45 q 0,-1.4875 -5.38125,-1.4875 l -9.0125,0 q -9.975,0 -9.975,-4.76875 l 0,-2.05625 q 0,-5.6 10.28125,-5.6 l 5.99375,0 q 2.23125,0 2.23125,1.75 0,0.875 -0.6125,1.3125 -0.56875,0.39375 -1.61875,0.39375 l -5.99375,0 q -5.73125,0 -5.73125,2.14375 l 0,1.925 q 0,1.79375 5.6875,1.79375 l 9.0125,0 q 9.7125,0 9.7125,4.4625 l 0,2.58125 z"
 93 |                  style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
 94 |                  id="path3434" />
 95 |               <path
 96 |                  d="m -241.91709,631.64323 q -9.3625,0 -9.3625,-5.81875 l 0,-2.49375 q 0,-5.775 9.3625,-5.775 l 18.59375,0 0,-0.65625 q 0,-3.0625 -5.38125,-3.0625 l -6.16875,0 q -2.1875,0 -2.1875,-1.70625 0,-1.75 2.1875,-1.75 l 6.16875,0 q 9.93125,0 9.93125,6.51875 l 0,8.575 q 0,6.16875 -9.5375,6.16875 l -13.60625,0 z m 13.34375,-3.4125 q 5.25,0 5.25,-2.8875 l 0,-4.76875 -18.24375,0 q -5.11875,0 -5.11875,2.66875 l 0,2.275 q 0,2.7125 5.11875,2.7125 l 12.99375,0 z"
 97 |                  style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
 98 |                  id="path3436" />
 99 |               <path
100 |                  d="m -205.62285,617.33698 q 0,-6.95625 11.2875,-6.95625 l 3.36875,0 q 2.23125,0 2.23125,1.79375 0,1.79375 -2.23125,1.79375 l -3.54375,0 q -6.475,0 -6.475,3.28125 l 0,12.775 q 0,1.8375 -2.31875,1.8375 -2.31875,0 -2.31875,-1.8375 l 0,-12.6875 z"
101 |                  style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:43.75px;font-family:'Neuropol X';-inkscape-font-specification:'Neuropol X';text-align:start;letter-spacing:5px;word-spacing:0px;text-anchor:start;fill:#263238;fill-opacity:1"
102 |                  id="path3438" />
103 |             </g>
104 |           </g>
105 |         </g>
106 |       </g>
107 |       <g
108 |          id="g5443-0-1-5-1-9"
109 |          transform="matrix(0.55595317,0,0,0.55595317,-521.93484,-328.66104)"
110 |          inkscape:export-filename="/home/emanuele/Desktop/logo1.png"
111 |          inkscape:export-xdpi="44.860481"
112 |          inkscape:export-ydpi="44.860481">
113 |         <g
114 |            inkscape:export-ydpi="3.4165223"
115 |            inkscape:export-xdpi="3.4165223"
116 |            transform="matrix(0.09527033,0,0,0.09527033,-1695.2716,706.62921)"
117 |            id="g8856-6-1-1-9-0-1-9">
118 |           <circle
119 |              r="1485"
120 |              cy="-1361.2571"
121 |              cx="8317.3574"
122 |              id="circle8858-1-3-7-6-5-3-0"
123 |              style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:50;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
124 |              inkscape:export-xdpi="10.031387"
125 |              inkscape:export-ydpi="10.031387" />
126 |           <path
127 |              inkscape:export-ydpi="10.031387"
128 |              inkscape:export-xdpi="10.031387"
129 |              style="opacity:1;fill:#263238;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
130 |              d="m 8560.3823,-1361.3029 a 242.947,242.947 0 0 1 -242.947,242.948 242.947,242.947 0 0 1 -242.947,-242.948 242.947,242.947 0 0 1 242.947,-242.946 242.947,242.947 0 0 1 242.947,242.946 z"
131 |              id="path8860-5-4-8-2-9-0-9"
132 |              inkscape:connector-curvature="0" />
133 |           <path
134 |              id="path8862-5-5-9-1-3-6-3"
135 |              d="m 9395.8755,-1984.028 a 1245.372,1245.372 0 0 0 -190.8415,-249.4971 l -280.8618,162.1556 c -87.542,-74.7796 -187.0349,-132.0588 -293.2407,-169.9527 -95.8868,97.1766 -172.0602,205.7604 -226.9672,323.8487 312.6411,-21.2772 635.5313,91.8725 935.2898,326.0721 l 176.7612,-102.0532 a 1245.372,1245.372 0 0 0 -120.1398,-290.5734 z"
136 |              clip-path="none"
137 |              mask="none"
138 |              style="fill:#1976d2;fill-opacity:1"
139 |              inkscape:connector-curvature="0"
140 |              inkscape:transform-center-x="-514.04855"
141 |              inkscape:transform-center-y="-444.04649" />
142 |           <path
143 |              inkscape:transform-center-y="265.80217"
144 |              inkscape:transform-center-x="-689.63727"
145 |              inkscape:connector-curvature="0"
146 |              style="fill:#42a5f5;fill-opacity:1"
147 |              mask="none"
148 |              clip-path="none"
149 |              d="m 9395.9474,-738.70387 a 1245.372,1245.372 0 0 0 120.6501,-290.02213 l -280.8618,-162.1557 c 20.99,-113.2034 20.8488,-228.0063 0.563,-338.9302 -132.1008,-34.4521 -264.2238,-46.1283 -393.9448,-34.635 174.7471,260.1165 238.2017,596.32248 185.2582,973.02076 l 176.7612,102.05309 a 1245.372,1245.372 0 0 0 191.5741,-249.33082 z"
150 |              id="path8864-4-8-1-2-4-4-4" />
151 |           <path
152 |              id="path8866-7-5-5-0-6-4-7"
153 |              d="m 8317.501,-115.97954 a 1245.372,1245.372 0 0 0 311.4916,-40.52501 l 0,-324.31131 c 108.5321,-38.42382 207.8837,-95.94755 293.8037,-168.97752 -36.214,-131.6287 -92.1636,-251.88868 -166.9776,-358.48372 -137.894,281.39369 -397.3296,504.44998 -750.0316,646.9487 l 0,204.10623 a 1245.372,1245.372 0 0 0 311.7139,41.24263 z"
154 |              clip-path="none"
155 |              mask="none"
156 |              style="fill:#1976d2;fill-opacity:1"
157 |              inkscape:connector-curvature="0"
158 |              inkscape:transform-center-x="-117.49007"
159 |              inkscape:transform-center-y="639.34029" />
160 |           <path
161 |              inkscape:transform-center-y="444.04652"
162 |              inkscape:transform-center-x="514.04857"
163 |              inkscape:connector-curvature="0"
164 |              style="fill:#42a5f5;fill-opacity:1"
165 |              mask="none"
166 |              clip-path="none"
167 |              d="m 7238.9827,-738.57936 a 1245.372,1245.372 0 0 0 190.8415,249.49714 l 280.8618,-162.15566 c 87.5421,74.77965 187.0349,132.05879 293.2407,169.95271 95.8868,-97.17659 172.0602,-205.76036 226.9672,-323.8487 -312.6411,21.27714 -635.5313,-91.87254 -935.2898,-326.07203 l -176.7612,102.0531 a 1245.372,1245.372 0 0 0 120.1398,290.57344 z"
168 |              id="path8868-6-7-4-7-2-7-3" />
169 |           <path
170 |              id="path8870-5-3-9-3-5-5-1"
171 |              d="m 7238.9108,-1983.9035 a 1245.372,1245.372 0 0 0 -120.6501,290.0221 l 280.8618,162.1557 c -20.99,113.2035 -20.8488,228.0063 -0.563,338.9302 132.1008,34.4521 264.2238,46.1283 393.9448,34.635 -174.7471,-260.1165 -238.2017,-596.3225 -185.2582,-973.0207 l -176.7612,-102.0532 a 1245.372,1245.372 0 0 0 -191.5741,249.3309 z"
172 |              clip-path="none"
173 |              mask="none"
174 |              style="fill:#1976d2;fill-opacity:1"
175 |              inkscape:connector-curvature="0"
176 |              inkscape:transform-center-x="689.63729"
177 |              inkscape:transform-center-y="-265.80221" />
178 |           <path
179 |              inkscape:transform-center-y="-639.34032"
180 |              inkscape:transform-center-x="117.49005"
181 |              inkscape:connector-curvature="0"
182 |              style="fill:#42a5f5;fill-opacity:1"
183 |              mask="none"
184 |              clip-path="none"
185 |              d="m 8317.3572,-2606.6279 a 1245.372,1245.372 0 0 0 -311.4915,40.525 l -1e-4,324.3113 c -108.5321,38.4239 -207.8837,95.9476 -293.8037,168.9776 36.214,131.6287 92.1637,251.8886 166.9776,358.4837 137.894,-281.3937 397.3296,-504.45 750.0316,-646.9487 l 1e-4,-204.1063 a 1245.372,1245.372 0 0 0 -311.714,-41.2426 z"
186 |              id="path8872-6-3-2-1-3-3-7" />
187 |         </g>
188 |       </g>
189 |     </g>
190 |   </g>
191 | </svg>
192 | 


--------------------------------------------------------------------------------
/src/assets/sad.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166.7 168.9" width="166.7" height="168.9" isolation="isolate"><defs><clipPath><rect width="166.7" height="168.9"/></clipPath></defs><g clip-path="url(#_clipPath_PPPiEcORhRSYwopEENnaRFzzeYSXmwtt)"><path d="M65.6 135.2C65.6 137.1 64.1 138.6 62.2 138.6 60.4 138.6 58.9 137.1 58.9 135.2 58.9 130.7 61.9 126.7 66.8 124 71.1 121.6 77 120.1 83.3 120.1 89.7 120.1 95.6 121.6 99.9 124 104.7 126.7 107.8 130.7 107.8 135.2 107.8 137.1 106.3 138.6 104.4 138.6 102.6 138.6 101.1 137.1 101.1 135.2 101.1 133.3 99.4 131.3 96.6 129.8 93.3 127.9 88.6 126.8 83.3 126.8 78.1 126.8 73.4 127.9 70 129.8 67.3 131.3 65.6 133.3 65.6 135.2ZM149.2 153.3C149.2 157.6 147.5 161.5 144.6 164.4 141.8 167.2 137.9 168.9 133.6 168.9 129.3 168.9 125.4 167.2 122.6 164.4 120.9 162.8 119.7 160.9 118.9 158.7 114.1 161 109 162.8 103.7 164.1 97.2 165.8 90.4 166.6 83.3 166.6 60.3 166.6 39.5 157.3 24.4 142.2 9.3 127.1 0 106.3 0 83.3 0 60.3 9.3 39.5 24.4 24.4 39.5 9.3 60.3 0 83.3 0 106.4 0 127.2 9.3 142.3 24.4 157.3 39.5 166.7 60.3 166.7 83.3 166.7 94.5 164.5 105.1 160.5 114.9 156.6 124.2 151.1 132.7 144.4 140 147 145.1 149.2 150.2 149.2 153.3ZM130.7 126.3C131.1 125.5 131.8 125 132.5 124.8L132.6 124.7 132.6 124.7 132.7 124.7 132.7 124.7 132.8 124.7 132.9 124.6 132.9 124.6 132.9 124.6 133 124.6 133 124.6C133 124.6 133.1 124.6 133.1 124.6L133.1 124.6 133.2 124.6 133.2 124.6C133.9 124.5 134.6 124.6 135.2 125 135.8 125.3 136.3 125.8 136.6 126.4L136.6 126.4 136.6 126.4 136.6 126.4 136.6 126.4 136.6 126.4 136.6 126.5 136.6 126.5 136.6 126.5 136.6 126.5 136.6 126.5 136.7 126.5C137 127.2 137.7 128.3 138.4 129.6L138.4 129.6 138.5 129.7 138.5 129.7 138.6 129.8 138.6 129.9 138.6 129.9 138.7 130 138.7 130.1 138.7 130.1 138.7 130.1 138.8 130.2 138.8 130.2 138.8 130.3 138.9 130.3 138.9 130.4 138.9 130.4 138.9 130.4 139 130.5 139 130.5 139 130.6 139.1 130.7 139.1 130.7 139.1 130.7 139.2 130.8 139.2 130.8 139.2 130.9C139.8 131.8 140.4 132.9 141 133.9 146.5 127.6 151.1 120.3 154.3 112.4 158 103.4 160 93.6 160 83.3 160 62.1 151.4 43 137.6 29.1 123.7 15.2 104.5 6.7 83.3 6.7 62.2 6.7 43 15.2 29.1 29.1 15.2 43 6.7 62.1 6.7 83.3 6.7 104.5 15.2 123.6 29.1 137.5 43 151.4 62.2 160 83.3 160 89.8 160 96.1 159.2 102.1 157.7 107.8 156.2 113.1 154.2 118.1 151.7L118.1 151.6 118.2 151.6 118.2 151.3 118.2 151.3 118.3 151 118.3 151 118.4 150.7 118.4 150.6 118.5 150.4 118.5 150.3 118.5 150 118.6 149.9 118.6 149.7 118.7 149.6 118.8 149.3C118.9 148.9 119 148.5 119.1 148.2L119.2 148.1 119.3 147.8 119.3 147.7 119.4 147.4 119.4 147.4C119.5 147.1 119.6 146.9 119.7 146.7L119.7 146.6 119.8 146.3 119.9 146.2 120 145.9 120.1 145.9C120.2 145.6 120.3 145.3 120.4 145.1L120.4 145.1 120.6 144.7 120.6 144.6 120.7 144.3 120.8 144.2 120.9 143.9 120.9 143.8 121 143.8 121.1 143.5 121.1 143.4 121.2 143.2 121.3 143 121.4 143C121.6 142.6 121.7 142.2 122 141.8L122 141.7 122.2 141.4 122.2 141.3 122.4 140.9 122.4 140.9 122.6 140.5 122.6 140.5 122.8 140.1 123 139.8 123 139.7 123 139.7 123.4 138.9 123.5 138.9 123.6 138.6 123.7 138.4 123.8 138.3 123.9 138 124 137.9 124.2 137.6 124.2 137.5 124.4 137.2 124.4 137.2 124.6 136.8 124.6 136.8 124.8 136.4 124.8 136.4 125 136.1 125.1 136 125.2 135.7 125.3 135.6 125.4 135.3 125.5 135.2 125.6 135 125.7 134.8 125.8 134.6 125.9 134.4 126.2 134 126.2 133.9 126.4 133.6 126.4 133.6 126.6 133.3 126.6 133.2 126.8 132.9 126.8 132.9 127 132.5 127 132.5 127.3 132.2 127.4 131.9 127.4 131.8 127.6 131.6 127.7 131.5 127.8 131.3 127.9 131.1 128 131 128.1 130.8 128.1 130.6 128.3 130.4 128.3 130.4 128.5 130.1 128.5 130.1 128.7 129.8 128.7 129.8 128.8 129.5 128.8 129.5 128.9 129.4 128.9 129.3 129 129.3 129 129.2 129 129.1 129 129.1 129.1 129 129.1 129 129.2 128.9 129.2 128.9 129.2 128.8 129.2 128.8 129.3 128.8 129.3 128.8 129.3 128.7 129.3 128.7 129.3 128.7 129.3 128.7 129.4 128.6 129.4 128.6 129.4 128.5 129.4 128.5 129.4 128.4 129.5 128.4 129.5 128.4 129.5 128.4 129.5 128.4 129.5 128.3 129.5 128.3 129.6 128.2 129.6 128.2 129.6 128.2 129.6 128.2 129.6 128.1 129.6 128.1 129.7 128.1 129.7 128.1 129.7 128 129.7 128 129.8 127.9 129.8 127.9 129.8 127.9 129.8 127.9 129.8 127.8 129.8 127.8 129.8 127.8 129.8 127.8 129.9 127.7 129.9 127.7 129.9 127.7 129.9 127.7 129.9 127.6 129.9 127.6 130 127.6 130 127.6 130 127.5 130 127.5 130 127.4 130 127.4 130.1 127.4 130.1 127.4 130.1 127.4 130.1 127.4 130.1 127.3 130.1 127.3 130.1 127.3 130.1 127.3 130.2 127.2 130.2 127.2 130.2 127.2 130.2 127.2 130.2 127.1 130.2 127.1 130.2 127.1 130.2 127.1 130.3 127 130.3 127 130.3 127 130.3 127 130.3 127 130.3 127 130.4 126.9 130.4 126.9 130.4 126.9 130.4 126.9 130.4 126.8 130.4 126.8 130.4 126.8 130.4 126.8 130.4 126.8 130.4 126.8 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.7 130.5 126.6 130.5 126.6 130.5 126.6 130.5 126.6 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.5 130.6 126.4 130.6 126.4 130.7 126.4 130.7 126.4 130.7 126.4 130.7 126.4 130.7 126.3 130.7 126.3 130.7 126.3 130.7 126.3ZM140 159.6C141.5 158.1 142.6 155.8 142.6 153.3 142.6 151 140.1 146 137.4 141.1L137.4 141.1 137.4 141.1 137.4 141.1C137 140.4 136.7 139.8 136.3 139.1L136.2 139 136.2 138.9 136.1 138.9 136.1 138.8 136 138.5 135.9 138.5C135.2 137.2 134.5 136.1 133.9 135L133.8 134.9 133.8 134.8 133.8 134.8 133.7 134.7 133.6 134.6 133.6 134.5 133.4 134.8 133.3 135.1 133.3 135.1 133.1 135.4 133.1 135.4 132.9 135.7 132.7 136 132.7 136 132.5 136.3 132.5 136.3 132.4 136.6 132.2 136.9 132.2 136.9 132 137.2 131.8 137.5 131.8 137.5 131.6 137.9 131.6 137.9 131.4 138.2 131.4 138.2 131.2 138.5 131 138.9 131 138.9 130.8 139.2 130.8 139.2 130.7 139.5 130.7 139.5 130.5 139.9 130.5 139.9 130.3 140.2 130.1 140.5 130.1 140.5 129.9 140.9 129.9 140.9 129.7 141.2 129.7 141.2 129.6 141.5 129.4 141.9 129.2 142.2 129.2 142.2 129 142.6 129 142.6 128.8 142.9 128.6 143.2 128.6 143.2 128.5 143.6 128.3 143.9 128.3 143.9 128.1 144.3 128.1 144.3 127.9 144.6 127.9 144.6 127.8 144.9 127.6 145.2 127.4 145.6 127.3 145.9 127.3 145.9 127.1 146.2 127 146.5 127 146.5 126.8 146.8 126.8 146.8 126.7 147.2 126.7 147.2 126.5 147.5 126.5 147.5 126.4 147.8 126.4 147.8 126.3 148.1 126.1 148.4 126 148.6 126 148.6 125.9 149 125.9 149 125.7 149.3 125.7 149.5 125.7 149.5 125.6 149.8 125.6 149.8 125.4 150 125.4 150 125.3 150.3 125.3 150.3 125.3 150.6 125.3 150.6 125.2 150.8 125.2 150.8 125.1 151.1 125.1 151.1 125 151.3 125 151.3 125 151.6 125 151.6 124.9 151.8 124.9 151.8 124.8 152 124.8 152 124.8 152.2 124.8 152.2 124.8 152.4 124.8 152.4C124.7 152.5 124.7 152.5 124.7 152.6L124.7 152.6 124.7 152.8 124.7 152.8C124.7 152.9 124.7 152.9 124.7 153L124.7 153 124.6 153.2 124.6 153.2 124.6 153.3 124.6 153.4C124.7 155.9 125.7 158.1 127.3 159.7 128.9 161.3 131.1 162.3 133.6 162.3 136.1 162.3 138.3 161.3 140 159.6ZM135.3 72.7C136.2 74.3 135.6 76.3 133.9 77.2 132.3 78 130.3 77.4 129.4 75.8 128.7 74.3 127.6 72.9 126.3 71.9 125 70.8 123.4 70.1 121.8 69.6L121.8 69.6C120.8 69.4 119.8 69.2 118.9 69.2 117.8 69.2 116.8 69.3 115.8 69.5 114 69.9 112.3 68.8 111.8 67 111.5 65.2 112.6 63.5 114.4 63 115.8 62.7 117.4 62.6 118.9 62.6 120.5 62.6 122 62.8 123.4 63.2L123.6 63.2C126.1 63.9 128.4 65.1 130.4 66.7 132.5 68.3 134.1 70.4 135.3 72.7ZM37.2 75.8C36.4 77.4 34.4 78 32.7 77.2 31.1 76.3 30.5 74.3 31.3 72.7 32.5 70.4 34.2 68.3 36.2 66.7 38.2 65.1 40.6 63.9 43.1 63.2L43.2 63.2C44.7 62.8 46.2 62.6 47.7 62.6 49.3 62.6 50.8 62.7 52.3 63 54.1 63.5 55.2 65.2 54.8 67 54.4 68.8 52.6 69.9 50.9 69.5 49.9 69.3 48.8 69.2 47.8 69.2 46.8 69.2 45.8 69.4 44.9 69.6L44.9 69.6C43.2 70.1 41.7 70.8 40.4 71.9 39.1 72.9 38 74.3 37.2 75.8ZM125.2 92.7C125.2 90.7 124.5 88.9 123.3 87.6 122.2 86.5 120.6 85.7 119 85.7 117.3 85.7 115.8 86.5 114.7 87.6 113.5 88.9 112.8 90.7 112.8 92.7 112.8 94.6 113.5 96.4 114.7 97.7 115.8 98.9 117.3 99.6 119 99.6 120.6 99.6 122.2 98.9 123.3 97.7 124.5 96.4 125.2 94.6 125.2 92.7ZM128.2 83.2C130.4 85.6 131.8 89 131.8 92.7 131.8 96.4 130.4 99.7 128.2 102.2 125.8 104.7 122.6 106.3 119 106.3 115.4 106.3 112.1 104.7 109.8 102.2 107.5 99.7 106.1 96.4 106.1 92.7 106.1 89 107.5 85.6 109.8 83.2 112.1 80.6 115.4 79.1 119 79.1 122.6 79.1 125.8 80.6 128.2 83.2ZM53.9 92.7C53.9 90.7 53.2 88.9 52 87.6 50.9 86.5 49.4 85.7 47.7 85.7 46 85.7 44.5 86.5 43.4 87.6 42.2 88.9 41.5 90.7 41.5 92.7 41.5 94.6 42.2 96.4 43.4 97.7 44.5 98.9 46 99.6 47.7 99.6 49.4 99.6 50.9 98.9 52 97.7 53.2 96.4 53.9 94.6 53.9 92.7ZM56.9 83.2C59.2 85.6 60.5 89 60.5 92.7 60.5 96.4 59.2 99.7 56.9 102.2 54.5 104.7 51.3 106.3 47.7 106.3 44.1 106.3 40.9 104.7 38.5 102.2 36.2 99.7 34.8 96.4 34.8 92.7 34.8 89 36.2 85.6 38.5 83.2 40.9 80.6 44.1 79.1 47.7 79.1 51.3 79.1 54.5 80.6 56.9 83.2Z" fill="rgb(1,22,39)" fill-opacity="0.2"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/src/boot/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mayur091193/quasar-shopping/d9872a2e44a1872a32f2a5d3834c5a869736a07b/src/boot/.gitkeep


--------------------------------------------------------------------------------
/src/components/EssentialLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <q-item clickable tag="a" target="_blank" :href="link">
 3 |     <q-item-section v-if="icon" avatar>
 4 |       <q-icon :name="icon" />
 5 |     </q-item-section>
 6 | 
 7 |     <q-item-section>
 8 |       <q-item-label>{{ title }}</q-item-label>
 9 |       <q-item-label caption>{{ caption }}</q-item-label>
10 |     </q-item-section>
11 |   </q-item>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'EssentialLink',
17 |   props: {
18 |     title: {
19 |       type: String,
20 |       required: true
21 |     },
22 | 
23 |     caption: {
24 |       type: String,
25 |       default: ''
26 |     },
27 | 
28 |     link: {
29 |       type: String,
30 |       default: '#'
31 |     },
32 | 
33 |     icon: {
34 |       type: String,
35 |       default: ''
36 |     }
37 |   }
38 | }
39 | </script>
40 | 


--------------------------------------------------------------------------------
/src/css/app.sass:
--------------------------------------------------------------------------------
1 | // app global css in Sass form
2 | 


--------------------------------------------------------------------------------
/src/css/quasar.variables.sass:
--------------------------------------------------------------------------------
 1 | // Quasar Sass (& SCSS) Variables
 2 | // --------------------------------------------------
 3 | // To customize the look and feel of this app, you can override
 4 | // the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
 5 | 
 6 | // Check documentation for full list of Quasar variables
 7 | 
 8 | // Your own variables (that are declared here) and Quasar's own
 9 | // ones will be available out of the box in your .vue/.scss/.sass files
10 | 
11 | // It's highly recommended to change the default colors
12 | // to match your app's branding.
13 | // Tip: Use the "Theme Builder" on Quasar's documentation website.
14 | 
15 | $primary   : #1f509e
16 | $secondary : #26A69A
17 | $accent    : #9C27B0
18 | 
19 | $dark      : #1D1D1D
20 | 
21 | $positive  : #21BA45
22 | $negative  : #C10015
23 | $info      : #31CCEC
24 | $warning   : #F2C037
25 | 


--------------------------------------------------------------------------------
/src/index.template.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title><%= htmlWebpackPlugin.options.productName %></title>
 5 | 
 6 |   <meta charset="utf-8">
 7 |   <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
 8 |   <meta name="format-detection" content="telephone=no">
 9 |   <meta name="msapplication-tap-highlight" content="no">
10 |   <meta name="viewport"
11 |         content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
12 |   <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
13 |   <link rel="icon" type="image/png" href="app-logo-128x128.png">
14 |   <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
15 |   <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
16 |   <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
17 |   <link rel="icon" type="image/ico" href="icons/favicon.ico">
18 | </head>
19 | <body>
20 | <!-- DO NOT touch the following DIV -->
21 | <div id="q-app"></div>
22 | <script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/layouts/MainLayout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <q-layout view="lHh LpR lFf" style="font-family: Lato;"><!-- 
  3 |     <q-header reveal elevated style="background-color: #1f509e;"> -->
  4 | 
  5 |     <q-header reveal elevated style="background-color: #1f509e;">
  6 |       <q-toolbar v-if="!$q.platform.is.desktop" class="q-py-sm">
  7 |         <div class="row">
  8 |           <div class="col-sm-12 col-xs-12">
  9 |             <q-toolbar-title>
 10 |               <img @click="$router.push('/home')" class="cursor-pointer float-left" src="images/logo.png" style="width: 12%"/>
 11 |               <span class="float-left q-mt-xs q-ml-md text-h6 text-weight-bold" style="font-size: 17px;">Quasar Shopping</span>
 12 |             </q-toolbar-title>
 13 |           </div>
 14 |           <div class="col-sm-12 col-xs-12 q-mt-md">
 15 |             <q-input class="float-left q-mx-md full-width" square bg-color="white" dense outlined
 16 |                      v-model="text"
 17 |                      label="Search for products, brands and more"/>
 18 |           </div>
 19 |           <div class="col-sm-12 col-xs-12 q-mt-md">
 20 |             <div>
 21 |               <q-btn class="q-mr-md" dense round flat icon="shopping_cart">
 22 |                 <q-badge color="red" class="text-bold" floating transparent>
 23 |                   4
 24 |                 </q-badge>
 25 |               </q-btn>
 26 |               <q-btn flat round dense icon="settings" class="q-mr-md"/>
 27 |               <q-btn flat round dense icon="fas fa-sign-out-alt" to="/"/>
 28 |             </div>
 29 |           </div>
 30 |         </div>
 31 |         <!--          <q-btn @click="left = !left" flat round dense icon="menu" class="q-mr-sm" />-->
 32 | 
 33 | 
 34 |         <!--<q-btn flat dense icon="shopping_cart" class="text-capitalize q-mr-md text-bold" label="Cart"/>-->
 35 | 
 36 |       </q-toolbar>
 37 |       <q-toolbar v-if="$q.platform.is.desktop" class="q-py-sm">
 38 |         <!--          <q-btn @click="left = !left" flat round dense icon="menu" class="q-mr-sm" />-->
 39 |         <img @click="$router.push('/home')" class="cursor-pointer" src="images/logo.png" style="width: 3%"/>
 40 |         <q-toolbar-title>
 41 |           <span class="float-left q-mt-xs text-h6 text-weight-bold" style="font-size: 17px;">Quasar Shopping</span>
 42 |           <q-input class="float-left q-ml-xl" style="width: 650px;" square bg-color="white" dense outlined
 43 |                    v-model="text"
 44 |                    label="Search for products, brands and more"/>
 45 |         </q-toolbar-title>
 46 | 
 47 |         <!--<q-btn flat dense icon="shopping_cart" class="text-capitalize q-mr-md text-bold" label="Cart"/>-->
 48 |         <q-btn class="q-mr-md" dense round flat icon="shopping_cart">
 49 |           <q-badge color="red" class="text-bold" floating transparent>
 50 |             4
 51 |           </q-badge>
 52 |         </q-btn>
 53 |         <q-btn flat round dense icon="settings" class="q-mr-md"/>
 54 |         <q-btn flat round dense icon="fas fa-sign-out-alt" to="/"/>
 55 |       </q-toolbar>
 56 |       <div class="bg-white text-grey-9 text-weight-bold shadow-transition">
 57 |         <div class="row text-center items-center" :style="$q.platform.is.desktop ? 'height: 38px' : ''">
 58 |           <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 cursor-pointer hover-blue" @mouseover="menu_cat_elc=true">
 59 |             Electronics
 60 |             <q-menu
 61 |               fit
 62 |               @mouseleave="menu_cat_elc=false"
 63 |               v-model="menu_cat_elc"
 64 |               transition-show="flip-right"
 65 |               transition-hide="flip-left"
 66 |             >
 67 |               <q-list dense class="text-grey-9 text-caption">
 68 |                 <q-item @click="$router.push('/category')" clickable>
 69 |                   <q-item-section>Mobiles</q-item-section>
 70 |                 </q-item>
 71 |                 <q-item @click="$router.push('/category')" clickable>
 72 |                   <q-item-section>Laptops</q-item-section>
 73 |                 </q-item>
 74 |                 <q-item @click="$router.push('/category')" clickable>
 75 |                   <q-item-section>Health Care Appliances</q-item-section>
 76 |                 </q-item>
 77 |                 <!--<q-separator/>-->
 78 |                 <q-item @click="$router.push('/category')" clickable>
 79 |                   <q-item-section>Speakers</q-item-section>
 80 |                 </q-item>
 81 |                 <q-item @click="$router.push('/category')" clickable>
 82 |                   <q-item-section>Smart Home Automation</q-item-section>
 83 |                 </q-item>
 84 |               </q-list>
 85 |             </q-menu>
 86 |             <q-icon size="sm" class="q-ml-xs text-grey-5" name="keyboard_arrow_down"></q-icon>
 87 |           </div>
 88 |           <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 cursor-pointer hover-blue" @mouseover="menu_cat_tvs=true">
 89 |             TVs and Appliances
 90 |             <q-menu
 91 |               fit
 92 |               @mouseleave="menu_cat_tvs=false"
 93 |               v-model="menu_cat_tvs"
 94 |               transition-show="flip-right"
 95 |               transition-hide="flip-left"
 96 |             >
 97 |               <q-list dense class="text-grey-9 text-caption">
 98 |                 <q-item @click="$router.push('/category')" clickable>
 99 |                   <q-item-section>Television</q-item-section>
100 |                 </q-item>
101 |                 <q-item @click="$router.push('/category')" clickable>
102 |                   <q-item-section>Air Conditioners</q-item-section>
103 |                 </q-item>
104 |                 <q-item @click="$router.push('/category')" clickable>
105 |                   <q-item-section>Health Care Appliances</q-item-section>
106 |                 </q-item>
107 |                 <!--<q-separator/>-->
108 |                 <q-item @click="$router.push('/category')" clickable>
109 |                   <q-item-section>Shop By Screen Size</q-item-section>
110 |                 </q-item>
111 |                 <q-item @click="$router.push('/category')" clickable>
112 |                   <q-item-section>Smart Home Appliances</q-item-section>
113 |                 </q-item>
114 |               </q-list>
115 |             </q-menu>
116 |             <q-icon size="sm" class="q-ml-xs text-grey-5" name="keyboard_arrow_down"></q-icon>
117 |           </div>
118 |           <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 cursor-pointer hover-blue" @mouseover="menu_cat_men=true">
119 |             Men
120 |             <q-menu
121 |               fit
122 |               @mouseleave="menu_cat_men=false"
123 |               v-model="menu_cat_men"
124 |               transition-show="flip-right"
125 |               transition-hide="flip-left"
126 |             >
127 |               <q-list dense class="text-grey-9 text-caption">
128 |                 <q-item @click="$router.push('/category')" clickable>
129 |                   <q-item-section>Footwear</q-item-section>
130 |                 </q-item>
131 |                 <q-item @click="$router.push('/category')" clickable>
132 |                   <q-item-section>Clothing</q-item-section>
133 |                 </q-item>
134 |                 <q-item @click="$router.push('/category')" clickable>
135 |                   <q-item-section>Sports & Fitness Store</q-item-section>
136 |                 </q-item>
137 |               </q-list>
138 |             </q-menu>
139 |             <q-icon size="sm" class="q-ml-xs text-grey-5" name="keyboard_arrow_down"></q-icon>
140 |           </div>
141 |           <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 cursor-pointer hover-blue">
142 |             Women
143 |             <q-icon size="sm" class="q-ml-xs text-grey-5" name="keyboard_arrow_down"></q-icon>
144 |           </div>
145 |           <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 cursor-pointer hover-blue">
146 |             Home & Furniture
147 |             <q-icon size="sm" class="q-ml-xs text-grey-5" name="keyboard_arrow_down"></q-icon>
148 |           </div>
149 |           <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 cursor-pointer hover-blue">
150 |             Offers
151 |           </div>
152 |         </div>
153 |       </div>
154 |     </q-header>
155 | 
156 | 
157 |     <q-page-container style="background-color:#f1f2f6">
158 |       <router-view/>
159 |       <div class="q-mt-sm">
160 |         <div class="row q-pa-md bg-primary">
161 |           <div class="col-lg-1 col-md-1 col-sm-12 col-xs-12"></div>
162 |           <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 text-white">
163 |             <div class="text-subtitle1 text-weight-bold">About</div>
164 |             <div class="text-caption hover_underline_white q-mt-sm">Contact us</div>
165 |             <div class="text-caption hover_underline_white">About Us</div>
166 |             <div class="text-caption hover_underline_white">Careers</div>
167 |             <div class="text-caption hover_underline_white">Our Stories</div>
168 |             <div class="text-caption hover_underline_white">Press</div>
169 |           </div>
170 |           <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 text-white">
171 |             <div class="text-subtitle1 text-weight-bold">Connect with Us</div>
172 |             <div class="text-caption hover_underline_white q-mt-sm">Facebook</div>
173 |             <div class="text-caption hover_underline_white">Instagram</div>
174 |             <div class="text-caption hover_underline_white">Twitter</div>
175 |           </div>
176 |           <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 text-white">
177 |             <div class="text-subtitle1 text-weight-bold">Policy</div>
178 |             <div class="text-caption hover_underline_white q-mt-sm">Return Policy</div>
179 |             <div class="text-caption hover_underline_white">Terms Of Use</div>
180 |             <div class="text-caption hover_underline_white">Security</div>
181 |             <div class="text-caption hover_underline_white">Privacy</div>
182 |             <div class="text-caption hover_underline_white">Sitemap</div>
183 |           </div>
184 |           <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 text-white">
185 |             <div class="text-subtitle1 text-weight-bold">Help</div>
186 |             <div class="text-caption hover_underline_white q-mt-sm">Payments</div>
187 |             <div class="text-caption hover_underline_white">Shipping</div>
188 |             <div class="text-caption hover_underline_white">Cancellation & Returns</div>
189 |             <div class="text-caption hover_underline_white">FAQ</div>
190 |           </div>
191 |           <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12  text-white"
192 |                :class="$q.platform.is.desktop ? 'q-pl-xl' : ''"
193 |                :style="$q.platform.is.desktop ? 'border-left: 1px solid grey;' : ''">
194 |             <div class="text-subtitle1 text-weight-bold">Registered Office Address:</div>
195 |             <div class="text-caption q-mt-sm">335, Gokhale Wadi, Grant Road</div>
196 |             <div class="text-caption">Mumbai, Maharashtra</div>
197 |             <div class="text-caption">412207</div>
198 |             <div class="text-caption">India</div>
199 |           </div>
200 |         </div>
201 |         <div style="background-color: #163758;">
202 |           <div class="q-mr-md text-right q-py-xs text-weight-bold text-grey-6" style="">
203 |             Made with
204 |             <span style="color: #e25555;font-size: 16px">&#9829;</span> using
205 |             <a target="_blank" class="text-blue-1 hover_underline_white" style="text-decoration: none"
206 |                href="https://quasar-framework.org">&nbsp;Quasar&nbsp;</a> by
207 |             <a target="_blank" class="text-blue-1 hover_underline_white" style="text-decoration: none"
208 |                href="https://github.com/mayur091193">Mayur</a>.
209 |           </div>
210 |         </div>
211 |       </div>
212 |     </q-page-container>
213 | 
214 | 
215 |   </q-layout>
216 | </template>
217 | 
218 | <script>
219 |   export default {
220 |     data() {
221 |       return {
222 |         left: false,
223 |         menu_cat_elc: false,
224 |         menu_cat_tvs: false,
225 |         menu_cat_men: false,
226 |         text: ''
227 |       }
228 |     }
229 |   }
230 | </script>
231 | 
232 | <style>
233 |   .q-drawer {
234 |     /*background-image: url(https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-2.32103624.jpg) !important;*/
235 |     background-image: url('/images/lake.jpg') !important;
236 |     background-size: cover !important;
237 |   }
238 | 
239 |   .q-drawer__content {
240 |     background-color: rgba(1, 1, 1, 0.75);
241 |   }
242 | 
243 |   .navigation-item {
244 |     border-radius: 5px;
245 |   }
246 | 
247 |   .tab-active {
248 |     background-color: green;
249 |   }
250 | 
251 |   .hover-blue:hover {
252 |     color: #1f509e;
253 |   }
254 | 
255 |   .hover_underline_white:hover {
256 |     text-decoration: underline !important;
257 |     cursor: pointer;
258 |   }
259 | 
260 |   .hover_border_grey:hover {
261 |     border: 1px solid lightgrey;
262 |     cursor: pointer;
263 |     border-radius: 3px;
264 |   }
265 | </style>
266 | 


--------------------------------------------------------------------------------
/src/pages/Error404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="fixed-center text-center">
 3 |     <p>
 4 |       <img
 5 |         src="~assets/sad.svg"
 6 |         style="width:30vw;max-width:150px;"
 7 |       >
 8 |     </p>
 9 |     <p class="text-faded">Sorry, nothing here...<strong>(404)</strong></p>
10 |     <q-btn
11 |       color="secondary"
12 |       style="width:200px;"
13 |       to="/"
14 |       label="Go back"
15 |     />
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   name: 'Error404'
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/pages/category.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="row bg-white q-mt-sm">
  4 |       <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12" style="border-right: 1px solid lightgrey">
  5 |         <q-card class="q-mr-sm no-shadow">
  6 |           <!--<q-card-section class="text-subtitle1 text-grey-8">-->
  7 |           <!--Filter By-->
  8 |           <!--</q-card-section>-->
  9 |           <transition-group
 10 |             appear
 11 |             enter-active-class="animated fadeInLeft"
 12 |           >
 13 |             <q-list v-for="item in filters_list" :key="item.label">
 14 |               <q-item-label class="text-weight-bolder text-grey-9 q-pt-md q-pb-sm" header>{{item.label}}</q-item-label>
 15 |               <q-item class="q-pa-none" v-for="it in item.items" :key="it.model" tag="label" v-ripple dense>
 16 |                 <q-item-section side class="q-px-md text-caption">
 17 |                   <q-checkbox @input="searched_results=[],show_load_more=false,log_offset=0,do_search()" dense
 18 |                               v-model="it[it.model]">
 19 |                     {{it.label}}({{it.count}})
 20 |                   </q-checkbox>
 21 |                 </q-item-section>
 22 |               </q-item>
 23 |               <q-item class="q-py-none text-weight-bold text-indigo text-caption cursor-pointer"
 24 |                       style="min-height: 10px">
 25 |                 View All
 26 |               </q-item>
 27 |             </q-list>
 28 |           </transition-group>
 29 |         </q-card>
 30 |       </div>
 31 |       <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
 32 |         <div class="q-pa-md row items-start q-gutter-md">
 33 |           <q-card @click="$router.push('/details')" class="cursor-pointer" :class="class_val"
 34 |                   @mouseover="class_val='my-card shadow-20'"
 35 |                   @mouseleave="class_val='my-card shadow-'">
 36 |             <q-img src="https://miipublications.com.my/wp-content/uploads/2019/10/shop-online-760x490.jpg"></q-img>
 37 | 
 38 |             <q-card-section class="q-pb-xs q-pt-md">
 39 |               <!--<q-btn-->
 40 |               <!--fab-->
 41 |               <!--color="primary"-->
 42 |               <!--icon="shopping_cart"-->
 43 |               <!--class="absolute"-->
 44 |               <!--style="top: 0; right: 12px; transform: translateY(-50%);"-->
 45 |               <!--&gt;</q-btn>-->
 46 | 
 47 |               <div class="row no-wrap items-center">
 48 |                 <div class="col text-subtitle2 ellipsis-2-lines text-grey-10">
 49 |                   Benling C200-BLK Smartwatch (Black Strap Free Size)
 50 |                 </div>
 51 |                 <div class="col-auto text-grey text-caption q-pt-md row no-wrap items-center">
 52 |                   <!--<q-icon name="place"></q-icon>-->
 53 |                   <!--250 ft-->
 54 |                 </div>
 55 |               </div>
 56 | 
 57 |               <q-rating v-model="stars" color="orange" :max="5" readonly size="17px"></q-rating>
 58 |             </q-card-section>
 59 | 
 60 |             <q-card-section class="q-py-sm">
 61 |               <div>
 62 |                 <div class="text-caption text-green-8 text-weight-bolder">Special Price</div>
 63 |                 <span class="text-h6">₹3,149</span><span class="q-ml-sm text-grey-6"
 64 |                                                          style="text-decoration: line-through">₹3,699</span>
 65 |                 <span class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md">20% off</span>
 66 |               </div>
 67 |               <!--<div class="text-subtitle1">-->
 68 |               <!--$・Italian, Cafe-->
 69 |               <!--</div>-->
 70 |               <!--<div class="text-caption text-grey">-->
 71 |               <!--Small plates, salads & sandwiches in an intimate setting.-->
 72 |               <!--</div>-->
 73 |             </q-card-section>
 74 | 
 75 |             <q-separator></q-separator>
 76 | 
 77 |             <q-card-actions>
 78 |               <q-btn flat class="text-weight-bold text-capitalize" dense color="primary">
 79 |                 View details
 80 |               </q-btn>
 81 |             </q-card-actions>
 82 |           </q-card>
 83 |         </div>
 84 |       </div>
 85 |     </div>
 86 |   </div>
 87 | </template>
 88 | 
 89 | <script>
 90 |   export default {
 91 |     name: "category.vue",
 92 |     data() {
 93 |       return {
 94 |         stars: 4,
 95 |         class_val: "shadow-1 my-card",
 96 |         filters_list: [
 97 |           {
 98 |             "label": "Discount",
 99 |             "items": [
100 |               {
101 |                 "Product": false,
102 |                 "count": 51,
103 |                 "label": "50% or more",
104 |                 "model": "Product"
105 |               },
106 |               {
107 |                 "Product": false,
108 |                 "count": 3,
109 |                 "label": "40% or more",
110 |                 "model": "Product"
111 |               },
112 |               {
113 |                 "Product": false,
114 |                 "count": 41,
115 |                 "label": "30% or more",
116 |                 "model": "Product"
117 |               },
118 |               {
119 |                 "Product": false,
120 |                 "count": 16,
121 |                 "label": "20% or more",
122 |                 "model": "Product"
123 |               },
124 |               {
125 |                 "Product": false,
126 |                 "count": 16,
127 |                 "label": "10% or more",
128 |                 "model": "Product"
129 |               }
130 |             ]
131 |           },
132 | 
133 |           {
134 |             "label": "Sleeve",
135 |             "items": [
136 |               {
137 |                 "Period": false,
138 |                 "count": 51,
139 |                 "label": "3/4 Sleeve",
140 |                 "model": "Period"
141 |               },
142 |               {
143 |                 "Period": false,
144 |                 "count": 3,
145 |                 "label": "Full Sleeve",
146 |                 "model": "Period"
147 |               },
148 |               {
149 |                 "Period": false,
150 |                 "count": 23,
151 |                 "label": "Half Sleeve",
152 |                 "model": "Period"
153 |               },
154 |               {
155 |                 "Period": false,
156 |                 "count": 65,
157 |                 "label": "Short Sleeve",
158 |                 "model": "Period"
159 |               }
160 |             ]
161 |           },
162 |           {
163 |             "label": "Size",
164 |             "items": [
165 |               {
166 |                 "AssetType": false,
167 |                 "count": 51,
168 |                 "label": "XXS",
169 |                 "model": "AssetType"
170 |               },
171 |               {
172 |                 "AssetType": false,
173 |                 "count": 3,
174 |                 "label": "XS",
175 |                 "model": "AssetType"
176 |               },
177 |               {
178 |                 "AssetType": false,
179 |                 "count": 23,
180 |                 "label": "S",
181 |                 "model": "AssetType"
182 |               },
183 |               {
184 |                 "AssetType": false,
185 |                 "count": 65,
186 |                 "label": "M",
187 |                 "model": "AssetType"
188 |               },
189 |               {
190 |                 "AssetType": false,
191 |                 "count": 35,
192 |                 "label": "L",
193 |                 "model": "AssetType"
194 |               },
195 |               {
196 |                 "AssetType": false,
197 |                 "count": 23,
198 |                 "label": "XL",
199 |                 "model": "AssetType"
200 |               },
201 |               {
202 |                 "AssetType": false,
203 |                 "count": 12,
204 |                 "label": "XXL",
205 |                 "model": "AssetType"
206 |               }
207 |             ]
208 |           }
209 |         ]
210 |       }
211 |     },
212 |     computed: {
213 |       win_width() {
214 |         return this.$q.screen.width - 59;
215 |       },
216 |       win_height() {
217 |         return this.$q.screen.height - 0;
218 |       }
219 |     }
220 |   }
221 | </script>
222 | 
223 | <style scoped>
224 |   .my-card {
225 |     width: 100%;
226 |     max-width: 300px;
227 |   }
228 | </style>
229 | 


--------------------------------------------------------------------------------
/src/pages/change_request.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <q-page class="q-pa-sm">
  3 |     <q-table
  4 |       title="Change Request"
  5 |       :data="data"
  6 |       :hide-header="mode === 'grid'"
  7 |       :columns="columns"
  8 |       row-key="name"
  9 |       :grid="mode=='grid'"
 10 |       :filter="filter"
 11 |       :pagination.sync="pagination"
 12 |     >
 13 |       <template v-slot:top-right="props">
 14 |         <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
 15 |           <template v-slot:append>
 16 |             <q-icon name="search"/>
 17 |           </template>
 18 |         </q-input>
 19 | 
 20 |         <q-btn
 21 |           flat
 22 |           round
 23 |           dense
 24 |           :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
 25 |           @click="props.toggleFullscreen"
 26 |           v-if="mode === 'list'"
 27 |         >
 28 |           <q-tooltip
 29 |             :disable="$q.platform.is.mobile"
 30 |             v-close-popup
 31 |           >{{props.inFullscreen ? 'Exit Fullscreen' : 'Toggle Fullscreen'}}
 32 |           </q-tooltip>
 33 |         </q-btn>
 34 | 
 35 |         <q-btn
 36 |           flat
 37 |           round
 38 |           dense
 39 |           :icon="mode === 'grid' ? 'list' : 'grid_on'"
 40 |           @click="mode = mode === 'grid' ? 'list' : 'grid'; separator = mode === 'grid' ? 'none' : 'horizontal'"
 41 |           v-if="!props.inFullscreen"
 42 |         >
 43 |           <q-tooltip
 44 |             :disable="$q.platform.is.mobile"
 45 |             v-close-popup
 46 |           >{{mode==='grid' ? 'List' : 'Grid'}}
 47 |           </q-tooltip>
 48 |         </q-btn>
 49 | 
 50 |         <q-btn
 51 |           color="primary"
 52 |           icon-right="archive"
 53 |           label="Export to csv"
 54 |           no-caps
 55 |           @click="exportTable"
 56 |         />
 57 | 
 58 |       </template>
 59 |       <template v-slot:body-cell-status="props">
 60 |         <q-td :props="props">
 61 |           <q-chip :color="(props.row.status == 'Approved')?'green':(props.row.status == 'Rejected'?'red':'grey')"
 62 |                   text-color="white" dense class="text-weight-bolder" square style="width: 85px">{{props.row.status}}
 63 |           </q-chip>
 64 |         </q-td>
 65 |       </template>
 66 |     </q-table>
 67 |   </q-page>
 68 | </template>
 69 | 
 70 | <script>
 71 | 
 72 |     import {exportFile} from 'quasar'
 73 | 
 74 |     function wrapCsvValue(val, formatFn) {
 75 |         let formatted = formatFn !== void 0
 76 |             ? formatFn(val)
 77 |             : val
 78 | 
 79 |         formatted = formatted === void 0 || formatted === null
 80 |             ? ''
 81 |             : String(formatted)
 82 | 
 83 |         formatted = formatted.split('"').join('""')
 84 | 
 85 |         return `"${formatted}"`
 86 |     }
 87 | 
 88 |     export default {
 89 |         data() {
 90 |             return {
 91 |                 filter: '',
 92 |                 mode: 'list',
 93 |                 columns: [
 94 |                     {name: 'change_id', align: 'left', label: 'Change ID', field: 'change_id', sortable: true},
 95 |                     {
 96 |                         name: 'desc',
 97 |                         required: true,
 98 |                         label: 'Customer Name',
 99 |                         align: 'left',
100 |                         field: row => row.name,
101 |                         sortable: true
102 |                     },
103 |                     {name: 'change_type', align: 'left', label: 'Change Type', field: 'change_type', sortable: true},
104 |                     {name: 'status', align: 'left', label: 'Status', field: 'status', sortable: true},
105 |                     {
106 |                         name: 'creation_date',
107 |                         align: 'left',
108 |                         label: 'Creation Date',
109 |                         field: 'creation_date',
110 |                         sortable: true
111 |                     }
112 |                 ],
113 |                 data: [
114 |                     {
115 |                         change_id: "C001",
116 |                         name: 'Dr. Jada Conolly',
117 |                         change_type: 'Name Change',
118 |                         status: 'Submitted',
119 |                         creation_date: '12-09-2019'
120 |                     },
121 |                     {
122 |                         change_id: "C002",
123 |                         name: 'Dr. Kiley Ibbotson',
124 |                         change_type: 'Address Change',
125 |                         status: 'Approved',
126 |                         creation_date: '09-02-2019'
127 |                     },
128 |                     {
129 |                         change_id: "C003",
130 |                         name: 'Dr. Leslie Tecklenburg',
131 |                         change_type: 'New Profile',
132 |                         status: 'Approved',
133 |                         creation_date: '03-25-2019'
134 |                     },
135 |                     {
136 |                         change_id: "C004",
137 |                         name: 'Dr. Lia Whitledge',
138 |                         change_type: 'Name Change',
139 |                         status: 'Submitted',
140 |                         creation_date: '03-18-2019'
141 |                     },
142 |                     {
143 |                         change_id: "C005",
144 |                         name: 'Dr. Sam Wileman',
145 |                         change_type: 'Name Change',
146 |                         status: 'Rejected',
147 |                         creation_date: '04-09-2019'
148 |                     },
149 |                     {
150 |                         change_id: "C006",
151 |                         name: 'Dr. Edgar Colmer',
152 |                         change_type: 'Address Change',
153 |                         status: 'Approved',
154 |                         creation_date: '09-03-2019'
155 |                     },
156 |                     {
157 |                         change_id: "C007",
158 |                         name: 'Dr. Kaiden Rozelle',
159 |                         change_type: 'Address Change',
160 |                         status: 'Submitted',
161 |                         creation_date: '01-12-2019'
162 |                     },
163 |                     {
164 |                         change_id: "C008",
165 |                         name: 'Dr. Leslie Stopher',
166 |                         change_type: 'New Profile',
167 |                         status: 'Approved',
168 |                         creation_date: '04-15-2019'
169 |                     },
170 |                     {
171 |                         change_id: "C009",
172 |                         name: 'Dr. Miguel Subasic',
173 |                         change_type: 'New Profile',
174 |                         status: 'Approved',
175 |                         creation_date: '11-09-2019'
176 |                     },
177 |                     {
178 |                         change_id: "C010",
179 |                         name: 'Dr. Reese Vandygriff',
180 |                         change_type: 'New Profile',
181 |                         status: 'Rejected',
182 |                         creation_date: '01-01-2019'
183 |                     },
184 |                     {
185 |                         change_id: "C011",
186 |                         name: 'Dr. Griffin Troglen',
187 |                         change_type: 'New Profile',
188 |                         status: 'Approved',
189 |                         creation_date: '04-12-2019'
190 |                     },
191 |                     {
192 |                         change_id: "C012",
193 |                         name: 'Dr. Zachary Wehrley',
194 |                         change_type: 'Address Change',
195 |                         status: 'Submitted',
196 |                         creation_date: '10-09-2019'
197 |                     },
198 |                     {
199 |                         change_id: "C013",
200 |                         name: 'Dr. Kyle Wahlert',
201 |                         change_type: 'Address Change',
202 |                         status: 'Approved',
203 |                         creation_date: '01-02-2019'
204 |                     },
205 |                     {
206 |                         change_id: "C014",
207 |                         name: 'Dr. John Subasic',
208 |                         change_type: 'Address Change',
209 |                         status: 'Approved',
210 |                         creation_date: '07-06-2019'
211 |                     }
212 |                 ],
213 |                 pagination: {
214 |                     rowsPerPage: 10
215 |                 }
216 |             }
217 |         },
218 |         methods: {
219 |             exportTable() {
220 |                 // naive encoding to csv format
221 |                 const content = [this.columns.map(col => wrapCsvValue(col.label))].concat(
222 |                     this.data.map(row => this.columns.map(col => wrapCsvValue(
223 |                         typeof col.field === 'function'
224 |                             ? col.field(row)
225 |                             : row[col.field === void 0 ? col.name : col.field],
226 |                         col.format
227 |                     )).join(','))
228 |                 ).join('\r\n')
229 | 
230 |                 const status = exportFile(
231 |                     'change-request.csv',
232 |                     content,
233 |                     'text/csv'
234 |                 )
235 | 
236 |                 if (status !== true) {
237 |                     this.$q.notify({
238 |                         message: 'Browser denied file download...',
239 |                         color: 'negative',
240 |                         icon: 'warning'
241 |                     })
242 |                 }
243 |             }
244 |         }
245 |     }
246 | </script>
247 | <style>
248 |   .q-chip__content {
249 |     display: block;
250 |     text-align: center;
251 |   }
252 | </style>
253 | 


--------------------------------------------------------------------------------
/src/pages/customer_management.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <q-page class="q-pa-sm">
  3 |     <q-table
  4 |       title="Customer Management"
  5 |       :data="data"
  6 |       :hide-header="mode === 'grid'"
  7 |       :columns="columns"
  8 |       row-key="name"
  9 |       :grid="mode=='grid'"
 10 |       :filter="filter"
 11 |       :pagination.sync="pagination"
 12 |     >
 13 |       <template v-slot:top-right="props">
 14 |         <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
 15 |           <template v-slot:append>
 16 |             <q-icon name="search"/>
 17 |           </template>
 18 |         </q-input>
 19 | 
 20 |         <q-btn
 21 |           flat
 22 |           round
 23 |           dense
 24 |           :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
 25 |           @click="props.toggleFullscreen"
 26 |           v-if="mode === 'list'"
 27 |         >
 28 |           <q-tooltip
 29 |             :disable="$q.platform.is.mobile"
 30 |             v-close-popup
 31 |           >{{props.inFullscreen ? 'Exit Fullscreen' : 'Toggle Fullscreen'}}
 32 |           </q-tooltip>
 33 |         </q-btn>
 34 | 
 35 |         <q-btn
 36 |           flat
 37 |           round
 38 |           dense
 39 |           :icon="mode === 'grid' ? 'list' : 'grid_on'"
 40 |           @click="mode = mode === 'grid' ? 'list' : 'grid'; separator = mode === 'grid' ? 'none' : 'horizontal'"
 41 |           v-if="!props.inFullscreen"
 42 |         >
 43 |           <q-tooltip
 44 |             :disable="$q.platform.is.mobile"
 45 |             v-close-popup
 46 |           >{{mode==='grid' ? 'List' : 'Grid'}}
 47 |           </q-tooltip>
 48 |         </q-btn>
 49 | 
 50 |         <q-btn
 51 |           color="primary"
 52 |           icon-right="archive"
 53 |           label="Export to csv"
 54 |           no-caps
 55 |           @click="exportTable"
 56 |         />
 57 | 
 58 |       </template>
 59 |     </q-table>
 60 |   </q-page>
 61 | </template>
 62 | 
 63 | <script>
 64 | 
 65 |     import {exportFile} from 'quasar'
 66 | 
 67 |     function wrapCsvValue(val, formatFn) {
 68 |         let formatted = formatFn !== void 0
 69 |             ? formatFn(val)
 70 |             : val
 71 | 
 72 |         formatted = formatted === void 0 || formatted === null
 73 |             ? ''
 74 |             : String(formatted)
 75 | 
 76 |         formatted = formatted.split('"').join('""')
 77 | 
 78 |         return `"${formatted}"`
 79 |     }
 80 | 
 81 |     export default {
 82 |         data() {
 83 |             return {
 84 |                 filter: '',
 85 |                 mode: 'list',
 86 |                 columns: [
 87 |                     {
 88 |                         name: 'desc',
 89 |                         required: true,
 90 |                         label: 'Customer Name',
 91 |                         align: 'left',
 92 |                         field: row => row.name,
 93 |                         sortable: true
 94 |                     },
 95 |                     {name: 'city', align: 'left', label: 'City', field: 'city', sortable: true},
 96 |                     {name: 'state', align: 'left', label: 'State', field: 'state', sortable: true},
 97 |                     {name: 'last_call', align: 'left', label: 'Last Call', field: 'last_call', sortable: true}
 98 |                 ],
 99 |                 data: [
100 |                     {
101 |                         name: 'Dr. Jada Conolly',
102 |                         city: 'GILBERT',
103 |                         state: 'AZ',
104 |                         last_call: '12-09-2019'
105 |                     },
106 |                     {
107 |                         name: 'Dr. Kiley Ibbotson',
108 |                         city: 'LA MESA',
109 |                         state: 'CA',
110 |                         last_call: '09-02-2019'
111 |                     },
112 |                     {
113 |                         name: 'Dr. Leslie Tecklenburg',
114 |                         city: 'SAN DIEGO',
115 |                         state: 'CA',
116 |                         last_call: '03-25-2019'
117 |                     },
118 |                     {
119 |                         name: 'Dr. Lia Whitledge',
120 |                         city: 'PHOENIX',
121 |                         state: 'AZ',
122 |                         last_call: '03-18-2019'
123 |                     },
124 |                     {
125 |                         name: 'Dr. Sam Wileman',
126 |                         city: 'MESA',
127 |                         state: 'AZ',
128 |                         last_call: '04-09-2019'
129 |                     },
130 |                     {
131 |                         name: 'Dr. Edgar Colmer',
132 |                         city: 'PHOENIX',
133 |                         state: 'AZ',
134 |                         last_call: '09-03-2019'
135 |                     },
136 |                     {
137 |                         name: 'Dr. Kaiden Rozelle',
138 |                         city: 'LAKEWOOD',
139 |                         state: 'CA',
140 |                         last_call: '01-12-2019'
141 |                     },
142 |                     {
143 |                         name: 'Dr. Leslie Stopher',
144 |                         city: 'YUMA',
145 |                         state: 'AZ',
146 |                         last_call: '04-15-2019'
147 |                     },
148 |                     {
149 |                         name: 'Dr. Miguel Subasic',
150 |                         city: 'TEMPE',
151 |                         state: 'AZ',
152 |                         last_call: '11-09-2019'
153 |                     },
154 |                     {
155 |                         name: 'Dr. Reese Vandygriff',
156 |                         city: 'LAKEWOOD',
157 |                         state: 'CA',
158 |                         last_call: '01-01-2019'
159 |                     },
160 |                     {
161 |                         name: 'Dr. Griffin Troglen',
162 |                         city: 'YUMA',
163 |                         state: 'AZ',
164 |                         last_call: '04-12-2019'
165 |                     },
166 |                     {
167 |                         name: 'Dr. Zachary Wehrley',
168 |                         city: 'TEMPE',
169 |                         state: 'AZ',
170 |                         last_call: '10-09-2019'
171 |                     },
172 |                     {
173 |                         name: 'Dr. Kyle Wahlert',
174 |                         city: 'LAKEWOOD',
175 |                         state: 'CA',
176 |                         last_call: '01-02-2019'
177 |                     }
178 |                 ],
179 |                 pagination: {
180 |                     rowsPerPage: 10
181 |                 }
182 |             }
183 |         },
184 |         methods: {
185 |             exportTable() {
186 |                 // naive encoding to csv format
187 |                 const content = [this.columns.map(col => wrapCsvValue(col.label))].concat(
188 |                     this.data.map(row => this.columns.map(col => wrapCsvValue(
189 |                         typeof col.field === 'function'
190 |                             ? col.field(row)
191 |                             : row[col.field === void 0 ? col.name : col.field],
192 |                         col.format
193 |                     )).join(','))
194 |                 ).join('\r\n')
195 | 
196 |                 const status = exportFile(
197 |                     'customer-management.csv',
198 |                     content,
199 |                     'text/csv'
200 |                 )
201 | 
202 |                 if (status !== true) {
203 |                     this.$q.notify({
204 |                         message: 'Browser denied file download...',
205 |                         color: 'negative',
206 |                         icon: 'warning'
207 |                     })
208 |                 }
209 |             }
210 |         }
211 |     }
212 | </script>
213 | 


--------------------------------------------------------------------------------
/src/pages/dashboard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <q-page>
  3 |     <div class="row q-col-gutter-sm q-ma-xs q-mr-sm">
  4 |       <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  5 |         <q-card>
  6 |           <q-card-section class="bg-blue-8 text-white">
  7 |             <div class="row">
  8 |               <div class="col-10">
  9 |                 <div class="text-h6">Sales</div>
 10 |                 <div class="text-h5">160</div>
 11 |               </div>
 12 |               <div class="col-2">
 13 |                 <q-icon size="62px" name="trending_up"/>
 14 |               </div>
 15 |             </div>
 16 |           </q-card-section>
 17 |         </q-card>
 18 |       </div>
 19 |       <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
 20 |         <q-card>
 21 |           <q-card-section class="bg-green-8 text-white">
 22 |             <div class="row">
 23 |               <div class="col-10">
 24 |                 <div class="text-h6">Goals</div>
 25 |                 <div class="text-h5">140</div>
 26 |               </div>
 27 |               <div class="col-2">
 28 |                 <q-icon size="62px" name="far fa-dot-circle"/>
 29 |               </div>
 30 |             </div>
 31 |           </q-card-section>
 32 |         </q-card>
 33 |       </div>
 34 |       <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
 35 |         <q-card>
 36 |           <q-card-section class="bg-orange-9 text-white">
 37 |             <div class="row">
 38 |               <div class="col-10">
 39 |                 <div class="text-h6">% Change</div>
 40 |                 <div class="text-h5">
 41 |                   <q-icon name="arrow_downward"/>
 42 |                   2%
 43 |                 </div>
 44 |               </div>
 45 |               <div class="col-2">
 46 |                 <q-icon size="62px" name="compare_arrows"/>
 47 |               </div>
 48 |             </div>
 49 |           </q-card-section>
 50 |         </q-card>
 51 |       </div>
 52 |     </div>
 53 |     <div>
 54 |       <div class="row q-col-gutter-sm q-ma-xs q-mr-sm">
 55 |         <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
 56 |           <q-card flat bordered class="">
 57 |             <q-card-section class="row">
 58 |               <div class="text-h6 col-12">Sales vs Goals
 59 |                 <q-btn flat dense icon="fas fa-download" class="float-right" @click="SaveImage('bar')" color="grey-8">
 60 |                   <q-tooltip>Download</q-tooltip>
 61 |                 </q-btn>
 62 |               </div>
 63 |             </q-card-section>
 64 | 
 65 |             <q-separator inset></q-separator>
 66 | 
 67 |             <q-card-section>
 68 |               <IEcharts :option="barChartOption" ref="bar" :resizable="true" style="height:220px"/>
 69 |             </q-card-section>
 70 |           </q-card>
 71 |         </div>
 72 |         <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
 73 | 
 74 |           <q-card flat bordered class="">
 75 |             <q-card-section class="row">
 76 |               <div class="text-h6 col-12">Market Share & Growth
 77 |                 <q-btn flat dense icon="fas fa-download" class="float-right" @click="SaveImage('line')" color="grey-8">
 78 |                   <q-tooltip>Download</q-tooltip>
 79 |                 </q-btn>
 80 |               </div>
 81 |             </q-card-section>
 82 | 
 83 |             <q-separator inset></q-separator>
 84 | 
 85 |             <q-card-section>
 86 |               <IEcharts ref="line" :option="lineChartOption" :resizable="true" style="height:220px"/>
 87 |             </q-card-section>
 88 |           </q-card>
 89 |         </div>
 90 |         <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
 91 | 
 92 |           <q-card flat bordered class="">
 93 |             <q-card-section class="row">
 94 |               <div class="text-h6 col-12">Sales vs Quota
 95 |                 <q-btn flat dense icon="fas fa-download" class="float-right" @click="SaveImage('gauge')" color="grey-8">
 96 |                   <q-tooltip>Download</q-tooltip>
 97 |                 </q-btn>
 98 |               </div>
 99 | 
100 |             </q-card-section>
101 | 
102 |             <q-separator inset></q-separator>
103 | 
104 |             <q-card-section>
105 |               <IEcharts :option="gaugeOptions" ref="gauge" :resizable="true" style="height:220px"/>
106 |             </q-card-section>
107 |           </q-card>
108 |         </div>
109 |       </div>
110 |     </div>
111 |     <div class="row q-col-gutter-sm q-ma-xs q-mr-sm">
112 |       <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
113 |         <q-card flat bordered class="">
114 |           <q-card-section>
115 |             <div class="text-h6">Key Competitors
116 |               <q-btn flat dense icon="fas fa-download" class="float-right" @click="SaveImage('pie')" color="grey-8">
117 |                 <q-tooltip>Download</q-tooltip>
118 |               </q-btn>
119 |             </div>
120 |           </q-card-section>
121 | 
122 |           <q-separator inset></q-separator>
123 | 
124 |           <q-card-section>
125 |             <IEcharts ref="pie" :option="pieOptions" :resizable="true" style="height:270px"/>
126 |           </q-card-section>
127 |         </q-card>
128 |       </div>
129 |       <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
130 |         <q-card flat bordered class="">
131 |           <q-card-section>
132 |             <div class="text-h6">Sales Pipeline by Sales Rep
133 |               <q-btn flat dense icon="fas fa-download" class="float-right" @click="SaveImage('stack_bar')"
134 |                      color="grey-8">
135 |                 <q-tooltip>Download</q-tooltip>
136 |               </q-btn>
137 |             </div>
138 |           </q-card-section>
139 | 
140 |           <q-separator inset></q-separator>
141 | 
142 |           <q-card-section>
143 |             <IEcharts ref="stack_bar" :option="stackedBarOptions" :resizable="true" style="height:270px"/>
144 |           </q-card-section>
145 |         </q-card>
146 |       </div>
147 |     </div>
148 |     <div class="row q-col-gutter-sm q-ma-xs">
149 |       <div class="col-12">
150 |         <q-card flat bordered class="bg-white">
151 |           <q-table
152 |             title="All Activities"
153 |             :data="data"
154 |             :hide-header="mode === 'grid'"
155 |             :columns="columns"
156 |             row-key="name"
157 |             :grid="mode=='grid'"
158 |             :filter="filter"
159 |             :pagination.sync="pagination"
160 |           >
161 |             <template v-slot:top-right="props">
162 |               <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
163 |                 <template v-slot:append>
164 |                   <q-icon name="search"/>
165 |                 </template>
166 |               </q-input>
167 | 
168 |               <q-btn
169 |                 flat
170 |                 round
171 |                 dense
172 |                 :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
173 |                 @click="props.toggleFullscreen"
174 |                 v-if="mode === 'list'"
175 |               >
176 |                 <q-tooltip
177 |                   :disable="$q.platform.is.mobile"
178 |                   v-close-popup
179 |                 >{{props.inFullscreen ? 'Exit Fullscreen' : 'Toggle Fullscreen'}}
180 |                 </q-tooltip>
181 |               </q-btn>
182 | 
183 |               <q-btn
184 |                 flat
185 |                 round
186 |                 dense
187 |                 :icon="mode === 'grid' ? 'list' : 'grid_on'"
188 |                 @click="mode = mode === 'grid' ? 'list' : 'grid'; separator = mode === 'grid' ? 'none' : 'horizontal'"
189 |                 v-if="!props.inFullscreen"
190 |               >
191 |                 <q-tooltip
192 |                   :disable="$q.platform.is.mobile"
193 |                   v-close-popup
194 |                 >{{mode==='grid' ? 'List' : 'Grid'}}
195 |                 </q-tooltip>
196 |               </q-btn>
197 | 
198 |               <q-btn
199 |                 color="primary"
200 |                 icon-right="archive"
201 |                 label="Export to csv"
202 |                 no-caps
203 |                 @click="exportTable"
204 |               />
205 |             </template>
206 |           </q-table>
207 |         </q-card>
208 |       </div>
209 |     </div>
210 |   </q-page>
211 | </template>
212 | 
213 | <script>
214 |     import Vue from 'vue';
215 |     import IEcharts from 'vue-echarts-v3/src/full.js';
216 |     import {exportFile} from 'quasar';
217 | 
218 |     Vue.component('IEcharts', IEcharts);
219 | 
220 |     function wrapCsvValue(val, formatFn) {
221 |         let formatted = formatFn !== void 0
222 |             ? formatFn(val)
223 |             : val
224 | 
225 |         formatted = formatted === void 0 || formatted === null
226 |             ? ''
227 |             : String(formatted)
228 | 
229 |         formatted = formatted.split('"').join('""')
230 | 
231 |         return `"${formatted}"`
232 |     }
233 | 
234 |     export default {
235 |         data() {
236 |             return {
237 |                 barChartOption: {
238 |                     grid: {
239 |                         bottom: '20%',
240 |                         left: '15%',
241 |                         top: '3%'
242 |                     },
243 |                     legend: {
244 |                         bottom: 0
245 |                     },
246 |                     tooltip: {},
247 |                     dataset: {
248 |                         dimensions: ['time_period', 'sale', 'goal'],
249 |                         source: [
250 |                             {time_period: 'Jan 2019', sale: 50, goal: 70},
251 |                             {time_period: 'Feb 2019', sale: 80, goal: 75},
252 |                             {time_period: 'Mar 2019', sale: 86, goal: 80},
253 |                             {time_period: 'Apr 2019', sale: 72, goal: 85}
254 |                         ]
255 |                     },
256 |                     xAxis: {
257 |                         type: 'category',
258 |                         // axisLabel: {
259 |                         //     rotate: 45
260 |                         // }
261 |                     },
262 |                     yAxis: {
263 |                         // name: 'Goal',
264 |                         // nameLocation: 'center',
265 |                         // nameGap: 30,
266 |                         // nameTextStyle:{
267 |                         //     fontWeight: 'bold'
268 |                         // }
269 |                     },
270 |                     series: [
271 |                         {type: 'bar', name: 'Sales'},
272 |                         {type: 'bar', name: 'Goals'}
273 |                     ]
274 |                 },
275 |                 lineChartOption: {
276 |                     grid: {
277 |                         bottom: '20%',
278 |                         left: '15%',
279 |                         top: '3%'
280 |                     },
281 |                     legend: {
282 |                         bottom: 0
283 |                     },
284 |                     tooltip: {
285 |                         // formatter:
286 |                         //     function (param) {
287 |                         //     console.log(param)
288 |                         //     // return param.seriesName + '<br />' + param.name + ': ';
289 |                         // }
290 |                     },
291 |                     dataset: {
292 |                         dimensions: ['product_name', 'share', 'growth'],
293 |                         source: [
294 |                             {product_name: 'Product A', share: 20, growth: 25},
295 |                             {product_name: 'Product B', share: 22, growth: 18},
296 |                             {product_name: 'Product C', share: 40, growth: 45}
297 |                         ]
298 |                     },
299 |                     xAxis: {
300 |                         type: 'category',
301 |                         // axisLabel: {
302 |                         //     rotate: 45
303 |                         // }
304 |                     },
305 |                     yAxis: {
306 |                         axisLabel: {
307 |                             formatter: function (value, index) {
308 |                                 return value + ' %'
309 |                             }
310 |                         }
311 |                     },
312 |                     series: [
313 |                         {type: 'line', name: 'Share'},
314 |                         {type: 'line', name: 'Growth'}
315 |                     ]
316 |                 },
317 |                 pieOptions: {
318 |                     tooltip: {
319 |                         show: true
320 |                     },
321 |                     legend: {
322 |                         orient: 'horizontal',
323 |                         bottom: 0,
324 |                         width: 300
325 |                     },
326 |                     series: [
327 |                         {
328 |                             name: 'Competitor',
329 |                             type: 'pie',
330 |                             radius: ['40%', '70%'],
331 |                             avoidLabelOverlap: false,
332 |                             label: {
333 |                                 normal: {
334 |                                     show: true,
335 |                                     position: 'inner',
336 |                                     formatter: function (param, index) {
337 |                                         return param.value + ' %'
338 |                                     }
339 |                                 },
340 |                                 emphasis: {
341 |                                     show: true,
342 |                                     textStyle: {
343 |                                         fontSize: '20',
344 |                                         fontWeight: 'bold'
345 |                                     }
346 |                                 }
347 |                             },
348 |                             labelLine: {
349 |                                 normal: {
350 |                                     show: false
351 |                                 }
352 |                             },
353 |                             selectedMode: 'single',
354 |                             data: [
355 |                                 {value: 40, name: 'Product 1', selected: true},
356 |                                 {value: 20, name: 'Competitor 1', selected: false},
357 |                                 {value: 15, name: 'Competitor 2', selected: false},
358 |                                 {value: 25, name: 'Competitor 3', selected: false},
359 |                             ]
360 |                         }
361 |                     ]
362 |                 },
363 |                 gaugeOptions: {
364 |                     tooltip: {
365 |                         formatter: '{a} <br/>{b} : {c}%'
366 |                     },
367 |                     series: [
368 |                         {
369 |                             type: 'gauge',
370 |                             detail: {formatter: '{value}%'},
371 |                             data: [{value: 30}],
372 |                             min: 0,
373 |                             radius: '100%',
374 |                             axisLine: {
375 |                                 show: true,
376 |                                 lineStyle: {
377 |                                     color: [[0.35, '#293c55'], [0.65, '#61a0a8'], [1, '#c23731']],
378 |                                     width: 20
379 |                                 }
380 |                             },
381 | 
382 |                         }
383 |                     ]
384 |                 },
385 |                 stackedBarOptions: {
386 |                     tooltip: {
387 |                         trigger: 'axis',
388 |                         axisPointer:
389 |                             {
390 |                                 type: 'shadow'
391 |                             },
392 |                         backgroundColor: 'rgba(50,50,50,0.9)',
393 | 
394 |                     },
395 |                     legend: {
396 |                         bottom: 0
397 |                     },
398 |                     color: ['#3395dd', '#ed892d', '#34393b'],
399 |                     // legend: {
400 |                     //     y: "bottom",
401 |                     //     data: [{name: 'Territory Sales', icon: 'circle'}, {
402 |                     //         name: 'Remaining Nation Sales',
403 |                     //         icon: 'circle'
404 |                     //     }]
405 |                     // },
406 |                     grid:
407 |                         {
408 |                             bottom: '10%',
409 |                             left: '15%',
410 |                             top: '9%'
411 |                         },
412 |                     calculable: true,
413 |                     xAxis:
414 |                         {
415 |                             type: 'value',
416 |                             position:
417 |                                 'top',
418 |                             axisLine:
419 |                                 {
420 |                                     show: false
421 |                                 },
422 |                             axisLabel: {
423 |                                 formatter: function (value, index) {
424 |                                     return '$' + value;
425 |                                 }
426 |                             }
427 |                         },
428 |                     yAxis: [
429 |                         {
430 |                             type: 'category',
431 |                             data: ['Alex Morrow', 'Joanna Carter', 'Jimmy Joanna', 'Mack Hales'],
432 |                             axisLabel: {
433 |                                 fontSize: 12
434 |                             }
435 |                         }
436 |                     ],
437 |                     series:
438 |                         [{
439 |                             name: 'Qualification',
440 |                             type: 'bar',
441 |                             stack: 'A',
442 |                             data: [300, 350, 400, 500]
443 | 
444 |                         }, {
445 |                             name: 'Discovery',
446 |                             type: 'bar',
447 |                             stack: 'A',
448 |                             data: [100, 180, 250, 300]
449 | 
450 |                         }, {
451 |                             name: 'Quote',
452 |                             type: 'bar',
453 |                             stack: 'A',
454 |                             data: [100, 120, 200, 220]
455 | 
456 |                         }]
457 |                 },
458 |                 filter: '',
459 |                 mode: 'list',
460 |                 columns: [
461 |                     {name: 'activity_id', align: 'left', label: 'Activity ID', field: 'activity_id', sortable: true},
462 |                     {
463 |                         name: 'desc',
464 |                         required: true,
465 |                         label: 'Activity Name',
466 |                         align: 'left',
467 |                         field: row => row.name,
468 |                         sortable: true
469 |                     },
470 |                     {name: 'regarding', align: 'left', label: 'Regarding', field: 'regarding', sortable: true},
471 |                     {name: 'owner', align: 'left', label: 'Owner', field: 'owner', sortable: true},
472 |                     {
473 |                         name: 'creation_date',
474 |                         align: 'left',
475 |                         label: 'Creation Date',
476 |                         field: 'creation_date',
477 |                         sortable: true
478 |                     }
479 |                 ],
480 |                 data: [
481 |                     {
482 |                         activity_id: "C001",
483 |                         name: 'Advanced communications',
484 |                         regarding: 'Presentation',
485 |                         owner: 'John',
486 |                         creation_date: '12-09-2019'
487 |                     },
488 |                     {
489 |                         activity_id: "C002",
490 |                         name: 'New drug discussion',
491 |                         regarding: 'Meeting',
492 |                         owner: 'John',
493 |                         creation_date: '09-02-2019'
494 |                     },
495 |                     {
496 |                         activity_id: "C003",
497 |                         name: 'Universal services discussion',
498 |                         regarding: 'Meeting',
499 |                         owner: 'John',
500 |                         creation_date: '03-25-2019'
501 |                     },
502 |                     {
503 |                         activity_id: "C004",
504 |                         name: 'Add on business',
505 |                         regarding: 'Business',
506 |                         owner: 'John',
507 |                         creation_date: '03-18-2019'
508 |                     },
509 |                     {
510 |                         activity_id: "C005",
511 |                         name: 'Promotional Activity',
512 |                         regarding: 'Personal',
513 |                         owner: 'John',
514 |                         creation_date: '04-09-2019'
515 |                     },
516 |                 ],
517 |                 pagination: {
518 |                     rowsPerPage: 10
519 |                 }
520 |             }
521 |         },
522 |         methods: {
523 |             SaveImage(type) {
524 |                 const linkSource = this.$refs[type].getDataURL();
525 |                 const downloadLink = document.createElement('a');
526 |                 document.body.appendChild(downloadLink);
527 |                 downloadLink.href = linkSource;
528 |                 downloadLink.target = '_self';
529 |                 downloadLink.download = type + '.png';
530 |                 downloadLink.click();
531 |             },
532 |             exportTable() {
533 |                 // naive encoding to csv format
534 |                 const content = [this.columns.map(col => wrapCsvValue(col.label))].concat(
535 |                     this.data.map(row => this.columns.map(col => wrapCsvValue(
536 |                         typeof col.field === 'function'
537 |                             ? col.field(row)
538 |                             : row[col.field === void 0 ? col.name : col.field],
539 |                         col.format
540 |                     )).join(','))
541 |                 ).join('\r\n')
542 | 
543 |                 const status = exportFile(
544 |                     'activity.csv',
545 |                     content,
546 |                     'text/csv'
547 |                 )
548 | 
549 |                 if (status !== true) {
550 |                     this.$q.notify({
551 |                         message: 'Browser denied file download...',
552 |                         color: 'negative',
553 |                         icon: 'warning'
554 |                     })
555 |                 }
556 |             }
557 |         }
558 |     }
559 | </script>
560 | 
561 | <style scoped>
562 | 
563 | </style>
564 | 


--------------------------------------------------------------------------------
/src/pages/details.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="row bg-white q-mt-sm">
  4 |       <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
  5 |         <div class="q-pa-md">
  6 | 
  7 |           <q-carousel
  8 |             swipeable
  9 |             animated
 10 |             v-model="slide"
 11 |             thumbnails
 12 |             infinite
 13 |           >
 14 |             <q-carousel-slide :name="1" img-src="https://cdn.quasar.dev/img/mountains.jpg"/>
 15 |             <q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg"/>
 16 |             <q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg"/>
 17 |             <q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg"/>
 18 |           </q-carousel>
 19 | 
 20 | 
 21 |         </div>
 22 |       </div>
 23 |       <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
 24 |         <!--<q-scroll-area :style="{'height':(win_height-200)+'px'}">-->
 25 |         <div class="row">
 26 |           <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12" :class="$q.platform.is.desktop ? '' : 'q-px-md'">
 27 |             <div class="text-subtitle1 text-grey-10 q-mt-sm q-pt-xs">Benling C200-BLK Smartwatch (Black Strap Free Size)
 28 |             </div>
 29 |             <div>
 30 |               <q-chip size="10px" class="text-weight-bold q-px-xs" square color="green-7" text-color="white"
 31 |                       icon-right="star">
 32 |                 4.4
 33 |               </q-chip>
 34 |               <span class="text-caption text-weight-bold text-grey-6">6 Ratings & 2 Reviews</span>
 35 |             </div>
 36 |             <div>
 37 |               <div class="text-caption text-green-8 text-weight-bolder q-mt-sm">Special Price</div>
 38 |               <span class="text-h6">₹3,149</span><span class="q-ml-sm text-grey-6"
 39 |                                                        style="text-decoration: line-through">₹3,699</span>
 40 |               <span class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md">20% off</span>
 41 |             </div>
 42 |             <div class="q-mt-sm text-weight-bold">
 43 |               Offers
 44 |               <ul class="q-pl-sm text-caption" style="list-style-type: none">
 45 |                 <li class="q-mt-xs"><span class="text-weight-bold">Bank Offer</span> 5% Unlimited Cashback on Axis Bank
 46 |                   Credit
 47 |                   Card <a class="text-primary text-weight-bolder">T&C</a></li>
 48 |                 <li class="q-mt-xs"><span class="text-weight-bold">Bank Offer</span> 5% Unlimited Cashback on Axis Bank
 49 |                   Credit
 50 |                   Card <a class="text-primary text-weight-bolder">T&C</a></li>
 51 |                 <li class="q-mt-xs"><span class="text-weight-bold">Bank Offer</span> OfferExtra 5% off* <a
 52 |                   class="text-primary text-weight-bolder">T&C</a></li>
 53 |               </ul>
 54 |             </div>
 55 |             <div class="q-mt-sm">
 56 |               <div class="text-subtitle1 text-green-8 text-weight-bold">In stock.</div>
 57 |               <div class="text-caption q-mt-sm text-grey-8 text-weight-bold">Delivery by: <span class="text-black">Tue, Mar 3</span>
 58 |               </div>
 59 |               <div class="text-caption text-subtitle2 text-grey-8 text-weight-bold">Fastest delivery: <span
 60 |                 class="text-black">Mon, Mar 2 by 9pm</span></div>
 61 |             </div>
 62 |             <div class="q-mt-md">
 63 |               <q-btn class="q-mt-md" color="orange-9" icon="shopping_cart" label="Add to cart"/>
 64 |               <q-btn class="q-mt-md q-ml-md" color="orange-8" icon="shopping_cart" label="Buy now"/>
 65 |             </div>
 66 |           </div>
 67 |           <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 q-mt-md q-pt-xs q-pl-lg">
 68 |             <div class="text-subtitle2">Customer rating</div>
 69 |             <div class="text-h3">4.2</div>
 70 |             <div>
 71 |               <q-rating
 72 |                 v-model="rating_point"
 73 |                 max="5"
 74 |                 size="2em"
 75 |                 color="orange"
 76 |                 icon="star_border"
 77 |                 icon-selected="star"
 78 |                 icon-half="star_half"
 79 |                 no-dimming
 80 |                 readonly
 81 |               />
 82 |             </div>
 83 |             <div class="text-subtitle2 text-grey-8">(357 reviews)</div>
 84 |             <div class="text-subtitle2 text-grey-10 q-mt-sm">93% would recommend to a friend</div>
 85 | 
 86 |             <q-list dense bordered padding class="no-border q-mt-lg q-pr-xl">
 87 |               <q-item style="padding-left: 0 !important;" v-ripple>
 88 |                 <span class="text-subtitle2 q-mr-xs">5</span>
 89 |                 <q-icon name="star" size="1.5em" color="orange"></q-icon>
 90 |                 <q-linear-progress class="q-ml-sm  q-mr-sm" style="margin-top: 5px;" size="13px" :value="0.9"/>
 91 |                 <span style="margin-top: 2px" class="text-caption text-weight-bold text-grey-8">273</span>
 92 |               </q-item>
 93 |               <q-item style="padding-left: 0 !important;" v-ripple>
 94 |                 <span class="text-subtitle2 q-mr-xs">4</span>
 95 |                 <q-icon name="star" size="1.5em" color="orange"></q-icon>
 96 |                 <q-linear-progress class="q-ml-sm  q-mr-sm" style="margin-top: 5px;" size="13px" :value="0.6"/>
 97 |                 <span style="margin-top: 2px" class="text-caption text-weight-bold text-grey-8">&nbsp;&nbsp;69</span>
 98 |               </q-item>
 99 |               <q-item style="padding-left: 0 !important;" v-ripple>
100 |                 <span class="text-subtitle2 q-mr-xs">3</span>
101 |                 <q-icon name="star" size="1.5em" color="orange"></q-icon>
102 |                 <q-linear-progress class="q-ml-sm  q-mr-sm" style="margin-top: 5px;" size="13px" :value="0.1"/>
103 |                 <span style="margin-top: 2px" class="text-caption text-weight-bold text-grey-8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6</span>
104 |               </q-item>
105 |               <q-item style="padding-left: 0 !important;" v-ripple>
106 |                 <span class="text-subtitle2 q-mr-xs">2</span>
107 |                 <q-icon name="star" size="1.5em" color="orange"></q-icon>
108 |                 <q-linear-progress class="q-ml-sm  q-mr-sm" style="margin-top: 5px;" size="13px" :value="0.1"/>
109 |                 <span style="margin-top: 2px" class="text-caption text-weight-bold text-grey-8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3</span>
110 |               </q-item>
111 |               <q-item style="padding-left: 0 !important;" v-ripple>
112 |                 <span class="text-subtitle2 q-mr-xs">1</span>
113 |                 <q-icon name="star" size="1.5em" color="orange"></q-icon>
114 |                 <q-linear-progress class="q-ml-sm  q-mr-sm" style="margin-top: 5px;" size="13px" :value="0.1"/>
115 |                 <span style="margin-top: 2px" class="text-caption text-weight-bold text-grey-8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6</span>
116 |               </q-item>
117 | 
118 |             </q-list>
119 |           </div>
120 |         </div>
121 | 
122 |         <!--</q-scroll-area>-->
123 |       </div>
124 |     </div>
125 |     <div class="row q-mt-sm">
126 |       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
127 |         <q-tabs
128 |           v-model="tab"
129 |           dense
130 |           align="left"
131 |           class="bg-primary text-white shadow-2"
132 |           :breakpoint="0"
133 |         >
134 |           <q-tab name="Specifications" label="Specifications"/>
135 |           <q-tab name="Ratings & Reviews" label="Ratings & Reviews"/>
136 |           <q-tab name="Similar products" label="Similar products"/>
137 |           <q-tab name="Bought together" label="Bought together"/>
138 |           <q-tab name="Recently Viewed" label="Recently Viewed"/>
139 |         </q-tabs>
140 |         <q-tab-panels style="border: 1px solid lightgrey" v-model="tab">
141 |           <q-tab-panel name="Specifications">
142 |             <div class="row">
143 |               <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
144 |                 <q-list bordered class="rounded-borders" style="">
145 |                   <q-item-label class="text-weight-bolder" header>General</q-item-label>
146 |                   <q-item>
147 |                     <q-item-section>
148 |                       <span class="text-caption text-grey">Dial Color</span>
149 |                       <span>Black</span>
150 |                     </q-item-section>
151 |                     <q-item-section>
152 |                       <span class="text-caption text-grey">Strap Material</span>
153 |                       <span>Silicone</span>
154 |                     </q-item-section>
155 |                   </q-item>
156 |                   <q-item>
157 |                     <q-item-section>
158 |                       <span class="text-caption text-grey">Usage</span>
159 |                       <span>Fitness & Outdoor, Health & Medical, Notifier, Safety & Security, Watchphone</span>
160 |                     </q-item-section>
161 |                   </q-item>
162 |                 </q-list>
163 |               </div>
164 |               <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
165 |                 <q-list bordered class="rounded-borders" style="">
166 |                   <q-item-label class="text-weight-bolder" header>Product Details</q-item-label>
167 |                   <q-item>
168 |                     <q-item-section>
169 |                       <span class="text-caption text-grey">Dial Color</span>
170 |                       <span>Black</span>
171 |                     </q-item-section>
172 |                     <q-item-section>
173 |                       <span class="text-caption text-grey">Strap Material</span>
174 |                       <span>Silicone</span>
175 |                     </q-item-section>
176 |                   </q-item>
177 |                 </q-list>
178 |               </div>
179 |               <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
180 |                 <q-list bordered class="rounded-borders" style="">
181 |                   <q-item-label class="text-weight-bolder" header>Camera And Display Features</q-item-label>
182 |                   <q-item>
183 |                     <q-item-section>
184 |                       <span class="text-caption text-grey">Dial Color</span>
185 |                       <span>Black</span>
186 |                     </q-item-section>
187 |                     <q-item-section>
188 |                       <span class="text-caption text-grey">Strap Material</span>
189 |                       <span>Silicone</span>
190 |                     </q-item-section>
191 |                   </q-item>
192 |                 </q-list>
193 |               </div>
194 |             </div>
195 |             <!--<q-list dense bordered class="rounded-borders" style="">-->
196 |             <!--<q-item-label class="text-grey-10" header>General</q-item-label>-->
197 |             <!--<q-item v-ripple>-->
198 |             <!--<q-item-section>-->
199 |             <!--<div class="row">-->
200 |             <!--<div class="col-3 text-grey-6">Dial Color</div>-->
201 |             <!--<div class="col-9">Black</div>-->
202 |             <!--</div>-->
203 |             <!--<div class="row">-->
204 |             <!--<div class="col-3 text-grey-7">Dial Color</div>-->
205 |             <!--<div class="col-9">Black</div>-->
206 |             <!--</div>-->
207 |             <!--<div class="row">-->
208 |             <!--<div class="col-3 text-grey-7">Strap Material</div>-->
209 |             <!--<div class="col-9">Silicone</div>-->
210 |             <!--</div>-->
211 |             <!--<div class="row">-->
212 |             <!--<div class="col-3 text-grey-7">Usage</div>-->
213 |             <!--<div class="col-9">Fitness & Outdoor, Health & Medical, Notifier, Safety & Security, Watchphone-->
214 |             <!--</div>-->
215 |             <!--</div>-->
216 | 
217 |             <!--</q-item-section>-->
218 |             <!--</q-item>-->
219 |             <!--<q-item-label header>Product Details</q-item-label>-->
220 |             <!--<q-item-label header>Camera And Display Features</q-item-label>-->
221 |             <!--<q-item-label header>Dimensions</q-item-label>-->
222 |             <!--<q-item-label header>Warranty</q-item-label>-->
223 |             <!--<q-item v-ripple>-->
224 | 
225 |             <!--&lt;!&ndash;<q-item-section>&ndash;&gt;-->
226 |             <!--<q-item-label lines="1">6 months warranty</q-item-label>-->
227 |             <!--&lt;!&ndash;</q-item-section>&ndash;&gt;-->
228 |             <!--</q-item>-->
229 |             <!--</q-list>-->
230 |           </q-tab-panel>
231 | 
232 | 
233 |           <q-tab-panel name="Ratings & Reviews">
234 |             <div class="row">
235 |               <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
236 |                 <q-list bordered class="rounded-borders" style="">
237 |                   <q-item-label class="text-weight-bolder text-green-8" header>Positive Reviews</q-item-label>
238 | 
239 |                   <q-item v-ripple>
240 |                     <q-item-section avatar>
241 |                       <q-avatar>
242 |                         <img src="https://cdn.quasar.dev/img/avatar2.jpg">
243 |                       </q-avatar>
244 |                     </q-item-section>
245 | 
246 |                     <q-item-section>
247 |                       <q-item-label lines="1">Brunch this weekend?</q-item-label>
248 |                       <q-item-label caption lines="2">
249 |                         <span class="text-weight-bold">Janet</span>
250 |                         -- I'll be in your neighborhood doing errands this
251 |                         weekend. Do you want to grab brunch?
252 |                       </q-item-label>
253 |                     </q-item-section>
254 | 
255 |                     <q-item-section side top>
256 |                       1 min ago
257 |                     </q-item-section>
258 |                   </q-item>
259 | 
260 |                   <q-separator inset="item"/>
261 | 
262 |                   <q-item v-ripple>
263 |                     <q-item-section avatar>
264 |                       <q-avatar>
265 |                         <img src="https://cdn.quasar.dev/img/avatar4.jpg">
266 |                       </q-avatar>
267 |                     </q-item-section>
268 | 
269 |                     <q-item-section>
270 |                       <q-item-label lines="1">Linear Project</q-item-label>
271 |                       <q-item-label caption lines="2">
272 |                         <span class="text-weight-bold">John</span>
273 |                         -- Can we schedule a call for tomorrow?
274 |                       </q-item-label>
275 |                     </q-item-section>
276 | 
277 |                     <q-item-section side top>
278 |                       1 min ago
279 |                     </q-item-section>
280 |                   </q-item>
281 | 
282 |                   <q-separator inset="item"/>
283 | 
284 |                   <q-item v-ripple>
285 |                     <q-item-section avatar>
286 |                       <q-avatar>
287 |                         <img src="https://cdn.quasar.dev/img/avatar2.jpg">
288 |                       </q-avatar>
289 |                     </q-item-section>
290 | 
291 |                     <q-item-section>
292 |                       <q-item-label lines="1">Brunch this weekend?</q-item-label>
293 |                       <q-item-label caption lines="2">
294 |                         <span class="text-weight-bold">Janet</span>
295 |                         -- I'll be in your neighborhood doing errands this
296 |                         weekend. Do you want to grab brunch?
297 |                       </q-item-label>
298 |                     </q-item-section>
299 | 
300 |                     <q-item-section side top>
301 |                       1 min ago
302 |                     </q-item-section>
303 |                   </q-item>
304 | 
305 |                   <q-separator inset="item"/>
306 | 
307 |                   <q-item v-ripple>
308 |                     <q-item-section avatar>
309 |                       <q-avatar>
310 |                         <img src="https://cdn.quasar.dev/img/avatar4.jpg">
311 |                       </q-avatar>
312 |                     </q-item-section>
313 | 
314 |                     <q-item-section>
315 |                       <q-item-label lines="1">Linear Project</q-item-label>
316 |                       <q-item-label caption lines="2">
317 |                         <span class="text-weight-bold">John</span>
318 |                         -- Can we schedule a call for tomorrow?
319 |                       </q-item-label>
320 |                     </q-item-section>
321 | 
322 |                     <q-item-section side top>
323 |                       1 min ago
324 |                     </q-item-section>
325 |                   </q-item>
326 |                 </q-list>
327 |               </div>
328 |               <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
329 |                 <q-list bordered class="rounded-borders" style="">
330 |                   <q-item-label class="text-weight-bolder text-red-8" header>Negative Reviews</q-item-label>
331 | 
332 |                   <q-item v-ripple>
333 |                     <q-item-section avatar>
334 |                       <q-avatar>
335 |                         <img src="https://cdn.quasar.dev/img/avatar2.jpg">
336 |                       </q-avatar>
337 |                     </q-item-section>
338 | 
339 |                     <q-item-section>
340 |                       <q-item-label lines="1">Brunch this weekend?</q-item-label>
341 |                       <q-item-label caption lines="2">
342 |                         <span class="text-weight-bold">Janet</span>
343 |                         -- I'll be in your neighborhood doing errands this
344 |                         weekend. Do you want to grab brunch?
345 |                       </q-item-label>
346 |                     </q-item-section>
347 | 
348 |                     <q-item-section side top>
349 |                       1 min ago
350 |                     </q-item-section>
351 |                   </q-item>
352 | 
353 |                   <q-separator inset="item"/>
354 | 
355 |                   <q-item v-ripple>
356 |                     <q-item-section avatar>
357 |                       <q-avatar>
358 |                         <img src="https://cdn.quasar.dev/img/avatar4.jpg">
359 |                       </q-avatar>
360 |                     </q-item-section>
361 | 
362 |                     <q-item-section>
363 |                       <q-item-label lines="1">Linear Project</q-item-label>
364 |                       <q-item-label caption lines="2">
365 |                         <span class="text-weight-bold">John</span>
366 |                         -- Can we schedule a call for tomorrow?
367 |                       </q-item-label>
368 |                     </q-item-section>
369 | 
370 |                     <q-item-section side top>
371 |                       1 min ago
372 |                     </q-item-section>
373 |                   </q-item>
374 | 
375 |                   <q-separator inset="item"/>
376 | 
377 |                   <q-item v-ripple>
378 |                     <q-item-section avatar>
379 |                       <q-avatar>
380 |                         <img src="https://cdn.quasar.dev/img/avatar2.jpg">
381 |                       </q-avatar>
382 |                     </q-item-section>
383 | 
384 |                     <q-item-section>
385 |                       <q-item-label lines="1">Brunch this weekend?</q-item-label>
386 |                       <q-item-label caption lines="2">
387 |                         <span class="text-weight-bold">Janet</span>
388 |                         -- I'll be in your neighborhood doing errands this
389 |                         weekend. Do you want to grab brunch?
390 |                       </q-item-label>
391 |                     </q-item-section>
392 | 
393 |                     <q-item-section side top>
394 |                       1 min ago
395 |                     </q-item-section>
396 |                   </q-item>
397 | 
398 |                   <q-separator inset="item"/>
399 | 
400 |                   <q-item v-ripple>
401 |                     <q-item-section avatar>
402 |                       <q-avatar>
403 |                         <img src="https://cdn.quasar.dev/img/avatar4.jpg">
404 |                       </q-avatar>
405 |                     </q-item-section>
406 | 
407 |                     <q-item-section>
408 |                       <q-item-label lines="1">Linear Project</q-item-label>
409 |                       <q-item-label caption lines="2">
410 |                         <span class="text-weight-bold">John</span>
411 |                         -- Can we schedule a call for tomorrow?
412 |                       </q-item-label>
413 |                     </q-item-section>
414 | 
415 |                     <q-item-section side top>
416 |                       1 min ago
417 |                     </q-item-section>
418 |                   </q-item>
419 |                 </q-list>
420 |               </div>
421 |             </div>
422 | 
423 |           </q-tab-panel>
424 |         </q-tab-panels>
425 |       </div>
426 |     </div>
427 |   </div>
428 | </template>
429 | 
430 | <script>
431 |   export default {
432 |     name: "details.vue",
433 |     data() {
434 |       return {
435 |         slide: 1,
436 |         tab: 'Specifications',
437 |         rating_point: 4.3,
438 |         rat_5: 5,
439 |         rat_4: 4,
440 |         rat_3: 3,
441 |         rat_2: 2,
442 |         rat_1: 1,
443 |       }
444 |     },
445 |     computed: {
446 |       win_width() {
447 |         return this.$q.screen.width - 59;
448 |       },
449 |       win_height() {
450 |         return this.$q.screen.height - 0;
451 |       }
452 |     }
453 |   }
454 | </script>
455 | 
456 | <style scoped>
457 | 
458 | </style>
459 | 


--------------------------------------------------------------------------------
/src/pages/home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <q-page class="q-mt-sm">
  3 |     <div class="row q-col-gutter-sm">
  4 |       <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
  5 |         <q-carousel
  6 |           :class="$q.platform.is.desktop ? 'q-ml-sm' : ''"
  7 |           arrows
  8 |           animated
  9 |           v-model="slide"
 10 |           height="250px"
 11 |         >
 12 |           <q-carousel-slide name="first" img-src="https://cdn.quasar.dev/img/mountains.jpg">
 13 |             <div class="absolute-bottom custom-caption">
 14 |               <div class="text-subtitle1">First stop</div>
 15 |               <div class="text-caption">Mountains</div>
 16 |             </div>
 17 |           </q-carousel-slide>
 18 |           <q-carousel-slide name="second" img-src="https://cdn.quasar.dev/img/parallax1.jpg">
 19 |             <div class="absolute-bottom custom-caption">
 20 |               <div class="text-subtitle1">Second stop</div>
 21 |               <div class="text-caption">Famous City</div>
 22 |             </div>
 23 |           </q-carousel-slide>
 24 |           <q-carousel-slide name="third" img-src="https://cdn.quasar.dev/img/parallax2.jpg">
 25 |             <div class="absolute-bottom custom-caption">
 26 |               <div class="text-subtitle1">Third stop</div>
 27 |               <div class="text-caption">Famous Bridge</div>
 28 |             </div>
 29 |           </q-carousel-slide>
 30 |         </q-carousel>
 31 |       </div>
 32 |       <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
 33 |         <q-card class="bg-white q-pt-sm" :class="$q.platform.is.desktop ? 'q-mr-sm' : ''">
 34 |           <img
 35 |             src="https://www.graphicsprings.com/filestorage/stencils/d3dd5cb632e0826d9e6136af3241b28e.png"
 36 |             style="margin:auto;width:66%;"
 37 |           />
 38 |           <q-card-section class="q-pt-xs">
 39 |             <div class="text-caption text-center text-grey-7">Your Delivery Pincode</div>
 40 |             <div class="text-caption text-center q-mt-sm text-grey-9">
 41 |               Enter your pincode to check availability and faster options
 42 |             </div>
 43 |             <div class="q-mt-sm">
 44 |               <q-input dense outlined placeholder="Enter pincode"></q-input>
 45 |             </div>
 46 |             <div class="q-mt-xs">
 47 |               <div style="display:block; height:22px;">
 48 |                 <q-btn
 49 |                   size="sm"
 50 |                   label="Save"
 51 |                   class="q-mt-xs text-capitalize bg-primary text-white float-right"
 52 |                 />
 53 |               </div>
 54 |             </div>
 55 |           </q-card-section>
 56 |         </q-card>
 57 |       </div>
 58 |     </div>
 59 |     <div class="text-grey-9 text-weight-bold">
 60 |       <div class="row items-center q-mx-sm">
 61 |         <div class="col-12 q-mt-sm">
 62 |           <div class="q-pl-md bg-white q-pt-sm ">
 63 |             <span class="text-grey-9 text-h6 text-weight-bold">Latest Launches</span>
 64 |             <a class="text-primary q-ml-sm cursor-pointer">[see all]</a>
 65 |           </div>
 66 |           <q-carousel
 67 |             v-model="latest_slide"
 68 |             transition-prev="slide-right"
 69 |             transition-next="slide-left"
 70 |             swipeable
 71 |             animated
 72 |             control-color="primary"
 73 |             navigation
 74 |             padding
 75 |             arrows
 76 |             height="260px"
 77 |             class="rounded-borders"
 78 |           >
 79 |             <q-carousel-slide
 80 |               v-for="(val, idx) in [1, 2, 3]"
 81 |               :name="val"
 82 |               :key="idx"
 83 |               class="column no-wrap"
 84 |             >
 85 |               <div class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap">
 86 |                 <div
 87 |                   @click="$router.push('/details')"
 88 |                   class="col-lg-2 col-md-2 col-sm-12 col-xs-12 hover_border_grey text-center full-height"
 89 |                 >
 90 |                   <q-img
 91 |                     style=""
 92 |                     class="rounded-borders"
 93 |                     src="https://www.graphicsprings.com/filestorage/stencils/d3dd5cb632e0826d9e6136af3241b28e.png"
 94 |                   >
 95 |                   </q-img>
 96 |                   <div>Redmi 8</div>
 97 |                   <div class="text-caption text-weight-bold text-green">5000h mAh Battery</div>
 98 |                   <div>
 99 |                     <span>₹8,499</span
100 |                     ><span class="q-ml-sm text-grey-6" style="text-decoration: line-through"
101 |                       >₹10,999</span
102 |                     >
103 |                   </div>
104 |                 </div>
105 |                 <div
106 |                   @click="$router.push('/details')"
107 |                   class="col-lg-2 col-md-2 col-sm-12 col-xs-12 hover_border_grey text-center full-height"
108 |                 >
109 |                   <q-img
110 |                     style=""
111 |                     class="rounded-borders"
112 |                     src="https://www.graphicsprings.com/filestorage/stencils/d3dd5cb632e0826d9e6136af3241b28e.png"
113 |                   >
114 |                   </q-img>
115 |                   <div>Redmi 8</div>
116 |                   <div class="text-caption text-weight-bold text-green">5000h mAh Battery</div>
117 |                   <div>
118 |                     <span>₹8,499</span
119 |                     ><span class="q-ml-sm text-grey-6" style="text-decoration: line-through"
120 |                       >₹10,999</span
121 |                     >
122 |                   </div>
123 |                 </div>
124 |                 <div
125 |                   @click="$router.push('/details')"
126 |                   class="col-lg-2 col-md-2 col-sm-12 col-xs-12 hover_border_grey text-center full-height"
127 |                 >
128 |                   <q-img
129 |                     style=""
130 |                     class="rounded-borders"
131 |                     src="https://www.graphicsprings.com/filestorage/stencils/d3dd5cb632e0826d9e6136af3241b28e.png"
132 |                   >
133 |                   </q-img>
134 |                   <div>Redmi 8</div>
135 |                   <div class="text-caption text-weight-bold text-green">5000h mAh Battery</div>
136 |                   <div>
137 |                     <span>₹8,499</span
138 |                     ><span class="q-ml-sm text-grey-6" style="text-decoration: line-through"
139 |                       >₹10,999</span
140 |                     >
141 |                   </div>
142 |                 </div>
143 |                 <div
144 |                   @click="$router.push('/details')"
145 |                   class="col-lg-2 col-md-2 col-sm-12 col-xs-12 hover_border_grey text-center full-height"
146 |                 >
147 |                   <q-img
148 |                     style=""
149 |                     class="rounded-borders"
150 |                     src="https://www.graphicsprings.com/filestorage/stencils/d3dd5cb632e0826d9e6136af3241b28e.png"
151 |                   >
152 |                   </q-img>
153 |                   <div>Redmi 8</div>
154 |                   <div class="text-caption text-weight-bold text-green">5000h mAh Battery</div>
155 |                   <div>
156 |                     <span>₹8,499</span
157 |                     ><span class="q-ml-sm text-grey-6" style="text-decoration: line-through"
158 |                       >₹10,999</span
159 |                     >
160 |                   </div>
161 |                 </div>
162 |                 <div
163 |                   @click="$router.push('/details')"
164 |                   class="col-lg-2 col-md-2 col-sm-12 col-xs-12 hover_border_grey text-center full-height"
165 |                 >
166 |                   <q-img
167 |                     style=""
168 |                     class="rounded-borders"
169 |                     src="https://www.graphicsprings.com/filestorage/stencils/d3dd5cb632e0826d9e6136af3241b28e.png"
170 |                   >
171 |                   </q-img>
172 |                   <div>Redmi 8</div>
173 |                   <div class="text-caption text-weight-bold text-green">5000h mAh Battery</div>
174 |                   <div>
175 |                     <span>₹8,499</span
176 |                     ><span class="q-ml-sm text-grey-6" style="text-decoration: line-through"
177 |                       >₹10,999</span
178 |                     >
179 |                   </div>
180 |                 </div>
181 |                 <div
182 |                   @click="$router.push('/details')"
183 |                   class="col-lg-2 col-md-2 col-sm-12 col-xs-12 hover_border_grey text-center full-height"
184 |                 >
185 |                   <q-img
186 |                     style=""
187 |                     class="rounded-borders"
188 |                     src="https://www.graphicsprings.com/filestorage/stencils/d3dd5cb632e0826d9e6136af3241b28e.png"
189 |                   >
190 |                   </q-img>
191 |                   <div>Redmi 8</div>
192 |                   <div class="text-caption text-weight-bold text-green">5000h mAh Battery</div>
193 |                   <div>
194 |                     <span>₹8,499</span
195 |                     ><span class="q-ml-sm text-grey-6" style="text-decoration: line-through"
196 |                       >₹10,999</span
197 |                     >
198 |                   </div>
199 |                 </div>
200 |               </div>
201 |             </q-carousel-slide>
202 |           </q-carousel>
203 |         </div>
204 |       </div>
205 |       <div class="row items-center q-mx-sm">
206 |         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 q-mt-sm">
207 |           <div class="q-pl-md bg-white q-pt-sm">
208 |             <span class="text-grey-9 text-h6 text-weight-bold">Trending in</span>
209 |             <a class="text-primary q-ml-sm cursor-pointer">[see more]</a>
210 |           </div>
211 |           <q-carousel
212 |             v-model="trending_slide"
213 |             transition-prev="slide-right"
214 |             transition-next="slide-left"
215 |             swipeable
216 |             animated
217 |             control-color="primary"
218 |             navigation
219 |             padding
220 |             arrows
221 |             height="260px"
222 |             class="rounded-borders"
223 |           >
224 |             <q-carousel-slide
225 |               v-for="(val, idx) in [1, 2, 3]"
226 |               :name="val"
227 |               :key="idx"
228 |               class="column no-wrap"
229 |             >
230 |               <div class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap">
231 |                 <q-img
232 |                   @click="$router.push('/category')"
233 |                   style="border:1px solid lightgrey;"
234 |                   class="rounded-borders col-lg-3 col-md-3 col-sm-12 col-xs-12 cursor-pointer full-height"
235 |                   src="https://www.graphicsprings.com/filestorage/stencils/1cdf3eae16b6d0da3f16ff12f7650a24.png"
236 |                 >
237 |                   <div
238 |                     class="absolute-bottom custom-caption"
239 |                     style="background-color:rgba(0, 0, 0, .5);"
240 |                   >
241 |                     <div class="text-caption text-weight-bolder">Electronics</div>
242 |                   </div>
243 |                 </q-img>
244 |                 <q-img
245 |                   @click="$router.push('/category')"
246 |                   style="border:1px solid lightgrey;"
247 |                   class="rounded-borders col-lg-3 col-md-3 col-sm-12 col-xs-12 cursor-pointer full-height"
248 |                   src="https://www.graphicsprings.com/filestorage/stencils/d3dd5cb632e0826d9e6136af3241b28e.png"
249 |                 >
250 |                   <div
251 |                     class="absolute-bottom custom-caption"
252 |                     style="background-color:rgba(0, 0, 0, .5);"
253 |                   >
254 |                     <div class="text-caption text-weight-bolder">TVs and Appliances</div>
255 |                   </div>
256 |                 </q-img>
257 |                 <q-img
258 |                   @click="$router.push('/category')"
259 |                   style="border:1px solid lightgrey;"
260 |                   class="rounded-borders col-lg-3 col-md-3 col-sm-12 col-xs-12 cursor-pointer full-height"
261 |                   src="https://www.graphicsprings.com/filestorage/stencils/1cdf3eae16b6d0da3f16ff12f7650a24.png"
262 |                 >
263 |                   <div
264 |                     class="absolute-bottom custom-caption"
265 |                     style="background-color:rgba(0, 0, 0, .5);"
266 |                   >
267 |                     <div class="text-caption text-weight-bolder">Men</div>
268 |                   </div>
269 |                 </q-img>
270 |                 <q-img
271 |                   @click="$router.push('/category')"
272 |                   style="border:1px solid lightgrey;"
273 |                   class="rounded-borders col-lg-3 col-md-3 col-sm-12 col-xs-12 cursor-pointer full-height"
274 |                   src="https://www.graphicsprings.com/filestorage/stencils/d3dd5cb632e0826d9e6136af3241b28e.png"
275 |                 >
276 |                   <div
277 |                     class="absolute-bottom custom-caption"
278 |                     style="background-color:rgba(0, 0, 0, .5);"
279 |                   >
280 |                     <div class="text-caption text-weight-bolder">Women</div>
281 |                   </div>
282 |                 </q-img>
283 |               </div>
284 |             </q-carousel-slide>
285 |           </q-carousel>
286 |         </div>
287 |       </div>
288 |       <div class="row q-mt-sm q-mx-sm bg-white text-center">
289 |         <div
290 |           class="col-lg-2 col-md-2 col-sm-12 col-xs-12"
291 |           style="border-right: 1px solid lightgrey"
292 |         ></div>
293 |         <div
294 |           class="col-lg-2 col-md-2 col-sm-12 col-xs-12"
295 |           style="border-right: 1px solid lightgrey"
296 |         >
297 |           <q-img
298 |             src="https://www.graphicsprings.com/filestorage/stencils/3055581cff0526602142cbb0bfba9fca.png"
299 |           ></q-img>
300 |           <div class="text-subtitle1 q-mb-sm text-grey-8">100% Secure Payments</div>
301 |         </div>
302 |         <div
303 |           class="col-lg-2 col-md-2 col-sm-12 col-xs-12"
304 |           style="border-right: 1px solid lightgrey"
305 |         >
306 |           <q-img
307 |             src="https://www.graphicsprings.com/filestorage/stencils/3055581cff0526602142cbb0bfba9fca.png"
308 |           ></q-img>
309 |           <div class="text-subtitle1 q-mb-sm text-grey-8">Trustpay</div>
310 |         </div>
311 |         <div
312 |           class="col-lg-2 col-md-2 col-sm-12 col-xs-12"
313 |           style="border-right: 1px solid lightgrey"
314 |         >
315 |           <q-img
316 |             src="https://www.graphicsprings.com/filestorage/stencils/3055581cff0526602142cbb0bfba9fca.png"
317 |           ></q-img>
318 |           <div class="text-subtitle1 q-mb-sm text-grey-8">Help Center</div>
319 |         </div>
320 |         <div
321 |           class="col-lg-2 col-md-2 col-sm-12 col-xs-12"
322 |           style="border-right: 1px solid lightgrey"
323 |         >
324 |           <q-img
325 |             src="https://www.graphicsprings.com/filestorage/stencils/3055581cff0526602142cbb0bfba9fca.png"
326 |           ></q-img>
327 |           <div class="text-subtitle1 q-mb-sm text-grey-8">Shop On The Go</div>
328 |         </div>
329 |       </div>
330 |     </div>
331 |   </q-page>
332 | </template>
333 | 
334 | <script>
335 | import Vue from "vue";
336 | 
337 | export default {
338 |   data() {
339 |     return {
340 |       slide: "first",
341 |       trending_slide: 1,
342 |       latest_slide: 1,
343 |     };
344 |   },
345 |   methods: {},
346 | };
347 | </script>
348 | 
349 | <style lang="sass" scoped>
350 | .custom-caption
351 |   text-align: center
352 |   padding: 8px
353 |   color: white
354 |   background-color: rgba(0, 0, 0, .3)
355 | </style>
356 | 


--------------------------------------------------------------------------------
/src/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <q-layout>
 3 |     <q-page-container>
 4 |       <q-page class="flex flex-center" style="font-family: Lato;">
 5 | <!--        <div id="particles-js"></div>-->
 6 |         <q-card :style="$q.platform.is.desktop ? 'width:55%;' : ''" class="row my-card items-center q-pa-none q-ma-none shadow-24">
 7 |           <q-card-section v-if="$q.platform.is.desktop" class="col-md-4 col-lg-4 col-sm-12 sol-xs-12 items-center float-left" style="background-color: #1f509e"
 8 |                           :style="{'height':(win_height-270)+'px'}" horizontal>
 9 |             <div class="text-center full-width">
10 |               <div><img src="images/logo.png" style="width: 33%"/></div>
11 |               <div class="text-weight-bolder text-white text-h6">Quasar Shopping</div>
12 |               <div class="text-caption text-white">Quasar Shopping - One stop solution</div>
13 |             </div>
14 |           </q-card-section>
15 |           <q-card-section class="col-md-8 col-lg-8 col-sm-12 sol-xs-12 float-left">
16 |             <q-card-section class="items-center">
17 |               <div>
18 |                 <div v-if="!$q.platform.is.desktop" class="text-weight-bolder text-center q-mb-md text-primary text-h6">Quasar Shopping</div>
19 |                 <q-form :style="$q.platform.is.desktop ? 'width:55%;margin: auto;' : 'margin: auto;'" class="q-gutter-md">
20 |                   <span class="text-subtitle1 text-weight-bold text-grey-7">Welcome Aboard</span>
21 |                   <q-input
22 |                     dense
23 |                     outlined
24 |                     v-model="username"
25 |                     label="Username"
26 |                     lazy-rules
27 |                   />
28 | 
29 |                   <q-input
30 |                     dense
31 |                     type="password"
32 |                     outlined
33 |                     v-model="password"
34 |                     label="Password"
35 |                     lazy-rules
36 |                   />
37 |                   <q-checkbox class="text-grey-8" dense v-model="remember_me" label="Remember me"/>
38 |                   <div>
39 |                     <q-btn class="text-capitalize" size="sm" style="width:75px" dense label="Login" to="/home" type="button"
40 |                            color="primary"/>
41 |                     <q-btn class="float-right text-blue-9 text-capitalize" size="sm" style="width:75px;border: 1px solid #36669e;" dense label="Sign Up"
42 |                            type="button"/>
43 |                   </div>
44 |                 </q-form>
45 | 
46 |               </div>
47 |             </q-card-section>
48 |           </q-card-section>
49 | 
50 |         </q-card>
51 |       </q-page>
52 |     </q-page-container>
53 |   </q-layout>
54 | </template>
55 | 
56 | <script>
57 |     export default {
58 |         data() {
59 |             return {
60 |                 username: 'mayur',
61 |                 password: 'mayur@qu',
62 |                 remember_me: false
63 |             }
64 |         },
65 |         mounted() {
66 | 
67 |         },
68 |         computed: {
69 |             win_width() {
70 |                 return this.$q.screen.width - 59;
71 |             },
72 |             win_height() {
73 |                 return this.$q.screen.height - 0;
74 |             }
75 |         }
76 |     }
77 | </script>
78 | <style>
79 |   .my-card {
80 |     /*width: 55%;*/
81 |     height: 30%;
82 |   }
83 | 
84 |   #particles-js {
85 |     position: absolute;
86 |     width: 100%;
87 |     height: 100%;
88 |     /*background: linear-gradient(145deg, #abbaab 15%, #ffffff 70%);*/
89 |     /*background: linear-gradient(145deg,#f7f8f8 11%, #627e79 75%);*/
90 |     background-repeat: no-repeat;
91 |     background-size: cover;
92 |     background-position: 50% 50%;
93 |   }
94 | 
95 |   .login-form {
96 |     position: absolute;
97 |   }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/pages/my_profile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <q-page>
  3 |     <div class="row q-col-gutter-sm q-ma-xs">
  4 |       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
  5 |         <q-card class="my-card" flat bordered>
  6 |           <q-card-section horizontal>
  7 |             <q-card-section class="q-pt-xs">
  8 |               <div class="text-overline">US Region</div>
  9 |               <div class="text-h5 q-mt-sm q-mb-xs">Mayur Patel</div>
 10 |               <div class="text-caption text-grey">
 11 |                 Sales and Marketing Executive | Graduate and past committee | Keynote speaker on Selling and Recruiting
 12 |                 Topics
 13 |               </div>
 14 |             </q-card-section>
 15 | 
 16 |             <q-card-section class="col-5 flex flex-center">
 17 |               <q-img
 18 |                 class="rounded-borders"
 19 |                 src="https://cdn.quasar.dev/img/boy-avatar.png"
 20 |               />
 21 |             </q-card-section>
 22 |           </q-card-section>
 23 | 
 24 |           <q-separator/>
 25 | 
 26 |           <q-card-section>
 27 |             Assessing clients needs and present suitable promoted products. Liaising with and persuading targeted doctors to prescribe our products utilizing effective sales skills.
 28 |           </q-card-section>
 29 |         </q-card>
 30 |       </div>
 31 |       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
 32 |         <q-card>
 33 |           <q-card-section>
 34 |             <q-form
 35 |               class="q-gutter-md"
 36 |             >
 37 |               <q-input
 38 |                 filled
 39 |                 v-model="user.first_name"
 40 |                 label="First Name"
 41 |                 lazy-rules
 42 |               />
 43 | 
 44 |               <q-input
 45 |                 filled
 46 |                 v-model="user.last_name"
 47 |                 label="Last Name"
 48 |                 lazy-rules
 49 | 
 50 |               />
 51 | 
 52 |               <q-input
 53 |                 filled
 54 |                 v-model="user.age"
 55 |                 label="Age"
 56 |                 lazy-rules
 57 | 
 58 |               />
 59 | 
 60 |               <q-input
 61 |                 filled
 62 |                 v-model="user.email"
 63 |                 label="Email"
 64 |                 lazy-rules
 65 | 
 66 |               />
 67 | 
 68 |               <q-input
 69 |                 filled
 70 |                 v-model="user.phone"
 71 |                 label="Phone"
 72 |                 lazy-rules
 73 | 
 74 |               />
 75 | 
 76 |               <div>
 77 |                 <q-btn label="Update" type="submit" color="primary"/>
 78 |               </div>
 79 |             </q-form>
 80 |           </q-card-section>
 81 |         </q-card>
 82 |       </div>
 83 |     </div>
 84 |   </q-page>
 85 | </template>
 86 | 
 87 | <script>
 88 |     export default {
 89 |         data() {
 90 |             return {
 91 |                 user: {
 92 |                     first_name: 'Mayur',
 93 |                     last_name: 'Patel',
 94 |                     age: 30,
 95 |                     email: 'm******@****.com',
 96 |                     phone: '97******92'
 97 |                 },
 98 |             }
 99 |         },
100 |     }
101 | </script>
102 | 
103 | <style scoped>
104 | 
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | import routes from './routes'
 5 | 
 6 | Vue.use(VueRouter)
 7 | 
 8 | /*
 9 |  * If not building with SSR mode, you can
10 |  * directly export the Router instantiation;
11 |  *
12 |  * The function below can be async too; either use
13 |  * async/await or return a Promise which resolves
14 |  * with the Router instance.
15 |  */
16 | 
17 | export default function (/* { store, ssrContext } */) {
18 |   const Router = new VueRouter({
19 |     scrollBehavior: () => ({ x: 0, y: 0 }),
20 |     routes,
21 | 
22 |     // Leave these as they are and change in quasar.conf.js instead!
23 |     // quasar.conf.js -> build -> vueRouterMode
24 |     // quasar.conf.js -> build -> publicPath
25 |     mode: process.env.VUE_ROUTER_MODE,
26 |     base: process.env.VUE_ROUTER_BASE
27 |   })
28 | 
29 |   return Router
30 | }
31 | 


--------------------------------------------------------------------------------
/src/router/routes.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const routes = [
 3 |   { path: '/', component: () => import('pages/login.vue') },
 4 |   {
 5 |     path: '/',
 6 |     component: () => import('layouts/MainLayout.vue'),
 7 |     children: [
 8 |       { path: '/home', component: () => import('pages/home.vue') },
 9 |       { path: '/details', component: () => import('pages/details.vue') },
10 |       { path: '/customer_management', component: () => import('pages/customer_management.vue') },
11 |       { path: '/change_request', component: () => import('pages/change_request.vue') },
12 |       { path: '/my_profile', component: () => import('pages/my_profile.vue') },
13 |       { path: '/category', component: () => import('pages/category.vue') },
14 |     ]
15 |   }
16 | ]
17 | 
18 | // Always leave this as last one
19 | if (process.env.MODE !== 'ssr') {
20 |   routes.push({
21 |     path: '*',
22 |     component: () => import('pages/Error404.vue')
23 |   })
24 | }
25 | 
26 | export default routes
27 | 


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