|
|
|
@ -1,28 +1,38 @@
|
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<div style="margin-bottom: 20px;"> |
|
|
|
|
|
|
|
|
|
<MDBContainer class="bg-white vh-100 rounded-4" style="margin-top: 70px;"> |
|
|
|
|
<h3 class="text-secondary mb-4 pt-3" style="border-bottom: 3px solid black;">Type</h3> |
|
|
|
|
<ClientOnly> |
|
|
|
|
<MDBRow tag="form" class="g-3 needs-validation" novalidate @submit.prevent="checkForm"> |
|
|
|
|
<MDBRow tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm"> |
|
|
|
|
<MDBCol md="4"> |
|
|
|
|
<p>Image Galery</p> |
|
|
|
|
</MDBCol> |
|
|
|
|
<MDBCol md="8"> |
|
|
|
|
<MDBRow style="margin-bottom:20px;"> |
|
|
|
|
<MDBCol md="12"> |
|
|
|
|
<MDBInput |
|
|
|
|
label="Description" |
|
|
|
|
label="Description *" |
|
|
|
|
v-model="bezeichnung" |
|
|
|
|
invalidFeedback="Please provide a description of the clothing-type" |
|
|
|
|
validFeedback="Looks good!" |
|
|
|
|
required |
|
|
|
|
/> |
|
|
|
|
</MDBCol> |
|
|
|
|
|
|
|
|
|
<MDBBtn variant="primary" @click="onSubmit()">Neu eintragen</MDBBtn> |
|
|
|
|
<b-button variant="secondary" @click="onUpdate()">Aktualisieren</b-button> |
|
|
|
|
<b-button variant="danger" @click="onDelete()">Löschen</b-button> |
|
|
|
|
<b-button type="reset" variant="danger">Reset</b-button> |
|
|
|
|
</MDBRow> |
|
|
|
|
</ClientOnly> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<ClientOnly> |
|
|
|
|
<MDBTable striped hover bordered> |
|
|
|
|
<MDBRow style="margin-bottom:40px;"> |
|
|
|
|
<MDBCol md="12"> |
|
|
|
|
<MDBBtn class="" color="primary" @click="onSubmit()">NEW</MDBBtn> |
|
|
|
|
<MDBBtn color="secondary" @click="onUpdate()">UPDATE</MDBBtn> |
|
|
|
|
<MDBBtn color="danger" @click="onDelete()">DELETE</MDBBtn> |
|
|
|
|
<MDBBtn type="reset" color="dark">Reset</MDBBtn> |
|
|
|
|
</MDBCol> |
|
|
|
|
</MDBRow> |
|
|
|
|
</MDBCol> |
|
|
|
|
</MDBRow> |
|
|
|
|
<!--<MDBContainer class="bg-white rounded-4">--> |
|
|
|
|
<MDBRow style="margin-bottom:40px;"> |
|
|
|
|
<MDBCol md="12"> |
|
|
|
|
<MDBTable striped hover bordered sm class="rounded-4"> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th scope="col">#</th> |
|
|
|
@ -36,20 +46,24 @@
|
|
|
|
|
</tr> |
|
|
|
|
</tbody> |
|
|
|
|
</MDBTable> |
|
|
|
|
</MDBCol> |
|
|
|
|
</MDBRow> |
|
|
|
|
<!--</MDBContainer>--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<template #fallback> |
|
|
|
|
<!-- this will be rendered on server side --> |
|
|
|
|
<p>Loading comments...</p> |
|
|
|
|
</template> |
|
|
|
|
</ClientOnly> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</MDBContainer> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable } from "mdb-vue-ui-kit"; |
|
|
|
|
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable, MDBContainer } from "mdb-vue-ui-kit"; |
|
|
|
|
import { ref } from "vue"; |
|
|
|
|
|
|
|
|
|
const bezeichnung = ref("e.g. Shirt"); |
|
|
|
|
const bezeichnung = ref(""); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const checkForm = (event: Event) => { |
|
|
|
|