Neue Seite für "Bücher Eintragen" erstellt

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>

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>>,
   }