create/update form design

Author: kafousis

src/main.js

@@ -21,6 +21,9 @@ import Button from 'primevue/button';
 import Card from 'primevue/card';
 import Message from 'primevue/message';
 import Dialog from 'primevue/dialog';
+import Fieldset from 'primevue/fieldset';
+import InputText from 'primevue/inputtext';
+import Dropdown from 'primevue/dropdown';
 
 const app = createApp(App);
 
@@ -36,5 +39,8 @@ app.component('Button', Button);
 app.component('Card', Card);
 app.component('Message', Message);
 app.component('Dialog', Dialog);
+app.component('Fieldset', Fieldset);
+app.component('InputText', InputText);
+app.component('Dropdown', Dropdown);
 
 app.mount('#app');

src/router/index.js

@@ -17,7 +17,7 @@ const routes = [
  },
  {
  path: '/books/:id',
- name: 'book detail',
+ name: 'book-detail',
  // props: true
  props: parseProps,
  component: BookDetailsView

src/views/BookDetailsView.vue

@@ -1,5 +1,81 @@
-<template>
- <div class="about">
- <h1>This is the book details page</h1>
- </div>
-</template>
+ <template>
+ <div class="text-color-secondary text-3xl font-semibold m-5">Edit Book</div>
+ <Fieldset class="mx-6" legend="Godfather I">
+ <div class="mb-4">
+ <label for="id" class="block text-base font-medium mb-2">Id</label>
+ <InputText id="id" type="text" class="w-full" disabled />
+ </div>
+
+ <div class="mb-4">
+ <label for="title" class="block text-base font-medium mb-2">Title</label>
+ <InputText id="title" type="text" class="w-full" />
+ </div>
+
+ <div class="mb-4">
+ <label for="firstAuthor" class="block text-base font-medium mb-2"
+ >First Author</label
+ >
+ <Dropdown
+ id="firstAuthor"
+ placeholder="Select an Author"
+ class="w-full"
+ />
+ </div>
+
+ <div class="mb-4">
+ <label for="secondAuthor" class="block text-base font-medium mb-2"
+ >Second Author</label
+ >
+ <Dropdown
+ id="secondAuthor"
+ placeholder="Select an Author"
+ class="w-full"
+ />
+ </div>
+
+ <div class="mb-4">
+ <label for="genre" class="block text-base font-medium mb-2"
+ >Publisher</label
+ >
+ <Dropdown id="genre" placeholder="Select a Genre" class="w-full" />
+ </div>
+
+ <div class="mb-4">
+ <label for="isbn" class="block text-base font-medium mb-2">ISBN</label>
+ <InputText id="isbn" type="text" class="w-full" />
+ </div>
+
+ <div class="mb-4">
+ <label for="publisher" class="block text-base font-medium mb-2"
+ >Genre</label
+ >
+ <Dropdown
+ id="publisher"
+ placeholder="Select a Publisher"
+ class="w-full"
+ />
+ </div>
+
+ <div class="mb-4">
+ <label for="pages" class="block text-base font-medium mb-2">Pages</label>
+ <InputText id="pages" type="text" class="w-full" />
+ </div>
+
+ <div class="mb-4">
+ <label for="year" class="block text-base font-medium mb-2">Year</label>
+ <InputText id="year" type="text" class="w-full" />
+ </div>
+ </Fieldset>
+</template>
+
+<script>
+export default {
+ name: "BookDetailsView",
+ props: {
+ id: {
+ type: Number,
+ default: 0,
+ },
+ },
+};
+</script>

src/views/BookListView.vue

@@ -16,12 +16,20 @@
  <template #title>{{ book.title }}</template>
  <template #subtitle>{{ book.allAuthors }}</template>
  <template #footer>
- <Button
- icon="pi pi-pencil"
- label="Edit"
- class="p-button-primary"
- style="width: 150px"
- />
+ <router-link
+ :to="{ name: 'book-detail', params: { id: book.id } }"
+ custom
+ v-slot="{ navigate }"
+ >
+ <Button
+ icon="pi pi-pencil"
+ label="Edit"
+ class="p-button-primary"
+ style="width: 150px"
+ @click="navigate"
+ />
+ </router-link>
+
  <Button
  icon="pi pi-trash"
  label="Delete"