feat: author page improvement

src/jelu-ui/src/components/AuthorBooks.vue

@@ -199,15 +199,53 @@ getBooks()
   </sort-filter-bar-vue>
   <div class="columns is-multiline box">
     <div class="column is-full">
-      <h2 class="title has-text-weight-normal typewriter">
-        {{ author.name }}
-        <span
-          class="icon is-medium has-text-light"
-          @click="editAuthor"
-        >
-          <i class="background-on-hover mdi mdi-24px mdi-pencil" />
-        </span>
-      </h2>
+      <div class="level">
+        <div class="level-item">
+          <h2 class="title has-text-weight-normal typewriter">
+            {{ author.name }}
+          </h2>
+          <span
+            class="icon is-medium has-text-light"
+            @click="editAuthor"
+          >
+            <i class="background-on-hover mdi mdi-24px mdi-pencil" />
+          </span>
+        </div>
+        <div class="level-right">
+          <div class="level-item">
+            <a
+              v-if="author.officialPage"
+              :href="author.officialPage"
+              target="_blank"
+            ><i class="mdi mdi-24px mdi-web" /></a>
+            <a
+              v-if="author.wikipediaPage"
+              :href="author.wikipediaPage"
+              target="_blank"
+            ><i class="mdi mdi-24px mdi-wikipedia" /></a>
+            <a
+              v-if="author.goodreadsPage"
+              :href="author.goodreadsPage"
+              target="_blank"
+            ><i class="mdi mdi-24px mdi-goodreads" /></a>
+            <a
+              v-if="author.twitterPage"
+              :href="author.twitterPage"
+              target="_blank"
+            ><i class="mdi mdi-24px mdi-twitter" /></a>
+            <a
+              v-if="author.facebookPage"
+              :href="author.facebookPage"
+              target="_blank"
+            ><i class="mdi mdi-24px mdi-facebook" /></a>
+            <a
+              v-if="author.instagramPage"
+              :href="author.instagramPage"
+              target="_blank"
+            ><i class="mdi mdi-24px mdi-instagram" /></a>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="column is-one-fifth is-offset-one-fifth">
       <figure class="image">
@@ -229,7 +267,8 @@ getBooks()
         class="has-text-left"
       >
         <span class="has-text-weight-semibold">Biography :</span>
-      </p><p v-html="author.biography" />
+      </p>
+      <p class="has-text-left" v-html="author.biography" />
       <p
         v-if="author.dateOfBirth"
         class="has-text-left block"
@@ -244,6 +283,13 @@ getBooks()
         <span class="has-text-weight-semibold">Death :</span>
         {{ formatDate(author.dateOfDeath) }}
       </p>
+      <p
+        v-if=" author.notes != null"
+        class="has-text-left"
+      >
+        <span class="has-text-weight-semibold">Additional notes :</span>
+      </p>
+      <p class="has-text-left" v-html="author.notes" />
     </div>
   </div>
   <div class="level">

src/jelu-ui/src/components/AutoImportFormModal.vue

@@ -3,7 +3,9 @@ import { computed, reactive, Ref, ref } from "vue";
 import { StringUtils } from "../utils/StringUtils";
 import dataService from "../services/DataService";
 import { Metadata } from "../model/Metadata";
-import { DateUtils } from "../utils/DateUtils";
+import useDates from '../composables/dates'
+
+const { formatDate, formatDateString } = useDates()
 
 const form = reactive({
   title: "",
@@ -44,13 +46,6 @@ const importData = () => {
     emit('close')
 }
 
-const format = (dateString: string|null|undefined) => {
-  if (dateString != null) {
-    return DateUtils.formatDate(dateString)
-  }
-  return ''
-}
-
 const isValid = computed(() => StringUtils.isNotBlank(form.title) 
 || StringUtils.isNotBlank(form.isbn)
 || StringUtils.isNotBlank(form.authors))
@@ -203,7 +198,7 @@ const isValid = computed(() => StringUtils.isNotBlank(form.title)
           v-if="metadata?.publishedDate"
           class="has-text-left"
         >
-          <span class="has-text-weight-semibold">Published date : </span>{{ format(metadata.publishedDate) }}
+          <span class="has-text-weight-semibold">Published date : </span>{{ formatDateString(metadata.publishedDate) }}
         </p>
         <p
           v-if="metadata?.series"

src/jelu-ui/src/components/EditAuthorModal.vue

@@ -87,7 +87,8 @@ const fillFormWithEntry = (entry: WikipediaSearchResultElement) => {
   progress.value = true
   dataService.wikipediaPage(entry.title, searchlanguage.value)
   .then(res => {
-    currentAuthor.value.biography = res.extractHtml + "\n" + toHtmlLink(res.contentUrls.desktop.page)
+    currentAuthor.value.biography = res.extractHtml
+    currentAuthor.value.wikipediaPage = res.contentUrls.desktop.page
     imageUrl.value = res.thumbnail?.source
     progress.value = false
     currentPhase.value = FORM
@@ -107,10 +108,10 @@ const fillFormWithEntry = (entry: WikipediaSearchResultElement) => {
     >
       <div>
         <progress
-      v-if="progress"
-      class="progress is-small is-success"
-      max="100"
-    />
+          v-if="progress"
+          class="progress is-small is-success"
+          max="100"
+        />
         <div>
           <h1 class="title has-text-weight-normal typewriter">
             Edit author
@@ -182,6 +183,77 @@ const fillFormWithEntry = (entry: WikipediaSearchResultElement) => {
             />
           </o-field>
         </div>
+        <div class="field">
+          <o-field
+            label="Official page"
+          >
+            <o-input
+              v-model="currentAuthor.officialPage"
+              maxlength="5000"
+            />
+          </o-field>
+        </div>
+        <div class="field">
+          <o-field
+            label="Wikipedia page"
+          >
+            <o-input
+              v-model="currentAuthor.wikipediaPage"
+              maxlength="5000"
+            />
+          </o-field>
+        </div>
+        <div class="field">
+          <o-field
+            label="Goodreads page"
+          >
+            <o-input
+              v-model="currentAuthor.goodreadsPage"
+              maxlength="5000"
+            />
+          </o-field>
+        </div>
+        <div class="field">
+          <o-field
+            label="Twitter page"
+          >
+            <o-input
+              v-model="currentAuthor.twitterPage"
+              maxlength="5000"
+            />
+          </o-field>
+        </div>
+        <div class="field">
+          <o-field
+            label="Facebook page"
+          >
+            <o-input
+              v-model="currentAuthor.facebookPage"
+              maxlength="5000"
+            />
+          </o-field>
+        </div>
+        <div class="field">
+          <o-field
+            label="Instagram page"
+          >
+            <o-input
+              v-model="currentAuthor.instagramPage"
+              maxlength="5000"
+            />
+          </o-field>
+        </div>
+        <div class="field">
+          <o-field
+            label="Personal notes"
+          >
+            <o-input
+              v-model="currentAuthor.notes"
+              maxlength="5000"
+              type="textarea"
+            />
+          </o-field>
+        </div>
         <div v-if="hasImage">
           <o-field>
             <template #label>
@@ -349,7 +421,10 @@ const fillFormWithEntry = (entry: WikipediaSearchResultElement) => {
           >
             <article class="media">
               <div class="media-left">
-                <figure v-if="res.thumbnail?.url" class="small-cover">
+                <figure
+                  v-if="res.thumbnail?.url"
+                  class="small-cover"
+                >
                   <img
                     :src="'https:' + res.thumbnail?.url"
                     :class="deleteImage ? 'altered' : ''"

src/jelu-ui/src/composables/dates.ts

@@ -1,11 +1,11 @@
-import { DateUtils } from "../utils/DateUtils"
 import dayjs from "dayjs";
 
 export default function useDates() {
 
-    function formatDateString(dateString: string | Date | null | undefined): string {
+    function formatDateString(dateString: string | null | undefined): string {
         if (dateString != null) {
-          return DateUtils.formatDate(dateString)
+          const date = dayjs(dateString)
+          return date.format('D MMMM YYYY')
         }
         return ''
     }

src/jelu-ui/src/model/Author.ts

@@ -1,11 +1,17 @@
 export interface Author {
-    id?: string,
-    creationDate?: string,
-    name: string,
-    modificationDate?: string,
-    biography?: string,
-    dateOfBirth?: Date,
-    dateOfDeath?: Date,
-    image?: string
-  }
-
+  id?: string,
+  creationDate?: string,
+  name: string,
+  modificationDate?: string,
+  biography?: string,
+  dateOfBirth?: Date,
+  dateOfDeath?: Date,
+  image?: string,
+  notes?: string,
+  officialPage?: string,
+  wikipediaPage?: string,
+  goodreadsPage?: string,
+  twitterPage?: string,
+  facebookPage?: string,
+  instagramPage?: string,
+}

src/main/kotlin/io/github/bayang/jelu/dao/AuthorTable.kt

@@ -1,5 +1,6 @@
 package io.github.bayang.jelu.dao
 
+import io.github.bayang.jelu.dao.UserBookTable.nullable
 import io.github.bayang.jelu.dto.AuthorDto
 import org.jetbrains.exposed.dao.UUIDEntity
 import org.jetbrains.exposed.dao.UUIDEntityClass
@@ -19,6 +20,13 @@ object AuthorTable : UUIDTable("author") {
     val image: Column<String?> = varchar("image", 1000).nullable()
     val creationDate = timestamp("creation_date")
     val modificationDate = timestamp("modification_date")
+    val notes: Column<String?> = varchar("notes", 5000).nullable()
+    val officialPage: Column<String?> = varchar("official_page", 5000).nullable()
+    val wikipediaPage: Column<String?> = varchar("wikipedia_page", 5000).nullable()
+    val goodreadsPage: Column<String?> = varchar("goodreads_page", 5000).nullable()
+    val twitterPage: Column<String?> = varchar("twitter_page", 5000).nullable()
+    val facebookPage: Column<String?> = varchar("facebook_page", 5000).nullable()
+    val instagramPage: Column<String?> = varchar("instagram_page", 5000).nullable()
 }
 class Author(id: EntityID<UUID>) : UUIDEntity(id) {
     companion object : UUIDEntityClass<Author>(AuthorTable)
@@ -29,6 +37,13 @@ class Author(id: EntityID<UUID>) : UUIDEntity(id) {
     var dateOfBirth by AuthorTable.dateOfBirth
     var dateOfDeath by AuthorTable.dateOfDeath
     var image by AuthorTable.image
+    var notes by AuthorTable.notes
+    var officialPage by AuthorTable.officialPage
+    var wikipediaPage by AuthorTable.wikipediaPage
+    var goodreadsPage by AuthorTable.goodreadsPage
+    var twitterPage by AuthorTable.twitterPage
+    var facebookPage by AuthorTable.facebookPage
+    var instagramPage by AuthorTable.instagramPage
     fun toAuthorDto(): AuthorDto =
         AuthorDto(
             id = this.id.value,
@@ -38,7 +53,14 @@ class Author(id: EntityID<UUID>) : UUIDEntity(id) {
             biography = this.biography,
             dateOfBirth = this.dateOfBirth,
             dateOfDeath = this.dateOfDeath,
-            image = this.image
+            image = this.image,
+            notes = this.notes,
+            officialPage = this.officialPage,
+            wikipediaPage = this.wikipediaPage,
+            goodreadsPage = this.goodreadsPage,
+            twitterPage = this.twitterPage,
+            facebookPage = this.facebookPage,
+            instagramPage = this.instagramPage
         )
 }
 object BookAuthors : Table(name = "book_authors") {

src/main/kotlin/io/github/bayang/jelu/dao/BookRepository.kt

@@ -350,6 +350,13 @@ class BookRepository(
         found.biography = author.biography?.trim()
         found.dateOfDeath = author.dateOfDeath?.trim()
         found.dateOfBirth = author.dateOfBirth?.trim()
+        found.notes = author.notes?.trim()
+        found.officialPage = author.officialPage?.trim()
+        found.wikipediaPage = author.wikipediaPage?.trim()
+        found.goodreadsPage = author.goodreadsPage?.trim()
+        found.twitterPage = author.twitterPage?.trim()
+        found.facebookPage = author.facebookPage?.trim()
+        found.instagramPage = author.instagramPage?.trim()
         // found.image = author.image?.trim()
         found.modificationDate = nowInstant()
         return found
@@ -427,6 +434,13 @@ class BookRepository(
             val instant: Instant = nowInstant()
             creationDate = instant
             modificationDate = instant
+            notes = cleanString(author.notes)
+            officialPage = cleanString(author.officialPage)
+            wikipediaPage = cleanString(author.wikipediaPage)
+            goodreadsPage = cleanString(author.goodreadsPage)
+            twitterPage = cleanString(author.twitterPage)
+            facebookPage = cleanString(author.facebookPage)
+            instagramPage = cleanString(author.instagramPage)
         }
         return created
     }