MCMichinator/skoutz-relaunch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bücher eintragen: Felder leeren können, Test umgebung

Browse Source
This commit is contained in:
Michi Tomaschko 2024-07-15 17:45:17 +02:00
parent 8691dc7c32
commit fc51c284c1
1 changed files with 114 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
src/pages/buecher-eintragen.vue
View File

@ -5,7 +5,46 @@
md="12"
>
<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"
title="Bücher eintragen"
subtitle="Du kannst ein Buch bei uns nicht finden? Hier kannst du es eintragen!"
@ -14,12 +53,14 @@
<VRow>
<VCol
v-show="!inputValueISBN"
cols="12"
cols="6"
>
<AppTextField
v-model="inputValueTitle"
clearable
label="Titel eingeben:"
placeholder="Harry Potter und der Stein der Weisen"
clear-icon="tabler-x"
/>
</VCol>
<VCol
@ -30,27 +71,31 @@
</VCol>
<VCol
v-show="!inputValueTitle"
cols="12"
cols="6"
>
<AppTextField
id="isbnInput"
v-model="inputValueISBN"
clearable
type="text"
label="ISBN eingeben:"
placeholder="978-3-551-55167-7"
clear-icon="tabler-x"
/>
</VCol>
<VCol
v-show="showButton"
cols="12"
>
<VBtn @click="displayBook">
Suchen
<VIcon
end
icon="tabler-search"
/>
</VBtn>
<div class="demo-space-x">
<VBtn @click="displayBook">
Suchen
<VIcon
end
icon="tabler-search"
/>
</VBtn>
</div>
</VCol>
@ -81,14 +126,14 @@
>
<VCardText>
<VRow>
<!-- Fieberkurve*-->
<!-- Fieberkurve* -->
<VCol cols="12">
<AppTextField
label="Fieberkurve* eingeben:"
placeholder="Fieberkurve"
/>
</VCol>
<!-- Titel*-->
<!-- Titel* -->
<VCol
cols="12"
md="6"
@ -99,7 +144,7 @@
placeholder="Harry Potter und der Stein der Weisen"
/>
</VCol>
<!-- ISBN*-->
<!-- ISBN* -->
<VCol
cols="12"
md="6"
@ -112,17 +157,17 @@
placeholder="978-3-551-55167-7"
/>
</VCol>
<!-- Untertitel-->
<!-- Untertitel -->
<VCol
cols="12"
md="6"
>
<AppTextField
label="Untertitel eingeben:"
placeholder="..."
placeholder=" "
/>
</VCol>
<!-- Genre* -> 1:n-->
<!-- Genre* -> 1:n -->
<VCol
cols="12"
md="6"
@ -139,7 +184,7 @@
prepend-icon="tabler-filter"
/>
</VCol>
<!-- Autor/en* -> 1:n-->
<!-- Autor/en* -> 1:n -->
<VCol
cols="12"
md="6"
@ -149,7 +194,7 @@
placeholder="J.K. Rowling"
/>
</VCol>
<!-- Verlag/e*-->
<!-- Verlag/e* -->
<VCol
cols="12"
md="6"
@ -159,7 +204,7 @@
placeholder="Carlsen Verlag"
/>
</VCol>
<!-- Sprache*-->
<!-- Sprache* -->
<VCol
cols="12"
md="6"
@ -169,7 +214,7 @@
placeholder="Deutsch"
/>
</VCol>
<!-- Seitenanzahl-->
<!-- Seitenanzahl -->
<VCol
cols="12"
md="6"
@ -182,7 +227,7 @@
placeholder="336"
/>
</VCol>
<!-- Erscheinungsdatum-->
<!-- Erscheinungsdatum -->
<VCol
cols="12"
md="6"
@ -192,7 +237,7 @@
placeholder="26. Juni 1998"
/>
</VCol>
<!-- Format* -> Taschenbuch, Hardcover, E-Book, etc.-->
<!-- Format* -> Taschenbuch, Hardcover, E-Book, etc. -->
<VCol
cols="12"
md="6"
@ -202,7 +247,7 @@
placeholder="Taschenbuch"
/>
</VCol>
<!-- Kurzbeschreibung*-->
<!-- Kurzbeschreibung* -->
<VCol cols="12">
<span class="mb-1">Kurzbeschreibung*</span>
<ProductDescriptionEditor
@ -211,26 +256,37 @@ der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin
class="border rounded"
/>
</VCol>
<!-- Cover/Umschlagbild*-->
<!-- Cover/Umschlagbild* -->
<VCol cols="12">
<!-- 👉 Cover -->
<!-- <VCardItem>
<!--
<VCardItem>
<template #title>
Buchcover hochladen
Buchcover hochladen
</template>
</VCardItem>-->
</VCardItem>
-->
<DropZone />
</VCol>
<VCol cols="12">
<VBtn>
Speichern
<VIcon
end
icon="tabler-device-floppy"
/>
</VBtn>
<div class="demo-space-x">
<VBtn color="success">
Buch eintragen
<VIcon
end
icon="tabler-device-floppy"
/>
</VBtn>
<VBtn color="error">
Löschen
<VIcon
end
icon="tabler-x"
/>
</VBtn>
</div>
</VCol>
</VRow>
</VCardText>
@ -242,14 +298,8 @@ der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin
<script setup>
import { ref, watch } from 'vue'
import AppTextField from "@core/components/app-form-elements/AppTextField.vue"
import DropZone from "@core/components/DropZone.vue";
import AppCombobox from "@core/components/app-form-elements/AppCombobox.vue";
const showEnterBooks = ref(false)
function displayedEnterBooks() {
showEnterBooks.value = true
}
import DropZone from "@core/components/DropZone.vue"
import AppCombobox from "@core/components/app-form-elements/AppCombobox.vue"
const inputValueTitle = ref('')
const inputValueISBN = ref('')
@ -258,7 +308,6 @@ const displayedBooks = ref(false)
watch(inputValueTitle, newValue => {
showButton.value = newValue !== ''
console.log("Test1")
if (!showButton.value){
displayedBooks.value = false
}
@ -266,7 +315,6 @@ watch(inputValueTitle, newValue => {
watch(inputValueISBN, newValue => {
showButton.value = newValue !== ''
console.log("Test2")
if (!showButton.value){
displayedBooks.value = false
}
@ -277,10 +325,31 @@ function displayBook() {
}
//////////////////
const showEnterBooks = ref(true) /// false setzten!
function displayedEnterBooks() {
showEnterBooks.value = true
}
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>
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>`)