From 0fc5cbe8e86b778325e1484d4a2c47faefe27e8b Mon Sep 17 00:00:00 2001 From: Denys Seredenko Date: Fri, 6 Jan 2023 00:34:35 +0100 Subject: [PATCH] * Page for single contract feature: #9 --- src/api/HttpClient.js | 2 +- src/components/tabs/ClientTab.vue | 42 ++++++++++++++ src/components/tabs/CommentsTab.vue | 53 +++++++++++++++++ src/components/tabs/ContractTab.vue | 75 ++++++++++++++++++++++++ src/main.js | 13 ++++- src/router/index.js | 9 +++ src/service/ContractsService.js | 33 +++++++++++ src/service/getContracts.js | 12 ---- src/store/contracts.module.js | 14 +++-- src/views/ContractView.vue | 90 +++++++++++++++++++++++++++++ src/views/ContractsView.vue | 10 ++-- 11 files changed, 331 insertions(+), 22 deletions(-) create mode 100644 src/components/tabs/ClientTab.vue create mode 100644 src/components/tabs/CommentsTab.vue create mode 100644 src/components/tabs/ContractTab.vue create mode 100644 src/service/ContractsService.js delete mode 100644 src/service/getContracts.js create mode 100644 src/views/ContractView.vue diff --git a/src/api/HttpClient.js b/src/api/HttpClient.js index e6a177c..06b49ea 100644 --- a/src/api/HttpClient.js +++ b/src/api/HttpClient.js @@ -1,6 +1,6 @@ import axios from 'axios' export default axios.create({ - baseURL: 'https://88c09a70-ab85-412a-9bd3-407afe8986a1.mock.pstmn.io/', + baseURL: 'https://5f672efd-7bb4-4147-b5f7-64d3fa1a3873.mock.pstmn.io/', timeout: 4000 }) diff --git a/src/components/tabs/ClientTab.vue b/src/components/tabs/ClientTab.vue new file mode 100644 index 0000000..b856598 --- /dev/null +++ b/src/components/tabs/ClientTab.vue @@ -0,0 +1,42 @@ + + \ No newline at end of file diff --git a/src/components/tabs/CommentsTab.vue b/src/components/tabs/CommentsTab.vue new file mode 100644 index 0000000..69240e2 --- /dev/null +++ b/src/components/tabs/CommentsTab.vue @@ -0,0 +1,53 @@ + + \ No newline at end of file diff --git a/src/components/tabs/ContractTab.vue b/src/components/tabs/ContractTab.vue new file mode 100644 index 0000000..264fa3a --- /dev/null +++ b/src/components/tabs/ContractTab.vue @@ -0,0 +1,75 @@ + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e6d25fe..6b47858 100644 --- a/src/main.js +++ b/src/main.js @@ -5,13 +5,24 @@ import { createI18n } from './i18n' import store from './store' import { library } from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' -import { faUserSecret, faPenToSquare } from '@fortawesome/free-solid-svg-icons' +import { + faUserSecret, + faPenToSquare, + faEnvelope, + faArrowUpRightFromSquare, + faCircleUser, + faUserLarge +} from '@fortawesome/free-solid-svg-icons' import './assets/main.css' /* add icons to the library */ library.add(faUserSecret) library.add(faPenToSquare) +library.add(faEnvelope) +library.add(faArrowUpRightFromSquare) +library.add(faCircleUser) +library.add(faUserLarge) const i18n = createI18n() diff --git a/src/router/index.js b/src/router/index.js index 8adbf91..ca4b1c7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -69,6 +69,15 @@ const router = createRouter({ requiresAuth: false } }, + { + path: '/contract', + name: 'contract', + // this page is lazy-loaded when the route is visited. + component: () => import('../views/ContractView.vue'), + meta: { + requiresAuth: false + } + }, { path: '/forbidden', name: 'forbidden', diff --git a/src/service/ContractsService.js b/src/service/ContractsService.js new file mode 100644 index 0000000..d64efa9 --- /dev/null +++ b/src/service/ContractsService.js @@ -0,0 +1,33 @@ +import HttpClient from '../api/HttpClient' +import router from '../router' + +//Request in order to retrieve all contracts and print in table +//Backend: extra roles check. Allow admin, verwaltung, employee. +//REST: GET /contracts +//Auth: provide auth token in request +//OnError: redirect to page /error?message=somemessage&code=404 +export async function getContracts() { + return HttpClient.get('contracts') //todo: provide here auth header + .then(resp => { + return resp.data.contracts + }) + .catch(error => { + router.push('/error?message=' + error.message + '&code=' + error.code) + }) +} + +//Request in order to retrieve specific contract using ID +//Backend: extra roles check. Allow admin, verwaltung, employee. +//REST: GET /contract?id=someId +//Auth: provide auth token in request +//OnError: redirect to page /error?message=somemessage&code=404 +export async function getContractById(identifier) { + return HttpClient.get('/contract', { params: { id: 'TESTID' } }) + .then(resp => { + //todo: send also auth token with request + return resp.data + }) + .catch(error => { + router.push('/error?message=' + error.message + '&code=' + error.code) + }) +} diff --git a/src/service/getContracts.js b/src/service/getContracts.js deleted file mode 100644 index d79c3cf..0000000 --- a/src/service/getContracts.js +++ /dev/null @@ -1,12 +0,0 @@ -import HttpClient from '../api/HttpClient' -import router from '../router' - -export async function getContracts() { - return HttpClient.get('contracts') - .then(resp => { - return resp.data.contracts - }) - .catch(error => { - router.push('/error?message=' + error.message + '&code=' + error.code) - }) -} diff --git a/src/store/contracts.module.js b/src/store/contracts.module.js index 72f2117..4676d7d 100644 --- a/src/store/contracts.module.js +++ b/src/store/contracts.module.js @@ -1,20 +1,26 @@ -import { getContracts } from '../service/getContracts' -import HttpClient from '../api/HttpClient' -import router from '../router' +import { getContracts, getContractById } from '../service/ContractsService' export default { state: () => ({ - contracts: [] + contracts: [], + currentContract: null }), mutations: { initContracts(state, data) { state.contracts = data + }, + setCurrentContract(state, data) { + state.currentContract = data } }, actions: { async fetchContracts({ commit }) { const contracts = await getContracts() commit('initContracts', contracts) + }, + async fetchContractById({ commit }, id) { + const currentContract = await getContractById(id) + commit('setCurrentContract', currentContract) } }, getters: {} diff --git a/src/views/ContractView.vue b/src/views/ContractView.vue new file mode 100644 index 0000000..0e96eff --- /dev/null +++ b/src/views/ContractView.vue @@ -0,0 +1,90 @@ + + \ No newline at end of file diff --git a/src/views/ContractsView.vue b/src/views/ContractsView.vue index b90dffa..b6fa98e 100644 --- a/src/views/ContractsView.vue +++ b/src/views/ContractsView.vue @@ -56,10 +56,12 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; > Update - + + +