Allgemeine Anpassungen

src/@core/components/DropZone.vue

@@ -55,7 +55,7 @@ useDropZone(dropZoneRef, onDrop)
             <VIcon icon="tabler-upload" />
           </IconBtn>
           <h4 class="text-h4">
-            Drag and drop your image here.
+            Ziehen Sie Ihr Bild hierher und legen Sie es dort ab.
           </h4>
           <span class="text-disabled">or</span>
 

src/@core/components/app-form-elements/CustomCheckboxesWithIcon.vue

@@ -37,7 +37,7 @@ const updateSelectedOption = value => {
         :class="props.selectedCheckbox.includes(item.value) ? 'active' : ''"
       >
         <slot :item="item">
-          <div class="d-flex flex-column align-center text-center gap-2">
+          <div class="d-flex flex-column align-center text-center">
             <VIcon
               v-bind="item.icon"
               class="text-high-emphasis"
@@ -51,7 +51,7 @@ const updateSelectedOption = value => {
             </p>
           </div>
         </slot>
-        <div>
+        <div style="position: absolute; opacity: 0">
           <VCheckbox
             :model-value="props.selectedCheckbox"
             :value="item.value"

src/navigation/vertical/index.js

@@ -8,9 +8,23 @@ export default [
   {
     title: 'Büchersuche',
     to: { name: 'buechersuche' },
+    icon: { icon: 'tabler-books' },
+  },
+  {
+    title: 'Bücher eintragen',
+    to: { name: 'buecher-eintragen' },
     icon: { icon: 'tabler-book-2' },
   },
-    /*
+
+  /*{
+    title: 'Bücher eintragen',
+    to: { name: 'buecherEintragen' },
+    icon: { icon: 'tabler-book-upload' },
+  },*/
+
+  // icon: { icon: 'tabler-book-2' },
+
+  /*
   {
     title: 'Bücherdetails',
     to: { name: 'second-page' },

src/pages/buecher-eintragen.vue

@@ -0,0 +1,155 @@
+<template>
+  <VRow class="match-height">
+    <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"
+      >
+        <VCardText>
+          <VRow>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                label="Titel"
+                placeholder="Harry Potter und der Stein der Weisen"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                label="ISBN"
+                placeholder="978-3-551-55167-7"
+              />
+            </VCol>
+
+
+            <VCol cols="12">
+              <AppCombobox
+                v-model="genreChips"
+                chips
+                clearable
+                multiple
+                closable-chips
+                clear-icon="tabler-circle-x"
+                :items="genreItems"
+                label="Wählen Sie die passenden Genres"
+                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>
+
+
+
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                label="Autor"
+                placeholder="J.K. Rowling"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                label="Verlag"
+                placeholder="Carlsen Verlag"
+              />
+            </VCol>
+
+
+
+
+            <VCol>
+              <span class="mb-1">Kurzbeschreibung (optional)</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>
+          <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>
+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>

src/pages/buechersuche.vue

@@ -187,24 +187,13 @@
           </VBtn>
         </div>
 
-
-
-
         <div style="position: absolute; top: 100px; left: 10px; color: rgba(185,17,17,0.85)">
-          isRow1Active: {{ isRow1Active }} <br>
-          isRow2Active: {{ isRow2Active }} <br>
-          isRow3Active: {{ isRow3Active }} <br>
-          isRow4Active: {{ isRow4Active }} <br>
-          isRow5Active: {{ isRow5Active }} <br>
-
-          {{ schwierigkeit }}
-          {{ stimmung }}
-          {{ spannung }}
-          {{ gewalt }}
-          {{ erotik }}
+          R1: {{ schwierigkeit }}, {{ isRow1Active }} <br>
+          R2: {{ stimmung }}, {{ isRow2Active }} <br>
+          R3: {{ spannung }}, {{ isRow3Active }} <br>
+          R4: {{ gewalt }}, {{ isRow4Active }} <br>
+          R5: {{ erotik }}, {{ isRow5Active }} <br>
         </div>
-
-
         <div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
           {{ selectedCheckbox }}
         </div>
@@ -286,7 +275,25 @@
         </div>
 
         <br>
-        <hr>
+<!--        <hr>-->
+
+      </VCard>
+    </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="Gefundene Bücher:"
+          >
 
 
         <!-- 👉 Hier werden die Bücher aufgelistet. -->
@@ -498,7 +505,7 @@ const loading = ref(false)
 
 const clickMe = () => {
   loading.value = true
-  message.value = 'Wait for it...'
+  message.value = 'Warte darauf...'
 
   setTimeout(() => {
     loading.value = false

typed-router.d.ts

@@ -41,6 +41,7 @@ declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     'root': RouteRecordInfo<'root', '/', Record<never, never>, Record<never, never>>,
     '$error': RouteRecordInfo<'$error', '/:error(.*)', { error: ParamValue<true> }, { error: ParamValue<false> }>,
+    'buecher-eintragen': RouteRecordInfo<'buecher-eintragen', '/buecher-eintragen', Record<never, never>, Record<never, never>>,
     'buechersuche': RouteRecordInfo<'buechersuche', '/buechersuche', Record<never, never>, Record<never, never>>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
   }