├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── avatar
    │   ├── 1.png
    │   ├── 10.png
    │   ├── 11.png
    │   ├── 12.png
    │   ├── 13.png
    │   ├── 14.png
    │   ├── 15.png
    │   ├── 16.png
    │   ├── 17.png
    │   ├── 18.png
    │   ├── 19.png
    │   ├── 2.png
    │   ├── 20.png
    │   ├── 3.png
    │   ├── 4.png
    │   ├── 5.png
    │   ├── 6.png
    │   ├── 7.png
    │   ├── 8.png
    │   └── 9.png
    ├── favicon.ico
    ├── index.html
    ├── logo.png
    ├── user.png
    └── usersdata.json
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        ├── UserCard.vue
        ├── UserInfo.vue
        ├── UserList.vue
        ├── footer
        │   └── Footer.vue
        └── header
        │   └── Header.vue
    ├── config
        └── index.js
    ├── main.js
    ├── router
        └── index.js
    ├── store
        └── index.js
    └── views
        ├── Home.vue
        ├── Modulea.vue
        ├── Moduleb.vue
        └── account
            └── Profile.vue


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | /node_modules
 3 | /build
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # simple
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "simple",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "bootstrap": "^5.1.3",
12 |     "bootstrap-vue": "^2.21.2",
13 |     "core-js": "^3.6.5",
14 |     "font-awesome": "^4.7.0",
15 |     "vue": "^2.6.11",
16 |     "vue-router": "^3.2.0",
17 |     "vuex": "^3.4.0"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.0",
21 |     "@vue/cli-plugin-eslint": "~4.5.0",
22 |     "@vue/cli-plugin-router": "~4.5.0",
23 |     "@vue/cli-plugin-vuex": "~4.5.0",
24 |     "@vue/cli-service": "~4.5.0",
25 |     "babel-eslint": "^10.1.0",
26 |     "eslint": "^6.7.2",
27 |     "eslint-plugin-vue": "^6.2.2",
28 |     "lint-staged": "^9.5.0",
29 |     "vue-template-compiler": "^2.6.11"
30 |   },
31 |   "eslintConfig": {
32 |     "root": true,
33 |     "env": {
34 |       "node": true
35 |     },
36 |     "extends": [
37 |       "plugin:vue/essential",
38 |       "eslint:recommended"
39 |     ],
40 |     "parserOptions": {
41 |       "parser": "babel-eslint"
42 |     },
43 |     "rules": {}
44 |   },
45 |   "browserslist": [
46 |     "> 1%",
47 |     "last 2 versions",
48 |     "not dead"
49 |   ],
50 |   "gitHooks": {
51 |     "pre-commit": "lint-staged"
52 |   },
53 |   "lint-staged": {
54 |     "*.{js,jsx,vue}": [
55 |       "vue-cli-service lint",
56 |       "git add"
57 |     ]
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/public/avatar/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/1.png


--------------------------------------------------------------------------------
/public/avatar/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/10.png


--------------------------------------------------------------------------------
/public/avatar/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/11.png


--------------------------------------------------------------------------------
/public/avatar/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/12.png


--------------------------------------------------------------------------------
/public/avatar/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/13.png


--------------------------------------------------------------------------------
/public/avatar/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/14.png


--------------------------------------------------------------------------------
/public/avatar/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/15.png


--------------------------------------------------------------------------------
/public/avatar/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/16.png


--------------------------------------------------------------------------------
/public/avatar/17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/17.png


--------------------------------------------------------------------------------
/public/avatar/18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/18.png


--------------------------------------------------------------------------------
/public/avatar/19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/19.png


--------------------------------------------------------------------------------
/public/avatar/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/2.png


--------------------------------------------------------------------------------
/public/avatar/20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/20.png


--------------------------------------------------------------------------------
/public/avatar/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/3.png


--------------------------------------------------------------------------------
/public/avatar/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/4.png


--------------------------------------------------------------------------------
/public/avatar/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/5.png


--------------------------------------------------------------------------------
/public/avatar/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/6.png


--------------------------------------------------------------------------------
/public/avatar/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/7.png


--------------------------------------------------------------------------------
/public/avatar/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/8.png


--------------------------------------------------------------------------------
/public/avatar/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/avatar/9.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
10 |   <style>
11 |     .row {
12 |       --bs-gutter-x: 0rem !important;
13 |     }
14 |   </style>
15 |   <title>
16 |     <%= htmlWebpackPlugin.options.title %>
17 |   </title>
18 | </head>
19 | 
20 | <body>
21 |   <noscript>
22 |     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
23 |         Please enable it to continue.</strong>
24 |   </noscript>
25 |   <div id="app"></div>
26 |   <!-- built files will be auto injected -->
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/logo.png


--------------------------------------------------------------------------------
/public/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/public/user.png


--------------------------------------------------------------------------------
/public/usersdata.json:
--------------------------------------------------------------------------------
  1 | [
  2 |     {
  3 |       "id": 1,
  4 |       "name": "John Malcovich",
  5 |       "avatar": "1.png",
  6 |       "login": "john",
  7 |       "email": "john.malcovich@nono.com",
  8 |       "status": 1,
  9 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
 10 |       "date": "26 OCT 2021 · 11:46 AM",
 11 |       "info": "bla bla blabla bla",
 12 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
 13 |     },
 14 |     {
 15 |       "id": 2,
 16 |       "name": "John Malcovich",
 17 |       "avatar": "2.png",
 18 |       "login": "john",
 19 |       "email": "john.malcovich@nono.com",
 20 |       "status": 1,
 21 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
 22 |       "date": "26 OCT 2021 · 11:46 AM",
 23 |       "info": "bla bla blabla bla",
 24 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
 25 |     },
 26 |     {
 27 |       "id": 3,
 28 |       "name": "John Malcovich",
 29 |       "avatar": "3.png",
 30 |       "login": "john",
 31 |       "email": "john.malcovich@nono.com",
 32 |       "status": 1,
 33 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
 34 |       "date": "26 OCT 2021 · 11:46 AM",
 35 |       "info": "bla bla blabla bla",
 36 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
 37 |     },
 38 |     {
 39 |       "id": 4,
 40 |       "name": "John Malcovich",
 41 |       "avatar": "4.png",
 42 |       "login": "john",
 43 |       "email": "john.malcovich@nono.com",
 44 |       "status": 1,
 45 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
 46 |       "date": "26 OCT 2021 · 11:46 AM",
 47 |       "info": "bla bla blabla bla",
 48 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
 49 |     },
 50 |     {
 51 |       "id": 5,
 52 |       "name": "John Malcovich",
 53 |       "avatar": "5.png",
 54 |       "login": "john",
 55 |       "email": "john.malcovich@nono.com",
 56 |       "status": 1,
 57 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
 58 |       "date": "26 OCT 2021 · 11:46 AM",
 59 |       "info": "bla bla blabla bla",
 60 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
 61 |     },
 62 |     {
 63 |       "id": 6,
 64 |       "name": "John Malcovich",
 65 |       "avatar": "6.png",
 66 |       "login": "john",
 67 |       "email": "john.malcovich@nono.com",
 68 |       "status": 1,
 69 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
 70 |       "date": "26 OCT 2021 · 11:46 AM",
 71 |       "info": "bla bla blabla bla",
 72 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
 73 |     },
 74 |     {
 75 |       "id": 7,
 76 |       "name": "John Malcovich",
 77 |       "avatar": "7.png",
 78 |       "login": "john",
 79 |       "email": "john.malcovich@nono.com",
 80 |       "status": 1,
 81 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
 82 |       "date": "26 OCT 2021 · 11:46 AM",
 83 |       "info": "bla bla blabla bla",
 84 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
 85 |     },
 86 |     {
 87 |       "id": 8,
 88 |       "name": "John Malcovich",
 89 |       "avatar": "8.png",
 90 |       "login": "john",
 91 |       "email": "john.malcovich@nono.com",
 92 |       "status": 1,
 93 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
 94 |       "date": "26 OCT 2021 · 11:46 AM",
 95 |       "info": "bla bla blabla bla",
 96 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
 97 |     },
 98 |     {
 99 |       "id": 9,
100 |       "name": "John Malcovich",
101 |       "avatar": "9.png",
102 |       "login": "john",
103 |       "email": "john.malcovich@nono.com",
104 |       "status": 1,
105 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
106 |       "date": "26 OCT 2021 · 11:46 AM",
107 |       "info": "bla bla blabla bla",
108 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
109 |     },
110 |     {
111 |       "id": 10,
112 |       "name": "John Malcovich",
113 |       "avatar": "10.png",
114 |       "login": "john",
115 |       "email": "john.malcovich@nono.com",
116 |       "status": 1,
117 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
118 |       "date": "26 OCT 2021 · 11:46 AM",
119 |       "info": "bla bla blabla bla",
120 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
121 |     },
122 |     {
123 |       "id": 11,
124 |       "name": "John Malcovich",
125 |       "avatar": "11.png",
126 |       "login": "john",
127 |       "email": "john.malcovich@nono.com",
128 |       "status": 1,
129 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
130 |       "date": "26 OCT 2021 · 11:46 AM",
131 |       "info": "bla bla blabla bla",
132 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
133 |     },
134 |     {
135 |       "id": 12,
136 |       "name": "John Malcovich",
137 |       "avatar": "12.png",
138 |       "login": "john",
139 |       "email": "john.malcovich@nono.com",
140 |       "status": 1,
141 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
142 |       "date": "26 OCT 2021 · 11:46 AM",
143 |       "info": "bla bla blabla bla",
144 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
145 |     },
146 |     {
147 |       "id": 13,
148 |       "name": "John Malcovich",
149 |       "avatar": "13.png",
150 |       "login": "john",
151 |       "email": "john.malcovich@nono.com",
152 |       "status": 1,
153 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
154 |       "date": "26 OCT 2021 · 11:46 AM",
155 |       "info": "bla bla blabla bla",
156 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
157 |     },
158 |     {
159 |       "id": 14,
160 |       "name": "John Malcovich",
161 |       "avatar": "14.png",
162 |       "login": "john",
163 |       "email": "john.malcovich@nono.com",
164 |       "status": 1,
165 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
166 |       "date": "26 OCT 2021 · 11:46 AM",
167 |       "info": "bla bla blabla bla",
168 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
169 |     },
170 |     {
171 |       "id": 15,
172 |       "name": "John Malcovich",
173 |       "avatar": "15.png",
174 |       "login": "john",
175 |       "email": "john.malcovich@nono.com",
176 |       "status": 1,
177 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
178 |       "date": "26 OCT 2021 · 11:46 AM",
179 |       "info": "bla bla blabla bla",
180 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
181 |     },
182 |     {
183 |       "id": 16,
184 |       "name": "John Malcovich",
185 |       "avatar": "16.png",
186 |       "login": "john",
187 |       "email": "john.malcovich@nono.com",
188 |       "status": 1,
189 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
190 |       "date": "26 OCT 2021 · 11:46 AM",
191 |       "info": "bla bla blabla bla",
192 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
193 |     },
194 |     {
195 |       "id": 17,
196 |       "name": "John Malcovich",
197 |       "avatar": "17.png",
198 |       "login": "john",
199 |       "email": "john.malcovich@nono.com",
200 |       "status": 1,
201 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
202 |       "date": "26 OCT 2021 · 11:46 AM",
203 |       "info": "bla bla blabla bla",
204 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
205 |     },
206 |     {
207 |       "id": 18,
208 |       "name": "John Malcovich",
209 |       "avatar": "18.png",
210 |       "login": "john",
211 |       "email": "john.malcovich@nono.com",
212 |       "status": 1,
213 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
214 |       "date": "26 OCT 2021 · 11:46 AM",
215 |       "info": "bla bla blabla bla",
216 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
217 |     },
218 |     {
219 |       "id": 19,
220 |       "name": "John Malcovich",
221 |       "avatar": "19.png",
222 |       "login": "john",
223 |       "email": "john.malcovich@nono.com",
224 |       "status": 1,
225 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
226 |       "date": "26 OCT 2021 · 11:46 AM",
227 |       "info": "bla bla blabla bla",
228 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
229 |     },
230 |     {
231 |       "id": 20,
232 |       "name": "John Malcovich",
233 |       "avatar": "20.png",
234 |       "login": "john",
235 |       "email": "john.malcovich@nono.com",
236 |       "status": 1,
237 |       "address": "17 street, Southen Garden no 36 Mountain View, Ca",
238 |       "date": "26 OCT 2021 · 11:46 AM",
239 |       "info": "bla bla blabla bla",
240 |       "desc": "Vestibulum eros ipsum, pharetra fermentum eleifend et, finibus eget ipsum. Sed dignissim libero id leo ultrices, ac feugiat dolor fermentum. Sed dignissim libero id leo ultrices, ac feugiat"
241 |     }
242 |   ]


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Header />
 4 |     <router-view/>
 5 |     <Footer />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import Header from '@/components/header/Header'
11 | import Footer from '@/components/footer/Footer'
12 | export default {
13 |   name: 'app',
14 |   components: {
15 |     Header,
16 |     Footer
17 |   }
18 | }
19 | </script>
20 | <style>
21 | #app {
22 |   font-family: Avenir, Helvetica, Arial, sans-serif;
23 |   -webkit-font-smoothing: antialiased;
24 |   -moz-osx-font-smoothing: grayscale;
25 |   text-align: center;
26 |   color: #2c3e50;
27 | }
28 | 
29 | #nav {
30 |   padding: 30px;
31 | }
32 | 
33 | #nav a {
34 |   font-weight: bold;
35 |   color: #2c3e50;
36 | }
37 | 
38 | #nav a.router-link-exact-active {
39 |   color: #42b983;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whitehorse21/SimpleVue/9fa9f976b3fa2bb4451847ad414072e6754f3b60/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/UserCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="user">
 3 |       <div class="row mt-2">
 4 |           <div class="user-avatar">
 5 |               <img v-bind:src="'avatar/' + user.avatar" style="height: 100%" />
 6 |           </div>
 7 |           <div class="user-info">
 8 |             <span class="name">{{user.name}}</span><br>
 9 |             <span class="date">26 OCT 2021 · 11:46 AM</span><br>
10 |             <span class="short">bla bla blabla bla</span>
11 |           </div>
12 |       </div>
13 |       <div class="row mt-2">
14 |           <span class="description">Vestibulum eros ipsum, pharetra
15 |                 fermentum eleifend et, finibus
16 |                 eget ipsum. Sed dignissim libero
17 |                 id leo ultrices, ac feugiat dolor
18 |                 fermentum. Sed dignissim libero
19 |                 id leo ultrices, ac feugiat
20 |           </span>
21 |       </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | 
27 | export default {
28 |     props: {
29 |         user: Object
30 |     }
31 | }
32 | </script>
33 | 
34 | <style scoped>
35 | .user-avatar {
36 |     width: 30%;
37 |     padding: 20px;
38 | }
39 | 
40 | .user-info {
41 |     width: 70%;
42 |     padding: 30px;
43 |     text-align: left;
44 | }
45 | 
46 | .name {
47 |     font-size: 22px;
48 |     color: rgb(17, 17, 16);
49 | }
50 | .date {
51 |     font-size: 10px;
52 |     color: rgb(190, 190, 170);
53 | }
54 | .short {
55 |     font-size: 18px;
56 |     color: rgb(218, 124, 62);
57 | }
58 | 
59 | .description {
60 |     padding: 5%;
61 |     color: #4cce91;
62 |     text-align: left;
63 | }
64 | .user {
65 |     background-color: #2963b9;
66 | }
67 | 
68 | </style>
69 | 


--------------------------------------------------------------------------------
/src/components/UserInfo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="user">
  3 |       <div class="row mt-2">
  4 |           <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
  5 |               <img v-bind:src="'avatar/' + user.avatar" />
  6 |           </div>
  7 |           <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
  8 |             <div class="info">
  9 |               <div style="text-align:left">
 10 |                   <div class="d-flex flex-row line-group">
 11 |                     <span class="info-text"><b>Name: </b></span>
 12 |                     <input type="text" class="form-control" :value="user.name" /><br>
 13 |                   </div>
 14 |                   <div class="d-flex flex-row line-group">
 15 |                     <span class="info-text"><b>Login: </b></span>
 16 |                     <input type="text" class="form-control" :value="user.login" /><br>
 17 |                   </div>
 18 |                   <div class="d-flex flex-row line-group">
 19 |                     <span class="info-text"><b>Email: </b></span>
 20 |                     <input type="text" class="form-control" :value="user.email" /><br>
 21 |                   </div>
 22 |                   <div class="d-flex flex-row line-group">
 23 |                     <span class="info-text"><b>Status: </b></span>
 24 |                     <div class="form-check">
 25 |                       <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Active
 26 |                       <label class="form-check-label" for="radio1"></label>
 27 |                     </div>
 28 |                     <div class="form-check">
 29 |                       <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Inactive
 30 |                       <label class="form-check-label" for="radio2"></label>
 31 |                     </div>
 32 |                   </div>               
 33 |                   <div class="d-flex flex-row line-group">
 34 |                       <span style="margin-right: 20px;"><b>Address:</b></span>
 35 |                       <textarea class="form-control" style="height: 120px;" :value="user.address" /><br>
 36 |                   </div>
 37 |                   <div class="d-flex flex-row justify-content-end" style="margin-top: 5px;">
 38 |                       <button class="btn btn-md" style="background-color: yellow; margin-right: 10px;">Change</button>
 39 |                       <button class="btn btn-md" style="background-color: white; margin-right: 10px;">Discard Changes</button>
 40 |                   </div>
 41 |               </div>
 42 |             </div>
 43 |           </div>
 44 |       </div>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | 
 50 | export default {
 51 |   props: {
 52 |     user: Object
 53 |   }
 54 | }
 55 | </script>
 56 | 
 57 | <style scoped>
 58 | img {
 59 |    margin: 30px;
 60 |    width: 200px; 
 61 |    height: auto;
 62 | }
 63 | 
 64 | .info {
 65 |   margin: 30px;
 66 | }
 67 | 
 68 | .line-group {
 69 |   margin: 5px;
 70 | }
 71 | .form-check {
 72 |   margin: 5px;
 73 | }
 74 | .user-avatar {
 75 |     width: 40%;
 76 |     padding: 20px;
 77 | }
 78 | 
 79 | .info-text {
 80 |     margin-right: 40px;
 81 |     margin-top: 5px;
 82 | }
 83 | 
 84 | .user-info {
 85 |     width: 60%;
 86 |     padding: 30px;
 87 |     text-align: left;
 88 | }
 89 | 
 90 | .name {
 91 |     font-size: 22px;
 92 |     color: rgb(17, 17, 16);
 93 | }
 94 | .date {
 95 |     font-size: 10px;
 96 |     color: rgb(190, 190, 170);
 97 | }
 98 | .short {
 99 |     font-size: 18px;
100 |     color: rgb(218, 124, 62);
101 | }
102 | 
103 | .description {
104 |     padding: 5%;
105 |     color: #4cce91;
106 |     text-align: left;
107 | }
108 | .user {
109 |     background-color: #2963b9;
110 |     margin: 5%;
111 | }
112 | 
113 | </style>
114 | 


--------------------------------------------------------------------------------
/src/components/UserList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li>
 3 |       {{user.name}}
 4 |   </li>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | export default {
10 |     props: {
11 |        user: Object
12 |     }
13 | }
14 | </script>
15 | 
16 | <style scoped>
17 | 
18 | 
19 | </style>
20 | 


--------------------------------------------------------------------------------
/src/components/footer/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- Footer -->
 3 |   <div>
 4 |   <!-- Footer -->
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | 
 9 | export default {
10 |   name: 'Footer',
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/src/components/header/Header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <nav class="navbar navbar-expand-sm navbar-blue navbar-light">
  4 |         <div class="container-fluid d-flex flex-row">
  5 |             <router-link to="/"><img src="logo.png" style="max-width: 100px;" /></router-link>
  6 |             <div class="nav-btns">
  7 |                 <router-link to="/modulea"><button class="btn btn-primary nav-btn nav1">Module A <span class="badge bg-yellow">2</span></button></router-link>
  8 |                 <router-link to="/moduleb"><button class="btn btn-primary nav-btn nav2">Module B <span class="badge bg-yellow">4</span></button></router-link>
  9 |                 <router-link to="/modulec"><button class="btn btn-primary nav-btn nav3">Module C</button></router-link>
 10 |                 <router-link to="/moduled"><button class="btn btn-primary nav-btn nav4">Module D</button></router-link>
 11 |             </div>
 12 |             <div class="dropdown showmore1">
 13 |                 <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
 14 |                     show+
 15 |                 </button>
 16 |                 <ul class="dropdown-menu">
 17 |                     <li><router-link to="/moduled"><span class="dropdown-item">Module D</span></router-link></li>
 18 |                 </ul>
 19 |             </div>
 20 |             <div class="dropdown showmore2">
 21 |                 <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
 22 |                     show+
 23 |                 </button>
 24 |                 <ul class="dropdown-menu">
 25 |                     <li><router-link to="/modulec"><span class="dropdown-item">Module C</span></router-link></li>
 26 |                     <li><router-link to="/moduled"><span class="dropdown-item">Module D</span></router-link></li>
 27 |                 </ul>
 28 |             </div>
 29 |             <div class="dropdown showmore3">
 30 |                 <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
 31 |                     show+
 32 |                 </button>
 33 |                 <ul class="dropdown-menu">
 34 |                     <li><router-link to="/moduleb"><span class="dropdown-item">Module B</span></router-link></li>
 35 |                     <li><router-link to="/modulec"><span class="dropdown-item">Module C</span></router-link></li>
 36 |                     <li><router-link to="/moduled"><span class="dropdown-item">Module D</span></router-link></li>
 37 |                 </ul>
 38 |             </div>
 39 |             <div class="dropdown dropstart text-end">
 40 |                 <button type="button" class="user-icon dropdown-toggle" data-bs-toggle="dropdown">
 41 |                     <img src="user.png" class="user-image"/>
 42 |                 </button>
 43 |                 <ul class="dropdown-menu">
 44 |                     <li><router-link to="/profile"><span class="dropdown-item">MyProfile</span></router-link></li>
 45 |                     <li><a class="dropdown-item" href="#">MyReferences</a></li>
 46 |                     <li><a class="dropdown-item" href="#">ChangePassword</a></li>
 47 |                     <li><span class="dropdown-item-text">Logout</span></li>
 48 |                 </ul>
 49 |             </div>
 50 |         </div>
 51 |     </nav>
 52 |   </div>
 53 | </template>
 54 | 
 55 | <script>
 56 | export default {
 57 |   name: 'Header',
 58 | }
 59 | </script>
 60 | 
 61 | 
 62 | <style scoped>
 63 |   .navbar-blue {
 64 |       background-color: #2963b9;
 65 |   }
 66 | 
 67 |   .bg-yellow {
 68 |       background-color: rgb(182, 182, 83);
 69 |   }
 70 | 
 71 |   a {
 72 |       text-decoration: none !important;
 73 |   }
 74 | 
 75 |   .nav-btn {
 76 |       margin-left: 2px;
 77 |   }
 78 | 
 79 |   .nav-btn {
 80 |       margin-right: 10px;
 81 |   }
 82 | 
 83 |   .user-icon {
 84 |     background-color: #fffefe;
 85 |     color: rgb(15, 14, 14);
 86 |     padding: 5px 10px;
 87 |     margin-left: 15px;
 88 |   }
 89 | 
 90 |   .user-image {
 91 |       width: 25px;
 92 |       height: 25px;
 93 |       border-radius: 50%;
 94 |   }
 95 | 
 96 |   .showmore1 {
 97 |       display: none;
 98 |   }
 99 | 
100 |   .showmore2 {
101 |       display: none;
102 |   }
103 |   .showmore3 {
104 |       display: none;
105 |   }
106 | 
107 |   @media screen and (max-width: 768px) {
108 |       .nav4 {
109 |           display: none;
110 |       }
111 |       .showmore1 {
112 |           display: block;
113 |       }
114 |   }
115 | 
116 |   @media screen and (max-width: 712px) {
117 |       .nav4 {
118 |           display: none;
119 |       }
120 |       .nav3 {
121 |           display: none;
122 |       }
123 |       .showmore1 {
124 |           display: none;
125 |       }
126 |       .showmore2 {
127 |           display: block;
128 |       }
129 |   }
130 | 
131 |   @media screen and (max-width: 600px) {
132 |       .nav4 {
133 |           display: none;
134 |       }
135 |       .nav3 {
136 |           display: none;
137 |       }
138 |       .nav2 {
139 |           display: none;
140 |       }
141 |       .showmore1 {
142 |           display: none;
143 |       }
144 |       .showmore2 {
145 |           display: none;
146 |       }
147 |       .showmore3 {
148 |           display: block;
149 |       }
150 |   }
151 | </style>
152 | 


--------------------------------------------------------------------------------
/src/config/index.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     server_url: 'http://localhost:8080'
3 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 6 | 
 7 | import 'bootstrap/dist/css/bootstrap.css'
 8 | import 'bootstrap-vue/dist/bootstrap-vue.css'
 9 | import 'font-awesome/css/font-awesome.min.css'
10 | 
11 | Vue.config.productionTip = false
12 | 
13 | Vue.use(BootstrapVue)
14 | Vue.use(IconsPlugin)
15 | 
16 | new Vue({
17 |   router,
18 |   store,
19 |   render: h => h(App)
20 | }).$mount('#app')
21 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | import Profile from '../views/account/Profile.vue'
 5 | import Modulea from '../views/Modulea.vue'
 6 | import Moduleb from '../views/Moduleb.vue'
 7 | 
 8 | Vue.use(VueRouter)
 9 | 
10 | const routes = [
11 |   {
12 |     path: '/',
13 |     name: 'Home',
14 |     component: Home
15 |   },
16 |   {
17 |     path: '/profile',
18 |     name: 'Profile',
19 |     component: Profile
20 |   },
21 |   {
22 |     path: '/modulea',
23 |     name: 'Modulea',
24 |     component: Modulea
25 |   },
26 |   {
27 |     path: '/moduleb',
28 |     name: 'Moduleb',
29 |     component: Moduleb
30 |   }
31 | ]
32 | 
33 | const router = new VueRouter({
34 |   mode: 'history',
35 |   base: process.env.BASE_URL,
36 |   routes
37 | })
38 | 
39 | export default router
40 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     Welcome
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | // @ is an alias to /src
 9 | 
10 | export default {
11 |   name: 'Home',
12 |   components: {
13 |   }
14 | }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/views/Modulea.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modulea">
 3 |     <div class="container">
 4 |       <div class="row">
 5 |         <div class="item" v-for="user in users" :key="user.id">
 6 |           <UserCard :user="user" />
 7 |         </div>
 8 |       </div>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | // @ is an alias to /src
15 | 
16 | import UserCard from '@/components/UserCard.vue'
17 | import config from '@/config';
18 | export default {
19 |     name: 'Modulea',
20 |     components: {
21 |         UserCard
22 |     },
23 |     data () {
24 |       return {
25 |           users: []
26 |       }
27 |     },
28 |     methods: {
29 |       getUsersData() {
30 |         fetch(`${config.server_url}/usersdata.json`)
31 |           .then(response => response.json())
32 |           .then(data => {
33 |             console.log(data)
34 |             this.users = data
35 |           });
36 |       }
37 |     },
38 |     mounted() {
39 |       this.getUsersData()
40 |     }
41 | }
42 | </script>
43 | 
44 | <style scoped>
45 | .item {
46 |   width: 50%;
47 |   padding: 10px;
48 | }
49 | 
50 | @media screen and (max-width: 810px) {
51 |   .item {
52 |     width: 100%;
53 |   }
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/views/Moduleb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row">
 3 |       <div class="sidebar">
 4 |           <ul class="list-group">
 5 |             <div v-for="user in users" :key="user.id" >
 6 |               <li v-if="user.id===select" class="list-group-item selected" @click="userDetail(user.id)">User {{user.id}}</li>
 7 |               <li v-else class="list-group-item" @click="userDetail(user.id)">User {{user.id}}</li>
 8 |             </div>
 9 |           </ul> 
10 |       </div>
11 |       <div class="content">
12 |         <div v-if="select !== -1">
13 |           <UserInfo :user=current />
14 |         </div>
15 |         <div v-else style="margin-top: 300px;">
16 |           <span>Module Visualization area</span>
17 |         </div>
18 |       </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | // @ is an alias to /src
24 | import UserInfo from '@/components/UserInfo.vue'
25 | import config from '@/config';
26 | 
27 | export default {
28 |   name: 'Moduleb',
29 |   components: {
30 |     UserInfo
31 |   },
32 |   data() {
33 |     return {
34 |       users: [],
35 |       current: {
36 |           id: -1,
37 |           name: '',
38 |           avatar: '',
39 |           login: '',
40 |           email: '',
41 |           status: 1,
42 |           address: ''
43 |       },
44 |       select: -1,
45 |     }
46 |   },
47 |   methods: {
48 |     getUsersData() {
49 |         fetch(`${config.server_url}/usersdata.json`)
50 |           .then(response => response.json())
51 |           .then(data => {
52 |             console.log(data)
53 |             this.users = data
54 |           });
55 |     },
56 |     userDetail(id) {
57 |       this.select = id;
58 |       const selectUsers = this.users.filter(item => item.id === id)
59 |       if (selectUsers.length !== 0)
60 |         this.current = selectUsers[0]
61 |     }
62 |   },
63 |   mounted() {
64 |     this.getUsersData()
65 |   }
66 | }
67 | </script>
68 | 
69 | <style scoped>
70 | 
71 | .list-group-item {
72 |   cursor: pointer;
73 | }
74 | 
75 | .selected {
76 |   background-color: #d6e230;
77 | }
78 | 
79 | .sidebar {
80 |   width: 20%;
81 |   overflow: auto;
82 |   height: 660px;
83 | }
84 | 
85 | .content {
86 |   width: 80%;
87 | }
88 | 
89 | </style>


--------------------------------------------------------------------------------
/src/views/account/Profile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="profile">
 3 |     <div class="container">
 4 |         <div class="row">
 5 |             <span class="mt-5" style="text-align:left"><h2>MyProfile</h2></span>
 6 |         </div>
 7 |         <div class="row">
 8 |             <div class="avatar">
 9 |                 <img src="user.png" width="100%" />
10 |             </div>
11 |             <div class="info">
12 |               <div style="text-align:left">
13 |                 <span class="info-text"><b>Name: </b>Gerard Jonhson</span><br>
14 |                 <span class="info-text"><b>Login: </b>gerard</span><br>
15 |                 <span class="info-text"><b>Email: </b>gerard@nono.com</span><br>
16 |                 <span class="d-flex flex-row"><b style="font-size: 25px;">Status:</b>
17 |                   <div class="form-check" style="margin:6px">
18 |                     <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Active
19 |                     <label class="form-check-label" for="radio1"></label>
20 |                   </div>
21 |                   <div class="form-check" style="margin:6px">
22 |                     <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Inactive
23 |                     <label class="form-check-label" for="radio2"></label>
24 |                   </div>
25 |                 </span>
26 |                 <span class="info-text"><b>Address: </b>17 street, Southen Garden no 36 Mountain View, Ca</span><br>
27 |               </div>
28 |             </div>
29 |         </div>
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | // @ is an alias to /src
36 | 
37 | export default {
38 |   name: 'Profile',
39 | }
40 | </script>
41 | 
42 | <style scoped>
43 |   .avatar {
44 |     width: 40%;
45 |   }
46 | 
47 |   .info {
48 |     width: 60%;
49 |     padding-left: 50px;
50 |   }
51 | 
52 |   .info-text {
53 |     font-size: 25px;
54 |   }
55 | 
56 | 
57 |   @media screen and (max-width: 786px) {
58 |       .avatar {
59 |           width: 100%;
60 |       }
61 |       .info {
62 |           width: 100%;
63 |           padding-top: 20px;
64 |       }
65 |   }
66 | </style>


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