Bücher eintragen: Felder leeren können, Test umgebung
This commit is contained in:
parent
8691dc7c32
commit
fc51c284c1
@ -5,7 +5,46 @@
|
|||||||
md="12"
|
md="12"
|
||||||
>
|
>
|
||||||
<VCard
|
<VCard
|
||||||
v-show="!showEnterBooks"
|
class="mb-6"
|
||||||
|
title="TEST"
|
||||||
|
>
|
||||||
|
<VCardText>
|
||||||
|
<VRow>
|
||||||
|
<VCol>
|
||||||
|
<AppSelect
|
||||||
|
v-model="value"
|
||||||
|
:items="items"
|
||||||
|
item-title="name"
|
||||||
|
item-value="name"
|
||||||
|
label="Select Item"
|
||||||
|
placeholder="Select Item"
|
||||||
|
multiple
|
||||||
|
clearable
|
||||||
|
clear-icon="tabler-x"
|
||||||
|
>
|
||||||
|
<template #selection="{ item }">
|
||||||
|
<VChip>
|
||||||
|
<template #prepend>
|
||||||
|
<VAvatar
|
||||||
|
start
|
||||||
|
:image="item.raw.avatar"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</VChip>
|
||||||
|
</template>
|
||||||
|
</AppSelect>
|
||||||
|
</VCol>
|
||||||
|
</VRow>
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- v-show="!showEnterBooks" -->
|
||||||
|
<!-- ToDo: Wieder einfügen, wenn fertig -->
|
||||||
|
<VCard
|
||||||
class="mb-6"
|
class="mb-6"
|
||||||
title="Bücher eintragen"
|
title="Bücher eintragen"
|
||||||
subtitle="Du kannst ein Buch bei uns nicht finden? Hier kannst du es eintragen!"
|
subtitle="Du kannst ein Buch bei uns nicht finden? Hier kannst du es eintragen!"
|
||||||
@ -14,12 +53,14 @@
|
|||||||
<VRow>
|
<VRow>
|
||||||
<VCol
|
<VCol
|
||||||
v-show="!inputValueISBN"
|
v-show="!inputValueISBN"
|
||||||
cols="12"
|
cols="6"
|
||||||
>
|
>
|
||||||
<AppTextField
|
<AppTextField
|
||||||
v-model="inputValueTitle"
|
v-model="inputValueTitle"
|
||||||
|
clearable
|
||||||
label="Titel eingeben:"
|
label="Titel eingeben:"
|
||||||
placeholder="Harry Potter und der Stein der Weisen"
|
placeholder="Harry Potter und der Stein der Weisen"
|
||||||
|
clear-icon="tabler-x"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<VCol
|
<VCol
|
||||||
@ -30,27 +71,31 @@
|
|||||||
</VCol>
|
</VCol>
|
||||||
<VCol
|
<VCol
|
||||||
v-show="!inputValueTitle"
|
v-show="!inputValueTitle"
|
||||||
cols="12"
|
cols="6"
|
||||||
>
|
>
|
||||||
<AppTextField
|
<AppTextField
|
||||||
id="isbnInput"
|
id="isbnInput"
|
||||||
v-model="inputValueISBN"
|
v-model="inputValueISBN"
|
||||||
|
clearable
|
||||||
type="text"
|
type="text"
|
||||||
label="ISBN eingeben:"
|
label="ISBN eingeben:"
|
||||||
placeholder="978-3-551-55167-7"
|
placeholder="978-3-551-55167-7"
|
||||||
|
clear-icon="tabler-x"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<VCol
|
<VCol
|
||||||
v-show="showButton"
|
v-show="showButton"
|
||||||
cols="12"
|
cols="12"
|
||||||
>
|
>
|
||||||
<VBtn @click="displayBook">
|
<div class="demo-space-x">
|
||||||
Suchen
|
<VBtn @click="displayBook">
|
||||||
<VIcon
|
Suchen
|
||||||
end
|
<VIcon
|
||||||
icon="tabler-search"
|
end
|
||||||
/>
|
icon="tabler-search"
|
||||||
</VBtn>
|
/>
|
||||||
|
</VBtn>
|
||||||
|
</div>
|
||||||
</VCol>
|
</VCol>
|
||||||
|
|
||||||
|
|
||||||
@ -81,14 +126,14 @@
|
|||||||
>
|
>
|
||||||
<VCardText>
|
<VCardText>
|
||||||
<VRow>
|
<VRow>
|
||||||
<!-- Fieberkurve*-->
|
<!-- Fieberkurve* -->
|
||||||
<VCol cols="12">
|
<VCol cols="12">
|
||||||
<AppTextField
|
<AppTextField
|
||||||
label="Fieberkurve* eingeben:"
|
label="Fieberkurve* eingeben:"
|
||||||
placeholder="Fieberkurve"
|
placeholder="Fieberkurve"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Titel*-->
|
<!-- Titel* -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="6"
|
md="6"
|
||||||
@ -99,7 +144,7 @@
|
|||||||
placeholder="Harry Potter und der Stein der Weisen"
|
placeholder="Harry Potter und der Stein der Weisen"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- ISBN*-->
|
<!-- ISBN* -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="6"
|
md="6"
|
||||||
@ -112,17 +157,17 @@
|
|||||||
placeholder="978-3-551-55167-7"
|
placeholder="978-3-551-55167-7"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Untertitel-->
|
<!-- Untertitel -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="6"
|
md="6"
|
||||||
>
|
>
|
||||||
<AppTextField
|
<AppTextField
|
||||||
label="Untertitel eingeben:"
|
label="Untertitel eingeben:"
|
||||||
placeholder="..."
|
placeholder=" "
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Genre* -> 1:n-->
|
<!-- Genre* -> 1:n -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="6"
|
md="6"
|
||||||
@ -139,7 +184,7 @@
|
|||||||
prepend-icon="tabler-filter"
|
prepend-icon="tabler-filter"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Autor/en* -> 1:n-->
|
<!-- Autor/en* -> 1:n -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="6"
|
md="6"
|
||||||
@ -149,7 +194,7 @@
|
|||||||
placeholder="J.K. Rowling"
|
placeholder="J.K. Rowling"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Verlag/e*-->
|
<!-- Verlag/e* -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="6"
|
md="6"
|
||||||
@ -159,7 +204,7 @@
|
|||||||
placeholder="Carlsen Verlag"
|
placeholder="Carlsen Verlag"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Sprache*-->
|
<!-- Sprache* -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="6"
|
md="6"
|
||||||
@ -169,7 +214,7 @@
|
|||||||
placeholder="Deutsch"
|
placeholder="Deutsch"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Seitenanzahl-->
|
<!-- Seitenanzahl -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="6"
|
md="6"
|
||||||
@ -182,7 +227,7 @@
|
|||||||
placeholder="336"
|
placeholder="336"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Erscheinungsdatum-->
|
<!-- Erscheinungsdatum -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="6"
|
md="6"
|
||||||
@ -192,7 +237,7 @@
|
|||||||
placeholder="26. Juni 1998"
|
placeholder="26. Juni 1998"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Format* -> Taschenbuch, Hardcover, E-Book, etc.-->
|
<!-- Format* -> Taschenbuch, Hardcover, E-Book, etc. -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="6"
|
md="6"
|
||||||
@ -202,7 +247,7 @@
|
|||||||
placeholder="Taschenbuch"
|
placeholder="Taschenbuch"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Kurzbeschreibung*-->
|
<!-- Kurzbeschreibung* -->
|
||||||
<VCol cols="12">
|
<VCol cols="12">
|
||||||
<span class="mb-1">Kurzbeschreibung*</span>
|
<span class="mb-1">Kurzbeschreibung*</span>
|
||||||
<ProductDescriptionEditor
|
<ProductDescriptionEditor
|
||||||
@ -211,26 +256,37 @@ der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin
|
|||||||
class="border rounded"
|
class="border rounded"
|
||||||
/>
|
/>
|
||||||
</VCol>
|
</VCol>
|
||||||
<!-- Cover/Umschlagbild*-->
|
<!-- Cover/Umschlagbild* -->
|
||||||
<VCol cols="12">
|
<VCol cols="12">
|
||||||
<!-- 👉 Cover -->
|
<!-- 👉 Cover -->
|
||||||
<!-- <VCardItem>
|
<!--
|
||||||
|
<VCardItem>
|
||||||
<template #title>
|
<template #title>
|
||||||
Buchcover hochladen
|
Buchcover hochladen
|
||||||
</template>
|
</template>
|
||||||
</VCardItem>-->
|
</VCardItem>
|
||||||
|
-->
|
||||||
<DropZone />
|
<DropZone />
|
||||||
</VCol>
|
</VCol>
|
||||||
|
|
||||||
|
|
||||||
<VCol cols="12">
|
<VCol cols="12">
|
||||||
<VBtn>
|
<div class="demo-space-x">
|
||||||
Speichern
|
<VBtn color="success">
|
||||||
<VIcon
|
Buch eintragen
|
||||||
end
|
<VIcon
|
||||||
icon="tabler-device-floppy"
|
end
|
||||||
/>
|
icon="tabler-device-floppy"
|
||||||
</VBtn>
|
/>
|
||||||
|
</VBtn>
|
||||||
|
<VBtn color="error">
|
||||||
|
Löschen
|
||||||
|
<VIcon
|
||||||
|
end
|
||||||
|
icon="tabler-x"
|
||||||
|
/>
|
||||||
|
</VBtn>
|
||||||
|
</div>
|
||||||
</VCol>
|
</VCol>
|
||||||
</VRow>
|
</VRow>
|
||||||
</VCardText>
|
</VCardText>
|
||||||
@ -242,14 +298,8 @@ der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch } from 'vue'
|
import { ref, watch } from 'vue'
|
||||||
import AppTextField from "@core/components/app-form-elements/AppTextField.vue"
|
import AppTextField from "@core/components/app-form-elements/AppTextField.vue"
|
||||||
import DropZone from "@core/components/DropZone.vue";
|
import DropZone from "@core/components/DropZone.vue"
|
||||||
import AppCombobox from "@core/components/app-form-elements/AppCombobox.vue";
|
import AppCombobox from "@core/components/app-form-elements/AppCombobox.vue"
|
||||||
|
|
||||||
const showEnterBooks = ref(false)
|
|
||||||
|
|
||||||
function displayedEnterBooks() {
|
|
||||||
showEnterBooks.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const inputValueTitle = ref('')
|
const inputValueTitle = ref('')
|
||||||
const inputValueISBN = ref('')
|
const inputValueISBN = ref('')
|
||||||
@ -258,7 +308,6 @@ const displayedBooks = ref(false)
|
|||||||
|
|
||||||
watch(inputValueTitle, newValue => {
|
watch(inputValueTitle, newValue => {
|
||||||
showButton.value = newValue !== ''
|
showButton.value = newValue !== ''
|
||||||
console.log("Test1")
|
|
||||||
if (!showButton.value){
|
if (!showButton.value){
|
||||||
displayedBooks.value = false
|
displayedBooks.value = false
|
||||||
}
|
}
|
||||||
@ -266,7 +315,6 @@ watch(inputValueTitle, newValue => {
|
|||||||
|
|
||||||
watch(inputValueISBN, newValue => {
|
watch(inputValueISBN, newValue => {
|
||||||
showButton.value = newValue !== ''
|
showButton.value = newValue !== ''
|
||||||
console.log("Test2")
|
|
||||||
if (!showButton.value){
|
if (!showButton.value){
|
||||||
displayedBooks.value = false
|
displayedBooks.value = false
|
||||||
}
|
}
|
||||||
@ -277,10 +325,31 @@ function displayBook() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//////////////////
|
//////////////////
|
||||||
|
const showEnterBooks = ref(true) /// false setzten!
|
||||||
|
|
||||||
|
function displayedEnterBooks() {
|
||||||
|
showEnterBooks.value = true
|
||||||
|
}
|
||||||
const seitenanzahl = ref(null)
|
const seitenanzahl = ref(null)
|
||||||
|
|
||||||
//////////////////
|
// import genre Icons
|
||||||
|
const avatar1 = {
|
||||||
|
icon: 'tabler-compass',
|
||||||
|
size: '28',
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
name: 'Michi',
|
||||||
|
avatar: avatar1,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const value = ref(['Michi'])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const content = ref(`<p>
|
const content = ref(`<p>
|
||||||
Der elfjährige Harry Potter,<br>der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin Dudley lebt, erfährt an seinem elften Geburtstag, dass er ein Zauberer ist. Er erhält einen Platz auf der Schule für Hexerei und Zauberei Hogwarts, wo er neue Freunde findet und in die Geheimnisse der Zauberwelt eintaucht.
|
Der elfjährige Harry Potter,<br>der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin Dudley lebt, erfährt an seinem elften Geburtstag, dass er ein Zauberer ist. Er erhält einen Platz auf der Schule für Hexerei und Zauberei Hogwarts, wo er neue Freunde findet und in die Geheimnisse der Zauberwelt eintaucht.
|
||||||
</br>`)
|
</br>`)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user