From 96f0945764729943bd5acba801aa3aa2041c269f Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 7 Feb 2025 11:14:46 +0100
Subject: [PATCH 1/4] [previews] Open sub file browser by default

---
 src/components/previews/PreviewPlayer.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
index c18636a46..2ac43ee64 100644
--- a/src/components/previews/PreviewPlayer.vue
+++ b/src/components/previews/PreviewPlayer.vue
@@ -685,7 +685,7 @@ export default {
       isLoading: false,
       isMuted: false,
       isPlaying: false,
-      isOrdering: false,
+      isOrdering: true,
       isRepeating: false,
       isTyping: false,
       isWireframe: false,
@@ -755,6 +755,7 @@ export default {
       this.onObjectBackgroundSelected()
     }
     this.resetPencilConfiguration()
+    this.isOrdering = this.previews.length > 1
   },
 
   beforeUnmount() {
@@ -2122,6 +2123,7 @@ export default {
         }
       })
       this.setDefaultComparisonTaskType()
+      this.isOrdering = this.previews.length > 1
     },
 
     'currentPreview.revision'() {

From 4d31760ffb05f161e799e681b01152053853ee09 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 7 Feb 2025 11:24:30 +0100
Subject: [PATCH 2/4] [entity] Allow to see preview list as a contact sheet

---
 .../pages/entities/EntityPreviewFileCard.vue  | 200 ++++++++++++++++++
 .../pages/entities/EntityPreviewFiles.vue     |  90 +++++++-
 2 files changed, 286 insertions(+), 4 deletions(-)
 create mode 100644 src/components/pages/entities/EntityPreviewFileCard.vue

diff --git a/src/components/pages/entities/EntityPreviewFileCard.vue b/src/components/pages/entities/EntityPreviewFileCard.vue
new file mode 100644
index 000000000..14810ab11
--- /dev/null
+++ b/src/components/pages/entities/EntityPreviewFileCard.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="preview-card flexcolumn" :key="previewFile.id">
+    <entity-preview
+      :entity="{
+        preview_file_id: previewFile.id,
+        preview_file_extension: previewFile.extension
+      }"
+      :empty-height="200"
+      :empty-width="300"
+      :height="200"
+      :width="300"
+      is-rounded-top-border
+      show-movie
+    />
+    <div class="preview-card-data">
+      <div class="flexrow">
+        <span class="card-revision tag strong flexrow-item">
+          v{{ previewFile.revision }}
+        </span>
+        <span
+          class="card-file-name flexrow-item"
+          :title="previewFile.original_name"
+        >
+          {{ `${previewFile.original_name}` }}
+        </span>
+        <span class="filler"></span>
+        <span class="card-extension flexrow-item mr0">
+          {{ previewFile.extension }}
+        </span>
+      </div>
+      <div class="flexrow mt1">
+        <span
+          class="preview-status mr05"
+          :title="previewFile.validation_status"
+          :style="getPreviewValidationStyle(previewFile)"
+        >
+          &nbsp;
+        </span>
+        <people-avatar
+          class="person"
+          :person="personMap.get(previewFile.person_id)"
+          :font-size="10"
+          :size="20"
+        />
+        <span class="filler"></span>
+        <span
+          class="card-file-size flexrow-item mr05"
+          v-if="previewFile.file_size"
+        >
+          {{ renderFileSize(previewFile.file_size) }}B
+        </span>
+        <a
+          class="download-button"
+          :href="getDownloadPath(previewFile.id)"
+          :title="$t('playlists.actions.download_file')"
+          v-if="!isCurrentUserArtist"
+        >
+          <download-icon class="icon is-small" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { DownloadIcon } from 'lucide-vue-next'
+
+import { renderFileSize } from '@/lib/render'
+
+import EntityPreview from '@/components/widgets/EntityPreview.vue'
+import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
+
+export default {
+  name: 'entity-preview-files',
+
+  components: {
+    DownloadIcon,
+    EntityPreview,
+    PeopleAvatar
+  },
+
+  data() {
+    return {
+      contactSheetMode: false,
+      isLoading: false,
+      previewFiles: []
+    }
+  },
+
+  props: {
+    previewFile: {
+      type: Object,
+      required: true,
+      default: () => {}
+    }
+  },
+
+  mounted() {},
+
+  computed: {
+    ...mapGetters([
+      'currentProduction',
+      'isCurrentUserArtist',
+      'personMap',
+      'taskMap',
+      'taskTypeMap'
+    ])
+  },
+
+  methods: {
+    getPreviewValidationStyle(previewFile) {
+      let color = '#AAA'
+      if (previewFile.validation_status === 'validated') {
+        color = '#67BE48' // green
+      } else if (previewFile.validation_status === 'rejected') {
+        color = '#FF3860' // red
+      }
+      return { background: color }
+    },
+
+    getTaskType(previewFile) {
+      const task = this.taskMap.get(previewFile.task_id)
+      return this.taskTypeMap.get(task.task_type_id)
+    },
+
+    getDownloadPath(previewFileId) {
+      const type = this.previewFile.extension === 'mp4' ? 'movies' : 'pictures'
+      return (
+        `/api/${type}/originals/preview-files/` + `${previewFileId}/download`
+      )
+    },
+
+    renderFileSize
+  },
+
+  watch: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.preview-card {
+  background: var(--background);
+  border-radius: 10px;
+  box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.1);
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  max-width: 300px;
+  overflow: hidden;
+
+  .card-revision {
+    margin-right: 0.5rem;
+  }
+
+  .preview-card-data {
+    padding: 0.5rem;
+  }
+
+  .card-file-name {
+    display: inline-block;
+    font-size: 0.9rem;
+    overflow: hidden;
+    max-width: 240px;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+    word-break: none;
+  }
+
+  .card-extension {
+    background: var(--background-alt);
+    border-radius: 4px;
+    font-size: 0.8rem;
+    padding: 0.2rem 0.5rem;
+    margin-right: 0rem;
+    text-transform: uppercase;
+  }
+
+  .preview-status {
+    border-radius: 50%;
+    border: 2px solid $grey;
+    cursor: pointer;
+    height: 20px;
+    min-width: 20px;
+    transition: background 0.3s ease;
+    width: 20px;
+  }
+
+  .card-file-size {
+    color: var(--text-light);
+    font-weight: 600;
+    font-size: 0.9rem;
+  }
+
+  .download-button {
+    padding-top: 0.5rem;
+    padding-right: 0.1rem;
+  }
+}
+</style>
diff --git a/src/components/pages/entities/EntityPreviewFiles.vue b/src/components/pages/entities/EntityPreviewFiles.vue
index f3ce015b9..39340749b 100644
--- a/src/components/pages/entities/EntityPreviewFiles.vue
+++ b/src/components/pages/entities/EntityPreviewFiles.vue
@@ -1,10 +1,38 @@
 <template>
   <div class="mt1 flexcolumn wrapper preview-files">
+    <div class="buttons flexrow mb1">
+      <span class="filler"></span>
+      <button-simple
+        class="flexrow-item"
+        icon="grid"
+        :is-on="contactSheetMode"
+        :title="$t('tasks.show_contact_sheet')"
+        @click="contactSheetMode = !contactSheetMode"
+      />
+    </div>
     <div class="has-text-centered" v-if="isLoading">
       <spinner />
     </div>
-    <div v-else-if="previewFiles.length > 0">
-      <table class="datatable">
+    <div v-else-if="previewFiles.length > 0 && !isLoading">
+      <div class="contact-sheet flexcolumn" v-if="contactSheetMode">
+        <div
+          :key="'task-type-group-' + index"
+          v-for="(taskTypePreviewFiles, index) in taskTypePreviewFileGroups"
+        >
+          <div class="flexrow-item mb1">
+            <task-type-name :task-type="getTaskType(taskTypePreviewFiles[0])" />
+          </div>
+
+          <div class="flexrow task-types-preview mb2">
+            <entity-preview-file-card
+              :key="previewFile.id"
+              :preview-file="previewFile"
+              v-for="previewFile in taskTypePreviewFiles"
+            />
+          </div>
+        </div>
+      </div>
+      <table class="datatable" v-else>
         <thead class="datatable-head">
           <tr class="datatable-row-header">
             <th class="thumbnail"></th>
@@ -98,24 +126,33 @@ import { mapGetters, mapActions } from 'vuex'
 
 import { renderFileSize } from '@/lib/render'
 
+import preferences from '@/lib/preferences'
+
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
+import EntityPreviewFileCard from '@/components/pages/entities/EntityPreviewFileCard.vue'
 import PeopleNameCell from '@/components/cells/PeopleNameCell.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
+import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
 import TaskTypeCell from '@/components/cells/TaskTypeCell.vue'
 
 export default {
   name: 'entity-preview-files',
 
   components: {
+    ButtonSimple,
     DownloadIcon,
+    EntityPreviewFileCard,
     EntityThumbnail,
     PeopleNameCell,
     Spinner,
-    TaskTypeCell
+    TaskTypeCell,
+    TaskTypeName
   },
 
   data() {
     return {
+      contactSheetMode: false,
       isLoading: false,
       previewFiles: []
     }
@@ -131,6 +168,10 @@ export default {
   mounted() {
     if (!this.entity) return
     this.reset()
+    this.contactSheetMode = preferences.getBoolPreference(
+      'entity:preview-files-contact-sheet',
+      false
+    )
   },
 
   computed: {
@@ -140,12 +181,34 @@ export default {
       'personMap',
       'taskMap',
       'taskTypeMap'
-    ])
+    ]),
+
+    taskTypePreviewFileGroups() {
+      const taskTypePreviewFiles = new Map()
+      this.previewFiles.forEach(previewFile => {
+        const taskType = this.getTaskType(previewFile)
+        if (!taskTypePreviewFiles.has(taskType.id)) {
+          taskTypePreviewFiles.set(taskType.id, [])
+        }
+        taskTypePreviewFiles.get(taskType.id).push(previewFile)
+      })
+      return Array.from(taskTypePreviewFiles.values())
+    }
   },
 
   methods: {
     ...mapActions(['getEntityPreviewFiles']),
 
+    getPreviewValidationStyle(previewFile) {
+      let color = '#AAA'
+      if (previewFile.validation_status === 'validated') {
+        color = '#67BE48' // green
+      } else if (previewFile.validation_status === 'rejected') {
+        color = '#FF3860' // red
+      }
+      return { background: color }
+    },
+
     getTaskType(previewFile) {
       const task = this.taskMap.get(previewFile.task_id)
       return this.taskTypeMap.get(task.task_type_id)
@@ -183,6 +246,13 @@ export default {
   watch: {
     entity() {
       if (this.entity) this.reset()
+    },
+
+    contactSheetMode() {
+      preferences.setPreference(
+        'entity:preview-files-contact-sheet',
+        this.contactSheetMode
+      )
     }
   }
 }
@@ -247,4 +317,16 @@ td.type {
 .datatable-row-header::after {
   display: none;
 }
+
+.preview-files {
+  flex: 1;
+}
+
+.contact-sheet {
+  flex-wrap: wrap;
+}
+
+.task-types-preview {
+  flex-wrap: wrap;
+}
 </style>

From 34dc2dbe03414491586e8e3676c36d9393ece3b4 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 7 Feb 2025 16:26:59 +0100
Subject: [PATCH 3/4] [entities] Add date to entity preview file list

---
 src/components/pages/entities/EntityPreviewFiles.vue | 9 +++++++++
 src/locales/en.js                                    | 1 +
 2 files changed, 10 insertions(+)

diff --git a/src/components/pages/entities/EntityPreviewFiles.vue b/src/components/pages/entities/EntityPreviewFiles.vue
index 39340749b..f38b83d02 100644
--- a/src/components/pages/entities/EntityPreviewFiles.vue
+++ b/src/components/pages/entities/EntityPreviewFiles.vue
@@ -57,6 +57,9 @@
             <th class="person">
               {{ $t('entities.preview_files.uploader') }}
             </th>
+            <th class="date">
+              {{ $t('entities.preview_files.uploaded_at') }}
+            </th>
             <th class="end-cell"></th>
           </tr>
         </thead>
@@ -99,6 +102,9 @@
               class="person"
               :person="personMap.get(previewFile.person_id)"
             />
+            <td class="date">
+              {{ previewFile.date }}
+            </td>
 
             <td class="download">
               <a
@@ -294,6 +300,9 @@ td.type {
 .download {
   width: 40px;
 }
+.date {
+  width: 80px;
+}
 
 .original-name {
   width: 250px;
diff --git a/src/locales/en.js b/src/locales/en.js
index bcd4b670d..e0d894ac6 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -353,6 +353,7 @@ export default {
       size: 'Size',
       status: 'Status',
       task_type: 'Task type',
+      uploaded_at: 'Uploaded at',
       uploader: 'Uploaded by'
     },
 

From 3ea0b1f4bc8a771d7222d3f72d8ffca02e673db7 Mon Sep 17 00:00:00 2001
From: Nicolas PENNEC <493223+NicoPennec@users.noreply.github.com>
Date: Mon, 10 Feb 2025 15:07:48 +0100
Subject: [PATCH 4/4] [qa] fix component name

---
 src/components/pages/entities/EntityPreviewFileCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/entities/EntityPreviewFileCard.vue b/src/components/pages/entities/EntityPreviewFileCard.vue
index 14810ab11..704ade0bf 100644
--- a/src/components/pages/entities/EntityPreviewFileCard.vue
+++ b/src/components/pages/entities/EntityPreviewFileCard.vue
@@ -72,7 +72,7 @@ import EntityPreview from '@/components/widgets/EntityPreview.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 
 export default {
-  name: 'entity-preview-files',
+  name: 'entity-preview-file-card',
 
   components: {
     DownloadIcon,