├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── api │ ├── index.ts │ └── service.ts ├── assets │ ├── data │ │ └── mock.json │ ├── fonts │ │ ├── Inter-Regular.woff │ │ ├── Inter-Regular.woff2 │ │ ├── Inter-SemiBold.woff │ │ └── Inter-SemiBold.woff2 │ └── images │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── arrow-down.svg │ │ ├── arrow.svg │ │ ├── browserconfig.xml │ │ ├── calendar-input.svg │ │ ├── calendar.svg │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── filter.svg │ │ ├── logo copy.svg │ │ ├── logo.svg │ │ ├── mstile-150x150.png │ │ ├── safari-pinned-tab.svg │ │ ├── search.svg │ │ ├── site.webmanifest │ │ ├── success-dot.svg │ │ └── warning-dot.svg ├── components │ ├── aside-list.vue │ ├── aside.vue │ ├── card.vue │ ├── container.vue │ ├── header-nav.vue │ ├── header.vue │ ├── input-date.vue │ ├── input-radio.vue │ ├── input-text.vue │ ├── main-container.vue │ └── select.vue ├── constants │ └── index.ts ├── icons │ └── LogoIcon.vue ├── main.ts ├── router │ └── index.ts ├── shims-tsx.d.ts ├── shims-vue.d.ts ├── types │ ├── events.ts │ ├── genders.ts │ ├── routes.ts │ ├── user.ts │ └── userService.ts ├── utils │ └── formatDate.ts └── views │ ├── loaded-view.vue │ ├── main-view.vue │ └── waiting-view.vue ├── tsconfig.json ├── vue.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ["@vue/typescript", "plugin:vue/essential", "eslint:recommended"], 7 | parserOptions: { 8 | ecmaFeatures: { 9 | legacyDecorators: true, 10 | }, 11 | }, 12 | rules: { 13 | "vue/multi-word-component-names": 0, 14 | "no-unused-vars": "off", 15 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 16 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 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 | # Домашка 3 # 2 | 3 | ## Что необходимо ## 4 | 5 | + Верстка с первого домашнего задания 6 | + Набор данных 7 | + Макет - https://www.figma.com/file/OLPVfbWHFpdbfX7OKgu0QG/Untitled?node-id=1%3A5419 8 | 9 | ## Задание ## 10 | Необходимо имеющиеся VUE проект из 2 недели, мигрировать на JSX синтаксис. Важно сохранить сборку, запуск и функционирование проекта, а том же виде, в каком он был до миграции. 11 | 12 | ## Задание со звёздочкой (алмазом) ## 13 | 14 | + Для получения дополнительного алмаза при выполнении третьего задания необходимо перевести проект на классовые компоненты с использованием декораторов. 15 | 16 | ## Project setup 17 | ``` 18 | yarn install 19 | ``` 20 | 21 | ### Compiles and hot-reloads for development 22 | ``` 23 | yarn serve 24 | ``` 25 | 26 | ### Compiles and minifies for production 27 | ``` 28 | yarn build 29 | ``` 30 | 31 | ### Lints and fixes files 32 | ``` 33 | yarn lint 34 | ``` 35 | 36 | ### Customize configuration 37 | See [Configuration Reference](https://cli.vuejs.org/config/). 38 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"], 3 | }; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "homework-3", 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 | "core-js": "^3.8.3", 12 | "normalize.css": "^8.0.1", 13 | "vue": "^2.6.14", 14 | "vue-class-component": "^7.2.3", 15 | "vue-property-decorator": "^9.1.2", 16 | "vue-router": "^3.5.3" 17 | }, 18 | "devDependencies": { 19 | "@typescript-eslint/eslint-plugin": "^5.4.0", 20 | "@typescript-eslint/parser": "^5.4.0", 21 | "@vue/cli-plugin-babel": "~5.0.0", 22 | "@vue/cli-plugin-eslint": "~5.0.0", 23 | "@vue/cli-plugin-typescript": "~5.0.0", 24 | "@vue/cli-service": "~5.0.0", 25 | "@vue/eslint-config-airbnb": "^6.0.0", 26 | "@vue/eslint-config-prettier": "^7.0.0", 27 | "@vue/eslint-config-standard": "^6.1.0", 28 | "@vue/eslint-config-typescript": "^9.1.0", 29 | "babel-eslint": "^10.1.0", 30 | "eslint": "^7.32.0", 31 | "eslint-plugin-import": "^2.25.3", 32 | "eslint-plugin-node": "^11.1.0", 33 | "eslint-plugin-promise": "^5.1.0", 34 | "eslint-plugin-vue": "^8.0.3", 35 | "typescript": "~4.5.5", 36 | "vue-template-compiler": "^2.6.14" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 132 | -------------------------------------------------------------------------------- /src/api/index.ts: -------------------------------------------------------------------------------- 1 | export { usersService as api } from "./service"; 2 | -------------------------------------------------------------------------------- /src/api/service.ts: -------------------------------------------------------------------------------- 1 | import users from "@/assets/data/mock.json"; 2 | 3 | import { UsersService } from "@/types/userService"; 4 | 5 | export const usersService: UsersService = { 6 | getUsers: async () => { 7 | return new Promise((resolve) => { 8 | setTimeout(() => { 9 | resolve(users); 10 | }, 1000); 11 | }); 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /src/assets/data/mock.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "7add8d25-727b-4db4-bc0f-decd057c0c25", 4 | "firstName": "Михаил", 5 | "middleName": "Агафонов", 6 | "lastName": "Дмитриевич", 7 | "login": "mdagafonov", 8 | "city": "Москва", 9 | "ticket": "HR-48963", 10 | "citizenship": "Грузия", 11 | "age": "1984-07-21", 12 | "gender": "male", 13 | "registeredDate": "2020-07-21T10:11:08-03:00", 14 | "employmentDate": "2020-08-03T08:54:38-03:00", 15 | "FPStatus": "active", 16 | "accountStatus": "active", 17 | "applicationStatus": "success" 18 | }, 19 | { 20 | "id": "e96baf2b-a4c6-4a18-a376-b7589e2b053e", 21 | "firstName": "Владислав", 22 | "middleName": "Гончаров", 23 | "lastName": "Александрович", 24 | "login": "vagoncharov", 25 | "city": "Москва", 26 | "ticket": "HR-42998", 27 | "citizenship": "Грузия", 28 | "age": "1989-04-26", 29 | "gender": "male", 30 | "registeredDate": "2022-02-28T10:55:31-03:00", 31 | "employmentDate": "2022-03-26T04:36:06-03:00", 32 | "FPStatus": "active", 33 | "accountStatus": "inactive", 34 | "applicationStatus": "idle" 35 | }, 36 | { 37 | "id": "b288f6b6-1bd9-4a1b-9a34-012e29b3a273", 38 | "firstName": "Николай", 39 | "middleName": "Орлов", 40 | "lastName": "Константинович", 41 | "login": "noconstantin", 42 | "city": "Самара", 43 | "ticket": "HR-47231", 44 | "citizenship": "Грузия", 45 | "age": "1989-01-12", 46 | "gender": "male", 47 | "registeredDate": "2021-09-15T05:34:50-03:00", 48 | "employmentDate": "2022-06-06T03:51:44-03:00", 49 | "FPStatus": "inactive", 50 | "accountStatus": "inactive", 51 | "applicationStatus": "idle" 52 | }, 53 | { 54 | "id": "99ec59ba-cd5f-4392-b3eb-248f97346b9c", 55 | "firstName": "Михаил", 56 | "middleName": "Виноградов", 57 | "lastName": "Владиславович", 58 | "login": "mvvladislav", 59 | "city": "Москва", 60 | "ticket": "HR-43648", 61 | "citizenship": "США", 62 | "age": "2002-06-14", 63 | "gender": "male", 64 | "registeredDate": "2019-10-29T06:20:07-03:00", 65 | "employmentDate": "2019-11-19T11:35:31-03:00", 66 | "FPStatus": "inactive", 67 | "accountStatus": "active", 68 | "applicationStatus": "success" 69 | }, 70 | { 71 | "id": "659d9e5c-5bd4-45d3-9da8-a7ac5a2586ba", 72 | "firstName": "Анастасия", 73 | "middleName": "Жукова", 74 | "lastName": "Александровна", 75 | "login": "agalex", 76 | "city": "Санкт-Петербург", 77 | "ticket": "HR-42330", 78 | "citizenship": "Российская Федерация", 79 | "age": "1983-06-20", 80 | "gender": "female", 81 | "registeredDate": "2020-06-21T11:57:46-03:00", 82 | "employmentDate": "2020-10-05T05:57:06-03:00", 83 | "FPStatus": "active", 84 | "accountStatus": "active", 85 | "applicationStatus": "success" 86 | }, 87 | { 88 | "id": "3d3e4338-5ecd-4a22-9e8a-7b698b3cfa8c", 89 | "firstName": "Екатерина", 90 | "middleName": "Жукова", 91 | "lastName": "Константиновна", 92 | "login": "egconstantin", 93 | "city": "Санкт-Петербург", 94 | "ticket": "HR-42531", 95 | "citizenship": "Грузия", 96 | "age": "1996-07-07", 97 | "gender": "female", 98 | "registeredDate": "2020-06-19T12:29:52-03:00", 99 | "employmentDate": "2020-07-04T10:22:55-03:00", 100 | "FPStatus": "inactive", 101 | "accountStatus": "active", 102 | "applicationStatus": "idle" 103 | }, 104 | { 105 | "id": "422aeaaa-d5df-48a6-8d67-30dd9ce09196", 106 | "firstName": "Василий", 107 | "middleName": "Агафонов", 108 | "lastName": "Петрович", 109 | "login": "vapetrovich", 110 | "city": "Санкт-Петербург", 111 | "ticket": "HR-41701", 112 | "citizenship": "Российская Федерация", 113 | "age": "1994-11-03", 114 | "gender": "male", 115 | "registeredDate": "2019-09-02T05:02:29-03:00", 116 | "employmentDate": "2019-10-16T06:34:56-03:00", 117 | "FPStatus": "inactive", 118 | "accountStatus": "active", 119 | "applicationStatus": "idle" 120 | }, 121 | { 122 | "id": "b8898728-b999-40f5-a713-fcdb595b7da0", 123 | "firstName": "Александр", 124 | "middleName": "Гончаров", 125 | "lastName": "Константинович", 126 | "login": "agkonstantin", 127 | "city": "Москва", 128 | "ticket": "HR-45146", 129 | "citizenship": "США", 130 | "age": "1993-04-13", 131 | "gender": "male", 132 | "registeredDate": "2022-10-20T05:31:20-03:00", 133 | "employmentDate": "2022-11-10T08:01:10-03:00", 134 | "FPStatus": "active", 135 | "accountStatus": "active", 136 | "applicationStatus": "success" 137 | }, 138 | { 139 | "id": "019bb508-d222-4524-b93d-5365b10202a8", 140 | "firstName": "Евангелина", 141 | "middleName": "Воробьева", 142 | "lastName": "Геннадьевна", 143 | "login": "egvorobey", 144 | "city": "Санкт-Петербург", 145 | "ticket": "HR-40542", 146 | "citizenship": "Грузия", 147 | "age": "1990-10-04", 148 | "gender": "female", 149 | "registeredDate": "2019-07-25T09:17:08-03:00", 150 | "employmentDate": "2019-08-09T08:22:36-03:00", 151 | "FPStatus": "active", 152 | "accountStatus": "inactive", 153 | "applicationStatus": "idle" 154 | }, 155 | { 156 | "id": "0f2609f8-5aed-46b6-ad14-7d4079842824", 157 | "firstName": "Михаил", 158 | "middleName": "Агафонов", 159 | "lastName": "Александрович", 160 | "login": "amalex", 161 | "city": "Москва", 162 | "ticket": "HR-47984", 163 | "citizenship": "США", 164 | "age": "1989-09-12", 165 | "gender": "male", 166 | "registeredDate": "2019-01-22T09:47:04-03:00", 167 | "employmentDate": "2019-02-02T03:34:08-03:00", 168 | "FPStatus": "active", 169 | "accountStatus": "inactive", 170 | "applicationStatus": "success" 171 | } 172 | ] 173 | -------------------------------------------------------------------------------- /src/assets/fonts/Inter-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/fonts/Inter-Regular.woff -------------------------------------------------------------------------------- /src/assets/fonts/Inter-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/fonts/Inter-Regular.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Inter-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/fonts/Inter-SemiBold.woff -------------------------------------------------------------------------------- /src/assets/fonts/Inter-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/fonts/Inter-SemiBold.woff2 -------------------------------------------------------------------------------- /src/assets/images/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/images/android-chrome-192x192.png -------------------------------------------------------------------------------- /src/assets/images/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/images/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/assets/images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/images/apple-touch-icon.png -------------------------------------------------------------------------------- /src/assets/images/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/images/calendar-input.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/images/favicon-16x16.png -------------------------------------------------------------------------------- /src/assets/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/images/favicon-32x32.png -------------------------------------------------------------------------------- /src/assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/images/favicon.ico -------------------------------------------------------------------------------- /src/assets/images/filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/images/logo copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/images/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/ozon-tech-hw3-vue-tsx/da5cb0b23b646d2861ea66331c76028c53d07420/src/assets/images/mstile-150x150.png -------------------------------------------------------------------------------- /src/assets/images/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 45 | 59 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /src/assets/images/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /src/assets/images/success-dot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/warning-dot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/aside-list.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 171 | -------------------------------------------------------------------------------- /src/components/aside.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 117 | -------------------------------------------------------------------------------- /src/components/card.vue: -------------------------------------------------------------------------------- 1 | 165 | 166 | 408 | -------------------------------------------------------------------------------- /src/components/container.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 41 | -------------------------------------------------------------------------------- /src/components/header-nav.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 104 | -------------------------------------------------------------------------------- /src/components/header.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 55 | -------------------------------------------------------------------------------- /src/components/input-date.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 124 | -------------------------------------------------------------------------------- /src/components/input-radio.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 157 | -------------------------------------------------------------------------------- /src/components/input-text.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 121 | -------------------------------------------------------------------------------- /src/components/main-container.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 43 | -------------------------------------------------------------------------------- /src/components/select.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 117 | -------------------------------------------------------------------------------- /src/constants/index.ts: -------------------------------------------------------------------------------- 1 | export enum ACCOUNT_STATUS { 2 | active = "Загружена кандидатом", 3 | inactive = "Ожидают загрузки", 4 | } 5 | 6 | export enum FP_STATUS { 7 | active = "Активна", 8 | inactive = "Обновлено", 9 | } 10 | 11 | export enum APPLICATION_STATUS { 12 | success = "Активна", 13 | idle = "Обновлено", 14 | } 15 | 16 | export enum GENDER_TITLES { 17 | male = "Мужской", 18 | female = "Женский", 19 | } 20 | 21 | export enum GENDERS { 22 | male = "male", 23 | female = "female", 24 | } 25 | 26 | export enum ROUTES_TITLE { 27 | all = "Все", 28 | waiting = "Ожидают загрузки", 29 | loaded = "Загружены кандидатом" 30 | } 31 | 32 | export enum ROUTES_TO { 33 | all = "/", 34 | waiting = "/waiting", 35 | loaded = "/loaded" 36 | } -------------------------------------------------------------------------------- /src/icons/LogoIcon.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "@/App.vue"; 3 | import "normalize.css"; 4 | 5 | import router from "@/router"; 6 | 7 | Vue.config.productionTip = false; 8 | 9 | new Vue({ 10 | router, 11 | render: (h) => h(App), 12 | }).$mount("#app"); 13 | -------------------------------------------------------------------------------- /src/router/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueRouter, { RouteConfig } from "vue-router"; 3 | 4 | import MainView from "@/views/main-view.vue"; 5 | 6 | import { ROUTES_TO } from "@/constants"; 7 | 8 | Vue.use(VueRouter); 9 | 10 | const routes: Array = [ 11 | { 12 | path: ROUTES_TO.all, 13 | name: "MainView", 14 | component: MainView, 15 | }, 16 | { 17 | path: ROUTES_TO.waiting, 18 | name: "WaitingView", 19 | component: () => import("@/views/waiting-view.vue"), 20 | }, 21 | { 22 | path: ROUTES_TO.loaded, 23 | name: "LoadedView", 24 | component: () => import("@/views/loaded-view.vue"), 25 | }, 26 | ]; 27 | 28 | const router = new VueRouter({ 29 | mode: "history", 30 | routes, 31 | }); 32 | 33 | export default router; 34 | -------------------------------------------------------------------------------- /src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from "vue"; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | 4 | export default Vue; 5 | } 6 | -------------------------------------------------------------------------------- /src/types/events.ts: -------------------------------------------------------------------------------- 1 | export interface HandleInputChange extends Event { 2 | target: HTMLInputElement; 3 | } 4 | 5 | export interface HandleChange extends Event { 6 | target: HTMLElement; 7 | } 8 | -------------------------------------------------------------------------------- /src/types/genders.ts: -------------------------------------------------------------------------------- 1 | import { GENDERS, GENDER_TITLES } from "@/constants"; 2 | 3 | export interface Gender { 4 | title: GENDER_TITLES.male | GENDER_TITLES.female; 5 | gender: GENDERS.male | GENDERS.female; 6 | } 7 | 8 | export type Genders = Gender[]; 9 | -------------------------------------------------------------------------------- /src/types/routes.ts: -------------------------------------------------------------------------------- 1 | export interface Route { 2 | title: string; 3 | to: string; 4 | } 5 | 6 | export type Routes = Route[]; 7 | -------------------------------------------------------------------------------- /src/types/user.ts: -------------------------------------------------------------------------------- 1 | export interface User { 2 | id: string, 3 | firstName: string, 4 | middleName: string, 5 | lastName: string, 6 | login: string, 7 | city: string, 8 | ticket: string, 9 | citizenship: string, 10 | age: string, 11 | gender: string, 12 | registeredDate: string, 13 | employmentDate: string, 14 | FPStatus: string, 15 | accountStatus: string, 16 | applicationStatus: string, 17 | } 18 | 19 | export type MainUserInfo = Pick; 20 | -------------------------------------------------------------------------------- /src/types/userService.ts: -------------------------------------------------------------------------------- 1 | import { User } from "./user"; 2 | 3 | export interface UsersService { 4 | getUsers: () => Promise; 5 | } 6 | -------------------------------------------------------------------------------- /src/utils/formatDate.ts: -------------------------------------------------------------------------------- 1 | function padTo2Digits(num: number): string { 2 | return num.toString().padStart(2, "0"); 3 | } 4 | 5 | export function formatDate(date: Date): string { 6 | return [ 7 | padTo2Digits(date.getDate()), 8 | padTo2Digits(date.getMonth() + 1), 9 | date.getFullYear(), 10 | ].join("."); 11 | } 12 | -------------------------------------------------------------------------------- /src/views/loaded-view.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /src/views/main-view.vue: -------------------------------------------------------------------------------- 1 | 98 | -------------------------------------------------------------------------------- /src/views/waiting-view.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "moduleResolution": "node", 8 | "experimentalDecorators": true, 9 | "noImplicitAny": false, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "useDefineForClassFields": true, 15 | "sourceMap": true, 16 | "resolveJsonModule": true, 17 | "baseUrl": ".", 18 | "types": [ 19 | "webpack-env" 20 | ], 21 | "paths": { 22 | "@/*": [ 23 | "src/*" 24 | ] 25 | }, 26 | "lib": [ 27 | "esnext", 28 | "dom", 29 | "dom.iterable", 30 | "scripthost" 31 | ] 32 | }, 33 | "include": [ 34 | "src/**/*.ts", 35 | "src/**/*.tsx", 36 | "src/**/*.vue", 37 | "tests/**/*.ts", 38 | "tests/**/*.tsx" 39 | , "src/router/index.js", "src/main.js" ], 40 | "exclude": [ 41 | "node_modules" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require("@vue/cli-service"); 2 | module.exports = defineConfig({ 3 | transpileDependencies: true, 4 | }); 5 | --------------------------------------------------------------------------------