From 1a1fd39cf8e42c143fe9057b50aad5e074b91947 Mon Sep 17 00:00:00 2001
From: Andy Lo-A-Foe <andy.loafoe@aemian.com>
Date: Wed, 6 Apr 2016 14:23:26 +0200
Subject: PLT-2525: Render attachment fields similar to Slack

* Render attachment fields similar to Slack

* Add /loadtest json url command

This allows us to easily create test posts with
more props like Slack attachments
---
 webapp/components/post_attachment.jsx | 131 ++++++++++++++++++----------------
 1 file changed, 69 insertions(+), 62 deletions(-)

(limited to 'webapp')

diff --git a/webapp/components/post_attachment.jsx b/webapp/components/post_attachment.jsx
index 7c4125c27..1c3df6ea2 100644
--- a/webapp/components/post_attachment.jsx
+++ b/webapp/components/post_attachment.jsx
@@ -87,75 +87,82 @@ class PostAttachment extends React.Component {
             return '';
         }
 
-        const compactTable = fields.filter((field) => field.short).length > 0;
-        let tHead;
-        let tBody;
-
-        if (compactTable) {
-            let headerCols = [];
-            let bodyCols = [];
-
-            fields.forEach((field, i) => {
-                headerCols.push(
-                    <th
-                        className='attachment___field-caption'
-                        key={'attachment__field-caption-' + i}
+        let fieldTables = [];
+
+        let headerCols = [];
+        let bodyCols = [];
+        let rowPos = 0;
+        let lastWasLong = false;
+        let nrTables = 0;
+
+        fields.forEach((field, i) => {
+            if (rowPos === 2 || !(field.short === true) || lastWasLong) {
+                fieldTables.push(
+                    <table
+                        className='attachment___fields'
+                        key={'attachment__table__' + nrTables}
                     >
-                        {field.title}
-                    </th>
+                        <thead>
+                            <tr>
+                            {headerCols}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                {bodyCols}
+                            </tr>
+                        </tbody>
+                    </table>
                 );
-                bodyCols.push(
-                    <td
-                        className='attachment___field'
-                        key={'attachment__field-' + i}
-                        dangerouslySetInnerHTML={{__html: TextFormatting.formatText(field.value || '')}}
-                    >
-                    </td>
-                );
-            });
-
-            tHead = (
-                <tr>
-                    {headerCols}
-                </tr>
+                headerCols = [];
+                bodyCols = [];
+                rowPos = 0;
+                nrTables += 1;
+                lastWasLong = false;
+            }
+            headerCols.push(
+                <th
+                    className='attachment___field-caption'
+                    key={'attachment__field-caption-' + i + '__' + nrTables}
+                    width='50%'
+                >
+                    {field.title}
+                </th>
             );
-            tBody = (
-                <tr>
-                    {bodyCols}
-                </tr>
+            bodyCols.push(
+                <td
+                    className='attachment___field'
+                    key={'attachment__field-' + i + '__' + nrTables}
+                    dangerouslySetInnerHTML={{__html: TextFormatting.formatText(field.value || '')}}
+                >
+                </td>
             );
-        } else {
-            tBody = [];
-
-            fields.forEach((field, i) => {
-                tBody.push(
-                    <tr key={'attachment__field-' + i}>
-                        <td
-                            className='attachment___field-caption'
-                        >
-                            {field.title}
-                        </td>
-                        <td
-                            className='attachment___field'
-                            dangerouslySetInnerHTML={{__html: TextFormatting.formatText(field.value || '')}}
-                        >
-                        </td>
-                    </tr>
+            rowPos += 1;
+            lastWasLong = !(field.short === true);
+        });
+        if (headerCols.length > 0) { // Flush last fields
+            fieldTables.push(
+                    <table
+                        className='attachment___fields'
+                        key={'attachment__table__' + nrTables}
+                    >
+                        <thead>
+                            <tr>
+                            {headerCols}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                {bodyCols}
+                            </tr>
+                        </tbody>
+                    </table>
                 );
-            });
         }
-
         return (
-            <table
-                className='attachment___fields'
-            >
-                <thead>
-                    {tHead}
-                </thead>
-                <tbody>
-                    {tBody}
-                </tbody>
-            </table>
+            <div>
+                {fieldTables}
+            </div>
         );
     }
 
-- 
cgit v1.2.3-1-g7c22