Merge pull request #1691 from frankrousseau/main

Show entity preview files as a contact sheet

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-file-card',
+
+  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>

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>
@@ -29,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>
@@ -71,6 +102,9 @@
               class="person"
               :person="personMap.get(previewFile.person_id)"
             />
+            <td class="date">
+              {{ previewFile.date }}
+            </td>
 
             <td class="download">
               <a
@@ -98,24 +132,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 +174,10 @@ export default {
   mounted() {
     if (!this.entity) return
     this.reset()
+    this.contactSheetMode = preferences.getBoolPreference(
+      'entity:preview-files-contact-sheet',
+      false
+    )
   },
 
   computed: {
@@ -140,12 +187,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 +252,13 @@ export default {
   watch: {
     entity() {
       if (this.entity) this.reset()
+    },
+
+    contactSheetMode() {
+      preferences.setPreference(
+        'entity:preview-files-contact-sheet',
+        this.contactSheetMode
+      )
     }
   }
 }
@@ -224,6 +300,9 @@ td.type {
 .download {
   width: 40px;
 }
+.date {
+  width: 80px;
+}
 
 .original-name {
   width: 250px;
@@ -247,4 +326,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>