[IMP] hr_expense: readability expense receipts

The goal of this PR is to improve the readability of expense receipts on
hr_expense and hr_expense_sheet.
This PR do the following:
- Add the expense name next to the filename
- Vertically center the receipt on both model (was previously done in hr_expense
 but not for the sheet)
- Make sure the title doesn't get hidden by the image (was previously done in
hr_expense but not for the sheet)

Also, to achieve the first point we had to modify the attachment so that we can
retrieve easily the information of which line the attachment is attached.

closes odoo/odoo#130181

Task: 3443067
Signed-off-by: William André (wan) <wan@odoo.com>

addons/hr_expense/static/src/components/attachment_view.js

@@ -0,0 +1,13 @@
+/** @odoo-module **/
+
+import { patch } from "@web/core/utils/patch";
+import { AttachmentView } from "@mail/core/common/attachment_view";
+
+patch(AttachmentView.prototype, {
+    get displayName() {
+        if (this.state.thread.model === 'hr.expense.sheet') {
+            return (this.state.thread.mainAttachment.res_name || this.state.thread.name) + ' - ' + this.state.thread.mainAttachment.filename;
+        }
+        return super.displayName;
+    }
+});

addons/hr_expense/static/src/scss/hr_expense.scss

@@ -23,8 +23,11 @@
     display: flex;
     justify-content: center;
     z-index: -1;
-}
 
+    img {
+        max-height: 100%;
+    }
+}
 .o_dropzone {
     width: 100%;
     height: 100%;

addons/hr_expense/views/hr_expense_views.xml

@@ -849,7 +849,7 @@
                         </page>
                      </notebook>
                 </sheet>
-                <div class="o_attachment_preview"/>
+                <div class="o_attachment_preview o_center_attachment"/>
                 <div class="oe_chatter">
                     <field name="message_follower_ids"/>
                     <field name="activity_ids"/>

addons/mail/models/ir_attachment.py

@@ -81,6 +81,7 @@ class IrAttachment(models.Model):
             'filename': attachment.name,
             'name': attachment.name,
             "size": attachment.file_size,
+            'res_name': attachment.res_name,
             'mimetype': 'application/octet-stream' if safari and attachment.mimetype and 'video' in attachment.mimetype else attachment.mimetype,
             'originThread': [('insert', {
                 'id': attachment.res_id,

addons/mail/static/src/core/common/attachment_model.js

@@ -40,6 +40,7 @@ export class Attachment extends Record {
     mimetype;
     name;
     originThreadLocalId;
+    res_name;
     type;
     /** @type {string} */
     tmpUrl;

addons/mail/static/src/core/common/attachment_service.js

@@ -34,6 +34,7 @@ export class AttachmentService {
             "accessToken",
             "tmpUrl",
             "message",
+            "res_name",
         ]);
         if (!("extension" in data) && data["name"]) {
             attachment.extension = attachment.name.split(".").pop();

addons/mail/static/src/core/common/attachment_view.js

@@ -59,4 +59,8 @@ export class AttachmentView extends Component {
             model: props.threadModel,
         });
     }
+
+    get displayName() {
+        return this.state.thread.mainAttachment.filename;
+    }
 }

addons/mail/static/src/core/common/attachment_view.xml

@@ -4,7 +4,7 @@
     <t t-name="mail.AttachmentView">
         <div t-if="state.thread.attachmentsInWebClientView.length > 0" class="o-mail-Attachment">
             <t t-if="state.thread.mainAttachment">
-                <h3 t-if="!state.thread.mainAttachment.isPdf" class="mt0 mb8 ps-2 text-muted float-end"><t t-esc="state.thread.mainAttachment.filename"/></h3>
+                <h3 t-if="!state.thread.mainAttachment.isPdf" class="mt0 mb8 ps-2 text-muted text-center"><t t-esc="displayName"/></h3>
                 <div t-if="state.thread.mainAttachment.isImage" class="o-mail-Attachment-imgContainer">
                     <img id="attachment_img" class="img img-fluid d-block" t-att-src="state.thread.mainAttachment.defaultSource"/>
                 </div>