├── .gitignore ├── README.md ├── babel.config.js ├── config.json ├── gulpfile.js ├── jsconfig.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── Approve.svg │ ├── Avatar_Female.svg │ ├── Avatar_Male.svg │ ├── Line.png │ ├── Logout.svg │ ├── Profile.svg │ ├── Reject.svg │ ├── asset-management-logo.png │ ├── asset-management.svg │ ├── fonts │ │ ├── controls.eot │ │ ├── controls.svg │ │ ├── controls.ttf │ │ └── controls.woff │ └── logo.png ├── components │ ├── AboutTemplate.vue │ ├── ActivityTemplate.vue │ ├── AddHardware.vue │ ├── AddSoftware.vue │ ├── AllHardware.vue │ ├── AllIssuedLicenses.vue │ ├── AllRequests.vue │ ├── AllSoftware.vue │ ├── DashboardTemplate.vue │ ├── IssueLicense.vue │ ├── NotificationTemplate.vue │ ├── RequestForm.vue │ └── dashboard │ │ ├── HardwareCategoryChart.vue │ │ ├── HardwareStatusChart.vue │ │ ├── SoftwareCategoryChart.vue │ │ └── SoftwareLicenseChart.vue ├── datasource.js └── main.js └── vue.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | package-lock.json 5 | 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | pnpm-debug.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Asset Management System 2 | A showcase application to track and visualize the software and hardware assets of an organization. This app was built using [Syncfusion Essential JS 2 Vue UI components](https://www.syncfusion.com/products/vue). 3 | 4 | ## Prerequisites 5 | To run the application, [npm and node.js](https://docs.npmjs.com/getting-started/installing-node) are required. The node.js version 6.0.0 or above and the npm version 3.0.0 or above can be used. 6 | 7 | ## Build Setup 8 | 9 | ### Install dependencies 10 | npm install 11 | 12 | ### Serve with hot reload at localhost:8080 13 | Run `npm run serve` command to start the development server at http://localhost:8080. The app will be reloaded automatically when the source file is changed. 14 | 15 | ### Build for production with minification 16 | npm run build 17 | 18 | ## Demo 19 | 20 | [Asset Management System](https://ej2.syncfusion.com/showcase/vue/assetmanagement) 21 | 22 | Also please check out other showcase samples built using Essential JS 2 components [here](https://ej2.syncfusion.com/home/vue.html). -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "productOwner": "Maithiliy K" 3 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-showcase-vue-asset-management/d4a16e772d384c1f02e2ada732a4c434febcb19a/gulpfile.js -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@syncfusion/ej2-vue-asset-management", 3 | "version": "0.1.0", 4 | "description": "Essential JS 2 - Asset management", 5 | "author": "Syncfusion Inc.", 6 | "private": true, 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "@syncfusion/ej2-vue-buttons": "*", 14 | "@syncfusion/ej2-vue-calendars": "*", 15 | "@syncfusion/ej2-vue-charts": "*", 16 | "@syncfusion/ej2-vue-dropdowns": "*", 17 | "@syncfusion/ej2-vue-inputs": "*", 18 | "@syncfusion/ej2-vue-lists": "*", 19 | "@syncfusion/ej2-vue-grids": "*", 20 | "@syncfusion/ej2-vue-navigations": "*", 21 | "@syncfusion/ej2-vue-notifications": "*", 22 | "@syncfusion/ej2-vue-popups": "*", 23 | "@syncfusion/ej2-vue-treemap": "*", 24 | "core-js": "^3.8.3", 25 | "vue": "^3.2.13", 26 | "vue-router": "^4.2.4", 27 | "vuex": "^4.1.0" 28 | }, 29 | "devDependencies": { 30 | "@babel/core": "^7.12.16", 31 | "@babel/eslint-parser": "^7.12.16", 32 | "@vue/cli-plugin-babel": "~5.0.0", 33 | "@vue/cli-plugin-eslint": "~5.0.0", 34 | "@vue/cli-service": "~5.0.0", 35 | "eslint": "^7.32.0", 36 | "eslint-plugin-vue": "^8.0.3", 37 | "@vue/compiler-sfc": "^3.5.13" 38 | }, 39 | "eslintConfig": { 40 | "root": true, 41 | "env": { 42 | "node": true 43 | }, 44 | "extends": [ 45 | "plugin:vue/vue3-essential", 46 | "eslint:recommended" 47 | ], 48 | "parserOptions": { 49 | "parser": "@babel/eslint-parser" 50 | }, 51 | "rules": {} 52 | }, 53 | "browserslist": [ 54 | "> 1%", 55 | "last 2 versions", 56 | "not dead", 57 | "not ie 11" 58 | ] 59 | } 60 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-showcase-vue-asset-management/d4a16e772d384c1f02e2ada732a4c434febcb19a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | IT Asset Management - Essential JS 2 for Vue - Syncfusion 10 | 11 | 12 | 13 | 14 | 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 483 | 633 | -------------------------------------------------------------------------------- /src/assets/Approve.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/Avatar_Female.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/assets/Avatar_Male.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/assets/Line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-showcase-vue-asset-management/d4a16e772d384c1f02e2ada732a4c434febcb19a/src/assets/Line.png -------------------------------------------------------------------------------- /src/assets/Logout.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/Profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/Reject.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/asset-management-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-showcase-vue-asset-management/d4a16e772d384c1f02e2ada732a4c434febcb19a/src/assets/asset-management-logo.png -------------------------------------------------------------------------------- /src/assets/asset-management.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 6 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/assets/fonts/controls.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-showcase-vue-asset-management/d4a16e772d384c1f02e2ada732a4c434febcb19a/src/assets/fonts/controls.eot -------------------------------------------------------------------------------- /src/assets/fonts/controls.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-showcase-vue-asset-management/d4a16e772d384c1f02e2ada732a4c434febcb19a/src/assets/fonts/controls.ttf -------------------------------------------------------------------------------- /src/assets/fonts/controls.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-showcase-vue-asset-management/d4a16e772d384c1f02e2ada732a4c434febcb19a/src/assets/fonts/controls.woff -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/syncfusion/ej2-showcase-vue-asset-management/d4a16e772d384c1f02e2ada732a4c434febcb19a/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/AboutTemplate.vue: -------------------------------------------------------------------------------- 1 | 88 | 90 | 91 | -------------------------------------------------------------------------------- /src/components/ActivityTemplate.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | -------------------------------------------------------------------------------- /src/components/AddHardware.vue: -------------------------------------------------------------------------------- 1 | 104 | 331 | 332 | -------------------------------------------------------------------------------- /src/components/AddSoftware.vue: -------------------------------------------------------------------------------- 1 | 76 | 263 | 264 | -------------------------------------------------------------------------------- /src/components/AllHardware.vue: -------------------------------------------------------------------------------- 1 | 38 | 137 | 138 | -------------------------------------------------------------------------------- /src/components/AllIssuedLicenses.vue: -------------------------------------------------------------------------------- 1 | 35 | 121 | 122 | -------------------------------------------------------------------------------- /src/components/AllRequests.vue: -------------------------------------------------------------------------------- 1 | 37 | 212 | 213 | -------------------------------------------------------------------------------- /src/components/AllSoftware.vue: -------------------------------------------------------------------------------- 1 | 39 | 125 | 126 | -------------------------------------------------------------------------------- /src/components/DashboardTemplate.vue: -------------------------------------------------------------------------------- 1 | 79 | 113 | 114 | -------------------------------------------------------------------------------- /src/components/IssueLicense.vue: -------------------------------------------------------------------------------- 1 | 57 | 222 | 223 | -------------------------------------------------------------------------------- /src/components/NotificationTemplate.vue: -------------------------------------------------------------------------------- 1 | 6 | 47 | 48 | -------------------------------------------------------------------------------- /src/components/RequestForm.vue: -------------------------------------------------------------------------------- 1 | 70 | 262 | 263 | -------------------------------------------------------------------------------- /src/components/dashboard/HardwareCategoryChart.vue: -------------------------------------------------------------------------------- 1 | 15 | 56 | -------------------------------------------------------------------------------- /src/components/dashboard/HardwareStatusChart.vue: -------------------------------------------------------------------------------- 1 | 12 | 45 | -------------------------------------------------------------------------------- /src/components/dashboard/SoftwareCategoryChart.vue: -------------------------------------------------------------------------------- 1 | 11 | 45 | -------------------------------------------------------------------------------- /src/components/dashboard/SoftwareLicenseChart.vue: -------------------------------------------------------------------------------- 1 | 12 | 47 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import { createRouter, createWebHashHistory } from 'vue-router' 4 | import { createStore } from 'vuex'; 5 | import { requestData, licenseData, hardwareData, softwareData, listData, employeeData } from './datasource' 6 | import { DataManager, Query, Predicate } from '@syncfusion/ej2-data' 7 | 8 | import AddHardware from './components/AddHardware.vue' 9 | import AddSoftware from './components/AddSoftware.vue' 10 | import RequestForm from './components/RequestForm.vue' 11 | import IssueLicense from './components/IssueLicense.vue' 12 | import AllHardware from './components/AllHardware.vue' 13 | import dashboard from './components/DashboardTemplate.vue' 14 | import AllSoftware from './components/AllSoftware.vue' 15 | import AllRequests from './components/AllRequests.vue' 16 | import AllIssuedLicenses from './components/AllIssuedLicenses.vue' 17 | import About from './components/AboutTemplate.vue' 18 | 19 | const routes = [ 20 | { 21 | path: '/', 22 | name: 'Dashboard', 23 | component: dashboard 24 | }, 25 | { 26 | path: '/About', 27 | name: 'About', 28 | component: About 29 | }, 30 | { 31 | path: '/Software', 32 | name: 'Software', 33 | component: AllSoftware 34 | }, 35 | { 36 | path: '/Hardware', 37 | name: 'Hardware', 38 | component: AllHardware 39 | }, 40 | { 41 | path: '/AddHardware', 42 | name: 'AddHardware', 43 | component: AddHardware 44 | }, 45 | { 46 | path: '/AddSoftware', 47 | name: 'AddSoftware', 48 | component: AddSoftware 49 | }, 50 | { 51 | path: '/RequestForm', 52 | name: 'RequestForm', 53 | component: RequestForm 54 | }, 55 | { 56 | path: '/Requests', 57 | name: 'Requests', 58 | component: AllRequests 59 | }, 60 | { 61 | path: '/IssuedLicenses', 62 | name: 'Issued Licenses', 63 | component: AllIssuedLicenses 64 | }, 65 | { 66 | path: '/IssueLicense', 67 | name: 'IssueLicense', 68 | component: IssueLicense 69 | } 70 | ] 71 | 72 | const store = createStore({ 73 | state: { 74 | requestInput: requestData, 75 | licensesInput: licenseData, 76 | hardwareInput: hardwareData, 77 | softwareInput: softwareData, 78 | activityData: listData, 79 | empInput: employeeData, 80 | currentUserID: 2 81 | }, 82 | getters: { 83 | requests: state => { 84 | return new DataManager(state.requestInput).executeLocal(new Query().where(new Predicate('Status', 'notequal', 'Pending'))).length 85 | }, 86 | pendingRequests: state => { 87 | return new DataManager(state.requestInput).executeLocal(new Query().where(new Predicate('Status', 'equal', 'Pending'))).length 88 | }, 89 | licenses: state => { 90 | return state.licensesInput.length 91 | }, 92 | hardwareNames: state => { 93 | return new DataManager(state.hardwareInput).executeLocal(new Query().select(['Name', 'TaskID'])) 94 | }, 95 | hardwareStatus: state => { 96 | return new DataManager(state.hardwareInput).executeLocal(new Query().group('Status')) 97 | }, 98 | laptopData: state => { 99 | return new DataManager(state.hardwareInput).executeLocal(new Query().where(new Predicate('Category', 'equal', 'Laptop')).group('Status')) 100 | }, 101 | monitorData: state => { 102 | return new DataManager(state.hardwareInput).executeLocal(new Query().where(new Predicate('Category', 'equal', 'Monitor')).group('Status')) 103 | }, 104 | tabletData: state => { 105 | return new DataManager(state.hardwareInput).executeLocal(new Query().where(new Predicate('Category', 'equal', 'Tablet')).group('Status')) 106 | }, 107 | miscData: state => { 108 | return new DataManager(state.hardwareInput).executeLocal(new Query().where(new Predicate('Category', 'equal', 'Miscellaneous')).group('Status')) 109 | }, 110 | softwareNames: state => { 111 | return new DataManager(state.softwareInput).executeLocal(new Query().select(['Name', 'TaskID'])) 112 | }, 113 | softwareLicense: state => { 114 | return new DataManager(state.softwareInput).executeLocal(new Query().group('LicenseType')) 115 | }, 116 | softwareCategory: state => { 117 | return new DataManager(state.softwareInput).executeLocal(new Query().group('Category')) 118 | }, 119 | empData: state => { 120 | return new DataManager(state.empInput).executeLocal(new Query().select(['id', 'Employee'])) 121 | } 122 | }, 123 | mutations: { 124 | addActivity (state, activity) { 125 | state.activityData.push(activity) 126 | } 127 | }, 128 | actions: { 129 | addActivity (context, activity) { 130 | return new Promise((resolve, reject) => { 131 | var userExist = context.state.empInput.find((user) => { 132 | return user.Employee === activity.Employee 133 | }) 134 | if (!userExist) { 135 | reject(new Error('No such user found!')) 136 | } else if (activity.Employee === '') { 137 | reject(new Error('User name cannot be empty!')) 138 | } else { 139 | context.commit('addActivity', activity) 140 | resolve(Object.assign({}, userExist)) 141 | } 142 | }) 143 | } 144 | } 145 | }) 146 | const router = createRouter({ history: createWebHashHistory(), routes }) 147 | 148 | createApp(App).use(router).use(store).mount('#app') 149 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | publicPath: '', 4 | transpileDependencies: true, 5 | runtimeCompiler: true 6 | }) 7 | --------------------------------------------------------------------------------