Various fixes

package.json

@@ -26,7 +26,7 @@
     "@fullcalendar/multimonth": "6.1.19",
     "@fullcalendar/vue3": "6.1.19",
     "@google/model-viewer": "4.1.0",
-    "@sentry/vue": "10.29.0",
+    "@sentry/vue": "10.30.0",
     "@unhead/vue": "2.0.19",
     "@vuepic/vue-datepicker": "11.0.3",
     "async": "3.2.6",
@@ -40,7 +40,7 @@
     "exceljs": "4.4.0",
     "fabric": "cgwire/fabric.js",
     "file-saver": "2.0.5",
-    "lucide-vue-next": "0.556.0",
+    "lucide-vue-next": "0.561.0",
     "marked": "16.4.2",
     "marked-emoji": "2.0.2",
     "moment": "2.30.1",
@@ -52,7 +52,7 @@
     "socket.io-client": "4.8.1",
     "superagent": "10.2.3",
     "thenby": "1.3.4",
-    "three": "0.181.2",
+    "three": "0.182.0",
     "uuid": "13.0.0",
     "v-autosize": "2.0.1",
     "vue": "3.5.13",
@@ -62,7 +62,7 @@
     "vue-i18n": "9.14.5",
     "vue-meta": "2.4.0",
     "vue-multiselect": "3.4.0",
-    "vue-router": "4.6.3",
+    "vue-router": "4.6.4",
     "vue-websocket-next": "0.2.7",
     "vue3-emoji-picker": "1.1.8",
     "vuedraggable": "4.1.0",
@@ -71,10 +71,10 @@
     "wavesurfer.js": "7.11.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "6.0.2",
+    "@vitejs/plugin-vue": "6.0.3",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "2.4.6",
-    "autoprefixer": "10.4.22",
+    "autoprefixer": "10.4.23",
     "eslint": "8.57.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.4",
@@ -85,8 +85,8 @@
     "lint-staged": "16.2.7",
     "localStorage": "1.0.4",
     "prettier": "3.7.4",
-    "sass": "1.94.2",
-    "vite": "7.2.7",
+    "sass": "1.97.0",
+    "vite": "7.3.0",
     "vitest": "4.0.15",
     "vitest-localstorage-mock": "0.1.2"
   },

src/components/cells/DepartmentNamesCell.vue

@@ -1,12 +1,10 @@
 <template>
-  <td class="departments">
-    <span
-      class="departments-element"
-      :key="'department-' + department.id"
-      v-for="department in sortDepartments(departments)"
-    >
-      <department-name :department="department" v-if="department" />
-    </span>
+  <td>
+    <department-name
+      :key="department.id"
+      :department="department"
+      v-for="department in sortedDepartments"
+    />
   </td>
 </template>
 
@@ -32,13 +30,13 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['departmentMap'])
-  },
+    ...mapGetters(['departmentMap']),
 
-  methods: {
-    sortDepartments(departmentIds = []) {
+    sortedDepartments() {
       return sortByName(
-        departmentIds.map(departmentId => this.departmentMap.get(departmentId))
+        this.departments
+          .map(departmentId => this.departmentMap.get(departmentId))
+          .filter(Boolean)
       )
     }
   }

src/components/lists/PeopleList.vue

@@ -281,10 +281,6 @@ export default {
 .departments {
   width: 180px;
   min-width: 180px;
-
-  .departments-element {
-    padding: 5px;
-  }
 }
 
 .studio {

src/components/lists/TaskList.vue

@@ -645,7 +645,7 @@ export default {
         } else {
           data = {
             start_date: null,
-            due_date: dueDate
+            due_date: task.due_date
           }
         }
         if (task.difficulty) {
@@ -682,7 +682,7 @@ export default {
           )
         } else {
           data = {
-            start_date: startDate,
+            start_date: task.start_date,
             due_date: null
           }
         }

src/components/lists/TodosList.vue

@@ -773,7 +773,7 @@ export default {
         } else {
           data = {
             start_date: null,
-            due_date: dueDate
+            due_date: task.due_date
           }
         }
         if (this.isTaskChanged(task, data)) {
@@ -807,7 +807,7 @@ export default {
           )
         } else {
           data = {
-            start_date: startDate,
+            start_date: task.start_date,
             due_date: null
           }
         }

src/components/modals/EditAssetModal.vue

@@ -251,13 +251,13 @@ export default {
     getEntityTypeIdDefaultValue() {
       let entityTypeId = this.assetToEdit.asset_type_id
       if (!entityTypeId) {
-        entityTypeId = this.productionAssetTypeOptions[0].value
+        entityTypeId = this.productionAssetTypeOptions[0]?.value
       }
-      const isInOptions = this.productionAssetTypeOptions.find(
+      const isInOptions = this.productionAssetTypeOptions.some(
         option => option.value === entityTypeId
       )
       if (!isInOptions) {
-        entityTypeId = this.productionAssetTypeOptions[0].value
+        entityTypeId = this.productionAssetTypeOptions[0]?.value
       }
       return entityTypeId
     },

src/components/modals/EditBackgroundModal.vue

@@ -144,7 +144,7 @@ export default {
         this.form.name = file.name.slice(0, -4)
       }
       this.$nextTick(() => {
-        this.$refs.nameField.focus()
+        this.$refs.nameField?.focus()
       })
     },
 

src/components/pages/Logs.vue

@@ -15,7 +15,7 @@
       </ul>
     </div>
     <events v-if="isActiveTab('events')" />
-    <preview-files v-if="isActiveTab('preview_files')" />
+    <preview-files v-else-if="isActiveTab('preview_files')" />
   </div>
 </template>
 

src/components/pages/Shots.vue

@@ -454,7 +454,9 @@ export default {
     const finalize = () => {
       this.$nextTick(() => {
         // Needed to be sure the current production is set
-        this.loadShots()
+        this.loadShots(() => {
+          this.initialLoading = false
+        })
       })
     }
 

src/components/pages/Task.vue

@@ -1288,7 +1288,7 @@ export default {
       this.$refs['preview-player'].displayFirst()
       this.deleteTaskPreview({
         taskId: this.task.id,
-        commentId: comment.id,
+        commentId: comment?.id,
         previewId: this.currentExtraPreviewId
       })
         .then(() => {

src/components/pages/logs/Events.vue

@@ -17,25 +17,24 @@
       <button-simple
         class="flexrow-item small"
         icon="refresh"
-        @click="loadDayEvents"
+        :is-loading="loading.events"
+        :title="$t('main.reload')"
+        @click="loadDayEvents()"
       />
-      <span class="flexrow-item nb-events">
-        {{ filteredEvents.length }} {{ $t('logs.events') }}
-      </span>
     </div>
 
-    <div class="mt2 empty" v-if="!isLoading && !filteredEvents.length">
+    <div class="mt2 empty" v-if="!loading.events && !filteredEvents.length">
       {{ $t('logs.empty_list') }}
     </div>
-    <div class="has-text-centered" v-if="isLoading">
+    <div class="has-text-centered" v-if="loading.events">
       <spinner />
     </div>
     <div class="log-list" v-else>
       <div
         class="event-line"
         :key="event.id"
         @click="selectLine(event)"
-        v-for="event in displayedEvents"
+        v-for="event in filteredEvents"
       >
         <span class="date tag mr1">{{ event.date }} </span>
         <span
@@ -77,8 +76,9 @@
       </div>
       <div class="has-text-centered mt1" v-if="hasMoreEvents">
         <button-simple
+          :is-loading="loading.moreEvents"
           :text="$t('main.load_more')"
-          @click="displayLimit += PAGE_SIZE"
+          @click="loadMoreEvents()"
         />
       </div>
     </div>
@@ -99,6 +99,8 @@ import PeopleField from '@/components/widgets/PeopleField.vue'
 import PeopleName from '@/components/widgets/PeopleName.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
 
+const PAGE_SIZE = 1000
+
 export default {
   name: 'events',
 
@@ -114,15 +116,16 @@ export default {
   },
 
   data() {
-    const PAGE_SIZE = 1000
     return {
-      PAGE_SIZE,
       currentDate: new Date(),
       events: [],
-      isLoading: true,
+      hasMoreEvents: false,
       selectedEvents: {},
       selectedPerson: null,
-      displayLimit: PAGE_SIZE
+      loading: {
+        events: false,
+        moreEvents: false
+      }
     }
   },
 
@@ -145,50 +148,69 @@ export default {
         )
       }
       return events
-    },
-
-    displayedEvents() {
-      return this.filteredEvents.slice(0, this.displayLimit)
-    },
-
-    hasMoreEvents() {
-      return this.filteredEvents.length > this.displayLimit
     }
   },
 
   methods: {
     ...mapActions(['loadEvents']),
 
-    loadDayEvents() {
+    async loadDayEvents() {
       const before = moment(this.currentDate).add(1, 'days')
       const after = moment(this.currentDate)
       this.selectedEvents = {}
-      this.displayLimit = this.PAGE_SIZE
-      this.isLoading = true
-      this.loadEvents({
-        after: formatFullDateWithRevertedTimezone(after, this.timezone),
-        before: formatFullDateWithRevertedTimezone(before, this.timezone)
-      })
-        .then(events => {
-          this.events = events.map(event => {
-            const [name, type] = event.name.split(':')
-            return {
-              id: event.id,
-              date: this.formatDate(event.created_at),
-              data: event.data,
-              name,
-              shortType: type.substring(0, 3),
-              type,
-              user_id: event.user_id
-            }
-          })
+      this.events = []
+      this.loading.events = true
+      try {
+        const events = await this.loadEvents({
+          after: formatFullDateWithRevertedTimezone(after, this.timezone),
+          before: formatFullDateWithRevertedTimezone(before, this.timezone),
+          limit: PAGE_SIZE
         })
-        .catch(err => {
-          console.error(err)
-        })
-        .finally(() => {
-          this.isLoading = false
+        this.events = this.formatEvents(events)
+        this.hasMoreEvents = events.length >= PAGE_SIZE
+      } catch (err) {
+        console.error(err)
+      } finally {
+        this.loading.events = false
+      }
+    },
+
+    async loadMoreEvents() {
+      if (!this.events.length) return
+
+      this.loading.moreEvents = true
+      const lastEventId = this.events[this.events.length - 1].id
+      const before = moment(this.currentDate).add(1, 'days')
+      const after = moment(this.currentDate)
+      try {
+        const events = await this.loadEvents({
+          after: formatFullDateWithRevertedTimezone(after, this.timezone),
+          before: formatFullDateWithRevertedTimezone(before, this.timezone),
+          lastEventId,
+          limit: PAGE_SIZE
         })
+        this.events = [...this.events, ...this.formatEvents(events)]
+        this.hasMoreEvents = events.length >= PAGE_SIZE
+      } catch (err) {
+        console.error(err)
+      } finally {
+        this.loading.moreEvents = false
+      }
+    },
+
+    formatEvents(events) {
+      return events.map(event => {
+        const [name, type] = event.name.split(':')
+        return {
+          id: event.id,
+          date: this.formatDate(event.created_at),
+          data: event.data,
+          name,
+          shortType: type.substring(0, 3),
+          type,
+          user_id: event.user_id
+        }
+      })
     },
 
     selectLine(event) {