381 lines
9.9 KiB
Vue
381 lines
9.9 KiB
Vue
<template>
|
||
<VRow>
|
||
<VCol
|
||
cols="12"
|
||
md="12"
|
||
>
|
||
|
||
<!--
|
||
<VCard
|
||
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
|
||
v-show="!showEnterBooks"
|
||
class="mb-6"
|
||
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="6"
|
||
>
|
||
<AppTextField
|
||
v-model="inputValueTitle"
|
||
clearable
|
||
label="Titel* eingeben:"
|
||
placeholder="Harry Potter und der Stein der Weisen"
|
||
clear-icon="tabler-x"
|
||
/>
|
||
</VCol>
|
||
<VCol
|
||
v-show="!inputValueTitle && !inputValueISBN"
|
||
cols="12"
|
||
>
|
||
oder
|
||
</VCol>
|
||
<VCol
|
||
v-show="!inputValueTitle"
|
||
cols="6"
|
||
>
|
||
<AppTextField
|
||
id="isbnInput"
|
||
v-model="inputValueISBN"
|
||
clearable
|
||
type="number"
|
||
label="ISBN eingeben:"
|
||
placeholder="978-3-551-55167-7"
|
||
clear-icon="tabler-x"
|
||
/>
|
||
</VCol>
|
||
<VCol
|
||
v-show="showButton"
|
||
cols="12"
|
||
>
|
||
<div class="demo-space-x">
|
||
<VBtn @click="displayBook">
|
||
Suchen
|
||
<VIcon
|
||
end
|
||
icon="tabler-search"
|
||
/>
|
||
</VBtn>
|
||
</div>
|
||
</VCol>
|
||
|
||
|
||
<VCol
|
||
v-show="displayedBooks"
|
||
cols="12"
|
||
>
|
||
<VBtn
|
||
variant="text"
|
||
color="error"
|
||
@click="displayedEnterBooks"
|
||
>
|
||
Wurde dein Buch nicht gefunden? Dann trage es jetzt ein!
|
||
</VBtn>
|
||
</VCol>
|
||
</VRow>
|
||
</VCardText>
|
||
</VCard>
|
||
|
||
|
||
|
||
|
||
<VCard
|
||
v-show="showEnterBooks"
|
||
class="mb-6"
|
||
title="Trage dein Buch jetzt ein:"
|
||
subtitle="Alle mit * gekennzeichneten Felder sind Pflichtfelder!"
|
||
>
|
||
<VCardText>
|
||
<VRow>
|
||
<!-- Fieberkurve* -->
|
||
<VCol cols="12">
|
||
<AppTextField
|
||
label="Fieberkurve* eingeben:"
|
||
placeholder="Fieberkurve"
|
||
/>
|
||
</VCol>
|
||
<!-- Titel* -->
|
||
<VCol
|
||
cols="12"
|
||
md="6"
|
||
>
|
||
<AppTextField
|
||
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"
|
||
clearable
|
||
clear-icon="tabler-x"
|
||
/>
|
||
</VCol>
|
||
<!-- 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
|
||
clearable
|
||
multiple
|
||
closable-chips
|
||
clear-icon="tabler-circle-x"
|
||
:items="genreItems"
|
||
label="Genre/s* wählen:"
|
||
prepend-icon="tabler-filter"
|
||
/>
|
||
</VCol>
|
||
<!-- Autor/en* -> 1:n -->
|
||
<VCol
|
||
cols="12"
|
||
md="6"
|
||
>
|
||
<AppTextField
|
||
label="Autor/en* eingeben:"
|
||
placeholder="J.K. Rowling"
|
||
/>
|
||
</VCol>
|
||
<!-- Verlag/e* -->
|
||
<VCol
|
||
cols="12"
|
||
md="6"
|
||
>
|
||
<AppTextField
|
||
label="Verlag/e* eingeben:"
|
||
placeholder="Carlsen Verlag"
|
||
/>
|
||
</VCol>
|
||
<!-- 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"
|
||
/>
|
||
</VCol>
|
||
<!-- Cover/Umschlagbild* -->
|
||
<VCol cols="12">
|
||
<!-- 👉 Cover -->
|
||
<!--
|
||
<VCardItem>
|
||
<template #title>
|
||
Buchcover hochladen
|
||
</template>
|
||
</VCardItem>
|
||
-->
|
||
<DropZone />
|
||
</VCol>
|
||
|
||
|
||
<VCol cols="12">
|
||
<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>
|
||
</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 !== ''
|
||
if (!showButton.value){
|
||
displayedBooks.value = false
|
||
}
|
||
})
|
||
|
||
watch(inputValueISBN, newValue => {
|
||
showButton.value = newValue !== ''
|
||
if (!showButton.value){
|
||
displayedBooks.value = false
|
||
}
|
||
})
|
||
|
||
function displayBook() {
|
||
displayedBooks.value = true
|
||
}
|
||
|
||
//////////////////
|
||
const showEnterBooks = ref(false) /// 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>`)
|
||
|
||
const genreChips = ref([])
|
||
|
||
const genreItems = ref([
|
||
"Abendteuer",
|
||
"Contemporary",
|
||
"Crime",
|
||
"Erotik",
|
||
"Fantasy",
|
||
"History",
|
||
"Horror",
|
||
"Humor",
|
||
"Romance",
|
||
"ScienceFiction",
|
||
])
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
</style>
|