frontend: Attach URL support

[teosarca]

Type of issue

Feature request

Current behavior

Take a look in any document (e.g. https://w101.metasfresh.com:8443/window/143/1000031),
you are able to drop a file over it and the file will be attached.
You can see the attached files here:

Expected behavior

We want to also attach URLs (you will copy paste them in some modal panel.... read below).

It shall work as following:

• user is opening the attachmens side list
• at the bottom of attachments list, there will be a link-ish called "Add url...".
• when clicked, a small modal will be opened. The modal will have 2 fields:
  ** URL: where user will be able to paste or write an URL
  ** Name: a name which user will gave to the URL. By default, when the URL field is changed, the Name field shall be automatically set by extracting the file name from URL (e.g. from http://somesite.com/a/b/c/file.pdf?query=bla the filename is "file.pdf")
• when clicking "Attach" button:
  ** the backend API will be called to create the URL attachment (see http://w101.metasfresh.com:8081/swagger-ui.html#!/document-attachments-rest-controller/attachURLUsingPOST )
  ** close the modal (if attachment did not failed)
  ** refresh the attachments list

Also please check the backend task: metasfresh/metasfresh-webui-api-legacy#605

[teosarca]

update: the "Add URL" modal shall look like the mail modal, but much more smaller.

[ottosichert]

@teosarca or @metas-ts please add these translations:

{
  "window.attachment.url.create": "Create",
  "window.attachment.url.name": "Name",
  "window.attachment.url.url": "URL",
  "window.attachment.url.title": "URL attachment",
  "window.attachment.url.success": "URL attachment has been added.",
  "window.attachment.url.error": "URL attachment could not be added!",
  "window.attachment.url.add": "Add URL attachment"
}

[teosarca]

great, thanks !
on a quick test, works.

@ottosichert @metas-mk from UX point of view, i have following observations. wdyt?

[ottosichert]

@teosarca Thanks for your feedback.

I agree on the two styling improvements. When pasting or typing a URL and leaving the input (onBlur), the name field is filled automatically. I can remove the success notification, then you can remove the obsolete translation again (window.attachment.url.success).

I will create a new PR tomorrow :)

[teosarca]

@ottosichert merci

[ottosichert]

@teosarca I added the changes in PR #1236 according to your comment above :)

[metas-lc]

IT

1. drag and drop for attachment - still works like before (you get notification and progress bar) OK
2. open the attachment from 1 and copy the url
3. go to attachments
   => notice that there is a "Add URL attachment" on a grey line OK
4. select add url attachment
   => a large modal appears
5. paste the link you copied on step 2
   => notice the name is already set
6. update the name, press on create
   => new attachment created, no popup
7. repeat 5 and 6 without changing the name
   => works the same

Question: if you use backspace on name field, when you get to remove the whole name, the name is set back. Is it wanted?
will leave this like it is for now. Closing the issue