Add a feature for a user to attach an images to orders

[Deele]

Summary

Stage 1: Analysis & specification

• [x] "File upload for draft orders" specification
• [ ] "File upload for draft orders" specification confirmed by customer
• [ ] "File upload for order comments" specification
• [ ] "File upload for order comments" specification confirmed by customer

Stage 2: Implement "File upload for draft orders"

• [x] New data type "Product order file"
• [x] "Product order file" API controller
• [x] "Product order file upload" widget
• [ ] "Product order files" widget
• [x] Changes in order draft view
• [x] Changes in order view

Stage 3: Implement "File upload for order comments"

Work in progress...

Specification

File upload for draft orders

• Fields to store information:
  • New data type "Product order file" (ProductOrderFile)
    • Attributes:
      • id "Product order file ID" (int, pk)
      • product_order_id "Product order ID" (int, cascade on fk update)
      • product_order_item_id "Product order item ID" (int, null)
      • file_path "File path" (string, 255)
      • description "Description" (string, 255)
      • created_at "Created at"
      • created_by "Created by"
    • Delete files during Issue delete procedure
• Upload Interface:
  • Button "Attach pictures" in draft order view
  • Dialog "Select files" with "Product order file upload" widget
• Display:
  • Show "Product order files" widget within order view "Description" section, depending on web user, display view (for orders that are not draw) or editor interface (draft orders)

"Product order file upload" widget

• Input:
  • productOrder: ProductOrder instance or existing product order ID
  • maxFiles: int, defaults to 5 number of files are allowed to be uploaded
  • fileTypes: string, defaults to jpg,png file types that are allowed
• Views:
  • No visible view, but collapsed dialog that is opened via document level trigger open.ProductOrderFileUploadWidget
  • Dialog body displays grid with maxFiles cell, that represent maximum files that can be attached
  • Already uploaded files:
    • Cells are pre-filled with already uploaded file thumbnails
    • Already uploaded files have "Delete" button (on click asks confirmation "Are you sure you want to delete this file?" and if confirmed, sends AJAX call to API, to delete file on server, after successful delete, view is updated to remove file and free another cell for upload)
    • Already uploaded files have "Description" field (on blur, sends AJAX call to API tu update specific file description)
  • Uploading:
    • "Browse" button opens system file browser to select file
    • "Upload" button (on click sends AJAX call to API ti upload file, when uploaded, displays new file like described in "Already uploaded files" list)
    • When maxFiles is reached, hide "Browse" and "Upload" buttons and display info alert instead - "{maxFiles} files per order"

"Product order files" widget

• Input:
  • productOrder: ProductOrder instance or existing product order ID
  • mode: int
    • 1: View
    • 2: Edit
• Views:
  • Display inline list of 50x50px divisions with centered file icon
  • Divisions on hover show first 50 characters of description
  • is_image == 1 file is image
    • Load image thumbnail on top of icon
    • Divisions on click opens fullscreen image view in "Lightbox" with description underneath
  • is_image == 0 file is not image
    • Divisions on click directs user to file download sequence
  • mode == 2 mode is "Edit"
    • Divisions have small absolutely positioned "Delete" button in right top corner of division with "Trash" icon (on click asks confirmation "Are you sure you want to delete this file?" and if confirmed, sends AJAX call to API, to delete file on server, after successful delete, view is updated to remove file)

"Product order file" API controller

• Create (upload)
  • Input:
    • product_order_id int, existing product order ID that: is in draft mode, user has permission to access (either orderer or manager)
    • file file, 1-5 files total, max 5MB, jpg/png
  • Output:
    • success bool
    • product_order_file_id int
    • thumbnail_url string|null
    • file_url string
    • icon string
    • is_image bool|int
• Delete
  • product_order_id int, existing product order ID that: is in draft mode, user has permission to access (either orderer or manager)
  • product_order_file_id int, existing product order file ID
• Update
  • product_order_id int, existing product order ID that: is in draft mode, user has permission to access (either orderer or manager)
  • product_order_file_id int, existing product order file ID
  • description string, 255 max

[teamgurux]

1. Attach image to the order form
2. delete image from order form
3. show images as thumbnail
4. show thumbnails in order view
5. delete images from order view(by the person who is owner of the image and manager)
6. attach image to messages
7. delete image from messages (by owner and manager)
8. 1 image sent as message each time.
9. send image in notification to email (order messages)
10. image every time clicked open as lightbox
11. limit of 3 images, 5MB each(order form)
12. limit of 1 image per message, and 5MB(messaging system)