CubeBit/fst-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases Wiki Activity

* authorization added

Browse Source
This commit is contained in:
Denys Seredenko
2023-01-16 01:01:03 +01:00
parent 1834a68aea
commit 0b3a261ecf
8 changed files with 154 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/HttpClient.js
View File

@@ -1,9 +1,5 @@
import axios from 'axios'
export default axios.create({
baseURL: 'http://localhost:8080',
headers: {
'Authorization' : 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJkaUZYRnFmVkpqNURzWWIyX3NQYkhfZ1dQQkVjNDhWcjFhOUhHTGlvSUtZIn0.eyJleHAiOjE2NzM3NDUxNTksImlhdCI6MTY3Mzc0NDg1OSwianRpIjoiNWViNDIxYTktNTYzZS00OGZjLWE0MmYtMDI0ZTg4ZDZiM2MzIiwiaXNzIjoiaHR0cHM6Ly9hdXRoLmRlbnlzb2Z0LmV1L3JlYWxtcy9GU1QiLCJhdWQiOiJhY2NvdW50Iiwic3ViIjoiYTZjM2RhZDQtNmMxYS00MDMwLThkNmMtZmI4MTgzNjU2YmQyIiwidHlwIjoiQmVhcmVyIiwiYXpwIjoiYmFja2VuZCIsInNlc3Npb25fc3RhdGUiOiI2YTUxZTQ2Yy0xMzc5LTQ3YzQtODczNS1mYmM4MWMzOTNkNDIiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbIioiXSwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbImRlZmF1bHQtcm9sZXMtZnN0Iiwib2ZmbGluZV9hY2Nlc3MiLCJzdXBlcmFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6InByb2ZpbGUgZW1haWwiLCJzaWQiOiI2YTUxZTQ2Yy0xMzc5LTQ3YzQtODczNS1mYmM4MWMzOTNkNDIiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwibmFtZSI6IkRlbnlzIFNlcmVkZW5rbyIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IkRlbnlzIiwiZmFtaWx5X25hbWUiOiJTZXJlZGVua28iLCJlbWFpbCI6ImRlbmlzLXNlcmVkZW5rb0B1a3IubmV0In0.kd24amtNoQNNMnosnmx2K7oS_lZJ-J-DmM8bYOQgBPxwiIyWksVrcorQvZSLeo9vgU1XtrLntdLi3Awe6pCsH2PFYgbFdw4scwxX16rt1cKn_uJDV3p-VW3-LTg916BRphqy7ZZSCK13xxutmXllBOgH9YPY4BfOy5DVxCP4v_QftVDk02Yba92MpYR4y6sRec0AheonzJbGRWIhGiLlI0cuPGRJYe6_dKK9Tt4nMLsN9RV1c05Z1ZlsSfvyJH1Hd4JcqBrR5ERPZsUIaYXbH6awG2NvIxmUV83Zus5Y-CoiWFDzpFDiReIVLKXzNF22Prjry8SaoLkmS7O32fe9CQ'
},
timeout: 4000
})

14
src/components/modals/ChangeStatusModal.vue
View File

@@ -30,12 +30,13 @@
v-model="selected"
class="bg-gray-50 border mt-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option value="nothing" selected>Choose a status</option>
<option v-for="status in statuses" :key="status" :value="status">
{{ status }}
<option v-for="status in statuses" :key="status.position" :value="status.name">
{{ status.name }}
</option>
</select>
<button
class="inline-block px-6 mt-3 py-2.5 bg-green-500 text-white font-medium text-normal rounded shadow-md">
class="inline-block px-6 mt-3 py-2.5 bg-green-500 text-white font-medium text-normal rounded shadow-md"
@click="changeStatus()">
Wächseln
</button>
</div>
@@ -46,7 +47,7 @@
<script>
import { mapActions } from 'vuex'
import router from '../../router/index'
import { getStatuses, changeStatus } from '../../service/ContractsService'
import { getStatuses, postChangeStatus } from '../../service/ContractsService'
export default {
data() {
@@ -66,14 +67,15 @@ export default {
methods: {
...mapActions(['closeModal']),
changeStatus() {
// TODO: selected is not defined
const id = this.selectedContract
if (id === null) {
this.closeModal()
router.push('/error?message=' + 'Contract not found' + '&code=404')
}
if (selected === 'nothing') return
if (this.selected === 'nothing') return
//TODO: provide here contractID
changeStatus(id, this.selected)
postChangeStatus(id, this.selected)
.then(resp => {
this.closeModal()
this.$router.go()

2
src/components/tabs/ClientTab.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="bg-zinc-50">
<div v-if="contract.client" class="bg-zinc-50">
<div class="py-2">
<table class="w-full table-auto">
<tr class="border-b">

6
src/components/tabs/CommentsTab.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="bg-zinc-50">
<div v-if="contract" class="bg-zinc-50">
<div class="flex flex-row justify-center py-5">
<ul class="justify-around">
<ul v-if="contract.comments" class="justify-around">
<li
v-for="comment in contract.comments"
:key="comment.id"
@@ -85,7 +85,7 @@ export default {
const comment = {
name: this.name,
text: this.message,
message: this.message,
date: new Date()
}

31
src/components/tabs/ContractTab.vue
View File

@@ -11,7 +11,7 @@
<button
type="button"
class="inline-block max-sm:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md"
@click="openModal('changeStatus')">
@click="changeStatus()">
Status wächseln
</button>
<button
@@ -48,13 +48,21 @@
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
<div class="mt-7 mb-">
<div class="bg-slate-200 relative h-[10px] w-full rounded-2xl">
<div class="bg-blue-600 absolute top-0 left-0 h-full w-[75%] rounded-2xl">
<div
v-if="amountOfStatuses"
class="bg-blue-600 absolute top-0 left-0 h-full rounded-2xl"
:style="
'width: ' +
Math.round((contract.status.position / amountOfStatuses) * 100) +
'%'
">
<!-- TODO: calculate in percents progress -->
<span
class="bg-blue-600 absolute -right-4 bottom-full mb-2 rounded-sm py-1 px-2 text-xs font-semibold text-white">
class="bg-blue-600 absolute bottom-full mb-2 rounded-sm py-1 px-2 text-xs font-semibold text-white"
style="right: 1%">
<span
class="bg-blue-600 absolute bottom-[-2px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"></span>
75%
class="bg-blue-600 absolute bottom-[-2px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"></span>
{{ Math.round((contract.status.position / amountOfStatuses) * 100) }} %
</span>
</div>
</div>
@@ -115,6 +123,7 @@
<script>
import { moveToNextStep } from '../../service/ContractsService'
import { mapActions } from 'vuex'
import { getAmountOfStatuses } from '../../service/ContractsService'
export default {
props: {
@@ -123,6 +132,14 @@ export default {
default: () => ({})
}
},
data() {
return {
amountOfStatuses: 1
}
},
async mounted() {
this.amountOfStatuses = await getAmountOfStatuses()
},
methods: {
...mapActions(['openModal']),
async nextStep() {
@@ -133,6 +150,10 @@ export default {
.catch(error => {
this.$router.push('/error?message=' + error.message + '&code=' + error.code)
})
},
async changeStatus() {
await this.$store.commit('setSelectedContract', this.contract.id)
this.openModal('changeStatus')
}
}
}

122
src/service/ContractsService.js
View File

@@ -1,13 +1,18 @@
import HttpClient from '../api/HttpClient'
import router from '../router'
import store from '../store/index'
//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
export async function getContracts(authToken) {
return HttpClient.get('contracts', {
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
}) //TODO: provide here auth header
.then(resp => {
return resp.data
})
@@ -20,7 +25,11 @@ export async function getContracts() {
//Auth: provide auth token in request
//OnError: redirect to page /error?message=somemessage&code=404
export async function getOpenContracts() {
return HttpClient.get('contracts/open') //TODO: provide here auth header
return HttpClient.get('contracts/open', {
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
}) //TODO: provide here auth header
.then(resp => {
return resp.data.openContracts
})
@@ -34,8 +43,13 @@ export async function getOpenContracts() {
//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: identifier } })
export async function getContractById(identifier, authToken) {
return HttpClient.get('/contract', {
params: { id: identifier },
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
})
.then(resp => {
//TODO: send also auth token with request
return resp.data
@@ -47,10 +61,18 @@ export async function getContractById(identifier) {
}
export async function applyContract(contractID, prefRole) {
return HttpClient.post('/contract/apply', {
return HttpClient.post(
'/contract/apply',
{
id: contractID,
role: prefRole
})
},
{
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
}
)
.then(resp => {
//TODO: send also auth token with request
return resp.data
@@ -62,9 +84,17 @@ export async function applyContract(contractID, prefRole) {
}
export async function misapply(contractID) {
return HttpClient.post('/contract/misapply', {
return HttpClient.post(
'/contract/misapply',
{
id: contractID
})
},
{
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
}
)
.then(resp => {
//TODO: send also auth token with request
return resp.data
@@ -76,16 +106,28 @@ export async function misapply(contractID) {
}
export async function createContract(contractId, contractName, contractClient, contractPassword) {
return HttpClient.post('/contract/create', {
return HttpClient.post(
'/contract/create',
{
id: contractId,
name: contractName,
client: contractClient,
password: contractPassword
})
},
{
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
}
)
}
export async function deleteContract(contractId) {
return HttpClient.delete('/contract/delete?id=' + contractId)
return HttpClient.delete('/contract/delete?id=' + contractId, {
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
})
.then(resp => {
//TODO: send also auth token with request
return resp.data
@@ -97,20 +139,34 @@ export async function deleteContract(contractId) {
}
export async function saveComment(comment, contractId) {
return HttpClient.post('/contract/' + contractId + '/comments', comment)
return HttpClient.post('/contract/' + contractId + '/comments', comment, {
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
export async function moveToNextStep(contractId) {
return HttpClient.post('/contract/nextstep', {
id: contractId
})
}
export async function moveToNextStep(contractId) {
return HttpClient.post(
'/contract/nextstep?id=' + contractId,
{},
{
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
}
)
}
export async function getStatuses(contractId) {
return HttpClient.get('/statuses')
return HttpClient.get('/statuses', {
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
})
.then(resp => {
//TODO: send also auth token with request
return resp.data.statuses
return resp.data
})
.catch(error => {
console.error(error)
@@ -118,10 +174,34 @@ export async function getStatuses(contractId) {
})
}
export async function changeStatus(contractId, newStatus) {
export async function postChangeStatus(contractId, newStatus) {
//TODO: send also auth token with request
return HttpClient.post('/contract/status', {
return HttpClient.post(
'/contract/status',
{
id: contractId,
status: newStatus
},
{
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
}
)
}
export async function getAmountOfStatuses(token) {
return HttpClient.get('/statuses/amount', {
headers: {
Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
}
})
.then(resp => {
//TODO: send also auth token with request
return resp.data
})
.catch(error => {
console.error(error)
router.push('/error?message=' + error.message + '&code=' + error.code)
})
}

5
src/store/contracts.module.js
View File

@@ -1,3 +1,4 @@
import store from '.'
import { getContracts, getContractById, getOpenContracts } from '../service/ContractsService'
export default {
@@ -23,11 +24,11 @@ export default {
},
actions: {
async fetchContracts({ commit }) {
const contracts = await getContracts()
const contracts = await getContracts(store.state.keycloak.keycloak.token)
commit('initContracts', contracts)
},
async fetchContractById({ commit, state }, id) {
const contract = await getContractById(id)
const contract = await getContractById(id, store.state.keycloak.keycloak.token)
commit('setCurrentContract', contract)
return state.currentContract
},

2
src/views/ContractView.vue
View File

@@ -81,7 +81,7 @@ export default {
if (id === null) {
this.$router.push('/error?message=' + 'Bad id' + '&code=404') //TODO: check if works
}
this.fetchContractById(id)
this.fetchContractById(id, this.$store.state.keycloak.keycloak.token)
},
methods: {
...mapActions(['fetchContractById']),