From fc51c284c1e20871ec5b9c425e5163bfeb55049e Mon Sep 17 00:00:00 2001
From: MCMichinator <michi.tomaschko@gmail.com>
Date: Mon, 15 Jul 2024 17:45:17 +0200
Subject: [PATCH] =?UTF-8?q?B=C3=BCcher=20eintragen:=20Felder=20leeren=20k?=
 =?UTF-8?q?=C3=B6nnen,=20Test=20umgebung?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/buecher-eintragen.vue | 159 +++++++++++++++++++++++---------
 1 file changed, 114 insertions(+), 45 deletions(-)

diff --git a/src/pages/buecher-eintragen.vue b/src/pages/buecher-eintragen.vue
index c955a23..881ef30 100644
--- a/src/pages/buecher-eintragen.vue
+++ b/src/pages/buecher-eintragen.vue
@@ -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>`)