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

* delete action

Browse Source 
feature: #6
This commit is contained in:
Denys Seredenko
2023-01-11 20:36:20 +01:00
parent a3f98a1757
commit 15ab49ad7f
7 changed files with 140 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@@ -6,16 +6,18 @@ import { RouterView } from 'vue-router'
<RegisterModal v-if="modal === 'register'" />
<DeregisterModal v-if="modal === 'deregister'" />
<CreateModal v-if="modal === 'createContract'" />
<DeleteModal v-if="modal === 'deleteModal'" />
<RouterView />
</template>
<script>
import { mapActions } from 'vuex'
import CreateModal from './components/modals/CreateModal.vue'
import DeleteModal from './components/modals/DeleteModal.vue'
import DeregisterModal from './components/modals/DeregisterModal.vue'
import RegisterModal from './components/modals/RegisterModal.vue'
export default {
components: { DeregisterModal, RegisterModal, CreateModal },
components: { DeregisterModal, RegisterModal, CreateModal, DeleteModal },
computed: {
modal() {
return this.$store.state.modal.modal

111
src/components/modals/DeleteModal.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<div
id="popup-modal"
tabindex="-1"
class="fixed top-0 left-0 right-0 z-50 flex justify-center text-center p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
<div class="relative w-full h-full max-w-md md:h-auto">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<button
type="button"
class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
data-modal-hide="popup-modal"
@click="closeModal()">
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="p-6 text-center">
<svg
aria-hidden="true"
class="mx-auto mb-4 text-gray-400 w-14 h-14 dark:text-gray-200"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
Bist du sicher, dass du löschen möchtest? <br />
Falls ja - schreib <span class="font-bold">unten ID</span> des Auftrages
</h3>
<p v-for="error of v$.id.$errors" :key="error.$uid" class="text-red-900">
<strong>{{ error.$message }}</strong>
</p>
<input
id="base-input"
v-model="id"
type="text"
placeholder="DZ2022"
class="mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5" />
<button
data-modal-hide="popup-modal"
type="button"
class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2"
@click="this.delete()">
Ja, bin sicher
</button>
<button
data-modal-hide="popup-modal"
type="button"
class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
@click="closeModal()">
Nein, stornieren
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
import { useVuelidate } from '@vuelidate/core'
import { required, sameAs } from '../../main'
import { deleteContract } from '../../service/ContractsService'
export default {
setup() {
return {
v$: useVuelidate()
}
},
data() {
return {
id: ''
}
},
validations() {
return {
id: { required, sameAsState: sameAs(this.selectedContract) }
}
},
computed: {
selectedContract() {
return this.$store.state.contracts.selectedContract
}
},
methods: {
...mapActions(['closeModal', 'setToBeDeletedId']),
async delete() {
const isFormCorrect = await this.v$.$validate()
if (!isFormCorrect) return
deleteContract(this.selectedContract)
await this.$store.commit('setSelectedContract', null)
this.closeModal()
}
}
}
</script>

5
src/locales/de.json
View File

@@ -4,7 +4,8 @@
"yes-button": "Ja",
"no-button": "Nein!",
"validations": {
"required": "{property} ist erforerlig.",
"minLength": "Das Feld {property} muss eine Mindestlänge von {min} haben."
"required" : "{property} ist erforerlig.",
"minLength" : "Das Feld {property} muss eine Mindestlänge von {min} haben.",
"sameAsState" : "Falsches {property}!"
}
}

3
src/locales/en.json
View File

@@ -5,6 +5,7 @@
"no-button": "No!",
"validations": {
"required": "{property} is required.",
"minLength": "The {property} field has a value of '{model}', but it must have a min length of {min}."
"minLength": "The {property} field has a value of '{model}', but it must have a min length of {min}.",
"sameAsState" : "{property} muss gleich sein"
}
}

5
src/main.js
View File

@@ -37,10 +37,9 @@ const withI18nMessage = createI18nMessage({ t: i18n.global.t.bind(i18n) })
// wrap each validator.
export const required = withI18nMessage(validators.required)
// validators that expect a parameter should have `{ withArguments: true }` passed as a second parameter, to annotate they should be wrapped
export const minLength = withI18nMessage(validators.minLength, { withArguments: true })
// or you can provide the param at definition, statically
export const maxLength = withI18nMessage(validators.maxLength(10))
export const maxLength = withI18nMessage(validators.maxLength, { withArguments: true })
export const sameAs = withI18nMessage(validators.sameAs, { withArguments: true })
let app = createApp(App)

16
src/service/ContractsService.js
View File

@@ -90,4 +90,18 @@ export async function createContract(contractId, contractName, contractClient, c
console.error(error)
router.push('/error?message=' + error.message + '&code=' + error.code)
})
}
}
export async function deleteContract(contractId) {
return HttpClient.delete('/contract', {
id: contractId
})
.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)
})
}

7
src/views/ContractsView.vue
View File

@@ -61,7 +61,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
v-if="isVerwaltung"
class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
@click="openDeleteDialog()">
@click="deleteContract(contract.id)">
Delete
</button>
<button
@@ -103,8 +103,9 @@ export default {
},
methods: {
...mapActions(['fetchContracts', 'openModal']),
openDeleteDialog() {
console.log('Prepare to delete')
async deleteContract(selectedId) {
await this.$store.commit('setSelectedContract', selectedId)
this.openModal('deleteModal')
}
}
}