Add URL and name field to URL attachment dialog

metasfresh · Oct 4, 2017 · 3cd689d · 3cd689d
1 parent da98070
commit 3cd689d
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 19 deletions.
diff --git a/src/assets/css/attachments.css b/src/assets/css/attachments.css
@@ -28,10 +28,37 @@
     border-bottom: 1px solid $brand-super-light-color;
 }
 
+.panel-attachurl-bright {
+    color: $brand-font-color;
+}
+
+.panel-attachurl-data-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.panel-attachurl-data-wrapper .attachurl-input {
+    flex-grow: 1;
+}
+
+.attachurl-input {
+    height: 50px;
+    border: none;
+    padding-left: 10px;
+}
+
+.attachurl-label {
+    min-width: 50px;
+    font-weight: bold;
+}
+
 .panel-attachurl-header-wrapper {
     box-shadow: 0 0 6px rgba(0, 0, 0, .1);
 }
 
+/* currently unused, could be used for preview */
+/*
 .panel-attachurl-body {
     padding: 20px;
     height: 100%;
@@ -42,6 +69,7 @@
     height: 100%;
     border: none;
 }
+*/
 
 .panel-attachurl-footer {
     padding: 20px;

diff --git a/src/components/header/NewUrl.js b/src/components/header/NewUrl.js
@@ -6,39 +6,74 @@ import { addNotification } from '../../actions/AppActions';
 import { createUrlAttachment } from '../../actions/AppActions';
 
 class NewUrl extends Component {
-    state = { url: '' }
+    state = {
+      url: '',
+      name: '',
+    }
+
+    getName = () => {
+        const { url } = this.state;
+
+        // generate name from URL by getting part after last / and before ? or #
+        // TODO: handle edge cases like URL with trailing slash
+        return url.split('/').pop().split('#')[0].split('?')[0];
+    }
+
+    handleChangeName = ({ target: { value: name } }) => {
+        this.setState({ name });
+    }
+
+    handleBlurName = () => {
+        const { name } = this.state;
+
+        if (!name) {
+            this.setState({ name: this.getName() });
+        }
+    }
 
-    handleChange = ({ target: { value: url } }) => {
+    handleChangeUrl = ({ target: { value: url } }) => {
         this.setState({ url });
     }
 
+    handleBlurUrl = () => {
+        const { name } = this.state;
+
+        if (!name) {
+            this.setState({ name: this.getName() });
+        }
+    }
+
     handleClick = () => {
         const {
           windowId, documentId, handleAddUrlClose, dispatch,
         } = this.props;
         const { url } = this.state;
 
-        // extract name from URL by getting part after last / and before ? or #
-        // TODO: handle edge cases like URL with trailing slash
-        const name = url.split('/').pop().split('#')[0].split('?')[0];
-
         // TODO: Add translations for notifications
         createUrlAttachment({ windowId, documentId, url, name }).then(() => {
             handleAddUrlClose();
 
             dispatch(addNotification(
-                'Attachment', 'URL has been added.', 5000, 'success',
+                // counterpart.translate('window.attachment.url.title'),
+                'Attachment',
+                // counterpart.translate('window.attachment.url.success'),
+                'URL has been added.',
+                5000, 'success',
             ));
         }).catch(() => {
             dispatch(addNotification(
-                'Attachment', 'URL could not be added!', 5000, 'error',
+                // counterpart.translate('window.attachment.url.title'),
+                'Attachment',
+                // counterpart.translate('window.attachment.url.error'),
+                'URL could not be added!',
+                5000, 'error',
             ));
         });
     }
 
     render() {
         const { handleAddUrlClose } = this.props;
-        const { url } = this.state;
+        const { url, name } = this.state;
 
         return (
             <div className="screen-freeze">
@@ -50,8 +85,8 @@ class NewUrl extends Component {
                             className="panel-attachurl-header panel-attachurl-header-top"
                         >
                             <span className="attachurl-headline">
-                                Add URL
-                                {/* TODO: Add translation */}
+                                URL attachment
+                                {/* {counterpart.translate('window.attachment.url.title')} */}
                             </span>
                             <div
                                 className="input-icon input-icon-lg attachurl-icon-close"
@@ -60,25 +95,49 @@ class NewUrl extends Component {
                                 <i className="meta-icon-close-1"/>
                             </div>
                         </div>
-                    </div>
-                    <div className="panel-attachurl-body">
-                        <textarea
-                            value={url}
-                            onChange={this.handleChange}
-                        />
+                        <div className="panel-attachurl-header panel-attachurl-bright">
+                            <div className="panel-attachurl-data-wrapper">
+                                <span className="attachurl-label">
+                                    URL
+                                    {/* {counterpart.translate('window.attachment.url.url')} */}
+                                </span>
+                                <input
+                                    className="attachurl-input"
+                                    type="url"
+                                    onBlur={this.handleBlurUrl}
+                                    onChange={this.handleChangeUrl}
+                                    value={url}
+                                />
+                            </div>
+                        </div>
+                        <div className="panel-attachurl-header panel-attachurl-bright">
+                            <div className="panel-attachurl-data-wrapper">
+                                <span className="attachurl-label">
+                                    Name
+                                    {/* {counterpart.translate('window.attachment.url.name')} */}
+                                </span>
+                                <input
+                                    className="attachurl-input"
+                                    type="text"
+                                    onBlur={this.handleBlurName}
+                                    onChange={this.handleChangeName}
+                                    value={name}
+                                />
+                            </div>
+                        </div>
                     </div>
                     <div className="panel-attachurl-footer">
                         <button
                             onClick={this.handleClick}
                             className="btn btn-meta-success btn-sm btn-submit"
                         >
                             Create
-                            {/* TODO: Add translation */}
+                            {/* {counterpart.translate('window.attachment.url.create')} */}
                         </button>
                     </div>
                 </div>
             </div>
-        )
+        );
     }
 }