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

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: {