Merge pull request #1594 from NicoPennec/main

Improve update of production thumbnail

src/components/cells/ProductionNameCell.vue

@@ -119,7 +119,9 @@ export default {
     },
 
     thumbnailPath() {
-      return `/api/pictures/thumbnails/projects/${this.entry.id}.png`
+      const lastUpdate = this.entry.updated_at || this.entry.created_at
+      const timestamp = Date.parse(lastUpdate)
+      return `/api/pictures/thumbnails/projects/${this.entry.id}.png?t=${timestamp}`
     }
   },
 

src/components/pages/OpenProductions.vue

@@ -258,7 +258,9 @@ export default {
     },
 
     getThumbnailPath(production) {
-      return `/api/pictures/thumbnails/projects/${production.id}.png`
+      const lastUpdate = production.updated_at || production.created_at
+      const timestamp = Date.parse(lastUpdate)
+      return `/api/pictures/thumbnails/projects/${production.id}.png?t=${timestamp}`
     },
 
     newProductionPage() {

src/components/pages/Productions.vue

@@ -112,6 +112,7 @@ export default {
   methods: {
     ...mapActions([
       'deleteProduction',
+      'editProduction',
       'loadProductions',
       'loadProductionStats',
       'storeProductionPicture',
@@ -120,34 +121,23 @@ export default {
 
     // Actions
 
-    confirmEditProduction(form) {
-      let action = 'newProduction'
-      const isEditing = this.productionToEdit && this.productionToEdit.id
-      if (isEditing) {
-        action = 'editProduction'
-        form.id = this.productionToEdit.id
-      }
-
+    async confirmEditProduction(form) {
       this.loading.edit = true
       this.errors.edit = false
-      this.$store
-        .dispatch(action, form)
-        .then(() => {
-          if (isEditing && this.productionAvatarFormData) {
-            return this.uploadProductionAvatar(form.id)
-          } else {
-            return Promise.resolve()
-          }
-        })
-        .then(() => {
-          this.modals.isEditDisplayed = false
-          this.loading.edit = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.loading.edit = false
-          this.errors.edit = true
+      try {
+        if (this.productionAvatarFormData) {
+          await this.uploadProductionAvatar(this.productionToEdit.id)
+        }
+        await this.editProduction({
+          ...form,
+          id: this.productionToEdit.id
         })
+        this.modals.isEditDisplayed = false
+      } catch (error) {
+        console.error(error)
+        this.errors.edit = true
+      }
+      this.loading.edit = false
     },
 
     confirmDeleteProduction() {
@@ -177,6 +167,7 @@ export default {
     // Events
 
     onEditClicked(production) {
+      this.storeProductionPicture(null)
       this.productionToEdit = production
       this.modals.isEditDisplayed = true
     },

src/components/pages/production/ProductionParameters.vue

@@ -167,15 +167,16 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+
 import { formatSimpleDate, parseSimpleDate } from '@/lib/time'
 import { PRODUCTION_TYPE_OPTIONS, HOME_PAGE_OPTIONS } from '@/lib/productions'
 
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
 import DateField from '@/components/widgets/DateField.vue'
 import FileUpload from '@/components/widgets/FileUpload.vue'
 import TextField from '@/components/widgets/TextField.vue'
-import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 
 export default {
   name: 'production-parameters',
@@ -220,12 +221,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters([
-      'currentProduction',
-      'productionAvatarFormData',
-      'productionStatus',
-      'isTVShow'
-    ])
+    ...mapGetters(['currentProduction', 'productionAvatarFormData', 'isTVShow'])
   },
 
   mounted() {
@@ -278,6 +274,9 @@ export default {
     },
 
     resetForm() {
+      this.$refs.fileField?.reset()
+      this.storeProductionPicture(null)
+
       if (this.currentProduction) {
         this.form = {
           name: this.currentProduction.name,
@@ -334,20 +333,19 @@ export default {
 
     async editParameters() {
       this.isLoading = true
+      this.isError = false
       try {
+        if (this.productionAvatarFormData) {
+          await this.uploadProductionAvatar(this.currentProduction.id)
+        }
         await this.editProduction({
-          id: this.currentProduction.id,
           ...this.form,
+          id: this.currentProduction.id,
           start_date: formatSimpleDate(this.form.start_date),
           end_date: formatSimpleDate(this.form.end_date)
         })
-        if (this.productionAvatarFormData) {
-          await this.uploadProductionAvatar(this.currentProduction.id)
-        }
       } catch {
-        this.isLoading = false
         this.isError = true
-        return
       }
       this.isLoading = false
     }

src/components/widgets/ProductionName.vue

@@ -64,7 +64,10 @@ export default {
     },
 
     thumbnailPath() {
-      return `/api/pictures/thumbnails/projects/${this.production.id}.png`
+      const lastUpdate =
+        this.production.updated_at || this.production.created_at
+      const timestamp = Date.parse(lastUpdate)
+      return `/api/pictures/thumbnails/projects/${this.production.id}.png?t=${timestamp}`
     }
   }
 }

src/store/api/productions.js

@@ -53,11 +53,10 @@ export default {
     return client.pput(`/api/data/projects/${production.id}`, data)
   },
 
-  postAvatar(productionId, formData, callback) {
-    client.post(
+  postAvatar(productionId, formData) {
+    return client.ppost(
       `/api/pictures/thumbnails/projects/${productionId}`,
-      formData,
-      callback
+      formData
     )
   },
 

src/store/modules/productions.js

@@ -397,18 +397,12 @@ const actions = {
     commit(PRODUCTION_PICTURE_FILE_SELECTED, formData)
   },
 
-  uploadProductionAvatar({ commit, state }, productionId) {
-    return new Promise((resolve, reject) => {
-      productionsApi.postAvatar(
-        productionId,
-        state.productionAvatarFormData,
-        err => {
-          commit(PRODUCTION_AVATAR_UPLOADED, productionId)
-          if (err) reject(err)
-          else resolve()
-        }
-      )
-    })
+  async uploadProductionAvatar({ commit, state }, productionId) {
+    await productionsApi.postAvatar(
+      productionId,
+      state.productionAvatarFormData
+    )
+    commit(PRODUCTION_AVATAR_UPLOADED, productionId)
   },
 
   addPersonToTeam({ commit, state }, person) {

tests/unit/store/productions.spec.js

@@ -440,18 +440,18 @@ describe('Productions store', () => {
       const state = {
         productionAvatarFormData: 'form-data'
       }
-      productionApi.postAvatar = vi.fn((_, __, callback) => callback(null))
+      productionApi.postAvatar = vi.fn(() => Promise.resolve())
       await store.actions.uploadProductionAvatar({ commit: mockCommit, state }, 'production-id')
       expect(mockCommit).toBeCalledTimes(1)
       expect(mockCommit).toHaveBeenNthCalledWith(1, PRODUCTION_AVATAR_UPLOADED, 'production-id')
 
       mockCommit = vi.fn()
-      productionApi.postAvatar = vi.fn((_, __, callback) => callback(new Error('error')))
+      productionApi.postAvatar = vi.fn(() => Promise.reject())
       try {
         await store.actions.uploadProductionAvatar({ commit: mockCommit, state }, 'production-id')
       } catch (e) {
-        expect(mockCommit).toBeCalledTimes(1)
-        expect(mockCommit).toHaveBeenNthCalledWith(1, PRODUCTION_AVATAR_UPLOADED, 'production-id')
+        expect(productionApi.postAvatar).toBeCalledTimes(1)
+        expect(mockCommit).toBeCalledTimes(0)
       }
     })