update/create book screen design

Author: kafousis

src/views/BookDetailsView.vue

@@ -1,5 +1,5 @@
  <template>
- <div class="text-color-secondary text-3xl font-semibold m-5">Edit Book</div>
+ <div class="text-color-secondary text-3xl font-semibold m-5">{{ title }}</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>
@@ -65,6 +65,21 @@
  <label for="year" class="block text-base font-medium mb-2">Year</label>
  <InputText id="year" type="text" class="w-full" />
  </div>
+
+ <!-- <Button label="Delete" icon="pi pi-trash" /> -->
+
+ <div class="grid my-6">
+ <div class="col">
+ <Button
+ label="Cancel"
+ icon="pi pi-times"
+ class="w-full p-button-outlined"
+ />
+ </div>
+ <div class="col">
+ <Button label="Save" icon="pi pi-check" class="w-full" />
+ </div>
+ </div>
  </Fieldset>
 </template>
 
@@ -77,5 +92,13 @@ export default {
  default: 0,
  },
  },
+ computed: {
+ isAddMode() {
+ return !this.id;
+ },
+ title() {
+ return `${this.isAddMode ? "Add" : "Edit"} Book`;
+ },
+ },
 };
 </script>

src/views/BookListView.vue

@@ -1,10 +1,18 @@
 <template>
  <div class="text-color-secondary text-3xl font-semibold m-5">
  Books
- <Button
- icon="pi pi-plus"
- class="p-button-rounded p-button-secondary p-button-outlined ml-5"
- />
+
+ <router-link
+ :to="{ name: 'book-detail', params: { id: 0 } }"
+ custom
+ v-slot="{ navigate }"
+ >
+ <Button
+ icon="pi pi-plus"
+ class="p-button-rounded p-button-secondary p-button-outlined ml-5"
+ @click="navigate"
+ />
+ </router-link>
  </div>
 
  <Message class="mx-5" :closable="false" :severity="messageSeverity">{{