Various fixes and improvements

package.json

@@ -27,7 +27,7 @@
     "color-string": "1.9.1",
     "fabric": "cgwire/fabric.js",
     "marked": "4.3.0",
-    "marked-emoji": "1.3.0",
+    "marked-emoji": "1.3.1",
     "moment": "2.29.4",
     "moment-timezone": "0.5.43",
     "panzoom": "9.4.3",
@@ -64,18 +64,18 @@
     "@vue/compiler-sfc": "2.7.15",
     "@vue/test-utils": "1.3.6",
     "autoprefixer": "10.4.16",
-    "eslint": "8.54.0",
-    "eslint-config-prettier": "9.0.0",
+    "eslint": "8.55.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.0.1",
-    "eslint-plugin-vue": "9.18.1",
+    "eslint-plugin-vue": "9.19.2",
     "esm": "3.2.25",
     "husky": "8.0.3",
-    "jsdom": "23.0.0",
-    "lint-staged": "15.1.0",
+    "jsdom": "23.0.1",
+    "lint-staged": "15.2.0",
     "localStorage": "1.0.4",
     "prettier": "3.1.0",
     "sass": "1.69.5",
-    "vite": "5.0.4",
+    "vite": "5.0.6",
     "vite-plugin-eslint": "1.8.1",
     "vitest": "0.34.6",
     "vitest-localstorage-mock": "0.0.1",

src/components/modals/CreateTasksModal.vue

@@ -6,20 +6,16 @@
     }"
   >
     <div class="modal-background" @click="$emit('cancel')"></div>
-
     <div class="modal-content">
       <div class="box content">
         <page-title :text="title" />
-
         <p>{{ text }}</p>
-
         <form v-on:submit.prevent class="widden">
           <combobox-task-type
             :task-type-list="getApplicableTaskTypes()"
             v-model="form.task_type_id"
           />
         </form>
-
         <div class="flexrow">
           <div class="filler"></div>
           <combobox
@@ -63,7 +59,8 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
+
 import { modalMixin } from '@/components/modals/base_modal'
 import Combobox from '@/components/widgets/Combobox'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType'
@@ -136,25 +133,23 @@ export default {
       'productionSequenceTaskTypes'
     ]),
     isAssetTasks() {
-      return this.$route.path.indexOf('assets') >= 0
+      return this.$route.path.includes('assets')
     },
     isShotsTasks() {
-      return this.$route.path.indexOf('shots') >= 0
+      return this.$route.path.includes('shots')
     },
     isSequencesTasks() {
-      return this.$route.path.indexOf('sequences') >= 0
-    },
-    isEpisodesTasks() {
-      return this.$route.path.indexOf('episodes') >= 0
+      return this.$route.path.includes('sequences')
     },
     isEditsTasks() {
-      return this.$route.path.indexOf('edits') >= 0
+      return this.$route.path.includes('edits')
+    },
+    isEpisodesTasks() {
+      return this.$route.path.includes('episodes')
     }
   },
 
   methods: {
-    ...mapActions([]),
-
     getApplicableTaskTypes() {
       if (this.isAssetTasks) {
         return this.productionAssetTaskTypes
@@ -165,12 +160,13 @@ export default {
       if (this.isSequencesTasks) {
         return this.productionSequenceTaskTypes
       }
-      if (this.isEpisodesTasks) {
-        return this.productionEpisodeTaskTypes
-      }
       if (this.isEditsTasks) {
         return this.productionEditTaskTypes
       }
+      if (this.isEpisodesTasks) {
+        return this.productionEpisodeTaskTypes
+      }
+      return []
     },
 
     confirmClicked() {

src/components/pages/FirstConnection.vue

@@ -23,7 +23,7 @@
           <p class="control has-icon">
             <input
               class="input is-medium email"
-              type="text"
+              type="email"
               :placeholder="$t('login.fields.email')"
               @keyup.enter="confirmResetPassword"
               v-model="email"

src/components/pages/Login.vue

@@ -18,7 +18,7 @@
             <p class="control has-icon">
               <input
                 class="input is-medium email"
-                type="text"
+                type="email"
                 :placeholder="$t('login.fields.email')"
                 @input="updateEmail"
                 @keyup.enter="confirmLogIn"

src/components/pages/ResetPassword.vue

@@ -12,7 +12,7 @@
           <p class="control has-icon">
             <input
               class="input is-medium email"
-              type="text"
+              type="email"
               :placeholder="$t('login.fields.email')"
               @keyup.enter="confirmResetPassword"
               v-model="email"

src/components/widgets/PeopleField.vue

@@ -1,28 +1,40 @@
 <template>
-  <v-autocomplete
-    ref="autocomplete"
-    :auto-select-one-item="false"
-    :component-item="assignationItem"
-    :get-label="getAssignationLabel"
-    :items="items"
-    :input-attrs="{
-      placeholder: placeholder || this.$t('people.select_person'),
-      class: wide
-        ? 'big wide v-autocomplete-input'
-        : big
-          ? 'big v-autocomplete-input'
-          : 'v-autocomplete-input'
-    }"
-    :min-len="1"
-    @update-items="update"
-    @input="onChange"
-    v-model="item"
-  />
+  <div>
+    <v-autocomplete
+      ref="autocomplete"
+      :auto-select-one-item="false"
+      :component-item="assignationItem"
+      :get-label="getAssignationLabel"
+      :items="items"
+      :input-attrs="{
+        placeholder: placeholder || this.$t('people.select_person'),
+        class: wide
+          ? 'big wide v-autocomplete-input'
+          : big
+            ? 'big v-autocomplete-input'
+            : 'v-autocomplete-input'
+      }"
+      :keep-open="keepOpen"
+      :min-len="1"
+      :wait="100"
+      @focus="keepOpen = true"
+      @input="onChange"
+      @item-clicked="keepOpen = false"
+      @update-items="update"
+      v-model="item"
+    />
+    <div
+      @click="keepOpen = false"
+      :class="{
+        'c-mask': true,
+        'is-active': keepOpen
+      }"
+    ></div>
+  </div>
 </template>
 
 <script>
 import AssignationItem from '@/components/widgets/AssignationItem'
-import { mapGetters } from 'vuex'
 import { buildNameIndex, indexSearch } from '@/lib/indexing'
 
 export default {
@@ -31,8 +43,9 @@ export default {
   data() {
     return {
       assignationItem: AssignationItem,
+      item: null,
       items: [],
-      item: {},
+      keepOpen: false,
       searchText: ''
     }
   },
@@ -62,48 +75,38 @@ export default {
   },
 
   props: {
-    value: {
-      type: Object,
-      default: () => {}
+    big: {
+      type: Boolean,
+      default: false
     },
     people: {
       type: Array,
       default: () => []
     },
-    big: {
-      type: Boolean,
-      default: false
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: Object,
+      default: () => {}
     },
     wide: {
       type: Boolean,
       default: false
-    },
-    placeholder: {
-      type: String,
-      default: ''
     }
   },
 
-  computed: {
-    ...mapGetters(['peopleIndex'])
-  },
-
   methods: {
     getAssignationLabel(item) {
-      if (item) {
-        return item.name
-      } else {
-        return ''
-      }
+      return item?.name || ''
     },
 
     update(searchText) {
-      if (searchText && searchText.length > 0) {
-        const result = indexSearch(this.index, [searchText])
-        this.items = result
-      } else {
-        this.items = this.people
-      }
+      this.keepOpen = true
+      this.items = searchText?.length
+        ? indexSearch(this.index, [searchText])
+        : this.people
     },
 
     onChange() {
@@ -115,8 +118,7 @@ export default {
     },
 
     focus() {
-      const inputEl = this.$el.querySelector('.v-autocomplete-input')
-      if (inputEl) inputEl.focus()
+      this.$el.querySelector('.v-autocomplete-input')?.focus()
     }
   },
 
@@ -128,7 +130,7 @@ export default {
     },
 
     people() {
-      this.items = null
+      this.item = null
       this.items = this.people
       this.index = buildNameIndex(this.people)
     }
@@ -142,26 +144,23 @@ export default {
   border-color: $dark-grey;
   color: $white-grey;
 
-  &:active {
-    border: 1px solid $green;
-  }
-
+  &:active,
   &:hover {
     border: 1px solid $green;
   }
-}
 
-.dark .v-autocomplete .v-autocomplete-input-group .v-autocomplete-input:focus {
-  border-color: $green;
+  &:focus {
+    border-color: $green;
+  }
 }
 
 .dark .v-autocomplete .v-autocomplete-list {
-  box-shadow: 2px 2px 2px 0px $dark-grey-light;
+  box-shadow: 2px 2px 2px 0 $dark-grey-light;
   border-color: $dark-grey;
 }
 
 .v-autocomplete .v-autocomplete-list {
-  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
   left: 6px;
   top: 41px;
   width: calc(100% - 13px);
@@ -173,6 +172,11 @@ export default {
   border-bottom-right-radius: 10px;
 }
 
+.v-autocomplete {
+  z-index: 2000;
+  position: relative;
+}
+
 .v-autocomplete .v-autocomplete-list-item {
   background: white;
   border: 0;
@@ -204,12 +208,7 @@ export default {
   border-radius: 10px;
   padding: 0.5em;
 
-  &:active {
-    border: 1px solid $green;
-    border-left-bottom-radius: 0px;
-    border-right-bottom-radius: 0px;
-  }
-
+  &:active,
   &:hover {
     border: 1px solid $green;
   }