132
src/components/modals/CreateModal.vue
Normal file
132
src/components/modals/CreateModal.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<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">
|
||||
<p class="text-xl font-semibold font-sans">Create Auftrag</p>
|
||||
<p v-for="error of v$.$errors" :key="error.$uid" class="text-red-900">
|
||||
<strong>{{ error.$message }}</strong>
|
||||
</p>
|
||||
<div class="pt-3">
|
||||
<label
|
||||
for="base-input"
|
||||
class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>Auftragsnummer</label
|
||||
>
|
||||
<input
|
||||
id="base-input"
|
||||
v-model="id"
|
||||
type="text"
|
||||
class="bg-gray-50 border 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" />
|
||||
</div>
|
||||
<div class="pt-3">
|
||||
<label
|
||||
for="base-input"
|
||||
class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>Name</label
|
||||
>
|
||||
<input
|
||||
id="base-input"
|
||||
v-model="name"
|
||||
type="text"
|
||||
class="bg-gray-50 border 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" />
|
||||
</div>
|
||||
<div class="pt-3">
|
||||
<label
|
||||
for="base-input"
|
||||
class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>Auftraggeber</label
|
||||
>
|
||||
<input
|
||||
id="base-input"
|
||||
v-model="auftraggeber"
|
||||
type="text"
|
||||
class="bg-gray-50 border 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" />
|
||||
</div>
|
||||
<div class="pt-3">
|
||||
<label
|
||||
for="base-input"
|
||||
class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>Passwort</label
|
||||
>
|
||||
<input
|
||||
id="base-input"
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="bg-gray-50 border 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" />
|
||||
</div>
|
||||
<div class="pt-3">
|
||||
<button
|
||||
class="bg-emerald-500 text-white active:bg-emerald-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="createContract()">
|
||||
Create Auftrag
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
import { createContract as serviceCreateContract } from '../../service/ContractsService'
|
||||
import { useVuelidate } from '@vuelidate/core'
|
||||
import { required, minLength } from '../../main'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
v$: useVuelidate()
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
name: '',
|
||||
auftraggeber: '',
|
||||
password: ''
|
||||
}
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
id: { required },
|
||||
name: { required },
|
||||
auftraggeber: { required },
|
||||
password: { required, minLength: minLength(7) }
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
...mapActions(['closeModal']),
|
||||
async createContract() {
|
||||
const isFormCorrect = await this.v$.$validate()
|
||||
if (!isFormCorrect) return
|
||||
|
||||
serviceCreateContract(this.id, this.name, this.auftraggeber, this.password)
|
||||
this.closeModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user