Review multi upload + enhance add related UI with for uploaded files

locales/default.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: BEdita 4 \n"
-"POT-Creation-Date: 2025-06-27 12:35:10 \n"
+"POT-Creation-Date: 2025-08-26 08:17:45 \n"
 "MIME-Version: 1.0 \n"
 "Content-Transfer-Encoding: 8bit \n"
 "Language-Team: BEdita I18N & I10N Team \n"
@@ -307,9 +307,6 @@ msgstr ""
 msgid "Events"
 msgstr ""
 
-msgid "Expired"
-msgstr ""
-
 msgid "Export"
 msgstr ""
 
@@ -364,9 +361,6 @@ msgstr ""
 msgid "From"
 msgstr ""
 
-msgid "Future"
-msgstr ""
-
 msgid "Gender"
 msgstr ""
 
@@ -1520,6 +1514,18 @@ msgstr ""
 msgid "User"
 msgstr ""
 
+#, javascript-format
+msgid "Created on ${ created }."
+msgstr ""
+
+#, javascript-format
+msgid "Modified on ${ modified }."
+msgstr ""
+
+#, javascript-format
+msgid "Publish start on ${ published }."
+msgstr ""
+
 msgid "Loading branches for position"
 msgstr ""
 
@@ -1584,16 +1590,16 @@ msgstr ""
 msgid "copied in the clipboard"
 msgstr ""
 
-#, javascript-format
-msgid "Created on ${ created }."
+msgid "Expired"
 msgstr ""
 
-#, javascript-format
-msgid "Modified on ${ modified }."
+msgid "Future"
 msgstr ""
 
-#, javascript-format
-msgid "Publish start on ${ published }."
+msgid "New"
+msgstr ""
+
+msgid "Uploaded"
 msgstr ""
 
 #, javascript-format
@@ -1706,9 +1712,6 @@ msgstr ""
 msgid "New caption"
 msgstr ""
 
-msgid "New"
-msgstr ""
-
 msgid "No captions"
 msgstr ""
 

locales/en_US/default.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: BEdita Manager \n"
-"POT-Creation-Date: 2025-06-27 12:35:10 \n"
+"POT-Creation-Date: 2025-08-26 08:17:45 \n"
 "PO-Revision-Date:  \n"
 "Last-Translator:  \n"
 "Language-Team: BEdita I18N & I10N Team \n"
@@ -310,9 +310,6 @@ msgstr ""
 msgid "Events"
 msgstr ""
 
-msgid "Expired"
-msgstr ""
-
 msgid "Export"
 msgstr ""
 
@@ -367,9 +364,6 @@ msgstr ""
 msgid "From"
 msgstr ""
 
-msgid "Future"
-msgstr ""
-
 msgid "Gender"
 msgstr ""
 
@@ -1523,6 +1517,18 @@ msgstr ""
 msgid "User"
 msgstr ""
 
+#, javascript-format
+msgid "Created on ${ created }."
+msgstr ""
+
+#, javascript-format
+msgid "Modified on ${ modified }."
+msgstr ""
+
+#, javascript-format
+msgid "Publish start on ${ published }."
+msgstr ""
+
 msgid "Loading branches for position"
 msgstr ""
 
@@ -1587,16 +1593,16 @@ msgstr ""
 msgid "copied in the clipboard"
 msgstr ""
 
-#, javascript-format
-msgid "Created on ${ created }."
+msgid "Expired"
 msgstr ""
 
-#, javascript-format
-msgid "Modified on ${ modified }."
+msgid "Future"
 msgstr ""
 
-#, javascript-format
-msgid "Publish start on ${ published }."
+msgid "New"
+msgstr ""
+
+msgid "Uploaded"
 msgstr ""
 
 #, javascript-format
@@ -1709,9 +1715,6 @@ msgstr ""
 msgid "New caption"
 msgstr ""
 
-msgid "New"
-msgstr ""
-
 msgid "No captions"
 msgstr ""
 

locales/it_IT/default.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: BEdita Manager \n"
-"POT-Creation-Date: 2025-06-27 12:35:10 \n"
+"POT-Creation-Date: 2025-08-26 08:17:45 \n"
 "PO-Revision-Date:  \n"
 "Last-Translator:  \n"
 "Language-Team: BEdita I18N & I10N Team \n"
@@ -312,9 +312,6 @@ msgstr "Errore: %s"
 msgid "Events"
 msgstr "Eventi"
 
-msgid "Expired"
-msgstr "Scaduto"
-
 msgid "Export"
 msgstr "Esporta"
 
@@ -369,9 +366,6 @@ msgstr "Il formato selezionato non è disponibile"
 msgid "From"
 msgstr "Da"
 
-msgid "Future"
-msgstr "Futuro"
-
 msgid "Gender"
 msgstr "Genere"
 
@@ -1542,6 +1536,18 @@ msgstr "Data di inizio"
 msgid "User"
 msgstr "Utente"
 
+#, javascript-format
+msgid "Created on ${ created }."
+msgstr "Creato il ${ created }."
+
+#, javascript-format
+msgid "Modified on ${ modified }."
+msgstr "Modificato il ${ modified }."
+
+#, javascript-format
+msgid "Publish start on ${ published }."
+msgstr "Pubblicato il ${ published }."
+
 msgid "Loading branches for position"
 msgstr "Caricamento rami per posizione"
 
@@ -1606,17 +1612,17 @@ msgstr "Mostra"
 msgid "copied in the clipboard"
 msgstr "copiato negli appunti"
 
-#, javascript-format
-msgid "Created on ${ created }."
-msgstr "Creato il ${ created }."
+msgid "Expired"
+msgstr "Scaduto"
 
-#, javascript-format
-msgid "Modified on ${ modified }."
-msgstr "Modificato il ${ modified }."
+msgid "Future"
+msgstr "Futuro"
 
-#, javascript-format
-msgid "Publish start on ${ published }."
-msgstr "Pubblicato il ${ published }."
+msgid "New"
+msgstr "Nuovo"
+
+msgid "Uploaded"
+msgstr "Caricato"
 
 #, javascript-format
 msgid "Missing required data \"${ required }\". Retry"
@@ -1728,9 +1734,6 @@ msgstr "Formato"
 msgid "New caption"
 msgstr "Nuovo sottotitolo"
 
-msgid "New"
-msgstr "Nuovo"
-
 msgid "No captions"
 msgstr "Nessun sottotitolo"
 

resources/js/app/app.js

@@ -114,6 +114,8 @@ const _vueInstance = new Vue({
         ModuleProperties: () => import(/* webpackChunkName: "module-properties" */'app/components/module/module-properties'),
         ModuleSetup: () => import(/* webpackChunkName: "module-setup" */'app/components/module/module-setup'),
         AddRelatedById: () => import(/* webpackChunkName: "add-related-by-id" */'app/components/add-related-by-id/add-related-by-id'),
+        UploadedObject: () => import(/* webpackChunkName: "uploaded-object" */'app/components/uploaded-object/uploaded-object.vue'),
+        RibbonItem: () => import(/* webpackChunkName: "ribbon-item" */'./components/ribbon-item/ribbon-item.vue'),
         AppIcon,
     },
 
@@ -641,3 +643,5 @@ Vue.component('ModuleSetup', _vueInstance.$options.components.ModuleSetup);
 Vue.component('ObjectCategories', _vueInstance.$options.components.ObjectCategories);
 Vue.component('ObjectCaptions', _vueInstance.$options.components.ObjectCaptions);
 Vue.component('ObjectInfo', _vueInstance.$options.components.ObjectInfo);
+Vue.component('RibbonItem', _vueInstance.$options.components.RibbonItem);
+Vue.component('UploadedObject', _vueInstance.$options.components.UploadedObject);

resources/js/app/components/drop-upload.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="drop-area mb-1 p-1 is-flex is-flex-column" :class="double ? 'drop-area-double' : ''" @drop.prevent="dropFiles" @dragover.prevent="onDragOver"
+    <div class="drop-upload drop-area mb-1 p-1 is-flex is-flex-column" :class="double ? 'drop-area-double' : ''" @drop.prevent="dropFiles" @dragover.prevent="onDragOver"
         @dragleave.prevent="onDragLeave">
         <div class="upload-placeholder" v-if="!Array.from(uploadProgressInfo.values()).length">
             <input class="file-input" type="file" multiple @change="inputFiles" :accept="fileAcceptMimeTypes(objectType)">
@@ -256,6 +256,7 @@ export default {
         },
 
         uploadSuccessful(file, object) {
+            object.meta.fromUpload = true;
             this.$emit('new-relations', [object]);
             this.removeProgressItem(file);
         },
@@ -310,3 +311,9 @@ export default {
     },
 }
 </script>
+<style scoped>
+div.drop-upload {
+    min-width: 800px;
+    max-width: 1000px;
+}
+</style>

resources/js/app/components/ribbon-item/ribbon-item.vue

@@ -0,0 +1,81 @@
+<template>
+    <div
+        class="ribbon-item ribbon"
+        :class="itemClass(item, dataList)"
+        v-if="visible"
+    >
+        <span v-if="itemLabel(item)">{{ itemLabel(item) }}</span>
+    </div>
+</template>
+<script>
+import moment from 'moment';
+import { t } from 'ttag';
+
+export default {
+    name: 'RibbonItem',
+    props: {
+        dataList: {
+            type: Boolean,
+            default: false
+        },
+        item: {
+            type: Object,
+            required: true
+        },
+        stage: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            msgExpired: t`Expired`,
+            msgFuture: t`Future`,
+            msgNew: t`New`,
+            msgUploaded: t`Uploaded`,
+        };
+    },
+    computed: {
+        visible() {
+            return this.stage || Date.parse(this.item.attributes.publish_start) > Date.now() || Date.parse(this.item.attributes.publish_end) < Date.now();
+        },
+    },
+    methods: {
+        itemClass(item, dataList) {
+            const type = item?.type;
+
+            return `ribbon ${type ? 'has-background-module-' + type : ''} ${dataList ? 'in-data-list' : ''}`;
+        },
+
+        itemLabel(item) {
+            if (this.stage) {
+                return this.itemNew(item) && item?.meta?.fromUpload ? this.msgUploaded : this.msgNew;
+            }
+            if (!item.attributes.publish_start) {
+                return '';
+            }
+
+            return Date.parse(item.attributes.publish_start) > Date.now() ? this.msgFuture : this.msgExpired;
+        },
+
+        itemNew(item) {
+            const now = new Date();
+            const sd = moment(item.meta.created);
+            const ed = moment(now);
+            const diff = moment.duration(ed.diff(sd)).asMinutes();
+
+            return diff <= 1;
+        },
+    },
+}
+</script>
+<style scoped>
+div.ribbon-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+div.ribbon-item span {
+    margin-right: 0.5rem;
+}
+</style>