From 8a817f8be4856cb3da6dd6996b4e6f35e084e42d Mon Sep 17 00:00:00 2001
From: MCMichinator <michi.tomaschko@gmail.com>
Date: Sun, 14 Jul 2024 17:16:30 +0200
Subject: [PATCH] =?UTF-8?q?B=C3=BCcher=20eintragen:=20Alle=20Felder=20+=20?=
 =?UTF-8?q?Eingabe=20Titel/ISBN?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json               |   6 +
 src/pages/buecher-eintragen.vue | 275 ++++++++++++++++++++++++--------
 2 files changed, 215 insertions(+), 66 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4a384b1..4c4db1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/src/pages/buecher-eintragen.vue b/src/pages/buecher-eintragen.vue
index e1c9b9e..1643546 100644
--- a/src/pages/buecher-eintragen.vue
+++ b/src/pages/buecher-eintragen.vue
@@ -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> -->
+<!--            Cover/Umschlagbild*-->
+            <VCol cols="12">
+              <!-- 👉 Cover -->
+<!--              <VCardItem>
+                <template #title>
+                  Buchcover hochladen
+                </template>
+              </VCardItem>-->
+              <DropZone />
+            </VCol>
+
+
+            <VCol cols="12">
+              <VBtn>
+                Speichern
+                <VIcon
+                  end
+                  icon="tabler-device-floppy"
+                />
+              </VBtn>
+            </VCol>
           </VRow>
         </VCardText>
-
-        <!-- 👉 Media -->
-        <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>
-          <DropZone />
-        </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([