Various improvements

src/components/lists/TaskList.vue

@@ -28,6 +28,9 @@
             <th class="frames number-cell" ref="th-frames" v-if="isShots">
               {{ $t('tasks.fields.frames') }}
             </th>
+            <th class="difficulty number-cell" ref="th-difficulty">
+              {{ $t('tasks.fields.difficulty') }}
+            </th>
             <th
               ref="th-estimation"
               class="estimation number-cell"
@@ -119,6 +122,25 @@
             <td class="frames number-cell" v-if="isShots">
               {{ getEntity(task.entity.id).nb_frames }}
             </td>
+            <td class="difficulty number-cell">
+              <combobox
+                class="difficulty-combobox"
+                :options="difficultyOptions"
+                :with-margin="false"
+                :value="task.difficulty"
+                @input="updateDifficulty($event)"
+                v-if="isInDepartment(task) && selectionGrid[task.id]"
+                v-models="task.difficulty"
+              />
+              <span
+                class="difficulty number-cell"
+                v-for="index in task.difficulty"
+                :key="task.id + 'difficulty' + index"
+                v-else
+              >
+                &bull;
+              </span>
+            </td>
             <td class="estimation number-cell">
               <input
                 class="input"
@@ -317,6 +339,7 @@ import {
 import { formatListMixin } from '@/components/mixins/format'
 import { domMixin } from '@/components/mixins/dom'
 
+import Combobox from '@/components/widgets/Combobox.vue'
 import DateField from '@/components/widgets/DateField.vue'
 import EntityPreview from '@/components/widgets/EntityPreview.vue'
 import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
@@ -331,6 +354,7 @@ export default {
   mixins: [domMixin, formatListMixin],
 
   components: {
+    Combobox,
     DateField,
     EntityPreview,
     EntityThumbnail,
@@ -342,6 +366,13 @@ export default {
 
   data() {
     return {
+      difficultyOptions: [
+        { label: '•', value: 1 },
+        { label: '••', value: 2 },
+        { label: '•••', value: 3 },
+        { label: '••••', value: 4 },
+        { label: '•••••', value: 5 }
+      ],
       lastSelection: null,
       page: 1,
       selectionGrid: {},
@@ -531,7 +562,9 @@ export default {
       return (
         (data.start_date !== undefined && taskStart !== data.start_date) ||
         (data.due_date !== undefined && taskDue !== data.due_date) ||
-        (data.estimation !== undefined && task.estimation !== data.estimation)
+        (data.estimation !== undefined &&
+          task.estimation !== data.estimation) ||
+        (data.difficulty !== undefined && task.difficulty !== data.difficulty)
       )
     },
 
@@ -560,7 +593,8 @@ export default {
       Object.keys(this.selectionGrid).forEach(taskId => {
         let data = {
           start_date: null,
-          due_date: null
+          due_date: null,
+          difficulty: null
         }
         const task = this.taskMap.get(taskId)
         const dueDate = task.due_date ? parseSimpleDate(task.due_date) : null
@@ -583,6 +617,9 @@ export default {
             due_date: dueDate
           }
         }
+        if (task.difficulty) {
+          data.difficulty = task.difficulty
+        }
         if (this.isTaskChanged(task, data)) {
           this.updateTask({ taskId, data }).catch(console.error)
         }
@@ -644,6 +681,20 @@ export default {
       })
     },
 
+    updateDifficulty(difficulty) {
+      this.updateTasksDifficulty({ difficulty })
+    },
+
+    updateTasksDifficulty({ difficulty }) {
+      Object.keys(this.selectionGrid).forEach(taskId => {
+        const task = this.taskMap.get(taskId)
+        const data = { difficulty }
+        if (this.isTaskChanged(task, data)) {
+          this.updateTask({ taskId, data }).catch(console.error)
+        }
+      })
+    },
+
     formatDate(date) {
       if (date) return moment(date).format('YYYY-MM-DD')
       return ''
@@ -691,6 +742,16 @@ export default {
         event.target &&
         // Dirty hack needed to make date picker and inputs work properly
         (['INPUT'].includes(event.target.nodeName) ||
+          // Combo box should not trigger selection
+          event.target.className.indexOf('selected-line') >= 0 ||
+          event.target.className.indexOf('down-icon') >= 0 ||
+          event.target.className.indexOf('flexrow') >= 0 ||
+          event.target.className.indexOf('c-mask') >= 0 ||
+          event.target.className.indexOf('option-line') >= 0 ||
+          event.target.className.indexOf('combobox') >= 0 ||
+          event.target.className === '' ||
+          (event.target.parentNode &&
+            ['difficulty'].includes(event.target.className)) ||
           (event.target.parentNode &&
             ['HEADER'].includes(event.target.parentNode.nodeName)) ||
           ['cell day selected'].includes(event.target.className))

src/components/mixins/parameters.js

@@ -0,0 +1,58 @@
+/*
+ * Helpers to apply and save parameters to the url and local storage.
+ */
+import preferences from '@/lib/preferences'
+
+export const parametersMixin = {
+  methods: {
+    applyParametersToUrl() {
+      const query = Object.keys(this.parameters).reduce((acc, key) => {
+        if (this.parameters[key]) {
+          acc[key] = this.parameters[key]
+          if (acc[key] === 'true') {
+            acc[key] = true
+          } else if (acc[key] === 'false') {
+            acc[key] = false
+          }
+        }
+        return acc
+      }, {})
+      this.$router.replace({ query })
+    },
+
+    getParametersFromUrl() {
+      return this.$route.query
+    },
+
+    applyQueryParameters(params) {
+      const urlParams = this.getParametersFromUrl()
+      Object.assign(params, urlParams || {})
+      return params
+    },
+
+    saveParemetersToPreferences() {
+      preferences.setObjectPreference(
+        `parameters:{this.parameterNamespace}`,
+        this.parameters
+      )
+    },
+
+    getParametersFromPreferences(defaultParameters) {
+      return (
+        preferences.getObjectPreference(
+          `parameters:{this.parameterNamespace}`
+        ) || defaultParameters
+      )
+    }
+  },
+
+  watch: {
+    parameters: {
+      deep: true,
+      handler() {
+        this.applyParametersToUrl()
+        this.saveParemetersToPreferences()
+      }
+    }
+  }
+}

src/components/mixins/player.js

@@ -643,10 +643,10 @@ export const playerMixin = {
       document.activeElement.blur()
       this.fullScreen = false
       setTimeout(() => {
-        window.dispatchEvent(new Event('resize'))
+        this.triggerResize()
       }, 200)
       setTimeout(() => {
-        window.dispatchEvent(new Event('resize'))
+        this.triggerResize()
       }, 500)
     },
 
@@ -763,10 +763,10 @@ export const playerMixin = {
       if (this.fullScreen && !this.isFullScreen()) {
         this.fullScreen = false
         setTimeout(() => {
-          window.dispatchEvent(new Event('resize'))
+          this.triggerResize()
         }, 200)
         setTimeout(() => {
-          window.dispatchEvent(new Event('resize'))
+          this.triggerResize()
         }, 500)
       }
     },
@@ -905,7 +905,7 @@ export const playerMixin = {
 
     onFilmClicked() {
       this.isEntitiesHidden = !this.isEntitiesHidden
-      window.dispatchEvent(new Event('resize'))
+      this.triggerResize()
       this.$nextTick(() => {
         this.resetHeight()
         this.scrollToEntity(this.playingEntityIndex)
@@ -953,7 +953,7 @@ export const playerMixin = {
       if (!this.isCommentsHidden) {
         this.$refs['task-info'].$el.style.height = `${height}px`
       }
-      window.dispatchEvent(new Event('resize'))
+      this.triggerResize()
       this.$nextTick(() => {
         this.$refs['task-info'].focusCommentTextarea()
         this.resetHeight()
@@ -1422,6 +1422,10 @@ export const playerMixin = {
           return resolve(file)
         })
       })
+    },
+
+    triggerResize() {
+      window.dispatchEvent(new Event('resize'))
     }
   },
 

src/components/modals/EditBackgroundModal.vue

@@ -36,6 +36,7 @@
             v-model.trim="form.name"
           />
           <boolean-field
+            class="mb2"
             :label="$t('backgrounds.fields.is_default')"
             @enter="confirmClicked"
             v-model="form.is_default"

src/components/modals/EditSearchFilterGroupModal.vue

@@ -27,6 +27,7 @@
           <color-field :label="$t('main.color')" v-model="form.color" />
 
           <boolean-field
+            class="mt1"
             :label="$t('main.is_shared')"
             v-model="form.is_shared"
             v-if="isCurrentUserManager && currentProduction"

src/components/modals/EditSearchFilterModal.vue

@@ -36,6 +36,7 @@
           />
 
           <combobox
+            class="mt2"
             :label="$t('main.filter_group')"
             :options="allowedGroups"
             v-model="form.search_filter_group_id"

src/components/modals/EditTaskStatusModal.vue

@@ -42,41 +42,48 @@
             v-model="form.description"
           />
           <boolean-field
+            class="mr05 mb05"
             :label="$t('task_status.fields.is_default')"
             @enter="confirmClicked"
             v-model="form.is_default"
             :disabled="form.for_concept === 'true'"
           />
           <boolean-field
+            class="mr05 mb05"
             :label="$t('task_status.fields.is_done')"
             @enter="confirmClicked"
             v-model="form.is_done"
             v-if="form.is_default === 'false'"
           />
           <boolean-field
+            class="mr05 mb05"
             :label="$t('task_status.fields.is_retake')"
             @enter="confirmClicked"
             v-model="form.is_retake"
             v-if="form.is_default === 'false'"
           />
           <boolean-field
+            class="mr05 mb05"
             :label="$t('task_status.fields.is_artist_allowed')"
             @enter="confirmClicked"
             v-model="form.is_artist_allowed"
           />
           <boolean-field
+            class="mr05 mb05"
             :label="$t('task_status.fields.is_client_allowed')"
             @enter="confirmClicked"
             v-model="form.is_client_allowed"
             v-if="form.for_concept !== 'true'"
           />
           <boolean-field
+            class="mr05 mb05"
             :label="$t('task_status.fields.is_feedback_request')"
             @enter="confirmClicked"
             v-model="form.is_feedback_request"
             v-if="form.is_default === 'false'"
           />
           <color-field
+            class="mt2"
             :label="$t('task_status.fields.color')"
             :colors="colors"
             v-model="form.color"