Compare commits

...

2 Commits

Author SHA1 Message Date
8a817f8be4 Bücher eintragen: Alle Felder + Eingabe Titel/ISBN 2024-07-14 17:16:30 +02:00
a973f3ce8c Buchsuche: Text tauschen 2024-07-14 17:15:23 +02:00
3 changed files with 216 additions and 67 deletions

6
package-lock.json generated
View File

@ -44,6 +44,7 @@
"vue-i18n": "9.10.1",
"vue-prism-component": "2.0.0",
"vue-router": "4.3.0",
"vue-the-mask": "^0.11.1",
"vue3-apexcharts": "1.5.2",
"vue3-perfect-scrollbar": "1.6.1",
"vuetify": "3.5.2",
@ -12749,6 +12750,11 @@
"vue": ">=3.0.0"
}
},
"node_modules/vue-the-mask": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/vue-the-mask/-/vue-the-mask-0.11.1.tgz",
"integrity": "sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ=="
},
"node_modules/vue/node_modules/@vue/compiler-core": {
"version": "3.4.21",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",

View File

@ -1,53 +1,129 @@
<template>
<VRow class="match-height">
<VRow>
<VCol
cols="12"
md="12"
>
<VCard
title="Bücher eintragen"
subtitle="Du kannst ein Buch bei uns nicht finden? Hier kannst du es eintragen!"
/>
</VCol>
<VCol
cols="12"
md="12"
>
<!--
<VCard
title="Bücher eintragen"
subtitle="Dir fehlt ein Buch? Hier kannst du es eintragen!"
>
-->
<VCard
class="mb-6"
title="Buch Informationen"
title="Bücher eintragen"
subtitle="Du kannst ein Buch bei uns nicht finden? Hier kannst du es eintragen!"
>
<VCardText>
<VRow>
<VCol
v-show="!inputValueISBN"
cols="12"
md="6"
>
<AppTextField
label="Titel"
v-model="inputValueTitle"
label="Titel eingeben:"
placeholder="Harry Potter und der Stein der Weisen"
/>
</VCol>
<VCol
v-show="!inputValueTitle && !inputValueISBN"
cols="12"
>
oder
</VCol>
<VCol
v-show="!inputValueTitle"
cols="12"
>
<AppTextField
id="isbnInput"
v-model="inputValueISBN"
type="text"
label="ISBN eingeben:"
placeholder="978-3-551-55167-7"
/>
</VCol>
<VCol
v-show="showButton"
cols="12"
>
<VBtn @click="displayBook">
Suchen
<VIcon
end
icon="tabler-search"
/>
</VBtn>
</VCol>
<VCol
v-show="displayedBooks"
cols="12"
>
<VBtn
variant="text"
color="error"
@click="displayBook"
>
Wurde dein Buch nicht gefunden? Dann trage es jetzt ein!
</VBtn>
</VCol>
</VRow>
</VCardText>
</VCard>
<VCard
class="mb-6"
title="Buch eintragen"
>
<VCardText>
<VRow>
<!-- Fieberkurve*-->
<VCol cols="12">
<AppTextField
label="Fieberkurve* eingeben:"
placeholder="Fieberkurve"
/>
</VCol>
<!-- Titel*-->
<VCol
cols="12"
md="6"
>
<AppTextField
label="ISBN"
v-model="inputValueTitle"
label="Titel eingeben:"
placeholder="Harry Potter und der Stein der Weisen"
/>
</VCol>
<!-- ISBN*-->
<VCol
cols="12"
md="6"
>
<AppTextField
id="isbnInput"
v-model="inputValueISBN"
type="number"
label="ISBN* eingeben:"
placeholder="978-3-551-55167-7"
/>
</VCol>
<VCol cols="12">
<!-- Untertitel-->
<VCol
cols="12"
md="6"
>
<AppTextField
label="Untertitel eingeben:"
placeholder="..."
/>
</VCol>
<!-- Genre* -> 1:n-->
<VCol
cols="12"
md="6"
>
<AppCombobox
v-model="genreChips"
chips
@ -56,84 +132,151 @@
closable-chips
clear-icon="tabler-circle-x"
:items="genreItems"
label="Wählen Sie die passenden Genres"
label="Genre/s* wählen:"
prepend-icon="tabler-filter"
/>
<!-- <AppTextField
label="Genre"
placeholder="Fantasy, Kinder- und Jugendbuch"
/>-->
<!-- <AppSelect
placeholder="Select Vendor"
label="Vendor"
:items="['Men\'s Clothing', 'Women\'s Clothing', 'Kid\'s Clothing']"
/>-->
</VCol>
<!-- Autor/en* -> 1:n-->
<VCol
cols="12"
md="6"
>
<AppTextField
label="Autor"
label="Autor/en* eingeben:"
placeholder="J.K. Rowling"
/>
</VCol>
<!-- Verlag/e*-->
<VCol
cols="12"
md="6"
>
<AppTextField
label="Verlag"
label="Verlag/e* eingeben:"
placeholder="Carlsen Verlag"
/>
</VCol>
<VCol>
<span class="mb-1">Kurzbeschreibung (optional)</span>
<!-- Sprache*-->
<VCol
cols="12"
md="6"
>
<AppTextField
label="Sprache* eingeben:"
placeholder="Deutsch"
/>
</VCol>
<!-- Seitenanzahl-->
<VCol
cols="12"
md="6"
>
<AppTextField
v-model="seitenanzahl"
label="Seitenanzahl eingeben:"
suffix="Seiten"
type="number"
placeholder="336"
/>
</VCol>
<!-- Erscheinungsdatum-->
<VCol
cols="12"
md="6"
>
<AppTextField
label="Erscheinungsdatum eingeben:"
placeholder="26. Juni 1998"
/>
</VCol>
<!-- Format* -> Taschenbuch, Hardcover, E-Book, etc.-->
<VCol
cols="12"
md="6"
>
<AppTextField
label="Format* eingeben:"
placeholder="Taschenbuch"
/>
</VCol>
<!-- Kurzbeschreibung*-->
<VCol cols="12">
<span class="mb-1">Kurzbeschreibung*</span>
<ProductDescriptionEditor
placeholder="Der elfjährige Harry Potter,
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."
class="border rounded"
/>
<!-- v-model="content"-->
</VCol>
<!-- </VCard> -->
</VRow>
</VCardText>
<!-- 👉 Media -->
<VCardItem>
<!-- Cover/Umschlagbild*-->
<VCol cols="12">
<!-- 👉 Cover -->
<!-- <VCardItem>
<template #title>
Buchcover hochladen
</template>
<!--
<template #append>
<span class="text-primary font-weight-medium text-sm cursor-pointer">Add Media from URL</span>
</template>
-->
</VCardItem>
<VCardText>
</VCardItem>-->
<DropZone />
</VCardText>
</VCol>
<VCol cols="12">
<VBtn>
Speichern
<VIcon
end
icon="tabler-device-floppy"
/>
</VBtn>
</VCol>
</VRow>
</VCardText>
</VCard>
</VCol>
</VRow>
</template>
<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 inputValueTitle = ref('')
const inputValueISBN = ref('')
const showButton = ref(false)
const displayedBooks = ref(false)
watch(inputValueTitle, newValue => {
showButton.value = newValue !== ''
console.log("Test1")
if (!showButton.value){
displayedBooks.value = false
}
})
watch(inputValueISBN, newValue => {
showButton.value = newValue !== ''
console.log("Test2")
if (!showButton.value){
displayedBooks.value = false
}
})
function displayBook() {
displayedBooks.value = true
}
//////////////////
const seitenanzahl = ref(null)
//////////////////
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>`)
const genreChips = ref([])
const genreItems = ref([

View File

@ -215,7 +215,7 @@
v-model="message"
clearable
label="Finde dein Buch!"
placeholder="Titel, Untertitel oder Auor eingeben"
placeholder="Titel / ISBN / Autor ... eingeben"
type="text"
class="textfield-demo-icon-slot"
>