initial commit 2

3 files changed, 187 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.js b/addons/mail/static/src/components/attachment_list/attachment_list.js
new file mode 100644
index 00000000..d8658ac8
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_list/attachment_list.js
@@ -0,0 +1,119 @@
+odoo.define('mail/static/src/components/attachment_list/attachment_list.js', function (require) {
+'use strict';
+
+const components = {
+    Attachment: require('mail/static/src/components/attachment/attachment.js'),
+};
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class AttachmentList extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                attachmentLocalIds: 1,
+            },
+        });
+        useStore(props => {
+            const attachments = this.env.models['mail.attachment'].all().filter(attachment =>
+                props.attachmentLocalIds.includes(attachment.localId)
+            );
+            return {
+                attachments: attachments
+                    ? attachments.map(attachment => attachment.__state)
+                    : undefined,
+            };
+        }, {
+            compareDepth: {
+                attachments: 1,
+            },
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.attachment[]}
+     */
+    get attachments() {
+        return this.env.models['mail.attachment'].all().filter(attachment =>
+            this.props.attachmentLocalIds.includes(attachment.localId)
+        );
+    }
+
+    /**
+     * @returns {mail.attachment[]}
+     */
+    get imageAttachments() {
+        return this.attachments.filter(attachment => attachment.fileType === 'image');
+    }
+
+    /**
+     * @returns {mail.attachment[]}
+     */
+    get nonImageAttachments() {
+        return this.attachments.filter(attachment => attachment.fileType !== 'image');
+    }
+
+    /**
+     * @returns {mail.attachment[]}
+     */
+    get viewableAttachments() {
+        return this.attachments.filter(attachment => attachment.isViewable);
+    }
+
+}
+
+Object.assign(AttachmentList, {
+    components,
+    defaultProps: {
+        attachmentLocalIds: [],
+    },
+    props: {
+        areAttachmentsDownloadable: {
+            type: Boolean,
+            optional: true,
+        },
+        areAttachmentsEditable: {
+            type: Boolean,
+            optional: true,
+        },
+        attachmentLocalIds: {
+            type: Array,
+            element: String,
+        },
+        attachmentsDetailsMode: {
+            type: String,
+            optional: true,
+            validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop),
+        },
+        attachmentsImageSize: {
+            type: String,
+            optional: true,
+            validate: prop => ['small', 'medium', 'large'].includes(prop),
+        },
+        showAttachmentsExtensions: {
+            type: Boolean,
+            optional: true,
+        },
+        showAttachmentsFilenames: {
+            type: Boolean,
+            optional: true,
+        },
+    },
+    template: 'mail.AttachmentList',
+});
+
+return AttachmentList;
+
+});
diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.scss b/addons/mail/static/src/components/attachment_list/attachment_list.scss
new file mode 100644
index 00000000..dfe281ae
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_list/attachment_list.scss
@@ -0,0 +1,29 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_AttachmentList {
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-start;
+}
+
+/* Avoid overflow of long attachment text */
+.o_AttachmentList_attachment {
+    margin-bottom: map-get($spacers, 1);
+    margin-top: map-get($spacers, 1);
+    margin-inline-end: map-get($spacers, 1);
+    margin-inline-start: map-get($spacers, 0);
+    max-width: 100%;
+}
+
+.o_AttachmentList_partialList {
+    display: flex;
+    flex: 1;
+    flex-flow: wrap;
+}
+
+.o_AttachmentList_partialListNonImages {
+    margin: map-get($spacers, 1);
+    justify-content: flex-start;
+}
diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.xml b/addons/mail/static/src/components/attachment_list/attachment_list.xml
new file mode 100644
index 00000000..39499285
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_list/attachment_list.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.AttachmentList" owl="1">
+        <div class="o_AttachmentList">
+            <div class="o_AttachmentList_partialList o_AttachmentList_partialListImages">
+                <t t-foreach="imageAttachments" t-as="attachment" t-key="attachment.localId">
+                    <Attachment
+                        class="o_AttachmentList_attachment o_AttachmentList_imageAttachment"
+                        attachmentLocalId="attachment.localId"
+                        attachmentLocalIds="viewableAttachments.map(attachment => attachment.localId)"
+                        detailsMode="props.attachmentsDetailsMode"
+                        imageSize="props.attachmentsImageSize"
+                        isDownloadable="props.areAttachmentsDownloadable"
+                        isEditable="props.areAttachmentsEditable"
+                        showExtension="props.showAttachmentsExtensions"
+                        showFilename="props.showAttachmentsFilenames"
+                    />
+                </t>
+            </div>
+            <div class="o_AttachmentList_partialList o_AttachmentList_partialListNonImages">
+                <t t-foreach="nonImageAttachments" t-as="attachment" t-key="attachment.localId">
+                    <Attachment
+                        class="o_AttachmentList_attachment o_AttachmentList_nonImageAttachment"
+                        attachmentLocalId="attachment.localId"
+                        attachmentLocalIds="viewableAttachments.map(attachment => attachment.localId)"
+                        detailsMode="'card'"
+                        imageSize="props.attachmentsImageSize"
+                        isDownloadable="props.areAttachmentsDownloadable"
+                        isEditable="props.areAttachmentsEditable"
+                        showExtension="props.showAttachmentsExtensions"
+                        showFilename="props.showAttachmentsFilenames"
+                    />
+                </t>
+            </div>
+        </div>
+    </t>
+
+</templates>