Add:Ereader device setting to set users that have access #1982

client/components/modals/emails/EReaderDeviceModal.vue

@@ -8,14 +8,22 @@
     <form @submit.prevent="submitForm">
       <div class="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
         <div class="w-full px-3 py-5 md:p-12">
-          <div class="flex items-center -mx-1 mb-2">
+          <div class="flex items-center -mx-1 mb-4">
             <div class="w-full md:w-1/2 px-1">
               <ui-text-input-with-label ref="ereaderNameInput" v-model="newDevice.name" :disabled="processing" :label="$strings.LabelName" />
             </div>
             <div class="w-full md:w-1/2 px-1">
               <ui-text-input-with-label ref="ereaderEmailInput" v-model="newDevice.email" :disabled="processing" :label="$strings.LabelEmail" />
             </div>
           </div>
+          <div class="flex items-center -mx-1 mb-4">
+            <div class="w-full md:w-1/2 px-1">
+              <ui-dropdown v-model="newDevice.availabilityOption" :label="$strings.LabelDeviceIsAvailableTo" :items="userAvailabilityOptions" @input="availabilityOptionChanged" />
+            </div>
+            <div class="w-full md:w-1/2 px-1">
+              <ui-multi-select-dropdown v-if="newDevice.availabilityOption === 'specificUsers'" v-model="newDevice.users" :label="$strings.HeaderUsers" :items="userOptions" />
+            </div>
+          </div>
 
           <div class="flex items-center pt-4">
             <div class="flex-grow" />
@@ -45,8 +53,11 @@ export default {
       processing: false,
       newDevice: {
         name: '',
-        email: ''
-      }
+        email: '',
+        availabilityOption: 'adminAndUp',
+        users: []
+      },
+      users: []
     }
   },
   watch: {
@@ -68,10 +79,55 @@ export default {
       }
     },
     title() {
-      return this.ereaderDevice ? 'Create Device' : 'Update Device'
+      return !this.ereaderDevice ? 'Create Device' : 'Update Device'
+    },
+    userAvailabilityOptions() {
+      return [
+        {
+          text: this.$strings.LabelAdminUsersOnly,
+          value: 'adminOrUp'
+        },
+        {
+          text: this.$strings.LabelAllUsersExcludingGuests,
+          value: 'userOrUp'
+        },
+        {
+          text: this.$strings.LabelAllUsersIncludingGuests,
+          value: 'guestOrUp'
+        },
+        {
+          text: this.$strings.LabelSelectUsers,
+          value: 'specificUsers'
+        }
+      ]
+    },
+    userOptions() {
+      return this.users.map((u) => ({ text: u.username, value: u.id }))
     }
   },
   methods: {
+    availabilityOptionChanged(option) {
+      if (option === 'specificUsers' && !this.users.length) {
+        this.loadUsers()
+      }
+    },
+    async loadUsers() {
+      this.processing = true
+      this.users = await this.$axios
+        .$get('/api/users')
+        .then((res) => {
+          return res.users.sort((a, b) => {
+            return a.createdAt - b.createdAt
+          })
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          return []
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
     submitForm() {
       this.$refs.ereaderNameInput.blur()
       this.$refs.ereaderEmailInput.blur()
@@ -81,19 +137,27 @@ export default {
         return
       }
 
+      if (this.newDevice.availabilityOption === 'specificUsers' && !this.newDevice.users.length) {
+        this.$toast.error('Must select at least one user')
+        return
+      }
+      if (this.newDevice.availabilityOption !== 'specificUsers') {
+        this.newDevice.users = []
+      }
+
       this.newDevice.name = this.newDevice.name.trim()
       this.newDevice.email = this.newDevice.email.trim()
 
       if (!this.ereaderDevice) {
         if (this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error('EReader device with that name already exists')
+          this.$toast.error('Ereader device with that name already exists')
           return
         }
 
         this.submitCreate()
       } else {
         if (this.ereaderDevice.name !== this.newDevice.name && this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error('EReader device with that name already exists')
+          this.$toast.error('Ereader device with that name already exists')
           return
         }
 
@@ -160,9 +224,17 @@ export default {
       if (this.ereaderDevice) {
         this.newDevice.name = this.ereaderDevice.name
         this.newDevice.email = this.ereaderDevice.email
+        this.newDevice.availabilityOption = this.ereaderDevice.availabilityOption || 'adminOrUp'
+        this.newDevice.users = this.ereaderDevice.users || []
+
+        if (this.newDevice.availabilityOption === 'specificUsers' && !this.users.length) {
+          this.loadUsers()
+        }
       } else {
         this.newDevice.name = ''
         this.newDevice.email = ''
+        this.newDevice.availabilityOption = 'adminOrUp'
+        this.newDevice.users = []
       }
     }
   },

client/components/ui/Dropdown.vue

@@ -13,7 +13,7 @@
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox">
         <template v-for="item in itemsToShow">
           <li :key="item.value" class="text-gray-100 relative py-2 cursor-pointer hover:bg-black-400" :id="'listbox-option-' + item.value" role="option" tabindex="0" @keyup.enter="clickedOption(item.value)" @click="clickedOption(item.value)">
             <div class="flex items-center">

client/components/ui/InputDropdown.vue

@@ -4,7 +4,7 @@
     <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'">
-          <input ref="input" v-model="textInput" :disabled="disabled" :readonly="!editable" class="h-full w-full bg-transparent focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
+          <input ref="input" v-model="textInput" :disabled="disabled" :readonly="!editable" class="h-full w-full bg-transparent focus:outline-none px-1" @focus="inputFocus" @blur="inputBlur" />
         </div>
       </form>
 
@@ -48,8 +48,6 @@ export default {
   data() {
     return {
       isFocused: false,
-      // currentSearch: null,
-      typingTimeout: null,
       textInput: null
     }
   },
@@ -83,12 +81,6 @@ export default {
     }
   },
   methods: {
-    keydownInput() {
-      clearTimeout(this.typingTimeout)
-      this.typingTimeout = setTimeout(() => {
-        // this.currentSearch = this.textInput
-      }, 100)
-    },
     setFocus() {
       if (this.$refs.input && this.editable) this.$refs.input.focus()
     },
@@ -133,11 +125,9 @@ export default {
       if (val && !this.items.includes(val)) {
         this.$emit('newItem', val)
       }
-      // this.currentSearch = null
     },
     clickedOption(e, item) {
       this.textInput = null
-      // this.currentSearch = null
       this.input = item
       if (this.$refs.input) this.$refs.input.blur()
     }

client/components/ui/MultiSelectDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full" v-click-outside="closeMenu">
+  <div class="w-full" v-click-outside="clickOutsideObj">
     <p class="px-1 text-sm font-semibold">{{ label }}</p>
     <div ref="wrapper" class="relative">
       <div ref="inputWrapper" style="min-height: 40px" class="flex-wrap relative w-full shadow-sm flex items-center bg-primary border border-gray-600 rounded-md px-2 py-1 cursor-pointer" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
@@ -11,23 +11,24 @@
         </div>
       </div>
 
-      <ul ref="menu" v-show="showMenu" class="absolute z-60 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
-        <template v-for="item in items">
-          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
-            <div class="flex items-center">
-              <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
+      <transition name="menu">
+        <ul ref="menu" v-show="showMenu" class="absolute z-60 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+          <template v-for="item in items">
+            <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
+              <p class="font-normal ml-3 block truncate">{{ item.text }}</p>
+
+              <div v-if="selected.includes(item.value)" class="text-yellow-400 absolute inset-y-0 right-0 my-auto w-5 h-5 mr-3 overflow-hidden">
+                <span class="material-icons text-xl">checkmark</span>
+              </div>
+            </li>
+          </template>
+          <li v-if="!items.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
+            <div class="flex items-center justify-center">
+              <span class="font-normal">{{ $strings.MessageNoItems }}</span>
             </div>
-            <span v-if="selected.includes(item.value)" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
-              <span class="material-icons text-xl">checkmark</span>
-            </span>
           </li>
-        </template>
-        <li v-if="!items.length" class="text-gray-50 select-none relative py-2 pr-9" role="option">
-          <div class="flex items-center justify-center">
-            <span class="font-normal">{{ $strings.MessageNoItems }}</span>
-          </div>
-        </li>
-      </ul>
+        </ul>
+      </transition>
     </div>
   </div>
 </template>
@@ -48,7 +49,12 @@ export default {
   data() {
     return {
       showMenu: false,
-      menu: null
+      menu: null,
+      clickOutsideObj: {
+        handler: this.closeMenu,
+        events: ['mousedown'],
+        isActive: true
+      }
     }
   },
   computed: {

client/strings/da.json

@@ -181,8 +181,11 @@
   "LabelAddToCollectionBatch": "Tilføj {0} Bøger til Samling",
   "LabelAddToPlaylist": "Tilføj til Afspilningsliste",
   "LabelAddToPlaylistBatch": "Tilføj {0} Elementer til Afspilningsliste",
+  "LabelAdminUsersOnly": "Admin users only",
   "LabelAll": "Alle",
   "LabelAllUsers": "Alle Brugere",
+  "LabelAllUsersExcludingGuests": "All users excluding guests",
+  "LabelAllUsersIncludingGuests": "All users including guests",
   "LabelAlreadyInYourLibrary": "Allerede i dit bibliotek",
   "LabelAppend": "Tilføj",
   "LabelAuthor": "Forfatter",
@@ -229,6 +232,7 @@
   "LabelDeselectAll": "Fravælg Alle",
   "LabelDevice": "Enheds",
   "LabelDeviceInfo": "Enhedsinformation",
+  "LabelDeviceIsAvailableTo": "Device is available to...",
   "LabelDirectory": "Mappe",
   "LabelDiscFromFilename": "Disk fra Filnavn",
   "LabelDiscFromMetadata": "Disk fra Metadata",
@@ -394,6 +398,7 @@
   "LabelSeason": "Sæson",
   "LabelSelectAllEpisodes": "Vælg alle episoder",
   "LabelSelectEpisodesShowing": "Vælg {0} episoder vist",
+  "LabelSelectUsers": "Select users",
   "LabelSendEbookToDevice": "Send e-bog til...",
   "LabelSequence": "Sekvens",
   "LabelSeries": "Serie",

client/strings/de.json

@@ -181,8 +181,11 @@
   "LabelAddToCollectionBatch": "Füge {0} Hörbüch(er)/Podcast(s) der Sammlung hinzu",
   "LabelAddToPlaylist": "Zur Wiedergabeliste hinzufügen",
   "LabelAddToPlaylistBatch": "Füge {0} Hörbüch(er)/Podcast(s) der Wiedergabeliste hinzu",
+  "LabelAdminUsersOnly": "Admin users only",
   "LabelAll": "Alle",
   "LabelAllUsers": "Alle Benutzer",
+  "LabelAllUsersExcludingGuests": "All users excluding guests",
+  "LabelAllUsersIncludingGuests": "All users including guests",
   "LabelAlreadyInYourLibrary": "In der Bibliothek vorhanden",
   "LabelAppend": "Anhängen",
   "LabelAuthor": "Autor",
@@ -229,6 +232,7 @@
   "LabelDeselectAll": "Alles abwählen",
   "LabelDevice": "Gerät",
   "LabelDeviceInfo": "Geräteinformationen",
+  "LabelDeviceIsAvailableTo": "Device is available to...",
   "LabelDirectory": "Verzeichnis",
   "LabelDiscFromFilename": "CD aus dem Dateinamen",
   "LabelDiscFromMetadata": "CD aus den Metadaten",
@@ -394,6 +398,7 @@
   "LabelSeason": "Staffel",
   "LabelSelectAllEpisodes": "Alle Episoden auswählen",
   "LabelSelectEpisodesShowing": "{0} ausgewählte Episoden werden angezeigt",
+  "LabelSelectUsers": "Select users",
   "LabelSendEbookToDevice": "E-Book senden an...",
   "LabelSequence": "Reihenfolge",
   "LabelSeries": "Serien",

client/strings/en-us.json

@@ -181,8 +181,11 @@
   "LabelAddToCollectionBatch": "Add {0} Books to Collection",
   "LabelAddToPlaylist": "Add to Playlist",
   "LabelAddToPlaylistBatch": "Add {0} Items to Playlist",
+  "LabelAdminUsersOnly": "Admin users only",
   "LabelAll": "All",
   "LabelAllUsers": "All Users",
+  "LabelAllUsersExcludingGuests": "All users excluding guests",
+  "LabelAllUsersIncludingGuests": "All users including guests",
   "LabelAlreadyInYourLibrary": "Already in your library",
   "LabelAppend": "Append",
   "LabelAuthor": "Author",
@@ -229,6 +232,7 @@
   "LabelDeselectAll": "Deselect All",
   "LabelDevice": "Device",
   "LabelDeviceInfo": "Device Info",
+  "LabelDeviceIsAvailableTo": "Device is available to...",
   "LabelDirectory": "Directory",
   "LabelDiscFromFilename": "Disc from Filename",
   "LabelDiscFromMetadata": "Disc from Metadata",
@@ -394,6 +398,7 @@
   "LabelSeason": "Season",
   "LabelSelectAllEpisodes": "Select all episodes",
   "LabelSelectEpisodesShowing": "Select {0} episodes showing",
+  "LabelSelectUsers": "Select users",
   "LabelSendEbookToDevice": "Send Ebook to...",
   "LabelSequence": "Sequence",
   "LabelSeries": "Series",

client/strings/es.json

@@ -181,8 +181,11 @@
   "LabelAddToCollectionBatch": "Se Añadieron {0} Libros a la Colección",
   "LabelAddToPlaylist": "Añadido a la Lista de Reproducción",
   "LabelAddToPlaylistBatch": "Se Añadieron {0} Artículos a la Lista de Reproducción",
+  "LabelAdminUsersOnly": "Admin users only",
   "LabelAll": "Todos",
   "LabelAllUsers": "Todos los Usuarios",
+  "LabelAllUsersExcludingGuests": "All users excluding guests",
+  "LabelAllUsersIncludingGuests": "All users including guests",
   "LabelAlreadyInYourLibrary": "Ya en la Biblioteca",
   "LabelAppend": "Adjuntar",
   "LabelAuthor": "Autor",
@@ -229,6 +232,7 @@
   "LabelDeselectAll": "Deseleccionar Todos",
   "LabelDevice": "Dispositivo",
   "LabelDeviceInfo": "Información de Dispositivo",
+  "LabelDeviceIsAvailableTo": "Device is available to...",
   "LabelDirectory": "Directorio",
   "LabelDiscFromFilename": "Disco a partir del Nombre del Archivo",
   "LabelDiscFromMetadata": "Disco a partir de Metadata",
@@ -394,6 +398,7 @@
   "LabelSeason": "Temporada",
   "LabelSelectAllEpisodes": "Seleccionar todos los episodios",
   "LabelSelectEpisodesShowing": "Seleccionar los {0} episodios visibles",
+  "LabelSelectUsers": "Select users",
   "LabelSendEbookToDevice": "Enviar Ebook a...",
   "LabelSequence": "Secuencia",
   "LabelSeries": "Series",

client/strings/fr.json

@@ -181,8 +181,11 @@
   "LabelAddToCollectionBatch": "Ajout de {0} livres à la lollection",
   "LabelAddToPlaylist": "Ajouter à la liste de lecture",
   "LabelAddToPlaylistBatch": "{0} éléments ajoutés à la liste de lecture",
+  "LabelAdminUsersOnly": "Admin users only",
   "LabelAll": "Tout",
   "LabelAllUsers": "Tous les utilisateurs",
+  "LabelAllUsersExcludingGuests": "All users excluding guests",
+  "LabelAllUsersIncludingGuests": "All users including guests",
   "LabelAlreadyInYourLibrary": "Déjà dans la bibliothèque",
   "LabelAppend": "Ajouter",
   "LabelAuthor": "Auteur",
@@ -229,6 +232,7 @@
   "LabelDeselectAll": "Tout déselectionner",
   "LabelDevice": "Appareil",
   "LabelDeviceInfo": "Détail de l’appareil",
+  "LabelDeviceIsAvailableTo": "Device is available to...",
   "LabelDirectory": "Répertoire",
   "LabelDiscFromFilename": "Disque depuis le fichier",
   "LabelDiscFromMetadata": "Disque depuis les métadonnées",
@@ -394,6 +398,7 @@
   "LabelSeason": "Saison",
   "LabelSelectAllEpisodes": "Sélectionner tous les épisodes",
   "LabelSelectEpisodesShowing": "Sélectionner {0} episode(s) en cours",
+  "LabelSelectUsers": "Select users",
   "LabelSendEbookToDevice": "Envoyer le livre numérique à...",
   "LabelSequence": "Séquence",
   "LabelSeries": "Séries",