Update:Listening sessions table for multi-select, sorting and rows pe…

…r page

- Updated get all sessions API endpoint to include sorting
- Added sessions API endpoint for batch deleting

client/components/ui/Checkbox.vue

@@ -2,7 +2,8 @@
   <label class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''">
     <div class="border-2 rounded flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
       <input v-model="selected" :disabled="disabled" type="checkbox" class="opacity-0 absolute" :class="!disabled ? 'cursor-pointer' : ''" />
-      <svg v-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
+      <span v-if="partial" class="material-icons text-base leading-none text-gray-400">remove</span>
+      <svg v-else-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
     </div>
     <div v-if="label" class="select-none" :class="[labelClassname, disabled ? 'text-gray-400' : 'text-gray-100']">{{ label }}</div>
   </label>
@@ -31,7 +32,8 @@ export default {
       type: String,
       default: ''
     },
-    disabled: Boolean
+    disabled: Boolean,
+    partial: Boolean
   },
   data() {
     return {}

client/components/ui/Dropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative w-full" v-click-outside="clickOutsideObj">
-    <p class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
+    <p v-if="label" class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
     <button type="button" :aria-label="longLabel" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
         <span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small }">{{ selectedText }}</span>
@@ -64,7 +64,7 @@ export default {
     },
     itemsToShow() {
       return this.items.map((i) => {
-        if (typeof i === 'string') {
+        if (typeof i === 'string' || typeof i === 'number') {
           return {
             text: i,
             value: i

client/components/ui/InputDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <label class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</label>
+    <label v-if="label" class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</label>
     <div ref="wrapper" class="relative">
       <form @submit.prevent="submitForm">
         <div ref="inputWrapper" class="input-wrapper flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-2" :class="disabled ? 'pointer-events-none bg-black-300 text-gray-400' : 'bg-primary'">

client/pages/config/sessions.vue

@@ -5,37 +5,72 @@
         <ui-dropdown v-model="selectedUser" :items="userItems" :label="$strings.LabelFilterByUser" small class="max-w-48" @input="updateUserFilter" />
       </div>
 
-      <div v-if="listeningSessions.length" class="block max-w-full">
+      <div v-if="listeningSessions.length" class="block max-w-full relative">
         <table class="userSessionsTable">
           <tr class="bg-primary bg-opacity-40">
-            <th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th>
-            <th class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</th>
-            <th class="w-32 min-w-32 text-left hidden md:table-cell">{{ $strings.LabelPlayMethod }}</th>
-            <th class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
-            <th class="w-32 min-w-32">{{ $strings.LabelTimeListened }}</th>
-            <th class="w-16 min-w-16">{{ $strings.LabelLastTime }}</th>
-            <th class="flex-grow hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
+            <th class="w-6 min-w-6 text-left hidden md:table-cell h-11">
+              <ui-checkbox v-model="isAllSelected" :partial="numSelected > 0 && !isAllSelected" small checkbox-bg="bg" />
+            </th>
+            <th v-if="numSelected" class="flex-grow text-left" :colspan="7">
+              <div class="flex items-center">
+                <p>{{ $getString('MessageSelected', [numSelected]) }}</p>
+                <div class="flex-grow" />
+                <ui-btn small color="error" :loading="deletingSessions" @click.stop="removeSessionsClick">{{ $strings.ButtonRemove }}</ui-btn>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="w-48 min-w-48 text-left group cursor-pointer" @click.stop="sortColumn('displayTitle')">
+              <div class="inline-flex items-center">
+                {{ $strings.LabelItem }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('displayTitle') }" class="material-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</th>
+            <th v-if="!numSelected" class="w-26 min-w-26 text-left hidden md:table-cell group cursor-pointer" @click.stop="sortColumn('playMethod')">
+              <div class="inline-flex items-center">
+                {{ $strings.LabelPlayMethod }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('playMethod') }" class="material-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
+            <th v-if="!numSelected" class="w-32 min-w-32 group cursor-pointer" @click.stop="sortColumn('timeListening')">
+              <div class="inline-flex items-center">
+                {{ $strings.LabelTimeListened }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('timeListening') }" class="material-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="w-24 min-w-24 group cursor-pointer" @click.stop="sortColumn('currentTime')">
+              <div class="inline-flex items-center">
+                {{ $strings.LabelLastTime }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('currentTime') }" class="material-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="flex-grow hidden sm:table-cell cursor-pointer group" @click.stop="sortColumn('updatedAt')">
+              <div class="inline-flex items-center">
+                {{ $strings.LabelLastUpdate }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('updatedAt') }" class="material-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
           </tr>
 
-          <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
-            <td class="py-1 max-w-48">
+          <tr v-for="session in listeningSessions" :key="session.id" :class="{ selected: session.selected }" class="cursor-pointer" @click="clickSessionRow(session)">
+            <td class="hidden md:table-cell py-1 max-w-6 relative">
+              <ui-checkbox v-model="session.selected" small checkbox-bg="bg" />
+              <!-- overlay of the checkbox so that the entire box is clickable -->
+              <div class="absolute inset-0 w-full h-full" @click.stop="session.selected = !session.selected" />
+            </td>
+            <td class="py-1 w-48 max-w-48">
               <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
               <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
             </td>
-            <td class="hidden md:table-cell">
+            <td class="hidden md:table-cell w-20 min-w-20">
               <p v-if="filteredUserUsername" class="text-xs">{{ filteredUserUsername }}</p>
               <p v-else class="text-xs">{{ session.user ? session.user.username : 'N/A' }}</p>
             </td>
-            <td class="hidden md:table-cell">
+            <td class="hidden md:table-cell w-26 min-w-26">
               <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
             </td>
-            <td class="hidden sm:table-cell">
+            <td class="hidden sm:table-cell w-32 min-w-32">
               <p class="text-xs" v-html="getDeviceInfoString(session.deviceInfo)" />
             </td>
-            <td class="text-center">
+            <td class="text-center w-32 min-w-32">
               <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
             </td>
-            <td class="text-center hover:underline" @click.stop="clickCurrentTime(session)">
+            <td class="text-center hover:underline w-24 min-w-24" @click.stop="clickCurrentTime(session)">
               <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
             </td>
             <td class="text-center hidden sm:table-cell">
@@ -45,10 +80,22 @@
             </td>
           </tr>
         </table>
-        <div class="flex items-center justify-end my-2">
-          <ui-icon-btn icon="arrow_back_ios_new" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
-          <p class="text-sm mx-1">Page {{ currentPage + 1 }} of {{ numPages }}</p>
-          <ui-icon-btn icon="arrow_forward_ios" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage >= numPages - 1" @click="nextPage" />
+        <!-- table bottom options -->
+        <div class="flex items-center my-2">
+          <div class="flex-grow" />
+          <div class="inline-flex items-center">
+            <p class="text-sm">{{ $strings.LabelRowsPerPage }}</p>
+            <ui-dropdown v-model="itemsPerPage" :items="itemsPerPageOptions" small class="w-24 mx-2" @input="updatedItemsPerPage" />
+          </div>
+          <div class="inline-flex items-center">
+            <p class="text-sm mx-2">Page {{ currentPage + 1 }} of {{ numPages }}</p>
+            <ui-icon-btn icon="arrow_back_ios_new" :size="9" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
+            <ui-icon-btn icon="arrow_forward_ios" :size="9" icon-font-size="1rem" class="mx-1" :disabled="currentPage >= numPages - 1" @click="nextPage" />
+          </div>
+        </div>
+
+        <div v-if="deletingSessions || loading" class="absolute inset-0 w-full h-full flex items-center justify-center">
+          <ui-loading-indicator />
         </div>
       </div>
       <p v-else class="text-white text-opacity-50">{{ $strings.MessageNoListeningSessions }}</p>
@@ -128,6 +175,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       showSessionModal: false,
       selectedSession: null,
       listeningSessions: [],
@@ -138,7 +186,11 @@ export default {
       itemsPerPage: 10,
       userFilter: null,
       selectedUser: '',
-      processingGoToTimestamp: false
+      sortBy: 'updatedAt',
+      sortDesc: true,
+      processingGoToTimestamp: false,
+      deletingSessions: false,
+      itemsPerPageOptions: [10, 25, 50, 100]
     }
   },
   computed: {
@@ -162,9 +214,85 @@ export default {
     },
     timeFormat() {
       return this.$store.state.serverSettings.timeFormat
+    },
+    numSelected() {
+      return this.listeningSessions.filter((s) => s.selected).length
+    },
+    isAllSelected: {
+      get() {
+        return this.numSelected === this.listeningSessions.length
+      },
+      set(val) {
+        this.setSelectionForAll(val)
+      }
     }
   },
   methods: {
+    isSortSelected(column) {
+      return this.sortBy === column
+    },
+    sortColumn(column) {
+      if (this.sortBy === column) {
+        this.sortDesc = !this.sortDesc
+      } else {
+        this.sortBy = column
+      }
+      this.loadSessions(this.currentPage)
+    },
+    removeSelectedSessions() {
+      if (!this.numSelected) return
+      this.deletingSessions = true
+
+      let isAllSessions = this.isAllSelected
+      const payload = {
+        sessions: this.listeningSessions.filter((s) => s.selected).map((s) => s.id)
+      }
+      this.$axios
+        .$post(`/api/sessions/batch/delete`, payload)
+        .then(() => {
+          this.$toast.success('Sessions removed')
+          if (isAllSessions) {
+            // If all sessions were removed from the current page then go to the previous page
+            if (this.currentPage > 0) {
+              this.currentPage--
+            }
+            this.loadSessions(this.currentPage)
+          } else {
+            // Filter out the deleted sessions
+            this.listeningSessions = this.listeningSessions.filter((ls) => !payload.sessions.includes(ls.id))
+          }
+        })
+        .catch((error) => {
+          const errorMsg = error.response?.data || 'Failed to remove sessions'
+          this.$toast.error(errorMsg)
+        })
+        .finally(() => {
+          this.deletingSessions = false
+        })
+    },
+    removeSessionsClick() {
+      if (!this.numSelected) return
+      const payload = {
+        message: this.$getString('MessageConfirmRemoveListeningSessions', [this.numSelected]),
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.removeSelectedSessions()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    setSelectionForAll(val) {
+      this.listeningSessions = this.listeningSessions.map((s) => {
+        s.selected = val
+        return s
+      })
+    },
+    updatedItemsPerPage() {
+      this.currentPage = 0
+      this.loadSessions(this.currentPage)
+    },
     closedSession() {
       this.loadOpenSessions()
     },
@@ -252,6 +380,13 @@ export default {
     nextPage() {
       this.loadSessions(this.currentPage + 1)
     },
+    clickSessionRow(session) {
+      if (this.numSelected > 0) {
+        session.selected = !session.selected
+      } else {
+        this.showSession(session)
+      }
+    },
     showSession(session) {
       this.selectedSession = session
       this.showSessionModal = true
@@ -274,11 +409,21 @@ export default {
       return 'Unknown'
     },
     async loadSessions(page) {
-      const userFilterQuery = this.selectedUser ? `&user=${this.selectedUser}` : ''
-      const data = await this.$axios.$get(`/api/sessions?page=${page}&itemsPerPage=${this.itemsPerPage}${userFilterQuery}`).catch((err) => {
+      this.loading = true
+      const urlSearchParams = new URLSearchParams()
+      urlSearchParams.set('page', page)
+      urlSearchParams.set('itemsPerPage', this.itemsPerPage)
+      urlSearchParams.set('sort', this.sortBy)
+      urlSearchParams.set('desc', this.sortDesc ? '1' : '0')
+      if (this.selectedUser) {
+        urlSearchParams.set('user', this.selectedUser)
+      }
+
+      const data = await this.$axios.$get(`/api/sessions?${urlSearchParams.toString()}`).catch((err) => {
         console.error('Failed to load listening sessions', err)
         return null
       })
+      this.loading = false
       if (!data) {
         this.$toast.error('Failed to load listening sessions')
         return
@@ -287,8 +432,13 @@ export default {
       this.numPages = data.numPages
       this.total = data.total
       this.currentPage = data.page
-      this.listeningSessions = data.sessions
-      this.userFilter = data.userFilter
+      this.listeningSessions = data.sessions.map((ls) => {
+        return {
+          ...ls,
+          selected: false
+        }
+      })
+      this.userFilter = data.userId
     },
     async loadOpenSessions() {
       const data = await this.$axios.$get('/api/sessions/open').catch((err) => {
@@ -326,15 +476,18 @@ export default {
 .userSessionsTable tr:first-child {
   background-color: #272727;
 }
-.userSessionsTable tr:not(:first-child) {
+.userSessionsTable tr:not(:first-child):not(.selected) {
   background-color: #373838;
 }
-.userSessionsTable tr:not(:first-child):nth-child(odd) {
+.userSessionsTable tr:not(:first-child):nth-child(odd):not(.selected):not(:hover) {
   background-color: #2f2f2f;
 }
 .userSessionsTable tr:hover:not(:first-child) {
   background-color: #474747;
 }
+.userSessionsTable tr.selected {
+  background-color: #474747;
+}
 .userSessionsTable td {
   padding: 4px 8px;
 }

client/strings/cs.json

@@ -406,6 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Datum vydání",
   "LabelRemoveCover": "Odstranit obálku",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Vlastní e-mail vlastníka",
   "LabelRSSFeedCustomOwnerName": "Vlastní jméno vlastníka",
   "LabelRSSFeedOpen": "Otevření RSS kanálu",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Opravdu chcete odstranit kolekci \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Opravdu chcete odstranit epizodu \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Opravdu chcete odstranit {0} epizody?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Opravdu chcete odebrat předčítání \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Opravdu chcete odstranit svůj playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Opravdu chcete přejmenovat žánr \"{0}\" na \"{1}\" pro všechny položky?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Opravdu chcete obnovit zálohu vytvořenou dne?",
   "MessageRestoreBackupWarning": "Obnovení zálohy přepíše celou databázi umístěnou v /config a obálku obrázků v /metadata/items & /metadata/authors.<br /><br />Backups nezmění žádné soubory ve složkách knihovny. Pokud jste povolili nastavení serveru pro ukládání obrázků obalu a metadat do složek knihovny, nebudou zálohovány ani přepsány.<br /><br />Všichni klienti používající váš server budou automaticky obnoveni.",
   "MessageSearchResultsFor": "Výsledky hledání pro",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Server je nedostupný",
   "MessageSetChaptersFromTracksDescription": "Nastavit kapitoly jako kapitolu a název kapitoly jako název zvukového souboru",
   "MessageStartPlaybackAtTime": "Spustit přehrávání pro \"{0}\" v {1}?",