From 9246e46423ffc7c346841401debe0a400235207d Mon Sep 17 00:00:00 2001
From: Shaun <shaun@bluebit.com.au>
Date: Mon, 26 Aug 2024 14:59:05 +1000
Subject: [PATCH] add a layout option to the authors page Cards|Table

---
 client/components/app/BookShelfToolbar.vue    | 16 +++++
 client/components/controls/LayoutSelect.vue   | 66 +++++++++++++++++++
 .../pages/library/_library/authors/index.vue  | 36 ++++++++--
 client/store/user.js                          |  1 +
 4 files changed, 113 insertions(+), 6 deletions(-)
 create mode 100644 client/components/controls/LayoutSelect.vue

diff --git a/client/components/app/BookShelfToolbar.vue b/client/components/app/BookShelfToolbar.vue
index 00b0d4a94..b7df08501 100644
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@@ -98,6 +98,7 @@
 
         <!-- author sort select -->
         <controls-sort-select v-if="authors?.length" v-model="settings.authorSortBy" :descending.sync="settings.authorSortDesc" :items="authorSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateAuthorSort" />
+        <controls-layout-select v-if="authors?.length" v-model="settings.authorPageLayout" :items="layoutSelectItems" class="w-24 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateAuthorLayout" />
       </template>
       <!-- home page -->
       <template v-else-if="isHome">
@@ -195,6 +196,18 @@ export default {
         }
       ]
     },
+    layoutSelectItems() {
+      return [
+        {
+          text: 'Cards',
+          value: 'cards'
+        },
+        {
+          text: 'Table',
+          value: 'table'
+        }
+      ]
+    },
     authorSortItems() {
       return [
         {
@@ -593,6 +606,9 @@ export default {
     updateAuthorSort() {
       this.saveSettings()
     },
+    updateAuthorLayout() {
+      this.saveSettings()
+    },
     saveSettings() {
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },
diff --git a/client/components/controls/LayoutSelect.vue b/client/components/controls/LayoutSelect.vue
new file mode 100644
index 000000000..141370626
--- /dev/null
+++ b/client/components/controls/LayoutSelect.vue
@@ -0,0 +1,66 @@
+<template>
+  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
+    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+      <span class="flex items-center justify-between">
+        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
+      </span>
+    </button>
+
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox" aria-labelledby="listbox-label">
+      <template v-for="item in items">
+        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item.value)">
+          <div class="flex items-center">
+            <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
+          </div>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showMenu: false
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedText() {
+      var _selected = this.selected
+      if (!_selected) return ''
+      var _sel = this.items.find((i) => i.value === _selected)
+      if (!_sel) return ''
+      return _sel.text
+    }
+  },
+  methods: {
+    clickOutside() {
+      this.showMenu = false
+    },
+    clickedOption(val) {
+      if (this.selected === val) {
+      } else {
+        this.selected = val
+      }
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', val))
+    }
+  }
+}
+</script>
diff --git a/client/pages/library/_library/authors/index.vue b/client/pages/library/_library/authors/index.vue
index 75e9f083e..2c76368b5 100644
--- a/client/pages/library/_library/authors/index.vue
+++ b/client/pages/library/_library/authors/index.vue
@@ -2,12 +2,33 @@
   <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
     <app-book-shelf-toolbar page="authors" is-home :authors="authors" />
     <div id="bookshelf" class="w-full h-full p-8e overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
-      <!-- Cover size widget -->
-      <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
-      <div class="flex flex-wrap justify-center">
-        <template v-for="author in authorsSorted">
-          <cards-author-card :key="author.id" :author="author" class="p-3e" @edit="editAuthor" />
-        </template>
+      <div v-if="authorLayoutType === 'cards'">
+        <!-- Cover size widget -->
+        <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+        <div class="flex flex-wrap justify-center">
+          <template v-for="author in authorsSorted">
+            <cards-author-card :key="author.id" :author="author" class="p-3e" @edit="editAuthor" />
+          </template>
+        </div>
+      </div>
+
+      <div v-if="authorLayoutType === 'table'">
+        <table class="tracksTable max-w-2xl mx-auto">
+          <tr>
+            <th class="text-left">{{ $strings.LabelName }}</th>
+            <th class="text-center w-24">{{ $strings.LabelBooks }}</th>
+          </tr>
+          <tr v-for="author in authorsSorted" :key="author.id">
+            <td>
+              <nuxt-link :to="`/author/${author.id}`">
+                <p class="text-sm md:text-base text-gray-100">{{ author.name }}</p>
+              </nuxt-link>
+            </td>
+            <td class="text-center w-24 h-12">
+              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(author.id)}`" class="hover:underline">{{ author.numBooks }}</nuxt-link>
+            </td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
@@ -53,6 +74,9 @@ export default {
     authorSortBy() {
       return this.$store.getters['user/getUserSetting']('authorSortBy') || 'name'
     },
+    authorLayoutType() {
+      return this.$store.getters['user/getUserSetting']('authorPageLayout') || 'cards'
+    },
     authorSortDesc() {
       return !!this.$store.getters['user/getUserSetting']('authorSortDesc')
     },
diff --git a/client/store/user.js b/client/store/user.js
index 10dc8ef66..cbd84dfc0 100644
--- a/client/store/user.js
+++ b/client/store/user.js
@@ -1,6 +1,7 @@
 export const state = () => ({
   user: null,
   settings: {
+    authorPageLayout: 'cards',
     orderBy: 'media.metadata.title',
     orderDesc: false,
     filterBy: 'all',