diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..85d04b8 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,20 @@ +# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. + +# For additional information regarding the format and rule options, please see: + +# https://github.com/browserslist/browserslist#queries + +# For the full list of supported browsers by the Angular framework, please see: + +# https://angular.io/guide/browser-support + +# You can see what browsers were selected by your queries by running: + +# npx browserslist + +last 1 Chrome version +last 1 Firefox version +last 2 Edge major versions +last 2 Safari major versions +last 2 iOS major versions +Firefox ESR diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 0000000..6877b18 --- /dev/null +++ b/.devcontainer/Dockerfile @@ -0,0 +1,17 @@ +# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.224.2/containers/typescript-node/.devcontainer/base.Dockerfile + +# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster +ARG VARIANT="16-bullseye" +FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT} + +# [Optional] Uncomment this section to install additional OS packages. +# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ +# && apt-get -y install --no-install-recommends + +# [Optional] Uncomment if you want to install an additional version of node using nvm +# ARG EXTRA_NODE_VERSION=10 +# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}" + +# [Optional] Uncomment if you want to install more global node packages +# RUN su node -c "npm install -g " +RUN su node -c "npm install -g npm@8.12.1" diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000..7191053 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,41 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: +// https://github.com/microsoft/vscode-dev-containers/tree/v0.224.2/containers/typescript-node +{ + "name": "beteran-backend-app-browser", + "build": { + "dockerfile": "Dockerfile", + // Update 'VARIANT' to pick a Node version: 16, 14, 12. + // Append -bullseye or -buster to pin to an OS version. + // Use -bullseye variants on local on arm64/Apple Silicon. + "args": { + "VARIANT": "16-bullseye" + } + }, + + // Set *default* container specific settings.json values on container create. + "settings": {}, + + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "angular.ng-template", + "donjayamanne.githistory", + "eamodio.gitlens", + "mhutchie.git-graph" + ], + + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], + "portsAttributes": { + "4300": { + "label": "beteran-backend-app-browser", + "onAutoForward": "notify" + } + }, + // Use 'postCreateCommand' to run commands after the container is created. + // "postCreateCommand": "yarn install", + "postCreateCommand": "bash ./.devcontainer/scripts/postCreateCommand.sh", + // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. + "remoteUser": "node" +} diff --git a/.devcontainer/scripts/postCreateCommand.sh b/.devcontainer/scripts/postCreateCommand.sh new file mode 100644 index 0000000..2a6113e --- /dev/null +++ b/.devcontainer/scripts/postCreateCommand.sh @@ -0,0 +1,5 @@ +#!/usr/bin/env bash + +set -ex + +npm install -g @angular/cli \ No newline at end of file diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..59d9a3a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,16 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.ts] +quote_type = single + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..5fcd7d5 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,79 @@ +{ + "root": true, + "env": { + "es6": true + }, + "parserOptions": { + "ecmaVersion": 2018 + }, + "ignorePatterns": ["projects/**/*"], + "overrides": [ + { + "files": ["*.ts"], + "parserOptions": { + "project": ["tsconfig.json"], + "createDefaultProgram": true + }, + "extends": [ + "plugin:@angular-eslint/ng-cli-compat", + "plugin:@angular-eslint/ng-cli-compat--formatting-add-on", + "plugin:@angular-eslint/template/process-inline-templates" + ], + "rules": { + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "", + "style": "kebab-case" + } + ], + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "", + "style": "camelCase" + } + ], + "@typescript-eslint/dot-notation": "off", + "@typescript-eslint/explicit-function-return-type": "error", + "@typescript-eslint/explicit-member-accessibility": [ + "off", + { + "accessibility": "explicit" + } + ], + "@typescript-eslint/naming-convention": [ + { "leadingUnderscore": "allowSingleOrDouble" } + ], + "@typescript-eslint/no-inferrable-types": "off", + "arrow-parens": [ + "error", + "as-needed", + { + "requireForBlockBody": true + } + ], + "brace-style": ["off", "off"], + "import/order": "off", + "max-len": [ + "error", + { + "ignorePattern": "^import |^export | implements", + "code": 180 + } + ], + "no-underscore-dangle": "off", + "object-shorthand": "off", + "quote-props": ["error", "consistent"], + "quotes": ["error", "single"] + } + }, + { + "files": ["*.html"], + "extends": ["plugin:@angular-eslint/template/recommended"], + "rules": {} + } + ] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..105c00f --- /dev/null +++ b/.gitignore @@ -0,0 +1,46 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp +/out-tsc +# Only exists if Bazel was run +/bazel-out + +# dependencies +/node_modules + +# profiling files +chrome-profiler-events*.json + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# misc +/.angular/cache +/.sass-cache +/connect.lock +/coverage +/libpeerconnection.log +npm-debug.log +yarn-error.log +testem.log +/typings + +# System Files +.DS_Store +Thumbs.db diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..521a9f7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +legacy-peer-deps=true diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..b6a7d89 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +16 diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..740e35a --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,20 @@ +{ + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "ng serve", + "type": "pwa-chrome", + "request": "launch", + "preLaunchTask": "npm: start", + "url": "http://localhost:4200/" + }, + { + "name": "ng test", + "type": "chrome", + "request": "launch", + "preLaunchTask": "npm: test", + "url": "http://localhost:9876/debug.html" + } + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..0dfe18f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,32 @@ +{ + "editor.tabSize": 2, + "editor.formatOnPaste": true, + "editor.formatOnSave": true, + "workbench.settings.useSplitJSON": true, + "files.watcherExclude": { + "**/.git/objects/**": true, + "**/.git/subtree-cache/**": true, + "**/node_modules/*/**": true + }, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + } + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + } + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[json]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[jsonc]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } +} diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..a298b5b --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,42 @@ +{ + // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 + "version": "2.0.0", + "tasks": [ + { + "type": "npm", + "script": "start", + "isBackground": true, + "problemMatcher": { + "owner": "typescript", + "pattern": "$tsc", + "background": { + "activeOnStart": true, + "beginsPattern": { + "regexp": "(.*?)" + }, + "endsPattern": { + "regexp": "bundle generation complete" + } + } + } + }, + { + "type": "npm", + "script": "test", + "isBackground": true, + "problemMatcher": { + "owner": "typescript", + "pattern": "$tsc", + "background": { + "activeOnStart": true, + "beginsPattern": { + "regexp": "(.*?)" + }, + "endsPattern": { + "regexp": "bundle generation complete" + } + } + } + } + ] +} diff --git a/CREDITS b/CREDITS new file mode 100644 index 0000000..6fef4f1 --- /dev/null +++ b/CREDITS @@ -0,0 +1,72 @@ +// ----------------------------------------------------------------------------------------------------- +// @ 3rd party credits +// ----------------------------------------------------------------------------------------------------- + +// Flags +https://github.com/Yummygum/flagpack-core + +// Icons +Material - https://material.io/tools/icons +Feather - https://feathericons.com/ +Heroicons - https://github.com/refactoringui/heroicons +Iconsmind - https://iconsmind.com/ + +// Avatars +https://uifaces.co + +// 404, 500 & Maintenance +https://undraw.co + +// Mail app +Photo by Riccardo Chiarini on Unsplash - https://unsplash.com/photos/2VDa8bnLM8c +Photo by Johannes Plenio on Unsplash - https://unsplash.com/photos/RwHv7LgeC7s +Photo by Jamie Davies on Unsplash - https://unsplash.com/photos/Hao52Fu9-F8 +Photo by Christian Joudrey on Unsplash - https://unsplash.com/photos/mWRR1xj95hg + +// Profile page +Photo by Alex Knight on Unsplash - https://unsplash.com/photos/DpPutJwgyW8 + +// Cards +Photo by Kym Ellis on Unsplash - https://unsplash.com/photos/RPT3AjdXlZc +Photo by Patrick Hendry on Unsplash - https://unsplash.com/photos/Qgxk3PQsMiI +Photo by Hailey Kean on Unsplash - https://unsplash.com/photos/QxjsOlFNr_4 +Photo by Nathan Anderson on Unsplash - https://unsplash.com/photos/mG8ShlWrMDI +Photo by Adrian Infernus on Unsplash - https://unsplash.com/photos/5apewqWk978 +Photo by freestocks.org on Unsplash - https://unsplash.com/photos/c73TZ2sIU38 +Photo by Tim Marshall on Unsplash - https://unsplash.com/photos/PKSCrmZdvwA +Photo by Daniel Koponyas on Unsplash - https://unsplash.com/photos/rbiLY6ZwvXQ +Photo by John Westrock on Unsplash - https://unsplash.com/photos/LCesauDseu8 +Photo by Gabriel Sollmann on Unsplash - https://unsplash.com/photos/kFWj9y-tJB4 +Photo by Kevin Wolf on Unsplash - https://unsplash.com/photos/BJyjgEdNTPs +Photo by Luca Bravo on Unsplash - https://unsplash.com/photos/hFzIoD0F_i8 +Photo by Ian Baldwin on Unsplash - https://unsplash.com/photos/Dlj-SxxTlQ0 +Photo by Ben Kolde on Unsplash - https://unsplash.com/photos/KRTFIBOfcFw +Photo by Chad Peltola on Unsplash - https://unsplash.com/photos/BTvQ2ET_iKc +Photo by rocknwool on Unsplash - https://unsplash.com/photos/r56oO1V5oms +Photo by Vita Vilcina on Unsplash - https://unsplash.com/photos/KtOid0FLjqU +Photo by Jia Ye on Unsplash - https://unsplash.com/photos/y8ZnQqgohLk +Photo by Parker Whitson on Unsplash - https://unsplash.com/photos/OlTYIqTjmVM +Photo by Dorian Hurst on Unsplash - https://unsplash.com/photos/a9uWPQlIbYc +Photo by Everaldo Coelho on Unsplash - https://unsplash.com/photos/KPaSCpklCZw +Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/fh2JefbNlII +Photo by Orlova Maria on Unsplash - https://unsplash.com/photos/p8y4dWEMGMU +Photo by Jake Blucker on Unsplash - https://unsplash.com/photos/tMzCrBkM99Y +Photo by Jerry Zhang on Unsplash - https://unsplash.com/photos/oIBcow6n36s +Photo by John Cobb on Unsplash - https://unsplash.com/photos/IE_sifhay7o +Photo by Dan Gold on Unsplash - https://unsplash.com/photos/mDlhOIfGxNI +Photo by Ana Toma on Unsplash - https://unsplash.com/photos/XsGwe6gYg0c +Photo by Andrea on Unsplash - https://unsplash.com/photos/1AWY0N960Sk +Photo by Aswin on Unsplash - https://unsplash.com/photos/_roUcFWstas +Photo by Justin Kauffman on Unsplash - https://unsplash.com/photos/aWG_dqyhI0A +Photo by Barna Bartis on Unsplash - https://unsplash.com/photos/VVoBQqWrvkc +Photo by Kyle Hinkson on Unsplash - https://unsplash.com/photos/3439EnvnAGo +Photo by Spencer Watson on Unsplash - https://unsplash.com/photos/5TBf16GnHKg +Photo by adrian on Unsplash - https://unsplash.com/photos/1wrzvwoK8A4 +Photo by Christopher Rusev on Unsplash - https://unsplash.com/photos/7gKWgCRixf0 +Photo by Stephen Leonardi on Unsplash - https://unsplash.com/photos/MDmwQVgDHHM +Photo by Dwinanda Nurhanif Mujito on Unsplash - https://unsplash.com/photos/pKT5Mg16w_w +Photo by Humphrey Muleba on Unsplash - https://unsplash.com/photos/Zuvf5mxT5fs +Photo by adrian on Unsplash - https://unsplash.com/photos/PNRxLFPMyJY +Photo by Dahee Son on Unsplash - https://unsplash.com/photos/tV06QVJXVxU +Photo by Zachary Kyra-Derksen on Unsplash - https://unsplash.com/photos/vkqS7vLQUtg +Photo by Rodrigo Soares on Unsplash - https://unsplash.com/photos/8BFWBUkSqQo diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..d4f17d1 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,6 @@ +Envato Standard License + +Copyright (c) Sercan Yemen + +This project is protected by Envato's Standard License. For more information, +check the official license page at [https://themeforest.net/licenses/standard](https://themeforest.net/licenses/standard) diff --git a/README.md b/README.md index e3a4f3b..130d9b1 100644 --- a/README.md +++ b/README.md @@ -1,92 +1,27 @@ -# beteran-backend-app-browser +# Fuse - Admin template and Starter project for Angular +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) +## Development server -## Getting started +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. -To make it easy for you to get started with GitLab, here's a list of recommended next steps. +## Code scaffolding -Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)! +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. -## Add your files +## Build -- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files -- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command: +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. -``` -cd existing_repo -git remote add origin https://gitlab.loafle.net/bet/beteran-backend-app-browser.git -git branch -M main -git push -uf origin main -``` +## Running unit tests -## Integrate with your tools +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). -- [ ] [Set up project integrations](https://gitlab.loafle.net/bet/beteran-backend-app-browser/-/settings/integrations) +## Running end-to-end tests -## Collaborate with your team +Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. -- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/) -- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html) -- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically) -- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/) -- [ ] [Automatically merge when pipeline succeeds](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html) +## Further help -## Test and Deploy - -Use the built-in continuous integration in GitLab. - -- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html) -- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/) -- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html) -- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/) -- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html) - -*** - -# Editing this README - -When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template. - -## Suggestions for a good README -Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information. - -## Name -Choose a self-explaining name for your project. - -## Description -Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors. - -## Badges -On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge. - -## Visuals -Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method. - -## Installation -Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection. - -## Usage -Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README. - -## Support -Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc. - -## Roadmap -If you have ideas for releases in the future, it is a good idea to list them in the README. - -## Contributing -State if you are open to contributions and what your requirements are for accepting them. - -For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self. - -You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser. - -## Authors and acknowledgment -Show your appreciation to those who have contributed to the project. - -## License -For open source projects, say how it is licensed. - -## Project status -If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers. +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/angular.json b/angular.json new file mode 100644 index 0000000..a4a3765 --- /dev/null +++ b/angular.json @@ -0,0 +1,135 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "cli": { + "defaultCollection": "@angular-eslint/schematics" + }, + "newProjectRoot": "projects", + "projects": { + "fuse": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/fuse", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "inlineStyleLanguage": "scss", + "allowedCommonJsDependencies": [ + "apexcharts", + "highlight.js", + "crypto-js" + ], + "assets": [ + "src/favicon-16x16.png", + "src/favicon-32x32.png", + "src/assets", + { + "glob": "_redirects", + "input": "src", + "output": "/" + } + ], + "stylePreprocessorOptions": { + "includePaths": ["src/@fuse/styles"] + }, + "styles": [ + "src/@fuse/styles/tailwind.scss", + "src/@fuse/styles/themes.scss", + "src/styles/vendors.scss", + "src/@fuse/styles/main.scss", + "src/styles/styles.scss", + "src/styles/tailwind.scss" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "3mb", + "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "75kb", + "maximumError": "90kb" + } + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "fuse:build:production" + }, + "development": { + "browserTarget": "fuse:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "fuse:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "inlineStyleLanguage": "scss", + "assets": [ + "src/favicon-16x16.png", + "src/favicon-32x32.png", + "src/assets" + ], + "styles": ["src/styles/styles.scss"], + "scripts": [] + } + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] + } + } + } + } + }, + "defaultProject": "fuse" +} diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..a2403b1 --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,41 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: "", + frameworks: ["jasmine", "@angular-devkit/build-angular"], + plugins: [ + require("karma-jasmine"), + require("karma-chrome-launcher"), + require("karma-jasmine-html-reporter"), + require("karma-coverage"), + require("@angular-devkit/build-angular/plugins/karma"), + ], + client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false, // leave Jasmine Spec Runner output visible in browser + }, + jasmineHtmlReporter: { + suppressAll: true, // removes the duplicated traces + }, + coverageReporter: { + dir: require("path").join(__dirname, "./coverage/fuse"), + subdir: ".", + reporters: [{ type: "html" }, { type: "text-summary" }], + }, + reporters: ["progress", "kjhtml"], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ["Chrome"], + singleRun: false, + restartOnFileChange: true, + }); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..6ea5254 --- /dev/null +++ b/package.json @@ -0,0 +1,81 @@ +{ + "name": "@fuse/starter", + "version": "14.2.0", + "description": "Fuse - Angular Admin Template and Starter Project", + "author": "https://themeforest.net/user/srcn", + "license": "https://themeforest.net/licenses/standard", + "private": true, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test", + "lint": "ng lint" + }, + "dependencies": { + "@angular/animations": "13.2.3", + "@angular/cdk": "13.2.3", + "@angular/common": "13.2.3", + "@angular/compiler": "13.2.3", + "@angular/core": "13.2.3", + "@angular/forms": "13.2.3", + "@angular/material": "13.2.3", + "@angular/material-moment-adapter": "13.2.3", + "@angular/platform-browser": "13.2.3", + "@angular/platform-browser-dynamic": "13.2.3", + "@angular/router": "13.2.3", + "@ngneat/transloco": "3.1.4", + "apexcharts": "3.33.1", + "crypto-js": "3.3.0", + "highlight.js": "11.4.0", + "lodash-es": "4.17.21", + "moment": "2.29.1", + "ng-apexcharts": "1.7.0", + "ngx-markdown": "13.1.0", + "ngx-quill": "16.1.2", + "perfect-scrollbar": "1.5.3", + "quill": "1.3.7", + "rxjs": "7.5.4", + "tslib": "2.3.1", + "zone.js": "0.11.4" + }, + "devDependencies": { + "@angular-devkit/build-angular": "13.2.4", + "@angular-eslint/builder": "13.1.0", + "@angular-eslint/eslint-plugin": "13.1.0", + "@angular-eslint/eslint-plugin-template": "13.1.0", + "@angular-eslint/schematics": "13.1.0", + "@angular-eslint/template-parser": "13.1.0", + "@angular/cli": "13.2.4", + "@angular/compiler-cli": "13.2.3", + "@tailwindcss/aspect-ratio": "0.4.0", + "@tailwindcss/line-clamp": "0.3.1", + "@tailwindcss/typography": "0.5.2", + "@types/chroma-js": "2.1.3", + "@types/crypto-js": "3.1.47", + "@types/highlight.js": "10.1.0", + "@types/jasmine": "3.10.3", + "@types/lodash": "4.14.178", + "@types/lodash-es": "4.17.6", + "@types/node": "12.20.46", + "@typescript-eslint/eslint-plugin": "5.12.0", + "@typescript-eslint/parser": "5.12.0", + "autoprefixer": "10.4.2", + "chroma-js": "2.4.2", + "eslint": "8.9.0", + "eslint-plugin-import": "2.25.4", + "eslint-plugin-jsdoc": "37.9.4", + "eslint-plugin-prefer-arrow": "1.2.3", + "jasmine-core": "4.0.0", + "karma": "6.3.16", + "karma-chrome-launcher": "3.1.0", + "karma-coverage": "2.1.1", + "karma-jasmine": "4.0.1", + "karma-jasmine-html-reporter": "1.7.0", + "lodash": "4.17.21", + "postcss": "8.4.6", + "tailwindcss": "3.0.23", + "typescript": "4.5.5" + } +} diff --git a/src/@fuse/animations/defaults.ts b/src/@fuse/animations/defaults.ts new file mode 100644 index 0000000..4da64f6 --- /dev/null +++ b/src/@fuse/animations/defaults.ts @@ -0,0 +1,12 @@ +export class FuseAnimationCurves { + static standard = 'cubic-bezier(0.4, 0.0, 0.2, 1)'; + static deceleration = 'cubic-bezier(0.0, 0.0, 0.2, 1)'; + static acceleration = 'cubic-bezier(0.4, 0.0, 1, 1)'; + static sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)'; +} + +export class FuseAnimationDurations { + static complex = '375ms'; + static entering = '225ms'; + static exiting = '195ms'; +} diff --git a/src/@fuse/animations/expand-collapse.ts b/src/@fuse/animations/expand-collapse.ts new file mode 100644 index 0000000..60b6390 --- /dev/null +++ b/src/@fuse/animations/expand-collapse.ts @@ -0,0 +1,34 @@ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults'; + +// ----------------------------------------------------------------------------------------------------- +// @ Expand / collapse +// ----------------------------------------------------------------------------------------------------- +const expandCollapse = trigger('expandCollapse', + [ + state('void, collapsed', + style({ + height: '0' + }) + ), + + state('*, expanded', + style('*') + ), + + // Prevent the transition if the state is false + transition('void <=> false, collapsed <=> false, expanded <=> false', []), + + // Transition + transition('void <=> *, collapsed <=> expanded', + animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +export { expandCollapse }; diff --git a/src/@fuse/animations/fade.ts b/src/@fuse/animations/fade.ts new file mode 100644 index 0000000..a2982b7 --- /dev/null +++ b/src/@fuse/animations/fade.ts @@ -0,0 +1,330 @@ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults'; + +// ----------------------------------------------------------------------------------------------------- +// @ Fade in +// ----------------------------------------------------------------------------------------------------- +const fadeIn = trigger('fadeIn', + [ + state('void', + style({ + opacity: 0 + }) + ), + + state('*', + style({ + opacity: 1 + }) + ), + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Fade in top +// ----------------------------------------------------------------------------------------------------- +const fadeInTop = trigger('fadeInTop', + [ + state('void', + style({ + opacity : 0, + transform: 'translate3d(0, -100%, 0)' + }) + ), + + state('*', + style({ + opacity : 1, + transform: 'translate3d(0, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Fade in bottom +// ----------------------------------------------------------------------------------------------------- +const fadeInBottom = trigger('fadeInBottom', + [ + state('void', + style({ + opacity : 0, + transform: 'translate3d(0, 100%, 0)' + }) + ), + + state('*', + style({ + opacity : 1, + transform: 'translate3d(0, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Fade in left +// ----------------------------------------------------------------------------------------------------- +const fadeInLeft = trigger('fadeInLeft', + [ + state('void', + style({ + opacity : 0, + transform: 'translate3d(-100%, 0, 0)' + }) + ), + + state('*', + style({ + opacity : 1, + transform: 'translate3d(0, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Fade in right +// ----------------------------------------------------------------------------------------------------- +const fadeInRight = trigger('fadeInRight', + [ + state('void', + style({ + opacity : 0, + transform: 'translate3d(100%, 0, 0)' + }) + ), + + state('*', + style({ + opacity : 1, + transform: 'translate3d(0, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Fade out +// ----------------------------------------------------------------------------------------------------- +const fadeOut = trigger('fadeOut', + [ + state('*', + style({ + opacity: 1 + }) + ), + + state('void', + style({ + opacity: 0 + }) + ), + + // Prevent the transition if the state is false + transition('false => void', []), + + // Transition + transition('* => void', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Fade out top +// ----------------------------------------------------------------------------------------------------- +const fadeOutTop = trigger('fadeOutTop', + [ + state('*', + style({ + opacity : 1, + transform: 'translate3d(0, 0, 0)' + }) + ), + + state('void', + style({ + opacity : 0, + transform: 'translate3d(0, -100%, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('false => void', []), + + // Transition + transition('* => void', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Fade out bottom +// ----------------------------------------------------------------------------------------------------- +const fadeOutBottom = trigger('fadeOutBottom', + [ + state('*', + style({ + opacity : 1, + transform: 'translate3d(0, 0, 0)' + }) + ), + + state('void', + style({ + opacity : 0, + transform: 'translate3d(0, 100%, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('false => void', []), + + // Transition + transition('* => void', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Fade out left +// ----------------------------------------------------------------------------------------------------- +const fadeOutLeft = trigger('fadeOutLeft', + [ + state('*', + style({ + opacity : 1, + transform: 'translate3d(0, 0, 0)' + }) + ), + + state('void', + style({ + opacity : 0, + transform: 'translate3d(-100%, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('false => void', []), + + // Transition + transition('* => void', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Fade out right +// ----------------------------------------------------------------------------------------------------- +const fadeOutRight = trigger('fadeOutRight', + [ + state('*', + style({ + opacity : 1, + transform: 'translate3d(0, 0, 0)' + }) + ), + + state('void', + style({ + opacity : 0, + transform: 'translate3d(100%, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('false => void', []), + + // Transition + transition('* => void', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` + } + } + ) + ] +); + +export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight }; diff --git a/src/@fuse/animations/index.ts b/src/@fuse/animations/index.ts new file mode 100644 index 0000000..e366978 --- /dev/null +++ b/src/@fuse/animations/index.ts @@ -0,0 +1 @@ +export * from '@fuse/animations/public-api'; diff --git a/src/@fuse/animations/public-api.ts b/src/@fuse/animations/public-api.ts new file mode 100644 index 0000000..3e7cd5a --- /dev/null +++ b/src/@fuse/animations/public-api.ts @@ -0,0 +1,15 @@ +import { expandCollapse } from '@fuse/animations/expand-collapse'; +import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@fuse/animations/fade'; +import { shake } from '@fuse/animations/shake'; +import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@fuse/animations/slide'; +import { zoomIn, zoomOut } from '@fuse/animations/zoom'; + +export const fuseAnimations = [ + expandCollapse, + fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, + fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight, + shake, + slideInTop, slideInBottom, slideInLeft, slideInRight, + slideOutTop, slideOutBottom, slideOutLeft, slideOutRight, + zoomIn, zoomOut +]; diff --git a/src/@fuse/animations/shake.ts b/src/@fuse/animations/shake.ts new file mode 100644 index 0000000..2742345 --- /dev/null +++ b/src/@fuse/animations/shake.ts @@ -0,0 +1,73 @@ +import { animate, keyframes, style, transition, trigger } from '@angular/animations'; + +// ----------------------------------------------------------------------------------------------------- +// @ Shake +// ----------------------------------------------------------------------------------------------------- +const shake = trigger('shake', + [ + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *, * => true', + [ + animate('{{timings}}', + keyframes([ + style({ + transform: 'translate3d(0, 0, 0)', + offset : 0 + }), + style({ + transform: 'translate3d(-10px, 0, 0)', + offset : 0.1 + }), + style({ + transform: 'translate3d(10px, 0, 0)', + offset : 0.2 + }), + style({ + transform: 'translate3d(-10px, 0, 0)', + offset : 0.3 + }), + style({ + transform: 'translate3d(10px, 0, 0)', + offset : 0.4 + }), + style({ + transform: 'translate3d(-10px, 0, 0)', + offset : 0.5 + }), + style({ + transform: 'translate3d(10px, 0, 0)', + offset : 0.6 + }), + style({ + transform: 'translate3d(-10px, 0, 0)', + offset : 0.7 + }), + style({ + transform: 'translate3d(10px, 0, 0)', + offset : 0.8 + }), + style({ + transform: 'translate3d(-10px, 0, 0)', + offset : 0.9 + }), + style({ + transform: 'translate3d(0, 0, 0)', + offset : 1 + }) + ]) + ) + ], + { + params: { + timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)' + } + } + ) + ] +); + +export { shake }; diff --git a/src/@fuse/animations/slide.ts b/src/@fuse/animations/slide.ts new file mode 100644 index 0000000..08a80ba --- /dev/null +++ b/src/@fuse/animations/slide.ts @@ -0,0 +1,252 @@ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults'; + +// ----------------------------------------------------------------------------------------------------- +// @ Slide in top +// ----------------------------------------------------------------------------------------------------- +const slideInTop = trigger('slideInTop', + [ + state('void', + style({ + transform: 'translate3d(0, -100%, 0)' + }) + ), + + state('*', + style({ + transform: 'translate3d(0, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Slide in bottom +// ----------------------------------------------------------------------------------------------------- +const slideInBottom = trigger('slideInBottom', + [ + state('void', + style({ + transform: 'translate3d(0, 100%, 0)' + }) + ), + + state('*', + style({ + transform: 'translate3d(0, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Slide in left +// ----------------------------------------------------------------------------------------------------- +const slideInLeft = trigger('slideInLeft', + [ + state('void', + style({ + transform: 'translate3d(-100%, 0, 0)' + }) + ), + + state('*', + style({ + transform: 'translate3d(0, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Slide in right +// ----------------------------------------------------------------------------------------------------- +const slideInRight = trigger('slideInRight', + [ + state('void', + style({ + transform: 'translate3d(100%, 0, 0)' + }) + ), + + state('*', + style({ + transform: 'translate3d(0, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Slide out top +// ----------------------------------------------------------------------------------------------------- +const slideOutTop = trigger('slideOutTop', + [ + state('*', + style({ + transform: 'translate3d(0, 0, 0)' + }) + ), + + state('void', + style({ + transform: 'translate3d(0, -100%, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('false => void', []), + + // Transition + transition('* => void', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Slide out bottom +// ----------------------------------------------------------------------------------------------------- +const slideOutBottom = trigger('slideOutBottom', + [ + state('*', + style({ + transform: 'translate3d(0, 0, 0)' + }) + ), + + state('void', + style({ + transform: 'translate3d(0, 100%, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('false => void', []), + + // Transition + transition('* => void', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Slide out left +// ----------------------------------------------------------------------------------------------------- +const slideOutLeft = trigger('slideOutLeft', + [ + state('*', + style({ + transform: 'translate3d(0, 0, 0)' + }) + ), + + state('void', + style({ + transform: 'translate3d(-100%, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('false => void', []), + + // Transition + transition('* => void', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Slide out right +// ----------------------------------------------------------------------------------------------------- +const slideOutRight = trigger('slideOutRight', + [ + state('*', + style({ + transform: 'translate3d(0, 0, 0)' + }) + ), + + state('void', + style({ + transform: 'translate3d(100%, 0, 0)' + }) + ), + + // Prevent the transition if the state is false + transition('false => void', []), + + // Transition + transition('* => void', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` + } + } + ) + ] +); + +export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight }; diff --git a/src/@fuse/animations/zoom.ts b/src/@fuse/animations/zoom.ts new file mode 100644 index 0000000..c974251 --- /dev/null +++ b/src/@fuse/animations/zoom.ts @@ -0,0 +1,73 @@ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults'; + +// ----------------------------------------------------------------------------------------------------- +// @ Zoom in +// ----------------------------------------------------------------------------------------------------- +const zoomIn = trigger('zoomIn', + [ + + state('void', + style({ + opacity : 0, + transform: 'scale(0.5)' + }) + ), + + state('*', + style({ + opacity : 1, + transform: 'scale(1)' + }) + ), + + // Prevent the transition if the state is false + transition('void => false', []), + + // Transition + transition('void => *', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` + } + } + ) + ] +); + +// ----------------------------------------------------------------------------------------------------- +// @ Zoom out +// ----------------------------------------------------------------------------------------------------- +const zoomOut = trigger('zoomOut', + [ + + state('*', + style({ + opacity : 1, + transform: 'scale(1)' + }) + ), + + state('void', + style({ + opacity : 0, + transform: 'scale(0.5)' + }) + ), + + // Prevent the transition if the state is false + transition('false => void', []), + + // Transition + transition('* => void', animate('{{timings}}'), + { + params: { + timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` + } + } + ) + ] +); + +export { zoomIn, zoomOut }; + diff --git a/src/@fuse/components/alert/alert.component.html b/src/@fuse/components/alert/alert.component.html new file mode 100644 index 0000000..e76b8e1 --- /dev/null +++ b/src/@fuse/components/alert/alert.component.html @@ -0,0 +1,76 @@ +
+ +
+ + +
+ +
+ +
+ + +
+ + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+ +
+ +
+
+ + + +
diff --git a/src/@fuse/components/alert/alert.component.scss b/src/@fuse/components/alert/alert.component.scss new file mode 100644 index 0000000..4b1a86c --- /dev/null +++ b/src/@fuse/components/alert/alert.component.scss @@ -0,0 +1,1340 @@ +fuse-alert { + display: block; + + /* Common */ + .fuse-alert-container { + position: relative; + display: flex; + padding: 16px; + font-size: 14px; + line-height: 1; + + /* All icons */ + .mat-icon { + color: currentColor !important; + } + + /* Icon */ + .fuse-alert-icon { + display: flex; + align-items: flex-start; + + .fuse-alert-custom-icon, + .fuse-alert-default-icon { + display: none; + align-items: center; + justify-content: center; + border-radius: 50%; + + &:not(:empty) { + display: flex; + margin-right: 12px; + } + } + + .fuse-alert-default-icon { + + .mat-icon { + @apply icon-size-5; + } + } + + .fuse-alert-custom-icon { + display: none; + + &:not(:empty) { + display: flex; + + + .fuse-alert-default-icon { + display: none; + } + } + } + } + + /* Content */ + .fuse-alert-content { + display: flex; + flex-direction: column; + justify-content: center; + line-height: 1; + + /* Title */ + .fuse-alert-title { + display: none; + font-weight: 600; + line-height: 20px; + + &:not(:empty) { + display: block; + + /* Alert that comes after the title */ + + .fuse-alert-message { + + &:not(:empty) { + margin-top: 4px; + } + } + } + } + + /* Alert */ + .fuse-alert-message { + display: none; + line-height: 20px; + + &:not(:empty) { + display: block; + } + } + } + + /* Dismiss button */ + .fuse-alert-dismiss-button { + position: absolute; + top: 10px; + right: 10px; + width: 32px !important; + min-width: 32px !important; + height: 32px !important; + min-height: 32px !important; + line-height: 32px !important; + + .mat-icon { + @apply icon-size-4; + } + } + } + + /* Dismissible */ + &.fuse-alert-dismissible { + + .fuse-alert-container { + + .fuse-alert-content { + margin-right: 32px; + } + } + } + + &:not(.fuse-alert-dismissible) { + + .fuse-alert-container { + + .fuse-alert-dismiss-button { + display: none !important; + } + } + } + + /* Border */ + &.fuse-alert-appearance-border { + + .fuse-alert-container { + position: relative; + overflow: hidden; + border-radius: 6px; + @apply shadow-md bg-card; + + .fuse-alert-border { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + } + + .fuse-alert-message { + @apply text-gray-600; + } + } + + /* Primary */ + &.fuse-alert-type-primary { + + .fuse-alert-container { + + .fuse-alert-border { + @apply bg-primary; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-primary; + } + + .dark & { + @apply bg-gray-700; + + .fuse-alert-border { + @apply bg-primary-400; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-primary-400; + } + + .fuse-alert-message { + @apply text-gray-300; + } + + code { + @apply bg-gray-400 text-gray-800; + } + } + } + } + + /* Accent */ + &.fuse-alert-type-accent { + + .fuse-alert-container { + + .fuse-alert-border { + @apply bg-accent; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-accent; + } + + .dark & { + @apply bg-gray-700; + + .fuse-alert-border { + @apply bg-accent-400; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-accent-400; + } + + .fuse-alert-message { + @apply text-gray-300; + } + + code { + @apply bg-gray-400 text-gray-800; + } + } + } + } + + /* Warn */ + &.fuse-alert-type-warn { + + .fuse-alert-container { + + .fuse-alert-border { + @apply bg-warn; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-warn; + } + + .dark & { + @apply bg-gray-700; + + .fuse-alert-border { + @apply bg-warn-400; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-warn-400; + } + + .fuse-alert-message { + @apply text-gray-300; + } + + code { + @apply bg-gray-400 text-gray-800; + } + } + } + } + + /* Basic */ + &.fuse-alert-type-basic { + + .fuse-alert-container { + + .fuse-alert-border { + @apply bg-gray-600; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-gray-600; + } + + .dark & { + @apply bg-gray-700; + + .fuse-alert-border { + @apply bg-gray-400; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-gray-400; + } + + .fuse-alert-message { + @apply text-gray-300; + } + + code { + @apply bg-gray-400 text-gray-800; + } + } + } + } + + /* Info */ + &.fuse-alert-type-info { + + .fuse-alert-container { + + .fuse-alert-border { + @apply bg-blue-600; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-blue-700; + } + + .dark & { + @apply bg-gray-700; + + .fuse-alert-border { + @apply bg-blue-400; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-blue-400; + } + + .fuse-alert-message { + @apply text-gray-300; + } + + code { + @apply bg-gray-400 text-gray-800; + } + } + } + } + + /* Success */ + &.fuse-alert-type-success { + + .fuse-alert-container { + + .fuse-alert-border { + @apply bg-green-500; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-green-500; + } + + .dark & { + @apply bg-gray-700; + + .fuse-alert-border { + @apply bg-green-400; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-green-400; + } + + .fuse-alert-message { + @apply text-gray-300; + } + + code { + @apply bg-gray-400 text-gray-800; + } + } + } + } + + /* Warning */ + &.fuse-alert-type-warning { + + .fuse-alert-container { + + .fuse-alert-border { + @apply bg-amber-500; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-amber-500; + } + + .dark & { + @apply bg-gray-700; + + .fuse-alert-border { + @apply bg-amber-400; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-amber-400; + } + + .fuse-alert-message { + @apply text-gray-300; + } + + code { + @apply bg-gray-400 text-gray-800; + } + } + } + } + + /* Error */ + &.fuse-alert-type-error { + + .fuse-alert-container { + + .fuse-alert-border { + @apply bg-red-600; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-red-700; + } + + .dark & { + @apply bg-gray-700; + + .fuse-alert-border { + @apply bg-red-400; + } + + .fuse-alert-title, + .fuse-alert-icon { + @apply text-red-400; + } + + .fuse-alert-message { + @apply text-gray-300; + } + + code { + @apply bg-gray-400 text-gray-800; + } + } + } + } + } + + /* Fill */ + &.fuse-alert-appearance-fill { + + .fuse-alert-container { + border-radius: 6px; + + .fuse-alert-dismiss-button { + @apply text-white; + } + } + + /* Primary */ + &.fuse-alert-type-primary { + + .fuse-alert-container { + @apply bg-primary-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title { + @apply text-white; + } + + .fuse-alert-message { + @apply text-primary-100; + } + + code { + @apply text-primary-800 bg-primary-200; + } + } + } + + /* Accent */ + &.fuse-alert-type-accent { + + .fuse-alert-container { + @apply bg-accent-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title { + @apply text-white; + } + + .fuse-alert-message { + @apply text-accent-100; + } + + code { + @apply text-accent-800 bg-accent-200; + } + } + } + + /* Warn */ + &.fuse-alert-type-warn { + + .fuse-alert-container { + @apply bg-warn-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title { + @apply text-white; + } + + .fuse-alert-message { + @apply text-warn-100; + } + + code { + @apply text-warn-800 bg-warn-200; + } + } + } + + /* Basic */ + &.fuse-alert-type-basic { + + .fuse-alert-container { + @apply bg-gray-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title { + @apply text-white; + } + + .fuse-alert-message { + @apply text-gray-100; + } + + code { + @apply bg-gray-200 text-gray-800; + } + } + } + + /* Info */ + &.fuse-alert-type-info { + + .fuse-alert-container { + @apply bg-blue-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title { + @apply text-white; + } + + .fuse-alert-message { + @apply text-blue-100; + } + + code { + @apply bg-blue-200 text-blue-800; + } + } + } + + /* Success */ + &.fuse-alert-type-success { + + .fuse-alert-container { + @apply bg-green-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title { + @apply text-white; + } + + .fuse-alert-message { + @apply text-green-100; + } + + code { + @apply bg-green-200 text-gray-800; + } + } + } + + /* Warning */ + &.fuse-alert-type-warning { + + .fuse-alert-container { + @apply bg-amber-500; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title { + @apply text-white; + } + + .fuse-alert-message { + @apply text-amber-100; + } + + code { + @apply bg-amber-200 text-amber-800; + } + } + } + + /* Error */ + &.fuse-alert-type-error { + + .fuse-alert-container { + @apply bg-red-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title { + @apply text-white; + } + + .fuse-alert-message { + @apply text-red-100; + } + + code { + @apply bg-red-200 text-red-800; + } + } + } + } + + /* Outline */ + &.fuse-alert-appearance-outline { + + .fuse-alert-container { + border-radius: 6px; + } + + /* Primary */ + &.fuse-alert-type-primary { + + .fuse-alert-container { + @apply bg-primary-50 ring-1 ring-primary-400 ring-inset; + + .fuse-alert-icon { + @apply text-primary-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-primary-900; + } + + .fuse-alert-message { + @apply text-primary-700; + } + + code { + @apply text-primary-800 bg-primary-200; + } + + .dark & { + @apply bg-primary-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-primary-200; + } + } + } + } + + /* Accent */ + &.fuse-alert-type-accent { + + .fuse-alert-container { + @apply bg-accent-100 ring-1 ring-accent-400 ring-inset; + + .fuse-alert-icon { + @apply text-accent-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-accent-900; + } + + .fuse-alert-message { + @apply text-accent-700; + } + + code { + @apply text-accent-800 bg-accent-200; + } + + .dark & { + @apply bg-accent-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-accent-200; + } + } + } + } + + /* Warn */ + &.fuse-alert-type-warn { + + .fuse-alert-container { + @apply bg-warn-50 ring-1 ring-warn-400 ring-inset; + + .fuse-alert-icon { + @apply text-warn-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-warn-900; + } + + .fuse-alert-message { + @apply text-warn-700; + } + + code { + @apply text-warn-800 bg-warn-200; + } + + .dark & { + @apply bg-warn-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-warn-200; + } + } + } + } + + /* Basic */ + &.fuse-alert-type-basic { + + .fuse-alert-container { + @apply bg-gray-100 ring-1 ring-gray-400 ring-inset; + + .fuse-alert-icon { + @apply text-gray-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-gray-900; + } + + .fuse-alert-message { + @apply text-gray-700; + } + + code { + @apply bg-gray-200 text-gray-800; + } + + .dark & { + @apply bg-gray-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-gray-200; + } + } + } + } + + /* Info */ + &.fuse-alert-type-info { + + .fuse-alert-container { + @apply bg-blue-50 ring-1 ring-blue-400 ring-inset; + + .fuse-alert-icon { + @apply text-blue-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-blue-900; + } + + .fuse-alert-message { + @apply text-blue-700; + } + + code { + @apply bg-blue-200 text-blue-800; + } + + .dark & { + @apply bg-blue-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-blue-200; + } + } + } + } + + /* Success */ + &.fuse-alert-type-success { + + .fuse-alert-container { + @apply bg-green-50 ring-1 ring-green-400 ring-inset; + + .fuse-alert-icon { + @apply text-green-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-green-900; + } + + .fuse-alert-message { + @apply text-green-700; + } + + code { + @apply bg-green-200 text-green-800; + } + + .dark & { + @apply bg-green-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-green-200; + } + } + } + } + + /* Warning */ + &.fuse-alert-type-warning { + + .fuse-alert-container { + @apply bg-amber-50 ring-1 ring-amber-400 ring-inset; + + .fuse-alert-icon { + @apply text-amber-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-amber-900; + } + + .fuse-alert-message { + @apply text-amber-700; + } + + code { + @apply bg-amber-200 text-amber-800; + } + + .dark & { + @apply bg-amber-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-amber-200; + } + } + } + } + + /* Error */ + &.fuse-alert-type-error { + + .fuse-alert-container { + @apply bg-red-50 ring-1 ring-red-400 ring-inset; + + .fuse-alert-icon { + @apply text-red-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-red-900; + } + + .fuse-alert-message { + @apply text-red-700; + } + + code { + @apply bg-red-200 text-red-800; + } + + .dark & { + @apply bg-red-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-red-200; + } + } + } + } + } + + /* Soft */ + &.fuse-alert-appearance-soft { + + .fuse-alert-container { + border-radius: 6px; + } + + /* Primary */ + &.fuse-alert-type-primary { + + .fuse-alert-container { + @apply bg-primary-50; + + .fuse-alert-icon { + @apply text-primary-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-primary-900; + } + + .fuse-alert-message { + @apply text-primary-700; + } + + code { + @apply text-primary-800 bg-primary-200; + } + + .dark & { + @apply bg-primary-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-primary-200; + } + } + } + } + + /* Accent */ + &.fuse-alert-type-accent { + + .fuse-alert-container { + @apply bg-accent-100; + + .fuse-alert-icon { + @apply text-accent-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-accent-900; + } + + .fuse-alert-message { + @apply text-accent-700; + } + + code { + @apply text-accent-800 bg-accent-200; + } + + .dark & { + @apply bg-accent-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-accent-200; + } + } + } + } + + /* Warn */ + &.fuse-alert-type-warn { + + .fuse-alert-container { + @apply bg-warn-50; + + .fuse-alert-icon { + @apply text-warn-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-warn-900; + } + + .fuse-alert-message { + @apply text-warn-700; + } + + code { + @apply text-warn-800 bg-warn-200; + } + + .dark & { + @apply bg-warn-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-warn-200; + } + } + } + } + + /* Basic */ + &.fuse-alert-type-basic { + + .fuse-alert-container { + @apply bg-gray-100; + + .fuse-alert-icon { + @apply text-gray-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-gray-900; + } + + .fuse-alert-message { + @apply text-gray-700; + } + + code { + @apply bg-gray-200 text-gray-800; + } + + .dark & { + @apply bg-gray-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-gray-200; + } + } + } + } + + /* Info */ + &.fuse-alert-type-info { + + .fuse-alert-container { + @apply bg-blue-50; + + .fuse-alert-icon { + @apply text-blue-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-blue-900; + } + + .fuse-alert-message { + @apply text-blue-700; + } + + code { + @apply bg-blue-200 text-blue-800; + } + + .dark & { + @apply bg-blue-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-blue-200; + } + } + } + } + + /* Success */ + &.fuse-alert-type-success { + + .fuse-alert-container { + @apply bg-green-50; + + .fuse-alert-icon { + @apply text-green-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-green-900; + } + + .fuse-alert-message { + @apply text-green-700; + } + + code { + @apply bg-green-200 text-green-800; + } + + .dark & { + @apply bg-green-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-green-200; + } + } + } + } + + /* Warning */ + &.fuse-alert-type-warning { + + .fuse-alert-container { + @apply bg-amber-50; + + .fuse-alert-icon { + @apply text-amber-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-amber-900; + } + + .fuse-alert-message { + @apply text-amber-700; + } + + code { + @apply bg-amber-200 text-amber-800; + } + + .dark & { + @apply bg-amber-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-amber-200; + } + } + } + } + + /* Error */ + &.fuse-alert-type-error { + + .fuse-alert-container { + @apply bg-red-50; + + .fuse-alert-icon { + @apply text-red-600; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-red-900; + } + + .fuse-alert-message { + @apply text-red-700; + } + + code { + @apply bg-red-200 text-red-800; + } + + .dark & { + @apply bg-red-600; + + .fuse-alert-icon { + @apply text-white; + } + + .fuse-alert-title, + .fuse-alert-dismiss-button { + @apply text-white; + } + + .fuse-alert-message { + @apply text-red-200; + } + } + } + } + } +} diff --git a/src/@fuse/components/alert/alert.component.ts b/src/@fuse/components/alert/alert.component.ts new file mode 100644 index 0000000..736df33 --- /dev/null +++ b/src/@fuse/components/alert/alert.component.ts @@ -0,0 +1,213 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + EventEmitter, + HostBinding, + Input, + OnChanges, + OnDestroy, + OnInit, + Output, + SimpleChanges, + ViewEncapsulation, +} from '@angular/core'; +import { filter, Subject, takeUntil } from 'rxjs'; +import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; +import { fuseAnimations } from '@fuse/animations'; +import { + FuseAlertAppearance, + FuseAlertType, +} from '@fuse/components/alert/alert.types'; +import { FuseAlertService } from '@fuse/components/alert/alert.service'; +import { FuseUtilsService } from '@fuse/services/utils/utils.service'; + +@Component({ + selector: 'fuse-alert', + templateUrl: './alert.component.html', + styleUrls: ['./alert.component.scss'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + animations: fuseAnimations, + exportAs: 'fuseAlert', +}) +export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy { + /* eslint-disable @typescript-eslint/naming-convention */ + static ngAcceptInputType_dismissible: BooleanInput; + static ngAcceptInputType_dismissed: BooleanInput; + static ngAcceptInputType_showIcon: BooleanInput; + /* eslint-enable @typescript-eslint/naming-convention */ + + @Input() appearance: FuseAlertAppearance = 'soft'; + @Input() dismissed: boolean = false; + @Input() dismissible: boolean = false; + @Input() name: string = this._fuseUtilsService.randomId(); + @Input() showIcon: boolean = true; + @Input() type: FuseAlertType = 'primary'; + @Output() readonly dismissedChanged: EventEmitter = + new EventEmitter(); + + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseAlertService: FuseAlertService, + private _fuseUtilsService: FuseUtilsService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Host binding for component classes + */ + @HostBinding('class') get classList(): any { + return { + 'fuse-alert-appearance-border': this.appearance === 'border', + 'fuse-alert-appearance-fill': this.appearance === 'fill', + 'fuse-alert-appearance-outline': this.appearance === 'outline', + 'fuse-alert-appearance-soft': this.appearance === 'soft', + 'fuse-alert-dismissed': this.dismissed, + 'fuse-alert-dismissible': this.dismissible, + 'fuse-alert-show-icon': this.showIcon, + 'fuse-alert-type-primary': this.type === 'primary', + 'fuse-alert-type-accent': this.type === 'accent', + 'fuse-alert-type-warn': this.type === 'warn', + 'fuse-alert-type-basic': this.type === 'basic', + 'fuse-alert-type-info': this.type === 'info', + 'fuse-alert-type-success': this.type === 'success', + 'fuse-alert-type-warning': this.type === 'warning', + 'fuse-alert-type-error': this.type === 'error', + }; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void { + // Dismissed + if ('dismissed' in changes) { + // Coerce the value to a boolean + this.dismissed = coerceBooleanProperty(changes['dismissed'].currentValue); + + // Dismiss/show the alert + this._toggleDismiss(this.dismissed); + } + + // Dismissible + if ('dismissible' in changes) { + // Coerce the value to a boolean + this.dismissible = coerceBooleanProperty( + changes['dismissed'].currentValue + ); + } + + // Show icon + if ('showIcon' in changes) { + // Coerce the value to a boolean + this.showIcon = coerceBooleanProperty(changes['showIcon'].currentValue); + } + } + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to the dismiss calls + this._fuseAlertService.onDismiss + .pipe( + filter((name: any) => this.name === name), + takeUntil(this._unsubscribeAll) + ) + .subscribe(() => { + // Dismiss the alert + this.dismiss(); + }); + + // Subscribe to the show calls + this._fuseAlertService.onShow + .pipe( + filter((name: any) => this.name === name), + takeUntil(this._unsubscribeAll) + ) + .subscribe(() => { + // Show the alert + this.show(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Dismiss the alert + */ + dismiss(): void { + // Return if the alert is already dismissed + if (this.dismissed) { + return; + } + + // Dismiss the alert + this._toggleDismiss(true); + } + + /** + * Show the dismissed alert + */ + show(): void { + // Return if the alert is already showing + if (!this.dismissed) { + return; + } + + // Show the alert + this._toggleDismiss(false); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Dismiss/show the alert + * + * @param dismissed + * @private + */ + private _toggleDismiss(dismissed: boolean): void { + // Return if the alert is not dismissible + if (!this.dismissible) { + return; + } + + // Set the dismissed + this.dismissed = dismissed; + + // Execute the observable + this.dismissedChanged.next(this.dismissed); + + // Notify the change detector + this._changeDetectorRef.markForCheck(); + } +} diff --git a/src/@fuse/components/alert/alert.module.ts b/src/@fuse/components/alert/alert.module.ts new file mode 100644 index 0000000..beecabd --- /dev/null +++ b/src/@fuse/components/alert/alert.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { FuseAlertComponent } from '@fuse/components/alert/alert.component'; + +@NgModule({ + declarations: [ + FuseAlertComponent + ], + imports : [ + CommonModule, + MatButtonModule, + MatIconModule + ], + exports : [ + FuseAlertComponent + ] +}) +export class FuseAlertModule +{ +} diff --git a/src/@fuse/components/alert/alert.service.ts b/src/@fuse/components/alert/alert.service.ts new file mode 100644 index 0000000..a04dbe5 --- /dev/null +++ b/src/@fuse/components/alert/alert.service.ts @@ -0,0 +1,77 @@ +import { Injectable } from '@angular/core'; +import { Observable, ReplaySubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class FuseAlertService +{ + private readonly _onDismiss: ReplaySubject = new ReplaySubject(1); + private readonly _onShow: ReplaySubject = new ReplaySubject(1); + + /** + * Constructor + */ + constructor() + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for onDismiss + */ + get onDismiss(): Observable + { + return this._onDismiss.asObservable(); + } + + /** + * Getter for onShow + */ + get onShow(): Observable + { + return this._onShow.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Dismiss the alert + * + * @param name + */ + dismiss(name: string): void + { + // Return if the name is not provided + if ( !name ) + { + return; + } + + // Execute the observable + this._onDismiss.next(name); + } + + /** + * Show the dismissed alert + * + * @param name + */ + show(name: string): void + { + // Return if the name is not provided + if ( !name ) + { + return; + } + + // Execute the observable + this._onShow.next(name); + } + +} diff --git a/src/@fuse/components/alert/alert.types.ts b/src/@fuse/components/alert/alert.types.ts new file mode 100644 index 0000000..fc3516e --- /dev/null +++ b/src/@fuse/components/alert/alert.types.ts @@ -0,0 +1,15 @@ +export type FuseAlertAppearance = + | 'border' + | 'fill' + | 'outline' + | 'soft'; + +export type FuseAlertType = + | 'primary' + | 'accent' + | 'warn' + | 'basic' + | 'info' + | 'success' + | 'warning' + | 'error'; diff --git a/src/@fuse/components/alert/index.ts b/src/@fuse/components/alert/index.ts new file mode 100644 index 0000000..c18a807 --- /dev/null +++ b/src/@fuse/components/alert/index.ts @@ -0,0 +1 @@ +export * from '@fuse/components/alert/public-api'; diff --git a/src/@fuse/components/alert/public-api.ts b/src/@fuse/components/alert/public-api.ts new file mode 100644 index 0000000..fdf984a --- /dev/null +++ b/src/@fuse/components/alert/public-api.ts @@ -0,0 +1,4 @@ +export * from '@fuse/components/alert/alert.component'; +export * from '@fuse/components/alert/alert.module'; +export * from '@fuse/components/alert/alert.service'; +export * from '@fuse/components/alert/alert.types'; diff --git a/src/@fuse/components/card/card.component.html b/src/@fuse/components/card/card.component.html new file mode 100644 index 0000000..621c935 --- /dev/null +++ b/src/@fuse/components/card/card.component.html @@ -0,0 +1,23 @@ + + + +
+ +
+ + +
+ +
+
+ + + + + + + +
+ +
+
diff --git a/src/@fuse/components/card/card.component.scss b/src/@fuse/components/card/card.component.scss new file mode 100644 index 0000000..2e2719d --- /dev/null +++ b/src/@fuse/components/card/card.component.scss @@ -0,0 +1,63 @@ +fuse-card { + position: relative; + display: flex; + overflow: hidden; + @apply rounded-2xl shadow bg-card; + + /* Flippable */ + &.fuse-card-flippable { + border-radius: 0; + overflow: visible; + transform-style: preserve-3d; + transition: transform 1s; + perspective: 600px; + background: transparent; + @apply shadow-none; + + &.fuse-card-face-back { + + .fuse-card-front { + visibility: hidden; + opacity: 0; + transform: rotateY(180deg); + } + + .fuse-card-back { + visibility: visible; + opacity: 1; + transform: rotateY(360deg); + } + } + + .fuse-card-front, + .fuse-card-back { + display: flex; + flex-direction: column; + flex: 1 1 auto; + z-index: 10; + transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s; + backface-visibility: hidden; + @apply rounded-2xl shadow bg-card; + } + + .fuse-card-front { + position: relative; + opacity: 1; + visibility: visible; + transform: rotateY(0deg); + overflow: hidden; + } + + .fuse-card-back { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0; + visibility: hidden; + transform: rotateY(180deg); + overflow: hidden auto; + } + } +} diff --git a/src/@fuse/components/card/card.component.ts b/src/@fuse/components/card/card.component.ts new file mode 100644 index 0000000..1c9bfed --- /dev/null +++ b/src/@fuse/components/card/card.component.ts @@ -0,0 +1,74 @@ +import { + Component, + HostBinding, + Input, + OnChanges, + SimpleChanges, + ViewEncapsulation, +} from '@angular/core'; +import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseCardFace } from '@fuse/components/card/card.types'; + +@Component({ + selector: 'fuse-card', + templateUrl: './card.component.html', + styleUrls: ['./card.component.scss'], + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations, + exportAs: 'fuseCard', +}) +export class FuseCardComponent implements OnChanges { + /* eslint-disable @typescript-eslint/naming-convention */ + static ngAcceptInputType_expanded: BooleanInput; + static ngAcceptInputType_flippable: BooleanInput; + /* eslint-enable @typescript-eslint/naming-convention */ + + @Input() expanded: boolean = false; + @Input() face: FuseCardFace = 'front'; + @Input() flippable: boolean = false; + + /** + * Constructor + */ + constructor() {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Host binding for component classes + */ + @HostBinding('class') get classList(): any { + return { + 'fuse-card-expanded': this.expanded, + 'fuse-card-face-back': this.flippable && this.face === 'back', + 'fuse-card-face-front': this.flippable && this.face === 'front', + 'fuse-card-flippable': this.flippable, + }; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void { + // Expanded + if ('expanded' in changes) { + // Coerce the value to a boolean + this.expanded = coerceBooleanProperty(changes['expanded'].currentValue); + } + + // Flippable + if ('flippable' in changes) { + // Coerce the value to a boolean + this.flippable = coerceBooleanProperty(changes['flippable'].currentValue); + } + } +} diff --git a/src/@fuse/components/card/card.module.ts b/src/@fuse/components/card/card.module.ts new file mode 100644 index 0000000..c600e30 --- /dev/null +++ b/src/@fuse/components/card/card.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FuseCardComponent } from '@fuse/components/card/card.component'; + +@NgModule({ + declarations: [ + FuseCardComponent + ], + imports : [ + CommonModule + ], + exports : [ + FuseCardComponent + ] +}) +export class FuseCardModule +{ +} diff --git a/src/@fuse/components/card/card.types.ts b/src/@fuse/components/card/card.types.ts new file mode 100644 index 0000000..d925642 --- /dev/null +++ b/src/@fuse/components/card/card.types.ts @@ -0,0 +1,3 @@ +export type FuseCardFace = + | 'front' + | 'back'; diff --git a/src/@fuse/components/card/index.ts b/src/@fuse/components/card/index.ts new file mode 100644 index 0000000..ac978a7 --- /dev/null +++ b/src/@fuse/components/card/index.ts @@ -0,0 +1 @@ +export * from '@fuse/components/card/public-api'; diff --git a/src/@fuse/components/card/public-api.ts b/src/@fuse/components/card/public-api.ts new file mode 100644 index 0000000..ee2ca6e --- /dev/null +++ b/src/@fuse/components/card/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/components/card/card.component'; +export * from '@fuse/components/card/card.module'; diff --git a/src/@fuse/components/drawer/drawer.component.html b/src/@fuse/components/drawer/drawer.component.html new file mode 100644 index 0000000..6d24f62 --- /dev/null +++ b/src/@fuse/components/drawer/drawer.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/@fuse/components/drawer/drawer.component.scss b/src/@fuse/components/drawer/drawer.component.scss new file mode 100644 index 0000000..e10cad2 --- /dev/null +++ b/src/@fuse/components/drawer/drawer.component.scss @@ -0,0 +1,133 @@ +/* Variables */ +:root { + --fuse-drawer-width: 320px; +} + +fuse-drawer { + position: relative; + display: flex; + flex-direction: column; + flex: 1 1 auto; + width: var(--fuse-drawer-width); + min-width: var(--fuse-drawer-width); + max-width: var(--fuse-drawer-width); + z-index: 300; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35); + @apply bg-card; + + /* Animations */ + &.fuse-drawer-animations-enabled { + transition-duration: 400ms; + transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); + transition-property: visibility, margin-left, margin-right, transform, width, max-width, min-width; + + .fuse-drawer-content { + transition-duration: 400ms; + transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); + transition-property: width, max-width, min-width; + } + } + + /* Over mode */ + &.fuse-drawer-mode-over { + position: absolute; + top: 0; + bottom: 0; + + /* Fixed mode */ + &.fuse-drawer-fixed { + position: fixed; + } + } + + /* Left position */ + &.fuse-drawer-position-left { + + /* Side mode */ + &.fuse-drawer-mode-side { + margin-left: calc(var(--fuse-drawer-width) * -1); + + &.fuse-drawer-opened { + margin-left: 0; + } + } + + /* Over mode */ + &.fuse-drawer-mode-over { + left: 0; + transform: translate3d(-100%, 0, 0); + + &.fuse-drawer-opened { + transform: translate3d(0, 0, 0); + } + } + + /* Content */ + .fuse-drawer-content { + left: 0; + } + } + + /* Right position */ + &.fuse-drawer-position-right { + + /* Side mode */ + &.fuse-drawer-mode-side { + margin-right: calc(var(--fuse-drawer-width) * -1); + + &.fuse-drawer-opened { + margin-right: 0; + } + } + + /* Over mode */ + &.fuse-drawer-mode-over { + right: 0; + transform: translate3d(100%, 0, 0); + + &.fuse-drawer-opened { + transform: translate3d(0, 0, 0); + } + } + + /* Content */ + .fuse-drawer-content { + right: 0; + } + } + + /* Content */ + .fuse-drawer-content { + position: absolute; + display: flex; + flex: 1 1 auto; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + overflow: hidden; + @apply bg-card; + } +} + +/* Overlay */ +.fuse-drawer-overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 299; + opacity: 1; + background-color: rgba(0, 0, 0, 0.6); + + /* Fixed mode */ + &.fuse-drawer-overlay-fixed { + position: fixed; + } + + /* Transparent overlay */ + &.fuse-drawer-overlay-transparent { + background-color: transparent; + } +} diff --git a/src/@fuse/components/drawer/drawer.component.ts b/src/@fuse/components/drawer/drawer.component.ts new file mode 100644 index 0000000..1ad8b50 --- /dev/null +++ b/src/@fuse/components/drawer/drawer.component.ts @@ -0,0 +1,434 @@ +import { + Component, + ElementRef, + EventEmitter, + HostBinding, + HostListener, + Input, + OnChanges, + OnDestroy, + OnInit, + Output, + Renderer2, + SimpleChanges, + ViewEncapsulation, +} from '@angular/core'; +import { + animate, + AnimationBuilder, + AnimationPlayer, + style, +} from '@angular/animations'; +import { + FuseDrawerMode, + FuseDrawerPosition, +} from '@fuse/components/drawer/drawer.types'; +import { FuseDrawerService } from '@fuse/components/drawer/drawer.service'; +import { FuseUtilsService } from '@fuse/services/utils/utils.service'; +import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; + +@Component({ + selector: 'fuse-drawer', + templateUrl: './drawer.component.html', + styleUrls: ['./drawer.component.scss'], + encapsulation: ViewEncapsulation.None, + exportAs: 'fuseDrawer', +}) +export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy { + /* eslint-disable @typescript-eslint/naming-convention */ + static ngAcceptInputType_fixed: BooleanInput; + static ngAcceptInputType_opened: BooleanInput; + static ngAcceptInputType_transparentOverlay: BooleanInput; + /* eslint-enable @typescript-eslint/naming-convention */ + + @Input() fixed: boolean = false; + @Input() mode: FuseDrawerMode = 'side'; + @Input() name: string = this._fuseUtilsService.randomId(); + @Input() opened: boolean = false; + @Input() position: FuseDrawerPosition = 'left'; + @Input() transparentOverlay: boolean = false; + @Output() readonly fixedChanged: EventEmitter = + new EventEmitter(); + @Output() readonly modeChanged: EventEmitter = + new EventEmitter(); + @Output() readonly openedChanged: EventEmitter = + new EventEmitter(); + @Output() readonly positionChanged: EventEmitter = + new EventEmitter(); + + private _animationsEnabled: boolean = false; + private _hovered: boolean = false; + private _overlay?: HTMLElement; + private _player?: AnimationPlayer; + + /** + * Constructor + */ + constructor( + private _animationBuilder: AnimationBuilder, + private _elementRef: ElementRef, + private _renderer2: Renderer2, + private _fuseDrawerService: FuseDrawerService, + private _fuseUtilsService: FuseUtilsService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Host binding for component classes + */ + @HostBinding('class') get classList(): any { + return { + 'fuse-drawer-animations-enabled': this._animationsEnabled, + 'fuse-drawer-fixed': this.fixed, + 'fuse-drawer-hover': this._hovered, + [`fuse-drawer-mode-${this.mode}`]: true, + 'fuse-drawer-opened': this.opened, + [`fuse-drawer-position-${this.position}`]: true, + }; + } + + /** + * Host binding for component inline styles + */ + @HostBinding('style') get styleList(): any { + return { + visibility: this.opened ? 'visible' : 'hidden', + }; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Decorated methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On mouseenter + * + * @private + */ + @HostListener('mouseenter') + private _onMouseenter(): void { + // Enable the animations + this._enableAnimations(); + + // Set the hovered + this._hovered = true; + } + + /** + * On mouseleave + * + * @private + */ + @HostListener('mouseleave') + private _onMouseleave(): void { + // Enable the animations + this._enableAnimations(); + + // Set the hovered + this._hovered = false; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void { + // Fixed + if ('fixed' in changes) { + // Coerce the value to a boolean + this.fixed = coerceBooleanProperty(changes['fixed'].currentValue); + + // Execute the observable + this.fixedChanged.next(this.fixed); + } + + // Mode + if ('mode' in changes) { + // Get the previous and current values + const previousMode = changes['mode'].previousValue; + const currentMode = changes['mode'].currentValue; + + // Disable the animations + this._disableAnimations(); + + // If the mode changes: 'over -> side' + if (previousMode === 'over' && currentMode === 'side') { + // Hide the overlay + this._hideOverlay(); + } + + // If the mode changes: 'side -> over' + if (previousMode === 'side' && currentMode === 'over') { + // If the drawer is opened + if (this.opened) { + // Show the overlay + this._showOverlay(); + } + } + + // Execute the observable + this.modeChanged.next(currentMode); + + // Enable the animations after a delay + // The delay must be bigger than the current transition-duration + // to make sure nothing will be animated while the mode is changing + setTimeout(() => { + this._enableAnimations(); + }, 500); + } + + // Opened + if ('opened' in changes) { + // Coerce the value to a boolean + const open = coerceBooleanProperty(changes['opened'].currentValue); + + // Open/close the drawer + this._toggleOpened(open); + } + + // Position + if ('position' in changes) { + // Execute the observable + this.positionChanged.next(this.position); + } + + // Transparent overlay + if ('transparentOverlay' in changes) { + // Coerce the value to a boolean + this.transparentOverlay = coerceBooleanProperty( + changes['transparentOverlay'].currentValue + ); + } + } + + /** + * On init + */ + ngOnInit(): void { + // Register the drawer + this._fuseDrawerService.registerComponent(this.name, this); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Finish the animation + if (this._player) { + this._player.finish(); + } + + // Deregister the drawer from the registry + this._fuseDrawerService.deregisterComponent(this.name); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Open the drawer + */ + open(): void { + // Return if the drawer has already opened + if (this.opened) { + return; + } + + // Open the drawer + this._toggleOpened(true); + } + + /** + * Close the drawer + */ + close(): void { + // Return if the drawer has already closed + if (!this.opened) { + return; + } + + // Close the drawer + this._toggleOpened(false); + } + + /** + * Toggle the drawer + */ + toggle(): void { + if (this.opened) { + this.close(); + } else { + this.open(); + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Enable the animations + * + * @private + */ + private _enableAnimations(): void { + // Return if the animations are already enabled + if (this._animationsEnabled) { + return; + } + + // Enable the animations + this._animationsEnabled = true; + } + + /** + * Disable the animations + * + * @private + */ + private _disableAnimations(): void { + // Return if the animations are already disabled + if (!this._animationsEnabled) { + return; + } + + // Disable the animations + this._animationsEnabled = false; + } + + /** + * Show the backdrop + * + * @private + */ + private _showOverlay(): void { + // Create the backdrop element + this._overlay = this._renderer2.createElement('div'); + + // Return if overlay couldn't be create for some reason + if (!this._overlay) { + return; + } + + // Add a class to the backdrop element + this._overlay.classList.add('fuse-drawer-overlay'); + + // Add a class depending on the fixed option + if (this.fixed) { + this._overlay.classList.add('fuse-drawer-overlay-fixed'); + } + + // Add a class depending on the transparentOverlay option + if (this.transparentOverlay) { + this._overlay.classList.add('fuse-drawer-overlay-transparent'); + } + + // Append the backdrop to the parent of the drawer + this._renderer2.appendChild( + this._elementRef.nativeElement.parentElement, + this._overlay + ); + + // Create the enter animation and attach it to the player + this._player = this._animationBuilder + .build([ + style({ opacity: 0 }), + animate( + '300ms cubic-bezier(0.25, 0.8, 0.25, 1)', + style({ opacity: 1 }) + ), + ]) + .create(this._overlay); + + // Once the animation is done... + this._player.onDone(() => { + // Destroy the player + this._player?.destroy(); + this._player = undefined; + }); + + // Play the animation + this._player.play(); + + // Add an event listener to the overlay + this._overlay.addEventListener('click', () => { + this.close(); + }); + } + + /** + * Hide the backdrop + * + * @private + */ + private _hideOverlay(): void { + if (!this._overlay) { + return; + } + + // Create the leave animation and attach it to the player + this._player = this._animationBuilder + .build([ + animate( + '300ms cubic-bezier(0.25, 0.8, 0.25, 1)', + style({ opacity: 0 }) + ), + ]) + .create(this._overlay); + + // Play the animation + this._player.play(); + + // Once the animation is done... + this._player.onDone(() => { + // Destroy the player + this._player?.destroy(); + this._player = undefined; + + // If the backdrop still exists... + if (this._overlay) { + // Remove the backdrop + this._overlay.parentNode?.removeChild(this._overlay); + this._overlay = undefined; + } + }); + } + + /** + * Open/close the drawer + * + * @param open + * @private + */ + private _toggleOpened(open: boolean): void { + // Set the opened + this.opened = open; + + // Enable the animations + this._enableAnimations(); + + // If the mode is 'over' + if (this.mode === 'over') { + // If the drawer opens, show the overlay + if (open) { + this._showOverlay(); + } + // Otherwise, close the overlay + else { + this._hideOverlay(); + } + } + + // Execute the observable + this.openedChanged.next(open); + } +} diff --git a/src/@fuse/components/drawer/drawer.module.ts b/src/@fuse/components/drawer/drawer.module.ts new file mode 100644 index 0000000..d8383a0 --- /dev/null +++ b/src/@fuse/components/drawer/drawer.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component'; + +@NgModule({ + declarations: [ + FuseDrawerComponent + ], + imports : [ + CommonModule + ], + exports : [ + FuseDrawerComponent + ] +}) +export class FuseDrawerModule +{ +} diff --git a/src/@fuse/components/drawer/drawer.service.ts b/src/@fuse/components/drawer/drawer.service.ts new file mode 100644 index 0000000..7de348a --- /dev/null +++ b/src/@fuse/components/drawer/drawer.service.ts @@ -0,0 +1,52 @@ +import { Injectable } from '@angular/core'; +import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component'; + +@Injectable({ + providedIn: 'root' +}) +export class FuseDrawerService +{ + private _componentRegistry: Map = new Map(); + + /** + * Constructor + */ + constructor() + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register drawer component + * + * @param name + * @param component + */ + registerComponent(name: string, component: FuseDrawerComponent): void + { + this._componentRegistry.set(name, component); + } + + /** + * Deregister drawer component + * + * @param name + */ + deregisterComponent(name: string): void + { + this._componentRegistry.delete(name); + } + + /** + * Get drawer component from the registry + * + * @param name + */ + getComponent(name: string): FuseDrawerComponent | undefined + { + return this._componentRegistry.get(name); + } +} diff --git a/src/@fuse/components/drawer/drawer.types.ts b/src/@fuse/components/drawer/drawer.types.ts new file mode 100644 index 0000000..40e2ee3 --- /dev/null +++ b/src/@fuse/components/drawer/drawer.types.ts @@ -0,0 +1,7 @@ +export type FuseDrawerMode = + | 'over' + | 'side'; + +export type FuseDrawerPosition = + | 'left' + | 'right'; diff --git a/src/@fuse/components/drawer/index.ts b/src/@fuse/components/drawer/index.ts new file mode 100644 index 0000000..3611d47 --- /dev/null +++ b/src/@fuse/components/drawer/index.ts @@ -0,0 +1 @@ +export * from '@fuse/components/drawer/public-api'; diff --git a/src/@fuse/components/drawer/public-api.ts b/src/@fuse/components/drawer/public-api.ts new file mode 100644 index 0000000..2439ec1 --- /dev/null +++ b/src/@fuse/components/drawer/public-api.ts @@ -0,0 +1,4 @@ +export * from '@fuse/components/drawer/drawer.component'; +export * from '@fuse/components/drawer/drawer.module'; +export * from '@fuse/components/drawer/drawer.service'; +export * from '@fuse/components/drawer/drawer.types'; diff --git a/src/@fuse/components/fullscreen/fullscreen.component.html b/src/@fuse/components/fullscreen/fullscreen.component.html new file mode 100644 index 0000000..691a12b --- /dev/null +++ b/src/@fuse/components/fullscreen/fullscreen.component.html @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/@fuse/components/fullscreen/fullscreen.component.ts b/src/@fuse/components/fullscreen/fullscreen.component.ts new file mode 100644 index 0000000..21f28f8 --- /dev/null +++ b/src/@fuse/components/fullscreen/fullscreen.component.ts @@ -0,0 +1,155 @@ +import { + ChangeDetectionStrategy, + Component, + Inject, + Input, + OnInit, + TemplateRef, + ViewEncapsulation, +} from '@angular/core'; +import { DOCUMENT } from '@angular/common'; +import { + FSDocument, + FSDocumentElement, +} from '@fuse/components/fullscreen/fullscreen.types'; + +@Component({ + selector: 'fuse-fullscreen', + templateUrl: './fullscreen.component.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + exportAs: 'fuseFullscreen', +}) +export class FuseFullscreenComponent implements OnInit { + @Input() iconTpl?: TemplateRef; + @Input() tooltip?: string; + private _fsDoc: FSDocument; + private _fsDocEl?: FSDocumentElement; + private _isFullscreen: boolean = false; + + /** + * Constructor + */ + constructor(@Inject(DOCUMENT) private _document: Document) { + this._fsDoc = _document as FSDocument; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + this._fsDocEl = document.documentElement as FSDocumentElement; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle the fullscreen mode + */ + toggleFullscreen(): void { + // Check if the fullscreen is open + this._isFullscreen = this._getBrowserFullscreenElement() !== null; + + // Toggle the fullscreen + if (this._isFullscreen) { + this._closeFullscreen(); + } else { + this._openFullscreen(); + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get browser's fullscreen element + * + * @private + */ + private _getBrowserFullscreenElement(): Element | null { + if (typeof this._fsDoc.fullscreenElement !== 'undefined') { + return this._fsDoc.fullscreenElement; + } + + if (typeof this._fsDoc.mozFullScreenElement !== 'undefined') { + return this._fsDoc.mozFullScreenElement; + } + + if (typeof this._fsDoc.msFullscreenElement !== 'undefined') { + return this._fsDoc.msFullscreenElement; + } + + if (typeof this._fsDoc.webkitFullscreenElement !== 'undefined') { + return this._fsDoc.webkitFullscreenElement; + } + + throw new Error('Fullscreen mode is not supported by this browser'); + } + + /** + * Open the fullscreen + * + * @private + */ + private _openFullscreen(): void { + if (this._fsDocEl?.requestFullscreen) { + this._fsDocEl.requestFullscreen(); + return; + } + + // Firefox + if (this._fsDocEl?.mozRequestFullScreen) { + this._fsDocEl.mozRequestFullScreen(); + return; + } + + // Chrome, Safari and Opera + if (this._fsDocEl?.webkitRequestFullscreen) { + this._fsDocEl.webkitRequestFullscreen(); + return; + } + + // IE/Edge + if (this._fsDocEl?.msRequestFullscreen) { + this._fsDocEl.msRequestFullscreen(); + return; + } + } + + /** + * Close the fullscreen + * + * @private + */ + private _closeFullscreen(): void { + if (this._fsDoc.exitFullscreen) { + this._fsDoc.exitFullscreen(); + return; + } + + // Firefox + if (this._fsDoc.mozCancelFullScreen) { + this._fsDoc.mozCancelFullScreen(); + return; + } + + // Chrome, Safari and Opera + if (this._fsDoc.webkitExitFullscreen) { + this._fsDoc.webkitExitFullscreen(); + return; + } + + // IE/Edge + else if (this._fsDoc.msExitFullscreen) { + this._fsDoc.msExitFullscreen(); + return; + } + } +} diff --git a/src/@fuse/components/fullscreen/fullscreen.module.ts b/src/@fuse/components/fullscreen/fullscreen.module.ts new file mode 100644 index 0000000..2237f2a --- /dev/null +++ b/src/@fuse/components/fullscreen/fullscreen.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component'; +import { CommonModule } from '@angular/common'; + +@NgModule({ + declarations: [ + FuseFullscreenComponent + ], + imports : [ + MatButtonModule, + MatIconModule, + MatTooltipModule, + CommonModule + ], + exports : [ + FuseFullscreenComponent + ] +}) +export class FuseFullscreenModule +{ +} diff --git a/src/@fuse/components/fullscreen/fullscreen.types.ts b/src/@fuse/components/fullscreen/fullscreen.types.ts new file mode 100644 index 0000000..0477a1d --- /dev/null +++ b/src/@fuse/components/fullscreen/fullscreen.types.ts @@ -0,0 +1,16 @@ +export interface FSDocument extends HTMLDocument +{ + mozFullScreenElement?: Element; + mozCancelFullScreen?: () => void; + msFullscreenElement?: Element; + msExitFullscreen?: () => void; + webkitFullscreenElement?: Element; + webkitExitFullscreen?: () => void; +} + +export interface FSDocumentElement extends HTMLElement +{ + mozRequestFullScreen?: () => void; + msRequestFullscreen?: () => void; + webkitRequestFullscreen?: () => void; +} diff --git a/src/@fuse/components/fullscreen/index.ts b/src/@fuse/components/fullscreen/index.ts new file mode 100644 index 0000000..15b41fa --- /dev/null +++ b/src/@fuse/components/fullscreen/index.ts @@ -0,0 +1 @@ +export * from '@fuse/components/fullscreen/public-api'; diff --git a/src/@fuse/components/fullscreen/public-api.ts b/src/@fuse/components/fullscreen/public-api.ts new file mode 100644 index 0000000..e6264e3 --- /dev/null +++ b/src/@fuse/components/fullscreen/public-api.ts @@ -0,0 +1,3 @@ +export * from '@fuse/components/fullscreen/fullscreen.component'; +export * from '@fuse/components/fullscreen/fullscreen.module'; +export * from '@fuse/components/fullscreen/fullscreen.types'; diff --git a/src/@fuse/components/highlight/highlight.component.html b/src/@fuse/components/highlight/highlight.component.html new file mode 100644 index 0000000..00377ec --- /dev/null +++ b/src/@fuse/components/highlight/highlight.component.html @@ -0,0 +1,11 @@ + + + + +
+
+
+
+ diff --git a/src/@fuse/components/highlight/highlight.component.scss b/src/@fuse/components/highlight/highlight.component.scss new file mode 100644 index 0000000..b433c6f --- /dev/null +++ b/src/@fuse/components/highlight/highlight.component.scss @@ -0,0 +1,3 @@ +textarea[fuse-highlight] { + display: none; +} diff --git a/src/@fuse/components/highlight/highlight.component.ts b/src/@fuse/components/highlight/highlight.component.ts new file mode 100644 index 0000000..c6beec5 --- /dev/null +++ b/src/@fuse/components/highlight/highlight.component.ts @@ -0,0 +1,140 @@ +import { + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EmbeddedViewRef, + Input, + OnChanges, + Renderer2, + SecurityContext, + SimpleChanges, + TemplateRef, + ViewChild, + ViewContainerRef, + ViewEncapsulation, +} from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import { FuseHighlightService } from '@fuse/components/highlight/highlight.service'; + +@Component({ + selector: 'textarea[fuse-highlight]', + templateUrl: './highlight.component.html', + styleUrls: ['./highlight.component.scss'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + exportAs: 'fuseHighlight', +}) +export class FuseHighlightComponent implements OnChanges, AfterViewInit { + @Input() code?: string; + @Input() lang?: string; + @ViewChild(TemplateRef) templateRef!: TemplateRef; + + highlightedCode: string | null = null; + private _viewRef?: EmbeddedViewRef; + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _domSanitizer: DomSanitizer, + private _elementRef: ElementRef, + private _renderer2: Renderer2, + private _fuseHighlightService: FuseHighlightService, + private _viewContainerRef: ViewContainerRef + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void { + // Code & Lang + if ('code' in changes || 'lang' in changes) { + // Return if the viewContainerRef is not available + if (!this._viewContainerRef.length) { + return; + } + + // Highlight and insert the code + this._highlightAndInsert(); + } + } + + /** + * After view init + */ + ngAfterViewInit(): void { + // Return if there is no language set + if (!this.lang) { + return; + } + + // If there is no code input, get the code from + // the textarea + if (!this.code) { + // Get the code + this.code = this._elementRef.nativeElement.value; + } + + // Highlight and insert + this._highlightAndInsert(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Highlight and insert the highlighted code + * + * @private + */ + private _highlightAndInsert(): void { + // Return if the template reference is not available + if (!this.templateRef) { + return; + } + + // Return if the code or language is not defined + if (!this.code || !this.lang) { + return; + } + + // Destroy the component if there is already one + if (this._viewRef) { + this._viewRef.destroy(); + this._viewRef = undefined; + } + + // Highlight and sanitize the code just in case + this.highlightedCode = this._domSanitizer.sanitize( + SecurityContext.HTML, + this._fuseHighlightService.highlight(this.code, this.lang) + ); + + // Return if the highlighted code is null + if (this.highlightedCode === null) { + return; + } + + // Render and insert the template + this._viewRef = this._viewContainerRef.createEmbeddedView( + this.templateRef, + { + highlightedCode: this.highlightedCode, + lang: this.lang, + } + ); + + // Detect the changes + this._viewRef.detectChanges(); + } +} diff --git a/src/@fuse/components/highlight/highlight.module.ts b/src/@fuse/components/highlight/highlight.module.ts new file mode 100644 index 0000000..a61149d --- /dev/null +++ b/src/@fuse/components/highlight/highlight.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component'; + +@NgModule({ + declarations: [ + FuseHighlightComponent + ], + imports : [ + CommonModule + ], + exports : [ + FuseHighlightComponent + ] +}) +export class FuseHighlightModule +{ +} diff --git a/src/@fuse/components/highlight/highlight.service.ts b/src/@fuse/components/highlight/highlight.service.ts new file mode 100644 index 0000000..bb627bc --- /dev/null +++ b/src/@fuse/components/highlight/highlight.service.ts @@ -0,0 +1,82 @@ +import { Injectable } from '@angular/core'; +import hljs from 'highlight.js'; + +@Injectable({ + providedIn: 'root' +}) +export class FuseHighlightService +{ + /** + * Constructor + */ + constructor() + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Highlight + */ + highlight(code: string, language: string): string + { + // Format the code + code = this._format(code); + + // Highlight and return the code + return hljs.highlight(code, {language}).value; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Remove the empty lines around the code block + * and re-align the indentation based on the first + * non-whitespace indented character + * + * @param code + * @private + */ + private _format(code: string): string + { + let indentation = 0; + + // Split the code into lines and store the lines + const lines = code.split('\n'); + + // Trim the empty lines around the code block + while ( lines.length && lines[0].trim() === '' ) + { + lines.shift(); + } + + while ( lines.length && lines[lines.length - 1].trim() === '' ) + { + lines.pop(); + } + + // Iterate through the lines + lines.filter(line => line.length) + .forEach((line, index) => { + + // Always get the indentation of the first line so we can + // have something to compare with + if ( index === 0 ) + { + indentation = line.search(/\S|$/); + return; + } + + // Look at all the remaining lines to figure out the smallest indentation. + indentation = Math.min(line.search(/\S|$/), indentation); + }); + + // Iterate through the lines one more time, remove the extra + // indentation, join them together and return it + return lines.map(line => line.substring(indentation)).join('\n'); + } +} diff --git a/src/@fuse/components/highlight/index.ts b/src/@fuse/components/highlight/index.ts new file mode 100644 index 0000000..46f52e2 --- /dev/null +++ b/src/@fuse/components/highlight/index.ts @@ -0,0 +1 @@ +export * from '@fuse/components/highlight/public-api'; diff --git a/src/@fuse/components/highlight/public-api.ts b/src/@fuse/components/highlight/public-api.ts new file mode 100644 index 0000000..15c2edc --- /dev/null +++ b/src/@fuse/components/highlight/public-api.ts @@ -0,0 +1,3 @@ +export * from '@fuse/components/highlight/highlight.component'; +export * from '@fuse/components/highlight/highlight.module'; +export * from '@fuse/components/highlight/highlight.service'; diff --git a/src/@fuse/components/loading-bar/index.ts b/src/@fuse/components/loading-bar/index.ts new file mode 100644 index 0000000..780b263 --- /dev/null +++ b/src/@fuse/components/loading-bar/index.ts @@ -0,0 +1 @@ +export * from '@fuse/components/loading-bar/public-api'; diff --git a/src/@fuse/components/loading-bar/loading-bar.component.html b/src/@fuse/components/loading-bar/loading-bar.component.html new file mode 100644 index 0000000..524e437 --- /dev/null +++ b/src/@fuse/components/loading-bar/loading-bar.component.html @@ -0,0 +1,3 @@ + + + diff --git a/src/@fuse/components/loading-bar/loading-bar.component.scss b/src/@fuse/components/loading-bar/loading-bar.component.scss new file mode 100644 index 0000000..7a46ec0 --- /dev/null +++ b/src/@fuse/components/loading-bar/loading-bar.component.scss @@ -0,0 +1,7 @@ +fuse-loading-bar { + position: fixed; + top: 0; + z-index: 999; + width: 100%; + height: 6px; +} diff --git a/src/@fuse/components/loading-bar/loading-bar.component.ts b/src/@fuse/components/loading-bar/loading-bar.component.ts new file mode 100644 index 0000000..56d30cb --- /dev/null +++ b/src/@fuse/components/loading-bar/loading-bar.component.ts @@ -0,0 +1,84 @@ +import { + Component, + Input, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges, + ViewEncapsulation, +} from '@angular/core'; +import { coerceBooleanProperty } from '@angular/cdk/coercion'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseLoadingService } from '@fuse/services/loading'; + +@Component({ + selector: 'fuse-loading-bar', + templateUrl: './loading-bar.component.html', + styleUrls: ['./loading-bar.component.scss'], + encapsulation: ViewEncapsulation.None, + exportAs: 'fuseLoadingBar', +}) +export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy { + @Input() autoMode: boolean = true; + mode?: 'determinate' | 'indeterminate'; + progress: number = 0; + show: boolean = false; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor(private _fuseLoadingService: FuseLoadingService) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void { + // Auto mode + if ('autoMode' in changes) { + // Set the auto mode in the service + this._fuseLoadingService.setAutoMode( + coerceBooleanProperty(changes['autoMode'].currentValue) + ); + } + } + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to the service + this._fuseLoadingService.mode$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((value) => { + this.mode = value; + }); + + this._fuseLoadingService.progress$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((value) => { + this.progress = value; + }); + + this._fuseLoadingService.show$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((value) => { + this.show = value; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } +} diff --git a/src/@fuse/components/loading-bar/loading-bar.module.ts b/src/@fuse/components/loading-bar/loading-bar.module.ts new file mode 100644 index 0000000..b371b8a --- /dev/null +++ b/src/@fuse/components/loading-bar/loading-bar.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { FuseLoadingBarComponent } from '@fuse/components/loading-bar/loading-bar.component'; + +@NgModule({ + declarations: [ + FuseLoadingBarComponent + ], + imports : [ + CommonModule, + MatProgressBarModule + ], + exports : [ + FuseLoadingBarComponent + ] +}) +export class FuseLoadingBarModule +{ +} diff --git a/src/@fuse/components/loading-bar/public-api.ts b/src/@fuse/components/loading-bar/public-api.ts new file mode 100644 index 0000000..471ccd3 --- /dev/null +++ b/src/@fuse/components/loading-bar/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/components/loading-bar/loading-bar.component'; +export * from '@fuse/components/loading-bar/loading-bar.module'; diff --git a/src/@fuse/components/masonry/index.ts b/src/@fuse/components/masonry/index.ts new file mode 100644 index 0000000..b2f1a03 --- /dev/null +++ b/src/@fuse/components/masonry/index.ts @@ -0,0 +1 @@ +export * from '@fuse/components/masonry/public-api'; diff --git a/src/@fuse/components/masonry/masonry.component.html b/src/@fuse/components/masonry/masonry.component.html new file mode 100644 index 0000000..4b0a671 --- /dev/null +++ b/src/@fuse/components/masonry/masonry.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/@fuse/components/masonry/masonry.component.ts b/src/@fuse/components/masonry/masonry.component.ts new file mode 100644 index 0000000..6737ab9 --- /dev/null +++ b/src/@fuse/components/masonry/masonry.component.ts @@ -0,0 +1,86 @@ +import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; + +@Component({ + selector : 'fuse-masonry', + templateUrl : './masonry.component.html', + encapsulation: ViewEncapsulation.None, + animations : fuseAnimations, + exportAs : 'fuseMasonry' +}) +export class FuseMasonryComponent implements OnChanges, AfterViewInit +{ + @Input() columnsTemplate: TemplateRef; + @Input() columns: number; + @Input() items: any[] = []; + distributedColumns: any[] = []; + + /** + * Constructor + */ + constructor(private _fuseMediaWatcherService: FuseMediaWatcherService) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void + { + // Columns + if ( 'columns' in changes ) + { + // Distribute the items + this._distributeItems(); + } + + // Items + if ( 'items' in changes ) + { + // Distribute the items + this._distributeItems(); + } + } + + /** + * After view init + */ + ngAfterViewInit(): void + { + // Distribute the items for the first time + this._distributeItems(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Distribute items into columns + */ + private _distributeItems(): void + { + // Return an empty array if there are no items + if ( this.items.length === 0 ) + { + this.distributedColumns = []; + return; + } + + // Prepare the distributed columns array + this.distributedColumns = Array.from(Array(this.columns), item => ({items: []})); + + // Distribute the items to columns + for ( let i = 0; i < this.items.length; i++ ) + { + this.distributedColumns[i % this.columns].items.push(this.items[i]); + } + } +} diff --git a/src/@fuse/components/masonry/masonry.module.ts b/src/@fuse/components/masonry/masonry.module.ts new file mode 100644 index 0000000..651c551 --- /dev/null +++ b/src/@fuse/components/masonry/masonry.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FuseMasonryComponent } from '@fuse/components/masonry/masonry.component'; + +@NgModule({ + declarations: [ + FuseMasonryComponent + ], + imports : [ + CommonModule + ], + exports : [ + FuseMasonryComponent + ] +}) +export class FuseMasonryModule +{ +} diff --git a/src/@fuse/components/masonry/public-api.ts b/src/@fuse/components/masonry/public-api.ts new file mode 100644 index 0000000..e074c48 --- /dev/null +++ b/src/@fuse/components/masonry/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/components/masonry/masonry.component'; +export * from '@fuse/components/masonry/masonry.module'; diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html new file mode 100644 index 0000000..642dd6b --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html @@ -0,0 +1,177 @@ + +
+ + +
+ +
+
+ + + + + + + + + + +
+ +
+
+ + + +
+ +
+
+ + + + + + + + + + +
+ +
+
+ + + +
+ +
+
+
+ + + + + + + + + +
+
+ + {{ item?.title }} + +
+ +
+ + {{ item?.subtitle }} + +
+
+
+ + + +
+
+ {{ item?.badge?.title }} +
+
+
+
diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts new file mode 100644 index 0000000..2c48f13 --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts @@ -0,0 +1,86 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnDestroy, + OnInit, +} from '@angular/core'; +import { IsActiveMatchOptions } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; +import { FuseUtilsService } from '@fuse/services/utils/utils.service'; + +@Component({ + selector: 'fuse-horizontal-navigation-basic-item', + templateUrl: './basic.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FuseHorizontalNavigationBasicItemComponent + implements OnInit, OnDestroy +{ + @Input() item?: FuseNavigationItem; + @Input() name?: string; + + isActiveMatchOptions: IsActiveMatchOptions; + private _fuseHorizontalNavigationComponent?: FuseHorizontalNavigationComponent; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseNavigationService: FuseNavigationService, + private _fuseUtilsService: FuseUtilsService + ) { + // Set the equivalent of {exact: false} as default for active match options. + // We are not assigning the item.isActiveMatchOptions directly to the + // [routerLinkActiveOptions] because if it's "undefined" initially, the router + // will throw an error and stop working. + this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Set the "isActiveMatchOptions" either from item's + // "isActiveMatchOptions" or the equivalent form of + // item's "exactMatch" option + this.isActiveMatchOptions = + this.item?.isActiveMatchOptions ?? this.item?.exactMatch + ? this._fuseUtilsService.exactMatchOptions + : this._fuseUtilsService.subsetMatchOptions; + + // Get the parent navigation component + this._fuseHorizontalNavigationComponent = + this._fuseNavigationService.getComponent(this.name); + + // Mark for check + this._changeDetectorRef.markForCheck(); + + // Subscribe to onRefreshed on the navigation component + this._fuseHorizontalNavigationComponent?.onRefreshed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } +} diff --git a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html new file mode 100644 index 0000000..be7778b --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.html @@ -0,0 +1,138 @@ + +
+ +
+
+ + + + + + + +
+ +
+
+ + + +
+ + +
+
+ + + +
+ +
+
+
+
+
+ + + +
+
+ + + + + + +
+
+ + {{ item.title }} + +
+ +
+ + {{ item.subtitle }} + +
+
+
+ + + +
+
+ {{ item.badge.title }} +
+
+
+
+
+
diff --git a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts new file mode 100644 index 0000000..ad5bbe6 --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts @@ -0,0 +1,96 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnDestroy, + OnInit, + ViewChild, +} from '@angular/core'; +import { BooleanInput } from '@angular/cdk/coercion'; +import { MatMenu } from '@angular/material/menu'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; + +@Component({ + selector: 'fuse-horizontal-navigation-branch-item', + templateUrl: './branch.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FuseHorizontalNavigationBranchItemComponent + implements OnInit, OnDestroy +{ + /* eslint-disable @typescript-eslint/naming-convention */ + static ngAcceptInputType_child: BooleanInput; + /* eslint-enable @typescript-eslint/naming-convention */ + + @Input() child: boolean = false; + @Input() item?: FuseNavigationItem; + @Input() name?: string; + @ViewChild('matMenu', { static: true }) matMenu!: MatMenu; + + private _fuseHorizontalNavigationComponent?: FuseHorizontalNavigationComponent; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the parent navigation component + this._fuseHorizontalNavigationComponent = + this._fuseNavigationService.getComponent(this.name); + + // Subscribe to onRefreshed on the navigation component + this._fuseHorizontalNavigationComponent?.onRefreshed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Trigger the change detection + */ + triggerChangeDetection(): void { + // Mark for check + this._changeDetectorRef.markForCheck(); + } + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } +} diff --git a/src/@fuse/components/navigation/horizontal/components/divider/divider.component.html b/src/@fuse/components/navigation/horizontal/components/divider/divider.component.html new file mode 100644 index 0000000..6b95161 --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/components/divider/divider.component.html @@ -0,0 +1,9 @@ + +
diff --git a/src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts b/src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts new file mode 100644 index 0000000..fb591c0 --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts @@ -0,0 +1,65 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnDestroy, + OnInit, +} from '@angular/core'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; + +@Component({ + selector: 'fuse-horizontal-navigation-divider-item', + templateUrl: './divider.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FuseHorizontalNavigationDividerItemComponent + implements OnInit, OnDestroy +{ + @Input() item?: FuseNavigationItem; + @Input() name?: string; + + private _fuseHorizontalNavigationComponent?: FuseHorizontalNavigationComponent; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the parent navigation component + this._fuseHorizontalNavigationComponent = + this._fuseNavigationService.getComponent(this.name); + + // Subscribe to onRefreshed on the navigation component + this._fuseHorizontalNavigationComponent?.onRefreshed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } +} diff --git a/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.html b/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.html new file mode 100644 index 0000000..7d4c9fc --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.html @@ -0,0 +1,9 @@ + +
diff --git a/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts b/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts new file mode 100644 index 0000000..cacdc2f --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts @@ -0,0 +1,65 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnDestroy, + OnInit, +} from '@angular/core'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; + +@Component({ + selector: 'fuse-horizontal-navigation-spacer-item', + templateUrl: './spacer.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FuseHorizontalNavigationSpacerItemComponent + implements OnInit, OnDestroy +{ + @Input() item?: FuseNavigationItem; + @Input() name?: string; + + private _fuseHorizontalNavigationComponent?: FuseHorizontalNavigationComponent; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the parent navigation component + this._fuseHorizontalNavigationComponent = + this._fuseNavigationService.getComponent(this.name); + + // Subscribe to onRefreshed on the navigation component + this._fuseHorizontalNavigationComponent?.onRefreshed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } +} diff --git a/src/@fuse/components/navigation/horizontal/horizontal.component.html b/src/@fuse/components/navigation/horizontal/horizontal.component.html new file mode 100644 index 0000000..7db23d9 --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/horizontal.component.html @@ -0,0 +1,36 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/@fuse/components/navigation/horizontal/horizontal.component.scss b/src/@fuse/components/navigation/horizontal/horizontal.component.scss new file mode 100644 index 0000000..dc00305 --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/horizontal.component.scss @@ -0,0 +1,180 @@ +/* Root navigation specific */ +fuse-horizontal-navigation { + + .fuse-horizontal-navigation-wrapper { + display: flex; + align-items: center; + + /* Basic, Branch */ + fuse-horizontal-navigation-basic-item, + fuse-horizontal-navigation-branch-item { + + @screen sm { + + &:hover { + + .fuse-horizontal-navigation-item-wrapper { + @apply bg-hover; + } + } + } + + .fuse-horizontal-navigation-item-wrapper { + border-radius: 4px; + overflow: hidden; + + .fuse-horizontal-navigation-item { + padding: 0 16px; + cursor: pointer; + user-select: none; + + .fuse-horizontal-navigation-item-icon { + margin-right: 12px; + } + } + } + } + + /* Basic - When item active (current link) */ + fuse-horizontal-navigation-basic-item { + + .fuse-horizontal-navigation-item-active, + .fuse-horizontal-navigation-item-active-forced { + + .fuse-horizontal-navigation-item-title { + @apply text-primary #{'!important'}; + } + + .fuse-horizontal-navigation-item-subtitle { + @apply text-primary-400 #{'!important'}; + + .dark & { + @apply text-primary-600 #{'!important'}; + } + } + + .fuse-horizontal-navigation-item-icon { + @apply text-primary #{'!important'}; + } + } + } + + /* Branch - When menu open */ + fuse-horizontal-navigation-branch-item { + + .fuse-horizontal-navigation-menu-active, + .fuse-horizontal-navigation-menu-active-forced { + + .fuse-horizontal-navigation-item-wrapper { + @apply bg-hover; + } + } + } + + /* Spacer */ + fuse-horizontal-navigation-spacer-item { + margin: 12px 0; + } + } +} + +/* Menu panel specific */ +.fuse-horizontal-navigation-menu-panel { + + .fuse-horizontal-navigation-menu-item { + height: auto; + min-height: 0; + line-height: normal; + white-space: normal; + + /* Basic, Branch */ + fuse-horizontal-navigation-basic-item, + fuse-horizontal-navigation-branch-item, + fuse-horizontal-navigation-divider-item { + display: flex; + flex: 1 1 auto; + } + + /* Divider */ + fuse-horizontal-navigation-divider-item { + margin: 8px -16px; + + .fuse-horizontal-navigation-item-wrapper { + height: 1px; + box-shadow: 0 1px 0 0; + } + } + } +} + +/* Navigation menu item common */ +.fuse-horizontal-navigation-menu-item { + + /* Basic - When item active (current link) */ + fuse-horizontal-navigation-basic-item { + + .fuse-horizontal-navigation-item-active, + .fuse-horizontal-navigation-item-active-forced { + + .fuse-horizontal-navigation-item-title { + @apply text-primary #{'!important'}; + } + + .fuse-horizontal-navigation-item-subtitle { + @apply text-primary-400 #{'!important'}; + + .dark & { + @apply text-primary-600 #{'!important'}; + } + } + + .fuse-horizontal-navigation-item-icon { + @apply text-primary #{'!important'}; + } + } + } + + .fuse-horizontal-navigation-item-wrapper { + width: 100%; + + &.fuse-horizontal-navigation-item-has-subtitle { + + .fuse-horizontal-navigation-item { + min-height: 56px; + } + } + + .fuse-horizontal-navigation-item { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + min-height: 48px; + width: 100%; + font-size: 13px; + font-weight: 500; + text-decoration: none; + + .fuse-horizontal-navigation-item-title-wrapper { + + .fuse-horizontal-navigation-item-subtitle { + font-size: 12px; + } + } + + .fuse-horizontal-navigation-item-badge { + margin-left: auto; + + .fuse-horizontal-navigation-item-badge-content { + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 600; + white-space: nowrap; + height: 20px; + } + } + } + } +} diff --git a/src/@fuse/components/navigation/horizontal/horizontal.component.ts b/src/@fuse/components/navigation/horizontal/horizontal.component.ts new file mode 100644 index 0000000..f980a65 --- /dev/null +++ b/src/@fuse/components/navigation/horizontal/horizontal.component.ts @@ -0,0 +1,111 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges, + ViewEncapsulation, +} from '@angular/core'; +import { ReplaySubject, Subject } from 'rxjs'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseUtilsService } from '@fuse/services/utils/utils.service'; + +@Component({ + selector: 'fuse-horizontal-navigation', + templateUrl: './horizontal.component.html', + styleUrls: ['./horizontal.component.scss'], + animations: fuseAnimations, + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + exportAs: 'fuseHorizontalNavigation', +}) +export class FuseHorizontalNavigationComponent + implements OnChanges, OnInit, OnDestroy +{ + @Input() name: string = this._fuseUtilsService.randomId(); + @Input() navigation?: FuseNavigationItem[]; + + onRefreshed: ReplaySubject = new ReplaySubject(1); + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseNavigationService: FuseNavigationService, + private _fuseUtilsService: FuseUtilsService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void { + // Navigation + if ('navigation' in changes) { + // Mark for check + this._changeDetectorRef.markForCheck(); + } + } + + /** + * On init + */ + ngOnInit(): void { + // Make sure the name input is not an empty string + if (this.name === '') { + this.name = this._fuseUtilsService.randomId(); + } + + // Register the navigation component + this._fuseNavigationService.registerComponent(this.name, this); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Deregister the navigation component from the registry + this._fuseNavigationService.deregisterComponent(this.name); + + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Refresh the component to apply the changes + */ + refresh(): void { + // Mark for check + this._changeDetectorRef.markForCheck(); + + // Execute the observable + this.onRefreshed.next(true); + } + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } +} diff --git a/src/@fuse/components/navigation/index.ts b/src/@fuse/components/navigation/index.ts new file mode 100644 index 0000000..2598d80 --- /dev/null +++ b/src/@fuse/components/navigation/index.ts @@ -0,0 +1 @@ +export * from '@fuse/components/navigation/public-api'; diff --git a/src/@fuse/components/navigation/navigation.module.ts b/src/@fuse/components/navigation/navigation.module.ts new file mode 100644 index 0000000..d93c6b7 --- /dev/null +++ b/src/@fuse/components/navigation/navigation.module.ts @@ -0,0 +1,55 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { FuseScrollbarModule } from '@fuse/directives/scrollbar/public-api'; +import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component'; +import { FuseHorizontalNavigationBranchItemComponent } from '@fuse/components/navigation/horizontal/components/branch/branch.component'; +import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component'; +import { FuseHorizontalNavigationSpacerItemComponent } from '@fuse/components/navigation/horizontal/components/spacer/spacer.component'; +import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; +import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component'; +import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component'; +import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component'; +import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component'; +import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component'; +import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component'; +import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; + +@NgModule({ + declarations: [ + FuseHorizontalNavigationBasicItemComponent, + FuseHorizontalNavigationBranchItemComponent, + FuseHorizontalNavigationDividerItemComponent, + FuseHorizontalNavigationSpacerItemComponent, + FuseHorizontalNavigationComponent, + FuseVerticalNavigationAsideItemComponent, + FuseVerticalNavigationBasicItemComponent, + FuseVerticalNavigationCollapsableItemComponent, + FuseVerticalNavigationDividerItemComponent, + FuseVerticalNavigationGroupItemComponent, + FuseVerticalNavigationSpacerItemComponent, + FuseVerticalNavigationComponent + ], + imports : [ + CommonModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + MatTooltipModule, + FuseScrollbarModule + ], + exports : [ + FuseHorizontalNavigationComponent, + FuseVerticalNavigationComponent + ] +}) +export class FuseNavigationModule +{ +} diff --git a/src/@fuse/components/navigation/navigation.service.ts b/src/@fuse/components/navigation/navigation.service.ts new file mode 100644 index 0000000..dab0cd1 --- /dev/null +++ b/src/@fuse/components/navigation/navigation.service.ts @@ -0,0 +1,182 @@ +import { Injectable } from '@angular/core'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; + +@Injectable({ + providedIn: 'root', +}) +export class FuseNavigationService { + private _componentRegistry: Map = new Map(); + private _navigationStore: Map = new Map< + string, + any + >(); + + /** + * Constructor + */ + constructor() {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register navigation component + * + * @param name + * @param component + */ + registerComponent(name: string, component: any): void { + this._componentRegistry.set(name, component); + } + + /** + * Deregister navigation component + * + * @param name + */ + deregisterComponent(name: string): void { + this._componentRegistry.delete(name); + } + + /** + * Get navigation component from the registry + * + * @param name + */ + getComponent(name?: string): T | undefined { + if (!name) { + return undefined; + } + return this._componentRegistry.get(name); + } + + /** + * Store the given navigation with the given key + * + * @param key + * @param navigation + */ + storeNavigation(key: string, navigation: FuseNavigationItem[]): void { + // Add to the store + this._navigationStore.set(key, navigation); + } + + /** + * Get navigation from storage by key + * + * @param key + */ + getNavigation(key: string): FuseNavigationItem[] { + return this._navigationStore.get(key) ?? []; + } + + /** + * Delete the navigation from the storage + * + * @param key + */ + deleteNavigation(key: string): void { + // Check if the navigation exists + if (!this._navigationStore.has(key)) { + console.warn( + `Navigation with the key '${key}' does not exist in the store.` + ); + } + + // Delete from the storage + this._navigationStore.delete(key); + } + + /** + * Utility function that returns a flattened + * version of the given navigation array + * + * @param navigation + * @param flatNavigation + */ + getFlatNavigation( + navigation: FuseNavigationItem[], + flatNavigation: FuseNavigationItem[] = [] + ): FuseNavigationItem[] { + for (const item of navigation) { + if (item.type === 'basic') { + flatNavigation.push(item); + continue; + } + + if ( + item.type === 'aside' || + item.type === 'collapsable' || + item.type === 'group' + ) { + if (item.children) { + this.getFlatNavigation(item.children, flatNavigation); + } + } + } + + return flatNavigation; + } + + /** + * Utility function that returns the item + * with the given id from given navigation + * + * @param id + * @param navigation + */ + getItem( + navigation: FuseNavigationItem[], + id?: string + ): FuseNavigationItem | null { + if (!id) { + return null; + } + for (const item of navigation) { + if (item.id === id) { + return item; + } + + if (item.children) { + const childItem = this.getItem(item.children, id); + + if (childItem) { + return childItem; + } + } + } + + return null; + } + + /** + * Utility function that returns the item's parent + * with the given id from given navigation + * + * @param id + * @param navigation + * @param parent + */ + getItemParent( + id: string, + navigation: FuseNavigationItem[], + parent: FuseNavigationItem[] | FuseNavigationItem + ): FuseNavigationItem[] | FuseNavigationItem | null { + for (const item of navigation) { + if (item.id === id) { + return parent; + } + + if (item.children) { + const childItem = this.getItemParent(id, item.children, item); + + if (childItem) { + return childItem; + } + } + } + + return null; + } +} diff --git a/src/@fuse/components/navigation/navigation.types.ts b/src/@fuse/components/navigation/navigation.types.ts new file mode 100644 index 0000000..ac48206 --- /dev/null +++ b/src/@fuse/components/navigation/navigation.types.ts @@ -0,0 +1,41 @@ +import { IsActiveMatchOptions } from '@angular/router'; + +export interface FuseNavigationItem { + id?: string; + title?: string; + subtitle?: string; + type: 'aside' | 'basic' | 'collapsable' | 'divider' | 'group' | 'spacer'; + hidden?: (item: FuseNavigationItem) => boolean; + active?: boolean; + disabled?: boolean; + tooltip?: string; + link?: string; + externalLink?: boolean; + target?: '_blank' | '_self' | '_parent' | '_top' | string; + exactMatch?: boolean; + isActiveMatchOptions?: IsActiveMatchOptions; + function?: (item?: FuseNavigationItem) => void; + classes?: { + title?: string; + subtitle?: string; + icon?: string; + wrapper?: string; + }; + icon?: string; + badge?: { + title?: string; + classes?: string; + }; + children?: FuseNavigationItem[]; + meta?: any; +} + +export type FuseVerticalNavigationAppearance = + | 'default' + | 'compact' + | 'dense' + | 'thin'; + +export type FuseVerticalNavigationMode = 'over' | 'side'; + +export type FuseVerticalNavigationPosition = 'left' | 'right'; diff --git a/src/@fuse/components/navigation/public-api.ts b/src/@fuse/components/navigation/public-api.ts new file mode 100644 index 0000000..032e3ef --- /dev/null +++ b/src/@fuse/components/navigation/public-api.ts @@ -0,0 +1,5 @@ +export * from '@fuse/components/navigation/horizontal/horizontal.component'; +export * from '@fuse/components/navigation/vertical/vertical.component'; +export * from '@fuse/components/navigation/navigation.module'; +export * from '@fuse/components/navigation/navigation.service'; +export * from '@fuse/components/navigation/navigation.types'; diff --git a/src/@fuse/components/navigation/vertical/components/aside/aside.component.html b/src/@fuse/components/navigation/vertical/components/aside/aside.component.html new file mode 100644 index 0000000..7f1b0da --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/aside/aside.component.html @@ -0,0 +1,126 @@ +
+
+ + + + + + +
+
+ + {{ item?.title }} + +
+ +
+ + {{ item?.subtitle }} + +
+
+
+ + + +
+
+ {{ item?.badge?.title }} +
+
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
diff --git a/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts b/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts new file mode 100644 index 0000000..2f513d6 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts @@ -0,0 +1,187 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges, +} from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; +import { BooleanInput } from '@angular/cdk/coercion'; +import { filter, Subject, takeUntil } from 'rxjs'; +import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; + +@Component({ + selector: 'fuse-vertical-navigation-aside-item', + templateUrl: './aside.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FuseVerticalNavigationAsideItemComponent + implements OnChanges, OnInit, OnDestroy +{ + /* eslint-disable @typescript-eslint/naming-convention */ + static ngAcceptInputType_autoCollapse: BooleanInput; + static ngAcceptInputType_skipChildren: BooleanInput; + /* eslint-enable @typescript-eslint/naming-convention */ + + @Input() activeItemId?: string; + @Input() autoCollapse?: boolean; + @Input() item!: FuseNavigationItem; + @Input() name?: string; + @Input() skipChildren?: boolean; + + active: boolean = false; + private _fuseVerticalNavigationComponent?: FuseVerticalNavigationComponent; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _router: Router, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void { + // Active item id + if ('activeItemId' in changes) { + // Mark if active + this._markIfActive(this._router.url); + } + } + + /** + * On init + */ + ngOnInit(): void { + // Mark if active + this._markIfActive(this._router.url); + + // Attach a listener to the NavigationEnd event + this._router.events + .pipe( + filter( + (event): event is NavigationEnd => event instanceof NavigationEnd + ), + takeUntil(this._unsubscribeAll) + ) + .subscribe((event: NavigationEnd) => { + // Mark if active + this._markIfActive(event.urlAfterRedirects); + }); + + // Get the parent navigation component + this._fuseVerticalNavigationComponent = + this._fuseNavigationService.getComponent(this.name); + + // Subscribe to onRefreshed on the navigation component + this._fuseVerticalNavigationComponent?.onRefreshed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Check if the given item has the given url + * in one of its children + * + * @param item + * @param currentUrl + * @private + */ + private _hasActiveChild( + item: FuseNavigationItem, + currentUrl: string + ): boolean { + const children = item.children; + + if (!children) { + return false; + } + + for (const child of children) { + if (child.children) { + if (this._hasActiveChild(child, currentUrl)) { + return true; + } + } + + // Skip items other than 'basic' + if (child.type !== 'basic') { + continue; + } + + // Check if the child has a link and is active + if ( + child.link && + this._router.isActive(child.link, child.exactMatch || false) + ) { + return true; + } + } + + return false; + } + + /** + * Decide and mark if the item is active + * + * @private + */ + private _markIfActive(currentUrl: string): void { + // Check if the activeItemId is equals to this item id + this.active = this.activeItemId === this.item?.id; + + // If the aside has a children that is active, + // always mark it as active + if (this._hasActiveChild(this.item, currentUrl)) { + this.active = true; + } + + // Mark for check + this._changeDetectorRef.markForCheck(); + } +} diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html new file mode 100644 index 0000000..24f0f44 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html @@ -0,0 +1,177 @@ + +
+ + + + + + + + + + + + + + + + +
+ +
+
+ + + + + + + + + + + + + + + + + +
+ +
+
+ + + +
+ +
+
+
+ + + + + + + + + +
+
+ + {{ item?.title }} + +
+ +
+ + {{ item?.subtitle }} + +
+
+
+ + + +
+
+ {{ item?.badge?.title }} +
+
+
+
diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts new file mode 100644 index 0000000..f00cf60 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts @@ -0,0 +1,86 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnDestroy, + OnInit, +} from '@angular/core'; +import { IsActiveMatchOptions } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; +import { FuseUtilsService } from '@fuse/services/utils/utils.service'; + +@Component({ + selector: 'fuse-vertical-navigation-basic-item', + templateUrl: './basic.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FuseVerticalNavigationBasicItemComponent + implements OnInit, OnDestroy +{ + @Input() item?: FuseNavigationItem; + @Input() name?: string; + + isActiveMatchOptions: IsActiveMatchOptions; + private _fuseVerticalNavigationComponent?: FuseVerticalNavigationComponent; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseNavigationService: FuseNavigationService, + private _fuseUtilsService: FuseUtilsService + ) { + // Set the equivalent of {exact: false} as default for active match options. + // We are not assigning the item.isActiveMatchOptions directly to the + // [routerLinkActiveOptions] because if it's "undefined" initially, the router + // will throw an error and stop working. + this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Set the "isActiveMatchOptions" either from item's + // "isActiveMatchOptions" or the equivalent form of + // item's "exactMatch" option + this.isActiveMatchOptions = + this.item?.isActiveMatchOptions ?? this.item?.exactMatch + ? this._fuseUtilsService.exactMatchOptions + : this._fuseUtilsService.subsetMatchOptions; + + // Get the parent navigation component + this._fuseVerticalNavigationComponent = + this._fuseNavigationService.getComponent(this.name); + + // Mark for check + this._changeDetectorRef.markForCheck(); + + // Subscribe to onRefreshed on the navigation component + this._fuseVerticalNavigationComponent?.onRefreshed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } +} diff --git a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html new file mode 100644 index 0000000..59d09cf --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.html @@ -0,0 +1,127 @@ +
+
+ + + + + + +
+
+ + {{ item?.title }} + +
+ +
+ + {{ item?.subtitle }} + +
+
+
+ + + +
+
+ {{ item?.badge?.title }} +
+
+
+ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts new file mode 100644 index 0000000..ad51eb4 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts @@ -0,0 +1,325 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + HostBinding, + Input, + OnDestroy, + OnInit, +} from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; +import { BooleanInput } from '@angular/cdk/coercion'; +import { filter, Subject, takeUntil } from 'rxjs'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; + +@Component({ + selector: 'fuse-vertical-navigation-collapsable-item', + templateUrl: './collapsable.component.html', + animations: fuseAnimations, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FuseVerticalNavigationCollapsableItemComponent + implements OnInit, OnDestroy +{ + /* eslint-disable @typescript-eslint/naming-convention */ + static ngAcceptInputType_autoCollapse: BooleanInput; + /* eslint-enable @typescript-eslint/naming-convention */ + + @Input() autoCollapse: boolean = true; + @Input() item!: FuseNavigationItem; + @Input() name?: string; + + isCollapsed: boolean = true; + isExpanded: boolean = false; + private _fuseVerticalNavigationComponent?: FuseVerticalNavigationComponent; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _router: Router, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Host binding for component classes + */ + @HostBinding('class') get classList(): any { + return { + 'fuse-vertical-navigation-item-collapsed': this.isCollapsed, + 'fuse-vertical-navigation-item-expanded': this.isExpanded, + }; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the parent navigation component + this._fuseVerticalNavigationComponent = + this._fuseNavigationService.getComponent(this.name); + + // If the item has a children that has a matching url with the current url, expand... + if (this._hasActiveChild(this.item, this._router.url)) { + this.expand(); + } + // Otherwise... + else { + // If the autoCollapse is on, collapse... + if (this.autoCollapse) { + this.collapse(); + } + } + + // Listen for the onCollapsableItemCollapsed from the service + this._fuseVerticalNavigationComponent?.onCollapsableItemCollapsed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((collapsedItem) => { + // Check if the collapsed item is null + if (collapsedItem === null) { + return; + } + + // Collapse if this is a children of the collapsed item + if (this._isChildrenOf(collapsedItem, this.item)) { + this.collapse(); + } + }); + + // Listen for the onCollapsableItemExpanded from the service if the autoCollapse is on + if (this.autoCollapse) { + this._fuseVerticalNavigationComponent?.onCollapsableItemExpanded + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((expandedItem) => { + // Check if the expanded item is null + if (expandedItem === null) { + return; + } + + // Check if this is a parent of the expanded item + if (this._isChildrenOf(this.item, expandedItem)) { + return; + } + + // Check if this has a children with a matching url with the current active url + if (this._hasActiveChild(this.item, this._router.url)) { + return; + } + + // Check if this is the expanded item + if (this.item === expandedItem) { + return; + } + + // If none of the above conditions are matched, collapse this item + this.collapse(); + }); + } + + // Attach a listener to the NavigationEnd event + this._router.events + .pipe( + filter( + (event): event is NavigationEnd => event instanceof NavigationEnd + ), + takeUntil(this._unsubscribeAll) + ) + .subscribe((event: NavigationEnd) => { + // If the item has a children that has a matching url with the current url, expand... + if (this._hasActiveChild(this.item, event.urlAfterRedirects)) { + this.expand(); + } + // Otherwise... + else { + // If the autoCollapse is on, collapse... + if (this.autoCollapse) { + this.collapse(); + } + } + }); + + // Subscribe to onRefreshed on the navigation component + this._fuseVerticalNavigationComponent?.onRefreshed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Collapse + */ + collapse(): void { + // Return if the item is disabled + if (this.item?.disabled) { + return; + } + + // Return if the item is already collapsed + if (this.isCollapsed) { + return; + } + + // Collapse it + this.isCollapsed = true; + this.isExpanded = !this.isCollapsed; + + // Mark for check + this._changeDetectorRef.markForCheck(); + + // Execute the observable + this._fuseVerticalNavigationComponent?.onCollapsableItemCollapsed.next( + this.item + ); + } + + /** + * Expand + */ + expand(): void { + // Return if the item is disabled + if (this.item?.disabled) { + return; + } + + // Return if the item is already expanded + if (!this.isCollapsed) { + return; + } + + // Expand it + this.isCollapsed = false; + this.isExpanded = !this.isCollapsed; + + // Mark for check + this._changeDetectorRef.markForCheck(); + + // Execute the observable + this._fuseVerticalNavigationComponent?.onCollapsableItemExpanded.next( + this.item + ); + } + + /** + * Toggle collapsable + */ + toggleCollapsable(): void { + // Toggle collapse/expand + if (this.isCollapsed) { + this.expand(); + } else { + this.collapse(); + } + } + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Check if the given item has the given url + * in one of its children + * + * @param item + * @param currentUrl + * @private + */ + private _hasActiveChild( + item: FuseNavigationItem, + currentUrl: string + ): boolean { + const children = item.children; + + if (!children) { + return false; + } + + for (const child of children) { + if (child.children) { + if (this._hasActiveChild(child, currentUrl)) { + return true; + } + } + + // Check if the child has a link and is active + if ( + child.link && + this._router.isActive(child.link, child.exactMatch || false) + ) { + return true; + } + } + + return false; + } + + /** + * Check if this is a children + * of the given item + * + * @param parent + * @param item + * @private + */ + private _isChildrenOf( + parent: FuseNavigationItem, + item: FuseNavigationItem + ): boolean { + const children = parent.children; + + if (!children) { + return false; + } + + if (children.indexOf(item) > -1) { + return true; + } + + for (const child of children) { + if (child.children) { + if (this._isChildrenOf(child, item)) { + return true; + } + } + } + + return false; + } +} diff --git a/src/@fuse/components/navigation/vertical/components/divider/divider.component.html b/src/@fuse/components/navigation/vertical/components/divider/divider.component.html new file mode 100644 index 0000000..0686009 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/divider/divider.component.html @@ -0,0 +1,9 @@ + +
diff --git a/src/@fuse/components/navigation/vertical/components/divider/divider.component.ts b/src/@fuse/components/navigation/vertical/components/divider/divider.component.ts new file mode 100644 index 0000000..72ad59b --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/divider/divider.component.ts @@ -0,0 +1,65 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnDestroy, + OnInit, +} from '@angular/core'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; + +@Component({ + selector: 'fuse-vertical-navigation-divider-item', + templateUrl: './divider.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FuseVerticalNavigationDividerItemComponent + implements OnInit, OnDestroy +{ + @Input() item?: FuseNavigationItem; + @Input() name?: string; + + private _fuseVerticalNavigationComponent?: FuseVerticalNavigationComponent; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the parent navigation component + this._fuseVerticalNavigationComponent = + this._fuseNavigationService.getComponent(this.name); + + // Subscribe to onRefreshed on the navigation component + this._fuseVerticalNavigationComponent?.onRefreshed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } +} diff --git a/src/@fuse/components/navigation/vertical/components/group/group.component.html b/src/@fuse/components/navigation/vertical/components/group/group.component.html new file mode 100644 index 0000000..e1dc2e6 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/group/group.component.html @@ -0,0 +1,111 @@ + +
+
+ + + + + + +
+
+ + {{ item?.title }} + +
+ +
+ + {{ item?.subtitle }} + +
+
+
+ + + +
+
+ {{ item?.badge?.title }} +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/@fuse/components/navigation/vertical/components/group/group.component.ts b/src/@fuse/components/navigation/vertical/components/group/group.component.ts new file mode 100644 index 0000000..3111dd9 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/group/group.component.ts @@ -0,0 +1,85 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnDestroy, + OnInit, +} from '@angular/core'; +import { BooleanInput } from '@angular/cdk/coercion'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; + +@Component({ + selector: 'fuse-vertical-navigation-group-item', + templateUrl: './group.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FuseVerticalNavigationGroupItemComponent + implements OnInit, OnDestroy +{ + /* eslint-disable @typescript-eslint/naming-convention */ + static ngAcceptInputType_autoCollapse: BooleanInput; + /* eslint-enable @typescript-eslint/naming-convention */ + + @Input() autoCollapse: boolean = false; + @Input() item?: FuseNavigationItem; + @Input() name?: string; + + private _fuseVerticalNavigationComponent?: FuseVerticalNavigationComponent; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the parent navigation component + this._fuseVerticalNavigationComponent = + this._fuseNavigationService.getComponent(this.name); + + // Subscribe to onRefreshed on the navigation component + this._fuseVerticalNavigationComponent?.onRefreshed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } +} diff --git a/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.html b/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.html new file mode 100644 index 0000000..3b35cf0 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.html @@ -0,0 +1,7 @@ + +
diff --git a/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts b/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts new file mode 100644 index 0000000..04578f9 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts @@ -0,0 +1,65 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnDestroy, + OnInit, +} from '@angular/core'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; + +@Component({ + selector: 'fuse-vertical-navigation-spacer-item', + templateUrl: './spacer.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FuseVerticalNavigationSpacerItemComponent + implements OnInit, OnDestroy +{ + @Input() item?: FuseNavigationItem; + @Input() name?: string; + + private _fuseVerticalNavigationComponent?: FuseVerticalNavigationComponent; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the parent navigation component + this._fuseVerticalNavigationComponent = + this._fuseNavigationService.getComponent(this.name); + + // Subscribe to onRefreshed on the navigation component + this._fuseVerticalNavigationComponent?.onRefreshed + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } +} diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss new file mode 100644 index 0000000..e91fbc6 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss @@ -0,0 +1,112 @@ +/* Variables */ +:root { + --fuse-vertical-navigation-compact-width: 112px; +} + +fuse-vertical-navigation { + + /* Compact appearance overrides */ + &.fuse-vertical-navigation-appearance-compact { + width: var(--fuse-vertical-navigation-compact-width); + min-width: var(--fuse-vertical-navigation-compact-width); + max-width: var(--fuse-vertical-navigation-compact-width); + + /* Left positioned */ + &.fuse-vertical-navigation-position-left { + + /* Side mode */ + &.fuse-vertical-navigation-mode-side { + margin-left: calc(var(--fuse-vertical-navigation-compact-width) * -1); + } + + /* Opened */ + &.fuse-vertical-navigation-opened { + margin-left: 0; + } + } + + /* Right positioned */ + &.fuse-vertical-navigation-position-right { + + /* Side mode */ + &.fuse-vertical-navigation-mode-side { + margin-right: calc(var(--fuse-vertical-navigation-compact-width) * -1); + } + + /* Opened */ + &.fuse-vertical-navigation-opened { + margin-right: 0; + } + + /* Aside wrapper */ + .fuse-vertical-navigation-aside-wrapper { + left: auto; + right: var(--fuse-vertical-navigation-compact-width); + } + } + + /* Wrapper */ + .fuse-vertical-navigation-wrapper { + + /* Content */ + .fuse-vertical-navigation-content { + + > fuse-vertical-navigation-aside-item, + > fuse-vertical-navigation-basic-item { + + .fuse-vertical-navigation-item-wrapper { + margin: 4px 8px 0 8px; + + .fuse-vertical-navigation-item { + flex-direction: column; + justify-content: center; + padding: 12px; + border-radius: 6px; + + .fuse-vertical-navigation-item-icon { + margin-right: 0; + } + + .fuse-vertical-navigation-item-title-wrapper { + margin-top: 8px; + + .fuse-vertical-navigation-item-title { + font-size: 12px; + font-weight: 500; + text-align: center; + line-height: 16px; + } + + .fuse-vertical-navigation-item-subtitle { + display: none !important; + } + } + + .fuse-vertical-navigation-item-badge { + position: absolute; + top: 12px; + left: 64px; + } + } + } + + > fuse-vertical-navigation-collapsable-item { + display: none + } + + > fuse-vertical-navigation-group-item { + + > .fuse-vertical-navigation-item-wrapper { + display: none + } + } + } + } + } + + /* Aside wrapper */ + .fuse-vertical-navigation-aside-wrapper { + left: var(--fuse-vertical-navigation-compact-width); + } + } +} diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss new file mode 100644 index 0000000..569ad4f --- /dev/null +++ b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss @@ -0,0 +1,594 @@ +/* Variables */ +:root { + --fuse-vertical-navigation-width: 280px; +} + +fuse-vertical-navigation { + position: sticky; + display: flex; + flex-direction: column; + flex: 1 0 auto; + top: 0; + width: var(--fuse-vertical-navigation-width); + min-width: var(--fuse-vertical-navigation-width); + max-width: var(--fuse-vertical-navigation-width); + height: 100vh; + min-height: 100vh; + max-height: 100vh; + z-index: 200; + + /* ----------------------------------------------------------------------------------------------------- */ + /* @ Navigation Drawer + /* ----------------------------------------------------------------------------------------------------- */ + + /* Animations */ + &.fuse-vertical-navigation-animations-enabled { + transition-duration: 400ms; + transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); + transition-property: visibility, margin-left, margin-right, transform, width, max-width, min-width; + + /* Wrapper */ + .fuse-vertical-navigation-wrapper { + transition-duration: 400ms; + transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); + transition-property: width, max-width, min-width; + } + } + + /* Over mode */ + &.fuse-vertical-navigation-mode-over { + position: fixed; + top: 0; + bottom: 0; + } + + /* Left position */ + &.fuse-vertical-navigation-position-left { + + /* Side mode */ + &.fuse-vertical-navigation-mode-side { + margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1); + + &.fuse-vertical-navigation-opened { + margin-left: 0; + } + } + + /* Over mode */ + &.fuse-vertical-navigation-mode-over { + left: 0; + transform: translate3d(-100%, 0, 0); + + &.fuse-vertical-navigation-opened { + transform: translate3d(0, 0, 0); + } + } + + /* Wrapper */ + .fuse-vertical-navigation-wrapper { + left: 0; + } + } + + /* Right position */ + &.fuse-vertical-navigation-position-right { + + /* Side mode */ + &.fuse-vertical-navigation-mode-side { + margin-right: calc(var(--fuse-vertical-navigation-width) * -1); + + &.fuse-vertical-navigation-opened { + margin-right: 0; + } + } + + /* Over mode */ + &.fuse-vertical-navigation-mode-over { + right: 0; + transform: translate3d(100%, 0, 0); + + &.fuse-vertical-navigation-opened { + transform: translate3d(0, 0, 0); + } + } + + /* Wrapper */ + .fuse-vertical-navigation-wrapper { + right: 0; + } + } + + /* Inner mode */ + &.fuse-vertical-navigation-inner { + position: relative; + width: auto; + min-width: 0; + max-width: none; + height: auto; + min-height: 0; + max-height: none; + box-shadow: none; + + .fuse-vertical-navigation-wrapper { + position: relative; + overflow: visible; + height: auto; + + .fuse-vertical-navigation-content { + overflow: visible !important; + } + } + } + + /* Wrapper */ + .fuse-vertical-navigation-wrapper { + position: absolute; + display: flex; + flex: 1 1 auto; + flex-direction: column; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 10; + background: inherit; + box-shadow: inset -1px 0 0 var(--fuse-border); + + /* Header */ + .fuse-vertical-navigation-header { + + } + + /* Content */ + .fuse-vertical-navigation-content { + flex: 1 1 auto; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + + /* Divider */ + > fuse-vertical-navigation-divider-item { + margin: 24px 0; + } + + /* Group */ + > fuse-vertical-navigation-group-item { + margin-top: 24px; + } + } + + /* Footer */ + .fuse-vertical-navigation-footer { + + } + } + + /* Aside wrapper */ + .fuse-vertical-navigation-aside-wrapper { + position: absolute; + display: flex; + flex: 1 1 auto; + flex-direction: column; + top: 0; + bottom: 0; + left: var(--fuse-vertical-navigation-width); + width: var(--fuse-vertical-navigation-width); + height: 100%; + z-index: 5; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + transition-duration: 400ms; + transition-property: left, right; + transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); + background: inherit; + + > fuse-vertical-navigation-aside-item { + padding: 24px 0; + + /* First item of the aside */ + > .fuse-vertical-navigation-item-wrapper { + display: none !important; + } + } + } + + &.fuse-vertical-navigation-position-right { + + .fuse-vertical-navigation-aside-wrapper { + left: auto; + right: var(--fuse-vertical-navigation-width); + } + } + + /* ----------------------------------------------------------------------------------------------------- */ + /* @ Navigation Items + /* ----------------------------------------------------------------------------------------------------- */ + + /* Navigation items common */ + fuse-vertical-navigation-aside-item, + fuse-vertical-navigation-basic-item, + fuse-vertical-navigation-collapsable-item, + fuse-vertical-navigation-divider-item, + fuse-vertical-navigation-group-item, + fuse-vertical-navigation-spacer-item { + display: flex; + flex-direction: column; + flex: 1 0 auto; + user-select: none; + + .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 10px 16px; + font-size: 13px; + font-weight: 500; + line-height: 20px; + text-decoration: none; + border-radius: 6px; + + /* Disabled state */ + &.fuse-vertical-navigation-item-disabled { + cursor: default; + opacity: 0.4; + } + + .fuse-vertical-navigation-item-icon { + margin-right: 16px; + } + + .fuse-vertical-navigation-item-title-wrapper { + + .fuse-vertical-navigation-item-subtitle { + font-size: 11px; + line-height: 1.5; + } + } + + .fuse-vertical-navigation-item-badge { + margin-left: auto; + + .fuse-vertical-navigation-item-badge-content { + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 600; + white-space: nowrap; + height: 20px; + } + } + } + } + } + + /* Aside, Basic, Collapsable, Group */ + fuse-vertical-navigation-aside-item, + fuse-vertical-navigation-basic-item, + fuse-vertical-navigation-collapsable-item, + fuse-vertical-navigation-group-item { + + > .fuse-vertical-navigation-item-wrapper { + margin: 0 12px; + } + } + + /* Aside, Basic, Collapsable */ + fuse-vertical-navigation-aside-item, + fuse-vertical-navigation-basic-item, + fuse-vertical-navigation-collapsable-item { + margin-bottom: 4px; + + .fuse-vertical-navigation-item { + cursor: pointer; + } + } + + /* Aside */ + fuse-vertical-navigation-aside-item { + + } + + /* Basic */ + fuse-vertical-navigation-basic-item { + + } + + /* Collapsable */ + fuse-vertical-navigation-collapsable-item { + + > .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + + .fuse-vertical-navigation-item-badge { + + + .fuse-vertical-navigation-item-arrow { + margin-left: 8px; + } + } + + .fuse-vertical-navigation-item-arrow { + height: 20px; + line-height: 20px; + margin-left: auto; + transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1), + color 375ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + } + } + + &.fuse-vertical-navigation-item-expanded { + + > .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + + .fuse-vertical-navigation-item-arrow { + transform: rotate(90deg); + } + } + } + } + + > .fuse-vertical-navigation-item-children { + margin-top: 6px; + + > *:last-child { + padding-bottom: 6px; + + > .fuse-vertical-navigation-item-children { + + > *:last-child { + padding-bottom: 0; + } + } + } + + .fuse-vertical-navigation-item { + padding: 10px 16px; + } + } + + /* 1st level */ + .fuse-vertical-navigation-item-children { + overflow: hidden; + + .fuse-vertical-navigation-item { + padding-left: 56px; + } + + /* 2nd level */ + .fuse-vertical-navigation-item-children { + + .fuse-vertical-navigation-item { + padding-left: 72px; + } + + /* 3rd level */ + .fuse-vertical-navigation-item-children { + + .fuse-vertical-navigation-item { + padding-left: 88px; + } + + /* 4th level */ + .fuse-vertical-navigation-item-children { + + .fuse-vertical-navigation-item { + padding-left: 104px; + } + } + } + } + } + } + + /* Divider */ + fuse-vertical-navigation-divider-item { + margin: 12px 0; + + .fuse-vertical-navigation-item-wrapper { + height: 1px; + box-shadow: 0 1px 0 0; + } + } + + /* Group */ + fuse-vertical-navigation-group-item { + + > .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + + .fuse-vertical-navigation-item-badge, + .fuse-vertical-navigation-item-icon { + display: none !important; + } + + .fuse-vertical-navigation-item-title-wrapper { + + .fuse-vertical-navigation-item-title { + font-size: 12px; + font-weight: 600; + letter-spacing: 0.05em; + text-transform: uppercase; + } + } + } + } + } + + /* Spacer */ + fuse-vertical-navigation-spacer-item { + margin: 6px 0; + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Overlay +/* ----------------------------------------------------------------------------------------------------- */ +.fuse-vertical-navigation-overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 170; + opacity: 0; + background-color: rgba(0, 0, 0, 0.6); + + + .fuse-vertical-navigation-aside-overlay { + background-color: transparent; + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Aside overlay +/* ----------------------------------------------------------------------------------------------------- */ +.fuse-vertical-navigation-aside-overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 169; + opacity: 0; + background-color: rgba(0, 0, 0, 0.3); +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Navigation Items Colors +/* ----------------------------------------------------------------------------------------------------- */ + +/* Navigation items common */ +fuse-vertical-navigation-aside-item, +fuse-vertical-navigation-basic-item, +fuse-vertical-navigation-collapsable-item, +fuse-vertical-navigation-group-item { + + .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + color: currentColor; + + .fuse-vertical-navigation-item-icon { + @apply text-current opacity-60; + } + + .fuse-vertical-navigation-item-title-wrapper { + + .fuse-vertical-navigation-item-title { + @apply text-current opacity-80; + } + + .fuse-vertical-navigation-item-subtitle { + @apply text-current opacity-50; + } + } + } + } +} + +/* Aside, Basic, Collapsable */ +fuse-vertical-navigation-aside-item, +fuse-vertical-navigation-basic-item, +fuse-vertical-navigation-collapsable-item { + + > .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + + /* Active state */ + &:not(.fuse-vertical-navigation-item-disabled) { + + &.fuse-vertical-navigation-item-active, + &.fuse-vertical-navigation-item-active-forced { + @apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12; + + .fuse-vertical-navigation-item-icon { + @apply opacity-100; + } + + .fuse-vertical-navigation-item-title { + @apply opacity-100; + } + + .fuse-vertical-navigation-item-subtitle { + @apply opacity-100; + } + } + } + + /* Hover state */ + &:not(.fuse-vertical-navigation-item-active-forced):not(.fuse-vertical-navigation-item-active):not(.fuse-vertical-navigation-item-disabled) { + + &:hover { + @apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12; + + .fuse-vertical-navigation-item-icon { + @apply opacity-100; + } + + .fuse-vertical-navigation-item-title, + .fuse-vertical-navigation-item-arrow { + @apply opacity-100; + } + + .fuse-vertical-navigation-item-subtitle { + @apply opacity-100; + } + } + } + } + } +} + +/* Collapsable */ +fuse-vertical-navigation-collapsable-item { + + /* Expanded state */ + &.fuse-vertical-navigation-item-expanded { + + > .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + + .fuse-vertical-navigation-item-icon { + @apply opacity-100; + } + + .fuse-vertical-navigation-item-title, + .fuse-vertical-navigation-item-arrow { + @apply opacity-100; + } + + .fuse-vertical-navigation-item-subtitle { + @apply opacity-100; + } + } + } + } +} + +/* Group */ +fuse-vertical-navigation-group-item { + + > .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + + .fuse-vertical-navigation-item-title-wrapper { + + .fuse-vertical-navigation-item-title { + @apply opacity-100 text-primary-600 dark:text-primary-400; + } + } + } + } +} diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss new file mode 100644 index 0000000..8bbebe2 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss @@ -0,0 +1,194 @@ +/* Variables */ +:root { + --fuse-vertical-navigation-width: 280px; + --fuse-vertical-navigation-dense-width: 80px; +} + +fuse-vertical-navigation { + + /* Dense appearance overrides */ + &.fuse-vertical-navigation-appearance-dense { + + &:not(.fuse-vertical-navigation-mode-over) { + width: var(--fuse-vertical-navigation-dense-width); + min-width: var(--fuse-vertical-navigation-dense-width); + max-width: var(--fuse-vertical-navigation-dense-width); + + /* Left positioned */ + &.fuse-vertical-navigation-position-left { + + /* Side mode */ + &.fuse-vertical-navigation-mode-side { + margin-left: calc(var(--fuse-vertical-navigation-dense-width) * -1); + } + + /* Opened */ + &.fuse-vertical-navigation-opened { + margin-left: 0; + } + } + + /* Right positioned */ + &.fuse-vertical-navigation-position-right { + + /* Side mode */ + &.fuse-vertical-navigation-mode-side { + margin-right: calc(var(--fuse-vertical-navigation-dense-width) * -1); + } + + /* Opened */ + &.fuse-vertical-navigation-opened { + margin-right: 0; + } + + /* Aside wrapper */ + .fuse-vertical-navigation-aside-wrapper { + left: auto; + right: var(--fuse-vertical-navigation-dense-width); + } + + &.fuse-vertical-navigation-hover { + + .fuse-vertical-navigation-aside-wrapper { + left: auto; + right: var(--fuse-vertical-navigation-width); + } + } + } + } + + /* Wrapper */ + .fuse-vertical-navigation-wrapper { + + /* Content */ + .fuse-vertical-navigation-content { + + fuse-vertical-navigation-aside-item, + fuse-vertical-navigation-basic-item, + fuse-vertical-navigation-collapsable-item, + fuse-vertical-navigation-group-item { + + .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); + min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); + max-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); + + .fuse-vertical-navigation-item-arrow, + .fuse-vertical-navigation-item-badge, + .fuse-vertical-navigation-item-title-wrapper { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + } + } + } + + fuse-vertical-navigation-group-item { + + &:first-of-type { + margin-top: 0; + } + } + } + } + + &:not(.fuse-vertical-navigation-hover):not(.fuse-vertical-navigation-mode-over) { + + /* Wrapper */ + .fuse-vertical-navigation-wrapper { + + /* Content */ + .fuse-vertical-navigation-content { + + .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + padding: 10px 16px; + + .fuse-vertical-navigation-item-arrow, + .fuse-vertical-navigation-item-badge, + .fuse-vertical-navigation-item-title-wrapper { + white-space: nowrap; + opacity: 0; + } + } + } + + fuse-vertical-navigation-collapsable-item { + + .fuse-vertical-navigation-item-children { + display: none; + } + } + + fuse-vertical-navigation-group-item { + + > .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + + &:before { + content: ''; + position: absolute; + top: 20px; + width: 23px; + border-top-width: 2px; + } + } + } + } + } + } + } + + /* Aside wrapper */ + .fuse-vertical-navigation-aside-wrapper { + left: var(--fuse-vertical-navigation-dense-width); + } + + /* Hover */ + &.fuse-vertical-navigation-hover { + + .fuse-vertical-navigation-wrapper { + width: var(--fuse-vertical-navigation-width); + + .fuse-vertical-navigation-content { + + .fuse-vertical-navigation-item-wrapper { + + .fuse-vertical-navigation-item { + width: calc(var(--fuse-vertical-navigation-width) - 24px); + min-width: calc(var(--fuse-vertical-navigation-width) - 24px); + max-width: calc(var(--fuse-vertical-navigation-width) - 24px); + + .fuse-vertical-navigation-item-arrow, + .fuse-vertical-navigation-item-badge, + .fuse-vertical-navigation-item-title-wrapper { + white-space: nowrap; + animation: removeWhiteSpaceNoWrap 1ms linear 350ms; + animation-fill-mode: forwards; + } + } + } + } + } + + .fuse-vertical-navigation-aside-wrapper { + left: var(--fuse-vertical-navigation-width); + } + } + } +} + +@keyframes removeWhiteSpaceNoWrap { + 0% { + white-space: nowrap + } + 99% { + white-space: nowrap + } + 100% { + white-space: normal; + } +} diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss new file mode 100644 index 0000000..997bf25 --- /dev/null +++ b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss @@ -0,0 +1,99 @@ +/* Variables */ +:root { + --fuse-vertical-navigation-thin-width: 80px; +} + +fuse-vertical-navigation { + + /* Thin appearance overrides */ + &.fuse-vertical-navigation-appearance-thin { + width: var(--fuse-vertical-navigation-thin-width); + min-width: var(--fuse-vertical-navigation-thin-width); + max-width: var(--fuse-vertical-navigation-thin-width); + + /* Left positioned */ + &.fuse-vertical-navigation-position-left { + + &.fuse-vertical-navigation-mode-side { + margin-left: calc(var(--fuse-vertical-navigation-thin-width) * -1); + } + + &.fuse-vertical-navigation-opened { + margin-left: 0; + } + } + + /* Right positioned */ + &.fuse-vertical-navigation-position-right { + + &.fuse-vertical-navigation-mode-side { + margin-right: calc(var(--fuse-vertical-navigation-thin-width) * -1); + } + + &.fuse-vertical-navigation-opened { + margin-right: 0; + } + + .fuse-vertical-navigation-aside-wrapper { + left: auto; + right: var(--fuse-vertical-navigation-thin-width); + } + } + + /* Wrapper */ + .fuse-vertical-navigation-wrapper { + + /* Content */ + .fuse-vertical-navigation-content { + + > fuse-vertical-navigation-aside-item, + > fuse-vertical-navigation-basic-item { + flex-direction: column; + justify-content: center; + height: 64px; + min-height: 64px; + max-height: 64px; + padding: 0 16px; + + .fuse-vertical-navigation-item-wrapper { + display: flex; + align-items: center; + justify-content: center; + + .fuse-vertical-navigation-item { + justify-content: center; + padding: 12px; + border-radius: 4px; + + .fuse-vertical-navigation-item-icon { + margin: 0; + } + + .fuse-vertical-navigation-item-arrow, + .fuse-vertical-navigation-item-badge-content, + .fuse-vertical-navigation-item-title-wrapper { + display: none; + } + } + } + } + + > fuse-vertical-navigation-collapsable-item { + display: none + } + + > fuse-vertical-navigation-group-item { + + > .fuse-vertical-navigation-item-wrapper { + display: none + } + } + } + } + + /* Aside wrapper */ + .fuse-vertical-navigation-aside-wrapper { + left: var(--fuse-vertical-navigation-thin-width); + } + } +} diff --git a/src/@fuse/components/navigation/vertical/vertical.component.html b/src/@fuse/components/navigation/vertical/vertical.component.html new file mode 100644 index 0000000..fc4857e --- /dev/null +++ b/src/@fuse/components/navigation/vertical/vertical.component.html @@ -0,0 +1,119 @@ +
+ +
+ +
+ + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + + + + + + + + +
+
diff --git a/src/@fuse/components/navigation/vertical/vertical.component.scss b/src/@fuse/components/navigation/vertical/vertical.component.scss new file mode 100644 index 0000000..8a50cef --- /dev/null +++ b/src/@fuse/components/navigation/vertical/vertical.component.scss @@ -0,0 +1,4 @@ +@import 'styles/appearances/default'; +@import 'styles/appearances/compact'; +@import 'styles/appearances/dense'; +@import 'styles/appearances/thin'; diff --git a/src/@fuse/components/navigation/vertical/vertical.component.ts b/src/@fuse/components/navigation/vertical/vertical.component.ts new file mode 100644 index 0000000..36cbdca --- /dev/null +++ b/src/@fuse/components/navigation/vertical/vertical.component.ts @@ -0,0 +1,754 @@ +import { + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + HostBinding, + HostListener, + Input, + OnChanges, + OnDestroy, + OnInit, + Output, + QueryList, + Renderer2, + SimpleChanges, + ViewChild, + ViewChildren, + ViewEncapsulation, +} from '@angular/core'; +import { + animate, + AnimationBuilder, + AnimationPlayer, + style, +} from '@angular/animations'; +import { NavigationEnd, Router } from '@angular/router'; +import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay'; +import { + delay, + filter, + merge, + ReplaySubject, + Subject, + Subscription, + takeUntil, +} from 'rxjs'; +import { fuseAnimations } from '@fuse/animations'; +import { + FuseNavigationItem, + FuseVerticalNavigationAppearance, + FuseVerticalNavigationMode, + FuseVerticalNavigationPosition, +} from '@fuse/components/navigation/navigation.types'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive'; +import { FuseUtilsService } from '@fuse/services/utils/utils.service'; +import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; + +@Component({ + selector: 'fuse-vertical-navigation', + templateUrl: './vertical.component.html', + styleUrls: ['./vertical.component.scss'], + animations: fuseAnimations, + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + exportAs: 'fuseVerticalNavigation', +}) +export class FuseVerticalNavigationComponent + implements OnChanges, OnInit, AfterViewInit, OnDestroy +{ + /* eslint-disable @typescript-eslint/naming-convention */ + static ngAcceptInputType_inner: BooleanInput; + static ngAcceptInputType_opened: BooleanInput; + static ngAcceptInputType_transparentOverlay: BooleanInput; + /* eslint-enable @typescript-eslint/naming-convention */ + + @Input() appearance: FuseVerticalNavigationAppearance = 'default'; + @Input() autoCollapse: boolean = true; + @Input() inner: boolean = false; + @Input() mode: FuseVerticalNavigationMode = 'side'; + @Input() name: string = this._fuseUtilsService.randomId(); + @Input() navigation!: FuseNavigationItem[]; + @Input() opened: boolean = true; + @Input() position: FuseVerticalNavigationPosition = 'left'; + @Input() transparentOverlay: boolean = false; + @Output() + readonly appearanceChanged: EventEmitter = new EventEmitter(); + @Output() readonly modeChanged: EventEmitter = + new EventEmitter(); + @Output() readonly openedChanged: EventEmitter = + new EventEmitter(); + @Output() + readonly positionChanged: EventEmitter = new EventEmitter(); + @ViewChild('navigationContent') private _navigationContentEl!: ElementRef; + + activeAsideItemId?: string; + onCollapsableItemCollapsed: ReplaySubject = + new ReplaySubject(1); + onCollapsableItemExpanded: ReplaySubject = + new ReplaySubject(1); + onRefreshed: ReplaySubject = new ReplaySubject(1); + private _animationsEnabled: boolean = false; + private _asideOverlay?: HTMLElement; + private readonly _handleAsideOverlayClick: any; + private readonly _handleOverlayClick: any; + private _hovered: boolean = false; + private _overlay?: HTMLElement; + private _player?: AnimationPlayer; + private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block(); + private _fuseScrollbarDirectives!: QueryList; + private _fuseScrollbarDirectivesSubscription?: Subscription; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _animationBuilder: AnimationBuilder, + private _changeDetectorRef: ChangeDetectorRef, + private _elementRef: ElementRef, + private _renderer2: Renderer2, + private _router: Router, + private _scrollStrategyOptions: ScrollStrategyOptions, + private _fuseNavigationService: FuseNavigationService, + private _fuseUtilsService: FuseUtilsService + ) { + this._handleAsideOverlayClick = (): void => { + this.closeAside(); + }; + this._handleOverlayClick = (): void => { + this.close(); + }; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Host binding for component classes + */ + @HostBinding('class') get classList(): any { + return { + 'fuse-vertical-navigation-animations-enabled': this._animationsEnabled, + [`fuse-vertical-navigation-appearance-${this.appearance}`]: true, + 'fuse-vertical-navigation-hover': this._hovered, + 'fuse-vertical-navigation-inner': this.inner, + 'fuse-vertical-navigation-mode-over': this.mode === 'over', + 'fuse-vertical-navigation-mode-side': this.mode === 'side', + 'fuse-vertical-navigation-opened': this.opened, + 'fuse-vertical-navigation-position-left': this.position === 'left', + 'fuse-vertical-navigation-position-right': this.position === 'right', + }; + } + + /** + * Host binding for component inline styles + */ + @HostBinding('style') get styleList(): any { + return { + visibility: this.opened ? 'visible' : 'hidden', + }; + } + + /** + * Setter for fuseScrollbarDirectives + */ + @ViewChildren(FuseScrollbarDirective) + set fuseScrollbarDirectives( + fuseScrollbarDirectives: QueryList + ) { + // Store the directives + this._fuseScrollbarDirectives = fuseScrollbarDirectives; + + // Return if there are no directives + if (fuseScrollbarDirectives.length === 0) { + return; + } + + // Unsubscribe the previous subscriptions + if (this._fuseScrollbarDirectivesSubscription) { + this._fuseScrollbarDirectivesSubscription.unsubscribe(); + } + + // Update the scrollbars on collapsable items' collapse/expand + this._fuseScrollbarDirectivesSubscription = merge( + this.onCollapsableItemCollapsed, + this.onCollapsableItemExpanded + ) + .pipe(takeUntil(this._unsubscribeAll), delay(250)) + .subscribe(() => { + // Loop through the scrollbars and update them + fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => { + fuseScrollbarDirective.update(); + }); + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Decorated methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On mouseenter + * + * @private + */ + @HostListener('mouseenter') + private _onMouseenter(): void { + // Enable the animations + this._enableAnimations(); + + // Set the hovered + this._hovered = true; + } + + /** + * On mouseleave + * + * @private + */ + @HostListener('mouseleave') + private _onMouseleave(): void { + // Enable the animations + this._enableAnimations(); + + // Set the hovered + this._hovered = false; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void { + // Appearance + if ('appearance' in changes) { + // Execute the observable + this.appearanceChanged.next(changes['appearance'].currentValue); + } + + // Inner + if ('inner' in changes) { + // Coerce the value to a boolean + this.inner = coerceBooleanProperty(changes['inner'].currentValue); + } + + // Mode + if ('mode' in changes) { + // Get the previous and current values + const currentMode = changes['mode'].currentValue; + const previousMode = changes['mode'].previousValue; + + // Disable the animations + this._disableAnimations(); + + // If the mode changes: 'over -> side' + if (previousMode === 'over' && currentMode === 'side') { + // Hide the overlay + this._hideOverlay(); + } + + // If the mode changes: 'side -> over' + if (previousMode === 'side' && currentMode === 'over') { + // Close the aside + this.closeAside(); + + // If the navigation is opened + if (this.opened) { + // Show the overlay + this._showOverlay(); + } + } + + // Execute the observable + this.modeChanged.next(currentMode); + + // Enable the animations after a delay + // The delay must be bigger than the current transition-duration + // to make sure nothing will be animated while the mode changing + setTimeout(() => { + this._enableAnimations(); + }, 500); + } + + // Navigation + if ('navigation' in changes) { + // Mark for check + this._changeDetectorRef.markForCheck(); + } + + // Opened + if ('opened' in changes) { + // Coerce the value to a boolean + this.opened = coerceBooleanProperty(changes['opened'].currentValue); + + // Open/close the navigation + this._toggleOpened(this.opened); + } + + // Position + if ('position' in changes) { + // Execute the observable + this.positionChanged.next(changes['position'].currentValue); + } + + // Transparent overlay + if ('transparentOverlay' in changes) { + // Coerce the value to a boolean + this.transparentOverlay = coerceBooleanProperty( + changes['transparentOverlay'].currentValue + ); + } + } + + /** + * On init + */ + ngOnInit(): void { + // Make sure the name input is not an empty string + if (this.name === '') { + this.name = this._fuseUtilsService.randomId(); + } + + // Register the navigation component + this._fuseNavigationService.registerComponent(this.name, this); + + // Subscribe to the 'NavigationEnd' event + this._router.events + .pipe( + filter((event, index) => event instanceof NavigationEnd), + takeUntil(this._unsubscribeAll) + ) + .subscribe(() => { + // If the mode is 'over' and the navigation is opened... + if (this.mode === 'over' && this.opened) { + // Close the navigation + this.close(); + } + + // If the mode is 'side' and the aside is active... + if (this.mode === 'side' && this.activeAsideItemId) { + // Close the aside + this.closeAside(); + } + }); + } + + /** + * After view init + */ + ngAfterViewInit(): void { + setTimeout(() => { + // Return if 'navigation content' element does not exist + if (!this._navigationContentEl) { + return; + } + + // If 'navigation content' element doesn't have + // perfect scrollbar activated on it... + if (!this._navigationContentEl.nativeElement.classList.contains('ps')) { + // Find the active item + const activeItem = + this._navigationContentEl.nativeElement.querySelector( + '.fuse-vertical-navigation-item-active' + ); + + // If the active item exists, scroll it into view + if (activeItem) { + activeItem.scrollIntoView(); + } + } + // Otherwise + else { + // Go through all the scrollbar directives + this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => { + // Skip if not enabled + if (!fuseScrollbarDirective.isEnabled()) { + return; + } + + // Scroll to the active element + fuseScrollbarDirective.scrollToElement( + '.fuse-vertical-navigation-item-active', + -120, + true + ); + }); + } + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Forcefully close the navigation and aside in case they are opened + this.close(); + this.closeAside(); + + // Deregister the navigation component from the registry + this._fuseNavigationService.deregisterComponent(this.name); + + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Refresh the component to apply the changes + */ + refresh(): void { + // Mark for check + this._changeDetectorRef.markForCheck(); + + // Execute the observable + this.onRefreshed.next(true); + } + + /** + * Open the navigation + */ + open(): void { + // Return if the navigation is already open + if (this.opened) { + return; + } + + // Set the opened + this._toggleOpened(true); + } + + /** + * Close the navigation + */ + close(): void { + // Return if the navigation is already closed + if (!this.opened) { + return; + } + + // Close the aside + this.closeAside(); + + // Set the opened + this._toggleOpened(false); + } + + /** + * Toggle the navigation + */ + toggle(): void { + // Toggle + if (this.opened) { + this.close(); + } else { + this.open(); + } + } + + /** + * Open the aside + * + * @param item + */ + openAside(item: FuseNavigationItem): void { + // Return if the item is disabled + if (item.disabled || !item.id) { + return; + } + + // Open + this.activeAsideItemId = item.id; + + // Show the aside overlay + this._showAsideOverlay(); + + // Mark for check + this._changeDetectorRef.markForCheck(); + } + + /** + * Close the aside + */ + closeAside(): void { + // Close + this.activeAsideItemId = undefined; + + // Hide the aside overlay + this._hideAsideOverlay(); + + // Mark for check + this._changeDetectorRef.markForCheck(); + } + + /** + * Toggle the aside + * + * @param item + */ + toggleAside(item: FuseNavigationItem): void { + // Toggle + if (this.activeAsideItemId === item.id) { + this.closeAside(); + } else { + this.openAside(item); + } + } + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Enable the animations + * + * @private + */ + private _enableAnimations(): void { + // Return if the animations are already enabled + if (this._animationsEnabled) { + return; + } + + // Enable the animations + this._animationsEnabled = true; + } + + /** + * Disable the animations + * + * @private + */ + private _disableAnimations(): void { + // Return if the animations are already disabled + if (!this._animationsEnabled) { + return; + } + + // Disable the animations + this._animationsEnabled = false; + } + + /** + * Show the overlay + * + * @private + */ + private _showOverlay(): void { + // Return if there is already an overlay + if (this._asideOverlay) { + return; + } + + // Create the overlay element + this._overlay = this._renderer2.createElement('div'); + + // Add a class to the overlay element + this._overlay?.classList.add('fuse-vertical-navigation-overlay'); + + // Add a class depending on the transparentOverlay option + if (this.transparentOverlay) { + this._overlay?.classList.add( + 'fuse-vertical-navigation-overlay-transparent' + ); + } + + // Append the overlay to the parent of the navigation + this._renderer2.appendChild( + this._elementRef.nativeElement.parentElement, + this._overlay + ); + + // Enable block scroll strategy + this._scrollStrategy.enable(); + + // Create the enter animation and attach it to the player + this._player = this._animationBuilder + .build([ + animate( + '300ms cubic-bezier(0.25, 0.8, 0.25, 1)', + style({ opacity: 1 }) + ), + ]) + .create(this._overlay); + + // Play the animation + this._player.play(); + + // Add an event listener to the overlay + this._overlay?.addEventListener('click', this._handleOverlayClick); + } + + /** + * Hide the overlay + * + * @private + */ + private _hideOverlay(): void { + if (!this._overlay) { + return; + } + + // Create the leave animation and attach it to the player + this._player = this._animationBuilder + .build([ + animate( + '300ms cubic-bezier(0.25, 0.8, 0.25, 1)', + style({ opacity: 0 }) + ), + ]) + .create(this._overlay); + + // Play the animation + this._player.play(); + + // Once the animation is done... + this._player.onDone(() => { + // If the overlay still exists... + if (this._overlay) { + // Remove the event listener + this._overlay.removeEventListener('click', this._handleOverlayClick); + + // Remove the overlay + this._overlay.parentNode?.removeChild(this._overlay); + this._overlay = undefined; + } + + // Disable block scroll strategy + this._scrollStrategy.disable(); + }); + } + + /** + * Show the aside overlay + * + * @private + */ + private _showAsideOverlay(): void { + // Return if there is already an overlay + if (this._asideOverlay) { + return; + } + + // Create the aside overlay element + this._asideOverlay = this._renderer2.createElement('div'); + + // Add a class to the aside overlay element + this._asideOverlay?.classList.add('fuse-vertical-navigation-aside-overlay'); + + // Append the aside overlay to the parent of the navigation + this._renderer2.appendChild( + this._elementRef.nativeElement.parentElement, + this._asideOverlay + ); + + // Create the enter animation and attach it to the player + this._player = this._animationBuilder + .build([ + animate( + '300ms cubic-bezier(0.25, 0.8, 0.25, 1)', + style({ opacity: 1 }) + ), + ]) + .create(this._asideOverlay); + + // Play the animation + this._player.play(); + + // Add an event listener to the aside overlay + this._asideOverlay?.addEventListener( + 'click', + this._handleAsideOverlayClick + ); + } + + /** + * Hide the aside overlay + * + * @private + */ + private _hideAsideOverlay(): void { + if (!this._asideOverlay) { + return; + } + + // Create the leave animation and attach it to the player + this._player = this._animationBuilder + .build([ + animate( + '300ms cubic-bezier(0.25, 0.8, 0.25, 1)', + style({ opacity: 0 }) + ), + ]) + .create(this._asideOverlay); + + // Play the animation + this._player.play(); + + // Once the animation is done... + this._player.onDone(() => { + // If the aside overlay still exists... + if (this._asideOverlay) { + // Remove the event listener + this._asideOverlay.removeEventListener( + 'click', + this._handleAsideOverlayClick + ); + + // Remove the aside overlay + this._asideOverlay.parentNode?.removeChild(this._asideOverlay); + this._asideOverlay = undefined; + } + }); + } + + /** + * Open/close the navigation + * + * @param open + * @private + */ + private _toggleOpened(open: boolean): void { + // Set the opened + this.opened = open; + + // Enable the animations + this._enableAnimations(); + + // If the navigation opened, and the mode + // is 'over', show the overlay + if (this.mode === 'over') { + if (this.opened) { + this._showOverlay(); + } else { + this._hideOverlay(); + } + } + + // Execute the observable + this.openedChanged.next(open); + } +} diff --git a/src/@fuse/directives/scroll-reset/index.ts b/src/@fuse/directives/scroll-reset/index.ts new file mode 100644 index 0000000..f1f563b --- /dev/null +++ b/src/@fuse/directives/scroll-reset/index.ts @@ -0,0 +1 @@ +export * from '@fuse/directives/scroll-reset/public-api'; diff --git a/src/@fuse/directives/scroll-reset/public-api.ts b/src/@fuse/directives/scroll-reset/public-api.ts new file mode 100644 index 0000000..c394b43 --- /dev/null +++ b/src/@fuse/directives/scroll-reset/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/directives/scroll-reset/scroll-reset.directive'; +export * from '@fuse/directives/scroll-reset/scroll-reset.module'; diff --git a/src/@fuse/directives/scroll-reset/scroll-reset.directive.ts b/src/@fuse/directives/scroll-reset/scroll-reset.directive.ts new file mode 100644 index 0000000..ab8bae1 --- /dev/null +++ b/src/@fuse/directives/scroll-reset/scroll-reset.directive.ts @@ -0,0 +1,52 @@ +import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; +import { filter, Subject, takeUntil } from 'rxjs'; + +@Directive({ + selector: '[fuseScrollReset]', + exportAs: 'fuseScrollReset' +}) +export class FuseScrollResetDirective implements OnInit, OnDestroy +{ + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _elementRef: ElementRef, + private _router: Router + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to NavigationEnd event + this._router.events.pipe( + filter(event => event instanceof NavigationEnd), + takeUntil(this._unsubscribeAll) + ).subscribe(() => { + + // Reset the element's scroll position to the top + this._elementRef.nativeElement.scrollTop = 0; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } +} diff --git a/src/@fuse/directives/scroll-reset/scroll-reset.module.ts b/src/@fuse/directives/scroll-reset/scroll-reset.module.ts new file mode 100644 index 0000000..48715be --- /dev/null +++ b/src/@fuse/directives/scroll-reset/scroll-reset.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { FuseScrollResetDirective } from '@fuse/directives/scroll-reset/scroll-reset.directive'; + +@NgModule({ + declarations: [ + FuseScrollResetDirective + ], + exports : [ + FuseScrollResetDirective + ] +}) +export class FuseScrollResetModule +{ +} diff --git a/src/@fuse/directives/scrollbar/index.ts b/src/@fuse/directives/scrollbar/index.ts new file mode 100644 index 0000000..9aba580 --- /dev/null +++ b/src/@fuse/directives/scrollbar/index.ts @@ -0,0 +1 @@ +export * from '@fuse/directives/scrollbar/public-api'; diff --git a/src/@fuse/directives/scrollbar/public-api.ts b/src/@fuse/directives/scrollbar/public-api.ts new file mode 100644 index 0000000..c74ff50 --- /dev/null +++ b/src/@fuse/directives/scrollbar/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/directives/scrollbar/scrollbar.directive'; +export * from '@fuse/directives/scrollbar/scrollbar.module'; diff --git a/src/@fuse/directives/scrollbar/scrollbar.directive.ts b/src/@fuse/directives/scrollbar/scrollbar.directive.ts new file mode 100644 index 0000000..4cb702b --- /dev/null +++ b/src/@fuse/directives/scrollbar/scrollbar.directive.ts @@ -0,0 +1,449 @@ +import { + Directive, + ElementRef, + Input, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges, +} from '@angular/core'; +import { Router } from '@angular/router'; +import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; +import { Platform } from '@angular/cdk/platform'; +import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs'; +import PerfectScrollbar from 'perfect-scrollbar'; +import { merge } from 'lodash-es'; +import { + ScrollbarGeometry, + ScrollbarPosition, +} from '@fuse/directives/scrollbar/scrollbar.types'; + +/** + * Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar + */ +@Directive({ + selector: '[fuseScrollbar]', + exportAs: 'fuseScrollbar', +}) +export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy { + /* eslint-disable @typescript-eslint/naming-convention */ + static ngAcceptInputType_fuseScrollbar: BooleanInput; + /* eslint-enable @typescript-eslint/naming-convention */ + + @Input() fuseScrollbar: boolean = true; + @Input() fuseScrollbarOptions?: PerfectScrollbar.Options; + + private _animation?: number; + private _options?: PerfectScrollbar.Options; + private _ps?: PerfectScrollbar; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _elementRef: ElementRef, + private _platform: Platform, + private _router: Router + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for _elementRef + */ + get elementRef(): ElementRef { + return this._elementRef; + } + + /** + * Getter for _ps + */ + get ps(): PerfectScrollbar | undefined { + return this._ps; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void { + // Enabled + if ('fuseScrollbar' in changes) { + // Interpret empty string as 'true' + this.fuseScrollbar = coerceBooleanProperty( + changes['fuseScrollbar'].currentValue + ); + + // If enabled, init the directive + if (this.fuseScrollbar) { + this._init(); + } + // Otherwise destroy it + else { + this._destroy(); + } + } + + // Scrollbar options + if ('fuseScrollbarOptions' in changes) { + // Merge the options + this._options = merge( + {}, + this._options, + changes['fuseScrollbarOptions'].currentValue + ); + + // Return if not initialized + if (!this._ps) { + return; + } + + // Destroy and re-init the PerfectScrollbar to update its options + setTimeout(() => { + this._destroy(); + }); + + setTimeout(() => { + this._init(); + }); + } + } + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to window resize event + fromEvent(window, 'resize') + .pipe(takeUntil(this._unsubscribeAll), debounceTime(150)) + .subscribe(() => { + // Update the PerfectScrollbar + this.update(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + this._destroy(); + + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Is enabled + */ + isEnabled(): boolean { + return this.fuseScrollbar; + } + + /** + * Update the scrollbar + */ + update(): void { + // Return if not initialized + if (!this._ps) { + return; + } + + // Update the PerfectScrollbar + this._ps.update(); + } + + /** + * Destroy the scrollbar + */ + destroy(): void { + this.ngOnDestroy(); + } + + /** + * Returns the geometry of the scrollable element + * + * @param prefix + */ + geometry(prefix: string = 'scroll'): ScrollbarGeometry { + return new ScrollbarGeometry( + this._elementRef.nativeElement[prefix + 'Left'], + this._elementRef.nativeElement[prefix + 'Top'], + this._elementRef.nativeElement[prefix + 'Width'], + this._elementRef.nativeElement[prefix + 'Height'] + ); + } + + /** + * Returns the position of the scrollable element + * + * @param absolute + */ + position(absolute: boolean = false): ScrollbarPosition { + let scrollbarPosition; + + if (!absolute && this._ps) { + scrollbarPosition = new ScrollbarPosition( + this._ps.reach.x || 0, + this._ps.reach.y || 0 + ); + } else { + scrollbarPosition = new ScrollbarPosition( + this._elementRef.nativeElement.scrollLeft, + this._elementRef.nativeElement.scrollTop + ); + } + + return scrollbarPosition; + } + + /** + * Scroll to + * + * @param x + * @param y + * @param speed + */ + scrollTo(x: number, y?: number, speed?: number): void { + if (y == null && speed == null) { + this.animateScrolling('scrollTop', x, speed); + } else { + if (x != null) { + this.animateScrolling('scrollLeft', x, speed); + } + + if (y != null) { + this.animateScrolling('scrollTop', y, speed); + } + } + } + + /** + * Scroll to X + * + * @param x + * @param speed + */ + scrollToX(x: number, speed?: number): void { + this.animateScrolling('scrollLeft', x, speed); + } + + /** + * Scroll to Y + * + * @param y + * @param speed + */ + scrollToY(y: number, speed?: number): void { + this.animateScrolling('scrollTop', y, speed); + } + + /** + * Scroll to top + * + * @param offset + * @param speed + */ + scrollToTop(offset: number = 0, speed?: number): void { + this.animateScrolling('scrollTop', offset, speed); + } + + /** + * Scroll to bottom + * + * @param offset + * @param speed + */ + scrollToBottom(offset: number = 0, speed?: number): void { + const top = + this._elementRef.nativeElement.scrollHeight - + this._elementRef.nativeElement.clientHeight; + this.animateScrolling('scrollTop', top - offset, speed); + } + + /** + * Scroll to left + * + * @param offset + * @param speed + */ + scrollToLeft(offset: number = 0, speed?: number): void { + this.animateScrolling('scrollLeft', offset, speed); + } + + /** + * Scroll to right + * + * @param offset + * @param speed + */ + scrollToRight(offset: number = 0, speed?: number): void { + const left = + this._elementRef.nativeElement.scrollWidth - + this._elementRef.nativeElement.clientWidth; + this.animateScrolling('scrollLeft', left - offset, speed); + } + + /** + * Scroll to element + * + * @param qs + * @param offset + * @param ignoreVisible If true, scrollToElement won't happen if element is already inside the current viewport + * @param speed + */ + scrollToElement( + qs: string, + offset: number = 0, + ignoreVisible: boolean = false, + speed?: number + ): void { + const element = this._elementRef.nativeElement.querySelector(qs); + + if (!element) { + return; + } + + const elementPos = element.getBoundingClientRect(); + const scrollerPos = this._elementRef.nativeElement.getBoundingClientRect(); + + if (this._elementRef.nativeElement.classList.contains('ps--active-x')) { + if ( + ignoreVisible && + elementPos.right <= scrollerPos.right - Math.abs(offset) + ) { + return; + } + + const currentPos = this._elementRef.nativeElement['scrollLeft']; + const position = elementPos.left - scrollerPos.left + currentPos; + + this.animateScrolling('scrollLeft', position + offset, speed); + } + + if (this._elementRef.nativeElement.classList.contains('ps--active-y')) { + if ( + ignoreVisible && + elementPos.bottom <= scrollerPos.bottom - Math.abs(offset) + ) { + return; + } + + const currentPos = this._elementRef.nativeElement['scrollTop']; + const position = elementPos.top - scrollerPos.top + currentPos; + + this.animateScrolling('scrollTop', position + offset, speed); + } + } + + /** + * Animate scrolling + * + * @param target + * @param value + * @param speed + */ + animateScrolling(target: string, value: number, speed?: number): void { + if (this._animation) { + window.cancelAnimationFrame(this._animation); + this._animation = undefined; + } + + if (!speed || typeof window === 'undefined') { + this._elementRef.nativeElement[target] = value; + } else if (value !== this._elementRef.nativeElement[target]) { + let newValue = 0; + let scrollCount = 0; + + let oldTimestamp = performance.now(); + let oldValue = this._elementRef.nativeElement[target]; + + const cosParameter = (oldValue - value) / 2; + + const step = (newTimestamp: number): void => { + scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp)); + newValue = Math.round( + value + cosParameter + cosParameter * Math.cos(scrollCount) + ); + + // Only continue animation if scroll position has not changed + if (this._elementRef.nativeElement[target] === oldValue) { + if (scrollCount >= Math.PI) { + this.animateScrolling(target, value, 0); + } else { + this._elementRef.nativeElement[target] = newValue; + + // On a zoomed out page the resulting offset may differ + oldValue = this._elementRef.nativeElement[target]; + oldTimestamp = newTimestamp; + + this._animation = window.requestAnimationFrame(step); + } + } + }; + + window.requestAnimationFrame(step); + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Initialize + * + * @private + */ + private _init(): void { + // Return if already initialized + if (this._ps) { + return; + } + + // Return if on mobile or not on browser + if ( + this._platform.ANDROID || + this._platform.IOS || + !this._platform.isBrowser + ) { + this.fuseScrollbar = false; + return; + } + + // Initialize the PerfectScrollbar + this._ps = new PerfectScrollbar(this._elementRef.nativeElement, { + ...this._options, + }); + } + + /** + * Destroy + * + * @private + */ + private _destroy(): void { + // Return if not initialized + if (!this._ps) { + return; + } + + // Destroy the PerfectScrollbar + this._ps.destroy(); + + // Clean up + this._ps = undefined; + } +} diff --git a/src/@fuse/directives/scrollbar/scrollbar.module.ts b/src/@fuse/directives/scrollbar/scrollbar.module.ts new file mode 100644 index 0000000..628645b --- /dev/null +++ b/src/@fuse/directives/scrollbar/scrollbar.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive'; + +@NgModule({ + declarations: [ + FuseScrollbarDirective + ], + exports : [ + FuseScrollbarDirective + ] +}) +export class FuseScrollbarModule +{ +} diff --git a/src/@fuse/directives/scrollbar/scrollbar.types.ts b/src/@fuse/directives/scrollbar/scrollbar.types.ts new file mode 100644 index 0000000..11694a9 --- /dev/null +++ b/src/@fuse/directives/scrollbar/scrollbar.types.ts @@ -0,0 +1,28 @@ +export class ScrollbarGeometry +{ + public x: number; + public y: number; + + public w: number; + public h: number; + + constructor(x: number, y: number, w: number, h: number) + { + this.x = x; + this.y = y; + this.w = w; + this.h = h; + } +} + +export class ScrollbarPosition +{ + public x: number | 'start' | 'end'; + public y: number | 'start' | 'end'; + + constructor(x: number | 'start' | 'end', y: number | 'start' | 'end') + { + this.x = x; + this.y = y; + } +} diff --git a/src/@fuse/fuse.module.ts b/src/@fuse/fuse.module.ts new file mode 100644 index 0000000..5886f7a --- /dev/null +++ b/src/@fuse/fuse.module.ts @@ -0,0 +1,49 @@ +import { NgModule, Optional, SkipSelf } from '@angular/core'; +import { MATERIAL_SANITY_CHECKS } from '@angular/material/core'; +import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; +import { FuseConfirmationModule } from '@fuse/services/confirmation'; +import { FuseLoadingModule } from '@fuse/services/loading'; +import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module'; +import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module'; +import { FuseUtilsModule } from '@fuse/services/utils/utils.module'; + +@NgModule({ + imports : [ + FuseConfirmationModule, + FuseLoadingModule, + FuseMediaWatcherModule, + FuseSplashScreenModule, + FuseUtilsModule + ], + providers: [ + { + // Disable 'theme' sanity check + provide : MATERIAL_SANITY_CHECKS, + useValue: { + doctype: true, + theme : false, + version: true + } + }, + { + // Use the 'fill' appearance on Angular Material form fields by default + provide : MAT_FORM_FIELD_DEFAULT_OPTIONS, + useValue: { + appearance: 'fill' + } + } + ] +}) +export class FuseModule +{ + /** + * Constructor + */ + constructor(@Optional() @SkipSelf() parentModule?: FuseModule) + { + if ( parentModule ) + { + throw new Error('FuseModule has already been loaded. Import this module in the AppModule only!'); + } + } +} diff --git a/src/@fuse/index.ts b/src/@fuse/index.ts new file mode 100644 index 0000000..b172fb6 --- /dev/null +++ b/src/@fuse/index.ts @@ -0,0 +1 @@ +export * from './fuse.module'; diff --git a/src/@fuse/lib/mock-api/index.ts b/src/@fuse/lib/mock-api/index.ts new file mode 100644 index 0000000..121e0f7 --- /dev/null +++ b/src/@fuse/lib/mock-api/index.ts @@ -0,0 +1 @@ +export * from '@fuse/lib/mock-api/public-api'; diff --git a/src/@fuse/lib/mock-api/mock-api.constants.ts b/src/@fuse/lib/mock-api/mock-api.constants.ts new file mode 100644 index 0000000..de7440f --- /dev/null +++ b/src/@fuse/lib/mock-api/mock-api.constants.ts @@ -0,0 +1,3 @@ +import { InjectionToken } from '@angular/core'; + +export const FUSE_MOCK_API_DEFAULT_DELAY = new InjectionToken('FUSE_MOCK_API_DEFAULT_DELAY'); diff --git a/src/@fuse/lib/mock-api/mock-api.interceptor.ts b/src/@fuse/lib/mock-api/mock-api.interceptor.ts new file mode 100644 index 0000000..e94bdf1 --- /dev/null +++ b/src/@fuse/lib/mock-api/mock-api.interceptor.ts @@ -0,0 +1,96 @@ +import { Inject, Injectable } from '@angular/core'; +import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http'; +import { delay, Observable, of, switchMap, throwError } from 'rxjs'; +import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants'; +import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service'; + +@Injectable({ + providedIn: 'root' +}) +export class FuseMockApiInterceptor implements HttpInterceptor +{ + /** + * Constructor + */ + constructor( + @Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number, + private _fuseMockApiService: FuseMockApiService + ) + { + } + + /** + * Intercept + * + * @param request + * @param next + */ + intercept(request: HttpRequest, next: HttpHandler): Observable> + { + // Try to get the request handler + const { + handler, + urlParams + } = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url); + + // Pass through if the request handler does not exist + if ( !handler ) + { + return next.handle(request); + } + + // Set the intercepted request on the handler + handler.request = request; + + // Set the url params on the handler + handler.urlParams = urlParams; + + // Subscribe to the response function observable + return handler.response.pipe( + delay(handler.delay ?? this._defaultDelay ?? 0), + switchMap((response) => { + + // If there is no response data, + // throw an error response + if ( !response ) + { + response = new HttpErrorResponse({ + error : 'NOT FOUND', + status : 404, + statusText: 'NOT FOUND' + }); + + return throwError(response); + } + + // Parse the response data + const data = { + status: response[0], + body : response[1] + }; + + // If the status code is in between 200 and 300, + // return a success response + if ( data.status >= 200 && data.status < 300 ) + { + response = new HttpResponse({ + body : data.body, + status : data.status, + statusText: 'OK' + }); + + return of(response); + } + + // For other status codes, + // throw an error response + response = new HttpErrorResponse({ + error : data.body.error, + status : data.status, + statusText: 'ERROR' + }); + + return throwError(response); + })); + } +} diff --git a/src/@fuse/lib/mock-api/mock-api.module.ts b/src/@fuse/lib/mock-api/mock-api.module.ts new file mode 100644 index 0000000..1450a66 --- /dev/null +++ b/src/@fuse/lib/mock-api/mock-api.module.ts @@ -0,0 +1,42 @@ +import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core'; +import { HTTP_INTERCEPTORS } from '@angular/common/http'; +import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants'; +import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor'; + +@NgModule({ + providers: [ + { + provide : HTTP_INTERCEPTORS, + useClass: FuseMockApiInterceptor, + multi : true + } + ] +}) +export class FuseMockApiModule +{ + /** + * FuseMockApi module default configuration. + * + * @param mockApiServices - Array of services that register mock API handlers + * @param config - Configuration options + * @param config.delay - Default delay value in milliseconds to apply all responses + */ + static forRoot(mockApiServices: any[], config?: { delay?: number }): ModuleWithProviders + { + return { + ngModule : FuseMockApiModule, + providers: [ + { + provide : APP_INITIALIZER, + deps : [...mockApiServices], + useFactory: () => (): any => null, + multi : true + }, + { + provide : FUSE_MOCK_API_DEFAULT_DELAY, + useValue: config?.delay ?? 0 + } + ] + }; + } +} diff --git a/src/@fuse/lib/mock-api/mock-api.request-handler.ts b/src/@fuse/lib/mock-api/mock-api.request-handler.ts new file mode 100644 index 0000000..668c7b0 --- /dev/null +++ b/src/@fuse/lib/mock-api/mock-api.request-handler.ts @@ -0,0 +1,99 @@ +import { HttpRequest } from '@angular/common/http'; +import { Observable, of, take, throwError } from 'rxjs'; +import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types'; + +export class FuseMockApiHandler +{ + request!: HttpRequest; + urlParams!: { [key: string]: string }; + + // Private + private _reply: FuseMockApiReplyCallback = undefined; + private _replyCount = 0; + private _replied = 0; + + /** + * Constructor + */ + constructor( + public url: string, + public delay?: number + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for response callback + */ + get response(): Observable + { + // If the execution limit has been reached, throw an error + if ( this._replyCount > 0 && this._replyCount <= this._replied ) + { + return throwError('Execution limit has been reached!'); + } + + // If the response callback has not been set, throw an error + if ( !this._reply ) + { + return throwError('Response callback function does not exist!'); + } + + // If the request has not been set, throw an error + if ( !this.request ) + { + return throwError('Request does not exist!'); + } + + // Increase the replied count + this._replied++; + + // Execute the reply callback + const replyResult = this._reply({ + request : this.request, + urlParams: this.urlParams + }); + + // If the result of the reply callback is an observable... + if ( replyResult instanceof Observable ) + { + // Return the result as it is + return replyResult.pipe(take(1)); + } + + // Otherwise, return the result as an observable + return of(replyResult).pipe(take(1)); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Reply + * + * @param callback + */ + reply(callback: FuseMockApiReplyCallback): void + { + // Store the reply + this._reply = callback; + } + + /** + * Reply count + * + * @param count + */ + replyCount(count: number): void + { + // Store the reply count + this._replyCount = count; + } +} + + diff --git a/src/@fuse/lib/mock-api/mock-api.service.ts b/src/@fuse/lib/mock-api/mock-api.service.ts new file mode 100644 index 0000000..30a0652 --- /dev/null +++ b/src/@fuse/lib/mock-api/mock-api.service.ts @@ -0,0 +1,202 @@ +import { Injectable } from '@angular/core'; +import { compact, fromPairs } from 'lodash-es'; +import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler'; +import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types'; + +@Injectable({ + providedIn: 'root' +}) +export class FuseMockApiService +{ + private _handlers: { [key: string]: Map } = { + 'get' : new Map(), + 'post' : new Map(), + 'patch' : new Map(), + 'delete' : new Map(), + 'put' : new Map(), + 'head' : new Map(), + 'jsonp' : new Map(), + 'options': new Map() + }; + + /** + * Constructor + */ + constructor() + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Find the handler from the service + * with the given method and url + * + * @param method + * @param url + */ + findHandler(method: string, url: string): { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } + { + // Prepare the return object + const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = { + handler : undefined, + urlParams: {} + }; + + // Split the url + const urlParts = url.split('/'); + + // Get all related request handlers + const handlers = this._handlers[method.toLowerCase()]; + + // Iterate through the handlers + handlers.forEach((handler, handlerUrl) => { + + // Skip if there is already a matching handler + if ( matchingHandler.handler ) + { + return; + } + + // Split the handler url + const handlerUrlParts = handlerUrl.split('/'); + + // Skip if the lengths of the urls we are comparing are not the same + if ( urlParts.length !== handlerUrlParts.length ) + { + return; + } + + // Compare + const matches = handlerUrlParts.every((handlerUrlPart, index) => handlerUrlPart === urlParts[index] || handlerUrlPart.startsWith(':')); + + // If there is a match... + if ( matches ) + { + // Assign the matching handler + matchingHandler.handler = handler; + + // Extract and assign the parameters + matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) => + handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined + ))); + } + }); + + return matchingHandler; + } + + /** + * Register GET request handler + * + * @param url - URL address of the mocked API endpoint + * @param delay - Delay of the response in milliseconds + */ + onGet(url: string, delay?: number): FuseMockApiHandler + { + return this._registerHandler('get', url, delay); + } + + /** + * Register POST request handler + * + * @param url - URL address of the mocked API endpoint + * @param delay - Delay of the response in milliseconds + */ + onPost(url: string, delay?: number): FuseMockApiHandler + { + return this._registerHandler('post', url, delay); + } + + /** + * Register PATCH request handler + * + * @param url - URL address of the mocked API endpoint + * @param delay - Delay of the response in milliseconds + */ + onPatch(url: string, delay?: number): FuseMockApiHandler + { + return this._registerHandler('patch', url, delay); + } + + /** + * Register DELETE request handler + * + * @param url - URL address of the mocked API endpoint + * @param delay - Delay of the response in milliseconds + */ + onDelete(url: string, delay?: number): FuseMockApiHandler + { + return this._registerHandler('delete', url, delay); + } + + /** + * Register PUT request handler + * + * @param url - URL address of the mocked API endpoint + * @param delay - Delay of the response in milliseconds + */ + onPut(url: string, delay?: number): FuseMockApiHandler + { + return this._registerHandler('put', url, delay); + } + + /** + * Register HEAD request handler + * + * @param url - URL address of the mocked API endpoint + * @param delay - Delay of the response in milliseconds + */ + onHead(url: string, delay?: number): FuseMockApiHandler + { + return this._registerHandler('head', url, delay); + } + + /** + * Register JSONP request handler + * + * @param url - URL address of the mocked API endpoint + * @param delay - Delay of the response in milliseconds + */ + onJsonp(url: string, delay?: number): FuseMockApiHandler + { + return this._registerHandler('jsonp', url, delay); + } + + /** + * Register OPTIONS request handler + * + * @param url - URL address of the mocked API endpoint + * @param delay - Delay of the response in milliseconds + */ + onOptions(url: string, delay?: number): FuseMockApiHandler + { + return this._registerHandler('options', url, delay); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register and return a new instance of the handler + * + * @param method + * @param url + * @param delay + * @private + */ + private _registerHandler(method: FuseMockApiMethods, url: string, delay?: number): FuseMockApiHandler + { + // Create a new instance of FuseMockApiRequestHandler + const fuseMockHttp = new FuseMockApiHandler(url, delay); + + // Store the handler to access it from the interceptor + this._handlers[method].set(url, fuseMockHttp); + + // Return the instance + return fuseMockHttp; + } +} diff --git a/src/@fuse/lib/mock-api/mock-api.types.ts b/src/@fuse/lib/mock-api/mock-api.types.ts new file mode 100644 index 0000000..77236aa --- /dev/null +++ b/src/@fuse/lib/mock-api/mock-api.types.ts @@ -0,0 +1,16 @@ +import { HttpRequest } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +export type FuseMockApiReplyCallback = + | ((data: { request: HttpRequest; urlParams: { [key: string]: string } }) => ([number, string | any]) | Observable) + | undefined; + +export type FuseMockApiMethods = + | 'get' + | 'post' + | 'patch' + | 'delete' + | 'put' + | 'head' + | 'jsonp' + | 'options'; diff --git a/src/@fuse/lib/mock-api/mock-api.utils.ts b/src/@fuse/lib/mock-api/mock-api.utils.ts new file mode 100644 index 0000000..91af6a8 --- /dev/null +++ b/src/@fuse/lib/mock-api/mock-api.utils.ts @@ -0,0 +1,37 @@ +export class FuseMockApiUtils +{ + /** + * Constructor + */ + constructor() + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Generate a globally unique id + */ + static guid(): string + { + /* eslint-disable */ + + let d = new Date().getTime(); + + // Use high-precision timer if available + if ( typeof performance !== 'undefined' && typeof performance.now === 'function' ) + { + d += performance.now(); + } + + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { + const r = (d + Math.random() * 16) % 16 | 0; + d = Math.floor(d / 16); + return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); + }); + + /* eslint-enable */ + } +} diff --git a/src/@fuse/lib/mock-api/public-api.ts b/src/@fuse/lib/mock-api/public-api.ts new file mode 100644 index 0000000..77e2345 --- /dev/null +++ b/src/@fuse/lib/mock-api/public-api.ts @@ -0,0 +1,5 @@ +export * from '@fuse/lib/mock-api/mock-api.constants'; +export * from '@fuse/lib/mock-api/mock-api.module'; +export * from '@fuse/lib/mock-api/mock-api.service'; +export * from '@fuse/lib/mock-api/mock-api.types'; +export * from '@fuse/lib/mock-api/mock-api.utils'; diff --git a/src/@fuse/pipes/find-by-key/find-by-key.module.ts b/src/@fuse/pipes/find-by-key/find-by-key.module.ts new file mode 100644 index 0000000..ead3477 --- /dev/null +++ b/src/@fuse/pipes/find-by-key/find-by-key.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe'; + +@NgModule({ + declarations: [ + FuseFindByKeyPipe + ], + exports : [ + FuseFindByKeyPipe + ] +}) +export class FuseFindByKeyPipeModule +{ +} diff --git a/src/@fuse/pipes/find-by-key/find-by-key.pipe.ts b/src/@fuse/pipes/find-by-key/find-by-key.pipe.ts new file mode 100644 index 0000000..ef56d41 --- /dev/null +++ b/src/@fuse/pipes/find-by-key/find-by-key.pipe.ts @@ -0,0 +1,37 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +/** + * Finds an object from given source using the given key - value pairs + */ +@Pipe({ + name: 'fuseFindByKey', + pure: false +}) +export class FuseFindByKeyPipe implements PipeTransform +{ + /** + * Constructor + */ + constructor() + { + } + + /** + * Transform + * + * @param value A string or an array of strings to find from source + * @param key Key of the object property to look for + * @param source Array of objects to find from + */ + transform(value: string | string[], key: string, source: any[]): any + { + // If the given value is an array of strings... + if ( Array.isArray(value) ) + { + return value.map(item => source.find(sourceItem => sourceItem[key] === item)); + } + + // If the value is a string... + return source.find(sourceItem => sourceItem[key] === value); + } +} diff --git a/src/@fuse/pipes/find-by-key/index.ts b/src/@fuse/pipes/find-by-key/index.ts new file mode 100644 index 0000000..61efac0 --- /dev/null +++ b/src/@fuse/pipes/find-by-key/index.ts @@ -0,0 +1 @@ +export * from '@fuse/pipes/find-by-key/public-api'; diff --git a/src/@fuse/pipes/find-by-key/public-api.ts b/src/@fuse/pipes/find-by-key/public-api.ts new file mode 100644 index 0000000..178a2c7 --- /dev/null +++ b/src/@fuse/pipes/find-by-key/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/pipes/find-by-key/find-by-key.pipe'; +export * from '@fuse/pipes/find-by-key/find-by-key.module'; diff --git a/src/@fuse/services/config/config.constants.ts b/src/@fuse/services/config/config.constants.ts new file mode 100644 index 0000000..ef99d39 --- /dev/null +++ b/src/@fuse/services/config/config.constants.ts @@ -0,0 +1,3 @@ +import { InjectionToken } from '@angular/core'; + +export const FUSE_APP_CONFIG = new InjectionToken('FUSE_APP_CONFIG'); diff --git a/src/@fuse/services/config/config.module.ts b/src/@fuse/services/config/config.module.ts new file mode 100644 index 0000000..4416a4c --- /dev/null +++ b/src/@fuse/services/config/config.module.ts @@ -0,0 +1,32 @@ +import { ModuleWithProviders, NgModule } from '@angular/core'; +import { FuseConfigService } from '@fuse/services/config/config.service'; +import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants'; + +@NgModule() +export class FuseConfigModule +{ + /** + * Constructor + */ + constructor(private _fuseConfigService: FuseConfigService) + { + } + + /** + * forRoot method for setting user configuration + * + * @param config + */ + static forRoot(config: any): ModuleWithProviders + { + return { + ngModule : FuseConfigModule, + providers: [ + { + provide : FUSE_APP_CONFIG, + useValue: config + } + ] + }; + } +} diff --git a/src/@fuse/services/config/config.service.ts b/src/@fuse/services/config/config.service.ts new file mode 100644 index 0000000..33948a0 --- /dev/null +++ b/src/@fuse/services/config/config.service.ts @@ -0,0 +1,55 @@ +import { Inject, Injectable } from '@angular/core'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { merge } from 'lodash-es'; +import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants'; + +@Injectable({ + providedIn: 'root' +}) +export class FuseConfigService +{ + private _config: BehaviorSubject; + + /** + * Constructor + */ + constructor(@Inject(FUSE_APP_CONFIG) config: any) + { + // Private + this._config = new BehaviorSubject(config); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Setter & getter for config + */ + set config(value: any) + { + // Merge the new config over to the current config + const config = merge({}, this._config.getValue(), value); + + // Execute the observable + this._config.next(config); + } + + get config$(): Observable + { + return this._config.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Resets the config to the default + */ + reset(): void + { + // Set the config + this._config.next(this.config); + } +} diff --git a/src/@fuse/services/config/index.ts b/src/@fuse/services/config/index.ts new file mode 100644 index 0000000..0563caf --- /dev/null +++ b/src/@fuse/services/config/index.ts @@ -0,0 +1 @@ +export * from '@fuse/services/config/public-api'; diff --git a/src/@fuse/services/config/public-api.ts b/src/@fuse/services/config/public-api.ts new file mode 100644 index 0000000..36df7bd --- /dev/null +++ b/src/@fuse/services/config/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/services/config/config.module'; +export * from '@fuse/services/config/config.service'; diff --git a/src/@fuse/services/confirmation/confirmation.module.ts b/src/@fuse/services/confirmation/confirmation.module.ts new file mode 100644 index 0000000..ce14329 --- /dev/null +++ b/src/@fuse/services/confirmation/confirmation.module.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service'; +import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component'; +import { CommonModule } from '@angular/common'; + +@NgModule({ + declarations: [ + FuseConfirmationDialogComponent + ], + imports : [ + MatButtonModule, + MatDialogModule, + MatIconModule, + CommonModule + ], + providers : [ + FuseConfirmationService + ] +}) +export class FuseConfirmationModule +{ + /** + * Constructor + */ + constructor(private _fuseConfirmationService: FuseConfirmationService) + { + } +} diff --git a/src/@fuse/services/confirmation/confirmation.service.ts b/src/@fuse/services/confirmation/confirmation.service.ts new file mode 100644 index 0000000..b22ccae --- /dev/null +++ b/src/@fuse/services/confirmation/confirmation.service.ts @@ -0,0 +1,58 @@ +import { Injectable } from '@angular/core'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; +import { merge } from 'lodash-es'; +import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component'; +import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types'; + +@Injectable() +export class FuseConfirmationService +{ + private _defaultConfig: FuseConfirmationConfig = { + title : 'Confirm action', + message : 'Are you sure you want to confirm this action?', + icon : { + show : true, + name : 'heroicons_outline:exclamation', + color: 'warn' + }, + actions : { + confirm: { + show : true, + label: 'Confirm', + color: 'warn' + }, + cancel : { + show : true, + label: 'Cancel' + } + }, + dismissible: false + }; + + /** + * Constructor + */ + constructor( + private _matDialog: MatDialog + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + open(config: FuseConfirmationConfig = {}): MatDialogRef + { + // Merge the user config with the default config + const userConfig = merge({}, this._defaultConfig, config); + + // Open the dialog + return this._matDialog.open(FuseConfirmationDialogComponent, { + autoFocus : false, + disableClose: !userConfig.dismissible, + data : userConfig, + panelClass : 'fuse-confirmation-dialog-panel' + }); + } +} diff --git a/src/@fuse/services/confirmation/confirmation.types.ts b/src/@fuse/services/confirmation/confirmation.types.ts new file mode 100644 index 0000000..1c410b7 --- /dev/null +++ b/src/@fuse/services/confirmation/confirmation.types.ts @@ -0,0 +1,29 @@ +export interface FuseConfirmationConfig { + title?: string; + message?: string; + icon?: { + show?: boolean; + name?: string; + color?: + | 'primary' + | 'accent' + | 'warn' + | 'basic' + | 'info' + | 'success' + | 'warning' + | 'error'; + }; + actions?: { + confirm?: { + show?: boolean; + label?: string; + color?: 'primary' | 'accent' | 'warn'; + }; + cancel?: { + show?: boolean; + label?: string; + }; + }; + dismissible?: boolean; +} diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.html b/src/@fuse/services/confirmation/dialog/dialog.component.html new file mode 100644 index 0000000..d992a8f --- /dev/null +++ b/src/@fuse/services/confirmation/dialog/dialog.component.html @@ -0,0 +1,94 @@ +
+ + +
+ +
+
+ + +
+ + +
+ +
+
+ + +
+ + +
+
+ + + +
+
+
+
+
+ + + +
+ + + + + + + + + +
+
+
diff --git a/src/@fuse/services/confirmation/dialog/dialog.component.ts b/src/@fuse/services/confirmation/dialog/dialog.component.ts new file mode 100644 index 0000000..2ab349b --- /dev/null +++ b/src/@fuse/services/confirmation/dialog/dialog.component.ts @@ -0,0 +1,45 @@ +import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types'; + +@Component({ + selector: 'fuse-confirmation-dialog', + templateUrl: './dialog.component.html', + styles: [ + /* language=SCSS */ + ` + .fuse-confirmation-dialog-panel { + @screen md { + @apply w-128; + } + + .mat-dialog-container { + padding: 0 !important; + } + } + `, + ], + encapsulation: ViewEncapsulation.None, +}) +export class FuseConfirmationDialogComponent implements OnInit { + /** + * Constructor + */ + constructor( + @Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig, + public matDialogRef: MatDialogRef + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- +} diff --git a/src/@fuse/services/confirmation/index.ts b/src/@fuse/services/confirmation/index.ts new file mode 100644 index 0000000..f6f2fee --- /dev/null +++ b/src/@fuse/services/confirmation/index.ts @@ -0,0 +1 @@ +export * from '@fuse/services/confirmation/public-api'; diff --git a/src/@fuse/services/confirmation/public-api.ts b/src/@fuse/services/confirmation/public-api.ts new file mode 100644 index 0000000..815db9f --- /dev/null +++ b/src/@fuse/services/confirmation/public-api.ts @@ -0,0 +1,3 @@ +export * from '@fuse/services/confirmation/confirmation.module'; +export * from '@fuse/services/confirmation/confirmation.service'; +export * from '@fuse/services/confirmation/confirmation.types'; diff --git a/src/@fuse/services/loading/index.ts b/src/@fuse/services/loading/index.ts new file mode 100644 index 0000000..deaac8d --- /dev/null +++ b/src/@fuse/services/loading/index.ts @@ -0,0 +1 @@ +export * from '@fuse/services/loading/public-api'; diff --git a/src/@fuse/services/loading/loading.interceptor.ts b/src/@fuse/services/loading/loading.interceptor.ts new file mode 100644 index 0000000..f210ac7 --- /dev/null +++ b/src/@fuse/services/loading/loading.interceptor.ts @@ -0,0 +1,50 @@ +import { Injectable } from '@angular/core'; +import { + HttpEvent, + HttpHandler, + HttpInterceptor, + HttpRequest, +} from '@angular/common/http'; +import { finalize, Observable } from 'rxjs'; +import { FuseLoadingService } from '@fuse/services/loading/loading.service'; + +@Injectable() +export class FuseLoadingInterceptor implements HttpInterceptor { + handleRequestsAutomatically = false; + + /** + * Constructor + */ + constructor(private _fuseLoadingService: FuseLoadingService) { + // Subscribe to the auto + this._fuseLoadingService.auto$.subscribe((value) => { + this.handleRequestsAutomatically = value; + }); + } + + /** + * Intercept + * + * @param req + * @param next + */ + intercept( + req: HttpRequest, + next: HttpHandler + ): Observable> { + // If the Auto mode is turned off, do nothing + if (!this.handleRequestsAutomatically) { + return next.handle(req); + } + + // Set the loading status to true + this._fuseLoadingService._setLoadingStatus(true, req.url); + + return next.handle(req).pipe( + finalize(() => { + // Set the status to false if there are any errors or the request is completed + this._fuseLoadingService._setLoadingStatus(false, req.url); + }) + ); + } +} diff --git a/src/@fuse/services/loading/loading.module.ts b/src/@fuse/services/loading/loading.module.ts new file mode 100644 index 0000000..778ddfd --- /dev/null +++ b/src/@fuse/services/loading/loading.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { HTTP_INTERCEPTORS } from '@angular/common/http'; +import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor'; + +@NgModule({ + providers: [ + { + provide : HTTP_INTERCEPTORS, + useClass: FuseLoadingInterceptor, + multi : true + } + ] +}) +export class FuseLoadingModule +{ +} diff --git a/src/@fuse/services/loading/loading.service.ts b/src/@fuse/services/loading/loading.service.ts new file mode 100644 index 0000000..fdba9e7 --- /dev/null +++ b/src/@fuse/services/loading/loading.service.ts @@ -0,0 +1,130 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { BehaviorSubject, Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root', +}) +export class FuseLoadingService { + private _auto$: BehaviorSubject = new BehaviorSubject(true); + private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> = + new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate'); + private _progress$: BehaviorSubject = new BehaviorSubject(0); + private _show$: BehaviorSubject = new BehaviorSubject( + false + ); + private _urlMap: Map = new Map(); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for auto mode + */ + get auto$(): Observable { + return this._auto$.asObservable(); + } + + /** + * Getter for mode + */ + get mode$(): Observable<'determinate' | 'indeterminate'> { + return this._mode$.asObservable(); + } + + /** + * Getter for progress + */ + get progress$(): Observable { + return this._progress$.asObservable(); + } + + /** + * Getter for show + */ + get show$(): Observable { + return this._show$.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Show the loading bar + */ + show(): void { + this._show$.next(true); + } + + /** + * Hide the loading bar + */ + hide(): void { + this._show$.next(false); + } + + /** + * Set the auto mode + * + * @param value + */ + setAutoMode(value: boolean): void { + this._auto$.next(value); + } + + /** + * Set the mode + * + * @param value + */ + setMode(value: 'determinate' | 'indeterminate'): void { + this._mode$.next(value); + } + + /** + * Set the progress of the bar manually + * + * @param value + */ + setProgress(value: number): void { + if (value < 0 || value > 100) { + console.error('Progress value must be between 0 and 100!'); + return; + } + + this._progress$.next(value); + } + + /** + * Sets the loading status on the given url + * + * @param status + * @param url + */ + _setLoadingStatus(status: boolean, url: string): void { + // Return if the url was not provided + if (!url) { + console.error('The request URL must be provided!'); + return; + } + + if (status === true) { + this._urlMap.set(url, status); + this._show$.next(true); + } else if (status === false && this._urlMap.has(url)) { + this._urlMap.delete(url); + } + + // Only set the status to 'false' if all outgoing requests are completed + if (this._urlMap.size === 0) { + this._show$.next(false); + } + } +} diff --git a/src/@fuse/services/loading/public-api.ts b/src/@fuse/services/loading/public-api.ts new file mode 100644 index 0000000..c52faed --- /dev/null +++ b/src/@fuse/services/loading/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/services/loading/loading.service'; +export * from '@fuse/services/loading/loading.module'; diff --git a/src/@fuse/services/media-watcher/index.ts b/src/@fuse/services/media-watcher/index.ts new file mode 100644 index 0000000..b2dad0c --- /dev/null +++ b/src/@fuse/services/media-watcher/index.ts @@ -0,0 +1 @@ +export * from '@fuse/services/media-watcher/public-api'; diff --git a/src/@fuse/services/media-watcher/media-watcher.module.ts b/src/@fuse/services/media-watcher/media-watcher.module.ts new file mode 100644 index 0000000..3e5133e --- /dev/null +++ b/src/@fuse/services/media-watcher/media-watcher.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher/media-watcher.service'; + +@NgModule({ + providers: [ + FuseMediaWatcherService + ] +}) +export class FuseMediaWatcherModule +{ + /** + * Constructor + */ + constructor(private _fuseMediaWatcherService: FuseMediaWatcherService) + { + } +} diff --git a/src/@fuse/services/media-watcher/media-watcher.service.ts b/src/@fuse/services/media-watcher/media-watcher.service.ts new file mode 100644 index 0000000..c21ce98 --- /dev/null +++ b/src/@fuse/services/media-watcher/media-watcher.service.ts @@ -0,0 +1,99 @@ +import { Injectable } from '@angular/core'; +import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; +import { map, Observable, ReplaySubject, switchMap } from 'rxjs'; +import { fromPairs } from 'lodash-es'; +import { FuseConfigService } from '@fuse/services/config'; +import { Dictionary } from 'lodash'; + +@Injectable() +export class FuseMediaWatcherService { + private _onMediaChange: ReplaySubject<{ + matchingAliases: string[]; + matchingQueries: any; + }> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>( + 1 + ); + + /** + * Constructor + */ + constructor( + private _breakpointObserver: BreakpointObserver, + private _fuseConfigService: FuseConfigService + ) { + this._fuseConfigService.config$ + .pipe( + map((config: any) => + fromPairs( + Object.entries(config.screens).map(([alias, screen]) => [ + alias, + `(min-width: ${screen})`, + ]) + ) + ), + switchMap((screens: Dictionary) => + this._breakpointObserver.observe(Object.values(screens)).pipe( + map((state) => { + // Prepare the observable values and set their defaults + const matchingAliases: string[] = []; + const matchingQueries: any = {}; + + // Get the matching breakpoints and use them to fill the subject + const matchingBreakpoints = + Object.entries(state.breakpoints).filter( + ([query, matches]) => matches + ) ?? []; + for (const [query] of matchingBreakpoints) { + // Find the alias of the matching query + if (!!Object.entries(screens)) { + const matchingAlias = Object.entries(screens).find( + ([alias, q]) => q === query + ); + + // Add the matching query to the observable values + if (!!matchingAlias && !!matchingAlias[0]) { + matchingAliases.push(matchingAlias[0]); + matchingQueries[matchingAlias[0]] = query; + } + } + } + + // Execute the observable + this._onMediaChange.next({ + matchingAliases, + matchingQueries, + }); + }) + ) + ) + ) + .subscribe(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for _onMediaChange + */ + get onMediaChange$(): Observable<{ + matchingAliases: string[]; + matchingQueries: any; + }> { + return this._onMediaChange.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On media query change + * + * @param query + */ + onMediaQueryChange$(query: string | string[]): Observable { + return this._breakpointObserver.observe(query); + } +} diff --git a/src/@fuse/services/media-watcher/public-api.ts b/src/@fuse/services/media-watcher/public-api.ts new file mode 100644 index 0000000..fd5905d --- /dev/null +++ b/src/@fuse/services/media-watcher/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/services/media-watcher/media-watcher.module'; +export * from '@fuse/services/media-watcher/media-watcher.service'; diff --git a/src/@fuse/services/splash-screen/index.ts b/src/@fuse/services/splash-screen/index.ts new file mode 100644 index 0000000..79ce6e4 --- /dev/null +++ b/src/@fuse/services/splash-screen/index.ts @@ -0,0 +1 @@ +export * from '@fuse/services/splash-screen/public-api'; diff --git a/src/@fuse/services/splash-screen/public-api.ts b/src/@fuse/services/splash-screen/public-api.ts new file mode 100644 index 0000000..ab0ada9 --- /dev/null +++ b/src/@fuse/services/splash-screen/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/services/splash-screen/splash-screen.module'; +export * from '@fuse/services/splash-screen/splash-screen.service'; diff --git a/src/@fuse/services/splash-screen/splash-screen.module.ts b/src/@fuse/services/splash-screen/splash-screen.module.ts new file mode 100644 index 0000000..913d595 --- /dev/null +++ b/src/@fuse/services/splash-screen/splash-screen.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { FuseSplashScreenService } from '@fuse/services/splash-screen/splash-screen.service'; + +@NgModule({ + providers: [ + FuseSplashScreenService + ] +}) +export class FuseSplashScreenModule +{ + /** + * Constructor + */ + constructor(private _fuseSplashScreenService: FuseSplashScreenService) + { + } +} diff --git a/src/@fuse/services/splash-screen/splash-screen.service.ts b/src/@fuse/services/splash-screen/splash-screen.service.ts new file mode 100644 index 0000000..5743f4c --- /dev/null +++ b/src/@fuse/services/splash-screen/splash-screen.service.ts @@ -0,0 +1,47 @@ +import { Inject, Injectable } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; +import { NavigationEnd, Router } from '@angular/router'; +import { filter, take } from 'rxjs'; + +@Injectable() +export class FuseSplashScreenService +{ + /** + * Constructor + */ + constructor( + @Inject(DOCUMENT) private _document: any, + private _router: Router + ) + { + // Hide it on the first NavigationEnd event + this._router.events + .pipe( + filter(event => event instanceof NavigationEnd), + take(1) + ) + .subscribe(() => { + this.hide(); + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Show the splash screen + */ + show(): void + { + this._document.body.classList.remove('fuse-splash-screen-hidden'); + } + + /** + * Hide the splash screen + */ + hide(): void + { + this._document.body.classList.add('fuse-splash-screen-hidden'); + } +} diff --git a/src/@fuse/services/utils/index.ts b/src/@fuse/services/utils/index.ts new file mode 100644 index 0000000..a507e7f --- /dev/null +++ b/src/@fuse/services/utils/index.ts @@ -0,0 +1 @@ +export * from '@fuse/services/utils/public-api'; diff --git a/src/@fuse/services/utils/public-api.ts b/src/@fuse/services/utils/public-api.ts new file mode 100644 index 0000000..8d2a55b --- /dev/null +++ b/src/@fuse/services/utils/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/services/utils/utils.module'; +export * from '@fuse/services/utils/utils.service'; diff --git a/src/@fuse/services/utils/utils.module.ts b/src/@fuse/services/utils/utils.module.ts new file mode 100644 index 0000000..9f974f3 --- /dev/null +++ b/src/@fuse/services/utils/utils.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { FuseUtilsService } from '@fuse/services/utils/utils.service'; + +@NgModule({ + providers: [ + FuseUtilsService + ] +}) +export class FuseUtilsModule +{ + /** + * Constructor + */ + constructor(private _fuseUtilsService: FuseUtilsService) + { + } +} diff --git a/src/@fuse/services/utils/utils.service.ts b/src/@fuse/services/utils/utils.service.ts new file mode 100644 index 0000000..0c307ee --- /dev/null +++ b/src/@fuse/services/utils/utils.service.ts @@ -0,0 +1,67 @@ +import { Injectable } from '@angular/core'; +import { IsActiveMatchOptions } from '@angular/router'; + +@Injectable({ + providedIn: 'root' +}) +export class FuseUtilsService +{ + /** + * Constructor + */ + constructor() + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Get the equivalent "IsActiveMatchOptions" options for "exact = true". + */ + get exactMatchOptions(): IsActiveMatchOptions + { + return { + paths : 'exact', + fragment : 'ignored', + matrixParams: 'ignored', + queryParams : 'exact' + }; + } + + /** + * Get the equivalent "IsActiveMatchOptions" options for "exact = false". + */ + get subsetMatchOptions(): IsActiveMatchOptions + { + return { + paths : 'subset', + fragment : 'ignored', + matrixParams: 'ignored', + queryParams : 'subset' + }; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Generates a random id + * + * @param length + */ + randomId(length: number = 10): string + { + const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + let name = ''; + + for ( let i = 0; i < 10; i++ ) + { + name += chars.charAt(Math.floor(Math.random() * chars.length)); + } + + return name; + } +} diff --git a/src/@fuse/styles/components/example-viewer.scss b/src/@fuse/styles/components/example-viewer.scss new file mode 100644 index 0000000..fe0fd30 --- /dev/null +++ b/src/@fuse/styles/components/example-viewer.scss @@ -0,0 +1,47 @@ +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Example viewer +/* ----------------------------------------------------------------------------------------------------- */ +.example-viewer { + display: flex; + flex-direction: column; + margin: 32px 0; + overflow: hidden; + @apply rounded-2xl shadow bg-card; + + .title { + display: flex; + align-items: center; + justify-content: space-between; + height: 88px; + min-height: 88px; + max-height: 88px; + padding: 0 40px; + + h6 { + font-weight: 700; + } + + .controls { + display: flex; + align-items: center; + + > * + * { + margin-left: 8px; + } + } + } + + mat-tab-group { + + .mat-tab-body-content { + + .fuse-highlight { + + pre { + margin: 0; + border-radius: 0; + } + } + } + } +} diff --git a/src/@fuse/styles/components/input.scss b/src/@fuse/styles/components/input.scss new file mode 100644 index 0000000..1ae31b8 --- /dev/null +++ b/src/@fuse/styles/components/input.scss @@ -0,0 +1,41 @@ +input, +textarea { + background: transparent; + + /* Placeholder color */ + &::placeholder { + @apply text-hint; + } + + &::-moz-placeholder { + @apply text-hint; + } + + &::-webkit-input-placeholder { + @apply text-hint; + } + + &:-ms-input-placeholder { + @apply text-hint; + } + + &:-webkit-autofill { + -webkit-transition: 'background-color 9999s ease-out'; + -webkit-transition-delay: 9999s; + } + + &:-webkit-autofill:hover { + -webkit-transition: 'background-color 9999s ease-out'; + -webkit-transition-delay: 9999s; + } + + &:-webkit-autofill:focus { + -webkit-transition: 'background-color 9999s ease-out'; + -webkit-transition-delay: 9999s; + } + + &:-webkit-autofill:active { + -webkit-transition: 'background-color 9999s ease-out'; + -webkit-transition-delay: 9999s; + } +} diff --git a/src/@fuse/styles/main.scss b/src/@fuse/styles/main.scss new file mode 100644 index 0000000..e964bfe --- /dev/null +++ b/src/@fuse/styles/main.scss @@ -0,0 +1,9 @@ +/* 1. Components */ +@import 'components/example-viewer'; +@import 'components/input'; + +/* 2. Overrides */ +@import 'overrides/angular-material'; +@import 'overrides/highlightjs'; +@import 'overrides/perfect-scrollbar'; +@import 'overrides/quill'; diff --git a/src/@fuse/styles/overrides/angular-material.scss b/src/@fuse/styles/overrides/angular-material.scss new file mode 100644 index 0000000..01f477b --- /dev/null +++ b/src/@fuse/styles/overrides/angular-material.scss @@ -0,0 +1,1454 @@ +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Angular Material CDK helpers & overrides +/* ----------------------------------------------------------------------------------------------------- */ + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Overlay +/* ----------------------------------------------------------------------------------------------------- */ +.fuse-backdrop-on-mobile { + @apply bg-black bg-opacity-60 sm:bg-transparent #{'!important'}; +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Angular Material helpers & overrides +/* ----------------------------------------------------------------------------------------------------- */ + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Accordion +/* ----------------------------------------------------------------------------------------------------- */ +.mat-accordion { + + .mat-expansion-panel { + margin-bottom: 24px; + border-radius: 8px !important; + transition: box-shadow 225ms cubic-bezier(0.4, 0.0, 0.2, 1); + @apply shadow #{'!important'}; + + &:last-child { + margin-bottom: 0; + } + + &.mat-expanded, + &:hover { + @apply shadow-lg #{'!important'}; + } + + &:not(.mat-expanded) { + + .mat-expansion-panel-header { + + &:not([aria-disabled=true]) { + + &.cdk-keyboard-focused, + &.cdk-program-focused, + &:hover { + background: transparent !important; + } + } + } + } + + .mat-expansion-panel-header { + font-size: 14px; + + &[aria-disabled=true] { + + .mat-expansion-panel-header-description { + margin-right: 28px; + } + } + + .mat-expansion-indicator { + display: inline-flex; + align-items: center; + justify-content: center; + width: 12px; + height: 12px; + + /* Do not override the border color of the expansion panel indicator */ + &:after { + border-color: currentColor !important; + } + } + } + + .mat-expansion-panel-body { + line-height: 1.7; + @apply text-secondary #{'!important'}; + } + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Buttons +/* ----------------------------------------------------------------------------------------------------- */ +.mat-button, +.mat-fab, +.mat-flat-button, +.mat-icon-button, +.mat-mini-fab, +.mat-raised-button, +.mat-stroked-button { + display: inline-flex !important; + align-items: center; + justify-content: center; + height: 40px; + min-height: 40px; + max-height: 40px; + line-height: 1 !important; + + .mat-button-wrapper { + position: relative; + display: inline-flex !important; + align-items: center; + justify-content: center; + height: 100%; + z-index: 2; /* Move mat-button-wrapper above the ripple and focus overlay */ + } + + .mat-button-focus-overlay, + .mat-button-ripple { + z-index: 1; + } + + /* Large button */ + &.fuse-mat-button-large { + height: 48px; + min-height: 48px; + max-height: 48px; + } + + /* Lower the icon opacity on disabled buttons */ + &.mat-button-disabled { + + .mat-icon { + opacity: 0.38 !important; + } + } +} + +.mat-fab { + max-height: 56px; +} + +/* Rounded design */ +.mat-button, +.mat-flat-button, +.mat-raised-button, +.mat-stroked-button { + padding: 0 20px !important; + border-radius: 9999px !important; +} + +/* Target all buttons */ +.mat-button, +.mat-fab, +.mat-flat-button, +.mat-icon-button, +.mat-fab, +.mat-mini-fab, +.mat-raised-button, +.mat-stroked-button { + + /* mat-progress-spinner inside buttons */ + .mat-progress-spinner { + + &.mat-progress-spinner-indeterminate-animation[mode=indeterminate] { + + circle { + stroke: currentColor !important; + animation-duration: 6000ms; + } + } + } +} + +/* Colored background buttons */ +.mat-flat-button, +.mat-raised-button, +.mat-fab, +.mat-mini-fab { + + .mat-icon { + color: currentColor !important; + } + + /* Add hover and focus style on all buttons */ + .mat-button-focus-overlay { + @apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'}; + } + + /* On palette colored buttons, use a darker color */ + &.mat-primary, + &.mat-accent, + &.mat-warn { + + .mat-button-focus-overlay { + background-color: rgba(0, 0, 0, 0.1) !important; + } + } + + &:hover, + &.cdk-keyboard-focused, + &.cdk-program-focused { + + .mat-button-focus-overlay { + opacity: 1 !important; + } + } + + @media (hover: none) { + + &:hover { + + .mat-button-focus-overlay { + opacity: 0 !important; + } + } + } + + &.mat-button-disabled { + + .mat-button-focus-overlay { + opacity: 0 !important; + } + } +} + +/* Transparent background buttons */ +.mat-button, +.mat-icon-button, +.mat-stroked-button { + + /* Apply primary color */ + &.mat-primary:not(.mat-button-disabled) { + + .mat-icon { + @apply text-primary #{'!important'}; + } + } + + /* Apply accent color */ + &.mat-accent:not(.mat-button-disabled) { + + .mat-icon { + @apply text-accent #{'!important'}; + } + } + + /* Apply warn color */ + &.mat-warn:not(.mat-button-disabled) { + + .mat-icon { + @apply text-warn #{'!important'}; + } + } + + /* Add hover and focus styles */ + .mat-button-focus-overlay { + @apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'}; + } + + /* On primary colored buttons, use the primary color as focus overlay */ + &.mat-primary:not(.mat-button-disabled) { + + .mat-button-focus-overlay { + @apply bg-primary #{'!important'}; + } + } + + /* On accent colored buttons, use the accent color as focus overlay */ + &.mat-accent:not(.mat-button-disabled) { + + .mat-button-focus-overlay { + @apply bg-accent #{'!important'}; + } + } + + /* On warn colored buttons, use the warn color as focus overlay */ + &.mat-warn:not(.mat-button-disabled) { + + .mat-button-focus-overlay { + @apply bg-warn #{'!important'}; + } + } + + &.mat-primary:not(.mat-button-disabled), + &.mat-accent:not(.mat-button-disabled), + &.mat-warn:not(.mat-button-disabled) { + + &:hover, + &.cdk-keyboard-focused, + &.cdk-program-focused { + + .mat-button-focus-overlay { + opacity: 0.1 !important; + } + } + } + + &:hover, + &.cdk-keyboard-focused, + &.cdk-program-focused { + + .mat-button-focus-overlay { + opacity: 1 !important; + } + } + + @media (hover: none) { + + &:hover { + + .mat-button-focus-overlay { + opacity: 0 !important; + } + } + } + + &.mat-button-disabled { + + .mat-button-focus-overlay { + opacity: 0 !important; + } + } +} + +/* Stroked buttons */ +.mat-stroked-button { + + /* Border color */ + &:not(.mat-button-disabled) { + @apply border-gray-300 dark:border-gray-500 #{'!important'}; + } + + &.mat-button-disabled { + @apply border-gray-200 dark:border-gray-600 #{'!important'}; + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Button Toggle +/* ----------------------------------------------------------------------------------------------------- */ +.mat-button-toggle-group { + border: none !important; + @apply space-x-1; + + &.mat-button-toggle-group-appearance-standard { + + .mat-button-toggle + .mat-button-toggle { + background-clip: padding-box; + } + } + + .mat-button-toggle { + border-radius: 9999px; + overflow: hidden; + border: none !important; + font-weight: 500; + + &.mat-button-toggle-checked { + + .mat-button-toggle-label-content { + @apply text-default #{'!important'}; + } + } + + .mat-button-toggle-label-content { + padding: 0 20px; + @apply text-secondary; + } + + .mat-ripple { + border-radius: 9999px; + } + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Checkbox +/* ----------------------------------------------------------------------------------------------------- */ +.mat-checkbox { + display: inline-flex; + + /* Allow multiline text */ + .mat-checkbox-layout { + white-space: normal; + + .mat-checkbox-inner-container { + display: inline-flex; + align-items: center; + margin: 0 8px 0 0; + + /* Add a zero-width space character to trick the container */ + /* into being the same height as a single line of the label */ + &:after { + content: '\200b'; + } + } + + .mat-checkbox-label { + line-height: inherit; + } + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Chip +/* ----------------------------------------------------------------------------------------------------- */ +.mat-chip { + font-weight: 500 !important; +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Dialog +/* ----------------------------------------------------------------------------------------------------- */ +.mat-dialog-container { + border-radius: 16px !important; +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Drawer +/* ----------------------------------------------------------------------------------------------------- */ +.mat-drawer-backdrop.mat-drawer-shown { + background-color: rgba(0, 0, 0, 0.6) !important; +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Form fields +/* ----------------------------------------------------------------------------------------------------- */ + +/* Fuse only uses 'fill' style form fields and therefore */ +/* only provides fixes and tweaks for that style */ +.mat-form-field.mat-form-field-appearance-fill { + + /* Disabled */ + &.mat-form-field-disabled { + opacity: 0.7 !important; + } + + /* Invalid */ + &.mat-form-field-invalid { + + .mat-form-field-wrapper { + + /* Border color */ + .mat-form-field-flex { + @apply border-warn dark:border-warn #{'!important'}; + } + } + } + + /* Focused */ + &.mat-focused { + + .mat-form-field-wrapper { + + /* Background color */ + .mat-form-field-flex { + @apply bg-card dark:bg-card #{'!important'}; + } + } + } + + /* Focused and valid fields */ + &.mat-focused:not(.mat-form-field-invalid) { + + .mat-form-field-wrapper { + + /* Border color */ + .mat-form-field-flex { + @apply border-primary dark:border-primary #{'!important'}; + } + } + } + + /* Disable floating mat-label */ + &.mat-form-field-has-label.mat-form-field-can-float.mat-form-field-should-float { + + .mat-form-field-label-wrapper { + + .mat-form-field-label { + width: 100% !important; + transform: none !important; + } + } + } + + /* Remove the default arrow for native select */ + &.mat-form-field-type-mat-native-select { + + .mat-form-field-infix { + + select { + top: auto; + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-right: 18px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748B' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right -7px center; + background-size: 24px; + + .dark & { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2397a6ba' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); + } + } + + &:after { + display: none; + } + } + } + + /* Adjustments for mat-label */ + &.mat-form-field-has-label { + + .mat-form-field-wrapper { + margin-top: 24px; + } + } + + /* Default style tweaks and enhancements */ + .mat-form-field-wrapper { + margin-bottom: 16px; + padding-bottom: 0; + + .mat-form-field-flex { + position: relative; + display: flex; + align-items: stretch; + min-height: 48px; + border-radius: 6px; + padding: 0 16px; + border-width: 1px; + @apply shadow-sm bg-white border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500 #{'!important'}; + + .mat-form-field-prefix { + + > .mat-icon { + margin-right: 12px; + } + + > .mat-icon-button { + margin: 0 4px 0 -10px; + } + + > .mat-select { + margin-right: 10px; + } + + > .mat-datepicker-toggle { + margin-left: -8px; + } + + > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) { + margin-right: 12px; + } + } + + .mat-form-field-suffix { + + > .mat-icon { + margin-left: 12px; + } + + > .mat-icon-button { + margin: 0 -10px 0 4px; + } + + > .mat-select { + margin-left: 10px; + } + + > .mat-datepicker-toggle { + margin-right: -8px; + } + } + + .mat-form-field-prefix, + .mat-form-field-suffix { + display: inline-flex; + align-items: center; + justify-content: center; + @apply text-hint #{'!important'}; + + .mat-icon-button { + width: 40px; + min-width: 40px; + height: 40px; + min-height: 40px; + } + + .mat-icon, + .mat-icon-button:not(.mat-button-disabled), + .mat-select-value { + @apply text-hint; + } + + /* Remove the margins from the mat-icon if it's inside a button */ + /* Force the icon size to 24 */ + .mat-button, + .mat-raised-button, + .mat-icon-button, + .mat-stroked-button, + .mat-flat-button, + .mat-fab, + .mat-mini-fab { + + .mat-icon { + margin: 0 !important; + @apply icon-size-6; + } + } + + /* Datepicker default icon size */ + .mat-datepicker-toggle-default-icon { + @apply icon-size-6; + } + + /* Make mat-select usable as prefix and suffix */ + .mat-select { + display: flex; + align-items: center; + + &:focus { + + .mat-select-trigger { + + .mat-select-value { + @apply text-primary #{'!important'}; + } + + .mat-select-arrow-wrapper { + + .mat-select-arrow { + border-top-color: var(--fuse-primary) !important; + } + } + } + } + + .mat-select-trigger { + display: flex; + align-items: center; + + .mat-select-value { + display: flex; + max-width: none; + + mat-select-trigger { + + .mat-icon { + margin: 0 !important; + } + } + } + + .mat-select-arrow-wrapper { + display: flex; + align-items: center; + transform: none; + margin-left: 4px; + + .mat-select-arrow { + min-height: 0; + @apply text-gray-500 dark:text-gray-400 #{'!important'}; + } + } + } + } + } + + .mat-form-field-infix { + position: static; + display: flex; + align-items: center; + width: 88px; + padding: 0; + border: 0; + + .mat-input-element { + padding: 14px 0; + margin-top: 0; + } + + /* Textarea */ + textarea.mat-input-element { + display: flex; + align-self: stretch; + min-height: 36px; + height: auto; + margin: 14px 0; + padding: 0 6px 0 0; + transform: none; + } + + /* Select */ + .mat-select { + display: inline-flex; + + .mat-select-trigger { + display: inline-flex; + align-items: center; + width: 100%; + + .mat-select-value { + display: flex; + position: relative; + max-width: none; + + .mat-select-value-text { + display: inline-flex; + + > * { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + } + + .mat-select-arrow-wrapper { + transform: translateY(0); + + .mat-select-arrow { + margin: 0 0 0 8px; + } + } + } + + /* Chips */ + .mat-chip-list { + width: 100%; + margin: 0 -8px; + + .mat-chip-input { + margin: 0 0 0 8px; + } + } + + .mat-form-field-label-wrapper { + top: -25px; + height: auto; + padding-top: 0; + overflow: visible; + pointer-events: auto; + + .mat-form-field-label { + position: relative; + top: 0; + margin-top: 0; + backface-visibility: hidden; + transition: none; + font-weight: 500; + @apply text-default #{'!important'}; + } + } + } + } + + /* Remove the underline */ + .mat-form-field-underline { + display: none; + } + + /* Subscript tweaks */ + .mat-form-field-subscript-wrapper { + position: relative; + top: auto; + padding: 0; + margin-top: 0; + font-size: 12px; + font-weight: 500; + line-height: 1; + + > div { + display: contents; /* Remove the div from flow to stop the subscript animation */ + } + + .mat-error, + .mat-hint { + display: block; + margin-top: 4px; + } + + .mat-hint { + @apply text-hint #{'!important'}; + } + } + } + + /* Adds better alignment for textarea inputs */ + &.fuse-mat-textarea { + + .mat-form-field-wrapper { + + .mat-form-field-flex { + + .mat-form-field-prefix, + .mat-form-field-suffix { + align-items: flex-start; + } + + .mat-form-field-prefix { + padding-top: 12px; + } + + .mat-form-field-suffix { + padding-top: 12px; + } + } + } + } + + /* Removes subscript space */ + &.fuse-mat-no-subscript { + + .mat-form-field-wrapper { + padding-bottom: 0; + margin-bottom: 0; + + .mat-form-field-subscript-wrapper { + display: none !important; + height: 0 !important; + } + } + } + + /* Rounded */ + &.fuse-mat-rounded { + + .mat-form-field-wrapper { + + .mat-form-field-flex { + border-radius: 24px; + } + } + + /* Emphasized affix */ + &.fuse-mat-emphasized-affix { + + .mat-form-field-wrapper { + + .mat-form-field-flex { + + .mat-form-field-prefix { + border-radius: 24px 0 0 24px; + + > .mat-icon { + margin-right: 12px; + } + + > .mat-icon-button { + margin-right: 2px; + } + + > .mat-select { + margin-right: 8px; + } + + > .mat-datepicker-toggle { + margin-right: 4px; + } + + > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) { + margin-right: 12px; + } + } + + .mat-form-field-suffix { + border-radius: 0 24px 24px 0; + + > .mat-icon { + margin-left: 12px !important; + } + + > .mat-icon-button { + margin-left: 2px !important; + } + + > .mat-select { + margin-left: 12px !important; + } + + > .mat-datepicker-toggle { + margin-left: 4px !important; + } + + > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) { + margin-left: 12px !important; + } + } + } + } + } + } + + /* Dense */ + &.fuse-mat-dense { + + .mat-form-field-wrapper { + + .mat-form-field-flex { + min-height: 40px; + + .mat-form-field-prefix, + .mat-form-field-suffix { + + .mat-icon-button { + width: 32px; + min-width: 32px; + height: 32px; + min-height: 32px; + } + } + + .mat-form-field-prefix { + + > .mat-icon-button { + margin-left: -6px; + margin-right: 12px; + } + } + + .mat-form-field-suffix { + + > .mat-icon-button { + margin-left: 12px; + margin-right: -6px; + } + } + + .mat-form-field-infix { + + .mat-input-element { + padding: 11px 0; + } + } + } + } + + /* Rounded */ + &.fuse-mat-rounded { + + .mat-form-field-wrapper { + + .mat-form-field-flex { + border-radius: 20px; + } + } + + /* Emphasized affix */ + &.fuse-mat-emphasized-affix { + + .mat-form-field-wrapper { + + .mat-form-field-flex { + + .mat-form-field-prefix { + border-radius: 20px 0 0 20px !important; + } + + .mat-form-field-suffix { + border-radius: 0 20px 20px 0 !important; + } + } + } + } + } + } + + /* Emphasized affix */ + &.fuse-mat-emphasized-affix { + + .mat-form-field-wrapper { + + .mat-form-field-flex { + + .mat-form-field-prefix { + margin: 0 16px 0 -16px; + padding-left: 16px; + border-radius: 6px 0 0 6px; + border-right-width: 1px; + + > .mat-icon { + margin-right: 16px; + } + + > .mat-icon-button { + margin: 0 6px 0 -10px; + } + + > .mat-select { + margin-right: 12px; + } + + > .mat-datepicker-toggle { + margin-right: 8px; + } + + > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) { + margin-right: 16px; + } + } + + .mat-form-field-suffix { + margin: 0 -16px 0 16px; + padding-right: 16px; + border-radius: 0 6px 6px 0; + border-left-width: 1px; + + > .mat-icon { + margin-left: 16px; + } + + > .mat-icon-button { + margin: 0 -10px 0 6px; + } + + > .mat-select { + margin: 0 -4px 0 16px; + } + + > .mat-datepicker-toggle { + margin-left: 8px; + } + + > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) { + margin-left: 16px; + } + } + + .mat-form-field-prefix, + .mat-form-field-suffix { + @apply bg-default border-gray-300 dark:border-gray-500 #{'!important'}; + } + } + } + } + + /* Bolder border width */ + &.fuse-mat-bold { + + .mat-form-field-wrapper { + + .mat-form-field-flex { + border-width: 2px !important; + } + } + } +} + +/* Fix the outline appearance */ +.mat-form-field.mat-form-field-appearance-outline { + + .mat-form-field-wrapper { + + .mat-form-field-flex { + + .mat-form-field-outline { + @apply text-gray-300 dark:text-gray-500 #{'!important'}; + } + } + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Datepicker +/* ----------------------------------------------------------------------------------------------------- */ +/* Hover and active cell content background opacity */ +.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover, +.cdk-keyboard-focused .mat-calendar-body-active, +.cdk-program-focused .mat-calendar-body-active { + & > .mat-calendar-body-cell-content { + &:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) { + @apply bg-primary bg-opacity-30 #{'!important'}; + } + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Icon +/* ----------------------------------------------------------------------------------------------------- */ +.mat-icon { + display: inline-flex !important; + align-items: center; + justify-content: center; + width: 24px; + min-width: 24px; + height: 24px; + min-height: 24px; + font-size: 24px; + line-height: 24px; + -webkit-appearance: none !important; +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Inputs +/* ----------------------------------------------------------------------------------------------------- */ +.mat-input-element { + + &::placeholder { + transition: none !important; + @apply text-hint #{'!important'}; + } + + &::-moz-placeholder { + transition: none !important; + @apply text-hint #{'!important'}; + } + + &::-webkit-input-placeholder { + transition: none !important; + @apply text-hint #{'!important'}; + } + + &:-ms-input-placeholder { + transition: none !important; + @apply text-hint #{'!important'}; + } +} + +/* Invalid */ +.mat-form-field-invalid { + + .mat-input-element { + + /* Placeholder color */ + &::placeholder { + @apply text-warn #{'!important'}; + } + + &::-moz-placeholder { + @apply text-warn #{'!important'}; + } + + &::-webkit-input-placeholder { + @apply text-warn #{'!important'}; + } + + &:-ms-input-placeholder { + @apply text-warn #{'!important'}; + } + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Menu +/* ----------------------------------------------------------------------------------------------------- */ +.mat-menu-panel { + min-width: 144px !important; + + .mat-menu-content { + + .mat-menu-item { + display: flex; + align-items: center; + + &.mat-menu-item-submenu-trigger { + padding-right: 40px; + } + + .mat-icon { + margin-right: 12px; + } + } + + /* Divider within mat-menu */ + mat-divider { + margin: 8px 0; + } + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Paginator +/* ----------------------------------------------------------------------------------------------------- */ +.mat-paginator { + + .mat-paginator-container { + padding: 8px 16px; + justify-content: space-between; + + // @screen sm { + // justify-content: normal; + // } + + /* Page size select */ + .mat-paginator-page-size { + align-items: center; + min-height: 40px; + margin: 8px; + + .mat-paginator-page-size-label { + display: none; + margin-right: 12px; + + @screen sm { + display: block; + } + } + + .mat-paginator-page-size-select { + margin: 0; + + .mat-form-field-wrapper { + margin-bottom: 0; + + .mat-form-field-flex { + min-height: 32px; + padding: 0 10px; + } + } + } + } + + /* Range actions */ + .mat-paginator-range-actions { + margin: 8px 0; + + .mat-paginator-range-label { + margin-right: 16px; + } + } + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Select +/* ----------------------------------------------------------------------------------------------------- */ +.mat-select { + display: inline-flex; + + .mat-select-placeholder { + transition: none !important; + @apply text-hint #{'!important'}; + } + + .mat-select-trigger { + display: inline-flex; + align-items: center; + width: 100%; + height: auto; + + .mat-select-value { + display: flex; + position: relative; + max-width: none; + + .mat-select-value-text { + display: inline-flex; + + > * { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + } + + .mat-select-arrow-wrapper { + transform: translateY(0); + + .mat-select-arrow { + margin: 0 4px 0 2px; + } + } +} + +/* Invalid */ +.mat-form-field-invalid { + + .mat-select { + + /* Placeholder color */ + .mat-select-placeholder { + @apply text-warn #{'!important'}; + } + } +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Slide Toggle +/* ----------------------------------------------------------------------------------------------------- */ +.mat-slide-toggle.mat-checked .mat-slide-toggle-bar { + background-color: rgba(var(--fuse-accent-500-rgb), 0.54) !important; +} + +.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar { + background-color: rgba(var(--fuse-primary-500-rgb), 0.54) !important; +} + +.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar { + background-color: rgba(var(--fuse-warn-500-rgb), 0.54) !important; +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Stepper +/* ----------------------------------------------------------------------------------------------------- */ +.mat-step-icon { + + /* Do not override the mat-icon color */ + .mat-icon { + color: currentColor !important; + } +} + +.mat-step-label, +.mat-step-label-selected { + font-weight: 500 !important; +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Tabs +/* ----------------------------------------------------------------------------------------------------- */ +.mat-tab-group { + + /* No header */ + &.fuse-mat-no-header { + + .mat-tab-header { + height: 0 !important; + max-height: 0 !important; + border: none !important; + visibility: hidden !important; + opacity: 0 !important; + } + } + + .mat-tab-header { + border-bottom: none !important; + + .mat-tab-label-container { + padding: 0 24px; + + .mat-tab-list { + + .mat-tab-labels { + + .mat-tab-label { + min-width: 0 !important; + height: 40px !important; + padding: 0 20px !important; + border-radius: 9999px !important; + @apply text-secondary; + + &.mat-tab-label-active { + @apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'}; + @apply text-default #{'!important'}; + } + + + .mat-tab-label { + margin-left: 4px; + } + + .mat-tab-label-content { + line-height: 20px; + } + } + } + + .mat-ink-bar { + display: none !important; + } + } + } + } + + .mat-tab-body-content { + padding: 24px; + } +} + +.mat-tab-label { + opacity: 1 !important; +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Textarea +/* ----------------------------------------------------------------------------------------------------- */ +textarea.mat-input-element { + box-sizing: content-box !important; +} + +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Toolbar +/* ----------------------------------------------------------------------------------------------------- */ +.mat-toolbar { + + /* Apply primary contrast color */ + &.mat-primary { + + .mat-icon { + @apply text-on-primary #{'!important'}; + } + + .text-secondary { + @apply text-on-primary text-opacity-60 #{'!important'}; + } + + .text-hint { + @apply text-on-primary text-opacity-38 #{'!important'}; + } + + .text-disabled { + @apply text-on-primary text-opacity-38 #{'!important'}; + } + + .divider { + @apply text-on-primary text-opacity-12 #{'!important'}; + } + } + + /* Apply accent contrast color */ + &.mat-accent { + + .mat-icon { + @apply text-on-accent #{'!important'}; + } + + .text-secondary { + @apply text-on-accent text-opacity-60 #{'!important'}; + } + + .text-hint { + @apply text-on-accent text-opacity-38 #{'!important'}; + } + + .text-disabled { + @apply text-on-accent text-opacity-38 #{'!important'}; + } + + .divider { + @apply text-on-accent text-opacity-12 #{'!important'}; + } + } + + /* Apply warn contrast color */ + &.mat-warn { + + .mat-icon { + @apply text-on-warn #{'!important'}; + } + + .text-secondary { + @apply text-on-warn text-opacity-60 #{'!important'}; + } + + .text-hint { + @apply text-on-warn text-opacity-38 #{'!important'}; + } + + .text-disabled { + @apply text-on-warn text-opacity-38 #{'!important'}; + } + + .divider { + @apply text-on-warn text-opacity-12 #{'!important'}; + } + } +} diff --git a/src/@fuse/styles/overrides/highlightjs.scss b/src/@fuse/styles/overrides/highlightjs.scss new file mode 100644 index 0000000..120ef83 --- /dev/null +++ b/src/@fuse/styles/overrides/highlightjs.scss @@ -0,0 +1,82 @@ +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Highlight.js overrides +/* ----------------------------------------------------------------------------------------------------- */ +code[class*='language-'], +pre[class*='language-'] { + + .hljs-comment, + .hljs-quote { + color: #8B9FC1; + font-style: italic; + } + + .hljs-doctag, + .hljs-keyword, + .hljs-formula { + color: #22D3EE; + } + + .hljs-name { + color: #E879F9; + } + + .hljs-tag { + color: #BAE6FD; + } + + .hljs-section, + .hljs-selector-tag, + .hljs-deletion, + .hljs-subst { + color: #F87F71; + } + + .hljs-literal { + color: #36BEFF; + } + + .hljs-string, + .hljs-regexp, + .hljs-addition, + .hljs-attribute, + .hljs-meta-string { + color: #BEF264; + } + + .hljs-built_in, + .hljs-class .hljs-title { + color: #FFD374; + } + + .hljs-attr, + .hljs-variable, + .hljs-template-variable, + .hljs-type, + .hljs-selector-class, + .hljs-selector-attr, + .hljs-selector-pseudo, + .hljs-number { + color: #22D3EE; + } + + .hljs-symbol, + .hljs-bullet, + .hljs-link, + .hljs-meta, + .hljs-selector-id, + .hljs-title { + color: #E879F9; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: 700; + } + + .hljs-link { + text-decoration: underline; + } +} diff --git a/src/@fuse/styles/overrides/perfect-scrollbar.scss b/src/@fuse/styles/overrides/perfect-scrollbar.scss new file mode 100644 index 0000000..586b47d --- /dev/null +++ b/src/@fuse/styles/overrides/perfect-scrollbar.scss @@ -0,0 +1,69 @@ +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Perfect scrollbar overrides +/* ----------------------------------------------------------------------------------------------------- */ +.ps { + position: relative; + + &:hover, + &.ps--focus, + &.ps--scrolling-x, + &.ps--scrolling-y { + + > .ps__rail-x, + > .ps__rail-y { + opacity: 1; + } + } + + > .ps__rail-x, + > .ps__rail-y { + z-index: 99999; + } + + > .ps__rail-x { + height: 14px; + background: transparent !important; + transition: none !important; + + &:hover, + &:focus, + &.ps--clicking { + opacity: 1; + + .ps__thumb-x { + height: 10px; + } + } + + .ps__thumb-x { + background: rgba(0, 0, 0, 0.5); + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); + height: 6px; + transition: height 225ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + } + + > .ps__rail-y { + width: 14px; + background: transparent !important; + transition: none !important; + left: auto !important; + + &:hover, + &:focus, + &.ps--clicking { + opacity: 1; + + .ps__thumb-y { + width: 10px; + } + } + + .ps__thumb-y { + background: rgba(0, 0, 0, 0.5); + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); + width: 6px; + transition: width 225ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + } +} diff --git a/src/@fuse/styles/overrides/quill.scss b/src/@fuse/styles/overrides/quill.scss new file mode 100644 index 0000000..6183281 --- /dev/null +++ b/src/@fuse/styles/overrides/quill.scss @@ -0,0 +1,105 @@ +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Quill editor overrides +/* ----------------------------------------------------------------------------------------------------- */ +.ql-toolbar { + border-radius: 6px 6px 0 0; + padding: 0 !important; + @apply bg-gray-100; + @apply border-gray-300 border-opacity-100 #{'!important'}; + + .dark & { + background-color: rgba(0, 0, 0, 0.05); + @apply border-gray-500 #{'!important'}; + } + + .ql-formats { + margin: 11px 8px !important; + } + + .ql-picker { + + &.ql-expanded { + + .ql-picker-label { + @apply border-gray-300; + + .dark & { + @apply border-gray-500; + } + } + + .ql-picker-options { + z-index: 10 !important; + @apply border-gray-300 bg-card; + + .dark & { + @apply border-gray-500; + } + } + } + + .ql-picker-label { + @apply text-default; + } + + .ql-picker-options { + + .ql-picker-item { + @apply text-default; + } + } + } + + .ql-stroke, + .ql-stroke-mitter { + stroke: var(--fuse-icon); + } + + .ql-fill { + fill: var(--fuse-icon); + } + + button:hover, + button:focus, + button.ql-active, + .ql-picker-label:hover, + .ql-picker-label.ql-active, + .ql-picker-item:hover, + .ql-picker-item.ql-selected { + @apply text-primary #{'!important'}; + + .ql-stroke, + .ql-stroke-mitter { + stroke: var(--fuse-primary) !important; + } + + .ql-fill { + fill: var(--fuse-primary) !important; + } + } +} + +.ql-container { + overflow: hidden; + border-radius: 0 0 6px 6px; + @apply border-gray-300 border-opacity-100 shadow-sm #{'!important'}; + + .dark & { + @apply border-gray-500 #{'!important'}; + } + + .ql-editor { + min-height: 160px; + max-height: 160px; + height: 160px; + @apply bg-card; + + .dark & { + background-color: rgba(0, 0, 0, 0.05); + } + + &.ql-blank::before { + @apply text-hint; + } + } +} diff --git a/src/@fuse/styles/tailwind.scss b/src/@fuse/styles/tailwind.scss new file mode 100644 index 0000000..e4d823f --- /dev/null +++ b/src/@fuse/styles/tailwind.scss @@ -0,0 +1,98 @@ +/* This injects Tailwind's base styles and any base styles registered by plugins. */ +@tailwind base; + +/* This injects additional styles into Tailwind's base styles layer. */ +@layer base { + + * { + /* Text rendering */ + text-rendering: optimizeLegibility; + -o-text-rendering: optimizeLegibility; + -ms-text-rendering: optimizeLegibility; + -moz-text-rendering: optimizeLegibility; + -webkit-text-rendering: optimizeLegibility; + -webkit-tap-highlight-color: transparent; + + /* Remove the focus ring */ + &:focus { + outline: none !important; + } + } + + /* HTML and Body default styles */ + html, + body { + display: flex; + flex-direction: column; + flex: 1 1 auto; + width: 100%; + min-height: 100%; + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; + } + + /* Font size */ + html { + font-size: 16px; + } + + body { + font-size: 0.875rem; + } + + /* Stylistic alternates for Inter */ + body { + font-feature-settings: 'salt'; + } + + /* Better spacing and border for horizontal rule */ + hr { + margin: 32px 0; + border-bottom-width: 1px; + } + + /* Make images and videos to take up all the available space */ + img { + width: 100%; + vertical-align: top; + } + + /* Fix: Disabled placeholder color is too faded on Safari */ + input[disabled] { + opacity: 1; + -webkit-text-fill-color: currentColor; + } + + body, .dark, .light { + @apply text-default bg-default #{'!important'}; + } + + *, *::before, *::after { + --tw-border-opacity: 1 !important; + border-color: rgba(var(--fuse-border-rgb), var(--tw-border-opacity)); + + .dark & { + --tw-border-opacity: 0.12 !important; + } + } + + [disabled] * { + @apply text-disabled #{'!important'}; + } + + /* Print styles */ + @media print { + + /* Make the base font size smaller for print so everything is scaled nicely */ + html { + font-size: 12px !important; + } + + body, .dark, .light { + background: none !important; + } + } +} + +/* This injects Tailwind's component classes and any component classes registered by plugins. */ +@tailwind components; diff --git a/src/@fuse/styles/themes.scss b/src/@fuse/styles/themes.scss new file mode 100644 index 0000000..8aaa96d --- /dev/null +++ b/src/@fuse/styles/themes.scss @@ -0,0 +1,167 @@ +@use '@angular/material' as mat; +@use "sass:map"; + +/* Include the core Angular Material styles */ +@include mat.core(); + +/* Create a base theme without color. + This will globally set the density and typography for all future color themes. */ +@include mat.all-component-themes(( + color: null, + density: -2, + typography: mat.define-typography-config( + $font-family: theme('fontFamily.sans'), + $title: mat.define-typography-level(1.25rem, 2rem, 600), + $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600), + $button: mat.define-typography-level(0.875rem, 0.875rem, 500), + $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */ + ) +)); + +/* Generate Primary, Accent and Warn palettes */ +$palettes: (); +@each $name in (primary, accent, warn) { + $palettes: map.merge($palettes, (#{$name}: ( + 50: var(--fuse-#{$name}-50), + 100: var(--fuse-#{$name}-100), + 200: var(--fuse-#{$name}-200), + 300: var(--fuse-#{$name}-300), + 400: var(--fuse-#{$name}-400), + 500: var(--fuse-#{$name}-500), + 600: var(--fuse-#{$name}-600), + 700: var(--fuse-#{$name}-700), + 800: var(--fuse-#{$name}-800), + 900: var(--fuse-#{$name}-900), + contrast: ( + 50: var(--fuse-on-#{$name}-50), + 100: var(--fuse-on-#{$name}-100), + 200: var(--fuse-on-#{$name}-200), + 300: var(--fuse-on-#{$name}-300), + 400: var(--fuse-on-#{$name}-400), + 500: var(--fuse-on-#{$name}-500), + 600: var(--fuse-on-#{$name}-600), + 700: var(--fuse-on-#{$name}-700), + 800: var(--fuse-on-#{$name}-800), + 900: var(--fuse-on-#{$name}-900) + ), + default: var(--fuse-#{$name}), + lighter: var(--fuse-#{$name}-100), + darker: var(--fuse-#{$name}-700), + text: var(--fuse-#{$name}), + default-contrast: var(--fuse-on-#{$name}), + lighter-contrast: var(--fuse-on-#{$name}-100), + darker-contrast: var(--fuse-on-#{$name}-700) + ))); +} + +/* Generate Angular Material themes. Since we are using CSS Custom Properties, + we don't have to generate a separate Angular Material theme for each color + set. We can just create one light and one dark theme and then switch the + CSS Custom Properties to dynamically switch the colors. */ +body.light, +body .light { + $base-light-theme: mat.define-light-theme(( + color: ($palettes) + )); + + $light-theme: ( + color: ( + primary: map.get(map.get($base-light-theme, color), primary), + accent: map.get(map.get($base-light-theme, color), accent), + warn: map.get(map.get($base-light-theme, color), warn), + is-dark: map.get(map.get($base-light-theme, color), is-dark), + foreground: ( + base: #000000, + divider: #E2E8F0, /* slate.200 */ + dividers: #E2E8F0, /* slate.200 */ + disabled: #94A3B8, /* slate.400 */ + disabled-button: #94A3B8, /* slate.400 */ + disabled-text: #94A3B8, /* slate.400 */ + elevation: #000000, + hint-text: #94A3B8, /* slate.400 */ + secondary-text: #64748B, /* slate.500 */ + icon: #64748B, /* slate.500 */ + icons: #64748B, /* slate.500 */ + mat-icon: #64748B, /* slate.500 */ + text: #1E293B, /* slate.800 */ + slider-min: #1E293B, /* slate.800 */ + slider-off: #CBD5E1, /* slate.300 */ + slider-off-active: #94A3B8 /* slate.400 */ + ), + background: ( + status-bar: #CBD5E1, /* slate.300 */ + app-bar: #FFFFFF, + background: #F1F5F9, /* slate.100 */ + hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */ + card: #FFFFFF, + dialog: #FFFFFF, + disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */ + raised-button: #FFFFFF, + focused-button: #64748B, /* slate.500 */ + selected-button: #E2E8F0, /* slate.200 */ + selected-disabled-button: #E2E8F0, /* slate.200 */ + disabled-button-toggle: #CBD5E1, /* slate.300 */ + unselected-chip: #E2E8F0, /* slate.200 */ + disabled-list-option: #CBD5E1, /* slate.300 */ + tooltip: #1E293B /* slate.800 */ + ) + ) + ); + + /* Use all-component-colors to only generate the colors */ + @include mat.all-component-colors($light-theme); +} + +body.dark, +body .dark { + $base-dark-theme: mat.define-dark-theme(( + color: ($palettes) + )); + + $dark-theme: ( + color: ( + primary: map.get(map.get($base-dark-theme, color), primary), + accent: map.get(map.get($base-dark-theme, color), accent), + warn: map.get(map.get($base-dark-theme, color), warn), + is-dark: map.get(map.get($base-dark-theme, color), is-dark), + foreground: ( + base: #FFFFFF, + divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */ + dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */ + disabled: #475569, /* slate.600 */ + disabled-button: #1E293B, /* slate.800 */ + disabled-text: #475569, /* slate.600 */ + elevation: #000000, + hint-text: #64748B, /* slate.500 */ + secondary-text: #94A3B8, /* slate.400 */ + icon: #F1F5F9, /* slate.100 */ + icons: #F1F5F9, /* slate.100 */ + mat-icon: #94A3B8, /* slate.400 */ + text: #FFFFFF, + slider-min: #FFFFFF, + slider-off: #64748B, /* slate.500 */ + slider-off-active: #94A3B8 /* slate.400 */ + ), + background: ( + status-bar: #0F172A, /* slate.900 */ + app-bar: #0F172A, /* slate.900 */ + background: #0F172A, /* slate.900 */ + hover: rgba(255, 255, 255, 0.05), + card: #1E293B, /* slate.800 */ + dialog: #1E293B, /* slate.800 */ + disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */ + raised-button: #0F172A, /* slate.900 */ + focused-button: #E2E8F0, /* slate.200 */ + selected-button: rgba(255, 255, 255, 0.05), + selected-disabled-button: #1E293B, /* slate.800 */ + disabled-button-toggle: #0F172A, /* slate.900 */ + unselected-chip: #475569, /* slate.600 */ + disabled-list-option: #E2E8F0, /* slate.200 */ + tooltip: #64748B /* slate.500 */ + ) + ) + ); + + /* Use all-component-colors to only generate the colors */ + @include mat.all-component-colors($dark-theme); +} diff --git a/src/@fuse/tailwind/plugins/icon-size.js b/src/@fuse/tailwind/plugins/icon-size.js new file mode 100644 index 0000000..7933b5f --- /dev/null +++ b/src/@fuse/tailwind/plugins/icon-size.js @@ -0,0 +1,50 @@ +const plugin = require('tailwindcss/plugin'); + +module.exports = plugin( + ({ + matchUtilities, + theme + }) => + { + matchUtilities( + { + 'icon-size': (value) => ({ + width : value, + height : value, + minWidth : value, + minHeight : value, + fontSize : value, + lineHeight: value, + [`svg`] : { + width : value, + height: value + } + }) + }, + { + values: theme('iconSize') + }); + }, + { + theme: { + iconSize: { + 3 : '0.75rem', + 3.5: '0.875rem', + 4 : '1rem', + 4.5: '1.125rem', + 5 : '1.25rem', + 6 : '1.5rem', + 7 : '1.75rem', + 8 : '2rem', + 10 : '2.5rem', + 12 : '3rem', + 14 : '3.5rem', + 16 : '4rem', + 18 : '4.5rem', + 20 : '5rem', + 22 : '5.5rem', + 24 : '6rem' + } + } + } +); diff --git a/src/@fuse/tailwind/plugins/theming.js b/src/@fuse/tailwind/plugins/theming.js new file mode 100644 index 0000000..244b5ac --- /dev/null +++ b/src/@fuse/tailwind/plugins/theming.js @@ -0,0 +1,232 @@ +const chroma = require('chroma-js'); +const _ = require('lodash'); +const path = require('path'); +const colors = require('tailwindcss/colors'); +const plugin = require('tailwindcss/plugin'); +const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default; +const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts'))); + +// ----------------------------------------------------------------------------------------------------- +// @ Utilities +// ----------------------------------------------------------------------------------------------------- + +/** + * Normalize the provided theme + * + * @param theme + */ +const normalizeTheme = (theme) => +{ + return _.fromPairs(_.map(_.omitBy(theme, (palette, paletteName) => paletteName.startsWith('on') || _.isEmpty(palette)), + (palette, paletteName) => [ + paletteName, + { + ...palette, + DEFAULT: palette['DEFAULT'] || palette[500] + } + ] + )); +}; + +/** + * Generates variable colors for the 'colors' + * configuration from the provided theme + * + * @param theme + */ +const generateVariableColors = (theme) => +{ + // https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo + const customPropertiesWithOpacity = (name) => ({ + opacityVariable, + opacityValue + }) => + { + if ( opacityValue ) + { + return `rgba(var(--fuse-${name}-rgb), ${opacityValue})`; + } + if ( opacityVariable ) + { + return `rgba(var(--fuse-${name}-rgb), var(${opacityVariable}, 1))`; + } + return `rgb(var(--fuse-${name}-rgb))`; + }; + + return _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(theme))), (name) => [ + [name, customPropertiesWithOpacity(name)], + [`on-${name}`, customPropertiesWithOpacity(`on-${name}`)] + ]))); +}; + +/** + * Generate and return themes object with theme name and colors/ + * This is useful for accessing themes from Angular (Typescript). + * + * @param themes + * @returns {unknown[]} + */ +function generateThemesObject(themes) +{ + const normalizedDefaultTheme = normalizeTheme(themes.default); + return _.map(_.cloneDeep(themes), (value, key) => + { + const theme = normalizeTheme(value); + const primary = (theme && theme.primary && theme.primary.DEFAULT) ? theme.primary.DEFAULT : normalizedDefaultTheme.primary.DEFAULT; + const accent = (theme && theme.accent && theme.accent.DEFAULT) ? theme.accent.DEFAULT : normalizedDefaultTheme.accent.DEFAULT; + const warn = (theme && theme.warn && theme.warn.DEFAULT) ? theme.warn.DEFAULT : normalizedDefaultTheme.warn.DEFAULT; + + return _.fromPairs([ + [ + key, + { + primary, + accent, + warn + } + ] + ]); + }); +} + +// ----------------------------------------------------------------------------------------------------- +// @ FUSE TailwindCSS Main Plugin +// ----------------------------------------------------------------------------------------------------- +const theming = plugin.withOptions((options) => ({ + addComponents, + e, + theme + }) => + { + // ----------------------------------------------------------------------------------------------------- + // @ Map variable colors + // ----------------------------------------------------------------------------------------------------- + const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [ + themeName === 'default' ? 'body, .theme-default' : `.theme-${e(themeName)}`, + _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [ + [ + e(paletteName), + palette + ], + [ + `on-${e(paletteName)}`, + _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color])) + ] + ]) + ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))) + ])); + + addComponents(mapVariableColors); + + // ----------------------------------------------------------------------------------------------------- + // @ Generate scheme based css custom properties and utility classes + // ----------------------------------------------------------------------------------------------------- + const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) => + { + const isDark = colorScheme === 'dark'; + const background = theme(`fuse.customProps.background.${colorScheme}`); + const foreground = theme(`fuse.customProps.foreground.${colorScheme}`); + const lightSchemeSelectors = 'body.light, .light, .dark .light'; + const darkSchemeSelectors = 'body.dark, .dark, .light .dark'; + + return { + [(isDark ? darkSchemeSelectors : lightSchemeSelectors)]: { + + /** + * If a custom property is not available, browsers will use + * the fallback value. In this case, we want to use '--is-dark' + * as the indicator of a dark theme so we can use it like this: + * background-color: var(--is-dark, red); + * + * If we set '--is-dark' as "true" on dark themes, the above rule + * won't work because of the said "fallback value" logic. Therefore, + * we set the '--is-dark' to "false" on light themes and not set it + * all on dark themes so that the fallback value can be used on + * dark themes. + * + * On light themes, since '--is-dark' exists, the above rule will be + * interpolated as: + * "background-color: false" + * + * On dark themes, since '--is-dark' doesn't exist, the fallback value + * will be used ('red' in this case) and the rule will be interpolated as: + * "background-color: red" + * + * It's easier to understand and remember like this. + */ + ...(!isDark ? {'--is-dark': 'false'} : {}), + + // Generate custom properties from customProps + ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))), + ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))) + } + }; + }); + + const schemeUtilities = (() => + { + // Generate general styles & utilities + return {}; + })(); + + addComponents(schemeCustomProps); + addComponents(schemeUtilities); + }, + (options) => + { + return { + theme : { + extend: { + colors: generateVariableColors(options.themes.default) + }, + fuse : { + customProps: { + background: { + light: { + 'bg-app-bar' : '#FFFFFF', + 'bg-card' : '#FFFFFF', + 'bg-default' : colors.slate[100], + 'bg-dialog' : '#FFFFFF', + 'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(), + 'bg-status-bar': colors.slate[300] + }, + dark : { + 'bg-app-bar' : colors.slate[900], + 'bg-card' : colors.slate[800], + 'bg-default' : colors.slate[900], + 'bg-dialog' : colors.slate[800], + 'bg-hover' : 'rgba(255, 255, 255, 0.05)', + 'bg-status-bar': colors.slate[900] + } + }, + foreground: { + light: { + 'text-default' : colors.slate[800], + 'text-secondary': colors.slate[500], + 'text-hint' : colors.slate[400], + 'text-disabled' : colors.slate[400], + 'border' : colors.slate[200], + 'divider' : colors.slate[200], + 'icon' : colors.slate[500], + 'mat-icon' : colors.slate[500] + }, + dark : { + 'text-default' : '#FFFFFF', + 'text-secondary': colors.slate[400], + 'text-hint' : colors.slate[500], + 'text-disabled' : colors.slate[600], + 'border' : chroma(colors.slate[100]).alpha(0.12).css(), + 'divider' : chroma(colors.slate[100]).alpha(0.12).css(), + 'icon' : colors.slate[400], + 'mat-icon' : colors.slate[400] + } + } + }, + themes : generateThemesObject(options.themes) + } + } + }; + } +); + +module.exports = theming; diff --git a/src/@fuse/tailwind/plugins/utilities.js b/src/@fuse/tailwind/plugins/utilities.js new file mode 100644 index 0000000..4b1afb9 --- /dev/null +++ b/src/@fuse/tailwind/plugins/utilities.js @@ -0,0 +1,67 @@ +const plugin = require('tailwindcss/plugin'); + +module.exports = plugin(({ + addComponents +}) => +{ + /* + * Add base components. These are very important for everything to look + * correct. We are adding these to the 'components' layer because they must + * be defined before pretty much everything else. + */ + addComponents( + { + '.mat-icon' : { + '--tw-text-opacity': '1', + color : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))' + }, + '.text-default' : { + '--tw-text-opacity': '1 !important', + color : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important' + }, + '.text-secondary' : { + '--tw-text-opacity': '1 !important', + color : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important' + }, + '.text-hint' : { + '--tw-text-opacity': '1 !important', + color : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important' + }, + '.text-disabled' : { + '--tw-text-opacity': '1 !important', + color : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important' + }, + '.divider' : { + color: 'var(--fuse-divider) !important' + }, + '.bg-card' : { + '--tw-bg-opacity': '1 !important', + backgroundColor : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important' + }, + '.bg-default' : { + '--tw-bg-opacity': '1 !important', + backgroundColor : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important' + }, + '.bg-dialog' : { + '--tw-bg-opacity': '1 !important', + backgroundColor : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important' + }, + '.ring-bg-default': { + '--tw-ring-opacity': '1 !important', + '--tw-ring-color' : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important' + }, + '.ring-bg-card' : { + '--tw-ring-opacity': '1 !important', + '--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important' + } + } + ); + + addComponents( + { + '.bg-hover': { + backgroundColor: 'var(--fuse-bg-hover) !important' + } + } + ); +}); diff --git a/src/@fuse/tailwind/utils/generate-contrasts.js b/src/@fuse/tailwind/utils/generate-contrasts.js new file mode 100644 index 0000000..fd98c3c --- /dev/null +++ b/src/@fuse/tailwind/utils/generate-contrasts.js @@ -0,0 +1,31 @@ +const chroma = require('chroma-js'); +const _ = require('lodash'); + +/** + * Generates contrasting counterparts of the given palette. + * The provided palette must be in the same format with + * default Tailwind color palettes. + * + * @param palette + * @private + */ +const generateContrasts = (palette) => +{ + const lightColor = '#FFFFFF'; + let darkColor = '#FFFFFF'; + + // Iterate through the palette to find the darkest color + _.forEach(palette, ((color) => + { + darkColor = chroma.contrast(color, '#FFFFFF') > chroma.contrast(darkColor, '#FFFFFF') ? color : darkColor; + })); + + // Generate the contrasting colors + return _.fromPairs(_.map(palette, ((color, hue) => [ + hue, + chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor + ] + ))); +}; + +module.exports = generateContrasts; diff --git a/src/@fuse/tailwind/utils/generate-palette.js b/src/@fuse/tailwind/utils/generate-palette.js new file mode 100644 index 0000000..e2a8c90 --- /dev/null +++ b/src/@fuse/tailwind/utils/generate-palette.js @@ -0,0 +1,100 @@ +const chroma = require('chroma-js'); +const _ = require('lodash'); + +/** + * Generates palettes from the provided configuration. + * Accepts a single color string or a Tailwind-like + * color object. If provided Tailwind-like color object, + * it must have a 500 hue level. + * + * @param config + */ +const generatePalette = (config) => +{ + // Prepare an empty palette + const palette = { + 50 : null, + 100: null, + 200: null, + 300: null, + 400: null, + 500: null, + 600: null, + 700: null, + 800: null, + 900: null + }; + + // If a single color is provided, + // assign it to the 500 + if ( _.isString(config) ) + { + palette[500] = chroma.valid(config) ? config : null; + } + + // If a partial palette is provided, + // assign the values + if ( _.isPlainObject(config) ) + { + if ( !chroma.valid(config[500]) ) + { + throw new Error('You must have a 500 hue in your palette configuration! Make sure the main color of your palette is marked as 500.'); + } + + // Remove everything that is not a hue/color entry + config = _.pick(config, Object.keys(palette)); + + // Merge the values + _.mergeWith(palette, config, (objValue, srcValue) => chroma.valid(srcValue) ? srcValue : null); + } + + // Prepare the colors array + const colors = Object.values(palette).filter((color) => color); + + // Generate a very dark and a very light versions of the + // default color to use them as the boundary colors rather + // than using pure white and pure black. This will stop + // in between colors' hue values to slipping into the grays. + colors.unshift( + chroma.scale(['white', palette[500]]) + .domain([0, 1]) + .mode("lrgb") + .colors(50)[1] + ); + colors.push( + chroma.scale(['black', palette[500]]) + .domain([0, 1]) + .mode("lrgb") + .colors(10)[1] + ); + + // Prepare the domains array + const domain = [ + 0, + ...Object.entries(palette) + .filter(([key, value]) => value) + .map(([key]) => parseInt(key) / 1000), + 1 + ]; + + // Generate the color scale + const scale = chroma.scale(colors) + .domain(domain) + .mode('lrgb'); + + // Build and return the final palette + return { + 50 : scale(0.05).hex(), + 100: scale(0.1).hex(), + 200: scale(0.2).hex(), + 300: scale(0.3).hex(), + 400: scale(0.4).hex(), + 500: scale(0.5).hex(), + 600: scale(0.6).hex(), + 700: scale(0.7).hex(), + 800: scale(0.8).hex(), + 900: scale(0.9).hex() + }; +}; + +module.exports = generatePalette; diff --git a/src/@fuse/validators/index.ts b/src/@fuse/validators/index.ts new file mode 100644 index 0000000..5e4748d --- /dev/null +++ b/src/@fuse/validators/index.ts @@ -0,0 +1 @@ +export * from '@fuse/validators/public-api'; diff --git a/src/@fuse/validators/public-api.ts b/src/@fuse/validators/public-api.ts new file mode 100644 index 0000000..fc16900 --- /dev/null +++ b/src/@fuse/validators/public-api.ts @@ -0,0 +1 @@ +export * from '@fuse/validators/validators'; diff --git a/src/@fuse/validators/validators.ts b/src/@fuse/validators/validators.ts new file mode 100644 index 0000000..fa85d46 --- /dev/null +++ b/src/@fuse/validators/validators.ts @@ -0,0 +1,61 @@ +import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; + +export class FuseValidators { + /** + * Check for empty (optional fields) values + * + * @param value + */ + static isEmptyInputValue(value: any): boolean { + return value == null || value.length === 0; + } + + /** + * Must match validator + * + * @param controlPath A dot-delimited string values that define the path to the control. + * @param matchingControlPath A dot-delimited string values that define the path to the matching control. + */ + static mustMatch( + controlPath: string, + matchingControlPath: string + ): ValidatorFn { + return (formGroup: AbstractControl): ValidationErrors | null => { + // Get the control and matching control + const control = formGroup.get(controlPath); + const matchingControl = formGroup.get(matchingControlPath); + + // Return if control or matching control doesn't exist + if (!control || !matchingControl) { + return null; + } + + // Delete the mustMatch error to reset the error on the matching control + if ( + null !== matchingControl.errors && + matchingControl.hasError('mustMatch') + ) { + delete matchingControl.errors['mustMatch']; + matchingControl.updateValueAndValidity(); + } + + // Don't validate empty values on the matching control + // Don't validate if values are matching + if ( + this.isEmptyInputValue(matchingControl.value) || + control.value === matchingControl.value + ) { + return null; + } + + // Prepare the validation errors + const errors = { mustMatch: true }; + + // Set the validation error on the matching control + matchingControl.setErrors(errors); + + // Return the errors + return errors; + }; + } +} diff --git a/src/@fuse/version/fuse-version.ts b/src/@fuse/version/fuse-version.ts new file mode 100644 index 0000000..5a485a4 --- /dev/null +++ b/src/@fuse/version/fuse-version.ts @@ -0,0 +1,3 @@ +import { Version } from '@fuse/version/version'; + +export const FUSE_VERSION = new Version('14.2.0').full; diff --git a/src/@fuse/version/index.ts b/src/@fuse/version/index.ts new file mode 100644 index 0000000..aaf2718 --- /dev/null +++ b/src/@fuse/version/index.ts @@ -0,0 +1 @@ +export * from '@fuse/version/public-api'; diff --git a/src/@fuse/version/public-api.ts b/src/@fuse/version/public-api.ts new file mode 100644 index 0000000..8645bbf --- /dev/null +++ b/src/@fuse/version/public-api.ts @@ -0,0 +1,2 @@ +export * from '@fuse/version/fuse-version'; +export * from '@fuse/version/version'; diff --git a/src/@fuse/version/version.ts b/src/@fuse/version/version.ts new file mode 100644 index 0000000..6e7a8d4 --- /dev/null +++ b/src/@fuse/version/version.ts @@ -0,0 +1,21 @@ +/** + * Derived from Angular's version class + */ +export class Version +{ + public readonly full: string; + public readonly major: string; + public readonly minor: string; + public readonly patch: string; + + /** + * Constructor + */ + constructor(public version: string) + { + this.full = version; + this.major = version.split('.')[0]; + this.minor = version.split('.')[1]; + this.patch = version.split('.').slice(2).join('.'); + } +} diff --git a/src/_redirects b/src/_redirects new file mode 100644 index 0000000..bbb3e7a --- /dev/null +++ b/src/_redirects @@ -0,0 +1 @@ +/* /index.html 200 diff --git a/src/app/app.component.html b/src/app/app.component.html new file mode 100644 index 0000000..0680b43 --- /dev/null +++ b/src/app/app.component.html @@ -0,0 +1 @@ + diff --git a/src/app/app.component.scss b/src/app/app.component.scss new file mode 100644 index 0000000..1d56124 --- /dev/null +++ b/src/app/app.component.scss @@ -0,0 +1,6 @@ +:host { + display: flex; + flex: 1 1 auto; + width: 100%; + height: 100%; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts new file mode 100644 index 0000000..79c63c6 --- /dev/null +++ b/src/app/app.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], +}) +export class AppComponent { + /** + * Constructor + */ + constructor() {} +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts new file mode 100644 index 0000000..206def7 --- /dev/null +++ b/src/app/app.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router'; +import { MarkdownModule } from 'ngx-markdown'; +import { FuseModule } from '@fuse'; +import { FuseConfigModule } from '@fuse/services/config'; +import { FuseMockApiModule } from '@fuse/lib/mock-api'; +import { CoreModule } from 'app/core/core.module'; +import { appConfig } from 'app/core/config/app.config'; +import { mockApiServices } from 'app/mock-api'; +import { LayoutModule } from 'app/layout/layout.module'; +import { AppComponent } from 'app/app.component'; +import { appRoutes } from 'app/app.routing'; + +const routerConfig: ExtraOptions = { + preloadingStrategy: PreloadAllModules, + scrollPositionRestoration: 'enabled', +}; + +@NgModule({ + declarations: [AppComponent], + imports: [ + BrowserModule, + BrowserAnimationsModule, + RouterModule.forRoot(appRoutes, routerConfig), + + // Fuse, FuseConfig & FuseMockAPI + FuseModule, + FuseConfigModule.forRoot(appConfig), + FuseMockApiModule.forRoot(mockApiServices), + + // Core module of your application + CoreModule, + + // Layout module of your application + LayoutModule, + + // 3rd party modules that require global configuration via forRoot + MarkdownModule.forRoot({}), + ], + bootstrap: [AppComponent], +}) +export class AppModule {} diff --git a/src/app/app.resolvers.ts b/src/app/app.resolvers.ts new file mode 100644 index 0000000..ae91743 --- /dev/null +++ b/src/app/app.resolvers.ts @@ -0,0 +1,55 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + Resolve, + RouterStateSnapshot, +} from '@angular/router'; +import { forkJoin, Observable } from 'rxjs'; +import { MessagesService } from 'app/layout/common/messages/messages.service'; +import { NavigationService } from 'app/core/navigation/navigation.service'; +import { NotificationsService } from 'app/layout/common/notifications/notifications.service'; +import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service'; +import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service'; +import { UserService } from 'app/core/user/user.service'; + +@Injectable({ + providedIn: 'root', +}) +export class InitialDataResolver implements Resolve { + /** + * Constructor + */ + constructor( + private _messagesService: MessagesService, + private _navigationService: NavigationService, + private _notificationsService: NotificationsService, + private _quickChatService: QuickChatService, + private _shortcutsService: ShortcutsService, + private _userService: UserService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Use this resolver to resolve initial mock-api for the application + * + * @param route + * @param state + */ + resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable { + // Fork join multiple API endpoint calls to wait all of them to finish + return forkJoin([ + this._navigationService.get(), + this._messagesService.getAll(), + this._notificationsService.getAll(), + this._quickChatService.getChats(), + this._shortcutsService.getAll(), + this._userService.get(), + ]); + } +} diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts new file mode 100644 index 0000000..52a958d --- /dev/null +++ b/src/app/app.routing.ts @@ -0,0 +1,157 @@ +import { Route } from '@angular/router'; +import { AuthGuard } from 'app/core/auth/guards/auth.guard'; +import { NoAuthGuard } from 'app/core/auth/guards/noAuth.guard'; +import { LayoutComponent } from 'app/layout/layout.component'; +import { InitialDataResolver } from 'app/app.resolvers'; + +// @formatter:off +/* eslint-disable max-len */ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +export const appRoutes: Route[] = [ + // Redirect empty path to '/dashboards/user' + { path: '', pathMatch: 'full', redirectTo: 'dashboards/user' }, + + // Redirect signed in user to the '/dashboards/user' + // + // After the user signs in, the sign in page will redirect the user to the 'signed-in-redirect' + // path. Below is another redirection for that path to redirect the user to the desired + // location. This is a small convenience to keep all main routes together here on this file. + { + path: 'signed-in-redirect', + pathMatch: 'full', + redirectTo: 'dashboards/user', + }, + + // Auth routes for guests + { + path: '', + canActivate: [NoAuthGuard], + canActivateChild: [NoAuthGuard], + component: LayoutComponent, + data: { + layout: 'empty', + }, + children: [ + { + path: 'confirmation-required', + loadChildren: () => + import( + 'app/modules/auth/confirmation-required/confirmation-required.module' + ).then((m: any) => m.AuthConfirmationRequiredModule), + }, + { + path: 'forgot-password', + loadChildren: () => + import( + 'app/modules/auth/forgot-password/forgot-password.module' + ).then((m: any) => m.AuthForgotPasswordModule), + }, + { + path: 'reset-password', + loadChildren: () => + import('app/modules/auth/reset-password/reset-password.module').then( + (m: any) => m.AuthResetPasswordModule + ), + }, + { + path: 'sign-in', + loadChildren: () => + import('app/modules/auth/sign-in/sign-in.module').then( + (m: any) => m.AuthSignInModule + ), + }, + { + path: 'sign-up', + loadChildren: () => + import('app/modules/auth/sign-up/sign-up.module').then( + (m: any) => m.AuthSignUpModule + ), + }, + ], + }, + + // Auth routes for authenticated users + { + path: '', + canActivate: [AuthGuard], + canActivateChild: [AuthGuard], + component: LayoutComponent, + data: { + layout: 'empty', + }, + children: [ + { + path: 'sign-out', + loadChildren: () => + import('app/modules/auth/sign-out/sign-out.module').then( + (m: any) => m.AuthSignOutModule + ), + }, + { + path: 'unlock-session', + loadChildren: () => + import('app/modules/auth/unlock-session/unlock-session.module').then( + (m: any) => m.AuthUnlockSessionModule + ), + }, + ], + }, + + // Landing routes + { + path: '', + component: LayoutComponent, + data: { + layout: 'empty', + }, + children: [ + { + path: 'home', + loadChildren: () => + import('app/modules/landing/home/home.module').then( + (m: any) => m.LandingHomeModule + ), + }, + ], + }, + + // Admin routes + { + path: '', + canActivate: [AuthGuard], + canActivateChild: [AuthGuard], + component: LayoutComponent, + resolve: { + initialData: InitialDataResolver, + }, + children: [ + // Dashboards + { + path: 'dashboards', + children: [ + { + path: 'user', + loadChildren: () => + import('app/modules/admin/dashboards/user/user.module').then( + (m: any) => m.UserModule + ), + }, + ], + }, + + // Apps + { + path: 'member', + children: [ + { + path: 'user', + loadChildren: () => + import('app/modules/admin/member/user/user.module').then( + (m: any) => m.UserModule + ), + }, + ], + }, + ], + }, +]; diff --git a/src/app/core/auth/auth.interceptor.ts b/src/app/core/auth/auth.interceptor.ts new file mode 100644 index 0000000..e557e5c --- /dev/null +++ b/src/app/core/auth/auth.interceptor.ts @@ -0,0 +1,69 @@ +import { Injectable } from '@angular/core'; +import { + HttpErrorResponse, + HttpEvent, + HttpHandler, + HttpInterceptor, + HttpRequest, +} from '@angular/common/http'; +import { catchError, Observable, throwError } from 'rxjs'; +import { AuthService } from 'app/core/auth/auth.service'; +import { AuthUtils } from 'app/core/auth/auth.utils'; + +@Injectable() +export class AuthInterceptor implements HttpInterceptor { + /** + * Constructor + */ + constructor(private _authService: AuthService) {} + + /** + * Intercept + * + * @param req + * @param next + */ + intercept( + req: HttpRequest, + next: HttpHandler + ): Observable> { + // Clone the request object + let newReq = req.clone(); + + // Request + // + // If the access token didn't expire, add the Authorization header. + // We won't add the Authorization header if the access token expired. + // This will force the server to return a "401 Unauthorized" response + // for the protected API routes which our response interceptor will + // catch and delete the access token from the local storage while logging + // the user out from the app. + if ( + this._authService.accessToken && + !AuthUtils.isTokenExpired(this._authService.accessToken) + ) { + newReq = req.clone({ + headers: req.headers.set( + 'Authorization', + 'Bearer ' + this._authService.accessToken + ), + }); + } + + // Response + return next.handle(newReq).pipe( + catchError((error) => { + // Catch "401 Unauthorized" responses + if (error instanceof HttpErrorResponse && error.status === 401) { + // Sign out + this._authService.signOut(); + + // Reload the app + location.reload(); + } + + return throwError(error); + }) + ); + } +} diff --git a/src/app/core/auth/auth.module.ts b/src/app/core/auth/auth.module.ts new file mode 100644 index 0000000..7ea63a3 --- /dev/null +++ b/src/app/core/auth/auth.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; +import { AuthService } from 'app/core/auth/auth.service'; +import { AuthInterceptor } from 'app/core/auth/auth.interceptor'; + +@NgModule({ + imports: [HttpClientModule], + providers: [ + AuthService, + { + provide: HTTP_INTERCEPTORS, + useClass: AuthInterceptor, + multi: true, + }, + ], +}) +export class AuthModule {} diff --git a/src/app/core/auth/auth.service.ts b/src/app/core/auth/auth.service.ts new file mode 100644 index 0000000..97e1020 --- /dev/null +++ b/src/app/core/auth/auth.service.ts @@ -0,0 +1,176 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { catchError, Observable, of, switchMap, throwError } from 'rxjs'; +import { AuthUtils } from 'app/core/auth/auth.utils'; +import { UserService } from 'app/core/user/user.service'; + +@Injectable() +export class AuthService { + private _authenticated: boolean = false; + + /** + * Constructor + */ + constructor( + private _httpClient: HttpClient, + private _userService: UserService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Setter & getter for access token + */ + get accessToken(): string { + return localStorage.getItem('accessToken') ?? ''; + } + + set accessToken(token: string) { + localStorage.setItem('accessToken', token); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Forgot password + * + * @param email + */ + forgotPassword(email: string): Observable { + return this._httpClient.post('api/auth/forgot-password', email); + } + + /** + * Reset password + * + * @param password + */ + resetPassword(password: string): Observable { + return this._httpClient.post('api/auth/reset-password', password); + } + + /** + * Sign in + * + * @param credentials + */ + signIn(credentials: { email: string; password: string }): Observable { + // Throw error, if the user is already logged in + if (this._authenticated) { + return throwError('User is already logged in.'); + } + + return this._httpClient.post('api/auth/sign-in', credentials).pipe( + switchMap((response: any) => { + // Store the access token in the local storage + this.accessToken = response.accessToken; + + // Set the authenticated flag to true + this._authenticated = true; + + // Store the user on the user service + this._userService.user = response.user; + + // Return a new observable with the response + return of(response); + }) + ); + } + + /** + * Sign in using the access token + */ + signInUsingToken(): Observable { + // Renew token + return this._httpClient + .post('api/auth/refresh-access-token', { + accessToken: this.accessToken, + }) + .pipe( + catchError(() => + // Return false + of(false) + ), + switchMap((response: any) => { + // Store the access token in the local storage + this.accessToken = response.accessToken; + + // Set the authenticated flag to true + this._authenticated = true; + + // Store the user on the user service + this._userService.user = response.user; + + // Return true + return of(true); + }) + ); + } + + /** + * Sign out + */ + signOut(): Observable { + // Remove the access token from the local storage + localStorage.removeItem('accessToken'); + + // Set the authenticated flag to false + this._authenticated = false; + + // Return the observable + return of(true); + } + + /** + * Sign up + * + * @param user + */ + signUp(user: { + name: string; + email: string; + password: string; + company: string; + }): Observable { + return this._httpClient.post('api/auth/sign-up', user); + } + + /** + * Unlock session + * + * @param credentials + */ + unlockSession(credentials: { + email: string; + password: string; + }): Observable { + return this._httpClient.post('api/auth/unlock-session', credentials); + } + + /** + * Check the authentication status + */ + check(): Observable { + // Check if the user is logged in + if (this._authenticated) { + return of(true); + } + + // Check the access token availability + if (!this.accessToken) { + return of(false); + } + + // Check the access token expire date + if (AuthUtils.isTokenExpired(this.accessToken)) { + return of(false); + } + + // If the access token exists and it didn't expire, sign in using it + return this.signInUsingToken(); + } +} diff --git a/src/app/core/auth/auth.utils.ts b/src/app/core/auth/auth.utils.ts new file mode 100644 index 0000000..9ec0a4f --- /dev/null +++ b/src/app/core/auth/auth.utils.ts @@ -0,0 +1,186 @@ +// ----------------------------------------------------------------------------------------------------- +// @ AUTH UTILITIES +// +// Methods are derivations of the Auth0 Angular-JWT helper service methods +// https://github.com/auth0/angular2-jwt +// ----------------------------------------------------------------------------------------------------- + +export class AuthUtils { + /** + * Constructor + */ + constructor() {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Is token expired? + * + * @param token + * @param offsetSeconds + */ + static isTokenExpired(token: string, offsetSeconds?: number): boolean { + // Return if there is no token + if (!token || token === '') { + return true; + } + + // Get the expiration date + const date = this._getTokenExpirationDate(token); + + offsetSeconds = offsetSeconds || 0; + + if (date === null) { + return true; + } + + // Check if the token is expired + return !(date.valueOf() > new Date().valueOf() + offsetSeconds * 1000); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Base64 decoder + * Credits: https://github.com/atk + * + * @param str + * @private + */ + private static _b64decode(str: string): string { + const chars = + 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; + let output = ''; + + str = String(str).replace(/=+$/, ''); + + if (str.length % 4 === 1) { + throw new Error( + '"atob" failed: The string to be decoded is not correctly encoded.' + ); + } + + /* eslint-disable */ + for ( + // initialize result and counters + let bc = 0, bs: any, buffer: any, idx = 0; + // get next character + (buffer = str.charAt(idx++)); + // character found in table? initialize bit storage and add its ascii value; + ~buffer && + ((bs = bc % 4 ? bs * 64 + buffer : buffer), + // and if not first of each 4 characters, + // convert the first 8 bits to one ascii character + bc++ % 4) + ? (output += String.fromCharCode(255 & (bs >> ((-2 * bc) & 6)))) + : 0 + ) { + // try to find character in table (0-63, not found => -1) + buffer = chars.indexOf(buffer); + } + /* eslint-enable */ + + return output; + } + + /** + * Base64 unicode decoder + * + * @param str + * @private + */ + private static _b64DecodeUnicode(str: any): string { + return decodeURIComponent( + Array.prototype.map + .call( + this._b64decode(str), + (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2) + ) + .join('') + ); + } + + /** + * URL Base 64 decoder + * + * @param str + * @private + */ + private static _urlBase64Decode(str: string): string { + let output = str.replace(/-/g, '+').replace(/_/g, '/'); + switch (output.length % 4) { + case 0: { + break; + } + case 2: { + output += '=='; + break; + } + case 3: { + output += '='; + break; + } + default: { + throw Error('Illegal base64url string!'); + } + } + return this._b64DecodeUnicode(output); + } + + /** + * Decode token + * + * @param token + * @private + */ + private static _decodeToken(token: string): any { + // Return if there is no token + if (!token) { + return null; + } + + // Split the token + const parts = token.split('.'); + + if (parts.length !== 3) { + throw new Error( + 'The inspected token does not appear to be a JWT. Check to make sure it has three parts and see https://jwt.io for more.' + ); + } + + // Decode the token using the Base64 decoder + const decoded = this._urlBase64Decode(parts[1]); + + if (!decoded) { + throw new Error('Cannot decode the token.'); + } + + return JSON.parse(decoded); + } + + /** + * Get token expiration date + * + * @param token + * @private + */ + private static _getTokenExpirationDate(token: string): Date | null { + // Get the decoded token + const decodedToken = this._decodeToken(token); + + // Return if the decodedToken doesn't have an 'exp' field + if (!decodedToken.hasOwnProperty('exp')) { + return null; + } + + // Convert the expiration date + const date = new Date(0); + date.setUTCSeconds(decodedToken.exp); + + return date; + } +} diff --git a/src/app/core/auth/guards/auth.guard.ts b/src/app/core/auth/guards/auth.guard.ts new file mode 100644 index 0000000..b4f5ee3 --- /dev/null +++ b/src/app/core/auth/guards/auth.guard.ts @@ -0,0 +1,102 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + CanActivate, + CanActivateChild, + CanLoad, + Route, + Router, + RouterStateSnapshot, + UrlSegment, + UrlTree, +} from '@angular/router'; +import { Observable, of, switchMap } from 'rxjs'; +import { AuthService } from 'app/core/auth/auth.service'; + +@Injectable({ + providedIn: 'root', +}) +export class AuthGuard implements CanActivate, CanActivateChild, CanLoad { + /** + * Constructor + */ + constructor(private _authService: AuthService, private _router: Router) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Can activate + * + * @param route + * @param state + */ + canActivate( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable | Promise | boolean { + const redirectUrl = state.url === '/sign-out' ? '/' : state.url; + return this._check(redirectUrl); + } + + /** + * Can activate child + * + * @param childRoute + * @param state + */ + canActivateChild( + childRoute: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): + | Observable + | Promise + | boolean + | UrlTree { + const redirectUrl = state.url === '/sign-out' ? '/' : state.url; + return this._check(redirectUrl); + } + + /** + * Can load + * + * @param route + * @param segments + */ + canLoad( + route: Route, + segments: UrlSegment[] + ): Observable | Promise | boolean { + return this._check('/'); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Check the authenticated status + * + * @param redirectURL + * @private + */ + private _check(redirectURL: string): Observable { + // Check the authentication status + return this._authService.check().pipe( + switchMap((authenticated) => { + // If the user is not authenticated... + if (!authenticated) { + // Redirect to the sign-in page + this._router.navigate(['sign-in'], { queryParams: { redirectURL } }); + + // Prevent the access + return of(false); + } + + // Allow the access + return of(true); + }) + ); + } +} diff --git a/src/app/core/auth/guards/noAuth.guard.ts b/src/app/core/auth/guards/noAuth.guard.ts new file mode 100644 index 0000000..b135ce4 --- /dev/null +++ b/src/app/core/auth/guards/noAuth.guard.ts @@ -0,0 +1,99 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + CanActivate, + CanActivateChild, + CanLoad, + Route, + Router, + RouterStateSnapshot, + UrlSegment, + UrlTree, +} from '@angular/router'; +import { Observable, of, switchMap } from 'rxjs'; +import { AuthService } from 'app/core/auth/auth.service'; + +@Injectable({ + providedIn: 'root', +}) +export class NoAuthGuard implements CanActivate, CanActivateChild, CanLoad { + /** + * Constructor + */ + constructor(private _authService: AuthService, private _router: Router) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Can activate + * + * @param route + * @param state + */ + canActivate( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable | Promise | boolean { + return this._check(); + } + + /** + * Can activate child + * + * @param childRoute + * @param state + */ + canActivateChild( + childRoute: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): + | Observable + | Promise + | boolean + | UrlTree { + return this._check(); + } + + /** + * Can load + * + * @param route + * @param segments + */ + canLoad( + route: Route, + segments: UrlSegment[] + ): Observable | Promise | boolean { + return this._check(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Check the authenticated status + * + * @private + */ + private _check(): Observable { + // Check the authentication status + return this._authService.check().pipe( + switchMap((authenticated) => { + // If the user is authenticated... + if (authenticated) { + // Redirect to the root + this._router.navigate(['']); + + // Prevent the access + return of(false); + } + + // Allow the access + return of(true); + }) + ); + } +} diff --git a/src/app/core/config/app.config.ts b/src/app/core/config/app.config.ts new file mode 100644 index 0000000..49e4b39 --- /dev/null +++ b/src/app/core/config/app.config.ts @@ -0,0 +1,70 @@ +import { Layout } from 'app/layout/layout.types'; + +// Types +export type Scheme = 'auto' | 'dark' | 'light'; +export type Screens = { [key: string]: string }; +export type Theme = 'theme-default' | string; +export type Themes = { id: string; name: string }[]; + +/** + * AppConfig interface. Update this interface to strictly type your config + * object. + */ +export interface AppConfig { + layout: Layout; + scheme: Scheme; + screens: Screens; + theme: Theme; + themes: Themes; +} + +/** + * Default configuration for the entire application. This object is used by + * FuseConfigService to set the default configuration. + * + * If you need to store global configuration for your app, you can use this + * object to set the defaults. To access, update and reset the config, use + * FuseConfigService and its methods. + * + * "Screens" are carried over to the BreakpointObserver for accessing them within + * components, and they are required. + * + * "Themes" are required for Tailwind to generate themes. + */ +export const appConfig: AppConfig = { + layout: 'classic', + scheme: 'light', + screens: { + sm: '600px', + md: '960px', + lg: '1280px', + xl: '1440px', + }, + theme: 'theme-default', + themes: [ + { + id: 'theme-default', + name: 'Default', + }, + { + id: 'theme-brand', + name: 'Brand', + }, + { + id: 'theme-teal', + name: 'Teal', + }, + { + id: 'theme-rose', + name: 'Rose', + }, + { + id: 'theme-purple', + name: 'Purple', + }, + { + id: 'theme-amber', + name: 'Amber', + }, + ], +}; diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts new file mode 100644 index 0000000..5169588 --- /dev/null +++ b/src/app/core/core.module.ts @@ -0,0 +1,21 @@ +import { NgModule, Optional, SkipSelf } from '@angular/core'; +import { AuthModule } from 'app/core/auth/auth.module'; +import { IconsModule } from 'app/core/icons/icons.module'; +import { TranslocoCoreModule } from 'app/core/transloco/transloco.module'; + +@NgModule({ + imports: [AuthModule, IconsModule, TranslocoCoreModule], +}) +export class CoreModule { + /** + * Constructor + */ + constructor(@Optional() @SkipSelf() parentModule?: CoreModule) { + // Do not allow multiple injections + if (parentModule) { + throw new Error( + 'CoreModule has already been loaded. Import this module in the AppModule only.' + ); + } + } +} diff --git a/src/app/core/icons/icons.module.ts b/src/app/core/icons/icons.module.ts new file mode 100644 index 0000000..eeb4a51 --- /dev/null +++ b/src/app/core/icons/icons.module.ts @@ -0,0 +1,57 @@ +import { NgModule } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import { MatIconRegistry } from '@angular/material/icon'; + +@NgModule() +export class IconsModule { + /** + * Constructor + */ + constructor( + private _domSanitizer: DomSanitizer, + private _matIconRegistry: MatIconRegistry + ) { + // Register icon sets + this._matIconRegistry.addSvgIconSet( + this._domSanitizer.bypassSecurityTrustResourceUrl( + 'assets/icons/material-twotone.svg' + ) + ); + this._matIconRegistry.addSvgIconSetInNamespace( + 'mat_outline', + this._domSanitizer.bypassSecurityTrustResourceUrl( + 'assets/icons/material-outline.svg' + ) + ); + this._matIconRegistry.addSvgIconSetInNamespace( + 'mat_solid', + this._domSanitizer.bypassSecurityTrustResourceUrl( + 'assets/icons/material-solid.svg' + ) + ); + this._matIconRegistry.addSvgIconSetInNamespace( + 'iconsmind', + this._domSanitizer.bypassSecurityTrustResourceUrl( + 'assets/icons/iconsmind.svg' + ) + ); + this._matIconRegistry.addSvgIconSetInNamespace( + 'feather', + this._domSanitizer.bypassSecurityTrustResourceUrl( + 'assets/icons/feather.svg' + ) + ); + this._matIconRegistry.addSvgIconSetInNamespace( + 'heroicons_outline', + this._domSanitizer.bypassSecurityTrustResourceUrl( + 'assets/icons/heroicons-outline.svg' + ) + ); + this._matIconRegistry.addSvgIconSetInNamespace( + 'heroicons_solid', + this._domSanitizer.bypassSecurityTrustResourceUrl( + 'assets/icons/heroicons-solid.svg' + ) + ); + } +} diff --git a/src/app/core/navigation/navigation.service.ts b/src/app/core/navigation/navigation.service.ts new file mode 100644 index 0000000..9c6f6c5 --- /dev/null +++ b/src/app/core/navigation/navigation.service.ts @@ -0,0 +1,43 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable, ReplaySubject, tap } from 'rxjs'; +import { Navigation } from 'app/core/navigation/navigation.types'; + +@Injectable({ + providedIn: 'root', +}) +export class NavigationService { + private _navigation: ReplaySubject = + new ReplaySubject(1); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for navigation + */ + get navigation$(): Observable { + return this._navigation.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get all navigation data + */ + get(): Observable { + return this._httpClient.get('api/common/navigation').pipe( + tap((navigation) => { + this._navigation.next(navigation); + }) + ); + } +} diff --git a/src/app/core/navigation/navigation.types.ts b/src/app/core/navigation/navigation.types.ts new file mode 100644 index 0000000..5f8f56c --- /dev/null +++ b/src/app/core/navigation/navigation.types.ts @@ -0,0 +1,8 @@ +import { FuseNavigationItem } from '@fuse/components/navigation'; + +export interface Navigation { + compact: FuseNavigationItem[]; + default: FuseNavigationItem[]; + futuristic: FuseNavigationItem[]; + horizontal: FuseNavigationItem[]; +} diff --git a/src/app/core/transloco/transloco.http-loader.ts b/src/app/core/transloco/transloco.http-loader.ts new file mode 100644 index 0000000..4b7474a --- /dev/null +++ b/src/app/core/transloco/transloco.http-loader.ts @@ -0,0 +1,27 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; +import { Translation, TranslocoLoader } from '@ngneat/transloco'; + +@Injectable({ + providedIn: 'root', +}) +export class TranslocoHttpLoader implements TranslocoLoader { + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get translation + * + * @param lang + */ + getTranslation(lang: string): Observable { + return this._httpClient.get(`./assets/i18n/${lang}.json`); + } +} diff --git a/src/app/core/transloco/transloco.module.ts b/src/app/core/transloco/transloco.module.ts new file mode 100644 index 0000000..11d9f2b --- /dev/null +++ b/src/app/core/transloco/transloco.module.ts @@ -0,0 +1,60 @@ +import { + Translation, + TRANSLOCO_CONFIG, + TRANSLOCO_LOADER, + translocoConfig, + TranslocoModule, + TranslocoService, +} from '@ngneat/transloco'; +import { APP_INITIALIZER, NgModule } from '@angular/core'; +import { environment } from 'environments/environment'; +import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader'; + +@NgModule({ + exports: [TranslocoModule], + providers: [ + { + // Provide the default Transloco configuration + provide: TRANSLOCO_CONFIG, + useValue: translocoConfig({ + availableLangs: [ + { + id: 'ko', + label: 'Korean', + }, + { + id: 'en', + label: 'English', + }, + { + id: 'tr', + label: 'Turkish', + }, + ], + defaultLang: 'ko', + fallbackLang: 'ko', + reRenderOnLangChange: true, + prodMode: environment.production, + }), + }, + { + // Provide the default Transloco loader + provide: TRANSLOCO_LOADER, + useClass: TranslocoHttpLoader, + }, + { + // Preload the default language before the app starts to prevent empty/jumping content + provide: APP_INITIALIZER, + deps: [TranslocoService], + useFactory: + (translocoService: TranslocoService): any => + (): Promise => { + const defaultLang = translocoService.getDefaultLang(); + translocoService.setActiveLang(defaultLang); + return translocoService.load(defaultLang).toPromise(); + }, + multi: true, + }, + ], +}) +export class TranslocoCoreModule {} diff --git a/src/app/core/user/user.service.ts b/src/app/core/user/user.service.ts new file mode 100644 index 0000000..fe7393c --- /dev/null +++ b/src/app/core/user/user.service.ts @@ -0,0 +1,61 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { map, Observable, ReplaySubject, tap } from 'rxjs'; +import { User } from 'app/core/user/user.types'; + +@Injectable({ + providedIn: 'root', +}) +export class UserService { + private _user: ReplaySubject = new ReplaySubject(1); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Setter & getter for user + * + * @param value + */ + get user$(): Observable { + return this._user.asObservable(); + } + set user(value: User) { + // Store the value + this._user.next(value); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get the current logged in user data + */ + get(): Observable { + return this._httpClient.get('api/common/user').pipe( + tap((user) => { + this._user.next(user); + }) + ); + } + + /** + * Update the user + * + * @param user + */ + update(user: User): Observable { + return this._httpClient.patch('api/common/user', { user }).pipe( + map((response) => { + this._user.next(response); + }) + ); + } +} diff --git a/src/app/core/user/user.types.ts b/src/app/core/user/user.types.ts new file mode 100644 index 0000000..433165f --- /dev/null +++ b/src/app/core/user/user.types.ts @@ -0,0 +1,7 @@ +export interface User { + id: string; + name: string; + email: string; + avatar?: string; + status?: string; +} diff --git a/src/app/layout/common/languages/languages.component.html b/src/app/layout/common/languages/languages.component.html new file mode 100644 index 0000000..70fc08c --- /dev/null +++ b/src/app/layout/common/languages/languages.component.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + diff --git a/src/app/layout/common/languages/languages.component.ts b/src/app/layout/common/languages/languages.component.ts new file mode 100644 index 0000000..968a562 --- /dev/null +++ b/src/app/layout/common/languages/languages.component.ts @@ -0,0 +1,156 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + OnDestroy, + OnInit, + ViewEncapsulation, +} from '@angular/core'; +import { take } from 'rxjs'; +import { LangDefinition, TranslocoService } from '@ngneat/transloco'; +import { + FuseNavigationItem, + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; + +@Component({ + selector: 'languages', + templateUrl: './languages.component.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + exportAs: 'languages', +}) +export class LanguagesComponent implements OnInit, OnDestroy { + availableLangs!: LangDefinition[]; + activeLang!: string; + flagCodes: any; + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseNavigationService: FuseNavigationService, + private _translocoService: TranslocoService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the available languages from transloco + this.availableLangs = + this._translocoService.getAvailableLangs() as LangDefinition[]; + + // Subscribe to language changes + this._translocoService.langChanges$.subscribe((activeLang) => { + // Get the active lang + this.activeLang = activeLang; + + // Update the navigation + this._updateNavigation(activeLang); + }); + + // Set the country iso codes for languages for flags + this.flagCodes = { + ko: 'kr', + en: 'us', + tr: 'tr', + }; + } + + /** + * On destroy + */ + ngOnDestroy(): void {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Set the active lang + * + * @param lang + */ + setActiveLang(lang: string): void { + // Set the active lang + this._translocoService.setActiveLang(lang); + } + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Update the navigation + * + * @param lang + * @private + */ + private _updateNavigation(lang: string): void { + // For the demonstration purposes, we will only update the Dashboard names + // from the navigation but you can do a full swap and change the entire + // navigation data. + // + // You can import the data from a file or request it from your backend, + // it's up to you. + + // Get the component -> navigation data -> item + const navComponent = + this._fuseNavigationService.getComponent( + 'mainNavigation' + ); + + // Return if the navigation component does not exist + if (!navComponent) { + return; + } + + // Get the flat navigation data + const navigation = navComponent.navigation; + + this._updateNavigationItems(navigation); + + navComponent.refresh(); + } + + private _updateNavigationItems(items?: FuseNavigationItem[]): void { + if (!items) { + return; + } + for (const n of items) { + const item = this._fuseNavigationService.getItem(items, n.id); + if (!item) { + continue; + } + + if (!!item.title) { + item.title = this._translocoService.translate(item.title); + } + if (!!item.subtitle) { + item.subtitle = this._translocoService.translate(item.subtitle); + } + if (!!item.tooltip) { + item.tooltip = this._translocoService.translate(item.tooltip); + } + + this._updateNavigationItems(item.children); + } + } +} diff --git a/src/app/layout/common/languages/languages.module.ts b/src/app/layout/common/languages/languages.module.ts new file mode 100644 index 0000000..c97545c --- /dev/null +++ b/src/app/layout/common/languages/languages.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { LanguagesComponent } from 'app/layout/common/languages/languages.component'; +import { SharedModule } from 'app/shared/shared.module'; + +@NgModule({ + declarations: [LanguagesComponent], + imports: [MatButtonModule, MatIconModule, MatMenuModule, SharedModule], + exports: [LanguagesComponent], +}) +export class LanguagesModule {} diff --git a/src/app/layout/common/messages/messages.component.html b/src/app/layout/common/messages/messages.component.html new file mode 100644 index 0000000..c542205 --- /dev/null +++ b/src/app/layout/common/messages/messages.component.html @@ -0,0 +1,182 @@ + + + + + +
+ +
+
+ +
+
Messages
+
+ +
+
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+ + + + +
+
+ + + + + +
+ + +
+
+ + + + + +
+ +
+
+ +
+
+
+ {{ message.time | date: "MMM dd, h:mm a" }} +
+
+
+
+ + + +
+
+ +
+
+ No messages +
+
+ When you have messages, they will appear here. +
+
+
+
+
+
diff --git a/src/app/layout/common/messages/messages.component.ts b/src/app/layout/common/messages/messages.component.ts new file mode 100644 index 0000000..f8340ab --- /dev/null +++ b/src/app/layout/common/messages/messages.component.ts @@ -0,0 +1,218 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + OnDestroy, + OnInit, + TemplateRef, + ViewChild, + ViewContainerRef, + ViewEncapsulation, +} from '@angular/core'; +import { Overlay, OverlayRef } from '@angular/cdk/overlay'; +import { TemplatePortal } from '@angular/cdk/portal'; +import { MatButton } from '@angular/material/button'; +import { Subject, takeUntil } from 'rxjs'; +import { Message } from 'app/layout/common/messages/messages.types'; +import { MessagesService } from 'app/layout/common/messages/messages.service'; + +@Component({ + selector: 'messages', + templateUrl: './messages.component.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + exportAs: 'messages', +}) +export class MessagesComponent implements OnInit, OnDestroy { + @ViewChild('messagesOrigin') private _messagesOrigin!: MatButton; + @ViewChild('messagesPanel') private _messagesPanel!: TemplateRef; + + messages?: Message[]; + unreadCount: number = 0; + private _overlayRef?: OverlayRef; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _messagesService: MessagesService, + private _overlay: Overlay, + private _viewContainerRef: ViewContainerRef + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to message changes + this._messagesService.messages$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((messages: Message[]) => { + // Load the messages + this.messages = messages; + + // Calculate the unread count + this._calculateUnreadCount(); + + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + + // Dispose the overlay + if (this._overlayRef) { + this._overlayRef.dispose(); + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Open the messages panel + */ + openPanel(): void { + // Return if the messages panel or its origin is not defined + if (!this._messagesPanel || !this._messagesOrigin) { + return; + } + + // Create the overlay if it doesn't exist + if (!this._overlayRef) { + this._createOverlay(); + } + + // Attach the portal to the overlay + this._overlayRef?.attach( + new TemplatePortal(this._messagesPanel, this._viewContainerRef) + ); + } + + /** + * Close the messages panel + */ + closePanel(): void { + this._overlayRef?.detach(); + } + + /** + * Mark all messages as read + */ + markAllAsRead(): void { + // Mark all as read + this._messagesService.markAllAsRead().subscribe(); + } + + /** + * Toggle read status of the given message + */ + toggleRead(message: Message): void { + // Toggle the read status + message.read = !message.read; + + // Update the message + this._messagesService.update(message.id, message).subscribe(); + } + + /** + * Delete the given message + */ + delete(message: Message): void { + // Delete the message + this._messagesService.delete(message.id).subscribe(); + } + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Create the overlay + */ + private _createOverlay(): void { + // Create the overlay + this._overlayRef = this._overlay.create({ + hasBackdrop: true, + backdropClass: 'fuse-backdrop-on-mobile', + scrollStrategy: this._overlay.scrollStrategies.block(), + positionStrategy: this._overlay + .position() + .flexibleConnectedTo(this._messagesOrigin._elementRef.nativeElement) + .withLockedPosition(true) + .withPush(true) + .withPositions([ + { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top', + }, + { + originX: 'start', + originY: 'top', + overlayX: 'start', + overlayY: 'bottom', + }, + { + originX: 'end', + originY: 'bottom', + overlayX: 'end', + overlayY: 'top', + }, + { + originX: 'end', + originY: 'top', + overlayX: 'end', + overlayY: 'bottom', + }, + ]), + }); + + // Detach the overlay from the portal on backdrop click + this._overlayRef.backdropClick().subscribe(() => { + this._overlayRef?.detach(); + }); + } + + /** + * Calculate the unread count + * + * @private + */ + private _calculateUnreadCount(): void { + let count = 0; + + if (this.messages && this.messages.length) { + count = this.messages.filter( + (message, index, array) => !message.read + ).length; + } + + this.unreadCount = count; + } +} diff --git a/src/app/layout/common/messages/messages.module.ts b/src/app/layout/common/messages/messages.module.ts new file mode 100644 index 0000000..ada68d9 --- /dev/null +++ b/src/app/layout/common/messages/messages.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { OverlayModule } from '@angular/cdk/overlay'; +import { PortalModule } from '@angular/cdk/portal'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MessagesComponent } from 'app/layout/common/messages/messages.component'; +import { SharedModule } from 'app/shared/shared.module'; + +@NgModule({ + declarations: [MessagesComponent], + imports: [ + RouterModule, + OverlayModule, + PortalModule, + MatButtonModule, + MatIconModule, + MatTooltipModule, + SharedModule, + ], + exports: [MessagesComponent], +}) +export class MessagesModule {} diff --git a/src/app/layout/common/messages/messages.service.ts b/src/app/layout/common/messages/messages.service.ts new file mode 100644 index 0000000..b74b7ca --- /dev/null +++ b/src/app/layout/common/messages/messages.service.ts @@ -0,0 +1,155 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs'; +import { Message } from 'app/layout/common/messages/messages.types'; + +@Injectable({ + providedIn: 'root', +}) +export class MessagesService { + private _messages: ReplaySubject = new ReplaySubject(1); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for messages + */ + get messages$(): Observable { + return this._messages.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get all messages + */ + getAll(): Observable { + return this._httpClient.get('api/common/messages').pipe( + tap((messages) => { + this._messages.next(messages); + }) + ); + } + + /** + * Create a message + * + * @param message + */ + create(message: Message): Observable { + return this.messages$.pipe( + take(1), + switchMap((messages: any) => + this._httpClient.post('api/common/messages', { message }).pipe( + map((newMessage) => { + // Update the messages with the new message + this._messages.next([...messages, newMessage]); + + // Return the new message from observable + return newMessage; + }) + ) + ) + ); + } + + /** + * Update the message + * + * @param id + * @param message + */ + update(id: string, message: Message): Observable { + return this.messages$.pipe( + take(1), + switchMap((messages: any) => + this._httpClient + .patch('api/common/messages', { + id, + message, + }) + .pipe( + map((updatedMessage: Message) => { + // Find the index of the updated message + const index = messages.findIndex((item: any) => item.id === id); + + // Update the message + messages[index] = updatedMessage; + + // Update the messages + this._messages.next(messages); + + // Return the updated message + return updatedMessage; + }) + ) + ) + ); + } + + /** + * Delete the message + * + * @param id + */ + delete(id: string): Observable { + return this.messages$.pipe( + take(1), + switchMap((messages: any) => + this._httpClient + .delete('api/common/messages', { params: { id } }) + .pipe( + map((isDeleted: boolean) => { + // Find the index of the deleted message + const index = messages.findIndex((item: any) => item.id === id); + + // Delete the message + messages.splice(index, 1); + + // Update the messages + this._messages.next(messages); + + // Return the deleted status + return isDeleted; + }) + ) + ) + ); + } + + /** + * Mark all messages as read + */ + markAllAsRead(): Observable { + return this.messages$.pipe( + take(1), + switchMap((messages: any) => + this._httpClient + .get('api/common/messages/mark-all-as-read') + .pipe( + map((isUpdated: boolean) => { + // Go through all messages and set them as read + messages.forEach((message: any, index: any) => { + messages[index].read = true; + }); + + // Update the messages + this._messages.next(messages); + + // Return the updated status + return isUpdated; + }) + ) + ) + ); + } +} diff --git a/src/app/layout/common/messages/messages.types.ts b/src/app/layout/common/messages/messages.types.ts new file mode 100644 index 0000000..d36108f --- /dev/null +++ b/src/app/layout/common/messages/messages.types.ts @@ -0,0 +1,11 @@ +export interface Message { + id: string; + icon?: string; + image?: string; + title?: string; + description?: string; + time: string; + link?: string; + useRouter?: boolean; + read: boolean; +} diff --git a/src/app/layout/common/notifications/notifications.component.html b/src/app/layout/common/notifications/notifications.component.html new file mode 100644 index 0000000..8971dde --- /dev/null +++ b/src/app/layout/common/notifications/notifications.component.html @@ -0,0 +1,195 @@ + + + + + +
+ +
+
+ +
+
Notifications
+
+ +
+
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+ + + + +
+
+ + + + + +
+ + +
+
+ + + + + +
+ +
+
+ +
+
+
+ {{ notification.time | date: "MMM dd, h:mm a" }} +
+
+
+
+ + + +
+
+ +
+
+ No notifications +
+
+ When you have notifications, they will appear here. +
+
+
+
+
+
diff --git a/src/app/layout/common/notifications/notifications.component.ts b/src/app/layout/common/notifications/notifications.component.ts new file mode 100644 index 0000000..cdeebab --- /dev/null +++ b/src/app/layout/common/notifications/notifications.component.ts @@ -0,0 +1,223 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + OnDestroy, + OnInit, + TemplateRef, + ViewChild, + ViewContainerRef, + ViewEncapsulation, +} from '@angular/core'; +import { Overlay, OverlayRef } from '@angular/cdk/overlay'; +import { TemplatePortal } from '@angular/cdk/portal'; +import { MatButton } from '@angular/material/button'; +import { Subject, takeUntil } from 'rxjs'; +import { Notification } from 'app/layout/common/notifications/notifications.types'; +import { NotificationsService } from 'app/layout/common/notifications/notifications.service'; + +@Component({ + selector: 'notifications', + templateUrl: './notifications.component.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + exportAs: 'notifications', +}) +export class NotificationsComponent implements OnInit, OnDestroy { + @ViewChild('notificationsOrigin') private _notificationsOrigin!: MatButton; + @ViewChild('notificationsPanel') + private _notificationsPanel!: TemplateRef; + + notifications!: Notification[]; + unreadCount: number = 0; + private _overlayRef?: OverlayRef; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _notificationsService: NotificationsService, + private _overlay: Overlay, + private _viewContainerRef: ViewContainerRef + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to notification changes + this._notificationsService.notifications$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((notifications: Notification[]) => { + // Load the notifications + this.notifications = notifications; + + // Calculate the unread count + this._calculateUnreadCount(); + + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + + // Dispose the overlay + if (this._overlayRef) { + this._overlayRef.dispose(); + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Open the notifications panel + */ + openPanel(): void { + // Return if the notifications panel or its origin is not defined + if (!this._notificationsPanel || !this._notificationsOrigin) { + return; + } + + // Create the overlay if it doesn't exist + if (!this._overlayRef) { + this._createOverlay(); + } + + // Attach the portal to the overlay + this._overlayRef?.attach( + new TemplatePortal(this._notificationsPanel, this._viewContainerRef) + ); + } + + /** + * Close the notifications panel + */ + closePanel(): void { + this._overlayRef?.detach(); + } + + /** + * Mark all notifications as read + */ + markAllAsRead(): void { + // Mark all as read + this._notificationsService.markAllAsRead().subscribe(); + } + + /** + * Toggle read status of the given notification + */ + toggleRead(notification: Notification): void { + // Toggle the read status + notification.read = !notification.read; + + // Update the notification + this._notificationsService + .update(notification.id, notification) + .subscribe(); + } + + /** + * Delete the given notification + */ + delete(notification: Notification): void { + // Delete the notification + this._notificationsService.delete(notification.id).subscribe(); + } + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Create the overlay + */ + private _createOverlay(): void { + // Create the overlay + this._overlayRef = this._overlay.create({ + hasBackdrop: true, + backdropClass: 'fuse-backdrop-on-mobile', + scrollStrategy: this._overlay.scrollStrategies.block(), + positionStrategy: this._overlay + .position() + .flexibleConnectedTo( + this._notificationsOrigin._elementRef.nativeElement + ) + .withLockedPosition(true) + .withPush(true) + .withPositions([ + { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top', + }, + { + originX: 'start', + originY: 'top', + overlayX: 'start', + overlayY: 'bottom', + }, + { + originX: 'end', + originY: 'bottom', + overlayX: 'end', + overlayY: 'top', + }, + { + originX: 'end', + originY: 'top', + overlayX: 'end', + overlayY: 'bottom', + }, + ]), + }); + + // Detach the overlay from the portal on backdrop click + this._overlayRef.backdropClick().subscribe(() => { + this._overlayRef?.detach(); + }); + } + + /** + * Calculate the unread count + * + * @private + */ + private _calculateUnreadCount(): void { + let count = 0; + + if (this.notifications && this.notifications.length) { + count = this.notifications.filter( + (notification, index, array) => !notification.read + ).length; + } + + this.unreadCount = count; + } +} diff --git a/src/app/layout/common/notifications/notifications.module.ts b/src/app/layout/common/notifications/notifications.module.ts new file mode 100644 index 0000000..37a0e49 --- /dev/null +++ b/src/app/layout/common/notifications/notifications.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { OverlayModule } from '@angular/cdk/overlay'; +import { PortalModule } from '@angular/cdk/portal'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { NotificationsComponent } from 'app/layout/common/notifications/notifications.component'; +import { SharedModule } from 'app/shared/shared.module'; + +@NgModule({ + declarations: [NotificationsComponent], + imports: [ + RouterModule, + OverlayModule, + PortalModule, + MatButtonModule, + MatIconModule, + MatTooltipModule, + SharedModule, + ], + exports: [NotificationsComponent], +}) +export class NotificationsModule {} diff --git a/src/app/layout/common/notifications/notifications.service.ts b/src/app/layout/common/notifications/notifications.service.ts new file mode 100644 index 0000000..09f918a --- /dev/null +++ b/src/app/layout/common/notifications/notifications.service.ts @@ -0,0 +1,165 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs'; +import { Notification } from 'app/layout/common/notifications/notifications.types'; + +@Injectable({ + providedIn: 'root', +}) +export class NotificationsService { + private _notifications: ReplaySubject = new ReplaySubject< + Notification[] + >(1); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for notifications + */ + get notifications$(): Observable { + return this._notifications.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get all notifications + */ + getAll(): Observable { + return this._httpClient + .get('api/common/notifications') + .pipe( + tap((notifications) => { + this._notifications.next(notifications); + }) + ); + } + + /** + * Create a notification + * + * @param notification + */ + create(notification: Notification): Observable { + return this.notifications$.pipe( + take(1), + switchMap((notifications: any) => + this._httpClient + .post('api/common/notifications', { notification }) + .pipe( + map((newNotification) => { + // Update the notifications with the new notification + this._notifications.next([...notifications, newNotification]); + + // Return the new notification from observable + return newNotification; + }) + ) + ) + ); + } + + /** + * Update the notification + * + * @param id + * @param notification + */ + update(id: string, notification: Notification): Observable { + return this.notifications$.pipe( + take(1), + switchMap((notifications: any) => + this._httpClient + .patch('api/common/notifications', { + id, + notification, + }) + .pipe( + map((updatedNotification: Notification) => { + // Find the index of the updated notification + const index = notifications.findIndex( + (item: any) => item.id === id + ); + + // Update the notification + notifications[index] = updatedNotification; + + // Update the notifications + this._notifications.next(notifications); + + // Return the updated notification + return updatedNotification; + }) + ) + ) + ); + } + + /** + * Delete the notification + * + * @param id + */ + delete(id: string): Observable { + return this.notifications$.pipe( + take(1), + switchMap((notifications: any) => + this._httpClient + .delete('api/common/notifications', { params: { id } }) + .pipe( + map((isDeleted: boolean) => { + // Find the index of the deleted notification + const index = notifications.findIndex( + (item: any) => item.id === id + ); + + // Delete the notification + notifications.splice(index, 1); + + // Update the notifications + this._notifications.next(notifications); + + // Return the deleted status + return isDeleted; + }) + ) + ) + ); + } + + /** + * Mark all notifications as read + */ + markAllAsRead(): Observable { + return this.notifications$.pipe( + take(1), + switchMap((notifications: any) => + this._httpClient + .get('api/common/notifications/mark-all-as-read') + .pipe( + map((isUpdated: boolean) => { + // Go through all notifications and set them as read + notifications.forEach((notification: any, index: any) => { + notifications[index].read = true; + }); + + // Update the notifications + this._notifications.next(notifications); + + // Return the updated status + return isUpdated; + }) + ) + ) + ); + } +} diff --git a/src/app/layout/common/notifications/notifications.types.ts b/src/app/layout/common/notifications/notifications.types.ts new file mode 100644 index 0000000..e1e6fed --- /dev/null +++ b/src/app/layout/common/notifications/notifications.types.ts @@ -0,0 +1,11 @@ +export interface Notification { + id: string; + icon?: string; + image?: string; + title?: string; + description?: string; + time: string; + link?: string; + useRouter?: boolean; + read: boolean; +} diff --git a/src/app/layout/common/quick-chat/quick-chat.component.html b/src/app/layout/common/quick-chat/quick-chat.component.html new file mode 100644 index 0000000..342513c --- /dev/null +++ b/src/app/layout/common/quick-chat/quick-chat.component.html @@ -0,0 +1,308 @@ +
+
+ +
+ + +
+
+ +
+
Team Chat
+ +
+
+ + + +
+
+ + Contact avatar + + +
+ {{ chat?.contact?.name?.charAt(0) }} +
+
+
+
+ {{ chat?.contact?.name }} +
+ +
+
+
+ + +
+ +
+
+ +
+
+ +
+
+ + Contact avatar + + +
+ {{ chat.contact?.name?.charAt(0) }} +
+
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ {{ message.createdAt | date: "longDate" }} +
+
+
+
+
+ +
+ + +
+ +
+
+ +
+
+ + +
+ {{ message.createdAt | date: "HH:mm" }} +
+
+
+
+
+
+ + +
+ + + +
+ +
+
+
+
+
+
+
+ + + +
+ +
+ Select a conversation +
+
+
+ + + + + + + + + + + diff --git a/src/app/layout/common/quick-chat/quick-chat.component.scss b/src/app/layout/common/quick-chat/quick-chat.component.scss new file mode 100644 index 0000000..d10b1e0 --- /dev/null +++ b/src/app/layout/common/quick-chat/quick-chat.component.scss @@ -0,0 +1,58 @@ +quick-chat { + z-index: 399; + + > div { + overflow: hidden; + } + + &.quick-chat-opened { + + > div { + overflow: visible; + } + } + + &:not(.quick-chat-opened) { + + > div { + overflow: visible; + animation: addOverflowHidden 1ms linear 400ms; + animation-fill-mode: forwards; + } + } +} + +/* Adjustments depending on the selected layout */ +.quick-chat-header { + height: 64px; + + enterprise-layout &, + modern-layout & { + height: 80px !important; + } +} + + +/* Overlay */ +.quick-chat-overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 299; + opacity: 1; + background-color: transparent; +} + +@keyframes addOverflowHidden { + 0% { + overflow: visible + } + 99% { + overflow: visible; + } + 100% { + overflow: hidden; + } +} diff --git a/src/app/layout/common/quick-chat/quick-chat.component.ts b/src/app/layout/common/quick-chat/quick-chat.component.ts new file mode 100644 index 0000000..b587114 --- /dev/null +++ b/src/app/layout/common/quick-chat/quick-chat.component.ts @@ -0,0 +1,261 @@ +import { + Component, + ElementRef, + HostBinding, + HostListener, + NgZone, + OnDestroy, + OnInit, + Renderer2, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay'; +import { Subject, takeUntil } from 'rxjs'; +import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service'; +import { Chat } from 'app/layout/common/quick-chat/quick-chat.types'; + +@Component({ + selector: 'quick-chat', + templateUrl: './quick-chat.component.html', + styleUrls: ['./quick-chat.component.scss'], + encapsulation: ViewEncapsulation.None, + exportAs: 'quickChat', +}) +export class QuickChatComponent implements OnInit, OnDestroy { + @ViewChild('messageInput') messageInput!: ElementRef; + chat?: Chat; + chats?: Chat[]; + opened: boolean = false; + selectedChat?: Chat; + private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block(); + private _overlay?: HTMLElement; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _elementRef: ElementRef, + private _renderer2: Renderer2, + private _ngZone: NgZone, + private _quickChatService: QuickChatService, + private _scrollStrategyOptions: ScrollStrategyOptions + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Decorated methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Host binding for component classes + */ + @HostBinding('class') get classList(): any { + return { + 'quick-chat-opened': this.opened, + }; + } + + /** + * Resize on 'input' and 'ngModelChange' events + * + * @private + */ + @HostListener('input') + @HostListener('ngModelChange') + private _resizeMessageInput(): void { + // This doesn't need to trigger Angular's change detection by itself + this._ngZone.runOutsideAngular(() => { + setTimeout(() => { + // Set the height to 'auto' so we can correctly read the scrollHeight + this.messageInput.nativeElement.style.height = 'auto'; + + // Get the scrollHeight and subtract the vertical padding + this.messageInput.nativeElement.style.height = `${this.messageInput?.nativeElement.scrollHeight}px`; + }); + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Chat + this._quickChatService.chat$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((chat?: Chat) => { + this.chat = chat; + }); + + // Chats + this._quickChatService.chats$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((chats: Chat[]) => { + this.chats = chats; + }); + + // Selected chat + this._quickChatService.chat$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((chat?: Chat) => { + this.selectedChat = chat; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Open the panel + */ + open(): void { + // Return if the panel has already opened + if (this.opened) { + return; + } + + // Open the panel + this._toggleOpened(true); + } + + /** + * Close the panel + */ + close(): void { + // Return if the panel has already closed + if (!this.opened) { + return; + } + + // Close the panel + this._toggleOpened(false); + } + + /** + * Toggle the panel + */ + toggle(): void { + if (this.opened) { + this.close(); + } else { + this.open(); + } + } + + /** + * Select the chat + * + * @param id + */ + selectChat(id: string): void { + // Open the panel + this._toggleOpened(true); + + // Get the chat data + this._quickChatService.getChatById(id).subscribe(); + } + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Show the backdrop + * + * @private + */ + private _showOverlay(): void { + // Try hiding the overlay in case there is one already opened + this._hideOverlay(); + + // Create the backdrop element + this._overlay = this._renderer2.createElement('div'); + + // Return if overlay couldn't be create for some reason + if (!this._overlay) { + return; + } + + // Add a class to the backdrop element + this._overlay.classList.add('quick-chat-overlay'); + + // Append the backdrop to the parent of the panel + this._renderer2.appendChild( + this._elementRef.nativeElement.parentElement, + this._overlay + ); + + // Enable block scroll strategy + this._scrollStrategy.enable(); + + // Add an event listener to the overlay + this._overlay.addEventListener('click', () => { + this.close(); + }); + } + + /** + * Hide the backdrop + * + * @private + */ + private _hideOverlay(): void { + if (!this._overlay) { + return; + } + + // If the backdrop still exists... + if (this._overlay) { + // Remove the backdrop + this._overlay.parentNode?.removeChild(this._overlay); + this._overlay = undefined; + } + + // Disable block scroll strategy + this._scrollStrategy.disable(); + } + + /** + * Open/close the panel + * + * @param open + * @private + */ + private _toggleOpened(open: boolean): void { + // Set the opened + this.opened = open; + + // If the panel opens, show the overlay + if (open) { + this._showOverlay(); + } + // Otherwise, hide the overlay + else { + this._hideOverlay(); + } + } +} diff --git a/src/app/layout/common/quick-chat/quick-chat.module.ts b/src/app/layout/common/quick-chat/quick-chat.module.ts new file mode 100644 index 0000000..5f94581 --- /dev/null +++ b/src/app/layout/common/quick-chat/quick-chat.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { FuseDrawerModule } from '@fuse/components/drawer'; +import { FuseScrollbarModule } from '@fuse/directives/scrollbar'; +import { SharedModule } from 'app/shared/shared.module'; +import { QuickChatComponent } from 'app/layout/common/quick-chat/quick-chat.component'; + +@NgModule({ + declarations: [QuickChatComponent], + imports: [ + RouterModule, + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + FuseDrawerModule, + FuseScrollbarModule, + SharedModule, + ], + exports: [QuickChatComponent], +}) +export class QuickChatModule {} diff --git a/src/app/layout/common/quick-chat/quick-chat.service.ts b/src/app/layout/common/quick-chat/quick-chat.service.ts new file mode 100644 index 0000000..7451649 --- /dev/null +++ b/src/app/layout/common/quick-chat/quick-chat.service.ts @@ -0,0 +1,84 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { + BehaviorSubject, + map, + Observable, + of, + switchMap, + tap, + throwError, +} from 'rxjs'; +import { Chat } from 'app/layout/common/quick-chat/quick-chat.types'; + +@Injectable({ + providedIn: 'root', +}) +export class QuickChatService { + private _chat = new BehaviorSubject(undefined); + private _chats = new BehaviorSubject([]); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for chat + */ + get chat$(): Observable { + return this._chat.asObservable(); + } + + /** + * Getter for chat + */ + get chats$(): Observable { + return this._chats.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get chats + */ + getChats(): Observable { + return this._httpClient.get('api/apps/chat/chats').pipe( + tap((response: Chat[]) => { + this._chats.next(response); + }) + ); + } + + /** + * Get chat + * + * @param id + */ + getChatById(id: string): Observable { + return this._httpClient + .get('api/apps/chat/chat', { params: { id } }) + .pipe( + map((chat) => { + // Update the chat + this._chat.next(chat); + + // Return the chat + return chat; + }), + switchMap((chat) => { + if (!chat) { + return throwError('Could not found chat with id of ' + id + '!'); + } + + return of(chat); + }) + ); + } +} diff --git a/src/app/layout/common/quick-chat/quick-chat.types.ts b/src/app/layout/common/quick-chat/quick-chat.types.ts new file mode 100644 index 0000000..b8f83f2 --- /dev/null +++ b/src/app/layout/common/quick-chat/quick-chat.types.ts @@ -0,0 +1,44 @@ +export interface Chat { + id?: string; + contactId?: string; + contact?: Contact; + unreadCount?: number; + muted?: boolean; + lastMessage?: string; + lastMessageAt?: string; + messages?: { + id?: string; + chatId?: string; + contactId?: string; + isMine?: boolean; + value?: string; + createdAt?: string; + }[]; +} + +export interface Contact { + id?: string; + avatar?: string; + name?: string; + about?: string; + details?: { + emails?: { + email?: string; + label?: string; + }[]; + phoneNumbers?: { + country?: string; + phoneNumber?: string; + label?: string; + }[]; + title?: string; + company?: string; + birthday?: string; + address?: string; + }; + attachments?: { + media?: any[]; + docs?: any[]; + links?: any[]; + }; +} diff --git a/src/app/layout/common/search/search.component.html b/src/app/layout/common/search/search.component.html new file mode 100644 index 0000000..12dd485 --- /dev/null +++ b/src/app/layout/common/search/search.component.html @@ -0,0 +1,198 @@ + + + +
+ + + + + No results found! + + + + {{ + resultSet.label.toUpperCase() + }} + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+ + + + + + + No results found! + + + + {{ + resultSet.label.toUpperCase() + }} + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ + +
+
+ +
+
+
+ + + +
+
+
+ {{ result.link }} +
+
+
+ + + +
+ + + + + + +
+
+
diff --git a/src/app/layout/common/search/search.component.ts b/src/app/layout/common/search/search.component.ts new file mode 100644 index 0000000..b57dfb3 --- /dev/null +++ b/src/app/layout/common/search/search.component.ts @@ -0,0 +1,206 @@ +import { + Component, + ElementRef, + EventEmitter, + HostBinding, + Input, + OnChanges, + OnDestroy, + OnInit, + Output, + Renderer2, + SimpleChanges, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { FormControl } from '@angular/forms'; +import { HttpClient } from '@angular/common/http'; +import { debounceTime, filter, map, Subject, takeUntil } from 'rxjs'; +import { fuseAnimations } from '@fuse/animations/public-api'; + +@Component({ + selector: 'search', + templateUrl: './search.component.html', + encapsulation: ViewEncapsulation.None, + exportAs: 'fuseSearch', + animations: fuseAnimations, +}) +export class SearchComponent implements OnChanges, OnInit, OnDestroy { + @Input() appearance: 'basic' | 'bar' = 'basic'; + @Input() debounce: number = 300; + @Input() minLength: number = 2; + @Output() search: EventEmitter = new EventEmitter(); + + opened: boolean = false; + resultSets: any[] = []; + searchControl: FormControl = new FormControl(); + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _elementRef: ElementRef, + private _httpClient: HttpClient, + private _renderer2: Renderer2 + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Host binding for component classes + */ + @HostBinding('class') get classList(): any { + return { + 'search-appearance-bar': this.appearance === 'bar', + 'search-appearance-basic': this.appearance === 'basic', + 'search-opened': this.opened, + }; + } + + /** + * Setter for bar search input + * + * @param value + */ + @ViewChild('barSearchInput') + set barSearchInput(value: ElementRef) { + // If the value exists, it means that the search input + // is now in the DOM and we can focus on the input.. + if (value) { + // Give Angular time to complete the change detection cycle + setTimeout(() => { + // Focus to the input element + value.nativeElement.focus(); + }); + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: SimpleChanges): void { + // Appearance + if ('appearance' in changes) { + // To prevent any issues, close the + // search after changing the appearance + this.close(); + } + } + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to the search field value changes + this.searchControl.valueChanges + .pipe( + debounceTime(this.debounce), + takeUntil(this._unsubscribeAll), + map((value) => { + // Set the resultSets to null if there is no value or + // the length of the value is smaller than the minLength + // so the autocomplete panel can be closed + if (!value || value.length < this.minLength) { + this.resultSets = []; + } + + // Continue + return value; + }), + // Filter out undefined/null/false statements and also + // filter out the values that are smaller than minLength + filter((value: any) => value && value.length >= this.minLength) + ) + .subscribe((value) => { + this._httpClient + .post('api/common/search', { query: value }) + .subscribe((resultSets: any) => { + // Store the result sets + this.resultSets = resultSets; + + // Execute the event + this.search.next(resultSets); + }); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On keydown of the search input + * + * @param event + */ + onKeydown(event: KeyboardEvent): void { + // Listen for escape to close the search + // if the appearance is 'bar' + if (this.appearance === 'bar') { + // Escape + if (event.code === 'Escape') { + // Close the search + this.close(); + } + } + } + + /** + * Open the search + * Used in 'bar' + */ + open(): void { + // Return if it's already opened + if (this.opened) { + return; + } + + // Open the search + this.opened = true; + } + + /** + * Close the search + * * Used in 'bar' + */ + close(): void { + // Return if it's already closed + if (!this.opened) { + return; + } + + // Clear the search input + this.searchControl.setValue(''); + + // Close the search + this.opened = false; + } + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } +} diff --git a/src/app/layout/common/search/search.module.ts b/src/app/layout/common/search/search.module.ts new file mode 100644 index 0000000..47a41db --- /dev/null +++ b/src/app/layout/common/search/search.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { BlockScrollStrategy, Overlay } from '@angular/cdk/overlay'; +import { + MAT_AUTOCOMPLETE_SCROLL_STRATEGY, + MatAutocompleteModule, +} from '@angular/material/autocomplete'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { SharedModule } from 'app/shared/shared.module'; +import { SearchComponent } from 'app/layout/common/search/search.component'; + +@NgModule({ + declarations: [SearchComponent], + imports: [ + RouterModule.forChild([]), + MatAutocompleteModule, + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + SharedModule, + ], + exports: [SearchComponent], + providers: [ + { + provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY, + useFactory: (overlay: Overlay) => (): BlockScrollStrategy => + overlay.scrollStrategies.block(), + deps: [Overlay], + }, + ], +}) +export class SearchModule {} diff --git a/src/app/layout/common/settings/settings.component.html b/src/app/layout/common/settings/settings.component.html new file mode 100644 index 0000000..47776b6 --- /dev/null +++ b/src/app/layout/common/settings/settings.component.html @@ -0,0 +1,661 @@ +
+ +
+ + +
+
+ +
Settings
+ +
+ +
+ +
THEME
+
+ +
+
+
+ {{ theme.name }} +
+
+
+
+ +
+ + +
SCHEME
+
+ +
+
+ +
+
+ Auto +
+
+ +
+
+ +
+
+ Dark +
+
+ +
+
+ +
+
+ Light +
+
+
+ +
+ + +
LAYOUT
+
+ +
+
+
+
+
+ Empty +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Classic +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Classy +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Compact +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dense +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Futuristic +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Thin +
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Centered +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enterprise +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Material +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Modern +
+
+
+
+
+
diff --git a/src/app/layout/common/settings/settings.component.ts b/src/app/layout/common/settings/settings.component.ts new file mode 100644 index 0000000..5a47af3 --- /dev/null +++ b/src/app/layout/common/settings/settings.component.ts @@ -0,0 +1,106 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseConfigService } from '@fuse/services/config'; +import { AppConfig, Scheme, Theme, Themes } from 'app/core/config/app.config'; +import { Layout } from 'app/layout/layout.types'; + +@Component({ + selector: 'settings', + templateUrl: './settings.component.html', + styles: [ + ` + settings { + position: static; + display: block; + flex: none; + width: auto; + } + `, + ], + encapsulation: ViewEncapsulation.None, +}) +export class SettingsComponent implements OnInit, OnDestroy { + config?: AppConfig; + layout?: Layout; + scheme?: 'dark' | 'light'; + theme?: string; + themes?: Themes; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _router: Router, + private _fuseConfigService: FuseConfigService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to config changes + this._fuseConfigService.config$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config: AppConfig) => { + // Store the config + this.config = config; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Set the layout on the config + * + * @param layout + */ + setLayout(layout: string): void { + // Clear the 'layout' query param to allow layout changes + this._router + .navigate([], { + queryParams: { + layout: null, + }, + queryParamsHandling: 'merge', + }) + .then(() => { + // Set the config + this._fuseConfigService.config = { layout }; + }); + } + + /** + * Set the scheme on the config + * + * @param scheme + */ + setScheme(scheme: Scheme): void { + this._fuseConfigService.config = { scheme }; + } + + /** + * Set the theme on the config + * + * @param theme + */ + setTheme(theme: Theme): void { + this._fuseConfigService.config = { theme }; + } +} diff --git a/src/app/layout/common/settings/settings.module.ts b/src/app/layout/common/settings/settings.module.ts new file mode 100644 index 0000000..e60d6fc --- /dev/null +++ b/src/app/layout/common/settings/settings.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { FuseDrawerModule } from '@fuse/components/drawer'; +import { SettingsComponent } from 'app/layout/common/settings/settings.component'; +import { MatButtonModule } from '@angular/material/button'; + +@NgModule({ + declarations: [SettingsComponent], + imports: [ + CommonModule, + RouterModule, + MatIconModule, + MatTooltipModule, + FuseDrawerModule, + MatButtonModule, + ], + exports: [SettingsComponent], +}) +export class SettingsModule {} diff --git a/src/app/layout/common/shortcuts/shortcuts.component.html b/src/app/layout/common/shortcuts/shortcuts.component.html new file mode 100644 index 0000000..6c7ca5b --- /dev/null +++ b/src/app/layout/common/shortcuts/shortcuts.component.html @@ -0,0 +1,241 @@ + + + + + +
+ +
+
+ +
+
+ Shortcuts + + + - Add new + - Editing + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + +
+ + +
+ +
+
+ + + + + + + + + + +
+ + +
+
{{ shortcut.label }}
+
+ {{ shortcut.description }} +
+
+
+
+
+ + + +
+
+ +
+
+ No shortcuts +
+
+ When you have shortcuts, they will appear here. +
+
+
+
+ + + +
+ + Label + + + + Description + + + + Icon + + + + Link + + + + Use router for the link + + +
+ + +
+
+
+
+
+
diff --git a/src/app/layout/common/shortcuts/shortcuts.component.ts b/src/app/layout/common/shortcuts/shortcuts.component.ts new file mode 100644 index 0000000..bdda218 --- /dev/null +++ b/src/app/layout/common/shortcuts/shortcuts.component.ts @@ -0,0 +1,251 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + OnDestroy, + OnInit, + TemplateRef, + ViewChild, + ViewContainerRef, + ViewEncapsulation, +} from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Overlay, OverlayRef } from '@angular/cdk/overlay'; +import { TemplatePortal } from '@angular/cdk/portal'; +import { MatButton } from '@angular/material/button'; +import { Subject, takeUntil } from 'rxjs'; +import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types'; +import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service'; + +@Component({ + selector: 'shortcuts', + templateUrl: './shortcuts.component.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + exportAs: 'shortcuts', +}) +export class ShortcutsComponent implements OnInit, OnDestroy { + @ViewChild('shortcutsOrigin') private _shortcutsOrigin!: MatButton; + @ViewChild('shortcutsPanel') private _shortcutsPanel!: TemplateRef; + + mode: 'view' | 'modify' | 'add' | 'edit' = 'view'; + shortcutForm!: FormGroup; + shortcuts?: Shortcut[]; + private _overlayRef?: OverlayRef; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _formBuilder: FormBuilder, + private _shortcutsService: ShortcutsService, + private _overlay: Overlay, + private _viewContainerRef: ViewContainerRef + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Initialize the form + this.shortcutForm = this._formBuilder.group({ + id: [null], + label: ['', Validators.required], + description: [''], + icon: ['', Validators.required], + link: ['', Validators.required], + useRouter: ['', Validators.required], + }); + + // Get the shortcuts + this._shortcutsService.shortcuts$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((shortcuts: Shortcut[]) => { + // Load the shortcuts + this.shortcuts = shortcuts; + + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + + // Dispose the overlay + if (this._overlayRef) { + this._overlayRef.dispose(); + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Open the shortcuts panel + */ + openPanel(): void { + // Return if the shortcuts panel or its origin is not defined + if (!this._shortcutsPanel || !this._shortcutsOrigin) { + return; + } + + // Make sure to start in 'view' mode + this.mode = 'view'; + + // Create the overlay if it doesn't exist + if (!this._overlayRef) { + this._createOverlay(); + } + + // Attach the portal to the overlay + this._overlayRef?.attach( + new TemplatePortal(this._shortcutsPanel, this._viewContainerRef) + ); + } + + /** + * Close the shortcuts panel + */ + closePanel(): void { + this._overlayRef?.detach(); + } + + /** + * Change the mode + */ + changeMode(mode: 'view' | 'modify' | 'add' | 'edit'): void { + // Change the mode + this.mode = mode; + } + + /** + * Prepare for a new shortcut + */ + newShortcut(): void { + // Reset the form + this.shortcutForm?.reset(); + + // Enter the add mode + this.mode = 'add'; + } + + /** + * Edit a shortcut + */ + editShortcut(shortcut: Shortcut): void { + // Reset the form with the shortcut + this.shortcutForm?.reset(shortcut); + + // Enter the edit mode + this.mode = 'edit'; + } + + /** + * Save shortcut + */ + save(): void { + // Get the data from the form + const shortcut = this.shortcutForm?.value; + + // If there is an id, update it... + if (shortcut.id) { + this._shortcutsService.update(shortcut.id, shortcut).subscribe(); + } + // Otherwise, create a new shortcut... + else { + this._shortcutsService.create(shortcut).subscribe(); + } + + // Go back the modify mode + this.mode = 'modify'; + } + + /** + * Delete shortcut + */ + delete(): void { + // Get the data from the form + const shortcut = this.shortcutForm?.value; + + // Delete + this._shortcutsService.delete(shortcut.id).subscribe(); + + // Go back the modify mode + this.mode = 'modify'; + } + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + trackByFn(index: number, item: any): any { + return item.id || index; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Create the overlay + */ + private _createOverlay(): void { + // Create the overlay + this._overlayRef = this._overlay.create({ + hasBackdrop: true, + backdropClass: 'fuse-backdrop-on-mobile', + scrollStrategy: this._overlay.scrollStrategies.block(), + positionStrategy: this._overlay + .position() + .flexibleConnectedTo(this._shortcutsOrigin?._elementRef.nativeElement) + .withLockedPosition(true) + .withPush(true) + .withPositions([ + { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top', + }, + { + originX: 'start', + originY: 'top', + overlayX: 'start', + overlayY: 'bottom', + }, + { + originX: 'end', + originY: 'bottom', + overlayX: 'end', + overlayY: 'top', + }, + { + originX: 'end', + originY: 'top', + overlayX: 'end', + overlayY: 'bottom', + }, + ]), + }); + + // Detach the overlay from the portal on backdrop click + this._overlayRef.backdropClick().subscribe(() => { + this._overlayRef?.detach(); + }); + } +} diff --git a/src/app/layout/common/shortcuts/shortcuts.module.ts b/src/app/layout/common/shortcuts/shortcuts.module.ts new file mode 100644 index 0000000..0ddfcd8 --- /dev/null +++ b/src/app/layout/common/shortcuts/shortcuts.module.ts @@ -0,0 +1,32 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ReactiveFormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; +import { OverlayModule } from '@angular/cdk/overlay'; +import { PortalModule } from '@angular/cdk/portal'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { ShortcutsComponent } from 'app/layout/common/shortcuts/shortcuts.component'; + +@NgModule({ + declarations: [ShortcutsComponent], + imports: [ + CommonModule, + ReactiveFormsModule, + RouterModule, + OverlayModule, + PortalModule, + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatSlideToggleModule, + MatTooltipModule, + ], + exports: [ShortcutsComponent], +}) +export class ShortcutsModule {} diff --git a/src/app/layout/common/shortcuts/shortcuts.service.ts b/src/app/layout/common/shortcuts/shortcuts.service.ts new file mode 100644 index 0000000..66dd02a --- /dev/null +++ b/src/app/layout/common/shortcuts/shortcuts.service.ts @@ -0,0 +1,132 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs'; +import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types'; + +@Injectable({ + providedIn: 'root', +}) +export class ShortcutsService { + private _shortcuts: ReplaySubject = new ReplaySubject( + 1 + ); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for shortcuts + */ + get shortcuts$(): Observable { + return this._shortcuts.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get all messages + */ + getAll(): Observable { + return this._httpClient.get('api/common/shortcuts').pipe( + tap((shortcuts) => { + this._shortcuts.next(shortcuts); + }) + ); + } + + /** + * Create a shortcut + * + * @param shortcut + */ + create(shortcut: Shortcut): Observable { + return this.shortcuts$.pipe( + take(1), + switchMap((shortcuts: any) => + this._httpClient + .post('api/common/shortcuts', { shortcut }) + .pipe( + map((newShortcut) => { + // Update the shortcuts with the new shortcut + this._shortcuts.next([...shortcuts, newShortcut]); + + // Return the new shortcut from observable + return newShortcut; + }) + ) + ) + ); + } + + /** + * Update the shortcut + * + * @param id + * @param shortcut + */ + update(id: string, shortcut: Shortcut): Observable { + return this.shortcuts$.pipe( + take(1), + switchMap((shortcuts: any) => + this._httpClient + .patch('api/common/shortcuts', { + id, + shortcut, + }) + .pipe( + map((updatedShortcut: Shortcut) => { + // Find the index of the updated shortcut + const index = shortcuts.findIndex((item: any) => item.id === id); + + // Update the shortcut + shortcuts[index] = updatedShortcut; + + // Update the shortcuts + this._shortcuts.next(shortcuts); + + // Return the updated shortcut + return updatedShortcut; + }) + ) + ) + ); + } + + /** + * Delete the shortcut + * + * @param id + */ + delete(id: string): Observable { + return this.shortcuts$.pipe( + take(1), + switchMap((shortcuts: any) => + this._httpClient + .delete('api/common/shortcuts', { params: { id } }) + .pipe( + map((isDeleted: boolean) => { + // Find the index of the deleted shortcut + const index = shortcuts.findIndex((item: any) => item.id === id); + + // Delete the shortcut + shortcuts.splice(index, 1); + + // Update the shortcuts + this._shortcuts.next(shortcuts); + + // Return the deleted status + return isDeleted; + }) + ) + ) + ); + } +} diff --git a/src/app/layout/common/shortcuts/shortcuts.types.ts b/src/app/layout/common/shortcuts/shortcuts.types.ts new file mode 100644 index 0000000..58cad24 --- /dev/null +++ b/src/app/layout/common/shortcuts/shortcuts.types.ts @@ -0,0 +1,8 @@ +export interface Shortcut { + id: string; + label: string; + description?: string; + icon: string; + link: string; + useRouter: boolean; +} diff --git a/src/app/layout/common/user/user.component.html b/src/app/layout/common/user/user.component.html new file mode 100644 index 0000000..c545aa6 --- /dev/null +++ b/src/app/layout/common/user/user.component.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/app/layout/common/user/user.component.ts b/src/app/layout/common/user/user.component.ts new file mode 100644 index 0000000..e6d0486 --- /dev/null +++ b/src/app/layout/common/user/user.component.ts @@ -0,0 +1,100 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnDestroy, + OnInit, + ViewEncapsulation, +} from '@angular/core'; +import { Router } from '@angular/router'; +import { BooleanInput } from '@angular/cdk/coercion'; +import { Subject, takeUntil } from 'rxjs'; +import { User } from 'app/core/user/user.types'; +import { UserService } from 'app/core/user/user.service'; + +@Component({ + selector: 'user', + templateUrl: './user.component.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + exportAs: 'user', +}) +export class UserComponent implements OnInit, OnDestroy { + /* eslint-disable @typescript-eslint/naming-convention */ + static ngAcceptInputType_showAvatar: BooleanInput; + /* eslint-enable @typescript-eslint/naming-convention */ + + @Input() showAvatar: boolean = true; + user?: User; + + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _router: Router, + private _userService: UserService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to user changes + this._userService.user$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((user: User) => { + this.user = user; + + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Update the user status + * + * @param status + */ + updateUserStatus(status: string): void { + // Return if user is not available + if (!this.user) { + return; + } + + // Update the user + this._userService + .update({ + ...this.user, + status, + }) + .subscribe(); + } + + /** + * Sign out + */ + signOut(): void { + this._router.navigate(['/sign-out']); + } +} diff --git a/src/app/layout/common/user/user.module.ts b/src/app/layout/common/user/user.module.ts new file mode 100644 index 0000000..742397b --- /dev/null +++ b/src/app/layout/common/user/user.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { UserComponent } from 'app/layout/common/user/user.component'; +import { SharedModule } from 'app/shared/shared.module'; + +@NgModule({ + declarations: [UserComponent], + imports: [ + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + SharedModule, + ], + exports: [UserComponent], +}) +export class UserModule {} diff --git a/src/app/layout/layout.component.html b/src/app/layout/layout.component.html new file mode 100644 index 0000000..fafc008 --- /dev/null +++ b/src/app/layout/layout.component.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/layout/layout.component.scss b/src/app/layout/layout.component.scss new file mode 100644 index 0000000..584a898 --- /dev/null +++ b/src/app/layout/layout.component.scss @@ -0,0 +1,26 @@ +layout { + display: flex; + flex: 1 1 auto; + width: 100%; + max-width: 100%; + min-width: 0; + + /* Base styles for individual layouts */ + > * { + position: relative; + display: flex; + flex: 1 1 auto; + width: 100%; + } + + /* Base styles for components that load as a route */ + router-outlet { + + + * { + position: relative; + display: flex; + flex: 1 1 auto; + width: 100%; + } + } +} diff --git a/src/app/layout/layout.component.ts b/src/app/layout/layout.component.ts new file mode 100644 index 0000000..a0f7907 --- /dev/null +++ b/src/app/layout/layout.component.ts @@ -0,0 +1,218 @@ +import { + Component, + Inject, + OnDestroy, + OnInit, + Renderer2, + ViewEncapsulation, +} from '@angular/core'; +import { DOCUMENT } from '@angular/common'; +import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; +import { combineLatest, filter, map, Subject, takeUntil } from 'rxjs'; +import { FuseConfigService } from '@fuse/services/config'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { FUSE_VERSION } from '@fuse/version'; +import { Layout } from 'app/layout/layout.types'; +import { AppConfig } from 'app/core/config/app.config'; + +@Component({ + selector: 'layout', + templateUrl: './layout.component.html', + styleUrls: ['./layout.component.scss'], + encapsulation: ViewEncapsulation.None, +}) +export class LayoutComponent implements OnInit, OnDestroy { + config?: AppConfig; + layout?: Layout; + scheme?: 'dark' | 'light'; + theme?: string; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + @Inject(DOCUMENT) private _document: any, + private _renderer2: Renderer2, + private _router: Router, + private _fuseConfigService: FuseConfigService, + private _fuseMediaWatcherService: FuseMediaWatcherService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Set the theme and scheme based on the configuration + combineLatest([ + this._fuseConfigService.config$, + this._fuseMediaWatcherService.onMediaQueryChange$([ + '(prefers-color-scheme: dark)', + '(prefers-color-scheme: light)', + ]), + ]) + .pipe( + takeUntil(this._unsubscribeAll), + map(([config, mql]) => { + const options = { + scheme: config.scheme, + theme: config.theme, + }; + + // If the scheme is set to 'auto'... + if (config.scheme === 'auto') { + // Decide the scheme using the media query + options.scheme = mql.breakpoints['(prefers-color-scheme: dark)'] + ? 'dark' + : 'light'; + } + + return options; + }) + ) + .subscribe((options) => { + // Store the options + this.scheme = options.scheme; + this.theme = options.theme; + + // Update the scheme and theme + this._updateScheme(); + this._updateTheme(); + }); + + // Subscribe to config changes + this._fuseConfigService.config$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config: AppConfig) => { + // Store the config + this.config = config; + + // Update the layout + this._updateLayout(); + }); + + // Subscribe to NavigationEnd event + this._router.events + .pipe( + filter((event: any) => event instanceof NavigationEnd), + takeUntil(this._unsubscribeAll) + ) + .subscribe(() => { + // Update the layout + this._updateLayout(); + }); + + // Set the app version + this._renderer2.setAttribute( + this._document.querySelector('[ng-version]'), + 'fuse-version', + FUSE_VERSION + ); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Update the selected layout + */ + private _updateLayout(): void { + // Get the current activated route + let route = this._activatedRoute; + while (route.firstChild) { + route = route.firstChild; + } + + // 1. Set the layout from the config + this.layout = this.config?.layout; + + // 2. Get the query parameter from the current route and + // set the layout and save the layout to the config + const layoutFromQueryParam = route.snapshot.queryParamMap.get( + 'layout' + ) as Layout; + if (layoutFromQueryParam) { + this.layout = layoutFromQueryParam; + if (this.config) { + this.config.layout = layoutFromQueryParam; + } + } + + // 3. Iterate through the paths and change the layout as we find + // a config for it. + // + // The reason we do this is that there might be empty grouping + // paths or componentless routes along the path. Because of that, + // we cannot just assume that the layout configuration will be + // in the last path's config or in the first path's config. + // + // So, we get all the paths that matched starting from root all + // the way to the current activated route, walk through them one + // by one and change the layout as we find the layout config. This + // way, layout configuration can live anywhere within the path and + // we won't miss it. + // + // Also, this will allow overriding the layout in any time so we + // can have different layouts for different routes. + const paths = route.pathFromRoot; + paths.forEach((path) => { + // Check if there is a 'layout' data + if ( + path.routeConfig && + path.routeConfig.data && + path.routeConfig.data['layout'] + ) { + // Set the layout + this.layout = path.routeConfig.data['layout']; + } + }); + } + + /** + * Update the selected scheme + * + * @private + */ + private _updateScheme(): void { + // Remove class names for all schemes + this._document.body.classList.remove('light', 'dark'); + + // Add class name for the currently selected scheme + this._document.body.classList.add(this.scheme); + } + + /** + * Update the selected theme + * + * @private + */ + private _updateTheme(): void { + // Find the class name for the previously selected theme and remove it + this._document.body.classList.forEach((className: string) => { + if (className.startsWith('theme-')) { + this._document.body.classList.remove( + className, + className.split('-')[1] + ); + } + }); + + // Add class name for the currently selected theme + this._document.body.classList.add(this.theme); + } +} diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts new file mode 100644 index 0000000..ee2e4d4 --- /dev/null +++ b/src/app/layout/layout.module.ts @@ -0,0 +1,41 @@ +import { NgModule } from '@angular/core'; +import { LayoutComponent } from 'app/layout/layout.component'; +import { EmptyLayoutModule } from 'app/layout/layouts/empty/empty.module'; +import { CenteredLayoutModule } from 'app/layout/layouts/horizontal/centered/centered.module'; +import { EnterpriseLayoutModule } from 'app/layout/layouts/horizontal/enterprise/enterprise.module'; +import { MaterialLayoutModule } from 'app/layout/layouts/horizontal/material/material.module'; +import { ModernLayoutModule } from 'app/layout/layouts/horizontal/modern/modern.module'; +import { ClassicLayoutModule } from 'app/layout/layouts/vertical/classic/classic.module'; +import { ClassyLayoutModule } from 'app/layout/layouts/vertical/classy/classy.module'; +import { CompactLayoutModule } from 'app/layout/layouts/vertical/compact/compact.module'; +import { DenseLayoutModule } from 'app/layout/layouts/vertical/dense/dense.module'; +import { FuturisticLayoutModule } from 'app/layout/layouts/vertical/futuristic/futuristic.module'; +import { ThinLayoutModule } from 'app/layout/layouts/vertical/thin/thin.module'; +import { SettingsModule } from 'app/layout/common/settings/settings.module'; +import { SharedModule } from 'app/shared/shared.module'; + +const layoutModules = [ + // Empty + EmptyLayoutModule, + + // Horizontal navigation + CenteredLayoutModule, + EnterpriseLayoutModule, + MaterialLayoutModule, + ModernLayoutModule, + + // Vertical navigation + ClassicLayoutModule, + ClassyLayoutModule, + CompactLayoutModule, + DenseLayoutModule, + FuturisticLayoutModule, + ThinLayoutModule, +]; + +@NgModule({ + declarations: [LayoutComponent], + imports: [SharedModule, SettingsModule, ...layoutModules], + exports: [LayoutComponent, ...layoutModules], +}) +export class LayoutModule {} diff --git a/src/app/layout/layout.types.ts b/src/app/layout/layout.types.ts new file mode 100644 index 0000000..0466b3a --- /dev/null +++ b/src/app/layout/layout.types.ts @@ -0,0 +1,14 @@ +export type Layout = + | 'empty' + // Horizontal + | 'centered' + | 'enterprise' + | 'material' + | 'modern' + // Vertical + | 'classic' + | 'classy' + | 'compact' + | 'dense' + | 'futuristic' + | 'thin'; diff --git a/src/app/layout/layouts/empty/empty.component.html b/src/app/layout/layouts/empty/empty.component.html new file mode 100644 index 0000000..c369e0d --- /dev/null +++ b/src/app/layout/layouts/empty/empty.component.html @@ -0,0 +1,12 @@ + + + + +
+ +
+ + +
+
diff --git a/src/app/layout/layouts/empty/empty.component.ts b/src/app/layout/layouts/empty/empty.component.ts new file mode 100644 index 0000000..6c6eaa6 --- /dev/null +++ b/src/app/layout/layouts/empty/empty.component.ts @@ -0,0 +1,29 @@ +import { Component, OnDestroy, ViewEncapsulation } from '@angular/core'; +import { Subject } from 'rxjs'; + +@Component({ + selector: 'empty-layout', + templateUrl: './empty.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class EmptyLayoutComponent implements OnDestroy { + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor() {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } +} diff --git a/src/app/layout/layouts/empty/empty.module.ts b/src/app/layout/layouts/empty/empty.module.ts new file mode 100644 index 0000000..9a931b7 --- /dev/null +++ b/src/app/layout/layouts/empty/empty.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { SharedModule } from 'app/shared/shared.module'; +import { EmptyLayoutComponent } from 'app/layout/layouts/empty/empty.component'; + +@NgModule({ + declarations: [EmptyLayoutComponent], + imports: [RouterModule, FuseLoadingBarModule, SharedModule], + exports: [EmptyLayoutComponent], +}) +export class EmptyLayoutModule {} diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.html b/src/app/layout/layouts/horizontal/centered/centered.component.html new file mode 100644 index 0000000..bc6e34d --- /dev/null +++ b/src/app/layout/layouts/horizontal/centered/centered.component.html @@ -0,0 +1,103 @@ + + + +
+ + + + + + +
+ +
+
+
+
+ + +
+ +
+ + +
+ + + Logo image +
+ + +
+ + + + + +
+ + + + + + + +
+
+ + +
+ + +
+ + +
+ Beteran © {{ currentYear }} +
+
+
diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.ts b/src/app/layout/layouts/horizontal/centered/centered.component.ts new file mode 100644 index 0000000..d371030 --- /dev/null +++ b/src/app/layout/layouts/horizontal/centered/centered.component.ts @@ -0,0 +1,98 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; + +@Component({ + selector: 'centered-layout', + templateUrl: './centered.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class CenteredLayoutComponent implements OnInit, OnDestroy { + navigation?: Navigation; + isScreenSmall?: boolean; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _router: Router, + private _navigationService: NavigationService, + private _fuseMediaWatcherService: FuseMediaWatcherService, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for current year + */ + get currentYear(): number { + return new Date().getFullYear(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({ matchingAliases }) => { + // Check if the screen is small + this.isScreenSmall = !matchingAliases.includes('md'); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle navigation + * + * @param name + */ + toggleNavigation(name: string): void { + // Get the navigation + const navigation = + this._fuseNavigationService.getComponent( + name + ); + + if (navigation) { + // Toggle the opened status + navigation.toggle(); + } + } +} diff --git a/src/app/layout/layouts/horizontal/centered/centered.module.ts b/src/app/layout/layouts/horizontal/centered/centered.module.ts new file mode 100644 index 0000000..3830c69 --- /dev/null +++ b/src/app/layout/layouts/horizontal/centered/centered.module.ts @@ -0,0 +1,42 @@ +import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { FuseNavigationModule } from '@fuse/components/navigation'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; +import { MessagesModule } from 'app/layout/common/messages/messages.module'; +import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; +import { SearchModule } from 'app/layout/common/search/search.module'; +import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; +import { UserModule } from 'app/layout/common/user/user.module'; +import { SharedModule } from 'app/shared/shared.module'; +import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/centered.component'; + +@NgModule({ + declarations: [CenteredLayoutComponent], + imports: [ + HttpClientModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + FuseFullscreenModule, + FuseLoadingBarModule, + FuseNavigationModule, + LanguagesModule, + MessagesModule, + NotificationsModule, + SearchModule, + ShortcutsModule, + UserModule, + SharedModule, + ], + exports: [CenteredLayoutComponent], +}) +export class CenteredLayoutModule {} diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html new file mode 100644 index 0000000..2e41b1c --- /dev/null +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html @@ -0,0 +1,115 @@ + + + + + + + + + +
+ Logo image +
+
+
+
+ + +
+ +
+ +
+
+ + +
+ Logo image +
+
+ + + + + +
+ + + + + + + + +
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ Beteran © {{ currentYear }} +
+
+
+ + + diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts new file mode 100644 index 0000000..3dcabfe --- /dev/null +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts @@ -0,0 +1,98 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; + +@Component({ + selector: 'enterprise-layout', + templateUrl: './enterprise.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class EnterpriseLayoutComponent implements OnInit, OnDestroy { + isScreenSmall?: boolean; + navigation?: Navigation; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _router: Router, + private _navigationService: NavigationService, + private _fuseMediaWatcherService: FuseMediaWatcherService, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for current year + */ + get currentYear(): number { + return new Date().getFullYear(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({ matchingAliases }) => { + // Check if the screen is small + this.isScreenSmall = !matchingAliases.includes('md'); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle navigation + * + * @param name + */ + toggleNavigation(name: string): void { + // Get the navigation + const navigation = + this._fuseNavigationService.getComponent( + name + ); + + if (navigation) { + // Toggle the opened status + navigation.toggle(); + } + } +} diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts b/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts new file mode 100644 index 0000000..3b1a30e --- /dev/null +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { FuseNavigationModule } from '@fuse/components/navigation'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; +import { MessagesModule } from 'app/layout/common/messages/messages.module'; +import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; +import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module'; +import { SearchModule } from 'app/layout/common/search/search.module'; +import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; +import { UserModule } from 'app/layout/common/user/user.module'; +import { SharedModule } from 'app/shared/shared.module'; +import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterprise/enterprise.component'; + +@NgModule({ + declarations: [EnterpriseLayoutComponent], + imports: [ + HttpClientModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + FuseFullscreenModule, + FuseLoadingBarModule, + FuseNavigationModule, + LanguagesModule, + MessagesModule, + NotificationsModule, + QuickChatModule, + SearchModule, + ShortcutsModule, + UserModule, + SharedModule, + ], + exports: [EnterpriseLayoutComponent], +}) +export class EnterpriseLayoutModule {} diff --git a/src/app/layout/layouts/horizontal/material/material.component.html b/src/app/layout/layouts/horizontal/material/material.component.html new file mode 100644 index 0000000..67e56ea --- /dev/null +++ b/src/app/layout/layouts/horizontal/material/material.component.html @@ -0,0 +1,109 @@ + + + + + + + + + +
+ Logo image +
+
+
+
+ + +
+ +
+
+ +
+ + +
+ + Logo image + + +
+
+ + + + + +
+ + + + + + + +
+
+ + +
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ Beteran © {{ currentYear }} +
+
+
diff --git a/src/app/layout/layouts/horizontal/material/material.component.ts b/src/app/layout/layouts/horizontal/material/material.component.ts new file mode 100644 index 0000000..3b062c6 --- /dev/null +++ b/src/app/layout/layouts/horizontal/material/material.component.ts @@ -0,0 +1,98 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; + +@Component({ + selector: 'material-layout', + templateUrl: './material.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class MaterialLayoutComponent implements OnInit, OnDestroy { + isScreenSmall?: boolean; + navigation?: Navigation; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _router: Router, + private _navigationService: NavigationService, + private _fuseMediaWatcherService: FuseMediaWatcherService, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for current year + */ + get currentYear(): number { + return new Date().getFullYear(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({ matchingAliases }) => { + // Check if the screen is small + this.isScreenSmall = !matchingAliases.includes('md'); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle navigation + * + * @param name + */ + toggleNavigation(name: string): void { + // Get the navigation + const navigation = + this._fuseNavigationService.getComponent( + name + ); + + if (navigation) { + // Toggle the opened status + navigation.toggle(); + } + } +} diff --git a/src/app/layout/layouts/horizontal/material/material.module.ts b/src/app/layout/layouts/horizontal/material/material.module.ts new file mode 100644 index 0000000..6559dee --- /dev/null +++ b/src/app/layout/layouts/horizontal/material/material.module.ts @@ -0,0 +1,42 @@ +import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { FuseNavigationModule } from '@fuse/components/navigation'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; +import { MessagesModule } from 'app/layout/common/messages/messages.module'; +import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; +import { SearchModule } from 'app/layout/common/search/search.module'; +import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; +import { UserModule } from 'app/layout/common/user/user.module'; +import { SharedModule } from 'app/shared/shared.module'; +import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/material.component'; + +@NgModule({ + declarations: [MaterialLayoutComponent], + imports: [ + HttpClientModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + FuseFullscreenModule, + FuseLoadingBarModule, + FuseNavigationModule, + LanguagesModule, + MessagesModule, + NotificationsModule, + SearchModule, + ShortcutsModule, + UserModule, + SharedModule, + ], + exports: [MaterialLayoutComponent], +}) +export class MaterialLayoutModule {} diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.html b/src/app/layout/layouts/horizontal/modern/modern.component.html new file mode 100644 index 0000000..592460b --- /dev/null +++ b/src/app/layout/layouts/horizontal/modern/modern.component.html @@ -0,0 +1,94 @@ + + + + + + + + + +
+ Logo image +
+
+
+
+ + +
+ +
+ + +
+ + +
+ + +
+ + + + + +
+ + + + + + + + +
+
+ + +
+ + +
+ + +
+ Beteran © {{ currentYear }} +
+
+ + + diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.ts b/src/app/layout/layouts/horizontal/modern/modern.component.ts new file mode 100644 index 0000000..3d8d8f7 --- /dev/null +++ b/src/app/layout/layouts/horizontal/modern/modern.component.ts @@ -0,0 +1,98 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; + +@Component({ + selector: 'modern-layout', + templateUrl: './modern.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class ModernLayoutComponent implements OnInit, OnDestroy { + isScreenSmall?: boolean; + navigation?: Navigation; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _router: Router, + private _navigationService: NavigationService, + private _fuseMediaWatcherService: FuseMediaWatcherService, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for current year + */ + get currentYear(): number { + return new Date().getFullYear(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({ matchingAliases }) => { + // Check if the screen is small + this.isScreenSmall = !matchingAliases.includes('md'); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle navigation + * + * @param name + */ + toggleNavigation(name: string): void { + // Get the navigation + const navigation = + this._fuseNavigationService.getComponent( + name + ); + + if (navigation) { + // Toggle the opened status + navigation.toggle(); + } + } +} diff --git a/src/app/layout/layouts/horizontal/modern/modern.module.ts b/src/app/layout/layouts/horizontal/modern/modern.module.ts new file mode 100644 index 0000000..b6e8e2a --- /dev/null +++ b/src/app/layout/layouts/horizontal/modern/modern.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { FuseNavigationModule } from '@fuse/components/navigation'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; +import { MessagesModule } from 'app/layout/common/messages/messages.module'; +import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; +import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module'; +import { SearchModule } from 'app/layout/common/search/search.module'; +import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; +import { UserModule } from 'app/layout/common/user/user.module'; +import { SharedModule } from 'app/shared/shared.module'; +import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/modern.component'; + +@NgModule({ + declarations: [ModernLayoutComponent], + imports: [ + HttpClientModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + FuseFullscreenModule, + FuseLoadingBarModule, + FuseNavigationModule, + LanguagesModule, + MessagesModule, + NotificationsModule, + QuickChatModule, + SearchModule, + ShortcutsModule, + UserModule, + SharedModule, + ], + exports: [ModernLayoutComponent], +}) +export class ModernLayoutModule {} diff --git a/src/app/layout/layouts/vertical/classic/classic.component.html b/src/app/layout/layouts/vertical/classic/classic.component.html new file mode 100644 index 0000000..f169023 --- /dev/null +++ b/src/app/layout/layouts/vertical/classic/classic.component.html @@ -0,0 +1,75 @@ + + + + + + + + +
+ + Logo image + + +
+
+
+ + +
+ +
+ + + +
+ + + + + + + + +
+
+ + +
+ + +
+ + +
+ + Beteran © {{ currentYear }} + +
+
+ + + diff --git a/src/app/layout/layouts/vertical/classic/classic.component.ts b/src/app/layout/layouts/vertical/classic/classic.component.ts new file mode 100644 index 0000000..bb9392d --- /dev/null +++ b/src/app/layout/layouts/vertical/classic/classic.component.ts @@ -0,0 +1,98 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; + +@Component({ + selector: 'classic-layout', + templateUrl: './classic.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class ClassicLayoutComponent implements OnInit, OnDestroy { + isScreenSmall?: boolean; + navigation?: Navigation; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _router: Router, + private _navigationService: NavigationService, + private _fuseMediaWatcherService: FuseMediaWatcherService, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for current year + */ + get currentYear(): number { + return new Date().getFullYear(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({ matchingAliases }) => { + // Check if the screen is small + this.isScreenSmall = !matchingAliases.includes('md'); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle navigation + * + * @param name + */ + toggleNavigation(name: string): void { + // Get the navigation + const navigation = + this._fuseNavigationService.getComponent( + name + ); + + if (navigation) { + // Toggle the opened status + navigation.toggle(); + } + } +} diff --git a/src/app/layout/layouts/vertical/classic/classic.module.ts b/src/app/layout/layouts/vertical/classic/classic.module.ts new file mode 100644 index 0000000..e9dc27c --- /dev/null +++ b/src/app/layout/layouts/vertical/classic/classic.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { FuseNavigationModule } from '@fuse/components/navigation'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; +import { MessagesModule } from 'app/layout/common/messages/messages.module'; +import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; +import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module'; +import { SearchModule } from 'app/layout/common/search/search.module'; +import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; +import { UserModule } from 'app/layout/common/user/user.module'; +import { SharedModule } from 'app/shared/shared.module'; +import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/classic.component'; + +@NgModule({ + declarations: [ClassicLayoutComponent], + imports: [ + HttpClientModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + FuseFullscreenModule, + FuseLoadingBarModule, + FuseNavigationModule, + LanguagesModule, + MessagesModule, + NotificationsModule, + QuickChatModule, + SearchModule, + ShortcutsModule, + UserModule, + SharedModule, + ], + exports: [ClassicLayoutComponent], +}) +export class ClassicLayoutModule {} diff --git a/src/app/layout/layouts/vertical/classy/classy.component.html b/src/app/layout/layouts/vertical/classy/classy.component.html new file mode 100644 index 0000000..687da70 --- /dev/null +++ b/src/app/layout/layouts/vertical/classy/classy.component.html @@ -0,0 +1,101 @@ + + + + + + + +
+ +
+ +
+ +
+ + +
+
+ +
+
+ User avatar + +
+
+
+ {{ user?.name }} +
+
+ {{ user?.email }} +
+
+
+
+ + +
+ +
+
+
+ + +
+ +
+ + + +
+ + + + + + +
+
+ + +
+ + +
+ + + +
+ + + diff --git a/src/app/layout/layouts/vertical/classy/classy.component.ts b/src/app/layout/layouts/vertical/classy/classy.component.ts new file mode 100644 index 0000000..f3e94d4 --- /dev/null +++ b/src/app/layout/layouts/vertical/classy/classy.component.ts @@ -0,0 +1,109 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; +import { User } from 'app/core/user/user.types'; +import { UserService } from 'app/core/user/user.service'; + +@Component({ + selector: 'classy-layout', + templateUrl: './classy.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class ClassyLayoutComponent implements OnInit, OnDestroy { + isScreenSmall?: boolean; + navigation?: Navigation; + user?: User; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _router: Router, + private _navigationService: NavigationService, + private _userService: UserService, + private _fuseMediaWatcherService: FuseMediaWatcherService, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for current year + */ + get currentYear(): number { + return new Date().getFullYear(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to the user service + this._userService.user$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((user: User) => { + this.user = user; + }); + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({ matchingAliases }) => { + // Check if the screen is small + this.isScreenSmall = !matchingAliases.includes('md'); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle navigation + * + * @param name + */ + toggleNavigation(name: string): void { + // Get the navigation + const navigation = + this._fuseNavigationService.getComponent( + name + ); + + if (navigation) { + // Toggle the opened status + navigation.toggle(); + } + } +} diff --git a/src/app/layout/layouts/vertical/classy/classy.module.ts b/src/app/layout/layouts/vertical/classy/classy.module.ts new file mode 100644 index 0000000..b7094d7 --- /dev/null +++ b/src/app/layout/layouts/vertical/classy/classy.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { FuseNavigationModule } from '@fuse/components/navigation'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; +import { MessagesModule } from 'app/layout/common/messages/messages.module'; +import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; +import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module'; +import { SearchModule } from 'app/layout/common/search/search.module'; +import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; +import { UserModule } from 'app/layout/common/user/user.module'; +import { SharedModule } from 'app/shared/shared.module'; +import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy.component'; + +@NgModule({ + declarations: [ClassyLayoutComponent], + imports: [ + HttpClientModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + FuseFullscreenModule, + FuseLoadingBarModule, + FuseNavigationModule, + LanguagesModule, + MessagesModule, + NotificationsModule, + QuickChatModule, + SearchModule, + ShortcutsModule, + UserModule, + SharedModule, + ], + exports: [ClassyLayoutComponent], +}) +export class ClassyLayoutModule {} diff --git a/src/app/layout/layouts/vertical/compact/compact.component.html b/src/app/layout/layouts/vertical/compact/compact.component.html new file mode 100644 index 0000000..ae473c9 --- /dev/null +++ b/src/app/layout/layouts/vertical/compact/compact.component.html @@ -0,0 +1,65 @@ + + + + + + + + +
+ Logo image +
+
+
+ + +
+ +
+ + + +
+ + + + + + + + +
+
+ + +
+ + +
+ + +
+ Beteran © {{ currentYear }} +
+
+ + + diff --git a/src/app/layout/layouts/vertical/compact/compact.component.ts b/src/app/layout/layouts/vertical/compact/compact.component.ts new file mode 100644 index 0000000..f3257ae --- /dev/null +++ b/src/app/layout/layouts/vertical/compact/compact.component.ts @@ -0,0 +1,98 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; + +@Component({ + selector: 'compact-layout', + templateUrl: './compact.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class CompactLayoutComponent implements OnInit, OnDestroy { + isScreenSmall?: boolean; + navigation?: Navigation; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _router: Router, + private _navigationService: NavigationService, + private _fuseMediaWatcherService: FuseMediaWatcherService, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for current year + */ + get currentYear(): number { + return new Date().getFullYear(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({ matchingAliases }) => { + // Check if the screen is small + this.isScreenSmall = !matchingAliases.includes('md'); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle navigation + * + * @param name + */ + toggleNavigation(name: string): void { + // Get the navigation + const navigation = + this._fuseNavigationService.getComponent( + name + ); + + if (navigation) { + // Toggle the opened status + navigation.toggle(); + } + } +} diff --git a/src/app/layout/layouts/vertical/compact/compact.module.ts b/src/app/layout/layouts/vertical/compact/compact.module.ts new file mode 100644 index 0000000..2c43e29 --- /dev/null +++ b/src/app/layout/layouts/vertical/compact/compact.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { FuseNavigationModule } from '@fuse/components/navigation'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; +import { MessagesModule } from 'app/layout/common/messages/messages.module'; +import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; +import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module'; +import { SearchModule } from 'app/layout/common/search/search.module'; +import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; +import { UserModule } from 'app/layout/common/user/user.module'; +import { SharedModule } from 'app/shared/shared.module'; +import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/compact.component'; + +@NgModule({ + declarations: [CompactLayoutComponent], + imports: [ + HttpClientModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + FuseFullscreenModule, + FuseLoadingBarModule, + FuseNavigationModule, + LanguagesModule, + MessagesModule, + NotificationsModule, + QuickChatModule, + SearchModule, + ShortcutsModule, + UserModule, + SharedModule, + ], + exports: [CompactLayoutComponent], +}) +export class CompactLayoutModule {} diff --git a/src/app/layout/layouts/vertical/dense/dense.component.html b/src/app/layout/layouts/vertical/dense/dense.component.html new file mode 100644 index 0000000..7a69df2 --- /dev/null +++ b/src/app/layout/layouts/vertical/dense/dense.component.html @@ -0,0 +1,75 @@ + + + + + + + + +
+ Logo image +
+
+
+ + +
+ +
+
+ + + + +
+ +
+ + + + + + + + +
+
+ + +
+ + +
+ + +
+ Beteran © {{ currentYear }} +
+
+ + + diff --git a/src/app/layout/layouts/vertical/dense/dense.component.ts b/src/app/layout/layouts/vertical/dense/dense.component.ts new file mode 100644 index 0000000..810b95a --- /dev/null +++ b/src/app/layout/layouts/vertical/dense/dense.component.ts @@ -0,0 +1,110 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; + +@Component({ + selector: 'dense-layout', + templateUrl: './dense.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class DenseLayoutComponent implements OnInit, OnDestroy { + isScreenSmall?: boolean; + navigation?: Navigation; + navigationAppearance: 'default' | 'dense' = 'dense'; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _router: Router, + private _navigationService: NavigationService, + private _fuseMediaWatcherService: FuseMediaWatcherService, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for current year + */ + get currentYear(): number { + return new Date().getFullYear(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({ matchingAliases }) => { + // Check if the screen is small + this.isScreenSmall = !matchingAliases.includes('md'); + + // Change the navigation appearance + this.navigationAppearance = this.isScreenSmall ? 'default' : 'dense'; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle navigation + * + * @param name + */ + toggleNavigation(name: string): void { + // Get the navigation + const navigation = + this._fuseNavigationService.getComponent( + name + ); + + if (navigation) { + // Toggle the opened status + navigation.toggle(); + } + } + + /** + * Toggle the navigation appearance + */ + toggleNavigationAppearance(): void { + this.navigationAppearance = + this.navigationAppearance === 'default' ? 'dense' : 'default'; + } +} diff --git a/src/app/layout/layouts/vertical/dense/dense.module.ts b/src/app/layout/layouts/vertical/dense/dense.module.ts new file mode 100644 index 0000000..30f5df7 --- /dev/null +++ b/src/app/layout/layouts/vertical/dense/dense.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { FuseNavigationModule } from '@fuse/components/navigation'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; +import { MessagesModule } from 'app/layout/common/messages/messages.module'; +import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; +import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module'; +import { SearchModule } from 'app/layout/common/search/search.module'; +import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; +import { UserModule } from 'app/layout/common/user/user.module'; +import { SharedModule } from 'app/shared/shared.module'; +import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.component'; + +@NgModule({ + declarations: [DenseLayoutComponent], + imports: [ + HttpClientModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + FuseFullscreenModule, + FuseLoadingBarModule, + FuseNavigationModule, + LanguagesModule, + MessagesModule, + NotificationsModule, + QuickChatModule, + SearchModule, + ShortcutsModule, + UserModule, + SharedModule, + ], + exports: [DenseLayoutComponent], +}) +export class DenseLayoutModule {} diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html new file mode 100644 index 0000000..fb5b3f2 --- /dev/null +++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html @@ -0,0 +1,86 @@ + + + + + + + + +
+ +
+
+ + + +
+ +
+
+ {{ user?.name }} +
+
+ brian.hughes@company.com +
+
+
+
+
+ + +
+ +
+ + + +
+ + + + + + + +
+
+ + +
+ + +
+ + +
+ Beteran © {{ currentYear }} +
+
+ + + diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts b/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts new file mode 100644 index 0000000..9acca6f --- /dev/null +++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts @@ -0,0 +1,109 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; +import { User } from 'app/core/user/user.types'; +import { UserService } from 'app/core/user/user.service'; + +@Component({ + selector: 'futuristic-layout', + templateUrl: './futuristic.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class FuturisticLayoutComponent implements OnInit, OnDestroy { + isScreenSmall?: boolean; + navigation?: Navigation; + user?: User; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _router: Router, + private _navigationService: NavigationService, + private _userService: UserService, + private _fuseMediaWatcherService: FuseMediaWatcherService, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for current year + */ + get currentYear(): number { + return new Date().getFullYear(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to the user service + this._userService.user$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((user: User) => { + this.user = user; + }); + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({ matchingAliases }) => { + // Check if the screen is small + this.isScreenSmall = !matchingAliases.includes('md'); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle navigation + * + * @param name + */ + toggleNavigation(name: string): void { + // Get the navigation + const navigation = + this._fuseNavigationService.getComponent( + name + ); + + if (navigation) { + // Toggle the opened status + navigation.toggle(); + } + } +} diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts b/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts new file mode 100644 index 0000000..e9be84f --- /dev/null +++ b/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { FuseNavigationModule } from '@fuse/components/navigation'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; +import { MessagesModule } from 'app/layout/common/messages/messages.module'; +import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; +import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module'; +import { SearchModule } from 'app/layout/common/search/search.module'; +import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; +import { UserModule } from 'app/layout/common/user/user.module'; +import { SharedModule } from 'app/shared/shared.module'; +import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristic/futuristic.component'; + +@NgModule({ + declarations: [FuturisticLayoutComponent], + imports: [ + HttpClientModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + FuseFullscreenModule, + FuseLoadingBarModule, + FuseNavigationModule, + LanguagesModule, + MessagesModule, + NotificationsModule, + QuickChatModule, + SearchModule, + ShortcutsModule, + UserModule, + SharedModule, + ], + exports: [FuturisticLayoutComponent], +}) +export class FuturisticLayoutModule {} diff --git a/src/app/layout/layouts/vertical/thin/thin.component.html b/src/app/layout/layouts/vertical/thin/thin.component.html new file mode 100644 index 0000000..a1dd900 --- /dev/null +++ b/src/app/layout/layouts/vertical/thin/thin.component.html @@ -0,0 +1,69 @@ + + + + + + + + +
+ Logo image +
+
+
+ + +
+ +
+ + + +
+ + + + + + + + +
+
+ + +
+ + +
+ + +
+ Beteran © {{ currentYear }} +
+
+ + + diff --git a/src/app/layout/layouts/vertical/thin/thin.component.ts b/src/app/layout/layouts/vertical/thin/thin.component.ts new file mode 100644 index 0000000..97f0194 --- /dev/null +++ b/src/app/layout/layouts/vertical/thin/thin.component.ts @@ -0,0 +1,98 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Subject, takeUntil } from 'rxjs'; +import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; +import { + FuseNavigationService, + FuseVerticalNavigationComponent, +} from '@fuse/components/navigation'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; + +@Component({ + selector: 'thin-layout', + templateUrl: './thin.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class ThinLayoutComponent implements OnInit, OnDestroy { + isScreenSmall?: boolean; + navigation?: Navigation; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _router: Router, + private _navigationService: NavigationService, + private _fuseMediaWatcherService: FuseMediaWatcherService, + private _fuseNavigationService: FuseNavigationService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for current year + */ + get currentYear(): number { + return new Date().getFullYear(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to media changes + this._fuseMediaWatcherService.onMediaChange$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(({ matchingAliases }) => { + // Check if the screen is small + this.isScreenSmall = !matchingAliases.includes('md'); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle navigation + * + * @param name + */ + toggleNavigation(name: string): void { + // Get the navigation + const navigation = + this._fuseNavigationService.getComponent( + name + ); + + if (navigation) { + // Toggle the opened status + navigation.toggle(); + } + } +} diff --git a/src/app/layout/layouts/vertical/thin/thin.module.ts b/src/app/layout/layouts/vertical/thin/thin.module.ts new file mode 100644 index 0000000..591e48c --- /dev/null +++ b/src/app/layout/layouts/vertical/thin/thin.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { FuseFullscreenModule } from '@fuse/components/fullscreen'; +import { FuseLoadingBarModule } from '@fuse/components/loading-bar'; +import { FuseNavigationModule } from '@fuse/components/navigation'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; +import { MessagesModule } from 'app/layout/common/messages/messages.module'; +import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; +import { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module'; +import { SearchModule } from 'app/layout/common/search/search.module'; +import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; +import { UserModule } from 'app/layout/common/user/user.module'; +import { SharedModule } from 'app/shared/shared.module'; +import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.component'; + +@NgModule({ + declarations: [ThinLayoutComponent], + imports: [ + HttpClientModule, + RouterModule, + MatButtonModule, + MatDividerModule, + MatIconModule, + MatMenuModule, + FuseFullscreenModule, + FuseLoadingBarModule, + FuseNavigationModule, + LanguagesModule, + MessagesModule, + NotificationsModule, + QuickChatModule, + SearchModule, + ShortcutsModule, + UserModule, + SharedModule, + ], + exports: [ThinLayoutComponent], +}) +export class ThinLayoutModule {} diff --git a/src/app/mock-api/apps/academy/api.ts b/src/app/mock-api/apps/academy/api.ts new file mode 100644 index 0000000..c6601cf --- /dev/null +++ b/src/app/mock-api/apps/academy/api.ts @@ -0,0 +1,79 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service'; +import { + categories as categoriesData, + courses as coursesData, + demoCourseSteps as demoCourseStepsData, +} from 'app/mock-api/apps/academy/data'; + +@Injectable({ + providedIn: 'root', +}) +export class AcademyMockApi { + private _categories: any[] = categoriesData; + private _courses: any[] = coursesData; + private _demoCourseSteps: any[] = demoCourseStepsData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Categories - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/apps/academy/categories').reply(() => { + // Clone the categories + const categories = cloneDeep(this._categories); + + // Sort the categories alphabetically by title + categories.sort((a, b) => a.title.localeCompare(b.title)); + + return [200, categories]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Courses - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/apps/academy/courses').reply(() => { + // Clone the courses + const courses = cloneDeep(this._courses); + + return [200, courses]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Course - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/academy/courses/course') + .reply(({ request }) => { + // Get the id from the params + const id = request.params.get('id'); + + // Clone the courses and steps + const courses = cloneDeep(this._courses); + const steps = cloneDeep(this._demoCourseSteps); + + // Find the course and attach steps to it + const course = courses.find((item: any) => item.id === id); + if (course) { + course.steps = steps; + } + + return [200, course]; + }); + } +} diff --git a/src/app/mock-api/apps/academy/data.ts b/src/app/mock-api/apps/academy/data.ts new file mode 100644 index 0000000..4829a10 --- /dev/null +++ b/src/app/mock-api/apps/academy/data.ts @@ -0,0 +1,722 @@ +/* eslint-disable */ +export const categories = [ + { + id: '9a67dff7-3c38-4052-a335-0cef93438ff6', + title: 'Web', + slug: 'web', + }, + { + id: 'a89672f5-e00d-4be4-9194-cb9d29f82165', + title: 'Firebase', + slug: 'firebase', + }, + { + id: '02f42092-bb23-4552-9ddb-cfdcc235d48f', + title: 'Cloud', + slug: 'cloud', + }, + { + id: '5648a630-979f-4403-8c41-fc9790dea8cd', + title: 'Android', + slug: 'android', + }, +]; +export const courses = [ + { + id: '694e4e5f-f25f-470b-bd0e-26b1d4f64028', + title: 'Basics of Angular', + slug: 'basics-of-angular', + description: 'Introductory course for Angular and framework basics', + category: 'web', + duration: 30, + totalSteps: 11, + updatedAt: 'Jun 28, 2021', + featured: true, + progress: { + currentStep: 3, + completed: 2, + }, + }, + { + id: 'f924007a-2ee9-470b-a316-8d21ed78277f', + title: 'Basics of TypeScript', + slug: 'basics-of-typeScript', + description: 'Beginner course for Typescript and its basics', + category: 'web', + duration: 60, + totalSteps: 11, + updatedAt: 'Nov 01, 2021', + featured: true, + progress: { + currentStep: 5, + completed: 3, + }, + }, + { + id: '0c06e980-abb5-4ba7-ab65-99a228cab36b', + title: 'Android N: Quick Settings', + slug: 'android-n-quick-settings', + description: 'Step by step guide for Android N: Quick Settings', + category: 'android', + duration: 120, + totalSteps: 11, + updatedAt: 'May 08, 2021', + featured: false, + progress: { + currentStep: 10, + completed: 1, + }, + }, + { + id: '1b9a9acc-9a36-403e-a1e7-b11780179e38', + title: 'Build an App for the Google Assistant with Firebase', + slug: 'build-an-app-for-the-google-assistant-with-firebase', + description: 'Dive deep into Google Assistant apps using Firebase', + category: 'firebase', + duration: 30, + totalSteps: 11, + updatedAt: 'Jan 09, 2021', + featured: false, + progress: { + currentStep: 4, + completed: 3, + }, + }, + { + id: '55eb415f-3f4e-4853-a22b-f0ae91331169', + title: 'Keep Sensitive Data Safe and Private', + slug: 'keep-sensitive-data-safe-and-private', + description: 'Learn how to keep your important data safe and private', + category: 'android', + duration: 45, + totalSteps: 11, + updatedAt: 'Jan 14, 2021', + featured: false, + progress: { + currentStep: 6, + completed: 0, + }, + }, + { + id: 'fad2ab23-1011-4028-9a54-e52179ac4a50', + title: "Manage Your Pivotal Cloud Foundry App's Using Apigee Edge", + slug: 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge', + description: 'Introductory course for Pivotal Cloud Foundry App', + category: 'cloud', + duration: 90, + totalSteps: 11, + updatedAt: 'Jun 24, 2021', + featured: false, + progress: { + currentStep: 6, + completed: 0, + }, + }, + { + id: 'c4bc107b-edc4-47a7-a7a8-4fb09732e794', + title: 'Build a PWA Using Workbox', + slug: 'build-a-pwa-using-workbox', + description: 'Step by step guide for building a PWA using Workbox', + category: 'web', + duration: 120, + totalSteps: 11, + updatedAt: 'Nov 19, 2021', + featured: false, + progress: { + currentStep: 0, + completed: 0, + }, + }, + { + id: '1449f945-d032-460d-98e3-406565a22293', + title: 'Cloud Functions for Firebase', + slug: 'cloud-functions-for-firebase', + description: 'Beginners guide of Firebase Cloud Functions', + category: 'firebase', + duration: 45, + totalSteps: 11, + updatedAt: 'Jul 11, 2021', + featured: false, + progress: { + currentStep: 3, + completed: 1, + }, + }, + { + id: 'f05e08ab-f3e3-4597-a032-6a4b69816f24', + title: 'Building a gRPC Service with Java', + slug: 'building-a-grpc-service-with-java', + description: 'Learn more about building a gRPC Service with Java', + category: 'cloud', + duration: 30, + totalSteps: 11, + updatedAt: 'Mar 13, 2021', + featured: false, + progress: { + currentStep: 0, + completed: 1, + }, + }, + { + id: '181728f4-87c8-45c5-b9cc-92265bcd2f4d', + title: 'Looking at Campaign Finance with BigQuery', + slug: 'looking-at-campaign-finance-with-bigquery', + description: 'Dive deep into BigQuery: Campaign Finance', + category: 'cloud', + duration: 60, + totalSteps: 11, + updatedAt: 'Nov 01, 2021', + featured: false, + progress: { + currentStep: 0, + completed: 0, + }, + }, + { + id: 'fcbfedbf-6187-4b3b-89d3-1a7cb4e11616', + title: 'Personalize Your iOS App with Firebase User Management', + slug: 'personalize-your-ios-app-with-firebase-user-management', + description: 'Dive deep into User Management on iOS apps using Firebase', + category: 'firebase', + duration: 90, + totalSteps: 11, + updatedAt: 'Aug 08, 2021', + featured: false, + progress: { + currentStep: 0, + completed: 0, + }, + }, + { + id: '5213f6a1-1dd7-4b1d-b6e9-ffb7af534f28', + title: 'Customize Network Topology with Subnetworks', + slug: 'customize-network-topology-with-subnetworks', + description: 'Dive deep into Network Topology with Subnetworks', + category: 'web', + duration: 45, + totalSteps: 11, + updatedAt: 'May 12, 2021', + featured: false, + progress: { + currentStep: 0, + completed: 0, + }, + }, + { + id: '02992ac9-d1a3-4167-b70e-8a1d5b5ba253', + title: 'Building Beautiful UIs with Flutter', + slug: 'building-beautiful-uis-with-flutter', + description: + "Dive deep into Flutter's hidden secrets for creating beautiful UIs", + category: 'web', + duration: 90, + totalSteps: 11, + updatedAt: 'Sep 18, 2021', + featured: false, + progress: { + currentStep: 8, + completed: 2, + }, + }, + { + id: '2139512f-41fb-4a4a-841a-0b4ac034f9b4', + title: 'Firebase Android', + slug: 'firebase-android', + description: 'Beginners guide of Firebase for Android', + category: 'android', + duration: 45, + totalSteps: 11, + updatedAt: 'Apr 24, 2021', + featured: false, + progress: { + currentStep: 0, + completed: 0, + }, + }, + { + id: '65e0a0e0-d8c0-4117-a3cb-eb74f8e28809', + title: 'Simulating a Thread Network Using OpenThread', + slug: 'simulating-a-thread-network-using-openthread', + description: + 'Introductory course for OpenThread and Simulating a Thread Network', + category: 'web', + duration: 45, + totalSteps: 11, + updatedAt: 'Jun 05, 2021', + featured: false, + progress: { + currentStep: 0, + completed: 0, + }, + }, + { + id: 'c202ebc9-9be3-433a-9d38-7003b3ed7b7a', + title: 'Your First Progressive Web App', + slug: 'your-first-progressive-web-app', + description: 'Step by step guide for creating a PWA from scratch', + category: 'web', + duration: 30, + totalSteps: 11, + updatedAt: 'Oct 14, 2021', + featured: false, + progress: { + currentStep: 0, + completed: 0, + }, + }, + { + id: '980ae7da-9f77-4e30-aa98-1b1ea594e775', + title: 'Launch Cloud Datalab', + slug: 'launch-cloud-datalab', + description: 'From start to finish: Launch Cloud Datalab', + category: 'cloud', + duration: 60, + totalSteps: 11, + updatedAt: 'Dec 16, 2021', + featured: false, + progress: { + currentStep: 0, + completed: 0, + }, + }, + { + id: 'c9748ea9-4117-492c-bdb2-55085b515978', + title: 'Cloud Firestore', + slug: 'cloud-firestore', + description: 'Step by step guide for setting up Cloud Firestore', + category: 'firebase', + duration: 90, + totalSteps: 11, + updatedAt: 'Apr 04, 2021', + featured: false, + progress: { + currentStep: 2, + completed: 0, + }, + }, +]; +export const demoCourseContent = ` +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam lab et fugiat id magnam minus nemo quam + voluptatem. Culpa deleniti explica nisi quod soluta. +

+

+ Alias animi labque, deserunt distinctio eum excepturi fuga iure labore magni molestias mollitia natus, officia pofro + quis sunt temporibus veritatis voluptatem, voluptatum. Aut blanditiis esse et illum maxim, obcaecati possimus + voluptate! Accusamus adipisci amet aperiam, assumenda consequuntur fugiat inventore iusto magnam molestias + natus necessitatibus, nulla pariatur. +

+

+ Amet distinctio enim itaque minima minus nesciunt recusandae soluta voluptatibus: +

+
+

+ Ad aliquid amet asperiores lab distinctio doloremque eaque, exercitationem explicabo, minus mollitia + natus necessitatibus odio omnis pofro rem. +

+
+

+ Alias architecto asperiores, dignissimos illum ipsam ipsum itaque, natus necessitatibus officiis, perferendis quae + sed ullam veniam vitae voluptas! Magni, nisi, quis! A accusamus animi commodi, consectetur distinctio + eaque, eos excepturi illum laboriosam maiores nam natus nulla officiis perspiciatis rem reprehenderit sed + tenetur veritatis. +

+

+ Consectetur dicta enim error eveniet expedita, facere in itaque labore natus quasi? Ad consectetur + eligendi facilis magni quae quis, quo temporibus voluptas voluptate voluptatem! +

+

+ Adipisci alias animi debitis eos et impedit maiores, modi nam nobis officia optio perspiciatis, rerum. + Accusantium esse nostrum odit quis quo: +

+
h1 a {{'{'}}
+    display: block;
+    width: 300px;
+    height: 80px;
+{{'}'}}
+

+ Accusantium aut autem, lab deleniti eaque fugiat fugit id ipsa iste molestiae, + necessitatibus nemo quasi + . +

+
+

+ Accusantium aspernatur autem enim +

+

+ Blanditiis, fugit voluptate! Assumenda blanditiis consectetur, labque cupiditate ducimus eaque earum, fugiat illum + ipsa, necessitatibus omnis quaerat reiciendis totam. Architecto, facere illum molestiae nihil nulla + quibusdam quidem vel! Atque blanditiis deserunt. +

+

+ Debitis deserunt doloremque labore laboriosam magni minus odit: +

+
    +
  1. Asperiores dicta esse maiores nobis officiis.
  2. +
  3. Accusamus aliquid debitis dolore illo ipsam molettiae possimus.
  4. +
  5. Magnam mollitia pariatur perspiciatis quasi quidem tenetur voluptatem! Adipisci aspernatur assumenda dicta.
  6. +
+

+ Animi fugit incidunt iure magni maiores molestias. +

+

+ Consequatur iusto soluta +

+

+ Aliquid asperiores corporis — deserunt dolorum ducimus eius eligendi explicabo quaerat suscipit voluptas. +

+

+ Deserunt dolor eos et illum laborum magni molestiae mollitia: +

+
+

Autem beatae consectetur consequatur, facere, facilis fugiat id illo, impedit numquam optio quis sunt ducimus illo.

+
+

+ Adipisci consequuntur doloribus facere in ipsam maxime molestias pofro quam: +

+
+ +
+ Accusamus blanditiis labque delectus esse et eum excepturi, impedit ipsam iste maiores minima mollitia, nihil obcaecati + placeat quaerat qui quidem sint unde! +
+
+

+ A beatae lab deleniti explicabo id inventore magni nisi omnis placeat praesentium quibusdam: +

+
    +
  • Dolorem eaque laboriosam omnis praesentium.
  • +
  • Atque debitis delectus distinctio doloremque.
  • +
  • Fuga illo impedit minima mollitia neque obcaecati.
  • +
+

+ Consequ eius eum excepturi explicabo. +

+

+ Adipisicing elit atque impedit? +

+

+ Atque distinctio doloremque ea qui quo, repellendus. +

+

+ Delectus deserunt explicabo facilis numquam quasi! Laboriosam, magni, quisquam. Aut, blanditiis commodi distinctio, facere fuga + hic itaque iure labore laborum maxime nemo neque provident quos recusandae sequi veritatis illum inventore iure qui rerum sapiente. +

+

+ Accusamus iusto sint aperiam consectetur … +

+

+ Aliquid assumenda ipsa nam odit pofro quaerat, quasi recusandae sint! Aut, esse explicabo facilis fugit illum iure magni + necessitatibus odio quas. +

+
    +
  • +

    Dolore natus placeat rem atque dignissimos laboriosam.

    +

    + Amet repudiandae voluptates architecto dignissimos repellendus voluptas dignissimos eveniet itaque maiores natus. +

    +

    + Accusamus aliquam debitis delectus dolorem ducimus enim eos, exercitationem fugiat id iusto nostrum quae quos + recusandae reiciendis rerum sequi temporibus veniam vero? Accusantium culpa, cupiditate ducimus eveniet id maiores modi + mollitia nisi aliquid dolorum ducimus et illo in. +

    +
  • +
  • +

    Ab amet deleniti dolor, et hic optio placeat.

    +

    + Accusantium ad alias beatae, consequatur consequuntur eos error eveniet expedita fuga laborum libero maxime nulla pofro + praesentium rem rerum saepe soluta ullam vero, voluptas? Architecto at debitis, doloribus harum iure libero natus odio + optio soluta veritatis voluptate. +

    +
  • +
  • +

    At aut consectetur nam necessitatibus neque nesciunt.

    +

    + Aut dignissimos labore nobis nostrum optio! Dolor id minima velit voluptatibus. Aut consequuntur eum exercitationem + fuga, harum id impedit molestiae natus neque numquam perspiciatis quam rem voluptatum. +

    +
  • +
+

+ Animi aperiam autem labque dolore enim ex expedita harum hic id impedit ipsa laborum modi mollitia non perspiciatis quae ratione. +

+

+ Alias eos excepturi facilis fugit. +

+

+ Alias asperiores, aspernatur corporis + delectus + est + facilis + inventore dolore + ipsa nobis nostrum officia quia, veritatis vero! At dolore est nesciunt numquam quam. Ab animi architecto aut, dignissimos + eos est eum explicabo. +

+

+ Adipisci autem consequuntur labque cupiditate dolor ducimus fuga neque nesciunt: +

+
module.exports = {{'{'}}
+    purge: [],
+    theme: {{'{'}}
+        extend: {{'{}'}},
+    },
+    variants: {{'{}'}},
+    plugins: [],
+{{'}'}}
+

+ Aliquid aspernatur eius fugit hic iusto. +

+

+ Dolorum ducimus expedita? +

+

+ Culpa debitis explicabo maxime minus quaerat reprehenderit temporibus! Asperiores, cupiditate ducimus esse est expedita fuga hic + ipsam necessitatibus placeat possimus? Amet animi aut consequuntur earum eveniet. +

+
    +
  1. + Aspernatur at beatae corporis debitis. +
      +
    • + Aperiam assumenda commodi lab dicta eius, “fugit ipsam“ itaque iure molestiae nihil numquam, officia omnis quia + repellendus sapiente sed. +
    • +
    • + Nulla odio quod saepe accusantium, adipisci autem blanditiis lab doloribus. +
    • +
    • + Explicabo facilis iusto molestiae nisi nostrum obcaecati officia. +
    • +
    +
  2. +
  3. + Nobis odio officiis optio quae quis quisquam quos rem. +
      +
    • Modi pariatur quod totam. Deserunt doloribus eveniet, expedita.
    • +
    • Ad beatae dicta et fugit libero optio quaerat rem repellendus./
    • +
    • Architecto atque consequuntur corporis id iste magni.
    • +
    +
  4. +
  5. + Deserunt non placeat unde veniam veritatis? Odio quod. +
      +
    • Inventore iure magni quod repellendus tempora. Magnam neque, quia. Adipisci amet.
    • +
    • Consectetur adipisicing elit.
    • +
    • labque eum expedita illo inventore iusto laboriosam nesciunt non, odio provident.
    • +
    +
  6. +
+

+ A aliquam architecto consequatur labque dicta doloremque <li> doloribus, ducimus earum, est <p> + eveniet explicabo fuga fugit ipsum minima minus molestias nihil nisi non qui sunt vel voluptatibus? A dolorum illum nihil quidem. +

+
    +
  • +

    + Laboriosam nesciunt obcaecati optio qui. +

    +

    + Doloremque magni molestias reprehenderit. +

    +
      +
    • Accusamus aperiam blanditiis <p> commodi
    • +
    • Dolorum ea explicabo fugiat in ipsum
    • +
    +
  • +
  • +

    + Commodi dolor dolorem dolores eum expedita libero. +

    +

    + Accusamus alias consectetur dolores et, excepturi fuga iusto possimus. +

    +
      +
    • +

      + Accusantium ad alias atque aut autem consequuntur deserunt dignissimos eaque iure <p> maxime. +

      +

      + Dolorum in nisi numquam omnis quam sapiente sit vero. +

      +
    • +
    • +

      + Adipisci lab in nisi odit soluta sunt vitae commodi excepturi. +

      +
    • +
    +
  • +
  • +

    + Assumenda deserunt distinctio dolor iste mollitia nihil non? +

    +
  • +
+

+ Consectetur adipisicing elit dicta dolor iste. +

+

+ Consectetur ea natus officia omnis reprehenderit. +

+

+ Distinctio impedit quaerat sed! Accusamus + aliquam aspernatur enim expedita explicabo + . Libero molestiae + odio quasi unde ut? Ab exercitationem id numquam odio quisquam! +

+

+ Explicabo facilis nemo quidem natus tempore: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WrestlerOriginFinisher
Bret “The Hitman” HartCalgary, ABSharpshooter
Stone Cold Steve AustinAustin, TXStone Cold Stunner
Randy SavageSarasota, FLElbow Drop
VaderBoulder, COVader Bomb
Razor RamonChuluota, FLRazor’s Edge
+

+ A aliquid autem lab doloremque, ea earum eum fuga fugit illo ipsa minus natus nisi <span> obcaecati pariatur + perferendis pofro suscipit tempore. +

+

+ Ad alias atque culpa illum earum optio +

+

+ Architecto consequatur eveniet illo in iure laborum minus omnis quibusdam sequi temporibus? Ab aliquid “atque dolores molestiae + nemo perferendis” reprehenderit saepe. +

+

+ Accusantium aliquid eligendi est fuga natus, quos vel? Adipisci aperiam asperiores aspernatur consectetur cupiditate + @distinctio/doloribus + et exercitationem expedita, facere facilis illum, impedit inventore + ipsa iure iusto magnam, magni minus nesciunt non officia possimus quod reiciendis. +

+

+ Cupiditate explicabo hic maiores +

+

+ Aliquam amet consequuntur distinctio ea est excepturi facere illum maiores nisi nobis non odit officiis + quisquam, similique tempora temporibus, tenetur ullam voluptates adipisci aperiam deleniti doloremque + ducimus eos. +

+

+ Ducimus qui quo tempora. lab enim explicabo hic inventore qui soluta voluptates voluptatum? Asperiores consectetur + delectus dolorem fugiat ipsa pariatur, quas quos repellendus repudiandae sunt aut blanditiis. +

+

+ Asperiores aspernatur autem error praesentium quidem. +

+

+ Ad blanditiis commodi, doloribus id iste repudiandae vero vitae. +

+

+ Atque consectetur lab debitis enim est et, facere fugit impedit, possimus quaerat quibusdam. +

+

+ Dolorem nihil placeat quibusdam veniam? Amet architecto at consequatur eligendi eveniet excepturi hic illo impedit in iste magni maxime + modi nisi nulla odio placeat quidem, quos rem repellat similique suscipit voluptate voluptates nobis omnis quo repellendus. +

+

+ Assumenda, eum, minima! Autem consectetur fugiat iste sit! Nobis omnis quo repellendus. +

+`; +export const demoCourseSteps = [ + { + order: 0, + title: 'Introduction', + subtitle: 'Introducing the library and how it works', + content: `

Introduction

${demoCourseContent}`, + }, + { + order: 1, + title: 'Get the sample code', + subtitle: 'Where to find the sample code and how to access it', + content: `

Get the sample code

${demoCourseContent}`, + }, + { + order: 2, + title: 'Create a Firebase project and Set up your app', + subtitle: + 'How to create a basic Firebase project and how to run it locally', + content: `

Create a Firebase project and Set up your app

${demoCourseContent}`, + }, + { + order: 3, + title: 'Install the Firebase Command Line Interface', + subtitle: 'Setting up the Firebase CLI to access command line tools', + content: `

Install the Firebase Command Line Interface

${demoCourseContent}`, + }, + { + order: 4, + title: 'Deploy and run the web app', + subtitle: 'How to build, push and run the project remotely', + content: `

Deploy and run the web app

${demoCourseContent}`, + }, + { + order: 5, + title: 'The Functions Directory', + subtitle: 'Introducing the Functions and Functions Directory', + content: `

The Functions Directory

${demoCourseContent}`, + }, + { + order: 6, + title: 'Import the Cloud Functions and Firebase Admin modules', + subtitle: 'Create your first Function and run it to administer your app', + content: `

Import the Cloud Functions and Firebase Admin modules

${demoCourseContent}`, + }, + { + order: 7, + title: 'Welcome New Users', + subtitle: 'How to create a welcome message for the new users', + content: `

Welcome New Users

${demoCourseContent}`, + }, + { + order: 8, + title: 'Images moderation', + subtitle: 'How to moderate images; crop, resize, optimize', + content: `

Images moderation

${demoCourseContent}`, + }, + { + order: 9, + title: 'New Message Notifications', + subtitle: 'How to create and push a notification to a user', + content: `

New Message Notifications

${demoCourseContent}`, + }, + { + order: 10, + title: 'Congratulations!', + subtitle: 'Nice work, you have created your first application', + content: `

Congratulations!

${demoCourseContent}`, + }, +]; diff --git a/src/app/mock-api/apps/chat/api.ts b/src/app/mock-api/apps/chat/api.ts new file mode 100644 index 0000000..cf7cfaa --- /dev/null +++ b/src/app/mock-api/apps/chat/api.ts @@ -0,0 +1,160 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep, omit } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { + chats as chatsData, + contacts as contactsData, + messages as messagesData, + profile as profileData, +} from 'app/mock-api/apps/chat/data'; + +@Injectable({ + providedIn: 'root', +}) +export class ChatMockApi { + private _chats: any[] = chatsData; + private _contacts: any[] = contactsData; + private _messages: any[] = messagesData; + private _profile: any = profileData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + + // Modify the chats array to attach certain data to it + this._chats = this._chats.map((chat: any) => ({ + ...chat, + // Get the actual contact object from the id and attach it to the chat + contact: this._contacts.find( + (contact: any) => contact.id === chat.contactId + ), + // Since we use same set of messages on all chats, we assign them here. + messages: this._messages.map((message: any) => ({ + ...message, + chatId: chat.id, + contactId: + message.contactId === 'me' ? this._profile.id : chat.contactId, + isMine: message.contactId === 'me', + })), + })); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Chats - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/apps/chat/chats').reply(() => { + // Clone the chats + const chats = cloneDeep(this._chats); + + // Return the response + return [200, chats]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Chat - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/chat/chat') + .reply(({ request }) => { + // Get the chat id + const id = request.params.get('id'); + + // Clone the chats + const chats = cloneDeep(this._chats); + + // Find the chat we need + const chat = chats.find((item: any) => item.id === id); + + // Return the response + return [200, chat]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Chat - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/chat/chat') + .reply(({ request }) => { + // Get the id and chat + const id = request.body.id; + const chat = cloneDeep(request.body.chat); + + // Prepare the updated chat + let updatedChat = null; + + // Find the chat and update it + this._chats.forEach((item, index, chats) => { + if (item.id === id) { + // Update the chat + chats[index] = assign({}, chats[index], chat); + + // Store the updated chat + updatedChat = chats[index]; + } + }); + + // Return the response + return [200, updatedChat]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Contacts - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/apps/chat/contacts').reply(() => { + // Clone the contacts + let contacts = cloneDeep(this._contacts); + + // Sort the contacts by the name field by default + contacts.sort((a, b) => a.name.localeCompare(b.name)); + + // Omit details and attachments from contacts + contacts = contacts.map((contact: any) => + omit(contact, ['details', 'attachments']) + ); + + // Return the response + return [200, contacts]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Contact Details - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/chat/contact') + .reply(({ request }) => { + // Get the contact id + const id = request.params.get('id'); + + // Clone the contacts + const contacts = cloneDeep(this._contacts); + + // Find the contact + const contact = contacts.find((item: any) => item.id === id); + + // Return the response + return [200, contact]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Profile - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/apps/chat/profile').reply(() => { + // Clone the profile + const profile = cloneDeep(this._profile); + + // Return the response + return [200, profile]; + }); + } +} diff --git a/src/app/mock-api/apps/chat/data.ts b/src/app/mock-api/apps/chat/data.ts new file mode 100644 index 0000000..6c59603 --- /dev/null +++ b/src/app/mock-api/apps/chat/data.ts @@ -0,0 +1,3015 @@ +/* eslint-disable */ +import * as moment from 'moment'; + +/** + * Attachments are common and will be filled from here + * to keep the demo data maintainable. + */ +const _attachments = { + media: [ + 'assets/images/cards/01-320x200.jpg', + 'assets/images/cards/02-320x200.jpg', + 'assets/images/cards/03-320x200.jpg', + 'assets/images/cards/04-320x200.jpg', + 'assets/images/cards/05-320x200.jpg', + 'assets/images/cards/06-320x200.jpg', + 'assets/images/cards/07-320x200.jpg', + 'assets/images/cards/08-320x200.jpg', + ], + docs: [], + links: [], +}; + +/** + * If a message belongs to our user, it's marked by setting it as + * 'me'. If it belongs to the user we are chatting with, then it + * left empty. We will be using this same conversation for each chat + * to keep things more maintainable for the demo. + */ +export const messages = [ + { + id: 'e6b2b82f-b199-4a60-9696-5f3e40d2715d', + chatId: '', + contactId: 'me', + value: 'Hi!', + createdAt: moment().subtract(1, 'week').hour(18).minute(56).toISOString(), + }, + { + id: 'eb82cf4b-fa93-4bf4-a88a-99e987ddb7ea', + chatId: '', + contactId: '', + value: 'Hey, dude!', + createdAt: moment().subtract(1, 'week').hour(19).minute(4).toISOString(), + }, + { + id: '3cf9b2a6-ae54-47db-97b2-ee139a8f84e5', + chatId: '', + contactId: '', + value: 'Long time no see.', + createdAt: moment().subtract(1, 'week').hour(19).minute(4).toISOString(), + }, + { + id: '2ab91b0f-fafb-45f3-88df-7efaff29134b', + chatId: '', + contactId: 'me', + value: 'Yeah, man... Things were quite busy for me and my family.', + createdAt: moment().subtract(1, 'week').hour(19).minute(6).toISOString(), + }, + { + id: '10e81481-378f-49ac-b06b-7c59dcc639ae', + chatId: '', + contactId: '', + value: "What's up? Anything I can help with?", + createdAt: moment().subtract(1, 'week').hour(19).minute(6).toISOString(), + }, + { + id: '3b334e72-6605-4ebd-a4f6-3850067048de', + chatId: '', + contactId: 'me', + value: "We've been on the move, changed 3 places over 4 months", + createdAt: moment().subtract(1, 'week').hour(19).minute(7).toISOString(), + }, + { + id: '25998113-3a96-4dd0-a7b9-4d2bb58db3f3', + chatId: '', + contactId: '', + value: "Wow! That's crazy! 🤯 What happened?", + createdAt: moment().subtract(1, 'week').hour(19).minute(7).toISOString(), + }, + { + id: '30adb3da-0e4f-487e-aec2-6d9f31e097f6', + chatId: '', + contactId: 'me', + value: + 'You know I got a job in that big software company. First move was because of that.', + createdAt: moment().subtract(1, 'week').hour(19).minute(8).toISOString(), + }, + { + id: 'c0d6fd6e-d294-4845-8751-e84b8f2c4d3b', + chatId: '', + contactId: 'me', + value: 'Then they decided to re-locate me after a month', + createdAt: moment().subtract(1, 'week').hour(19).minute(8).toISOString(), + }, + { + id: '8d3c442b-62fa-496f-bffa-210ff5c1866b', + chatId: '', + contactId: 'me', + value: + 'Which was an absolute pain because we just set up everything, house, kids school and all that.', + createdAt: moment().subtract(1, 'week').hour(19).minute(8).toISOString(), + }, + { + id: '3cf26ef0-e81f-4698-ac39-487454413332', + chatId: '', + contactId: 'me', + value: 'So we moved the second time.', + createdAt: moment().subtract(1, 'week').hour(19).minute(9).toISOString(), + }, + { + id: '415151b9-9ee9-40a4-a4ad-2d88146bc71b', + chatId: '', + contactId: '', + value: "It's crazy!", + createdAt: moment().subtract(1, 'week').hour(19).minute(9).toISOString(), + }, + { + id: '3a2d3a0e-839b-46e7-86ae-ca0826ecda7c', + chatId: '', + contactId: 'me', + value: + 'Then this virus thing happened and just after a week we moved in, they decided the whole department will be working remotely.', + createdAt: moment().subtract(1, 'week').hour(19).minute(10).toISOString(), + }, + { + id: '5329c20d-6754-47ec-af8c-660c72be3528', + chatId: '', + contactId: 'me', + value: + "And then we decided to move back our first location because, you know, everything was already setup so that's the third time.", + createdAt: moment().subtract(1, 'week').hour(19).minute(10).toISOString(), + }, + { + id: '415151b9-9ee9-40a4-a4ad-2d88146bc71b', + chatId: '', + contactId: '', + value: + "Ohh dude, I'm really sorry you had to go through all that in such a short period of time", + createdAt: moment().subtract(1, 'week').hour(19).minute(11).toISOString(), + }, + { + id: 'ea7662d5-7b72-4c19-ad6c-f80320541001', + chatId: '', + contactId: '', + value: '😕', + createdAt: moment().subtract(1, 'week').hour(19).minute(11).toISOString(), + }, + { + id: '3a2d3a0e-839b-46e7-86ae-ca0826ecda7c', + chatId: '', + contactId: 'me', + value: 'Thanks, man! It was good catching up with you.', + createdAt: moment().subtract(1, 'week').hour(19).minute(11).toISOString(), + }, + { + id: '5329c20d-6754-47ec-af8c-660c72be3528', + chatId: '', + contactId: '', + value: + 'Yeah dude. Hit me again next week so we can grab a coffee, remotely!', + createdAt: moment().subtract(1, 'week').hour(19).minute(12).toISOString(), + }, + { + id: '5329c20d-6754-47ec-af8c-660c72be3528', + chatId: '', + contactId: 'me', + value: ':) Sure, man! See you next week!', + createdAt: moment().subtract(1, 'week').hour(19).minute(12).toISOString(), + }, + { + id: '5329c20d-6754-47ec-af8c-660c72be3528', + chatId: '', + contactId: '', + value: 'See you later!', + createdAt: moment().subtract(1, 'week').hour(19).minute(12).toISOString(), + }, + { + id: 'bab8ca0e-b8e5-4375-807b-1c91fca25a5d', + chatId: '', + contactId: 'me', + value: + 'Hey! Are you available right now? How about if we grab that coffee today? Remotely, of course :)', + createdAt: moment().hour(12).minute(45).toISOString(), + }, + { + id: '8445a84d-599d-4e2d-a31c-5f4f29ad2b4c', + chatId: '', + contactId: '', + value: 'Hi!', + createdAt: moment().hour(12).minute(56).toISOString(), + }, + { + id: '9f506742-50da-4350-af9d-61e53392fa08', + chatId: '', + contactId: '', + value: "Sure thing! I'm gonna call you in 5, is it okay?", + createdAt: moment().hour(12).minute(56).toISOString(), + }, + { + id: 'ca8523d8-faed-45f7-af09-f6bd5c3f3875', + chatId: '', + contactId: 'me', + value: 'Awesome! Call me in 5 minutes..', + createdAt: moment().hour(12).minute(58).toISOString(), + }, + { + id: '39944b00-1ffe-4ffb-8ca6-13c292812e06', + chatId: '', + contactId: '', + value: '👍🏻', + createdAt: moment().hour(13).minute(0).toISOString(), + }, +]; +export const chats = [ + { + id: 'ff6bc7f1-449a-4419-af62-b89ce6cae0aa', + contactId: '9d3f0e7f-dcbd-4e56-a5e8-87b8154e9edf', + unreadCount: 2, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: '4459a3f0-b65e-4df2-8c37-6ec72fcc4b31', + contactId: '16b9e696-ea95-4dd8-86c4-3caf705a1dc6', + unreadCount: 0, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: 'f73a5a34-a723-4b35-8439-5289e0164c83', + contactId: 'bf172879-423a-4fd6-8df3-6d1938bbfe1f', + unreadCount: 1, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: '747f101c-0371-4ca3-9f20-cb913a80fe89', + contactId: 'abd9e78b-9e96-428f-b3ff-4d934c401bee', + unreadCount: 0, + muted: true, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: 'b3facfc4-dfc2-4ac2-b55d-cb70b3e68419', + contactId: '6519600a-5eaa-45f8-8bed-c46fddb3b26a', + unreadCount: 0, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: 'e3127982-9e53-4611-ac27-eb70c84be4aa', + contactId: 'b62359fd-f2a8-46e6-904e-31052d1cd675', + unreadCount: 0, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: 'a30351f3-bfa6-4ce3-b13a-82748fe0edee', + contactId: '2c37ed00-427a-46d7-8f8f-d711c768d1ee', + unreadCount: 0, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: '5636c0ba-fa47-42ca-9160-27340583041e', + contactId: 'b8258ccf-48b5-46a2-9c95-e0bd7580c645', + unreadCount: 0, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: 'feddd91a-51af-48d8-99b0-cd99ee060a36', + contactId: 'e2946946-b4b5-4fd7-bab4-62c38cdff2f1', + unreadCount: 0, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: '89421c2f-1751-4040-b09b-4a4268db47b9', + contactId: '12148fa2-e0a4-49fb-b3c5-daeecdb5180a', + unreadCount: 0, + muted: true, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: 'ffbbfdb4-0485-44aa-8521-5ce1eda3fd2f', + contactId: '81fdc48c-5572-4123-8a73-71b7892120de', + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: 'a477baea-df90-4e2f-b108-7791bcd50bc8', + contactId: 'a9a9f382-e4c3-42fb-9fe9-65aa534732b5', + unreadCount: 0, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: '450840c8-aa0b-47a4-b6ca-b864ad9a3a88', + contactId: '7e8e1f1e-d19f-45c7-86bd-6fef599dae71', + unreadCount: 0, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: '427270f0-841c-47f9-912c-3fd8139db5e6', + contactId: '8141dd08-3a6e-4770-912c-59d0ed06dde6', + unreadCount: 0, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, + { + id: '491b2918-e71e-4017-919e-0ba009afd003', + contactId: '114642a2-ccb7-4cb1-ad2b-5e9b6a0c1d2e', + unreadCount: 0, + muted: false, + lastMessage: 'See you tomorrow!', + lastMessageAt: '26/04/2021', + }, +]; +export const contacts = [ + { + id: 'cd5fa417-b667-482d-b208-798d9da3213c', + avatar: 'assets/images/avatars/male-01.jpg', + name: 'Dejesus Michael', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'dejesusmichael@mail.org', + label: 'Personal', + }, + { + email: 'michael.dejesus@vitricomp.io', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'bs', + phoneNumber: '984 531 2468', + label: 'Mobile', + }, + { + country: 'bs', + phoneNumber: '806 470 2693', + label: 'Work', + }, + ], + title: 'Track Service Worker', + company: 'Vitricomp', + birthday: '1975-01-10T12:00:00.000Z', + address: '279 Independence Avenue, Calvary, Guam, PO4127', + }, + attachments: _attachments, + }, + { + id: 'beec5287-ed50-4504-858a-5dc3f8ce6935', + avatar: null, + name: 'Dena Molina', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'denamolina@mail.us', + label: 'Personal', + }, + { + email: 'molina.dena@envire.tv', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'io', + phoneNumber: '934 537 3180', + label: 'Mobile', + }, + ], + title: 'Weather Analyst', + company: 'Envire', + birthday: '1994-12-05T12:00:00.000Z', + address: '856 Woodside Avenue, Alfarata, Iowa, PO4992', + }, + attachments: _attachments, + }, + { + id: '9d3f0e7f-dcbd-4e56-a5e8-87b8154e9edf', + avatar: 'assets/images/avatars/male-02.jpg', + name: 'Bernard Langley', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'bernardlangley@mail.com', + label: 'Personal', + }, + { + email: 'langley.bernard@boilcat.name', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'md', + phoneNumber: '893 548 2862', + label: 'Mobile', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Boilcat', + birthday: '1988-05-26T12:00:00.000Z', + address: '943 Adler Place, Hamilton, South Dakota, PO5592', + }, + attachments: _attachments, + }, + { + id: '42a5da95-5e6d-42fd-a09d-de755d123a47', + background: 'assets/images/cards/16-640x480.jpg', + name: 'Mclaughlin Steele', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'mclaughlinsteele@mail.me', + label: 'Personal', + }, + { + email: 'steele.mclaughlin@accel.info', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'va', + phoneNumber: '830 484 3813', + label: 'Mobile', + }, + { + country: 'va', + phoneNumber: '999 475 2789', + label: 'Work', + }, + { + country: 'va', + phoneNumber: '933 406 3598', + label: 'Home', + }, + ], + company: 'Accel', + birthday: '1968-08-13T12:00:00.000Z', + address: '334 Sandford Street, Savage, Virgin Islands, PO1858', + }, + attachments: _attachments, + }, + { + id: 'a7806ced-03f1-4197-8b30-00bdd463366b', + avatar: 'assets/images/avatars/male-04.jpg', + name: 'Marsh Cochran', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'marshcochran@mail.biz', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'tz', + phoneNumber: '864 401 3980', + label: 'Mobile', + }, + { + country: 'tz', + phoneNumber: '956 546 2589', + label: 'Work', + }, + ], + title: 'Fundraising Director', + company: 'Xsports', + birthday: '1983-12-22T12:00:00.000Z', + address: '487 Hamilton Walk, Bergoo, American Samoa, PO5616', + }, + attachments: _attachments, + }, + { + id: 'f4ad15d9-5a24-463a-88ea-6189d6bb3a53', + avatar: 'assets/images/avatars/male-05.jpg', + name: 'Parrish Austin', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'parrishaustin@mail.co.uk', + label: 'Personal', + }, + { + email: 'austin.parrish@insource.net', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'lv', + phoneNumber: '834 426 3574', + label: 'Mobile', + }, + { + country: 'lv', + phoneNumber: '816 573 3694', + label: 'Work', + }, + { + country: 'lv', + phoneNumber: '967 515 2009', + label: 'Home', + }, + ], + title: 'Motor Winder', + company: 'Insource', + birthday: '1963-08-24T12:00:00.000Z', + address: '610 Harbor Lane, Cascades, Minnesota, PO8639', + }, + attachments: _attachments, + }, + { + id: '780d0111-5e5c-4694-8d1d-0ea421971fbf', + avatar: 'assets/images/avatars/female-02.jpg', + name: 'Laverne Dodson', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'lavernedodson@mail.ca', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'ar', + phoneNumber: '964 417 2318', + label: 'Mobile', + }, + { + country: 'ar', + phoneNumber: '830 410 2506', + label: 'Work', + }, + ], + title: 'Television News Producer', + company: 'Lovepad', + birthday: '1973-09-25T12:00:00.000Z', + address: '428 Newport Street, Neahkahnie, Arkansas, PO8324', + }, + attachments: _attachments, + }, + { + id: 'bf172879-423a-4fd6-8df3-6d1938bbfe1f', + avatar: 'assets/images/avatars/male-06.jpg', + name: 'Edwards Mckenzie', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'edwardsmckenzie@mail.org', + label: 'Personal', + }, + { + email: 'mckenzie.edwards@bugsall.io', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'pe', + phoneNumber: '934 519 2903', + label: 'Mobile', + }, + { + country: 'pe', + phoneNumber: '989 489 3662', + label: 'Work', + }, + { + country: 'pe', + phoneNumber: '813 461 2790', + label: 'Home', + }, + ], + title: 'Legal Assistant', + company: 'Bugsall', + birthday: '1988-07-27T12:00:00.000Z', + address: '384 Polhemus Place, Dalton, Palau, PO6038', + }, + attachments: _attachments, + }, + { + id: '1eaa3213-ece2-4ba6-8e15-eb36ca388f50', + avatar: 'assets/images/avatars/female-03.jpg', + name: 'Trudy Berg', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'trudyberg@mail.us', + label: 'Personal', + }, + { + email: 'berg.trudy@satiance.tv', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'ls', + phoneNumber: '912 539 2770', + label: 'Mobile', + }, + ], + title: 'Meteorologist', + company: 'Satiance', + birthday: '1989-12-15T12:00:00.000Z', + address: '945 Jerome Avenue, Riceville, North Carolina, PO1625', + }, + attachments: _attachments, + }, + { + id: 'abd9e78b-9e96-428f-b3ff-4d934c401bee', + avatar: 'assets/images/avatars/female-04.jpg', + name: 'Elsie Melendez', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'elsiemelendez@mail.com', + label: 'Personal', + }, + { + email: 'melendez.elsie@chillium.name', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'tg', + phoneNumber: '907 515 3007', + label: 'Mobile', + }, + { + country: 'tg', + phoneNumber: '967 534 2803', + label: 'Work', + }, + ], + title: 'Fundraising Director', + company: 'Chillium', + birthday: '1980-06-28T12:00:00.000Z', + address: '428 Varanda Place, Veyo, Oklahoma, PO6188', + }, + attachments: _attachments, + }, + { + id: 'efae92cc-3bd1-4c6a-a395-b6760c69bd55', + avatar: 'assets/images/avatars/male-07.jpg', + name: 'Lamb Underwood', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'lambunderwood@mail.me', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'pf', + phoneNumber: '855 517 2767', + label: 'Mobile', + }, + { + country: 'pf', + phoneNumber: '906 442 3593', + label: 'Work', + }, + { + country: 'pf', + phoneNumber: '905 402 2121', + label: 'Home', + }, + ], + title: 'Legal Assistant', + company: 'Exotechno', + birthday: '1990-07-26T12:00:00.000Z', + address: '609 Greenpoint Avenue, Beason, Vermont, PO5229', + }, + attachments: _attachments, + }, + { + id: 'bde636a7-c3d2-4bff-939a-aab11df1516b', + avatar: null, + name: 'Tessa Valdez', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'tessavaldez@mail.info', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'dz', + phoneNumber: '892 430 2631', + label: 'Mobile', + }, + { + country: 'dz', + phoneNumber: '997 525 2354', + label: 'Work', + }, + { + country: 'dz', + phoneNumber: '907 472 2857', + label: 'Home', + }, + ], + title: 'Banker Mason', + company: 'Securia', + birthday: '1994-01-10T12:00:00.000Z', + address: '183 Crosby Avenue, Blanco, Mississippi, PO3463', + }, + attachments: _attachments, + }, + { + id: '6519600a-5eaa-45f8-8bed-c46fddb3b26a', + background: 'assets/images/cards/24-640x480.jpg', + name: 'Mcleod Wagner', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'mcleodwagner@mail.biz', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'at', + phoneNumber: '977 590 2773', + label: 'Mobile', + }, + { + country: 'at', + phoneNumber: '828 496 3813', + label: 'Work', + }, + { + country: 'at', + phoneNumber: '831 432 2512', + label: 'Home', + }, + ], + company: 'Inrt', + birthday: '1980-12-03T12:00:00.000Z', + address: '736 Glen Street, Kaka, West Virginia, PO9350', + }, + attachments: _attachments, + }, + { + id: '6d80a6f6-2884-4ac4-9c73-06b82c220017', + avatar: 'assets/images/avatars/female-06.jpg', + name: 'Kristie Hall', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'kristiehall@mail.co.uk', + label: 'Personal', + }, + { + email: 'hall.kristie@austech.net', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'tn', + phoneNumber: '841 530 3641', + label: 'Mobile', + }, + { + country: 'tn', + phoneNumber: '941 410 3743', + label: 'Work', + }, + { + country: 'tn', + phoneNumber: '938 599 3850', + label: 'Home', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Austech', + birthday: '1975-08-31T12:00:00.000Z', + address: '547 Revere Place, Hoehne, New Hampshire, PO2125', + }, + attachments: _attachments, + }, + { + id: '35190d23-036e-44ef-b545-cc744c626edd', + avatar: 'assets/images/avatars/female-07.jpg', + name: 'Shannon Kennedy', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'shannonkennedy@mail.ca', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'gb', + phoneNumber: '899 508 2992', + label: 'Mobile', + }, + { + country: 'gb', + phoneNumber: '834 499 3354', + label: 'Work', + }, + { + country: 'gb', + phoneNumber: '834 526 3388', + label: 'Home', + }, + ], + title: 'Gas Meter Mechanic', + company: 'Eventix', + birthday: '1994-09-07T12:00:00.000Z', + address: '480 Chase Court, Edinburg, Kansas, PO5357', + }, + attachments: _attachments, + }, + { + id: 'b018c194-68ec-4915-ab56-e9f3bd2d98db', + avatar: 'assets/images/avatars/female-08.jpg', + name: 'Martha Swanson', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'marthaswanson@mail.org', + label: 'Personal', + }, + { + email: 'swanson.martha@sequitur.io', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'gb', + phoneNumber: '844 480 3309', + label: 'Mobile', + }, + { + country: 'gb', + phoneNumber: '981 591 3239', + label: 'Work', + }, + { + country: 'gb', + phoneNumber: '923 484 3147', + label: 'Home', + }, + ], + title: 'Short Story Writer', + company: 'Sequitur', + birthday: '1993-12-31T12:00:00.000Z', + address: '595 Howard Place, Convent, Rhode Island, PO6993', + }, + attachments: _attachments, + }, + { + id: 'b7c355e9-e003-467e-82d2-4f6978c1a696', + avatar: 'assets/images/avatars/female-09.jpg', + name: 'Jacklyn Morgan', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'jacklynmorgan@mail.us', + label: 'Personal', + }, + { + email: 'morgan.jacklyn@shopabout.tv', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'so', + phoneNumber: '974 542 2061', + label: 'Mobile', + }, + ], + title: 'Animal Sitter', + company: 'Shopabout', + birthday: '1976-09-30T12:00:00.000Z', + address: '971 Conover Street, Statenville, Louisiana, PO6622', + }, + attachments: _attachments, + }, + { + id: 'cfa07b7c-93d1-42e7-9592-493d9efc78ae', + avatar: 'assets/images/avatars/female-10.jpg', + name: 'Tonya Bowers', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'tonyabowers@mail.com', + label: 'Personal', + }, + { + email: 'bowers.tonya@tourmania.name', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'tv', + phoneNumber: '922 585 2914', + label: 'Mobile', + }, + { + country: 'tv', + phoneNumber: '913 538 2961', + label: 'Work', + }, + ], + title: 'Track Service Worker', + company: 'Tourmania', + birthday: '1976-06-14T12:00:00.000Z', + address: '197 Marconi Place, Welda, Delaware, PO6061', + }, + attachments: _attachments, + }, + { + id: '00feeb63-c83a-4655-a37e-a07da10cfa1c', + avatar: 'assets/images/avatars/female-11.jpg', + name: 'Latonya Cruz', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'latonyacruz@mail.me', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'tm', + phoneNumber: '981 508 2080', + label: 'Mobile', + }, + { + country: 'tm', + phoneNumber: '817 425 2052', + label: 'Work', + }, + { + country: 'tm', + phoneNumber: '939 434 3805', + label: 'Home', + }, + ], + title: 'Motor Winder', + company: 'Zilch', + birthday: '1967-11-28T12:00:00.000Z', + address: '775 Dahill Road, Iberia, California, PO2169', + }, + attachments: _attachments, + }, + { + id: '142abf21-e635-4a7d-9330-e57f66adcdbe', + avatar: 'assets/images/avatars/female-12.jpg', + name: 'Evangelina Mcclain', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'evangelinamcclain@mail.info', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'ck', + phoneNumber: '992 583 3187', + label: 'Mobile', + }, + { + country: 'ck', + phoneNumber: '881 472 3297', + label: 'Work', + }, + { + country: 'ck', + phoneNumber: '846 477 3596', + label: 'Home', + }, + ], + title: 'Congressional Representative', + company: 'Straloy', + birthday: '1976-02-15T12:00:00.000Z', + address: '305 Columbia Street, Dupuyer, Puerto Rico, PO8744', + }, + attachments: _attachments, + }, + { + id: 'e4f255a3-b5dd-45a7-975f-c399604a399a', + avatar: 'assets/images/avatars/male-09.jpg', + name: 'Herring Gonzales', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'herringgonzales@mail.biz', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'ai', + phoneNumber: '995 411 2513', + label: 'Mobile', + }, + { + country: 'ai', + phoneNumber: '839 492 2760', + label: 'Work', + }, + ], + title: 'Gas Meter Mechanic', + company: 'Cubix', + birthday: '1995-02-16T12:00:00.000Z', + address: '195 Brooklyn Road, Jeff, Marshall Islands, PO2943', + }, + attachments: _attachments, + }, + { + id: 'ab4f712d-d712-41a8-b567-be4c66c349a3', + avatar: 'assets/images/avatars/female-13.jpg', + name: 'Alyce Cash', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'alycecash@mail.co.uk', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'ht', + phoneNumber: '969 499 3077', + label: 'Mobile', + }, + { + country: 'ht', + phoneNumber: '907 513 2784', + label: 'Work', + }, + ], + title: 'Weather Analyst', + company: 'Qnekt', + birthday: '1973-12-19T12:00:00.000Z', + address: '964 Henry Street, Eureka, Indiana, PO1035', + }, + attachments: _attachments, + }, + { + id: '5d067800-c301-46c6-a7f7-28dc89d9a554', + avatar: null, + name: 'Kristine Pacheco', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'kristinepacheco@mail.net', + label: 'Personal', + }, + { + email: 'pacheco.kristine@vurbo.ca', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'mm', + phoneNumber: '977 516 2492', + label: 'Mobile', + }, + ], + title: 'Short Story Writer', + company: 'Vurbo', + birthday: '1985-10-22T12:00:00.000Z', + address: '622 Dodworth Street, Rose, Arizona, PO9530', + }, + attachments: _attachments, + }, + { + id: 'c500255a-1173-47d0-a0e4-4944d48fc12a', + avatar: 'assets/images/avatars/male-10.jpg', + name: 'English Haney', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'englishhaney@mail.org', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'lb', + phoneNumber: '989 567 3834', + label: 'Mobile', + }, + ], + title: 'Meteorologist', + company: 'Photobin', + birthday: '1969-09-05T12:00:00.000Z', + address: '579 Pooles Lane, Belleview, Montana, PO4106', + }, + attachments: _attachments, + }, + { + id: 'b62359fd-f2a8-46e6-904e-31052d1cd675', + avatar: 'assets/images/avatars/male-11.jpg', + name: 'Joseph Strickland', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'josephstrickland@mail.io', + label: 'Personal', + }, + { + email: 'strickland.joseph@bytrex.us', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'jo', + phoneNumber: '990 450 2729', + label: 'Mobile', + }, + ], + title: 'Hotel Manager', + company: 'Bytrex', + birthday: '1991-09-08T12:00:00.000Z', + address: '844 Ellery Street, Hondah, Texas, PO1272', + }, + attachments: _attachments, + }, + { + id: '16b9e696-ea95-4dd8-86c4-3caf705a1dc6', + avatar: 'assets/images/avatars/male-12.jpg', + name: 'Nunez Faulkner', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'nunezfaulkner@mail.tv', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'xk', + phoneNumber: '909 552 3327', + label: 'Mobile', + }, + ], + title: 'Hotel Manager', + company: 'Buzzopia', + birthday: '1982-01-23T12:00:00.000Z', + address: '614 Herkimer Court, Darrtown, Nebraska, PO9308', + }, + attachments: _attachments, + }, + { + id: '19662ecf-0686-4aad-a46c-24b552eb2ff5', + avatar: 'assets/images/avatars/female-15.jpg', + name: 'Juana Morrow', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'juanamorrow@mail.com', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'ee', + phoneNumber: '868 438 3943', + label: 'Mobile', + }, + ], + title: 'Meteorologist', + company: 'Lyria', + birthday: '1992-03-29T12:00:00.000Z', + address: '663 Drew Street, Juntura, Georgia, PO9857', + }, + attachments: _attachments, + }, + { + id: '26dfe954-8bf3-45ee-b285-1d0a88c8d3ea', + avatar: 'assets/images/avatars/male-13.jpg', + name: 'Lara Gaines', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'laragaines@mail.name', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'mr', + phoneNumber: '891 498 2043', + label: 'Mobile', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Acruex', + birthday: '1961-06-07T12:00:00.000Z', + address: '762 Troutman Street, Drummond, Oregon, PO6973', + }, + attachments: _attachments, + }, + { + id: 'd6462af2-c488-4de7-9b26-3845bd2983f9', + avatar: 'assets/images/avatars/male-14.jpg', + name: 'Johnston Riddle', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'johnstonriddle@mail.me', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bt', + phoneNumber: '979 541 2691', + label: 'Mobile', + }, + { + country: 'bt', + phoneNumber: '909 407 3887', + label: 'Work', + }, + { + country: 'bt', + phoneNumber: '864 557 3128', + label: 'Home', + }, + ], + title: 'Hotel Manager', + company: 'Xleen', + birthday: '1972-09-13T12:00:00.000Z', + address: + '674 Bryant Street, Grahamtown, Federated States Of Micronesia, PO2757', + }, + attachments: _attachments, + }, + { + id: 'a1723c04-69fe-4573-a135-6645658afe76', + avatar: null, + name: 'Vargas Gardner', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'vargasgardner@mail.info', + label: 'Personal', + }, + { + email: 'gardner.vargas@cosmosis.biz', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'bi', + phoneNumber: '855 456 2754', + label: 'Mobile', + }, + ], + title: 'Bindery Machine Operator', + company: 'Cosmosis', + birthday: '1979-10-21T12:00:00.000Z', + address: '869 Seton Place, Chemung, Maine, PO8109', + }, + attachments: _attachments, + }, + { + id: '823e6166-c0c8-4373-9270-8a0d17489a08', + avatar: 'assets/images/avatars/male-16.jpg', + name: 'Mccall Day', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'mccallday@mail.co.uk', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'se', + phoneNumber: '993 504 3286', + label: 'Mobile', + }, + { + country: 'se', + phoneNumber: '924 434 2238', + label: 'Work', + }, + { + country: 'se', + phoneNumber: '816 466 2634', + label: 'Home', + }, + ], + title: 'Historiographer', + company: 'Nipaz', + birthday: '1964-03-05T12:00:00.000Z', + address: '854 Hanover Place, Harleigh, New Jersey, PO9459', + }, + attachments: _attachments, + }, + { + id: '2c37ed00-427a-46d7-8f8f-d711c768d1ee', + avatar: 'assets/images/avatars/male-17.jpg', + name: 'Silva Foster', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'silvafoster@mail.net', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bn', + phoneNumber: '916 511 3837', + label: 'Mobile', + }, + { + country: 'bn', + phoneNumber: '949 564 3247', + label: 'Work', + }, + ], + title: 'Insurance Analyst', + company: 'Extrawear', + birthday: '1980-04-29T12:00:00.000Z', + address: '137 Bridge Street, Sisquoc, District Of Columbia, PO4105', + }, + attachments: _attachments, + }, + { + id: '944764c0-b261-4428-9188-bbd3022d66a8', + avatar: 'assets/images/avatars/female-16.jpg', + name: 'Cathryn Snider', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'cathrynsnider@mail.ca', + label: 'Personal', + }, + { + email: 'snider.cathryn@phormula.org', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'na', + phoneNumber: '896 471 3036', + label: 'Mobile', + }, + { + country: 'na', + phoneNumber: '851 491 3567', + label: 'Work', + }, + { + country: 'na', + phoneNumber: '805 487 2016', + label: 'Home', + }, + ], + title: 'Short Story Writer', + company: 'Phormula', + birthday: '1981-06-09T12:00:00.000Z', + address: '528 Glenmore Avenue, Elrama, Illinois, PO2952', + }, + attachments: _attachments, + }, + { + id: 'f2b3c756-5ad2-4d4b-aee5-b32c91457128', + avatar: null, + name: 'Mooney Cantrell', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'mooneycantrell@mail.io', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bh', + phoneNumber: '915 577 3020', + label: 'Mobile', + }, + { + country: 'bh', + phoneNumber: '923 431 3594', + label: 'Work', + }, + ], + title: 'Fundraising Director', + company: 'Crustatia', + birthday: '1968-12-07T12:00:00.000Z', + address: '277 Coventry Road, Fairforest, Nevada, PO6031', + }, + attachments: _attachments, + }, + { + id: '54b1c201-4b2b-4be0-ad70-a6413e9628cd', + avatar: 'assets/images/avatars/female-17.jpg', + name: 'Saundra Murphy', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'saundramurphy@mail.us', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'mt', + phoneNumber: '902 529 2999', + label: 'Mobile', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Zilencio', + birthday: '1983-11-07T12:00:00.000Z', + address: '557 Monroe Street, Mayfair, Maryland, PO7200', + }, + attachments: _attachments, + }, + { + id: 'faf979c7-a13b-445a-b30a-08845f5fa90e', + avatar: 'assets/images/avatars/female-18.jpg', + name: 'Enid Sparks', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'enidsparks@mail.tv', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bh', + phoneNumber: '813 410 3258', + label: 'Mobile', + }, + { + country: 'bh', + phoneNumber: '877 501 2767', + label: 'Work', + }, + ], + title: 'Historiographer', + company: 'Skybold', + birthday: '1984-05-04T12:00:00.000Z', + address: '219 Village Court, Keyport, Alabama, PO7776', + }, + attachments: _attachments, + }, + { + id: '2bfa2be5-7688-48d5-b5ac-dc0d9ac97f14', + avatar: null, + name: 'Nadia Mcknight', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'nadiamcknight@mail.com', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'tk', + phoneNumber: '943 511 2203', + label: 'Mobile', + }, + { + country: 'tk', + phoneNumber: '817 578 2993', + label: 'Work', + }, + ], + title: 'Legal Assistant', + company: 'Pearlesex', + birthday: '1973-10-06T12:00:00.000Z', + address: '448 Berriman Street, Reinerton, Washington, PO6704', + }, + attachments: _attachments, + }, + { + id: '77a4383b-b5a5-4943-bc46-04c3431d1566', + avatar: 'assets/images/avatars/male-19.jpg', + name: 'Best Blackburn', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'bestblackburn@mail.name', + label: 'Personal', + }, + { + email: 'blackburn.best@beadzza.me', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'gl', + phoneNumber: '814 498 3701', + label: 'Mobile', + }, + ], + title: 'Hotel Manager', + company: 'Beadzza', + birthday: '1987-06-07T12:00:00.000Z', + address: '578 Tampa Court, Wescosville, Ohio, PO4108', + }, + attachments: _attachments, + }, + { + id: '8bb0f597-673a-47ca-8c77-2f83219cb9af', + avatar: null, + name: 'Duncan Carver', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'duncancarver@mail.info', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'jm', + phoneNumber: '968 547 2111', + label: 'Mobile', + }, + { + country: 'jm', + phoneNumber: '968 433 3120', + label: 'Work', + }, + { + country: 'jm', + phoneNumber: '905 425 2777', + label: 'Home', + }, + ], + title: 'Historiographer', + company: 'Hotcakes', + birthday: '1980-09-15T12:00:00.000Z', + address: '931 Bristol Street, Why, South Carolina, PO9700', + }, + attachments: _attachments, + }, + { + id: 'c318e31f-1d74-49c5-8dae-2bc5805e2fdb', + avatar: 'assets/images/avatars/male-01.jpg', + name: 'Martin Richards', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'martinrichards@mail.biz', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'mg', + phoneNumber: '902 500 2668', + label: 'Mobile', + }, + { + country: 'mg', + phoneNumber: '947 559 2919', + label: 'Work', + }, + { + country: 'mg', + phoneNumber: '934 434 3768', + label: 'Home', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Overfork', + birthday: '1977-04-12T12:00:00.000Z', + address: '268 Hutchinson Court, Drytown, Florida, PO3041', + }, + attachments: _attachments, + }, + { + id: '0a8bc517-631a-4a93-aacc-000fa2e8294c', + avatar: 'assets/images/avatars/female-20.jpg', + name: 'Candice Munoz', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'candicemunoz@mail.co.uk', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'fm', + phoneNumber: '838 562 2769', + label: 'Mobile', + }, + ], + title: 'Legal Assistant', + company: 'Eclipto', + birthday: '1976-09-09T12:00:00.000Z', + address: '946 Remsen Street, Caroline, New Mexico, PO3247', + }, + attachments: _attachments, + }, + { + id: 'a4c9945a-757b-40b0-8942-d20e0543cabd', + avatar: 'assets/images/avatars/female-01.jpg', + name: 'Vickie Mosley', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'vickiemosley@mail.net', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'tr', + phoneNumber: '939 555 3054', + label: 'Mobile', + }, + { + country: 'tr', + phoneNumber: '852 486 2053', + label: 'Work', + }, + ], + title: 'Bindery Machine Operator', + company: 'Strozen', + birthday: '1989-06-21T12:00:00.000Z', + address: '397 Vandalia Avenue, Rockingham, Michigan, PO8089', + }, + attachments: _attachments, + }, + { + id: 'b8258ccf-48b5-46a2-9c95-e0bd7580c645', + avatar: 'assets/images/avatars/female-02.jpg', + name: 'Tina Harris', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'tinaharris@mail.ca', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'gp', + phoneNumber: '933 464 2431', + label: 'Mobile', + }, + { + country: 'gp', + phoneNumber: '894 535 3609', + label: 'Work', + }, + ], + title: 'Short Story Writer', + company: 'Gallaxia', + birthday: '1976-09-10T12:00:00.000Z', + address: '821 Beverly Road, Tyro, Colorado, PO4248', + }, + attachments: _attachments, + }, + { + id: 'f004ea79-98fc-436c-9ba5-6cfe32fe583d', + avatar: 'assets/images/avatars/male-02.jpg', + name: 'Holt Manning', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'holtmanning@mail.org', + label: 'Personal', + }, + { + email: 'manning.holt@idetica.io', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'nz', + phoneNumber: '822 531 2600', + label: 'Mobile', + }, + { + country: 'nz', + phoneNumber: '922 549 2094', + label: 'Work', + }, + ], + title: 'Fundraising Director', + company: 'Idetica', + birthday: '1973-11-08T12:00:00.000Z', + address: '364 Porter Avenue, Delshire, Missouri, PO8911', + }, + attachments: _attachments, + }, + { + id: '8b69fe2d-d7cc-4a3d-983d-559173e37d37', + background: 'assets/images/cards/28-640x480.jpg', + name: 'Misty Ramsey', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'mistyramsey@mail.us', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'kp', + phoneNumber: '990 457 2106', + label: 'Mobile', + }, + { + country: 'kp', + phoneNumber: '918 550 2946', + label: 'Work', + }, + ], + company: 'Grupoli', + birthday: '1969-08-10T12:00:00.000Z', + address: '101 Sackett Street, Naomi, Tennessee, PO6335', + }, + attachments: _attachments, + }, + { + id: 'cdcc62e4-1520-4ccc-803d-52868c7e01ba', + avatar: 'assets/images/avatars/female-04.jpg', + name: 'Dee Alvarado', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'deealvarado@mail.tv', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'nu', + phoneNumber: '855 445 2483', + label: 'Mobile', + }, + { + country: 'nu', + phoneNumber: '858 415 2860', + label: 'Work', + }, + { + country: 'nu', + phoneNumber: '968 587 2752', + label: 'Home', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Tsunamia', + birthday: '1996-06-17T12:00:00.000Z', + address: '956 Pierrepont Street, Crumpler, Hawaii, PO3299', + }, + attachments: _attachments, + }, + { + id: 'e2946946-b4b5-4fd7-bab4-62c38cdff2f1', + avatar: 'assets/images/avatars/female-05.jpg', + name: 'Samantha Jacobson', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'samanthajacobson@mail.com', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'es', + phoneNumber: '879 591 3327', + label: 'Mobile', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Emoltra', + birthday: '1972-02-04T12:00:00.000Z', + address: '384 Love Lane, Dyckesville, New York, PO4115', + }, + attachments: _attachments, + }, + { + id: 'fdc77706-6ba2-4397-b2f8-a9a0b6495153', + avatar: 'assets/images/avatars/female-06.jpg', + name: 'Rhea Landry', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'rhealandry@mail.name', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'jp', + phoneNumber: '906 579 3698', + label: 'Mobile', + }, + { + country: 'jp', + phoneNumber: '841 475 2681', + label: 'Work', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Comtent', + birthday: '1988-05-22T12:00:00.000Z', + address: '725 Arlington Avenue, Mathews, Wyoming, PO4562', + }, + attachments: _attachments, + }, + { + id: '12148fa2-e0a4-49fb-b3c5-daeecdb5180a', + avatar: 'assets/images/avatars/female-07.jpg', + name: 'Olga Rhodes', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'olgarhodes@mail.me', + label: 'Personal', + }, + { + email: 'rhodes.olga@moreganic.info', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'tl', + phoneNumber: '971 514 3366', + label: 'Mobile', + }, + { + country: 'tl', + phoneNumber: '807 480 2033', + label: 'Work', + }, + { + country: 'tl', + phoneNumber: '810 528 3783', + label: 'Home', + }, + ], + title: 'Pastry Baker', + company: 'Moreganic', + birthday: '1971-08-13T12:00:00.000Z', + address: '253 Beard Street, Staples, Massachusetts, PO8089', + }, + attachments: _attachments, + }, + { + id: '07dd64eb-8b8f-4765-a16c-8db083c45096', + avatar: 'assets/images/avatars/female-08.jpg', + name: 'Lorraine Pennington', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'lorrainepennington@mail.biz', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'fm', + phoneNumber: '932 404 3308', + label: 'Mobile', + }, + { + country: 'fm', + phoneNumber: '979 550 3200', + label: 'Work', + }, + { + country: 'fm', + phoneNumber: '868 557 3568', + label: 'Home', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Marvane', + birthday: '1967-06-10T12:00:00.000Z', + address: '962 Whitney Avenue, Sussex, North Dakota, PO5796', + }, + attachments: _attachments, + }, + { + id: '81fdc48c-5572-4123-8a73-71b7892120de', + avatar: 'assets/images/avatars/female-09.jpg', + name: 'Earlene Rosales', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'earlenerosales@mail.co.uk', + label: 'Personal', + }, + { + email: 'rosales.earlene@softmicro.net', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'ki', + phoneNumber: '927 589 3619', + label: 'Mobile', + }, + ], + title: 'Historiographer', + company: 'Softmicro', + birthday: '1960-11-13T12:00:00.000Z', + address: '981 Kingston Avenue, Topaz, Connecticut, PO6866', + }, + attachments: _attachments, + }, + { + id: 'f8bbf6be-d49a-41a3-bb80-3d51df84c12b', + avatar: 'assets/images/avatars/female-10.jpg', + name: 'Marcia Hatfield', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'marciahatfield@mail.ca', + label: 'Personal', + }, + { + email: 'hatfield.marcia@datagen.org', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'no', + phoneNumber: '883 432 3718', + label: 'Mobile', + }, + { + country: 'no', + phoneNumber: '934 516 2135', + label: 'Work', + }, + { + country: 'no', + phoneNumber: '923 596 3843', + label: 'Home', + }, + ], + title: 'Track Service Worker', + company: 'Datagen', + birthday: '1980-02-26T12:00:00.000Z', + address: '802 Preston Court, Waikele, Pennsylvania, PO7421', + }, + attachments: _attachments, + }, + { + id: 'cd482941-3eaf-4560-ac37-56a9296025df', + avatar: 'assets/images/avatars/female-11.jpg', + name: 'Liliana Ayala', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'lilianaayala@mail.io', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bd', + phoneNumber: '936 590 2412', + label: 'Mobile', + }, + ], + title: 'Insurance Analyst', + company: 'Pharmex', + birthday: '1988-04-27T12:00:00.000Z', + address: '935 Guider Avenue, Kipp, Wisconsin, PO5282', + }, + attachments: _attachments, + }, + { + id: '22f18d47-ff8d-440e-888d-a1747c093052', + avatar: 'assets/images/avatars/female-12.jpg', + name: 'Alice Harding', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'aliceharding@mail.us', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'sx', + phoneNumber: '881 472 3113', + label: 'Mobile', + }, + { + country: 'sx', + phoneNumber: '974 548 3124', + label: 'Work', + }, + { + country: 'sx', + phoneNumber: '800 518 3615', + label: 'Home', + }, + ], + title: 'Track Service Worker', + company: 'Futurity', + birthday: '1985-09-17T12:00:00.000Z', + address: '387 Holt Court, Thomasville, Alaska, PO2867', + }, + attachments: _attachments, + }, + { + id: 'a9a9f382-e4c3-42fb-9fe9-65aa534732b5', + avatar: 'assets/images/avatars/female-13.jpg', + name: 'Francisca Perkins', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'franciscaperkins@mail.tv', + label: 'Personal', + }, + { + email: 'perkins.francisca@overplex.com', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'au', + phoneNumber: '830 430 3437', + label: 'Mobile', + }, + { + country: 'au', + phoneNumber: '868 538 2886', + label: 'Work', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Overplex', + birthday: '1966-08-14T12:00:00.000Z', + address: '733 Delmonico Place, Belvoir, Virginia, PO7102', + }, + attachments: _attachments, + }, + { + id: '0222b24b-c288-48d1-b356-0f087fa172f8', + avatar: null, + name: 'Warren Gates', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'warrengates@mail.name', + label: 'Personal', + }, + { + email: 'gates.warren@qualitex.me', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'gt', + phoneNumber: '847 513 2248', + label: 'Mobile', + }, + { + country: 'gt', + phoneNumber: '866 591 3665', + label: 'Work', + }, + { + country: 'gt', + phoneNumber: '877 539 3840', + label: 'Home', + }, + ], + title: 'Banker Mason', + company: 'Qualitex', + birthday: '1977-02-23T12:00:00.000Z', + address: '713 Fane Court, Lemoyne, Kentucky, PO3601', + }, + attachments: _attachments, + }, + { + id: '0630f1ca-cdb9-405d-b134-68f733334089', + avatar: 'assets/images/avatars/female-14.jpg', + name: 'Maryann Mcintyre', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'maryannmcintyre@mail.info', + label: 'Personal', + }, + { + email: 'mcintyre.maryann@aquafire.biz', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'bf', + phoneNumber: '861 419 2752', + label: 'Mobile', + }, + { + country: 'bf', + phoneNumber: '935 553 3031', + label: 'Work', + }, + ], + title: 'Fundraising Director', + company: 'Aquafire', + birthday: '1963-04-07T12:00:00.000Z', + address: '698 Brooklyn Avenue, Dixonville, Utah, PO2712', + }, + attachments: _attachments, + }, + { + id: '999c24f3-7bb8-4a01-85ca-2fca7863c57e', + avatar: 'assets/images/avatars/female-15.jpg', + name: 'Sharon Marshall', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'sharonmarshall@mail.co.uk', + label: 'Personal', + }, + { + email: 'marshall.sharon@utara.net', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'fo', + phoneNumber: '947 441 2999', + label: 'Mobile', + }, + { + country: 'fo', + phoneNumber: '984 441 2615', + label: 'Work', + }, + { + country: 'fo', + phoneNumber: '824 541 2714', + label: 'Home', + }, + ], + title: 'Legal Assistant', + company: 'Utara', + birthday: '1960-01-26T12:00:00.000Z', + address: '923 Ivan Court, Hatteras, Idaho, PO7573', + }, + attachments: _attachments, + }, + { + id: '7e8e1f1e-d19f-45c7-86bd-6fef599dae71', + avatar: 'assets/images/avatars/female-16.jpg', + name: 'Margo Witt', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'margowitt@mail.ca', + label: 'Personal', + }, + { + email: 'witt.margo@norsul.org', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'ao', + phoneNumber: '992 596 3391', + label: 'Mobile', + }, + { + country: 'ao', + phoneNumber: '950 489 2505', + label: 'Work', + }, + { + country: 'ao', + phoneNumber: '891 540 2231', + label: 'Home', + }, + ], + title: 'Television News Producer', + company: 'Norsul', + birthday: '1975-08-31T12:00:00.000Z', + address: '539 Rockaway Avenue, Whitmer, Guam, PO4871', + }, + attachments: _attachments, + }, + { + id: 'bedcb6a2-da83-4631-866a-77d10d239477', + avatar: 'assets/images/avatars/male-04.jpg', + name: 'Alvarado Turner', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'alvaradoturner@mail.io', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'lv', + phoneNumber: '961 537 3956', + label: 'Mobile', + }, + ], + title: 'Fundraising Director', + company: 'Geologix', + birthday: '1985-12-08T12:00:00.000Z', + address: '233 Willmohr Street, Cressey, Iowa, PO1962', + }, + attachments: _attachments, + }, + { + id: '66f9de1b-f842-4d4c-bb59-f97e91db0462', + avatar: 'assets/images/avatars/male-05.jpg', + name: 'Maldonado Rodriquez', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'maldonadorodriquez@mail.us', + label: 'Personal', + }, + { + email: 'rodriquez.maldonado@zentility.tv', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'et', + phoneNumber: '811 502 3398', + label: 'Mobile', + }, + { + country: 'et', + phoneNumber: '877 402 2443', + label: 'Work', + }, + { + country: 'et', + phoneNumber: '949 536 3451', + label: 'Home', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Zentility', + birthday: '1993-06-01T12:00:00.000Z', + address: '916 Cobek Court, Morningside, South Dakota, PO2019', + }, + attachments: _attachments, + }, + { + id: '9cb0ea57-3461-4182-979b-593b0c1ec6c3', + avatar: 'assets/images/avatars/male-06.jpg', + name: 'Tran Duke', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'tranduke@mail.com', + label: 'Personal', + }, + { + email: 'duke.tran@splinx.name', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'si', + phoneNumber: '837 503 2254', + label: 'Mobile', + }, + { + country: 'si', + phoneNumber: '893 405 3190', + label: 'Work', + }, + { + country: 'si', + phoneNumber: '931 402 3874', + label: 'Home', + }, + ], + title: 'Legal Assistant', + company: 'Splinx', + birthday: '1976-04-27T12:00:00.000Z', + address: '405 Canarsie Road, Richville, Virgin Islands, PO2744', + }, + attachments: _attachments, + }, + { + id: '2fb89a90-5622-4b5b-8df3-d49b85905392', + avatar: null, + name: 'Estela Lyons', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'estelalyons@mail.me', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'vg', + phoneNumber: '864 459 3205', + label: 'Mobile', + }, + { + country: 'vg', + phoneNumber: '886 524 2880', + label: 'Work', + }, + { + country: 'vg', + phoneNumber: '815 484 3420', + label: 'Home', + }, + ], + title: 'Animal Sitter', + company: 'Gonkle', + birthday: '1968-03-11T12:00:00.000Z', + address: '540 Metrotech Courtr, Garfield, American Samoa, PO2290', + }, + attachments: _attachments, + }, + { + id: '8141dd08-3a6e-4770-912c-59d0ed06dde6', + avatar: null, + name: 'Madeleine Fletcher', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'madeleinefletcher@mail.info', + label: 'Personal', + }, + { + email: 'fletcher.madeleine@genmom.biz', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'uy', + phoneNumber: '898 554 3354', + label: 'Mobile', + }, + ], + title: 'Fundraising Director', + company: 'Genmom', + birthday: '1970-07-15T12:00:00.000Z', + address: '825 Cherry Street, Foscoe, Minnesota, PO7290', + }, + attachments: _attachments, + }, + { + id: '7585015c-ada2-4f88-998d-9646865d1ad2', + avatar: 'assets/images/avatars/male-07.jpg', + name: 'Meyer Roach', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'meyerroach@mail.co.uk', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'uz', + phoneNumber: '891 543 2053', + label: 'Mobile', + }, + { + country: 'uz', + phoneNumber: '842 564 3671', + label: 'Work', + }, + { + country: 'uz', + phoneNumber: '992 491 3514', + label: 'Home', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Zentime', + birthday: '1968-10-16T12:00:00.000Z', + address: '315 Albemarle Road, Allison, Arkansas, PO6008', + }, + attachments: _attachments, + }, + { + id: '32c73a6a-67f2-48a9-b2a1-b23da83187bb', + avatar: null, + name: 'Bolton Obrien', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'boltonobrien@mail.net', + label: 'Personal', + }, + { + email: 'obrien.bolton@enersol.ca', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'tn', + phoneNumber: '860 472 2458', + label: 'Mobile', + }, + { + country: 'tn', + phoneNumber: '887 499 3580', + label: 'Work', + }, + ], + title: 'Banker Mason', + company: 'Enersol', + birthday: '1968-09-08T12:00:00.000Z', + address: '818 Aviation Road, Geyserville, Palau, PO9655', + }, + attachments: _attachments, + }, + { + id: '114642a2-ccb7-4cb1-ad2b-5e9b6a0c1d2e', + avatar: 'assets/images/avatars/male-09.jpg', + name: 'Barber Johnson', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'barberjohnson@mail.org', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'az', + phoneNumber: '928 567 2521', + label: 'Mobile', + }, + { + country: 'az', + phoneNumber: '898 515 2048', + label: 'Work', + }, + { + country: 'az', + phoneNumber: '935 495 3348', + label: 'Home', + }, + ], + title: 'Talent Manager', + company: 'Zounds', + birthday: '1967-03-02T12:00:00.000Z', + address: '386 Vernon Avenue, Dragoon, North Carolina, PO4559', + }, + attachments: _attachments, + }, + { + id: '310ece7d-dbb0-45d6-9e69-14c24e50fe3d', + avatar: 'assets/images/avatars/male-10.jpg', + name: 'Cervantes Kramer', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'cervanteskramer@mail.io', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'vg', + phoneNumber: '998 498 2507', + label: 'Mobile', + }, + { + country: 'vg', + phoneNumber: '856 477 3445', + label: 'Work', + }, + ], + title: 'Motor Winder', + company: 'Xeronk', + birthday: '1992-09-04T12:00:00.000Z', + address: '238 Rochester Avenue, Lydia, Oklahoma, PO3914', + }, + attachments: _attachments, + }, + { + id: 'dcc673f6-de59-4715-94ed-8f64663d449b', + avatar: 'assets/images/avatars/female-19.jpg', + name: 'Megan Suarez', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'megansuarez@mail.us', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bb', + phoneNumber: '875 422 2053', + label: 'Mobile', + }, + { + country: 'bb', + phoneNumber: '861 487 2597', + label: 'Work', + }, + { + country: 'bb', + phoneNumber: '873 414 3953', + label: 'Home', + }, + ], + title: 'Bindery Machine Operator', + company: 'Cemention', + birthday: '1984-09-08T12:00:00.000Z', + address: '112 Tillary Street, Camptown, Vermont, PO8827', + }, + attachments: _attachments, + }, + { + id: '3e4ca731-d39b-4ad9-b6e0-f84e67f4b74a', + background: 'assets/images/cards/26-640x480.jpg', + name: 'Ofelia Ratliff', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'ofeliaratliff@mail.tv', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'vu', + phoneNumber: '978 546 3699', + label: 'Mobile', + }, + { + country: 'vu', + phoneNumber: '892 551 2229', + label: 'Work', + }, + { + country: 'vu', + phoneNumber: '949 495 3479', + label: 'Home', + }, + ], + company: 'Buzzmaker', + birthday: '1988-11-11T12:00:00.000Z', + address: '951 Hampton Avenue, Bartonsville, Mississippi, PO4232', + }, + attachments: _attachments, + }, + { + id: '2012d4a5-19e4-444d-aaff-1d8b1d853650', + avatar: 'assets/images/avatars/female-01.jpg', + name: 'Laurel Parker', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'laurelparker@mail.com', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'lu', + phoneNumber: '805 502 3677', + label: 'Mobile', + }, + { + country: 'lu', + phoneNumber: '925 527 2973', + label: 'Work', + }, + { + country: 'lu', + phoneNumber: '975 495 2977', + label: 'Home', + }, + ], + title: 'Fundraising Director', + company: 'Omnigog', + birthday: '1987-05-17T12:00:00.000Z', + address: '157 Woodhull Street, Rutherford, West Virginia, PO6646', + }, + attachments: _attachments, + }, + { + id: '012b8219-74bf-447c-af2c-66904d90a956', + avatar: 'assets/images/avatars/female-02.jpg', + name: 'Tracy Delacruz', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'tracydelacruz@mail.name', + label: 'Personal', + }, + { + email: 'delacruz.tracy@shepard.me', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'co', + phoneNumber: '974 428 2886', + label: 'Mobile', + }, + ], + title: 'Bindery Machine Operator', + company: 'Shepard', + birthday: '1963-08-10T12:00:00.000Z', + address: '604 Merit Court, Wyano, New Hampshire, PO1641', + }, + attachments: _attachments, + }, + { + id: '8b1befd2-66a7-4981-ae52-77f01b382d18', + avatar: 'assets/images/avatars/female-03.jpg', + name: 'Jeannette Stanton', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'jeannettestanton@mail.info', + label: 'Personal', + }, + { + email: 'stanton.jeannette@zentury.biz', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'dz', + phoneNumber: '947 561 3783', + label: 'Mobile', + }, + { + country: 'dz', + phoneNumber: '917 463 3737', + label: 'Work', + }, + { + country: 'dz', + phoneNumber: '835 510 2059', + label: 'Home', + }, + ], + title: 'Hotel Manager', + company: 'Zentury', + birthday: '1975-09-02T12:00:00.000Z', + address: '100 Menahan Street, Snyderville, Kansas, PO1006', + }, + attachments: _attachments, + }, + { + id: '844668c3-5e20-4fed-9e3a-7d274f696e61', + avatar: 'assets/images/avatars/female-04.jpg', + name: 'Johnnie Cleveland', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'johnniecleveland@mail.co.uk', + label: 'Personal', + }, + { + email: 'cleveland.johnnie@viasia.net', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'au', + phoneNumber: '947 468 2942', + label: 'Mobile', + }, + ], + title: 'Fundraising Director', + company: 'Viasia', + birthday: '1986-03-15T12:00:00.000Z', + address: '283 Albany Avenue, Jennings, Rhode Island, PO1646', + }, + attachments: _attachments, + }, + { + id: '5a01e870-8be1-45a5-b58a-ec09c06e8f28', + avatar: 'assets/images/avatars/female-05.jpg', + name: 'Staci Hyde', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'stacihyde@mail.ca', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'id', + phoneNumber: '944 525 2944', + label: 'Mobile', + }, + { + country: 'id', + phoneNumber: '877 500 2506', + label: 'Work', + }, + ], + title: 'Banker Mason', + company: 'Zilla', + birthday: '1975-04-22T12:00:00.000Z', + address: '560 Dooley Street, Ellerslie, Louisiana, PO1005', + }, + attachments: _attachments, + }, + { + id: '5ac1f193-f150-45f9-bfe4-b7b4e1a83ff9', + avatar: 'assets/images/avatars/female-06.jpg', + name: 'Angela Gallagher', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'angelagallagher@mail.org', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'et', + phoneNumber: '996 514 3856', + label: 'Mobile', + }, + { + country: 'et', + phoneNumber: '903 539 2049', + label: 'Work', + }, + { + country: 'et', + phoneNumber: '938 463 3685', + label: 'Home', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Zenolux', + birthday: '1965-08-02T12:00:00.000Z', + address: '445 Remsen Avenue, Ruckersville, Delaware, PO2712', + }, + attachments: _attachments, + }, + { + id: '995df091-d78a-4bb7-840c-ba6a7d14a1bd', + avatar: 'assets/images/avatars/male-11.jpg', + name: 'Hutchinson Levy', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'hutchinsonlevy@mail.io', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'et', + phoneNumber: '970 546 3452', + label: 'Mobile', + }, + { + country: 'et', + phoneNumber: '894 438 2430', + label: 'Work', + }, + ], + title: 'Congressional Representative', + company: 'Zytrek', + birthday: '1978-03-22T12:00:00.000Z', + address: '911 Lois Avenue, Epworth, California, PO6557', + }, + attachments: _attachments, + }, + { + id: '7184be71-a28f-4f2b-8c45-15f78cf2f825', + avatar: 'assets/images/avatars/female-05.jpg', + name: 'Alissa Nelson', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'alissanelson@mail.us', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'lu', + phoneNumber: '893 600 2639', + label: 'Mobile', + }, + ], + title: 'Bindery Machine Operator', + company: 'Emtrak', + birthday: '1993-10-19T12:00:00.000Z', + address: '514 Sutter Avenue, Shindler, Puerto Rico, PO3862', + }, + attachments: _attachments, + }, + { + id: '325d508c-ca49-42bf-b0d5-c4a6b8da3d5c', + avatar: null, + name: 'Oliver Head', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'oliverhead@mail.tv', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bn', + phoneNumber: '977 528 3294', + label: 'Mobile', + }, + ], + title: 'Meteorologist', + company: 'Rameon', + birthday: '1967-01-05T12:00:00.000Z', + address: '569 Clermont Avenue, Movico, Marshall Islands, PO7293', + }, + attachments: _attachments, + }, + { + id: 'c674b6e1-b846-4bba-824b-0b4df0cdec48', + avatar: 'assets/images/avatars/male-13.jpg', + name: 'Duran Barr', + about: "Hi there! I'm using FuseChat.", + details: { + emails: [ + { + email: 'duranbarr@mail.com', + label: 'Personal', + }, + { + email: 'barr.duran@hinway.name', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'sr', + phoneNumber: '857 457 2508', + label: 'Mobile', + }, + { + country: 'sr', + phoneNumber: '887 522 2146', + label: 'Work', + }, + { + country: 'sr', + phoneNumber: '947 574 3174', + label: 'Home', + }, + ], + title: 'Insurance Analyst', + company: 'Hinway', + birthday: '1977-11-06T12:00:00.000Z', + address: '103 Chestnut Avenue, Glenbrook, Indiana, PO2578', + }, + attachments: _attachments, + }, +]; +export const profile: any = { + id: 'cfaad35d-07a3-4447-a6c3-d8c3d54fd5df', + name: 'Brian Hughes', + email: 'hughes.brian@company.com', + avatar: 'assets/images/avatars/brian-hughes.jpg', + about: "Hi there! I'm using FuseChat.", +}; diff --git a/src/app/mock-api/apps/contacts/api.ts b/src/app/mock-api/apps/contacts/api.ts new file mode 100644 index 0000000..dfab8b5 --- /dev/null +++ b/src/app/mock-api/apps/contacts/api.ts @@ -0,0 +1,327 @@ +import { Injectable } from '@angular/core'; +import { from, map } from 'rxjs'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; +import { + contacts as contactsData, + countries as countriesData, + tags as tagsData, +} from 'app/mock-api/apps/contacts/data'; + +@Injectable({ + providedIn: 'root', +}) +export class ContactsMockApi { + private _contacts: any[] = contactsData; + private _countries: any[] = countriesData; + private _tags: any[] = tagsData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Contacts - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/apps/contacts/all').reply(() => { + // Clone the contacts + const contacts = cloneDeep(this._contacts); + + // Sort the contacts by the name field by default + contacts.sort((a, b) => a.name.localeCompare(b.name)); + + // Return the response + return [200, contacts]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Contacts Search - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/contacts/search') + .reply(({ request }) => { + // Get the search query + const query = request.params.get('query'); + + // Clone the contacts + let contacts = cloneDeep(this._contacts); + + // If the query exists... + if (query) { + // Filter the contacts + contacts = contacts.filter( + (contact: any) => + contact.name && + contact.name.toLowerCase().includes(query.toLowerCase()) + ); + } + + // Sort the contacts by the name field by default + contacts.sort((a, b) => a.name.localeCompare(b.name)); + + // Return the response + return [200, contacts]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Contact - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/contacts/contact') + .reply(({ request }) => { + // Get the id from the params + const id = request.params.get('id'); + + // Clone the contacts + const contacts = cloneDeep(this._contacts); + + // Find the contact + const contact = contacts.find((item: any) => item.id === id); + + // Return the response + return [200, contact]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Contact - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onPost('api/apps/contacts/contact').reply(() => { + // Generate a new contact + const newContact = { + id: FuseMockApiUtils.guid(), + avatar: null, + name: 'New Contact', + emails: [], + phoneNumbers: [], + job: { + title: '', + company: '', + }, + birthday: null, + address: null, + notes: null, + tags: [], + }; + + // Unshift the new contact + this._contacts.unshift(newContact); + + // Return the response + return [200, newContact]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Contact - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/contacts/contact') + .reply(({ request }) => { + // Get the id and contact + const id = request.body.id; + const contact = cloneDeep(request.body.contact); + + // Prepare the updated contact + let updatedContact = null; + + // Find the contact and update it + this._contacts.forEach((item, index, contacts) => { + if (item.id === id) { + // Update the contact + contacts[index] = assign({}, contacts[index], contact); + + // Store the updated contact + updatedContact = contacts[index]; + } + }); + + // Return the response + return [200, updatedContact]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Contact - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/contacts/contact') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the contact and delete it + this._contacts.forEach((item, index) => { + if (item.id === id) { + this._contacts.splice(index, 1); + } + }); + + // Return the response + return [200, true]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Countries - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/contacts/countries') + .reply(() => [200, cloneDeep(this._countries)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Tags - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/contacts/tags') + .reply(() => [200, cloneDeep(this._tags)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Tags - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/apps/contacts/tag') + .reply(({ request }) => { + // Get the tag + const newTag = cloneDeep(request.body.tag); + + // Generate a new GUID + newTag.id = FuseMockApiUtils.guid(); + + // Unshift the new tag + this._tags.unshift(newTag); + + // Return the response + return [200, newTag]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Tags - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/contacts/tag') + .reply(({ request }) => { + // Get the id and tag + const id = request.body.id; + const tag = cloneDeep(request.body.tag); + + // Prepare the updated tag + let updatedTag = null; + + // Find the tag and update it + this._tags.forEach((item, index, tags) => { + if (item.id === id) { + // Update the tag + tags[index] = assign({}, tags[index], tag); + + // Store the updated tag + updatedTag = tags[index]; + } + }); + + // Return the response + return [200, updatedTag]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Tag - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/contacts/tag') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the tag and delete it + this._tags.forEach((item, index) => { + if (item.id === id) { + this._tags.splice(index, 1); + } + }); + + // Get the contacts that have the tag + const contactsWithTag = this._contacts.filter( + (contact: any) => contact.tags.indexOf(id) > -1 + ); + + // Iterate through them and delete the tag + contactsWithTag.forEach((contact) => { + contact.tags.splice(contact.tags.indexOf(id), 1); + }); + + // Return the response + return [200, true]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Avatar - POST + // ----------------------------------------------------------------------------------------------------- + + /** + * Read the given file as mock-api url + * + * @param file + */ + const readAsDataURL = (file: File): Promise => + // Return a new promise + new Promise((resolve, reject) => { + // Create a new reader + const reader = new FileReader(); + + // Resolve the promise on success + reader.onload = (): void => { + resolve(reader.result); + }; + + // Reject the promise on error + reader.onerror = (e): void => { + reject(e); + }; + + // Read the file as the + reader.readAsDataURL(file); + }); + this._fuseMockApiService + .onPost('api/apps/contacts/avatar') + .reply(({ request }) => { + // Get the id and avatar + const id = request.body.id; + const avatar = request.body.avatar; + + // Prepare the updated contact + let updatedContact: any = null; + + // In a real world application, this would return the path + // of the saved image file (from host, S3 bucket, etc.) but, + // for the sake of the demo, we encode the image to base64 + // and return it as the new path of the uploaded image since + // the src attribute of the img tag works with both image urls + // and encoded images. + return from(readAsDataURL(avatar)).pipe( + map((path) => { + // Find the contact and update it + this._contacts.forEach((item, index, contacts) => { + if (item.id === id) { + // Update the avatar + contacts[index].avatar = path; + + // Store the updated contact + updatedContact = contacts[index]; + } + }); + + // Return the response + return [200, updatedContact]; + }) + ); + }); + } +} diff --git a/src/app/mock-api/apps/contacts/data.ts b/src/app/mock-api/apps/contacts/data.ts new file mode 100644 index 0000000..8e7e06d --- /dev/null +++ b/src/app/mock-api/apps/contacts/data.ts @@ -0,0 +1,4353 @@ +/* eslint-disable */ +export const contacts = [ + { + id: 'cd5fa417-b667-482d-b208-798d9da3213c', + avatar: 'assets/images/avatars/male-01.jpg', + background: 'assets/images/cards/14-640x480.jpg', + name: 'Dejesus Michael', + emails: [ + { + email: 'dejesusmichael@mail.org', + label: 'Personal', + }, + { + email: 'michael.dejesus@vitricomp.io', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'bs', + phoneNumber: '984 531 2468', + label: 'Mobile', + }, + { + country: 'bs', + phoneNumber: '806 470 2693', + label: 'Work', + }, + ], + title: 'Track Service Worker', + company: 'Vitricomp', + birthday: '1975-01-10T12:00:00.000Z', + address: '279 Independence Avenue, Calvary, Guam, PO4127', + notes: + '

Do incididunt cillum duis eu pariatur enim proident minim officia amet proident consequat consequat qui consequat magna magna occaecat aliquip culpa pariatur velit nisi nostrud irure eu ullamco exercitation sint.

Cillum deserunt laborum laborum quis nisi enim et aliquip labore excepteur in excepteur labore amet in ipsum ipsum nostrud deserunt lorem nisi voluptate dolor minim enim ut eu cupidatat enim.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'beec5287-ed50-4504-858a-5dc3f8ce6935', + avatar: null, + background: null, + name: 'Dena Molina', + emails: [ + { + email: 'denamolina@mail.us', + label: 'Personal', + }, + { + email: 'molina.dena@envire.tv', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'io', + phoneNumber: '934 537 3180', + label: 'Mobile', + }, + ], + title: 'Weather Analyst', + company: 'Envire', + birthday: '1994-12-05T12:00:00.000Z', + address: '856 Woodside Avenue, Alfarata, Iowa, PO4992', + notes: + '

Consequat duis ullamco sint elit pariatur esse dolore nostrud consequat lorem duis sunt veniam ipsum exercitation eiusmod consequat nisi quis voluptate quis officia irure fugiat ex duis eu amet ex.

Irure est nisi dolor culpa sunt nulla irure lorem adipisicing non do consequat deserunt et ea eu non reprehenderit fugiat ex elit nulla sunt quis voluptate enim nulla aliquip veniam.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: '9d3f0e7f-dcbd-4e56-a5e8-87b8154e9edf', + avatar: 'assets/images/avatars/male-02.jpg', + background: 'assets/images/cards/15-640x480.jpg', + name: 'Bernard Langley', + emails: [ + { + email: 'bernardlangley@mail.com', + label: 'Personal', + }, + { + email: 'langley.bernard@boilcat.name', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'md', + phoneNumber: '893 548 2862', + label: 'Mobile', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Boilcat', + birthday: '1988-05-26T12:00:00.000Z', + address: '943 Adler Place, Hamilton, South Dakota, PO5592', + notes: + '

Est amet in adipisicing ex excepteur ullamco est lorem adipisicing veniam reprehenderit elit commodo cillum commodo eu officia fugiat id reprehenderit sunt mollit eiusmod dolor fugiat ad do esse aliquip.

Mollit amet adipisicing enim est est commodo sint et eu nulla in laboris ipsum aliqua elit aliqua adipisicing ea nulla nulla consectetur velit laborum labore ullamco eu sit consectetur velit.

', + tags: ['c31e9e5d-e0cb-4574-a13f-8a6ee5ff8309'], + }, + { + id: '42a5da95-5e6d-42fd-a09d-de755d123a47', + avatar: 'assets/images/avatars/male-03.jpg', + background: 'assets/images/cards/16-640x480.jpg', + name: 'Mclaughlin Steele', + emails: [ + { + email: 'mclaughlinsteele@mail.me', + label: 'Personal', + }, + { + email: 'steele.mclaughlin@accel.info', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'va', + phoneNumber: '830 484 3813', + label: 'Mobile', + }, + { + country: 'va', + phoneNumber: '999 475 2789', + label: 'Work', + }, + { + country: 'va', + phoneNumber: '933 406 3598', + label: 'Home', + }, + ], + company: 'Accel', + birthday: '1968-08-13T12:00:00.000Z', + address: '334 Sandford Street, Savage, Virgin Islands, PO1858', + notes: + '

Consequat eu aliquip dolor non consequat laborum ad non labore cillum consectetur quis dolore do ea nulla incididunt proident ea eiusmod in do qui eiusmod et irure dolor ea adipisicing.

Reprehenderit occaecat nostrud ad aliquip commodo amet velit id ut minim dolor mollit mollit in eiusmod voluptate lorem nisi labore culpa elit proident laborum ipsum occaecat esse sint nostrud esse.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'a7806ced-03f1-4197-8b30-00bdd463366b', + avatar: 'assets/images/avatars/male-04.jpg', + background: 'assets/images/cards/17-640x480.jpg', + name: 'Marsh Cochran', + emails: [ + { + email: 'marshcochran@mail.biz', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'tz', + phoneNumber: '864 401 3980', + label: 'Mobile', + }, + { + country: 'tz', + phoneNumber: '956 546 2589', + label: 'Work', + }, + ], + title: 'Fundraising Director', + company: 'Xsports', + birthday: '1983-12-22T12:00:00.000Z', + address: '487 Hamilton Walk, Bergoo, American Samoa, PO5616', + notes: + '

Id eiusmod deserunt amet lorem commodo consequat nostrud magna aliquip ex et pariatur labore non elit ad ad nulla culpa reprehenderit enim magna aliqua enim pariatur occaecat sint do lorem.

Adipisicing ut est nulla nisi cupidatat consequat aliqua et esse in voluptate amet eiusmod ut esse ea do irure commodo aute culpa amet consequat id adipisicing et incididunt ut duis.

', + tags: ['2026ce08-d08f-4b4f-9506-b10cdb5b104f'], + }, + { + id: 'f4ad15d9-5a24-463a-88ea-6189d6bb3a53', + avatar: 'assets/images/avatars/male-05.jpg', + background: 'assets/images/cards/18-640x480.jpg', + name: 'Parrish Austin', + emails: [ + { + email: 'parrishaustin@mail.co.uk', + label: 'Personal', + }, + { + email: 'austin.parrish@insource.net', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'lv', + phoneNumber: '834 426 3574', + label: 'Mobile', + }, + { + country: 'lv', + phoneNumber: '816 573 3694', + label: 'Work', + }, + { + country: 'lv', + phoneNumber: '967 515 2009', + label: 'Home', + }, + ], + title: 'Motor Winder', + company: 'Insource', + birthday: '1963-08-24T12:00:00.000Z', + address: '610 Harbor Lane, Cascades, Minnesota, PO8639', + notes: + '

Cillum enim eiusmod dolor aliqua ipsum exercitation sint aliqua lorem dolore id velit sint velit labore cupidatat minim cupidatat elit est magna eu proident eiusmod non pariatur est esse pariatur.

Sint do enim officia velit pariatur excepteur commodo adipisicing labore elit velit velit id exercitation excepteur veniam reprehenderit sint nulla duis ad incididunt cillum in in labore laboris magna esse.

', + tags: ['c31e9e5d-e0cb-4574-a13f-8a6ee5ff8309'], + }, + { + id: '780d0111-5e5c-4694-8d1d-0ea421971fbf', + avatar: 'assets/images/avatars/female-02.jpg', + background: 'assets/images/cards/19-640x480.jpg', + name: 'Laverne Dodson', + emails: [ + { + email: 'lavernedodson@mail.ca', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'ar', + phoneNumber: '964 417 2318', + label: 'Mobile', + }, + { + country: 'ar', + phoneNumber: '830 410 2506', + label: 'Work', + }, + ], + title: 'Television News Producer', + company: 'Lovepad', + birthday: '1973-09-25T12:00:00.000Z', + address: '428 Newport Street, Neahkahnie, Arkansas, PO8324', + notes: + '

Incididunt lorem proident est anim amet nulla do nulla ea anim ullamco ea amet voluptate laboris do elit elit consequat in esse in dolor enim irure ut irure ad commodo.

Aliqua dolore nulla sunt ad nostrud aute labore occaecat non amet nulla adipisicing sint eu lorem velit sint do sint adipisicing esse adipisicing anim culpa quis dolor non magna ea.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: 'bf172879-423a-4fd6-8df3-6d1938bbfe1f', + avatar: 'assets/images/avatars/male-06.jpg', + background: 'assets/images/cards/20-640x480.jpg', + name: 'Edwards Mckenzie', + emails: [ + { + email: 'edwardsmckenzie@mail.org', + label: 'Personal', + }, + { + email: 'mckenzie.edwards@bugsall.io', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'pe', + phoneNumber: '934 519 2903', + label: 'Mobile', + }, + { + country: 'pe', + phoneNumber: '989 489 3662', + label: 'Work', + }, + { + country: 'pe', + phoneNumber: '813 461 2790', + label: 'Home', + }, + ], + title: 'Legal Assistant', + company: 'Bugsall', + birthday: '1988-07-27T12:00:00.000Z', + address: '384 Polhemus Place, Dalton, Palau, PO6038', + notes: + '

Eu veniam consectetur eiusmod anim sint anim consectetur do consectetur aliqua cillum proident fugiat do in aliqua ipsum id consequat commodo qui officia adipisicing ullamco occaecat laboris proident incididunt exercitation.

Velit ullamco magna aute proident irure ut magna ullamco labore dolor deserunt deserunt tempor fugiat ex ullamco do sunt veniam reprehenderit officia elit duis sint ut proident pariatur est reprehenderit.

', + tags: ['3eaab175-ec0d-4db7-bc3b-efc633c769be'], + }, + { + id: '1eaa3213-ece2-4ba6-8e15-eb36ca388f50', + avatar: 'assets/images/avatars/female-03.jpg', + background: 'assets/images/cards/21-640x480.jpg', + name: 'Trudy Berg', + emails: [ + { + email: 'trudyberg@mail.us', + label: 'Personal', + }, + { + email: 'berg.trudy@satiance.tv', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'ls', + phoneNumber: '912 539 2770', + label: 'Mobile', + }, + ], + title: 'Meteorologist', + company: 'Satiance', + birthday: '1989-12-15T12:00:00.000Z', + address: '945 Jerome Avenue, Riceville, North Carolina, PO1625', + notes: + '

Excepteur ullamco aute aliqua reprehenderit ullamco do anim ut ut veniam et ut et ut commodo aliqua consequat occaecat fugiat dolor labore proident ipsum ad culpa est cillum aliqua reprehenderit.

Amet aliqua sint laboris in aute nostrud voluptate tempor ea tempor laborum tempor culpa dolore aliqua nulla dolore ad enim id cupidatat nostrud nostrud amet non velit id fugiat lorem.

', + tags: ['65930b5a-5d2a-4303-b11f-865d69e6fdb5'], + }, + { + id: 'abd9e78b-9e96-428f-b3ff-4d934c401bee', + avatar: 'assets/images/avatars/female-04.jpg', + background: 'assets/images/cards/22-640x480.jpg', + name: 'Elsie Melendez', + emails: [ + { + email: 'elsiemelendez@mail.com', + label: 'Personal', + }, + { + email: 'melendez.elsie@chillium.name', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'tg', + phoneNumber: '907 515 3007', + label: 'Mobile', + }, + { + country: 'tg', + phoneNumber: '967 534 2803', + label: 'Work', + }, + ], + title: 'Fundraising Director', + company: 'Chillium', + birthday: '1980-06-28T12:00:00.000Z', + address: '428 Varanda Place, Veyo, Oklahoma, PO6188', + notes: + '

Laboris commodo consequat duis dolor ullamco nisi sunt ipsum nisi elit dolore aute sint tempor qui ad sit aliqua laboris consequat dolore aliqua est deserunt irure cillum tempor ut veniam.

Eiusmod nulla ex esse in deserunt consectetur non qui cillum reprehenderit magna sit ipsum lorem aute consequat sint magna id laboris velit adipisicing non ipsum ipsum sint velit ex non.

', + tags: ['3eaab175-ec0d-4db7-bc3b-efc633c769be'], + }, + { + id: 'efae92cc-3bd1-4c6a-a395-b6760c69bd55', + avatar: 'assets/images/avatars/male-07.jpg', + background: 'assets/images/cards/23-640x480.jpg', + name: 'Lamb Underwood', + emails: [ + { + email: 'lambunderwood@mail.me', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'pf', + phoneNumber: '855 517 2767', + label: 'Mobile', + }, + { + country: 'pf', + phoneNumber: '906 442 3593', + label: 'Work', + }, + { + country: 'pf', + phoneNumber: '905 402 2121', + label: 'Home', + }, + ], + title: 'Legal Assistant', + company: 'Exotechno', + birthday: '1990-07-26T12:00:00.000Z', + address: '609 Greenpoint Avenue, Beason, Vermont, PO5229', + notes: + '

Exercitation tempor laboris dolor deserunt nulla et nisi ullamco minim duis sint nulla sint deserunt irure excepteur nostrud ipsum duis enim sit exercitation eiusmod tempor commodo excepteur mollit cupidatat fugiat.

Deserunt est dolore nulla laborum consequat veniam elit lorem do exercitation incididunt ea ad laboris lorem ipsum ex incididunt nostrud ipsum laborum et nostrud minim aute velit incididunt quis quis.

', + tags: ['3eaab175-ec0d-4db7-bc3b-efc633c769be'], + }, + { + id: 'bde636a7-c3d2-4bff-939a-aab11df1516b', + avatar: null, + background: null, + name: 'Tessa Valdez', + emails: [ + { + email: 'tessavaldez@mail.info', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'dz', + phoneNumber: '892 430 2631', + label: 'Mobile', + }, + { + country: 'dz', + phoneNumber: '997 525 2354', + label: 'Work', + }, + { + country: 'dz', + phoneNumber: '907 472 2857', + label: 'Home', + }, + ], + title: 'Banker Mason', + company: 'Securia', + birthday: '1994-01-10T12:00:00.000Z', + address: '183 Crosby Avenue, Blanco, Mississippi, PO3463', + notes: + '

Mollit qui amet in esse ipsum nostrud cupidatat occaecat proident aliquip non mollit commodo ex labore enim culpa dolor aute occaecat cillum sit excepteur tempor culpa nostrud nulla qui commodo.

Labore nulla id excepteur non velit adipisicing tempor reprehenderit cillum sint do consectetur laboris ut proident pariatur quis aute ad dolor quis labore labore nostrud sunt elit proident enim aliqua.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: '6519600a-5eaa-45f8-8bed-c46fddb3b26a', + avatar: 'assets/images/avatars/male-08.jpg', + background: 'assets/images/cards/24-640x480.jpg', + name: 'Mcleod Wagner', + emails: [ + { + email: 'mcleodwagner@mail.biz', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'at', + phoneNumber: '977 590 2773', + label: 'Mobile', + }, + { + country: 'at', + phoneNumber: '828 496 3813', + label: 'Work', + }, + { + country: 'at', + phoneNumber: '831 432 2512', + label: 'Home', + }, + ], + company: 'Inrt', + birthday: '1980-12-03T12:00:00.000Z', + address: '736 Glen Street, Kaka, West Virginia, PO9350', + notes: + '

Laboris consequat est anim quis quis eiusmod ipsum non quis fugiat anim culpa non elit mollit pariatur veniam nisi irure velit dolore dolor proident nisi deserunt culpa nisi et laborum.

Eiusmod eu esse ipsum voluptate excepteur ipsum et proident cupidatat sint sunt aliquip lorem culpa esse et dolor fugiat sit est id consectetur sint et ea pariatur occaecat nulla irure.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: '6d80a6f6-2884-4ac4-9c73-06b82c220017', + avatar: 'assets/images/avatars/female-06.jpg', + background: 'assets/images/cards/25-640x480.jpg', + name: 'Kristie Hall', + emails: [ + { + email: 'kristiehall@mail.co.uk', + label: 'Personal', + }, + { + email: 'hall.kristie@austech.net', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'tn', + phoneNumber: '841 530 3641', + label: 'Mobile', + }, + { + country: 'tn', + phoneNumber: '941 410 3743', + label: 'Work', + }, + { + country: 'tn', + phoneNumber: '938 599 3850', + label: 'Home', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Austech', + birthday: '1975-08-31T12:00:00.000Z', + address: '547 Revere Place, Hoehne, New Hampshire, PO2125', + notes: + '

Duis incididunt minim nisi sit qui dolor aliquip quis ipsum id amet occaecat sit ullamco minim velit est eiusmod anim proident consectetur non reprehenderit ea reprehenderit dolore in nisi eiusmod.

Ut commodo aliqua non ut proident velit et commodo voluptate eu mollit dolor veniam ipsum velit aute esse est adipisicing id aliqua nostrud nostrud nisi enim officia eiusmod in enim.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: '35190d23-036e-44ef-b545-cc744c626edd', + avatar: 'assets/images/avatars/female-07.jpg', + background: 'assets/images/cards/26-640x480.jpg', + name: 'Shannon Kennedy', + emails: [ + { + email: 'shannonkennedy@mail.ca', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'gb', + phoneNumber: '899 508 2992', + label: 'Mobile', + }, + { + country: 'gb', + phoneNumber: '834 499 3354', + label: 'Work', + }, + { + country: 'gb', + phoneNumber: '834 526 3388', + label: 'Home', + }, + ], + title: 'Gas Meter Mechanic', + company: 'Eventix', + birthday: '1994-09-07T12:00:00.000Z', + address: '480 Chase Court, Edinburg, Kansas, PO5357', + notes: + '

Lorem ex amet anim anim qui consequat ullamco consectetur et voluptate in velit dolore culpa pariatur amet enim ut non magna duis qui excepteur esse ullamco velit fugiat aute dolor.

Reprehenderit ullamco veniam sit laborum nulla sunt excepteur eiusmod anim eu ullamco tempor est qui adipisicing sit fugiat voluptate minim non incididunt quis ipsum et exercitation officia laborum incididunt nostrud.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: 'b018c194-68ec-4915-ab56-e9f3bd2d98db', + avatar: 'assets/images/avatars/female-08.jpg', + background: 'assets/images/cards/27-640x480.jpg', + name: 'Martha Swanson', + emails: [ + { + email: 'marthaswanson@mail.org', + label: 'Personal', + }, + { + email: 'swanson.martha@sequitur.io', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'gb', + phoneNumber: '844 480 3309', + label: 'Mobile', + }, + { + country: 'gb', + phoneNumber: '981 591 3239', + label: 'Work', + }, + { + country: 'gb', + phoneNumber: '923 484 3147', + label: 'Home', + }, + ], + title: 'Short Story Writer', + company: 'Sequitur', + birthday: '1993-12-31T12:00:00.000Z', + address: '595 Howard Place, Convent, Rhode Island, PO6993', + notes: + '

Lorem nostrud cillum non cillum nisi eu labore anim ipsum consequat consectetur sunt ipsum ipsum ad culpa laborum in ea exercitation quis voluptate velit id elit labore cillum cillum consectetur.

Ullamco ullamco nostrud aute pariatur nulla officia proident magna laborum dolor reprehenderit ullamco in reprehenderit veniam aliqua elit magna voluptate amet ut minim in labore irure culpa consequat sit pariatur.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: 'b7c355e9-e003-467e-82d2-4f6978c1a696', + avatar: 'assets/images/avatars/female-09.jpg', + background: 'assets/images/cards/28-640x480.jpg', + name: 'Jacklyn Morgan', + emails: [ + { + email: 'jacklynmorgan@mail.us', + label: 'Personal', + }, + { + email: 'morgan.jacklyn@shopabout.tv', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'so', + phoneNumber: '974 542 2061', + label: 'Mobile', + }, + ], + title: 'Animal Sitter', + company: 'Shopabout', + birthday: '1976-09-30T12:00:00.000Z', + address: '971 Conover Street, Statenville, Louisiana, PO6622', + notes: + '

Pariatur fugiat labore aliquip aute in adipisicing veniam et consequat magna nulla laboris eiusmod eu esse cupidatat ipsum amet sint est anim lorem consequat eiusmod sit aliquip consequat nisi duis.

Est esse excepteur non amet reprehenderit cillum ullamco ex excepteur laboris excepteur dolor magna enim consequat lorem commodo ipsum elit ea veniam non quis id nisi esse tempor enim ut.

', + tags: ['3eaab175-ec0d-4db7-bc3b-efc633c769be'], + }, + { + id: 'cfa07b7c-93d1-42e7-9592-493d9efc78ae', + avatar: 'assets/images/avatars/female-10.jpg', + background: 'assets/images/cards/29-640x480.jpg', + name: 'Tonya Bowers', + emails: [ + { + email: 'tonyabowers@mail.com', + label: 'Personal', + }, + { + email: 'bowers.tonya@tourmania.name', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'tv', + phoneNumber: '922 585 2914', + label: 'Mobile', + }, + { + country: 'tv', + phoneNumber: '913 538 2961', + label: 'Work', + }, + ], + title: 'Track Service Worker', + company: 'Tourmania', + birthday: '1976-06-14T12:00:00.000Z', + address: '197 Marconi Place, Welda, Delaware, PO6061', + notes: + '

Aliqua ea dolor est enim ipsum esse pariatur tempor nulla excepteur aliquip irure fugiat reprehenderit adipisicing ex tempor proident voluptate dolore ea dolore nostrud id incididunt culpa in do occaecat.

Aute fugiat magna velit enim in duis duis elit ipsum excepteur reprehenderit do ipsum qui cillum aliquip ut occaecat do ea et adipisicing cupidatat voluptate non elit ad aliqua ad.

', + tags: ['2026ce08-d08f-4b4f-9506-b10cdb5b104f'], + }, + { + id: '00feeb63-c83a-4655-a37e-a07da10cfa1c', + avatar: 'assets/images/avatars/female-11.jpg', + background: 'assets/images/cards/30-640x480.jpg', + name: 'Latonya Cruz', + emails: [ + { + email: 'latonyacruz@mail.me', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'tm', + phoneNumber: '981 508 2080', + label: 'Mobile', + }, + { + country: 'tm', + phoneNumber: '817 425 2052', + label: 'Work', + }, + { + country: 'tm', + phoneNumber: '939 434 3805', + label: 'Home', + }, + ], + title: 'Motor Winder', + company: 'Zilch', + birthday: '1967-11-28T12:00:00.000Z', + address: '775 Dahill Road, Iberia, California, PO2169', + notes: + '

Ut occaecat tempor deserunt proident enim ex ullamco ex aliquip mollit aute reprehenderit in occaecat anim aliquip ea laboris anim laboris do non aute aute ea laboris magna sunt sit.

Ullamco in in minim culpa eiusmod amet consequat consequat magna nisi cillum occaecat irure officia voluptate et eu duis officia nostrud culpa non eiusmod anim sint et anim enim voluptate.

', + tags: ['c31e9e5d-e0cb-4574-a13f-8a6ee5ff8309'], + }, + { + id: '142abf21-e635-4a7d-9330-e57f66adcdbe', + avatar: 'assets/images/avatars/female-12.jpg', + background: 'assets/images/cards/31-640x480.jpg', + name: 'Evangelina Mcclain', + emails: [ + { + email: 'evangelinamcclain@mail.info', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'ck', + phoneNumber: '992 583 3187', + label: 'Mobile', + }, + { + country: 'ck', + phoneNumber: '881 472 3297', + label: 'Work', + }, + { + country: 'ck', + phoneNumber: '846 477 3596', + label: 'Home', + }, + ], + title: 'Congressional Representative', + company: 'Straloy', + birthday: '1976-02-15T12:00:00.000Z', + address: '305 Columbia Street, Dupuyer, Puerto Rico, PO8744', + notes: + '

Proident nulla culpa magna nostrud do aliqua ullamco sit culpa ullamco eu amet culpa laborum enim fugiat non ad quis esse pariatur exercitation lorem incididunt exercitation aliquip labore minim adipisicing.

Sint ea voluptate tempor irure consequat aute laboris exercitation id minim voluptate aliquip tempor occaecat elit incididunt laboris enim labore sit aute sunt cillum ipsum ad laboris nostrud dolor excepteur.

', + tags: ['2026ce08-d08f-4b4f-9506-b10cdb5b104f'], + }, + { + id: 'e4f255a3-b5dd-45a7-975f-c399604a399a', + avatar: 'assets/images/avatars/male-09.jpg', + background: 'assets/images/cards/32-640x480.jpg', + name: 'Herring Gonzales', + emails: [ + { + email: 'herringgonzales@mail.biz', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'ai', + phoneNumber: '995 411 2513', + label: 'Mobile', + }, + { + country: 'ai', + phoneNumber: '839 492 2760', + label: 'Work', + }, + ], + title: 'Gas Meter Mechanic', + company: 'Cubix', + birthday: '1995-02-16T12:00:00.000Z', + address: '195 Brooklyn Road, Jeff, Marshall Islands, PO2943', + notes: + '

Ex nulla nisi do cillum consequat amet incididunt eu minim eu ut excepteur ad anim minim aliquip ullamco fugiat labore esse aliquip ea incididunt incididunt nisi officia consectetur dolore minim.

Et dolor consectetur anim deserunt laborum eu lorem et in nisi et officia nostrud fugiat deserunt aute irure ullamco officia fugiat voluptate exercitation ut deserunt officia nostrud tempor velit pariatur.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'ab4f712d-d712-41a8-b567-be4c66c349a3', + avatar: 'assets/images/avatars/female-13.jpg', + background: 'assets/images/cards/33-640x480.jpg', + name: 'Alyce Cash', + emails: [ + { + email: 'alycecash@mail.co.uk', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'ht', + phoneNumber: '969 499 3077', + label: 'Mobile', + }, + { + country: 'ht', + phoneNumber: '907 513 2784', + label: 'Work', + }, + ], + title: 'Weather Analyst', + company: 'Qnekt', + birthday: '1973-12-19T12:00:00.000Z', + address: '964 Henry Street, Eureka, Indiana, PO1035', + notes: + '

Non proident pariatur nostrud dolor incididunt occaecat amet officia sunt magna anim dolor labore culpa ut laborum id incididunt officia amet mollit anim ea proident laboris non incididunt incididunt sint.

Nulla minim consectetur nostrud magna anim irure consectetur labore cupidatat laborum reprehenderit et et adipisicing in qui elit ipsum reprehenderit esse nisi non ipsum exercitation sunt eu elit velit fugiat.

', + tags: ['c31e9e5d-e0cb-4574-a13f-8a6ee5ff8309'], + }, + { + id: '5d067800-c301-46c6-a7f7-28dc89d9a554', + avatar: null, + background: null, + name: 'Kristine Pacheco', + emails: [ + { + email: 'kristinepacheco@mail.net', + label: 'Personal', + }, + { + email: 'pacheco.kristine@vurbo.ca', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'mm', + phoneNumber: '977 516 2492', + label: 'Mobile', + }, + ], + title: 'Short Story Writer', + company: 'Vurbo', + birthday: '1985-10-22T12:00:00.000Z', + address: '622 Dodworth Street, Rose, Arizona, PO9530', + notes: + '

Lorem laboris excepteur magna pariatur occaecat voluptate pariatur cillum exercitation anim enim elit laborum reprehenderit laboris ad velit ut ipsum irure id ullamco minim sint ipsum occaecat esse tempor ea.

Pariatur non labore cillum consectetur aute voluptate sint adipisicing nisi laborum culpa nisi elit et amet dolor incididunt velit ex laboris ea reprehenderit eiusmod qui esse veniam labore ea sit.

', + tags: ['2026ce08-d08f-4b4f-9506-b10cdb5b104f'], + }, + { + id: 'c500255a-1173-47d0-a0e4-4944d48fc12a', + avatar: 'assets/images/avatars/male-10.jpg', + background: 'assets/images/cards/34-640x480.jpg', + name: 'English Haney', + emails: [ + { + email: 'englishhaney@mail.org', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'lb', + phoneNumber: '989 567 3834', + label: 'Mobile', + }, + ], + title: 'Meteorologist', + company: 'Photobin', + birthday: '1969-09-05T12:00:00.000Z', + address: '579 Pooles Lane, Belleview, Montana, PO4106', + notes: + '

Incididunt labore sunt ullamco in deserunt dolore labore voluptate adipisicing eu id duis eiusmod elit ea ad cillum culpa excepteur labore fugiat excepteur ea culpa labore sit id dolor ullamco.

Eu eu ex dolore proident nostrud et minim lorem nulla lorem nulla duis velit voluptate nisi cillum anim minim amet dolore officia id cillum in cupidatat ipsum veniam velit dolor.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'b62359fd-f2a8-46e6-904e-31052d1cd675', + avatar: 'assets/images/avatars/male-11.jpg', + background: 'assets/images/cards/35-640x480.jpg', + name: 'Joseph Strickland', + emails: [ + { + email: 'josephstrickland@mail.io', + label: 'Personal', + }, + { + email: 'strickland.joseph@bytrex.us', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'jo', + phoneNumber: '990 450 2729', + label: 'Mobile', + }, + ], + title: 'Hotel Manager', + company: 'Bytrex', + birthday: '1991-09-08T12:00:00.000Z', + address: '844 Ellery Street, Hondah, Texas, PO1272', + notes: + '

Excepteur consequat magna laborum dolore ut laborum ea excepteur ad officia mollit exercitation sunt tempor amet ex ipsum aliquip cillum mollit amet laborum voluptate ipsum sit esse duis eiusmod adipisicing.

Non tempor ad pariatur adipisicing excepteur est pariatur aute et velit lorem ut est eu voluptate pariatur ea consectetur excepteur sunt reprehenderit id irure aliqua tempor anim id voluptate culpa.

', + tags: ['3eaab175-ec0d-4db7-bc3b-efc633c769be'], + }, + { + id: '16b9e696-ea95-4dd8-86c4-3caf705a1dc6', + avatar: 'assets/images/avatars/male-12.jpg', + background: 'assets/images/cards/36-640x480.jpg', + name: 'Nunez Faulkner', + emails: [ + { + email: 'nunezfaulkner@mail.tv', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'xk', + phoneNumber: '909 552 3327', + label: 'Mobile', + }, + ], + title: 'Hotel Manager', + company: 'Buzzopia', + birthday: '1982-01-23T12:00:00.000Z', + address: '614 Herkimer Court, Darrtown, Nebraska, PO9308', + notes: + '

Culpa labore ullamco veniam est ullamco ipsum culpa excepteur esse esse aliqua nulla ullamco nulla amet consequat tempor aute exercitation do eu do ullamco elit excepteur est anim nisi excepteur.

Cillum eiusmod cupidatat officia ipsum ullamco adipisicing cillum adipisicing sint exercitation non enim consectetur est esse tempor fugiat sit eiusmod in exercitation enim quis duis dolor amet consequat pariatur dolor.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: '19662ecf-0686-4aad-a46c-24b552eb2ff5', + avatar: 'assets/images/avatars/female-15.jpg', + background: 'assets/images/cards/14-640x480.jpg', + name: 'Juana Morrow', + emails: [ + { + email: 'juanamorrow@mail.com', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'ee', + phoneNumber: '868 438 3943', + label: 'Mobile', + }, + ], + title: 'Meteorologist', + company: 'Lyria', + birthday: '1992-03-29T12:00:00.000Z', + address: '663 Drew Street, Juntura, Georgia, PO9857', + notes: + '

Mollit et amet qui incididunt officia anim est in consectetur qui anim qui labore ea mollit veniam adipisicing ex magna commodo mollit adipisicing sunt commodo laboris labore aliquip deserunt est.

Cupidatat ut cillum anim reprehenderit ea magna enim fugiat proident anim esse lorem lorem commodo cupidatat pariatur qui commodo nulla aliqua nisi labore in adipisicing minim excepteur do eu amet.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: '26dfe954-8bf3-45ee-b285-1d0a88c8d3ea', + avatar: 'assets/images/avatars/male-13.jpg', + background: 'assets/images/cards/15-640x480.jpg', + name: 'Lara Gaines', + emails: [ + { + email: 'laragaines@mail.name', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'mr', + phoneNumber: '891 498 2043', + label: 'Mobile', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Acruex', + birthday: '1961-06-07T12:00:00.000Z', + address: '762 Troutman Street, Drummond, Oregon, PO6973', + notes: + '

Laboris dolor incididunt eiusmod deserunt officia labore eu est nulla velit id ex veniam qui fugiat velit irure reprehenderit dolor proident aliquip culpa nisi magna occaecat do nostrud cillum lorem.

Sit consequat laboris culpa quis laborum lorem ullamco occaecat labore duis ea et consequat pariatur reprehenderit excepteur excepteur exercitation sunt enim amet adipisicing laborum incididunt dolor aliquip culpa ea laboris.

', + tags: ['65930b5a-5d2a-4303-b11f-865d69e6fdb5'], + }, + { + id: 'd6462af2-c488-4de7-9b26-3845bd2983f9', + avatar: 'assets/images/avatars/male-14.jpg', + background: 'assets/images/cards/16-640x480.jpg', + name: 'Johnston Riddle', + emails: [ + { + email: 'johnstonriddle@mail.me', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bt', + phoneNumber: '979 541 2691', + label: 'Mobile', + }, + { + country: 'bt', + phoneNumber: '909 407 3887', + label: 'Work', + }, + { + country: 'bt', + phoneNumber: '864 557 3128', + label: 'Home', + }, + ], + title: 'Hotel Manager', + company: 'Xleen', + birthday: '1972-09-13T12:00:00.000Z', + address: + '674 Bryant Street, Grahamtown, Federated States Of Micronesia, PO2757', + notes: + '

Velit consequat elit anim qui eu elit aliquip consectetur aliqua cupidatat lorem laboris dolor qui ad laborum adipisicing adipisicing consequat et nostrud ullamco consequat dolore deserunt irure do aliquip non.

Ipsum commodo voluptate qui ex ullamco amet do ex dolore quis cupidatat ut anim sunt dolore excepteur anim do dolor aliqua ex aute esse eiusmod sint laborum consequat laboris cillum.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: 'a1723c04-69fe-4573-a135-6645658afe76', + avatar: null, + background: null, + name: 'Vargas Gardner', + emails: [ + { + email: 'vargasgardner@mail.info', + label: 'Personal', + }, + { + email: 'gardner.vargas@cosmosis.biz', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'bi', + phoneNumber: '855 456 2754', + label: 'Mobile', + }, + ], + title: 'Bindery Machine Operator', + company: 'Cosmosis', + birthday: '1979-10-21T12:00:00.000Z', + address: '869 Seton Place, Chemung, Maine, PO8109', + notes: + '

Amet non anim ex ullamco pariatur ullamco laboris eiusmod ut magna nisi amet incididunt sunt anim nisi qui ut ex sunt adipisicing consequat deserunt qui mollit duis anim quis veniam.

Magna ut id duis qui ea proident quis officia lorem commodo et et proident dolore qui quis incididunt nulla incididunt ut aliqua veniam est adipisicing adipisicing reprehenderit ad velit incididunt.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: '823e6166-c0c8-4373-9270-8a0d17489a08', + avatar: 'assets/images/avatars/male-16.jpg', + background: 'assets/images/cards/17-640x480.jpg', + name: 'Mccall Day', + emails: [ + { + email: 'mccallday@mail.co.uk', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'se', + phoneNumber: '993 504 3286', + label: 'Mobile', + }, + { + country: 'se', + phoneNumber: '924 434 2238', + label: 'Work', + }, + { + country: 'se', + phoneNumber: '816 466 2634', + label: 'Home', + }, + ], + title: 'Historiographer', + company: 'Nipaz', + birthday: '1964-03-05T12:00:00.000Z', + address: '854 Hanover Place, Harleigh, New Jersey, PO9459', + notes: + '

Ea occaecat nisi cillum officia in velit ipsum reprehenderit ex fugiat fugiat ad velit pariatur ullamco sint in elit quis aute id cupidatat nostrud quis culpa aliquip id officia excepteur.

Ea ut consequat sit ullamco do pariatur quis officia ad ipsum quis nisi in nulla incididunt esse pariatur amet qui ullamco consectetur dolor voluptate sit qui mollit reprehenderit reprehenderit amet.

', + tags: ['65930b5a-5d2a-4303-b11f-865d69e6fdb5'], + }, + { + id: '2c37ed00-427a-46d7-8f8f-d711c768d1ee', + avatar: 'assets/images/avatars/male-17.jpg', + background: 'assets/images/cards/18-640x480.jpg', + name: 'Silva Foster', + emails: [ + { + email: 'silvafoster@mail.net', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bn', + phoneNumber: '916 511 3837', + label: 'Mobile', + }, + { + country: 'bn', + phoneNumber: '949 564 3247', + label: 'Work', + }, + ], + title: 'Insurance Analyst', + company: 'Extrawear', + birthday: '1980-04-29T12:00:00.000Z', + address: '137 Bridge Street, Sisquoc, District Of Columbia, PO4105', + notes: + '

Ipsum velit est do velit do deserunt cupidatat officia duis laborum veniam sunt in ex reprehenderit esse ex ad aute anim duis ut sunt reprehenderit occaecat ut nostrud eu minim.

Aliqua consequat adipisicing adipisicing aliquip voluptate fugiat eu amet nostrud id proident non nisi fugiat velit nostrud ea officia non laboris magna cillum exercitation culpa eiusmod mollit fugiat et lorem.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: '944764c0-b261-4428-9188-bbd3022d66a8', + avatar: 'assets/images/avatars/female-16.jpg', + background: 'assets/images/cards/19-640x480.jpg', + name: 'Cathryn Snider', + emails: [ + { + email: 'cathrynsnider@mail.ca', + label: 'Personal', + }, + { + email: 'snider.cathryn@phormula.org', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'na', + phoneNumber: '896 471 3036', + label: 'Mobile', + }, + { + country: 'na', + phoneNumber: '851 491 3567', + label: 'Work', + }, + { + country: 'na', + phoneNumber: '805 487 2016', + label: 'Home', + }, + ], + title: 'Short Story Writer', + company: 'Phormula', + birthday: '1981-06-09T12:00:00.000Z', + address: '528 Glenmore Avenue, Elrama, Illinois, PO2952', + notes: + '

Ea enim exercitation lorem excepteur officia nulla culpa culpa nisi veniam quis non duis exercitation labore commodo et occaecat reprehenderit ex velit exercitation commodo cupidatat amet veniam mollit magna consectetur.

Voluptate consectetur eu id eiusmod anim reprehenderit incididunt duis veniam tempor cillum ea esse tempor do laborum dolore sint ea duis incididunt in do aliqua voluptate incididunt officia excepteur do.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'f2b3c756-5ad2-4d4b-aee5-b32c91457128', + avatar: null, + background: null, + name: 'Mooney Cantrell', + emails: [ + { + email: 'mooneycantrell@mail.io', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bh', + phoneNumber: '915 577 3020', + label: 'Mobile', + }, + { + country: 'bh', + phoneNumber: '923 431 3594', + label: 'Work', + }, + ], + title: 'Fundraising Director', + company: 'Crustatia', + birthday: '1968-12-07T12:00:00.000Z', + address: '277 Coventry Road, Fairforest, Nevada, PO6031', + notes: + '

Lorem mollit dolore nostrud sunt id anim veniam labore duis eiusmod duis fugiat aliqua occaecat do labore culpa consectetur consectetur sunt amet tempor incididunt tempor esse sunt id elit non.

Laborum mollit ullamco quis ad culpa nisi sit nisi veniam minim adipisicing sint eiusmod velit amet minim aliquip nulla eiusmod nulla laboris quis proident in adipisicing aute et ea anim.

', + tags: ['2026ce08-d08f-4b4f-9506-b10cdb5b104f'], + }, + { + id: '54b1c201-4b2b-4be0-ad70-a6413e9628cd', + avatar: 'assets/images/avatars/female-17.jpg', + background: 'assets/images/cards/20-640x480.jpg', + name: 'Saundra Murphy', + emails: [ + { + email: 'saundramurphy@mail.us', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'mt', + phoneNumber: '902 529 2999', + label: 'Mobile', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Zilencio', + birthday: '1983-11-07T12:00:00.000Z', + address: '557 Monroe Street, Mayfair, Maryland, PO7200', + notes: + '

Fugiat mollit sunt aliquip consectetur ipsum ut aliqua id ex laboris labore id elit nulla irure id aute pariatur do officia proident eiusmod proident reprehenderit dolor non dolor laborum nulla.

Pariatur reprehenderit incididunt voluptate enim aliqua laborum anim veniam pariatur irure exercitation non dolore velit et ex culpa lorem ipsum mollit eu sint duis aliquip elit amet consectetur velit minim.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'faf979c7-a13b-445a-b30a-08845f5fa90e', + avatar: 'assets/images/avatars/female-18.jpg', + background: 'assets/images/cards/21-640x480.jpg', + name: 'Enid Sparks', + emails: [ + { + email: 'enidsparks@mail.tv', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bh', + phoneNumber: '813 410 3258', + label: 'Mobile', + }, + { + country: 'bh', + phoneNumber: '877 501 2767', + label: 'Work', + }, + ], + title: 'Historiographer', + company: 'Skybold', + birthday: '1984-05-04T12:00:00.000Z', + address: '219 Village Court, Keyport, Alabama, PO7776', + notes: + '

Velit enim anim est aliqua consequat exercitation velit quis magna est incididunt ipsum minim minim nulla adipisicing ad eiusmod id veniam eiusmod sit elit est pariatur velit ea laborum anim.

Ad lorem ea nisi irure id consequat ullamco nisi nostrud dolore officia ipsum veniam velit minim pariatur culpa culpa esse minim adipisicing sit labore commodo aute excepteur non do in.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: '2bfa2be5-7688-48d5-b5ac-dc0d9ac97f14', + avatar: null, + background: null, + name: 'Nadia Mcknight', + emails: [ + { + email: 'nadiamcknight@mail.com', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'tk', + phoneNumber: '943 511 2203', + label: 'Mobile', + }, + { + country: 'tk', + phoneNumber: '817 578 2993', + label: 'Work', + }, + ], + title: 'Legal Assistant', + company: 'Pearlesex', + birthday: '1973-10-06T12:00:00.000Z', + address: '448 Berriman Street, Reinerton, Washington, PO6704', + notes: + '

Esse sint lorem exercitation velit tempor tempor voluptate nulla proident excepteur magna tempor consectetur aliquip qui nisi mollit cupidatat est adipisicing ipsum sint et excepteur sit labore velit dolore labore.

Duis nisi adipisicing lorem do excepteur magna consequat labore magna ut consectetur eu enim occaecat id nulla laboris minim officia est id nisi mollit ullamco irure ut dolore esse aliqua.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: '77a4383b-b5a5-4943-bc46-04c3431d1566', + avatar: 'assets/images/avatars/male-19.jpg', + background: 'assets/images/cards/22-640x480.jpg', + name: 'Best Blackburn', + emails: [ + { + email: 'bestblackburn@mail.name', + label: 'Personal', + }, + { + email: 'blackburn.best@beadzza.me', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'gl', + phoneNumber: '814 498 3701', + label: 'Mobile', + }, + ], + title: 'Hotel Manager', + company: 'Beadzza', + birthday: '1987-06-07T12:00:00.000Z', + address: '578 Tampa Court, Wescosville, Ohio, PO4108', + notes: + '

Lorem do deserunt nulla nostrud incididunt et laboris labore eu nisi ut ullamco veniam deserunt do non labore commodo amet aliquip exercitation ea occaecat amet non eiusmod ut minim fugiat.

Esse eu ex irure pariatur qui cillum labore nulla quis officia consequat commodo consequat fugiat culpa nostrud labore eu adipisicing magna irure aliquip est amet irure eiusmod esse reprehenderit mollit.

', + tags: ['3eaab175-ec0d-4db7-bc3b-efc633c769be'], + }, + { + id: '8bb0f597-673a-47ca-8c77-2f83219cb9af', + avatar: null, + background: null, + name: 'Duncan Carver', + emails: [ + { + email: 'duncancarver@mail.info', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'jm', + phoneNumber: '968 547 2111', + label: 'Mobile', + }, + { + country: 'jm', + phoneNumber: '968 433 3120', + label: 'Work', + }, + { + country: 'jm', + phoneNumber: '905 425 2777', + label: 'Home', + }, + ], + title: 'Historiographer', + company: 'Hotcakes', + birthday: '1980-09-15T12:00:00.000Z', + address: '931 Bristol Street, Why, South Carolina, PO9700', + notes: + '

Dolore laboris aute officia reprehenderit cupidatat aliquip duis labore aliquip officia est nostrud nisi voluptate eiusmod ad aute et ea cillum aliqua elit ipsum officia cillum laborum minim labore sit.

Exercitation labore ut pariatur occaecat ullamco non occaecat aliqua amet nostrud aliquip ipsum ad do ullamco enim laborum commodo minim elit ut quis laboris elit laborum proident sunt ullamco sit.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'c318e31f-1d74-49c5-8dae-2bc5805e2fdb', + avatar: 'assets/images/avatars/male-01.jpg', + background: 'assets/images/cards/23-640x480.jpg', + name: 'Martin Richards', + emails: [ + { + email: 'martinrichards@mail.biz', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'mg', + phoneNumber: '902 500 2668', + label: 'Mobile', + }, + { + country: 'mg', + phoneNumber: '947 559 2919', + label: 'Work', + }, + { + country: 'mg', + phoneNumber: '934 434 3768', + label: 'Home', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Overfork', + birthday: '1977-04-12T12:00:00.000Z', + address: '268 Hutchinson Court, Drytown, Florida, PO3041', + notes: + '

Eu ipsum nisi eu lorem cupidatat mollit exercitation elit ea culpa enim qui culpa ad aliqua exercitation tempor nulla excepteur fugiat ipsum quis amet occaecat adipisicing ullamco duis dolore occaecat.

Non eu et elit ea labore lorem adipisicing voluptate incididunt ut officia aute minim incididunt lorem qui adipisicing mollit magna nisi consectetur cillum sit exercitation eiusmod qui eu nisi sunt.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: '0a8bc517-631a-4a93-aacc-000fa2e8294c', + avatar: 'assets/images/avatars/female-20.jpg', + background: 'assets/images/cards/24-640x480.jpg', + name: 'Candice Munoz', + emails: [ + { + email: 'candicemunoz@mail.co.uk', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'fm', + phoneNumber: '838 562 2769', + label: 'Mobile', + }, + ], + title: 'Legal Assistant', + company: 'Eclipto', + birthday: '1976-09-09T12:00:00.000Z', + address: '946 Remsen Street, Caroline, New Mexico, PO3247', + notes: + '

Amet dolore elit irure in commodo in et eu eu nulla labore elit sunt et nisi quis officia nostrud et mollit dolor aute fugiat sunt reprehenderit quis sint minim ipsum.

Laboris ut sunt nisi aute incididunt reprehenderit mollit culpa velit exercitation reprehenderit irure id sunt officia magna est ea labore consectetur incididunt cillum qui tempor ea ullamco quis pariatur aliquip.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'a4c9945a-757b-40b0-8942-d20e0543cabd', + avatar: 'assets/images/avatars/female-01.jpg', + background: 'assets/images/cards/25-640x480.jpg', + name: 'Vickie Mosley', + emails: [ + { + email: 'vickiemosley@mail.net', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'tr', + phoneNumber: '939 555 3054', + label: 'Mobile', + }, + { + country: 'tr', + phoneNumber: '852 486 2053', + label: 'Work', + }, + ], + title: 'Bindery Machine Operator', + company: 'Strozen', + birthday: '1989-06-21T12:00:00.000Z', + address: '397 Vandalia Avenue, Rockingham, Michigan, PO8089', + notes: + '

Velit sunt sunt commodo ex amet laboris voluptate eu lorem aliqua minim occaecat cupidatat aliqua ipsum nisi velit id reprehenderit exercitation velit fugiat minim nisi deserunt voluptate anim cillum commodo.

Cillum velit nostrud cupidatat ex sit culpa deserunt cillum cupidatat cillum aute cupidatat exercitation ullamco sunt incididunt non magna sint lorem et incididunt laborum culpa qui sint sunt duis fugiat.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: 'b8258ccf-48b5-46a2-9c95-e0bd7580c645', + avatar: 'assets/images/avatars/female-02.jpg', + background: 'assets/images/cards/26-640x480.jpg', + name: 'Tina Harris', + emails: [ + { + email: 'tinaharris@mail.ca', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'gp', + phoneNumber: '933 464 2431', + label: 'Mobile', + }, + { + country: 'gp', + phoneNumber: '894 535 3609', + label: 'Work', + }, + ], + title: 'Short Story Writer', + company: 'Gallaxia', + birthday: '1976-09-10T12:00:00.000Z', + address: '821 Beverly Road, Tyro, Colorado, PO4248', + notes: + '

Incididunt non est consequat qui sit sunt aliquip sit quis minim laboris ullamco est culpa velit culpa cupidatat veniam incididunt non quis elit reprehenderit et officia cillum magna aliqua occaecat.

Cupidatat amet incididunt id pariatur minim veniam id dolor nisi labore cillum ea officia cupidatat do culpa aliqua consequat deserunt aliquip sit ea excepteur eiusmod labore tempor reprehenderit commodo exercitation.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'f004ea79-98fc-436c-9ba5-6cfe32fe583d', + avatar: 'assets/images/avatars/male-02.jpg', + background: 'assets/images/cards/27-640x480.jpg', + name: 'Holt Manning', + emails: [ + { + email: 'holtmanning@mail.org', + label: 'Personal', + }, + { + email: 'manning.holt@idetica.io', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'nz', + phoneNumber: '822 531 2600', + label: 'Mobile', + }, + { + country: 'nz', + phoneNumber: '922 549 2094', + label: 'Work', + }, + ], + title: 'Fundraising Director', + company: 'Idetica', + birthday: '1973-11-08T12:00:00.000Z', + address: '364 Porter Avenue, Delshire, Missouri, PO8911', + notes: + '

Velit fugiat minim sit nisi esse laboris ad velit proident non et cillum labore sint excepteur nisi eu amet voluptate duis duis id enim ea anim adipisicing consectetur id consectetur.

Ex eiusmod id magna in non lorem sunt sunt officia do adipisicing officia mollit occaecat sunt laborum aliquip adipisicing ullamco in sit proident et quis incididunt pariatur fugiat mollit anim.

', + tags: ['65930b5a-5d2a-4303-b11f-865d69e6fdb5'], + }, + { + id: '8b69fe2d-d7cc-4a3d-983d-559173e37d37', + avatar: 'assets/images/avatars/female-03.jpg', + background: 'assets/images/cards/28-640x480.jpg', + name: 'Misty Ramsey', + emails: [ + { + email: 'mistyramsey@mail.us', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'kp', + phoneNumber: '990 457 2106', + label: 'Mobile', + }, + { + country: 'kp', + phoneNumber: '918 550 2946', + label: 'Work', + }, + ], + company: 'Grupoli', + birthday: '1969-08-10T12:00:00.000Z', + address: '101 Sackett Street, Naomi, Tennessee, PO6335', + notes: + '

Ut cupidatat sint minim consectetur cupidatat aute ut anim consequat fugiat laboris quis sint sit nulla irure nulla officia eiusmod consequat ex quis ad ex ullamco et ut labore tempor.

Deserunt minim dolore voluptate aute aliqua est elit mollit ut ut consequat in esse est do ex officia nostrud aute id fugiat reprehenderit quis cillum fugiat id fugiat minim tempor.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: 'cdcc62e4-1520-4ccc-803d-52868c7e01ba', + avatar: 'assets/images/avatars/female-04.jpg', + background: 'assets/images/cards/29-640x480.jpg', + name: 'Dee Alvarado', + emails: [ + { + email: 'deealvarado@mail.tv', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'nu', + phoneNumber: '855 445 2483', + label: 'Mobile', + }, + { + country: 'nu', + phoneNumber: '858 415 2860', + label: 'Work', + }, + { + country: 'nu', + phoneNumber: '968 587 2752', + label: 'Home', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Tsunamia', + birthday: '1996-06-17T12:00:00.000Z', + address: '956 Pierrepont Street, Crumpler, Hawaii, PO3299', + notes: + '

Esse excepteur ad aliquip amet elit reprehenderit ut nostrud magna ex esse dolore magna excepteur irure esse incididunt sunt enim laborum ex mollit magna elit quis ullamco aute minim veniam.

Duis id ullamco laboris elit ea ea dolore tempor est eu esse aliqua quis quis ut laborum mollit cillum proident deserunt fugiat ipsum elit exercitation quis mollit eiusmod officia non.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'e2946946-b4b5-4fd7-bab4-62c38cdff2f1', + avatar: 'assets/images/avatars/female-05.jpg', + background: 'assets/images/cards/30-640x480.jpg', + name: 'Samantha Jacobson', + emails: [ + { + email: 'samanthajacobson@mail.com', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'es', + phoneNumber: '879 591 3327', + label: 'Mobile', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Emoltra', + birthday: '1972-02-04T12:00:00.000Z', + address: '384 Love Lane, Dyckesville, New York, PO4115', + notes: + '

Consectetur eu et ea anim magna occaecat anim labore velit nulla non magna laboris duis sit adipisicing commodo laboris consequat id quis aliqua est culpa quis in ex est culpa.

Sunt qui excepteur reprehenderit nostrud voluptate eu laborum laborum id esse occaecat irure esse elit magna tempor ad est elit non labore tempor laborum deserunt voluptate cupidatat excepteur sunt sint.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: 'fdc77706-6ba2-4397-b2f8-a9a0b6495153', + avatar: 'assets/images/avatars/female-06.jpg', + background: 'assets/images/cards/31-640x480.jpg', + name: 'Rhea Landry', + emails: [ + { + email: 'rhealandry@mail.name', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'jp', + phoneNumber: '906 579 3698', + label: 'Mobile', + }, + { + country: 'jp', + phoneNumber: '841 475 2681', + label: 'Work', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Comtent', + birthday: '1988-05-22T12:00:00.000Z', + address: '725 Arlington Avenue, Mathews, Wyoming, PO4562', + notes: + '

Eiusmod ullamco laboris tempor reprehenderit culpa non sunt ea consequat velit id ipsum commodo eiusmod exercitation laboris aliqua magna reprehenderit culpa tempor mollit pariatur consectetur amet aliqua cillum voluptate exercitation.

Qui cillum consectetur qui proident adipisicing id qui esse aute velit excepteur pariatur ea excepteur sunt velit nostrud esse mollit sint ex irure sunt aliquip velit consequat minim do officia.

', + tags: ['c31e9e5d-e0cb-4574-a13f-8a6ee5ff8309'], + }, + { + id: '12148fa2-e0a4-49fb-b3c5-daeecdb5180a', + avatar: 'assets/images/avatars/female-07.jpg', + background: 'assets/images/cards/32-640x480.jpg', + name: 'Olga Rhodes', + emails: [ + { + email: 'olgarhodes@mail.me', + label: 'Personal', + }, + { + email: 'rhodes.olga@moreganic.info', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'tl', + phoneNumber: '971 514 3366', + label: 'Mobile', + }, + { + country: 'tl', + phoneNumber: '807 480 2033', + label: 'Work', + }, + { + country: 'tl', + phoneNumber: '810 528 3783', + label: 'Home', + }, + ], + title: 'Pastry Baker', + company: 'Moreganic', + birthday: '1971-08-13T12:00:00.000Z', + address: '253 Beard Street, Staples, Massachusetts, PO8089', + notes: + '

Proident est est et in commodo incididunt anim fugiat laboris pariatur eu enim dolor eiusmod dolor voluptate officia eiusmod excepteur culpa aute do do anim pariatur irure incididunt incididunt est.

Sint duis mollit dolor laborum ex non esse consequat anim et qui est nostrud incididunt fugiat anim veniam sunt cupidatat ut voluptate commodo non ex tempor ullamco magna culpa culpa.

', + tags: ['65930b5a-5d2a-4303-b11f-865d69e6fdb5'], + }, + { + id: '07dd64eb-8b8f-4765-a16c-8db083c45096', + avatar: 'assets/images/avatars/female-08.jpg', + background: 'assets/images/cards/33-640x480.jpg', + name: 'Lorraine Pennington', + emails: [ + { + email: 'lorrainepennington@mail.biz', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'fm', + phoneNumber: '932 404 3308', + label: 'Mobile', + }, + { + country: 'fm', + phoneNumber: '979 550 3200', + label: 'Work', + }, + { + country: 'fm', + phoneNumber: '868 557 3568', + label: 'Home', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Marvane', + birthday: '1967-06-10T12:00:00.000Z', + address: '962 Whitney Avenue, Sussex, North Dakota, PO5796', + notes: + '

Nulla nisi officia quis aliquip voluptate mollit ut anim eu et quis tempor incididunt consectetur exercitation cupidatat in nisi exercitation est culpa nostrud sit elit sit sunt do ipsum eu.

Enim voluptate ad ullamco tempor voluptate culpa et ut ullamco eu consequat est esse excepteur est nostrud velit enim culpa dolore non quis occaecat eiusmod velit ex mollit tempor labore.

', + tags: ['c31e9e5d-e0cb-4574-a13f-8a6ee5ff8309'], + }, + { + id: '81fdc48c-5572-4123-8a73-71b7892120de', + avatar: 'assets/images/avatars/female-09.jpg', + background: 'assets/images/cards/34-640x480.jpg', + name: 'Earlene Rosales', + emails: [ + { + email: 'earlenerosales@mail.co.uk', + label: 'Personal', + }, + { + email: 'rosales.earlene@softmicro.net', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'ki', + phoneNumber: '927 589 3619', + label: 'Mobile', + }, + ], + title: 'Historiographer', + company: 'Softmicro', + birthday: '1960-11-13T12:00:00.000Z', + address: '981 Kingston Avenue, Topaz, Connecticut, PO6866', + notes: + '

Adipisicing fugiat magna eiusmod consectetur id commodo incididunt ullamco ut sint minim nulla in do aute in sit pariatur irure dolor magna pariatur ad officia excepteur duis ullamco dolor sunt.

Dolor laborum proident voluptate eu esse lorem adipisicing enim consectetur veniam nisi pariatur aliquip sit laborum sunt adipisicing anim labore eiusmod nostrud irure irure nisi ipsum dolor aliquip ex exercitation.

', + tags: ['3eaab175-ec0d-4db7-bc3b-efc633c769be'], + }, + { + id: 'f8bbf6be-d49a-41a3-bb80-3d51df84c12b', + avatar: 'assets/images/avatars/female-10.jpg', + background: 'assets/images/cards/35-640x480.jpg', + name: 'Marcia Hatfield', + emails: [ + { + email: 'marciahatfield@mail.ca', + label: 'Personal', + }, + { + email: 'hatfield.marcia@datagen.org', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'no', + phoneNumber: '883 432 3718', + label: 'Mobile', + }, + { + country: 'no', + phoneNumber: '934 516 2135', + label: 'Work', + }, + { + country: 'no', + phoneNumber: '923 596 3843', + label: 'Home', + }, + ], + title: 'Track Service Worker', + company: 'Datagen', + birthday: '1980-02-26T12:00:00.000Z', + address: '802 Preston Court, Waikele, Pennsylvania, PO7421', + notes: + '

Aliqua sint aute in cillum deserunt enim fugiat tempor est pariatur irure commodo commodo deserunt eu nulla laboris enim occaecat incididunt voluptate enim est reprehenderit qui anim veniam sint adipisicing.

Commodo veniam occaecat ex et laborum minim fugiat sunt commodo velit dolor labore excepteur fugiat ipsum eiusmod in esse ex nulla deserunt minim consectetur in est sunt eu commodo fugiat.

', + tags: ['65930b5a-5d2a-4303-b11f-865d69e6fdb5'], + }, + { + id: 'cd482941-3eaf-4560-ac37-56a9296025df', + avatar: 'assets/images/avatars/female-11.jpg', + background: 'assets/images/cards/36-640x480.jpg', + name: 'Liliana Ayala', + emails: [ + { + email: 'lilianaayala@mail.io', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bd', + phoneNumber: '936 590 2412', + label: 'Mobile', + }, + ], + title: 'Insurance Analyst', + company: 'Pharmex', + birthday: '1988-04-27T12:00:00.000Z', + address: '935 Guider Avenue, Kipp, Wisconsin, PO5282', + notes: + '

Magna et culpa cillum sint labore consequat aute aliqua amet ea consequat ut ullamco nisi commodo lorem enim amet dolor sit nisi dolor do sit lorem cillum esse reprehenderit ut.

Quis veniam anim nulla adipisicing veniam fugiat elit duis pariatur anim irure adipisicing elit labore eu aute exercitation qui exercitation commodo exercitation ipsum tempor non et ex eu aute proident.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: '22f18d47-ff8d-440e-888d-a1747c093052', + avatar: 'assets/images/avatars/female-12.jpg', + background: 'assets/images/cards/14-640x480.jpg', + name: 'Alice Harding', + emails: [ + { + email: 'aliceharding@mail.us', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'sx', + phoneNumber: '881 472 3113', + label: 'Mobile', + }, + { + country: 'sx', + phoneNumber: '974 548 3124', + label: 'Work', + }, + { + country: 'sx', + phoneNumber: '800 518 3615', + label: 'Home', + }, + ], + title: 'Track Service Worker', + company: 'Futurity', + birthday: '1985-09-17T12:00:00.000Z', + address: '387 Holt Court, Thomasville, Alaska, PO2867', + notes: + '

Adipisicing exercitation dolor nisi ipsum nostrud anim dolore sint veniam consequat lorem sit ex commodo nostrud occaecat elit magna magna commodo incididunt laborum ad irure pariatur et sit ullamco adipisicing.

Ullamco in dolore amet est quis consectetur fugiat non nisi incididunt id laborum adipisicing dolor proident velit ut quis aliquip dolore id anim sit adipisicing nisi incididunt enim amet pariatur.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: 'a9a9f382-e4c3-42fb-9fe9-65aa534732b5', + avatar: 'assets/images/avatars/female-13.jpg', + background: 'assets/images/cards/15-640x480.jpg', + name: 'Francisca Perkins', + emails: [ + { + email: 'franciscaperkins@mail.tv', + label: 'Personal', + }, + { + email: 'perkins.francisca@overplex.com', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'au', + phoneNumber: '830 430 3437', + label: 'Mobile', + }, + { + country: 'au', + phoneNumber: '868 538 2886', + label: 'Work', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Overplex', + birthday: '1966-08-14T12:00:00.000Z', + address: '733 Delmonico Place, Belvoir, Virginia, PO7102', + notes: + '

Voluptate nisi adipisicing ex magna mollit non cillum dolor in magna duis exercitation irure elit duis eiusmod deserunt lorem nulla sunt laboris quis voluptate ullamco labore adipisicing quis minim ipsum.

Id ut esse elit proident mollit nulla exercitation magna voluptate sit eiusmod labore velit commodo exercitation dolore anim est eiusmod occaecat et consequat eiusmod culpa ipsum deserunt lorem non incididunt.

', + tags: ['2026ce08-d08f-4b4f-9506-b10cdb5b104f'], + }, + { + id: '0222b24b-c288-48d1-b356-0f087fa172f8', + avatar: null, + background: null, + name: 'Warren Gates', + emails: [ + { + email: 'warrengates@mail.name', + label: 'Personal', + }, + { + email: 'gates.warren@qualitex.me', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'gt', + phoneNumber: '847 513 2248', + label: 'Mobile', + }, + { + country: 'gt', + phoneNumber: '866 591 3665', + label: 'Work', + }, + { + country: 'gt', + phoneNumber: '877 539 3840', + label: 'Home', + }, + ], + title: 'Banker Mason', + company: 'Qualitex', + birthday: '1977-02-23T12:00:00.000Z', + address: '713 Fane Court, Lemoyne, Kentucky, PO3601', + notes: + '

Sint tempor consectetur ullamco ullamco consequat exercitation ea occaecat eiusmod cupidatat anim pariatur nisi pariatur excepteur ut labore anim excepteur sit eu consequat do enim pariatur et dolore in irure.

Commodo ut non minim sunt nisi tempor culpa duis anim ipsum qui irure lorem est voluptate voluptate officia occaecat lorem labore elit officia laboris mollit et eiusmod esse laborum nisi.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: '0630f1ca-cdb9-405d-b134-68f733334089', + avatar: 'assets/images/avatars/female-14.jpg', + background: 'assets/images/cards/16-640x480.jpg', + name: 'Maryann Mcintyre', + emails: [ + { + email: 'maryannmcintyre@mail.info', + label: 'Personal', + }, + { + email: 'mcintyre.maryann@aquafire.biz', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'bf', + phoneNumber: '861 419 2752', + label: 'Mobile', + }, + { + country: 'bf', + phoneNumber: '935 553 3031', + label: 'Work', + }, + ], + title: 'Fundraising Director', + company: 'Aquafire', + birthday: '1963-04-07T12:00:00.000Z', + address: '698 Brooklyn Avenue, Dixonville, Utah, PO2712', + notes: + '

Pariatur velit ea ad quis elit pariatur consectetur eiusmod veniam non incididunt ex ex et nulla voluptate fugiat esse sit dolore voluptate in dolor nulla laborum irure consequat sit pariatur.

Dolore ex officia incididunt pariatur ea amet sunt enim aute labore cupidatat laboris eiusmod enim lorem labore nostrud ea consectetur et eu sunt exercitation dolore consequat fugiat anim in exercitation.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: '999c24f3-7bb8-4a01-85ca-2fca7863c57e', + avatar: 'assets/images/avatars/female-15.jpg', + background: 'assets/images/cards/17-640x480.jpg', + name: 'Sharon Marshall', + emails: [ + { + email: 'sharonmarshall@mail.co.uk', + label: 'Personal', + }, + { + email: 'marshall.sharon@utara.net', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'fo', + phoneNumber: '947 441 2999', + label: 'Mobile', + }, + { + country: 'fo', + phoneNumber: '984 441 2615', + label: 'Work', + }, + { + country: 'fo', + phoneNumber: '824 541 2714', + label: 'Home', + }, + ], + title: 'Legal Assistant', + company: 'Utara', + birthday: '1960-01-26T12:00:00.000Z', + address: '923 Ivan Court, Hatteras, Idaho, PO7573', + notes: + '

Est duis sint ullamco nulla do tempor do dolore laboris in sint ad duis est eu consequat nisi esse irure tempor sunt pariatur qui mollit ipsum quis esse ex ipsum.

Dolore anim irure quis ipsum adipisicing sint et incididunt aute nisi minim aliquip consectetur duis tempor laborum nostrud exercitation do mollit irure anim lorem non excepteur commodo laborum dolore dolor.

', + tags: ['3eaab175-ec0d-4db7-bc3b-efc633c769be'], + }, + { + id: '7e8e1f1e-d19f-45c7-86bd-6fef599dae71', + avatar: 'assets/images/avatars/female-16.jpg', + background: 'assets/images/cards/18-640x480.jpg', + name: 'Margo Witt', + emails: [ + { + email: 'margowitt@mail.ca', + label: 'Personal', + }, + { + email: 'witt.margo@norsul.org', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'ao', + phoneNumber: '992 596 3391', + label: 'Mobile', + }, + { + country: 'ao', + phoneNumber: '950 489 2505', + label: 'Work', + }, + { + country: 'ao', + phoneNumber: '891 540 2231', + label: 'Home', + }, + ], + title: 'Television News Producer', + company: 'Norsul', + birthday: '1975-08-31T12:00:00.000Z', + address: '539 Rockaway Avenue, Whitmer, Guam, PO4871', + notes: + '

Sunt quis officia elit laborum excepteur consequat amet cillum labore deserunt cillum cillum labore exercitation minim laboris anim incididunt voluptate minim duis enim eu duis veniam labore nisi culpa duis.

Pariatur irure sunt et commodo reprehenderit consectetur duis et ullamco fugiat occaecat culpa enim incididunt officia minim aliqua sit amet do dolore pariatur fugiat et adipisicing labore dolor id dolore.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: 'bedcb6a2-da83-4631-866a-77d10d239477', + avatar: 'assets/images/avatars/male-04.jpg', + background: 'assets/images/cards/19-640x480.jpg', + name: 'Alvarado Turner', + emails: [ + { + email: 'alvaradoturner@mail.io', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'lv', + phoneNumber: '961 537 3956', + label: 'Mobile', + }, + ], + title: 'Fundraising Director', + company: 'Geologix', + birthday: '1985-12-08T12:00:00.000Z', + address: '233 Willmohr Street, Cressey, Iowa, PO1962', + notes: + '

In amet voluptate ad eiusmod cupidatat nulla sunt eu amet occaecat qui cillum occaecat tempor minim nostrud ullamco amet elit aliquip est nisi officia lorem occaecat ea lorem officia veniam.

Nulla tempor id excepteur irure do do veniam eiusmod esse ipsum sint dolore commodo enim officia nulla nulla proident in dolor et aliquip sit nulla sit proident duis aute deserunt.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: '66f9de1b-f842-4d4c-bb59-f97e91db0462', + avatar: 'assets/images/avatars/male-05.jpg', + background: 'assets/images/cards/20-640x480.jpg', + name: 'Maldonado Rodriquez', + emails: [ + { + email: 'maldonadorodriquez@mail.us', + label: 'Personal', + }, + { + email: 'rodriquez.maldonado@zentility.tv', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'et', + phoneNumber: '811 502 3398', + label: 'Mobile', + }, + { + country: 'et', + phoneNumber: '877 402 2443', + label: 'Work', + }, + { + country: 'et', + phoneNumber: '949 536 3451', + label: 'Home', + }, + ], + title: 'Dental Laboratory Worker', + company: 'Zentility', + birthday: '1993-06-01T12:00:00.000Z', + address: '916 Cobek Court, Morningside, South Dakota, PO2019', + notes: + '

Laboris consequat labore nisi aute voluptate minim amet nulla elit tempor dolor nulla do et consequat esse dolore fugiat laboris deserunt velit minim laboris voluptate enim ut non laboris nisi.

Magna pariatur voluptate veniam nostrud irure magna pariatur ut quis reprehenderit voluptate aute duis sunt laboris consequat lorem eu pariatur nulla incididunt quis lorem consectetur ex lorem commodo magna dolore.

', + tags: ['c31e9e5d-e0cb-4574-a13f-8a6ee5ff8309'], + }, + { + id: '9cb0ea57-3461-4182-979b-593b0c1ec6c3', + avatar: 'assets/images/avatars/male-06.jpg', + background: 'assets/images/cards/21-640x480.jpg', + name: 'Tran Duke', + emails: [ + { + email: 'tranduke@mail.com', + label: 'Personal', + }, + { + email: 'duke.tran@splinx.name', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'si', + phoneNumber: '837 503 2254', + label: 'Mobile', + }, + { + country: 'si', + phoneNumber: '893 405 3190', + label: 'Work', + }, + { + country: 'si', + phoneNumber: '931 402 3874', + label: 'Home', + }, + ], + title: 'Legal Assistant', + company: 'Splinx', + birthday: '1976-04-27T12:00:00.000Z', + address: '405 Canarsie Road, Richville, Virgin Islands, PO2744', + notes: + '

Occaecat do excepteur non ipsum labore consequat id eu sunt minim aliquip elit occaecat velit ut aute cupidatat irure ex eiusmod fugiat ea ea cupidatat nulla dolor labore consectetur amet.

Mollit enim dolore deserunt tempor aliqua velit nostrud nostrud id consectetur lorem in enim excepteur nisi laborum ex commodo sint ea et culpa lorem esse culpa ad officia do amet.

', + tags: ['3eaab175-ec0d-4db7-bc3b-efc633c769be'], + }, + { + id: '2fb89a90-5622-4b5b-8df3-d49b85905392', + avatar: null, + background: null, + name: 'Estela Lyons', + emails: [ + { + email: 'estelalyons@mail.me', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'vg', + phoneNumber: '864 459 3205', + label: 'Mobile', + }, + { + country: 'vg', + phoneNumber: '886 524 2880', + label: 'Work', + }, + { + country: 'vg', + phoneNumber: '815 484 3420', + label: 'Home', + }, + ], + title: 'Animal Sitter', + company: 'Gonkle', + birthday: '1968-03-11T12:00:00.000Z', + address: '540 Metrotech Courtr, Garfield, American Samoa, PO2290', + notes: + '

Ullamco dolore ipsum exercitation officia dolore sit consequat nisi consequat occaecat et ipsum veniam anim tempor pariatur sunt in adipisicing aliqua non dolor laborum veniam nisi dolore quis sunt incididunt.

Incididunt ullamco sunt magna reprehenderit velit dolor qui anim eiusmod nostrud commodo exercitation velit incididunt exercitation nulla ad aute eiusmod est amet exercitation est nostrud sit esse esse ad irure.

', + tags: ['2026ce08-d08f-4b4f-9506-b10cdb5b104f'], + }, + { + id: '8141dd08-3a6e-4770-912c-59d0ed06dde6', + avatar: null, + background: null, + name: 'Madeleine Fletcher', + emails: [ + { + email: 'madeleinefletcher@mail.info', + label: 'Personal', + }, + { + email: 'fletcher.madeleine@genmom.biz', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'uy', + phoneNumber: '898 554 3354', + label: 'Mobile', + }, + ], + title: 'Fundraising Director', + company: 'Genmom', + birthday: '1970-07-15T12:00:00.000Z', + address: '825 Cherry Street, Foscoe, Minnesota, PO7290', + notes: + '

Fugiat in exercitation nostrud labore labore irure ex magna ex aliquip veniam sit irure irure deserunt occaecat tempor cillum aliqua dolore ea tempor dolore laboris est amet quis consequat quis.

Esse officia velit consectetur ullamco ea pariatur mollit sit consectetur sint mollit commodo anim anim ea amet consectetur eiusmod aliqua excepteur elit laborum magna non fugiat nisi pariatur ut velit.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: '7585015c-ada2-4f88-998d-9646865d1ad2', + avatar: 'assets/images/avatars/male-07.jpg', + background: 'assets/images/cards/22-640x480.jpg', + name: 'Meyer Roach', + emails: [ + { + email: 'meyerroach@mail.co.uk', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'uz', + phoneNumber: '891 543 2053', + label: 'Mobile', + }, + { + country: 'uz', + phoneNumber: '842 564 3671', + label: 'Work', + }, + { + country: 'uz', + phoneNumber: '992 491 3514', + label: 'Home', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Zentime', + birthday: '1968-10-16T12:00:00.000Z', + address: '315 Albemarle Road, Allison, Arkansas, PO6008', + notes: + '

Eiusmod deserunt aliqua dolore ipsum cillum veniam minim dolore nulla aute aliqua voluptate labore sint cillum excepteur nulla nostrud do cupidatat eu adipisicing reprehenderit deserunt elit qui mollit adipisicing eu.

Proident commodo magna eu voluptate eiusmod aliqua laborum eu ea elit quis ullamco ullamco magna minim enim amet dolore sit lorem aliqua officia amet officia non magna enim cillum sit.

', + tags: ['c31e9e5d-e0cb-4574-a13f-8a6ee5ff8309'], + }, + { + id: '32c73a6a-67f2-48a9-b2a1-b23da83187bb', + avatar: null, + background: null, + name: 'Bolton Obrien', + emails: [ + { + email: 'boltonobrien@mail.net', + label: 'Personal', + }, + { + email: 'obrien.bolton@enersol.ca', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'tn', + phoneNumber: '860 472 2458', + label: 'Mobile', + }, + { + country: 'tn', + phoneNumber: '887 499 3580', + label: 'Work', + }, + ], + title: 'Banker Mason', + company: 'Enersol', + birthday: '1968-09-08T12:00:00.000Z', + address: '818 Aviation Road, Geyserville, Palau, PO9655', + notes: + '

Cupidatat lorem tempor commodo do eu ea dolor eiusmod do nisi occaecat fugiat labore non esse aliquip ullamco laboris adipisicing pariatur nostrud enim minim do fugiat culpa exercitation lorem duis.

Pariatur cupidatat tempor est et nostrud in amet aliquip sint nulla amet ea lorem irure sint sit ea aliquip voluptate id laboris fugiat cillum cillum dolore deserunt fugiat ad tempor.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: '114642a2-ccb7-4cb1-ad2b-5e9b6a0c1d2e', + avatar: 'assets/images/avatars/male-09.jpg', + background: 'assets/images/cards/23-640x480.jpg', + name: 'Barber Johnson', + emails: [ + { + email: 'barberjohnson@mail.org', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'az', + phoneNumber: '928 567 2521', + label: 'Mobile', + }, + { + country: 'az', + phoneNumber: '898 515 2048', + label: 'Work', + }, + { + country: 'az', + phoneNumber: '935 495 3348', + label: 'Home', + }, + ], + title: 'Talent Manager', + company: 'Zounds', + birthday: '1967-03-02T12:00:00.000Z', + address: '386 Vernon Avenue, Dragoon, North Carolina, PO4559', + notes: + '

Esse amet ex duis esse aliqua non tempor ullamco dolore et aliquip nisi pariatur qui laborum id consequat tempor sint eiusmod exercitation velit aliquip occaecat tempor nisi aute magna sint.

Deserunt veniam voluptate dolore eiusmod eu consequat dolor sit pariatur laboris anim excepteur consequat nulla officia exercitation magna sint ea excepteur qui eu officia pariatur culpa sint elit nulla officia.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: '310ece7d-dbb0-45d6-9e69-14c24e50fe3d', + avatar: 'assets/images/avatars/male-10.jpg', + background: 'assets/images/cards/24-640x480.jpg', + name: 'Cervantes Kramer', + emails: [ + { + email: 'cervanteskramer@mail.io', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'vg', + phoneNumber: '998 498 2507', + label: 'Mobile', + }, + { + country: 'vg', + phoneNumber: '856 477 3445', + label: 'Work', + }, + ], + title: 'Motor Winder', + company: 'Xeronk', + birthday: '1992-09-04T12:00:00.000Z', + address: '238 Rochester Avenue, Lydia, Oklahoma, PO3914', + notes: + '

Excepteur do ullamco voluptate deserunt tempor ullamco enim non incididunt adipisicing sunt sint sit qui occaecat occaecat id laboris et duis amet reprehenderit cupidatat aliquip dolore ea eu ea nulla.

Cillum nulla deserunt laboris eu sint dolor non laboris cupidatat aute nisi amet mollit ipsum cillum excepteur consequat tempor exercitation consequat nostrud ipsum qui excepteur eiusmod nostrud laboris pariatur sint.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: 'dcc673f6-de59-4715-94ed-8f64663d449b', + avatar: 'assets/images/avatars/female-19.jpg', + background: 'assets/images/cards/25-640x480.jpg', + name: 'Megan Suarez', + emails: [ + { + email: 'megansuarez@mail.us', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bb', + phoneNumber: '875 422 2053', + label: 'Mobile', + }, + { + country: 'bb', + phoneNumber: '861 487 2597', + label: 'Work', + }, + { + country: 'bb', + phoneNumber: '873 414 3953', + label: 'Home', + }, + ], + title: 'Bindery Machine Operator', + company: 'Cemention', + birthday: '1984-09-08T12:00:00.000Z', + address: '112 Tillary Street, Camptown, Vermont, PO8827', + notes: + '

Pariatur tempor laborum deserunt commodo eiusmod adipisicing amet anim irure fugiat laboris velit do velit elit aute deserunt officia fugiat nulla ullamco est elit veniam officia sit veniam velit commodo.

Laboris duis eu adipisicing esse fugiat voluptate enim sint in voluptate lorem laboris eiusmod commodo nostrud dolor qui incididunt non fugiat culpa aliquip minim voluptate lorem sint sunt velit eiusmod.

', + tags: ['65930b5a-5d2a-4303-b11f-865d69e6fdb5'], + }, + { + id: '3e4ca731-d39b-4ad9-b6e0-f84e67f4b74a', + avatar: 'assets/images/avatars/female-20.jpg', + background: 'assets/images/cards/26-640x480.jpg', + name: 'Ofelia Ratliff', + emails: [ + { + email: 'ofeliaratliff@mail.tv', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'vu', + phoneNumber: '978 546 3699', + label: 'Mobile', + }, + { + country: 'vu', + phoneNumber: '892 551 2229', + label: 'Work', + }, + { + country: 'vu', + phoneNumber: '949 495 3479', + label: 'Home', + }, + ], + company: 'Buzzmaker', + birthday: '1988-11-11T12:00:00.000Z', + address: '951 Hampton Avenue, Bartonsville, Mississippi, PO4232', + notes: + '

Ad lorem id irure aute ipsum ex occaecat commodo dolore eu dolor exercitation anim quis officia deserunt lorem sunt officia eu sit aliquip laborum id duis aliqua quis aute magna.

Do do lorem est amet aliqua ex excepteur nisi cupidatat esse consequat ipsum in ad eiusmod proident cupidatat dolore anim ut pariatur sint do elit incididunt officia adipisicing amet eu.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, + { + id: '2012d4a5-19e4-444d-aaff-1d8b1d853650', + avatar: 'assets/images/avatars/female-01.jpg', + background: 'assets/images/cards/27-640x480.jpg', + name: 'Laurel Parker', + emails: [ + { + email: 'laurelparker@mail.com', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'lu', + phoneNumber: '805 502 3677', + label: 'Mobile', + }, + { + country: 'lu', + phoneNumber: '925 527 2973', + label: 'Work', + }, + { + country: 'lu', + phoneNumber: '975 495 2977', + label: 'Home', + }, + ], + title: 'Fundraising Director', + company: 'Omnigog', + birthday: '1987-05-17T12:00:00.000Z', + address: '157 Woodhull Street, Rutherford, West Virginia, PO6646', + notes: + '

Duis laboris consectetur et anim eiusmod laborum aute mollit ut officia ipsum dolore eiusmod ex eu elit officia est amet aliquip ullamco veniam proident id aliquip duis qui voluptate fugiat.

Sunt aliquip nulla amet sint culpa laboris quis proident qui veniam excepteur ullamco irure non eu occaecat est enim ut velit dolore sit tempor cillum reprehenderit proident velit lorem ad.

', + tags: ['2026ce08-d08f-4b4f-9506-b10cdb5b104f'], + }, + { + id: '012b8219-74bf-447c-af2c-66904d90a956', + avatar: 'assets/images/avatars/female-02.jpg', + background: 'assets/images/cards/28-640x480.jpg', + name: 'Tracy Delacruz', + emails: [ + { + email: 'tracydelacruz@mail.name', + label: 'Personal', + }, + { + email: 'delacruz.tracy@shepard.me', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'co', + phoneNumber: '974 428 2886', + label: 'Mobile', + }, + ], + title: 'Bindery Machine Operator', + company: 'Shepard', + birthday: '1963-08-10T12:00:00.000Z', + address: '604 Merit Court, Wyano, New Hampshire, PO1641', + notes: + '

Dolor anim fugiat aliquip eiusmod lorem nisi adipisicing ea deserunt est quis non sit nulla voluptate deserunt magna eiusmod irure labore fugiat consectetur laboris velit voluptate exercitation aute magna sit.

Sunt ullamco quis qui ea ullamco quis sit ex nisi deserunt fugiat qui culpa minim proident dolor veniam lorem nulla amet do dolor proident sunt ex incididunt ipsum cillum non.

', + tags: ['c31e9e5d-e0cb-4574-a13f-8a6ee5ff8309'], + }, + { + id: '8b1befd2-66a7-4981-ae52-77f01b382d18', + avatar: 'assets/images/avatars/female-03.jpg', + background: 'assets/images/cards/29-640x480.jpg', + name: 'Jeannette Stanton', + emails: [ + { + email: 'jeannettestanton@mail.info', + label: 'Personal', + }, + { + email: 'stanton.jeannette@zentury.biz', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'dz', + phoneNumber: '947 561 3783', + label: 'Mobile', + }, + { + country: 'dz', + phoneNumber: '917 463 3737', + label: 'Work', + }, + { + country: 'dz', + phoneNumber: '835 510 2059', + label: 'Home', + }, + ], + title: 'Hotel Manager', + company: 'Zentury', + birthday: '1975-09-02T12:00:00.000Z', + address: '100 Menahan Street, Snyderville, Kansas, PO1006', + notes: + '

Sint anim sint tempor proident irure proident exercitation dolor enim in sint non occaecat tempor mollit dolore ea labore ipsum sunt in incididunt proident excepteur id in velit et quis.

Amet mollit ut nostrud cupidatat ut culpa irure in ex occaecat aute aliqua tempor incididunt elit nulla irure aliqua ea do amet ex elit incididunt minim eu fugiat elit pariatur.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: '844668c3-5e20-4fed-9e3a-7d274f696e61', + avatar: 'assets/images/avatars/female-04.jpg', + background: 'assets/images/cards/30-640x480.jpg', + name: 'Johnnie Cleveland', + emails: [ + { + email: 'johnniecleveland@mail.co.uk', + label: 'Personal', + }, + { + email: 'cleveland.johnnie@viasia.net', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'au', + phoneNumber: '947 468 2942', + label: 'Mobile', + }, + ], + title: 'Fundraising Director', + company: 'Viasia', + birthday: '1986-03-15T12:00:00.000Z', + address: '283 Albany Avenue, Jennings, Rhode Island, PO1646', + notes: + '

Id est dolore nostrud consectetur ullamco aliquip dolore nisi consectetur cupidatat consectetur ut lorem exercitation laborum est culpa qui aliquip fugiat fugiat laborum minim sint sit laborum elit consectetur occaecat.

Cillum eu aliquip ex enim dolore enim ea pariatur elit voluptate in eu magna eu voluptate est cupidatat aliqua cupidatat ex eu dolor voluptate velit fugiat ipsum labore labore aliqua.

', + tags: ['65930b5a-5d2a-4303-b11f-865d69e6fdb5'], + }, + { + id: '5a01e870-8be1-45a5-b58a-ec09c06e8f28', + avatar: 'assets/images/avatars/female-05.jpg', + background: 'assets/images/cards/31-640x480.jpg', + name: 'Staci Hyde', + emails: [ + { + email: 'stacihyde@mail.ca', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'id', + phoneNumber: '944 525 2944', + label: 'Mobile', + }, + { + country: 'id', + phoneNumber: '877 500 2506', + label: 'Work', + }, + ], + title: 'Banker Mason', + company: 'Zilla', + birthday: '1975-04-22T12:00:00.000Z', + address: '560 Dooley Street, Ellerslie, Louisiana, PO1005', + notes: + '

Pariatur esse ex laborum ex dolor laborum proident enim consectetur occaecat magna adipisicing magna dolore officia aute et dolor aliquip enim adipisicing culpa reprehenderit aliqua officia qui pariatur aliquip occaecat.

Excepteur est nisi officia eiusmod et duis mollit labore minim duis officia lorem ipsum duis deserunt cupidatat excepteur nostrud incididunt non cillum fugiat adipisicing anim consectetur nostrud aliquip labore cupidatat.

', + tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'], + }, + { + id: '5ac1f193-f150-45f9-bfe4-b7b4e1a83ff9', + avatar: 'assets/images/avatars/female-06.jpg', + background: 'assets/images/cards/32-640x480.jpg', + name: 'Angela Gallagher', + emails: [ + { + email: 'angelagallagher@mail.org', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'et', + phoneNumber: '996 514 3856', + label: 'Mobile', + }, + { + country: 'et', + phoneNumber: '903 539 2049', + label: 'Work', + }, + { + country: 'et', + phoneNumber: '938 463 3685', + label: 'Home', + }, + ], + title: 'Electromedical Equipment Technician', + company: 'Zenolux', + birthday: '1965-08-02T12:00:00.000Z', + address: '445 Remsen Avenue, Ruckersville, Delaware, PO2712', + notes: + '

Pariatur do nisi labore culpa minim aliquip excepteur voluptate id id aute eu aliquip adipisicing nulla laboris consectetur dolore ullamco ut exercitation fugiat excepteur veniam ex cillum cupidatat ad adipisicing.

Dolor culpa dolor magna incididunt voluptate sunt amet dolor cillum ut nostrud nisi quis ex pariatur enim dolore sunt sunt cupidatat id non lorem magna esse amet commodo minim id.

', + tags: ['cbde2486-5033-4e09-838e-e901b108cd41'], + }, + { + id: '995df091-d78a-4bb7-840c-ba6a7d14a1bd', + avatar: 'assets/images/avatars/male-11.jpg', + background: 'assets/images/cards/33-640x480.jpg', + name: 'Hutchinson Levy', + emails: [ + { + email: 'hutchinsonlevy@mail.io', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'et', + phoneNumber: '970 546 3452', + label: 'Mobile', + }, + { + country: 'et', + phoneNumber: '894 438 2430', + label: 'Work', + }, + ], + title: 'Congressional Representative', + company: 'Zytrek', + birthday: '1978-03-22T12:00:00.000Z', + address: '911 Lois Avenue, Epworth, California, PO6557', + notes: + '

Veniam deserunt aliquip culpa commodo et est ea cillum ea pariatur reprehenderit dolore adipisicing voluptate dolor eiusmod tempor exercitation reprehenderit nostrud labore nostrud do nulla commodo officia qui culpa ea.

Velit deserunt do ut esse tempor minim cupidatat amet qui consequat enim duis elit veniam sunt sit aliquip irure cillum irure sunt officia incididunt cupidatat commodo amet non qui anim.

', + tags: ['65930b5a-5d2a-4303-b11f-865d69e6fdb5'], + }, + { + id: '7184be71-a28f-4f2b-8c45-15f78cf2f825', + avatar: 'assets/images/avatars/female-05.jpg', + background: 'assets/images/cards/34-640x480.jpg', + name: 'Alissa Nelson', + emails: [ + { + email: 'alissanelson@mail.us', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'lu', + phoneNumber: '893 600 2639', + label: 'Mobile', + }, + ], + title: 'Bindery Machine Operator', + company: 'Emtrak', + birthday: '1993-10-19T12:00:00.000Z', + address: '514 Sutter Avenue, Shindler, Puerto Rico, PO3862', + notes: + '

Ullamco ut aute reprehenderit velit incididunt veniam consequat ut ipsum sint laborum duis officia pariatur mollit enim nulla reprehenderit dolor aliquip labore ex aute in sunt dolor nulla reprehenderit dolor.

Ad enim ex non minim commodo culpa culpa ex est anim aute adipisicing proident ut ex et aliquip amet exercitation lorem tempor laborum quis reprehenderit veniam proident ullamco id eiusmod.

', + tags: ['3eaab175-ec0d-4db7-bc3b-efc633c769be'], + }, + { + id: '325d508c-ca49-42bf-b0d5-c4a6b8da3d5c', + avatar: null, + background: null, + name: 'Oliver Head', + emails: [ + { + email: 'oliverhead@mail.tv', + label: 'Personal', + }, + ], + phoneNumbers: [ + { + country: 'bn', + phoneNumber: '977 528 3294', + label: 'Mobile', + }, + ], + title: 'Meteorologist', + company: 'Rameon', + birthday: '1967-01-05T12:00:00.000Z', + address: '569 Clermont Avenue, Movico, Marshall Islands, PO7293', + notes: + '

Duis laborum magna ipsum officia cillum ea ut commodo anim exercitation incididunt id ipsum nisi consectetur aute officia culpa anim in veniam ad officia consequat qui ullamco ea laboris ad.

Ad ea excepteur ea veniam nostrud est labore ea consectetur laboris cupidatat aute pariatur aute mollit dolor do deserunt nisi mollit fugiat qui officia ullamco est officia est ullamco consequat.

', + tags: ['65930b5a-5d2a-4303-b11f-865d69e6fdb5'], + }, + { + id: 'c674b6e1-b846-4bba-824b-0b4df0cdec48', + avatar: 'assets/images/avatars/male-13.jpg', + background: 'assets/images/cards/35-640x480.jpg', + name: 'Duran Barr', + emails: [ + { + email: 'duranbarr@mail.com', + label: 'Personal', + }, + { + email: 'barr.duran@hinway.name', + label: 'Work', + }, + ], + phoneNumbers: [ + { + country: 'sr', + phoneNumber: '857 457 2508', + label: 'Mobile', + }, + { + country: 'sr', + phoneNumber: '887 522 2146', + label: 'Work', + }, + { + country: 'sr', + phoneNumber: '947 574 3174', + label: 'Home', + }, + ], + title: 'Insurance Analyst', + company: 'Hinway', + birthday: '1977-11-06T12:00:00.000Z', + address: '103 Chestnut Avenue, Glenbrook, Indiana, PO2578', + notes: + '

Ad ipsum occaecat dolore ullamco labore ex sint est pariatur aliquip ea do esse do est dolore duis excepteur esse irure eiusmod pariatur elit nostrud laboris ad ex nostrud nostrud.

Occaecat proident magna elit ullamco ea incididunt fugiat est nulla reprehenderit in veniam esse qui minim aliqua tempor excepteur dolor et tempor occaecat in veniam esse qui exercitation laborum esse.

', + tags: ['a8991c76-2fda-4bbd-a718-df13d6478847'], + }, +]; +export const countries = [ + { + id: '19430ee3-b0fe-4987-a7c8-74453ad5504d', + iso: 'af', + name: 'Afghanistan', + code: '+93', + flagImagePos: '-1px -3180px', + }, + { + id: '6c6b5c5c-97d5-4881-b5e1-e05b8f739ee7', + iso: 'al', + name: 'Albania', + code: '+355', + flagImagePos: '-1px -1310px', + }, + { + id: 'd1f3941f-075e-4777-a5fd-8b196d98cd5a', + iso: 'dz', + name: 'Algeria', + code: '+213', + flagImagePos: '-1px -681px', + }, + { + id: '0dc3d1b8-f7f3-4c3d-8493-0d8b5a679910', + iso: 'as', + name: 'American Samoa', + code: '+1', + flagImagePos: '-1px -2058px', + }, + { + id: 'e2e88578-b410-499f-aa59-9bb8da13c781', + iso: 'ad', + name: 'Andorra', + code: '+376', + flagImagePos: '-1px -766px', + }, + { + id: '4446885b-b391-4b84-866f-2b36603053c4', + iso: 'ao', + name: 'Angola', + code: '+244', + flagImagePos: '-1px -2636px', + }, + { + id: '07024099-a3db-4881-a628-24e8c0ba2508', + iso: 'ai', + name: 'Anguilla', + code: '+1', + flagImagePos: '-1px -2687px', + }, + { + id: '26be08bc-d87a-4134-9fb0-73b6a5b47cea', + iso: 'ag', + name: 'Antigua & Barbuda', + code: '+1', + flagImagePos: '-1px -1140px', + }, + { + id: '53c77399-494e-49df-9e3a-587b536c033e', + iso: 'ar', + name: 'Argentina', + code: '+54', + flagImagePos: '-1px -3282px', + }, + { + id: '9f5753c4-e9e4-4975-86b4-9eb9f4f484de', + iso: 'am', + name: 'Armenia', + code: '+374', + flagImagePos: '-1px -205px', + }, + { + id: 'f1bbb833-5c47-4e17-b8c3-1d492107dc86', + iso: 'aw', + name: 'Aruba', + code: '+297', + flagImagePos: '-1px -1021px', + }, + { + id: 'dc7e3322-8bd5-4c49-932d-a8e50bd1f9ad', + iso: 'ac', + name: 'Ascension Island', + code: '+247', + flagImagePos: '-1px -86px', + }, + { + id: '4505ba35-afa5-47ef-a6c7-9b57f1dcd187', + iso: 'au', + name: 'Australia', + code: '+61', + flagImagePos: '-1px -2279px', + }, + { + id: '57b3cd1f-d5d6-403b-8137-fbeeacaf136a', + iso: 'at', + name: 'Austria', + code: '+43', + flagImagePos: '-1px -1735px', + }, + { + id: '11cbde08-3c33-422c-bf4b-85561595ffb5', + iso: 'az', + name: 'Azerbaijan', + code: '+994', + flagImagePos: '-1px -1599px', + }, + { + id: '48c1e060-e685-4e91-8de8-725f42576e6c', + iso: 'bs', + name: 'Bahamas', + code: '+1', + flagImagePos: '-1px -460px', + }, + { + id: 'ee23ffb8-9540-4630-948e-ceba52fa54ce', + iso: 'bh', + name: 'Bahrain', + code: '+973', + flagImagePos: '-1px -1956px', + }, + { + id: 'b5f37cb6-7870-4ed9-8f92-3864bd870062', + iso: 'bd', + name: 'Bangladesh', + code: '+880', + flagImagePos: '-1px -2364px', + }, + { + id: '92de9080-f709-493e-a9fa-d23b3d4093d4', + iso: 'bb', + name: 'Barbados', + code: '+1', + flagImagePos: '-1px -2075px', + }, + { + id: 'a2f4ff04-86b8-4bc0-952f-686bfe99c07f', + iso: 'by', + name: 'Belarus', + code: '+375', + flagImagePos: '-1px -1412px', + }, + { + id: '2025b6b3-1287-4b4c-8b13-36deb44e5751', + iso: 'be', + name: 'Belgium', + code: '+32', + flagImagePos: '-1px -1px', + }, + { + id: '70d82950-3eca-496f-866d-d99c136260e5', + iso: 'bz', + name: 'Belize', + code: '+501', + flagImagePos: '-1px -613px', + }, + { + id: 'dc0bedf5-e197-46b4-af21-c2e495b15768', + iso: 'bj', + name: 'Benin', + code: '+229', + flagImagePos: '-1px -1684px', + }, + { + id: 'aeee4f9d-99a1-4c6b-826c-f3c0ff707dce', + iso: 'bm', + name: 'Bermuda', + code: '+1', + flagImagePos: '-1px -2585px', + }, + { + id: '73b80fa7-50d0-4fd5-8d26-24baade525a2', + iso: 'bt', + name: 'Bhutan', + code: '+975', + flagImagePos: '-1px -2483px', + }, + { + id: '571bf396-810b-4fc4-9ffc-c9e4db9d3bef', + iso: 'bo', + name: 'Bolivia', + code: '+591', + flagImagePos: '-1px -2177px', + }, + { + id: 'cbfbf28b-b79b-4b7d-a2e9-37a2000aa15b', + iso: 'ba', + name: 'Bosnia & Herzegovina', + code: '+387', + flagImagePos: '-1px -2092px', + }, + { + id: 'f929da82-915c-4ac8-ba13-aa1b44174c71', + iso: 'bw', + name: 'Botswana', + code: '+267', + flagImagePos: '-1px -3724px', + }, + { + id: '2dea0689-0548-400c-a58f-ebcd6373cd07', + iso: 'br', + name: 'Brazil', + code: '+55', + flagImagePos: '-1px -1004px', + }, + { + id: 'd2c2c16f-15f8-467b-8c42-a02babe5362b', + iso: 'io', + name: 'British Indian Ocean Territory', + code: '+246', + flagImagePos: '-1px -86px', + }, + { + id: '1d90db23-ca7c-4d23-a995-9b2a8021f4ad', + iso: 'vg', + name: 'British Virgin Islands', + code: '+1', + flagImagePos: '-1px -1854px', + }, + { + id: 'f16aebb2-cdae-4af2-aba5-f66f34d6ac3a', + iso: 'bn', + name: 'Brunei', + code: '+673', + flagImagePos: '-1px -2228px', + }, + { + id: '499d6ee6-8f8b-4a5b-bb92-9cce9d1c6546', + iso: 'bg', + name: 'Bulgaria', + code: '+359', + flagImagePos: '-1px -3537px', + }, + { + id: '67e2986b-98d0-44c3-b08f-6cbba8b14ff8', + iso: 'bf', + name: 'Burkina Faso', + code: '+226', + flagImagePos: '-1px -953px', + }, + { + id: 'fea611f2-4aa3-427f-86e1-657e8aef24a8', + iso: 'bi', + name: 'Burundi', + code: '+257', + flagImagePos: '-1px -2551px', + }, + { + id: '3b959360-3d04-4018-afdf-a392afa1881d', + iso: 'kh', + name: 'Cambodia', + code: '+855', + flagImagePos: '-1px -290px', + }, + { + id: '9336ba3b-01be-4b84-82b5-f02395856ac5', + iso: 'cm', + name: 'Cameroon', + code: '+237', + flagImagePos: '-1px -2806px', + }, + { + id: '36a159b0-f33e-4481-85b0-751bdd9ea79d', + iso: 'ca', + name: 'Canada', + code: '+1', + flagImagePos: '-1px -1803px', + }, + { + id: 'a3038010-382e-436e-b61d-e4b923aa1cb3', + iso: 'cv', + name: 'Cape Verde', + code: '+238', + flagImagePos: '-1px -3639px', + }, + { + id: 'dd898165-12a9-4c90-a3e4-012149c0feac', + iso: 'bq', + name: 'Caribbean Netherlands', + code: '+599', + flagImagePos: '-1px -3741px', + }, + { + id: 'a1f30091-26da-481a-a84f-2638b2d7c14d', + iso: 'ky', + name: 'Cayman Islands', + code: '+1', + flagImagePos: '-1px -375px', + }, + { + id: '469b4a79-8a1a-4428-b7bd-4665202b7292', + iso: 'cf', + name: 'Central African Republic', + code: '+236', + flagImagePos: '-1px -2466px', + }, + { + id: 'a9c2fa4b-c22a-41bd-9735-b4adeadab7f7', + iso: 'td', + name: 'Chad', + code: '+235', + flagImagePos: '-1px -1055px', + }, + { + id: 'f0825f0d-e086-49e0-846e-9e4784bf872c', + iso: 'cl', + name: 'Chile', + code: '+56', + flagImagePos: '-1px -1752px', + }, + { + id: '89d3f07d-446e-459d-b168-595af96d708f', + iso: 'cn', + name: 'China', + code: '+86', + flagImagePos: '-1px -1072px', + }, + { + id: '903801ce-2f83-4df8-a380-9dc6df6c35cf', + iso: 'co', + name: 'Colombia', + code: '+57', + flagImagePos: '-1px -409px', + }, + { + id: '55d7d2be-8273-4770-844c-1ef87524cd27', + iso: 'km', + name: 'Comoros', + code: '+269', + flagImagePos: '-1px -1871px', + }, + { + id: 'a5b00b2f-01de-4c0d-914f-fe05c92c8f43', + iso: 'cg', + name: 'Congo - Brazzaville', + code: '+242', + flagImagePos: '-1px -2398px', + }, + { + id: '58e07572-21b9-4630-a17c-a51c0ade4b8a', + iso: 'cd', + name: 'Congo - Kinshasa', + code: '+243', + flagImagePos: '-1px -1990px', + }, + { + id: '5a09d08e-b6ab-4084-8350-1d97d504c222', + iso: 'ck', + name: 'Cook Islands', + code: '+682', + flagImagePos: '-1px -3112px', + }, + { + id: '760f2b33-0822-4ad9-83cf-b497dcf273bb', + iso: 'cr', + name: 'Costa Rica', + code: '+506', + flagImagePos: '-1px -2857px', + }, + { + id: '489db55f-6316-4f43-a1c7-a0921e16743a', + iso: 'ci', + name: 'Côte d’Ivoire', + code: '+225', + flagImagePos: '-1px -2194px', + }, + { + id: '398c1d99-7ee4-44cd-9c2a-067acba2c8fb', + iso: 'hr', + name: 'Croatia', + code: '+385', + flagImagePos: '-1px -1174px', + }, + { + id: '572da7dc-8463-4797-ad84-7fcf8f53bb80', + iso: 'cu', + name: 'Cuba', + code: '+53', + flagImagePos: '-1px -987px', + }, + { + id: '572674e5-b0d4-4206-8310-70f4656e65e2', + iso: 'cw', + name: 'Curaçao', + code: '+599', + flagImagePos: '-1px -3758px', + }, + { + id: 'ac1e2a9d-a888-427e-9ad3-a0cbb27e603a', + iso: 'cy', + name: 'Cyprus', + code: '+357', + flagImagePos: '-1px -732px', + }, + { + id: '075ce3fd-83e7-472a-89cb-8b5e224102c4', + iso: 'cz', + name: 'Czechia', + code: '+420', + flagImagePos: '-1px -3095px', + }, + { + id: '4cde631a-97e9-4fc2-9465-9d9a433ca5c1', + iso: 'dk', + name: 'Denmark', + code: '+45', + flagImagePos: '-1px -1820px', + }, + { + id: '1b9c40a6-bf03-4759-b6ab-8edefafd8b44', + iso: 'dj', + name: 'Djibouti', + code: '+253', + flagImagePos: '-1px -2874px', + }, + { + id: 'f5eec2ba-1a0b-465c-b3e5-9bd8458d0704', + iso: 'dm', + name: 'Dominica', + code: '+1', + flagImagePos: '-1px -3350px', + }, + { + id: 'cb6921fc-df2a-4a97-8a34-4d901ac1e994', + iso: 'do', + name: 'Dominican Republic', + code: '+1', + flagImagePos: '-1px -2007px', + }, + { + id: '7d6641f1-ef97-4bee-b1b8-0f54fea35aeb', + iso: 'ec', + name: 'Ecuador', + code: '+593', + flagImagePos: '-1px -1531px', + }, + { + id: 'dfeb30b9-b4b8-4931-9334-c3961b7843a6', + iso: 'eg', + name: 'Egypt', + code: '+20', + flagImagePos: '-1px -3027px', + }, + { + id: '7d9f7158-7206-491f-a614-6a3e7e6af354', + iso: 'sv', + name: 'El Salvador', + code: '+503', + flagImagePos: '-1px -2160px', + }, + { + id: 'bcdbebc2-a51d-4891-93b0-52b463d0841d', + iso: 'gq', + name: 'Equatorial Guinea', + code: '+240', + flagImagePos: '-1px -1973px', + }, + { + id: '53c2c225-f321-406f-b377-7c8b6720bcb4', + iso: 'er', + name: 'Eritrea', + code: '+291', + flagImagePos: '-1px -936px', + }, + { + id: 'ba0e995a-17a8-48ff-88e6-54ff8207b038', + iso: 'ee', + name: 'Estonia', + code: '+372', + flagImagePos: '-1px -3333px', + }, + { + id: 'abe9af9b-91da-4bba-9adf-a496bf414719', + iso: 'sz', + name: 'Eswatini', + code: '+268', + flagImagePos: '-1px -3129px', + }, + { + id: 'e993ecc8-732a-4446-8ab1-144c084f3192', + iso: 'et', + name: 'Ethiopia', + code: '+251', + flagImagePos: '-1px -3367px', + }, + { + id: '6c7aae9d-e18d-4d09-8467-7bb99d925768', + iso: 'fk', + name: 'Falkland Islands (Islas Malvinas)', + code: '+500', + flagImagePos: '-1px -3809px', + }, + { + id: '92e704eb-9573-4d91-b932-2b1eddaacb3e', + iso: 'fo', + name: 'Faroe Islands', + code: '+298', + flagImagePos: '-1px -1429px', + }, + { + id: '561c079c-69c2-4e62-b947-5cd76783a67c', + iso: 'fj', + name: 'Fiji', + code: '+679', + flagImagePos: '-1px -2500px', + }, + { + id: '3f31a88e-c7ed-47fa-9aae-2058be7cbe09', + iso: 'fi', + name: 'Finland', + code: '+358', + flagImagePos: '-1px -2568px', + }, + { + id: '4c8ba1fc-0203-4a8f-8321-4dda4a0c6732', + iso: 'fr', + name: 'France', + code: '+33', + flagImagePos: '-1px -324px', + }, + { + id: '198074d5-67a2-4fd3-b13d-429a394b6371', + iso: 'gf', + name: 'French Guiana', + code: '+594', + flagImagePos: '-1px -324px', + }, + { + id: '2f5ff3d1-745e-48a1-b4e8-a377b22af812', + iso: 'pf', + name: 'French Polynesia', + code: '+689', + flagImagePos: '-1px -2262px', + }, + { + id: 'a8b80121-5529-4cfe-83fb-6b1f6c81abcb', + iso: 'ga', + name: 'Gabon', + code: '+241', + flagImagePos: '-1px -1157px', + }, + { + id: 'c9bc7d57-7883-4f63-bc6e-5dcc3db8612d', + iso: 'gm', + name: 'Gambia', + code: '+220', + flagImagePos: '-1px -817px', + }, + { + id: '1fc146d8-cebe-4ef1-bb0f-30bd0870ccf9', + iso: 'ge', + name: 'Georgia', + code: '+995', + flagImagePos: '-1px -1123px', + }, + { + id: 'e74ac4b1-0b4b-4630-bac0-2e53e270b363', + iso: 'de', + name: 'Germany', + code: '+49', + flagImagePos: '-1px -3452px', + }, + { + id: 'adda89c9-4b47-4552-85c4-668f2cef2dbd', + iso: 'gh', + name: 'Ghana', + code: '+233', + flagImagePos: '-1px -2891px', + }, + { + id: '962a059b-a5ac-4e2f-9405-5c418cadb6b0', + iso: 'gi', + name: 'Gibraltar', + code: '+350', + flagImagePos: '-1px -341px', + }, + { + id: '0acd0dae-0f39-4c23-be1d-c0295539d8c4', + iso: 'gr', + name: 'Greece', + code: '+30', + flagImagePos: '-1px -188px', + }, + { + id: '7529a6e4-8a6a-4c27-885e-ff0c5e15e515', + iso: 'gl', + name: 'Greenland', + code: '+299', + flagImagePos: '-1px -2347px', + }, + { + id: '416ba85d-f860-48dc-9c60-32602c07e266', + iso: 'gd', + name: 'Grenada', + code: '+1', + flagImagePos: '-1px -3316px', + }, + { + id: 'f43f1f96-1fb1-4e5e-b818-71e60e501fd4', + iso: 'gp', + name: 'Guadeloupe', + code: '+590', + flagImagePos: '-1px -511px', + }, + { + id: 'e29122da-20cf-4d24-bc68-93f9c3296730', + iso: 'gu', + name: 'Guam', + code: '+1', + flagImagePos: '-1px -3265px', + }, + { + id: '8a24ff28-dcae-4846-b0c1-18cfcb04de06', + iso: 'gt', + name: 'Guatemala', + code: '+502', + flagImagePos: '-1px -1208px', + }, + { + id: 'b617a005-be15-49c8-9533-c0376681a564', + iso: 'gn', + name: 'Guinea', + code: '+224', + flagImagePos: '-1px -3520px', + }, + { + id: 'd9913e74-e340-4a4f-bf4b-aaaf1747364b', + iso: 'gw', + name: 'Guinea-Bissau', + code: '+245', + flagImagePos: '-1px -2602px', + }, + { + id: 'c8245da4-cd4f-4818-a41e-42afec6faa9a', + iso: 'gy', + name: 'Guyana', + code: '+592', + flagImagePos: '-1px -1038px', + }, + { + id: 'c598961d-3040-4dbb-8934-6d8eb4b9be97', + iso: 'ht', + name: 'Haiti', + code: '+509', + flagImagePos: '-1px -392px', + }, + { + id: 'f51aadf1-3c7a-4d24-b8fb-69c7e05243e4', + iso: 'hn', + name: 'Honduras', + code: '+504', + flagImagePos: '-1px -2959px', + }, + { + id: 'a621dbe5-fb11-4f7f-9a8d-2330bd20c563', + iso: 'hk', + name: 'Hong Kong', + code: '+852', + flagImagePos: '-1px -3707px', + }, + { + id: 'a113fe26-d409-4ab7-b27c-0e8ac112071f', + iso: 'hu', + name: 'Hungary', + code: '+36', + flagImagePos: '-1px -902px', + }, + { + id: '6430b612-4071-4614-bfdb-408fbb0b8fa4', + iso: 'is', + name: 'Iceland', + code: '+354', + flagImagePos: '-1px -2704px', + }, + { + id: '4cce1334-df1f-4b11-9f15-a4faaac3d0db', + iso: 'in', + name: 'India', + code: '+91', + flagImagePos: '-1px -2245px', + }, + { + id: '54969b2f-6aa9-4a58-850d-b4779ef3038e', + iso: 'id', + name: 'Indonesia', + code: '+62', + flagImagePos: '-1px -2653px', + }, + { + id: 'cb631628-5854-44d2-9dbc-47cdf9c9ea5e', + iso: 'ir', + name: 'Iran', + code: '+98', + flagImagePos: '-1px -2738px', + }, + { + id: '21a50cc1-954c-49c2-8296-696f1f57b79e', + iso: 'iq', + name: 'Iraq', + code: '+964', + flagImagePos: '-1px -851px', + }, + { + id: '3e17cb8a-9c44-4c75-b417-556546ceebff', + iso: 'ie', + name: 'Ireland', + code: '+353', + flagImagePos: '-1px -2670px', + }, + { + id: '0a15f5a3-7571-478a-9fcd-6cbd6563e08c', + iso: 'il', + name: 'Israel', + code: '+972', + flagImagePos: '-1px -426px', + }, + { + id: '2cbab786-d79b-4ea1-ab26-0553c5e423d3', + iso: 'it', + name: 'Italy', + code: '+39', + flagImagePos: '-1px -154px', + }, + { + id: '33a67cd8-0858-46c3-b833-4fd395d2daa4', + iso: 'jm', + name: 'Jamaica', + code: '+1', + flagImagePos: '-1px -2296px', + }, + { + id: '5edf8bb6-6a29-44ee-b5f2-7d7cbf61f971', + iso: 'jp', + name: 'Japan', + code: '+81', + flagImagePos: '-1px -528px', + }, + { + id: '879b69bb-3f8f-484f-a767-7fdeef6bae15', + iso: 'jo', + name: 'Jordan', + code: '+962', + flagImagePos: '-1px -1905px', + }, + { + id: '4217e52c-2835-4c7b-87d3-e290c4fa6074', + iso: 'kz', + name: 'Kazakhstan', + code: '+7', + flagImagePos: '-1px -1565px', + }, + { + id: '934b172d-4427-47f6-8648-6411652be23d', + iso: 'ke', + name: 'Kenya', + code: '+254', + flagImagePos: '-1px -3605px', + }, + { + id: '2358e177-3956-4bcf-a954-56275e90e28d', + iso: 'ki', + name: 'Kiribati', + code: '+686', + flagImagePos: '-1px -477px', + }, + { + id: '98e8fae8-cd1b-419f-813b-ee348b51d843', + iso: 'xk', + name: 'Kosovo', + code: '+383', + flagImagePos: '-1px -3860px', + }, + { + id: '5376f774-4fcb-47dc-b118-e48d34b030ef', + iso: 'kw', + name: 'Kuwait', + code: '+965', + flagImagePos: '-1px -3435px', + }, + { + id: '9bc380c4-5840-4d26-a615-310cd817ae94', + iso: 'kg', + name: 'Kyrgyzstan', + code: '+996', + flagImagePos: '-1px -2143px', + }, + { + id: '3278e7f0-176b-4352-9e38-df59b052b91f', + iso: 'la', + name: 'Laos', + code: '+856', + flagImagePos: '-1px -562px', + }, + { + id: 'e2ba5fad-f531-467c-b195-a6cd90136e19', + iso: 'lv', + name: 'Latvia', + code: '+371', + flagImagePos: '-1px -2619px', + }, + { + id: '49f74ca5-9ff1-44af-8e9c-59e1c4704e83', + iso: 'lb', + name: 'Lebanon', + code: '+961', + flagImagePos: '-1px -1616px', + }, + { + id: 'd94b6d96-17c1-4de8-abc3-3e14873b62c0', + iso: 'ls', + name: 'Lesotho', + code: '+266', + flagImagePos: '-1px -3010px', + }, + { + id: 'e35005f8-285e-4fe5-9cda-def721d9cc7b', + iso: 'lr', + name: 'Liberia', + code: '+231', + flagImagePos: '-1px -2823px', + }, + { + id: '60788779-78f0-4b2b-8ad8-c7e4bbde10b5', + iso: 'ly', + name: 'Libya', + code: '+218', + flagImagePos: '-1px -137px', + }, + { + id: 'f24ad4ea-454a-4d40-a1f1-db188ec0b75e', + iso: 'li', + name: 'Liechtenstein', + code: '+423', + flagImagePos: '-1px -1276px', + }, + { + id: 'f6709b72-4150-4cde-a37b-e6eb95f5bd1d', + iso: 'lt', + name: 'Lithuania', + code: '+370', + flagImagePos: '-1px -1446px', + }, + { + id: '0d0c1a84-f645-4ffe-87d2-9a7bb4f88bbc', + iso: 'lu', + name: 'Luxembourg', + code: '+352', + flagImagePos: '-1px -1922px', + }, + { + id: '5b3fdebe-a4ed-47c6-88c3-d867d3a79bf0', + iso: 'mo', + name: 'Macao', + code: '+853', + flagImagePos: '-1px -3554px', + }, + { + id: '6a84f456-bc77-4b76-8651-e2a0994f3278', + iso: 'mg', + name: 'Madagascar', + code: '+261', + flagImagePos: '-1px -1667px', + }, + { + id: '2a5d5baf-1db7-4606-a330-227834c77098', + iso: 'mw', + name: 'Malawi', + code: '+265', + flagImagePos: '-1px -2942px', + }, + { + id: 'f2b32090-6d8d-40db-ba50-a63037926508', + iso: 'my', + name: 'Malaysia', + code: '+60', + flagImagePos: '-1px -2517px', + }, + { + id: '51c7830c-0c76-44ed-bcdf-be75688e1d0c', + iso: 'mv', + name: 'Maldives', + code: '+960', + flagImagePos: '-1px -800px', + }, + { + id: 'ea7a2274-0542-4bbb-b629-aa63bef97442', + iso: 'ml', + name: 'Mali', + code: '+223', + flagImagePos: '-1px -3469px', + }, + { + id: '6f70796e-8f64-4a1a-ac2a-990d7d502db3', + iso: 'mt', + name: 'Malta', + code: '+356', + flagImagePos: '-1px -2041px', + }, + { + id: 'c60f429e-0d4f-42cf-96f9-e7dc4fdcd5ee', + iso: 'mh', + name: 'Marshall Islands', + code: '+692', + flagImagePos: '-1px -1463px', + }, + { + id: 'e8afae89-e5b0-4551-bbd4-bbfcee50c8ad', + iso: 'mq', + name: 'Martinique', + code: '+596', + flagImagePos: '-1px -239px', + }, + { + id: '361afc7c-ee94-464b-b5cb-f059ecd79e99', + iso: 'mr', + name: 'Mauritania', + code: '+222', + flagImagePos: '-1px -307px', + }, + { + id: 'bce43b5e-d2f7-47ca-b5c9-9ae72ba67bda', + iso: 'mu', + name: 'Mauritius', + code: '+230', + flagImagePos: '-1px -2993px', + }, + { + id: 'd153dc32-4821-4f05-a5c8-564d003da5e1', + iso: 'mx', + name: 'Mexico', + code: '+52', + flagImagePos: '-1px -2755px', + }, + { + id: '80f9f386-231f-4d96-b950-5f6b6edbeb63', + iso: 'fm', + name: 'Micronesia', + code: '+691', + flagImagePos: '-1px -2313px', + }, + { + id: 'a1d89e32-4b91-4519-b0d9-7d61299394ef', + iso: 'md', + name: 'Moldova', + code: '+373', + flagImagePos: '-1px -3690px', + }, + { + id: '0afeb22c-c106-479b-af45-1380fb8b404c', + iso: 'mc', + name: 'Monaco', + code: '+377', + flagImagePos: '-1px -1191px', + }, + { + id: 'a18d0204-7c4a-425c-a33e-cbfac01be162', + iso: 'mn', + name: 'Mongolia', + code: '+976', + flagImagePos: '-1px -3503px', + }, + { + id: '260479fc-0410-4ccd-a963-e06c9f059bdb', + iso: 'me', + name: 'Montenegro', + code: '+382', + flagImagePos: '-1px -2976px', + }, + { + id: 'a66872f1-ba90-420f-8f55-f0fbb10abce1', + iso: 'ms', + name: 'Montserrat', + code: '+1', + flagImagePos: '-1px -749px', + }, + { + id: '8fd1ba13-cb1a-488d-b715-01724d56d9dd', + iso: 'ma', + name: 'Morocco', + code: '+212', + flagImagePos: '-1px -3214px', + }, + { + id: '5d26fba4-6d15-4cd4-a23f-9034d952e580', + iso: 'mz', + name: 'Mozambique', + code: '+258', + flagImagePos: '-1px -834px', + }, + { + id: 'f9c12031-14dc-495f-b150-28dddce17e3f', + iso: 'mm', + name: 'Myanmar (Burma)', + code: '+95', + flagImagePos: '-1px -18px', + }, + { + id: '6e21e956-2740-4058-a758-3b249f628a7b', + iso: 'na', + name: 'Namibia', + code: '+264', + flagImagePos: '-1px -2534px', + }, + { + id: '4a07dd5a-9341-4b06-969f-4bcd9c32e2a0', + iso: 'nr', + name: 'Nauru', + code: '+674', + flagImagePos: '-1px -2330px', + }, + { + id: '9d7121ce-1445-4c84-9401-ddc703d9dedb', + iso: 'np', + name: 'Nepal', + code: '+977', + flagImagePos: '-1px -120px', + }, + { + id: '31fbb24d-7c38-4ca8-b385-48d76a0685e3', + iso: 'nl', + name: 'Netherlands', + code: '+31', + flagImagePos: '-1px -1888px', + }, + { + id: '18071cc2-c457-4b4f-9217-2519a0b52c25', + iso: 'nc', + name: 'New Caledonia', + code: '+687', + flagImagePos: '-1px -1650px', + }, + { + id: 'c4b0e7d1-08b2-421b-8ff6-913020cbf271', + iso: 'nz', + name: 'New Zealand', + code: '+64', + flagImagePos: '-1px -2024px', + }, + { + id: '25719230-2c64-4525-96c4-d4427dd2e40b', + iso: 'ni', + name: 'Nicaragua', + code: '+505', + flagImagePos: '-1px -171px', + }, + { + id: 'a1090a0b-7f89-4d75-8c92-e460da9103ab', + iso: 'ne', + name: 'Niger', + code: '+227', + flagImagePos: '-1px -715px', + }, + { + id: '6869e4bb-32b8-43ff-84d1-67d9ee832e1f', + iso: 'ng', + name: 'Nigeria', + code: '+234', + flagImagePos: '-1px -3418px', + }, + { + id: '52b3ae35-196a-4e22-81e2-67b816a32d0e', + iso: 'nu', + name: 'Niue', + code: '+683', + flagImagePos: '-1px -2840px', + }, + { + id: '9f4e45d4-c7e1-4ba9-84d0-e712e7213c95', + iso: 'nf', + name: 'Norfolk Island', + code: '+672', + flagImagePos: '-1px -256px', + }, + { + id: '2db1b02c-631e-40a0-94d8-f1e567b1f705', + iso: 'kp', + name: 'North Korea', + code: '+850', + flagImagePos: '-1px -2415px', + }, + { + id: '92621b3f-55f5-42bb-8604-d0302e355e31', + iso: 'mk', + name: 'North Macedonia', + code: '+389', + flagImagePos: '-1px -1769px', + }, + { + id: '3cee8ab2-5cb3-43ea-b8ab-7016187d33e9', + iso: 'mp', + name: 'Northern Mariana Islands', + code: '+1', + flagImagePos: '-1px -919px', + }, + { + id: '77683fad-f106-4a94-a629-9562650edb35', + iso: 'no', + name: 'Norway', + code: '+47', + flagImagePos: '-1px -1089px', + }, + { + id: '09090411-ef9b-44f3-aeb9-65b5e338b8d6', + iso: 'om', + name: 'Oman', + code: '+968', + flagImagePos: '-1px -3384px', + }, + { + id: '18d4f06b-233b-4398-a9f8-6b4a4eaf6c71', + iso: 'pk', + name: 'Pakistan', + code: '+92', + flagImagePos: '-1px -2772px', + }, + { + id: 'b1da5023-aab9-431c-921c-4f3e12b1aa7a', + iso: 'pw', + name: 'Palau', + code: '+680', + flagImagePos: '-1px -273px', + }, + { + id: 'e6442ab2-ac99-4a02-9d7c-fd878e50de8a', + iso: 'ps', + name: 'Palestine', + code: '+970', + flagImagePos: '-1px -1548px', + }, + { + id: '6bb10fb5-8b4a-4136-a82e-6be6c017ab76', + iso: 'pa', + name: 'Panama', + code: '+507', + flagImagePos: '-1px -1106px', + }, + { + id: 'b070a014-2ce4-4939-a868-951bd1e70923', + iso: 'pg', + name: 'Papua New Guinea', + code: '+675', + flagImagePos: '-1px -1939px', + }, + { + id: '5e23c743-ce7d-4abc-9dd4-44a700b29090', + iso: 'py', + name: 'Paraguay', + code: '+595', + flagImagePos: '-1px -3231px', + }, + { + id: '1a83f99d-91b3-438d-a576-5bf0f05fdd12', + iso: 'pe', + name: 'Peru', + code: '+51', + flagImagePos: '-1px -1225px', + }, + { + id: '667c9699-46b9-40f9-a41f-2c52826bb3cb', + iso: 'ph', + name: 'Philippines', + code: '+63', + flagImagePos: '-1px -2432px', + }, + { + id: 'b84030ab-3193-4aa2-aef2-d4d21997e536', + iso: 'pl', + name: 'Poland', + code: '+48', + flagImagePos: '-1px -1514px', + }, + { + id: 'e26d0064-6173-42ab-b761-bf8c639199fa', + iso: 'pt', + name: 'Portugal', + code: '+351', + flagImagePos: '-1px -664px', + }, + { + id: '0fd9770d-2a91-4b81-8633-f465bc151e16', + iso: 'pr', + name: 'Puerto Rico', + code: '+1', + flagImagePos: '-1px -596px', + }, + { + id: 'f866eeeb-e64f-4123-ab63-c16e0a00d029', + iso: 'qa', + name: 'Qatar', + code: '+974', + flagImagePos: '-1px -579px', + }, + { + id: 'c3a3fb54-5731-4a28-96bd-4190cfeeaff0', + iso: 're', + name: 'Réunion', + code: '+262', + flagImagePos: '-1px -324px', + }, + { + id: 'a6a48809-7e33-42c8-a25a-56ccdd7ccdfe', + iso: 'ro', + name: 'Romania', + code: '+40', + flagImagePos: '-1px -885px', + }, + { + id: '9556d1e9-3d02-4c5b-a0ce-97a2fd55c74a', + iso: 'ru', + name: 'Russia', + code: '+7', + flagImagePos: '-1px -868px', + }, + { + id: '6f7f0a97-e8b5-455d-bace-6953de7324eb', + iso: 'rw', + name: 'Rwanda', + code: '+250', + flagImagePos: '-1px -3673px', + }, + { + id: 'e251cad5-7655-48f7-9892-6edf04a14fd7', + iso: 'ws', + name: 'Samoa', + code: '+685', + flagImagePos: '-1px -3163px', + }, + { + id: 'f1cfec8c-a960-43b3-8e11-2cad72b4fff8', + iso: 'sm', + name: 'San Marino', + code: '+378', + flagImagePos: '-1px -2908px', + }, + { + id: 'c5301260-13dc-4012-9678-2b57a5e409ae', + iso: 'st', + name: 'São Tomé & Príncipe', + code: '+239', + flagImagePos: '-1px -3299px', + }, + { + id: '02599f80-225a-451b-8c25-03b8993f88ac', + iso: 'sa', + name: 'Saudi Arabia', + code: '+966', + flagImagePos: '-1px -52px', + }, + { + id: 'a54c3469-9668-4063-bfa0-04c450b43d3e', + iso: 'sn', + name: 'Senegal', + code: '+221', + flagImagePos: '-1px -2925px', + }, + { + id: '687ea07b-a7df-4778-b802-b040676fa56c', + iso: 'rs', + name: 'Serbia', + code: '+381', + flagImagePos: '-1px -3401px', + }, + { + id: 'd010fb25-7044-4055-9c60-25bc89d83f64', + iso: 'sc', + name: 'Seychelles', + code: '+248', + flagImagePos: '-1px -1327px', + }, + { + id: '0c46a1e9-fcd8-4e7e-bbb1-ef3bfa83539b', + iso: 'sl', + name: 'Sierra Leone', + code: '+232', + flagImagePos: '-1px -970px', + }, + { + id: 'e724edb6-9df4-42fb-bc1e-417996aa3020', + iso: 'sg', + name: 'Singapore', + code: '+65', + flagImagePos: '-1px -35px', + }, + { + id: '7478814a-dc3f-41ff-9341-da7e07ba8499', + iso: 'sx', + name: 'Sint Maarten', + code: '+1', + flagImagePos: '-1px -3826px', + }, + { + id: 'b1a34e32-38dd-4a38-b63a-7133baf1417a', + iso: 'sk', + name: 'Slovakia', + code: '+421', + flagImagePos: '-1px -3044px', + }, + { + id: '1c1689a5-580b-411f-9283-b1e8333b351e', + iso: 'si', + name: 'Slovenia', + code: '+386', + flagImagePos: '-1px -1582px', + }, + { + id: '4b1c6a42-90b0-49ea-b968-8c95b871f0ec', + iso: 'sb', + name: 'Solomon Islands', + code: '+677', + flagImagePos: '-1px -1361px', + }, + { + id: '7ec9fdff-8ae6-4a14-b55e-6262d46bc3ef', + iso: 'so', + name: 'Somalia', + code: '+252', + flagImagePos: '-1px -1786px', + }, + { + id: '5e62f404-3e2c-4d63-ad7b-ab0755903842', + iso: 'za', + name: 'South Africa', + code: '+27', + flagImagePos: '-1px -3248px', + }, + { + id: '31966c2a-7d24-4ebc-8e02-392e4f04f12b', + iso: 'kr', + name: 'South Korea', + code: '+82', + flagImagePos: '-1px -3078px', + }, + { + id: '1b7ba825-bf7d-42c0-bb73-81f10a4009bf', + iso: 'ss', + name: 'South Sudan', + code: '+211', + flagImagePos: '-1px -3775px', + }, + { + id: '55c4137b-e437-4e80-bc8f-7857cd7c9364', + iso: 'es', + name: 'Spain', + code: '+34', + flagImagePos: '-1px -1480px', + }, + { + id: 'fce4c284-e6a1-4e8c-96ca-6edf09e8a401', + iso: 'lk', + name: 'Sri Lanka', + code: '+94', + flagImagePos: '-1px -3622px', + }, + { + id: '0ae719a5-ae43-45d0-b669-66976a050ef1', + iso: 'bl', + name: 'St. Barthélemy', + code: '+590', + flagImagePos: '-1px -324px', + }, + { + id: 'a588cc85-32a4-45ff-ba69-627105dab27a', + iso: 'sh', + name: 'St. Helena', + code: '+290', + flagImagePos: '-1px -630px', + }, + { + id: 'f065aa7c-8d9e-419c-bbf0-9a97011cf272', + iso: 'kn', + name: 'St. Kitts & Nevis', + code: '+1', + flagImagePos: '-1px -103px', + }, + { + id: '9ea73bcc-2bf5-4ad9-9b39-de33de125f98', + iso: 'lc', + name: 'St. Lucia', + code: '+1', + flagImagePos: '-1px -1837px', + }, + { + id: '86a5a0e8-bfd4-480e-9bc0-7b88b2248a57', + iso: 'mf', + name: 'St. Martin', + code: '+590', + flagImagePos: '-1px -86px', + }, + { + id: '540857ba-923a-4656-a19f-cb3914825ecc', + iso: 'pm', + name: 'St. Pierre & Miquelon', + code: '+508', + flagImagePos: '-1px -1378px', + }, + { + id: 'd381eb44-e77a-4dbd-abbb-224d7158e96d', + iso: 'vc', + name: 'St. Vincent & Grenadines', + code: '+1', + flagImagePos: '-1px -3588px', + }, + { + id: '7015db62-072d-49a2-8320-7587ec8b952f', + iso: 'sd', + name: 'Sudan', + code: '+249', + flagImagePos: '-1px -443px', + }, + { + id: 'd7bbb285-aa4e-4a92-8613-8d2645c351ee', + iso: 'sr', + name: 'Suriname', + code: '+597', + flagImagePos: '-1px -3656px', + }, + { + id: '78978092-7be3-4ec8-b201-068089035cff', + iso: 'se', + name: 'Sweden', + code: '+46', + flagImagePos: '-1px -494px', + }, + { + id: '9f3fbec3-b58a-4b5a-9c4b-3997398c4148', + iso: 'ch', + name: 'Switzerland', + code: '+41', + flagImagePos: '-1px -1718px', + }, + { + id: '7ce0562c-fdc4-444c-bba3-02239c3c17da', + iso: 'sy', + name: 'Syria', + code: '+963', + flagImagePos: '-1px -2449px', + }, + { + id: '2d57a4a1-3f5a-41a2-a320-74a8f0db92e5', + iso: 'tw', + name: 'Taiwan', + code: '+886', + flagImagePos: '-1px -647px', + }, + { + id: 'e1f747c5-4e91-487b-8265-8f70b3430849', + iso: 'tj', + name: 'Tajikistan', + code: '+992', + flagImagePos: '-1px -222px', + }, + { + id: 'f07e257c-e049-4046-b031-f4348fb1734a', + iso: 'tz', + name: 'Tanzania', + code: '+255', + flagImagePos: '-1px -3146px', + }, + { + id: '684a0dde-5b5f-4072-98a4-46fc8de09556', + iso: 'th', + name: 'Thailand', + code: '+66', + flagImagePos: '-1px -1242px', + }, + { + id: '0376e29f-d9dd-4449-aa4e-d47353c16873', + iso: 'tl', + name: 'Timor-Leste', + code: '+670', + flagImagePos: '-1px -3843px', + }, + { + id: 'fd647814-fc64-4724-bba7-4cd4da26c11e', + iso: 'tg', + name: 'Togo', + code: '+228', + flagImagePos: '-1px -783px', + }, + { + id: 'ed271b14-39ee-4403-9be6-b54ac89b0ed3', + iso: 'tk', + name: 'Tokelau', + code: '+690', + flagImagePos: '-1px -3792px', + }, + { + id: 'e2b83ecb-5a79-4ca0-9860-4baeae0380bb', + iso: 'to', + name: 'Tonga', + code: '+676', + flagImagePos: '-1px -1395px', + }, + { + id: '33bca09c-cc33-4680-929b-191ccbbc959a', + iso: 'tt', + name: 'Trinidad & Tobago', + code: '+1', + flagImagePos: '-1px -545px', + }, + { + id: 'ab25c5da-7698-4b96-af34-5d20523915d9', + iso: 'tn', + name: 'Tunisia', + code: '+216', + flagImagePos: '-1px -698px', + }, + { + id: '784ac645-bc50-4b35-b5fb-effd72f99749', + iso: 'tr', + name: 'Turkey', + code: '+90', + flagImagePos: '-1px -2126px', + }, + { + id: '9a3b8bd3-bc73-4251-a068-a4842365e91a', + iso: 'tm', + name: 'Turkmenistan', + code: '+993', + flagImagePos: '-1px -3486px', + }, + { + id: '361bcad4-44d1-41fb-9bbf-39ea0fb87d49', + iso: 'tc', + name: 'Turks & Caicos Islands', + code: '+1', + flagImagePos: '-1px -1701px', + }, + { + id: '26fb1484-c756-4592-8523-99af9c870bb5', + iso: 'tv', + name: 'Tuvalu', + code: '+688', + flagImagePos: '-1px -358px', + }, + { + id: 'cdb8455e-4eda-48f7-b30a-63c20838a364', + iso: 'vi', + name: 'U.S. Virgin Islands', + code: '+1', + flagImagePos: '-1px -2381px', + }, + { + id: 'f47476cc-3da6-4377-83c9-33ab9f5293d1', + iso: 'ug', + name: 'Uganda', + code: '+256', + flagImagePos: '-1px -1497px', + }, + { + id: '5fcb791a-91be-416a-895d-0502fc509838', + iso: 'ua', + name: 'Ukraine', + code: '+380', + flagImagePos: '-1px -2721px', + }, + { + id: '7c8e1ced-0dd7-42b6-880b-19b3486d11e5', + iso: 'ae', + name: 'United Arab Emirates', + code: '+971', + flagImagePos: '-1px -3061px', + }, + { + id: '9f1362e7-e87c-4123-ade8-e5cfa6e99c09', + iso: 'gb', + name: 'United Kingdom', + code: '+44', + flagImagePos: '-1px -86px', + }, + { + id: 'f9033267-9df0-46e4-9f79-c8b022e5c835', + iso: 'us', + name: 'United States', + code: '+1', + flagImagePos: '-1px -69px', + }, + { + id: '2cab7122-ec9a-48ac-8415-392b4f67ae51', + iso: 'uy', + name: 'Uruguay', + code: '+598', + flagImagePos: '-1px -3571px', + }, + { + id: 'f442740c-94c3-4f2f-afb2-c7c279224b5f', + iso: 'uz', + name: 'Uzbekistan', + code: '+998', + flagImagePos: '-1px -1293px', + }, + { + id: 'e6774547-6ab1-41a2-8107-201f913937b2', + iso: 'vu', + name: 'Vanuatu', + code: '+678', + flagImagePos: '-1px -1633px', + }, + { + id: 'd600d6b0-e21f-4b6e-9036-0435a6ac2ea6', + iso: 'va', + name: 'Vatican City', + code: '+39', + flagImagePos: '-1px -3197px', + }, + { + id: 'b8e0072d-498b-4bb4-a5b6-354d4200f882', + iso: 've', + name: 'Venezuela', + code: '+58', + flagImagePos: '-1px -1344px', + }, + { + id: '15dc081a-4690-42e9-a40d-b3bcea3173fc', + iso: 'vn', + name: 'Vietnam', + code: '+84', + flagImagePos: '-1px -1259px', + }, + { + id: '4452a787-5f31-4eb7-b14c-ae3175564ae5', + iso: 'wf', + name: 'Wallis & Futuna', + code: '+681', + flagImagePos: '-1px -324px', + }, + { + id: '237c9f8d-3b6c-4b70-af72-8a58a7154144', + iso: 'ye', + name: 'Yemen', + code: '+967', + flagImagePos: '-1px -2211px', + }, + { + id: '02a76f62-3078-472a-bd42-edb759cf3079', + iso: 'zm', + name: 'Zambia', + code: '+260', + flagImagePos: '-1px -2109px', + }, + { + id: '10e8e117-6832-4d3f-9b05-f66832c2f5ec', + iso: 'zw', + name: 'Zimbabwe', + code: '+263', + flagImagePos: '-1px -2789px', + }, +]; +export const tags = [ + { + id: 'c31e9e5d-e0cb-4574-a13f-8a6ee5ff8309', + title: 'Work', + }, + { + id: 'a8991c76-2fda-4bbd-a718-df13d6478847', + title: 'Friend', + }, + { + id: '56ddbd47-4078-4ddd-8448-73c5e88d5f59', + title: 'Family', + }, + { + id: '2026ce08-d08f-4b4f-9506-b10cdb5b104f', + title: 'High School', + }, + { + id: '65930b5a-5d2a-4303-b11f-865d69e6fdb5', + title: 'College', + }, + { + id: '3eaab175-ec0d-4db7-bc3b-efc633c769be', + title: 'Baseball Team', + }, + { + id: 'cbde2486-5033-4e09-838e-e901b108cd41', + title: 'Band', + }, +]; diff --git a/src/app/mock-api/apps/ecommerce/inventory/api.ts b/src/app/mock-api/apps/ecommerce/inventory/api.ts new file mode 100644 index 0000000..d53f759 --- /dev/null +++ b/src/app/mock-api/apps/ecommerce/inventory/api.ts @@ -0,0 +1,332 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; +import { + brands as brandsData, + categories as categoriesData, + products as productsData, + tags as tagsData, + vendors as vendorsData, +} from 'app/mock-api/apps/ecommerce/inventory/data'; + +@Injectable({ + providedIn: 'root', +}) +export class ECommerceInventoryMockApi { + private _categories: any[] = categoriesData; + private _brands: any[] = brandsData; + private _products: any[] = productsData; + private _tags: any[] = tagsData; + private _vendors: any[] = vendorsData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Categories - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/ecommerce/inventory/categories') + .reply(() => [200, cloneDeep(this._categories)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Brands - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/ecommerce/inventory/brands') + .reply(() => [200, cloneDeep(this._brands)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Products - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/ecommerce/inventory/products', 300) + .reply(({ request }) => { + // Get available queries + const search = request.params.get('search'); + const sort = request.params.get('sort') || 'name'; + const order = request.params.get('order') || 'asc'; + const page = parseInt(request.params.get('page') ?? '1', 10); + const size = parseInt(request.params.get('size') ?? '10', 10); + + // Clone the products + let products: any[] | null = cloneDeep(this._products); + + // Sort the products + if (sort === 'sku' || sort === 'name' || sort === 'active') { + products.sort((a, b) => { + const fieldA = a[sort].toString().toUpperCase(); + const fieldB = b[sort].toString().toUpperCase(); + return order === 'asc' + ? fieldA.localeCompare(fieldB) + : fieldB.localeCompare(fieldA); + }); + } else { + products.sort((a, b) => + order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort] + ); + } + + // If search exists... + if (search) { + // Filter the products + products = products.filter( + (contact: any) => + contact.name && + contact.name.toLowerCase().includes(search.toLowerCase()) + ); + } + + // Paginate - Start + const productsLength = products.length; + + // Calculate pagination details + const begin = page * size; + const end = Math.min(size * (page + 1), productsLength); + const lastPage = Math.max(Math.ceil(productsLength / size), 1); + + // Prepare the pagination object + let pagination = {}; + + // If the requested page number is bigger than + // the last possible page number, return null for + // products but also send the last possible page so + // the app can navigate to there + if (page > lastPage) { + products = null; + pagination = { + lastPage, + }; + } else { + // Paginate the results by size + products = products.slice(begin, end); + + // Prepare the pagination mock-api + pagination = { + length: productsLength, + size: size, + page: page, + lastPage: lastPage, + startIndex: begin, + endIndex: end - 1, + }; + } + + // Return the response + return [ + 200, + { + products, + pagination, + }, + ]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Product - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/ecommerce/inventory/product') + .reply(({ request }) => { + // Get the id from the params + const id = request.params.get('id'); + + // Clone the products + const products = cloneDeep(this._products); + + // Find the product + const product = products.find((item: any) => item.id === id); + + // Return the response + return [200, product]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Product - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/apps/ecommerce/inventory/product') + .reply(() => { + // Generate a new product + const newProduct = { + id: FuseMockApiUtils.guid(), + category: '', + name: 'A New Product', + description: '', + tags: [], + sku: '', + barcode: '', + brand: '', + vendor: '', + stock: '', + reserved: '', + cost: '', + basePrice: '', + taxPercent: '', + price: '', + weight: '', + thumbnail: '', + images: [], + active: false, + }; + + // Unshift the new product + this._products.unshift(newProduct); + + // Return the response + return [200, newProduct]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Product - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/ecommerce/inventory/product') + .reply(({ request }) => { + // Get the id and product + const id = request.body.id; + const product = cloneDeep(request.body.product); + + // Prepare the updated product + let updatedProduct = null; + + // Find the product and update it + this._products.forEach((item, index, products) => { + if (item.id === id) { + // Update the product + products[index] = assign({}, products[index], product); + + // Store the updated product + updatedProduct = products[index]; + } + }); + + // Return the response + return [200, updatedProduct]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Product - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/ecommerce/inventory/product') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the product and delete it + this._products.forEach((item, index) => { + if (item.id === id) { + this._products.splice(index, 1); + } + }); + + // Return the response + return [200, true]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Tags - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/ecommerce/inventory/tags') + .reply(() => [200, cloneDeep(this._tags)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Tags - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/apps/ecommerce/inventory/tag') + .reply(({ request }) => { + // Get the tag + const newTag = cloneDeep(request.body.tag); + + // Generate a new GUID + newTag.id = FuseMockApiUtils.guid(); + + // Unshift the new tag + this._tags.unshift(newTag); + + // Return the response + return [200, newTag]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Tags - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/ecommerce/inventory/tag') + .reply(({ request }) => { + // Get the id and tag + const id = request.body.id; + const tag = cloneDeep(request.body.tag); + + // Prepare the updated tag + let updatedTag = null; + + // Find the tag and update it + this._tags.forEach((item, index, tags) => { + if (item.id === id) { + // Update the tag + tags[index] = assign({}, tags[index], tag); + + // Store the updated tag + updatedTag = tags[index]; + } + }); + + // Return the response + return [200, updatedTag]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Tag - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/ecommerce/inventory/tag') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the tag and delete it + this._tags.forEach((item, index) => { + if (item.id === id) { + this._tags.splice(index, 1); + } + }); + + // Get the products that have the tag + const productsWithTag = this._products.filter( + (product: any) => product.tags.indexOf(id) > -1 + ); + + // Iterate through them and delete the tag + productsWithTag.forEach((product) => { + product.tags.splice(product.tags.indexOf(id), 1); + }); + + // Return the response + return [200, true]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Vendors - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/ecommerce/inventory/vendors') + .reply(() => [200, cloneDeep(this._vendors)]); + } +} diff --git a/src/app/mock-api/apps/ecommerce/inventory/data.ts b/src/app/mock-api/apps/ecommerce/inventory/data.ts new file mode 100644 index 0000000..ea76d82 --- /dev/null +++ b/src/app/mock-api/apps/ecommerce/inventory/data.ts @@ -0,0 +1,845 @@ +/* eslint-disable */ +export const categories = [ + { + id: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + parentId: null, + name: 'Mens', + slug: 'mens', + }, + { + id: '07986d93-d4eb-4de1-9448-2538407f7254', + parentId: null, + name: 'Ladies', + slug: 'ladies', + }, + { + id: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + parentId: null, + name: 'Unisex', + slug: 'unisex', + }, +]; +export const brands = [ + { + id: 'e1789f32-9475-43e7-9256-451d2e3a2282', + name: 'Benton', + slug: 'benton', + }, + { + id: '61d52c2a-8947-4a2c-8c35-f36baef45b96', + name: 'Capmia', + slug: 'capmia', + }, + { + id: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + name: 'Lara', + slug: 'lara', + }, + { + id: '5913ee46-a497-41db-a118-ee506011529f', + name: 'Premera', + slug: 'premera', + }, + { + id: '2c4d98d8-f334-4125-9596-862515f5526b', + name: 'Zeon', + slug: 'zeon', + }, +]; +export const tags = [ + { + id: '167190fa-51b4-45fc-a742-8ce1b33d24ea', + title: 'mens', + }, + { + id: '3baea410-a7d6-4916-b79a-bdce50c37f95', + title: 'ladies', + }, + { + id: '8ec8f60d-552f-4216-9f11-462b95b1d306', + title: 'unisex', + }, + { + id: '8837b93f-388b-43cc-851d-4ca8f23f3a61', + title: '44mm', + }, + { + id: '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + title: '40mm', + }, + { + id: '2300ac48-f268-466a-b765-8b878b6e14a7', + title: '5 ATM', + }, + { + id: '0b11b742-3125-4d75-9a6f-84af7fde1969', + title: '10 ATM', + }, + { + id: '0fc39efd-f640-41f8-95a5-3f1d749df200', + title: 'automatic', + }, + { + id: '7d6dd47e-7472-4f8b-93d4-46c114c44533', + title: 'chronograph', + }, + { + id: 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + title: 'watch', + }, +]; +export const vendors = [ + { + id: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + name: 'Evel', + slug: 'evel', + }, + { + id: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + name: 'Mivon', + slug: 'mivon', + }, + { + id: '05ebb527-d733-46a9-acfb-a4e4ec960024', + name: 'Neogen', + slug: 'neogen', + }, +]; +export const products = [ + { + id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Capmia Mens Chronograph Watch 44mm 5 ATM', + description: + 'Consequat esse in culpa commodo anim. Et ullamco anim amet est. Sunt dolore ex occaecat officia anim. In sit minim laborum nostrud. Consequat ex do velit voluptate do exercitation est adipisicing quis velit.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ETV-2425', + barcode: '8346201275534', + brand: '61d52c2a-8947-4a2c-8c35-f36baef45b96', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 30, + reserved: 5, + cost: 450.18, + basePrice: 1036, + taxPercent: 30, + price: 1346.8, + weight: 0.61, + thumbnail: 'assets/images/apps/ecommerce/products/watch-01-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-01-01.jpg', + 'assets/images/apps/ecommerce/products/watch-01-02.jpg', + 'assets/images/apps/ecommerce/products/watch-01-03.jpg', + ], + active: true, + }, + { + id: '00b0292f-3d50-4669-a0c4-7a9d85efc98d', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Zeon Ladies Chronograph Watch 40mm 10 ATM', + description: + 'Nulla duis dolor fugiat culpa proident. Duis anim est excepteur occaecat adipisicing occaecat. Labore id laborum non elit proident est veniam officia eu. Labore aliqua nisi duis sint ex consequat nostrud excepteur duis ex incididunt adipisicing.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATH-7573', + barcode: '8278968055700', + brand: '2c4d98d8-f334-4125-9596-862515f5526b', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 37, + reserved: 2, + cost: 723.55, + basePrice: 1686, + taxPercent: 30, + price: 2191.8, + weight: 0.79, + thumbnail: 'assets/images/apps/ecommerce/products/watch-02-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-02-01.jpg', + 'assets/images/apps/ecommerce/products/watch-02-02.jpg', + 'assets/images/apps/ecommerce/products/watch-02-03.jpg', + ], + active: true, + }, + { + id: '3f34e2fb-95bf-4f61-be28-956d2c7e4eb2', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Benton Mens Automatic Watch 44mm 5 ATM', + description: + 'Velit irure deserunt aliqua officia. Eiusmod quis sunt magna laboris aliquip non dolor consequat cupidatat dolore esse. Consectetur mollit officia laborum fugiat nulla duis ad excepteur do aliqua fugiat. Fugiat non laboris exercitation ipsum in incididunt.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADH-1921', + barcode: '8808746892183', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 30, + reserved: 3, + cost: 390.63, + basePrice: 950, + taxPercent: 10, + price: 1045, + weight: 0.76, + thumbnail: null, + images: [ + 'assets/images/apps/ecommerce/products/watch-03-01.jpg', + 'assets/images/apps/ecommerce/products/watch-03-02.jpg', + 'assets/images/apps/ecommerce/products/watch-03-03.jpg', + ], + active: false, + }, + { + id: '8fcce528-d878-4cc8-99f7-bd3451ed5405', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Capmia Mens Chronograph Watch 44mm 10 ATM', + description: + 'Velit nisi proident cupidatat exercitation occaecat et adipisicing nostrud id ex nostrud sint. Qui fugiat velit minim amet reprehenderit voluptate velit exercitation proident Lorem nisi culpa. Commodo quis officia officia eiusmod mollit aute fugiat duis quis minim culpa in. Exercitation laborum fugiat ex excepteur officia reprehenderit magna ipsum. Laboris dolore nostrud id labore sint consectetur aliqua tempor ea aute do.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'EAP-7752', + barcode: '8866355574164', + brand: '61d52c2a-8947-4a2c-8c35-f36baef45b96', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 37, + reserved: 4, + cost: 395.37, + basePrice: 839, + taxPercent: 30, + price: 1090.7, + weight: 0.62, + thumbnail: 'assets/images/apps/ecommerce/products/watch-04-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-04-01.jpg', + 'assets/images/apps/ecommerce/products/watch-04-02.jpg', + 'assets/images/apps/ecommerce/products/watch-04-03.jpg', + ], + active: true, + }, + { + id: '91d96e18-d3f5-4c32-a8bf-1fc525cb92c0', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Benton Ladies Automatic Watch 40mm 5 ATM', + description: + 'Pariatur proident labore commodo consequat qui et. Ad labore fugiat consectetur ea magna dolore mollit consequat reprehenderit laborum ad mollit eiusmod. Esse laboris voluptate ullamco occaecat labore esse laboris enim ipsum aliquip ipsum. Ea ea proident eu enim anim mollit non consequat enim nulla.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADP-5745', + barcode: '8390590339828', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 12, + reserved: 3, + cost: 442.61, + basePrice: 961, + taxPercent: 20, + price: 1153.2, + weight: 0.67, + thumbnail: 'assets/images/apps/ecommerce/products/watch-05-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-05-01.jpg', + 'assets/images/apps/ecommerce/products/watch-05-02.jpg', + 'assets/images/apps/ecommerce/products/watch-05-03.jpg', + ], + active: false, + }, + { + id: 'd7a47d7c-4cdf-4319-bbaa-37ade38c622c', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Benton Mens Chronograph Watch 44mm 10 ATM', + description: + 'Nulla enim reprehenderit proident ut Lorem laborum cillum eiusmod est ex anim. Nisi non non laboris excepteur ullamco elit do duis anim esse labore aliqua adipisicing velit. Deserunt magna exercitation cillum amet.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATV-2569', + barcode: '8238990048137', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 36, + reserved: 2, + cost: 563.43, + basePrice: 1370, + taxPercent: 30, + price: 1781, + weight: 0.62, + thumbnail: 'assets/images/apps/ecommerce/products/watch-06-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-06-01.jpg', + 'assets/images/apps/ecommerce/products/watch-06-02.jpg', + 'assets/images/apps/ecommerce/products/watch-06-03.jpg', + ], + active: true, + }, + { + id: 'ecf0b3df-38c3-45dc-972b-c509a3dc053e', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Benton Mens Chronograph Watch 44mm 10 ATM', + description: + 'Esse culpa ut ullamco dolore quis adipisicing. Minim veniam quis magna officia non. In pariatur nostrud nisi eiusmod minim anim id. Commodo ex incididunt dolor ad id aliqua incididunt minim in Lorem reprehenderit. Commodo ullamco consectetur aliqua Lorem cupidatat esse veniam consectetur sint veniam duis commodo.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'EAH-2563', + barcode: '8638426908385', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 35, + reserved: 5, + cost: 705.26, + basePrice: 1721, + taxPercent: 20, + price: 2065.2, + weight: 0.67, + thumbnail: 'assets/images/apps/ecommerce/products/watch-07-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-07-01.jpg', + 'assets/images/apps/ecommerce/products/watch-07-02.jpg', + 'assets/images/apps/ecommerce/products/watch-07-03.jpg', + ], + active: false, + }, + { + id: '5765080a-aaee-40b9-86be-c18b9d79c73c', + category: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + name: 'Benton Unisex Automatic Watch 40mm 10 ATM', + description: + 'Anim duis nisi ut ex amet reprehenderit cillum consequat pariatur ipsum elit voluptate excepteur non. Anim enim proident laboris pariatur mollit quis incididunt labore. Incididunt tempor aliquip ex labore ad consequat cillum est sunt anim dolor. Dolore adipisicing non nulla cillum Lorem deserunt. Nostrud incididunt amet sint velit.', + tags: [ + '8ec8f60d-552f-4216-9f11-462b95b1d306', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATH-6399', + barcode: '8881883828441', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 17, + reserved: 5, + cost: 624.12, + basePrice: 1448, + taxPercent: 10, + price: 1592.8, + weight: 0.55, + thumbnail: 'assets/images/apps/ecommerce/products/watch-08-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-08-01.jpg', + 'assets/images/apps/ecommerce/products/watch-08-02.jpg', + 'assets/images/apps/ecommerce/products/watch-08-03.jpg', + ], + active: false, + }, + { + id: '6e71be88-b225-474c-91e5-111ced7d6220', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Premera Ladies Chronograph Watch 40mm 5 ATM', + description: + 'Velit fugiat adipisicing ut quis anim deserunt ex culpa nostrud laborum. Consectetur duis velit esse commodo voluptate magna dolor in enim exercitation. Ea aliquip cupidatat aute dolor tempor magna id laboris nulla eiusmod ut amet. Veniam irure ex incididunt officia commodo eiusmod nostrud ad consequat commodo ad voluptate.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ELH-2495', + barcode: '8268777127281', + brand: '5913ee46-a497-41db-a118-ee506011529f', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 49, + reserved: 5, + cost: 738.91, + basePrice: 1848, + taxPercent: 30, + price: 2402.4, + weight: 0.54, + thumbnail: 'assets/images/apps/ecommerce/products/watch-09-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-09-01.jpg', + 'assets/images/apps/ecommerce/products/watch-09-02.jpg', + 'assets/images/apps/ecommerce/products/watch-09-03.jpg', + ], + active: false, + }, + { + id: '51242500-6983-4a78-bff3-d278eb4e3a57', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Lara Mens Automatic Watch 44mm 10 ATM', + description: + 'Enim laboris ut non elit dolore est consectetur. Duis irure minim elit velit anim incididunt minim ipsum ullamco ad dolore sunt. Proident aute proident velit elit ex reprehenderit ut. Lorem laborum excepteur elit proident sunt ipsum incididunt id do. Occaecat proident proident qui aute officia cupidatat aliqua aliqua nostrud proident laboris est ad qui. Magna eiusmod amet ut pariatur esse nisi aliquip deserunt minim ad et ea occaecat. Sunt enim cupidatat id eiusmod ea aute quis excepteur irure commodo dolore excepteur.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATT-6019', + barcode: '8452763551765', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 24, + reserved: 4, + cost: 688.89, + basePrice: 1502, + taxPercent: 8, + price: 1622.16, + weight: 0.76, + thumbnail: 'assets/images/apps/ecommerce/products/watch-10-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-10-01.jpg', + 'assets/images/apps/ecommerce/products/watch-10-02.jpg', + 'assets/images/apps/ecommerce/products/watch-10-03.jpg', + ], + active: true, + }, + { + id: '844a4395-233f-4ffb-85bd-7baa0e490a88', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Lara Mens Chronograph Watch 44mm 5 ATM', + description: + 'Labore irure qui sunt consectetur. Elit nulla id cillum duis. Nulla nulla eu occaecat eiusmod duis irure id do esse. Ad eu incididunt voluptate amet nostrud ullamco mollit dolore occaecat cupidatat nisi reprehenderit. Proident fugiat laborum sit velit ea voluptate.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADH-2335', + barcode: '8385907318041', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 44, + reserved: 3, + cost: 708.41, + basePrice: 1467, + taxPercent: 18, + price: 1731.06, + weight: 0.7, + thumbnail: 'assets/images/apps/ecommerce/products/watch-11-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-11-01.jpg', + 'assets/images/apps/ecommerce/products/watch-11-02.jpg', + 'assets/images/apps/ecommerce/products/watch-11-03.jpg', + ], + active: false, + }, + { + id: '7520f1b6-3c45-46ef-a4d5-881971212d1e', + category: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + name: 'Benton Unisex Automatic Watch 40mm 10 ATM', + description: + 'Esse nisi amet occaecat culpa aliqua est ad ea velit. Consectetur in voluptate sit pariatur eiusmod exercitation eu aute occaecat in duis. Voluptate consectetur eu commodo proident id sunt labore irure.', + tags: [ + '8ec8f60d-552f-4216-9f11-462b95b1d306', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATH-3064', + barcode: '8608510561856', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 25, + reserved: 2, + cost: 731.94, + basePrice: 1743, + taxPercent: 10, + price: 1917.3, + weight: 0.47, + thumbnail: 'assets/images/apps/ecommerce/products/watch-12-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-12-01.jpg', + 'assets/images/apps/ecommerce/products/watch-12-02.jpg', + 'assets/images/apps/ecommerce/products/watch-12-03.jpg', + ], + active: false, + }, + { + id: '683e41d8-6ebc-4e6a-a7c1-9189ca52ef19', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Zeon Mens Chronograph Watch 44mm 10 ATM', + description: + 'Eu irure do cupidatat esse in. Aliqua laborum deserunt qui Lorem deserunt minim fugiat deserunt voluptate minim. Anim nulla tempor eiusmod ad exercitation reprehenderit officia. Nisi proident labore eu anim excepteur aliqua occaecat. Laboris nostrud ipsum commodo cupidatat.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADV-3188', + barcode: '8334758988643', + brand: '2c4d98d8-f334-4125-9596-862515f5526b', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 14, + reserved: 5, + cost: 375.76, + basePrice: 786, + taxPercent: 30, + price: 1021.8, + weight: 0.53, + thumbnail: 'assets/images/apps/ecommerce/products/watch-13-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-13-01.jpg', + 'assets/images/apps/ecommerce/products/watch-13-02.jpg', + 'assets/images/apps/ecommerce/products/watch-13-03.jpg', + ], + active: false, + }, + { + id: 'd4e52238-292d-462b-b9bb-1751030132e2', + category: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + name: 'Lara Unisex Chronograph Watch 40mm 5 ATM', + description: + 'Nulla nostrud aliquip consequat laborum ut enim exercitation. Aute dolor duis aliquip consequat minim officia. Nisi labore et magna et sunt consectetur id anim pariatur officia et esse ut. Ullamco dolor cillum consequat velit eiusmod consectetur. Ullamco reprehenderit tempor minim dolore officia do nisi cupidatat adipisicing fugiat velit.', + tags: [ + '8ec8f60d-552f-4216-9f11-462b95b1d306', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATT-7423', + barcode: '8417153336369', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 33, + reserved: 2, + cost: 743.93, + basePrice: 1793, + taxPercent: 8, + price: 1936.44, + weight: 0.86, + thumbnail: 'assets/images/apps/ecommerce/products/watch-14-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-14-01.jpg', + 'assets/images/apps/ecommerce/products/watch-14-02.jpg', + 'assets/images/apps/ecommerce/products/watch-14-03.jpg', + ], + active: false, + }, + { + id: '98861dfc-0d21-4fd5-81aa-49785d003d95', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Premera Mens Automatic Watch 44mm 10 ATM', + description: + 'Veniam sint aliquip aliquip aliquip amet Lorem irure proident laborum et eiusmod aliqua. Aliquip deserunt voluptate magna ut quis magna dolor in dolore. Commodo adipisicing excepteur occaecat aute nisi in. Est aute ad ut incididunt anim ea commodo. Sunt excepteur duis sunt est laborum magna Lorem ullamco exercitation dolore irure.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'AAT-6453', + barcode: '8501386761670', + brand: '5913ee46-a497-41db-a118-ee506011529f', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 38, + reserved: 3, + cost: 364.64, + basePrice: 806, + taxPercent: 18, + price: 951.08, + weight: 0.59, + thumbnail: 'assets/images/apps/ecommerce/products/watch-15-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-15-01.jpg', + 'assets/images/apps/ecommerce/products/watch-15-02.jpg', + 'assets/images/apps/ecommerce/products/watch-15-03.jpg', + ], + active: false, + }, + { + id: 'a71f9b10-e884-4aad-9810-29fe10ce6d42', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Lara Ladies Chronograph Watch 40mm 5 ATM', + description: + 'Deserunt non deserunt ut do labore cupidatat duis veniam in non adipisicing officia esse id. Adipisicing Lorem sint excepteur culpa labore consequat incididunt nulla minim amet. Sint do et fugiat laborum exercitation reprehenderit ut non nostrud occaecat nisi et qui dolore. Amet eiusmod nulla est officia ad magna cillum non dolor ullamco officia incididunt.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'AAP-4902', + barcode: '8847387136582', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 40, + reserved: 3, + cost: 525.3, + basePrice: 1303, + taxPercent: 10, + price: 1433.3, + weight: 0.69, + thumbnail: 'assets/images/apps/ecommerce/products/watch-16-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-16-01.jpg', + 'assets/images/apps/ecommerce/products/watch-16-02.jpg', + 'assets/images/apps/ecommerce/products/watch-16-03.jpg', + ], + active: false, + }, + { + id: '149e6db5-4ecc-4021-bc56-08b27514a746', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Lara Ladies Chronograph Watch 40mm 5 ATM', + description: + 'Occaecat proident fugiat consectetur ullamco est. Duis non minim eiusmod magna dolor reprehenderit ad deserunt et qui amet. Tempor cillum dolore veniam Lorem sit ad pariatur et sint. Sunt anim et cupidatat Lorem proident fugiat incididunt incididunt minim non sint. Eiusmod quis et ullamco cillum et veniam do tempor officia sint.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ALV-194', + barcode: '8860845382207', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 20, + reserved: 2, + cost: 670.87, + basePrice: 1537, + taxPercent: 8, + price: 1659.96, + weight: 0.66, + thumbnail: 'assets/images/apps/ecommerce/products/watch-17-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-17-01.jpg', + 'assets/images/apps/ecommerce/products/watch-17-02.jpg', + 'assets/images/apps/ecommerce/products/watch-17-03.jpg', + ], + active: false, + }, + { + id: '655287de-2e24-41f3-a82f-8b08548ecc39', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Zeon Mens Automatic Watch 44mm 10 ATM', + description: + 'Eiusmod magna tempor est est quis eu. Minim irure magna anim mollit non adipisicing aute. Nostrud aute consectetur eu in non laboris excepteur esse esse occaecat officia.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADH-5492', + barcode: '8611606513571', + brand: '2c4d98d8-f334-4125-9596-862515f5526b', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 47, + reserved: 2, + cost: 645.13, + basePrice: 1581, + taxPercent: 10, + price: 1739.1, + weight: 0.54, + thumbnail: 'assets/images/apps/ecommerce/products/watch-18-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-18-01.jpg', + 'assets/images/apps/ecommerce/products/watch-18-02.jpg', + 'assets/images/apps/ecommerce/products/watch-18-03.jpg', + ], + active: true, + }, + { + id: 'c215b427-d840-4537-aea1-a9bdfa49441b', + category: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + name: 'Lara Unisex Automatic Watch 40mm 10 ATM', + description: + 'Excepteur enim non qui consequat sunt exercitation laborum ipsum sunt. Sunt pariatur fugiat voluptate ipsum consectetur do magna culpa labore. Cupidatat non ex labore incididunt aliquip commodo est in. Consectetur mollit nisi aliquip cupidatat do laborum est ullamco velit aliqua fugiat qui adipisicing. Aute reprehenderit quis id sint nulla.', + tags: [ + '8ec8f60d-552f-4216-9f11-462b95b1d306', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'AAT-6702', + barcode: '8330223562386', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 21, + reserved: 3, + cost: 704.26, + basePrice: 1733, + taxPercent: 10, + price: 1906.3, + weight: 0.84, + thumbnail: 'assets/images/apps/ecommerce/products/watch-19-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-19-01.jpg', + 'assets/images/apps/ecommerce/products/watch-19-02.jpg', + 'assets/images/apps/ecommerce/products/watch-19-03.jpg', + ], + active: true, + }, + { + id: '8b1d9366-891e-49cd-aafb-ac65ce2741e2', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Zeon Ladies Automatic Watch 40mm 10 ATM', + description: + 'Reprehenderit magna reprehenderit ex mollit Lorem labore ut. Duis consectetur aliqua cillum occaecat quis ex excepteur fugiat nulla nisi dolor minim. Elit voluptate exercitation nulla et ut adipisicing esse eu nisi amet eu. Ut cillum ipsum quis fugiat proident Lorem est aute ipsum sint dolore consequat.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'EDH-5599', + barcode: '8309212335274', + brand: '2c4d98d8-f334-4125-9596-862515f5526b', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 35, + reserved: 2, + cost: 712.66, + basePrice: 1711, + taxPercent: 30, + price: 2224.3, + weight: 0.47, + thumbnail: 'assets/images/apps/ecommerce/products/watch-20-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-20-01.jpg', + 'assets/images/apps/ecommerce/products/watch-20-02.jpg', + 'assets/images/apps/ecommerce/products/watch-20-03.jpg', + ], + active: false, + }, + { + id: '54e29534-518b-4006-b72a-f21fac6c4d5e', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Lara Mens Chronograph Watch 44mm 10 ATM', + description: + 'Officia eu magna eu amet fugiat qui ullamco eu. Occaecat dolore minim ad tempor consequat adipisicing non Lorem consequat. In nostrud incididunt adipisicing in. Irure occaecat aliquip deserunt minim officia ad excepteur do commodo magna.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADP-3719', + barcode: '8879167838673', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 28, + reserved: 3, + cost: 374.38, + basePrice: 749, + taxPercent: 8, + price: 808.92, + weight: 0.52, + thumbnail: 'assets/images/apps/ecommerce/products/watch-21-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-21-01.jpg', + 'assets/images/apps/ecommerce/products/watch-21-02.jpg', + 'assets/images/apps/ecommerce/products/watch-21-03.jpg', + ], + active: false, + }, + { + id: '6a5726e8-c467-45ea-92ab-d83235a06405', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Premera Mens Chronograph Watch 44mm 10 ATM', + description: + 'Duis id consequat ex officia nisi. Et reprehenderit tempor sunt nostrud. Duis dolore tempor anim non duis qui aute magna officia. Ullamco proident esse enim amet nostrud occaecat veniam. Nostrud ea eiusmod laborum id laborum veniam nulla. Voluptate proident ullamco exercitation id consequat dolore id pariatur esse nulla consectetur.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATH-3399', + barcode: '8356410903599', + brand: '5913ee46-a497-41db-a118-ee506011529f', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 20, + reserved: 2, + cost: 444.68, + basePrice: 1103, + taxPercent: 18, + price: 1301.54, + weight: 0.56, + thumbnail: 'assets/images/apps/ecommerce/products/watch-22-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-22-01.jpg', + 'assets/images/apps/ecommerce/products/watch-22-02.jpg', + 'assets/images/apps/ecommerce/products/watch-22-03.jpg', + ], + active: false, + }, + { + id: 'd7d1d6df-e91f-4c53-982a-2720bc2b4cdd', + category: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + name: 'Capmia Unisex Automatic Watch 40mm 10 ATM', + description: + 'Voluptate consectetur nisi aliquip cupidatat sunt labore. Adipisicing voluptate tempor sunt eu irure cupidatat laboris. Enim aliquip aute sit non laborum Lorem in enim duis eu deserunt. Laboris magna irure aute ut proident fugiat laborum aliquip tempor nostrud id. Et esse cupidatat sunt ullamco reprehenderit enim dolore ea in do esse esse id.', + tags: [ + '8ec8f60d-552f-4216-9f11-462b95b1d306', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'EAV-4030', + barcode: '8545771786193', + brand: '61d52c2a-8947-4a2c-8c35-f36baef45b96', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 23, + reserved: 3, + cost: 538.72, + basePrice: 1213, + taxPercent: 10, + price: 1334.3, + weight: 0.75, + thumbnail: 'assets/images/apps/ecommerce/products/watch-23-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-23-01.jpg', + 'assets/images/apps/ecommerce/products/watch-23-02.jpg', + 'assets/images/apps/ecommerce/products/watch-23-03.jpg', + ], + active: true, + }, +]; diff --git a/src/app/mock-api/apps/file-manager/api.ts b/src/app/mock-api/apps/file-manager/api.ts new file mode 100644 index 0000000..6b8cbcf --- /dev/null +++ b/src/app/mock-api/apps/file-manager/api.ts @@ -0,0 +1,88 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service'; +import { items as itemsData } from 'app/mock-api/apps/file-manager/data'; + +@Injectable({ + providedIn: 'root', +}) +export class FileManagerMockApi { + private _items: any[] = itemsData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Items - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/file-manager') + .reply(({ request }) => { + // Clone the items + let items = cloneDeep(this._items); + + // See if a folder id exist + const folderId = request.params.get('folderId') ?? null; + + // Filter the items by folder id. If folder id is null, + // that means we want to root items which have folder id + // of null + items = items.filter((item: any) => item.folderId === folderId); + + // Separate the items by folders and files + const folders = items.filter((item: any) => item.type === 'folder'); + const files = items.filter((item: any) => item.type !== 'folder'); + + // Sort the folders and files alphabetically by filename + folders.sort((a, b) => a.name.localeCompare(b.name)); + files.sort((a, b) => a.name.localeCompare(b.name)); + + // Figure out the path and attach it to the response + // Prepare the empty paths array + const pathItems = cloneDeep(this._items); + const path = []; + + // Prepare the current folder + let currentFolder: any = null; + + // Get the current folder and add it as the first entry + if (folderId) { + currentFolder = pathItems.find((item: any) => item.id === folderId); + path.push(currentFolder); + } + + // Start traversing and storing the folders as a path array + // until we hit null on the folder id + while (currentFolder?.folderId) { + currentFolder = pathItems.find( + (item: any) => item.id === currentFolder.folderId + ); + if (currentFolder) { + path.unshift(currentFolder); + } + } + + return [ + 200, + { + folders, + files, + path, + }, + ]; + }); + } +} diff --git a/src/app/mock-api/apps/file-manager/data.ts b/src/app/mock-api/apps/file-manager/data.ts new file mode 100644 index 0000000..e96e430 --- /dev/null +++ b/src/app/mock-api/apps/file-manager/data.ts @@ -0,0 +1,258 @@ +/* eslint-disable */ +export const items = [ + { + id: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', + folderId: null, + name: 'Personal', + createdBy: 'Brian Hughes', + createdAt: 'April 24, 2018', + modifiedAt: 'April 24, 2018', + size: '87 MB', + type: 'folder', + contents: '57 files', + description: + 'Personal documents such as insurance policies, tax papers and etc.', + }, + { + id: '6da8747f-b474-4c9a-9eba-5ef212285500', + folderId: null, + name: 'Photos', + createdBy: 'Brian Hughes', + createdAt: 'November 01, 2021', + modifiedAt: 'November 01, 2021', + size: '3015 MB', + type: 'folder', + contents: '907 files', + description: 'Personal photos; selfies, family, vacation and etc.', + }, + { + id: 'ed58add1-45a7-41db-887d-3ca7ee7f2719', + folderId: null, + name: 'Work', + createdBy: 'Brian Hughes', + createdAt: 'May 8, 2020', + modifiedAt: 'May 8, 2020', + size: '14 MB', + type: 'folder', + contents: '24 files', + description: 'Work related files, mainly documents and paychecks.', + }, + { + id: '5cb66e32-d1ac-4b9a-8c34-5991ce25add2', + folderId: null, + name: 'Contract #123', + createdBy: 'Brian Hughes', + createdAt: 'January 14, 2021', + modifiedAt: 'January 14, 2021', + size: '1.2 MB', + type: 'PDF', + contents: null, + description: null, + }, + { + id: '3ffc3d84-8f2d-4929-903a-ef6fc21657a7', + folderId: null, + name: 'Estimated budget', + createdBy: 'Brian Hughes', + createdAt: 'December 14, 2020', + modifiedAt: 'December 14, 2020', + size: '679 KB', + type: 'XLS', + contents: null, + description: null, + }, + { + id: '157adb9a-14f8-4559-ac93-8be893c9f80a', + folderId: null, + name: 'DMCA notice #42', + createdBy: 'Brian Hughes', + createdAt: 'May 8, 2021', + modifiedAt: 'May 8, 2021', + size: '1.5 MB', + type: 'DOC', + contents: null, + description: null, + }, + { + id: '4f64597a-df7e-461c-ad60-f33e5f7e0747', + folderId: null, + name: 'Invoices', + createdBy: 'Brian Hughes', + createdAt: 'January 12, 2020', + modifiedAt: 'January 12, 2020', + size: '17.8 MB', + type: 'PDF', + contents: null, + description: null, + }, + { + id: 'e445c445-57b2-4476-8c62-b068e3774b8e', + folderId: null, + name: 'Crash logs', + createdBy: 'Brian Hughes', + createdAt: 'June 8, 2020', + modifiedAt: 'June 8, 2020', + size: '11.3 MB', + type: 'TXT', + contents: null, + description: null, + }, + { + id: 'b482f93e-7847-4614-ad48-b78b78309f81', + folderId: null, + name: 'System logs', + createdBy: 'Brian Hughes', + createdAt: 'June 8, 2020', + modifiedAt: 'June 8, 2020', + size: '9.3 MB', + type: 'TXT', + contents: null, + description: null, + }, + { + id: 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5', + folderId: null, + name: 'Personal projects', + createdBy: 'Brian Hughes', + createdAt: 'March 18, 2020', + modifiedAt: 'March 18, 2020', + size: '4.3 MB', + type: 'DOC', + contents: null, + description: null, + }, + { + id: 'ae908d59-07da-4dd8-aba0-124e50289295', + folderId: null, + name: 'Biometric portrait', + createdBy: 'Brian Hughes', + createdAt: 'August 29, 2020', + modifiedAt: 'August 29, 2020', + size: '4.5 MB', + type: 'JPG', + contents: null, + description: null, + }, + { + id: '4038a5b6-5b1a-432d-907c-e037aeb817a8', + folderId: null, + name: 'Scanned image 20201012-1', + createdBy: 'Brian Hughes', + createdAt: 'September 13, 2020', + modifiedAt: 'September 13, 2020', + size: '7.8 MB', + type: 'JPG', + contents: null, + description: null, + }, + { + id: '630d2e9a-d110-47a0-ac03-256073a0f56d', + folderId: null, + name: 'Scanned image 20201012-2', + createdBy: 'Brian Hughes', + createdAt: 'September 14, 2020', + modifiedAt: 'September 14, 2020', + size: '7.4 MB', + type: 'JPG', + contents: null, + description: null, + }, + { + id: '1417d5ed-b616-4cff-bfab-286677b69d79', + folderId: null, + name: 'Prices', + createdBy: 'Brian Hughes', + createdAt: 'April 07, 2020', + modifiedAt: 'April 07, 2020', + size: '2.6 MB', + type: 'DOC', + contents: null, + description: null, + }, + { + id: 'bd2817c7-6751-40dc-b252-b6b5634c0689', + folderId: null, + name: 'Shopping list', + createdBy: 'Brian Hughes', + createdAt: 'March 26, 2021', + modifiedAt: 'March 26, 2021', + size: '2.1 MB', + type: 'DOC', + contents: null, + description: null, + }, + { + id: '14fb47c9-6eeb-4070-919c-07c8133285d1', + folderId: null, + name: 'Summer budget', + createdBy: 'Brian Hughes', + createdAt: 'June 02, 2020', + modifiedAt: 'June 02, 2020', + size: '943 KB', + type: 'XLS', + contents: null, + description: null, + }, + + { + id: '894e8514-03d3-4f5e-bb28-f6c092501fae', + folderId: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', + name: 'A personal file', + createdBy: 'Brian Hughes', + createdAt: 'June 02, 2020', + modifiedAt: 'June 02, 2020', + size: '943 KB', + type: 'XLS', + contents: null, + description: null, + }, + { + id: '74010810-16cf-441d-a1aa-c9fb620fceea', + folderId: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', + name: 'A personal folder', + createdBy: 'Brian Hughes', + createdAt: 'November 01, 2021', + modifiedAt: 'November 01, 2021', + size: '3015 MB', + type: 'folder', + contents: '907 files', + description: 'Personal photos; selfies, family, vacation and etc.', + }, + { + id: 'a8c73e5a-8114-436d-ab54-d900b50b3762', + folderId: '74010810-16cf-441d-a1aa-c9fb620fceea', + name: 'A personal file within the personal folder', + createdBy: 'Brian Hughes', + createdAt: 'June 02, 2020', + modifiedAt: 'June 02, 2020', + size: '943 KB', + type: 'XLS', + contents: null, + description: null, + }, + + { + id: '12d851a8-4f60-473e-8a59-abe4b422ea99', + folderId: '6da8747f-b474-4c9a-9eba-5ef212285500', + name: 'Photos file', + createdBy: 'Brian Hughes', + createdAt: 'June 02, 2020', + modifiedAt: 'June 02, 2020', + size: '943 KB', + type: 'XLS', + contents: null, + description: null, + }, + { + id: '2836766d-27e1-4f40-a31a-5a8419105e7e', + folderId: 'ed58add1-45a7-41db-887d-3ca7ee7f2719', + name: 'Work file', + createdBy: 'Brian Hughes', + createdAt: 'June 02, 2020', + modifiedAt: 'June 02, 2020', + size: '943 KB', + type: 'XLS', + contents: null, + description: null, + }, +]; diff --git a/src/app/mock-api/apps/help-center/api.ts b/src/app/mock-api/apps/help-center/api.ts new file mode 100644 index 0000000..2686386 --- /dev/null +++ b/src/app/mock-api/apps/help-center/api.ts @@ -0,0 +1,165 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { + faqCategories as faqCategoriesData, + faqs as faqsData, + guideCategories as guideCategoriesData, + guideContent as guideContentData, + guides as guidesData, +} from 'app/mock-api/apps/help-center/data'; + +@Injectable({ + providedIn: 'root', +}) +export class HelpCenterMockApi { + private _faqCategories: any[] = faqCategoriesData; + private _faqs: any[] = faqsData; + private _guideCategories: any[] = guideCategoriesData; + private _guides: any[] = guidesData; + private _guideContent: string = guideContentData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ FAQs - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/help-center/faqs') + .reply(({ request }) => { + // Get the category slug + const slug = request.params.get('slug'); + + // Prepare the results + const results = []; + + // Get FAQs + const faqs = cloneDeep(this._faqs); + + // Get FAQ Categories + const categories = cloneDeep(this._faqCategories); + + // If slug is not provided... + if (!slug) { + // Go through each category and set the results + categories.forEach((category) => { + results.push({ + ...category, + faqs: faqs.filter((faq: any) => faq.categoryId === category.id), + }); + }); + } + // Otherwise... + else { + // Find the category by the slug + const category = categories.find((item: any) => item.slug === slug); + + // Set the results + results.push({ + ...category, + faqs: faqs.filter((faq: any) => faq.categoryId === category.id), + }); + } + + // Return the response + return [200, results]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Guides - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/help-center/guides') + .reply(({ request }) => { + // Get the slug & limit + const slug = request.params.get('slug'); + const limit = request.params.get('limit'); + + // Prepare the results + const results = []; + + // Get all Guides + const guides = cloneDeep(this._guides); + + // Get Guide categories + const categories = cloneDeep(this._guideCategories); + + // If slug is not provided... + if (!slug) { + // Parse the limit as an integer + const limitNum = parseInt(limit ?? '5', 10); + + // Go through each category and set the results + categories.forEach((category) => { + results.push({ + ...category, + visibleGuides: limitNum, + totalGuides: guides.filter( + (guide: any) => guide.categoryId === category.id + ).length, + guides: guides + .filter((guide: any) => guide.categoryId === category.id) + .slice(0, limitNum), + }); + }); + } + // Otherwise... + else { + // Find the category by the slug + const category = categories.find((item: any) => item.slug === slug); + + // Set the results + results.push({ + ...category, + guides: guides.filter( + (guide: any) => guide.categoryId === category.id + ), + }); + } + + // Return the response + return [200, results]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Guide - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/help-center/guide') + .reply(({ request }) => { + // Get the slugs + const categorySlug = request.params.get('categorySlug'); + const guideSlug = request.params.get('guideSlug'); + + // Get all Guides and Guide Categories + const guides = cloneDeep(this._guides); + const categories = cloneDeep(this._guideCategories); + + // Prepare the result + const result = { + ...categories.find((category: any) => category.slug === categorySlug), + guides: [guides.find((guide: any) => guide.slug === guideSlug)], + }; + + // Add the content to the guide + result.guides[0]['content'] = this._guideContent; + + // Return the response + return [200, result]; + }); + } +} diff --git a/src/app/mock-api/apps/help-center/data.ts b/src/app/mock-api/apps/help-center/data.ts new file mode 100644 index 0000000..f4e7c68 --- /dev/null +++ b/src/app/mock-api/apps/help-center/data.ts @@ -0,0 +1,563 @@ +/* eslint-disable */ +export const faqCategories = [ + { + id: '28924eab-97cc-465a-ba21-f232bb95843f', + slug: 'most-asked', + title: 'Most asked', + }, + { + id: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', + slug: 'general-inquiries', + title: 'General inquiries', + }, + { + id: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', + slug: 'licenses', + title: 'Licenses', + }, + { + id: '71c34043-d89d-4aca-951d-8606c3943c43', + slug: 'payments', + title: 'Payments', + }, + { + id: 'bea49ee0-26da-46ad-97be-116cd7ab416d', + slug: 'support', + title: 'Support', + }, +]; +export const faqs = [ + // Most asked + { + id: 'f65d517a-6f69-4c88-81f5-416f47405ce1', + categoryId: '28924eab-97cc-465a-ba21-f232bb95843f', + question: 'Is there a 14-days trial?', + answer: + 'Magna consectetur culpa duis ad est tempor pariatur velit ullamco aute exercitation magna sunt commodo minim enim aliquip eiusmod ipsum adipisicing magna ipsum reprehenderit lorem magna voluptate magna aliqua culpa.\n\nSit nisi adipisicing pariatur enim enim sunt officia ad labore voluptate magna proident velit excepteur pariatur cillum sit excepteur elit veniam excepteur minim nisi cupidatat proident dolore irure veniam mollit.', + }, + { + id: '0fcece82-1691-4b98-a9b9-b63218f9deef', + categoryId: '28924eab-97cc-465a-ba21-f232bb95843f', + question: 'What’s the benefits of the Premium Membership?', + answer: + 'Et in lorem qui ipsum deserunt duis exercitation lorem elit qui qui ipsum tempor nulla velit aliquip enim consequat incididunt pariatur duis excepteur elit irure nulla ipsum dolor dolore est.\n\nAute deserunt nostrud id non ipsum do adipisicing laboris in minim officia magna elit minim mollit elit velit veniam lorem pariatur veniam sit excepteur irure commodo excepteur duis quis in.', + }, + { + id: '2e6971cd-49d5-49f1-8cbd-fba5c71e6062', + categoryId: '28924eab-97cc-465a-ba21-f232bb95843f', + question: 'How much time I will need to learn this app?', + answer: + 'Id fugiat et cupidatat magna nulla nulla eu cillum officia nostrud dolore in veniam ullamco nulla ex duis est enim nisi aute ipsum velit et laboris est pariatur est culpa.\n\nCulpa sunt ipsum esse quis excepteur enim culpa est voluptate reprehenderit consequat duis officia irure voluptate veniam dolore fugiat dolor est amet nostrud non velit irure do voluptate id sit.', + }, + { + id: '974f93b8-336f-4eec-b011-9ddb412ee828', + categoryId: '28924eab-97cc-465a-ba21-f232bb95843f', + question: 'Are there any free tutorials available?', + answer: + 'Excepteur deserunt tempor do lorem elit id magna pariatur irure ullamco elit dolor consectetur ad officia fugiat incididunt do elit aute esse eu voluptate adipisicing incididunt ea dolor aliqua dolor.\n\nConsequat est quis deserunt voluptate ipsum incididunt laboris occaecat irure laborum voluptate non sit labore voluptate sunt id sint ut laboris aute cupidatat occaecat eiusmod non magna aliquip deserunt nisi.', + }, + { + id: '5d877fc7-b881-4527-a6aa-d39d642feb23', + categoryId: '28924eab-97cc-465a-ba21-f232bb95843f', + question: 'Is there a month-to-month payment option?', + answer: + 'Labore mollit in aliqua exercitation aliquip elit nisi nisi voluptate reprehenderit et dolor incididunt cupidatat ullamco nulla consequat voluptate adipisicing dolor qui magna sint aute do excepteur in aliqua consectetur.\n\nElit laborum non duis irure ad ullamco aliqua enim exercitation quis fugiat aute esse esse magna et ad cupidatat voluptate sint nulla nulla lorem et enim deserunt proident deserunt consectetur.', + }, + // General inquiries + { + id: '3d1c26c5-1e5e-4eb6-8006-ed6037ed9aca', + categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', + question: 'How to download your items', + answer: + 'Sunt mollit irure dolor aliquip sit veniam amet ut sunt dolore cillum sint pariatur qui irure proident velit non excepteur quis ut et quis velit aliqua ea sunt cillum sit.\n\nReprehenderit est culpa ut incididunt sit dolore mollit in occaecat velit culpa consequat reprehenderit ex lorem cupidatat proident reprehenderit ad eu sunt sit ut sit culpa ea reprehenderit aliquip est.', + }, + { + id: '11bd2b9a-85b4-41c9-832c-bd600dfa3a52', + categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', + question: 'View and download invoices', + answer: + 'Sint mollit consectetur voluptate fugiat sunt ipsum adipisicing labore exercitation eiusmod enim excepteur enim proident velit sint magna commodo dolor ex ipsum sit nisi deserunt labore eu irure amet ea.\n\nOccaecat ut velit et sint pariatur laboris voluptate duis aliqua aliqua exercitation et duis duis eu laboris excepteur occaecat quis esse enim ex dolore commodo fugiat excepteur adipisicing in fugiat.', + }, + { + id: 'f55c023a-785e-4f0f-b5b7-47da75224deb', + categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', + question: "I've forgotten my username or password", + answer: + 'In exercitation sunt ad anim commodo sunt do in sunt est officia amet ex ullamco do nisi consectetur lorem proident lorem adipisicing incididunt consequat fugiat voluptate sint est anim officia.\n\nVelit sint aliquip elit culpa amet eu mollit veniam esse deserunt ex occaecat quis lorem minim occaecat culpa esse veniam enim duis excepteur ipsum esse ut ut velit cillum adipisicing.', + }, + { + id: 'c577a67d-357a-4b88-96e8-a0ee1fe9162e', + categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', + question: 'Where is my license code?', + answer: + 'Ad adipisicing duis consequat magna sunt consequat aliqua eiusmod qui et nostrud voluptate sit enim reprehenderit anim exercitation ipsum ipsum anim ipsum laboris aliqua ex lorem aute officia voluptate culpa.\n\nNostrud anim ex pariatur ipsum et nostrud esse veniam ipsum ipsum irure velit ad quis irure tempor nulla amet aute id esse reprehenderit ea consequat consequat ea minim magna magna.', + }, + { + id: '1a680c29-7ece-4a80-9709-277ad4da8b4b', + categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', + question: 'How to contact an author', + answer: + 'Magna laborum et amet magna fugiat officia deserunt in exercitation aliquip nulla magna velit ea labore quis deserunt ipsum occaecat id id consequat non eiusmod mollit est voluptate ea ex.\n\nReprehenderit mollit ut excepteur minim veniam fugiat enim id pariatur amet elit nostrud occaecat pariatur et esse aliquip irure quis officia reprehenderit voluptate voluptate est et voluptate sint esse dolor.', + }, + { + id: 'c49c2216-8bdb-4df0-be25-d5ea1dbb5688', + categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', + question: 'How does the affiliate program work?', + answer: + 'Adipisicing laboris ipsum fugiat et cupidatat aute esse ad labore et est cillum ipsum sunt duis do veniam minim officia deserunt in eiusmod eu duis dolore excepteur consectetur id elit.\n\nAnim excepteur occaecat laborum sunt in elit quis sit duis adipisicing laboris anim laborum et pariatur elit qui consectetur laborum reprehenderit occaecat nostrud pariatur aliqua elit nisi commodo eu excepteur.', + }, + // Licenses + { + id: '3ef176fa-6cba-4536-9f43-540c686a4faa', + categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', + question: 'How do licenses work for items I bought?', + answer: + 'Culpa duis nostrud qui velit sint magna officia fugiat ipsum eiusmod enim laborum pariatur anim culpa elit ipsum lorem pariatur exercitation laborum do labore cillum exercitation nisi reprehenderit exercitation quis.\n\nMollit aute dolor non elit et incididunt eiusmod non in commodo occaecat id in excepteur aliqua ea anim pariatur sint elit voluptate dolor eu non laborum laboris voluptate qui duis.', + }, + { + id: '7bc6b7b4-7ad8-4cbe-af36-7301642d35fb', + categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', + question: 'Do licenses have an expiry date?', + answer: + 'Ea proident dolor tempor dolore incididunt velit incididunt ullamco quis proident consectetur magna excepteur cillum officia ex do aliqua reprehenderit est esse officia labore dolore aute laboris eu commodo aute.\n\nOfficia quis id ipsum adipisicing ipsum eu exercitation cillum ex elit pariatur adipisicing ullamco ullamco nulla dolore magna aliqua reprehenderit eu laborum voluptate reprehenderit non eiusmod deserunt velit magna do.', + }, + { + id: '56c9ed66-a1d2-4803-a160-fba29b826cb4', + categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', + question: 'I want to make multiple end products with the same item', + answer: + 'Elit cillum incididunt enim cupidatat ex elit cillum aute dolor consectetur proident non minim eu est deserunt proident mollit ullamco laborum anim ea labore anim ex enim ullamco consectetur enim.\n\nEx magna consectetur esse enim consequat non aliqua nulla labore mollit sit quis ex fugiat commodo eu cupidatat irure incididunt consequat enim ut deserunt consequat elit consequat sint adipisicing sunt.', + }, + { + id: '21c1b662-33c8-44d7-9530-91896afeeac7', + categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', + question: 'How easy is it to change the license type?', + answer: + 'Duis culpa ut veniam voluptate consequat proident magna eiusmod id est magna culpa nulla enim culpa mollit velit lorem mollit ut minim dolore in tempor reprehenderit cillum occaecat proident ea.\n\nVeniam fugiat ea duis qui et eu eiusmod voluptate id cillum eiusmod eu reprehenderit minim reprehenderit nisi cillum nostrud duis eu magna minim sunt voluptate eu pariatur nulla ullamco elit.', + }, + { + id: '5fa52c90-82be-41ae-96ec-5fc67cf054a4', + categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', + question: 'Do I need a Regular License or an Extended License?', + answer: + 'Mollit nostrud ea irure ex ipsum in cupidatat irure sit officia reprehenderit adipisicing et occaecat cupidatat exercitation mollit esse in excepteur qui elit exercitation velit fugiat exercitation est officia excepteur.\n\nQuis esse voluptate laborum non veniam duis est fugiat tempor culpa minim velit minim ut duis qui officia consectetur ex nostrud ut elit elit nulla in consectetur voluptate aliqua aliqua.', + }, + // Payments + { + id: '81ac908c-35a2-4705-8d75-539863c35c09', + categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', + question: 'Common PayPal, Skrill, and credit card issues', + answer: + 'Sit occaecat sint nulla in esse dolor occaecat in ea sit irure magna magna veniam fugiat consequat exercitation ipsum ex officia velit consectetur consequat voluptate lorem eu proident lorem incididunt.\n\nExcepteur exercitation et qui labore nisi eu voluptate ipsum deserunt deserunt eu est minim dolor ad proident nulla reprehenderit culpa minim voluptate dolor nostrud dolor anim labore aliqua officia nostrud.', + }, + { + id: 'b6d8909f-f36d-4885-8848-46b8230d4476', + categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', + question: 'How do I find my transaction ID?', + answer: + 'Laboris ea nisi commodo nulla cillum consequat consectetur nisi velit adipisicing minim nulla culpa amet quis sit duis id id aliqua aute exercitation non reprehenderit aliquip enim eiusmod eu irure.\n\nNon irure consectetur sunt cillum do adipisicing excepteur labore proident ut officia dolor fugiat velit sint consectetur cillum qui amet enim anim mollit laboris consectetur non do laboris lorem aliqua.', + }, + { + id: '9496235d-4d0c-430b-817e-1cba96404f95', + categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', + question: 'PayPal disputes And chargebacks', + answer: + 'Ullamco eiusmod do pariatur pariatur consectetur commodo proident ex voluptate ullamco culpa commodo deserunt pariatur incididunt nisi magna dolor est minim eu ex voluptate deserunt labore id magna excepteur et.\n\nReprehenderit dolore pariatur exercitation ad non fugiat quis proident fugiat incididunt ea magna pariatur et exercitation tempor cillum eu consequat adipisicing est laborum sit cillum ea fugiat mollit cupidatat est.', + }, + { + id: '7fde17e6-4ac1-47dd-a363-2f4f14dcf76a', + categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', + question: 'Saving your credit card details', + answer: + 'Qui quis nulla excepteur voluptate elit culpa occaecat id ex do adipisicing est mollit id anim nisi irure amet officia ut sint aliquip dolore labore cupidatat magna laborum esse ea.\n\nEnim magna duis sit incididunt amet anim et nostrud laborum eiusmod et ea fugiat aliquip velit sit fugiat consectetur ipsum anim do enim excepteur cupidatat consequat sunt irure tempor ut.', + }, + { + id: '90a3ed58-e13b-40cf-9219-f933bf9c9b8f', + categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', + question: 'Why do prepaid credits expire?', + answer: + 'Consequat consectetur commodo deserunt sunt aliquip deserunt ex tempor esse nostrud sit dolore anim nostrud nulla dolore veniam minim laboris non dolor veniam lorem veniam deserunt laborum aute amet irure.\n\nEiusmod officia veniam reprehenderit ea aliquip velit anim aute minim aute nisi tempor qui sunt deserunt voluptate velit elit ut adipisicing ipsum et excepteur ipsum eu ullamco nisi esse dolor.', + }, + { + id: '153376ed-691f-4dfd-ae99-e204a49edc44', + categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', + question: 'Why is there a minimum $20 credit?', + answer: + 'Duis sint velit incididunt exercitation eiusmod nisi sunt ex est fugiat ad cupidatat sunt nisi elit do duis amet voluptate ipsum aliquip lorem aliqua sint esse in magna irure officia.\n\nNon eu ex elit ut est voluptate tempor amet ut officia in duis deserunt cillum labore do culpa id dolore magna anim consectetur qui consectetur fugiat labore mollit magna irure.', + }, + // Support + { + id: '4e7ce72f-863a-451f-9160-cbd4fbbc4c3d', + categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', + question: 'What is item support?', + answer: + 'Exercitation sit eiusmod enim officia exercitation eiusmod sunt eiusmod excepteur ad commodo eiusmod qui proident quis aliquip excepteur sit cillum occaecat non dolore sit in labore ut duis esse duis.\n\nConsequat sunt voluptate consectetur dolor laborum enim nostrud deserunt incididunt sint veniam laboris sunt amet velit anim duis aliqua sunt aliqua aute qui nisi mollit qui irure ullamco aliquip laborum.', + }, + { + id: '0795a74f-7a84-4edf-8d66-296cdef70003', + categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', + question: 'How to contact an author', + answer: + 'Minim commodo cillum do id qui irure aliqua laboris excepteur laboris magna enim est lorem consectetur tempor laboris proident proident eu irure dolor eiusmod in officia lorem quis laborum ullamco.\n\nQui excepteur ex sit esse dolore deserunt ullamco occaecat laboris fugiat cupidatat excepteur laboris amet dolore enim velit ipsum velit sint cupidatat consectetur cupidatat deserunt sit eu do ullamco quis.', + }, + { + id: '05532574-c102-4228-89a8-55fff32ec6fc', + categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', + question: 'Extending and renewing item support', + answer: + 'Reprehenderit anim consectetur anim dolor magna consequat excepteur tempor enim duis magna proident ullamco aute voluptate elit laborum mollit labore id ex lorem est mollit do qui ex labore nulla.\n\nUt proident elit proident adipisicing elit fugiat ex ullamco dolore excepteur excepteur labore laborum sunt ipsum proident magna ex voluptate laborum voluptate sint proident eu reprehenderit non excepteur quis eiusmod.', + }, + { + id: 'b3917466-aa51-4293-9d5b-120b0ce6635c', + categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', + question: 'Rating or review removal policy', + answer: + 'Ipsum officia mollit qui laboris sunt amet aliquip cupidatat minim non elit commodo eiusmod labore mollit pariatur aute reprehenderit ullamco occaecat enim pariatur aute amet occaecat incididunt irure ad ut.\n\nIncididunt cupidatat pariatur magna sint sit culpa ad cupidatat cillum exercitation consequat minim pariatur consectetur aliqua non adipisicing magna ad nulla ea do est nostrud eu aute id occaecat ut.', + }, + { + id: '2f2fb472-24d4-4a00-aa80-d513fa6c059c', + categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', + question: 'Purchasing supported and unsupported items', + answer: + 'Dolor cupidatat do qui in tempor dolor magna magna ut dolor est aute veniam consectetur enim sunt sunt duis magna magna aliquip id reprehenderit dolor in veniam ullamco incididunt occaecat.\n\nId duis pariatur anim cillum est sint non veniam voluptate deserunt anim nostrud duis voluptate occaecat elit ut veniam voluptate do qui est ad velit irure sint lorem ullamco aliqua.', + }, + { + id: '2fffd148-7644-466d-8737-7dde88c54154', + categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', + question: "I haven't received a response from the author", + answer: + 'Velit commodo pariatur ullamco elit sunt dolor quis irure amet tempor laboris labore tempor nisi consectetur ea proident dolore culpa nostrud esse amet commodo do esse laboris laboris in magna.\n\nAute officia labore minim laborum irure cupidatat occaecat laborum ex labore ipsum aliqua cillum do exercitation esse et veniam excepteur mollit incididunt ut qui irure culpa qui deserunt nostrud tempor.', + }, + { + id: '24a1034e-b4d6-4a86-a1ea-90516e87e810', + categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', + question: 'Responding to requests outside of support', + answer: + 'Exercitation eu in officia lorem commodo pariatur pariatur nisi consectetur qui elit in aliquip et ullamco duis nostrud aute laborum laborum est dolor non qui amet deserunt ex et aliquip.\n\nProident consectetur eu amet minim labore anim ad non aute duis eiusmod sit ad elit magna do aliquip aliqua laborum dolor laboris ea irure duis mollit fugiat tempor eu est.', + }, +]; +export const guideCategories = [ + { + id: '0ee72de7-49c0-4880-9e89-b72a4edd6a81', + slug: 'getting-started', + title: 'Getting Started', + }, + { + id: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', + slug: 'projects', + title: 'Projects', + }, + { + id: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', + slug: 'settings', + title: 'Settings', + }, + { + id: '7b25b38c-1ab3-4474-8569-65b3ea232add', + slug: 'payments', + title: 'Payments', + }, + { + id: '41fdf071-aec4-49de-9dd4-b4f746596928', + slug: 'your-account', + title: 'Your Account', + }, +]; +export const guides = [ + // Getting started + { + id: 'a008ffa3-7b3f-43be-8a8f-dbf5272ed2dd', + categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81', + slug: 'what-is-this-app', + title: 'What is this app?', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '7643d388-12ab-4025-a2f1-5045ac7b1c4c', + categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81', + slug: 'start-using-the-app', + title: 'Start using the app', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '1fecee67-c4b4-413a-b0f2-949dcab73249', + categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81', + slug: 'signing-in-to-the-dashboard', + title: 'Signing in to the dashboard', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: 'd2e2ea8f-5298-4ba2-898b-afc60c064bba', + categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81', + slug: 'navigating-within-the-app', + title: 'Navigating within the app', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + // Projects + { + id: 'f2592886-11b8-4b56-baab-96802c2ed93e', + categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', + slug: 'creating-a-project', + title: 'Creating a project', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '9ec3f4b9-a355-4f57-9e93-efa8611cc1c9', + categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', + slug: 'renaming-a-project', + title: 'Renaming a project', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '1bc6e7f9-b046-4f4f-9b18-741c9d5429f6', + categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', + slug: 'displaying-a-project', + title: 'Displaying a project', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: 'a005d5f1-938d-45c5-8ed4-d0cf8d02e533', + categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', + slug: 'deleting-a-project', + title: 'Deleting a project', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '43837279-dce2-4dc0-beac-30b5ba829f14', + categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', + slug: 'changing-the-visibility-of-a-project', + title: 'Changing the visibility of a project', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '4cf5a435-eaa0-463c-8d2b-efde193c7fb3', + categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', + slug: 'adding-media-to-a-project', + title: 'Adding media to a project', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: 'cd3fb87e-e138-4721-9e29-a5c751bfd949', + categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', + slug: 'removing-a-media-from-a-project', + title: 'Removing a media from a project', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: 'f26205c6-882e-4713-b067-c73758b45551', + categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', + slug: 'cropping-a-media', + title: 'Cropping a media', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + // Settings + { + id: '1cbdeaeb-bbf1-4d04-b43d-f37b55e6a229', + categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', + slug: 'general-settings', + title: 'General settings', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '98de7d4a-2ca2-4d47-bbe6-083ed26467db', + categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', + slug: 'project-settings', + title: 'Project settings', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '145f497c-1fdb-47b5-a6c1-31f856403571', + categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', + slug: 'media-settings', + title: 'Media settings', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '0a007f59-a5ea-4875-991d-f22d6fd69898', + categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', + slug: 'domain-settings', + title: 'Domain settings', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '4707c8eb-31f9-415c-bd07-86f226c75feb', + categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', + slug: 'privacy-settings', + title: 'Privacy settings', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + // Payments + { + id: 'c771bf0a-1e0c-4b6d-af7e-189e10cc6fb8', + categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add', + slug: 'subscriptions', + title: 'Subscriptions', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '3d7150d2-feb3-4f20-bd3f-8e525cef77a4', + categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add', + slug: 'discounts', + title: 'Discounts', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '79239bc4-4fb5-428b-b30d-62c5289b061d', + categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add', + slug: 'payment-methods', + title: 'Payment methods', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '8d68c5e6-5404-450c-9d5f-d9800c164041', + categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add', + slug: 'overdue-payments', + title: 'Overdue payments', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + // Your account + { + id: '60df0d4c-dda1-439c-bd44-179c57a7597d', + categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', + slug: 'changing-your-username', + title: 'Changing your username', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '0a9c3321-1db3-42bc-92b6-7e257368123e', + categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', + slug: 'changing-your-email', + title: 'Changing your email', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '80ba5106-5f9c-4ed7-b8f3-8544035e3095', + categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', + slug: 'changing-your-password', + title: 'Changing your password', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: 'db2e97a6-d657-4e9d-9b6c-5f213ea3301c', + categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', + slug: 'closing-your-account', + title: 'Closing your account', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: '3374c887-2fb7-4223-9f40-7f2cbbf76795', + categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', + slug: 'account-limits', + title: 'Account limits', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, + { + id: 'cc65f92a-7d46-4557-b15b-6f8f59a60576', + categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', + slug: 'two-factor-authentication', + title: 'Two factor authentication', + subtitle: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + }, +]; + +// Since we only have one content for the demo, we will +// use the following mock-api on every request for every guide. +export const guideContent = ` +

Header Level 2

+ +

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit + amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper + pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, + sagittis tempus lacus enim ac dui. Donec non enim + in turpis pulvinar facilisis. Ut felis. +

+ +

+ Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos + himenaeos. Curabitur vitae sagittis odio. Suspendisse ullamcorper nunc non pellentesque laoreet. Curabitur eu tortor id quam pretium mattis. Proin ut quam velit. +

+ +

Header Level 3

+ + +

+ Nullam sagittis nulla in diam finibus, sed pharetra velit vestibulum. Suspendisse euismod in urna eu posuere. +

+ +

Header Level 4

+ +
+

+ Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur + massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est. +

+
+ Brian Hughes +
+
+ +
    +
  1. Ordered list
  2. +
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  4. +
  5. Aliquam tincidunt mauris eu risus.
  6. +
+ +
Header Level 5
+ +
    +
  • Unordered list
  • +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • +
  • Aliquam tincidunt mauris eu risus.
  • +
+ +
#header h1 a {
+    display: block;
+    width: 300px;
+    height: 80px;
+}
+ +
Header Level 6
+ +
+
Definition list
+
+ Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna, in gravida eros. Quisque id nibh iaculis, euismod urna sed, + egestas nisi. Donec eros metus, congue a imperdiet feugiat, sagittis nec ipsum. Quisque dapibus mollis felis non tristique. +
+ +
Definition list
+
+ Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit ante urna, vitae placerat massa mollis in. Duis nec urna ac + purus semper dictum ut eget justo. Aenean non sagittis augue. Sed venenatis rhoncus enim eget ornare. Donec viverra sed felis at venenatis. Mauris aliquam fringilla nulla, + sit amet congue felis dignissim at. +
+
`; diff --git a/src/app/mock-api/apps/mailbox/api.ts b/src/app/mock-api/apps/mailbox/api.ts new file mode 100644 index 0000000..58e6b7a --- /dev/null +++ b/src/app/mock-api/apps/mailbox/api.ts @@ -0,0 +1,368 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; +import { + filters as filtersData, + folders as foldersData, + labels as labelsData, + mails as mailsData, + settings as settingsData, +} from 'app/mock-api/apps/mailbox/data'; + +@Injectable({ + providedIn: 'root', +}) +export class MailboxMockApi { + private _filters: any[] = filtersData; + private _folders: any[] = foldersData; + private _mails: any[] = mailsData; + private _labels: any[] = labelsData; + private _settings: any = settingsData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Settings - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/mailbox/settings') + .reply(() => [200, cloneDeep(this._settings)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Settings - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/mailbox/settings') + .reply(({ request }) => { + // Get the settings + const settings = cloneDeep(request.body.settings); + + // Update the settings + this._settings = assign({}, this._settings, settings); + + // Return the response + return [200, cloneDeep(this._settings)]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Folders - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/apps/mailbox/folders').reply(() => { + let count = 0; + + // Iterate through the folders + this._folders.forEach((folder) => { + // Get the mails of this folder + const mails = this._mails.filter( + (mail: any) => mail.folder === folder.id + ); + + // If we are counting the 'sent' or the 'trash' folder... + if (folder.slug === 'sent' || folder.slug === 'trash') { + // Always set the count to 0 + count = 0; + } + // If we are counting the 'drafts' or the 'spam' folder... + else if ( + folder.slug === 'drafts' || + folder.slug === 'trash' || + folder.slug === 'spam' + ) { + // Set the count to the count of all mails + count = mails.length; + } + // Otherwise ('inbox')... + else { + // Go through the mails and count the unread ones + mails.forEach((mail) => { + if (mail.unread) { + count++; + } + }); + } + + // Append the count to the folder mock-api + folder.count = count; + + // Reset the count + count = 0; + }); + + // Return the response + return [200, cloneDeep(this._folders)]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Filters - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/mailbox/filters') + .reply(() => [200, cloneDeep(this._filters)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Labels - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/mailbox/labels') + .reply(() => [200, cloneDeep(this._labels)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Labels - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/apps/mailbox/label') + .reply(({ request }) => { + // Get the label + const label = cloneDeep(request.body.label); + + // Generate an id + label.id = FuseMockApiUtils.guid(); + + // Generate a slug + label.slug = label.title + .toLowerCase() + .replace(/ /g, '-') + .replace(/[-]+/g, '-') + .replace(/[^\w-]+/g, ''); + + // Check if the slug is being used and update it if necessary + const originalSlug = label.slug; + + let sameSlug; + let slugSuffix = 1; + + do { + sameSlug = this._labels.filter( + (item: any) => item.slug === label.slug + ); + + if (sameSlug.length > 0) { + label.slug = originalSlug + '-' + slugSuffix; + slugSuffix++; + } + } while (sameSlug.length > 0); + + // Add the label + this._labels.push(label); + + // Return the response + return [200, label]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Labels - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/mailbox/label') + .reply(({ request }) => { + // Get the id and label + const id = request.body.id; + const label = cloneDeep(request.body.label); + + // Prepare the updated label + let updatedLabel = null; + + // Find the label and update it + this._labels.forEach((item, index, labels) => { + if (item.id === id) { + // Update the slug + label.slug = label.title + .toLowerCase() + .replace(/ /g, '-') + .replace(/[-]+/g, '-') + .replace(/[^\w-]+/g, ''); + + // Update the label + labels[index] = assign({}, labels[index], label); + + // Store the updated label + updatedLabel = labels[index]; + } + }); + + // Return the response + return [200, updatedLabel]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Labels - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/mailbox/label') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the label and delete it + const index = this._labels.findIndex((item: any) => item.id === id); + this._labels.splice(index, 1); + + // Get all the mails that have the label + const mailsWithLabel = this._mails.filter( + (mail: any) => mail.labels.indexOf(id) > -1 + ); + + // Iterate through them and remove the label + mailsWithLabel.forEach((mail) => { + mail.labels.splice(mail.labels.indexOf(id), 1); + }); + + // Return the response + return [200, true]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Mails - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/mailbox/mails', 625) + .reply(({ request }) => { + // First, decide if mails are requested by folder, filter or label + const byFolder = request.params.get('folder'); + const byFilter = request.params.get('filter'); + const byLabel = request.params.get('label'); + + // Clone the mails mock-api to prevent accidental mock-api updates + let mails: any[] | null = cloneDeep(this._mails); + + // Filter the mails depending on the requested by type + mails = mails.filter((mail) => { + if (byFolder) { + return ( + mail.folder === + this._folders.find((folder: any) => folder.slug === byFolder).id + ); + } + + if (byFilter) { + return mail[byFilter] === true; + } + + if (byLabel) { + return mail.labels.includes( + this._labels.find((label: any) => label.slug === byLabel).id + ); + } + }); + + // Sort by date - descending + mails.sort( + (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime() + ); + + // Figure out the cc and bcc counts + mails.forEach((mail) => { + mail.ccCount = mail.cc ? mail.cc.length : 0; + mail.bccCount = mail.bcc ? mail.bcc.length : 0; + }); + + // Paginate - Start + const mailsLength = mails.length; + const resultsPerPage = 10; + + // Get the requested page number + const page = parseInt(request.params.get('page') ?? '1', 10); + + // Calculate pagination details + const begin = (page - 1) * resultsPerPage; + const end = Math.min(resultsPerPage * page, mailsLength); + const lastPage = Math.max(Math.ceil(mailsLength / resultsPerPage), 1); + + // Prepare the pagination object + let pagination = {}; + + // If the requested page number is bigger than + // the last possible page number, return null for + // mails but also send the last possible page so + // the app can navigate to there + if (page > lastPage) { + mails = null; + pagination = { + lastPage, + }; + } else { + // Paginate the results by 10 + mails = mails.slice(begin, end); + + // Prepare the pagination mock-api + pagination = { + totalResults: mailsLength, + resultsPerPage: resultsPerPage, + currentPage: page, + lastPage: lastPage, + startIndex: begin, + endIndex: end - 1, + }; + } + + // Return the response + return [ + 200, + { + mails, + pagination, + }, + ]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Mail - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/mailbox/mail') + .reply(({ request }) => { + // Get the id from the params + const id = request.params.get('id'); + + // Clone the mails mock-api to prevent accidental mock-api updates + const mails = cloneDeep(this._mails); + + // Find the mail + const mail = mails.find((item: any) => item.id === id); + + return [200, mail]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Mail - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/mailbox/mail') + .reply(({ request }) => { + // Get the id and mail + const id = request.body.id; + const mail = cloneDeep(request.body.mail); + + // Prepare the updated mail + let updatedMail = null; + + // Find the mail and update it + this._mails.forEach((item, index, mails) => { + if (item.id === id) { + // Update the mail + mails[index] = assign({}, mails[index], mail); + + // Store the updated mail + updatedMail = mails[index]; + } + }); + + // Return the response + return [200, updatedMail]; + }); + } +} diff --git a/src/app/mock-api/apps/mailbox/data.ts b/src/app/mock-api/apps/mailbox/data.ts new file mode 100644 index 0000000..164caa7 --- /dev/null +++ b/src/app/mock-api/apps/mailbox/data.ts @@ -0,0 +1,2601 @@ +/* eslint-disable */ +import * as moment from 'moment'; + +export const folders = [ + { + id: '7c004a19-4506-48ef-93ab-f16381302e3b', + title: 'Inbox', + slug: 'inbox', + icon: 'heroicons_outline:inbox', + }, + { + id: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + title: 'Sent', + slug: 'sent', + icon: 'heroicons_outline:paper-airplane', + }, + { + id: 'fbdc8e79-a0c4-4a27-bc98-9c81ee7a86e5', + title: 'Drafts', + slug: 'drafts', + icon: 'heroicons_outline:document', + }, + { + id: '0197c436-2ef3-424d-b546-8b7f49186e15', + title: 'Spam', + slug: 'spam', + icon: 'heroicons_outline:exclamation', + }, + { + id: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + title: 'Trash', + slug: 'trash', + icon: 'heroicons_outline:trash', + }, +]; +export const filters = [ + { + id: 'de1b41f6-6839-4f1b-9d2c-07e55f6f8f82', + title: 'Starred', + slug: 'starred', + icon: 'heroicons_outline:star', + }, + { + id: '71bba1ec-a90e-4a71-9932-4bab0a99aa1c', + title: 'Important', + slug: 'important', + icon: 'heroicons_outline:exclamation-circle', + }, +]; +export const labels = [ + { + id: 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + title: 'Personal', + slug: 'personal', + color: 'blue', + }, + { + id: '745cf30e-ca84-47a1-a553-b70eb630d8e7', + title: 'Work', + slug: 'work', + color: 'indigo', + }, + { + id: '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + title: 'Payments', + slug: 'payments', + color: 'red', + }, + { + id: 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + title: 'Invoices', + slug: 'invoices', + color: 'teal', + }, + { + id: '184cd689-4ee4-47cf-9f8a-12233d614326', + title: 'Accounts', + slug: 'accounts', + color: 'purple', + }, + { + id: 'b67fc437-6118-4ec8-a3c7-9320b828e3fc', + title: 'Forums', + slug: 'forums', + color: 'green', + }, +]; +export const settings = { + messageLayout: 'right', +}; +export const mails = [ + { + id: 'f9c4c091-3ac4-4df9-ac5d-aec7b07c8e3f', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-01.jpg', + contact: 'Myra Dudley ', + }, + to: 'me ', + cc: ['Graham Belltower '], + bcc: ['Julie T. '], + date: moment().hour(20).minute(13).toISOString(), // Today - 20:13 + subject: 'Please review and sign the attached agreement', + content: + 'Hi Brian,\n\nUllamco deserunt commodo esse deserunt deserunt quis eiusmod. Laborum sint excepteur non sit eiusmod sunt voluptate ipsum nisi ullamco magna. Lorem consectetur est dolor minim exercitation deserunt quis duis fugiat ipsum incididunt non. Anim aute ipsum cupidatat nisi occaecat quis sit nisi labore labore dolore do. Pariatur veniam culpa quis veniam nisi exercitation veniam ut. Quis do sint proident fugiat ad.\n\nNon id nisi commodo veniam. Veniam veniam minim ea laborum voluptate id duis deserunt. Anim ut ut amet et ullamco nulla fugiat id incididunt adipisicing excepteur amet. Ex amet eu cillum non fugiat velit dolore. Incididunt duis est eu et ex sunt consectetur cillum nisi aute proident.\n\nIncididunt excepteur laborum quis sit. Ex quis officia incididunt proident aliqua adipisicing. Irure ad in Lorem laborum deserunt nulla consequat. Pariatur excepteur exercitation cupidatat aute.\n\nCheers!\nMyra Dudley', + attachments: [ + { + type: 'image/jpeg', + name: 'mystery-forest.jpg', + size: 15539, + preview: 'mystery-forest_preview.jpg', + downloadUrl: '', + }, + { + type: 'application/pdf', + name: 'montly-invoice.pdf', + size: 243449, + preview: 'pdf', + downloadUrl: '', + }, + { + type: 'image/jpeg', + name: 'birds-eye-sydney.jpg', + size: 14294, + preview: 'birds-eye-sydney_preview.jpg', + downloadUrl: '', + }, + ], + starred: true, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'c531bc01-8a9e-481b-adf8-95303a6938c5', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-01.jpg', + contact: 'Shaw Murray ', + }, + to: 'me ', + date: moment().hour(18).minute(56).toISOString(), // Today - 18:56 + subject: 'Delivery address confirmation', + content: + 'Dear Brian,\n\nDolore consectetur est cupidatat ipsum reprehenderit anim quis veniam anim ipsum incididunt exercitation. Velit exercitation culpa eiusmod dolore labore irure. Duis esse quis elit pariatur labore occaecat esse voluptate dolore deserunt cillum irure. Aute qui nulla est exercitation qui sunt anim aliquip. Ex ad est velit laboris exercitation ea ut pariatur. Amet reprehenderit ut est id sunt commodo anim et est voluptate et.\n\nMagna aliqua incididunt non ut voluptate nulla aliqua exercitation elit consectetur cupidatat. Proident in reprehenderit occaecat laborum non eu amet id aliqua nulla dolore. Eiusmod quis adipisicing quis cupidatat labore.\n\nReprehenderit nulla ullamco est dolore ex irure sunt nostrud reprehenderit quis dolor. Tempor nostrud elit elit aute ut ut eiusmod laboris excepteur consequat ex. Velit id ex ullamco in. Ea elit Lorem Lorem aliquip amet consequat irure nisi qui cillum incididunt. Commodo aute Lorem eiusmod veniam consectetur aute eu dolore. Ea magna incididunt laboris quis quis et tempor dolore dolore ut nisi.\n\nBest Regards,\nShaw Murray', + attachments: [], + starred: false, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: 'ebc80fc3-6c56-4cae-a45a-771b15ced076', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-02.jpg', + contact: 'Sanders Beck ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: moment().hour(14).minute(35).toISOString(), // Today - 14:35 + subject: 'Insurance documents', + content: + 'Hi Brian,\n\nAliquip ipsum sunt sit sunt velit velit pariatur. Nisi incididunt eiusmod consequat ut cillum eu exercitation. Enim proident nostrud aute in. Non irure nisi duis aliquip commodo proident veniam adipisicing id velit. Enim magna Lorem fugiat tempor.\n\nCommodo non nulla incididunt irure voluptate. Fugiat culpa cillum aute quis. Voluptate veniam adipisicing dolor sint. Proident eiusmod quis duis ipsum sit eu.\n\nDeserunt reprehenderit adipisicing reprehenderit ipsum. Laborum in veniam amet occaecat tempor esse enim dolore elit sit quis adipisicing. Aute occaecat eiusmod enim cupidatat sunt.\n\nBest Regards,\nSanders Beck', + attachments: [], + starred: false, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: '981c5ffb-7c88-47a8-b60f-f16150eeae9d', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-03.jpg', + contact: 'Zimmerman Gould ', + }, + to: 'me ', + date: moment().hour(22).minute(26).subtract(1, 'day').toISOString(), // Yesterday - 08:22 + subject: 'Previous clients and their invoices', + content: + 'Dear Brian,\n\nDo aute eu dolore officia laborum id anim fugiat incididunt nulla esse proident. Veniam veniam nostrud ut nisi magna ipsum ea eiusmod esse velit id aliqua nisi irure. Amet laborum fugiat deserunt est. Quis amet veniam anim nostrud irure cillum voluptate consequat qui cupidatat minim occaecat elit enim. Ut ut incididunt cillum sit sit irure culpa. Culpa exercitation minim velit eu. Ipsum exercitation excepteur et ad do sit.\n\nVeniam cupidatat officia aliqua ad excepteur cillum laboris deserunt esse laboris adipisicing reprehenderit. Reprehenderit anim consectetur pariatur labore do in irure. Ad consequat commodo non pariatur occaecat. Eiusmod cillum non anim consequat culpa nisi. Est nulla ut sint qui deserunt anim. Excepteur qui occaecat dolore nulla occaecat cupidatat aute sit laborum magna.\n\nConsequat aliqua commodo officia excepteur. Ex consectetur elit dolor exercitation ullamco amet laboris. Deserunt nulla non proident est pariatur reprehenderit reprehenderit. Ea nisi id aliqua cillum velit tempor ipsum dolor proident cillum eiusmod et ipsum anim. Elit non quis mollit enim Lorem cupidatat et labore. Laboris cillum reprehenderit aute veniam aliqua esse officia proident deserunt. Eiusmod laboris ullamco amet consectetur amet.\n\nKind Regards,\nZimmerman Gould', + attachments: [], + starred: false, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: 'a8d0645d-ac30-4f1a-a163-06e949120289', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-02.jpg', + contact: 'Karina Alford ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: moment().hour(20).minute(5).subtract(1, 'day').toISOString(), // Yesterday - 22:05 + subject: 'Quote for a new web design project', + content: + 'Hey Brian,\n\nNisi officia aliqua ex non cupidatat sint ullamco. Irure pariatur ullamco consequat ut eu anim. Ut ad elit pariatur est non sunt. Tempor dolore quis commodo dolore duis officia laboris nostrud sint. Exercitation ullamco laboris eiusmod culpa ut.\n\nAute Lorem aute occaecat dolore tempor ipsum proident fugiat deserunt non incididunt velit nulla. Dolor pariatur tempor amet qui eu exercitation. Tempor minim culpa proident nisi esse ea. Enim est fugiat aliqua aliqua aute velit laborum cupidatat irure nisi dolor deserunt aliqua.\n\nFugiat ut dolor tempor sunt aliquip dolor nostrud. Consequat incididunt ullamco cillum dolore excepteur deserunt est dolor aliquip irure do mollit officia. Consectetur cillum et non minim nisi. Esse quis sunt deserunt elit sint velit tempor et ullamco laboris officia excepteur. Veniam ad ut aliqua sunt consequat reprehenderit nostrud non in duis aute quis pariatur. Occaecat mollit anim non pariatur. Ad do ad id fugiat et culpa laborum esse cupidatat voluptate elit ut magna voluptate.\n\nBest Regards,\nKarina Alford', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: 'fd117ed9-1285-4aca-8c1c-5c96e732c558', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-03.jpg', + contact: 'Carla Gray ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: moment().hour(16).minute(43).subtract(1, 'day').toISOString(), // Yesterday - 16:43 + subject: + 'Nulla culpa consectetur aute ex eu irure incididunt aliqua cupidatat sit cillum fugiat anim ea', + content: + 'Hey Brian,\n\nDo pariatur occaecat tempor duis. Aute occaecat non consequat ut occaecat sint. Cillum reprehenderit elit nisi incididunt in labore pariatur. Labore mollit pariatur nulla officia esse anim exercitation nisi commodo culpa laborum amet nisi.\n\nSunt culpa mollit nostrud excepteur adipisicing sit do. Cillum voluptate amet do sit quis aliquip ea est qui elit. Veniam exercitation sit reprehenderit labore officia in labore excepteur eiusmod exercitation.\n\nEnim nostrud est non esse reprehenderit in ea eiusmod. Duis incididunt amet aliquip dolor esse. Nostrud qui commodo in non nostrud proident enim cupidatat. Aute sunt aliqua excepteur qui occaecat nulla incididunt commodo adipisicing ipsum.\n\nKind Regards,\nCarla Gray', + attachments: [], + starred: false, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: 'a307d83b-d256-4af5-948a-148878a7eaad', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-04.jpg', + contact: 'Rice Cash ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: moment().hour(11).minute(28).subtract(2, 'day').toISOString(), // 2 days ago - 11:28 + subject: 'Ipsum laborum minim aute labore in', + content: + 'Dear Brian,\n\nLaboris non ad et aute sint aliquip mollit voluptate velit dolore magna fugiat ex. Voluptate amet aute deserunt tempor non laboris cillum. Voluptate veniam magna sint magna proident exercitation adipisicing aute id ad tempor reprehenderit magna ullamco. Laborum Lorem anim elit aliquip ut aute minim fugiat aliquip. Eiusmod est et occaecat dolore anim laborum ullamco ipsum commodo.\n\nCommodo amet veniam nostrud mollit quis sint qui nulla elit esse excepteur ullamco esse magna. Nisi duis aute est in mollit irure enim tempor in. Mollit ipsum laboris et velit ex excepteur pariatur. Cillum veniam id ipsum magna. Laborum duis aliquip ut ipsum ad aliqua id sit pariatur consequat sit. Sit nulla nulla ullamco nulla eiusmod et in dolore sint reprehenderit cupidatat.\n\nIpsum mollit cupidatat magna occaecat labore est fugiat est fugiat fugiat nulla labore laboris. Eiusmod aute adipisicing pariatur aliquip sint enim anim in dolore enim aute culpa nulla. Minim magna enim officia ipsum elit quis do velit deserunt Lorem veniam excepteur.\n\nKind Regards,\nRice Cash', + attachments: [ + { + type: 'image/png', + name: 'lake-of-carezza.png', + size: 13071, + preview: 'lake-of-carrezza_preview.png', + downloadUrl: '', + }, + { + type: 'image/jpeg', + name: 'birds-eye-sydney.jpg', + size: 14294, + preview: 'birds-eye-sydney_preview.jpg', + downloadUrl: '', + }, + { + type: 'image/png', + name: 'yosemite-national-park.png', + size: 14242, + preview: 'yosemite-national-park_preview.png', + downloadUrl: '', + }, + ], + starred: true, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: '67664fa3-3a87-4ab8-8c2c-dfd2b1de4c14', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-04.jpg', + contact: 'Elaine Ortiz ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: moment().hour(7).minute(12).subtract(2, 'day').toISOString(), // 2 days ago - 07:12 + subject: 'Ipsum fugiat ad deserunt cillum sunt fugiat', + content: + 'Hello Brian,\n\nId Lorem laborum eiusmod eiusmod mollit magna dolore. Et commodo officia fugiat dolor aliqua proident mollit ut commodo ullamco. Sunt nulla eu dolor velit velit reprehenderit. Culpa esse veniam fugiat eiusmod id veniam sunt reprehenderit minim mollit. Esse qui ea irure pariatur eu ullamco pariatur ipsum reprehenderit proident mollit proident. Nisi fugiat ut est aliquip nulla in non dolore.\n\nCulpa irure cillum ex fugiat cupidatat eiusmod non. Qui irure velit consectetur minim eu excepteur eiusmod veniam irure ad culpa nisi. Nisi sit nostrud quis ullamco aliquip non consequat sunt reprehenderit velit dolor dolor laboris. Dolore in Lorem consectetur nostrud. Laborum cupidatat exercitation voluptate duis amet. Sunt sint minim do in commodo ipsum commodo ea qui velit deserunt qui anim fugiat.\n\nExercitation et qui consequat incididunt nisi incididunt cupidatat officia in. Sit eiusmod anim aliqua elit. Nisi mollit ut non pariatur enim fugiat sint labore velit nostrud eu. Eiusmod id laboris laboris duis enim aute ipsum in magna. Sit eiusmod amet duis commodo sint et anim ex sunt deserunt dolor incididunt. Eiusmod duis dolore dolor elit occaecat do adipisicing ullamco ex laboris aliqua adipisicing. Labore pariatur aute proident mollit elit commodo labore minim dolore non in cillum.\n\nCheers!\nElaine Ortiz', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: 'd5913a7e-25f8-4163-bbf0-81d034163ce7', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-05.jpg', + contact: 'Fleming Stone ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: moment().hour(6).minute(1).subtract(2, 'day').toISOString(), // 2 days ago - 06:01 + subject: 'Deserunt exercitation ut nulla elit Lorem', + content: + 'Hi Brian,\n\nEst labore sunt sunt Lorem dolore. In excepteur esse proident ut consectetur dolor voluptate laborum veniam pariatur. Excepteur ut veniam sit culpa exercitation qui nulla nulla magna ea in dolore et consequat. Irure minim ad cupidatat amet reprehenderit excepteur incididunt nulla eu et excepteur anim et aliqua.\n\nSint sint Lorem magna est irure sint ea cupidatat fugiat. Occaecat non adipisicing magna magna culpa sit commodo aute ex consequat amet minim esse ut. In nulla eiusmod veniam deserunt in.\n\nIn aute excepteur qui pariatur fugiat. Occaecat velit voluptate proident occaecat ut laboris occaecat pariatur aute dolore do. Ut commodo ipsum est non commodo ut ea qui labore veniam. Occaecat nostrud eu dolor tempor velit excepteur sint occaecat excepteur aliqua aliquip. Magna mollit ea aliquip exercitation do elit ex reprehenderit esse aliqua elit.\n\nKind Regards,\nFleming Stone', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'b099a8e2-ffcc-4ae1-866d-8f8f6bd95ab3', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-06.jpg', + contact: 'England Wiley ', + }, + to: 'me ', + date: moment().hour(15).minute(36).subtract(5, 'day').toISOString(), // 2 days ago - 15:36 + subject: + 'Minim do reprehenderit dolor ipsum officia magna laborum est anim in fugiat', + content: + 'Dear Brian,\n\nAd do minim id ad ex sit reprehenderit labore do occaecat fugiat ut enim. Et sunt dolore sint non consequat ut. Esse deserunt nostrud pariatur nulla ullamco nulla sit aliquip culpa sunt ipsum. Ut ad minim qui anim amet aute cupidatat. Est ullamco duis laboris nulla labore incididunt consectetur. Cillum sunt mollit nulla laborum non tempor veniam consequat.\n\nAmet fugiat velit id deserunt pariatur velit laboris consectetur quis officia. Culpa nostrud deserunt nostrud esse labore esse consequat labore fugiat. Nostrud duis ex nulla et do.\n\nPariatur mollit ex adipisicing nostrud nostrud occaecat. Id tempor irure cupidatat duis cillum cupidatat nostrud enim anim. Esse nisi pariatur nisi elit elit sit quis ullamco dolor dolore pariatur est sint. Sint ex aliqua id sunt sunt magna amet ex sit anim. Irure aliquip fugiat ipsum tempor irure nisi Lorem anim sit ullamco. Exercitation nostrud mollit est non enim.\n\nBest Regards,\nEngland Wiley', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: '7bd21940-3388-479c-b1bc-3ebceb0472d8', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-07.jpg', + contact: 'Ingram Fowler ', + }, + to: 'me ', + date: new Date('Sun Jan 07 2018 03:51:20 GMT+0000 (UTC)').toISOString(), + subject: + 'Aliquip eiusmod pariatur adipisicing id consectetur sunt ad dolore consequat commodo', + content: + 'Dear Brian,\n\nDolore sit occaecat est do fugiat sunt est amet nostrud. Aliqua ad veniam officia Lorem id aute fugiat laborum dolor magna dolor. Eiusmod nostrud qui sunt ut exercitation deserunt ipsum. Commodo veniam velit reprehenderit minim amet occaecat consectetur sint aliquip Lorem voluptate cupidatat. Aute aliquip do veniam nostrud nisi minim amet. Ex id ullamco non ea ullamco cillum et Lorem sunt sunt officia dolore excepteur.\n\nSit enim anim occaecat eu adipisicing velit ut excepteur consectetur sunt. Non fugiat deserunt quis fugiat eiusmod magna voluptate nisi commodo minim sunt dolore consequat labore. Pariatur ad aliqua do non labore exercitation aute minim culpa adipisicing qui. Anim et et anim dolore consequat fugiat amet aliquip nisi aliqua irure occaecat et laboris. Aute aliquip incididunt sit ipsum do. Ullamco in anim laboris incididunt tempor duis irure ipsum cillum duis ea. Magna culpa adipisicing ad ullamco id consequat qui ullamco cupidatat pariatur.\n\nMollit amet enim sint cupidatat eu aute exercitation dolor. Minim exercitation nostrud ullamco magna laboris. Pariatur proident aute proident et. Officia cillum pariatur nisi sint anim officia. Sunt minim anim ad tempor deserunt commodo magna labore incididunt ex ad nulla nulla ut. Sint ipsum aliqua dolor mollit do anim officia incididunt. Irure nulla ex elit id pariatur dolore et nostrud occaecat.\n\nCheers!\nIngram Fowler', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: '2d105bae-b4e5-4ba3-a40e-e9e2b5cc671a', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-05.jpg', + contact: 'Diana Walsh ', + }, + to: 'me ', + date: new Date('Fri Jun 29 2018 07:37:52 GMT+0000 (UTC)').toISOString(), + subject: 'Non anim id laborum in et id', + content: + 'Dear Brian,\n\nTempor veniam do dolor laborum consectetur in sit incididunt nulla officia consectetur fugiat. In dolor consequat consectetur deserunt sit. Voluptate reprehenderit tempor dolor dolore nulla aliquip commodo elit cillum laboris occaecat laboris. Eu dolor magna velit ea commodo dolor. Occaecat sit mollit amet voluptate eiusmod aliqua sunt irure sunt fugiat ipsum eu. Consequat ea sit consequat esse.\n\nAdipisicing adipisicing voluptate duis ullamco sint anim sunt nostrud deserunt minim velit aute nisi et. Do ea cupidatat culpa eu qui. Lorem enim laboris amet officia fugiat nisi Lorem laborum ex. Aliquip nostrud sit esse nisi labore.\n\nId amet tempor tempor Lorem fugiat culpa. Elit nulla pariatur adipisicing proident. In qui esse eiusmod ad est minim ipsum mollit aute mollit ad duis aliqua.\n\nCheers!\nDiana Walsh', + attachments: [ + { + type: 'image/png', + name: 'yosemite-national-park.png', + size: 14242, + preview: 'yosemite-national-park_preview.png', + downloadUrl: '', + }, + { + type: 'application/pdf', + name: 'montly-invoice.pdf', + size: 243449, + preview: 'pdf', + downloadUrl: '', + }, + { + type: 'image/jpeg', + name: 'mystery-forest.jpg', + size: 15539, + preview: 'mystery-forest_preview.jpg', + downloadUrl: '', + }, + ], + starred: true, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: '4c3bd79a-6429-466d-b962-8eb09c524969', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-08.jpg', + contact: 'Mckinney Marsh ', + }, + to: 'me ', + date: new Date('Wed Jun 20 2018 15:24:03 GMT+0000 (UTC)').toISOString(), + subject: + 'Adipisicing proident laborum qui deserunt adipisicing exercitation id sint', + content: + 'Hi Brian,\n\nAmet eiusmod est ipsum fugiat. Laborum dolor exercitation esse nostrud cillum. Sunt laboris culpa incididunt ullamco sint veniam dolore tempor non irure ipsum. Laborum quis dolore dolor veniam quis exercitation sint dolore tempor occaecat pariatur officia. Non labore consectetur elit laborum exercitation ut exercitation pariatur Lorem.\n\nExercitation cillum sint exercitation incididunt laboris ut veniam irure sit. Id voluptate esse dolore in fugiat sit sint labore ex ea. Lorem laborum officia occaecat ipsum adipisicing do nostrud proident. Adipisicing fugiat anim aute amet consequat labore non et enim veniam anim. Elit do pariatur pariatur nulla consectetur sit anim cillum cillum.\n\nId qui pariatur enim laborum eu qui. Fugiat sint duis nisi culpa non. Labore cupidatat magna dolor eu et. Anim nulla elit ut eiusmod et excepteur aute culpa labore aliquip.\n\nCheers!\nMckinney Marsh', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: '770d24d1-1b9b-49ec-bcb4-f6feffc305ff', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-09.jpg', + contact: 'Meyer Fuller ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Wed Jan 31 2018 08:17:08 GMT+0000 (UTC)').toISOString(), + subject: 'Excepteur sunt ut ipsum ad culpa aliqua quis', + content: + 'Hey Brian,\n\nCupidatat cupidatat irure culpa est dolore qui laborum adipisicing occaecat nulla officia deserunt fugiat aliqua. Dolor quis sunt aliqua officia culpa esse eiusmod eiusmod ad laboris. Sit deserunt cillum ad cillum minim officia in velit fugiat aliqua ullamco duis elit. Anim incididunt consequat ex amet duis tempor voluptate cillum officia exercitation culpa dolor enim.\n\nEa velit minim officia fugiat culpa nostrud. Ex aute amet veniam anim consequat dolor Lorem sint. Sunt culpa cillum magna est veniam adipisicing. Reprehenderit eu tempor duis veniam velit Lorem elit amet amet ut anim do dolor.\n\nOfficia minim eiusmod et reprehenderit est proident aute amet non nulla fugiat. Proident enim ea cupidatat dolore ea id ad. Qui et eu adipisicing esse mollit mollit exercitation velit in. Consequat mollit magna est quis est duis proident sunt eu officia reprehenderit. Elit esse incididunt adipisicing consequat culpa aliquip deserunt dolore ullamco velit mollit sit sit Lorem. Do quis qui quis veniam aliqua consequat excepteur.\n\nCheers!\nMeyer Fuller', + attachments: [], + starred: true, + important: true, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: '3e2100de-ca0a-4a8e-a1c5-6c13172333dc', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-06.jpg', + contact: 'Carolina Wade ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Sat Mar 24 2018 17:50:27 GMT+0000 (UTC)').toISOString(), + subject: 'In sunt pariatur sunt sint exercitation', + content: + 'Hey Brian,\n\nReprehenderit proident mollit non eu mollit eu. Mollit exercitation non enim commodo sit eu eiusmod est cupidatat esse magna sint quis dolore. Esse deserunt ea sunt quis tempor est deserunt qui proident Lorem. Adipisicing dolore non laboris proident. Incididunt fugiat labore proident eu et ad magna tempor ipsum nostrud adipisicing eiusmod eu.\n\nNisi excepteur ullamco minim laboris sit labore tempor officia commodo officia sit enim qui occaecat. Quis ullamco enim minim voluptate consectetur mollit elit voluptate fugiat. Laboris sint eu magna ullamco laboris aliquip duis laboris sit enim reprehenderit occaecat labore. Mollit nulla magna et labore officia et voluptate fugiat non commodo esse et laboris exercitation.\n\nLaboris amet Lorem sint in. Quis nulla sit et non qui fugiat et culpa pariatur incididunt duis. Dolor tempor incididunt Lorem irure anim velit tempor voluptate.\n\nKind Regards,\nCarolina Wade', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'e1291d1a-fba6-4b23-b259-dd7c9074e976', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-10.jpg', + contact: 'Graves Huber ', + }, + to: 'me ', + date: new Date('Sun Mar 25 2018 02:46:44 GMT+0000 (UTC)').toISOString(), + subject: 'Elit est aute anim ea culpa labore occaecat adipisicing officia', + content: + 'Dear Brian,\n\nAd ex enim mollit quis nostrud nulla quis non minim voluptate cillum sint tempor mollit. Culpa anim occaecat aliquip do. Aliquip velit minim irure nostrud commodo eiusmod consequat ipsum consectetur deserunt dolore. Pariatur dolor dolore consectetur dolor aliqua dolor dolor deserunt minim commodo.\n\nAd qui qui ex et irure eiusmod. Excepteur esse fugiat officia non ex excepteur minim sint voluptate in incididunt. Exercitation culpa laboris non consequat excepteur pariatur est consequat aliquip occaecat ullamco laborum culpa. Ut fugiat duis incididunt incididunt excepteur enim sunt in amet irure nulla. Commodo officia fugiat do nostrud adipisicing sint voluptate voluptate dolor laboris. Nisi id aliqua quis id ullamco reprehenderit enim elit in magna. Proident consectetur voluptate id mollit sint do ipsum id sint proident.\n\nLaboris mollit nulla culpa veniam est dolor fugiat id consequat nulla veniam enim enim. Ullamco sunt proident fugiat cillum labore nostrud incididunt exercitation esse. Labore aliqua est non consequat in excepteur ullamco cupidatat aute nostrud proident. Consectetur enim veniam eiusmod incididunt culpa qui ipsum ea elit non nostrud reprehenderit incididunt veniam. Sint amet Lorem ipsum et dolore pariatur anim consectetur.\n\nBest Regards,\nGraves Huber', + attachments: [], + starred: true, + important: true, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '7cba834c-3011-4897-be7d-ee43bbe69114', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-11.jpg', + contact: 'Tucker Santiago ', + }, + to: 'me ', + date: new Date('Mon Sep 17 2018 14:41:42 GMT+0000 (UTC)').toISOString(), + subject: 'Ullamco qui ex eu ea officia labore incididunt', + content: + 'Dear Brian,\n\nNon tempor sint incididunt adipisicing cupidatat laboris elit incididunt ipsum magna. Voluptate labore cillum irure dolor eu est commodo nulla. Cupidatat aliquip reprehenderit proident duis labore aliquip ullamco dolor occaecat anim esse tempor enim dolore. Elit veniam minim cupidatat aute ea voluptate eu et labore amet eu tempor.\n\nExercitation et exercitation labore cillum reprehenderit eiusmod anim magna ex. Lorem aliqua est velit eu. Qui et ullamco adipisicing elit eiusmod aliquip exercitation laboris consequat esse. Sint velit deserunt est quis ad proident sit eiusmod commodo eiusmod Lorem. Est consequat cillum magna est. Sunt pariatur voluptate elit officia aute.\n\nConsectetur velit deserunt non enim exercitation esse irure aliqua cillum sint in officia Lorem esse. Adipisicing consequat anim magna exercitation mollit. Ipsum irure in culpa mollit cillum eiusmod sunt amet consectetur anim eiusmod ea.\n\nBest Regards,\nTucker Santiago', + attachments: [], + starred: false, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: 'd0de071d-2d72-4e0f-b903-79ca6ade9dbd', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-07.jpg', + contact: 'Becky Cain ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Fri Nov 30 2018 09:14:15 GMT+0000 (UTC)').toISOString(), + subject: + 'Exercitation amet laborum officia nulla nulla adipisicing mollit culpa eiusmod irure deserunt voluptate laborum', + content: + 'Dear Brian,\n\nAd tempor veniam exercitation et occaecat do quis do cillum nulla mollit mollit nulla minim. Id sint do excepteur pariatur eu pariatur do sint ipsum ea. Enim in ex irure eu incididunt aliqua eu velit ipsum magna elit eu.\n\nCupidatat fugiat proident aliqua labore nostrud Lorem veniam tempor dolor exercitation. Aliqua magna pariatur exercitation voluptate do duis ea voluptate est culpa sint id. Irure labore esse adipisicing culpa ad velit consectetur. Sint mollit voluptate tempor exercitation fugiat consectetur cillum officia non dolor.\n\nIpsum amet esse duis duis est voluptate ipsum ipsum ipsum qui labore exercitation veniam. Proident sint incididunt ut sunt ut labore sunt ex. Ea enim velit qui elit non sit excepteur dolore eiusmod.\n\nKind Regards,\nBecky Cain', + attachments: [ + { + type: 'image/jpeg', + name: 'mystery-forest.jpg', + size: 15539, + preview: 'mystery-forest_preview.jpg', + downloadUrl: '', + }, + { + type: 'image/png', + name: 'lake-of-carezza.png', + size: 13071, + preview: 'lake-of-carrezza_preview.png', + downloadUrl: '', + }, + { + type: 'image/png', + name: 'yosemite-national-park.png', + size: 14242, + preview: 'yosemite-national-park_preview.png', + downloadUrl: '', + }, + ], + starred: false, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: 'd39c93b9-10d3-426f-a205-0ee5b30cd983', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-12.jpg', + contact: 'Miller Vazquez ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Sun May 06 2018 19:35:14 GMT+0000 (UTC)').toISOString(), + subject: 'Ullamco eu nulla labore occaecat', + content: + 'Hey Brian,\n\nIrure reprehenderit enim anim ad ex officia qui. Cillum amet reprehenderit aliquip minim adipisicing. Sint sit tempor non nostrud esse adipisicing eu.\n\nLabore dolor sint minim enim officia voluptate. Eu esse est velit ipsum ullamco amet anim aliquip culpa sit laborum velit. Eiusmod est nulla dolor duis voluptate deserunt. Labore do qui amet laborum tempor anim. Do aliqua est anim consequat proident minim. Commodo eiusmod labore elit sunt irure labore proident non ipsum in eiusmod laboris sit. Ad nostrud cupidatat ea est veniam commodo culpa laboris mollit id.\n\nLabore aute fugiat commodo sint aliquip ullamco sint esse. Deserunt aliqua amet tempor Lorem pariatur. Eiusmod proident reprehenderit pariatur cupidatat. Ad consequat laboris nisi in ipsum nisi dolor et velit duis do ad. Ipsum minim reprehenderit quis incididunt culpa. Et laborum laborum quis in elit nisi proident cillum sit ad. Nisi ullamco aliquip elit nisi sint sunt enim est commodo aute aliquip cupidatat eiusmod adipisicing.\n\nBest Regards,\nMiller Vazquez', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: '4e881b4f-bf47-472f-a1fe-f787a66d37dd', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-13.jpg', + contact: 'Delgado Stevens ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Wed Jan 17 2018 09:56:25 GMT+0000 (UTC)').toISOString(), + subject: 'Ut velit occaecat nostrud ullamco non excepteur velit ipsum ut', + content: + 'Hey Brian,\n\nEsse dolore exercitation id sint id eu dolor nisi. Irure consectetur aute eu ad aute velit et tempor ad eiusmod voluptate. Sit proident pariatur anim in culpa ut esse nostrud incididunt ullamco ut. Proident nostrud est voluptate sint nostrud dolore amet dolore culpa eiusmod enim voluptate in. Do qui voluptate ex aliqua ut.\n\nQui ullamco incididunt nulla adipisicing tempor aute commodo eu adipisicing. Tempor exercitation tempor adipisicing ipsum incididunt mollit commodo adipisicing. Cupidatat officia in ut duis non commodo ut.\n\nCulpa eiusmod mollit culpa nostrud ullamco irure. Est adipisicing ut irure Lorem esse. Deserunt deserunt non sit sit labore et minim fugiat irure Lorem et velit.\n\nKind Regards,\nDelgado Stevens', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: '5dad8b60-8d98-4215-88b8-41158e167686', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-08.jpg', + contact: 'Concepcion Cleveland ', + }, + to: 'me ', + date: new Date('Fri Aug 17 2018 04:41:26 GMT+0000 (UTC)').toISOString(), + subject: 'Aliqua pariatur non tempor velit eu amet sit et proident Lorem', + content: + 'Hey Brian,\n\nPariatur anim aute excepteur consequat esse aliqua proident culpa duis duis veniam occaecat cupidatat eu. Lorem officia occaecat duis et exercitation mollit consectetur pariatur ut sit exercitation. Velit consectetur incididunt ad non nostrud dolor consequat esse deserunt. Nisi consectetur ea ut cupidatat ipsum. Sint cillum cupidatat elit laboris incididunt consectetur veniam fugiat sit voluptate officia.\n\nCillum est dolore et aliqua elit pariatur cupidatat eiusmod officia. Nisi officia velit commodo id anim qui commodo aliquip mollit. Quis magna sunt in duis laboris fugiat veniam. Proident consequat deserunt sunt amet officia veniam.\n\nIrure irure aliqua officia deserunt. Excepteur excepteur magna Lorem minim esse in sit. Magna elit laborum sunt magna labore eu eiusmod qui aliqua laborum.\n\nCheers!\nConcepcion Cleveland', + attachments: [], + starred: false, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'eeccc250-8952-47e1-adff-31847289b4dd', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-09.jpg', + contact: 'Robin Berger ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Thu Apr 26 2018 20:55:18 GMT+0000 (UTC)').toISOString(), + subject: + 'Reprehenderit ipsum aute cupidatat qui exercitation dolore voluptate labore veniam consequat quis', + content: + 'Hello Brian,\n\nExercitation minim anim commodo eu deserunt voluptate consectetur. Sit enim excepteur ipsum ea esse labore fugiat nulla. Do est tempor duis in consectetur proident do consectetur. Cupidatat ex id voluptate fugiat aute Lorem elit tempor.\n\nMinim nulla occaecat mollit laboris ea et laboris velit. Velit ullamco quis esse veniam exercitation veniam quis nostrud qui officia commodo. Lorem excepteur magna officia in eu exercitation qui ad. Nisi velit qui ipsum anim veniam deserunt velit adipisicing tempor esse excepteur ipsum. Voluptate sit dolore irure deserunt dolor incididunt laboris tempor. Minim id deserunt ea duis labore incididunt est ullamco mollit pariatur sit duis commodo. Proident ipsum eiusmod ea excepteur.\n\nIrure adipisicing veniam dolor consequat sit incididunt ad cupidatat fugiat eiusmod aliqua id amet labore. Excepteur minim deserunt eiusmod sunt aliqua ipsum. Ullamco nostrud minim ullamco amet Lorem ut irure officia mollit duis enim. Laborum dolore dolor nulla consequat consequat nostrud velit eu deserunt aute deserunt est. Adipisicing laborum dolore pariatur ad tempor culpa exercitation consequat eu anim nulla magna. In est culpa tempor laborum voluptate.\n\nKind Regards,\nRobin Berger', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: 'e8b006ad-e140-4fea-bb32-cc346e66eb93', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-10.jpg', + contact: 'Lynnette Burton ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Fri Nov 02 2018 16:15:50 GMT+0000 (UTC)').toISOString(), + subject: + 'Consectetur deserunt qui ex occaecat dolore officia cillum magna magna adipisicing elit magna velit', + content: + 'Hi Brian,\n\nNulla mollit excepteur ex officia anim cillum eiusmod. Fugiat ullamco ad eu elit Lorem eiusmod veniam ut ipsum cillum culpa. Dolore commodo ea quis labore qui irure velit duis nostrud aute dolore non amet dolor. Qui ullamco elit reprehenderit anim tempor aliquip mollit id pariatur voluptate cupidatat anim voluptate. Exercitation nostrud sint adipisicing ad consectetur. Culpa officia occaecat aute pariatur duis occaecat mollit ea deserunt ipsum. Adipisicing non ipsum sint quis mollit consectetur occaecat anim sint.\n\nOfficia ea excepteur elit non. Velit aute ad consequat deserunt labore culpa consectetur ullamco occaecat ullamco qui laborum labore. Magna consequat dolore proident incididunt adipisicing exercitation sint anim et laboris occaecat quis. Tempor do anim magna ullamco reprehenderit aliqua et laboris non nostrud sunt. Elit aliquip irure officia reprehenderit voluptate nisi officia ex. Quis mollit sit qui eiusmod veniam eu non. Eiusmod ullamco velit occaecat pariatur ea.\n\nCillum velit sit duis esse dolor do velit sit Lorem. Enim occaecat voluptate excepteur irure anim officia nisi culpa. Quis fugiat cupidatat veniam deserunt pariatur. Exercitation ad irure nulla cupidatat nisi nostrud Lorem proident veniam ullamco labore dolore velit. Reprehenderit eiusmod ea cillum sit anim nostrud proident consequat nostrud duis adipisicing.\n\nKind Regards,\nLynnette Burton', + attachments: [], + starred: true, + important: true, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: 'c6fc1d86-4a1f-4071-9c75-618fe2d853aa', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-11.jpg', + contact: 'Carmella Rios ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Thu Jul 05 2018 14:26:57 GMT+0000 (UTC)').toISOString(), + subject: + 'Proident dolore minim deserunt commodo elit aute laborum ullamco laboris anim consequat', + content: + 'Dear Brian,\n\nIn do ex sit amet fugiat duis eu non non duis id sit. Elit pariatur nostrud veniam Lorem aliquip tempor ipsum ut minim eiusmod ad. Sunt et veniam ad incididunt sint occaecat. Exercitation voluptate culpa ex enim. Excepteur exercitation aute consequat non culpa. Lorem ut consectetur commodo laboris esse exercitation laborum do ut duis sunt sint. Aliquip laboris fugiat officia irure consequat pariatur velit ea ut commodo.\n\nIpsum adipisicing proident cupidatat commodo nulla culpa nostrud ipsum voluptate occaecat sit. Occaecat anim cupidatat qui reprehenderit ex commodo dolore. Consectetur id magna esse amet do nulla esse aute velit id minim nostrud cupidatat. Nostrud dolore sunt labore sunt sit velit magna nulla. Sunt enim adipisicing sint deserunt enim veniam reprehenderit reprehenderit. Incididunt fugiat labore minim pariatur mollit ea veniam. Do voluptate id consequat qui ut aliqua qui dolore ex ea.\n\nDo esse duis culpa nisi in elit veniam exercitation consequat. Proident dolor laborum enim velit non nostrud. In reprehenderit proident enim sint tempor cupidatat enim fugiat. Duis laboris officia sit in sunt sunt sunt non. Quis mollit veniam cupidatat non enim Lorem aliquip et sit fugiat eiusmod cillum ad exercitation.\n\nCheers!\nCarmella Rios', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + ], + }, + { + id: 'c062a90f-52e9-4102-8def-1f8f9813deb4', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-14.jpg', + contact: 'Molina Pace ', + }, + to: 'me ', + date: new Date('Mon Sep 17 2018 21:45:31 GMT+0000 (UTC)').toISOString(), + subject: 'Dolor anim non labore est aliquip sunt pariatur', + content: + 'Hi Brian,\n\nNon fugiat eu aute nulla deserunt Lorem id fugiat consectetur duis ut reprehenderit nostrud. Laboris culpa id nulla duis id proident. Eiusmod consequat commodo aute est deserunt aliquip esse aute qui aute et nostrud culpa.\n\nCillum minim reprehenderit sit nulla aliqua adipisicing deserunt non sit excepteur fugiat velit et. Amet excepteur non ipsum voluptate dolore irure. Laboris sit sunt id mollit et in nulla eiusmod duis ut tempor ea est. Dolor est laborum ipsum labore sint aliquip est minim ex. Aliqua cillum qui consectetur amet elit nostrud quis duis. Dolore consequat laborum laboris ullamco qui do cupidatat sunt deserunt ex elit cillum.\n\nVeniam exercitation eiusmod exercitation cupidatat sunt incididunt. Labore occaecat eiusmod sint consectetur eiusmod sunt quis ad Lorem ex. Ipsum labore ipsum nulla Lorem incididunt proident. Sit officia ut nostrud nisi ipsum adipisicing qui. Non nulla commodo nostrud aliqua Lorem consequat ea do dolore nisi veniam veniam occaecat. Tempor amet ex eiusmod irure aliquip minim. Laborum officia fugiat nisi magna.\n\nBest Regards,\nMolina Pace', + attachments: [ + { + type: 'image/jpeg', + name: 'birds-eye-sydney.jpg', + size: 14294, + preview: 'birds-eye-sydney_preview.jpg', + downloadUrl: '', + }, + { + type: 'image/png', + name: 'yosemite-national-park.png', + size: 14242, + preview: 'yosemite-national-park_preview.png', + downloadUrl: '', + }, + ], + starred: true, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '545d12a6-e0f3-464d-af45-618163933a71', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-12.jpg', + contact: 'Olga Osborn ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Thu Sep 27 2018 13:45:14 GMT+0000 (UTC)').toISOString(), + subject: + 'Elit tempor enim nisi cillum cillum esse do magna exercitation minim', + content: + 'Dear Brian,\n\nEu voluptate dolore anim deserunt nostrud pariatur voluptate exercitation et et veniam fugiat sint consequat. Aute esse pariatur ullamco reprehenderit velit pariatur mollit sunt enim culpa qui anim sit officia. Labore minim elit commodo sunt fugiat in sint adipisicing aute incididunt adipisicing in officia esse. Sit enim eu irure ullamco ea pariatur dolore exercitation labore excepteur laborum exercitation dolore. Magna dolor Lorem fugiat eiusmod consectetur sit.\n\nExcepteur sunt officia minim in do esse. Nostrud ullamco dolore esse laborum aliquip sit consequat. Excepteur irure occaecat cupidatat cupidatat deserunt esse deserunt voluptate non labore culpa. Sit voluptate non eu sit. Velit pariatur esse et ex in laboris cillum Lorem tempor consequat. Magna consequat nostrud duis minim. In ad irure commodo deserunt incididunt duis sit quis voluptate ullamco laboris laborum commodo.\n\nIn duis eiusmod proident excepteur. Magna proident do ad est amet pariatur sint cupidatat ullamco velit cillum. Ea esse proident non culpa do in minim eiusmod.\n\nCheers!\nOlga Osborn', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: '23456530-2cd4-4558-95d0-6311c2ee2ee8', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-13.jpg', + contact: 'Brooke Petersen ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Sun Jul 22 2018 14:49:16 GMT+0000 (UTC)').toISOString(), + subject: + 'Anim laboris aliquip excepteur consectetur eu enim sunt velit qui deserunt', + content: + 'Hello Brian,\n\nConsequat velit voluptate exercitation sint anim laboris. Consectetur dolor sunt veniam incididunt ad laboris proident tempor voluptate enim excepteur. Nostrud eu id tempor cupidatat. Deserunt ullamco consequat esse et. Dolore qui cupidatat commodo ea nisi tempor velit sit aliquip amet.\n\nMagna fugiat cupidatat mollit mollit. Consectetur consequat occaecat pariatur commodo quis labore est cillum voluptate culpa tempor elit incididunt. Voluptate anim est eiusmod voluptate ipsum commodo do et elit. Aute pariatur adipisicing eu laboris proident Lorem qui enim magna adipisicing deserunt pariatur. Fugiat eiusmod occaecat dolor tempor sunt exercitation est amet mollit est. Est in duis adipisicing nostrud aute voluptate quis in fugiat veniam reprehenderit.\n\nIpsum id deserunt ex non nisi nostrud enim pariatur nulla. In labore qui esse veniam ut. Est id ut pariatur esse nulla dolore aliqua ad aliqua fugiat. Ad incididunt amet culpa labore enim proident tempor. Aliquip non dolore sunt eu deserunt tempor anim qui dolore quis. Est sunt enim ipsum aliqua.\n\nKind Regards,\nBrooke Petersen', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'affeecf6-e3c5-4377-8070-96f5ed9c6500', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-15.jpg', + contact: 'Estes Walter ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Tue Jul 17 2018 03:52:54 GMT+0000 (UTC)').toISOString(), + subject: 'Reprehenderit ad do quis ut fugiat proident labore', + content: + 'Hello Brian,\n\nFugiat labore incididunt aute sint id laboris nisi eiusmod reprehenderit. Sint sint Lorem aute cillum velit occaecat sit quis laboris ipsum laborum. Ex ipsum ea proident duis ex nostrud dolore exercitation nostrud ullamco cupidatat irure dolor. In aliqua occaecat commodo irure dolore. Nisi laborum anim cillum aute adipisicing labore fugiat velit officia cupidatat aliquip voluptate veniam. Aute incididunt consequat est id commodo elit occaecat ea Lorem deserunt est.\n\nPariatur deserunt sunt excepteur nisi ex. Enim consequat esse in deserunt ut. Cillum incididunt exercitation fugiat reprehenderit amet dolor nulla irure id quis.\n\nEnim id incididunt labore commodo voluptate. Non sint sint in eu anim dolor aliquip ullamco occaecat esse id consectetur cupidatat. Mollit aute nisi et fugiat consequat.\n\nKind Regards,\nEstes Walter', + attachments: [], + starred: false, + important: true, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: 'cb00d05c-6660-4dbb-a794-f22cff93f001', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-16.jpg', + contact: 'Holman Oconnor ', + }, + to: 'me ', + date: new Date('Sat Jan 13 2018 22:30:44 GMT+0000 (UTC)').toISOString(), + subject: + 'Duis dolore eu sint anim ipsum commodo esse cillum ipsum culpa commodo', + content: + 'Dear Brian,\n\nDolore amet sunt ullamco enim quis tempor enim pariatur nostrud id nulla adipisicing. Reprehenderit amet ex ullamco pariatur proident et amet consequat ipsum sit ut. Laboris fugiat nulla consequat nulla qui tempor dolore dolore minim nisi. Excepteur non est pariatur cupidatat adipisicing veniam ea cillum ex duis laborum ullamco.\n\nDo quis cupidatat adipisicing sint minim veniam velit amet nulla nisi tempor voluptate nulla adipisicing. Ex dolor adipisicing dolor ad cupidatat consectetur cillum ex. Non velit laborum fugiat est fugiat officia esse ullamco. Ut amet sit mollit dolor. Sit ipsum reprehenderit consectetur excepteur. Enim ad aliqua consequat ipsum labore laborum culpa aliqua dolor voluptate.\n\nVelit cupidatat labore sint id excepteur anim qui do do non. Esse tempor aute nisi aliqua velit ad elit nulla pariatur aliqua consectetur. Proident pariatur mollit cupidatat ullamco est velit ullamco dolore. Ipsum sunt reprehenderit consequat eu dolore nisi nostrud ipsum cillum. Quis non esse fugiat ipsum ad laboris aliquip eiusmod deserunt qui ipsum aliqua consequat duis. Ad nisi sunt sint ut officia adipisicing labore voluptate commodo ullamco exercitation.\n\nKind Regards,\nHolman Oconnor', + attachments: [], + starred: false, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '7bd27a67-df7c-4a2d-8042-1fb8a690d98e', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-17.jpg', + contact: 'Oneill Irwin ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Sat Nov 17 2018 08:17:34 GMT+0000 (UTC)').toISOString(), + subject: + 'Eu in ut dolor amet consequat aute esse non fugiat minim cillum sunt aliquip cillum', + content: + 'Dear Brian,\n\nNostrud sint ea laboris excepteur dolor nisi mollit dolor voluptate irure ex. Laboris adipisicing id ad minim minim magna nostrud nulla quis nulla tempor. Qui incididunt velit qui et proident eu in tempor in aliqua reprehenderit nostrud aute nulla. Nisi officia fugiat officia irure cillum qui adipisicing qui. Culpa duis sunt aute nostrud elit esse sit ullamco commodo ex.\n\nVeniam Lorem est minim sint ut aliqua ut est exercitation ad aliquip ullamco in culpa. Amet qui do adipisicing magna eu reprehenderit anim enim. Ipsum consequat ut eiusmod irure amet commodo aliqua sint aliquip non nulla. Irure excepteur tempor in ullamco sit culpa labore dolor enim sit. Nostrud eiusmod ex nulla exercitation est esse velit dolore aliqua eiusmod sit. Elit dolore id proident fugiat culpa anim ea Lorem eiusmod aliqua ex culpa in tempor.\n\nDeserunt officia id excepteur esse nisi elit labore irure. Et sint dolor ex incididunt ipsum dolore in mollit tempor. Qui cillum consequat laboris non culpa laborum amet cillum mollit laboris anim duis pariatur consequat. Ipsum fugiat cupidatat proident magna nisi consectetur adipisicing minim labore. Officia consequat quis labore sunt.\n\nKind Regards,\nOneill Irwin', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: 'ccfb3a90-e18c-4645-8c00-4357d9bcd321', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-14.jpg', + contact: 'Marcie Morgan ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Tue Nov 20 2018 05:55:32 GMT+0000 (UTC)').toISOString(), + subject: + 'Magna velit cillum dolor reprehenderit aliqua ut aute nisi in sunt Lorem laboris elit do', + content: + 'Hi Brian,\n\nCommodo id eu mollit dolor laboris incididunt exercitation labore duis eu mollit labore labore labore. Cupidatat fugiat aute non consequat eiusmod in Lorem. Consequat officia ullamco minim aliquip aliqua.\n\nIrure elit ipsum minim ad Lorem. In amet Lorem aute minim id consequat nulla. Tempor ipsum incididunt occaecat sit ipsum adipisicing pariatur magna aliquip adipisicing quis id pariatur est. Tempor sit dolor aute do aliqua. Est cillum adipisicing ut aliquip adipisicing est nostrud tempor tempor culpa laboris occaecat. Ipsum culpa veniam sit aliqua ad culpa Lorem esse pariatur incididunt adipisicing irure ea. Sunt nostrud do quis tempor reprehenderit anim dolore mollit fugiat nisi.\n\nPariatur nostrud id occaecat dolor sunt. Ipsum dolore ex minim ex tempor sint ad elit eiusmod ipsum veniam. Aliquip occaecat nisi sunt aliquip id. Reprehenderit aliquip nisi ea culpa eu commodo Lorem consectetur.\n\nKind Regards,\nMarcie Morgan', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: 'a18b1961-ad32-4d00-984f-afef8ee0f4e9', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-18.jpg', + contact: 'Crane Trevino ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Sat Nov 03 2018 01:52:28 GMT+0000 (UTC)').toISOString(), + subject: 'Tempor consectetur officia excepteur culpa', + content: + 'Dear Brian,\n\nExercitation in non sint adipisicing reprehenderit eu est aute aute quis Lorem. Magna labore nisi amet magna do in. Eiusmod fugiat mollit mollit minim aute. Voluptate qui sunt eiusmod aliquip pariatur consectetur et culpa laborum dolore. Exercitation ad incididunt exercitation voluptate sit qui eu incididunt sit.\n\nVoluptate cillum qui proident dolore tempor excepteur aute magna esse ex est culpa in. Officia officia quis veniam sunt irure eu. Voluptate ullamco velit culpa laboris anim commodo esse sunt minim esse nostrud ea. Est eiusmod commodo occaecat anim sint exercitation. Sunt irure nisi est sit excepteur aute amet. Non labore ullamco tempor nostrud nostrud ea do nostrud Lorem veniam in. Dolor est esse duis aute.\n\nEnim fugiat sunt et ut officia fugiat reprehenderit. Id cupidatat qui occaecat proident incididunt deserunt nisi magna enim dolore. Dolor aute anim ex tempor nisi ex minim sint reprehenderit ex ullamco ullamco culpa ipsum. Voluptate occaecat esse consequat non aliqua proident. Deserunt exercitation Lorem ea nisi consequat et culpa pariatur. Incididunt commodo deserunt dolore irure ea sint ipsum ad voluptate.\n\nBest Regards,\nCrane Trevino', + attachments: [], + starred: false, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: '3aaa5e3f-b8b5-47fc-9967-5f65dd8c7251', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-15.jpg', + contact: 'Kristine Wiggins ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Tue Jan 09 2018 13:55:10 GMT+0000 (UTC)').toISOString(), + subject: + 'Magna aute enim magna aliqua aliquip enim elit eiusmod nulla nostrud', + content: + 'Hi Brian,\n\nCulpa incididunt qui nulla velit consectetur. Exercitation ut voluptate proident commodo non deserunt. Consectetur anim aute sunt aliquip fugiat laborum tempor exercitation duis sint excepteur ullamco culpa consequat. Aliqua ex quis pariatur excepteur commodo adipisicing ut anim et. Duis ex sit ex nulla proident est consequat aliquip. Quis exercitation labore veniam anim sit irure laborum occaecat laborum labore cillum sunt nulla. Exercitation laborum sunt consequat aliqua.\n\nLabore fugiat ullamco quis incididunt quis duis consectetur aute incididunt cupidatat cupidatat deserunt. Cillum fugiat ex minim tempor consectetur duis labore reprehenderit excepteur enim anim qui. Reprehenderit pariatur aliqua mollit in amet id. Duis anim nostrud incididunt adipisicing incididunt velit minim tempor adipisicing est elit ipsum duis.\n\nFugiat nostrud ad enim officia est. Voluptate velit in pariatur cupidatat irure dolor eiusmod voluptate irure voluptate ad reprehenderit est. Esse aute aliquip aute minim amet pariatur minim tempor nostrud consectetur. Sunt reprehenderit excepteur occaecat ea reprehenderit eiusmod duis cupidatat sunt nulla fugiat et velit elit. Do ut tempor cillum nisi. Magna sint do et mollit cupidatat ad culpa voluptate.\n\nKind Regards,\nKristine Wiggins', + attachments: [ + { + type: 'application/pdf', + name: 'account-details.pdf', + size: 127844, + preview: 'pdf', + downloadUrl: '', + }, + { + type: 'image/jpeg', + name: 'mystery-forest.jpg', + size: 15539, + preview: 'mystery-forest_preview.jpg', + downloadUrl: '', + }, + { + type: 'image/jpeg', + name: 'birds-eye-sydney.jpg', + size: 14294, + preview: 'birds-eye-sydney_preview.jpg', + downloadUrl: '', + }, + ], + starred: true, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '0f72d2d0-bea4-4c0f-ace0-0be9f14c37f1', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-16.jpg', + contact: 'Terrie Carney ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Tue Jan 23 2018 00:03:55 GMT+0000 (UTC)').toISOString(), + subject: + 'Laboris in incididunt labore labore deserunt deserunt nostrud mollit voluptate non ex', + content: + 'Hello Brian,\n\nReprehenderit veniam fugiat sunt in nulla anim commodo magna ex nulla. Mollit nostrud eiusmod aute veniam. Sint do cupidatat velit sit amet.\n\nUllamco elit anim veniam culpa veniam velit. Nisi aute esse consectetur ea occaecat ea laboris eu. Velit proident quis mollit nulla mollit dolor ad commodo. Non deserunt ipsum id dolor est ad consectetur sunt commodo adipisicing in irure.\n\nCupidatat consequat officia adipisicing amet esse veniam veniam elit veniam sint nulla quis qui commodo. Ipsum nisi deserunt pariatur nostrud in. Sint duis pariatur esse do duis proident consequat ullamco excepteur mollit nulla veniam non. Reprehenderit incididunt ipsum duis dolor nulla fugiat fugiat culpa laboris velit sint.\n\nKind Regards,\nTerrie Carney', + attachments: [], + starred: false, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: 'f825c5a3-2be8-4d48-9c4e-da60ff0e63f3', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-19.jpg', + contact: 'Goff Jennings ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Tue Aug 07 2018 05:20:39 GMT+0000 (UTC)').toISOString(), + subject: + 'Labore sint dolor nulla nostrud commodo amet nisi mollit commodo eiusmod duis quis irure non', + content: + 'Dear Brian,\n\nNisi sit ut in do aliqua nostrud consectetur incididunt. Non et pariatur nulla mollit aute aliquip amet minim irure tempor eu id ipsum. Velit sunt tempor proident voluptate ad reprehenderit. Dolor consectetur est in nulla. Reprehenderit incididunt magna deserunt mollit officia non aliqua. Elit est dolore ea Lorem velit ipsum occaecat cupidatat. Mollit magna laborum qui sit sunt mollit amet.\n\nDuis excepteur labore laboris adipisicing culpa culpa eiusmod et velit aliquip velit. Proident tempor in excepteur minim irure duis ex in non est. Labore minim sunt culpa enim tempor labore ea adipisicing nulla elit magna. Fugiat enim ex voluptate officia pariatur pariatur ipsum eu in. Veniam commodo occaecat laborum excepteur nisi Lorem.\n\nExcepteur adipisicing amet ea commodo dolor nisi labore deserunt adipisicing pariatur. Pariatur magna et esse id occaecat minim minim. Labore cupidatat tempor deserunt reprehenderit anim duis magna laborum excepteur aliquip consectetur.\n\nBest Regards,\nGoff Jennings', + attachments: [], + starred: false, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: 'e6dc9600-a3ab-4571-b2f2-ed00ee08e163', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-20.jpg', + contact: 'Browning Sanchez ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Fri Mar 16 2018 20:31:08 GMT+0000 (UTC)').toISOString(), + subject: + 'Mollit cupidatat commodo consectetur duis ea elit est sint sunt ea qui nostrud incididunt', + content: + 'Hey Brian,\n\nVelit ut elit ex voluptate nisi nostrud sunt pariatur dolore est dolor deserunt sint nostrud. Aute magna ipsum cillum cillum tempor voluptate cupidatat sunt eiusmod officia sit. Aliqua adipisicing officia adipisicing dolore id nulla nulla irure non enim esse anim. Tempor occaecat excepteur duis ex aliquip eu reprehenderit labore ea. Adipisicing anim amet culpa culpa cillum elit cupidatat consequat laboris.\n\nEx dolore fugiat incididunt deserunt deserunt quis elit ipsum. Exercitation dolore dolore deserunt eu voluptate deserunt non id duis incididunt. Dolor proident quis enim cillum fugiat. Ex nisi pariatur aliqua exercitation. Incididunt laborum pariatur deserunt anim laboris sint consequat aliqua nostrud sint. Elit tempor laboris do tempor eu minim sunt proident.\n\nAmet aute esse minim qui sit pariatur aliquip laborum. Irure nulla sit laboris dolor reprehenderit veniam occaecat non commodo do qui. Eiusmod pariatur dolor consectetur qui quis occaecat. Et consectetur occaecat nulla elit officia nostrud. Est aute est nisi dolor mollit sunt et aliqua aliqua nulla labore cupidatat. Do pariatur aliquip cillum ullamco. Nostrud tempor consectetur eu nisi incididunt in voluptate est.\n\nKind Regards,\nBrowning Sanchez', + attachments: [], + starred: false, + important: true, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: '0f22fedf-ea89-414e-91a4-0df0d9501ef2', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-01.jpg', + contact: 'Carey Lyons ', + }, + to: 'me ', + date: new Date('Tue May 01 2018 07:56:59 GMT+0000 (UTC)').toISOString(), + subject: 'Laboris esse ipsum esse eu do ipsum do incididunt', + content: + 'Hello Brian,\n\nIpsum elit ut magna occaecat dolor sint reprehenderit eu incididunt sunt irure esse mollit. Sit fugiat amet laborum ullamco sit laborum Lorem irure minim ut. Labore aliqua dolore minim elit consequat sit. Labore mollit esse ad magna voluptate anim pariatur. Irure enim excepteur adipisicing cillum minim culpa elit nostrud consectetur quis laborum velit. Ea eiusmod aliqua ipsum ad tempor veniam fugiat elit.\n\nDolor mollit adipisicing ut duis cillum proident id sunt non sit cillum. Sit aliqua elit aute tempor cupidatat esse mollit do deserunt cillum velit irure cillum. Ea aliqua Lorem minim cupidatat elit Lorem.\n\nEu deserunt nostrud Lorem reprehenderit sit veniam consectetur proident. Duis elit duis excepteur sit proident est ut est cillum. Sit tempor aliqua qui laborum eu cillum laborum consequat adipisicing sit exercitation. Anim non do consequat duis pariatur. Velit excepteur magna enim tempor occaecat consequat exercitation laborum deserunt.\n\nKind Regards,\nCarey Lyons', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: 'd942f99b-8925-49f0-b75b-2c48b714b1cf', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-02.jpg', + contact: 'Hendrix Goodwin ', + }, + to: 'me ', + date: new Date('Mon Jan 22 2018 19:04:29 GMT+0000 (UTC)').toISOString(), + subject: 'Magna consectetur occaecat excepteur elit', + content: + 'Hello Brian,\n\nSunt consequat elit aliquip sit nulla ad. Voluptate elit qui magna ipsum culpa pariatur laboris nisi sit laboris. Mollit eiusmod ut elit est aliquip nulla ea laborum. Irure ipsum officia cillum labore occaecat esse consequat ut culpa et ut.\n\nAliquip aliquip veniam aute velit aliquip culpa cillum. Eu culpa pariatur in exercitation est nostrud duis quis voluptate. Anim pariatur ipsum aliquip proident et enim veniam duis velit adipisicing id ad exercitation commodo. Sit commodo qui reprehenderit et elit officia in aliquip amet occaecat. Nulla aute officia duis cupidatat cillum. Commodo amet consequat qui ipsum nisi nulla veniam laborum. Et excepteur est irure non officia ipsum sunt fugiat exercitation eu laboris sunt.\n\nElit reprehenderit aute consectetur eiusmod sit pariatur elit fugiat irure id et. In in dolore sunt magna cillum excepteur minim aute. Lorem sint occaecat elit est sint ut ea eiusmod anim esse cillum anim enim. Officia sint velit qui minim veniam ut nisi reprehenderit occaecat laborum qui. Elit eiusmod commodo dolor sunt incididunt labore.\n\nBest Regards,\nHendrix Goodwin', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: '036c24e8-d8bc-4f0e-9a72-6fa884d69bb3', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-17.jpg', + contact: 'Leticia Fulton ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Sat Mar 31 2018 05:44:48 GMT+0000 (UTC)').toISOString(), + subject: 'Est nostrud labore excepteur quis consectetur proident cupidatat', + content: + 'Hello Brian,\n\nOfficia incididunt sint est non aliquip eu deserunt sunt ad minim aliqua excepteur. Cillum dolor nostrud magna sunt nulla aute ut esse dolore magna eu. Dolore minim non dolor aliquip reprehenderit excepteur irure dolore anim incididunt sit. Nulla commodo pariatur consectetur sit reprehenderit amet consectetur duis.\n\nCupidatat tempor commodo aliqua sunt incididunt. Occaecat occaecat eu officia aliqua in exercitation sint commodo aute aliquip laborum consectetur enim. Voluptate do aute irure ullamco. Qui consectetur id aliqua laborum incididunt cupidatat proident ea irure mollit minim.\n\nDolore reprehenderit occaecat enim eu veniam tempor dolor. Aliquip proident tempor aute nostrud ut. Eiusmod consectetur qui mollit ut ut ullamco aliquip exercitation quis dolore irure labore. Nisi officia aliquip pariatur Lorem velit ex cupidatat cillum consequat. Elit ea sunt reprehenderit do minim cillum. Aute irure ad velit quis et adipisicing esse reprehenderit et quis voluptate. Aliquip reprehenderit duis eiusmod eiusmod aliqua mollit amet id cillum deserunt.\n\nCheers!\nLeticia Fulton', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '3dac4463-73aa-4bd4-a3d8-662ce38635cc', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-18.jpg', + contact: 'Carmen Shannon ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Fri Jun 15 2018 23:26:09 GMT+0000 (UTC)').toISOString(), + subject: 'Aute est laboris laborum consectetur cupidatat', + content: + 'Hey Brian,\n\nEsse dolore laboris enim quis. Ullamco dolor exercitation nostrud occaecat in et ad Lorem sunt nisi. Ipsum quis dolor fugiat ex eu. Consequat voluptate elit ut exercitation enim sint aliqua qui id est in eu adipisicing veniam. Deserunt est occaecat sit irure aute. Anim veniam cupidatat exercitation labore duis pariatur velit est exercitation dolore ad. Pariatur non adipisicing et nulla sit.\n\nIncididunt dolor pariatur est aute ad. Non aliqua qui excepteur cillum enim. Magna proident incididunt eu dolor non ut. Eiusmod Lorem tempor laborum amet ex.\n\nExcepteur quis duis cupidatat ea cupidatat magna irure ad exercitation eiusmod. Quis magna minim nulla ullamco. Sit dolor ipsum tempor laboris eiusmod deserunt ex. Est incididunt culpa commodo ad sunt cillum eiusmod labore nisi nulla ea sit anim incididunt. In labore id sint ipsum id nulla ad aliqua mollit minim occaecat. Velit do velit nostrud nostrud dolor esse consequat velit ullamco in cupidatat. Amet culpa fugiat Lorem nisi tempor labore magna reprehenderit aliquip elit et esse fugiat.\n\nKind Regards,\nCarmen Shannon', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '6bb27e81-ee53-4db3-acc7-bd1267cd475d', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-19.jpg', + contact: 'Hattie Snow ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Fri Jun 08 2018 01:23:42 GMT+0000 (UTC)').toISOString(), + subject: 'Officia exercitation exercitation ad exercitation ea ut ullamco', + content: + 'Hello Brian,\n\nIncididunt aute pariatur quis reprehenderit tempor occaecat laborum nostrud labore sunt minim non eiusmod incididunt. Ipsum cupidatat qui reprehenderit ex enim irure. Eiusmod sunt proident Lorem veniam non magna dolore eu laboris nostrud quis pariatur. Velit do eu commodo tempor laboris excepteur in. Laborum mollit dolor aliquip enim sunt cillum minim. Dolor elit ipsum proident adipisicing consectetur aliquip nisi proident eiusmod Lorem adipisicing aliqua velit ea.\n\nDo adipisicing incididunt proident Lorem ullamco. Cupidatat fugiat et minim elit deserunt est. Occaecat laboris cillum elit aute cupidatat reprehenderit consequat est est ea occaecat sit consequat labore. Enim proident consectetur culpa anim est culpa nulla nostrud esse proident officia ut dolore ipsum. Do qui sunt id quis Lorem officia anim fugiat occaecat ut.\n\nEsse incididunt excepteur adipisicing fugiat deserunt sint Lorem culpa excepteur tempor ullamco qui. Non aliquip ullamco Lorem do. Ex enim elit minim reprehenderit in qui aliqua qui laborum.\n\nKind Regards,\nHattie Snow', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: 'bfac8e5d-6487-4747-b827-67179ac5c206', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-20.jpg', + contact: 'Brandi Bradley ', + }, + to: 'me ', + date: new Date('Sat Nov 17 2018 10:51:44 GMT+0000 (UTC)').toISOString(), + subject: + 'Eiusmod nulla incididunt nostrud est mollit quis velit in non irure elit consectetur commodo irure', + content: + 'Hey Brian,\n\nOfficia ad enim aliqua ex labore nisi. Commodo cillum non occaecat laboris. Irure eu ut voluptate officia excepteur.\n\nNostrud ad proident qui cupidatat exercitation labore occaecat in. Aliquip culpa veniam magna eiusmod proident irure reprehenderit pariatur adipisicing velit. Aliqua non labore tempor irure do duis ut voluptate.\n\nNon sit dolore voluptate sint ullamco proident enim non do dolor deserunt nisi velit. Quis pariatur esse sunt quis voluptate ut minim proident officia exercitation ipsum ipsum cillum. Duis non nostrud ullamco excepteur occaecat. Deserunt sit sint quis et ad. Nisi enim excepteur magna laboris occaecat laborum non esse sit enim mollit. Et elit eiusmod eiusmod Lorem ex qui elit adipisicing proident aute eu.\n\nBest Regards,\nBrandi Bradley', + attachments: [ + { + type: 'image/png', + name: 'yosemite-national-park.png', + size: 14242, + preview: 'yosemite-national-park_preview.png', + downloadUrl: '', + }, + { + type: 'image/png', + name: 'yosemite-national-park.png', + size: 14242, + preview: 'yosemite-national-park_preview.png', + downloadUrl: '', + }, + ], + starred: true, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + ], + }, + { + id: '81b49a0a-e934-422a-81a8-8506d6f24e0e', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-01.jpg', + contact: 'Patsy Potter ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Tue May 15 2018 15:37:38 GMT+0000 (UTC)').toISOString(), + subject: + 'Ullamco fugiat fugiat non occaecat proident exercitation proident Lorem adipisicing commodo fugiat', + content: + 'Hello Brian,\n\nAute in culpa nulla aliqua laboris adipisicing in sit laborum. Enim exercitation duis qui ullamco. Ullamco eiusmod deserunt cillum nisi nulla nostrud voluptate fugiat non nulla. Tempor sint consequat in nostrud cupidatat exercitation aliqua Lorem. Fugiat officia excepteur consequat id cillum amet consectetur mollit nostrud in ex aliquip. Velit ut cupidatat excepteur deserunt.\n\nSit culpa eu dolor Lorem ipsum anim dolor proident. Cupidatat qui laboris incididunt Lorem cillum anim dolore ad ipsum ullamco deserunt aliquip exercitation. Nostrud magna fugiat aliquip veniam cupidatat cupidatat fugiat voluptate consectetur irure minim officia officia. Tempor commodo tempor sint amet. Ex sint adipisicing fugiat excepteur do ad elit esse commodo duis et. Ullamco irure laborum sint duis duis irure officia culpa non Lorem est deserunt exercitation.\n\nDolor ullamco fugiat eu cupidatat consequat exercitation magna. In ad aute aliquip eu laboris adipisicing proident ad. Eu aliquip enim cillum aliqua.\n\nKind Regards,\nPatsy Potter', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: '8355b50a-f347-4177-8cef-6410c0aa46d1', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-02.jpg', + contact: 'Kathleen Cox ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Sun Aug 26 2018 04:47:12 GMT+0000 (UTC)').toISOString(), + subject: + 'Est fugiat reprehenderit cupidatat sunt velit aliquip reprehenderit exercitation', + content: + 'Hey Brian,\n\nReprehenderit elit do qui ut occaecat veniam. Laboris culpa cupidatat irure ipsum ea cupidatat. Occaecat ea nisi cillum eiusmod. Excepteur dolore ut commodo magna consequat laboris aliquip pariatur reprehenderit laboris. Velit ullamco ipsum ut excepteur enim ipsum consequat reprehenderit eiusmod. Occaecat enim exercitation ipsum nulla dolor anim irure sint dolor do aliquip. Eu tempor sunt non pariatur ut anim eu.\n\nDeserunt cupidatat elit sit cillum qui ut velit ea dolor id sint. Laborum excepteur commodo sit duis. Sit sunt proident laborum ex deserunt cupidatat aliquip tempor id qui deserunt est deserunt et. Qui voluptate veniam nostrud deserunt ullamco nisi occaecat cillum aliquip ullamco. Duis labore sunt ad sunt cillum veniam fugiat deserunt commodo Lorem fugiat et. Eu laborum enim culpa duis esse tempor ex ex. Occaecat cupidatat est reprehenderit cupidatat fugiat amet dolor anim eiusmod.\n\nDolore est occaecat anim aute adipisicing do magna ea aute duis dolore nisi. Irure veniam dolore tempor sint. Irure ullamco aliqua id nisi elit Lorem amet do tempor. Irure aute consectetur dolore nisi nisi excepteur et labore fugiat excepteur duis adipisicing.\n\nKind Regards,\nKathleen Cox', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [], + }, + { + id: '6d2bfbce-465b-4e8f-a79e-cd13ab8571c6', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-03.jpg', + contact: 'Kristina Ramirez ', + }, + to: 'me ', + date: new Date('Tue Mar 06 2018 16:13:56 GMT+0000 (UTC)').toISOString(), + subject: + 'Ea eu cupidatat voluptate magna et Lorem veniam aute ipsum consectetur nisi voluptate', + content: + 'Dear Brian,\n\nVoluptate esse cillum dolor aliqua. Qui aliqua consectetur tempor irure dolor sunt excepteur eu. Aliqua incididunt velit id minim consequat.\n\nLorem cupidatat aliqua enim fugiat ex aliqua fugiat do ut sint eiusmod. Ex Lorem incididunt velit laboris exercitation aliqua commodo est velit nisi excepteur aute dolor eu. Ad culpa excepteur non laboris occaecat aute sunt ea nostrud ut exercitation fugiat laboris. Ad eiusmod in culpa cupidatat sit pariatur deserunt velit velit elit aliqua duis eiusmod enim.\n\nFugiat ut proident consectetur aliquip consequat sunt ipsum adipisicing. Nisi velit eiusmod sunt voluptate do ea voluptate esse veniam deserunt consectetur Lorem laboris labore. Consectetur aute quis id nisi cillum magna elit veniam fugiat elit aliqua. Mollit aute laborum incididunt sit voluptate consectetur magna do do in duis sunt non culpa.\n\nKind Regards,\nKristina Ramirez', + attachments: [], + starred: false, + important: false, + unread: true, + folder: '7c004a19-4506-48ef-93ab-f16381302e3b', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: 'd8815854-8726-4280-a5bf-eafd40b3972a', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-03.jpg', + contact: 'Mays Glass ', + }, + to: 'me ', + date: new Date('Thu Jan 04 2018 11:10:36 GMT+0000 (UTC)').toISOString(), + subject: + 'Culpa ex pariatur aliqua reprehenderit do occaecat nulla ipsum culpa adipisicing', + content: + 'Hello Brian,\n\nQuis qui elit eiusmod sint adipisicing in. Adipisicing ipsum reprehenderit id tempor ut. Amet reprehenderit mollit commodo proident nulla velit aliqua ut labore ullamco ea reprehenderit proident deserunt. Consequat deserunt laborum consectetur ea aliquip. Lorem est cillum esse esse consequat sunt enim in deserunt velit. Consectetur velit sunt dolore fugiat eu dolor occaecat occaecat consequat et adipisicing ex ullamco. Officia labore esse esse ipsum ex laborum irure est id veniam aliqua sunt do.\n\nVeniam aute mollit elit duis. Voluptate veniam fugiat occaecat culpa velit fugiat. Irure cillum qui ullamco cillum ut. Culpa id eu nostrud reprehenderit. Aliquip irure cillum tempor non ex. Ex cillum aute minim ut anim sunt dolore cupidatat exercitation ex. In id nostrud sunt ut ea quis aliqua fugiat nostrud fugiat qui dolore adipisicing.\n\nExercitation sint fugiat ullamco id. Consectetur anim duis dolor eiusmod consectetur enim officia dolor elit velit do in laboris id. Reprehenderit fugiat nostrud ea elit do consectetur anim quis enim esse nostrud. Ea ullamco sit anim consequat anim cillum ullamco nostrud commodo fugiat occaecat mollit sint et. Consequat et do do mollit nostrud eiusmod ut magna. Id tempor cillum duis nisi anim velit officia incididunt. Cillum aliqua pariatur laboris deserunt commodo laboris amet.\n\nBest Regards,\nMays Glass', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'bd7ac4df-77fa-45da-8eaf-31303ba794c4', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-04.jpg', + contact: 'Barber Zimmerman ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Thu Aug 09 2018 01:33:05 GMT+0000 (UTC)').toISOString(), + subject: + 'Sit elit aliquip sint ullamco tempor in duis Lorem laboris sunt laborum', + content: + 'Hi Brian,\n\nAliquip nisi ullamco cupidatat dolore Lorem consectetur quis eiusmod pariatur. Deserunt quis et veniam ea dolore nisi dolor irure anim nisi reprehenderit ex. Deserunt aliqua eu sunt duis ad veniam exercitation nisi deserunt eu. Sint ad ipsum enim laboris. Ut minim proident ut amet officia sit culpa occaecat dolor consequat aliquip minim elit.\n\nElit dolore minim duis officia ullamco reprehenderit laborum incididunt enim do excepteur voluptate elit. Magna adipisicing cupidatat nisi excepteur. Ipsum ex velit pariatur ea veniam aliquip duis consectetur voluptate. Eu velit exercitation veniam nulla consectetur et reprehenderit ullamco. Laborum nisi occaecat laborum adipisicing. Ullamco culpa qui ex pariatur incididunt anim dolor consectetur fugiat et.\n\nIn sunt consequat consectetur culpa. Id aliquip culpa commodo sunt esse anim nulla quis nisi aute occaecat. Anim enim dolor anim dolore.\n\nKind Regards,\nBarber Zimmerman', + attachments: [], + starred: true, + important: true, + unread: false, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: 'f5fe9764-70b0-407e-a015-96b04da948a7', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-04.jpg', + contact: 'Ginger Fry ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Fri Jan 12 2018 15:46:37 GMT+0000 (UTC)').toISOString(), + subject: + 'Fugiat voluptate Lorem id sint enim irure in velit nostrud commodo incididunt', + content: + 'Hey Brian,\n\nCillum sunt irure sit reprehenderit ad do mollit Lorem dolor voluptate magna Lorem ad proident. Aliqua qui incididunt nostrud proident. Occaecat voluptate tempor Lorem magna nostrud. Pariatur excepteur id esse proident enim culpa nostrud consectetur tempor exercitation proident ex voluptate tempor. Do id ullamco qui nostrud est occaecat Lorem ipsum ut consectetur culpa velit sunt. Do nisi laborum dolore dolor eu.\n\nAliquip commodo proident tempor est. Aliqua consequat non irure proident consectetur laborum id cupidatat ex enim culpa adipisicing incididunt. Nisi fugiat nisi id reprehenderit fugiat voluptate nostrud esse deserunt. Laboris commodo aliqua qui pariatur. Quis labore commodo aliquip deserunt.\n\nMinim sint tempor consequat consequat commodo velit magna fugiat dolor consectetur est cillum. Minim consequat do excepteur anim consequat. Anim culpa esse adipisicing culpa sit non ut.\n\nKind Regards,\nGinger Fry', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + ], + }, + { + id: '3de07c8c-e687-4138-9967-7fd1feea17ee', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-05.jpg', + contact: 'Gardner Burnett ', + }, + to: 'me ', + date: new Date('Mon Mar 19 2018 13:34:20 GMT+0000 (UTC)').toISOString(), + subject: 'Labore anim ullamco labore nisi eiusmod duis commodo', + content: + 'Hello Brian,\n\nAute et mollit quis proident proident. Tempor qui sint proident nulla sit ut nulla incididunt enim. Ut cillum nulla nostrud irure sit. Excepteur culpa magna sunt velit consectetur proident labore laborum amet cillum ex elit excepteur nisi. Consectetur voluptate incididunt nulla dolore in culpa excepteur.\n\nQuis duis consequat est elit pariatur deserunt incididunt in enim excepteur deserunt. Aliquip ea exercitation eiusmod deserunt. Qui incididunt consectetur tempor sunt labore id minim deserunt pariatur adipisicing do. Officia nisi pariatur in ea eiusmod Lorem ut commodo.\n\nLaborum ipsum consectetur excepteur cupidatat labore culpa Lorem. Enim pariatur eu aliqua nisi. Tempor pariatur dolore fugiat nulla est tempor incididunt id cupidatat.\n\nCheers!\nGardner Burnett', + attachments: [], + starred: false, + important: true, + unread: false, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + ], + }, + { + id: 'd2bbcbbb-aa31-48ee-bbe4-2976b7043e78', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-05.jpg', + contact: 'Lula Lucas ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Mon Nov 26 2018 16:08:25 GMT+0000 (UTC)').toISOString(), + subject: 'Quis anim labore esse proident', + content: + 'Hi Brian,\n\nEt enim eu esse nostrud minim labore dolor dolor proident ipsum nisi. Occaecat commodo ullamco cupidatat non deserunt eu nisi dolor. Tempor laboris ipsum occaecat consequat reprehenderit do reprehenderit proident elit mollit aliquip officia excepteur eu. Esse excepteur mollit nulla elit non sint. Consectetur sint reprehenderit pariatur pariatur laborum ullamco tempor consectetur consequat proident velit nisi fugiat anim. Lorem reprehenderit enim non excepteur non cupidatat duis aliqua do culpa occaecat velit.\n\nAliqua est ad pariatur ex velit fugiat id do et amet in aliqua. Mollit esse quis culpa mollit. Amet labore nulla qui pariatur aliquip occaecat do ipsum nostrud ipsum consectetur consequat cillum.\n\nNostrud duis cupidatat minim reprehenderit sunt duis consequat veniam enim velit dolore sint. Sint ad aliquip excepteur in tempor anim fugiat ipsum ex ullamco. Aute anim reprehenderit nulla anim pariatur elit mollit et non qui labore culpa laborum pariatur. Cupidatat consequat incididunt aute id. Cillum incididunt ipsum duis reprehenderit cillum ullamco.\n\nKind Regards,\nLula Lucas', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: '1a166107-cc66-42dd-96a2-91b1a40f8c62', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-06.jpg', + contact: 'Mcguire Crosby ', + }, + to: 'me ', + date: new Date('Fri Mar 09 2018 04:54:41 GMT+0000 (UTC)').toISOString(), + subject: + 'Eiusmod esse pariatur ipsum elit laborum tempor cillum amet irure labore duis ad amet aliqua', + content: + 'Hey Brian,\n\nNisi laborum deserunt eiusmod veniam eiusmod aliqua dolor. Nostrud dolor deserunt occaecat ipsum sit. Sint nisi magna adipisicing duis id velit pariatur magna est tempor ad.\n\nEt ea pariatur duis voluptate irure. Dolore nisi exercitation nulla officia. Ea eiusmod amet aliqua ut ea velit veniam eu aliqua. Commodo est nisi nulla nulla in eu dolor eiusmod enim do consequat aliqua reprehenderit. Proident ad nulla reprehenderit incididunt incididunt ut. Anim deserunt officia ad dolor ex occaecat veniam mollit ex voluptate occaecat ullamco amet duis.\n\nDuis esse cillum in sit deserunt. Consequat ut tempor consequat qui. Laboris esse ex est ipsum et id est in magna tempor amet irure veniam. Occaecat veniam pariatur Lorem pariatur mollit ullamco occaecat. Labore dolor sit irure sit. Sunt sint dolore ex voluptate nisi sit cillum fugiat aliqua dolore dolore irure sunt commodo. Anim ullamco duis consequat sint in nulla voluptate velit irure.\n\nKind Regards,\nMcguire Crosby', + attachments: [], + starred: false, + important: true, + unread: false, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + ], + }, + { + id: '3fbf66d3-cc2d-4256-a276-ad73da93b7fd', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-07.jpg', + contact: 'Walsh Bender ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Thu Nov 22 2018 20:26:17 GMT+0000 (UTC)').toISOString(), + subject: + 'Mollit voluptate eu excepteur nisi labore dolor aliquip magna incididunt ipsum quis ex irure', + content: + 'Dear Brian,\n\nOccaecat id commodo aliqua irure officia consectetur exercitation. Dolor ex aliqua velit proident excepteur enim aliqua cupidatat mollit nisi cillum anim reprehenderit. Lorem nulla amet id laborum fugiat mollit ullamco. Cillum in ea ex Lorem cupidatat eiusmod proident. Cillum nulla ullamco excepteur velit eu sint mollit aliqua sint et officia dolor. Est sit laboris non aute aliqua qui non cillum officia cupidatat. Deserunt voluptate ullamco nisi id aute laboris.\n\nNisi sint do consequat mollit fugiat in est quis. Reprehenderit laboris consectetur exercitation anim dolore occaecat sint. Dolore Lorem dolore veniam cillum ea officia.\n\nSint irure sunt sint ullamco. Nisi est dolore ex ea nostrud enim ex deserunt duis enim tempor pariatur. Minim laborum commodo officia officia do deserunt. Officia consequat elit deserunt quis tempor eiusmod irure sint Lorem magna ea culpa. Adipisicing labore sint elit ex commodo esse duis eiusmod. Id quis non fugiat amet incididunt cillum tempor voluptate.\n\nKind Regards,\nWalsh Bender', + attachments: [ + { + type: 'image/jpeg', + name: 'mystery-forest.jpg', + size: 15539, + preview: 'mystery-forest_preview.jpg', + downloadUrl: '', + }, + { + type: 'application/pdf', + name: 'montly-invoice.pdf', + size: 243449, + preview: 'pdf', + downloadUrl: '', + }, + ], + starred: false, + important: false, + unread: false, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'b460fff2-8530-4464-8c44-744cd3de3bf8', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-08.jpg', + contact: 'Baker Guthrie ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Sat Jul 21 2018 07:51:09 GMT+0000 (UTC)').toISOString(), + subject: 'In ipsum elit esse laboris qui', + content: + 'Hey Brian,\n\nId magna ut laborum cillum nisi mollit reprehenderit consectetur aliquip laborum. Tempor excepteur enim esse officia ex Lorem quis exercitation irure ut nisi ex ipsum. Dolor consectetur sint incididunt reprehenderit reprehenderit magna in. Ullamco labore aute dolor do ad mollit velit aliqua. Amet consectetur adipisicing dolore tempor ea. Cupidatat magna occaecat aliquip non eiusmod dolore aliquip cillum irure.\n\nDolore laborum sunt fugiat officia voluptate consectetur sint enim qui dolor cupidatat consequat cupidatat elit. Commodo Lorem ut ut nostrud duis. Id nisi adipisicing incididunt dolor voluptate sit ad cupidatat voluptate. Labore consequat exercitation sint occaecat eu cupidatat incididunt irure ullamco et aute anim cupidatat. Quis aliqua ut eu sunt id.\n\nDeserunt veniam dolor exercitation labore do enim nisi. Veniam ipsum duis consectetur ex voluptate incididunt dolore laborum ad consequat. Fugiat Lorem pariatur duis nostrud duis aliqua ex do. Nisi sunt eiusmod minim exercitation exercitation aliquip non labore nulla proident nisi ipsum. Sunt elit esse officia cupidatat cupidatat. Ad fugiat est ex fugiat.\n\nKind Regards,\nBaker Guthrie', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: '16c18231-82ea-403d-895a-2a4bc27b61ca', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-06.jpg', + contact: 'Olivia Ratliff ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Mon Feb 19 2018 13:18:23 GMT+0000 (UTC)').toISOString(), + subject: 'Mollit ex magna non Lorem id', + content: + 'Hi Brian,\n\nNostrud dolore tempor amet nostrud ex aliqua duis. Aliqua enim reprehenderit magna et occaecat. Officia veniam sint fugiat dolor esse ullamco ad non nulla deserunt ullamco commodo occaecat consequat.\n\nSunt nisi reprehenderit nisi incididunt sunt do veniam sint proident duis labore nostrud. Nostrud ad voluptate nisi dolor labore Lorem ex minim nostrud ipsum do. Eiusmod officia sunt tempor duis sunt. In anim in excepteur velit id commodo non nisi aute nisi labore. Ea esse velit eiusmod nulla nisi id eiusmod ex mollit voluptate ad ut ea. Reprehenderit magna quis reprehenderit velit ea veniam magna sint ipsum nulla est officia.\n\nEst ex nostrud quis amet mollit aliquip. Et mollit amet id anim sint amet. Officia do nostrud laboris ullamco cupidatat labore quis exercitation proident aliqua. Eiusmod dolore consectetur nisi deserunt culpa occaecat eu culpa do. Voluptate officia dolore non deserunt. Dolore culpa fugiat eiusmod aliquip. Eu laborum irure fugiat duis esse mollit laborum sit et excepteur irure ipsum.\n\nKind Regards,\nOlivia Ratliff', + attachments: [], + starred: false, + important: false, + unread: false, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: 'dfa4d802-b833-49c1-afdc-02116d73e35a', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-09.jpg', + contact: 'Schneider Kirby ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Mon Nov 12 2018 09:55:21 GMT+0000 (UTC)').toISOString(), + subject: + 'Occaecat eiusmod cillum nostrud dolore et proident est esse magna mollit enim', + content: + 'Hello Brian,\n\nNon in est voluptate veniam do minim. Ullamco mollit occaecat officia irure tempor deserunt tempor magna voluptate. Id commodo voluptate commodo qui aliqua excepteur aute in eiusmod occaecat quis velit veniam id. Ipsum in sunt aliqua ad eu. Consequat enim commodo ex excepteur pariatur ut.\n\nSunt officia nisi deserunt culpa mollit et duis duis id in nisi. Eiusmod mollit ea qui laborum veniam adipisicing ullamco adipisicing dolor quis enim laboris dolor. Culpa exercitation velit mollit labore incididunt. Veniam deserunt ex ea quis ullamco. Et ex laborum officia non et.\n\nAmet exercitation irure mollit nostrud. Officia dolore nostrud ad do ipsum et laborum consequat ullamco sint consequat amet. Nisi adipisicing ullamco aliqua Lorem quis sint magna veniam. Consequat mollit dolore aliqua ad occaecat. Voluptate aute ea quis sit enim aliquip. Eu dolore nulla minim eu esse minim non cupidatat voluptate laborum do non et. Ut pariatur cillum non labore nostrud amet consectetur consectetur eu cillum.\n\nKind Regards,\nSchneider Kirby', + attachments: [], + starred: false, + important: true, + unread: false, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: '84c4ef35-da0d-4d1f-a966-f7f413545b04', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-10.jpg', + contact: 'Griffith Keith ', + }, + to: 'me ', + date: new Date('Tue Dec 11 2018 06:27:01 GMT+0000 (UTC)').toISOString(), + subject: + 'Ex occaecat qui veniam qui consectetur aliquip ad reprehenderit laborum proident', + content: + 'Hi Brian,\n\nExercitation labore cupidatat incididunt velit laboris ipsum anim commodo in do fugiat ea. Incididunt labore quis pariatur laboris sint tempor. Lorem commodo do do ipsum aliqua. Consectetur occaecat ad incididunt consectetur do excepteur ea laborum. Laboris enim proident excepteur ea exercitation deserunt. Sit dolor fugiat velit adipisicing proident ut cillum nisi adipisicing.\n\nConsectetur quis id non mollit minim. Consectetur ut cupidatat enim occaecat sint ex dolor sunt pariatur mollit exercitation. Magna Lorem aliqua nostrud aute ut enim laboris dolore eiusmod est occaecat dolor fugiat occaecat.\n\nCommodo exercitation sit laboris aute deserunt nostrud occaecat do dolore cupidatat consectetur commodo. Cupidatat laborum excepteur voluptate commodo irure. Excepteur enim labore dolore adipisicing ut aute irure. Labore sunt dolor sint magna dolor consequat. Nulla deserunt mollit cillum adipisicing enim est voluptate minim pariatur aliqua elit sint do eiusmod.\n\nCheers!\nGriffith Keith', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: '0c78627f-5cbe-4d21-8491-455e98bf6f69', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-07.jpg', + contact: 'Beverly Pugh ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Sun Oct 21 2018 14:36:41 GMT+0000 (UTC)').toISOString(), + subject: + 'Mollit irure adipisicing in consectetur aliqua labore pariatur minim', + content: + 'Hello Brian,\n\nAute in dolore irure non exercitation. Laborum enim qui nulla irure enim id labore excepteur eiusmod consectetur consequat voluptate exercitation. In laborum reprehenderit incididunt occaecat laborum sit velit.\n\nNulla aliquip labore mollit qui dolore consequat. Enim sunt est nisi reprehenderit tempor amet culpa ex. Eiusmod esse ullamco veniam sunt anim nisi dolore cupidatat id aute.\n\nLorem commodo Lorem qui aliquip eiusmod nisi cupidatat occaecat. Aliqua eiusmod nisi laboris elit commodo qui. Voluptate veniam aliquip ad et pariatur voluptate. Officia non ea laboris dolor excepteur ullamco Lorem dolor esse aute excepteur cillum magna. Cillum et anim adipisicing occaecat consectetur. Non aute culpa pariatur aute fugiat in sint exercitation cillum laborum est non.\n\nBest Regards,\nBeverly Pugh', + attachments: [], + starred: true, + important: true, + unread: false, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: '3d382fb3-b5f5-43e3-b0bc-f2a6f29a5ee6', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-08.jpg', + contact: 'Ila Mclaughlin ', + }, + to: 'me ', + date: new Date('Wed Aug 01 2018 13:55:15 GMT+0000 (UTC)').toISOString(), + subject: 'Enim proident sit dolor officia sit magna ea tempor', + content: + 'Hey Brian,\n\nExcepteur ut minim qui minim mollit. Tempor cupidatat Lorem sint aliquip excepteur sunt est velit nostrud ea. Velit esse ea irure veniam. Dolore tempor nisi occaecat tempor laborum et nulla enim do sint.\n\nId officia ea ad ad occaecat occaecat consequat veniam ad magna cillum incididunt quis tempor. Veniam reprehenderit qui excepteur sint sunt proident ipsum. Exercitation nostrud eiusmod incididunt consequat enim velit sit qui veniam consectetur. Est exercitation tempor ea sunt enim nulla ea proident officia pariatur. Dolor aute exercitation cillum dolore eu sunt veniam id dolore voluptate ut nostrud deserunt. Eiusmod labore anim veniam labore anim nostrud ad nulla labore consequat enim nisi.\n\nLaboris fugiat quis aute duis reprehenderit ut pariatur non incididunt excepteur ea ut. Nisi deserunt tempor Lorem commodo ad pariatur aliquip duis tempor officia irure. Eu fugiat dolore exercitation veniam cillum.\n\nBest Regards,\nIla Mclaughlin', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: '7fd27d57-ccca-432d-af26-c3b609448fb7', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-09.jpg', + contact: 'Jenna Manning ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Sat Dec 08 2018 20:09:08 GMT+0000 (UTC)').toISOString(), + subject: + 'Quis deserunt excepteur eiusmod reprehenderit enim exercitation voluptate anim', + content: + 'Hi Brian,\n\nExcepteur qui anim sint elit. Ad et nostrud non et reprehenderit duis pariatur irure deserunt commodo sit reprehenderit tempor reprehenderit. Aliquip duis mollit duis consequat aute non id do irure. Aute esse sunt labore et voluptate sunt adipisicing tempor. Occaecat tempor exercitation sit duis fugiat ea irure laborum. Consequat quis officia magna fugiat ex.\n\nAliqua non in elit ipsum enim duis dolore laboris in esse duis sunt ea anim. Et laborum sunt in anim ut consequat laborum irure. Deserunt ex veniam laborum tempor cupidatat amet mollit non labore.\n\nDuis veniam occaecat eiusmod velit Lorem ad. Commodo cillum minim id pariatur cupidatat tempor reprehenderit commodo. Dolor anim pariatur nulla qui ut magna nisi reprehenderit sit cupidatat est do. Esse enim Lorem laboris amet reprehenderit pariatur et nostrud minim pariatur. Et dolore qui quis ex consequat consectetur enim veniam veniam veniam magna.\n\nKind Regards,\nJenna Manning', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: '18ba20d3-d7bc-4fc7-85dd-2db4db3196fe', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-10.jpg', + contact: 'Deann Hansen ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Thu Jan 10 2019 12:13:47 GMT+0000 (UTC)').toISOString(), + subject: + 'Duis minim quis in labore voluptate laboris do consequat eu anim sit deserunt incididunt', + content: + 'Dear Brian,\n\nPariatur ipsum ipsum aute dolore ipsum ea mollit labore duis tempor aliquip et reprehenderit. Pariatur amet esse minim ad esse aute excepteur in. Quis eu laborum dolore ullamco ipsum incididunt fugiat non laborum est. Duis anim incididunt Lorem Lorem nulla fugiat qui reprehenderit pariatur. Ut est duis in quis excepteur officia. Ullamco excepteur dolor cillum non aliqua non aliqua sit cillum ipsum laboris proident sint. Nulla in dolore deserunt proident commodo enim occaecat cupidatat reprehenderit incididunt dolor laborum do aliqua.\n\nLaboris velit tempor non adipisicing pariatur culpa culpa amet sint deserunt enim. Est aute sit officia quis ex do id ex deserunt ea. Velit in dolor quis exercitation proident mollit sit ad veniam nisi. Cupidatat esse exercitation commodo velit. Commodo veniam occaecat elit deserunt. Sint adipisicing culpa aute occaecat nisi id consequat nisi.\n\nAdipisicing veniam deserunt ipsum mollit. Adipisicing laborum exercitation sint nulla veniam ex ut dolor. Fugiat do ad proident tempor. Id ipsum ex elit id quis laboris ut irure nulla minim reprehenderit minim dolor sunt. Anim nisi cupidatat sint minim fugiat sit sit cupidatat laborum excepteur duis exercitation anim commodo.\n\nBest Regards,\nDeann Hansen', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '476cb471-b3c1-4235-b5ef-3066b028483d', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-11.jpg', + contact: 'Tisha Moore ', + }, + to: 'me ', + date: new Date('Wed Mar 07 2018 05:58:09 GMT+0000 (UTC)').toISOString(), + subject: 'Qui irure ea qui labore fugiat ad voluptate esse', + content: + 'Hey Brian,\n\nAnim ex voluptate in amet duis labore. Esse id ut exercitation labore velit irure amet laborum. Aliqua ex et est reprehenderit amet quis anim ut qui dolore et sit ea amet.\n\nEnim incididunt sunt deserunt voluptate tempor ut minim laborum pariatur Lorem esse ex cillum. Irure proident amet labore aliqua elit excepteur. Pariatur fugiat sit duis ut in elit.\n\nLorem proident duis occaecat eu proident reprehenderit incididunt amet magna officia et ut. Nisi do labore sit sit eiusmod nostrud consectetur proident enim. Ipsum culpa proident consequat nostrud.\n\nCheers!\nTisha Moore', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: 'a8aea501-17e9-4e40-b3a9-04f33b13cb8a', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-12.jpg', + contact: 'Janette Elliott ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Mon May 07 2018 20:07:15 GMT+0000 (UTC)').toISOString(), + subject: + 'Veniam amet voluptate Lorem qui ut id culpa mollit reprehenderit est', + content: + 'Hi Brian,\n\nAute veniam laborum ad veniam adipisicing pariatur pariatur eiusmod nulla. Labore ullamco cillum cillum eiusmod id ex occaecat cupidatat ea consequat consequat Lorem amet consectetur. Ullamco irure enim officia ut nostrud. Nisi enim aliqua excepteur voluptate et amet commodo aliqua nulla. Adipisicing in eiusmod in commodo veniam id ea ad dolor sunt pariatur ea non consequat.\n\nDeserunt mollit dolor quis irure ullamco. Consectetur Lorem ipsum ex proident aute aute occaecat adipisicing mollit. Lorem mollit consectetur ad dolor enim mollit non. Laboris pariatur laborum minim magna culpa fugiat ad. Duis ea Lorem cillum adipisicing Lorem.\n\nEnim laboris laboris magna culpa. Consectetur anim occaecat commodo labore nostrud id pariatur. Dolore aliquip irure laborum pariatur mollit sit aute minim in nisi.\n\nCheers!\nJanette Elliott', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '1ee2ea29-9a1f-4c27-b4d2-5e465703b6a0', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: 'cb55f824-40ed-4696-afaa-f3f8d3fb8614', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-13.jpg', + contact: 'Bettie Wyatt ', + }, + to: 'me ', + date: new Date('Mon Dec 03 2018 17:07:32 GMT+0000 (UTC)').toISOString(), + subject: + 'Est aliquip nisi pariatur cupidatat veniam qui cillum eu sit ullamco voluptate minim', + content: + 'Dear Brian,\n\nEsse laboris commodo ullamco dolor ipsum. Aute cillum velit in aliquip ad adipisicing pariatur ex tempor cillum eu cupidatat laborum. Consectetur aute cupidatat incididunt quis minim elit cupidatat.\n\nEiusmod ea eiusmod nostrud qui amet pariatur laboris non. Proident dolor et pariatur id duis minim enim. Aute ut dolore cupidatat velit sunt.\n\nVeniam magna laborum tempor nostrud aliqua tempor. Pariatur in do id do exercitation non dolor. In elit velit ad Lorem veniam minim Lorem voluptate sint ullamco consectetur aute est. Enim sunt reprehenderit id nisi id. Eu sint incididunt nulla consequat veniam reprehenderit.\n\nBest Regards,\nBettie Wyatt', + attachments: [], + starred: true, + important: false, + unread: false, + folder: 'fbdc8e79-a0c4-4a27-bc98-9c81ee7a86e5', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + ], + }, + { + id: '92dddecc-4758-4c48-8ef4-a59de4ab0705', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-11.jpg', + contact: 'Hardy Dale ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Fri Nov 16 2018 21:53:34 GMT+0000 (UTC)').toISOString(), + subject: 'Aute commodo nostrud nisi quis sunt ex', + content: + 'Dear Brian,\n\nDeserunt laborum elit in dolor. Enim duis occaecat minim dolor ex. Consequat et anim mollit nisi ex exercitation culpa non esse velit veniam ad. Sit excepteur nulla laboris reprehenderit. Consequat labore cupidatat Lorem proident proident laborum adipisicing aliqua commodo voluptate esse officia.\n\nAliqua adipisicing sint Lorem id in ad qui. Reprehenderit ullamco labore consectetur commodo Lorem eiusmod culpa. Lorem voluptate ipsum anim ipsum do ullamco eiusmod ad est proident officia. Ut anim deserunt minim laborum minim ea et minim non ad ut. Non ipsum et enim pariatur.\n\nNulla voluptate consectetur id aute ad officia incididunt velit voluptate aliqua deserunt ex. Dolore commodo labore aliqua aliquip magna ipsum laboris cupidatat velit. Et elit labore eu id laborum. Ipsum est pariatur irure aute magna. Fugiat sit voluptate eiusmod consequat.\n\nKind Regards,\nHardy Dale', + attachments: [], + starred: false, + important: true, + unread: false, + folder: 'fbdc8e79-a0c4-4a27-bc98-9c81ee7a86e5', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '3f3f6154-a8ff-40d6-8b57-4c0f73d2cd8b', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-14.jpg', + contact: 'Eileen Bush ', + }, + to: 'me ', + date: new Date('Sat Feb 24 2018 12:22:13 GMT+0000 (UTC)').toISOString(), + subject: 'Lorem deserunt dolor sunt sit sit mollit', + content: + 'Hey Brian,\n\nEu Lorem laborum qui elit id consequat ipsum ex. Minim aute proident aliquip non esse quis voluptate nisi enim. Velit Lorem ea exercitation adipisicing amet deserunt pariatur Lorem amet anim dolore ipsum. Tempor magna voluptate laboris fugiat. Elit ea fugiat cillum Lorem fugiat ipsum officia tempor sit excepteur pariatur minim sint proident.\n\nDeserunt adipisicing dolor do fugiat commodo dolor sit ut culpa ea officia Lorem officia. Nulla elit tempor nostrud nulla. Amet tempor deserunt labore irure est ut officia ullamco velit. Officia tempor anim ex dolor consequat dolore anim do velit qui laboris nisi ipsum. Aute ipsum aliqua ut ullamco laborum pariatur minim mollit consectetur ipsum.\n\nNisi commodo labore nostrud veniam ut aute dolore veniam in. Consectetur commodo proident incididunt aliqua reprehenderit ex nostrud est magna elit reprehenderit. Proident veniam sint occaecat ullamco labore aliquip eiusmod duis sint. Ea ex id eiusmod eu elit ullamco aliqua. Dolore consectetur magna eu voluptate ea aliquip eu et veniam ullamco deserunt magna.\n\nKind Regards,\nEileen Bush', + attachments: [], + starred: true, + important: false, + unread: false, + folder: 'fbdc8e79-a0c4-4a27-bc98-9c81ee7a86e5', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '2c80bcbe-c9cd-4eec-83fa-b9994713a784', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-15.jpg', + contact: 'Melody Mcintosh ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Fri Jul 27 2018 07:20:48 GMT+0000 (UTC)').toISOString(), + subject: + 'Reprehenderit consequat aliquip duis incididunt excepteur aliquip excepteur velit labore laboris', + content: + 'Hey Brian,\n\nEnim ea ad veniam qui magna aliqua ipsum id anim adipisicing voluptate id velit. Elit pariatur magna quis ea adipisicing deserunt officia consectetur in magna culpa sint. Culpa cupidatat anim amet ea elit adipisicing sunt. Incididunt nulla est non cupidatat sit excepteur consectetur culpa labore in sit. Aliqua cupidatat aute qui esse labore aliquip sit exercitation aliqua est magna sint nisi quis.\n\nTempor laboris ullamco culpa dolor ipsum ad aliqua consequat anim reprehenderit aliqua. Proident elit mollit commodo ut Lorem incididunt cillum Lorem eu adipisicing fugiat. Sint velit eiusmod magna occaecat tempor nulla ex ea.\n\nDolore est proident ea deserunt dolore non elit Lorem ipsum sint. Quis ut pariatur cupidatat deserunt. Aliqua sunt labore dolore officia ullamco exercitation id excepteur est et eu consequat esse consectetur. Veniam eu culpa reprehenderit id fugiat aliqua anim id esse commodo velit labore adipisicing. In anim Lorem reprehenderit occaecat do laboris veniam cillum incididunt aute dolor id duis. Est pariatur Lorem consectetur proident est culpa ullamco ea elit incididunt veniam enim elit ipsum.\n\nCheers!\nMelody Mcintosh', + attachments: [], + starred: false, + important: true, + unread: false, + folder: 'fbdc8e79-a0c4-4a27-bc98-9c81ee7a86e5', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '2a44e5b7-e01c-43db-b586-540390f46f95', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-12.jpg', + contact: 'Dale Talley ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Tue Jan 02 2018 07:20:01 GMT+0000 (UTC)').toISOString(), + subject: + 'Aute occaecat est amet adipisicing aute voluptate incididunt adipisicing pariatur esse anim ipsum labore', + content: + 'Hello Brian,\n\nNostrud deserunt do anim pariatur adipisicing cillum enim. Reprehenderit ex ut ullamco deserunt non voluptate laboris eu deserunt sint incididunt anim. Minim non amet quis officia ullamco non do id. Aute deserunt enim laborum elit magna veniam do. Id Lorem mollit eu id ex eiusmod fugiat ad sint quis sunt ipsum eu exercitation. Eiusmod occaecat sit esse cupidatat occaecat quis commodo magna qui. Non consectetur non ad cillum minim eiusmod magna ad nulla.\n\nAd esse anim nostrud do. Officia eiusmod eu reprehenderit do ipsum velit enim. In ullamco ex commodo laboris ut adipisicing elit sit occaecat fugiat officia. Commodo duis aliqua minim nisi.\n\nDuis proident mollit ea do Lorem excepteur. Commodo ex duis minim aute Lorem. Est in quis aliquip in qui minim excepteur aliqua dolor adipisicing. Laborum do tempor voluptate anim elit nisi minim sunt cupidatat.\n\nKind Regards,\nDale Talley', + attachments: [], + starred: true, + important: true, + unread: false, + folder: 'fbdc8e79-a0c4-4a27-bc98-9c81ee7a86e5', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'be1e969d-d52f-4824-83e5-c184b042b601', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-13.jpg', + contact: 'Britt Massey ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Tue Oct 09 2018 00:12:17 GMT+0000 (UTC)').toISOString(), + subject: 'Cillum tempor cillum ex esse eu Lorem', + content: + 'Hey Brian,\n\nVelit laboris excepteur nulla aliquip excepteur. Culpa incididunt magna minim non aute incididunt officia cillum quis labore pariatur tempor amet. Eiusmod nulla consectetur mollit anim anim aute quis reprehenderit sint eu. Voluptate deserunt voluptate est adipisicing adipisicing qui ullamco ex officia eiusmod. Velit nostrud Lorem enim aute sint anim cupidatat excepteur ea aliqua et. Minim et do irure ut commodo. Cillum quis nulla commodo ipsum tempor.\n\nCulpa duis laboris anim nostrud ipsum laboris exercitation exercitation ut. Dolore duis laborum do sunt non. Eiusmod irure consectetur sint do. Officia adipisicing est id reprehenderit labore.\n\nConsequat eiusmod est labore commodo Lorem ullamco cupidatat id Lorem eiusmod amet do enim qui. Consequat ad ipsum elit non esse labore. Cupidatat eu reprehenderit ad est cillum esse. Nulla eiusmod eiusmod mollit culpa quis sint sit elit aliquip. Incididunt quis consequat amet ipsum amet. Ut officia eu consectetur incididunt adipisicing tempor aute. Reprehenderit labore consequat excepteur esse adipisicing.\n\nBest Regards,\nBritt Massey', + attachments: [], + starred: true, + important: false, + unread: false, + folder: 'fbdc8e79-a0c4-4a27-bc98-9c81ee7a86e5', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: '8c7c9bff-6ca6-47ba-9242-cd9b1715eac7', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-16.jpg', + contact: 'Madelyn Haynes ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Sat Mar 03 2018 18:08:05 GMT+0000 (UTC)').toISOString(), + subject: 'Irure enim minim dolore et', + content: + 'Dear Brian,\n\nSit incididunt Lorem ad cupidatat eiusmod dolore velit. Aliquip dolore quis qui irure consequat velit. Dolor incididunt est magna sit.\n\nConsequat officia nulla culpa officia eiusmod sint. Proident elit irure pariatur eiusmod enim mollit mollit qui. Amet ullamco aliquip sunt fugiat proident est nulla ex ex est ipsum officia. Exercitation qui veniam duis ut veniam aliqua excepteur.\n\nDeserunt ipsum eiusmod labore do minim enim anim. Aliquip mollit magna do eu. Qui duis consectetur exercitation veniam qui. Ea duis nisi aute aute occaecat deserunt magna.\n\nBest Regards,\nMadelyn Haynes', + attachments: [], + starred: false, + important: false, + unread: false, + folder: 'fbdc8e79-a0c4-4a27-bc98-9c81ee7a86e5', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: 'afd52898-82e9-4fd4-8d6a-2391ec817e2a', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-14.jpg', + contact: 'Rowland Sweet ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Fri Jun 22 2018 14:39:18 GMT+0000 (UTC)').toISOString(), + subject: + 'Sunt et proident ullamco qui id irure occaecat anim aute elit amet', + content: + 'Hey Brian,\n\nLaborum sunt labore esse occaecat duis magna aliquip dolor. Cupidatat irure aute enim minim nisi reprehenderit voluptate occaecat exercitation anim est quis. Magna esse ipsum tempor consectetur non excepteur nostrud. Est consectetur tempor deserunt magna anim culpa sint id elit. Et ullamco non non aute id cupidatat proident aute dolor exercitation excepteur.\n\nEx officia quis irure enim eu in qui sit non. Aliqua fugiat ut sint deserunt veniam quis qui cillum dolor commodo ea exercitation. Deserunt id velit deserunt Lorem elit elit non. Voluptate fugiat est adipisicing non eiusmod voluptate. Reprehenderit tempor id quis cillum nulla sint sit ipsum veniam aliqua.\n\nPariatur dolore ipsum proident irure elit dolore pariatur occaecat qui adipisicing occaecat et aliquip. Ex quis mollit ad Lorem laboris dolor incididunt. Ex consectetur nulla nulla labore dolor. Cillum aliqua duis nulla quis sit laborum magna et exercitation anim deserunt incididunt elit.\n\nBest Regards,\nRowland Sweet', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [], + }, + { + id: 'e43d83f0-51ea-4da9-b18f-0de380b5156a', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-17.jpg', + contact: 'Fern Shaw ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Wed Feb 21 2018 06:23:12 GMT+0000 (UTC)').toISOString(), + subject: + 'Nisi esse incididunt nisi aliqua aliqua laborum occaecat quis duis minim', + content: + 'Dear Brian,\n\nCommodo magna officia qui labore ullamco nostrud. Labore nostrud consequat quis laborum esse velit dolore eu. Esse officia duis nisi dolore culpa elit velit excepteur irure in excepteur officia. Ad anim magna excepteur deserunt aute dolore nulla dolore aute tempor laboris adipisicing. Sit culpa culpa occaecat nostrud magna labore sunt pariatur exercitation qui. Esse ea mollit non sint cupidatat aliqua mollit qui ex tempor exercitation labore minim. Veniam aliquip exercitation ad ex.\n\nOfficia nulla exercitation ullamco proident eu amet occaecat Lorem est est non nulla tempor. Exercitation occaecat ipsum sunt tempor et enim nisi reprehenderit Lorem. Culpa elit ea aliqua est. Et exercitation aliquip aliqua et magna et magna exercitation aliqua exercitation pariatur occaecat.\n\nUllamco ea esse consequat nisi et officia veniam. Duis esse ullamco cupidatat do eiusmod aliquip velit irure sit ad irure officia. Irure veniam sunt aliqua elit ex Lorem qui ullamco qui enim dolore aliquip consectetur quis.\n\nBest Regards,\nFern Shaw', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [], + }, + { + id: '4e1d4820-e907-405a-990a-4a5772f482ad', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-18.jpg', + contact: 'Lorraine Ballard ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Sun Jun 24 2018 13:46:02 GMT+0000 (UTC)').toISOString(), + subject: 'Velit nisi ut laboris id et do aliquip', + content: + 'Hey Brian,\n\nOccaecat fugiat minim dolor excepteur. Ullamco quis cillum consectetur mollit id. Duis eiusmod occaecat consectetur duis laborum aliqua occaecat cillum laboris proident cillum. Amet in elit dolore quis amet cupidatat id laboris Lorem do velit occaecat nostrud ad. Eu est pariatur nulla est proident Lorem quis velit fugiat nisi quis. Dolor mollit occaecat duis veniam amet Lorem tempor eiusmod. Consequat ullamco deserunt nulla occaecat officia est qui pariatur velit.\n\nConsequat culpa do ullamco est et veniam incididunt. Exercitation laborum eu proident ex nostrud minim eu proident ad Lorem aute est non ea. Ut quis mollit anim sunt et labore deserunt tempor magna exercitation irure dolor incididunt elit. Mollit amet ad Lorem eiusmod cupidatat adipisicing nostrud. Non dolor ad occaecat officia in dolor. Irure sint quis aliqua deserunt dolore qui sunt cupidatat quis aliqua eu Lorem. Elit sint incididunt do ea amet laborum.\n\nReprehenderit reprehenderit veniam sit exercitation. Tempor ea adipisicing consequat nostrud sint irure nostrud. Dolor est officia adipisicing dolor et pariatur proident quis sint pariatur exercitation commodo. Esse id quis qui aliquip quis.\n\nKind Regards,\nLorraine Ballard', + attachments: [], + starred: false, + important: true, + unread: false, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'f0f2d069-50a0-484f-a4a2-3a272fcb433b', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-15.jpg', + contact: 'Jennings Franklin ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Thu Apr 26 2018 06:34:54 GMT+0000 (UTC)').toISOString(), + subject: + 'Enim esse aliqua elit incididunt aliqua mollit amet quis occaecat veniam occaecat proident', + content: + 'Hey Brian,\n\nConsectetur laboris voluptate cillum tempor aliqua ullamco sunt do est ea non mollit cupidatat cillum. Aute aliqua eiusmod proident officia enim duis est elit. Fugiat occaecat culpa aliqua in velit elit duis reprehenderit enim dolor eiusmod sit incididunt. Commodo velit ipsum elit amet qui laboris culpa aliquip ad dolor sit. Commodo laboris laborum eiusmod qui in esse excepteur laboris in ad proident deserunt adipisicing. Esse aliqua sit ad veniam sint et culpa minim labore.\n\nUt officia sint nulla enim consectetur eiusmod. Minim nulla cillum aliquip elit ad pariatur ea nulla. Anim occaecat nulla irure ea nisi dolor cupidatat et consectetur id tempor aliqua magna esse. Laborum culpa incididunt cillum excepteur. Nulla laborum dolore qui sit laboris et mollit labore ea magna occaecat. Dolore cillum fugiat eiusmod Lorem ea veniam.\n\nEt cillum enim nulla anim ipsum labore quis amet exercitation occaecat. Et sint eiusmod sint minim do. In esse id ea ut excepteur amet minim Lorem id consectetur cupidatat est. Dolor pariatur commodo eu est. Consequat aliquip est qui mollit excepteur ex do adipisicing.\n\nKind Regards,\nJennings Franklin', + attachments: [], + starred: false, + important: false, + unread: true, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [], + }, + { + id: '7c93dbde-8b56-43a3-ade1-b132906679c4', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-19.jpg', + contact: 'Colette Cole ', + }, + to: 'me ', + date: new Date('Fri Sep 21 2018 08:37:21 GMT+0000 (UTC)').toISOString(), + subject: 'Sit non consequat et fugiat id laboris', + content: + 'Hello Brian,\n\nIpsum non nisi ut do occaecat pariatur et duis eiusmod sint. Consequat do eu adipisicing fugiat incididunt dolor proident cupidatat reprehenderit dolor proident. Duis non eiusmod sit enim esse fugiat sit amet tempor ea ad adipisicing quis aliquip. Labore in cillum ipsum officia est irure incididunt fugiat id in eu Lorem. Occaecat eu veniam voluptate fugiat fugiat laborum veniam voluptate. Do exercitation mollit fugiat duis deserunt. Mollit aute non quis ex officia non amet amet dolor ullamco sint sunt.\n\nDolore incididunt ad ad anim minim. Sunt reprehenderit duis occaecat labore dolore irure elit. Excepteur laboris et proident nulla magna duis et. Eiusmod veniam ea culpa cillum incididunt ad officia. Labore in non voluptate ullamco velit ex aliqua aliqua amet nisi incididunt exercitation. Labore qui est adipisicing labore anim officia ullamco aliquip anim commodo ipsum mollit.\n\nQuis cillum non consequat ea esse laboris duis mollit et id consectetur nisi eu pariatur. In fugiat culpa aliqua eu culpa ea nisi incididunt. Pariatur excepteur laborum nulla ea ex reprehenderit ea deserunt.\n\nKind Regards,\nColette Cole', + attachments: [], + starred: false, + important: false, + unread: false, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: '7335d11d-04b1-4250-817a-6fdf3e099239', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-20.jpg', + contact: 'Kim Carlson ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Wed Nov 28 2018 07:57:15 GMT+0000 (UTC)').toISOString(), + subject: 'Ullamco ad consectetur ut esse', + content: + 'Dear Brian,\n\nReprehenderit aliqua nulla tempor nostrud. Excepteur nostrud nostrud velit magna pariatur nisi anim excepteur consectetur proident irure cillum dolore et. Nostrud esse deserunt veniam exercitation et dolore fugiat tempor. Sit duis adipisicing sint aliqua. Ipsum anim sit velit ipsum ipsum occaecat sit ea Lorem ex pariatur. Anim laboris exercitation tempor officia in enim.\n\nEsse sunt aliquip nulla ipsum laborum irure minim Lorem eiusmod ut et occaecat. Ipsum deserunt nulla duis nisi dolore. Aliquip ea exercitation magna esse laboris consectetur culpa labore reprehenderit ipsum dolor veniam sunt. In consequat cillum irure elit sunt ea Lorem mollit sint tempor reprehenderit laborum velit consequat. Proident aute deserunt Lorem tempor labore incididunt eu adipisicing proident nulla anim exercitation. Laborum adipisicing id id aliquip. Velit proident consectetur consequat nisi dolor aliquip mollit ad officia proident ea nostrud ea.\n\nProident sunt velit adipisicing voluptate amet est dolor reprehenderit deserunt laboris ullamco velit. Veniam nulla esse cupidatat magna ut consequat in et ipsum mollit ad non Lorem. Sit duis qui eiusmod exercitation commodo voluptate laborum. Exercitation consequat mollit nisi mollit deserunt sunt. Fugiat incididunt magna ad nostrud non amet incididunt veniam et veniam nulla ipsum fugiat.\n\nBest Regards,\nKim Carlson', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'e9dd17ec-4fc3-424e-89e5-c58d9d235764', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-01.jpg', + contact: 'Rena Park ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Sat Oct 13 2018 12:57:58 GMT+0000 (UTC)').toISOString(), + subject: 'Nulla qui anim ullamco officia elit', + content: + 'Hi Brian,\n\nDuis qui qui ad aliqua ad incididunt non exercitation do qui aliqua quis. Eiusmod amet irure minim fugiat ex et sint. Occaecat laboris minim eu exercitation nostrud commodo qui deserunt. Sunt voluptate eiusmod minim commodo. Est excepteur est irure laborum mollit qui excepteur culpa consequat.\n\nEx consectetur minim elit excepteur ad ad ea anim in elit. Velit dolor qui incididunt pariatur aliquip reprehenderit laboris fugiat. Veniam laboris elit ipsum eiusmod dolore labore excepteur enim pariatur.\n\nDolore sit aliquip velit voluptate ipsum in dolor laboris nisi occaecat minim. Ad sunt reprehenderit sit proident occaecat amet aute esse enim. Elit aute adipisicing mollit reprehenderit tempor ex elit proident. Aute exercitation commodo esse exercitation.\n\nBest Regards,\nRena Park', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [], + }, + { + id: '5fb8f4b5-fad4-4a82-8519-a732e68a48be', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-16.jpg', + contact: 'Haney Gibson ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Tue Oct 23 2018 00:16:47 GMT+0000 (UTC)').toISOString(), + subject: 'Veniam consequat ipsum occaecat ipsum', + content: + 'Hey Brian,\n\nMinim adipisicing sint do irure. Reprehenderit reprehenderit dolor tempor anim exercitation qui aliqua. Laboris consectetur labore quis deserunt culpa amet eiusmod minim cillum. Id consequat dolore aliqua sit sunt cillum incididunt aliqua sint dolore quis eiusmod elit aliquip. Nisi aute mollit ipsum dolore eiusmod incididunt. Tempor officia culpa consequat laboris culpa. Lorem pariatur irure minim dolore elit enim elit esse nostrud.\n\nAmet ipsum officia sunt aliqua laborum mollit Lorem et. Est consectetur eu nostrud minim minim irure occaecat sint ea. Ut magna aliqua labore exercitation. Minim sint excepteur cupidatat esse quis do duis ad. Est magna in velit ut cupidatat mollit non do id ea ut non.\n\nDolor dolor elit fugiat aliqua aliquip in officia. Elit et cupidatat commodo laboris nostrud fugiat non cupidatat velit pariatur. Labore anim velit proident nisi ullamco. Reprehenderit adipisicing nisi laboris ut.\n\nBest Regards,\nHaney Gibson', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [], + }, + { + id: 'e766ddd9-e9ea-499c-bb10-72fa57a03059', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-02.jpg', + contact: 'Freda Frank ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Wed Nov 21 2018 01:26:11 GMT+0000 (UTC)').toISOString(), + subject: 'Magna sint dolor sit laborum enim', + content: + 'Hello Brian,\n\nExcepteur occaecat dolor ex Lorem sunt velit enim eiusmod et fugiat mollit fugiat labore proident. Lorem mollit exercitation labore dolor ullamco proident non irure aliquip. Cillum laboris sit incididunt nulla dolor. Irure mollit mollit irure incididunt eiusmod consequat. Mollit in nisi enim veniam culpa mollit id dolor.\n\nSunt cillum esse est ut exercitation voluptate Lorem. Duis labore ut ullamco non ea do minim in cupidatat magna officia. Ullamco qui occaecat esse magna Lorem occaecat veniam in. Deserunt voluptate do voluptate nulla fugiat laborum officia Lorem mollit quis. Eiusmod sit pariatur qui sint ea irure cillum officia deserunt. Eiusmod irure in enim ullamco Lorem aliqua ad.\n\nDuis deserunt in nisi aute excepteur exercitation minim. Tempor pariatur qui irure laborum in incididunt. Dolor eu aliqua enim cupidatat ad aliquip culpa ipsum consequat consequat. Lorem nostrud deserunt officia commodo. Dolore officia ipsum cupidatat tempor ex occaecat pariatur anim ea consectetur incididunt. Veniam ad pariatur pariatur dolor enim tempor sint aliqua quis minim aliquip magna mollit eiusmod.\n\nKind Regards,\nFreda Frank', + attachments: [], + starred: false, + important: false, + unread: false, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '03693a62-d6bd-47c8-8f8e-112f21042722', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-17.jpg', + contact: 'Burns White ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Mon May 14 2018 20:06:57 GMT+0000 (UTC)').toISOString(), + subject: 'Veniam cillum ad proident incididunt nisi exercitation est', + content: + 'Hi Brian,\n\nEsse reprehenderit duis labore aliqua magna mollit ut aliquip. Fugiat aliquip ipsum aliqua laborum ipsum sint nisi proident laborum consectetur dolor veniam commodo. Ea veniam eu laborum nulla non voluptate incididunt nostrud nulla fugiat velit. Nulla aliqua sit eu amet mollit. Aute laboris excepteur ut quis elit non anim aliqua ut et ea cillum consequat ex. Pariatur tempor esse excepteur ea nostrud incididunt culpa elit aliquip proident tempor non id consectetur. Duis eiusmod sint deserunt tempor mollit sint do ad labore adipisicing.\n\nElit enim ipsum mollit pariatur in officia non qui est ipsum dolore Lorem nostrud nulla. Adipisicing aliquip enim ullamco minim in sint aliqua magna enim adipisicing. Reprehenderit ea nulla velit nostrud veniam qui est elit dolore. Et dolor labore commodo veniam aliquip laborum consequat voluptate fugiat et eu. Veniam minim sunt ex laborum. Aliquip nostrud minim pariatur nostrud eiusmod mollit minim irure aliqua. Minim id Lorem magna nostrud consequat irure.\n\nDuis id deserunt eiusmod adipisicing fugiat in irure sit aliqua ipsum velit. Aute aliquip Lorem pariatur cillum fugiat labore et. Ipsum commodo sunt enim eiusmod adipisicing exercitation elit adipisicing culpa laborum cupidatat laboris duis. Mollit officia consectetur voluptate nisi mollit. Magna ipsum sint sint est culpa in magna ad eu quis officia.\n\nBest Regards,\nBurns White', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [], + }, + { + id: 'c59f5ea4-4f5d-4b9e-9c3c-a996b18fd98c', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-18.jpg', + contact: 'Fischer Cervantes ', + }, + to: 'me ', + date: new Date('Thu Dec 13 2018 03:52:15 GMT+0000 (UTC)').toISOString(), + subject: 'Amet aute tempor sit tempor minim nulla dolor commodo aute eu', + content: + 'Hi Brian,\n\nCulpa nulla est deserunt ut. Culpa eu velit occaecat ut sint voluptate. Nostrud sint officia pariatur eiusmod commodo laborum. Proident consequat nostrud anim qui velit quis.\n\nVoluptate occaecat pariatur minim eu culpa ex sit nostrud. Amet id proident consequat commodo ullamco deserunt eu occaecat anim do exercitation sit quis non. Voluptate eiusmod aute cillum culpa sit. Dolore cillum ea ex reprehenderit occaecat ullamco. Est nulla minim est do adipisicing id in et nostrud voluptate. Proident eiusmod enim cupidatat minim. Amet minim sunt incididunt pariatur amet cupidatat eu exercitation officia laborum.\n\nId elit minim exercitation occaecat exercitation. Cupidatat officia duis duis id nisi nostrud quis dolor officia. Dolore occaecat aliqua eiusmod mollit commodo officia sunt sit laboris nisi excepteur irure duis fugiat.\n\nKind Regards,\nFischer Cervantes', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + ], + }, + { + id: '9ed5d4c1-819a-4719-88d7-cd7b08b2228d', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-19.jpg', + contact: 'Cervantes Reyes ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Tue Oct 16 2018 11:06:27 GMT+0000 (UTC)').toISOString(), + subject: 'Et eu adipisicing aliqua nisi minim commodo anim aliqua aliquip', + content: + 'Hi Brian,\n\nDo irure id voluptate occaecat quis eiusmod. Nulla non incididunt do ut excepteur proident nulla aliqua minim ex. Enim et elit eiusmod ex dolor aliqua et cupidatat consectetur nulla consectetur et fugiat cillum. Amet ea laboris non duis voluptate id fugiat voluptate et sit magna fugiat quis non.\n\nAmet tempor tempor ut eu proident deserunt. Velit exercitation irure sunt mollit veniam exercitation eiusmod nisi do velit labore sit. In exercitation et Lorem pariatur dolor aliquip aliquip occaecat. Consectetur aliqua ea voluptate aliquip consectetur do tempor sunt sint elit. Exercitation ipsum cupidatat qui exercitation cillum non cupidatat occaecat. Cupidatat consequat ut quis ad incididunt proident culpa qui minim.\n\nEu adipisicing voluptate amet occaecat amet est qui eu nisi aliqua. Quis labore in minim esse deserunt labore nulla qui dolor nulla id veniam nulla. Nulla aliquip pariatur id sunt fugiat laboris incididunt sunt ipsum. Sint dolor non nulla aliqua ea dolor officia veniam officia deserunt duis deserunt. Veniam esse consectetur deserunt excepteur laborum aliquip qui labore. Reprehenderit labore ex do nostrud esse.\n\nBest Regards,\nCervantes Reyes', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'a769720b-0c64-483c-925c-5d747c61bff4', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-20.jpg', + contact: 'Cooke Whitney ', + }, + to: 'me ', + date: new Date('Sat Jul 28 2018 14:16:37 GMT+0000 (UTC)').toISOString(), + subject: 'Est veniam aliquip culpa deserunt commodo ad laboris ad ullamco', + content: + 'Hi Brian,\n\nVoluptate consequat ullamco eiusmod deserunt eu laborum ullamco Lorem minim eiusmod est eu elit esse. Enim ipsum irure occaecat magna. Esse labore irure incididunt mollit dolor veniam ut magna aliquip. In ex consequat culpa nisi in exercitation. Sunt tempor quis deserunt laborum nulla ad.\n\nVoluptate mollit nostrud consectetur amet enim dolor. Consequat deserunt eiusmod incididunt cupidatat ex anim aliquip minim mollit incididunt tempor. Quis quis deserunt et tempor sunt laboris quis non enim veniam nisi nulla. Ea adipisicing incididunt laboris incididunt exercitation voluptate exercitation ipsum velit duis aute cupidatat labore. Nulla ea non est deserunt proident deserunt qui irure quis enim occaecat cupidatat. Sint veniam consequat Lorem dolore commodo aliqua et. Ad commodo qui ad ea consectetur non dolore dolor.\n\nAnim exercitation id do laborum quis laborum elit officia cupidatat sunt consectetur officia ex excepteur. Cillum cupidatat et consectetur ex aliquip anim Lorem eiusmod nostrud reprehenderit. Magna ullamco qui incididunt dolore anim ad laborum. Laborum occaecat laboris consequat et esse nostrud elit anim amet incididunt aliquip mollit ad proident. Voluptate pariatur ex adipisicing dolore dolor adipisicing cupidatat tempor amet duis dolore sunt consequat qui. Mollit do ullamco enim nulla dolore proident in. Ipsum irure cillum irure aute culpa duis eu est dolore est laborum.\n\nKind Regards,\nCooke Whitney', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '0197c436-2ef3-424d-b546-8b7f49186e15', + labels: [], + }, + { + id: 'e6b83f13-c25e-4355-913f-54d93d8393f6', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-03.jpg', + contact: 'Lee Lloyd ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Thu Oct 18 2018 02:56:36 GMT+0000 (UTC)').toISOString(), + subject: 'Culpa incididunt amet sunt ipsum ad nostrud exercitation ea', + content: + 'Hi Brian,\n\nDolore voluptate ea id aliquip qui cillum. Adipisicing velit esse et sunt culpa quis velit mollit culpa mollit nostrud. Nulla ad elit cupidatat ex id velit proident aliquip sit irure aliquip exercitation exercitation. Occaecat proident reprehenderit consectetur tempor velit amet cupidatat.\n\nAd est sunt commodo occaecat cillum fugiat minim reprehenderit minim nulla id velit. Ullamco enim ullamco qui eu ut est qui dolore reprehenderit non tempor excepteur. Fugiat irure in pariatur qui incididunt minim cillum. Aliquip incididunt reprehenderit cillum laborum eiusmod sint aute sint. Deserunt pariatur deserunt elit ut velit cupidatat. Ad deserunt ea laborum reprehenderit laboris ut pariatur labore.\n\nLabore ullamco irure mollit aliqua irure officia est excepteur ut. Dolore amet ut id fugiat deserunt reprehenderit pariatur anim. Dolor est amet ipsum labore fugiat culpa minim anim aliqua. Officia ad duis est irure in consequat nostrud duis. Irure sit quis ad nisi qui adipisicing labore consectetur consequat duis eiusmod nisi. Non dolore tempor exercitation nulla nisi Lorem eu adipisicing aliqua dolore qui non. Enim non exercitation occaecat reprehenderit adipisicing dolore laboris eiusmod.\n\nCheers!\nLee Lloyd', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: '5c5c4ba7-542b-46b0-b0ce-976f5189d72c', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-01.jpg', + contact: 'Benson Shields ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Sun Apr 01 2018 20:39:05 GMT+0000 (UTC)').toISOString(), + subject: 'Sit incididunt ad tempor veniam duis', + content: + 'Dear Brian,\n\nAnim dolor exercitation magna qui incididunt ullamco enim. Voluptate qui laborum tempor ex minim eu dolore officia Lorem do pariatur laborum. Esse et ullamco reprehenderit nisi anim nostrud est deserunt.\n\nQuis qui commodo exercitation minim ea nisi. Aliqua culpa ad aliqua velit eiusmod do duis ex commodo eiusmod. Laborum nostrud nulla qui non reprehenderit voluptate cillum mollit exercitation anim ipsum cillum.\n\nEiusmod nisi ullamco ex ut velit. Ipsum sint dolor minim aute minim mollit ullamco voluptate magna nulla sint. Pariatur Lorem pariatur velit laboris tempor excepteur tempor reprehenderit culpa Lorem.\n\nKind Regards,\nBenson Shields', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [], + }, + { + id: '36abfef2-f86a-4c9e-99de-1869f0b3e71b', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-02.jpg', + contact: 'Emerson Whitehead ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Sun Jun 24 2018 11:19:49 GMT+0000 (UTC)').toISOString(), + subject: 'Esse ea ut est excepteur', + content: + 'Hey Brian,\n\nEst consequat aute laborum voluptate do aliqua cillum non excepteur nostrud culpa enim veniam nulla. Proident et nisi consequat nisi labore incididunt eiusmod fugiat. Nisi sint ut sint proident culpa pariatur ipsum quis dolor voluptate. Elit proident laboris eu elit. Id nisi dolor quis nostrud cillum quis ut ad quis velit eiusmod.\n\nMinim reprehenderit ullamco culpa cupidatat voluptate ut sunt. Exercitation sit dolore ullamco commodo exercitation cupidatat nulla officia Lorem exercitation officia minim. Reprehenderit ex incididunt magna id culpa incididunt ex reprehenderit ea veniam culpa id occaecat.\n\nDo esse ut non laborum aute. Aute laborum tempor eiusmod id amet anim. Quis exercitation id fugiat deserunt in do irure duis. Id ad ea eiusmod magna excepteur nulla.\n\nCheers!\nEmerson Whitehead', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: 'b1a0ab26-6c86-4888-b2f1-69928b3ca718', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-04.jpg', + contact: 'Annabelle Greene ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Thu Aug 30 2018 03:24:13 GMT+0000 (UTC)').toISOString(), + subject: 'Commodo reprehenderit laborum nostrud culpa et aliquip', + content: + 'Hey Brian,\n\nConsequat amet proident esse laboris nisi excepteur mollit enim ad ipsum. Eiusmod culpa anim magna laboris amet veniam qui. Mollit minim elit tempor in nostrud incididunt pariatur. Ea dolor laboris cupidatat in aliquip elit proident ipsum ad. Ad do pariatur do magna eu voluptate eu qui commodo consectetur exercitation pariatur eu.\n\nSit est nisi tempor eiusmod esse laboris reprehenderit laborum quis incididunt duis amet esse. Lorem do do nulla est. Deserunt magna laborum do pariatur excepteur amet laboris anim sunt nulla. Veniam aliqua non adipisicing id cillum laborum aliqua. Reprehenderit deserunt amet nulla proident. Voluptate aliqua occaecat ex ut deserunt amet voluptate quis id pariatur excepteur incididunt. Magna ex nulla minim magna id cillum nisi id quis culpa consequat ea exercitation.\n\nIncididunt et aliqua officia sit nulla anim commodo est. Irure commodo veniam quis qui ad sit labore mollit in officia non incididunt in tempor. Tempor nulla velit excepteur esse. Duis enim sunt irure consectetur excepteur fugiat duis pariatur exercitation cupidatat commodo. Do cupidatat et labore magna dolor aliquip aute tempor aute. Et sit fugiat commodo eiusmod qui ex minim dolor eu do minim qui veniam.\n\nBest Regards,\nAnnabelle Greene', + attachments: [], + starred: false, + important: true, + unread: false, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '87cf5188-34dc-4947-b780-48c7fb6b6b23', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-03.jpg', + contact: 'Dawson Lewis ', + }, + to: 'me ', + date: new Date('Fri Aug 03 2018 03:03:12 GMT+0000 (UTC)').toISOString(), + subject: 'Ipsum duis sint incididunt nulla in labore nulla', + content: + 'Hello Brian,\n\nAdipisicing quis deserunt consectetur proident eiusmod velit irure minim dolore sunt aliqua aliqua. Dolore excepteur ea commodo consectetur. Qui veniam est do cillum non excepteur adipisicing excepteur quis sit. Do cupidatat consectetur pariatur nulla exercitation dolor exercitation mollit. Elit culpa ea mollit laboris anim nisi id velit. Elit esse ad commodo dolor culpa nostrud consequat Lorem laboris pariatur et esse. Nisi elit esse ad cupidatat commodo eiusmod irure aliquip sit deserunt id anim tempor.\n\nIrure deserunt dolore nisi magna ipsum ut qui amet elit consectetur ex pariatur. Aliquip anim nostrud enim exercitation commodo eiusmod mollit qui id nulla. Lorem aute exercitation commodo enim veniam ea aute laborum consequat sunt proident eu. Quis deserunt incididunt mollit adipisicing nostrud laboris. Laborum elit velit proident aliquip ex aliqua dolore magna cillum adipisicing nisi cillum sunt esse.\n\nCillum eu id cillum eu incididunt adipisicing pariatur est sint minim voluptate Lorem Lorem excepteur. Aliqua ipsum non occaecat aute eiusmod deserunt aliquip. Sit incididunt cupidatat pariatur exercitation laborum id qui ut pariatur deserunt fugiat occaecat occaecat incididunt. Amet ad do esse et aliquip magna ullamco commodo deserunt exercitation irure. Consequat dolor magna mollit laboris pariatur laboris.\n\nBest Regards,\nDawson Lewis', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: '8749e3bc-24b3-43f3-997b-ee0b5bd7a442', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-04.jpg', + contact: 'Cole Dotson ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Tue Sep 04 2018 09:09:08 GMT+0000 (UTC)').toISOString(), + subject: 'Sint quis veniam tempor sint', + content: + 'Hi Brian,\n\nReprehenderit magna Lorem voluptate mollit irure nulla duis est adipisicing. Velit labore ullamco sit dolore. Officia magna est sunt esse veniam eiusmod nostrud laboris eiusmod ullamco nostrud cupidatat veniam.\n\nAliqua veniam magna laborum laboris officia. Excepteur occaecat nisi culpa anim amet dolore culpa culpa laborum veniam deserunt esse sunt. Nostrud tempor adipisicing sit eiusmod dolore.\n\nUt adipisicing labore officia ipsum qui officia aute. Qui in et quis ut qui labore irure. Minim voluptate qui occaecat est. Laborum aliquip enim elit incididunt eiusmod ea sit id in. Qui nostrud ad nostrud deserunt incididunt aute in aliquip.\n\nBest Regards,\nCole Dotson', + attachments: [], + starred: false, + important: false, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: '108ca3fa-a4dd-4988-a7ea-659ab4446050', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-05.jpg', + contact: 'Bernard Cunningham ', + }, + to: 'me ', + date: new Date('Tue Aug 21 2018 08:51:03 GMT+0000 (UTC)').toISOString(), + subject: + 'Consequat Lorem fugiat et veniam ad veniam proident excepteur laborum', + content: + 'Dear Brian,\n\nEu voluptate exercitation nulla aliqua id laboris ipsum voluptate nulla ea laboris. Magna exercitation reprehenderit mollit velit irure minim elit officia eiusmod reprehenderit non quis. Esse sunt non nisi id irure commodo incididunt amet.\n\nAdipisicing quis mollit velit ullamco enim ad laborum ex dolor ut culpa exercitation sit commodo. Amet eu et ullamco ut elit anim nulla fugiat sint. Laborum tempor incididunt laboris id pariatur velit excepteur officia nostrud mollit occaecat sit. Nulla do fugiat tempor quis reprehenderit fugiat aute. Dolor laboris amet do anim occaecat sunt in duis reprehenderit cupidatat mollit consequat nisi.\n\nUllamco ad minim dolore excepteur amet ullamco quis esse officia voluptate. Ipsum ex dolore labore enim. Cupidatat cillum exercitation cupidatat id eu esse aute tempor ut qui sit.\n\nCheers!\nBernard Cunningham', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: '63a362be-4ea7-4cc1-985f-5202db9c1370', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-06.jpg', + contact: 'Edwards Mcconnell ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Fri Jul 20 2018 05:22:32 GMT+0000 (UTC)').toISOString(), + subject: + 'Amet ipsum voluptate voluptate dolore proident voluptate officia cillum adipisicing tempor tempor ad anim', + content: + 'Hey Brian,\n\nAliqua Lorem fugiat in fugiat commodo laborum sit mollit Lorem elit. Nulla incididunt sint nostrud magna labore elit quis ex. Ex dolore labore tempor cillum magna tempor est exercitation in proident. Dolor est esse consectetur veniam sint proident enim mollit.\n\nQui eiusmod laborum veniam officia quis nisi cillum dolor cupidatat magna. Quis exercitation excepteur incididunt duis laboris ex Lorem laborum excepteur adipisicing. Fugiat exercitation reprehenderit veniam minim occaecat. Excepteur fugiat irure magna aliquip ut amet quis fugiat consectetur ea. Commodo est fugiat ea et labore dolore ullamco nulla excepteur officia ea. Lorem sunt officia pariatur ullamco sunt commodo fugiat enim. Consectetur amet duis et deserunt elit pariatur eiusmod amet excepteur fugiat dolore aliqua eu.\n\nLabore velit ea non elit esse commodo fugiat. Culpa eiusmod consequat sint laboris. Irure proident non laboris duis nisi.\n\nBest Regards,\nEdwards Mcconnell', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + ], + }, + { + id: 'ce206b7e-bbd0-4cd1-b69a-a8d4ef5b10bf', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-05.jpg', + contact: 'Lizzie Sanders ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Fri Sep 07 2018 01:29:31 GMT+0000 (UTC)').toISOString(), + subject: 'Sint enim elit Lorem laboris', + content: + 'Dear Brian,\n\nNostrud Lorem sit dolore eiusmod culpa ut deserunt do. Esse nulla nostrud cupidatat aliquip ut veniam velit cillum amet cillum ea culpa culpa in. Pariatur eu duis adipisicing sint velit eu duis ex officia enim nulla. Sunt fugiat incididunt et id nulla ut ea in.\n\nCillum id ea nisi consectetur nostrud adipisicing magna incididunt ipsum reprehenderit. Exercitation labore nisi magna fugiat officia culpa id commodo eu. Ad ullamco amet pariatur deserunt elit et dolore quis cillum laboris Lorem dolore labore laboris.\n\nEst mollit aliquip labore ad duis quis mollit sunt cillum cupidatat excepteur. Ad dolor cupidatat incididunt deserunt. Ullamco id sunt et ad nisi Lorem irure. Aliquip enim occaecat velit laboris et ullamco sint dolore anim. Proident nisi nulla labore enim dolor. Ipsum eu qui nisi minim aliqua ullamco exercitation. In sint id pariatur id aliqua velit reprehenderit consequat aliquip.\n\nCheers!\nLizzie Sanders', + attachments: [], + starred: false, + important: true, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, + { + id: 'f7c2e821-b2e2-4103-bb20-ddcd3a42dc7c', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-06.jpg', + contact: 'Elise Hicks ', + }, + to: 'me ', + cc: [ + 'Graham Belltower ', + 'Julie T. ', + ], + date: new Date('Sun Mar 04 2018 15:45:07 GMT+0000 (UTC)').toISOString(), + subject: + 'Cillum proident non officia mollit nulla dolor eiusmod et aliquip laboris ut adipisicing dolor deserunt', + content: + 'Hi Brian,\n\nVelit proident et qui quis enim. Aute cillum ad ipsum esse nulla. Enim elit quis laborum id excepteur non consectetur ut incididunt enim adipisicing minim est. Dolor pariatur pariatur est cillum consectetur eu do deserunt labore duis incididunt et. Magna laboris labore velit velit ad aliquip magna.\n\nLaboris occaecat duis aliqua culpa culpa culpa quis eu et dolore. Quis irure mollit irure sint fugiat. Ea elit adipisicing incididunt cillum proident esse esse tempor nulla laborum incididunt reprehenderit. Sit minim laborum dolor magna sunt pariatur. Voluptate ullamco exercitation deserunt ea consequat aliqua Lorem non velit irure et adipisicing labore.\n\nVoluptate id exercitation eiusmod mollit et commodo sit consequat minim id. Consectetur eiusmod reprehenderit veniam elit dolor qui quis occaecat nisi ut commodo excepteur. Minim do ad veniam ullamco ea magna occaecat velit. Non do ea officia cupidatat ex proident veniam nostrud. Non occaecat laboris ad est quis ad. Commodo non aliquip nisi ullamco ullamco consequat eiusmod aliqua est sunt incididunt commodo et nostrud.\n\nCheers!\nElise Hicks', + attachments: [], + starred: true, + important: true, + unread: false, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: 'd8ca28a0-7fb7-4cd4-9058-3a867f841f76', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-07.jpg', + contact: 'Sherri Roth ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Thu Dec 20 2018 09:37:24 GMT+0000 (UTC)').toISOString(), + subject: 'Ex laboris et sunt ex aute aute nisi', + content: + 'Hey Brian,\n\nLaboris eu incididunt reprehenderit eiusmod. Non ad tempor fugiat aliquip aliquip ullamco deserunt deserunt occaecat Lorem. Esse ut velit labore magna nostrud do eu fugiat do adipisicing fugiat fugiat id in. Reprehenderit magna aute sunt proident anim nostrud ex Lorem.\n\nDolor proident et quis ea anim sit deserunt ea non nisi. Ullamco fugiat proident consectetur qui reprehenderit incididunt anim fugiat pariatur eiusmod quis quis. Amet anim veniam labore aliquip est occaecat do magna consectetur mollit fugiat. Ut fugiat eu deserunt mollit mollit cupidatat.\n\nNisi culpa et magna est officia duis laboris adipisicing ullamco pariatur sunt nulla aute proident. Ex incididunt veniam fugiat do proident ullamco tempor qui eu qui consequat anim. Commodo minim consectetur excepteur amet in sint adipisicing cillum tempor sint et nulla. Cupidatat ut commodo esse labore anim.\n\nCheers!\nSherri Roth', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + ], + }, + { + id: 'b48be636-410c-485a-9442-7de7ce807dc2', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-07.jpg', + contact: 'Skinner Hawkins ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Sun Jun 10 2018 07:50:01 GMT+0000 (UTC)').toISOString(), + subject: + 'Eu cillum amet dolore labore voluptate qui mollit ad anim ipsum laborum eiusmod aliquip', + content: + 'Hi Brian,\n\nFugiat nisi eu aliquip do elit irure enim consectetur officia consequat. Quis eiusmod minim sint veniam quis dolor sit excepteur officia reprehenderit. Aute ex ea eu eiusmod. Consectetur velit dolore laboris proident ex. Enim sint dolore adipisicing occaecat et magna quis. Enim nostrud nisi sunt deserunt.\n\nOccaecat laborum voluptate quis culpa duis cillum excepteur velit ullamco duis nisi. Nulla cillum ea Lorem reprehenderit. Ea proident deserunt mollit esse pariatur est duis aute Lorem. Id deserunt nulla elit velit veniam ut consectetur Lorem exercitation do laborum nisi Lorem.\n\nVelit sint exercitation et ullamco ipsum deserunt irure. Consectetur mollit aliqua duis commodo laboris sit consequat laborum mollit aliquip anim. Occaecat enim quis in ullamco voluptate dolore enim culpa Lorem est consectetur deserunt tempor labore. Do non ex irure dolor elit ea Lorem duis esse sit eu fugiat eiusmod.\n\nCheers!\nSkinner Hawkins', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + ], + }, + { + id: 'efe990eb-6559-48a6-a909-320c465de739', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-08.jpg', + contact: 'Velma Ellison ', + }, + to: 'me ', + date: new Date('Thu Nov 01 2018 10:59:46 GMT+0000 (UTC)').toISOString(), + subject: 'Ex duis cupidatat qui velit', + content: + 'Hey Brian,\n\nSint labore adipisicing consequat ipsum. Proident aute et reprehenderit sint laborum nulla dolor. Dolor commodo consectetur nulla id reprehenderit veniam enim culpa ad irure esse Lorem amet. Tempor laboris aute ea sint. Elit laboris eu aliquip tempor eu Lorem eu ex.\n\nMagna dolore officia in excepteur. Reprehenderit in ipsum ea ex voluptate reprehenderit et aliquip commodo deserunt excepteur nisi reprehenderit quis. Consectetur do mollit non nisi exercitation elit anim laboris elit cillum excepteur. Veniam qui deserunt culpa enim esse eu Lorem. Est in consequat cupidatat elit in nisi deserunt.\n\nProident consequat ea nisi eiusmod esse incididunt exercitation. Consequat labore veniam non elit duis aute eiusmod labore est irure. Aliquip velit minim nisi qui est. Consequat ea dolor nostrud incididunt. Nulla commodo consectetur occaecat eu nisi ullamco cillum culpa ea magna. Eiusmod quis in ex veniam duis esse do. Laboris quis mollit mollit ex nulla officia irure pariatur qui aute consectetur ad esse.\n\nCheers!\nVelma Ellison', + attachments: [], + starred: true, + important: false, + unread: false, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + ], + }, + { + id: 'd2bc3670-63f7-47c3-9d3d-4998c716f04a', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-09.jpg', + contact: 'Tamara Fitzgerald ', + }, + to: 'me ', + date: new Date('Sat Feb 24 2018 15:37:16 GMT+0000 (UTC)').toISOString(), + subject: + 'Et esse sit eiusmod dolore eiusmod ad sit ipsum adipisicing ut esse', + content: + 'Dear Brian,\n\nIn exercitation pariatur id occaecat reprehenderit exercitation ullamco nostrud consequat nostrud anim labore reprehenderit. Pariatur ea amet eiusmod consequat aliquip culpa aute. Officia elit non nulla ullamco aliquip est nulla quis nostrud consequat irure.\n\nFugiat nisi labore excepteur non mollit duis. Irure voluptate fugiat duis ullamco exercitation cupidatat est ullamco culpa. Quis nisi nostrud nisi non commodo veniam Lorem officia proident fugiat elit exercitation consectetur. Cupidatat cupidatat mollit amet nisi voluptate et ea sint sint. Excepteur ad aute reprehenderit nisi dolore sint eu fugiat consequat nulla proident ipsum ad voluptate. Ea officia aute incididunt commodo consectetur aliquip sint. Irure veniam ipsum anim incididunt aliquip est enim consequat anim cillum veniam laborum enim laborum.\n\nAnim non eiusmod elit id cillum minim minim qui amet sint. Incididunt ullamco exercitation consequat ipsum sit eiusmod minim dolore sint laborum labore. Velit incididunt nulla consectetur duis duis. Sit labore duis nostrud tempor. Elit excepteur nostrud adipisicing eu quis ex. Aute aliquip esse laborum irure in officia qui voluptate laboris magna reprehenderit.\n\nKind Regards,\nTamara Fitzgerald', + attachments: [], + starred: true, + important: true, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: ['b167d3c4-f6ed-4ea6-9579-a12f95a9d76e'], + }, + { + id: '07b4d696-7657-4535-9838-3efb42355cbb', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-08.jpg', + contact: 'Duncan Gilmore ', + }, + to: 'me ', + date: new Date('Mon Dec 31 2018 08:15:40 GMT+0000 (UTC)').toISOString(), + subject: 'Ipsum non ad commodo dolor enim labore ullamco', + content: + 'Hey Brian,\n\nDuis commodo commodo exercitation ex incididunt fugiat incididunt duis ex. Proident tempor nulla culpa consequat non est incididunt amet ipsum anim. Non ipsum irure consectetur nisi exercitation. Nostrud occaecat ullamco ad et tempor magna sint ea minim duis consectetur aute velit incididunt. Ad amet exercitation consectetur mollit proident minim anim excepteur nostrud.\n\nEt in nulla laboris minim ex excepteur culpa exercitation officia labore nostrud quis. Est officia velit ullamco aute consectetur Lorem consectetur voluptate qui eu. Elit non nulla laboris enim in esse quis. Pariatur ullamco cupidatat cupidatat non et anim in dolor magna quis Lorem dolore et. Sit ullamco cillum reprehenderit eu. Ut id ipsum duis occaecat occaecat.\n\nFugiat excepteur et aute magna fugiat ut consequat adipisicing quis deserunt id sint occaecat. Ut cupidatat est nisi fugiat enim laborum. Nostrud est nisi occaecat ut Lorem.\n\nKind Regards,\nDuncan Gilmore', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [], + }, + { + id: 'b8424db5-c607-4b9a-b88f-78c54343a342', + type: 'mail', + from: { + avatar: 'assets/images/avatars/female-10.jpg', + contact: 'Betty Dean ', + }, + to: 'me ', + date: new Date('Thu Aug 16 2018 06:17:15 GMT+0000 (UTC)').toISOString(), + subject: + 'Laborum magna cupidatat qui sint proident aliquip ut commodo aute sint', + content: + 'Dear Brian,\n\nConsequat aliquip ut laboris non velit dolor fugiat. Nisi ut laborum amet occaecat proident deserunt excepteur sunt occaecat pariatur sint ullamco fugiat aliquip. Ea excepteur commodo magna ut deserunt. Reprehenderit eu quis nisi esse eiusmod ut ullamco. Esse est pariatur id labore anim cillum dolore nulla esse dolor eiusmod do magna est.\n\nDo fugiat dolore duis ex consequat amet sunt reprehenderit enim non dolore incididunt pariatur. Excepteur ipsum labore est cupidatat laborum do consectetur tempor ipsum eiusmod. Voluptate eiusmod nostrud occaecat nisi laboris et velit non nostrud. Nulla id commodo laboris culpa id cillum nostrud deserunt fugiat excepteur nisi irure laborum. Irure in aute ea non magna Lorem aute consequat excepteur duis occaecat cupidatat ea. Tempor Lorem ullamco ullamco occaecat ipsum duis aliqua velit labore dolore veniam. Mollit ex commodo qui esse.\n\nLabore et nostrud do dolor. Sit duis proident nulla mollit officia. Deserunt voluptate ad anim in id consectetur excepteur Lorem quis. Consectetur officia esse cillum Lorem aliqua ex sit proident qui occaecat. Deserunt magna in consectetur velit proident sint cupidatat commodo veniam sint cillum amet aliqua. Aute cillum officia culpa Lorem mollit amet culpa incididunt dolore voluptate minim. Aliqua fugiat aliquip nulla dolore elit aliqua quis veniam ullamco in adipisicing deserunt.\n\nCheers!\nBetty Dean', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + ], + }, + { + id: 'edf1399f-e829-4bde-ae5b-e03d18ad2f76', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-09.jpg', + contact: 'Pate Gardner ', + }, + to: 'me ', + date: new Date('Sat May 26 2018 10:36:30 GMT+0000 (UTC)').toISOString(), + subject: 'Non labore sit dolor quis in qui esse velit ad sit', + content: + 'Hi Brian,\n\nMinim ea eiusmod eu cillum enim amet minim commodo reprehenderit ullamco pariatur sunt adipisicing excepteur. Laboris aute velit cillum aute laborum exercitation. Aute esse qui aliquip et proident excepteur nulla ullamco id quis culpa consectetur ea in. Aute ad dolor culpa voluptate deserunt consectetur Lorem ex est. Id consequat laborum qui elit velit. Nostrud incididunt ullamco ad aute officia adipisicing proident consectetur qui in fugiat elit. Qui sit officia amet ex occaecat irure.\n\nIncididunt sit est quis mollit ex nostrud dolore ullamco officia laboris. Reprehenderit labore anim ea tempor officia officia et duis cupidatat adipisicing dolore. Dolore exercitation minim culpa ut est magna aute adipisicing quis. Eiusmod nulla mollit nulla dolor elit aute incididunt aute officia tempor enim do. Fugiat tempor non dolore quis nisi do laborum qui.\n\nEst et cupidatat nulla laboris amet ut laboris. Lorem in esse culpa sunt laborum. Commodo est nisi ullamco esse veniam.\n\nKind Regards,\nPate Gardner', + attachments: [], + starred: true, + important: false, + unread: true, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [], + }, + { + id: 'bcc422a2-8a39-416e-8205-a5ce354ea622', + type: 'mail', + from: { + avatar: 'assets/images/avatars/male-10.jpg', + contact: 'Lawson Kidd ', + }, + to: 'me ', + cc: ['Graham Belltower '], + date: new Date('Sun Mar 18 2018 02:18:44 GMT+0000 (UTC)').toISOString(), + subject: 'Proident non proident dolore non dolor reprehenderit', + content: + 'Hello Brian,\n\nDeserunt cillum in non et. Occaecat consequat cupidatat occaecat dolor laboris id nostrud laborum. Incididunt commodo eiusmod id irure ex amet. Aute officia ut voluptate id ex ut ex minim velit. Ullamco est pariatur et quis. Sint eiusmod labore qui minim laboris esse aliquip culpa in incididunt reprehenderit.\n\nNon aliqua anim occaecat cupidatat qui adipisicing elit et aliquip adipisicing cillum in in eu. Velit esse exercitation eiusmod ad id sunt duis voluptate sint veniam proident. Ullamco sit ut laboris minim voluptate ut velit excepteur ad. Ad aute et consequat pariatur aute in ipsum enim ea nostrud excepteur consequat est. Et magna excepteur irure do adipisicing. Id fugiat quis et deserunt sit nostrud fugiat eu do eu ullamco.\n\nVelit aliqua ea id ipsum irure exercitation. Et duis aliquip exercitation amet in minim aliqua proident nisi velit irure excepteur non eu. Eiusmod irure tempor mollit velit culpa excepteur in minim eiusmod. Duis et commodo qui elit quis anim consectetur elit reprehenderit. Labore aliqua cupidatat Lorem eu officia exercitation labore aliqua mollit magna ullamco cupidatat. Nostrud ea commodo ad ad eiusmod velit eiusmod. Laborum aliquip exercitation mollit et irure occaecat.\n\nKind Regards,\nLawson Kidd', + attachments: [], + starred: true, + important: true, + unread: false, + folder: '2fa74637-d362-4fd2-9a88-f7195a88bdde', + labels: [ + 'b167d3c4-f6ed-4ea6-9579-a12f95a9d76e', + '745cf30e-ca84-47a1-a553-b70eb630d8e7', + '8b035cb5-65c0-4ab1-bb4c-43b0e442d1f3', + 'b2d1e4e7-7cfd-4b51-ae59-217a093df754', + '184cd689-4ee4-47cf-9f8a-12233d614326', + ], + }, +]; diff --git a/src/app/mock-api/apps/member/user/api.ts b/src/app/mock-api/apps/member/user/api.ts new file mode 100644 index 0000000..fd5d61d --- /dev/null +++ b/src/app/mock-api/apps/member/user/api.ts @@ -0,0 +1,215 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; +import { users as usersData } from './data'; + +@Injectable({ + providedIn: 'root', +}) +export class MemberUserMockApi { + private _users: any[] = usersData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Users - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/member/user/users', 300) + .reply(({ request }) => { + // Get available queries + const search = request.params.get('search'); + const sort = request.params.get('sort') || 'name'; + const order = request.params.get('order') || 'asc'; + const page = parseInt(request.params.get('page') ?? '1', 10); + const size = parseInt(request.params.get('size') ?? '10', 10); + + // Clone the users + let users: any[] | null = cloneDeep(this._users); + + // Sort the users + if (sort === 'sku' || sort === 'name' || sort === 'active') { + users.sort((a, b) => { + const fieldA = a[sort].toString().toUpperCase(); + const fieldB = b[sort].toString().toUpperCase(); + return order === 'asc' + ? fieldA.localeCompare(fieldB) + : fieldB.localeCompare(fieldA); + }); + } else { + users.sort((a, b) => + order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort] + ); + } + + // If search exists... + if (search) { + // Filter the users + users = users.filter( + (contact: any) => + contact.name && + contact.name.toLowerCase().includes(search.toLowerCase()) + ); + } + + // Paginate - Start + const usersLength = users.length; + + // Calculate pagination details + const begin = page * size; + const end = Math.min(size * (page + 1), usersLength); + const lastPage = Math.max(Math.ceil(usersLength / size), 1); + + // Prepare the pagination object + let pagination = {}; + + // If the requested page number is bigger than + // the last possible page number, return null for + // users but also send the last possible page so + // the app can navigate to there + if (page > lastPage) { + users = null; + pagination = { + lastPage, + }; + } else { + // Paginate the results by size + users = users.slice(begin, end); + + // Prepare the pagination mock-api + pagination = { + length: usersLength, + size: size, + page: page, + lastPage: lastPage, + startIndex: begin, + endIndex: end - 1, + }; + } + + // Return the response + return [ + 200, + { + users, + pagination, + }, + ]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ User - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/member/user/user') + .reply(({ request }) => { + // Get the id from the params + const id = request.params.get('id'); + + // Clone the users + const users = cloneDeep(this._users); + + // Find the user + const user = users.find((item: any) => item.id === id); + + // Return the response + return [200, user]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ User - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onPost('api/apps/member/user/user').reply(() => { + // Generate a new user + const newUser = { + id: FuseMockApiUtils.guid(), + category: '', + name: 'A New User', + description: '', + tags: [], + sku: '', + barcode: '', + brand: '', + vendor: '', + stock: '', + reserved: '', + cost: '', + basePrice: '', + taxPercent: '', + price: '', + weight: '', + thumbnail: '', + images: [], + active: false, + }; + + // Unshift the new user + this._users.unshift(newUser); + + // Return the response + return [200, newUser]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ User - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/member/user/user') + .reply(({ request }) => { + // Get the id and user + const id = request.body.id; + const user = cloneDeep(request.body.user); + + // Prepare the updated user + let updatedUser = null; + + // Find the user and update it + this._users.forEach((item, index, users) => { + if (item.id === id) { + // Update the user + users[index] = assign({}, users[index], user); + + // Store the updated user + updatedUser = users[index]; + } + }); + + // Return the response + return [200, updatedUser]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ User - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/member/user/user') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the user and delete it + this._users.forEach((item, index) => { + if (item.id === id) { + this._users.splice(index, 1); + } + }); + + // Return the response + return [200, true]; + }); + } +} diff --git a/src/app/mock-api/apps/member/user/data.ts b/src/app/mock-api/apps/member/user/data.ts new file mode 100644 index 0000000..42a3d6c --- /dev/null +++ b/src/app/mock-api/apps/member/user/data.ts @@ -0,0 +1,740 @@ +/* eslint-disable */ + +export const users = [ + { + id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Capmia Mens Chronograph Watch 44mm 5 ATM', + description: + 'Consequat esse in culpa commodo anim. Et ullamco anim amet est. Sunt dolore ex occaecat officia anim. In sit minim laborum nostrud. Consequat ex do velit voluptate do exercitation est adipisicing quis velit.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ETV-2425', + barcode: '8346201275534', + brand: '61d52c2a-8947-4a2c-8c35-f36baef45b96', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 30, + reserved: 5, + cost: 450.18, + basePrice: 1036, + taxPercent: 30, + price: 1346.8, + weight: 0.61, + thumbnail: 'assets/images/apps/ecommerce/products/watch-01-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-01-01.jpg', + 'assets/images/apps/ecommerce/products/watch-01-02.jpg', + 'assets/images/apps/ecommerce/products/watch-01-03.jpg', + ], + active: true, + }, + { + id: '00b0292f-3d50-4669-a0c4-7a9d85efc98d', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Zeon Ladies Chronograph Watch 40mm 10 ATM', + description: + 'Nulla duis dolor fugiat culpa proident. Duis anim est excepteur occaecat adipisicing occaecat. Labore id laborum non elit proident est veniam officia eu. Labore aliqua nisi duis sint ex consequat nostrud excepteur duis ex incididunt adipisicing.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATH-7573', + barcode: '8278968055700', + brand: '2c4d98d8-f334-4125-9596-862515f5526b', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 37, + reserved: 2, + cost: 723.55, + basePrice: 1686, + taxPercent: 30, + price: 2191.8, + weight: 0.79, + thumbnail: 'assets/images/apps/ecommerce/products/watch-02-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-02-01.jpg', + 'assets/images/apps/ecommerce/products/watch-02-02.jpg', + 'assets/images/apps/ecommerce/products/watch-02-03.jpg', + ], + active: true, + }, + { + id: '3f34e2fb-95bf-4f61-be28-956d2c7e4eb2', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Benton Mens Automatic Watch 44mm 5 ATM', + description: + 'Velit irure deserunt aliqua officia. Eiusmod quis sunt magna laboris aliquip non dolor consequat cupidatat dolore esse. Consectetur mollit officia laborum fugiat nulla duis ad excepteur do aliqua fugiat. Fugiat non laboris exercitation ipsum in incididunt.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADH-1921', + barcode: '8808746892183', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 30, + reserved: 3, + cost: 390.63, + basePrice: 950, + taxPercent: 10, + price: 1045, + weight: 0.76, + thumbnail: null, + images: [ + 'assets/images/apps/ecommerce/products/watch-03-01.jpg', + 'assets/images/apps/ecommerce/products/watch-03-02.jpg', + 'assets/images/apps/ecommerce/products/watch-03-03.jpg', + ], + active: false, + }, + { + id: '8fcce528-d878-4cc8-99f7-bd3451ed5405', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Capmia Mens Chronograph Watch 44mm 10 ATM', + description: + 'Velit nisi proident cupidatat exercitation occaecat et adipisicing nostrud id ex nostrud sint. Qui fugiat velit minim amet reprehenderit voluptate velit exercitation proident Lorem nisi culpa. Commodo quis officia officia eiusmod mollit aute fugiat duis quis minim culpa in. Exercitation laborum fugiat ex excepteur officia reprehenderit magna ipsum. Laboris dolore nostrud id labore sint consectetur aliqua tempor ea aute do.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'EAP-7752', + barcode: '8866355574164', + brand: '61d52c2a-8947-4a2c-8c35-f36baef45b96', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 37, + reserved: 4, + cost: 395.37, + basePrice: 839, + taxPercent: 30, + price: 1090.7, + weight: 0.62, + thumbnail: 'assets/images/apps/ecommerce/products/watch-04-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-04-01.jpg', + 'assets/images/apps/ecommerce/products/watch-04-02.jpg', + 'assets/images/apps/ecommerce/products/watch-04-03.jpg', + ], + active: true, + }, + { + id: '91d96e18-d3f5-4c32-a8bf-1fc525cb92c0', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Benton Ladies Automatic Watch 40mm 5 ATM', + description: + 'Pariatur proident labore commodo consequat qui et. Ad labore fugiat consectetur ea magna dolore mollit consequat reprehenderit laborum ad mollit eiusmod. Esse laboris voluptate ullamco occaecat labore esse laboris enim ipsum aliquip ipsum. Ea ea proident eu enim anim mollit non consequat enim nulla.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADP-5745', + barcode: '8390590339828', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 12, + reserved: 3, + cost: 442.61, + basePrice: 961, + taxPercent: 20, + price: 1153.2, + weight: 0.67, + thumbnail: 'assets/images/apps/ecommerce/products/watch-05-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-05-01.jpg', + 'assets/images/apps/ecommerce/products/watch-05-02.jpg', + 'assets/images/apps/ecommerce/products/watch-05-03.jpg', + ], + active: false, + }, + { + id: 'd7a47d7c-4cdf-4319-bbaa-37ade38c622c', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Benton Mens Chronograph Watch 44mm 10 ATM', + description: + 'Nulla enim reprehenderit proident ut Lorem laborum cillum eiusmod est ex anim. Nisi non non laboris excepteur ullamco elit do duis anim esse labore aliqua adipisicing velit. Deserunt magna exercitation cillum amet.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATV-2569', + barcode: '8238990048137', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 36, + reserved: 2, + cost: 563.43, + basePrice: 1370, + taxPercent: 30, + price: 1781, + weight: 0.62, + thumbnail: 'assets/images/apps/ecommerce/products/watch-06-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-06-01.jpg', + 'assets/images/apps/ecommerce/products/watch-06-02.jpg', + 'assets/images/apps/ecommerce/products/watch-06-03.jpg', + ], + active: true, + }, + { + id: 'ecf0b3df-38c3-45dc-972b-c509a3dc053e', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Benton Mens Chronograph Watch 44mm 10 ATM', + description: + 'Esse culpa ut ullamco dolore quis adipisicing. Minim veniam quis magna officia non. In pariatur nostrud nisi eiusmod minim anim id. Commodo ex incididunt dolor ad id aliqua incididunt minim in Lorem reprehenderit. Commodo ullamco consectetur aliqua Lorem cupidatat esse veniam consectetur sint veniam duis commodo.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'EAH-2563', + barcode: '8638426908385', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 35, + reserved: 5, + cost: 705.26, + basePrice: 1721, + taxPercent: 20, + price: 2065.2, + weight: 0.67, + thumbnail: 'assets/images/apps/ecommerce/products/watch-07-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-07-01.jpg', + 'assets/images/apps/ecommerce/products/watch-07-02.jpg', + 'assets/images/apps/ecommerce/products/watch-07-03.jpg', + ], + active: false, + }, + { + id: '5765080a-aaee-40b9-86be-c18b9d79c73c', + category: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + name: 'Benton Unisex Automatic Watch 40mm 10 ATM', + description: + 'Anim duis nisi ut ex amet reprehenderit cillum consequat pariatur ipsum elit voluptate excepteur non. Anim enim proident laboris pariatur mollit quis incididunt labore. Incididunt tempor aliquip ex labore ad consequat cillum est sunt anim dolor. Dolore adipisicing non nulla cillum Lorem deserunt. Nostrud incididunt amet sint velit.', + tags: [ + '8ec8f60d-552f-4216-9f11-462b95b1d306', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATH-6399', + barcode: '8881883828441', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 17, + reserved: 5, + cost: 624.12, + basePrice: 1448, + taxPercent: 10, + price: 1592.8, + weight: 0.55, + thumbnail: 'assets/images/apps/ecommerce/products/watch-08-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-08-01.jpg', + 'assets/images/apps/ecommerce/products/watch-08-02.jpg', + 'assets/images/apps/ecommerce/products/watch-08-03.jpg', + ], + active: false, + }, + { + id: '6e71be88-b225-474c-91e5-111ced7d6220', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Premera Ladies Chronograph Watch 40mm 5 ATM', + description: + 'Velit fugiat adipisicing ut quis anim deserunt ex culpa nostrud laborum. Consectetur duis velit esse commodo voluptate magna dolor in enim exercitation. Ea aliquip cupidatat aute dolor tempor magna id laboris nulla eiusmod ut amet. Veniam irure ex incididunt officia commodo eiusmod nostrud ad consequat commodo ad voluptate.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ELH-2495', + barcode: '8268777127281', + brand: '5913ee46-a497-41db-a118-ee506011529f', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 49, + reserved: 5, + cost: 738.91, + basePrice: 1848, + taxPercent: 30, + price: 2402.4, + weight: 0.54, + thumbnail: 'assets/images/apps/ecommerce/products/watch-09-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-09-01.jpg', + 'assets/images/apps/ecommerce/products/watch-09-02.jpg', + 'assets/images/apps/ecommerce/products/watch-09-03.jpg', + ], + active: false, + }, + { + id: '51242500-6983-4a78-bff3-d278eb4e3a57', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Lara Mens Automatic Watch 44mm 10 ATM', + description: + 'Enim laboris ut non elit dolore est consectetur. Duis irure minim elit velit anim incididunt minim ipsum ullamco ad dolore sunt. Proident aute proident velit elit ex reprehenderit ut. Lorem laborum excepteur elit proident sunt ipsum incididunt id do. Occaecat proident proident qui aute officia cupidatat aliqua aliqua nostrud proident laboris est ad qui. Magna eiusmod amet ut pariatur esse nisi aliquip deserunt minim ad et ea occaecat. Sunt enim cupidatat id eiusmod ea aute quis excepteur irure commodo dolore excepteur.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATT-6019', + barcode: '8452763551765', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 24, + reserved: 4, + cost: 688.89, + basePrice: 1502, + taxPercent: 8, + price: 1622.16, + weight: 0.76, + thumbnail: 'assets/images/apps/ecommerce/products/watch-10-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-10-01.jpg', + 'assets/images/apps/ecommerce/products/watch-10-02.jpg', + 'assets/images/apps/ecommerce/products/watch-10-03.jpg', + ], + active: true, + }, + { + id: '844a4395-233f-4ffb-85bd-7baa0e490a88', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Lara Mens Chronograph Watch 44mm 5 ATM', + description: + 'Labore irure qui sunt consectetur. Elit nulla id cillum duis. Nulla nulla eu occaecat eiusmod duis irure id do esse. Ad eu incididunt voluptate amet nostrud ullamco mollit dolore occaecat cupidatat nisi reprehenderit. Proident fugiat laborum sit velit ea voluptate.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADH-2335', + barcode: '8385907318041', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 44, + reserved: 3, + cost: 708.41, + basePrice: 1467, + taxPercent: 18, + price: 1731.06, + weight: 0.7, + thumbnail: 'assets/images/apps/ecommerce/products/watch-11-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-11-01.jpg', + 'assets/images/apps/ecommerce/products/watch-11-02.jpg', + 'assets/images/apps/ecommerce/products/watch-11-03.jpg', + ], + active: false, + }, + { + id: '7520f1b6-3c45-46ef-a4d5-881971212d1e', + category: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + name: 'Benton Unisex Automatic Watch 40mm 10 ATM', + description: + 'Esse nisi amet occaecat culpa aliqua est ad ea velit. Consectetur in voluptate sit pariatur eiusmod exercitation eu aute occaecat in duis. Voluptate consectetur eu commodo proident id sunt labore irure.', + tags: [ + '8ec8f60d-552f-4216-9f11-462b95b1d306', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATH-3064', + barcode: '8608510561856', + brand: 'e1789f32-9475-43e7-9256-451d2e3a2282', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 25, + reserved: 2, + cost: 731.94, + basePrice: 1743, + taxPercent: 10, + price: 1917.3, + weight: 0.47, + thumbnail: 'assets/images/apps/ecommerce/products/watch-12-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-12-01.jpg', + 'assets/images/apps/ecommerce/products/watch-12-02.jpg', + 'assets/images/apps/ecommerce/products/watch-12-03.jpg', + ], + active: false, + }, + { + id: '683e41d8-6ebc-4e6a-a7c1-9189ca52ef19', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Zeon Mens Chronograph Watch 44mm 10 ATM', + description: + 'Eu irure do cupidatat esse in. Aliqua laborum deserunt qui Lorem deserunt minim fugiat deserunt voluptate minim. Anim nulla tempor eiusmod ad exercitation reprehenderit officia. Nisi proident labore eu anim excepteur aliqua occaecat. Laboris nostrud ipsum commodo cupidatat.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADV-3188', + barcode: '8334758988643', + brand: '2c4d98d8-f334-4125-9596-862515f5526b', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 14, + reserved: 5, + cost: 375.76, + basePrice: 786, + taxPercent: 30, + price: 1021.8, + weight: 0.53, + thumbnail: 'assets/images/apps/ecommerce/products/watch-13-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-13-01.jpg', + 'assets/images/apps/ecommerce/products/watch-13-02.jpg', + 'assets/images/apps/ecommerce/products/watch-13-03.jpg', + ], + active: false, + }, + { + id: 'd4e52238-292d-462b-b9bb-1751030132e2', + category: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + name: 'Lara Unisex Chronograph Watch 40mm 5 ATM', + description: + 'Nulla nostrud aliquip consequat laborum ut enim exercitation. Aute dolor duis aliquip consequat minim officia. Nisi labore et magna et sunt consectetur id anim pariatur officia et esse ut. Ullamco dolor cillum consequat velit eiusmod consectetur. Ullamco reprehenderit tempor minim dolore officia do nisi cupidatat adipisicing fugiat velit.', + tags: [ + '8ec8f60d-552f-4216-9f11-462b95b1d306', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATT-7423', + barcode: '8417153336369', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 33, + reserved: 2, + cost: 743.93, + basePrice: 1793, + taxPercent: 8, + price: 1936.44, + weight: 0.86, + thumbnail: 'assets/images/apps/ecommerce/products/watch-14-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-14-01.jpg', + 'assets/images/apps/ecommerce/products/watch-14-02.jpg', + 'assets/images/apps/ecommerce/products/watch-14-03.jpg', + ], + active: false, + }, + { + id: '98861dfc-0d21-4fd5-81aa-49785d003d95', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Premera Mens Automatic Watch 44mm 10 ATM', + description: + 'Veniam sint aliquip aliquip aliquip amet Lorem irure proident laborum et eiusmod aliqua. Aliquip deserunt voluptate magna ut quis magna dolor in dolore. Commodo adipisicing excepteur occaecat aute nisi in. Est aute ad ut incididunt anim ea commodo. Sunt excepteur duis sunt est laborum magna Lorem ullamco exercitation dolore irure.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'AAT-6453', + barcode: '8501386761670', + brand: '5913ee46-a497-41db-a118-ee506011529f', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 38, + reserved: 3, + cost: 364.64, + basePrice: 806, + taxPercent: 18, + price: 951.08, + weight: 0.59, + thumbnail: 'assets/images/apps/ecommerce/products/watch-15-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-15-01.jpg', + 'assets/images/apps/ecommerce/products/watch-15-02.jpg', + 'assets/images/apps/ecommerce/products/watch-15-03.jpg', + ], + active: false, + }, + { + id: 'a71f9b10-e884-4aad-9810-29fe10ce6d42', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Lara Ladies Chronograph Watch 40mm 5 ATM', + description: + 'Deserunt non deserunt ut do labore cupidatat duis veniam in non adipisicing officia esse id. Adipisicing Lorem sint excepteur culpa labore consequat incididunt nulla minim amet. Sint do et fugiat laborum exercitation reprehenderit ut non nostrud occaecat nisi et qui dolore. Amet eiusmod nulla est officia ad magna cillum non dolor ullamco officia incididunt.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'AAP-4902', + barcode: '8847387136582', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 40, + reserved: 3, + cost: 525.3, + basePrice: 1303, + taxPercent: 10, + price: 1433.3, + weight: 0.69, + thumbnail: 'assets/images/apps/ecommerce/products/watch-16-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-16-01.jpg', + 'assets/images/apps/ecommerce/products/watch-16-02.jpg', + 'assets/images/apps/ecommerce/products/watch-16-03.jpg', + ], + active: false, + }, + { + id: '149e6db5-4ecc-4021-bc56-08b27514a746', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Lara Ladies Chronograph Watch 40mm 5 ATM', + description: + 'Occaecat proident fugiat consectetur ullamco est. Duis non minim eiusmod magna dolor reprehenderit ad deserunt et qui amet. Tempor cillum dolore veniam Lorem sit ad pariatur et sint. Sunt anim et cupidatat Lorem proident fugiat incididunt incididunt minim non sint. Eiusmod quis et ullamco cillum et veniam do tempor officia sint.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '2300ac48-f268-466a-b765-8b878b6e14a7', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ALV-194', + barcode: '8860845382207', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 20, + reserved: 2, + cost: 670.87, + basePrice: 1537, + taxPercent: 8, + price: 1659.96, + weight: 0.66, + thumbnail: 'assets/images/apps/ecommerce/products/watch-17-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-17-01.jpg', + 'assets/images/apps/ecommerce/products/watch-17-02.jpg', + 'assets/images/apps/ecommerce/products/watch-17-03.jpg', + ], + active: false, + }, + { + id: '655287de-2e24-41f3-a82f-8b08548ecc39', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Zeon Mens Automatic Watch 44mm 10 ATM', + description: + 'Eiusmod magna tempor est est quis eu. Minim irure magna anim mollit non adipisicing aute. Nostrud aute consectetur eu in non laboris excepteur esse esse occaecat officia.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADH-5492', + barcode: '8611606513571', + brand: '2c4d98d8-f334-4125-9596-862515f5526b', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 47, + reserved: 2, + cost: 645.13, + basePrice: 1581, + taxPercent: 10, + price: 1739.1, + weight: 0.54, + thumbnail: 'assets/images/apps/ecommerce/products/watch-18-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-18-01.jpg', + 'assets/images/apps/ecommerce/products/watch-18-02.jpg', + 'assets/images/apps/ecommerce/products/watch-18-03.jpg', + ], + active: true, + }, + { + id: 'c215b427-d840-4537-aea1-a9bdfa49441b', + category: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + name: 'Lara Unisex Automatic Watch 40mm 10 ATM', + description: + 'Excepteur enim non qui consequat sunt exercitation laborum ipsum sunt. Sunt pariatur fugiat voluptate ipsum consectetur do magna culpa labore. Cupidatat non ex labore incididunt aliquip commodo est in. Consectetur mollit nisi aliquip cupidatat do laborum est ullamco velit aliqua fugiat qui adipisicing. Aute reprehenderit quis id sint nulla.', + tags: [ + '8ec8f60d-552f-4216-9f11-462b95b1d306', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'AAT-6702', + barcode: '8330223562386', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 21, + reserved: 3, + cost: 704.26, + basePrice: 1733, + taxPercent: 10, + price: 1906.3, + weight: 0.84, + thumbnail: 'assets/images/apps/ecommerce/products/watch-19-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-19-01.jpg', + 'assets/images/apps/ecommerce/products/watch-19-02.jpg', + 'assets/images/apps/ecommerce/products/watch-19-03.jpg', + ], + active: true, + }, + { + id: '8b1d9366-891e-49cd-aafb-ac65ce2741e2', + category: '07986d93-d4eb-4de1-9448-2538407f7254', + name: 'Zeon Ladies Automatic Watch 40mm 10 ATM', + description: + 'Reprehenderit magna reprehenderit ex mollit Lorem labore ut. Duis consectetur aliqua cillum occaecat quis ex excepteur fugiat nulla nisi dolor minim. Elit voluptate exercitation nulla et ut adipisicing esse eu nisi amet eu. Ut cillum ipsum quis fugiat proident Lorem est aute ipsum sint dolore consequat.', + tags: [ + '3baea410-a7d6-4916-b79a-bdce50c37f95', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'EDH-5599', + barcode: '8309212335274', + brand: '2c4d98d8-f334-4125-9596-862515f5526b', + vendor: '05ebb527-d733-46a9-acfb-a4e4ec960024', + stock: 35, + reserved: 2, + cost: 712.66, + basePrice: 1711, + taxPercent: 30, + price: 2224.3, + weight: 0.47, + thumbnail: 'assets/images/apps/ecommerce/products/watch-20-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-20-01.jpg', + 'assets/images/apps/ecommerce/products/watch-20-02.jpg', + 'assets/images/apps/ecommerce/products/watch-20-03.jpg', + ], + active: false, + }, + { + id: '54e29534-518b-4006-b72a-f21fac6c4d5e', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Lara Mens Chronograph Watch 44mm 10 ATM', + description: + 'Officia eu magna eu amet fugiat qui ullamco eu. Occaecat dolore minim ad tempor consequat adipisicing non Lorem consequat. In nostrud incididunt adipisicing in. Irure occaecat aliquip deserunt minim officia ad excepteur do commodo magna.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ADP-3719', + barcode: '8879167838673', + brand: 'f9987124-7ada-4b93-bef7-35280b3ddbd7', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 28, + reserved: 3, + cost: 374.38, + basePrice: 749, + taxPercent: 8, + price: 808.92, + weight: 0.52, + thumbnail: 'assets/images/apps/ecommerce/products/watch-21-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-21-01.jpg', + 'assets/images/apps/ecommerce/products/watch-21-02.jpg', + 'assets/images/apps/ecommerce/products/watch-21-03.jpg', + ], + active: false, + }, + { + id: '6a5726e8-c467-45ea-92ab-d83235a06405', + category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de', + name: 'Premera Mens Chronograph Watch 44mm 10 ATM', + description: + 'Duis id consequat ex officia nisi. Et reprehenderit tempor sunt nostrud. Duis dolore tempor anim non duis qui aute magna officia. Ullamco proident esse enim amet nostrud occaecat veniam. Nostrud ea eiusmod laborum id laborum veniam nulla. Voluptate proident ullamco exercitation id consequat dolore id pariatur esse nulla consectetur.', + tags: [ + '167190fa-51b4-45fc-a742-8ce1b33d24ea', + '7d6dd47e-7472-4f8b-93d4-46c114c44533', + '8837b93f-388b-43cc-851d-4ca8f23f3a61', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'ATH-3399', + barcode: '8356410903599', + brand: '5913ee46-a497-41db-a118-ee506011529f', + vendor: '987dd10a-43b1-49f9-bfd9-05bb2dbc7029', + stock: 20, + reserved: 2, + cost: 444.68, + basePrice: 1103, + taxPercent: 18, + price: 1301.54, + weight: 0.56, + thumbnail: 'assets/images/apps/ecommerce/products/watch-22-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-22-01.jpg', + 'assets/images/apps/ecommerce/products/watch-22-02.jpg', + 'assets/images/apps/ecommerce/products/watch-22-03.jpg', + ], + active: false, + }, + { + id: 'd7d1d6df-e91f-4c53-982a-2720bc2b4cdd', + category: 'ad12aa94-3863-47f8-acab-a638ef02a3e9', + name: 'Capmia Unisex Automatic Watch 40mm 10 ATM', + description: + 'Voluptate consectetur nisi aliquip cupidatat sunt labore. Adipisicing voluptate tempor sunt eu irure cupidatat laboris. Enim aliquip aute sit non laborum Lorem in enim duis eu deserunt. Laboris magna irure aute ut proident fugiat laborum aliquip tempor nostrud id. Et esse cupidatat sunt ullamco reprehenderit enim dolore ea in do esse esse id.', + tags: [ + '8ec8f60d-552f-4216-9f11-462b95b1d306', + '0fc39efd-f640-41f8-95a5-3f1d749df200', + '8f868ddb-d4a2-461d-bc3b-d7c8668687c3', + '0b11b742-3125-4d75-9a6f-84af7fde1969', + 'b1286f3a-e2d0-4237-882b-f0efc0819ec3', + ], + sku: 'EAV-4030', + barcode: '8545771786193', + brand: '61d52c2a-8947-4a2c-8c35-f36baef45b96', + vendor: '998b0c07-abfd-4ba3-8de1-7563ef3c4d57', + stock: 23, + reserved: 3, + cost: 538.72, + basePrice: 1213, + taxPercent: 10, + price: 1334.3, + weight: 0.75, + thumbnail: 'assets/images/apps/ecommerce/products/watch-23-thumb.jpg', + images: [ + 'assets/images/apps/ecommerce/products/watch-23-01.jpg', + 'assets/images/apps/ecommerce/products/watch-23-02.jpg', + 'assets/images/apps/ecommerce/products/watch-23-03.jpg', + ], + active: true, + }, +]; diff --git a/src/app/mock-api/apps/notes/api.ts b/src/app/mock-api/apps/notes/api.ts new file mode 100644 index 0000000..9b87320 --- /dev/null +++ b/src/app/mock-api/apps/notes/api.ts @@ -0,0 +1,215 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service'; +import { + labels as labelsData, + notes as notesData, +} from 'app/mock-api/apps/notes/data'; +import { FuseMockApiUtils } from '@fuse/lib/mock-api'; + +@Injectable({ + providedIn: 'root', +}) +export class NotesMockApi { + private _labels: any[] = labelsData; + private _notes: any[] = notesData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Labels - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/notes/labels') + .reply(() => [200, cloneDeep(this._labels)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Labels - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/apps/notes/labels') + .reply(({ request }) => { + // Create a new label + const label = { + id: FuseMockApiUtils.guid(), + title: request.body.title, + }; + + // Update the labels + this._labels.push(label); + + return [200, cloneDeep(this._labels)]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Labels - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/notes/labels') + .reply(({ request }) => { + // Get label + const updatedLabel = request.body.label; + + // Update the label + this._labels = this._labels.map((label) => { + if (label.id === updatedLabel.id) { + return { + ...label, + title: updatedLabel.title, + }; + } + + return label; + }); + + return [200, cloneDeep(this._labels)]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Labels - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/notes/labels') + .reply(({ request }) => { + // Get label id + const id = request.params.get('id'); + + // Delete the label + this._labels = this._labels.filter((label: any) => label.id !== id); + + // Go through notes and delete the label + this._notes = this._notes.map((note: any) => ({ + ...note, + labels: note.labels.filter((item: any) => item !== id), + })); + + return [200, cloneDeep(this._labels)]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Note Tasks - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/apps/notes/tasks') + .reply(({ request }) => { + // Get note and task + let updatedNote = request.body.note; + const task = request.body.task; + + // Update the note + this._notes = this._notes.map((note) => { + if (note.id === updatedNote.id) { + // Update the tasks + if (!note.tasks) { + note.tasks = []; + } + + note.tasks.push({ + id: FuseMockApiUtils.guid(), + content: task, + completed: false, + }); + + // Update the updatedNote with the new task + updatedNote = cloneDeep(note); + + return { + ...note, + }; + } + + return note; + }); + + return [200, updatedNote]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Notes - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/apps/notes/all').reply(() => { + // Clone the labels and notes + const labels = cloneDeep(this._labels); + let notes = cloneDeep(this._notes); + + // Attach the labels to the notes + notes = notes.map((note: any) => ({ + ...note, + labels: note.labels.map((labelId: any) => + labels.find((label: any) => label.id === labelId) + ), + })); + + return [200, notes]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Notes - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onPost('api/apps/notes').reply(({ request }) => { + // Get note + const note = request.body.note; + + // Add an id + note.id = FuseMockApiUtils.guid(); + + // Push the note + this._notes.push(note); + + return [200, note]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Notes - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onPatch('api/apps/notes').reply(({ request }) => { + // Get note + const updatedNote = request.body.updatedNote; + + // Update the note + this._notes = this._notes.map((note) => { + if (note.id === updatedNote.id) { + return { + ...updatedNote, + }; + } + + return note; + }); + + return [200, updatedNote]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Notes - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onDelete('api/apps/notes').reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the note and delete it + this._notes.forEach((item, index) => { + if (item.id === id) { + this._notes.splice(index, 1); + } + }); + + // Return the response + return [200, true]; + }); + } +} diff --git a/src/app/mock-api/apps/notes/data.ts b/src/app/mock-api/apps/notes/data.ts new file mode 100644 index 0000000..6119a4c --- /dev/null +++ b/src/app/mock-api/apps/notes/data.ts @@ -0,0 +1,315 @@ +/* eslint-disable */ +import * as moment from 'moment'; + +export const labels = [ + { + id: 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0', + title: 'Family', + }, + { + id: 'e2f749f5-41ed-49d0-a92a-1c83d879e371', + title: 'Work', + }, + { + id: 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528', + title: 'Tasks', + }, + { + id: '6c288794-47eb-4605-8bdf-785b61a449d3', + title: 'Priority', + }, + { + id: 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6', + title: 'Personal', + }, + { + id: '2dc11344-3507-48e0-83d6-1c047107f052', + title: 'Friends', + }, +]; + +export const notes = [ + { + id: '8f011ac5-b71c-4cd7-a317-857dcd7d85e0', + title: '', + content: 'Find a new company name', + tasks: null, + image: null, + reminder: null, + labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'], + archived: false, + createdAt: moment().hour(10).minute(19).subtract(98, 'day').toISOString(), + updatedAt: null, + }, + { + id: 'ced0a1ce-051d-41a3-b080-e2161e4ae621', + title: '', + content: 'Send the photos of last summer to John', + tasks: null, + image: 'assets/images/cards/14-640x480.jpg', + reminder: null, + labels: [ + 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6', + 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528', + ], + archived: false, + createdAt: moment().hour(15).minute(37).subtract(80, 'day').toISOString(), + updatedAt: null, + }, + { + id: 'd3ac02a9-86e4-4187-bbd7-2c965518b3a3', + title: '', + content: 'Update the design of the theme', + tasks: null, + image: null, + reminder: null, + labels: ['6c288794-47eb-4605-8bdf-785b61a449d3'], + archived: false, + createdAt: moment().hour(19).minute(27).subtract(74, 'day').toISOString(), + updatedAt: moment().hour(15).minute(36).subtract(50, 'day').toISOString(), + }, + { + id: '89861bd4-0144-4bb4-8b39-332ca10371d5', + title: '', + content: 'Theming support for all apps', + tasks: null, + image: null, + reminder: moment().hour(12).minute(34).add(50, 'day').toISOString(), + labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'], + archived: false, + createdAt: moment().hour(12).minute(34).subtract(59, 'day').toISOString(), + updatedAt: null, + }, + { + id: 'ffd20f3c-2d43-4c6b-8021-278032fc9e92', + title: 'Gift Ideas', + content: + "Stephanie's birthday is coming and I need to pick a present for her. Take a look at the below list and buy one of them (or all of them)", + tasks: [ + { + id: '330a924f-fb51-48f6-a374-1532b1dd353d', + content: 'Scarf', + completed: false, + }, + { + id: '781855a6-2ad2-4df4-b0af-c3cb5f302b40', + content: 'A new bike helmet', + completed: true, + }, + { + id: 'bcb8923b-33cd-42c2-9203-170994fa24f5', + content: 'Necklace', + completed: false, + }, + { + id: '726bdf6e-5cd7-408a-9a4f-0d7bb98c1c4b', + content: 'Flowers', + completed: false, + }, + ], + image: null, + reminder: null, + labels: ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'], + archived: false, + createdAt: moment().hour(16).minute(4).subtract(47, 'day').toISOString(), + updatedAt: null, + }, + { + id: '71d223bb-abab-4183-8919-cd3600a950b4', + title: 'Shopping list', + content: '', + tasks: [ + { + id: 'e3cbc986-641c-4448-bc26-7ecfa0549c22', + content: 'Bread', + completed: true, + }, + { + id: '34013111-ab2c-4b2f-9352-d2ae282f57d3', + content: 'Milk', + completed: false, + }, + { + id: '0fbdea82-cc79-4433-8ee4-54fd542c380d', + content: 'Onions', + completed: false, + }, + { + id: '66490222-743e-4262-ac91-773fcd98a237', + content: 'Coffee', + completed: true, + }, + { + id: 'ab367215-d06a-48b0-a7b8-e161a63b07bd', + content: 'Toilet Paper', + completed: true, + }, + ], + image: null, + reminder: moment().hour(10).minute(44).subtract(35, 'day').toISOString(), + labels: ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'], + archived: false, + createdAt: moment().hour(10).minute(44).subtract(35, 'day').toISOString(), + updatedAt: null, + }, + { + id: '11fbeb98-ae5e-41ad-bed6-330886fd7906', + title: 'Keynote Schedule', + content: '', + tasks: [ + { + id: '2711bac1-7d8a-443a-a4fe-506ef51d3fcb', + content: 'Breakfast', + completed: true, + }, + { + id: 'e3a2d675-a3e5-4cef-9205-feeccaf949d7', + content: 'Opening ceremony', + completed: true, + }, + { + id: '7a721b6d-9d85-48e0-b6c3-f927079af582', + content: 'Talk 1: How we did it!', + completed: true, + }, + { + id: 'bdb4d5cd-5bb8-45e2-9186-abfd8307e429', + content: 'Talk 2: How can you do it!', + completed: false, + }, + { + id: 'c8293bb4-8ab4-4310-bbc2-52ecf8ec0c54', + content: 'Lunch break', + completed: false, + }, + ], + image: null, + reminder: moment().hour(11).minute(27).subtract(14, 'day').toISOString(), + labels: [ + 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528', + 'e2f749f5-41ed-49d0-a92a-1c83d879e371', + ], + archived: false, + createdAt: moment().hour(11).minute(27).subtract(24, 'day').toISOString(), + updatedAt: null, + }, + { + id: 'd46dee8b-8761-4b6d-a1df-449d6e6feb6a', + title: '', + content: "Organize the dad's surprise retirement party", + tasks: null, + image: null, + reminder: moment().hour(14).minute(56).subtract(25, 'day').toISOString(), + labels: ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'], + archived: false, + createdAt: moment().hour(14).minute(56).subtract(20, 'day').toISOString(), + updatedAt: null, + }, + { + id: '6bc9f002-1675-417c-93c4-308fba39023e', + title: 'Plan the road trip', + content: '', + tasks: null, + image: 'assets/images/cards/17-640x480.jpg', + reminder: null, + labels: [ + '2dc11344-3507-48e0-83d6-1c047107f052', + 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528', + ], + archived: false, + createdAt: moment().hour(9).minute(32).subtract(15, 'day').toISOString(), + updatedAt: moment().hour(17).minute(6).subtract(12, 'day').toISOString(), + }, + { + id: '15188348-78aa-4ed6-b5c2-028a214ba987', + title: 'Office Address', + content: '933 8th Street Stamford, CT 06902', + tasks: null, + image: null, + reminder: null, + labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'], + archived: false, + createdAt: moment().hour(20).minute(5).subtract(12, 'day').toISOString(), + updatedAt: null, + }, + { + id: '1dbfc685-1a0a-4070-9ca7-ed896c523037', + title: 'Tasks', + content: '', + tasks: [ + { + id: '004638bf-3ee6-47a5-891c-3be7b9f3df09', + content: 'Wash the dishes', + completed: true, + }, + { + id: '86e6820b-1ae3-4c14-a13e-35605a0d654b', + content: 'Walk the dog', + completed: false, + }, + ], + image: null, + reminder: moment().hour(13).minute(43).subtract(2, 'day').toISOString(), + labels: ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'], + archived: false, + createdAt: moment().hour(13).minute(43).subtract(7, 'day').toISOString(), + updatedAt: null, + }, + { + id: '49548409-90a3-44d4-9a9a-f5af75aa9a66', + title: '', + content: 'Dinner with parents', + tasks: null, + image: null, + reminder: null, + labels: [ + 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0', + '6c288794-47eb-4605-8bdf-785b61a449d3', + ], + archived: false, + createdAt: moment().hour(7).minute(12).subtract(2, 'day').toISOString(), + updatedAt: null, + }, + { + id: 'c6d13a35-500d-4491-a3f3-6ca05d6632d3', + title: '', + content: 'Re-fill the medicine cabinet', + tasks: null, + image: null, + reminder: null, + labels: [ + 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6', + '6c288794-47eb-4605-8bdf-785b61a449d3', + ], + archived: true, + createdAt: moment().hour(17).minute(14).subtract(100, 'day').toISOString(), + updatedAt: null, + }, + { + id: 'c6d13a35-500d-4491-a3f3-6ca05d6632d3', + title: '', + content: 'Update the icons pack', + tasks: null, + image: null, + reminder: null, + labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'], + archived: true, + createdAt: moment().hour(10).minute(29).subtract(85, 'day').toISOString(), + updatedAt: null, + }, + { + id: '46214383-f8e7-44da-aa2e-0b685e0c5027', + title: 'Team Meeting', + content: 'Talk about the future of the web apps', + tasks: null, + image: null, + reminder: null, + labels: [ + 'e2f749f5-41ed-49d0-a92a-1c83d879e371', + 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528', + ], + archived: true, + createdAt: moment().hour(15).minute(30).subtract(69, 'day').toISOString(), + updatedAt: null, + }, +]; diff --git a/src/app/mock-api/apps/scrumboard/api.ts b/src/app/mock-api/apps/scrumboard/api.ts new file mode 100644 index 0000000..b9954bd --- /dev/null +++ b/src/app/mock-api/apps/scrumboard/api.ts @@ -0,0 +1,413 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; +import { + boards as boardsData, + cards as cardsData, + labels as labelsData, + lists as listsData, + members as membersData, +} from 'app/mock-api/apps/scrumboard/data'; + +@Injectable({ + providedIn: 'root', +}) +export class ScrumboardMockApi { + // Private + private _boards: any[] = boardsData; + private _cards: any[] = cardsData; + private _labels: any[] = labelsData; + private _lists: any[] = listsData; + private _members: any[] = membersData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Boards - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/scrumboard/boards') + .reply(({ request }) => { + // Clone the boards + let boards = cloneDeep(this._boards); + + // Go through the boards and inject the members + boards = boards.map((board: any) => ({ + ...board, + members: board.members.map((boardMember: any) => + this._members.find((member: any) => boardMember === member.id) + ), + })); + + return [200, boards]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Board - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/scrumboard/board') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the board + const board = this._boards.find((item: any) => item.id === id); + + // Attach the board lists + board.lists = this._lists + .filter((item: any) => item.boardId === id) + .sort((a, b) => a.position - b.position); + + // Grab all cards that belong to this board and attach labels to them + let cards = this._cards.filter((item: any) => item.boardId === id); + cards = cards.map((card: any) => ({ + ...card, + labels: card.labels.map((cardLabelId: any) => + this._labels.find((label: any) => label.id === cardLabelId) + ), + })); + + // Attach the board cards into corresponding lists + board.lists.forEach((list: any, index: any, array: any) => { + array[index].cards = cards + .filter( + (item: any) => item.boardId === id && item.listId === list.id + ) + .sort((a, b) => a.position - b.position); + }); + + // Attach the board labels + board.labels = this._labels.filter((item: any) => item.boardId === id); + + return [200, cloneDeep(board)]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ List - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/apps/scrumboard/board/list') + .reply(({ request }) => { + // Get the list + const newList = cloneDeep(request.body.list); + + // Generate a new GUID + newList.id = FuseMockApiUtils.guid(); + + // Store the new list + this._lists.push(newList); + + return [200, newList]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ List - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/scrumboard/board/list') + .reply(({ request }) => { + // Get the list + const list = cloneDeep(request.body.list); + + // Prepare the updated list + let updatedList = null; + + // Find the list and update it + this._lists.forEach((item, index, lists) => { + if (item.id === list.id) { + // Update the list + lists[index] = assign({}, lists[index], list); + + // Store the updated list + updatedList = lists[index]; + } + }); + + return [200, updatedList]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Lists - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/scrumboard/board/lists') + .reply(({ request }) => { + // Get the lists + const lists = cloneDeep(request.body.lists); + + // Prepare the updated lists + const updatedLists: any[] = []; + + // Go through the lists + lists.forEach((item: any) => { + // Find the list + const index = this._lists.findIndex( + (list: any) => item.id === list.id + ); + + // Update the list + this._lists[index] = assign({}, this._lists[index], item); + + // Store in the updated lists + updatedLists.push(item); + }); + + return [200, updatedLists]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ List - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/scrumboard/board/list') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the list and delete it + const index = this._lists.findIndex((item: any) => item.id === id); + this._lists.splice(index, 1); + + // Filter out the cards that belonged to the list to delete them + this._cards = this._cards.filter((card: any) => card.listId !== id); + + return [200, true]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Card - PUT + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPut('api/apps/scrumboard/board/card') + .reply(({ request }) => { + // Get the card + const newCard = cloneDeep(request.body.card); + + // Generate a new GUID + newCard.id = FuseMockApiUtils.guid(); + + // Unshift the new card + this._cards.push(newCard); + + return [200, newCard]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Card - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/scrumboard/board/card') + .reply(({ request }) => { + // Get the id and card + const id = request.body.id; + const card = cloneDeep(request.body.card); + + // Prepare the updated card + let updatedCard: any; + + // Go through the labels and leave only ids of them + card.labels = card.labels.map((itemLabel: any) => itemLabel.id); + + // Find the card and update it + this._cards.forEach((item, index, cards) => { + if (item.id === id) { + // Update the card + cards[index] = assign({}, cards[index], card); + + // Store the updated card + updatedCard = cloneDeep(cards[index]); + } + }); + + // Attach the labels of the card + updatedCard.labels = updatedCard.labels.map((cardLabelId: any) => + this._labels.find((label: any) => label.id === cardLabelId) + ); + + return [200, updatedCard]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Cards - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/scrumboard/board/cards') + .reply(({ request }) => { + // Get the cards + const cards = cloneDeep(request.body.cards); + + // Prepare the updated cards + const updatedCards: any[] = []; + + // Go through the cards + cards.forEach((item: any) => { + // Find the card + const index = this._cards.findIndex( + (card: any) => item.id === card.id + ); + + // Go through the labels and leave only ids of them + item.labels = item.labels.map((itemLabel: any) => itemLabel.id); + + // Update the card + this._cards[index] = assign({}, this._cards[index], item); + + // Attach the labels of the card + item.labels = item.labels.map((cardLabelId: any) => + this._labels.find((label: any) => label.id === cardLabelId) + ); + + // Store in the updated cards + updatedCards.push(item); + }); + + return [200, updatedCards]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Card - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/scrumboard/board/card') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the card and delete it + const index = this._cards.findIndex((item: any) => item.id === id); + this._cards.splice(index, 1); + + return [200, true]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Card Positions - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/scrumboard/board/card/positions') + .reply(({ request }) => { + // Get the cards + const cards = request.body.cards; + + // Go through the cards + this._cards.forEach((card) => { + // Find this card's index within the cards array that comes with the request + // and assign that index as the new position number for the card + card.position = cards.findIndex( + (item: any) => + item.id === card.id && + item.listId === card.listId && + item.boardId === card.boardId + ); + }); + + // Clone the cards + const updatedCards = cloneDeep(this._cards); + + return [200, updatedCards]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Labels - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/scrumboard/board/labels') + .reply(({ request }) => { + // Get the board id + const boardId = request.params.get('boardId'); + + // Filter the labels + const labels = this._labels.filter( + (item: any) => item.boardId === boardId + ); + + return [200, cloneDeep(labels)]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Label - PUT + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPut('api/apps/scrumboard/board/label') + .reply(({ request }) => { + // Get the label + const newLabel = cloneDeep(request.body.label); + + // Generate a new GUID + newLabel.id = FuseMockApiUtils.guid(); + + // Unshift the new label + this._labels.unshift(newLabel); + + return [200, newLabel]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Label - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/scrumboard/board/label') + .reply(({ request }) => { + // Get the id and label + const id = request.body.id; + const label = cloneDeep(request.body.label); + + // Prepare the updated label + let updatedLabel = null; + + // Find the label and update it + this._labels.forEach((item, index, labels) => { + if (item.id === id) { + // Update the label + labels[index] = assign({}, labels[index], label); + + // Store the updated label + updatedLabel = labels[index]; + } + }); + + return [200, updatedLabel]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Label - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/scrumboard/board/label') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the label and delete it + const index = this._labels.findIndex((item: any) => item.id === id); + this._labels.splice(index, 1); + + // Get the cards that have the label + const cardsWithLabel = this._cards.filter( + (card: any) => card.labels.indexOf(id) > -1 + ); + + // Iterate through them and remove the label + cardsWithLabel.forEach((card) => { + card.tags.splice(card.tags.indexOf(id), 1); + }); + + return [200, true]; + }); + } +} diff --git a/src/app/mock-api/apps/scrumboard/data.ts b/src/app/mock-api/apps/scrumboard/data.ts new file mode 100644 index 0000000..d73df5a --- /dev/null +++ b/src/app/mock-api/apps/scrumboard/data.ts @@ -0,0 +1,316 @@ +/* eslint-disable */ +import * as moment from 'moment'; + +export const boards = [ + { + id: '2c82225f-2a6c-45d3-b18a-1132712a4234', + title: 'Admin Dashboard', + description: 'Roadmap for the new project', + icon: 'heroicons_outline:template', + lastActivity: moment().startOf('day').subtract(1, 'day').toISOString(), + members: [ + '9c510cf3-460d-4a8c-b3be-bcc3db578c08', + 'baa88231-0ee6-4028-96d5-7f187e0f4cd5', + '18bb18f3-ea7d-4465-8913-e8c9adf6f568', + ], + }, + { + id: '0168b519-3dab-4b46-b2ea-0e678e38a583', + title: 'Weekly Planning', + description: 'Job related tasks for the week', + icon: 'heroicons_outline:calendar', + lastActivity: moment().startOf('day').subtract(2, 'days').toISOString(), + members: [ + '79ebb9ee-1e57-4706-810c-03edaec8f56d', + '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735', + '5bf7ed5b-8b04-46b7-b364-005958b7d82e', + 'd1f612e6-3e3b-481f-a8a9-f917e243b06e', + 'fe0fec0d-002b-406f-87ab-47eb87ba577c', + '23a47d2c-c6cb-40cc-af87-e946a9df5028', + '6726643d-e8dc-42fa-83a6-b4ec06921a6b', + '0d1eb062-13d5-4286-b8d4-e0bea15f3d56', + ], + }, + { + id: 'bc7db965-3c4f-4233-abf5-69bd70c3c175', + title: 'Personal Tasks', + description: 'Personal tasks around the house', + icon: 'heroicons_outline:home', + lastActivity: moment().startOf('day').subtract(1, 'week').toISOString(), + members: ['6f6a1c34-390b-4b2e-97c8-ff0e0d787839'], + }, +]; +export const lists = [ + { + id: 'a2df7786-519c-485a-a85f-c09a61cc5f37', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + position: 65536, + title: 'To do', + }, + { + id: '83ca2a34-65af-49c0-a42e-94a34003fcf2', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + position: 131072, + title: 'In progress', + }, + { + id: 'a85ea483-f8f7-42d9-a314-3fed6aac22ab', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + position: 196608, + title: 'In review', + }, + { + id: '34cbef38-5687-4813-bd66-141a6df6d832', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + position: 262144, + title: 'Completed', + }, +]; +export const cards = [ + { + id: 'e74e66e9-fe0f-441e-a8ce-28ed6eccc48d', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37', + position: 65536, + title: + 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards', + description: + 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards. Example that showcase all of the available bits on the card with a fairly long title compared to other cards.', + labels: [ + 'e0175175-2784-48f1-a519-a1d2e397c9b3', + '51779701-818a-4a53-bc16-137c3bd7a564', + 'e8364d69-9595-46ce-a0f9-ce428632a0ac', + 'caff9c9b-a198-4564-b1f4-8b3df1d345bb', + 'f9eeb436-13a3-4208-a239-0d555960a567', + ], + dueDate: moment().subtract(10, 'days').startOf('day').toISOString(), + }, + { + id: 'ed58add1-45a7-41db-887d-3ca7ee7f2719', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37', + position: 131072, + title: 'Do a research about most needed admin applications', + labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'], + dueDate: null, + }, + { + id: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37', + position: 196608, + title: 'Implement the Project dashboard', + labels: ['caff9c9b-a198-4564-b1f4-8b3df1d345bb'], + dueDate: moment().startOf('day').toISOString(), + }, + { + id: '6da8747f-b474-4c9a-9eba-5ef212285500', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37', + position: 262144, + title: 'Implement the Analytics dashboard', + labels: ['caff9c9b-a198-4564-b1f4-8b3df1d345bb'], + dueDate: moment().subtract(1, 'day').startOf('day').toISOString(), + }, + { + id: '94fb1dee-dd83-4cca-acdd-02e96d3cc4f1', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: '83ca2a34-65af-49c0-a42e-94a34003fcf2', + position: 65536, + title: 'Analytics dashboard design', + labels: ['e8364d69-9595-46ce-a0f9-ce428632a0ac'], + dueDate: null, + }, + { + id: 'fc16f7d8-957d-43ed-ba85-20f99b5ce011', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: '83ca2a34-65af-49c0-a42e-94a34003fcf2', + position: 131072, + title: 'Project dashboard design', + labels: ['e8364d69-9595-46ce-a0f9-ce428632a0ac'], + dueDate: null, + }, + { + id: 'c0b32f1f-64ec-4f8d-8b11-a8dc809df331', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: 'a85ea483-f8f7-42d9-a314-3fed6aac22ab', + position: 65536, + title: 'JWT Auth implementation', + labels: ['caff9c9b-a198-4564-b1f4-8b3df1d345bb'], + dueDate: null, + }, + { + id: '532c2747-be79-464a-9897-6a682bf22b64', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: '34cbef38-5687-4813-bd66-141a6df6d832', + position: 65536, + title: 'Create low fidelity wireframes', + labels: [], + dueDate: null, + }, + { + id: '1d908efe-c830-476e-9e87-d06e30d89bc2', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: '34cbef38-5687-4813-bd66-141a6df6d832', + position: 131072, + title: 'Create high fidelity wireframes', + labels: [], + dueDate: moment().subtract(10, 'day').startOf('day').toISOString(), + }, + { + id: 'b1da11ed-7896-4826-962d-4b7b718896d4', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: '34cbef38-5687-4813-bd66-141a6df6d832', + position: 196608, + title: 'Collect information about most used admin layouts', + labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'], + dueDate: null, + }, + { + id: '3b7f3ceb-107f-42bc-a204-c268c9a56cb4', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: '34cbef38-5687-4813-bd66-141a6df6d832', + position: 262144, + title: 'Do a research about latest UI trends', + labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'], + dueDate: null, + }, + { + id: 'cd7f01c5-a941-4076-8cef-37da0354e643', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + listId: '34cbef38-5687-4813-bd66-141a6df6d832', + position: 327680, + title: 'Learn more about UX', + labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'], + dueDate: null, + }, +]; +export const labels = [ + { + id: 'e0175175-2784-48f1-a519-a1d2e397c9b3', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + title: 'Research', + }, + { + id: '51779701-818a-4a53-bc16-137c3bd7a564', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + title: 'Wireframing', + }, + { + id: 'e8364d69-9595-46ce-a0f9-ce428632a0ac', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + title: 'Design', + }, + { + id: 'caff9c9b-a198-4564-b1f4-8b3df1d345bb', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + title: 'Development', + }, + { + id: 'f9eeb436-13a3-4208-a239-0d555960a567', + boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', + title: 'Bug', + }, +]; +export const members = [ + { + id: '6f6a1c34-390b-4b2e-97c8-ff0e0d787839', + name: 'Angeline Vinson', + avatar: 'assets/images/avatars/female-01.jpg', + }, + { + id: '4ce4be48-c8c0-468d-9df8-ddfda14cdb37', + name: 'Roseann Greer', + avatar: 'assets/images/avatars/female-02.jpg', + }, + { + id: '9c510cf3-460d-4a8c-b3be-bcc3db578c08', + name: 'Lorraine Barnett', + avatar: 'assets/images/avatars/female-03.jpg', + }, + { + id: '7ec887d9-b01a-4057-b5dc-aaed18637cc1', + name: 'Middleton Bradford', + avatar: 'assets/images/avatars/male-01.jpg', + }, + { + id: '74975a82-addb-427b-9b43-4d2e03331b68', + name: 'Sue Hays', + avatar: 'assets/images/avatars/female-04.jpg', + }, + { + id: '18bb18f3-ea7d-4465-8913-e8c9adf6f568', + name: 'Keith Neal', + avatar: 'assets/images/avatars/male-02.jpg', + }, + { + id: 'baa88231-0ee6-4028-96d5-7f187e0f4cd5', + name: 'Wilkins Gilmore', + avatar: 'assets/images/avatars/male-03.jpg', + }, + { + id: '0d1eb062-13d5-4286-b8d4-e0bea15f3d56', + name: 'Baldwin Stein', + avatar: 'assets/images/avatars/male-04.jpg', + }, + { + id: '5bf7ed5b-8b04-46b7-b364-005958b7d82e', + name: 'Bobbie Cohen', + avatar: 'assets/images/avatars/female-05.jpg', + }, + { + id: '93b1a72b-e2db-4f77-82d6-272047433508', + name: 'Melody Peters', + avatar: 'assets/images/avatars/female-06.jpg', + }, + { + id: 'd1f612e6-3e3b-481f-a8a9-f917e243b06e', + name: 'Marquez Ryan', + avatar: 'assets/images/avatars/male-05.jpg', + }, + { + id: '79ebb9ee-1e57-4706-810c-03edaec8f56d', + name: 'Roberta Briggs', + avatar: 'assets/images/avatars/female-07.jpg', + }, + { + id: '6726643d-e8dc-42fa-83a6-b4ec06921a6b', + name: 'Robbie Buckley', + avatar: 'assets/images/avatars/female-08.jpg', + }, + { + id: '8af617d7-898e-4992-beda-d5ac1d7ceda4', + name: 'Garcia Whitney', + avatar: 'assets/images/avatars/male-06.jpg', + }, + { + id: 'bcff44c4-9943-4adc-9049-08b1d922a658', + name: 'Spencer Pate', + avatar: 'assets/images/avatars/male-07.jpg', + }, + { + id: '54160ca2-29c9-4475-88a1-31a9307ad913', + name: 'Monica Mcdaniel', + avatar: 'assets/images/avatars/female-09.jpg', + }, + { + id: '51286603-3a43-444e-9242-f51fe57d5363', + name: 'Mcmillan Durham', + avatar: 'assets/images/avatars/male-08.jpg', + }, + { + id: '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735', + name: 'Jeoine Hebert', + avatar: 'assets/images/avatars/female-10.jpg', + }, + { + id: 'fe0fec0d-002b-406f-87ab-47eb87ba577c', + name: 'Susanna Kline', + avatar: 'assets/images/avatars/female-11.jpg', + }, + { + id: '23a47d2c-c6cb-40cc-af87-e946a9df5028', + name: 'Suzette Singleton', + avatar: 'assets/images/avatars/female-12.jpg', + }, +]; diff --git a/src/app/mock-api/apps/tasks/api.ts b/src/app/mock-api/apps/tasks/api.ts new file mode 100644 index 0000000..d313ec8 --- /dev/null +++ b/src/app/mock-api/apps/tasks/api.ts @@ -0,0 +1,283 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiUtils } from '@fuse/lib/mock-api/mock-api.utils'; +import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service'; +import { + tags as tagsData, + tasks as tasksData, +} from 'app/mock-api/apps/tasks/data'; + +@Injectable({ + providedIn: 'root', +}) +export class TasksMockApi { + private _tags: any[] = tagsData; + private _tasks: any[] = tasksData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Tags - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/tasks/tags') + .reply(() => [200, cloneDeep(this._tags)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Tags - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/apps/tasks/tag') + .reply(({ request }) => { + // Get the tag + const newTag = cloneDeep(request.body.tag); + + // Generate a new GUID + newTag.id = FuseMockApiUtils.guid(); + + // Unshift the new tag + this._tags.unshift(newTag); + + return [200, newTag]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Tags - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/tasks/tag') + .reply(({ request }) => { + // Get the id and tag + const id = request.body.id; + const tag = cloneDeep(request.body.tag); + + // Prepare the updated tag + let updatedTag = null; + + // Find the tag and update it + this._tags.forEach((item, index, tags) => { + if (item.id === id) { + // Update the tag + tags[index] = assign({}, tags[index], tag); + + // Store the updated tag + updatedTag = tags[index]; + } + }); + + return [200, updatedTag]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Tag - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/tasks/tag') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the tag and delete it + const index = this._tags.findIndex((item: any) => item.id === id); + this._tags.splice(index, 1); + + // Get the tasks that have the tag + const tasksWithTag = this._tasks.filter( + (task: any) => task.tags.indexOf(id) > -1 + ); + + // Iterate through them and remove the tag + tasksWithTag.forEach((task) => { + task.tags.splice(task.tags.indexOf(id), 1); + }); + + return [200, true]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Tasks - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/apps/tasks/all').reply(() => { + // Clone the tasks + const tasks = cloneDeep(this._tasks); + + // Sort the tasks by order + tasks.sort((a, b) => a.order - b.order); + + return [200, tasks]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Tasks Search - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/tasks/search') + .reply(({ request }) => { + // Get the search query + const query = request.params.get('query'); + + // Prepare the search results + let results; + + // If the query exists... + if (query) { + // Clone the tasks + let tasks = cloneDeep(this._tasks); + + // Filter the tasks + tasks = tasks.filter( + (task: any) => + (task.title && + task.title.toLowerCase().includes(query.toLowerCase())) || + (task.notes && + task.notes.toLowerCase().includes(query.toLowerCase())) + ); + + // Mark the found chars + tasks.forEach((task) => { + const re = new RegExp( + '(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', + 'ig' + ); + task.title = task.title.replace(re, '$1'); + }); + + // Set them as the search result + results = tasks; + } + // Otherwise, set the results to null + else { + results = null; + } + + return [200, results]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Tasks Orders - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/tasks/order') + .reply(({ request }) => { + // Get the tasks + const tasks = request.body.tasks; + + // Go through the tasks + this._tasks.forEach((task) => { + // Find this task's index within the tasks array that comes with the request + // and assign that index as the new order number for the task + task.order = tasks.findIndex((item: any) => item.id === task.id); + }); + + // Clone the tasks + const updatedTasks = cloneDeep(this._tasks); + + return [200, updatedTasks]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Task - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/apps/tasks/task') + .reply(({ request }) => { + // Get the id from the params + const id = request.params.get('id'); + + // Clone the tasks + const tasks = cloneDeep(this._tasks); + + // Find the task + const task = tasks.find((item: any) => item.id === id); + + return [200, task]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Task - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/apps/tasks/task') + .reply(({ request }) => { + // Generate a new task + const newTask = { + id: FuseMockApiUtils.guid(), + type: request.body.type, + title: '', + notes: null, + completed: false, + dueDate: null, + priority: 1, + tags: [], + order: 0, + }; + + // Unshift the new task + this._tasks.unshift(newTask); + + // Go through the tasks and update their order numbers + this._tasks.forEach((task, index) => { + task.order = index; + }); + + return [200, newTask]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Task - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/apps/tasks/task') + .reply(({ request }) => { + // Get the id and task + const id = request.body.id; + const task = cloneDeep(request.body.task); + + // Prepare the updated task + let updatedTask = null; + + // Find the task and update it + this._tasks.forEach((item, index, tasks) => { + if (item.id === id) { + // Update the task + tasks[index] = assign({}, tasks[index], task); + + // Store the updated task + updatedTask = tasks[index]; + } + }); + + return [200, updatedTask]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Task - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/apps/tasks/task') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Find the task and delete it + const index = this._tasks.findIndex((item: any) => item.id === id); + this._tasks.splice(index, 1); + + return [200, true]; + }); + } +} diff --git a/src/app/mock-api/apps/tasks/data.ts b/src/app/mock-api/apps/tasks/data.ts new file mode 100644 index 0000000..ab33b4f --- /dev/null +++ b/src/app/mock-api/apps/tasks/data.ts @@ -0,0 +1,957 @@ +/* eslint-disable */ +export const tags = [ + { + id: 'a0bf42ca-c3a5-47be-8341-b9c0bb8ef270', + title: 'Api', + }, + { + id: 'c6058d0d-a4b0-4453-986a-9d249ec230b1', + title: 'Frontend', + }, + { + id: 'd3ef4226-ef2c-43b0-a986-3e3e07f32799', + title: 'Bug', + }, + { + id: '51483dd3-cb98-4400-9128-4bd66b455807', + title: 'Backend', + }, + { + id: '91658b8a-f382-4b0c-a53f-e9390351c2c5', + title: 'Urgent', + }, + { + id: '2b884143-419a-45ca-a7f6-48f99f4e7798', + title: 'Discuss', + }, +]; +export const members = [ + { + id: '65f1c421-83c5-4cdf-99da-d97794328679', + name: 'Angeline Vinson', + avatar: 'assets/images/avatars/female-01.jpg', + }, + { + id: '88a2a76c-0e6f-49da-b617-46d7c3b6e64d', + name: 'Roseann Greer', + avatar: 'assets/images/avatars/female-02.jpg', + }, + { + id: '6ab7751e-6579-40af-9171-231c0fd6a993', + name: 'Lorraine Barnett', + avatar: 'assets/images/avatars/female-03.jpg', + }, + { + id: '3e353312-6a9b-46af-adda-5061b06e806b', + name: 'Middleton Bradford', + avatar: 'assets/images/avatars/male-01.jpg', + }, + { + id: '3a23baf7-2db8-4ef5-8d49-86d3e708dff5', + name: 'Sue Hays', + avatar: 'assets/images/avatars/female-04.jpg', + }, + { + id: 'e62ab50e-90d3-4ed7-a911-093bb44d0c50', + name: 'Keith Neal', + avatar: 'assets/images/avatars/male-02.jpg', + }, + { + id: '368aab1e-ebce-43ba-8925-4cf13937867b', + name: 'Wilkins Gilmore', + avatar: 'assets/images/avatars/male-03.jpg', + }, + { + id: 'ef44b39b-3272-45f5-a15e-264c3b2d118e', + name: 'Baldwin Stein', + avatar: 'assets/images/avatars/male-04.jpg', + }, + { + id: '7f5db993-ec36-412f-9db3-16d076a98807', + name: 'Bobbie Cohen', + avatar: 'assets/images/avatars/female-05.jpg', + }, + { + id: 'e2c81627-a8a1-4bbc-9adc-ac4281e040d4', + name: 'Melody Peters', + avatar: 'assets/images/avatars/female-06.jpg', + }, + { + id: 'a21ec32e-54ba-480b-afdc-d1cbe18a96fd', + name: 'Marquez Ryan', + avatar: 'assets/images/avatars/male-05.jpg', + }, + { + id: '45e09584-1a54-40e6-8210-1de4d1c05593', + name: 'Roberta Briggs', + avatar: 'assets/images/avatars/female-07.jpg', + }, + { + id: '6617b0a3-0ccd-44ea-af78-c6633115d683', + name: 'Robbie Buckley', + avatar: 'assets/images/avatars/female-08.jpg', + }, + { + id: '271e6a06-0d37-433d-bc8d-607b12bcbed9', + name: 'Garcia Whitney', + avatar: 'assets/images/avatars/male-06.jpg', + }, + { + id: '65e15136-5168-4655-8bbc-e3ad8a94bf67', + name: 'Spencer Pate', + avatar: 'assets/images/avatars/male-07.jpg', + }, + { + id: '28dcda24-812d-4086-9638-b28bd85beecc', + name: 'Monica Mcdaniel', + avatar: 'assets/images/avatars/female-09.jpg', + }, + { + id: '56a3e7ce-01da-43fc-ab9f-a8a39fa980de', + name: 'Mcmillan Durham', + avatar: 'assets/images/avatars/male-08.jpg', + }, + { + id: '4d24cf48-a322-4d53-89cb-9140dfd5c6ba', + name: 'Jfuseine Hebert', + avatar: 'assets/images/avatars/female-10.jpg', + }, + { + id: 'b2e97a96-2f15-4e3d-aff5-4ddf2af924d4', + name: 'Susanna Kline', + avatar: 'assets/images/avatars/female-11.jpg', + }, + { + id: '4678ad07-e057-48a9-a5d1-3cf98e722eeb', + name: 'Suzette Singleton', + avatar: 'assets/images/avatars/female-12.jpg', + }, +]; +export const tasks = [ + { + id: 'f65d517a-6f69-4c88-81f5-416f47405ce1', + type: 'section', + title: 'Company internal application v2.0.0', + notes: + 'Magna consectetur culpa duis ad est tempor pariatur velit ullamco aute exercitation magna sunt commodo minim enim aliquip eiusmod ipsum adipisicing magna ipsum reprehenderit lorem magna voluptate magna aliqua culpa.\n\nSit nisi adipisicing pariatur enim enim sunt officia ad labore voluptate magna proident velit excepteur pariatur cillum sit excepteur elit veniam excepteur minim nisi cupidatat proident dolore irure veniam mollit.', + completed: false, + dueDate: '2017-10-18T13:03:37.943Z', + priority: 1, + tags: [ + '91658b8a-f382-4b0c-a53f-e9390351c2c5', + '51483dd3-cb98-4400-9128-4bd66b455807', + ], + assignedTo: null, + subTasks: [ + { + id: '2768a969-a316-449b-bf82-93cff4252cbf', + title: 'Minim irure fugiat ullamco irure', + completed: false, + }, + { + id: '6cc5ac8f-3a02-47e6-ad4b-0bd0222e2717', + title: 'Sint velit ex in adipisicing fugiat', + completed: false, + }, + ], + order: 0, + }, + { + id: '0fcece82-1691-4b98-a9b9-b63218f9deef', + type: 'task', + title: 'Create the landing/marketing page and host it on the beta channel', + notes: + 'Et in lorem qui ipsum deserunt duis exercitation lorem elit qui qui ipsum tempor nulla velit aliquip enim consequat incididunt pariatur duis excepteur elit irure nulla ipsum dolor dolore est.\n\nAute deserunt nostrud id non ipsum do adipisicing laboris in minim officia magna elit minim mollit elit velit veniam lorem pariatur veniam sit excepteur irure commodo excepteur duis quis in.', + completed: false, + dueDate: null, + priority: 0, + tags: [], + assignedTo: 'e2c81627-a8a1-4bbc-9adc-ac4281e040d4', + subTasks: [], + order: 1, + }, + { + id: '2e6971cd-49d5-49f1-8cbd-fba5c71e6062', + type: 'task', + title: 'Move dependency system to Yarn for easier package management', + notes: + 'Id fugiat et cupidatat magna nulla nulla eu cillum officia nostrud dolore in veniam ullamco nulla ex duis est enim nisi aute ipsum velit et laboris est pariatur est culpa.\n\nCulpa sunt ipsum esse quis excepteur enim culpa est voluptate reprehenderit consequat duis officia irure voluptate veniam dolore fugiat dolor est amet nostrud non velit irure do voluptate id sit.', + completed: false, + dueDate: '2019-05-24T03:55:38.969Z', + priority: 0, + tags: [ + 'c6058d0d-a4b0-4453-986a-9d249ec230b1', + '2b884143-419a-45ca-a7f6-48f99f4e7798', + '91658b8a-f382-4b0c-a53f-e9390351c2c5', + ], + assignedTo: '88a2a76c-0e6f-49da-b617-46d7c3b6e64d', + subTasks: [ + { + id: 'b9566b52-82cd-4d2a-b9b6-240c6b44e52b', + title: 'Nulla officia elit adipisicing', + completed: false, + }, + { + id: '76f4dc8d-4803-4d98-b461-367a1d3746a8', + title: 'Magna nisi ut aliquip aliquip amet deserunt', + completed: false, + }, + ], + order: 2, + }, + { + id: '974f93b8-336f-4eec-b011-9ddb412ee828', + type: 'task', + title: 'Fix permission issues that the 0.0.7-alpha.2 has introduced', + notes: + 'Excepteur deserunt tempor do lorem elit id magna pariatur irure ullamco elit dolor consectetur ad officia fugiat incididunt do elit aute esse eu voluptate adipisicing incididunt ea dolor aliqua dolor.\n\nConsequat est quis deserunt voluptate ipsum incididunt laboris occaecat irure laborum voluptate non sit labore voluptate sunt id sint ut laboris aute cupidatat occaecat eiusmod non magna aliquip deserunt nisi.', + completed: true, + dueDate: null, + priority: 2, + tags: ['a0bf42ca-c3a5-47be-8341-b9c0bb8ef270'], + assignedTo: null, + subTasks: [ + { + id: '8e9644dc-0815-4258-8a08-4ce8d9912ec0', + title: 'Adipisicing aliquip voluptate veniam', + completed: false, + }, + { + id: 'fc0f2283-3802-4ebe-b164-774bc2b84549', + title: 'Magna amet adipisicing velit nisi est', + completed: false, + }, + { + id: '8a74b56f-14c0-4700-b737-8ccfa912f4b6', + title: 'Eiusmod dolore voluptate excepteur ipsum nostrud', + completed: false, + }, + { + id: '439ed5b7-156d-414a-ba20-ce779e3ec037', + title: 'Laborum adipisicing quis culpa amet', + completed: true, + }, + ], + order: 3, + }, + { + id: '5d877fc7-b881-4527-a6aa-d39d642feb23', + type: 'task', + title: 'Start Twitter promotions using the company Twitter account', + notes: + 'Labore mollit in aliqua exercitation aliquip elit nisi nisi voluptate reprehenderit et dolor incididunt cupidatat ullamco nulla consequat voluptate adipisicing dolor qui magna sint aute do excepteur in aliqua consectetur.\n\nElit laborum non duis irure ad ullamco aliqua enim exercitation quis fugiat aute esse esse magna et ad cupidatat voluptate sint nulla nulla lorem et enim deserunt proident deserunt consectetur.', + completed: true, + dueDate: null, + priority: 1, + tags: ['51483dd3-cb98-4400-9128-4bd66b455807'], + assignedTo: '4678ad07-e057-48a9-a5d1-3cf98e722eeb', + subTasks: [ + { + id: 'b076c673-7d76-43b5-aaca-d0c496f397e5', + title: 'Esse dolore nostrud lorem consectetur', + completed: false, + }, + { + id: 'a01522ff-07fa-4fbd-a168-47802446b705', + title: 'Lorem velit voluptate laborum ad', + completed: false, + }, + ], + order: 4, + }, + { + id: '3d1c26c5-1e5e-4eb6-8006-ed6037ed9aca', + type: 'task', + title: 'Add more error pages - 401, 301, 303, 500 etc.', + notes: + 'Sunt mollit irure dolor aliquip sit veniam amet ut sunt dolore cillum sint pariatur qui irure proident velit non excepteur quis ut et quis velit aliqua ea sunt cillum sit.\n\nReprehenderit est culpa ut incididunt sit dolore mollit in occaecat velit culpa consequat reprehenderit ex lorem cupidatat proident reprehenderit ad eu sunt sit ut sit culpa ea reprehenderit aliquip est.', + completed: false, + dueDate: '2018-09-29T19:30:45.325Z', + priority: 1, + tags: ['c6058d0d-a4b0-4453-986a-9d249ec230b1'], + assignedTo: '6617b0a3-0ccd-44ea-af78-c6633115d683', + subTasks: [], + order: 5, + }, + { + id: '11bd2b9a-85b4-41c9-832c-bd600dfa3a52', + type: 'task', + title: 'Clear the caches before the production build', + notes: + 'Sint mollit consectetur voluptate fugiat sunt ipsum adipisicing labore exercitation eiusmod enim excepteur enim proident velit sint magna commodo dolor ex ipsum sit nisi deserunt labore eu irure amet ea.\n\nOccaecat ut velit et sint pariatur laboris voluptate duis aliqua aliqua exercitation et duis duis eu laboris excepteur occaecat quis esse enim ex dolore commodo fugiat excepteur adipisicing in fugiat.', + completed: true, + dueDate: '2017-10-12T12:03:55.559Z', + priority: 2, + tags: [], + assignedTo: '271e6a06-0d37-433d-bc8d-607b12bcbed9', + subTasks: [ + { + id: '9cd8eba8-7c41-4230-9d80-f71f7ed1cfe9', + title: 'Eu exercitation proident dolore velit', + completed: true, + }, + ], + order: 6, + }, + { + id: 'f55c023a-785e-4f0f-b5b7-47da75224deb', + type: 'task', + title: + 'Examine the package loss rates that the 0.0.7-alpha.1 has introduced', + notes: + 'In exercitation sunt ad anim commodo sunt do in sunt est officia amet ex ullamco do nisi consectetur lorem proident lorem adipisicing incididunt consequat fugiat voluptate sint est anim officia.\n\nVelit sint aliquip elit culpa amet eu mollit veniam esse deserunt ex occaecat quis lorem minim occaecat culpa esse veniam enim duis excepteur ipsum esse ut ut velit cillum adipisicing.', + completed: false, + dueDate: '2022-06-05T19:41:12.501Z', + priority: 2, + tags: [], + assignedTo: '7f5db993-ec36-412f-9db3-16d076a98807', + subTasks: [ + { + id: 'cdb08aa2-980d-48c6-b15c-7970775b7b5a', + title: 'Veniam magna minim duis', + completed: true, + }, + { + id: 'dc19e213-687e-4391-8b61-9aabed2fb288', + title: 'Eu dolore et adipisicing commodo adipisicing consequat', + completed: false, + }, + { + id: '7e365400-59b9-4ec9-b397-8bf40de56ec4', + title: 'Do culpa quis consequat cupidatat', + completed: true, + }, + { + id: '1a0f98b0-dfc4-4ac9-b8f5-ce322da2a849', + title: 'Est duis do sunt esse magna ex', + completed: true, + }, + ], + order: 7, + }, + { + id: 'c577a67d-357a-4b88-96e8-a0ee1fe9162e', + type: 'task', + title: 'Start Google ads using the company coupons', + notes: + 'Ad adipisicing duis consequat magna sunt consequat aliqua eiusmod qui et nostrud voluptate sit enim reprehenderit anim exercitation ipsum ipsum anim ipsum laboris aliqua ex lorem aute officia voluptate culpa.\n\nNostrud anim ex pariatur ipsum et nostrud esse veniam ipsum ipsum irure velit ad quis irure tempor nulla amet aute id esse reprehenderit ea consequat consequat ea minim magna magna.', + completed: false, + dueDate: '2020-04-06T02:57:58.506Z', + priority: 1, + tags: [ + 'c6058d0d-a4b0-4453-986a-9d249ec230b1', + 'a0bf42ca-c3a5-47be-8341-b9c0bb8ef270', + ], + assignedTo: 'a21ec32e-54ba-480b-afdc-d1cbe18a96fd', + subTasks: [ + { + id: 'b1849778-a69c-46ad-8373-99aa6a655965', + title: 'Ipsum ipsum occaecat nulla', + completed: true, + }, + { + id: '8325f17a-2af0-4f64-b043-8ffdaaa62408', + title: 'Quis proident amet id non nulla', + completed: true, + }, + ], + order: 8, + }, + { + id: '1a680c29-7ece-4a80-9709-277ad4da8b4b', + type: 'section', + title: 'Developer API for the payment system', + notes: + 'Magna laborum et amet magna fugiat officia deserunt in exercitation aliquip nulla magna velit ea labore quis deserunt ipsum occaecat id id consequat non eiusmod mollit est voluptate ea ex.\n\nReprehenderit mollit ut excepteur minim veniam fugiat enim id pariatur amet elit nostrud occaecat pariatur et esse aliquip irure quis officia reprehenderit voluptate voluptate est et voluptate sint esse dolor.', + completed: false, + dueDate: '2020-02-08T22:42:35.937Z', + priority: 2, + tags: [ + 'a0bf42ca-c3a5-47be-8341-b9c0bb8ef270', + '2b884143-419a-45ca-a7f6-48f99f4e7798', + ], + assignedTo: '3e353312-6a9b-46af-adda-5061b06e806b', + subTasks: [], + order: 9, + }, + { + id: 'c49c2216-8bdb-4df0-be25-d5ea1dbb5688', + type: 'task', + title: 'Re-think the current API restrictions to loosen them a bit', + notes: + 'Adipisicing laboris ipsum fugiat et cupidatat aute esse ad labore et est cillum ipsum sunt duis do veniam minim officia deserunt in eiusmod eu duis dolore excepteur consectetur id elit.\n\nAnim excepteur occaecat laborum sunt in elit quis sit duis adipisicing laboris anim laborum et pariatur elit qui consectetur laborum reprehenderit occaecat nostrud pariatur aliqua elit nisi commodo eu excepteur.', + completed: false, + dueDate: '2019-08-10T06:18:17.785Z', + priority: 1, + tags: ['a0bf42ca-c3a5-47be-8341-b9c0bb8ef270'], + assignedTo: '368aab1e-ebce-43ba-8925-4cf13937867b', + subTasks: [ + { + id: '756ceee7-a9b2-45b6-9f22-5be974da7cf5', + title: 'Irure incididunt adipisicing consectetur enim', + completed: false, + }, + ], + order: 10, + }, + { + id: '3ef176fa-6cba-4536-9f43-540c686a4faa', + type: 'task', + title: 'Pre-flight checks causes random crashes on logging service', + notes: + 'Culpa duis nostrud qui velit sint magna officia fugiat ipsum eiusmod enim laborum pariatur anim culpa elit ipsum lorem pariatur exercitation laborum do labore cillum exercitation nisi reprehenderit exercitation quis.\n\nMollit aute dolor non elit et incididunt eiusmod non in commodo occaecat id in excepteur aliqua ea anim pariatur sint elit voluptate dolor eu non laborum laboris voluptate qui duis.', + completed: false, + dueDate: '2024-08-23T14:33:06.227Z', + priority: 2, + tags: ['91658b8a-f382-4b0c-a53f-e9390351c2c5'], + assignedTo: '271e6a06-0d37-433d-bc8d-607b12bcbed9', + subTasks: [ + { + id: '35b06803-2019-4025-b642-841e44de7571', + title: 'Reprehenderit et eiusmod do consectetur ipsum', + completed: false, + }, + { + id: '7ec47bbc-e644-45ae-84e3-de36ee35a22b', + title: 'Officia lorem tempor occaecat fugiat elit elit', + completed: false, + }, + { + id: 'b4560302-7bed-412c-8e43-a5ce0bce5eed', + title: 'Incididunt commodo amet fugiat nulla et', + completed: false, + }, + { + id: '494bfcac-44ee-46db-add2-0e5dbc3952c4', + title: 'Enim ipsum fugiat ipsum aute quis', + completed: true, + }, + { + id: 'ffa45bc0-4466-4584-891a-0f75e39766c1', + title: 'Esse excepteur commodo ullamco', + completed: true, + }, + ], + order: 11, + }, + { + id: '7bc6b7b4-7ad8-4cbe-af36-7301642d35fb', + type: 'task', + title: 'Increase the timeout amount to allow more retries on client side', + notes: + 'Ea proident dolor tempor dolore incididunt velit incididunt ullamco quis proident consectetur magna excepteur cillum officia ex do aliqua reprehenderit est esse officia labore dolore aute laboris eu commodo aute.\n\nOfficia quis id ipsum adipisicing ipsum eu exercitation cillum ex elit pariatur adipisicing ullamco ullamco nulla dolore magna aliqua reprehenderit eu laborum voluptate reprehenderit non eiusmod deserunt velit magna do.', + completed: true, + dueDate: '2017-08-16T12:56:48.039Z', + priority: 1, + tags: [ + '51483dd3-cb98-4400-9128-4bd66b455807', + 'd3ef4226-ef2c-43b0-a986-3e3e07f32799', + 'a0bf42ca-c3a5-47be-8341-b9c0bb8ef270', + ], + assignedTo: '4d24cf48-a322-4d53-89cb-9140dfd5c6ba', + subTasks: [ + { + id: 'a72f756b-e1db-4492-96b9-93785400e8bb', + title: 'Amet eiusmod consequat non culpa', + completed: false, + }, + { + id: '07fb282a-141a-4014-96d2-030894a6e211', + title: 'Nulla laboris veniam qui et nostrud enim', + completed: false, + }, + { + id: '40629855-8ba8-4590-9ebe-2e2ff3f20820', + title: 'Est est nulla cillum aliquip duis ipsum', + completed: true, + }, + { + id: '96e283b2-cd3e-4ab9-9770-07247691304b', + title: 'Non elit tempor commodo enim laboris', + completed: true, + }, + { + id: '95c6a48a-4e42-4909-8c25-0fafd62aeefa', + title: 'Proident est anim do laborum nostrud', + completed: false, + }, + ], + order: 12, + }, + { + id: '56c9ed66-a1d2-4803-a160-fba29b826cb4', + type: 'task', + title: 'Create the landing/marketing page and host it on the beta channel', + notes: + 'Elit cillum incididunt enim cupidatat ex elit cillum aute dolor consectetur proident non minim eu est deserunt proident mollit ullamco laborum anim ea labore anim ex enim ullamco consectetur enim.\n\nEx magna consectetur esse enim consequat non aliqua nulla labore mollit sit quis ex fugiat commodo eu cupidatat irure incididunt consequat enim ut deserunt consequat elit consequat sint adipisicing sunt.', + completed: true, + dueDate: '2023-09-15T15:12:36.910Z', + priority: 0, + tags: ['2b884143-419a-45ca-a7f6-48f99f4e7798'], + assignedTo: '3a23baf7-2db8-4ef5-8d49-86d3e708dff5', + subTasks: [ + { + id: 'f1890ef6-89ed-47ca-a124-8305d7fe71fd', + title: 'Sit eu aliqua et et', + completed: true, + }, + { + id: '647f63b9-27b8-4d65-8e09-874ef5a48573', + title: 'Voluptate esse cillum commodo', + completed: true, + }, + { + id: '2934f015-1fd1-41c0-8b5a-d7adb5c50553', + title: 'Qui commodo fugiat eiusmod sint anim', + completed: true, + }, + { + id: 'f964fc8d-662c-4586-a39f-dab6674f2760', + title: 'Consequat nulla anim velit reprehenderit', + completed: false, + }, + { + id: 'ab3dd1a9-a9fb-4864-8630-da270cf71ee5', + title: 'Adipisicing officia ex laboris', + completed: true, + }, + ], + order: 13, + }, + { + id: '21c1b662-33c8-44d7-9530-91896afeeac7', + type: 'task', + title: 'Move dependency system to Yarn for easier package management', + notes: + 'Duis culpa ut veniam voluptate consequat proident magna eiusmod id est magna culpa nulla enim culpa mollit velit lorem mollit ut minim dolore in tempor reprehenderit cillum occaecat proident ea.\n\nVeniam fugiat ea duis qui et eu eiusmod voluptate id cillum eiusmod eu reprehenderit minim reprehenderit nisi cillum nostrud duis eu magna minim sunt voluptate eu pariatur nulla ullamco elit.', + completed: true, + dueDate: '2020-08-08T16:32:24.768Z', + priority: 1, + tags: [], + assignedTo: null, + subTasks: [ + { + id: 'e5fece14-cc26-40df-9319-23568cf89662', + title: 'Tempor qui eiusmod et', + completed: false, + }, + { + id: '30e6117d-e2a2-4f97-a674-19a554a94829', + title: 'Tempor magna eu dolore aliquip', + completed: false, + }, + { + id: 'a5dd7270-1bc7-4b2b-abf0-9366eaca972d', + title: 'Lorem duis esse commodo', + completed: false, + }, + { + id: '40ffd839-046f-4272-9232-5391d62477f7', + title: 'Minim aute eu ut id', + completed: false, + }, + ], + order: 14, + }, + { + id: '5fa52c90-82be-41ae-96ec-5fc67cf054a4', + type: 'task', + title: 'Fix permission issues that the 0.0.7-alpha.2 has introduced', + notes: + 'Mollit nostrud ea irure ex ipsum in cupidatat irure sit officia reprehenderit adipisicing et occaecat cupidatat exercitation mollit esse in excepteur qui elit exercitation velit fugiat exercitation est officia excepteur.\n\nQuis esse voluptate laborum non veniam duis est fugiat tempor culpa minim velit minim ut duis qui officia consectetur ex nostrud ut elit elit nulla in consectetur voluptate aliqua aliqua.', + completed: false, + dueDate: '2019-10-13T08:25:17.064Z', + priority: 0, + tags: ['2b884143-419a-45ca-a7f6-48f99f4e7798'], + assignedTo: 'b2e97a96-2f15-4e3d-aff5-4ddf2af924d4', + subTasks: [ + { + id: '2ef107fb-3c21-4801-861f-abaf4fd6def0', + title: 'Voluptate qui excepteur id in', + completed: true, + }, + { + id: '0afb4ebf-fcc7-47dc-8351-a88cb47c39ee', + title: 'Laborum ipsum aute nisi anim', + completed: false, + }, + { + id: '2f22bff2-72be-4ff5-b037-c3bf0f1d5637', + title: 'Amet duis velit sunt non', + completed: false, + }, + ], + order: 15, + }, + { + id: 'b6d8909f-f36d-4885-8848-46b8230d4476', + type: 'task', + title: 'Start Twitter promotions using the company Twitter account', + notes: + 'Laboris ea nisi commodo nulla cillum consequat consectetur nisi velit adipisicing minim nulla culpa amet quis sit duis id id aliqua aute exercitation non reprehenderit aliquip enim eiusmod eu irure.\n\nNon irure consectetur sunt cillum do adipisicing excepteur labore proident ut officia dolor fugiat velit sint consectetur cillum qui amet enim anim mollit laboris consectetur non do laboris lorem aliqua.', + completed: true, + dueDate: '2020-02-03T05:39:30.880Z', + priority: 1, + tags: ['2b884143-419a-45ca-a7f6-48f99f4e7798'], + assignedTo: '65e15136-5168-4655-8bbc-e3ad8a94bf67', + subTasks: [], + order: 16, + }, + { + id: '9496235d-4d0c-430b-817e-1cba96404f95', + type: 'task', + title: 'Add more error pages - 401, 301, 303, 500 etc.', + notes: + 'Ullamco eiusmod do pariatur pariatur consectetur commodo proident ex voluptate ullamco culpa commodo deserunt pariatur incididunt nisi magna dolor est minim eu ex voluptate deserunt labore id magna excepteur et.\n\nReprehenderit dolore pariatur exercitation ad non fugiat quis proident fugiat incididunt ea magna pariatur et exercitation tempor cillum eu consequat adipisicing est laborum sit cillum ea fugiat mollit cupidatat est.', + completed: true, + dueDate: '2020-03-09T19:42:06.383Z', + priority: 1, + tags: [], + assignedTo: '7f5db993-ec36-412f-9db3-16d076a98807', + subTasks: [ + { + id: '9e710568-306f-47f9-b397-5634dc7a1a52', + title: 'Lorem excepteur non anim non exercitation fugiat', + completed: true, + }, + { + id: 'bd10d3d5-22d1-467d-aa6b-431d23203f51', + title: 'Nulla non in occaecat nulla', + completed: false, + }, + { + id: '0a768b47-7248-4000-a201-e51f86401317', + title: 'Dolor qui deserunt duis enim do veniam', + completed: true, + }, + ], + order: 17, + }, + { + id: '7fde17e6-4ac1-47dd-a363-2f4f14dcf76a', + type: 'task', + title: 'Clear the caches before the production build', + notes: + 'Qui quis nulla excepteur voluptate elit culpa occaecat id ex do adipisicing est mollit id anim nisi irure amet officia ut sint aliquip dolore labore cupidatat magna laborum esse ea.\n\nEnim magna duis sit incididunt amet anim et nostrud laborum eiusmod et ea fugiat aliquip velit sit fugiat consectetur ipsum anim do enim excepteur cupidatat consequat sunt irure tempor ut.', + completed: true, + dueDate: '2022-08-24T03:03:09.899Z', + priority: 1, + tags: [ + '2b884143-419a-45ca-a7f6-48f99f4e7798', + '91658b8a-f382-4b0c-a53f-e9390351c2c5', + 'c6058d0d-a4b0-4453-986a-9d249ec230b1', + 'a0bf42ca-c3a5-47be-8341-b9c0bb8ef270', + ], + assignedTo: '88a2a76c-0e6f-49da-b617-46d7c3b6e64d', + subTasks: [ + { + id: 'f82708c3-2b58-4ac0-b58c-164c0804c631', + title: 'Mollit laborum tempor lorem cupidatat dolore nostrud', + completed: true, + }, + { + id: '0017121e-79fc-403c-bb1c-84dc28f79e06', + title: 'Nisi sint sint et et ad', + completed: true, + }, + { + id: '9073242a-5be6-487a-9e50-ea298700af79', + title: 'Duis nulla ad magna', + completed: false, + }, + ], + order: 18, + }, + { + id: '90a3ed58-e13b-40cf-9219-f933bf9c9b8f', + type: 'task', + title: + 'Examine the package loss rates that the 0.0.7-alpha.1 has introduced', + notes: + 'Consequat consectetur commodo deserunt sunt aliquip deserunt ex tempor esse nostrud sit dolore anim nostrud nulla dolore veniam minim laboris non dolor veniam lorem veniam deserunt laborum aute amet irure.\n\nEiusmod officia veniam reprehenderit ea aliquip velit anim aute minim aute nisi tempor qui sunt deserunt voluptate velit elit ut adipisicing ipsum et excepteur ipsum eu ullamco nisi esse dolor.', + completed: false, + dueDate: '2023-10-04T15:48:16.507Z', + priority: 1, + tags: ['d3ef4226-ef2c-43b0-a986-3e3e07f32799'], + assignedTo: null, + subTasks: [ + { + id: 'eaab24ed-cf9e-4ee7-b7ff-acd8f62f617a', + title: 'Eiusmod nulla enim laborum deserunt in', + completed: false, + }, + { + id: '700d067c-c5be-4532-95e3-ba575effae7c', + title: 'Sunt sint ea est commodo id', + completed: false, + }, + ], + order: 19, + }, + { + id: '81ac908c-35a2-4705-8d75-539863c35c09', + type: 'task', + title: 'Start Google ads using the company coupons', + notes: + 'Sit occaecat sint nulla in esse dolor occaecat in ea sit irure magna magna veniam fugiat consequat exercitation ipsum ex officia velit consectetur consequat voluptate lorem eu proident lorem incididunt.\n\nExcepteur exercitation et qui labore nisi eu voluptate ipsum deserunt deserunt eu est minim dolor ad proident nulla reprehenderit culpa minim voluptate dolor nostrud dolor anim labore aliqua officia nostrud.', + completed: true, + dueDate: '2024-02-01T10:02:52.745Z', + priority: 1, + tags: ['a0bf42ca-c3a5-47be-8341-b9c0bb8ef270'], + assignedTo: '368aab1e-ebce-43ba-8925-4cf13937867b', + subTasks: [ + { + id: '651a87c6-4376-42c4-9dfd-fad7525e7eb3', + title: 'Aliqua est excepteur excepteur deserunt id', + completed: true, + }, + ], + order: 20, + }, + { + id: '153376ed-691f-4dfd-ae99-e204a49edc44', + type: 'task', + title: 'Re-think the current API restrictions to loosen them a bit', + notes: + 'Duis sint velit incididunt exercitation eiusmod nisi sunt ex est fugiat ad cupidatat sunt nisi elit do duis amet voluptate ipsum aliquip lorem aliqua sint esse in magna irure officia.\n\nNon eu ex elit ut est voluptate tempor amet ut officia in duis deserunt cillum labore do culpa id dolore magna anim consectetur qui consectetur fugiat labore mollit magna irure.', + completed: true, + dueDate: '2021-02-22T17:42:00.257Z', + priority: 2, + tags: [], + assignedTo: '65f1c421-83c5-4cdf-99da-d97794328679', + subTasks: [], + order: 21, + }, + { + id: '1ebde495-1bcd-4e8f-b6f6-cf63b521ad06', + type: 'section', + title: 'Marketing and promotions for the mobile app', + notes: + 'Aute commodo reprehenderit cupidatat duis nulla mollit sint cupidatat elit adipisicing fugiat sunt cupidatat amet proident fugiat aute adipisicing et non minim occaecat ea esse consectetur aute culpa exercitation incididunt.\n\nEnim et lorem anim dolor excepteur qui tempor cupidatat do proident adipisicing esse incididunt mollit quis irure amet ad officia culpa minim cillum veniam voluptate lorem exercitation sunt cillum dolor.', + completed: false, + dueDate: '2018-08-04T19:32:53.652Z', + priority: 1, + tags: [], + assignedTo: 'e62ab50e-90d3-4ed7-a911-093bb44d0c50', + subTasks: [ + { + id: 'c5a8b915-0b0f-4dd3-a1a3-e538fa191747', + title: 'Adipisicing do minim voluptate', + completed: true, + }, + { + id: '52b50615-0d80-42b6-97cb-1b71eaec1632', + title: 'Et eiusmod est adipisicing officia', + completed: true, + }, + ], + order: 22, + }, + { + id: '4e7ce72f-863a-451f-9160-cbd4fbbc4c3d', + type: 'task', + title: 'Pre-flight checks causes random crashes on logging service', + notes: + 'Exercitation sit eiusmod enim officia exercitation eiusmod sunt eiusmod excepteur ad commodo eiusmod qui proident quis aliquip excepteur sit cillum occaecat non dolore sit in labore ut duis esse duis.\n\nConsequat sunt voluptate consectetur dolor laborum enim nostrud deserunt incididunt sint veniam laboris sunt amet velit anim duis aliqua sunt aliqua aute qui nisi mollit qui irure ullamco aliquip laborum.', + completed: true, + dueDate: '2020-09-29T02:25:14.111Z', + priority: 1, + tags: [], + assignedTo: 'ef44b39b-3272-45f5-a15e-264c3b2d118e', + subTasks: [ + { + id: '654c9b65-6f94-4ae7-bf11-27f979cc670e', + title: 'Esse exercitation cillum ex', + completed: false, + }, + { + id: '3c49aba9-1e83-471f-b8b8-21cc7d20292e', + title: 'Duis sunt commodo fugiat irure minim', + completed: false, + }, + { + id: '4fcb2e0b-677c-4915-978d-70e82b16745a', + title: 'Anim in qui ut', + completed: false, + }, + { + id: 'dd864dea-61d2-4fb0-b433-286993b6ad08', + title: 'Reprehenderit irure exercitation occaecat', + completed: true, + }, + ], + order: 23, + }, + { + id: '0795a74f-7a84-4edf-8d66-296cdef70003', + type: 'task', + title: 'Increase the timeout amount to allow more retries on client side', + notes: + 'Minim commodo cillum do id qui irure aliqua laboris excepteur laboris magna enim est lorem consectetur tempor laboris proident proident eu irure dolor eiusmod in officia lorem quis laborum ullamco.\n\nQui excepteur ex sit esse dolore deserunt ullamco occaecat laboris fugiat cupidatat excepteur laboris amet dolore enim velit ipsum velit sint cupidatat consectetur cupidatat deserunt sit eu do ullamco quis.', + completed: true, + dueDate: '2019-03-09T02:34:29.592Z', + priority: 2, + tags: [ + 'c6058d0d-a4b0-4453-986a-9d249ec230b1', + 'd3ef4226-ef2c-43b0-a986-3e3e07f32799', + ], + assignedTo: '6617b0a3-0ccd-44ea-af78-c6633115d683', + subTasks: [ + { + id: '56f3dccb-a72b-485c-94e7-fe68477023e2', + title: 'Velit velit voluptate in occaecat nostrud', + completed: true, + }, + { + id: '70cb77a9-82fa-407b-a63e-55aedc241495', + title: 'Minim anim velit eiusmod qui', + completed: true, + }, + { + id: '08a31dbc-6be4-469b-9ff4-0ed5342082bd', + title: 'Laboris commodo laborum irure', + completed: false, + }, + { + id: '34d6c603-6f5a-4bc4-9f94-12bfd940c3c7', + title: 'Mollit mollit nostrud mollit id velit ullamco', + completed: true, + }, + ], + order: 24, + }, + { + id: '05532574-c102-4228-89a8-55fff32ec6fc', + type: 'task', + title: 'Create the landing/marketing page and host it on the beta channel', + notes: + 'Reprehenderit anim consectetur anim dolor magna consequat excepteur tempor enim duis magna proident ullamco aute voluptate elit laborum mollit labore id ex lorem est mollit do qui ex labore nulla.\n\nUt proident elit proident adipisicing elit fugiat ex ullamco dolore excepteur excepteur labore laborum sunt ipsum proident magna ex voluptate laborum voluptate sint proident eu reprehenderit non excepteur quis eiusmod.', + completed: true, + dueDate: '2023-12-08T23:20:50.910Z', + priority: 2, + tags: ['a0bf42ca-c3a5-47be-8341-b9c0bb8ef270'], + assignedTo: null, + subTasks: [], + order: 25, + }, + { + id: 'b3917466-aa51-4293-9d5b-120b0ce6635c', + type: 'task', + title: 'Move dependency system to Yarn for easier package management', + notes: + 'Ipsum officia mollit qui laboris sunt amet aliquip cupidatat minim non elit commodo eiusmod labore mollit pariatur aute reprehenderit ullamco occaecat enim pariatur aute amet occaecat incididunt irure ad ut.\n\nIncididunt cupidatat pariatur magna sint sit culpa ad cupidatat cillum exercitation consequat minim pariatur consectetur aliqua non adipisicing magna ad nulla ea do est nostrud eu aute id occaecat ut.', + completed: false, + dueDate: '2018-01-14T09:58:38.444Z', + priority: 1, + tags: [], + assignedTo: '56a3e7ce-01da-43fc-ab9f-a8a39fa980de', + subTasks: [ + { + id: '3a4c4013-27f1-4164-8a64-e7bb4f1a63a9', + title: 'Adipisicing excepteur mollit non sunt amet laboris', + completed: false, + }, + { + id: '103bf29e-06a1-4d30-89b9-b67aa442d605', + title: 'Consectetur voluptate anim labore aliqua elit', + completed: false, + }, + { + id: 'b77729f1-9ed1-4d9e-95d0-347f4cd0943c', + title: 'Laboris occaecat aliquip esse magna nulla', + completed: true, + }, + { + id: '695aace7-8679-4b35-96c7-cf23737cd9f1', + title: 'Exercitation eu aliquip cillum ipsum', + completed: false, + }, + { + id: 'ffd45f31-7f0a-4c6a-b62c-18148f6841db', + title: 'Minim aute ad et esse officia nostrud', + completed: true, + }, + ], + order: 26, + }, + { + id: '2f2fb472-24d4-4a00-aa80-d513fa6c059c', + type: 'task', + title: 'Fix permission issues that the 0.0.7-alpha.2 has introduced', + notes: + 'Dolor cupidatat do qui in tempor dolor magna magna ut dolor est aute veniam consectetur enim sunt sunt duis magna magna aliquip id reprehenderit dolor in veniam ullamco incididunt occaecat.\n\nId duis pariatur anim cillum est sint non veniam voluptate deserunt anim nostrud duis voluptate occaecat elit ut veniam voluptate do qui est ad velit irure sint lorem ullamco aliqua.', + completed: true, + dueDate: '2020-06-08T00:23:24.051Z', + priority: 1, + tags: ['91658b8a-f382-4b0c-a53f-e9390351c2c5'], + assignedTo: '65f1c421-83c5-4cdf-99da-d97794328679', + subTasks: [ + { + id: '4028671b-ef75-4b76-a03f-9f2bddadc618', + title: 'Commodo excepteur proident ipsum reprehenderit', + completed: true, + }, + { + id: 'b122168f-8327-408f-8b9c-498dd6ba6c81', + title: 'Mollit ullamco eiusmod exercitation deserunt', + completed: false, + }, + { + id: 'f233d812-be56-4d8a-ab14-a083f7d7cd70', + title: 'Mollit nostrud ea deserunt mollit aliquip', + completed: false, + }, + { + id: '0833be70-82b2-46cb-ad84-f11120ea634a', + title: 'Labore occaecat proident ullamco', + completed: false, + }, + ], + order: 27, + }, + { + id: '2fffd148-7644-466d-8737-7dde88c54154', + type: 'task', + title: 'Start Twitter promotions using the company Twitter account', + notes: + 'Velit commodo pariatur ullamco elit sunt dolor quis irure amet tempor laboris labore tempor nisi consectetur ea proident dolore culpa nostrud esse amet commodo do esse laboris laboris in magna.\n\nAute officia labore minim laborum irure cupidatat occaecat laborum ex labore ipsum aliqua cillum do exercitation esse et veniam excepteur mollit incididunt ut qui irure culpa qui deserunt nostrud tempor.', + completed: false, + dueDate: '2024-01-27T11:17:52.198Z', + priority: 1, + tags: ['d3ef4226-ef2c-43b0-a986-3e3e07f32799'], + assignedTo: 'b2e97a96-2f15-4e3d-aff5-4ddf2af924d4', + subTasks: [ + { + id: 'd2ffe439-2f80-4dce-84a7-d4ac5e17bbf3', + title: 'Occaecat anim sunt dolor proident', + completed: false, + }, + ], + order: 28, + }, + { + id: '24a1034e-b4d6-4a86-a1ea-90516e87e810', + type: 'task', + title: 'Add more error pages - 401, 301, 303, 500 etc.', + notes: + 'Exercitation eu in officia lorem commodo pariatur pariatur nisi consectetur qui elit in aliquip et ullamco duis nostrud aute laborum laborum est dolor non qui amet deserunt ex et aliquip.\n\nProident consectetur eu amet minim labore anim ad non aute duis eiusmod sit ad elit magna do aliquip aliqua laborum dolor laboris ea irure duis mollit fugiat tempor eu est.', + completed: false, + dueDate: '2024-06-24T04:38:28.087Z', + priority: 1, + tags: ['51483dd3-cb98-4400-9128-4bd66b455807'], + assignedTo: '7f5db993-ec36-412f-9db3-16d076a98807', + subTasks: [ + { + id: '75f55d75-c835-4a6c-a2ae-7a42ae3a7c9d', + title: 'Et laboris quis lorem est laboris', + completed: true, + }, + { + id: 'c7c91a52-b060-45af-b1b1-a4cff26bf11e', + title: 'Reprehenderit elit dolore exercitation pariatur', + completed: true, + }, + ], + order: 29, + }, +]; diff --git a/src/app/mock-api/common/auth/api.ts b/src/app/mock-api/common/auth/api.ts new file mode 100644 index 0000000..a6d7e8b --- /dev/null +++ b/src/app/mock-api/common/auth/api.ts @@ -0,0 +1,228 @@ +import { Injectable } from '@angular/core'; +import * as Base64 from 'crypto-js/enc-base64'; +import * as cryptojs from 'crypto-js'; +import * as Utf8 from 'crypto-js/enc-utf8'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { user as userData } from 'app/mock-api/common/user/data'; + +@Injectable({ + providedIn: 'root', +}) +export class AuthMockApi { + private readonly _secret: any; + private _user: any = userData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Set the mock-api + this._secret = 'YOUR_VERY_CONFIDENTIAL_SECRET_FOR_SIGNING_JWT_TOKENS!!!'; + + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Forgot password - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/auth/forgot-password', 1000) + .reply(() => [200, true]); + + // ----------------------------------------------------------------------------------------------------- + // @ Reset password - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/auth/reset-password', 1000) + .reply(() => [200, true]); + + // ----------------------------------------------------------------------------------------------------- + // @ Sign in - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/auth/sign-in', 1500) + .reply(({ request }) => { + // Sign in successful + if ( + request.body.email === 'hughes.brian@company.com' && + request.body.password === 'admin' + ) { + return [ + 200, + { + user: cloneDeep(this._user), + accessToken: this._generateJWTToken(), + tokenType: 'bearer', + }, + ]; + } + + // Invalid credentials + return [404, false]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Verify and refresh the access token - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/auth/refresh-access-token') + .reply(({ request }) => { + // Get the access token + const accessToken = request.body.accessToken; + + // Verify the token + if (this._verifyJWTToken(accessToken)) { + return [ + 200, + { + user: cloneDeep(this._user), + accessToken: this._generateJWTToken(), + tokenType: 'bearer', + }, + ]; + } + + // Invalid token + return [ + 401, + { + error: 'Invalid token', + }, + ]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Sign up - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onPost('api/auth/sign-up', 1500).reply(() => + // Simply return true + [200, true] + ); + + // ----------------------------------------------------------------------------------------------------- + // @ Unlock session - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/auth/unlock-session', 1500) + .reply(({ request }) => { + // Sign in successful + if ( + request.body.email === 'hughes.brian@company.com' && + request.body.password === 'admin' + ) { + return [ + 200, + { + user: cloneDeep(this._user), + accessToken: this._generateJWTToken(), + tokenType: 'bearer', + }, + ]; + } + + // Invalid credentials + return [404, false]; + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Return base64 encoded version of the given string + * + * @param source + * @private + */ + private _base64url(source: any): string { + // Encode in classical base64 + let encodedSource = Base64.stringify(source); + + // Remove padding equal characters + encodedSource = encodedSource.replace(/=+$/, ''); + + // Replace characters according to base64url specifications + encodedSource = encodedSource.replace(/\+/g, '-'); + encodedSource = encodedSource.replace(/\//g, '_'); + + // Return the base64 encoded string + return encodedSource; + } + + /** + * Generates a JWT token using CryptoJS library. + * + * This generator is for mocking purposes only and it is NOT + * safe to use it in production frontend applications! + * + * @private + */ + private _generateJWTToken(): string { + // Define token header + const header = { + alg: 'HS256', + typ: 'JWT', + }; + + // Calculate the issued at and expiration dates + const date = new Date(); + const iat = Math.floor(date.getTime() / 1000); + const exp = Math.floor(date.setDate(date.getDate() + 7) / 1000); + + // Define token payload + const payload = { + iat: iat, + iss: 'Beteran', + exp: exp, + }; + + // Stringify and encode the header + const stringifiedHeader = Utf8.parse(JSON.stringify(header)); + const encodedHeader = this._base64url(stringifiedHeader); + + // Stringify and encode the payload + const stringifiedPayload = Utf8.parse(JSON.stringify(payload)); + const encodedPayload = this._base64url(stringifiedPayload); + + // Sign the encoded header and mock-api + let signature: any = encodedHeader + '.' + encodedPayload; + signature = cryptojs.HmacSHA256(signature, this._secret); + signature = this._base64url(signature); + + // Build and return the token + return encodedHeader + '.' + encodedPayload + '.' + signature; + } + + /** + * Verify the given token + * + * @param token + * @private + */ + private _verifyJWTToken(token: string): boolean { + // Split the token into parts + const parts = token.split('.'); + const header = parts[0]; + const payload = parts[1]; + const signature = parts[2]; + + // Re-sign and encode the header and payload using the secret + const signatureCheck = this._base64url( + cryptojs.HmacSHA256(header + '.' + payload, this._secret) + ); + + // Verify that the resulting signature is valid + return signature === signatureCheck; + } +} diff --git a/src/app/mock-api/common/messages/api.ts b/src/app/mock-api/common/messages/api.ts new file mode 100644 index 0000000..d35eaeb --- /dev/null +++ b/src/app/mock-api/common/messages/api.ts @@ -0,0 +1,151 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; +import { messages as messagesData } from 'app/mock-api/common/messages/data'; + +@Injectable({ + providedIn: 'root', +}) +export class MessagesMockApi { + private _messages: any = messagesData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Messages - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/common/messages') + .reply(() => [200, cloneDeep(this._messages)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Messages - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/common/messages') + .reply(({ request }) => { + // Get the message + const newMessage = cloneDeep(request.body.message); + + // Generate a new GUID + newMessage.id = FuseMockApiUtils.guid(); + + // Unshift the new message + this._messages.unshift(newMessage); + + // Return the response + return [200, newMessage]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Messages - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/common/messages') + .reply(({ request }) => { + // Get the id and message + const id = request.body.id; + const message = cloneDeep(request.body.message); + + // Prepare the updated message + let updatedMessage = null; + + // Find the message and update it + this._messages.forEach((item: any, index: number, messages: any[]) => { + if (item.id === id) { + // Update the message + messages[index] = assign({}, messages[index], message); + + // Store the updated message + updatedMessage = messages[index]; + } + }); + + // Return the response + return [200, updatedMessage]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Messages - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/common/messages') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Prepare the deleted message + let deletedMessage = null; + + // Find the message + const index = this._messages.findIndex((item: any) => item.id === id); + + // Store the deleted message + deletedMessage = cloneDeep(this._messages[index]); + + // Delete the message + this._messages.splice(index, 1); + + // Return the response + return [200, deletedMessage]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Mark all as read - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/common/messages/mark-all-as-read') + .reply(() => { + // Go through all messages + this._messages.forEach((item: any, index: number, messages: any[]) => { + // Mark it as read + messages[index].read = true; + messages[index].seen = true; + }); + + // Return the response + return [200, true]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Toggle read status - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/common/messages/toggle-read-status') + .reply(({ request }) => { + // Get the message + const message = cloneDeep(request.body.message); + + // Prepare the updated message + let updatedMessage = null; + + // Find the message and update it + this._messages.forEach((item: any, index: number, messages: any[]) => { + if (item.id === message.id) { + // Update the message + messages[index].read = message.read; + + // Store the updated message + updatedMessage = messages[index]; + } + }); + + // Return the response + return [200, updatedMessage]; + }); + } +} diff --git a/src/app/mock-api/common/messages/data.ts b/src/app/mock-api/common/messages/data.ts new file mode 100644 index 0000000..ee38861 --- /dev/null +++ b/src/app/mock-api/common/messages/data.ts @@ -0,0 +1,97 @@ +/* eslint-disable */ +import * as moment from 'moment'; + +export const messages = [ + { + id: '832276cc-c5e9-4fcc-8e23-d38e2e267bc9', + image: 'assets/images/avatars/male-01.jpg', + title: 'Gary Peters', + description: 'We should talk about that at lunch!', + time: moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago + read: false, + }, + { + id: '608b4479-a3ac-4e26-8675-3609c52aca58', + image: 'assets/images/avatars/male-04.jpg', + title: 'Leo Gill (Client #8817)', + description: + 'You can download the latest invoices now. Please check and let me know.', + time: moment().subtract(50, 'minutes').toISOString(), // 50 minutes ago + read: false, + }, + { + id: '22148c0c-d788-4d49-9467-447677d11b76', + image: 'assets/images/avatars/female-01.jpg', + title: 'Sarah', + description: "Don't forget to pickup Jeremy after school!", + time: moment().subtract(3, 'hours').toISOString(), // 3 hours ago + read: true, + link: '/dashboards/project', + useRouter: true, + }, + { + id: '492e2917-760c-4921-aa5a-3201a857cd48', + image: 'assets/images/avatars/female-12.jpg', + title: 'Nancy Salazar • Joy Publishing', + description: "I'll proof read your bio on next Monday.", + time: moment().subtract(5, 'hours').toISOString(), // 5 hours ago + read: true, + link: '/dashboards/project', + useRouter: true, + }, + { + id: '214a46e5-cae7-4b18-9869-eabde7c7ea52', + image: 'assets/images/avatars/male-06.jpg', + title: 'Matthew Wood', + description: + 'Dude, I heard that they are going to promote you! Congrats man, tonight the drinks are on me!', + time: moment().subtract(7, 'hours').toISOString(), // 7 hours ago + read: false, + link: '/dashboards/project', + useRouter: true, + }, + { + id: '95930319-61cc-4c7e-9324-f1091865330c', + image: 'assets/images/avatars/female-04.jpg', + title: 'Elizabeth (New assistant)', + description: + "Boss, I've sent all client invoices but Geoffrey refusing to pay.", + time: moment().subtract(9, 'hours').toISOString(), // 9 hours ago + read: false, + link: '/dashboards/project', + useRouter: true, + }, + { + id: '802935e9-9577-48bc-98d1-308a4872afd7', + image: 'assets/images/avatars/male-06.jpg', + title: 'William Bell', + description: + 'Did you see this game? We should hang out and give it a shot sometime.', + time: moment().subtract(1, 'day').toISOString(), // 1 day ago + read: true, + link: 'https://www.google.com', + useRouter: false, + }, + { + id: '059f3738-633b-48ea-ad83-19016ce24c62', + image: 'assets/images/avatars/female-09.jpg', + title: 'Cheryl Obrien - HR', + description: + "Why did't you still look at the kitten pictures I've sent to you!", + time: moment().subtract(3, 'days').toISOString(), // 3 days ago + read: false, + link: '/dashboards/project', + useRouter: true, + }, + { + id: '5c2bb44d-5ca7-42ff-ad7e-46ced9f49a24', + image: 'assets/images/avatars/female-15.jpg', + title: 'Joan Jones - Tech', + description: + 'Dude, Cheryl keeps bugging me with kitten pictures all the time :( What are we gonna do about it?', + time: moment().subtract(4, 'day').toISOString(), // 4 days ago + read: true, + link: '/dashboards/project', + useRouter: true, + }, +]; diff --git a/src/app/mock-api/common/navigation/api.ts b/src/app/mock-api/common/navigation/api.ts new file mode 100644 index 0000000..2a57c21 --- /dev/null +++ b/src/app/mock-api/common/navigation/api.ts @@ -0,0 +1,82 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseNavigationItem } from '@fuse/components/navigation'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { + compactNavigation, + defaultNavigation, + futuristicNavigation, + horizontalNavigation, +} from 'app/mock-api/common/navigation/data'; + +@Injectable({ + providedIn: 'root', +}) +export class NavigationMockApi { + private readonly _compactNavigation: FuseNavigationItem[] = compactNavigation; + private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation; + private readonly _futuristicNavigation: FuseNavigationItem[] = + futuristicNavigation; + private readonly _horizontalNavigation: FuseNavigationItem[] = + horizontalNavigation; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Navigation - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/common/navigation').reply(() => { + // Fill compact navigation children using the default navigation + this._compactNavigation.forEach((compactNavItem) => { + this._defaultNavigation.forEach((defaultNavItem) => { + if (defaultNavItem.id === compactNavItem.id) { + compactNavItem.children = cloneDeep(defaultNavItem.children); + } + }); + }); + + // Fill futuristic navigation children using the default navigation + this._futuristicNavigation.forEach((futuristicNavItem) => { + this._defaultNavigation.forEach((defaultNavItem) => { + if (defaultNavItem.id === futuristicNavItem.id) { + futuristicNavItem.children = cloneDeep(defaultNavItem.children); + } + }); + }); + + // Fill horizontal navigation children using the default navigation + this._horizontalNavigation.forEach((horizontalNavItem) => { + this._defaultNavigation.forEach((defaultNavItem) => { + if (defaultNavItem.id === horizontalNavItem.id) { + horizontalNavItem.children = cloneDeep(defaultNavItem.children); + } + }); + }); + + // Return the response + return [ + 200, + { + compact: cloneDeep(this._compactNavigation), + default: cloneDeep(this._defaultNavigation), + futuristic: cloneDeep(this._futuristicNavigation), + horizontal: cloneDeep(this._horizontalNavigation), + }, + ]; + }); + } +} diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts new file mode 100644 index 0000000..1265bc5 --- /dev/null +++ b/src/app/mock-api/common/navigation/data.ts @@ -0,0 +1,99 @@ +/* tslint:disable:max-line-length */ +import { FuseNavigationItem } from '@fuse/components/navigation'; + +export const defaultNavigation: FuseNavigationItem[] = [ + { + id: 'dashboards', + title: 'Dashboards', + subtitle: 'Unique dashboard designs', + type: 'group', + icon: 'heroicons_outline:home', + children: [ + { + id: 'dashboards.user', + title: 'User', + type: 'basic', + icon: 'heroicons_outline:clipboard-check', + link: '/dashboards/user', + }, + { + id: 'dashboards.partner', + title: 'Partner', + type: 'basic', + icon: 'heroicons_outline:chart-pie', + link: '/dashboards/partner', + }, + { + id: 'dashboards.finance', + title: 'Finance', + type: 'basic', + icon: 'heroicons_outline:cash', + link: '/dashboards/finance', + }, + ], + }, + { + id: 'member', + title: 'Member', + subtitle: 'member managements', + type: 'group', + icon: 'heroicons_outline:home', + children: [ + { + id: 'member.user', + title: 'User', + type: 'basic', + icon: 'heroicons_outline:academic-cap', + link: '/member/user', + }, + ], + }, +]; +export const compactNavigation: FuseNavigationItem[] = [ + { + id: 'dashboards', + title: 'Dashboards', + tooltip: 'Dashboards', + type: 'aside', + icon: 'heroicons_outline:home', + children: [], // This will be filled from defaultNavigation so we don't have to manage multiple sets of the same navigation + }, + { + id: 'member', + title: 'Member', + tooltip: 'Member', + type: 'aside', + icon: 'heroicons_outline:qrcode', + children: [], // This will be filled from defaultNavigation so we don't have to manage multiple sets of the same navigation + }, +]; +export const futuristicNavigation: FuseNavigationItem[] = [ + { + id: 'dashboards', + title: 'DASHBOARDS', + type: 'group', + children: [], // This will be filled from defaultNavigation so we don't have to manage multiple sets of the same navigation + }, + { + id: 'member', + title: 'Member', + type: 'group', + children: [], // This will be filled from defaultNavigation so we don't have to manage multiple sets of the same navigation + }, +]; +export const horizontalNavigation: FuseNavigationItem[] = [ + { + id: 'dashboards', + title: 'Dashboards', + type: 'group', + icon: 'heroicons_outline:home', + children: [], // This will be filled from defaultNavigation so we don't have to manage multiple sets of the same navigation + }, + { + id: 'member', + title: 'Member', + type: 'group', + icon: 'heroicons_outline:qrcode', + children: [], // This will be filled from defaultNavigation so we don't have to manage multiple sets of the same navigation + }, +]; diff --git a/src/app/mock-api/common/notifications/api.ts b/src/app/mock-api/common/notifications/api.ts new file mode 100644 index 0000000..316fa4a --- /dev/null +++ b/src/app/mock-api/common/notifications/api.ts @@ -0,0 +1,163 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; +import { notifications as notificationsData } from 'app/mock-api/common/notifications/data'; + +@Injectable({ + providedIn: 'root', +}) +export class NotificationsMockApi { + private _notifications: any = notificationsData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Notifications - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/common/notifications') + .reply(() => [200, cloneDeep(this._notifications)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Notifications - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/common/notifications') + .reply(({ request }) => { + // Get the notification + const newNotification = cloneDeep(request.body.notification); + + // Generate a new GUID + newNotification.id = FuseMockApiUtils.guid(); + + // Unshift the new notification + this._notifications.unshift(newNotification); + + // Return the response + return [200, newNotification]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Notifications - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/common/notifications') + .reply(({ request }) => { + // Get the id and notification + const id = request.body.id; + const notification = cloneDeep(request.body.notification); + + // Prepare the updated notification + let updatedNotification = null; + + // Find the notification and update it + this._notifications.forEach( + (item: any, index: number, notifications: any[]) => { + if (item.id === id) { + // Update the notification + notifications[index] = assign( + {}, + notifications[index], + notification + ); + + // Store the updated notification + updatedNotification = notifications[index]; + } + } + ); + + // Return the response + return [200, updatedNotification]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Notifications - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/common/notifications') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Prepare the deleted notification + let deletedNotification = null; + + // Find the notification + const index = this._notifications.findIndex( + (item: any) => item.id === id + ); + + // Store the deleted notification + deletedNotification = cloneDeep(this._notifications[index]); + + // Delete the notification + this._notifications.splice(index, 1); + + // Return the response + return [200, deletedNotification]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Mark all as read - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/common/notifications/mark-all-as-read') + .reply(() => { + // Go through all notifications + this._notifications.forEach( + (item: any, index: number, notifications: any[]) => { + // Mark it as read + notifications[index].read = true; + notifications[index].seen = true; + } + ); + + // Return the response + return [200, true]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Toggle read status - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/common/notifications/toggle-read-status') + .reply(({ request }) => { + // Get the notification + const notification = cloneDeep(request.body.notification); + + // Prepare the updated notification + let updatedNotification = null; + + // Find the notification and update it + this._notifications.forEach( + (item: any, index: number, notifications: any[]) => { + if (item.id === notification.id) { + // Update the notification + notifications[index].read = notification.read; + + // Store the updated notification + updatedNotification = notifications[index]; + } + } + ); + + // Return the response + return [200, updatedNotification]; + }); + } +} diff --git a/src/app/mock-api/common/notifications/data.ts b/src/app/mock-api/common/notifications/data.ts new file mode 100644 index 0000000..244c799 --- /dev/null +++ b/src/app/mock-api/common/notifications/data.ts @@ -0,0 +1,92 @@ +/* eslint-disable */ +import * as moment from 'moment'; + +export const notifications = [ + { + id: '493190c9-5b61-4912-afe5-78c21f1044d7', + icon: 'heroicons_solid:star', + title: 'Daily challenges', + description: 'Your submission has been accepted', + time: moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago + read: false, + }, + { + id: '6e3e97e5-effc-4fb7-b730-52a151f0b641', + image: 'assets/images/avatars/male-04.jpg', + description: + 'Leo Gill added you to Top Secret Project group and assigned you as a Project Manager', + time: moment().subtract(50, 'minutes').toISOString(), // 50 minutes ago + read: true, + link: '/dashboards/project', + useRouter: true, + }, + { + id: 'b91ccb58-b06c-413b-b389-87010e03a120', + icon: 'heroicons_solid:mail', + title: 'Mailbox', + description: 'You have 15 unread mails across 3 mailboxes', + time: moment().subtract(3, 'hours').toISOString(), // 3 hours ago + read: false, + link: '/dashboards/project', + useRouter: true, + }, + { + id: '541416c9-84a7-408a-8d74-27a43c38d797', + icon: 'heroicons_solid:refresh', + title: 'Cron jobs', + description: 'Your Docker container is ready to publish', + time: moment().subtract(5, 'hours').toISOString(), // 5 hours ago + read: false, + link: '/dashboards/project', + useRouter: true, + }, + { + id: 'ef7b95a7-8e8b-4616-9619-130d9533add9', + image: 'assets/images/avatars/male-06.jpg', + description: 'Roger Murray accepted your friend request', + time: moment().subtract(7, 'hours').toISOString(), // 7 hours ago + read: true, + link: '/dashboards/project', + useRouter: true, + }, + { + id: 'eb8aa470-635e-461d-88e1-23d9ea2a5665', + image: 'assets/images/avatars/female-04.jpg', + description: 'Sophie Stone sent you a direct message', + time: moment().subtract(9, 'hours').toISOString(), // 9 hours ago + read: true, + link: '/dashboards/project', + useRouter: true, + }, + { + id: 'b85c2338-cc98-4140-bbf8-c226ce4e395e', + icon: 'heroicons_solid:mail', + title: 'Mailbox', + description: 'You have 3 new mails', + time: moment().subtract(1, 'day').toISOString(), // 1 day ago + read: true, + link: '/dashboards/project', + useRouter: true, + }, + { + id: '8f8e1bf9-4661-4939-9e43-390957b60f42', + icon: 'heroicons_solid:star', + title: 'Daily challenges', + description: + 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days', + time: moment().subtract(3, 'days').toISOString(), // 3 days ago + read: true, + link: '/dashboards/project', + useRouter: true, + }, + { + id: '30af917b-7a6a-45d1-822f-9e7ad7f8bf69', + icon: 'heroicons_solid:refresh', + title: 'Cron jobs', + description: 'Your Vagrant container is ready to download', + time: moment().subtract(4, 'day').toISOString(), // 4 days ago + read: true, + link: '/dashboards/project', + useRouter: true, + }, +]; diff --git a/src/app/mock-api/common/search/api.ts b/src/app/mock-api/common/search/api.ts new file mode 100644 index 0000000..cd7ea9b --- /dev/null +++ b/src/app/mock-api/common/search/api.ts @@ -0,0 +1,128 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { + FuseNavigationItem, + FuseNavigationService, +} from '@fuse/components/navigation'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { defaultNavigation } from 'app/mock-api/common/navigation/data'; +import { contacts } from 'app/mock-api/apps/contacts/data'; +import { tasks } from 'app/mock-api/apps/tasks/data'; + +@Injectable({ + providedIn: 'root', +}) +export class SearchMockApi { + private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation; + private readonly _contacts: any[] = contacts; + private readonly _tasks: any[] = tasks; + + /** + * Constructor + */ + constructor( + private _fuseMockApiService: FuseMockApiService, + private _fuseNavigationService: FuseNavigationService + ) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // Get the flat navigation and store it + const flatNavigation = this._fuseNavigationService.getFlatNavigation( + this._defaultNavigation + ); + + // ----------------------------------------------------------------------------------------------------- + // @ Search results - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/common/search') + .reply(({ request }) => { + // Get the search query + const query = cloneDeep(request.body.query.toLowerCase()); + + // If the search query is an empty string, + // return an empty array + if (query === '') { + return [200, { results: [] }]; + } + + // Filter the contacts + const contactsResults = cloneDeep(this._contacts).filter( + (contact: any) => contact.name.toLowerCase().includes(query) + ); + + // Filter the navigation + const pagesResults = cloneDeep(flatNavigation).filter( + (page: any) => + page.title?.toLowerCase().includes(query) || + (page.subtitle && page.subtitle.includes(query)) + ); + + // Filter the tasks + const tasksResults = cloneDeep(this._tasks).filter((task: any) => + task.title.toLowerCase().includes(query) + ); + + // Prepare the results array + const results = []; + + // If there are contacts results... + if (contactsResults.length > 0) { + // Normalize the results + contactsResults.forEach((result) => { + // Add a link + result.link = '/apps/contacts/' + result.id; + }); + + // Add to the results + results.push({ + id: 'contacts', + label: 'Contacts', + results: contactsResults, + }); + } + + // If there are page results... + if (pagesResults.length > 0) { + // Normalize the results + pagesResults.forEach((result: any) => {}); + + // Add to the results + results.push({ + id: 'pages', + label: 'Pages', + results: pagesResults, + }); + } + + // If there are tasks results... + if (tasksResults.length > 0) { + // Normalize the results + tasksResults.forEach((result) => { + // Add a link + result.link = '/apps/tasks/' + result.id; + }); + + // Add to the results + results.push({ + id: 'tasks', + label: 'Tasks', + results: tasksResults, + }); + } + + // Return the response + return [200, results]; + }); + } +} diff --git a/src/app/mock-api/common/shortcuts/api.ts b/src/app/mock-api/common/shortcuts/api.ts new file mode 100644 index 0000000..a01a5b7 --- /dev/null +++ b/src/app/mock-api/common/shortcuts/api.ts @@ -0,0 +1,109 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; +import { shortcuts as shortcutsData } from 'app/mock-api/common/shortcuts/data'; + +@Injectable({ + providedIn: 'root', +}) +export class ShortcutsMockApi { + private _shortcuts: any = shortcutsData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Shortcuts - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/common/shortcuts') + .reply(() => [200, cloneDeep(this._shortcuts)]); + + // ----------------------------------------------------------------------------------------------------- + // @ Shortcuts - POST + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPost('api/common/shortcuts') + .reply(({ request }) => { + // Get the shortcut + const newShortcut = cloneDeep(request.body.shortcut); + + // Generate a new GUID + newShortcut.id = FuseMockApiUtils.guid(); + + // Unshift the new shortcut + this._shortcuts.unshift(newShortcut); + + // Return the response + return [200, newShortcut]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Shortcuts - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onPatch('api/common/shortcuts') + .reply(({ request }) => { + // Get the id and shortcut + const id = request.body.id; + const shortcut = cloneDeep(request.body.shortcut); + + // Prepare the updated shortcut + let updatedShortcut = null; + + // Find the shortcut and update it + this._shortcuts.forEach( + (item: any, index: number, shortcuts: any[]) => { + if (item.id === id) { + // Update the shortcut + shortcuts[index] = assign({}, shortcuts[index], shortcut); + + // Store the updated shortcut + updatedShortcut = shortcuts[index]; + } + } + ); + + // Return the response + return [200, updatedShortcut]; + }); + + // ----------------------------------------------------------------------------------------------------- + // @ Shortcuts - DELETE + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onDelete('api/common/shortcuts') + .reply(({ request }) => { + // Get the id + const id = request.params.get('id'); + + // Prepare the deleted shortcut + let deletedShortcut = null; + + // Find the shortcut + const index = this._shortcuts.findIndex((item: any) => item.id === id); + + // Store the deleted shortcut + deletedShortcut = cloneDeep(this._shortcuts[index]); + + // Delete the shortcut + this._shortcuts.splice(index, 1); + + // Return the response + return [200, deletedShortcut]; + }); + } +} diff --git a/src/app/mock-api/common/shortcuts/data.ts b/src/app/mock-api/common/shortcuts/data.ts new file mode 100644 index 0000000..e185838 --- /dev/null +++ b/src/app/mock-api/common/shortcuts/data.ts @@ -0,0 +1,67 @@ +/* eslint-disable */ +export const shortcuts = [ + { + id: 'a1ae91d3-e2cb-459b-9be9-a184694f548b', + label: 'Changelog', + description: 'List of changes', + icon: 'heroicons_outline:clipboard-list', + link: '/docs/changelog', + useRouter: true, + }, + { + id: '989ce876-c177-4d71-a749-1953c477f825', + label: 'Documentation', + description: 'Getting started', + icon: 'heroicons_outline:book-open', + link: '/docs/guides/getting-started/introduction', + useRouter: true, + }, + { + id: '2496f42e-2f25-4e34-83d5-3ff9568fd984', + label: 'Help center', + description: 'FAQs and guides', + icon: 'heroicons_outline:support', + link: '/apps/help-center', + useRouter: true, + }, + { + id: '3c48e75e-2ae7-4b73-938a-12dc655be28b', + label: 'Dashboard', + description: 'User analytics', + icon: 'heroicons_outline:chart-pie', + link: '/dashboards/analytics', + useRouter: true, + }, + { + id: '2daac375-a2f7-4393-b4d7-ce6061628b66', + label: 'Mailbox', + description: '5 new e-mails', + icon: 'heroicons_outline:mail', + link: 'apps/mailbox', + useRouter: true, + }, + { + id: '56a0a561-17e7-40b3-bd75-0b6cef230b7e', + label: 'Tasks', + description: '12 unfinished tasks', + icon: 'heroicons_outline:check-circle', + link: '/apps/tasks', + useRouter: true, + }, + { + id: 'f5daf93e-b6f3-4199-8a0c-b951e92a6cb8', + label: 'Contacts', + description: 'List all contacts', + icon: 'heroicons_outline:user-group', + link: '/apps/contacts', + useRouter: true, + }, + { + id: '0a240ab8-e19d-4503-bf68-20013030d526', + label: 'Reload', + description: 'Reload the app', + icon: 'heroicons_outline:refresh', + link: '/dashboards/project', + useRouter: false, + }, +]; diff --git a/src/app/mock-api/common/user/api.ts b/src/app/mock-api/common/user/api.ts new file mode 100644 index 0000000..85f4979 --- /dev/null +++ b/src/app/mock-api/common/user/api.ts @@ -0,0 +1,49 @@ +import { Injectable } from '@angular/core'; +import { assign, cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { user as userData } from 'app/mock-api/common/user/data'; + +@Injectable({ + providedIn: 'root', +}) +export class UserMockApi { + private _user: any = userData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ User - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/common/user') + .reply(() => [200, cloneDeep(this._user)]); + + // ----------------------------------------------------------------------------------------------------- + // @ User - PATCH + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onPatch('api/common/user').reply(({ request }) => { + // Get the user mock-api + const user = cloneDeep(request.body.user); + + // Update the user mock-api + this._user = assign({}, this._user, user); + + // Return the response + return [200, cloneDeep(this._user)]; + }); + } +} diff --git a/src/app/mock-api/common/user/data.ts b/src/app/mock-api/common/user/data.ts new file mode 100644 index 0000000..66f9aff --- /dev/null +++ b/src/app/mock-api/common/user/data.ts @@ -0,0 +1,8 @@ +/* eslint-disable */ +export const user = { + id: 'cfaad35d-07a3-4447-a6c3-d8c3d54fd5df', + name: 'Brian Hughes', + email: 'hughes.brian@company.com', + avatar: 'assets/images/avatars/brian-hughes.jpg', + status: 'online', +}; diff --git a/src/app/mock-api/dashboards/analytics/api.ts b/src/app/mock-api/dashboards/analytics/api.ts new file mode 100644 index 0000000..869b16f --- /dev/null +++ b/src/app/mock-api/dashboards/analytics/api.ts @@ -0,0 +1,35 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { analytics as analyticsData } from 'app/mock-api/dashboards/analytics/data'; + +@Injectable({ + providedIn: 'root', +}) +export class AnalyticsMockApi { + private _analytics: any = analyticsData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Sales - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/dashboards/analytics') + .reply(() => [200, cloneDeep(this._analytics)]); + } +} diff --git a/src/app/mock-api/dashboards/analytics/data.ts b/src/app/mock-api/dashboards/analytics/data.ts new file mode 100644 index 0000000..c41a789 --- /dev/null +++ b/src/app/mock-api/dashboards/analytics/data.ts @@ -0,0 +1,1599 @@ +/* eslint-disable */ +import * as moment from 'moment'; + +export const analytics = { + visitors : { + series: { + 'this-year': [ + { + name: 'Visitors', + data: [ + { + x: moment().subtract(12, 'months').day(1).toDate(), + y: 4884 + }, + { + x: moment().subtract(12, 'months').day(4).toDate(), + y: 5351 + }, + { + x: moment().subtract(12, 'months').day(7).toDate(), + y: 5293 + }, + { + x: moment().subtract(12, 'months').day(10).toDate(), + y: 4908 + }, + { + x: moment().subtract(12, 'months').day(13).toDate(), + y: 5027 + }, + { + x: moment().subtract(12, 'months').day(16).toDate(), + y: 4837 + }, + { + x: moment().subtract(12, 'months').day(19).toDate(), + y: 4484 + }, + { + x: moment().subtract(12, 'months').day(22).toDate(), + y: 4071 + }, + { + x: moment().subtract(12, 'months').day(25).toDate(), + y: 4124 + }, + { + x: moment().subtract(12, 'months').day(28).toDate(), + y: 4563 + }, + { + x: moment().subtract(11, 'months').day(1).toDate(), + y: 3820 + }, + { + x: moment().subtract(11, 'months').day(4).toDate(), + y: 3968 + }, + { + x: moment().subtract(11, 'months').day(7).toDate(), + y: 4102 + }, + { + x: moment().subtract(11, 'months').day(10).toDate(), + y: 3941 + }, + { + x: moment().subtract(11, 'months').day(13).toDate(), + y: 3566 + }, + { + x: moment().subtract(11, 'months').day(16).toDate(), + y: 3853 + }, + { + x: moment().subtract(11, 'months').day(19).toDate(), + y: 3853 + }, + { + x: moment().subtract(11, 'months').day(22).toDate(), + y: 4069 + }, + { + x: moment().subtract(11, 'months').day(25).toDate(), + y: 3879 + }, + { + x: moment().subtract(11, 'months').day(28).toDate(), + y: 4298 + }, + { + x: moment().subtract(10, 'months').day(1).toDate(), + y: 4355 + }, + { + x: moment().subtract(10, 'months').day(4).toDate(), + y: 4065 + }, + { + x: moment().subtract(10, 'months').day(7).toDate(), + y: 3650 + }, + { + x: moment().subtract(10, 'months').day(10).toDate(), + y: 3379 + }, + { + x: moment().subtract(10, 'months').day(13).toDate(), + y: 3191 + }, + { + x: moment().subtract(10, 'months').day(16).toDate(), + y: 2968 + }, + { + x: moment().subtract(10, 'months').day(19).toDate(), + y: 2957 + }, + { + x: moment().subtract(10, 'months').day(22).toDate(), + y: 3313 + }, + { + x: moment().subtract(10, 'months').day(25).toDate(), + y: 3708 + }, + { + x: moment().subtract(10, 'months').day(28).toDate(), + y: 3586 + }, + { + x: moment().subtract(9, 'months').day(1).toDate(), + y: 3965 + }, + { + x: moment().subtract(9, 'months').day(4).toDate(), + y: 3901 + }, + { + x: moment().subtract(9, 'months').day(7).toDate(), + y: 3410 + }, + { + x: moment().subtract(9, 'months').day(10).toDate(), + y: 3748 + }, + { + x: moment().subtract(9, 'months').day(13).toDate(), + y: 3929 + }, + { + x: moment().subtract(9, 'months').day(16).toDate(), + y: 3846 + }, + { + x: moment().subtract(9, 'months').day(19).toDate(), + y: 3771 + }, + { + x: moment().subtract(9, 'months').day(22).toDate(), + y: 4015 + }, + { + x: moment().subtract(9, 'months').day(25).toDate(), + y: 3589 + }, + { + x: moment().subtract(9, 'months').day(28).toDate(), + y: 3150 + }, + { + x: moment().subtract(8, 'months').day(1).toDate(), + y: 3050 + }, + { + x: moment().subtract(8, 'months').day(4).toDate(), + y: 2574 + }, + { + x: moment().subtract(8, 'months').day(7).toDate(), + y: 2823 + }, + { + x: moment().subtract(8, 'months').day(10).toDate(), + y: 2848 + }, + { + x: moment().subtract(8, 'months').day(13).toDate(), + y: 3000 + }, + { + x: moment().subtract(8, 'months').day(16).toDate(), + y: 3216 + }, + { + x: moment().subtract(8, 'months').day(19).toDate(), + y: 3299 + }, + { + x: moment().subtract(8, 'months').day(22).toDate(), + y: 3768 + }, + { + x: moment().subtract(8, 'months').day(25).toDate(), + y: 3524 + }, + { + x: moment().subtract(8, 'months').day(28).toDate(), + y: 3918 + }, + { + x: moment().subtract(7, 'months').day(1).toDate(), + y: 4145 + }, + { + x: moment().subtract(7, 'months').day(4).toDate(), + y: 4378 + }, + { + x: moment().subtract(7, 'months').day(7).toDate(), + y: 3941 + }, + { + x: moment().subtract(7, 'months').day(10).toDate(), + y: 3932 + }, + { + x: moment().subtract(7, 'months').day(13).toDate(), + y: 4380 + }, + { + x: moment().subtract(7, 'months').day(16).toDate(), + y: 4243 + }, + { + x: moment().subtract(7, 'months').day(19).toDate(), + y: 4367 + }, + { + x: moment().subtract(7, 'months').day(22).toDate(), + y: 3879 + }, + { + x: moment().subtract(7, 'months').day(25).toDate(), + y: 4357 + }, + { + x: moment().subtract(7, 'months').day(28).toDate(), + y: 4181 + }, + { + x: moment().subtract(6, 'months').day(1).toDate(), + y: 4619 + }, + { + x: moment().subtract(6, 'months').day(4).toDate(), + y: 4769 + }, + { + x: moment().subtract(6, 'months').day(7).toDate(), + y: 4901 + }, + { + x: moment().subtract(6, 'months').day(10).toDate(), + y: 4640 + }, + { + x: moment().subtract(6, 'months').day(13).toDate(), + y: 5128 + }, + { + x: moment().subtract(6, 'months').day(16).toDate(), + y: 5015 + }, + { + x: moment().subtract(6, 'months').day(19).toDate(), + y: 5360 + }, + { + x: moment().subtract(6, 'months').day(22).toDate(), + y: 5608 + }, + { + x: moment().subtract(6, 'months').day(25).toDate(), + y: 5272 + }, + { + x: moment().subtract(6, 'months').day(28).toDate(), + y: 5660 + }, + { + x: moment().subtract(5, 'months').day(1).toDate(), + y: 5836 + }, + { + x: moment().subtract(5, 'months').day(4).toDate(), + y: 5659 + }, + { + x: moment().subtract(5, 'months').day(7).toDate(), + y: 5575 + }, + { + x: moment().subtract(5, 'months').day(10).toDate(), + y: 5474 + }, + { + x: moment().subtract(5, 'months').day(13).toDate(), + y: 5427 + }, + { + x: moment().subtract(5, 'months').day(16).toDate(), + y: 5865 + }, + { + x: moment().subtract(5, 'months').day(19).toDate(), + y: 5700 + }, + { + x: moment().subtract(5, 'months').day(22).toDate(), + y: 6052 + }, + { + x: moment().subtract(5, 'months').day(25).toDate(), + y: 5760 + }, + { + x: moment().subtract(5, 'months').day(28).toDate(), + y: 5648 + }, + { + x: moment().subtract(4, 'months').day(1).toDate(), + y: 5435 + }, + { + x: moment().subtract(4, 'months').day(4).toDate(), + y: 5239 + }, + { + x: moment().subtract(4, 'months').day(7).toDate(), + y: 5452 + }, + { + x: moment().subtract(4, 'months').day(10).toDate(), + y: 5416 + }, + { + x: moment().subtract(4, 'months').day(13).toDate(), + y: 5195 + }, + { + x: moment().subtract(4, 'months').day(16).toDate(), + y: 5119 + }, + { + x: moment().subtract(4, 'months').day(19).toDate(), + y: 4635 + }, + { + x: moment().subtract(4, 'months').day(22).toDate(), + y: 4833 + }, + { + x: moment().subtract(4, 'months').day(25).toDate(), + y: 4584 + }, + { + x: moment().subtract(4, 'months').day(28).toDate(), + y: 4822 + }, + { + x: moment().subtract(3, 'months').day(1).toDate(), + y: 4582 + }, + { + x: moment().subtract(3, 'months').day(4).toDate(), + y: 4348 + }, + { + x: moment().subtract(3, 'months').day(7).toDate(), + y: 4132 + }, + { + x: moment().subtract(3, 'months').day(10).toDate(), + y: 4099 + }, + { + x: moment().subtract(3, 'months').day(13).toDate(), + y: 3849 + }, + { + x: moment().subtract(3, 'months').day(16).toDate(), + y: 4010 + }, + { + x: moment().subtract(3, 'months').day(19).toDate(), + y: 4486 + }, + { + x: moment().subtract(3, 'months').day(22).toDate(), + y: 4403 + }, + { + x: moment().subtract(3, 'months').day(25).toDate(), + y: 4141 + }, + { + x: moment().subtract(3, 'months').day(28).toDate(), + y: 3780 + }, + { + x: moment().subtract(2, 'months').day(1).toDate(), + y: 3524 + }, + { + x: moment().subtract(2, 'months').day(4).toDate(), + y: 3212 + }, + { + x: moment().subtract(2, 'months').day(7).toDate(), + y: 3568 + }, + { + x: moment().subtract(2, 'months').day(10).toDate(), + y: 3800 + }, + { + x: moment().subtract(2, 'months').day(13).toDate(), + y: 3796 + }, + { + x: moment().subtract(2, 'months').day(16).toDate(), + y: 3870 + }, + { + x: moment().subtract(2, 'months').day(19).toDate(), + y: 3745 + }, + { + x: moment().subtract(2, 'months').day(22).toDate(), + y: 3751 + }, + { + x: moment().subtract(2, 'months').day(25).toDate(), + y: 3310 + }, + { + x: moment().subtract(2, 'months').day(28).toDate(), + y: 3509 + }, + { + x: moment().subtract(1, 'months').day(1).toDate(), + y: 3187 + }, + { + x: moment().subtract(1, 'months').day(4).toDate(), + y: 2918 + }, + { + x: moment().subtract(1, 'months').day(7).toDate(), + y: 3191 + }, + { + x: moment().subtract(1, 'months').day(10).toDate(), + y: 3437 + }, + { + x: moment().subtract(1, 'months').day(13).toDate(), + y: 3291 + }, + { + x: moment().subtract(1, 'months').day(16).toDate(), + y: 3317 + }, + { + x: moment().subtract(1, 'months').day(19).toDate(), + y: 3716 + }, + { + x: moment().subtract(1, 'months').day(22).toDate(), + y: 3260 + }, + { + x: moment().subtract(1, 'months').day(25).toDate(), + y: 3694 + }, + { + x: moment().subtract(1, 'months').day(28).toDate(), + y: 3598 + } + ] + } + ], + 'last-year': [ + { + name: 'Visitors', + data: [ + { + x: moment().subtract(12, 'months').day(1).toDate(), + y: 2021 + }, + { + x: moment().subtract(12, 'months').day(4).toDate(), + y: 1749 + }, + { + x: moment().subtract(12, 'months').day(7).toDate(), + y: 1654 + }, + { + x: moment().subtract(12, 'months').day(10).toDate(), + y: 1900 + }, + { + x: moment().subtract(12, 'months').day(13).toDate(), + y: 1647 + }, + { + x: moment().subtract(12, 'months').day(16).toDate(), + y: 1315 + }, + { + x: moment().subtract(12, 'months').day(19).toDate(), + y: 1807 + }, + { + x: moment().subtract(12, 'months').day(22).toDate(), + y: 1793 + }, + { + x: moment().subtract(12, 'months').day(25).toDate(), + y: 1892 + }, + { + x: moment().subtract(12, 'months').day(28).toDate(), + y: 1846 + }, + { + x: moment().subtract(11, 'months').day(1).toDate(), + y: 1804 + }, + { + x: moment().subtract(11, 'months').day(4).toDate(), + y: 1778 + }, + { + x: moment().subtract(11, 'months').day(7).toDate(), + y: 2015 + }, + { + x: moment().subtract(11, 'months').day(10).toDate(), + y: 1892 + }, + { + x: moment().subtract(11, 'months').day(13).toDate(), + y: 1708 + }, + { + x: moment().subtract(11, 'months').day(16).toDate(), + y: 1711 + }, + { + x: moment().subtract(11, 'months').day(19).toDate(), + y: 1570 + }, + { + x: moment().subtract(11, 'months').day(22).toDate(), + y: 1507 + }, + { + x: moment().subtract(11, 'months').day(25).toDate(), + y: 1451 + }, + { + x: moment().subtract(11, 'months').day(28).toDate(), + y: 1522 + }, + { + x: moment().subtract(10, 'months').day(1).toDate(), + y: 1977 + }, + { + x: moment().subtract(10, 'months').day(4).toDate(), + y: 2367 + }, + { + x: moment().subtract(10, 'months').day(7).toDate(), + y: 2798 + }, + { + x: moment().subtract(10, 'months').day(10).toDate(), + y: 3080 + }, + { + x: moment().subtract(10, 'months').day(13).toDate(), + y: 2856 + }, + { + x: moment().subtract(10, 'months').day(16).toDate(), + y: 2745 + }, + { + x: moment().subtract(10, 'months').day(19).toDate(), + y: 2750 + }, + { + x: moment().subtract(10, 'months').day(22).toDate(), + y: 2728 + }, + { + x: moment().subtract(10, 'months').day(25).toDate(), + y: 2436 + }, + { + x: moment().subtract(10, 'months').day(28).toDate(), + y: 2289 + }, + { + x: moment().subtract(9, 'months').day(1).toDate(), + y: 2804 + }, + { + x: moment().subtract(9, 'months').day(4).toDate(), + y: 2777 + }, + { + x: moment().subtract(9, 'months').day(7).toDate(), + y: 3024 + }, + { + x: moment().subtract(9, 'months').day(10).toDate(), + y: 2657 + }, + { + x: moment().subtract(9, 'months').day(13).toDate(), + y: 2218 + }, + { + x: moment().subtract(9, 'months').day(16).toDate(), + y: 1964 + }, + { + x: moment().subtract(9, 'months').day(19).toDate(), + y: 1674 + }, + { + x: moment().subtract(9, 'months').day(22).toDate(), + y: 1721 + }, + { + x: moment().subtract(9, 'months').day(25).toDate(), + y: 2005 + }, + { + x: moment().subtract(9, 'months').day(28).toDate(), + y: 1613 + }, + { + x: moment().subtract(8, 'months').day(1).toDate(), + y: 1071 + }, + { + x: moment().subtract(8, 'months').day(4).toDate(), + y: 1079 + }, + { + x: moment().subtract(8, 'months').day(7).toDate(), + y: 1133 + }, + { + x: moment().subtract(8, 'months').day(10).toDate(), + y: 1536 + }, + { + x: moment().subtract(8, 'months').day(13).toDate(), + y: 2016 + }, + { + x: moment().subtract(8, 'months').day(16).toDate(), + y: 2256 + }, + { + x: moment().subtract(8, 'months').day(19).toDate(), + y: 1934 + }, + { + x: moment().subtract(8, 'months').day(22).toDate(), + y: 1832 + }, + { + x: moment().subtract(8, 'months').day(25).toDate(), + y: 2075 + }, + { + x: moment().subtract(8, 'months').day(28).toDate(), + y: 1709 + }, + { + x: moment().subtract(7, 'months').day(1).toDate(), + y: 1831 + }, + { + x: moment().subtract(7, 'months').day(4).toDate(), + y: 1434 + }, + { + x: moment().subtract(7, 'months').day(7).toDate(), + y: 1293 + }, + { + x: moment().subtract(7, 'months').day(10).toDate(), + y: 1064 + }, + { + x: moment().subtract(7, 'months').day(13).toDate(), + y: 1080 + }, + { + x: moment().subtract(7, 'months').day(16).toDate(), + y: 1032 + }, + { + x: moment().subtract(7, 'months').day(19).toDate(), + y: 1280 + }, + { + x: moment().subtract(7, 'months').day(22).toDate(), + y: 1344 + }, + { + x: moment().subtract(7, 'months').day(25).toDate(), + y: 1835 + }, + { + x: moment().subtract(7, 'months').day(28).toDate(), + y: 2287 + }, + { + x: moment().subtract(6, 'months').day(1).toDate(), + y: 2692 + }, + { + x: moment().subtract(6, 'months').day(4).toDate(), + y: 2250 + }, + { + x: moment().subtract(6, 'months').day(7).toDate(), + y: 1814 + }, + { + x: moment().subtract(6, 'months').day(10).toDate(), + y: 1906 + }, + { + x: moment().subtract(6, 'months').day(13).toDate(), + y: 1973 + }, + { + x: moment().subtract(6, 'months').day(16).toDate(), + y: 1882 + }, + { + x: moment().subtract(6, 'months').day(19).toDate(), + y: 2333 + }, + { + x: moment().subtract(6, 'months').day(22).toDate(), + y: 2048 + }, + { + x: moment().subtract(6, 'months').day(25).toDate(), + y: 2547 + }, + { + x: moment().subtract(6, 'months').day(28).toDate(), + y: 2884 + }, + { + x: moment().subtract(5, 'months').day(1).toDate(), + y: 2771 + }, + { + x: moment().subtract(5, 'months').day(4).toDate(), + y: 2522 + }, + { + x: moment().subtract(5, 'months').day(7).toDate(), + y: 2543 + }, + { + x: moment().subtract(5, 'months').day(10).toDate(), + y: 2413 + }, + { + x: moment().subtract(5, 'months').day(13).toDate(), + y: 2002 + }, + { + x: moment().subtract(5, 'months').day(16).toDate(), + y: 1838 + }, + { + x: moment().subtract(5, 'months').day(19).toDate(), + y: 1830 + }, + { + x: moment().subtract(5, 'months').day(22).toDate(), + y: 1872 + }, + { + x: moment().subtract(5, 'months').day(25).toDate(), + y: 2246 + }, + { + x: moment().subtract(5, 'months').day(28).toDate(), + y: 2171 + }, + { + x: moment().subtract(4, 'months').day(1).toDate(), + y: 2988 + }, + { + x: moment().subtract(4, 'months').day(4).toDate(), + y: 2694 + }, + { + x: moment().subtract(4, 'months').day(7).toDate(), + y: 2806 + }, + { + x: moment().subtract(4, 'months').day(10).toDate(), + y: 3040 + }, + { + x: moment().subtract(4, 'months').day(13).toDate(), + y: 2898 + }, + { + x: moment().subtract(4, 'months').day(16).toDate(), + y: 3013 + }, + { + x: moment().subtract(4, 'months').day(19).toDate(), + y: 2760 + }, + { + x: moment().subtract(4, 'months').day(22).toDate(), + y: 3021 + }, + { + x: moment().subtract(4, 'months').day(25).toDate(), + y: 2688 + }, + { + x: moment().subtract(4, 'months').day(28).toDate(), + y: 2572 + }, + { + x: moment().subtract(3, 'months').day(1).toDate(), + y: 2789 + }, + { + x: moment().subtract(3, 'months').day(4).toDate(), + y: 3069 + }, + { + x: moment().subtract(3, 'months').day(7).toDate(), + y: 3142 + }, + { + x: moment().subtract(3, 'months').day(10).toDate(), + y: 3614 + }, + { + x: moment().subtract(3, 'months').day(13).toDate(), + y: 3202 + }, + { + x: moment().subtract(3, 'months').day(16).toDate(), + y: 2730 + }, + { + x: moment().subtract(3, 'months').day(19).toDate(), + y: 2951 + }, + { + x: moment().subtract(3, 'months').day(22).toDate(), + y: 3267 + }, + { + x: moment().subtract(3, 'months').day(25).toDate(), + y: 2882 + }, + { + x: moment().subtract(3, 'months').day(28).toDate(), + y: 2885 + }, + { + x: moment().subtract(2, 'months').day(1).toDate(), + y: 2915 + }, + { + x: moment().subtract(2, 'months').day(4).toDate(), + y: 2790 + }, + { + x: moment().subtract(2, 'months').day(7).toDate(), + y: 3071 + }, + { + x: moment().subtract(2, 'months').day(10).toDate(), + y: 2802 + }, + { + x: moment().subtract(2, 'months').day(13).toDate(), + y: 2382 + }, + { + x: moment().subtract(2, 'months').day(16).toDate(), + y: 1883 + }, + { + x: moment().subtract(2, 'months').day(19).toDate(), + y: 1448 + }, + { + x: moment().subtract(2, 'months').day(22).toDate(), + y: 1176 + }, + { + x: moment().subtract(2, 'months').day(25).toDate(), + y: 1275 + }, + { + x: moment().subtract(2, 'months').day(28).toDate(), + y: 1136 + }, + { + x: moment().subtract(1, 'months').day(1).toDate(), + y: 1160 + }, + { + x: moment().subtract(1, 'months').day(4).toDate(), + y: 1524 + }, + { + x: moment().subtract(1, 'months').day(7).toDate(), + y: 1305 + }, + { + x: moment().subtract(1, 'months').day(10).toDate(), + y: 1725 + }, + { + x: moment().subtract(1, 'months').day(13).toDate(), + y: 1850 + }, + { + x: moment().subtract(1, 'months').day(16).toDate(), + y: 2304 + }, + { + x: moment().subtract(1, 'months').day(19).toDate(), + y: 2187 + }, + { + x: moment().subtract(1, 'months').day(22).toDate(), + y: 2597 + }, + { + x: moment().subtract(1, 'months').day(25).toDate(), + y: 2246 + }, + { + x: moment().subtract(1, 'months').day(28).toDate(), + y: 1767 + } + ] + } + ] + } + }, + conversions : { + amount: 4123, + labels: [ + moment().subtract(47, 'days').format('DD MMM') + ' - ' + moment().subtract(40, 'days').format('DD MMM'), + moment().subtract(39, 'days').format('DD MMM') + ' - ' + moment().subtract(32, 'days').format('DD MMM'), + moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'), + moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'), + moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'), + moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM') + ], + series: [ + { + name: 'Conversions', + data: [4412, 4345, 4541, 4677, 4322, 4123] + } + ] + }, + impressions : { + amount: 46085, + labels: [ + moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'), + moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'), + moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'), + moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM') + ], + series: [ + { + name: 'Impressions', + data: [11577, 11441, 11544, 11523] + } + ] + }, + visits : { + amount: 62083, + labels: [ + moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'), + moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'), + moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'), + moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM') + ], + series: [ + { + name: 'Visits', + data: [15521, 15519, 15522, 15521] + } + ] + }, + visitorsVsPageViews: { + overallScore : 472, + averageRatio : 45, + predictedRatio: 55, + series : [ + { + name: 'Page Views', + data: [ + { + x: moment().subtract(65, 'days').toDate(), + y: 4769 + }, + { + x: moment().subtract(64, 'days').toDate(), + y: 4901 + }, + { + x: moment().subtract(63, 'days').toDate(), + y: 4640 + }, + { + x: moment().subtract(62, 'days').toDate(), + y: 5128 + }, + { + x: moment().subtract(61, 'days').toDate(), + y: 5015 + }, + { + x: moment().subtract(60, 'days').toDate(), + y: 5360 + }, + { + x: moment().subtract(59, 'days').toDate(), + y: 5608 + }, + { + x: moment().subtract(58, 'days').toDate(), + y: 5272 + }, + { + x: moment().subtract(57, 'days').toDate(), + y: 5660 + }, + { + x: moment().subtract(56, 'days').toDate(), + y: 6026 + }, + { + x: moment().subtract(55, 'days').toDate(), + y: 5836 + }, + { + x: moment().subtract(54, 'days').toDate(), + y: 5659 + }, + { + x: moment().subtract(53, 'days').toDate(), + y: 5575 + }, + { + x: moment().subtract(52, 'days').toDate(), + y: 5474 + }, + { + x: moment().subtract(51, 'days').toDate(), + y: 5427 + }, + { + x: moment().subtract(50, 'days').toDate(), + y: 5865 + }, + { + x: moment().subtract(49, 'days').toDate(), + y: 5700 + }, + { + x: moment().subtract(48, 'days').toDate(), + y: 6052 + }, + { + x: moment().subtract(47, 'days').toDate(), + y: 5760 + }, + { + x: moment().subtract(46, 'days').toDate(), + y: 5648 + }, + { + x: moment().subtract(45, 'days').toDate(), + y: 5510 + }, + { + x: moment().subtract(44, 'days').toDate(), + y: 5435 + }, + { + x: moment().subtract(43, 'days').toDate(), + y: 5239 + }, + { + x: moment().subtract(42, 'days').toDate(), + y: 5452 + }, + { + x: moment().subtract(41, 'days').toDate(), + y: 5416 + }, + { + x: moment().subtract(40, 'days').toDate(), + y: 5195 + }, + { + x: moment().subtract(39, 'days').toDate(), + y: 5119 + }, + { + x: moment().subtract(38, 'days').toDate(), + y: 4635 + }, + { + x: moment().subtract(37, 'days').toDate(), + y: 4833 + }, + { + x: moment().subtract(36, 'days').toDate(), + y: 4584 + }, + { + x: moment().subtract(35, 'days').toDate(), + y: 4822 + }, + { + x: moment().subtract(34, 'days').toDate(), + y: 4330 + }, + { + x: moment().subtract(33, 'days').toDate(), + y: 4582 + }, + { + x: moment().subtract(32, 'days').toDate(), + y: 4348 + }, + { + x: moment().subtract(31, 'days').toDate(), + y: 4132 + }, + { + x: moment().subtract(30, 'days').toDate(), + y: 4099 + }, + { + x: moment().subtract(29, 'days').toDate(), + y: 3849 + }, + { + x: moment().subtract(28, 'days').toDate(), + y: 4010 + }, + { + x: moment().subtract(27, 'days').toDate(), + y: 4486 + }, + { + x: moment().subtract(26, 'days').toDate(), + y: 4403 + }, + { + x: moment().subtract(25, 'days').toDate(), + y: 4141 + }, + { + x: moment().subtract(24, 'days').toDate(), + y: 3780 + }, + { + x: moment().subtract(23, 'days').toDate(), + y: 3929 + }, + { + x: moment().subtract(22, 'days').toDate(), + y: 3524 + }, + { + x: moment().subtract(21, 'days').toDate(), + y: 3212 + }, + { + x: moment().subtract(20, 'days').toDate(), + y: 3568 + }, + { + x: moment().subtract(19, 'days').toDate(), + y: 3800 + }, + { + x: moment().subtract(18, 'days').toDate(), + y: 3796 + }, + { + x: moment().subtract(17, 'days').toDate(), + y: 3870 + }, + { + x: moment().subtract(16, 'days').toDate(), + y: 3745 + }, + { + x: moment().subtract(15, 'days').toDate(), + y: 3751 + }, + { + x: moment().subtract(14, 'days').toDate(), + y: 3310 + }, + { + x: moment().subtract(13, 'days').toDate(), + y: 3509 + }, + { + x: moment().subtract(12, 'days').toDate(), + y: 3311 + }, + { + x: moment().subtract(11, 'days').toDate(), + y: 3187 + }, + { + x: moment().subtract(10, 'days').toDate(), + y: 2918 + }, + { + x: moment().subtract(9, 'days').toDate(), + y: 3191 + }, + { + x: moment().subtract(8, 'days').toDate(), + y: 3437 + }, + { + x: moment().subtract(7, 'days').toDate(), + y: 3291 + }, + { + x: moment().subtract(6, 'days').toDate(), + y: 3317 + }, + { + x: moment().subtract(5, 'days').toDate(), + y: 3716 + }, + { + x: moment().subtract(4, 'days').toDate(), + y: 3260 + }, + { + x: moment().subtract(3, 'days').toDate(), + y: 3694 + }, + { + x: moment().subtract(2, 'days').toDate(), + y: 3598 + }, + { + x: moment().subtract(1, 'days').toDate(), + y: 3812 + } + ] + }, + { + name: 'Visitors', + data: [ + { + x: moment().subtract(65, 'days').toDate(), + y: 1654 + }, + { + x: moment().subtract(64, 'days').toDate(), + y: 1900 + }, + { + x: moment().subtract(63, 'days').toDate(), + y: 1647 + }, + { + x: moment().subtract(62, 'days').toDate(), + y: 1315 + }, + { + x: moment().subtract(61, 'days').toDate(), + y: 1807 + }, + { + x: moment().subtract(60, 'days').toDate(), + y: 1793 + }, + { + x: moment().subtract(59, 'days').toDate(), + y: 1892 + }, + { + x: moment().subtract(58, 'days').toDate(), + y: 1846 + }, + { + x: moment().subtract(57, 'days').toDate(), + y: 1966 + }, + { + x: moment().subtract(56, 'days').toDate(), + y: 1804 + }, + { + x: moment().subtract(55, 'days').toDate(), + y: 1778 + }, + { + x: moment().subtract(54, 'days').toDate(), + y: 2015 + }, + { + x: moment().subtract(53, 'days').toDate(), + y: 1892 + }, + { + x: moment().subtract(52, 'days').toDate(), + y: 1708 + }, + { + x: moment().subtract(51, 'days').toDate(), + y: 1711 + }, + { + x: moment().subtract(50, 'days').toDate(), + y: 1570 + }, + { + x: moment().subtract(49, 'days').toDate(), + y: 1507 + }, + { + x: moment().subtract(48, 'days').toDate(), + y: 1451 + }, + { + x: moment().subtract(47, 'days').toDate(), + y: 1522 + }, + { + x: moment().subtract(46, 'days').toDate(), + y: 1801 + }, + { + x: moment().subtract(45, 'days').toDate(), + y: 1977 + }, + { + x: moment().subtract(44, 'days').toDate(), + y: 2367 + }, + { + x: moment().subtract(43, 'days').toDate(), + y: 2798 + }, + { + x: moment().subtract(42, 'days').toDate(), + y: 3080 + }, + { + x: moment().subtract(41, 'days').toDate(), + y: 2856 + }, + { + x: moment().subtract(40, 'days').toDate(), + y: 2745 + }, + { + x: moment().subtract(39, 'days').toDate(), + y: 2750 + }, + { + x: moment().subtract(38, 'days').toDate(), + y: 2728 + }, + { + x: moment().subtract(37, 'days').toDate(), + y: 2436 + }, + { + x: moment().subtract(36, 'days').toDate(), + y: 2289 + }, + { + x: moment().subtract(35, 'days').toDate(), + y: 2657 + }, + { + x: moment().subtract(34, 'days').toDate(), + y: 2804 + }, + { + x: moment().subtract(33, 'days').toDate(), + y: 2777 + }, + { + x: moment().subtract(32, 'days').toDate(), + y: 3024 + }, + { + x: moment().subtract(31, 'days').toDate(), + y: 2657 + }, + { + x: moment().subtract(30, 'days').toDate(), + y: 2218 + }, + { + x: moment().subtract(29, 'days').toDate(), + y: 1964 + }, + { + x: moment().subtract(28, 'days').toDate(), + y: 1674 + }, + { + x: moment().subtract(27, 'days').toDate(), + y: 1721 + }, + { + x: moment().subtract(26, 'days').toDate(), + y: 2005 + }, + { + x: moment().subtract(25, 'days').toDate(), + y: 1613 + }, + { + x: moment().subtract(24, 'days').toDate(), + y: 1295 + }, + { + x: moment().subtract(23, 'days').toDate(), + y: 1071 + }, + { + x: moment().subtract(22, 'days').toDate(), + y: 799 + }, + { + x: moment().subtract(21, 'days').toDate(), + y: 1133 + }, + { + x: moment().subtract(20, 'days').toDate(), + y: 1536 + }, + { + x: moment().subtract(19, 'days').toDate(), + y: 2016 + }, + { + x: moment().subtract(18, 'days').toDate(), + y: 2256 + }, + { + x: moment().subtract(17, 'days').toDate(), + y: 1934 + }, + { + x: moment().subtract(16, 'days').toDate(), + y: 1832 + }, + { + x: moment().subtract(15, 'days').toDate(), + y: 2075 + }, + { + x: moment().subtract(14, 'days').toDate(), + y: 1709 + }, + { + x: moment().subtract(13, 'days').toDate(), + y: 1932 + }, + { + x: moment().subtract(12, 'days').toDate(), + y: 1831 + }, + { + x: moment().subtract(11, 'days').toDate(), + y: 1434 + }, + { + x: moment().subtract(10, 'days').toDate(), + y: 993 + }, + { + x: moment().subtract(9, 'days').toDate(), + y: 1064 + }, + { + x: moment().subtract(8, 'days').toDate(), + y: 618 + }, + { + x: moment().subtract(7, 'days').toDate(), + y: 1032 + }, + { + x: moment().subtract(6, 'days').toDate(), + y: 1280 + }, + { + x: moment().subtract(5, 'days').toDate(), + y: 1344 + }, + { + x: moment().subtract(4, 'days').toDate(), + y: 1835 + }, + { + x: moment().subtract(3, 'days').toDate(), + y: 2287 + }, + { + x: moment().subtract(2, 'days').toDate(), + y: 2226 + }, + { + x: moment().subtract(1, 'days').toDate(), + y: 2692 + } + ] + } + ] + }, + newVsReturning : { + uniqueVisitors: 46085, + series : [80, 20], + labels : [ + 'New', + 'Returning' + ] + }, + gender : { + uniqueVisitors: 46085, + series : [55, 45], + labels : [ + 'Male', + 'Female' + ] + }, + age : { + uniqueVisitors: 46085, + series : [35, 65], + labels : [ + 'Under 30', + 'Over 30' + ] + }, + language : { + uniqueVisitors: 46085, + series : [25, 75], + labels : [ + 'English', + 'Other' + ] + } +}; diff --git a/src/app/mock-api/dashboards/crypto/api.ts b/src/app/mock-api/dashboards/crypto/api.ts new file mode 100644 index 0000000..e59c7b0 --- /dev/null +++ b/src/app/mock-api/dashboards/crypto/api.ts @@ -0,0 +1,38 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { crypto as cryptoData } from 'app/mock-api/dashboards/crypto/data'; + +@Injectable({ + providedIn: 'root' +}) +export class CryptoMockApi +{ + private _crypto: any = cryptoData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) + { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void + { + // ----------------------------------------------------------------------------------------------------- + // @ Crypto - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/dashboards/crypto') + .reply(() => [200, cloneDeep(this._crypto)]); + } +} diff --git a/src/app/mock-api/dashboards/crypto/data.ts b/src/app/mock-api/dashboards/crypto/data.ts new file mode 100644 index 0000000..3a56494 --- /dev/null +++ b/src/app/mock-api/dashboards/crypto/data.ts @@ -0,0 +1,1196 @@ +import * as moment from 'moment'; + +/* tslint:disable:max-line-length */ +export const crypto = { + btc : { + amount : 8878.48, + trend : { + dir : 'up', + amount: 0.17 + }, + marketCap : 148752956966, + volume : 22903438381, + supply : 18168448, + allTimeHigh: 19891.00, + price : { + series: [ + { + name: 'Price', + data: [ + { + x: -145, + y: 6554.36 + }, + { + x: -144, + y: 6554.36 + }, + { + x: -143, + y: 6546.94 + }, + { + x: -142, + y: 6546.96 + }, + { + x: -141, + y: 6546.11 + }, + { + x: -140, + y: 6550.26 + }, + { + x: -139, + y: 6546.11 + }, + { + x: -138, + y: 6550.79 + }, + { + x: -137, + y: 6545.36 + }, + { + x: -136, + y: 6541.06 + }, + { + x: -135, + y: 6540.10 + }, + { + x: -134, + y: 6538.31 + }, + { + x: -133, + y: 6538.42 + }, + { + x: -132, + y: 6538.48 + }, + { + x: -131, + y: 6538.71 + }, + { + x: -130, + y: 6548.42 + }, + { + x: -129, + y: 6546.87 + }, + { + x: -128, + y: 6547.07 + }, + { + x: -127, + y: 6535.07 + }, + { + x: -126, + y: 6535.01 + }, + { + x: -125, + y: 6539.02 + }, + { + x: -124, + y: 6547.96 + }, + { + x: -123, + y: 6547.92 + }, + { + x: -122, + y: 6546.56 + }, + { + x: -121, + y: 6546.56 + }, + { + x: -120, + y: 6564.16 + }, + { + x: -119, + y: 6560.83 + }, + { + x: -118, + y: 6559.08 + }, + { + x: -117, + y: 6553.02 + }, + { + x: -116, + y: 6564.99 + }, + { + x: -115, + y: 6558.70 + }, + { + x: -114, + y: 6568.73 + }, + { + x: -113, + y: 6568.80 + }, + { + x: -112, + y: 6568.80 + }, + { + x: -111, + y: 6568.80 + }, + { + x: -110, + y: 6571.83 + }, + { + x: -109, + y: 6562.64 + }, + { + x: -108, + y: 6561.28 + }, + { + x: -107, + y: 6561.28 + }, + { + x: -106, + y: 6560.40 + }, + { + x: -105, + y: 6564.41 + }, + { + x: -104, + y: 6562.44 + }, + { + x: -103, + y: 6565.13 + }, + { + x: -102, + y: 6553.30 + }, + { + x: -101, + y: 6552.68 + }, + { + x: -100, + y: 6551.92 + }, + { + x: -99, + y: 6553.85 + }, + { + x: -98, + y: 6560.00 + }, + { + x: -97, + y: 6560.00 + }, + { + x: -96, + y: 6565.01 + }, + { + x: -95, + y: 6583.19 + }, + { + x: -94, + y: 6555.79 + }, + { + x: -93, + y: 6556.04 + }, + { + x: -92, + y: 6558.85 + }, + { + x: -91, + y: 6564.75 + }, + { + x: -90, + y: 6564.88 + }, + { + x: -89, + y: 6565.10 + }, + { + x: -88, + y: 6565.72 + }, + { + x: -87, + y: 6565.72 + }, + { + x: -86, + y: 6565.95 + }, + { + x: -85, + y: 6561.82 + }, + { + x: -84, + y: 6566.26 + }, + { + x: -83, + y: 6568.81 + }, + { + x: -82, + y: 6588.57 + }, + { + x: -81, + y: 6587.11 + }, + { + x: -80, + y: 6577.86 + }, + { + x: -79, + y: 6586.51 + }, + { + x: -78, + y: 6581.14 + }, + { + x: -77, + y: 6581.45 + }, + { + x: -76, + y: 6589.54 + }, + { + x: -75, + y: 6580.91 + }, + { + x: -74, + y: 6581.67 + }, + { + x: -73, + y: 6579.06 + }, + { + x: -72, + y: 6578.73 + }, + { + x: -71, + y: 6578.64 + }, + { + x: -70, + y: 6579.08 + }, + { + x: -69, + y: 6577.43 + }, + { + x: -68, + y: 6582.12 + }, + { + x: -67, + y: 6572.42 + }, + { + x: -66, + y: 6578.72 + }, + { + x: -65, + y: 6572.43 + }, + { + x: -64, + y: 6570.64 + }, + { + x: -63, + y: 6561.64 + }, + { + x: -62, + y: 6550.84 + }, + { + x: -61, + y: 6561.83 + }, + { + x: -60, + y: 6561.84 + }, + { + x: -59, + y: 6552.44 + }, + { + x: -58, + y: 6552.47 + }, + { + x: -57, + y: 6562.31 + }, + { + x: -56, + y: 6562.10 + }, + { + x: -55, + y: 6561.65 + }, + { + x: -54, + y: 6547.96 + }, + { + x: -53, + y: 6559.95 + }, + { + x: -52, + y: 6562.08 + }, + { + x: -51, + y: 6557.71 + }, + { + x: -50, + y: 6559.05 + }, + { + x: -49, + y: 6562.69 + }, + { + x: -48, + y: 6578.18 + }, + { + x: -47, + y: 6580.15 + }, + { + x: -46, + y: 6584.26 + }, + { + x: -45, + y: 6574.75 + }, + { + x: -44, + y: 6574.85 + }, + { + x: -43, + y: 6582.63 + }, + { + x: -42, + y: 6569.70 + }, + { + x: -41, + y: 6570.10 + }, + { + x: -40, + y: 6570.11 + }, + { + x: -39, + y: 6569.71 + }, + { + x: -38, + y: 6578.03 + }, + { + x: -37, + y: 6579.92 + }, + { + x: -36, + y: 6571.03 + }, + { + x: -35, + y: 6571.48 + }, + { + x: -34, + y: 6576.67 + }, + { + x: -33, + y: 6576.67 + }, + { + x: -32, + y: 6576.63 + }, + { + x: -31, + y: 6576.68 + }, + { + x: -30, + y: 6573.29 + }, + { + x: -29, + y: 6577.28 + }, + { + x: -28, + y: 6577.73 + }, + { + x: -27, + y: 6577.70 + }, + { + x: -26, + y: 6578.36 + }, + { + x: -25, + y: 6578.24 + }, + { + x: -24, + y: 6581.30 + }, + { + x: -23, + y: 6582.59 + }, + { + x: -22, + y: 6602.51 + }, + { + x: -21, + y: 6582.65 + }, + { + x: -20, + y: 6574.77 + }, + { + x: -19, + y: 6574.41 + }, + { + x: -18, + y: 6575.08 + }, + { + x: -17, + y: 6575.08 + }, + { + x: -16, + y: 6574.09 + }, + { + x: -15, + y: 6568.84 + }, + { + x: -14, + y: 6567.49 + }, + { + x: -13, + y: 6559.75 + }, + { + x: -12, + y: 6566.65 + }, + { + x: -11, + y: 6567.52 + }, + { + x: -10, + y: 6567.59 + }, + { + x: -9, + y: 6564.18 + }, + { + x: -8, + y: 6570.11 + }, + { + x: -7, + y: 6562.70 + }, + { + x: -6, + y: 6562.70 + }, + { + x: -5, + y: 6562.77 + }, + { + x: -4, + y: 6569.46 + }, + { + x: -3, + y: 6571.04 + }, + { + x: -2, + y: 6571.48 + }, + { + x: -1, + y: 6571.30 + } + ] + } + ] + } + }, + prices : { + btc: 8878.48, + eth: 170.46, + bch: 359.93, + xrp: 0.23512 + }, + wallets : { + btc: 24.97311243, + eth: 126.3212, + bch: 78.454412, + xrp: 11278.771123 + }, + watchlist: [ + { + title : 'Ethereum', + iso : 'ETH', + amount: 170.46, + trend : { + dir : 'up', + amount: 2.35 + }, + series: [ + { + name: 'Price', + data: [ + { + x: moment().subtract(20, 'minutes').format('HH:mm'), + y: 154.36 + }, + { + x: moment().subtract(19, 'minutes').format('HH:mm'), + y: 154.36 + }, + { + x: moment().subtract(18, 'minutes').format('HH:mm'), + y: 146.94 + }, + { + x: moment().subtract(17, 'minutes').format('HH:mm'), + y: 146.96 + }, + { + x: moment().subtract(16, 'minutes').format('HH:mm'), + y: 146.11 + }, + { + x: moment().subtract(15, 'minutes').format('HH:mm'), + y: 150.26 + }, + { + x: moment().subtract(14, 'minutes').format('HH:mm'), + y: 146.11 + }, + { + x: moment().subtract(13, 'minutes').format('HH:mm'), + y: 150.79 + }, + { + x: moment().subtract(12, 'minutes').format('HH:mm'), + y: 145.36 + }, + { + x: moment().subtract(11, 'minutes').format('HH:mm'), + y: 141.06 + }, + { + x: moment().subtract(10, 'minutes').format('HH:mm'), + y: 140.10 + }, + { + x: moment().subtract(9, 'minutes').format('HH:mm'), + y: 138.31 + }, + { + x: moment().subtract(8, 'minutes').format('HH:mm'), + y: 138.42 + }, + { + x: moment().subtract(7, 'minutes').format('HH:mm'), + y: 138.48 + }, + { + x: moment().subtract(6, 'minutes').format('HH:mm'), + y: 138.71 + }, + { + x: moment().subtract(5, 'minutes').format('HH:mm'), + y: 148.42 + }, + { + x: moment().subtract(4, 'minutes').format('HH:mm'), + y: 146.87 + }, + { + x: moment().subtract(3, 'minutes').format('HH:mm'), + y: 147.07 + }, + { + x: moment().subtract(2, 'minutes').format('HH:mm'), + y: 135.07 + }, + { + x: moment().subtract(1, 'minutes').format('HH:mm'), + y: 135.01 + } + ] + } + ] + }, + { + title : 'Bitcoin Cash', + iso : 'BCH', + amount: 359.93, + trend : { + dir : 'up', + amount: 9.94 + }, + series: [ + { + name: 'Price', + data: [ + { + x: moment().subtract(20, 'minutes').format('HH:mm'), + y: 374.77 + }, + { + x: moment().subtract(19, 'minutes').format('HH:mm'), + y: 374.41 + }, + { + x: moment().subtract(18, 'minutes').format('HH:mm'), + y: 375.08 + }, + { + x: moment().subtract(17, 'minutes').format('HH:mm'), + y: 375.08 + }, + { + x: moment().subtract(16, 'minutes').format('HH:mm'), + y: 374.09 + }, + { + x: moment().subtract(15, 'minutes').format('HH:mm'), + y: 368.84 + }, + { + x: moment().subtract(14, 'minutes').format('HH:mm'), + y: 367.49 + }, + { + x: moment().subtract(13, 'minutes').format('HH:mm'), + y: 359.75 + }, + { + x: moment().subtract(12, 'minutes').format('HH:mm'), + y: 366.65 + }, + { + x: moment().subtract(11, 'minutes').format('HH:mm'), + y: 367.52 + }, + { + x: moment().subtract(10, 'minutes').format('HH:mm'), + y: 367.59 + }, + { + x: moment().subtract(9, 'minutes').format('HH:mm'), + y: 364.18 + }, + { + x: moment().subtract(8, 'minutes').format('HH:mm'), + y: 370.11 + }, + { + x: moment().subtract(7, 'minutes').format('HH:mm'), + y: 362.70 + }, + { + x: moment().subtract(6, 'minutes').format('HH:mm'), + y: 362.70 + }, + { + x: moment().subtract(5, 'minutes').format('HH:mm'), + y: 362.77 + }, + { + x: moment().subtract(4, 'minutes').format('HH:mm'), + y: 369.46 + }, + { + x: moment().subtract(3, 'minutes').format('HH:mm'), + y: 371.04 + }, + { + x: moment().subtract(2, 'minutes').format('HH:mm'), + y: 371.48 + }, + { + x: moment().subtract(1, 'minutes').format('HH:mm'), + y: 371.30 + } + ] + } + ] + }, + { + title : 'XRP', + iso : 'XRP', + amount: 0.23512, + trend : { + dir : 'down', + amount: 0.35 + }, + series: [ + { + name: 'Price', + data: [ + { + x: moment().subtract(20, 'minutes').format('HH:mm'), + y: 0.258 + }, + { + x: moment().subtract(19, 'minutes').format('HH:mm'), + y: 0.256 + }, + { + x: moment().subtract(18, 'minutes').format('HH:mm'), + y: 0.255 + }, + { + x: moment().subtract(17, 'minutes').format('HH:mm'), + y: 0.255 + }, + { + x: moment().subtract(16, 'minutes').format('HH:mm'), + y: 0.254 + }, + { + x: moment().subtract(15, 'minutes').format('HH:mm'), + y: 0.248 + }, + { + x: moment().subtract(14, 'minutes').format('HH:mm'), + y: 0.247 + }, + { + x: moment().subtract(13, 'minutes').format('HH:mm'), + y: 0.249 + }, + { + x: moment().subtract(12, 'minutes').format('HH:mm'), + y: 0.246 + }, + { + x: moment().subtract(11, 'minutes').format('HH:mm'), + y: 0.247 + }, + { + x: moment().subtract(10, 'minutes').format('HH:mm'), + y: 0.247 + }, + { + x: moment().subtract(9, 'minutes').format('HH:mm'), + y: 0.244 + }, + { + x: moment().subtract(8, 'minutes').format('HH:mm'), + y: 0.250 + }, + { + x: moment().subtract(7, 'minutes').format('HH:mm'), + y: 0.242 + }, + { + x: moment().subtract(6, 'minutes').format('HH:mm'), + y: 0.251 + }, + { + x: moment().subtract(5, 'minutes').format('HH:mm'), + y: 0.251 + }, + { + x: moment().subtract(4, 'minutes').format('HH:mm'), + y: 0.251 + }, + { + x: moment().subtract(3, 'minutes').format('HH:mm'), + y: 0.249 + }, + { + x: moment().subtract(2, 'minutes').format('HH:mm'), + y: 0.242 + }, + { + x: moment().subtract(1, 'minutes').format('HH:mm'), + y: 0.240 + } + ] + } + ] + }, + { + title : 'Litecoin', + iso : 'LTC', + amount: 60.15, + trend : { + dir : 'up', + amount: 0.99 + }, + series: [ + { + name: 'Price', + data: [ + { + x: moment().subtract(20, 'minutes').format('HH:mm'), + y: 62.54 + }, + { + x: moment().subtract(19, 'minutes').format('HH:mm'), + y: 61.54 + }, + { + x: moment().subtract(18, 'minutes').format('HH:mm'), + y: 62.55 + }, + { + x: moment().subtract(17, 'minutes').format('HH:mm'), + y: 60.55 + }, + { + x: moment().subtract(16, 'minutes').format('HH:mm'), + y: 59.54 + }, + { + x: moment().subtract(15, 'minutes').format('HH:mm'), + y: 58.48 + }, + { + x: moment().subtract(14, 'minutes').format('HH:mm'), + y: 54.47 + }, + { + x: moment().subtract(13, 'minutes').format('HH:mm'), + y: 51.49 + }, + { + x: moment().subtract(12, 'minutes').format('HH:mm'), + y: 51.46 + }, + { + x: moment().subtract(11, 'minutes').format('HH:mm'), + y: 53.47 + }, + { + x: moment().subtract(10, 'minutes').format('HH:mm'), + y: 52.47 + }, + { + x: moment().subtract(9, 'minutes').format('HH:mm'), + y: 54.44 + }, + { + x: moment().subtract(8, 'minutes').format('HH:mm'), + y: 59.50 + }, + { + x: moment().subtract(7, 'minutes').format('HH:mm'), + y: 62.42 + }, + { + x: moment().subtract(6, 'minutes').format('HH:mm'), + y: 61.42 + }, + { + x: moment().subtract(5, 'minutes').format('HH:mm'), + y: 60.42 + }, + { + x: moment().subtract(4, 'minutes').format('HH:mm'), + y: 58.49 + }, + { + x: moment().subtract(3, 'minutes').format('HH:mm'), + y: 57.51 + }, + { + x: moment().subtract(2, 'minutes').format('HH:mm'), + y: 54.51 + }, + { + x: moment().subtract(1, 'minutes').format('HH:mm'), + y: 51.25 + } + ] + } + ] + }, + { + title : 'Zcash', + iso : 'ZEC', + amount: 58.41, + trend : { + dir : 'down', + amount: 8.79 + }, + series: [ + { + name: 'Price', + data: [ + { + x: moment().subtract(20, 'minutes').format('HH:mm'), + y: 53.54 + }, + { + x: moment().subtract(19, 'minutes').format('HH:mm'), + y: 52.54 + }, + { + x: moment().subtract(18, 'minutes').format('HH:mm'), + y: 52.55 + }, + { + x: moment().subtract(17, 'minutes').format('HH:mm'), + y: 46.44 + }, + { + x: moment().subtract(16, 'minutes').format('HH:mm'), + y: 49.50 + }, + { + x: moment().subtract(15, 'minutes').format('HH:mm'), + y: 55.42 + }, + { + x: moment().subtract(14, 'minutes').format('HH:mm'), + y: 54.42 + }, + { + x: moment().subtract(13, 'minutes').format('HH:mm'), + y: 43.49 + }, + { + x: moment().subtract(12, 'minutes').format('HH:mm'), + y: 43.46 + }, + { + x: moment().subtract(11, 'minutes').format('HH:mm'), + y: 41.47 + }, + { + x: moment().subtract(10, 'minutes').format('HH:mm'), + y: 41.47 + }, + { + x: moment().subtract(9, 'minutes').format('HH:mm'), + y: 51.55 + }, + { + x: moment().subtract(8, 'minutes').format('HH:mm'), + y: 48.54 + }, + { + x: moment().subtract(7, 'minutes').format('HH:mm'), + y: 49.48 + }, + { + x: moment().subtract(6, 'minutes').format('HH:mm'), + y: 45.47 + }, + { + x: moment().subtract(5, 'minutes').format('HH:mm'), + y: 51.42 + }, + { + x: moment().subtract(4, 'minutes').format('HH:mm'), + y: 49.49 + }, + { + x: moment().subtract(3, 'minutes').format('HH:mm'), + y: 46.51 + }, + { + x: moment().subtract(2, 'minutes').format('HH:mm'), + y: 41.51 + }, + { + x: moment().subtract(1, 'minutes').format('HH:mm'), + y: 44.25 + } + ] + } + ] + }, + { + title : 'Bitcoin Gold', + iso : 'BTG', + amount: 12.23, + trend : { + dir : 'down', + amount: 4.42 + }, + series: [ + { + name: 'Price', + data: [ + { + x: moment().subtract(20, 'minutes').format('HH:mm'), + y: 14.77 + }, + { + x: moment().subtract(19, 'minutes').format('HH:mm'), + y: 14.41 + }, + { + x: moment().subtract(18, 'minutes').format('HH:mm'), + y: 15.08 + }, + { + x: moment().subtract(17, 'minutes').format('HH:mm'), + y: 15.08 + }, + { + x: moment().subtract(16, 'minutes').format('HH:mm'), + y: 14.09 + }, + { + x: moment().subtract(15, 'minutes').format('HH:mm'), + y: 18.84 + }, + { + x: moment().subtract(14, 'minutes').format('HH:mm'), + y: 17.49 + }, + { + x: moment().subtract(13, 'minutes').format('HH:mm'), + y: 19.75 + }, + { + x: moment().subtract(12, 'minutes').format('HH:mm'), + y: 16.65 + }, + { + x: moment().subtract(11, 'minutes').format('HH:mm'), + y: 17.52 + }, + { + x: moment().subtract(10, 'minutes').format('HH:mm'), + y: 17.59 + }, + { + x: moment().subtract(9, 'minutes').format('HH:mm'), + y: 14.18 + }, + { + x: moment().subtract(8, 'minutes').format('HH:mm'), + y: 10.11 + }, + { + x: moment().subtract(7, 'minutes').format('HH:mm'), + y: 12.70 + }, + { + x: moment().subtract(6, 'minutes').format('HH:mm'), + y: 12.70 + }, + { + x: moment().subtract(5, 'minutes').format('HH:mm'), + y: 12.77 + }, + { + x: moment().subtract(4, 'minutes').format('HH:mm'), + y: 19.46 + }, + { + x: moment().subtract(3, 'minutes').format('HH:mm'), + y: 11.04 + }, + { + x: moment().subtract(2, 'minutes').format('HH:mm'), + y: 11.48 + }, + { + x: moment().subtract(1, 'minutes').format('HH:mm'), + y: 11.30 + } + ] + } + ] + } + ] +}; + diff --git a/src/app/mock-api/dashboards/finance/api.ts b/src/app/mock-api/dashboards/finance/api.ts new file mode 100644 index 0000000..cc9bede --- /dev/null +++ b/src/app/mock-api/dashboards/finance/api.ts @@ -0,0 +1,38 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { finance as financeData } from 'app/mock-api/dashboards/finance/data'; + +@Injectable({ + providedIn: 'root' +}) +export class FinanceMockApi +{ + private _finance: any = financeData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) + { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void + { + // ----------------------------------------------------------------------------------------------------- + // @ Sales - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/dashboards/finance') + .reply(() => [200, cloneDeep(this._finance)]); + } +} diff --git a/src/app/mock-api/dashboards/finance/data.ts b/src/app/mock-api/dashboards/finance/data.ts new file mode 100644 index 0000000..77b3334 --- /dev/null +++ b/src/app/mock-api/dashboards/finance/data.ts @@ -0,0 +1,1045 @@ +import * as moment from 'moment'; + +/* tslint:disable:max-line-length */ +export const finance = { + accountBalance : { + growRate: 38.33, + ami : 45332, + series : [ + { + name: 'Predicted', + data: [ + { + x: moment().subtract(12, 'months').day(1).toDate(), + y: 48.84 + }, + { + x: moment().subtract(12, 'months').day(4).toDate(), + y: 53.51 + }, + { + x: moment().subtract(12, 'months').day(7).toDate(), + y: 52.93 + }, + { + x: moment().subtract(12, 'months').day(10).toDate(), + y: 49.08 + }, + { + x: moment().subtract(12, 'months').day(13).toDate(), + y: 50.27 + }, + { + x: moment().subtract(12, 'months').day(16).toDate(), + y: 48.37 + }, + { + x: moment().subtract(12, 'months').day(19).toDate(), + y: 44.84 + }, + { + x: moment().subtract(12, 'months').day(22).toDate(), + y: 40.71 + }, + { + x: moment().subtract(12, 'months').day(25).toDate(), + y: 41.24 + }, + { + x: moment().subtract(12, 'months').day(28).toDate(), + y: 45.63 + }, + { + x: moment().subtract(11, 'months').day(1).toDate(), + y: 38.20 + }, + { + x: moment().subtract(11, 'months').day(4).toDate(), + y: 39.68 + }, + { + x: moment().subtract(11, 'months').day(7).toDate(), + y: 41.02 + }, + { + x: moment().subtract(11, 'months').day(10).toDate(), + y: 39.41 + }, + { + x: moment().subtract(11, 'months').day(13).toDate(), + y: 35.66 + }, + { + x: moment().subtract(11, 'months').day(16).toDate(), + y: 38.53 + }, + { + x: moment().subtract(11, 'months').day(19).toDate(), + y: 38.53 + }, + { + x: moment().subtract(11, 'months').day(22).toDate(), + y: 40.69 + }, + { + x: moment().subtract(11, 'months').day(25).toDate(), + y: 38.79 + }, + { + x: moment().subtract(11, 'months').day(28).toDate(), + y: 42.98 + }, + { + x: moment().subtract(10, 'months').day(1).toDate(), + y: 43.55 + }, + { + x: moment().subtract(10, 'months').day(4).toDate(), + y: 40.65 + }, + { + x: moment().subtract(10, 'months').day(7).toDate(), + y: 36.50 + }, + { + x: moment().subtract(10, 'months').day(10).toDate(), + y: 33.79 + }, + { + x: moment().subtract(10, 'months').day(13).toDate(), + y: 31.91 + }, + { + x: moment().subtract(10, 'months').day(16).toDate(), + y: 29.68 + }, + { + x: moment().subtract(10, 'months').day(19).toDate(), + y: 29.57 + }, + { + x: moment().subtract(10, 'months').day(22).toDate(), + y: 33.13 + }, + { + x: moment().subtract(10, 'months').day(25).toDate(), + y: 37.08 + }, + { + x: moment().subtract(10, 'months').day(28).toDate(), + y: 35.86 + }, + { + x: moment().subtract(9, 'months').day(1).toDate(), + y: 39.65 + }, + { + x: moment().subtract(9, 'months').day(4).toDate(), + y: 39.01 + }, + { + x: moment().subtract(9, 'months').day(7).toDate(), + y: 34.10 + }, + { + x: moment().subtract(9, 'months').day(10).toDate(), + y: 37.48 + }, + { + x: moment().subtract(9, 'months').day(13).toDate(), + y: 39.29 + }, + { + x: moment().subtract(9, 'months').day(16).toDate(), + y: 38.46 + }, + { + x: moment().subtract(9, 'months').day(19).toDate(), + y: 37.71 + }, + { + x: moment().subtract(9, 'months').day(22).toDate(), + y: 40.15 + }, + { + x: moment().subtract(9, 'months').day(25).toDate(), + y: 35.89 + }, + { + x: moment().subtract(9, 'months').day(28).toDate(), + y: 31.50 + }, + { + x: moment().subtract(8, 'months').day(1).toDate(), + y: 30.50 + }, + { + x: moment().subtract(8, 'months').day(4).toDate(), + y: 25.74 + }, + { + x: moment().subtract(8, 'months').day(7).toDate(), + y: 28.23 + }, + { + x: moment().subtract(8, 'months').day(10).toDate(), + y: 28.48 + }, + { + x: moment().subtract(8, 'months').day(13).toDate(), + y: 30.00 + }, + { + x: moment().subtract(8, 'months').day(16).toDate(), + y: 32.16 + }, + { + x: moment().subtract(8, 'months').day(19).toDate(), + y: 32.99 + }, + { + x: moment().subtract(8, 'months').day(22).toDate(), + y: 37.68 + }, + { + x: moment().subtract(8, 'months').day(25).toDate(), + y: 35.24 + }, + { + x: moment().subtract(8, 'months').day(28).toDate(), + y: 39.18 + }, + { + x: moment().subtract(7, 'months').day(1).toDate(), + y: 41.45 + }, + { + x: moment().subtract(7, 'months').day(4).toDate(), + y: 43.78 + }, + { + x: moment().subtract(7, 'months').day(7).toDate(), + y: 39.41 + }, + { + x: moment().subtract(7, 'months').day(10).toDate(), + y: 39.32 + }, + { + x: moment().subtract(7, 'months').day(13).toDate(), + y: 43.80 + }, + { + x: moment().subtract(7, 'months').day(16).toDate(), + y: 42.43 + }, + { + x: moment().subtract(7, 'months').day(19).toDate(), + y: 43.67 + }, + { + x: moment().subtract(7, 'months').day(22).toDate(), + y: 38.79 + }, + { + x: moment().subtract(7, 'months').day(25).toDate(), + y: 43.57 + }, + { + x: moment().subtract(7, 'months').day(28).toDate(), + y: 41.81 + }, + { + x: moment().subtract(6, 'months').day(1).toDate(), + y: 46.19 + }, + { + x: moment().subtract(6, 'months').day(4).toDate(), + y: 47.69 + }, + { + x: moment().subtract(6, 'months').day(7).toDate(), + y: 49.01 + }, + { + x: moment().subtract(6, 'months').day(10).toDate(), + y: 46.40 + }, + { + x: moment().subtract(6, 'months').day(13).toDate(), + y: 51.28 + }, + { + x: moment().subtract(6, 'months').day(16).toDate(), + y: 50.15 + }, + { + x: moment().subtract(6, 'months').day(19).toDate(), + y: 53.60 + }, + { + x: moment().subtract(6, 'months').day(22).toDate(), + y: 56.08 + }, + { + x: moment().subtract(6, 'months').day(25).toDate(), + y: 52.72 + }, + { + x: moment().subtract(6, 'months').day(28).toDate(), + y: 56.60 + }, + { + x: moment().subtract(5, 'months').day(1).toDate(), + y: 58.36 + }, + { + x: moment().subtract(5, 'months').day(4).toDate(), + y: 56.59 + }, + { + x: moment().subtract(5, 'months').day(7).toDate(), + y: 55.75 + }, + { + x: moment().subtract(5, 'months').day(10).toDate(), + y: 54.74 + }, + { + x: moment().subtract(5, 'months').day(13).toDate(), + y: 54.27 + }, + { + x: moment().subtract(5, 'months').day(16).toDate(), + y: 58.65 + }, + { + x: moment().subtract(5, 'months').day(19).toDate(), + y: 57.00 + }, + { + x: moment().subtract(5, 'months').day(22).toDate(), + y: 60.52 + }, + { + x: moment().subtract(5, 'months').day(25).toDate(), + y: 57.60 + }, + { + x: moment().subtract(5, 'months').day(28).toDate(), + y: 56.48 + }, + { + x: moment().subtract(4, 'months').day(1).toDate(), + y: 54.35 + }, + { + x: moment().subtract(4, 'months').day(4).toDate(), + y: 52.39 + }, + { + x: moment().subtract(4, 'months').day(7).toDate(), + y: 54.52 + }, + { + x: moment().subtract(4, 'months').day(10).toDate(), + y: 54.16 + }, + { + x: moment().subtract(4, 'months').day(13).toDate(), + y: 51.95 + }, + { + x: moment().subtract(4, 'months').day(16).toDate(), + y: 51.19 + }, + { + x: moment().subtract(4, 'months').day(19).toDate(), + y: 46.35 + }, + { + x: moment().subtract(4, 'months').day(22).toDate(), + y: 48.33 + }, + { + x: moment().subtract(4, 'months').day(25).toDate(), + y: 45.84 + }, + { + x: moment().subtract(4, 'months').day(28).toDate(), + y: 48.22 + }, + { + x: moment().subtract(3, 'months').day(1).toDate(), + y: 45.82 + }, + { + x: moment().subtract(3, 'months').day(4).toDate(), + y: 43.48 + }, + { + x: moment().subtract(3, 'months').day(7).toDate(), + y: 41.32 + }, + { + x: moment().subtract(3, 'months').day(10).toDate(), + y: 40.99 + }, + { + x: moment().subtract(3, 'months').day(13).toDate(), + y: 38.49 + }, + { + x: moment().subtract(3, 'months').day(16).toDate(), + y: 40.10 + }, + { + x: moment().subtract(3, 'months').day(19).toDate(), + y: 44.86 + }, + { + x: moment().subtract(3, 'months').day(22).toDate(), + y: 44.03 + }, + { + x: moment().subtract(3, 'months').day(25).toDate(), + y: 41.41 + }, + { + x: moment().subtract(3, 'months').day(28).toDate(), + y: 37.80 + }, + { + x: moment().subtract(2, 'months').day(1).toDate(), + y: 35.24 + }, + { + x: moment().subtract(2, 'months').day(4).toDate(), + y: 32.12 + }, + { + x: moment().subtract(2, 'months').day(7).toDate(), + y: 35.68 + }, + { + x: moment().subtract(2, 'months').day(10).toDate(), + y: 38.00 + }, + { + x: moment().subtract(2, 'months').day(13).toDate(), + y: 37.96 + }, + { + x: moment().subtract(2, 'months').day(16).toDate(), + y: 38.70 + }, + { + x: moment().subtract(2, 'months').day(19).toDate(), + y: 37.45 + }, + { + x: moment().subtract(2, 'months').day(22).toDate(), + y: 37.51 + }, + { + x: moment().subtract(2, 'months').day(25).toDate(), + y: 33.10 + }, + { + x: moment().subtract(2, 'months').day(28).toDate(), + y: 35.09 + }, + { + x: moment().subtract(1, 'months').day(1).toDate(), + y: 31.87 + }, + { + x: moment().subtract(1, 'months').day(4).toDate(), + y: 29.18 + }, + { + x: moment().subtract(1, 'months').day(7).toDate(), + y: 31.91 + }, + { + x: moment().subtract(1, 'months').day(10).toDate(), + y: 34.37 + }, + { + x: moment().subtract(1, 'months').day(13).toDate(), + y: 32.91 + }, + { + x: moment().subtract(1, 'months').day(16).toDate(), + y: 33.17 + }, + { + x: moment().subtract(1, 'months').day(19).toDate(), + y: 37.16 + }, + { + x: moment().subtract(1, 'months').day(22).toDate(), + y: 32.60 + }, + { + x: moment().subtract(1, 'months').day(25).toDate(), + y: 36.94 + }, + { + x: moment().subtract(1, 'months').day(28).toDate(), + y: 35.98 + } + ] + }, + { + name: 'Actual', + data: [ + { + x: moment().subtract(12, 'months').day(1).toDate(), + y: 20.21 + }, + { + x: moment().subtract(12, 'months').day(4).toDate(), + y: 17.49 + }, + { + x: moment().subtract(12, 'months').day(7).toDate(), + y: 16.54 + }, + { + x: moment().subtract(12, 'months').day(10).toDate(), + y: 19.00 + }, + { + x: moment().subtract(12, 'months').day(13).toDate(), + y: 16.47 + }, + { + x: moment().subtract(12, 'months').day(16).toDate(), + y: 13.15 + }, + { + x: moment().subtract(12, 'months').day(19).toDate(), + y: 18.07 + }, + { + x: moment().subtract(12, 'months').day(22).toDate(), + y: 17.93 + }, + { + x: moment().subtract(12, 'months').day(25).toDate(), + y: 18.92 + }, + { + x: moment().subtract(12, 'months').day(28).toDate(), + y: 18.46 + }, + { + x: moment().subtract(11, 'months').day(1).toDate(), + y: 18.04 + }, + { + x: moment().subtract(11, 'months').day(4).toDate(), + y: 17.78 + }, + { + x: moment().subtract(11, 'months').day(7).toDate(), + y: 20.15 + }, + { + x: moment().subtract(11, 'months').day(10).toDate(), + y: 18.92 + }, + { + x: moment().subtract(11, 'months').day(13).toDate(), + y: 17.08 + }, + { + x: moment().subtract(11, 'months').day(16).toDate(), + y: 17.11 + }, + { + x: moment().subtract(11, 'months').day(19).toDate(), + y: 15.70 + }, + { + x: moment().subtract(11, 'months').day(22).toDate(), + y: 15.07 + }, + { + x: moment().subtract(11, 'months').day(25).toDate(), + y: 14.51 + }, + { + x: moment().subtract(11, 'months').day(28).toDate(), + y: 15.22 + }, + { + x: moment().subtract(10, 'months').day(1).toDate(), + y: 19.77 + }, + { + x: moment().subtract(10, 'months').day(4).toDate(), + y: 23.67 + }, + { + x: moment().subtract(10, 'months').day(7).toDate(), + y: 27.98 + }, + { + x: moment().subtract(10, 'months').day(10).toDate(), + y: 30.80 + }, + { + x: moment().subtract(10, 'months').day(13).toDate(), + y: 28.56 + }, + { + x: moment().subtract(10, 'months').day(16).toDate(), + y: 27.45 + }, + { + x: moment().subtract(10, 'months').day(19).toDate(), + y: 27.50 + }, + { + x: moment().subtract(10, 'months').day(22).toDate(), + y: 27.28 + }, + { + x: moment().subtract(10, 'months').day(25).toDate(), + y: 24.36 + }, + { + x: moment().subtract(10, 'months').day(28).toDate(), + y: 22.89 + }, + { + x: moment().subtract(9, 'months').day(1).toDate(), + y: 28.04 + }, + { + x: moment().subtract(9, 'months').day(4).toDate(), + y: 27.77 + }, + { + x: moment().subtract(9, 'months').day(7).toDate(), + y: 30.24 + }, + { + x: moment().subtract(9, 'months').day(10).toDate(), + y: 26.57 + }, + { + x: moment().subtract(9, 'months').day(13).toDate(), + y: 22.18 + }, + { + x: moment().subtract(9, 'months').day(16).toDate(), + y: 19.64 + }, + { + x: moment().subtract(9, 'months').day(19).toDate(), + y: 16.74 + }, + { + x: moment().subtract(9, 'months').day(22).toDate(), + y: 17.21 + }, + { + x: moment().subtract(9, 'months').day(25).toDate(), + y: 20.05 + }, + { + x: moment().subtract(9, 'months').day(28).toDate(), + y: 16.13 + }, + { + x: moment().subtract(8, 'months').day(1).toDate(), + y: 10.71 + }, + { + x: moment().subtract(8, 'months').day(4).toDate(), + y: 7.99 + }, + { + x: moment().subtract(8, 'months').day(7).toDate(), + y: 11.33 + }, + { + x: moment().subtract(8, 'months').day(10).toDate(), + y: 15.36 + }, + { + x: moment().subtract(8, 'months').day(13).toDate(), + y: 20.16 + }, + { + x: moment().subtract(8, 'months').day(16).toDate(), + y: 22.56 + }, + { + x: moment().subtract(8, 'months').day(19).toDate(), + y: 19.34 + }, + { + x: moment().subtract(8, 'months').day(22).toDate(), + y: 18.32 + }, + { + x: moment().subtract(8, 'months').day(25).toDate(), + y: 20.75 + }, + { + x: moment().subtract(8, 'months').day(28).toDate(), + y: 17.09 + }, + { + x: moment().subtract(7, 'months').day(1).toDate(), + y: 18.31 + }, + { + x: moment().subtract(7, 'months').day(4).toDate(), + y: 14.34 + }, + { + x: moment().subtract(7, 'months').day(7).toDate(), + y: 9.93 + }, + { + x: moment().subtract(7, 'months').day(10).toDate(), + y: 10.64 + }, + { + x: moment().subtract(7, 'months').day(13).toDate(), + y: 6.18 + }, + { + x: moment().subtract(7, 'months').day(16).toDate(), + y: 10.32 + }, + { + x: moment().subtract(7, 'months').day(19).toDate(), + y: 12.80 + }, + { + x: moment().subtract(7, 'months').day(22).toDate(), + y: 13.44 + }, + { + x: moment().subtract(7, 'months').day(25).toDate(), + y: 18.35 + }, + { + x: moment().subtract(7, 'months').day(28).toDate(), + y: 22.87 + }, + { + x: moment().subtract(6, 'months').day(1).toDate(), + y: 26.92 + }, + { + x: moment().subtract(6, 'months').day(4).toDate(), + y: 22.50 + }, + { + x: moment().subtract(6, 'months').day(7).toDate(), + y: 18.14 + }, + { + x: moment().subtract(6, 'months').day(10).toDate(), + y: 19.06 + }, + { + x: moment().subtract(6, 'months').day(13).toDate(), + y: 19.73 + }, + { + x: moment().subtract(6, 'months').day(16).toDate(), + y: 18.82 + }, + { + x: moment().subtract(6, 'months').day(19).toDate(), + y: 23.33 + }, + { + x: moment().subtract(6, 'months').day(22).toDate(), + y: 20.48 + }, + { + x: moment().subtract(6, 'months').day(25).toDate(), + y: 25.47 + }, + { + x: moment().subtract(6, 'months').day(28).toDate(), + y: 28.84 + }, + { + x: moment().subtract(5, 'months').day(1).toDate(), + y: 27.71 + }, + { + x: moment().subtract(5, 'months').day(4).toDate(), + y: 25.22 + }, + { + x: moment().subtract(5, 'months').day(7).toDate(), + y: 25.43 + }, + { + x: moment().subtract(5, 'months').day(10).toDate(), + y: 24.13 + }, + { + x: moment().subtract(5, 'months').day(13).toDate(), + y: 20.02 + }, + { + x: moment().subtract(5, 'months').day(16).toDate(), + y: 18.38 + }, + { + x: moment().subtract(5, 'months').day(19).toDate(), + y: 18.30 + }, + { + x: moment().subtract(5, 'months').day(22).toDate(), + y: 18.72 + }, + { + x: moment().subtract(5, 'months').day(25).toDate(), + y: 22.46 + }, + { + x: moment().subtract(5, 'months').day(28).toDate(), + y: 21.71 + }, + { + x: moment().subtract(4, 'months').day(1).toDate(), + y: 29.88 + }, + { + x: moment().subtract(4, 'months').day(4).toDate(), + y: 26.94 + }, + { + x: moment().subtract(4, 'months').day(7).toDate(), + y: 28.06 + }, + { + x: moment().subtract(4, 'months').day(10).toDate(), + y: 30.40 + }, + { + x: moment().subtract(4, 'months').day(13).toDate(), + y: 28.98 + }, + { + x: moment().subtract(4, 'months').day(16).toDate(), + y: 30.13 + }, + { + x: moment().subtract(4, 'months').day(19).toDate(), + y: 27.60 + }, + { + x: moment().subtract(4, 'months').day(22).toDate(), + y: 30.21 + }, + { + x: moment().subtract(4, 'months').day(25).toDate(), + y: 26.88 + }, + { + x: moment().subtract(4, 'months').day(28).toDate(), + y: 25.72 + }, + { + x: moment().subtract(3, 'months').day(1).toDate(), + y: 27.89 + }, + { + x: moment().subtract(3, 'months').day(4).toDate(), + y: 30.69 + }, + { + x: moment().subtract(3, 'months').day(7).toDate(), + y: 31.42 + }, + { + x: moment().subtract(3, 'months').day(10).toDate(), + y: 36.14 + }, + { + x: moment().subtract(3, 'months').day(13).toDate(), + y: 32.02 + }, + { + x: moment().subtract(3, 'months').day(16).toDate(), + y: 27.30 + }, + { + x: moment().subtract(3, 'months').day(19).toDate(), + y: 29.51 + }, + { + x: moment().subtract(3, 'months').day(22).toDate(), + y: 32.67 + }, + { + x: moment().subtract(3, 'months').day(25).toDate(), + y: 28.82 + }, + { + x: moment().subtract(3, 'months').day(28).toDate(), + y: 28.85 + }, + { + x: moment().subtract(2, 'months').day(1).toDate(), + y: 29.15 + }, + { + x: moment().subtract(2, 'months').day(4).toDate(), + y: 27.90 + }, + { + x: moment().subtract(2, 'months').day(7).toDate(), + y: 30.71 + }, + { + x: moment().subtract(2, 'months').day(10).toDate(), + y: 28.02 + }, + { + x: moment().subtract(2, 'months').day(13).toDate(), + y: 23.82 + }, + { + x: moment().subtract(2, 'months').day(16).toDate(), + y: 18.83 + }, + { + x: moment().subtract(2, 'months').day(19).toDate(), + y: 14.48 + }, + { + x: moment().subtract(2, 'months').day(22).toDate(), + y: 11.76 + }, + { + x: moment().subtract(2, 'months').day(25).toDate(), + y: 12.75 + }, + { + x: moment().subtract(2, 'months').day(28).toDate(), + y: 11.36 + }, + { + x: moment().subtract(1, 'months').day(1).toDate(), + y: 11.60 + }, + { + x: moment().subtract(1, 'months').day(4).toDate(), + y: 15.24 + }, + { + x: moment().subtract(1, 'months').day(7).toDate(), + y: 13.05 + }, + { + x: moment().subtract(1, 'months').day(10).toDate(), + y: 17.25 + }, + { + x: moment().subtract(1, 'months').day(13).toDate(), + y: 18.50 + }, + { + x: moment().subtract(1, 'months').day(16).toDate(), + y: 23.04 + }, + { + x: moment().subtract(1, 'months').day(19).toDate(), + y: 21.87 + }, + { + x: moment().subtract(1, 'months').day(22).toDate(), + y: 25.97 + }, + { + x: moment().subtract(1, 'months').day(25).toDate(), + y: 22.46 + }, + { + x: moment().subtract(1, 'months').day(28).toDate(), + y: 17.67 + } + ] + } + ] + }, + budget : { + expenses : 11763.34, + expensesLimit: 20000, + savings : 10974.12, + savingsGoal : 250000, + bills : 1789.22, + billsLimit : 1000 + }, + previousStatement : { + status : 'paid', + date : moment().startOf('day').subtract(15, 'days').format('LL'), + limit : 34500, + spent : 27221.21, + minimum: 7331.94 + }, + currentStatement : { + status : 'pending', + date : moment().startOf('day').subtract(15, 'days').add(1, 'month').format('LL'), + limit : 34500, + spent : 39819.41, + minimum: 9112.51 + }, + recentTransactions: [ + { + id : '1b6fd296-bc6a-4d45-bf4f-e45519a58cf5', + transactionId: '528651571NT', + name : 'Morgan Page', + amount : +1358.75, + status : 'completed', + date : '2019-10-07T22:22:37.274Z' + }, + { + id : '2dec6074-98bd-4623-9526-6480e4776569', + transactionId: '421436904YT', + name : 'Nita Hebert', + amount : -1042.82, + status : 'completed', + date : '2019-12-18T14:51:24.461Z' + }, + { + id : 'ae7c065f-4197-4021-a799-7a221822ad1d', + transactionId: '685377421YT', + name : 'Marsha Chambers', + amount : +1828.16, + status : 'pending', + date : '2019-12-25T17:52:14.304Z' + }, + { + id : '0c43dd40-74f6-49d5-848a-57a4a45772ab', + transactionId: '884960091RT', + name : 'Charmaine Jackson', + amount : +1647.55, + status : 'completed', + date : '2019-11-29T06:32:16.111Z' + }, + { + id : 'e5c9f0ed-a64c-4bfe-a113-29f80b4e162c', + transactionId: '361402213NT', + name : 'Maura Carey', + amount : -927.43, + status : 'completed', + date : '2019-11-24T12:13:23.064Z' + } + ] +}; diff --git a/src/app/mock-api/dashboards/project/api.ts b/src/app/mock-api/dashboards/project/api.ts new file mode 100644 index 0000000..b5e9b39 --- /dev/null +++ b/src/app/mock-api/dashboards/project/api.ts @@ -0,0 +1,38 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { project as projectData } from 'app/mock-api/dashboards/project/data'; + +@Injectable({ + providedIn: 'root' +}) +export class ProjectMockApi +{ + private _project: any = projectData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) + { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void + { + // ----------------------------------------------------------------------------------------------------- + // @ Sales - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/dashboards/project') + .reply(() => [200, cloneDeep(this._project)]); + } +} diff --git a/src/app/mock-api/dashboards/project/data.ts b/src/app/mock-api/dashboards/project/data.ts new file mode 100644 index 0000000..41583b4 --- /dev/null +++ b/src/app/mock-api/dashboards/project/data.ts @@ -0,0 +1,374 @@ +/* eslint-disable */ +import * as moment from 'moment'; + +export const project = { + githubIssues: { + overview: { + 'this-week': { + 'new-issues': 214, + 'closed-issues': 75, + fixed: 3, + 'wont-fix': 4, + 're-opened': 8, + 'needs-triage': 6, + }, + 'last-week': { + 'new-issues': 197, + 'closed-issues': 72, + fixed: 6, + 'wont-fix': 11, + 're-opened': 6, + 'needs-triage': 5, + }, + }, + labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + series: { + 'this-week': [ + { + name: 'New issues', + type: 'line', + data: [42, 28, 43, 34, 20, 25, 22], + }, + { + name: 'Closed issues', + type: 'column', + data: [11, 10, 8, 11, 8, 10, 17], + }, + ], + 'last-week': [ + { + name: 'New issues', + type: 'line', + data: [37, 32, 39, 27, 18, 24, 20], + }, + { + name: 'Closed issues', + type: 'column', + data: [9, 8, 10, 12, 7, 11, 15], + }, + ], + }, + }, + taskDistribution: { + overview: { + 'this-week': { + new: 594, + completed: 287, + }, + 'last-week': { + new: 526, + completed: 260, + }, + }, + labels: ['API', 'Backend', 'Frontend', 'Issues'], + series: { + 'this-week': [15, 20, 38, 27], + 'last-week': [19, 16, 42, 23], + }, + }, + schedule: { + today: [ + { + title: 'Group Meeting', + time: 'in 32 minutes', + location: 'Conference room 1B', + }, + { + title: 'Coffee Break', + time: '10:30 AM', + }, + { + title: 'Public Beta Release', + time: '11:00 AM', + }, + { + title: 'Lunch', + time: '12:10 PM', + }, + { + title: 'Dinner with David', + time: '05:30 PM', + location: 'Magnolia', + }, + { + title: "Jane's Birthday Party", + time: '07:30 PM', + location: 'Home', + }, + { + title: "Overseer's Retirement Party", + time: '09:30 PM', + location: "Overseer's room", + }, + ], + tomorrow: [ + { + title: 'Marketing Meeting', + time: '09:00 AM', + location: 'Conference room 1A', + }, + { + title: 'Public Announcement', + time: '11:00 AM', + }, + { + title: 'Lunch', + time: '12:10 PM', + }, + { + title: 'Meeting with Beta Testers', + time: '03:00 PM', + location: 'Conference room 2C', + }, + { + title: 'Live Stream', + time: '05:30 PM', + }, + { + title: 'Release Party', + time: '07:30 PM', + location: "CEO's house", + }, + { + title: "CEO's Private Party", + time: '09:30 PM', + location: "CEO's Penthouse", + }, + ], + }, + budgetDistribution: { + categories: ['Concept', 'Design', 'Development', 'Extras', 'Marketing'], + series: [ + { + name: 'Budget', + data: [12, 20, 28, 15, 25], + }, + ], + }, + weeklyExpenses: { + amount: 17663, + labels: [ + moment().subtract(47, 'days').format('DD MMM') + + ' - ' + + moment().subtract(40, 'days').format('DD MMM'), + moment().subtract(39, 'days').format('DD MMM') + + ' - ' + + moment().subtract(32, 'days').format('DD MMM'), + moment().subtract(31, 'days').format('DD MMM') + + ' - ' + + moment().subtract(24, 'days').format('DD MMM'), + moment().subtract(23, 'days').format('DD MMM') + + ' - ' + + moment().subtract(16, 'days').format('DD MMM'), + moment().subtract(15, 'days').format('DD MMM') + + ' - ' + + moment().subtract(8, 'days').format('DD MMM'), + moment().subtract(7, 'days').format('DD MMM') + + ' - ' + + moment().format('DD MMM'), + ], + series: [ + { + name: 'Expenses', + data: [4412, 4345, 4541, 4677, 4322, 4123], + }, + ], + }, + monthlyExpenses: { + amount: 54663, + labels: [ + moment().subtract(31, 'days').format('DD MMM') + + ' - ' + + moment().subtract(24, 'days').format('DD MMM'), + moment().subtract(23, 'days').format('DD MMM') + + ' - ' + + moment().subtract(16, 'days').format('DD MMM'), + moment().subtract(15, 'days').format('DD MMM') + + ' - ' + + moment().subtract(8, 'days').format('DD MMM'), + moment().subtract(7, 'days').format('DD MMM') + + ' - ' + + moment().format('DD MMM'), + ], + series: [ + { + name: 'Expenses', + data: [15521, 15519, 15522, 15521], + }, + ], + }, + yearlyExpenses: { + amount: 648813, + labels: [ + moment().subtract(79, 'days').format('DD MMM') + + ' - ' + + moment().subtract(72, 'days').format('DD MMM'), + moment().subtract(71, 'days').format('DD MMM') + + ' - ' + + moment().subtract(64, 'days').format('DD MMM'), + moment().subtract(63, 'days').format('DD MMM') + + ' - ' + + moment().subtract(56, 'days').format('DD MMM'), + moment().subtract(55, 'days').format('DD MMM') + + ' - ' + + moment().subtract(48, 'days').format('DD MMM'), + moment().subtract(47, 'days').format('DD MMM') + + ' - ' + + moment().subtract(40, 'days').format('DD MMM'), + moment().subtract(39, 'days').format('DD MMM') + + ' - ' + + moment().subtract(32, 'days').format('DD MMM'), + moment().subtract(31, 'days').format('DD MMM') + + ' - ' + + moment().subtract(24, 'days').format('DD MMM'), + moment().subtract(23, 'days').format('DD MMM') + + ' - ' + + moment().subtract(16, 'days').format('DD MMM'), + moment().subtract(15, 'days').format('DD MMM') + + ' - ' + + moment().subtract(8, 'days').format('DD MMM'), + moment().subtract(7, 'days').format('DD MMM') + + ' - ' + + moment().format('DD MMM'), + ], + series: [ + { + name: 'Expenses', + data: [ + 45891, 45801, 45834, 45843, 45800, 45900, 45814, 45856, 45910, 45849, + ], + }, + ], + }, + budgetDetails: { + columns: [ + 'type', + 'total', + 'expensesAmount', + 'expensesPercentage', + 'remainingAmount', + 'remainingPercentage', + ], + rows: [ + { + id: 1, + type: 'Concept', + total: 14880, + expensesAmount: 14000, + expensesPercentage: 94.08, + remainingAmount: 880, + remainingPercentage: 5.92, + }, + { + id: 2, + type: 'Design', + total: 21080, + expensesAmount: 17240.34, + expensesPercentage: 81.78, + remainingAmount: 3839.66, + remainingPercentage: 18.22, + }, + { + id: 3, + type: 'Development', + total: 34720, + expensesAmount: 3518, + expensesPercentage: 10.13, + remainingAmount: 31202, + remainingPercentage: 89.87, + }, + { + id: 4, + type: 'Extras', + total: 18600, + expensesAmount: 0, + expensesPercentage: 0, + remainingAmount: 18600, + remainingPercentage: 100, + }, + { + id: 5, + type: 'Marketing', + total: 34720, + expensesAmount: 19859.84, + expensesPercentage: 57.2, + remainingAmount: 14860.16, + remainingPercentage: 42.8, + }, + ], + }, + teamMembers: [ + { + id: '2bfa2be5-7688-48d5-b5ac-dc0d9ac97f14', + avatar: 'assets/images/avatars/female-10.jpg', + name: 'Nadia Mcknight', + email: 'nadiamcknight@mail.com', + phone: '+1-943-511-2203', + title: 'Project Director', + }, + { + id: '77a4383b-b5a5-4943-bc46-04c3431d1566', + avatar: 'assets/images/avatars/male-19.jpg', + name: 'Best Blackburn', + email: 'blackburn.best@beadzza.me', + phone: '+1-814-498-3701', + title: 'Senior Developer', + }, + { + id: '8bb0f597-673a-47ca-8c77-2f83219cb9af', + avatar: 'assets/images/avatars/male-14.jpg', + name: 'Duncan Carver', + email: 'duncancarver@mail.info', + phone: '+1-968-547-2111', + title: 'Senior Developer', + }, + { + id: 'c318e31f-1d74-49c5-8dae-2bc5805e2fdb', + avatar: 'assets/images/avatars/male-01.jpg', + name: 'Martin Richards', + email: 'martinrichards@mail.biz', + phone: '+1-902-500-2668', + title: 'Junior Developer', + }, + { + id: '0a8bc517-631a-4a93-aacc-000fa2e8294c', + avatar: 'assets/images/avatars/female-20.jpg', + name: 'Candice Munoz', + email: 'candicemunoz@mail.co.uk', + phone: '+1-838-562-2769', + title: 'Lead Designer', + }, + { + id: 'a4c9945a-757b-40b0-8942-d20e0543cabd', + avatar: 'assets/images/avatars/female-01.jpg', + name: 'Vickie Mosley', + email: 'vickiemosley@mail.net', + phone: '+1-939-555-3054', + title: 'Designer', + }, + { + id: 'b8258ccf-48b5-46a2-9c95-e0bd7580c645', + avatar: 'assets/images/avatars/female-02.jpg', + name: 'Tina Harris', + email: 'tinaharris@mail.ca', + phone: '+1-933-464-2431', + title: 'Designer', + }, + { + id: 'f004ea79-98fc-436c-9ba5-6cfe32fe583d', + avatar: 'assets/images/avatars/male-02.jpg', + name: 'Holt Manning', + email: 'holtmanning@mail.org', + phone: '+1-822-531-2600', + title: 'Marketing Manager', + }, + { + id: '8b69fe2d-d7cc-4a3d-983d-559173e37d37', + avatar: 'assets/images/avatars/female-03.jpg', + name: 'Misty Ramsey', + email: 'mistyramsey@mail.us', + phone: '+1-990-457-2106', + title: 'Consultant', + }, + ], +}; diff --git a/src/app/mock-api/index.ts b/src/app/mock-api/index.ts new file mode 100644 index 0000000..410f014 --- /dev/null +++ b/src/app/mock-api/index.ts @@ -0,0 +1,51 @@ +import { AcademyMockApi } from 'app/mock-api/apps/academy/api'; +import { ActivitiesMockApi } from 'app/mock-api/pages/activities/api'; +import { AnalyticsMockApi } from 'app/mock-api/dashboards/analytics/api'; +import { AuthMockApi } from 'app/mock-api/common/auth/api'; +import { ChatMockApi } from 'app/mock-api/apps/chat/api'; +import { ContactsMockApi } from 'app/mock-api/apps/contacts/api'; +import { CryptoMockApi } from 'app/mock-api/dashboards/crypto/api'; +import { ECommerceInventoryMockApi } from 'app/mock-api/apps/ecommerce/inventory/api'; +import { FileManagerMockApi } from 'app/mock-api/apps/file-manager/api'; +import { FinanceMockApi } from 'app/mock-api/dashboards/finance/api'; +import { HelpCenterMockApi } from 'app/mock-api/apps/help-center/api'; +import { IconsMockApi } from 'app/mock-api/ui/icons/api'; +import { MailboxMockApi } from 'app/mock-api/apps/mailbox/api'; +import { MemberUserMockApi } from 'app/mock-api/apps/member/user/api'; +import { MessagesMockApi } from 'app/mock-api/common/messages/api'; +import { NavigationMockApi } from 'app/mock-api/common/navigation/api'; +import { NotesMockApi } from 'app/mock-api/apps/notes/api'; +import { NotificationsMockApi } from 'app/mock-api/common/notifications/api'; +import { ProjectMockApi } from 'app/mock-api/dashboards/project/api'; +import { SearchMockApi } from 'app/mock-api/common/search/api'; +import { ScrumboardMockApi } from 'app/mock-api/apps/scrumboard/api'; +import { ShortcutsMockApi } from 'app/mock-api/common/shortcuts/api'; +import { TasksMockApi } from 'app/mock-api/apps/tasks/api'; +import { UserMockApi } from 'app/mock-api/common/user/api'; + +export const mockApiServices = [ + AcademyMockApi, + ActivitiesMockApi, + AnalyticsMockApi, + AuthMockApi, + ChatMockApi, + ContactsMockApi, + CryptoMockApi, + ECommerceInventoryMockApi, + FileManagerMockApi, + FinanceMockApi, + HelpCenterMockApi, + IconsMockApi, + MailboxMockApi, + MemberUserMockApi, + MessagesMockApi, + NavigationMockApi, + NotesMockApi, + NotificationsMockApi, + ProjectMockApi, + SearchMockApi, + ScrumboardMockApi, + ShortcutsMockApi, + TasksMockApi, + UserMockApi, +]; diff --git a/src/app/mock-api/pages/activities/api.ts b/src/app/mock-api/pages/activities/api.ts new file mode 100644 index 0000000..af304fe --- /dev/null +++ b/src/app/mock-api/pages/activities/api.ts @@ -0,0 +1,35 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { activities as activitiesData } from 'app/mock-api/pages/activities/data'; + +@Injectable({ + providedIn: 'root', +}) +export class ActivitiesMockApi { + private _activities: any = activitiesData; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Activities - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/pages/activities') + .reply(() => [200, cloneDeep(this._activities)]); + } +} diff --git a/src/app/mock-api/pages/activities/data.ts b/src/app/mock-api/pages/activities/data.ts new file mode 100644 index 0000000..2d4c09c --- /dev/null +++ b/src/app/mock-api/pages/activities/data.ts @@ -0,0 +1,90 @@ +/* eslint-disable */ +import * as moment from 'moment'; + +export const activities = [ + { + id: '493190c9-5b61-4912-afe5-78c21f1044d7', + icon: 'heroicons_solid:star', + description: 'Your submission has been accepted', + date: moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago + extraContent: `
Congratulations for your acceptance!

+
Hi Brian,
Your submission has been accepted and you are ready to move into the next phase. Once you are ready, reach out to me and we will ...
`, + }, + { + id: '6e3e97e5-effc-4fb7-b730-52a151f0b641', + image: 'assets/images/avatars/male-04.jpg', + description: + 'Leo Gill added you to Top Secret Project group and assigned you as a Project Manager', + date: moment().subtract(50, 'minutes').toISOString(), // 50 minutes ago + linkedContent: 'Top Secret Project', + link: '/dashboards/project', + useRouter: true, + }, + { + id: 'b91ccb58-b06c-413b-b389-87010e03a120', + icon: 'heroicons_solid:mail', + description: 'You have 15 unread mails across 3 mailboxes', + date: moment().subtract(3, 'hours').toISOString(), // 3 hours ago + linkedContent: 'Mailbox', + link: '/apps/mailbox', + useRouter: true, + }, + { + id: '541416c9-84a7-408a-8d74-27a43c38d797', + icon: 'heroicons_solid:refresh', + description: 'Your Docker container is ready to publish', + date: moment().subtract(5, 'hours').toISOString(), // 5 hours ago + linkedContent: 'Download the container', + link: '.', + useRouter: true, + }, + { + id: 'ef7b95a7-8e8b-4616-9619-130d9533add9', + image: 'assets/images/avatars/male-06.jpg', + description: 'Roger Murray accepted your friend request', + date: moment().subtract(7, 'hours').toISOString(), // 7 hours ago + extraContent: `You have 8 mutual friends.`, + }, + { + id: 'eb8aa470-635e-461d-88e1-23d9ea2a5665', + image: 'assets/images/avatars/female-04.jpg', + description: 'Sophie Stone sent you a direct message', + date: moment().subtract(9, 'hours').toISOString(), // 9 hours ago + }, + { + id: 'b85c2338-cc98-4140-bbf8-c226ce4e395e', + icon: 'heroicons_solid:mail', + description: 'You have 3 new mails', + date: moment().subtract(1, 'day').toISOString(), // 1 day ago + extraContent: `
    +
  1. Please review and sign the attached agreement
  2. +
  3. Delivery address confirmation
  4. +
  5. Previous clients and their invoices
  6. +
`, + linkedContent: 'Mailbox', + link: '/apps/mailbox', + useRouter: true, + }, + { + id: 'fd0f01b4-f3de-4333-add5-cd86850279f8', + image: 'assets/images/avatars/female-02.jpg', + description: 'Tina Harris started a chat with you', + date: moment().subtract(1, 'day').toISOString(), // 1 day ago, + linkedContent: 'Go to Chat (Tina Harris)', + link: '/apps/chat/5636c0ba-fa47-42ca-9160-27340583041e', + useRouter: true, + }, + { + id: '8f8e1bf9-4661-4939-9e43-390957b60f42', + icon: 'heroicons_solid:star', + description: + 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days', + date: moment().subtract(3, 'days').toISOString(), // 3 days ago + }, + { + id: '30af917b-7a6a-45d1-822f-9e7ad7f8bf69', + icon: 'heroicons_solid:refresh', + description: 'Your Vagrant container is ready to download', + date: moment().subtract(4, 'day').toISOString(), // 4 days ago + }, +]; diff --git a/src/app/mock-api/ui/icons/api.ts b/src/app/mock-api/ui/icons/api.ts new file mode 100644 index 0000000..ba1d6c9 --- /dev/null +++ b/src/app/mock-api/ui/icons/api.ts @@ -0,0 +1,133 @@ +import { Injectable } from '@angular/core'; +import { cloneDeep } from 'lodash-es'; +import { FuseMockApiService } from '@fuse/lib/mock-api'; +import { + feather, + heroicons, + iconsmind, + material, +} from 'app/mock-api/ui/icons/data'; + +@Injectable({ + providedIn: 'root', +}) +export class IconsMockApi { + private readonly _feather: any = feather; + private readonly _heroicons: any = heroicons; + private readonly _iconsmind: any = iconsmind; + private readonly _material: any = material; + + /** + * Constructor + */ + constructor(private _fuseMockApiService: FuseMockApiService) { + // Register Mock API handlers + this.registerHandlers(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Register Mock API handlers + */ + registerHandlers(): void { + // ----------------------------------------------------------------------------------------------------- + // @ Feather icons - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/ui/icons/feather').reply(() => [ + 200, + { + namespace: 'feather', + name: 'Feather', + grid: 'icon-size-6', + list: cloneDeep(this._feather), + }, + ]); + + // ----------------------------------------------------------------------------------------------------- + // @ Heroicons outline icons - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/ui/icons/heroicons-outline') + .reply(() => [ + 200, + { + namespace: 'heroicons_outline', + name: 'Heroicons Outline', + grid: 'icon-size-6', + list: cloneDeep(this._heroicons), + }, + ]); + + // ----------------------------------------------------------------------------------------------------- + // @ Heroicons solid icons - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/ui/icons/heroicons-solid').reply(() => [ + 200, + { + namespace: 'heroicons_solid', + name: 'Heroicons Solid', + grid: 'icon-size-5', + list: cloneDeep(this._heroicons), + }, + ]); + + // ----------------------------------------------------------------------------------------------------- + // @ Iconsmind icons - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/ui/icons/iconsmind').reply(() => [ + 200, + { + namespace: 'iconsmind', + name: 'Iconsmind', + grid: 'icon-size-10', + list: cloneDeep(this._iconsmind), + }, + ]); + + // ----------------------------------------------------------------------------------------------------- + // @ Material solid icons - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService.onGet('api/ui/icons/material-solid').reply(() => [ + 200, + { + namespace: 'mat_solid', + name: 'Material Solid', + grid: 'icon-size-6', + list: cloneDeep(this._material), + }, + ]); + + // ----------------------------------------------------------------------------------------------------- + // @ Material outline icons - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/ui/icons/material-outline') + .reply(() => [ + 200, + { + namespace: 'mat_outline', + name: 'Material Outline', + grid: 'icon-size-6', + list: cloneDeep(this._material), + }, + ]); + + // ----------------------------------------------------------------------------------------------------- + // @ Material twotone icons - GET + // ----------------------------------------------------------------------------------------------------- + this._fuseMockApiService + .onGet('api/ui/icons/material-twotone') + .reply(() => [ + 200, + { + namespace: '', + name: 'Material Twotone', + grid: 'icon-size-6', + list: cloneDeep(this._material), + }, + ]); + } +} diff --git a/src/app/mock-api/ui/icons/data.ts b/src/app/mock-api/ui/icons/data.ts new file mode 100644 index 0000000..bd89ec1 --- /dev/null +++ b/src/app/mock-api/ui/icons/data.ts @@ -0,0 +1,4402 @@ +/* eslint-disable */ + +// Updated at: 20210425 - 1792 icons +export const material = [ + '10k', + '10mp', + '11mp', + '12mp', + '13mp', + '14mp', + '15mp', + '16mp', + '17mp', + '18mp', + '19mp', + '1k', + '1k_plus', + '1x_mobiledata', + '20mp', + '21mp', + '22mp', + '23mp', + '24mp', + '2k', + '2k_plus', + '2mp', + '30fps', + '30fps_select', + '360', + '3d_rotation', + '3g_mobiledata', + '3k', + '3k_plus', + '3mp', + '3p', + '4g_mobiledata', + '4g_plus_mobiledata', + '4k', + '4k_plus', + '4mp', + '5g', + '5k', + '5k_plus', + '5mp', + '60fps', + '60fps_select', + '6_ft_apart', + '6k', + '6k_plus', + '6mp', + '7k', + '7k_plus', + '7mp', + '8k', + '8k_plus', + '8mp', + '9k', + '9k_plus', + '9mp', + 'ac_unit', + 'access_alarm', + 'access_alarms', + 'access_time', + 'access_time_filled', + 'accessibility', + 'accessibility_new', + 'accessible', + 'accessible_forward', + 'account_balance', + 'account_balance_wallet', + 'account_box', + 'account_circle', + 'account_tree', + 'ad_units', + 'adb', + 'add', + 'add_a_photo', + 'add_alarm', + 'add_alert', + 'add_box', + 'add_business', + 'add_chart', + 'add_circle', + 'add_circle_outline', + 'add_comment', + 'add_ic_call', + 'add_link', + 'add_location', + 'add_location_alt', + 'add_moderator', + 'add_photo_alternate', + 'add_reaction', + 'add_road', + 'add_shopping_cart', + 'add_task', + 'add_to_drive', + 'add_to_home_screen', + 'add_to_photos', + 'add_to_queue', + 'addchart', + 'adjust', + 'admin_panel_settings', + 'ads_click', + 'agriculture', + 'air', + 'airline_seat_flat', + 'airline_seat_flat_angled', + 'airline_seat_individual_suite', + 'airline_seat_legroom_extra', + 'airline_seat_legroom_normal', + 'airline_seat_legroom_reduced', + 'airline_seat_recline_extra', + 'airline_seat_recline_normal', + 'airplane_ticket', + 'airplanemode_active', + 'airplanemode_inactive', + 'airplay', + 'airport_shuttle', + 'alarm', + 'alarm_add', + 'alarm_off', + 'alarm_on', + 'album', + 'align_horizontal_center', + 'align_horizontal_left', + 'align_horizontal_right', + 'align_vertical_bottom', + 'align_vertical_center', + 'align_vertical_top', + 'all_inbox', + 'all_inclusive', + 'all_out', + 'alt_route', + 'alternate_email', + 'analytics', + 'anchor', + 'android', + 'animation', + 'announcement', + 'aod', + 'apartment', + 'api', + 'app_blocking', + 'app_registration', + 'app_settings_alt', + 'approval', + 'apps', + 'architecture', + 'archive', + 'area_chart', + 'arrow_back', + 'arrow_back_ios', + 'arrow_back_ios_new', + 'arrow_circle_down', + 'arrow_circle_up', + 'arrow_downward', + 'arrow_drop_down', + 'arrow_drop_down_circle', + 'arrow_drop_up', + 'arrow_forward', + 'arrow_forward_ios', + 'arrow_left', + 'arrow_right', + 'arrow_right_alt', + 'arrow_upward', + 'art_track', + 'article', + 'aspect_ratio', + 'assessment', + 'assignment', + 'assignment_ind', + 'assignment_late', + 'assignment_return', + 'assignment_returned', + 'assignment_turned_in', + 'assistant', + 'assistant_direction', + 'assistant_photo', + 'atm', + 'attach_email', + 'attach_file', + 'attach_money', + 'attachment', + 'attractions', + 'attribution', + 'audiotrack', + 'auto_awesome', + 'auto_awesome_mosaic', + 'auto_awesome_motion', + 'auto_delete', + 'auto_fix_high', + 'auto_fix_normal', + 'auto_fix_off', + 'auto_graph', + 'auto_stories', + 'autofps_select', + 'autorenew', + 'av_timer', + 'baby_changing_station', + 'back_hand', + 'backpack', + 'backspace', + 'backup', + 'backup_table', + 'badge', + 'bakery_dining', + 'balcony', + 'ballot', + 'bar_chart', + 'batch_prediction', + 'bathroom', + 'bathtub', + 'battery_alert', + 'battery_charging_full', + 'battery_full', + 'battery_saver', + 'battery_std', + 'battery_unknown', + 'beach_access', + 'bed', + 'bedroom_baby', + 'bedroom_child', + 'bedroom_parent', + 'bedtime', + 'beenhere', + 'bento', + 'bike_scooter', + 'biotech', + 'blender', + 'block', + 'bloodtype', + 'bluetooth', + 'bluetooth_audio', + 'bluetooth_connected', + 'bluetooth_disabled', + 'bluetooth_drive', + 'bluetooth_searching', + 'blur_circular', + 'blur_linear', + 'blur_off', + 'blur_on', + 'bolt', + 'book', + 'book_online', + 'bookmark', + 'bookmark_add', + 'bookmark_added', + 'bookmark_border', + 'bookmark_remove', + 'bookmarks', + 'border_all', + 'border_bottom', + 'border_clear', + 'border_color', + 'border_horizontal', + 'border_inner', + 'border_left', + 'border_outer', + 'border_right', + 'border_style', + 'border_top', + 'border_vertical', + 'branding_watermark', + 'breakfast_dining', + 'brightness_1', + 'brightness_2', + 'brightness_3', + 'brightness_4', + 'brightness_5', + 'brightness_6', + 'brightness_7', + 'brightness_auto', + 'brightness_high', + 'brightness_low', + 'brightness_medium', + 'broken_image', + 'browser_not_supported', + 'brunch_dining', + 'brush', + 'bubble_chart', + 'bug_report', + 'build', + 'build_circle', + 'bungalow', + 'burst_mode', + 'bus_alert', + 'business', + 'business_center', + 'cabin', + 'cable', + 'cached', + 'cake', + 'calculate', + 'calendar_today', + 'calendar_view_day', + 'calendar_view_month', + 'calendar_view_week', + 'call', + 'call_end', + 'call_made', + 'call_merge', + 'call_missed', + 'call_missed_outgoing', + 'call_received', + 'call_split', + 'call_to_action', + 'camera', + 'camera_alt', + 'camera_enhance', + 'camera_front', + 'camera_indoor', + 'camera_outdoor', + 'camera_rear', + 'camera_roll', + 'cameraswitch', + 'campaign', + 'cancel', + 'cancel_presentation', + 'cancel_schedule_send', + 'car_rental', + 'car_repair', + 'card_giftcard', + 'card_membership', + 'card_travel', + 'carpenter', + 'cases', + 'casino', + 'cast', + 'cast_connected', + 'cast_for_education', + 'catching_pokemon', + 'category', + 'celebration', + 'cell_wifi', + 'center_focus_strong', + 'center_focus_weak', + 'chair', + 'chair_alt', + 'chalet', + 'change_circle', + 'change_history', + 'charging_station', + 'chat', + 'chat_bubble', + 'chat_bubble_outline', + 'check', + 'check_box', + 'check_box_outline_blank', + 'check_circle', + 'check_circle_outline', + 'checklist', + 'checklist_rtl', + 'checkroom', + 'chevron_left', + 'chevron_right', + 'child_care', + 'child_friendly', + 'chrome_reader_mode', + 'circle', + 'circle_notifications', + 'class', + 'clean_hands', + 'cleaning_services', + 'clear', + 'clear_all', + 'close', + 'close_fullscreen', + 'closed_caption', + 'closed_caption_disabled', + 'closed_caption_off', + 'cloud', + 'cloud_circle', + 'cloud_done', + 'cloud_download', + 'cloud_off', + 'cloud_queue', + 'cloud_upload', + 'code', + 'code_off', + 'coffee', + 'coffee_maker', + 'collections', + 'collections_bookmark', + 'color_lens', + 'colorize', + 'comment', + 'comment_bank', + 'commute', + 'compare', + 'compare_arrows', + 'compass_calibration', + 'compost', + 'compress', + 'computer', + 'confirmation_number', + 'connect_without_contact', + 'connected_tv', + 'construction', + 'contact_mail', + 'contact_page', + 'contact_phone', + 'contact_support', + 'contactless', + 'contacts', + 'content_copy', + 'content_cut', + 'content_paste', + 'content_paste_off', + 'control_camera', + 'control_point', + 'control_point_duplicate', + 'copy_all', + 'copyright', + 'coronavirus', + 'corporate_fare', + 'cottage', + 'countertops', + 'create', + 'create_new_folder', + 'credit_card', + 'credit_card_off', + 'credit_score', + 'crib', + 'crop', + 'crop_16_9', + 'crop_3_2', + 'crop_5_4', + 'crop_7_5', + 'crop_din', + 'crop_free', + 'crop_landscape', + 'crop_original', + 'crop_portrait', + 'crop_rotate', + 'crop_square', + 'cruelty_free', + 'dangerous', + 'dark_mode', + 'dashboard', + 'dashboard_customize', + 'data_exploration', + 'data_saver_off', + 'data_saver_on', + 'data_usage', + 'date_range', + 'deck', + 'dehaze', + 'delete', + 'delete_forever', + 'delete_outline', + 'delete_sweep', + 'delivery_dining', + 'departure_board', + 'description', + 'design_services', + 'desktop_access_disabled', + 'desktop_mac', + 'desktop_windows', + 'details', + 'developer_board', + 'developer_board_off', + 'developer_mode', + 'device_hub', + 'device_thermostat', + 'device_unknown', + 'devices', + 'devices_other', + 'dialer_sip', + 'dialpad', + 'dining', + 'dinner_dining', + 'directions', + 'directions_bike', + 'directions_boat', + 'directions_boat_filled', + 'directions_bus', + 'directions_bus_filled', + 'directions_car', + 'directions_car_filled', + 'directions_off', + 'directions_railway', + 'directions_railway_filled', + 'directions_run', + 'directions_subway', + 'directions_subway_filled', + 'directions_transit', + 'directions_transit_filled', + 'directions_walk', + 'dirty_lens', + 'disabled_by_default', + 'disabled_visible', + 'disc_full', + 'dns', + 'do_disturb', + 'do_disturb_alt', + 'do_disturb_off', + 'do_disturb_on', + 'do_not_disturb', + 'do_not_disturb_alt', + 'do_not_disturb_off', + 'do_not_disturb_on', + 'do_not_disturb_on_total_silence', + 'do_not_step', + 'do_not_touch', + 'dock', + 'document_scanner', + 'domain', + 'domain_disabled', + 'domain_verification', + 'done', + 'done_all', + 'done_outline', + 'donut_large', + 'donut_small', + 'door_back', + 'door_front', + 'door_sliding', + 'doorbell', + 'double_arrow', + 'downhill_skiing', + 'download', + 'download_done', + 'download_for_offline', + 'downloading', + 'drafts', + 'drag_handle', + 'drag_indicator', + 'draw', + 'drive_eta', + 'drive_file_move', + 'drive_file_move_rtl', + 'drive_file_rename_outline', + 'drive_folder_upload', + 'dry', + 'dry_cleaning', + 'duo', + 'dvr', + 'dynamic_feed', + 'dynamic_form', + 'e_mobiledata', + 'earbuds', + 'earbuds_battery', + 'east', + 'edgesensor_high', + 'edgesensor_low', + 'edit', + 'edit_attributes', + 'edit_calendar', + 'edit_location', + 'edit_location_alt', + 'edit_note', + 'edit_notifications', + 'edit_off', + 'edit_road', + 'eject', + 'elderly', + 'electric_bike', + 'electric_car', + 'electric_moped', + 'electric_rickshaw', + 'electric_scooter', + 'electrical_services', + 'elevator', + 'email', + 'emergency', + 'emoji_emotions', + 'emoji_events', + 'emoji_flags', + 'emoji_food_beverage', + 'emoji_nature', + 'emoji_objects', + 'emoji_people', + 'emoji_symbols', + 'emoji_transportation', + 'engineering', + 'enhanced_encryption', + 'equalizer', + 'error', + 'error_outline', + 'escalator', + 'escalator_warning', + 'euro', + 'euro_symbol', + 'ev_station', + 'event', + 'event_available', + 'event_busy', + 'event_note', + 'event_seat', + 'exit_to_app', + 'expand', + 'expand_less', + 'expand_more', + 'explicit', + 'explore', + 'explore_off', + 'exposure', + 'exposure_neg_1', + 'exposure_neg_2', + 'exposure_plus_1', + 'exposure_plus_2', + 'exposure_zero', + 'extension', + 'extension_off', + 'face', + 'face_retouching_natural', + 'face_retouching_off', + 'facebook', + 'fact_check', + 'family_restroom', + 'fast_forward', + 'fast_rewind', + 'fastfood', + 'favorite', + 'favorite_border', + 'featured_play_list', + 'featured_video', + 'feed', + 'feedback', + 'female', + 'fence', + 'festival', + 'fiber_dvr', + 'fiber_manual_record', + 'fiber_new', + 'fiber_pin', + 'fiber_smart_record', + 'file_copy', + 'file_download', + 'file_download_done', + 'file_download_off', + 'file_present', + 'file_upload', + 'filter', + 'filter_1', + 'filter_2', + 'filter_3', + 'filter_4', + 'filter_5', + 'filter_6', + 'filter_7', + 'filter_8', + 'filter_9', + 'filter_9_plus', + 'filter_alt', + 'filter_b_and_w', + 'filter_center_focus', + 'filter_drama', + 'filter_frames', + 'filter_hdr', + 'filter_list', + 'filter_none', + 'filter_tilt_shift', + 'filter_vintage', + 'find_in_page', + 'find_replace', + 'fingerprint', + 'fire_extinguisher', + 'fireplace', + 'first_page', + 'fit_screen', + 'fitness_center', + 'flag', + 'flaky', + 'flare', + 'flash_auto', + 'flash_off', + 'flash_on', + 'flashlight_off', + 'flashlight_on', + 'flatware', + 'flight', + 'flight_land', + 'flight_takeoff', + 'flip', + 'flip_camera_android', + 'flip_camera_ios', + 'flip_to_back', + 'flip_to_front', + 'flourescent', + 'flutter_dash', + 'fmd_bad', + 'fmd_good', + 'folder', + 'folder_open', + 'folder_shared', + 'folder_special', + 'follow_the_signs', + 'font_download', + 'font_download_off', + 'food_bank', + 'format_align_center', + 'format_align_justify', + 'format_align_left', + 'format_align_right', + 'format_bold', + 'format_clear', + 'format_color_fill', + 'format_color_reset', + 'format_color_text', + 'format_indent_decrease', + 'format_indent_increase', + 'format_italic', + 'format_line_spacing', + 'format_list_bulleted', + 'format_list_numbered', + 'format_list_numbered_rtl', + 'format_paint', + 'format_quote', + 'format_shapes', + 'format_size', + 'format_strikethrough', + 'format_textdirection_l_to_r', + 'format_textdirection_r_to_l', + 'format_underlined', + 'forum', + 'forward', + 'forward_10', + 'forward_30', + 'forward_5', + 'forward_to_inbox', + 'foundation', + 'free_breakfast', + 'free_cancellation', + 'front_hand', + 'fullscreen', + 'fullscreen_exit', + 'functions', + 'g_mobiledata', + 'g_translate', + 'gamepad', + 'games', + 'garage', + 'gavel', + 'generating_tokens', + 'gesture', + 'get_app', + 'gif', + 'gite', + 'golf_course', + 'gpp_bad', + 'gpp_good', + 'gpp_maybe', + 'gps_fixed', + 'gps_not_fixed', + 'gps_off', + 'grade', + 'gradient', + 'grading', + 'grain', + 'graphic_eq', + 'grass', + 'grid_3x3', + 'grid_4x4', + 'grid_goldenratio', + 'grid_off', + 'grid_on', + 'grid_view', + 'group', + 'group_add', + 'group_off', + 'group_work', + 'groups', + 'h_mobiledata', + 'h_plus_mobiledata', + 'hail', + 'handyman', + 'hardware', + 'hd', + 'hdr_auto', + 'hdr_auto_select', + 'hdr_enhanced_select', + 'hdr_off', + 'hdr_off_select', + 'hdr_on', + 'hdr_on_select', + 'hdr_plus', + 'hdr_strong', + 'hdr_weak', + 'headphones', + 'headphones_battery', + 'headset', + 'headset_mic', + 'headset_off', + 'healing', + 'health_and_safety', + 'hearing', + 'hearing_disabled', + 'height', + 'help', + 'help_center', + 'help_outline', + 'hevc', + 'hide_image', + 'hide_source', + 'high_quality', + 'highlight', + 'highlight_alt', + 'highlight_off', + 'hiking', + 'history', + 'history_edu', + 'history_toggle_off', + 'holiday_village', + 'home', + 'home_max', + 'home_mini', + 'home_repair_service', + 'home_work', + 'horizontal_distribute', + 'horizontal_rule', + 'horizontal_split', + 'hot_tub', + 'hotel', + 'hotel_class', + 'hourglass_bottom', + 'hourglass_disabled', + 'hourglass_empty', + 'hourglass_full', + 'hourglass_top', + 'house', + 'house_siding', + 'houseboat', + 'how_to_reg', + 'how_to_vote', + 'http', + 'https', + 'hvac', + 'ice_skating', + 'icecream', + 'image', + 'image_aspect_ratio', + 'image_not_supported', + 'image_search', + 'imagesearch_roller', + 'import_contacts', + 'import_export', + 'important_devices', + 'inbox', + 'incomplete_circle', + 'indeterminate_check_box', + 'info', + 'input', + 'insert_chart', + 'insert_chart_outlined', + 'insert_comment', + 'insert_drive_file', + 'insert_emoticon', + 'insert_invitation', + 'insert_link', + 'insert_photo', + 'insights', + 'integration_instructions', + 'inventory', + 'inventory_2', + 'invert_colors', + 'invert_colors_off', + 'ios_share', + 'iron', + 'iso', + 'kayaking', + 'keyboard', + 'keyboard_alt', + 'keyboard_arrow_down', + 'keyboard_arrow_left', + 'keyboard_arrow_right', + 'keyboard_arrow_up', + 'keyboard_backspace', + 'keyboard_capslock', + 'keyboard_hide', + 'keyboard_return', + 'keyboard_tab', + 'keyboard_voice', + 'king_bed', + 'kitchen', + 'kitesurfing', + 'label', + 'label_important', + 'label_off', + 'landscape', + 'language', + 'laptop', + 'laptop_chromebook', + 'laptop_mac', + 'laptop_windows', + 'last_page', + 'launch', + 'layers', + 'layers_clear', + 'leaderboard', + 'leak_add', + 'leak_remove', + 'legend_toggle', + 'lens', + 'lens_blur', + 'library_add', + 'library_add_check', + 'library_books', + 'library_music', + 'light', + 'light_mode', + 'lightbulb', + 'line_style', + 'line_weight', + 'linear_scale', + 'link', + 'link_off', + 'linked_camera', + 'liquor', + 'list', + 'list_alt', + 'live_help', + 'live_tv', + 'living', + 'local_activity', + 'local_airport', + 'local_atm', + 'local_bar', + 'local_cafe', + 'local_car_wash', + 'local_convenience_store', + 'local_dining', + 'local_drink', + 'local_fire_department', + 'local_florist', + 'local_gas_station', + 'local_grocery_store', + 'local_hospital', + 'local_hotel', + 'local_laundry_service', + 'local_library', + 'local_mall', + 'local_movies', + 'local_offer', + 'local_parking', + 'local_pharmacy', + 'local_phone', + 'local_pizza', + 'local_play', + 'local_police', + 'local_post_office', + 'local_printshop', + 'local_see', + 'local_shipping', + 'local_taxi', + 'location_city', + 'location_disabled', + 'location_off', + 'location_on', + 'location_searching', + 'lock', + 'lock_clock', + 'lock_open', + 'login', + 'logout', + 'looks', + 'looks_3', + 'looks_4', + 'looks_5', + 'looks_6', + 'looks_one', + 'looks_two', + 'loop', + 'loupe', + 'low_priority', + 'loyalty', + 'lte_mobiledata', + 'lte_plus_mobiledata', + 'luggage', + 'lunch_dining', + 'mail', + 'mail_outline', + 'male', + 'manage_accounts', + 'manage_search', + 'map', + 'maps_home_work', + 'maps_ugc', + 'margin', + 'mark_as_unread', + 'mark_chat_read', + 'mark_chat_unread', + 'mark_email_read', + 'mark_email_unread', + 'markunread', + 'markunread_mailbox', + 'masks', + 'maximize', + 'media_bluetooth_off', + 'media_bluetooth_on', + 'mediation', + 'medical_services', + 'medication', + 'meeting_room', + 'memory', + 'menu', + 'menu_book', + 'menu_open', + 'merge_type', + 'message', + 'mic', + 'mic_external_off', + 'mic_external_on', + 'mic_none', + 'mic_off', + 'microwave', + 'military_tech', + 'minimize', + 'miscellaneous_services', + 'missed_video_call', + 'mms', + 'mobile_friendly', + 'mobile_off', + 'mobile_screen_share', + 'mobiledata_off', + 'mode', + 'mode_comment', + 'mode_edit', + 'mode_edit_outline', + 'mode_night', + 'mode_standby', + 'model_training', + 'monetization_on', + 'money', + 'money_off', + 'money_off_csred', + 'monitor', + 'monitor_weight', + 'monochrome_photos', + 'mood', + 'mood_bad', + 'moped', + 'more', + 'more_horiz', + 'more_time', + 'more_vert', + 'motion_photos_auto', + 'motion_photos_off', + 'motion_photos_on', + 'motion_photos_pause', + 'motion_photos_paused', + 'mouse', + 'move_to_inbox', + 'movie', + 'movie_creation', + 'movie_filter', + 'moving', + 'mp', + 'multiline_chart', + 'multiple_stop', + 'museum', + 'music_note', + 'music_off', + 'music_video', + 'my_location', + 'nat', + 'nature', + 'nature_people', + 'navigate_before', + 'navigate_next', + 'navigation', + 'near_me', + 'near_me_disabled', + 'nearby_error', + 'nearby_off', + 'network_cell', + 'network_check', + 'network_locked', + 'network_wifi', + 'new_label', + 'new_releases', + 'next_plan', + 'next_week', + 'nfc', + 'night_shelter', + 'nightlife', + 'nightlight', + 'nightlight_round', + 'nights_stay', + 'no_accounts', + 'no_backpack', + 'no_cell', + 'no_drinks', + 'no_encryption', + 'no_encryption_gmailerrorred', + 'no_flash', + 'no_food', + 'no_luggage', + 'no_meals', + 'no_meeting_room', + 'no_photography', + 'no_sim', + 'no_stroller', + 'no_transfer', + 'nordic_walking', + 'north', + 'north_east', + 'north_west', + 'not_accessible', + 'not_interested', + 'not_listed_location', + 'not_started', + 'note', + 'note_add', + 'note_alt', + 'notes', + 'notification_add', + 'notification_important', + 'notifications', + 'notifications_active', + 'notifications_none', + 'notifications_off', + 'notifications_paused', + 'offline_bolt', + 'offline_pin', + 'offline_share', + 'ondemand_video', + 'online_prediction', + 'opacity', + 'open_in_browser', + 'open_in_full', + 'open_in_new', + 'open_in_new_off', + 'open_with', + 'other_houses', + 'outbound', + 'outbox', + 'outdoor_grill', + 'outlet', + 'outlined_flag', + 'padding', + 'pages', + 'pageview', + 'paid', + 'palette', + 'pan_tool', + 'panorama', + 'panorama_fish_eye', + 'panorama_horizontal', + 'panorama_horizontal_select', + 'panorama_photosphere', + 'panorama_photosphere_select', + 'panorama_vertical', + 'panorama_vertical_select', + 'panorama_wide_angle', + 'panorama_wide_angle_select', + 'paragliding', + 'park', + 'party_mode', + 'password', + 'pattern', + 'pause', + 'pause_circle', + 'pause_circle_filled', + 'pause_circle_outline', + 'pause_presentation', + 'payment', + 'payments', + 'pedal_bike', + 'pending', + 'pending_actions', + 'people', + 'people_alt', + 'people_outline', + 'perm_camera_mic', + 'perm_contact_calendar', + 'perm_data_setting', + 'perm_device_information', + 'perm_identity', + 'perm_media', + 'perm_phone_msg', + 'perm_scan_wifi', + 'person', + 'person_add', + 'person_add_alt', + 'person_add_alt_1', + 'person_add_disabled', + 'person_off', + 'person_outline', + 'person_pin', + 'person_pin_circle', + 'person_remove', + 'person_remove_alt_1', + 'person_search', + 'personal_injury', + 'personal_video', + 'pest_control', + 'pest_control_rodent', + 'pets', + 'phone', + 'phone_android', + 'phone_bluetooth_speaker', + 'phone_callback', + 'phone_disabled', + 'phone_enabled', + 'phone_forwarded', + 'phone_in_talk', + 'phone_iphone', + 'phone_locked', + 'phone_missed', + 'phone_paused', + 'phonelink', + 'phonelink_erase', + 'phonelink_lock', + 'phonelink_off', + 'phonelink_ring', + 'phonelink_setup', + 'photo', + 'photo_album', + 'photo_camera', + 'photo_camera_back', + 'photo_camera_front', + 'photo_filter', + 'photo_library', + 'photo_size_select_actual', + 'photo_size_select_large', + 'photo_size_select_small', + 'piano', + 'piano_off', + 'picture_as_pdf', + 'picture_in_picture', + 'picture_in_picture_alt', + 'pie_chart', + 'pie_chart_outline', + 'pin', + 'pin_drop', + 'pin_end', + 'pin_invoke', + 'pivot_table_chart', + 'place', + 'plagiarism', + 'play_arrow', + 'play_circle', + 'play_circle_filled', + 'play_circle_outline', + 'play_disabled', + 'play_for_work', + 'play_lesson', + 'playlist_add', + 'playlist_add_check', + 'playlist_play', + 'plumbing', + 'plus_one', + 'podcasts', + 'point_of_sale', + 'policy', + 'poll', + 'polymer', + 'pool', + 'portable_wifi_off', + 'portrait', + 'post_add', + 'power', + 'power_input', + 'power_off', + 'power_settings_new', + 'precision_manufacturing', + 'pregnant_woman', + 'present_to_all', + 'preview', + 'price_change', + 'price_check', + 'print', + 'print_disabled', + 'priority_high', + 'privacy_tip', + 'private_connectivity', + 'production_quantity_limits', + 'psychology', + 'public', + 'public_off', + 'publish', + 'published_with_changes', + 'push_pin', + 'qr_code', + 'qr_code_2', + 'qr_code_scanner', + 'query_builder', + 'query_stats', + 'question_answer', + 'queue', + 'queue_music', + 'queue_play_next', + 'quickreply', + 'quiz', + 'r_mobiledata', + 'radar', + 'radio', + 'radio_button_checked', + 'radio_button_unchecked', + 'railway_alert', + 'ramen_dining', + 'rate_review', + 'raw_off', + 'raw_on', + 'read_more', + 'real_estate_agent', + 'receipt', + 'receipt_long', + 'recent_actors', + 'recommend', + 'record_voice_over', + 'recycling', + 'redeem', + 'redo', + 'reduce_capacity', + 'refresh', + 'remember_me', + 'remove', + 'remove_circle', + 'remove_circle_outline', + 'remove_done', + 'remove_from_queue', + 'remove_moderator', + 'remove_red_eye', + 'remove_shopping_cart', + 'reorder', + 'repeat', + 'repeat_on', + 'repeat_one', + 'repeat_one_on', + 'replay', + 'replay_10', + 'replay_30', + 'replay_5', + 'replay_circle_filled', + 'reply', + 'reply_all', + 'report', + 'report_gmailerrorred', + 'report_off', + 'report_problem', + 'request_page', + 'request_quote', + 'reset_tv', + 'restart_alt', + 'restaurant', + 'restaurant_menu', + 'restore', + 'restore_from_trash', + 'restore_page', + 'reviews', + 'rice_bowl', + 'ring_volume', + 'roofing', + 'room', + 'room_preferences', + 'room_service', + 'rotate_90_degrees_ccw', + 'rotate_left', + 'rotate_right', + 'rounded_corner', + 'router', + 'rowing', + 'rss_feed', + 'rsvp', + 'rtt', + 'rule', + 'rule_folder', + 'run_circle', + 'running_with_errors', + 'rv_hookup', + 'safety_divider', + 'sailing', + 'sanitizer', + 'satellite', + 'save', + 'save_alt', + 'saved_search', + 'savings', + 'scanner', + 'scatter_plot', + 'schedule', + 'schedule_send', + 'schema', + 'school', + 'science', + 'score', + 'screen_lock_landscape', + 'screen_lock_portrait', + 'screen_lock_rotation', + 'screen_rotation', + 'screen_search_desktop', + 'screen_share', + 'screenshot', + 'sd', + 'sd_card', + 'sd_card_alert', + 'sd_storage', + 'search', + 'search_off', + 'security', + 'security_update', + 'security_update_good', + 'security_update_warning', + 'segment', + 'select_all', + 'self_improvement', + 'sell', + 'send', + 'send_and_archive', + 'send_to_mobile', + 'sensor_door', + 'sensor_window', + 'sensors', + 'sensors_off', + 'sentiment_dissatisfied', + 'sentiment_neutral', + 'sentiment_satisfied', + 'sentiment_satisfied_alt', + 'sentiment_very_dissatisfied', + 'sentiment_very_satisfied', + 'set_meal', + 'settings', + 'settings_accessibility', + 'settings_applications', + 'settings_backup_restore', + 'settings_bluetooth', + 'settings_brightness', + 'settings_cell', + 'settings_ethernet', + 'settings_input_antenna', + 'settings_input_component', + 'settings_input_composite', + 'settings_input_hdmi', + 'settings_input_svideo', + 'settings_overscan', + 'settings_phone', + 'settings_power', + 'settings_remote', + 'settings_suggest', + 'settings_system_daydream', + 'settings_voice', + 'share', + 'share_location', + 'shield', + 'shop', + 'shop_2', + 'shop_two', + 'shopping_bag', + 'shopping_basket', + 'shopping_cart', + 'short_text', + 'shortcut', + 'show_chart', + 'shower', + 'shuffle', + 'shuffle_on', + 'shutter_speed', + 'sick', + 'signal_cellular_0_bar', + 'signal_cellular_4_bar', + 'signal_cellular_alt', + 'signal_cellular_connected_no_internet_0_bar', + 'signal_cellular_connected_no_internet_4_bar', + 'signal_cellular_no_sim', + 'signal_cellular_nodata', + 'signal_cellular_null', + 'signal_cellular_off', + 'signal_wifi_0_bar', + 'signal_wifi_4_bar', + 'signal_wifi_4_bar_lock', + 'signal_wifi_bad', + 'signal_wifi_connected_no_internet_4', + 'signal_wifi_off', + 'signal_wifi_statusbar_4_bar', + 'signal_wifi_statusbar_connected_no_internet_4', + 'signal_wifi_statusbar_null', + 'sim_card', + 'sim_card_alert', + 'sim_card_download', + 'single_bed', + 'sip', + 'skateboarding', + 'skip_next', + 'skip_previous', + 'sledding', + 'slideshow', + 'slow_motion_video', + 'smart_button', + 'smart_display', + 'smart_screen', + 'smart_toy', + 'smartphone', + 'smoke_free', + 'smoking_rooms', + 'sms', + 'sms_failed', + 'snippet_folder', + 'snooze', + 'snowboarding', + 'snowmobile', + 'snowshoeing', + 'soap', + 'social_distance', + 'sort', + 'sort_by_alpha', + 'source', + 'south', + 'south_east', + 'south_west', + 'spa', + 'space_bar', + 'space_dashboard', + 'speaker', + 'speaker_group', + 'speaker_notes', + 'speaker_notes_off', + 'speaker_phone', + 'speed', + 'spellcheck', + 'splitscreen', + 'sports', + 'sports_bar', + 'sports_baseball', + 'sports_basketball', + 'sports_cricket', + 'sports_esports', + 'sports_football', + 'sports_golf', + 'sports_handball', + 'sports_hockey', + 'sports_kabaddi', + 'sports_mma', + 'sports_motorsports', + 'sports_rugby', + 'sports_score', + 'sports_soccer', + 'sports_tennis', + 'sports_volleyball', + 'square_foot', + 'stacked_bar_chart', + 'stacked_line_chart', + 'stairs', + 'star', + 'star_border', + 'star_border_purple500', + 'star_half', + 'star_outline', + 'star_purple500', + 'star_rate', + 'stars', + 'stay_current_landscape', + 'stay_current_portrait', + 'stay_primary_landscape', + 'stay_primary_portrait', + 'sticky_note_2', + 'stop', + 'stop_circle', + 'stop_screen_share', + 'storage', + 'store', + 'store_mall_directory', + 'storefront', + 'storm', + 'straighten', + 'stream', + 'streetview', + 'strikethrough_s', + 'stroller', + 'style', + 'subdirectory_arrow_left', + 'subdirectory_arrow_right', + 'subject', + 'subscript', + 'subscriptions', + 'subtitles', + 'subtitles_off', + 'subway', + 'summarize', + 'superscript', + 'supervised_user_circle', + 'supervisor_account', + 'support', + 'support_agent', + 'surfing', + 'surround_sound', + 'swap_calls', + 'swap_horiz', + 'swap_horizontal_circle', + 'swap_vert', + 'swap_vertical_circle', + 'swipe', + 'switch_account', + 'switch_camera', + 'switch_left', + 'switch_right', + 'switch_video', + 'sync', + 'sync_alt', + 'sync_disabled', + 'sync_problem', + 'system_security_update', + 'system_security_update_good', + 'system_security_update_warning', + 'system_update', + 'system_update_alt', + 'tab', + 'tab_unselected', + 'table_chart', + 'table_rows', + 'table_view', + 'tablet', + 'tablet_android', + 'tablet_mac', + 'tag', + 'tag_faces', + 'takeout_dining', + 'tap_and_play', + 'tapas', + 'task', + 'task_alt', + 'taxi_alert', + 'terrain', + 'text_fields', + 'text_format', + 'text_rotate_up', + 'text_rotate_vertical', + 'text_rotation_angledown', + 'text_rotation_angleup', + 'text_rotation_down', + 'text_rotation_none', + 'text_snippet', + 'textsms', + 'texture', + 'theater_comedy', + 'theaters', + 'thermostat', + 'thermostat_auto', + 'thumb_down', + 'thumb_down_alt', + 'thumb_down_off_alt', + 'thumb_up', + 'thumb_up_alt', + 'thumb_up_off_alt', + 'thumbs_up_down', + 'time_to_leave', + 'timelapse', + 'timeline', + 'timer', + 'timer_10', + 'timer_10_select', + 'timer_3', + 'timer_3_select', + 'timer_off', + 'tips_and_updates', + 'title', + 'toc', + 'today', + 'toggle_off', + 'toggle_on', + 'toll', + 'tonality', + 'topic', + 'touch_app', + 'tour', + 'toys', + 'track_changes', + 'traffic', + 'train', + 'tram', + 'transfer_within_a_station', + 'transform', + 'transgender', + 'transit_enterexit', + 'translate', + 'travel_explore', + 'trending_down', + 'trending_flat', + 'trending_up', + 'trip_origin', + 'try', + 'tty', + 'tune', + 'tungsten', + 'turned_in', + 'turned_in_not', + 'tv', + 'tv_off', + 'two_wheeler', + 'umbrella', + 'unarchive', + 'undo', + 'unfold_less', + 'unfold_more', + 'unpublished', + 'unsubscribe', + 'upcoming', + 'update', + 'update_disabled', + 'upgrade', + 'upload', + 'upload_file', + 'usb', + 'usb_off', + 'verified', + 'verified_user', + 'vertical_align_bottom', + 'vertical_align_center', + 'vertical_align_top', + 'vertical_distribute', + 'vertical_split', + 'vibration', + 'video_call', + 'video_camera_back', + 'video_camera_front', + 'video_label', + 'video_library', + 'video_settings', + 'video_stable', + 'videocam', + 'videocam_off', + 'videogame_asset', + 'videogame_asset_off', + 'view_agenda', + 'view_array', + 'view_carousel', + 'view_column', + 'view_comfy', + 'view_compact', + 'view_day', + 'view_headline', + 'view_in_ar', + 'view_list', + 'view_module', + 'view_quilt', + 'view_sidebar', + 'view_stream', + 'view_week', + 'vignette', + 'villa', + 'visibility', + 'visibility_off', + 'voice_chat', + 'voice_over_off', + 'voicemail', + 'volume_down', + 'volume_mute', + 'volume_off', + 'volume_up', + 'volunteer_activism', + 'vpn_key', + 'vpn_lock', + 'vrpano', + 'wallpaper', + 'warning', + 'warning_amber', + 'wash', + 'watch', + 'watch_later', + 'water', + 'water_damage', + 'water_drop', + 'waterfall_chart', + 'waves', + 'waving_hand', + 'wb_auto', + 'wb_cloudy', + 'wb_incandescent', + 'wb_iridescent', + 'wb_shade', + 'wb_sunny', + 'wb_twilight', + 'wc', + 'web', + 'web_asset', + 'web_asset_off', + 'weekend', + 'west', + 'whatshot', + 'wheelchair_pickup', + 'where_to_vote', + 'widgets', + 'wifi', + 'wifi_calling', + 'wifi_calling_3', + 'wifi_lock', + 'wifi_off', + 'wifi_protected_setup', + 'wifi_tethering', + 'wifi_tethering_error_rounded', + 'wifi_tethering_off', + 'window', + 'wine_bar', + 'work', + 'work_off', + 'work_outline', + 'workspaces', + 'wrap_text', + 'wrong_location', + 'wysiwyg', + 'yard', + 'youtube_searched_for', + 'zoom_in', + 'zoom_out', + 'zoom_out_map' +]; +export const iconsmind = [ + 'a_z', + 'aa', + 'add_bag', + 'add_basket', + 'add_cart', + 'add_file', + 'add_spaceafterparagraph', + 'add_spacebeforeparagraph', + 'add_user', + 'add_userstar', + 'add_window', + 'add', + 'address_book', + 'address_book2', + 'administrator', + 'aerobics_2', + 'aerobics_3', + 'aerobics', + 'affiliate', + 'aim', + 'air_balloon', + 'airbrush', + 'airship', + 'alarm_clock', + 'alarm_clock2', + 'alarm', + 'alien_2', + 'alien', + 'aligator', + 'align_center', + 'align_justifyall', + 'align_justifycenter', + 'align_justifyleft', + 'align_justifyright', + 'align_left', + 'align_right', + 'alpha', + 'ambulance', + 'amx', + 'anchor_2', + 'anchor', + 'android_store', + 'android', + 'angel_smiley', + 'angel', + 'angry', + 'apple_bite', + 'apple_store', + 'apple', + 'approved_window', + 'aquarius_2', + 'aquarius', + 'archery_2', + 'archery', + 'argentina', + 'aries_2', + 'aries', + 'army_key', + 'arrow_around', + 'arrow_back', + 'arrow_back2', + 'arrow_back3', + 'arrow_barrier', + 'arrow_circle', + 'arrow_cross', + 'arrow_down', + 'arrow_down2', + 'arrow_down3', + 'arrow_downincircle', + 'arrow_fork', + 'arrow_forward', + 'arrow_forward2', + 'arrow_from', + 'arrow_inside', + 'arrow_inside45', + 'arrow_insidegap', + 'arrow_insidegap45', + 'arrow_into', + 'arrow_join', + 'arrow_junction', + 'arrow_left', + 'arrow_left2', + 'arrow_leftincircle', + 'arrow_loop', + 'arrow_merge', + 'arrow_mix', + 'arrow_next', + 'arrow_outleft', + 'arrow_outright', + 'arrow_outside', + 'arrow_outside45', + 'arrow_outsidegap', + 'arrow_outsidegap45', + 'arrow_over', + 'arrow_refresh', + 'arrow_refresh2', + 'arrow_right', + 'arrow_right2', + 'arrow_rightincircle', + 'arrow_shuffle', + 'arrow_squiggly', + 'arrow_through', + 'arrow_to', + 'arrow_turnleft', + 'arrow_turnright', + 'arrow_up', + 'arrow_up2', + 'arrow_up3', + 'arrow_upincircle', + 'arrow_xleft', + 'arrow_xright', + 'ask', + 'assistant', + 'astronaut', + 'at_sign', + 'atm', + 'atom', + 'audio', + 'auto_flash', + 'autumn', + 'baby_clothes', + 'baby_clothes2', + 'baby_cry', + 'baby', + 'back_media', + 'back_music', + 'back', + 'back2', + 'background', + 'bacteria', + 'bag_coins', + 'bag_items', + 'bag_quantity', + 'bag', + 'bakelite', + 'ballet_shoes', + 'balloon', + 'banana', + 'band_aid', + 'bank', + 'bar_chart', + 'bar_chart2', + 'bar_chart3', + 'bar_chart4', + 'bar_chart5', + 'bar_code', + 'barricade_2', + 'barricade', + 'baseball', + 'basket_ball', + 'basket_coins', + 'basket_items', + 'basket_quantity', + 'bat_2', + 'bat', + 'bathrobe', + 'batman_mask', + 'battery_0', + 'battery_25', + 'battery_50', + 'battery_75', + 'battery_100', + 'battery_charge', + 'bear', + 'beard_2', + 'beard_3', + 'beard', + 'bebo', + 'bee', + 'beer_glass', + 'beer', + 'bell_2', + 'bell', + 'belt_2', + 'belt_3', + 'belt', + 'berlin_tower', + 'beta', + 'betvibes', + 'bicycle_2', + 'bicycle_3', + 'bicycle', + 'big_bang', + 'big_data', + 'bike_helmet', + 'bikini', + 'bilk_bottle2', + 'billing', + 'bing', + 'binocular', + 'bio_hazard', + 'biotech', + 'bird_deliveringletter', + 'bird', + 'birthday_cake', + 'bisexual', + 'bishop', + 'bitcoin', + 'black_cat', + 'blackboard', + 'blinklist', + 'block_cloud', + 'block_window', + 'blogger', + 'blood', + 'blouse', + 'blueprint', + 'board', + 'bodybuilding', + 'bold_text', + 'bone', + 'bones', + 'book', + 'bookmark', + 'books_2', + 'books', + 'boom', + 'boot_2', + 'boot', + 'bottom_totop', + 'bow_2', + 'bow_3', + 'bow_4', + 'bow_5', + 'bow_6', + 'bow', + 'bowling_2', + 'bowling', + 'box_close', + 'box_full', + 'box_open', + 'box_withfolders', + 'box', + 'box2', + 'boy', + 'bra', + 'brain_2', + 'brain_3', + 'brain', + 'brazil', + 'bread_2', + 'bread', + 'bridge', + 'brightkite', + 'broke_link2', + 'broken_link', + 'broom', + 'brush', + 'bucket', + 'bug', + 'building', + 'bulleted_list', + 'bus_2', + 'bus', + 'business_man', + 'business_manwoman', + 'business_mens', + 'business_woman', + 'butterfly', + 'button', + 'cable_car', + 'cake', + 'calculator_2', + 'calculator_3', + 'calculator', + 'calendar_2', + 'calendar_3', + 'calendar_4', + 'calendar_clock', + 'calendar', + 'camel', + 'camera_2', + 'camera_3', + 'camera_4', + 'camera_5', + 'camera_back', + 'camera', + 'can_2', + 'can', + 'canada', + 'cancer_2', + 'cancer_3', + 'cancer', + 'candle', + 'candy_cane', + 'candy', + 'cannon', + 'cap_2', + 'cap_3', + 'cap_smiley', + 'cap', + 'capricorn_2', + 'capricorn', + 'car_2', + 'car_3', + 'car_coins', + 'car_items', + 'car_wheel', + 'car', + 'cardigan', + 'cardiovascular', + 'cart_quantity', + 'casette_tape', + 'cash_register', + 'cash_register2', + 'castle', + 'cat', + 'cathedral', + 'cauldron', + 'cd_2', + 'cd_cover', + 'cd', + 'cello', + 'celsius', + 'chacked_flag', + 'chair', + 'charger', + 'check_2', + 'check', + 'checked_user', + 'checkmate', + 'checkout_bag', + 'checkout_basket', + 'checkout', + 'cheese', + 'cheetah', + 'chef_hat', + 'chef_hat2', + 'chef', + 'chemical_2', + 'chemical_3', + 'chemical_4', + 'chemical_5', + 'chemical', + 'chess_board', + 'chess', + 'chicken', + 'chile', + 'chimney', + 'china', + 'chinese_temple', + 'chip', + 'chopsticks_2', + 'chopsticks', + 'christmas_ball', + 'christmas_bell', + 'christmas_candle', + 'christmas_hat', + 'christmas_sleigh', + 'christmas_snowman', + 'christmas_sock', + 'christmas_tree', + 'christmas', + 'chrome', + 'chrysler_building', + 'cinema', + 'circular_point', + 'city_hall', + 'clamp', + 'clapperboard_close', + 'clapperboard_open', + 'claps', + 'clef', + 'clinic', + 'clock_2', + 'clock_3', + 'clock_4', + 'clock_back', + 'clock_forward', + 'clock', + 'close_window', + 'close', + 'clothing_store', + 'cloud_', + 'cloud_camera', + 'cloud_computer', + 'cloud_email', + 'cloud_hail', + 'cloud_laptop', + 'cloud_lock', + 'cloud_minus', + 'cloud_moon', + 'cloud_music', + 'cloud_picture', + 'cloud_rain', + 'cloud_remove', + 'cloud_secure', + 'cloud_settings', + 'cloud_smartphone', + 'cloud_snow', + 'cloud_sun', + 'cloud_tablet', + 'cloud_video', + 'cloud_weather', + 'cloud', + 'clouds_weather', + 'clouds', + 'clown', + 'cmyk', + 'coat', + 'cocktail', + 'coconut', + 'code_window', + 'coding', + 'coffee_2', + 'coffee_bean', + 'coffee_machine', + 'coffee_togo', + 'coffee', + 'coffin', + 'coin', + 'coins_2', + 'coins_3', + 'coins', + 'colombia', + 'colosseum', + 'column_2', + 'column_3', + 'column', + 'comb_2', + 'comb', + 'communication_tower', + 'communication_tower2', + 'compass_2', + 'compass_3', + 'compass_4', + 'compass_rose', + 'compass', + 'computer_2', + 'computer_3', + 'computer_secure', + 'computer', + 'conference', + 'confused', + 'conservation', + 'consulting', + 'contrast', + 'control_2', + 'control', + 'cookie_man', + 'cookies', + 'cool_guy', + 'cool', + 'copyright', + 'costume', + 'couple_sign', + 'cow', + 'cpu', + 'crane', + 'cranium', + 'credit_card', + 'credit_card2', + 'credit_card3', + 'cricket', + 'criminal', + 'croissant', + 'crop_2', + 'crop_3', + 'crown_2', + 'crown', + 'crying', + 'cube_molecule', + 'cube_molecule2', + 'cupcake', + 'cursor_click', + 'cursor_click2', + 'cursor_move', + 'cursor_move2', + 'cursor_select', + 'cursor', + 'd_eyeglasses', + 'd_eyeglasses2', + 'dam', + 'danemark', + 'danger_2', + 'danger', + 'dashboard', + 'data_backup', + 'data_block', + 'data_center', + 'data_clock', + 'data_cloud', + 'data_compress', + 'data_copy', + 'data_download', + 'data_financial', + 'data_key', + 'data_lock', + 'data_network', + 'data_password', + 'data_power', + 'data_refresh', + 'data_save', + 'data_search', + 'data_security', + 'data_settings', + 'data_sharing', + 'data_shield', + 'data_signal', + 'data_storage', + 'data_stream', + 'data_transfer', + 'data_unlock', + 'data_upload', + 'data_yes', + 'data', + 'david_star', + 'daylight', + 'death', + 'debian', + 'dec', + 'decrase_inedit', + 'deer_2', + 'deer', + 'delete_file', + 'delete_window', + 'delicious', + 'depression', + 'deviantart', + 'device_syncwithcloud', + 'diamond', + 'dice_2', + 'dice', + 'digg', + 'digital_drawing', + 'diigo', + 'dinosaur', + 'diploma_2', + 'diploma', + 'direction_east', + 'direction_north', + 'direction_south', + 'direction_west', + 'director', + 'disk', + 'dj', + 'dna_2', + 'dna_helix', + 'dna', + 'doctor', + 'dog', + 'dollar_sign', + 'dollar_sign2', + 'dollar', + 'dolphin', + 'domino', + 'door_hanger', + 'door', + 'doplr', + 'double_circle', + 'double_tap', + 'doughnut', + 'dove', + 'down_2', + 'down_3', + 'down_4', + 'down', + 'download_2', + 'download_fromcloud', + 'download_window', + 'download', + 'downward', + 'drag_down', + 'drag_left', + 'drag_right', + 'drag_up', + 'drag', + 'dress', + 'drill_2', + 'drill', + 'drop', + 'dropbox', + 'drum', + 'dry', + 'duck', + 'dumbbell', + 'duplicate_layer', + 'duplicate_window', + 'dvd', + 'eagle', + 'ear', + 'earphones_2', + 'earphones', + 'eci_icon', + 'edit_map', + 'edit', + 'eggs', + 'egypt', + 'eifel_tower', + 'eject_2', + 'eject', + 'el_castillo', + 'elbow', + 'electric_guitar', + 'electricity', + 'elephant', + 'email', + 'embassy', + 'empire_statebuilding', + 'empty_box', + 'end_2', + 'end', + 'end2', + 'endways', + 'engineering', + 'envelope_2', + 'envelope', + 'environmental_2', + 'environmental_3', + 'environmental', + 'equalizer', + 'eraser_2', + 'eraser_3', + 'eraser', + 'error_404window', + 'euro_sign', + 'euro_sign2', + 'euro', + 'evernote', + 'evil', + 'explode', + 'eye_2', + 'eye_blind', + 'eye_invisible', + 'eye_scan', + 'eye_visible', + 'eye', + 'eyebrow_2', + 'eyebrow_3', + 'eyebrow', + 'eyeglasses_smiley', + 'eyeglasses_smiley2', + 'face_style', + 'face_style2', + 'face_style3', + 'face_style4', + 'face_style5', + 'face_style6', + 'facebook_2', + 'facebook', + 'factory_2', + 'factory', + 'fahrenheit', + 'family_sign', + 'fan', + 'farmer', + 'fashion', + 'favorite_window', + 'fax', + 'feather', + 'feedburner', + 'female_2', + 'female_sign', + 'female', + 'file_block', + 'file_bookmark', + 'file_chart', + 'file_clipboard', + 'file_clipboardfiletext', + 'file_clipboardtextimage', + 'file_cloud', + 'file_copy', + 'file_copy2', + 'file_csv', + 'file_download', + 'file_edit', + 'file_excel', + 'file_favorite', + 'file_fire', + 'file_graph', + 'file_hide', + 'file_horizontal', + 'file_horizontaltext', + 'file_html', + 'file_jpg', + 'file_link', + 'file_loading', + 'file_lock', + 'file_love', + 'file_music', + 'file_network', + 'file_pictures', + 'file_pie', + 'file_presentation', + 'file_refresh', + 'file_search', + 'file_settings', + 'file_share', + 'file_textimage', + 'file_trash', + 'file_txt', + 'file_upload', + 'file_video', + 'file_word', + 'file_zip', + 'file', + 'files', + 'film_board', + 'film_cartridge', + 'film_strip', + 'film_video', + 'film', + 'filter_2', + 'filter', + 'financial', + 'find_user', + 'finger_dragfoursides', + 'finger_dragtwosides', + 'finger_print', + 'finger', + 'fingerprint_2', + 'fingerprint', + 'fire_flame', + 'fire_flame2', + 'fire_hydrant', + 'fire_staion', + 'firefox', + 'firewall', + 'first_aid', + 'first', + 'fish_food', + 'fish', + 'fit_to', + 'fit_to2', + 'five_fingers', + 'five_fingersdrag', + 'five_fingersdrag2', + 'five_fingerstouch', + 'flag_2', + 'flag_3', + 'flag_4', + 'flag_5', + 'flag_6', + 'flag', + 'flamingo', + 'flash_2', + 'flash_video', + 'flash', + 'flashlight', + 'flask_2', + 'flask', + 'flick', + 'flickr', + 'flowerpot', + 'fluorescent', + 'fog_day', + 'fog_night', + 'folder_add', + 'folder_archive', + 'folder_binder', + 'folder_binder2', + 'folder_block', + 'folder_bookmark', + 'folder_close', + 'folder_cloud', + 'folder_delete', + 'folder_download', + 'folder_edit', + 'folder_favorite', + 'folder_fire', + 'folder_hide', + 'folder_link', + 'folder_loading', + 'folder_lock', + 'folder_love', + 'folder_music', + 'folder_network', + 'folder_open', + 'folder_open2', + 'folder_organizing', + 'folder_pictures', + 'folder_refresh', + 'folder_remove', + 'folder_search', + 'folder_settings', + 'folder_share', + 'folder_trash', + 'folder_upload', + 'folder_video', + 'folder_withdocument', + 'folder_zip', + 'folder', + 'folders', + 'font_color', + 'font_name', + 'font_size', + 'font_style', + 'font_stylesubscript', + 'font_stylesuperscript', + 'font_window', + 'foot_2', + 'foot', + 'football_2', + 'football', + 'footprint_2', + 'footprint_3', + 'footprint', + 'forest', + 'fork', + 'formspring', + 'formula', + 'forsquare', + 'forward', + 'fountain_pen', + 'four_fingers', + 'four_fingersdrag', + 'four_fingersdrag2', + 'four_fingerstouch', + 'fox', + 'frankenstein', + 'french_fries', + 'friendfeed', + 'friendster', + 'frog', + 'fruits', + 'fuel', + 'full_bag', + 'full_basket', + 'full_cart', + 'full_moon', + 'full_screen', + 'full_screen2', + 'full_view', + 'full_view2', + 'full_viewwindow', + 'function', + 'funky', + 'funny_bicycle', + 'furl', + 'gamepad_2', + 'gamepad', + 'gas_pump', + 'gaugage_2', + 'gaugage', + 'gay', + 'gear_2', + 'gear', + 'gears_2', + 'gears', + 'geek_2', + 'geek', + 'gemini_2', + 'gemini', + 'genius', + 'gentleman', + 'geo_', + 'geo_close', + 'geo_love', + 'geo_minus', + 'geo_number', + 'geo_star', + 'geo', + 'geo2_', + 'geo2_close', + 'geo2_love', + 'geo2_minus', + 'geo2_number', + 'geo2_star', + 'geo2', + 'geo3_', + 'geo3_close', + 'geo3_love', + 'geo3_minus', + 'geo3_number', + 'geo3_star', + 'geo3', + 'gey', + 'gift_box', + 'giraffe', + 'girl', + 'glass_water', + 'glasses_2', + 'glasses_3', + 'glasses', + 'global_position', + 'globe_2', + 'globe', + 'gloves', + 'go_bottom', + 'go_top', + 'goggles', + 'golf_2', + 'golf', + 'google_buzz', + 'google_drive', + 'google_play', + 'google_plus', + 'google', + 'gopro', + 'gorilla', + 'gowalla', + 'grave', + 'graveyard', + 'greece', + 'green_energy', + 'green_house', + 'guitar', + 'gun_2', + 'gun_3', + 'gun', + 'gymnastics', + 'hair_2', + 'hair_3', + 'hair_4', + 'hair', + 'half_moon', + 'halloween_halfmoon', + 'halloween_moon', + 'hamburger', + 'hammer', + 'hand_touch', + 'hand_touch2', + 'hand_touchsmartphone', + 'hand', + 'hands', + 'handshake', + 'hanger', + 'happy', + 'hat_2', + 'hat', + 'haunted_house', + 'hd_video', + 'hd', + 'hdd', + 'headphone', + 'headphones', + 'headset', + 'heart_2', + 'heart', + 'heels_2', + 'heels', + 'height_window', + 'helicopter_2', + 'helicopter', + 'helix_2', + 'hello', + 'helmet_2', + 'helmet_3', + 'helmet', + 'hipo', + 'hipster_glasses', + 'hipster_glasses2', + 'hipster_glasses3', + 'hipster_headphones', + 'hipster_men', + 'hipster_men2', + 'hipster_men3', + 'hipster_sunglasses', + 'hipster_sunglasses2', + 'hipster_sunglasses3', + 'hokey', + 'holly', + 'home_2', + 'home_3', + 'home_4', + 'home_5', + 'home_window', + 'home', + 'homosexual', + 'honey', + 'hong_kong', + 'hoodie', + 'horror', + 'horse', + 'hospital_2', + 'hospital', + 'host', + 'hot_dog', + 'hotel', + 'hour', + 'hub', + 'humor', + 'hurt', + 'ice_cream', + 'icq', + 'id_2', + 'id_3', + 'id_card', + 'idea_2', + 'idea_3', + 'idea_4', + 'idea_5', + 'idea', + 'identification_badge', + 'imdb', + 'inbox_empty', + 'inbox_forward', + 'inbox_full', + 'inbox_into', + 'inbox_out', + 'inbox_reply', + 'inbox', + 'increase_inedit', + 'indent_firstline', + 'indent_leftmargin', + 'indent_rightmargin', + 'india', + 'info_window', + 'information', + 'inifity', + 'instagram', + 'internet_2', + 'internet_explorer', + 'internet_smiley', + 'internet', + 'ios_apple', + 'israel', + 'italic_text', + 'jacket_2', + 'jacket', + 'jamaica', + 'japan', + 'japanese_gate', + 'jeans', + 'jeep_2', + 'jeep', + 'jet', + 'joystick', + 'juice', + 'jump_rope', + 'kangoroo', + 'kenya', + 'key_2', + 'key_3', + 'key_lock', + 'key', + 'keyboard', + 'keyboard3', + 'keypad', + 'king_2', + 'king', + 'kiss', + 'knee', + 'knife_2', + 'knife', + 'knight', + 'koala', + 'korea', + 'lamp', + 'landscape_2', + 'landscape', + 'lantern', + 'laptop_2', + 'laptop_3', + 'laptop_phone', + 'laptop_secure', + 'laptop_tablet', + 'laptop', + 'laser', + 'last_fm', + 'last', + 'laughing', + 'layer_1635', + 'layer_1646', + 'layer_backward', + 'layer_forward', + 'leafs_2', + 'leafs', + 'leaning_tower', + 'left__right', + 'left__right3', + 'left_2', + 'left_3', + 'left_4', + 'left_toright', + 'left', + 'leg_2', + 'leg', + 'lego', + 'lemon', + 'len_2', + 'len_3', + 'len', + 'leo_2', + 'leo', + 'leopard', + 'lesbian', + 'lesbians', + 'letter_close', + 'letter_open', + 'letter_sent', + 'libra_2', + 'libra', + 'library_2', + 'library', + 'life_jacket', + 'life_safer', + 'light_bulb', + 'light_bulb2', + 'light_bulbleaf', + 'lighthouse', + 'like_2', + 'like', + 'line_chart', + 'line_chart2', + 'line_chart3', + 'line_chart4', + 'line_spacing', + 'line_spacingtext', + 'link_2', + 'link', + 'linkedin_2', + 'linkedin', + 'linux', + 'lion', + 'livejournal', + 'loading_2', + 'loading_3', + 'loading_window', + 'loading', + 'location_2', + 'location', + 'lock_2', + 'lock_3', + 'lock_user', + 'lock_window', + 'lock', + 'lollipop_2', + 'lollipop_3', + 'lollipop', + 'loop', + 'loud', + 'loudspeaker', + 'love_2', + 'love_user', + 'love_window', + 'love', + 'lowercase_text', + 'luggafe_front', + 'luggage_2', + 'macro', + 'magic_wand', + 'magnet', + 'magnifi_glass_minus', + 'magnifi_glass', + 'magnifi_glass2', + 'mail_2', + 'mail_3', + 'mail_add', + 'mail_attachement', + 'mail_block', + 'mail_delete', + 'mail_favorite', + 'mail_forward', + 'mail_gallery', + 'mail_inbox', + 'mail_link', + 'mail_lock', + 'mail_love', + 'mail_money', + 'mail_open', + 'mail_outbox', + 'mail_password', + 'mail_photo', + 'mail_read', + 'mail_removex', + 'mail_reply', + 'mail_replyall', + 'mail_search', + 'mail_send', + 'mail_settings', + 'mail_unread', + 'mail_video', + 'mail_withatsign', + 'mail_withcursors', + 'mail', + 'mailbox_empty', + 'mailbox_full', + 'male_2', + 'male_sign', + 'male', + 'malefemale', + 'man_sign', + 'management', + 'mans_underwear', + 'mans_underwear2', + 'map_marker', + 'map_marker2', + 'map_marker3', + 'map', + 'map2', + 'marker_2', + 'marker_3', + 'marker', + 'martini_glass', + 'mask', + 'master_card', + 'maximize_window', + 'maximize', + 'medal_2', + 'medal_3', + 'medal', + 'medical_sign', + 'medicine_2', + 'medicine_3', + 'medicine', + 'megaphone', + 'memory_card', + 'memory_card2', + 'memory_card3', + 'men', + 'menorah', + 'mens', + 'metacafe', + 'mexico', + 'mic', + 'microphone_2', + 'microphone_3', + 'microphone_4', + 'microphone_5', + 'microphone_6', + 'microphone_7', + 'microphone', + 'microscope', + 'milk_bottle', + 'mine', + 'minimize_maximize_close_window', + 'minimize_window', + 'minimize', + 'mirror', + 'mixer', + 'mixx', + 'money_2', + 'money_bag', + 'money_smiley', + 'money', + 'monitor_2', + 'monitor_3', + 'monitor_4', + 'monitor_5', + 'monitor_analytics', + 'monitor_laptop', + 'monitor_phone', + 'monitor_tablet', + 'monitor_vertical', + 'monitor', + 'monitoring', + 'monkey', + 'monster', + 'morocco', + 'motorcycle', + 'mouse_2', + 'mouse_3', + 'mouse_4', + 'mouse_pointer', + 'mouse', + 'moustache_smiley', + 'movie_ticket', + 'movie', + 'mp3_file', + 'museum', + 'mushroom', + 'music_note', + 'music_note2', + 'music_note3', + 'music_note4', + 'music_player', + 'mustache_2', + 'mustache_3', + 'mustache_4', + 'mustache_5', + 'mustache_6', + 'mustache_7', + 'mustache_8', + 'mustache', + 'mute', + 'myspace', + 'navigat_start', + 'navigate_end', + 'navigation_leftwindow', + 'navigation_rightwindow', + 'nepal', + 'netscape', + 'network_window', + 'network', + 'neutron', + 'new_mail', + 'new_tab', + 'newspaper_2', + 'newspaper', + 'newsvine', + 'next_3', + 'next_music', + 'next', + 'next2', + 'no_battery', + 'no_drop', + 'no_flash', + 'no_smoking', + 'noose', + 'normal_text', + 'note', + 'notepad_2', + 'notepad', + 'nuclear', + 'numbering_list', + 'nurse', + 'office_lamp', + 'office', + 'oil', + 'old_camera', + 'old_cassette', + 'old_clock', + 'old_radio', + 'old_sticky', + 'old_sticky2', + 'old_telephone', + 'old_tv', + 'on_air', + 'on_off_2', + 'on_off_3', + 'on_off', + 'one_finger', + 'one_fingertouch', + 'one_window', + 'open_banana', + 'open_book', + 'opera_house', + 'opera', + 'optimization', + 'orientation_2', + 'orientation_3', + 'orientation', + 'orkut', + 'ornament', + 'over_time', + 'over_time2', + 'owl', + 'pac_man', + 'paint_brush', + 'paint_bucket', + 'paintbrush', + 'palette', + 'palm_tree', + 'panda', + 'panorama', + 'pantheon', + 'pantone', + 'pants', + 'paper_plane', + 'paper', + 'parasailing', + 'parrot', + 'password_2shopping', + 'password_field', + 'password_shopping', + 'password', + 'pause_2', + 'pause', + 'paw', + 'pawn', + 'paypal', + 'pen_2', + 'pen_3', + 'pen_4', + 'pen_5', + 'pen_6', + 'pen', + 'pencil_ruler', + 'pencil', + 'penguin', + 'pentagon', + 'people_oncloud', + 'pepper_withfire', + 'pepper', + 'petrol', + 'petronas_tower', + 'philipines', + 'phone_2', + 'phone_3', + 'phone_3g', + 'phone_4g', + 'phone_simcard', + 'phone_sms', + 'phone_wifi', + 'phone', + 'photo_2', + 'photo_3', + 'photo_album', + 'photo_album2', + 'photo_album3', + 'photo', + 'photos', + 'physics', + 'pi', + 'piano', + 'picasa', + 'pie_chart', + 'pie_chart2', + 'pie_chart3', + 'pilates_2', + 'pilates_3', + 'pilates', + 'pilot', + 'pinch', + 'ping_pong', + 'pinterest', + 'pipe', + 'pipette', + 'piramids', + 'pisces_2', + 'pisces', + 'pizza_slice', + 'pizza', + 'plane_2', + 'plane', + 'plant', + 'plasmid', + 'plaster', + 'plastic_cupphone', + 'plastic_cupphone2', + 'plate', + 'plates', + 'plaxo', + 'play_music', + 'plug_in', + 'plug_in2', + 'plurk', + 'pointer', + 'poland', + 'police_man', + 'police_station', + 'police_woman', + 'police', + 'polo_shirt', + 'portrait', + 'portugal', + 'post_mail', + 'post_mail2', + 'post_office', + 'post_sign', + 'post_sign2ways', + 'posterous', + 'pound_sign', + 'pound_sign2', + 'pound', + 'power_2', + 'power_3', + 'power_cable', + 'power_station', + 'power', + 'prater', + 'present', + 'presents', + 'press', + 'preview', + 'previous', + 'pricing', + 'printer', + 'professor', + 'profile', + 'project', + 'projector_2', + 'projector', + 'pulse', + 'pumpkin', + 'punk', + 'punker', + 'puzzle', + 'qik', + 'qr_code', + 'queen_2', + 'queen', + 'quill_2', + 'quill_3', + 'quill', + 'quotes_2', + 'quotes', + 'radio', + 'radioactive', + 'rafting', + 'rain_drop', + 'rainbow_2', + 'rainbow', + 'ram', + 'razzor_blade', + 'receipt_2', + 'receipt_3', + 'receipt_4', + 'receipt', + 'record_3', + 'record_music', + 'record', + 'record2', + 'recycling_2', + 'recycling', + 'reddit', + 'redhat', + 'redirect', + 'redo', + 'reel', + 'refinery', + 'refresh_window', + 'refresh', + 'reload_2', + 'reload_3', + 'reload', + 'remote_controll', + 'remote_controll2', + 'remove_bag', + 'remove_basket', + 'remove_cart', + 'remove_file', + 'remove_user', + 'remove_window', + 'remove', + 'rename', + 'repair', + 'repeat_2', + 'repeat_3', + 'repeat_4', + 'repeat_5', + 'repeat_6', + 'repeat_7', + 'repeat', + 'reset', + 'resize', + 'restore_window', + 'retouching', + 'retro_camera', + 'retro', + 'retweet', + 'reverbnation', + 'rewind', + 'rgb', + 'ribbon_2', + 'ribbon_3', + 'ribbon', + 'right_2', + 'right_3', + 'right_4', + 'right_toleft', + 'right', + 'road_2', + 'road_3', + 'road', + 'robot_2', + 'robot', + 'rock_androll', + 'rocket', + 'roller', + 'roof', + 'rook', + 'rotate_gesture', + 'rotate_gesture2', + 'rotate_gesture3', + 'rotation_390', + 'rotation', + 'router_2', + 'router', + 'rss', + 'ruler_2', + 'ruler', + 'running_shoes', + 'running', + 'safari', + 'safe_box', + 'safe_box2', + 'safety_pinclose', + 'safety_pinopen', + 'sagittarus_2', + 'sagittarus', + 'sailing_ship', + 'sand_watch', + 'sand_watch2', + 'santa_claus', + 'santa_claus2', + 'santa_onsled', + 'satelite_2', + 'satelite', + 'save_window', + 'save', + 'saw', + 'saxophone', + 'scale', + 'scarf', + 'scissor', + 'scooter_front', + 'scooter', + 'scorpio_2', + 'scorpio', + 'scotland', + 'screwdriver', + 'scroll_fast', + 'scroll', + 'scroller_2', + 'scroller', + 'sea_dog', + 'search_oncloud', + 'search_people', + 'secound', + 'secound2', + 'security_block', + 'security_bug', + 'security_camera', + 'security_check', + 'security_settings', + 'security_smiley', + 'securiy_remove', + 'seed', + 'selfie', + 'serbia', + 'server_2', + 'server', + 'servers', + 'settings_window', + 'sewing_machine', + 'sexual', + 'share_oncloud', + 'share_window', + 'share', + 'sharethis', + 'shark', + 'sheep', + 'sheriff_badge', + 'shield', + 'ship_2', + 'ship', + 'shirt', + 'shoes_2', + 'shoes_3', + 'shoes', + 'shop_2', + 'shop_3', + 'shop_4', + 'shop', + 'shopping_bag', + 'shopping_basket', + 'shopping_cart', + 'short_pants', + 'shoutwire', + 'shovel', + 'shuffle_2', + 'shuffle_3', + 'shuffle_4', + 'shuffle', + 'shutter', + 'sidebar_window', + 'signal', + 'singapore', + 'skate_shoes', + 'skateboard_2', + 'skateboard', + 'skeleton', + 'ski', + 'skirt', + 'skrill', + 'skull', + 'skydiving', + 'skype', + 'sled_withgifts', + 'sled', + 'sleeping', + 'sleet', + 'slippers', + 'smart', + 'smartphone_2', + 'smartphone_3', + 'smartphone_4', + 'smartphone_secure', + 'smartphone', + 'smile', + 'smoking_area', + 'smoking_pipe', + 'snake', + 'snorkel', + 'snow_2', + 'snow_dome', + 'snow_storm', + 'snow', + 'snowflake_2', + 'snowflake_3', + 'snowflake_4', + 'snowflake', + 'snowman', + 'soccer_ball', + 'soccer_shoes', + 'socks', + 'solar', + 'sound_wave', + 'sound', + 'soundcloud', + 'soup', + 'south_africa', + 'space_needle', + 'spain', + 'spam_mail', + 'speach_bubble', + 'speach_bubble2', + 'speach_bubble3', + 'speach_bubble4', + 'speach_bubble5', + 'speach_bubble6', + 'speach_bubble7', + 'speach_bubble8', + 'speach_bubble9', + 'speach_bubble10', + 'speach_bubble11', + 'speach_bubble12', + 'speach_bubble13', + 'speach_bubbleasking', + 'speach_bubblecomic', + 'speach_bubblecomic2', + 'speach_bubblecomic3', + 'speach_bubblecomic4', + 'speach_bubbledialog', + 'speach_bubbles', + 'speak_2', + 'speak', + 'speaker_2', + 'speaker', + 'spell_check', + 'spell_checkabc', + 'spermium', + 'spider', + 'spiderweb', + 'split_foursquarewindow', + 'split_horizontal', + 'split_horizontal2window', + 'split_vertical', + 'split_vertical2', + 'split_window', + 'spoder', + 'spoon', + 'sport_mode', + 'sports_clothings1', + 'sports_clothings2', + 'sports_shirt', + 'spot', + 'spray', + 'spread', + 'spring', + 'spurl', + 'spy', + 'squirrel', + 'ssl', + 'st_basilscathedral', + 'st_paulscathedral', + 'stamp_2', + 'stamp', + 'stapler', + 'star_track', + 'star', + 'starfish', + 'start_3', + 'start_ways', + 'start', + 'start2', + 'statistic', + 'stethoscope', + 'stop__2', + 'stop_music', + 'stop', + 'stopwatch_2', + 'stopwatch', + 'storm', + 'street_view', + 'street_view2', + 'strikethrough_text', + 'stroller', + 'structure', + 'student_female', + 'student_hat', + 'student_hat2', + 'student_male', + 'student_malefemale', + 'students', + 'studio_flash', + 'studio_lightbox', + 'stumbleupon', + 'suit', + 'suitcase', + 'sum_2', + 'sum', + 'summer', + 'sun_cloudyrain', + 'sun', + 'sunglasses_2', + 'sunglasses_3', + 'sunglasses_smiley', + 'sunglasses_smiley2', + 'sunglasses_w', + 'sunglasses_w2', + 'sunglasses_w3', + 'sunglasses', + 'sunrise', + 'sunset', + 'superman', + 'support', + 'surprise', + 'sushi', + 'sweden', + 'swimming_short', + 'swimming', + 'swimmwear', + 'switch', + 'switzerland', + 'sync_cloud', + 'sync', + 'synchronize_2', + 'synchronize', + 't_shirt', + 'tablet_2', + 'tablet_3', + 'tablet_orientation', + 'tablet_phone', + 'tablet_secure', + 'tablet_vertical', + 'tablet', + 'tactic', + 'tag_2', + 'tag_3', + 'tag_4', + 'tag_5', + 'tag', + 'taj_mahal', + 'talk_man', + 'tap', + 'target_market', + 'target', + 'taurus_2', + 'taurus', + 'taxi_2', + 'taxi_sign', + 'taxi', + 'teacher', + 'teapot', + 'technorati', + 'teddy_bear', + 'tee_mug', + 'telephone_2', + 'telephone', + 'telescope', + 'temperature_2', + 'temperature_3', + 'temperature', + 'temple', + 'tennis_ball', + 'tennis', + 'tent', + 'test_tube', + 'test_tube2', + 'testimonal', + 'text_box', + 'text_effect', + 'text_highlightcolor', + 'text_paragraph', + 'thailand', + 'the_whitehouse', + 'this_sideup', + 'thread', + 'three_arrowfork', + 'three_fingers', + 'three_fingersdrag', + 'three_fingersdrag2', + 'three_fingerstouch', + 'thumb', + 'thumbs_downsmiley', + 'thumbs_upsmiley', + 'thunder', + 'thunderstorm', + 'ticket', + 'tie_2', + 'tie_3', + 'tie_4', + 'tie', + 'tiger', + 'time_backup', + 'time_bomb', + 'time_clock', + 'time_fire', + 'time_machine', + 'time_window', + 'timer_2', + 'timer', + 'to_bottom', + 'to_bottom2', + 'to_left', + 'to_right', + 'to_top', + 'to_top2', + 'token_', + 'tomato', + 'tongue', + 'tooth_2', + 'tooth', + 'top_tobottom', + 'touch_window', + 'tourch', + 'tower_2', + 'tower_bridge', + 'tower', + 'trace', + 'tractor', + 'traffic_light', + 'traffic_light2', + 'train_2', + 'train', + 'tram', + 'transform_2', + 'transform_3', + 'transform_4', + 'transform', + 'trash_withmen', + 'tree_2', + 'tree_3', + 'tree_4', + 'tree_5', + 'tree', + 'trekking', + 'triangle_arrowdown', + 'triangle_arrowleft', + 'triangle_arrowright', + 'triangle_arrowup', + 'tripod_2', + 'tripod_andvideo', + 'tripod_withcamera', + 'tripod_withgopro', + 'trophy_2', + 'trophy', + 'truck', + 'trumpet', + 'tumblr', + 'turkey', + 'turn_down', + 'turn_down2', + 'turn_downfromleft', + 'turn_downfromright', + 'turn_left', + 'turn_left3', + 'turn_right', + 'turn_right3', + 'turn_up', + 'turn_up2', + 'turtle', + 'tuxedo', + 'tv', + 'twister', + 'twitter_2', + 'twitter', + 'two_fingers', + 'two_fingersdrag', + 'two_fingersdrag2', + 'two_fingersscroll', + 'two_fingerstouch', + 'two_windows', + 'type_pass', + 'ukraine', + 'umbrela', + 'umbrella_2', + 'umbrella_3', + 'under_linetext', + 'undo', + 'united_kingdom', + 'united_states', + 'university_2', + 'university', + 'unlike_2', + 'unlike', + 'unlock_2', + 'unlock_3', + 'unlock', + 'up__down', + 'up__down3', + 'up_2', + 'up_3', + 'up_4', + 'up', + 'upgrade', + 'upload_2', + 'upload_tocloud', + 'upload_window', + 'upload', + 'uppercase_text', + 'upward', + 'url_window', + 'usb_2', + 'usb_cable', + 'usb', + 'user', + 'ustream', + 'vase', + 'vector_2', + 'vector_3', + 'vector_4', + 'vector_5', + 'vector', + 'venn_diagram', + 'vest_2', + 'vest', + 'viddler', + 'video_2', + 'video_3', + 'video_4', + 'video_5', + 'video_6', + 'video_gamecontroller', + 'video_len', + 'video_len2', + 'video_photographer', + 'video_tripod', + 'video', + 'vietnam', + 'view_height', + 'view_width', + 'vimeo', + 'virgo_2', + 'virgo', + 'virus_2', + 'virus_3', + 'virus', + 'visa', + 'voice', + 'voicemail', + 'volleyball', + 'volume_down', + 'volume_up', + 'vpn', + 'wacom_tablet', + 'waiter', + 'walkie_talkie', + 'wallet_2', + 'wallet_3', + 'wallet', + 'warehouse', + 'warning_window', + 'watch_2', + 'watch_3', + 'watch', + 'wave_2', + 'wave', + 'webcam', + 'weight_lift', + 'wheelbarrow', + 'wheelchair', + 'width_window', + 'wifi_2', + 'wifi_keyboard', + 'wifi', + 'wind_turbine', + 'windmill', + 'window_2', + 'window', + 'windows_2', + 'windows_microsoft', + 'windows', + 'windsock', + 'windy', + 'wine_bottle', + 'wine_glass', + 'wink', + 'winter_2', + 'winter', + 'wireless', + 'witch_hat', + 'witch', + 'wizard', + 'wolf', + 'woman_sign', + 'womanman', + 'womans_underwear', + 'womans_underwear2', + 'women', + 'wonder_woman', + 'wordpress', + 'worker_clothes', + 'worker', + 'wrap_text', + 'wreath', + 'wrench', + 'x_box', + 'x_ray', + 'xanga', + 'xing', + 'yacht', + 'yahoo_buzz', + 'yahoo', + 'yelp', + 'yes', + 'ying_yang', + 'youtube', + 'z_a', + 'zebra', + 'zombie', + 'zoom_gesture', + 'zootool' +]; +export const feather = [ + 'activity', + 'airplay', + 'alert-circle', + 'alert-octagon', + 'alert-triangle', + 'align-center', + 'align-justify', + 'align-left', + 'align-right', + 'anchor', + 'aperture', + 'archive', + 'arrow-down-circle', + 'arrow-down-left', + 'arrow-down-right', + 'arrow-down', + 'arrow-left-circle', + 'arrow-left', + 'arrow-right-circle', + 'arrow-right', + 'arrow-up-circle', + 'arrow-up-left', + 'arrow-up-right', + 'arrow-up', + 'at-sign', + 'award', + 'bar-chart-2', + 'bar-chart', + 'battery-charging', + 'battery', + 'bell-off', + 'bell', + 'bluetooth', + 'bold', + 'book-open', + 'book', + 'bookmark', + 'box', + 'briefcase', + 'calendar', + 'camera-off', + 'camera', + 'cast', + 'check-circle', + 'check-square', + 'check', + 'chevron-down', + 'chevron-left', + 'chevron-right', + 'chevron-up', + 'chevrons-down', + 'chevrons-left', + 'chevrons-right', + 'chevrons-up', + 'chrome', + 'circle', + 'clipboard', + 'clock', + 'cloud-drizzle', + 'cloud-lightning', + 'cloud-off', + 'cloud-rain', + 'cloud-snow', + 'cloud', + 'code', + 'codepen', + 'codesandbox', + 'coffee', + 'columns', + 'command', + 'compass', + 'copy', + 'corner-down-left', + 'corner-down-right', + 'corner-left-down', + 'corner-left-up', + 'corner-right-down', + 'corner-right-up', + 'corner-up-left', + 'corner-up-right', + 'cpu', + 'credit-card', + 'crop', + 'crosshair', + 'database', + 'delete', + 'disc', + 'dollar-sign', + 'download-cloud', + 'download', + 'droplet', + 'edit-2', + 'edit-3', + 'edit', + 'external-link', + 'eye-off', + 'eye', + 'facebook', + 'fast-forward', + 'feather', + 'figma', + 'file-minus', + 'file-plus', + 'file-text', + 'file', + 'film', + 'filter', + 'flag', + 'folder-minus', + 'folder-plus', + 'folder', + 'framer', + 'frown', + 'gift', + 'git-branch', + 'git-commit', + 'git-merge', + 'git-pull-request', + 'github', + 'gitlab', + 'globe', + 'grid', + 'hard-drive', + 'hash', + 'headphones', + 'heart', + 'help-circle', + 'hexagon', + 'home', + 'image', + 'inbox', + 'info', + 'instagram', + 'italic', + 'key', + 'layers', + 'layout', + 'life-buoy', + 'link-2', + 'link', + 'linkedin', + 'list', + 'loader', + 'lock', + 'log-in', + 'log-out', + 'mail', + 'map-pin', + 'map', + 'maximize-2', + 'maximize', + 'meh', + 'menu', + 'message-circle', + 'message-square', + 'mic-off', + 'mic', + 'minimize-2', + 'minimize', + 'minus-circle', + 'minus-square', + 'minus', + 'monitor', + 'moon', + 'more-horizontal', + 'more-vertical', + 'mouse-pointer', + 'move', + 'music', + 'navigation-2', + 'navigation', + 'octagon', + 'package', + 'paperclip', + 'pause-circle', + 'pause', + 'pen-tool', + 'percent', + 'phone-call', + 'phone-forwarded', + 'phone-incoming', + 'phone-missed', + 'phone-off', + 'phone-outgoing', + 'phone', + 'pie-chart', + 'play-circle', + 'play', + 'plus-circle', + 'plus-square', + 'plus', + 'pocket', + 'power', + 'printer', + 'radio', + 'refresh-ccw', + 'refresh-cw', + 'repeat', + 'rewind', + 'rotate-ccw', + 'rotate-cw', + 'rss', + 'save', + 'scissors', + 'search', + 'send', + 'server', + 'settings', + 'share-2', + 'share', + 'shield-off', + 'shield', + 'shopping-bag', + 'shopping-cart', + 'shuffle', + 'sidebar', + 'skip-back', + 'skip-forward', + 'slack', + 'slash', + 'sliders', + 'smartphone', + 'smile', + 'speaker', + 'square', + 'star', + 'stop-circle', + 'sun', + 'sunrise', + 'sunset', + 'tablet', + 'tag', + 'target', + 'terminal', + 'thermometer', + 'thumbs-down', + 'thumbs-up', + 'toggle-left', + 'toggle-right', + 'tool', + 'trash-2', + 'trash', + 'trello', + 'trending-down', + 'trending-up', + 'triangle', + 'truck', + 'tv', + 'twitch', + 'twitter', + 'type', + 'umbrella', + 'underline', + 'unlock', + 'upload-cloud', + 'upload', + 'user-check', + 'user-minus', + 'user-plus', + 'user-x', + 'user', + 'users', + 'video-off', + 'video', + 'voicemail', + 'volume-1', + 'volume-2', + 'volume-x', + 'volume', + 'watch', + 'wifi-off', + 'wifi', + 'wind', + 'x-circle', + 'x-octagon', + 'x-square', + 'x', + 'youtube', + 'zap-off', + 'zap', + 'zoom-in', + 'zoom-out' +]; +// heroicons v1.0.1 - 230 icons +export const heroicons = [ + 'academic-cap', + 'annotation', + 'adjustments', + 'archive', + 'arrow-circle-down', + 'arrow-circle-left', + 'arrow-circle-right', + 'arrow-circle-up', + 'arrow-down', + 'arrow-left', + 'arrow-narrow-down', + 'arrow-narrow-left', + 'arrow-narrow-right', + 'arrow-narrow-up', + 'arrow-right', + 'arrow-sm-left', + 'arrow-sm-down', + 'arrow-sm-right', + 'arrow-sm-up', + 'arrow-up', + 'arrows-expand', + 'at-symbol', + 'badge-check', + 'backspace', + 'ban', + 'beaker', + 'bell', + 'book-open', + 'bookmark-alt', + 'bookmark', + 'briefcase', + 'cake', + 'calculator', + 'calendar', + 'camera', + 'cash', + 'chart-bar', + 'chart-pie', + 'chart-square-bar', + 'chat-alt-2', + 'chat-alt', + 'chat', + 'check-circle', + 'check', + 'chevron-double-down', + 'chevron-double-left', + 'chevron-double-up', + 'chevron-double-right', + 'chevron-down', + 'chevron-left', + 'chevron-right', + 'chevron-up', + 'chip', + 'clipboard-check', + 'clipboard-copy', + 'clipboard-list', + 'clipboard', + 'clock', + 'cloud-download', + 'cloud-upload', + 'cloud', + 'code', + 'cog', + 'collection', + 'credit-card', + 'color-swatch', + 'cube-transparent', + 'cube', + 'currency-bangladeshi', + 'currency-dollar', + 'currency-euro', + 'currency-pound', + 'currency-rupee', + 'currency-yen', + 'cursor-click', + 'database', + 'desktop-computer', + 'device-mobile', + 'device-tablet', + 'document-add', + 'document-download', + 'document-duplicate', + 'document-remove', + 'document-report', + 'document-search', + 'document-text', + 'document', + 'dots-circle-horizontal', + 'dots-horizontal', + 'dots-vertical', + 'download', + 'duplicate', + 'emoji-happy', + 'emoji-sad', + 'exclamation-circle', + 'exclamation', + 'external-link', + 'eye-off', + 'eye', + 'fast-forward', + 'film', + 'filter', + 'finger-print', + 'fire', + 'flag', + 'folder-add', + 'folder-download', + 'folder-open', + 'folder-remove', + 'folder', + 'gift', + 'globe-alt', + 'globe', + 'hand', + 'hashtag', + 'heart', + 'home', + 'identification', + 'inbox-in', + 'inbox', + 'information-circle', + 'key', + 'library', + 'light-bulb', + 'lightning-bolt', + 'link', + 'location-marker', + 'lock-closed', + 'lock-open', + 'login', + 'logout', + 'mail-open', + 'mail', + 'map', + 'menu-alt-1', + 'menu-alt-2', + 'menu-alt-3', + 'menu-alt-4', + 'menu', + 'microphone', + 'minus-circle', + 'minus-sm', + 'minus', + 'moon', + 'music-note', + 'newspaper', + 'office-building', + 'paper-airplane', + 'paper-clip', + 'pause', + 'pencil-alt', + 'pencil', + 'phone-incoming', + 'phone-missed-call', + 'phone-outgoing', + 'photograph', + 'phone', + 'play', + 'plus-circle', + 'plus-sm', + 'plus', + 'presentation-chart-bar', + 'presentation-chart-line', + 'printer', + 'qrcode', + 'puzzle', + 'question-mark-circle', + 'receipt-refund', + 'receipt-tax', + 'refresh', + 'reply', + 'rewind', + 'rss', + 'save-as', + 'save', + 'scale', + 'scissors', + 'search-circle', + 'search', + 'selector', + 'server', + 'share', + 'shield-check', + 'shield-exclamation', + 'shopping-bag', + 'shopping-cart', + 'sort-ascending', + 'sort-descending', + 'speakerphone', + 'sparkles', + 'star', + 'status-online', + 'status-offline', + 'stop', + 'sun', + 'support', + 'switch-vertical', + 'switch-horizontal', + 'table', + 'tag', + 'template', + 'terminal', + 'thumb-up', + 'thumb-down', + 'ticket', + 'translate', + 'trash', + 'trending-down', + 'trending-up', + 'truck', + 'upload', + 'user-add', + 'user-group', + 'user-circle', + 'user-remove', + 'user', + 'users', + 'variable', + 'video-camera', + 'view-boards', + 'view-grid-add', + 'view-grid', + 'view-list', + 'volume-up', + 'volume-off', + 'x-circle', + 'zoom-in', + 'wifi', + 'zoom-out', + 'x' +]; diff --git a/src/app/modules/admin/dashboards/user/user.component.html b/src/app/modules/admin/dashboards/user/user.component.html new file mode 100644 index 0000000..1c57afa --- /dev/null +++ b/src/app/modules/admin/dashboards/user/user.component.html @@ -0,0 +1 @@ +
diff --git a/src/app/modules/admin/dashboards/user/user.component.ts b/src/app/modules/admin/dashboards/user/user.component.ts new file mode 100644 index 0000000..6460c1d --- /dev/null +++ b/src/app/modules/admin/dashboards/user/user.component.ts @@ -0,0 +1,51 @@ +import { + ChangeDetectionStrategy, + Component, + OnDestroy, + OnInit, + ViewEncapsulation, +} from '@angular/core'; +import { Router } from '@angular/router'; +import { Subject } from 'rxjs'; +import { UserService } from 'app/modules/admin/dashboards/user/user.service'; + +@Component({ + selector: 'user', + templateUrl: './user.component.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class UserComponent implements OnInit, OnDestroy { + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor(private _router: Router, private _userService: UserService) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void {} + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- +} diff --git a/src/app/modules/admin/dashboards/user/user.module.ts b/src/app/modules/admin/dashboards/user/user.module.ts new file mode 100644 index 0000000..fcfb25a --- /dev/null +++ b/src/app/modules/admin/dashboards/user/user.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { TranslocoModule } from '@ngneat/transloco'; +import { SharedModule } from 'app/shared/shared.module'; +import { UserComponent } from 'app/modules/admin/dashboards/user/user.component'; +import { userRoutes } from 'app/modules/admin/dashboards/user/user.routing'; + +@NgModule({ + declarations: [UserComponent], + imports: [TranslocoModule, SharedModule, RouterModule.forChild(userRoutes)], +}) +export class UserModule {} diff --git a/src/app/modules/admin/dashboards/user/user.resolvers.ts b/src/app/modules/admin/dashboards/user/user.resolvers.ts new file mode 100644 index 0000000..9eb80a0 --- /dev/null +++ b/src/app/modules/admin/dashboards/user/user.resolvers.ts @@ -0,0 +1,35 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + Resolve, + RouterStateSnapshot, +} from '@angular/router'; +import { Observable } from 'rxjs'; +import { UserService } from 'app/modules/admin/dashboards/user/user.service'; + +@Injectable({ + providedIn: 'root', +}) +export class UserResolver implements Resolve { + /** + * Constructor + */ + constructor(private _userService: UserService) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Resolver + * + * @param route + * @param state + */ + resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable { + return this._userService.getData(); + } +} diff --git a/src/app/modules/admin/dashboards/user/user.routing.ts b/src/app/modules/admin/dashboards/user/user.routing.ts new file mode 100644 index 0000000..cc1e4ec --- /dev/null +++ b/src/app/modules/admin/dashboards/user/user.routing.ts @@ -0,0 +1,13 @@ +import { Route } from '@angular/router'; +import { UserComponent } from 'app/modules/admin/dashboards/user/user.component'; +import { UserResolver } from 'app/modules/admin/dashboards/user/user.resolvers'; + +export const userRoutes: Route[] = [ + { + path: '', + component: UserComponent, + // resolve: { + // data: UserResolver, + // }, + }, +]; diff --git a/src/app/modules/admin/dashboards/user/user.service.ts b/src/app/modules/admin/dashboards/user/user.service.ts new file mode 100644 index 0000000..4f8f25f --- /dev/null +++ b/src/app/modules/admin/dashboards/user/user.service.ts @@ -0,0 +1,41 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { BehaviorSubject, Observable, tap } from 'rxjs'; + +@Injectable({ + providedIn: 'root', +}) +export class UserService { + private _data: BehaviorSubject = new BehaviorSubject(null); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for data + */ + get data$(): Observable { + return this._data.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get data + */ + getData(): Observable { + return this._httpClient.get('api/dashboards/user').pipe( + tap((response: any) => { + this._data.next(response); + }) + ); + } +} diff --git a/src/app/modules/admin/member/user/components/list.component.html b/src/app/modules/admin/member/user/components/list.component.html new file mode 100644 index 0000000..ef15ab7 --- /dev/null +++ b/src/app/modules/admin/member/user/components/list.component.html @@ -0,0 +1,200 @@ +
+ +
+ +
+ +
+ +
User
+ +
+ + + + + + + +
+
+ + +
+ +
+ + +
+ +
+
+ +
Name
+ + + + +
+ + + +
+ +
+
+ +
+ NO THUMB +
+
+
+ + + + + +
+ {{ user.name }} +
+ + + + + + + + + + + +
+ +
+
+
+
+
+ + +
+
+ + +
+ There are no user! +
+
+
+
+
diff --git a/src/app/modules/admin/member/user/components/list.component.ts b/src/app/modules/admin/member/user/components/list.component.ts new file mode 100644 index 0000000..21f2f5a --- /dev/null +++ b/src/app/modules/admin/member/user/components/list.component.ts @@ -0,0 +1,190 @@ +import { + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + OnDestroy, + OnInit, + ViewChild, + ViewEncapsulation, +} from '@angular/core'; +import { + FormBuilder, + FormControl, + FormGroup, + Validators, +} from '@angular/forms'; +import { MatCheckboxChange } from '@angular/material/checkbox'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; +import { + debounceTime, + map, + merge, + Observable, + Subject, + switchMap, + takeUntil, +} from 'rxjs'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseConfirmationService } from '@fuse/services/confirmation'; + +import { User } from '../models/user'; +import { UserPagination } from '../models/user-pagination'; +import { UserService } from '../services/user.service'; + +@Component({ + selector: 'user-list', + templateUrl: './list.component.html', + styles: [ + /* language=SCSS */ + ` + .inventory-grid { + grid-template-columns: 48px auto 40px; + + @screen sm { + grid-template-columns: 48px auto 112px 72px; + } + + @screen md { + grid-template-columns: 48px 112px auto 112px 72px; + } + + @screen lg { + grid-template-columns: 48px 112px auto 112px 96px 96px 72px; + } + } + `, + ], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + animations: fuseAnimations, +}) +export class ListComponent implements OnInit, AfterViewInit, OnDestroy { + @ViewChild(MatPaginator) private _paginator!: MatPaginator; + @ViewChild(MatSort) private _sort!: MatSort; + + users$!: Observable; + + isLoading = false; + searchInputControl = new FormControl(); + selectedUser?: User; + pagination?: UserPagination; + + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _changeDetectorRef: ChangeDetectorRef, + private _fuseConfirmationService: FuseConfirmationService, + private _formBuilder: FormBuilder, + private _userService: UserService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the pagination + this._userService.pagination$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((pagination: UserPagination | undefined) => { + // Update the pagination + this.pagination = pagination; + + // Mark for check + this._changeDetectorRef.markForCheck(); + }); + + // Get the products + this.users$ = this._userService.users$; + } + + /** + * After view init + */ + ngAfterViewInit(): void { + if (this._sort && this._paginator) { + // Set the initial sort + this._sort.sort({ + id: 'name', + start: 'asc', + disableClear: true, + }); + + // Mark for check + this._changeDetectorRef.markForCheck(); + + // If the user changes the sort order... + this._sort.sortChange + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Reset back to the first page + this._paginator.pageIndex = 0; + }); + + // Get products if sort or page changes + merge(this._sort.sortChange, this._paginator.page) + .pipe( + switchMap(() => { + this.isLoading = true; + return this._userService.getUsers( + this._paginator.pageIndex, + this._paginator.pageSize, + this._sort.active, + this._sort.direction + ); + }), + map(() => { + this.isLoading = false; + }) + ) + .subscribe(); + } + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Create product + */ + __createProduct(): void {} + + /** + * Toggle product details + * + * @param productId + */ + __toggleDetails(productId: string): void {} + + /** + * Track by function for ngFor loops + * + * @param index + * @param item + */ + __trackByFn(index: number, item: any): any { + return item.id || index; + } +} diff --git a/src/app/modules/admin/member/user/models/user-pagination.ts b/src/app/modules/admin/member/user/models/user-pagination.ts new file mode 100644 index 0000000..284847f --- /dev/null +++ b/src/app/modules/admin/member/user/models/user-pagination.ts @@ -0,0 +1,8 @@ +export interface UserPagination { + length: number; + size: number; + page: number; + lastPage: number; + startIndex: number; + endIndex: number; +} diff --git a/src/app/modules/admin/member/user/models/user.ts b/src/app/modules/admin/member/user/models/user.ts new file mode 100644 index 0000000..a36be40 --- /dev/null +++ b/src/app/modules/admin/member/user/models/user.ts @@ -0,0 +1,21 @@ +export interface User { + id: string; + category?: string; + name: string; + description?: string; + tags?: string[]; + sku?: string | null; + barcode?: string | null; + brand?: string | null; + vendor: string | null; + stock: number; + reserved: number; + cost: number; + basePrice: number; + taxPercent: number; + price: number; + weight: number; + thumbnail: string; + images: string[]; + active: boolean; +} diff --git a/src/app/modules/admin/member/user/resolvers/user.resolver.ts b/src/app/modules/admin/member/user/resolvers/user.resolver.ts new file mode 100644 index 0000000..24d00f4 --- /dev/null +++ b/src/app/modules/admin/member/user/resolvers/user.resolver.ts @@ -0,0 +1,84 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + Resolve, + Router, + RouterStateSnapshot, +} from '@angular/router'; +import { catchError, Observable, throwError } from 'rxjs'; + +import { User } from '../models/user'; +import { UserPagination } from '../models/user-pagination'; +import { UserService } from '../services/user.service'; + +@Injectable({ + providedIn: 'root', +}) +export class UserResolver implements Resolve { + /** + * Constructor + */ + constructor(private _userService: UserService, private _router: Router) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Resolver + * + * @param route + * @param state + */ + resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable { + return this._userService.getUserById(route.paramMap.get('id')).pipe( + // Error here means the requested product is not available + catchError((error) => { + // Log the error + console.error(error); + + // Get the parent url + const parentUrl = state.url.split('/').slice(0, -1).join('/'); + + // Navigate to there + this._router.navigateByUrl(parentUrl); + + // Throw an error + return throwError(error); + }) + ); + } +} + +@Injectable({ + providedIn: 'root', +}) +export class UsersResolver implements Resolve { + /** + * Constructor + */ + constructor(private _userService: UserService) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Resolver + * + * @param route + * @param state + */ + resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable<{ + pagination: UserPagination; + users: User[]; + }> { + return this._userService.getUsers(); + } +} diff --git a/src/app/modules/admin/member/user/services/user.service.ts b/src/app/modules/admin/member/user/services/user.service.ts new file mode 100644 index 0000000..06dde11 --- /dev/null +++ b/src/app/modules/admin/member/user/services/user.service.ts @@ -0,0 +1,151 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { + BehaviorSubject, + filter, + map, + Observable, + of, + switchMap, + take, + tap, + throwError, +} from 'rxjs'; + +import { User } from '../models/user'; +import { UserPagination } from '../models/user-pagination'; + +@Injectable({ + providedIn: 'root', +}) +export class UserService { + // Private + private __pagination = new BehaviorSubject( + undefined + ); + private __user = new BehaviorSubject(undefined); + private __users = new BehaviorSubject(undefined); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for pagination + */ + get pagination$(): Observable { + return this.__pagination.asObservable(); + } + + /** + * Getter for user + */ + get user$(): Observable { + return this.__user.asObservable(); + } + + /** + * Getter for users + */ + get users$(): Observable { + return this.__users.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get users + * + * + * @param page + * @param size + * @param sort + * @param order + * @param search + */ + getUsers( + page: number = 0, + size: number = 10, + sort: string = 'name', + order: 'asc' | 'desc' | '' = 'asc', + search: string = '' + ): Observable<{ + pagination: UserPagination; + users: User[]; + }> { + return this._httpClient + .get<{ pagination: UserPagination; users: User[] }>( + 'api/apps/member/user/users', + { + params: { + page: '' + page, + size: '' + size, + sort, + order, + search, + }, + } + ) + .pipe( + tap((response) => { + this.__pagination.next(response.pagination); + this.__users.next(response.users); + }) + ); + } + + /** + * Get product by id + */ + getUserById(id: string | null): Observable { + return this.__users.pipe( + take(1), + map((users) => { + // Find the product + const user = users?.find((item) => item.id === id) || undefined; + + // Update the product + this.__user.next(user); + + // Return the product + return user; + }), + switchMap((product) => { + if (!product) { + return throwError('Could not found product with id of ' + id + '!'); + } + + return of(product); + }) + ); + } + + /** + * Create product + */ + createUser(): Observable { + return this.users$.pipe( + take(1), + switchMap((users) => + this._httpClient.post('api/apps/member/user/product', {}).pipe( + map((newUser) => { + // Update the users with the new product + if (!!users) { + this.__users.next([newUser, ...users]); + } + + // Return the new product + return newUser; + }) + ) + ) + ); + } +} diff --git a/src/app/modules/admin/member/user/user.module.ts b/src/app/modules/admin/member/user/user.module.ts new file mode 100644 index 0000000..d59302f --- /dev/null +++ b/src/app/modules/admin/member/user/user.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatRippleModule } from '@angular/material/core'; +import { MatSortModule } from '@angular/material/sort'; + +import { TranslocoModule } from '@ngneat/transloco'; + +import { SharedModule } from 'app/shared/shared.module'; +import { ListComponent } from 'app/modules/admin/member/user/components/list.component'; +import { userRoutes } from 'app/modules/admin/member/user/user.routing'; + +@NgModule({ + declarations: [ListComponent], + imports: [ + TranslocoModule, + SharedModule, + RouterModule.forChild(userRoutes), + + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatPaginatorModule, + MatProgressBarModule, + MatRippleModule, + MatSortModule, + ], +}) +export class UserModule {} diff --git a/src/app/modules/admin/member/user/user.routing.ts b/src/app/modules/admin/member/user/user.routing.ts new file mode 100644 index 0000000..44e8dee --- /dev/null +++ b/src/app/modules/admin/member/user/user.routing.ts @@ -0,0 +1,15 @@ +import { Route } from '@angular/router'; + +import { ListComponent } from 'app/modules/admin/member/user/components/list.component'; + +import { UsersResolver } from './resolvers/user.resolver'; + +export const userRoutes: Route[] = [ + { + path: '', + component: ListComponent, + resolve: { + users: UsersResolver, + }, + }, +]; diff --git a/src/app/modules/auth/confirmation-required/confirmation-required.component.html b/src/app/modules/auth/confirmation-required/confirmation-required.component.html new file mode 100644 index 0000000..6f14913 --- /dev/null +++ b/src/app/modules/auth/confirmation-required/confirmation-required.component.html @@ -0,0 +1,120 @@ +
+
+
+ +
+ +
+ + +
+ Confirmation required +
+
+ A confirmation mail with instructions has been sent to your email + address. Follow those instructions to confirm your email address and + activate your account. +
+ + +
+ Return to + sign in + +
+
+
+ +
diff --git a/src/app/modules/auth/confirmation-required/confirmation-required.component.ts b/src/app/modules/auth/confirmation-required/confirmation-required.component.ts new file mode 100644 index 0000000..de59950 --- /dev/null +++ b/src/app/modules/auth/confirmation-required/confirmation-required.component.ts @@ -0,0 +1,15 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { fuseAnimations } from '@fuse/animations'; + +@Component({ + selector: 'auth-confirmation-required', + templateUrl: './confirmation-required.component.html', + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations, +}) +export class AuthConfirmationRequiredComponent { + /** + * Constructor + */ + constructor() {} +} diff --git a/src/app/modules/auth/confirmation-required/confirmation-required.module.ts b/src/app/modules/auth/confirmation-required/confirmation-required.module.ts new file mode 100644 index 0000000..9fd4eac --- /dev/null +++ b/src/app/modules/auth/confirmation-required/confirmation-required.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { FuseCardModule } from '@fuse/components/card'; +import { SharedModule } from 'app/shared/shared.module'; +import { AuthConfirmationRequiredComponent } from 'app/modules/auth/confirmation-required/confirmation-required.component'; +import { authConfirmationRequiredRoutes } from 'app/modules/auth/confirmation-required/confirmation-required.routing'; + +@NgModule({ + declarations: [AuthConfirmationRequiredComponent], + imports: [ + RouterModule.forChild(authConfirmationRequiredRoutes), + MatButtonModule, + FuseCardModule, + SharedModule, + ], +}) +export class AuthConfirmationRequiredModule {} diff --git a/src/app/modules/auth/confirmation-required/confirmation-required.routing.ts b/src/app/modules/auth/confirmation-required/confirmation-required.routing.ts new file mode 100644 index 0000000..d393d1e --- /dev/null +++ b/src/app/modules/auth/confirmation-required/confirmation-required.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { AuthConfirmationRequiredComponent } from 'app/modules/auth/confirmation-required/confirmation-required.component'; + +export const authConfirmationRequiredRoutes: Route[] = [ + { + path: '', + component: AuthConfirmationRequiredComponent, + }, +]; diff --git a/src/app/modules/auth/forgot-password/forgot-password.component.html b/src/app/modules/auth/forgot-password/forgot-password.component.html new file mode 100644 index 0000000..8432607 --- /dev/null +++ b/src/app/modules/auth/forgot-password/forgot-password.component.html @@ -0,0 +1,167 @@ +
+
+
+ +
+ +
+ + +
+ Forgot password? +
+
Fill the form to reset your password
+ + + + {{ alert.message }} + + + +
+ + + Email address + + + Email address is required + + + Please enter a valid email address + + + + + + + +
+ Return to + sign in + +
+
+
+
+ +
diff --git a/src/app/modules/auth/forgot-password/forgot-password.component.ts b/src/app/modules/auth/forgot-password/forgot-password.component.ts new file mode 100644 index 0000000..b1193bb --- /dev/null +++ b/src/app/modules/auth/forgot-password/forgot-password.component.ts @@ -0,0 +1,99 @@ +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; +import { finalize } from 'rxjs'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseAlertType } from '@fuse/components/alert'; +import { AuthService } from 'app/core/auth/auth.service'; + +@Component({ + selector: 'auth-forgot-password', + templateUrl: './forgot-password.component.html', + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations, +}) +export class AuthForgotPasswordComponent implements OnInit { + @ViewChild('forgotPasswordNgForm') forgotPasswordNgForm!: NgForm; + + alert: { type: FuseAlertType; message: string } = { + type: 'success', + message: '', + }; + forgotPasswordForm!: FormGroup; + showAlert: boolean = false; + + /** + * Constructor + */ + constructor( + private _authService: AuthService, + private _formBuilder: FormBuilder + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Create the form + this.forgotPasswordForm = this._formBuilder.group({ + email: ['', [Validators.required, Validators.email]], + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Send the reset link + */ + sendResetLink(): void { + // Return if the form is invalid + if (this.forgotPasswordForm?.invalid) { + return; + } + + // Disable the form + this.forgotPasswordForm?.disable(); + + // Hide the alert + this.showAlert = false; + + // Forgot password + this._authService + .forgotPassword(this.forgotPasswordForm?.get('email')?.value) + .pipe( + finalize(() => { + // Re-enable the form + this.forgotPasswordForm?.enable(); + + // Reset the form + this.forgotPasswordNgForm?.resetForm(); + + // Show the alert + this.showAlert = true; + }) + ) + .subscribe( + (response) => { + // Set the alert + this.alert = { + type: 'success', + message: + 'Password reset sent! You will receive an email if you are registered on our system.', + }; + }, + (response) => { + // Set the alert + this.alert = { + type: 'error', + message: + 'Email does not found! Are you sure you are already a member?', + }; + } + ); + } +} diff --git a/src/app/modules/auth/forgot-password/forgot-password.module.ts b/src/app/modules/auth/forgot-password/forgot-password.module.ts new file mode 100644 index 0000000..4136c82 --- /dev/null +++ b/src/app/modules/auth/forgot-password/forgot-password.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { FuseCardModule } from '@fuse/components/card'; +import { FuseAlertModule } from '@fuse/components/alert'; +import { SharedModule } from 'app/shared/shared.module'; +import { AuthForgotPasswordComponent } from 'app/modules/auth/forgot-password/forgot-password.component'; +import { authForgotPasswordRoutes } from 'app/modules/auth/forgot-password/forgot-password.routing'; + +@NgModule({ + declarations: [AuthForgotPasswordComponent], + imports: [ + RouterModule.forChild(authForgotPasswordRoutes), + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatProgressSpinnerModule, + FuseCardModule, + FuseAlertModule, + SharedModule, + ], +}) +export class AuthForgotPasswordModule {} diff --git a/src/app/modules/auth/forgot-password/forgot-password.routing.ts b/src/app/modules/auth/forgot-password/forgot-password.routing.ts new file mode 100644 index 0000000..081d43a --- /dev/null +++ b/src/app/modules/auth/forgot-password/forgot-password.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { AuthForgotPasswordComponent } from 'app/modules/auth/forgot-password/forgot-password.component'; + +export const authForgotPasswordRoutes: Route[] = [ + { + path: '', + component: AuthForgotPasswordComponent, + }, +]; diff --git a/src/app/modules/auth/reset-password/reset-password.component.html b/src/app/modules/auth/reset-password/reset-password.component.html new file mode 100644 index 0000000..f8564f1 --- /dev/null +++ b/src/app/modules/auth/reset-password/reset-password.component.html @@ -0,0 +1,236 @@ +
+
+
+ +
+ +
+ + +
+ Reset your password +
+
+ Create a new password for your account +
+ + + + {{ alert.message }} + + + +
+ + + Password + + + Password is required + + + + + Password (Confirm) + + + + Password confirmation is required + + + Passwords must match + + + + + + + +
+ Return to + sign in + +
+
+
+
+ +
diff --git a/src/app/modules/auth/reset-password/reset-password.component.ts b/src/app/modules/auth/reset-password/reset-password.component.ts new file mode 100644 index 0000000..b62155c --- /dev/null +++ b/src/app/modules/auth/reset-password/reset-password.component.ts @@ -0,0 +1,104 @@ +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; +import { finalize } from 'rxjs'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseValidators } from '@fuse/validators'; +import { FuseAlertType } from '@fuse/components/alert'; +import { AuthService } from 'app/core/auth/auth.service'; + +@Component({ + selector: 'auth-reset-password', + templateUrl: './reset-password.component.html', + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations, +}) +export class AuthResetPasswordComponent implements OnInit { + @ViewChild('resetPasswordNgForm') resetPasswordNgForm!: NgForm; + + alert: { type: FuseAlertType; message: string } = { + type: 'success', + message: '', + }; + resetPasswordForm!: FormGroup; + showAlert: boolean = false; + + /** + * Constructor + */ + constructor( + private _authService: AuthService, + private _formBuilder: FormBuilder + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Create the form + this.resetPasswordForm = this._formBuilder.group( + { + password: ['', Validators.required], + passwordConfirm: ['', Validators.required], + }, + { + validators: FuseValidators.mustMatch('password', 'passwordConfirm'), + } + ); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Reset password + */ + resetPassword(): void { + // Return if the form is invalid + if (this.resetPasswordForm?.invalid) { + return; + } + + // Disable the form + this.resetPasswordForm?.disable(); + + // Hide the alert + this.showAlert = false; + + // Send the request to the server + this._authService + .resetPassword(this.resetPasswordForm?.get('password')?.value) + .pipe( + finalize(() => { + // Re-enable the form + this.resetPasswordForm?.enable(); + + // Reset the form + this.resetPasswordNgForm?.resetForm(); + + // Show the alert + this.showAlert = true; + }) + ) + .subscribe( + (response) => { + // Set the alert + this.alert = { + type: 'success', + message: 'Your password has been reset.', + }; + }, + (response) => { + // Set the alert + this.alert = { + type: 'error', + message: 'Something went wrong, please try again.', + }; + } + ); + } +} diff --git a/src/app/modules/auth/reset-password/reset-password.module.ts b/src/app/modules/auth/reset-password/reset-password.module.ts new file mode 100644 index 0000000..1af3db5 --- /dev/null +++ b/src/app/modules/auth/reset-password/reset-password.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { FuseCardModule } from '@fuse/components/card'; +import { FuseAlertModule } from '@fuse/components/alert'; +import { SharedModule } from 'app/shared/shared.module'; +import { AuthResetPasswordComponent } from 'app/modules/auth/reset-password/reset-password.component'; +import { authResetPasswordRoutes } from 'app/modules/auth/reset-password/reset-password.routing'; + +@NgModule({ + declarations: [AuthResetPasswordComponent], + imports: [ + RouterModule.forChild(authResetPasswordRoutes), + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatProgressSpinnerModule, + FuseCardModule, + FuseAlertModule, + SharedModule, + ], +}) +export class AuthResetPasswordModule {} diff --git a/src/app/modules/auth/reset-password/reset-password.routing.ts b/src/app/modules/auth/reset-password/reset-password.routing.ts new file mode 100644 index 0000000..29b8425 --- /dev/null +++ b/src/app/modules/auth/reset-password/reset-password.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { AuthResetPasswordComponent } from 'app/modules/auth/reset-password/reset-password.component'; + +export const authResetPasswordRoutes: Route[] = [ + { + path: '', + component: AuthResetPasswordComponent, + }, +]; diff --git a/src/app/modules/auth/sign-in/sign-in.component.html b/src/app/modules/auth/sign-in/sign-in.component.html new file mode 100644 index 0000000..36812c8 --- /dev/null +++ b/src/app/modules/auth/sign-in/sign-in.component.html @@ -0,0 +1,231 @@ +
+
+
+ +
+ +
+ + +
+ Sign in +
+
+
Don't have an account?
+ Sign up + +
+ + + + {{ alert.message }} + + + +
+ + + Email address + + + Email address is required + + + Please enter a valid email address + + + + + + Password + + + Password is required + + + +
+ + Remember me + + Forgot password? + +
+ + + + + +
+
+
Or continue with
+
+
+ + +
+ + + +
+
+
+
+ +
diff --git a/src/app/modules/auth/sign-in/sign-in.component.ts b/src/app/modules/auth/sign-in/sign-in.component.ts new file mode 100644 index 0000000..b84ddd9 --- /dev/null +++ b/src/app/modules/auth/sign-in/sign-in.component.ts @@ -0,0 +1,104 @@ +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseAlertType } from '@fuse/components/alert'; +import { AuthService } from 'app/core/auth/auth.service'; + +@Component({ + selector: 'auth-sign-in', + templateUrl: './sign-in.component.html', + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations, +}) +export class AuthSignInComponent implements OnInit { + @ViewChild('signInNgForm') signInNgForm!: NgForm; + + alert: { type: FuseAlertType; message: string } = { + type: 'success', + message: '', + }; + signInForm!: FormGroup; + showAlert: boolean = false; + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _authService: AuthService, + private _formBuilder: FormBuilder, + private _router: Router + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Create the form + this.signInForm = this._formBuilder.group({ + email: [ + 'hughes.brian@company.com', + [Validators.required, Validators.email], + ], + password: ['admin', Validators.required], + rememberMe: [''], + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Sign in + */ + signIn(): void { + // Return if the form is invalid + if (this.signInForm?.invalid) { + return; + } + + // Disable the form + this.signInForm?.disable(); + + // Hide the alert + this.showAlert = false; + + // Sign in + this._authService.signIn(this.signInForm?.value).subscribe( + () => { + // Set the redirect url. + // The '/signed-in-redirect' is a dummy url to catch the request and redirect the user + // to the correct page after a successful sign in. This way, that url can be set via + // routing file and we don't have to touch here. + const redirectURL = + this._activatedRoute.snapshot.queryParamMap.get('redirectURL') || + '/signed-in-redirect'; + + // Navigate to the redirect url + this._router.navigateByUrl(redirectURL); + }, + (response) => { + // Re-enable the form + this.signInForm?.enable(); + + // Reset the form + this.signInNgForm?.resetForm(); + + // Set the alert + this.alert = { + type: 'error', + message: 'Wrong email or password', + }; + + // Show the alert + this.showAlert = true; + } + ); + } +} diff --git a/src/app/modules/auth/sign-in/sign-in.module.ts b/src/app/modules/auth/sign-in/sign-in.module.ts new file mode 100644 index 0000000..c2630aa --- /dev/null +++ b/src/app/modules/auth/sign-in/sign-in.module.ts @@ -0,0 +1,30 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { FuseCardModule } from '@fuse/components/card'; +import { FuseAlertModule } from '@fuse/components/alert'; +import { SharedModule } from 'app/shared/shared.module'; +import { AuthSignInComponent } from 'app/modules/auth/sign-in/sign-in.component'; +import { authSignInRoutes } from 'app/modules/auth/sign-in/sign-in.routing'; + +@NgModule({ + declarations: [AuthSignInComponent], + imports: [ + RouterModule.forChild(authSignInRoutes), + MatButtonModule, + MatCheckboxModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatProgressSpinnerModule, + FuseCardModule, + FuseAlertModule, + SharedModule, + ], +}) +export class AuthSignInModule {} diff --git a/src/app/modules/auth/sign-in/sign-in.routing.ts b/src/app/modules/auth/sign-in/sign-in.routing.ts new file mode 100644 index 0000000..81d8c26 --- /dev/null +++ b/src/app/modules/auth/sign-in/sign-in.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { AuthSignInComponent } from 'app/modules/auth/sign-in/sign-in.component'; + +export const authSignInRoutes: Route[] = [ + { + path: '', + component: AuthSignInComponent, + }, +]; diff --git a/src/app/modules/auth/sign-out/sign-out.component.html b/src/app/modules/auth/sign-out/sign-out.component.html new file mode 100644 index 0000000..178c110 --- /dev/null +++ b/src/app/modules/auth/sign-out/sign-out.component.html @@ -0,0 +1,40 @@ +
+
+
+ +
+ +
+ + +
+ You have signed out! +
+
+ + + Redirecting in {{ countdown | i18nPlural: countdownMapping }} + + + + + You are now being redirected! + +
+ + +
+ Go to + sign in + +
+
+
+
diff --git a/src/app/modules/auth/sign-out/sign-out.component.ts b/src/app/modules/auth/sign-out/sign-out.component.ts new file mode 100644 index 0000000..af43fa5 --- /dev/null +++ b/src/app/modules/auth/sign-out/sign-out.component.ts @@ -0,0 +1,57 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Router } from '@angular/router'; +import { finalize, Subject, takeUntil, takeWhile, tap, timer } from 'rxjs'; +import { AuthService } from 'app/core/auth/auth.service'; + +@Component({ + selector: 'auth-sign-out', + templateUrl: './sign-out.component.html', + encapsulation: ViewEncapsulation.None, +}) +export class AuthSignOutComponent implements OnInit, OnDestroy { + countdown: number = 5; + countdownMapping: any = { + '=1': '# second', + // eslint-disable-next-line quote-props + other: '# seconds', + }; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor(private _authService: AuthService, private _router: Router) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Sign out + this._authService.signOut(); + + // Redirect after the countdown + timer(1000, 1000) + .pipe( + finalize(() => { + this._router.navigate(['sign-in']); + }), + takeWhile(() => this.countdown > 0), + takeUntil(this._unsubscribeAll), + tap(() => this.countdown--) + ) + .subscribe(); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(null); + this._unsubscribeAll.complete(); + } +} diff --git a/src/app/modules/auth/sign-out/sign-out.module.ts b/src/app/modules/auth/sign-out/sign-out.module.ts new file mode 100644 index 0000000..371748b --- /dev/null +++ b/src/app/modules/auth/sign-out/sign-out.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { FuseCardModule } from '@fuse/components/card'; +import { SharedModule } from 'app/shared/shared.module'; +import { AuthSignOutComponent } from 'app/modules/auth/sign-out/sign-out.component'; +import { authSignOutRoutes } from 'app/modules/auth/sign-out/sign-out.routing'; + +@NgModule({ + declarations: [AuthSignOutComponent], + imports: [ + RouterModule.forChild(authSignOutRoutes), + MatButtonModule, + FuseCardModule, + SharedModule, + ], +}) +export class AuthSignOutModule {} diff --git a/src/app/modules/auth/sign-out/sign-out.routing.ts b/src/app/modules/auth/sign-out/sign-out.routing.ts new file mode 100644 index 0000000..e2478ee --- /dev/null +++ b/src/app/modules/auth/sign-out/sign-out.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { AuthSignOutComponent } from 'app/modules/auth/sign-out/sign-out.component'; + +export const authSignOutRoutes: Route[] = [ + { + path: '', + component: AuthSignOutComponent, + }, +]; diff --git a/src/app/modules/auth/sign-up/sign-up.component.html b/src/app/modules/auth/sign-up/sign-up.component.html new file mode 100644 index 0000000..4eaf1e2 --- /dev/null +++ b/src/app/modules/auth/sign-up/sign-up.component.html @@ -0,0 +1,223 @@ +
+
+
+ +
+ +
+ + +
+ Sign up +
+
+
Already have an account?
+ Sign in + +
+ + + + {{ alert.message }} + + + +
+ + + Full name + + + Full name is required + + + + + + Email address + + + Email address is required + + + Please enter a valid email address + + + + + + Password + + + Password is required + + + + + Company + + + + +
+ + I agree to the + Terms of Service + + and + Privacy Policy + + +
+ + + +
+
+
+ +
diff --git a/src/app/modules/auth/sign-up/sign-up.component.ts b/src/app/modules/auth/sign-up/sign-up.component.ts new file mode 100644 index 0000000..dece098 --- /dev/null +++ b/src/app/modules/auth/sign-up/sign-up.component.ts @@ -0,0 +1,94 @@ +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseAlertType } from '@fuse/components/alert'; +import { AuthService } from 'app/core/auth/auth.service'; + +@Component({ + selector: 'auth-sign-up', + templateUrl: './sign-up.component.html', + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations, +}) +export class AuthSignUpComponent implements OnInit { + @ViewChild('signUpNgForm') signUpNgForm!: NgForm; + + alert: { type: FuseAlertType; message: string } = { + type: 'success', + message: '', + }; + signUpForm!: FormGroup; + showAlert: boolean = false; + + /** + * Constructor + */ + constructor( + private _authService: AuthService, + private _formBuilder: FormBuilder, + private _router: Router + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Create the form + this.signUpForm = this._formBuilder.group({ + name: ['', Validators.required], + email: ['', [Validators.required, Validators.email]], + password: ['', Validators.required], + company: [''], + agreements: ['', Validators.requiredTrue], + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Sign up + */ + signUp(): void { + // Do nothing if the form is invalid + if (this.signUpForm?.invalid) { + return; + } + + // Disable the form + this.signUpForm?.disable(); + + // Hide the alert + this.showAlert = false; + + // Sign up + this._authService.signUp(this.signUpForm?.value).subscribe( + (response) => { + // Navigate to the confirmation required page + this._router.navigateByUrl('/confirmation-required'); + }, + (response) => { + // Re-enable the form + this.signUpForm?.enable(); + + // Reset the form + this.signUpNgForm?.resetForm(); + + // Set the alert + this.alert = { + type: 'error', + message: 'Something went wrong, please try again.', + }; + + // Show the alert + this.showAlert = true; + } + ); + } +} diff --git a/src/app/modules/auth/sign-up/sign-up.module.ts b/src/app/modules/auth/sign-up/sign-up.module.ts new file mode 100644 index 0000000..67d4c9d --- /dev/null +++ b/src/app/modules/auth/sign-up/sign-up.module.ts @@ -0,0 +1,30 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { FuseCardModule } from '@fuse/components/card'; +import { FuseAlertModule } from '@fuse/components/alert'; +import { SharedModule } from 'app/shared/shared.module'; +import { AuthSignUpComponent } from 'app/modules/auth/sign-up/sign-up.component'; +import { authSignupRoutes } from 'app/modules/auth/sign-up/sign-up.routing'; + +@NgModule({ + declarations: [AuthSignUpComponent], + imports: [ + RouterModule.forChild(authSignupRoutes), + MatButtonModule, + MatCheckboxModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatProgressSpinnerModule, + FuseCardModule, + FuseAlertModule, + SharedModule, + ], +}) +export class AuthSignUpModule {} diff --git a/src/app/modules/auth/sign-up/sign-up.routing.ts b/src/app/modules/auth/sign-up/sign-up.routing.ts new file mode 100644 index 0000000..59b622b --- /dev/null +++ b/src/app/modules/auth/sign-up/sign-up.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { AuthSignUpComponent } from 'app/modules/auth/sign-up/sign-up.component'; + +export const authSignupRoutes: Route[] = [ + { + path: '', + component: AuthSignUpComponent, + }, +]; diff --git a/src/app/modules/auth/unlock-session/unlock-session.component.html b/src/app/modules/auth/unlock-session/unlock-session.component.html new file mode 100644 index 0000000..0ee1678 --- /dev/null +++ b/src/app/modules/auth/unlock-session/unlock-session.component.html @@ -0,0 +1,195 @@ +
+
+
+ +
+ +
+ + +
+ Unlock your session +
+
+ Your session is locked due to inactivity +
+ + + + {{ alert.message }} + + + +
+ + + Full name + + + + + + Password + + + Password is required + + + + + + +
+ I'm not + {{ name }} +
+
+
+
+ +
diff --git a/src/app/modules/auth/unlock-session/unlock-session.component.ts b/src/app/modules/auth/unlock-session/unlock-session.component.ts new file mode 100644 index 0000000..c0f21af --- /dev/null +++ b/src/app/modules/auth/unlock-session/unlock-session.component.ts @@ -0,0 +1,124 @@ +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { fuseAnimations } from '@fuse/animations'; +import { AuthService } from 'app/core/auth/auth.service'; +import { UserService } from 'app/core/user/user.service'; +import { FuseAlertType } from '@fuse/components/alert'; + +@Component({ + selector: 'auth-unlock-session', + templateUrl: './unlock-session.component.html', + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations, +}) +export class AuthUnlockSessionComponent implements OnInit { + @ViewChild('unlockSessionNgForm') unlockSessionNgForm!: NgForm; + + alert: { type: FuseAlertType; message: string } = { + type: 'success', + message: '', + }; + name?: string; + showAlert: boolean = false; + unlockSessionForm!: FormGroup; + private _email?: string; + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _authService: AuthService, + private _formBuilder: FormBuilder, + private _router: Router, + private _userService: UserService + ) {} + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Get the user's name + this._userService.user$.subscribe((user) => { + this.name = user.name; + this._email = user.email; + }); + + // Create the form + this.unlockSessionForm = this._formBuilder.group({ + name: [ + { + value: this.name, + disabled: true, + }, + ], + password: ['', Validators.required], + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Unlock + */ + unlock(): void { + // Return if the form is invalid + if (this.unlockSessionForm?.invalid) { + return; + } + + // Disable the form + this.unlockSessionForm?.disable(); + + // Hide the alert + this.showAlert = false; + + this._authService + .unlockSession({ + email: this._email ?? '', + password: this.unlockSessionForm?.get('password')?.value, + }) + .subscribe( + () => { + // Set the redirect url. + // The '/signed-in-redirect' is a dummy url to catch the request and redirect the user + // to the correct page after a successful sign in. This way, that url can be set via + // routing file and we don't have to touch here. + const redirectURL = + this._activatedRoute.snapshot.queryParamMap.get('redirectURL') || + '/signed-in-redirect'; + + // Navigate to the redirect url + this._router.navigateByUrl(redirectURL); + }, + (response) => { + // Re-enable the form + this.unlockSessionForm?.enable(); + + // Reset the form + this.unlockSessionNgForm?.resetForm({ + name: { + value: this.name, + disabled: true, + }, + }); + + // Set the alert + this.alert = { + type: 'error', + message: 'Invalid password', + }; + + // Show the alert + this.showAlert = true; + } + ); + } +} diff --git a/src/app/modules/auth/unlock-session/unlock-session.module.ts b/src/app/modules/auth/unlock-session/unlock-session.module.ts new file mode 100644 index 0000000..c3dff91 --- /dev/null +++ b/src/app/modules/auth/unlock-session/unlock-session.module.ts @@ -0,0 +1,32 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { FuseCardModule } from '@fuse/components/card'; +import { FuseAlertModule } from '@fuse/components/alert'; +import { SharedModule } from 'app/shared/shared.module'; +import { AuthUnlockSessionComponent } from 'app/modules/auth/unlock-session/unlock-session.component'; +import { authUnlockSessionRoutes } from 'app/modules/auth/unlock-session/unlock-session.routing'; + +@NgModule({ + declarations: [ + AuthUnlockSessionComponent + ], + imports : [ + RouterModule.forChild(authUnlockSessionRoutes), + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatProgressSpinnerModule, + FuseCardModule, + FuseAlertModule, + SharedModule + ] +}) +export class AuthUnlockSessionModule +{ +} diff --git a/src/app/modules/auth/unlock-session/unlock-session.routing.ts b/src/app/modules/auth/unlock-session/unlock-session.routing.ts new file mode 100644 index 0000000..76bfafa --- /dev/null +++ b/src/app/modules/auth/unlock-session/unlock-session.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { AuthUnlockSessionComponent } from 'app/modules/auth/unlock-session/unlock-session.component'; + +export const authUnlockSessionRoutes: Route[] = [ + { + path: '', + component: AuthUnlockSessionComponent, + }, +]; diff --git a/src/app/modules/landing/home/home.component.html b/src/app/modules/landing/home/home.component.html new file mode 100644 index 0000000..96f37c6 --- /dev/null +++ b/src/app/modules/landing/home/home.component.html @@ -0,0 +1,35 @@ +
+
+
+ Logo image +

Landing Module

+

+ This can be the landing or the welcome page of your application. If you + have an SSR (Server Side Rendering) setup, or if you don't need to have + Search engine visibility and optimizations, you can even use this page + as your primary landing page. +

+

+ This is a separate "module", it has its own directory and routing setup + and also it's completely separated from the actual application. This is + also a simple example of a multiple applications setup that uses the + same codebase. You can have different entry points and essentially have + different applications within the same codebase. +

+
+ +
+
diff --git a/src/app/modules/landing/home/home.component.ts b/src/app/modules/landing/home/home.component.ts new file mode 100644 index 0000000..bbbd599 --- /dev/null +++ b/src/app/modules/landing/home/home.component.ts @@ -0,0 +1,16 @@ +import { Component, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector : 'landing-home', + templateUrl : './home.component.html', + encapsulation: ViewEncapsulation.None +}) +export class LandingHomeComponent +{ + /** + * Constructor + */ + constructor() + { + } +} diff --git a/src/app/modules/landing/home/home.module.ts b/src/app/modules/landing/home/home.module.ts new file mode 100644 index 0000000..678e80f --- /dev/null +++ b/src/app/modules/landing/home/home.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { SharedModule } from 'app/shared/shared.module'; +import { LandingHomeComponent } from 'app/modules/landing/home/home.component'; +import { landingHomeRoutes } from 'app/modules/landing/home/home.routing'; + +@NgModule({ + declarations: [LandingHomeComponent], + imports: [ + RouterModule.forChild(landingHomeRoutes), + MatButtonModule, + MatIconModule, + SharedModule, + ], +}) +export class LandingHomeModule {} diff --git a/src/app/modules/landing/home/home.routing.ts b/src/app/modules/landing/home/home.routing.ts new file mode 100644 index 0000000..5ad3b65 --- /dev/null +++ b/src/app/modules/landing/home/home.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { LandingHomeComponent } from 'app/modules/landing/home/home.component'; + +export const landingHomeRoutes: Route[] = [ + { + path: '', + component: LandingHomeComponent, + }, +]; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts new file mode 100644 index 0000000..c0f6e6c --- /dev/null +++ b/src/app/shared/shared.module.ts @@ -0,0 +1,9 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; + +@NgModule({ + imports: [CommonModule, FormsModule, ReactiveFormsModule], + exports: [CommonModule, FormsModule, ReactiveFormsModule], +}) +export class SharedModule {} diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep new file mode 100755 index 0000000..e69de29 diff --git a/src/assets/fonts/inter/Inter-italic.var.woff2 b/src/assets/fonts/inter/Inter-italic.var.woff2 new file mode 100644 index 0000000..0387531 Binary files /dev/null and b/src/assets/fonts/inter/Inter-italic.var.woff2 differ diff --git a/src/assets/fonts/inter/Inter-roman.var.woff2 b/src/assets/fonts/inter/Inter-roman.var.woff2 new file mode 100644 index 0000000..a6efdc4 Binary files /dev/null and b/src/assets/fonts/inter/Inter-roman.var.woff2 differ diff --git a/src/assets/fonts/inter/inter.css b/src/assets/fonts/inter/inter.css new file mode 100644 index 0000000..3294b01 --- /dev/null +++ b/src/assets/fonts/inter/inter.css @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url("Inter-roman.var.woff2?v=3.18") format("woff2"); +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url("Inter-italic.var.woff2?v=3.18") format("woff2"); +} diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json new file mode 100644 index 0000000..d57bb4a --- /dev/null +++ b/src/assets/i18n/en.json @@ -0,0 +1,5 @@ +{ + "welcome-back": "Welcome back", + "Project": "Project", + "Analytics": "Analytics" +} diff --git a/src/assets/i18n/ko.json b/src/assets/i18n/ko.json new file mode 100644 index 0000000..6e6821d --- /dev/null +++ b/src/assets/i18n/ko.json @@ -0,0 +1,9 @@ +{ + "welcome-back": "Welcome back", + "Dashboards": "대쉬보드", + "Member": "회원", + "User": "사용자", + "Project": "프로젝트", + "Partner": "파트너", + "Analytics": "Analytics" +} diff --git a/src/assets/i18n/tr.json b/src/assets/i18n/tr.json new file mode 100644 index 0000000..3f590cd --- /dev/null +++ b/src/assets/i18n/tr.json @@ -0,0 +1,5 @@ +{ + "welcome-back": "Hoşgeldin", + "Project": "Proje", + "Analytics": "Analitik" +} diff --git a/src/assets/icons/feather.svg b/src/assets/icons/feather.svg new file mode 100644 index 0000000..33e28af --- /dev/null +++ b/src/assets/icons/feather.svg @@ -0,0 +1,4310 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/heroicons-outline.svg b/src/assets/icons/heroicons-outline.svg new file mode 100644 index 0000000..ffcb0f4 --- /dev/null +++ b/src/assets/icons/heroicons-outline.svg @@ -0,0 +1,707 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/heroicons-solid.svg b/src/assets/icons/heroicons-solid.svg new file mode 100644 index 0000000..0b9c1ad --- /dev/null +++ b/src/assets/icons/heroicons-solid.svg @@ -0,0 +1,738 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/iconsmind.svg b/src/assets/icons/iconsmind.svg new file mode 100755 index 0000000..9b62ec4 --- /dev/null +++ b/src/assets/icons/iconsmind.svg @@ -0,0 +1,29079 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/material-outline.svg b/src/assets/icons/material-outline.svg new file mode 100644 index 0000000..d378c92 --- /dev/null +++ b/src/assets/icons/material-outline.svg @@ -0,0 +1,3586 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/material-solid.svg b/src/assets/icons/material-solid.svg new file mode 100644 index 0000000..b8c8fe3 --- /dev/null +++ b/src/assets/icons/material-solid.svg @@ -0,0 +1,3586 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +Asset 1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +ic_edit_off_24px + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +ic_recommend_24px + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +ic_dialer_rtt_revised_24px + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/material-twotone.svg b/src/assets/icons/material-twotone.svg new file mode 100644 index 0000000..70f1814 --- /dev/null +++ b/src/assets/icons/material-twotone.svg @@ -0,0 +1,3586 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/avatars/brian-hughes.jpg b/src/assets/images/avatars/brian-hughes.jpg new file mode 100755 index 0000000..5abb9cb Binary files /dev/null and b/src/assets/images/avatars/brian-hughes.jpg differ diff --git a/src/assets/images/avatars/female-01.jpg b/src/assets/images/avatars/female-01.jpg new file mode 100755 index 0000000..0d6a700 Binary files /dev/null and b/src/assets/images/avatars/female-01.jpg differ diff --git a/src/assets/images/avatars/female-02.jpg b/src/assets/images/avatars/female-02.jpg new file mode 100755 index 0000000..179005a Binary files /dev/null and b/src/assets/images/avatars/female-02.jpg differ diff --git a/src/assets/images/avatars/female-03.jpg b/src/assets/images/avatars/female-03.jpg new file mode 100755 index 0000000..7a2263d Binary files /dev/null and b/src/assets/images/avatars/female-03.jpg differ diff --git a/src/assets/images/avatars/female-04.jpg b/src/assets/images/avatars/female-04.jpg new file mode 100755 index 0000000..9bf6d23 Binary files /dev/null and b/src/assets/images/avatars/female-04.jpg differ diff --git a/src/assets/images/avatars/female-05.jpg b/src/assets/images/avatars/female-05.jpg new file mode 100755 index 0000000..da7274e Binary files /dev/null and b/src/assets/images/avatars/female-05.jpg differ diff --git a/src/assets/images/avatars/female-06.jpg b/src/assets/images/avatars/female-06.jpg new file mode 100755 index 0000000..a3b4fd7 Binary files /dev/null and b/src/assets/images/avatars/female-06.jpg differ diff --git a/src/assets/images/avatars/female-07.jpg b/src/assets/images/avatars/female-07.jpg new file mode 100755 index 0000000..c151118 Binary files /dev/null and b/src/assets/images/avatars/female-07.jpg differ diff --git a/src/assets/images/avatars/female-08.jpg b/src/assets/images/avatars/female-08.jpg new file mode 100755 index 0000000..319d9b9 Binary files /dev/null and b/src/assets/images/avatars/female-08.jpg differ diff --git a/src/assets/images/avatars/female-09.jpg b/src/assets/images/avatars/female-09.jpg new file mode 100755 index 0000000..48e1c78 Binary files /dev/null and b/src/assets/images/avatars/female-09.jpg differ diff --git a/src/assets/images/avatars/female-10.jpg b/src/assets/images/avatars/female-10.jpg new file mode 100755 index 0000000..dc272f6 Binary files /dev/null and b/src/assets/images/avatars/female-10.jpg differ diff --git a/src/assets/images/avatars/female-11.jpg b/src/assets/images/avatars/female-11.jpg new file mode 100755 index 0000000..f14d50d Binary files /dev/null and b/src/assets/images/avatars/female-11.jpg differ diff --git a/src/assets/images/avatars/female-12.jpg b/src/assets/images/avatars/female-12.jpg new file mode 100755 index 0000000..ab9dfa6 Binary files /dev/null and b/src/assets/images/avatars/female-12.jpg differ diff --git a/src/assets/images/avatars/female-13.jpg b/src/assets/images/avatars/female-13.jpg new file mode 100755 index 0000000..950e157 Binary files /dev/null and b/src/assets/images/avatars/female-13.jpg differ diff --git a/src/assets/images/avatars/female-14.jpg b/src/assets/images/avatars/female-14.jpg new file mode 100755 index 0000000..cdd6638 Binary files /dev/null and b/src/assets/images/avatars/female-14.jpg differ diff --git a/src/assets/images/avatars/female-15.jpg b/src/assets/images/avatars/female-15.jpg new file mode 100755 index 0000000..e8a3efe Binary files /dev/null and b/src/assets/images/avatars/female-15.jpg differ diff --git a/src/assets/images/avatars/female-16.jpg b/src/assets/images/avatars/female-16.jpg new file mode 100755 index 0000000..f697340 Binary files /dev/null and b/src/assets/images/avatars/female-16.jpg differ diff --git a/src/assets/images/avatars/female-17.jpg b/src/assets/images/avatars/female-17.jpg new file mode 100755 index 0000000..5753fe4 Binary files /dev/null and b/src/assets/images/avatars/female-17.jpg differ diff --git a/src/assets/images/avatars/female-18.jpg b/src/assets/images/avatars/female-18.jpg new file mode 100755 index 0000000..be2a702 Binary files /dev/null and b/src/assets/images/avatars/female-18.jpg differ diff --git a/src/assets/images/avatars/female-19.jpg b/src/assets/images/avatars/female-19.jpg new file mode 100755 index 0000000..44ac8e0 Binary files /dev/null and b/src/assets/images/avatars/female-19.jpg differ diff --git a/src/assets/images/avatars/female-20.jpg b/src/assets/images/avatars/female-20.jpg new file mode 100755 index 0000000..f998071 Binary files /dev/null and b/src/assets/images/avatars/female-20.jpg differ diff --git a/src/assets/images/avatars/male-01.jpg b/src/assets/images/avatars/male-01.jpg new file mode 100755 index 0000000..dd0b05b Binary files /dev/null and b/src/assets/images/avatars/male-01.jpg differ diff --git a/src/assets/images/avatars/male-02.jpg b/src/assets/images/avatars/male-02.jpg new file mode 100755 index 0000000..a1c5fef Binary files /dev/null and b/src/assets/images/avatars/male-02.jpg differ diff --git a/src/assets/images/avatars/male-03.jpg b/src/assets/images/avatars/male-03.jpg new file mode 100755 index 0000000..0b5d1f1 Binary files /dev/null and b/src/assets/images/avatars/male-03.jpg differ diff --git a/src/assets/images/avatars/male-04.jpg b/src/assets/images/avatars/male-04.jpg new file mode 100755 index 0000000..5abb9cb Binary files /dev/null and b/src/assets/images/avatars/male-04.jpg differ diff --git a/src/assets/images/avatars/male-05.jpg b/src/assets/images/avatars/male-05.jpg new file mode 100755 index 0000000..e7b19d7 Binary files /dev/null and b/src/assets/images/avatars/male-05.jpg differ diff --git a/src/assets/images/avatars/male-06.jpg b/src/assets/images/avatars/male-06.jpg new file mode 100755 index 0000000..fdaaf3c Binary files /dev/null and b/src/assets/images/avatars/male-06.jpg differ diff --git a/src/assets/images/avatars/male-07.jpg b/src/assets/images/avatars/male-07.jpg new file mode 100755 index 0000000..55ea470 Binary files /dev/null and b/src/assets/images/avatars/male-07.jpg differ diff --git a/src/assets/images/avatars/male-08.jpg b/src/assets/images/avatars/male-08.jpg new file mode 100755 index 0000000..7a4eaa0 Binary files /dev/null and b/src/assets/images/avatars/male-08.jpg differ diff --git a/src/assets/images/avatars/male-09.jpg b/src/assets/images/avatars/male-09.jpg new file mode 100755 index 0000000..14e3fe3 Binary files /dev/null and b/src/assets/images/avatars/male-09.jpg differ diff --git a/src/assets/images/avatars/male-10.jpg b/src/assets/images/avatars/male-10.jpg new file mode 100755 index 0000000..beeb6fb Binary files /dev/null and b/src/assets/images/avatars/male-10.jpg differ diff --git a/src/assets/images/avatars/male-11.jpg b/src/assets/images/avatars/male-11.jpg new file mode 100755 index 0000000..7da7ce6 Binary files /dev/null and b/src/assets/images/avatars/male-11.jpg differ diff --git a/src/assets/images/avatars/male-12.jpg b/src/assets/images/avatars/male-12.jpg new file mode 100755 index 0000000..a6712de Binary files /dev/null and b/src/assets/images/avatars/male-12.jpg differ diff --git a/src/assets/images/avatars/male-13.jpg b/src/assets/images/avatars/male-13.jpg new file mode 100755 index 0000000..6af7b6b Binary files /dev/null and b/src/assets/images/avatars/male-13.jpg differ diff --git a/src/assets/images/avatars/male-14.jpg b/src/assets/images/avatars/male-14.jpg new file mode 100755 index 0000000..d04d3d6 Binary files /dev/null and b/src/assets/images/avatars/male-14.jpg differ diff --git a/src/assets/images/avatars/male-15.jpg b/src/assets/images/avatars/male-15.jpg new file mode 100755 index 0000000..fd8ecd2 Binary files /dev/null and b/src/assets/images/avatars/male-15.jpg differ diff --git a/src/assets/images/avatars/male-16.jpg b/src/assets/images/avatars/male-16.jpg new file mode 100755 index 0000000..b2c063b Binary files /dev/null and b/src/assets/images/avatars/male-16.jpg differ diff --git a/src/assets/images/avatars/male-17.jpg b/src/assets/images/avatars/male-17.jpg new file mode 100755 index 0000000..41ffcbc Binary files /dev/null and b/src/assets/images/avatars/male-17.jpg differ diff --git a/src/assets/images/avatars/male-18.jpg b/src/assets/images/avatars/male-18.jpg new file mode 100755 index 0000000..60ee45f Binary files /dev/null and b/src/assets/images/avatars/male-18.jpg differ diff --git a/src/assets/images/avatars/male-19.jpg b/src/assets/images/avatars/male-19.jpg new file mode 100755 index 0000000..7853dbd Binary files /dev/null and b/src/assets/images/avatars/male-19.jpg differ diff --git a/src/assets/images/avatars/male-20.jpg b/src/assets/images/avatars/male-20.jpg new file mode 100755 index 0000000..c33807a Binary files /dev/null and b/src/assets/images/avatars/male-20.jpg differ diff --git a/src/assets/images/flags/KR.svg b/src/assets/images/flags/KR.svg new file mode 100644 index 0000000..dadc25d --- /dev/null +++ b/src/assets/images/flags/KR.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/flags/TR.svg b/src/assets/images/flags/TR.svg new file mode 100644 index 0000000..f092549 --- /dev/null +++ b/src/assets/images/flags/TR.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/images/flags/US.svg b/src/assets/images/flags/US.svg new file mode 100644 index 0000000..847c732 --- /dev/null +++ b/src/assets/images/flags/US.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/flags/where-to-find-other-flags.txt b/src/assets/images/flags/where-to-find-other-flags.txt new file mode 100644 index 0000000..dcee53a --- /dev/null +++ b/src/assets/images/flags/where-to-find-other-flags.txt @@ -0,0 +1,5 @@ +### Main repository of the flags ### +https://github.com/Yummygum/flagpack-core + +### We used the medium (m) detailed SVGs which are located here ### +https://github.com/Yummygum/flagpack-core/tree/main/svg/m diff --git a/src/assets/images/logo/logo-text-on-dark.svg b/src/assets/images/logo/logo-text-on-dark.svg new file mode 100644 index 0000000..525ec8e --- /dev/null +++ b/src/assets/images/logo/logo-text-on-dark.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/logo/logo-text.svg b/src/assets/images/logo/logo-text.svg new file mode 100644 index 0000000..03f1862 --- /dev/null +++ b/src/assets/images/logo/logo-text.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/logo/logo.svg b/src/assets/images/logo/logo.svg new file mode 100644 index 0000000..30a8cb5 --- /dev/null +++ b/src/assets/images/logo/logo.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + diff --git a/src/assets/images/ui/angular-material/scenes/autocomplete.scene.png b/src/assets/images/ui/angular-material/scenes/autocomplete.scene.png new file mode 100644 index 0000000..de997b1 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/autocomplete.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/badge.scene.png b/src/assets/images/ui/angular-material/scenes/badge.scene.png new file mode 100644 index 0000000..e9a79db Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/badge.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/bottom-sheet.scene.png b/src/assets/images/ui/angular-material/scenes/bottom-sheet.scene.png new file mode 100644 index 0000000..f23e864 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/bottom-sheet.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/button-toggle.scene.png b/src/assets/images/ui/angular-material/scenes/button-toggle.scene.png new file mode 100644 index 0000000..5a227fd Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/button-toggle.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/button.scene.png b/src/assets/images/ui/angular-material/scenes/button.scene.png new file mode 100644 index 0000000..74448b3 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/button.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/card.scene.png b/src/assets/images/ui/angular-material/scenes/card.scene.png new file mode 100644 index 0000000..4f6cac9 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/card.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/checkbox.scene.png b/src/assets/images/ui/angular-material/scenes/checkbox.scene.png new file mode 100644 index 0000000..7b0327a Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/checkbox.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/chips.scene.png b/src/assets/images/ui/angular-material/scenes/chips.scene.png new file mode 100644 index 0000000..40f6085 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/chips.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/core.scene.png b/src/assets/images/ui/angular-material/scenes/core.scene.png new file mode 100644 index 0000000..9f70df7 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/core.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/datepicker.scene.png b/src/assets/images/ui/angular-material/scenes/datepicker.scene.png new file mode 100644 index 0000000..8bfbd87 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/datepicker.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/dialog.scene.png b/src/assets/images/ui/angular-material/scenes/dialog.scene.png new file mode 100644 index 0000000..ff3c352 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/dialog.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/divider.scene.png b/src/assets/images/ui/angular-material/scenes/divider.scene.png new file mode 100644 index 0000000..ac7749f Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/divider.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/expansion.scene.png b/src/assets/images/ui/angular-material/scenes/expansion.scene.png new file mode 100644 index 0000000..c95ce30 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/expansion.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/form-field.scene.png b/src/assets/images/ui/angular-material/scenes/form-field.scene.png new file mode 100644 index 0000000..868454d Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/form-field.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/grid-list.scene.png b/src/assets/images/ui/angular-material/scenes/grid-list.scene.png new file mode 100644 index 0000000..236fe74 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/grid-list.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/icon.scene.png b/src/assets/images/ui/angular-material/scenes/icon.scene.png new file mode 100644 index 0000000..0e94810 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/icon.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/input.scene.png b/src/assets/images/ui/angular-material/scenes/input.scene.png new file mode 100644 index 0000000..653478f Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/input.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/list.scene.png b/src/assets/images/ui/angular-material/scenes/list.scene.png new file mode 100644 index 0000000..575c4fc Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/list.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/menu.scene.png b/src/assets/images/ui/angular-material/scenes/menu.scene.png new file mode 100644 index 0000000..e9ec270 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/menu.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/paginator.scene.png b/src/assets/images/ui/angular-material/scenes/paginator.scene.png new file mode 100644 index 0000000..8c39357 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/paginator.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/progress-bar.scene.png b/src/assets/images/ui/angular-material/scenes/progress-bar.scene.png new file mode 100644 index 0000000..296e9dc Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/progress-bar.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/progress-spinner.scene.png b/src/assets/images/ui/angular-material/scenes/progress-spinner.scene.png new file mode 100644 index 0000000..869917c Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/progress-spinner.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/radio.scene.png b/src/assets/images/ui/angular-material/scenes/radio.scene.png new file mode 100644 index 0000000..ecac3b1 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/radio.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/ripple.scene.png b/src/assets/images/ui/angular-material/scenes/ripple.scene.png new file mode 100644 index 0000000..9d9c93d Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/ripple.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/select.scene.png b/src/assets/images/ui/angular-material/scenes/select.scene.png new file mode 100644 index 0000000..90b44cc Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/select.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/sidenav.scene.png b/src/assets/images/ui/angular-material/scenes/sidenav.scene.png new file mode 100644 index 0000000..18ceeac Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/sidenav.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/slide-toggle.scene.png b/src/assets/images/ui/angular-material/scenes/slide-toggle.scene.png new file mode 100644 index 0000000..15ea831 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/slide-toggle.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/slider.scene.png b/src/assets/images/ui/angular-material/scenes/slider.scene.png new file mode 100644 index 0000000..8bae38c Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/slider.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/snack-bar.scene.png b/src/assets/images/ui/angular-material/scenes/snack-bar.scene.png new file mode 100644 index 0000000..d327b5d Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/snack-bar.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/sort.scene.png b/src/assets/images/ui/angular-material/scenes/sort.scene.png new file mode 100644 index 0000000..8055fe0 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/sort.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/stepper.scene.png b/src/assets/images/ui/angular-material/scenes/stepper.scene.png new file mode 100644 index 0000000..031aade Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/stepper.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/table.scene.png b/src/assets/images/ui/angular-material/scenes/table.scene.png new file mode 100644 index 0000000..749a16a Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/table.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/tabs.scene.png b/src/assets/images/ui/angular-material/scenes/tabs.scene.png new file mode 100644 index 0000000..22d9d20 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/tabs.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/toolbar.scene.png b/src/assets/images/ui/angular-material/scenes/toolbar.scene.png new file mode 100644 index 0000000..1cf4268 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/toolbar.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/tooltip.scene.png b/src/assets/images/ui/angular-material/scenes/tooltip.scene.png new file mode 100644 index 0000000..6d03280 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/tooltip.scene.png differ diff --git a/src/assets/images/ui/angular-material/scenes/tree.scene.png b/src/assets/images/ui/angular-material/scenes/tree.scene.png new file mode 100644 index 0000000..d8aec40 Binary files /dev/null and b/src/assets/images/ui/angular-material/scenes/tree.scene.png differ diff --git a/src/assets/styles/splash-screen.css b/src/assets/styles/splash-screen.css new file mode 100644 index 0000000..fc75aea --- /dev/null +++ b/src/assets/styles/splash-screen.css @@ -0,0 +1,80 @@ +body fuse-splash-screen { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #111827; + color: #F9FAFB; + z-index: 999999; + pointer-events: none; + opacity: 1; + visibility: visible; + transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1); +} + +body fuse-splash-screen img { + width: 120px; + max-width: 120px; +} + +body fuse-splash-screen .spinner { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 40px; + width: 56px; +} + +body fuse-splash-screen .spinner > div { + width: 12px; + height: 12px; + background-color: #1E96F7; + border-radius: 100%; + display: inline-block; + -webkit-animation: fuse-bouncedelay 1s infinite ease-in-out both; + animation: fuse-bouncedelay 1s infinite ease-in-out both; +} + +body fuse-splash-screen .spinner .bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} + +body fuse-splash-screen .spinner .bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} + +@-webkit-keyframes fuse-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0) + } + 40% { + -webkit-transform: scale(1.0) + } +} + +@keyframes fuse-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } +} + +body:not(.fuse-splash-screen-hidden) { + overflow: hidden; +} + +body.fuse-splash-screen-hidden fuse-splash-screen { + visibility: hidden; + opacity: 0; +} diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts new file mode 100644 index 0000000..c966979 --- /dev/null +++ b/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true, +}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 0000000..31cb785 --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false, +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/src/favicon-16x16.png b/src/favicon-16x16.png new file mode 100644 index 0000000..d2b510e Binary files /dev/null and b/src/favicon-16x16.png differ diff --git a/src/favicon-32x32.png b/src/favicon-32x32.png new file mode 100644 index 0000000..92575ca Binary files /dev/null and b/src/favicon-32x32.png differ diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..ae5e721 --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,7 @@ +/** + * Declare SCSS files as modules so we can import them into TS files and use their content + */ +declare module '*.scss' { + const content: { [className: string]: string }; + export = content; +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..dbe4017 --- /dev/null +++ b/src/index.html @@ -0,0 +1,58 @@ + + + + Fuse Angular - Angular Template and Starter Kit + + + + + + + + + + + + + + + + + + + + + + + + + + + + Fuse logo +
+
+
+
+
+
+ + + + + diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..428d31a --- /dev/null +++ b/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { environment } from 'environments/environment'; +import { AppModule } from 'app/app.module'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err: any) => console.error(err)); diff --git a/src/polyfills.ts b/src/polyfills.ts new file mode 100644 index 0000000..b9daccc --- /dev/null +++ b/src/polyfills.ts @@ -0,0 +1,52 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes recent versions of Safari, Chrome (including + * Opera), Edge on the desktop, and iOS and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + * because those flags need to be set before `zone.js` being loaded, and webpack + * will put import in the top of bundle, so user need to create a separate file + * in this directory (for example: zone-flags.ts), and put the following flags + * into that file, and then add the following code before importing zone.js. + * import './zone-flags'; + * + * The flags allowed in zone-flags.ts are listed here. + * + * The following flags will work for all browsers. + * + * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + * + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + * + * (window as any).__Zone_enable_cross_context_check = true; + * + */ + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js'; // Included with Angular CLI. + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/src/styles/styles.scss b/src/styles/styles.scss new file mode 100644 index 0000000..4103b93 --- /dev/null +++ b/src/styles/styles.scss @@ -0,0 +1,4 @@ +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Import/write your custom styles here. +/* @ Styles from this file will override 'vendors.scss' and Beteran's base styles. +/* ----------------------------------------------------------------------------------------------------- */ diff --git a/src/styles/tailwind.scss b/src/styles/tailwind.scss new file mode 100644 index 0000000..08c702c --- /dev/null +++ b/src/styles/tailwind.scss @@ -0,0 +1,4 @@ +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Main Tailwind file for injecting utilities. +/* ----------------------------------------------------------------------------------------------------- */ +@tailwind utilities; diff --git a/src/styles/vendors.scss b/src/styles/vendors.scss new file mode 100644 index 0000000..f60dada --- /dev/null +++ b/src/styles/vendors.scss @@ -0,0 +1,9 @@ +/* ----------------------------------------------------------------------------------------------------- */ +/* @ Import third party library styles here. +/* ----------------------------------------------------------------------------------------------------- */ + +/* Perfect scrollbar */ +@import '~perfect-scrollbar/css/perfect-scrollbar.css'; + +/* Quill */ +@import '~quill/dist/quill.snow.css'; diff --git a/src/test.ts b/src/test.ts new file mode 100644 index 0000000..3295389 --- /dev/null +++ b/src/test.ts @@ -0,0 +1,31 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting, +} from '@angular/platform-browser-dynamic/testing'; +declare const require: { + context( + path: string, + deep?: boolean, + filter?: RegExp + ): { + keys(): string[]; + // eslint-disable-next-line @typescript-eslint/member-ordering + (id: string): T; + }; +}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); + +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); + +// And load the modules. +context.keys().map(context); diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..1d0369c --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,300 @@ +const path = require("path"); +const colors = require("tailwindcss/colors"); +const defaultTheme = require("tailwindcss/defaultTheme"); +const generatePalette = require(path.resolve( + __dirname, + "src/@fuse/tailwind/utils/generate-palette" +)); + +/** + * Custom palettes + * + * Uses the generatePalette helper method to generate + * Tailwind-like color palettes automatically + */ +const customPalettes = { + brand: generatePalette("#2196F3"), +}; + +/** + * Themes + */ +const themes = { + // Default theme is required for theming system to work correctly + default: { + primary: { + ...colors.indigo, + DEFAULT: colors.indigo[600], + }, + accent: { + ...colors.slate, + DEFAULT: colors.slate[800], + }, + warn: { + ...colors.red, + DEFAULT: colors.red[600], + }, + "on-warn": { + 500: colors.red["50"], + }, + }, + // Rest of the themes will use the 'default' as the base theme + // and extend them with their given configuration + brand: { + primary: customPalettes.brand, + }, + teal: { + primary: { + ...colors.teal, + DEFAULT: colors.teal[600], + }, + }, + rose: { + primary: colors.rose, + }, + purple: { + primary: { + ...colors.purple, + DEFAULT: colors.purple[600], + }, + }, + amber: { + primary: colors.amber, + }, +}; + +/** + * Tailwind configuration + */ +const config = { + darkMode: "class", + content: ["./src/**/*.{html,scss,ts}"], + important: true, + theme: { + fontSize: { + xs: "0.625rem", + sm: "0.75rem", + md: "0.8125rem", + base: "0.875rem", + lg: "1rem", + xl: "1.125rem", + "2xl": "1.25rem", + "3xl": "1.5rem", + "4xl": "2rem", + "5xl": "2.25rem", + "6xl": "2.5rem", + "7xl": "3rem", + "8xl": "4rem", + "9xl": "6rem", + "10xl": "8rem", + }, + screens: { + sm: "600px", + md: "960px", + lg: "1280px", + xl: "1440px", + }, + extend: { + animation: { + "spin-slow": "spin 3s linear infinite", + }, + colors: { + gray: colors.slate, + }, + flex: { + 0: "0 0 auto", + }, + fontFamily: { + sans: `"Inter var", ${defaultTheme.fontFamily.sans.join(",")}`, + mono: `"IBM Plex Mono", ${defaultTheme.fontFamily.mono.join(",")}`, + }, + opacity: { + 12: "0.12", + 38: "0.38", + 87: "0.87", + }, + rotate: { + "-270": "270deg", + 15: "15deg", + 30: "30deg", + 60: "60deg", + 270: "270deg", + }, + scale: { + "-1": "-1", + }, + zIndex: { + "-1": -1, + 49: 49, + 60: 60, + 70: 70, + 80: 80, + 90: 90, + 99: 99, + 999: 999, + 9999: 9999, + 99999: 99999, + }, + spacing: { + 13: "3.25rem", + 15: "3.75rem", + 18: "4.5rem", + 22: "5.5rem", + 26: "6.5rem", + 30: "7.5rem", + 50: "12.5rem", + 90: "22.5rem", + + // Bigger values + 100: "25rem", + 120: "30rem", + 128: "32rem", + 140: "35rem", + 160: "40rem", + 180: "45rem", + 192: "48rem", + 200: "50rem", + 240: "60rem", + 256: "64rem", + 280: "70rem", + 320: "80rem", + 360: "90rem", + 400: "100rem", + 480: "120rem", + + // Fractional values + "1/2": "50%", + "1/3": "33.333333%", + "2/3": "66.666667%", + "1/4": "25%", + "2/4": "50%", + "3/4": "75%", + }, + minHeight: ({ theme }) => ({ + ...theme("spacing"), + }), + maxHeight: { + none: "none", + }, + minWidth: ({ theme }) => ({ + ...theme("spacing"), + screen: "100vw", + }), + maxWidth: ({ theme }) => ({ + ...theme("spacing"), + screen: "100vw", + }), + transitionDuration: { + 400: "400ms", + }, + transitionTimingFunction: { + drawer: "cubic-bezier(0.25, 0.8, 0.25, 1)", + }, + + // @tailwindcss/typography + typography: ({ theme }) => ({ + DEFAULT: { + css: { + color: "var(--fuse-text-default)", + '[class~="lead"]': { + color: "var(--fuse-text-secondary)", + }, + a: { + color: "var(--fuse-primary-500)", + }, + strong: { + color: "var(--fuse-text-default)", + }, + "ol > li::before": { + color: "var(--fuse-text-secondary)", + }, + "ul > li::before": { + backgroundColor: "var(--fuse-text-hint)", + }, + hr: { + borderColor: "var(--fuse-border)", + }, + blockquote: { + color: "var(--fuse-text-default)", + borderLeftColor: "var(--fuse-border)", + }, + h1: { + color: "var(--fuse-text-default)", + }, + h2: { + color: "var(--fuse-text-default)", + }, + h3: { + color: "var(--fuse-text-default)", + }, + h4: { + color: "var(--fuse-text-default)", + }, + "figure figcaption": { + color: "var(--fuse-text-secondary)", + }, + code: { + color: "var(--fuse-text-default)", + fontWeight: "500", + }, + "a code": { + color: "var(--fuse-primary)", + }, + pre: { + color: theme("colors.white"), + backgroundColor: theme("colors.gray.800"), + }, + thead: { + color: "var(--fuse-text-default)", + borderBottomColor: "var(--fuse-border)", + }, + "tbody tr": { + borderBottomColor: "var(--fuse-border)", + }, + 'ol[type="A" s]': false, + 'ol[type="a" s]': false, + 'ol[type="I" s]': false, + 'ol[type="i" s]': false, + }, + }, + sm: { + css: { + code: { + fontSize: "1em", + }, + pre: { + fontSize: "1em", + }, + table: { + fontSize: "1em", + }, + }, + }, + }), + }, + }, + corePlugins: { + appearance: false, + container: false, + float: false, + clear: false, + placeholderColor: false, + placeholderOpacity: false, + verticalAlign: false, + }, + plugins: [ + // Fuse - Tailwind plugins + require(path.resolve(__dirname, "src/@fuse/tailwind/plugins/utilities")), + require(path.resolve(__dirname, "src/@fuse/tailwind/plugins/icon-size")), + require(path.resolve(__dirname, "src/@fuse/tailwind/plugins/theming"))({ + themes, + }), + + // Other third party and/or custom plugins + require("@tailwindcss/typography")({ modifiers: ["sm", "lg"] }), + require("@tailwindcss/aspect-ratio"), + require("@tailwindcss/line-clamp"), + ], +}; + +module.exports = config; diff --git a/transloco.config.js b/transloco.config.js new file mode 100644 index 0000000..c5640ff --- /dev/null +++ b/transloco.config.js @@ -0,0 +1,3 @@ +module.exports = { + rootTranslationsPath: "src/assets/i18n/", +}; diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..ff396d4 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..10f25b8 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,29 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./src", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "es2017", + "module": "es2020", + "lib": ["es2020", "dom"] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/tsconfig.spec.json b/tsconfig.spec.json new file mode 100644 index 0000000..669344f --- /dev/null +++ b/tsconfig.spec.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": ["jasmine"] + }, + "files": ["src/test.ts", "src/polyfills.ts"], + "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] +}