追加功能 #441
v4.0: Order list - Step 1
Added by Junyi Zhang about 1 year ago.
Updated 22 days ago.
Target version:
IT: Easytryck (Sweden) - v4.0
Description
Background
- New requirement for v4.0 OTS
See: OneDrive\赤蓝商贸（上海）有限公司\Shanghai Group - IT\开发相关\OTS V4\开发需求
Task List
- List the functions related to the order list
| No |
Function |
D/M |
R/W |
Done/To-Do |
Others |
| 1 |
My Filter |
D/M |
R/W |
Done |
v3和v4的filter数据不同共通，但是ID共通，建议创建my-filter时带上v4的标记，方便区分 |
| 2 |
Regular Filter |
D/M |
R |
Done |
Desktop可以显示当前已选择的filters. |
| 3 |
Current Filter |
D/M |
R/W |
Done |
W: 设置用户默认的my-filter |
| 4 |
Current Input Date |
D/M |
R |
Done |
- |
| 5 |
Display order detail |
D/M |
R |
Done |
单击订单行 |
| 6 |
Favorite |
M |
R/W |
Done |
Mobile长按订单行（除最后一列Update order status） |
| 7 |
Update Order Status |
M |
R/W |
Done |
- |
| 8 |
Switch compact/full |
M |
R |
Done |
- |
| 9 |
Fold order products |
M |
R |
Done |
Compact: 子订单大于等于6
Full: 子订单大于等于9 |
| 10 |
Tracking Info (filter) |
D/M |
R |
Done |
单击order list中的tracking number |
| 11 |
Tracking Info (Tracking detail) |
D/M |
R |
To-Do |
双击order list中的tracking number |
| 12 |
Download attach files |
M |
R |
To-Do |
Mobile长按订单行（除最后一列Update order status）
Mobile双击订单行（除最后一列Update order status） |
| 13 |
Upload product images |
M |
W |
To-Do |
Mobile长按订单行（除最后一列Update order status）
Mobile双击订单行（除最后一列Update order status） |
| 14 |
Display Extra info |
M |
R |
To-Do |
Mobile双击订单行（除最后一列Update order status） |
Task Details
- Order list : mobile/desktop
- Permission Policy :
- order list - row:
- Admin: 没有限制
- Retailer: 只看到自己的order （创建订单时可以选择Retailer，或者默认自己如果是Retailer）
- Agent: 允许看到被分配的retailer的order + 允许看到被分配的product的order
- Operator: 同Agent
- order list - column:
- Admin: 允许看到Index, SE date, SE Service
- Retailer: 允许看到 SE date, SE Service (if has_se_info == 1)
- Agent: 同Retailer
- Operator: 同Retailer
- Retailer filter:
- Admin: 没有限制
- Retailer: 不显示该filter
- Agent: 该filter中仅显示被分配给自己的retailers
- Operator: 同Agent
- has_not_cn:
- has_not_cn = 0 -> 筛选非中国订单(order detail "Not CN")
- has_not_cn = 1 -> 中国/非中国都看
- Sub-account:
- Order detail默认选择的ratailer。
- 非retailer可设置sub-account
- SE Status:
- 允许查看/修改 SE order status
- 没有权限的人查看SE order status，默认显示"Send to customer"
- Information Pattern (Error, Warning, or notification)
- Form validate
- Loading indicator
- Modal
- Background(red) if [today >= delivery date && Not Completed]
Questions:
- 创建User时"Not CN"的意义，静态解析来看，我们将订单分为中国/非中国的订单（创建order时的"Not CN"），使用"Not CN"判断用户是否可以看这两类订单。但从v3的数据来看，我们并没有利用这个字段。v4中我们是否需要重新利用这个字段。
Van: 可以处理【用户管理 = 权限】部分的时候统一提问，暂时保留此问题
v4 coding standard:
- Git提交
#xxx(redmine number): xxx(redmine title) - xxx(任意：补充内容)
- 代码规范
2.1: 结构：Public -> Protected -> Private
2.2: 其他代码规范同SBX
- 数据层规范（Model）
3.1: 数据库操作只应出现在model或者system中。
3.2: v3/v4的model分为两个文件，比如： order.php, order_v3.php
- 前台代码
twig, js, css (js, css尽量写在单独的css文件中)
- 后台代码
MVCL (L：en，cn)
- 注释
- 类名：
/**
* xxx
*
* @copyright RedBlue-OTS 2024
* @version v4
*
*/
- 函数名：参数类型 + 返回值类型
/**
* xxx
*
* @param xxx $xxx
* @param xxx $xxx
* @return xxx
*/
Output
Others
Output (2024/11/25 - 2024/11/29), Output (2024/11/18 - 2024/11/22), Output (2024/11/11 - 2024/11/15), Output (2024/11/04 - 2024/11/08), Output (2024/10/29 - 2024/11/01)
Changes (Desktop):
- Admin:
- Update the admin order_status module : (100%)
- Admin dynamic set order status, add 'code'(compatible with V3), and 'hex'(order row background color) fields.
- Admin add config_order_limit for order list
- Add 'status' in admin order statuses module.
- Add 'config_order_complete_status'. Order list default exclude the order status.
- Front: (Refer to SBX UI design)
- Add common header which should display on the top of every page. (100%)
- Add not found page (100%)
- Order list: (100%)
- Permission: Currently, use v3's permission to filter orders.
- Define some constants in library/user_v3.php for v3's order permission
- We will use these constants before developing the v4 permission system.
- Filter: Add filters in order list.
- Currently, there are two filter(sort by, input date) and we need add more filter when the UI is confirm.
- Use infinite load as pagination method
- About order status:
- Use new design 8 order statuses and unify with V3
- The v4 new order status(labelled) currently set disable.
- If v3 SE status, it will display 'NG' in order list
Changes (Mobile):
- Add 'favorite' function by long pressing the 'product&qty' column
- The popover window about 'favorite/upload photos/download files' has not been designed, so we added 'long press' function directly to 'product&qty' column for now.
- Add 'update status' function to the 'Update Status' column
- Currently, we have not added any flow limit to update status since the permission and normal/abnormal order have not been designed yet.
- About time-over order(delivery time over): Only update to 'complete' status will the time-over warning disappear.
- Add switch compact/full version order list button in the table's header
- Invisible the first and second of thead as designed and set them as a toolbar area, currently, only one button(switch view(compact/full)) in this area.
- The switch action will also carry the filters except 'page' to switch compact/full version.
- Add 'full' display version of the order list.
- Move the 'favorite' icon to the 'qty' column in 'full' version.
- Reduce the trigger time of long press to increase the user experience
- The old 1s to trigger long press might be too long for the user, so we reduce the time to 500ms for a quicker reaction.
To-do:
- [Done] Mobile: order list full
- Mobile: order list compact:
- 折叠子订单 + 修改table的结构（有多个tbody组成，每个tbody为一组order）
- [Done] favorite(long press)
- [Done] update order status
- upload pictures(long press/double click)
- download files(long press/double click)
- [Done] Switch compact/full
- [Done] input/update date日期格式: 2024-01-01 -> 24/01/01
- [Done] loading style: bootstrap -> sbx CSS
- Mobile: others = header, footer, and so on
- [Done] Desktop: Add tooltips. Van: 暂时没有必要追加，需要的时候我们再讨论
- [Done] Common: My filter
- [Done] Common: Same design as mobile = filters menu, selected filter(+ clear + save)
- Common: Modal .
- Common: Scroll to the top （special： the first row of the order list）.
- Common：Login
- Add remember me
- [Done] :enter key
- [Done] Common: Pagination/infinite load instruction (such as "Showing %d of %d" = “Showing 80/970 products” / “80/970 产品显示中”)
- Mobile optimization:
- [Done] Scroll event: scroll refresh, scroll bounce, scroll propagation。
- A: Disabled the order page's scroll event which valid by class 'non-scroll' set in body.
- URL address: fold/hidden URL address bar input when scrolling
- Update status(order list): Update status的dropdown-menu的向上或者向下展开，目前全部向下展开。
- [Done] Input date(order filter): 日期input在mobile中的placeholder问题
- A：IOS has the placeholder problem(height crash when no date), and now the dafault input date is always set, which means it always has value in input date.
- Border sticky(order list): 表格前两行固定边框bug
- Order list will scroll in two directions.
- Re-design desktop's the width of the order list
- Common: 共通化
- infinite load
- popover
- create
- setposition
- etc.
- select
- search
- reset
- etc.
Important:
- Permission: Use v3 permission until developing the v4 permission system
- Refer to Task Detail-2 permission.
Database:
- v4: order status -> Refer to #440
- v4: order status -> Refer to #440
- v3: favorite -> Refer to #440
- v3 default filter -> Refer to #440
- Due date changed from 11/07/2024 to 11/15/2024
- Start date changed from 10/22/2024 to 10/29/2024
- Estimated time set to 100.00 h
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- % Done changed from 0 to 20
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Due date changed from 11/15/2024 to 11/22/2024
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Due date changed from 11/22/2024 to 12/13/2024
- Description updated (diff)
- Description updated (diff)
- % Done changed from 20 to 40
Output (2024/12/17 - 2024/12/20), (2024/12/23 - 2024/12/24)
Done:
- Functions:
- Common(my filters edit):
- filter name唯一性校验
- 进入edit模式 -> filter name可编辑
- 扩展current filter和my filters的联动范围：现在所有filter在my filter中修改，都会反映到curren filter menu中。
- 添加新的filter，自动focus到filter name
- filter name格式校验时去掉左右两边的空格
- Active filter name切换显示箭头和‘*’，编辑模式->'*', 非编辑模式-> '箭头'
- Bugfix:
1. The text input in the filter area is still editable when not in 'EDIT' mode.
2. In EDIT mode, click 'DELETE' will also trigger 'abort filter' alert.
- Common style:
- Unify the style of required, readonly in input.
- The class's position is relative to the input with common padding, if the container has another css style(padding), you may need to customize the position of required/readonly(for example: top, right etc.).
- To use this style, the css class should be 'flex-column required/readonly'.
- Common order list
- order list新增两种线：订单之间（实线），子订单之间（虚线）
- desktop：前五列（checkbox，R，N, index，order No.）子订单之间没有线。
- mobile：前两列（sticky列）子订单之间没有线。
- desktop order list添加hover样式。
- Bugfix： mobile sticky列的边框未固定的问题。
- Remove the border-collapse: collapse; for order table and replace with border-right as <td>'s border, since the collapse will take the second <td>'s border as a common border.
- Mobile: Collapsible order list
- Support collapsible in order list
- 阈值：Compact（大于等于6），full（大于等于9）
- Modify the order list html structure from a single <tbody> to multiple <tbody> which group by order id.(Note: The order products both in the end of first page and the start of second page still a problem(They will be separated to two order groups).)
- Optimizations:
- Common: Modal:
- 样式：desktop（居中显示），mobile（slide up和全屏显示）
- Modal内容加载方式： ajax, parameter
- Extra: 提供自动关闭的机制 setCloseTimeout
- 当前用例：1. order list no more record. 2. My filters delete filter 3. My filters cancel the edit.
- Common: Scroll to the top.
- Support override and default is for the whole page, you can override it(offset, selector).
- Offset: Scroll offset(the distant from top). Selector: Customize the listened scroll element.
- Mobile: order list
- Update order status: The column of 'Update order status' now supports expand up/down depending on the position of <td>.
- Fixed width of desktop table: Set fixed width to desktop table
- Use 'table-layout: fixed' instead of default 'auto' and set width separately to columns.
- IOS:
- URL address: fold/hidden URL address bar input when scrolling
- 这是浏览器的默认行为（滚动时自动收起/展开url地址栏），我们暂时不使用程序去强制收起/展开，而是调整了部分元素的空间（padding），给order list更多的页面空间。
- 如果将来有需求：显示更多的订单数据，我们也许需要其他的方式实现（PWA，滚动时收起footer， sticky thead， 全屏显示（SBX product cofiguration））
Questions:
- 课题 ：redmine, git log, trello怎么产生关联性，让【案件】有迹可循，并且可追溯。
Van的意见：Function title尽量一致，里面的细分可以git log为主。其他可以Title（比如Extra updates / Some small stuff / etc.）自定义，估计以后Trello不会被提示。
Redmine/Trello: 只需写标题，内容细化挑重要的写
Function:
1. 功能所属的标题
1. 功能
2. 功能
3. ...
4. Bugfix
5. Extra(小修改，不重要可以不写)
Git log:标题+细化
1. 功能所属的标题
1. 功能
2. 功能
3. ...
4. Bugfix
5. Extra(其他修改)：
- Due date changed from 12/13/2024 to 12/31/2024
- Due date changed from 12/31/2024 to 02/14/2025
Output (2025/01/20), (2025/01/13 - 2025/01/17)，(2025/01/09 - 2025/01/10)
Done:
- Functions:
- Common(my filters edit):
- Move the 'edit filter name' function to the main area.
- Allow empty input date interval filter and it means filter all orders from oldest to newest.
- Add 'order status' filter in my-filter
- Regular filters： Add regular filters as temporary filters to order list
- Override for 'Current Filters', 'Current input date'(Depend on the user's last operation):
- The 'Regular Filters' will override the 'Current input date' and clear 'Current Filters'.
- The 'Current Filters' will also clear 'Regular Filters'.
- 'Current input date' will override IN-date in 'Regular Filters' and 'Current Filters', which depend on whether the user's last operation is 'Current Filters' or 'Regular Filters'.
- (Desktop) Display the 'Regular filters' in the order filter part as a reminder to the user about selected filters.
- The clear All button will be displayed when more than two filters are selected.
- Remove a single one: User can remove one of the selected filters by clicking 'close' button.
- Display the selected filter item after clicking.
- Do not support draft function.
- Close 'Regular filters' will recover to the last applied filters.
- (Mobile) Open 'Regular filter' after clicking 'Search' in footer menu or 'PLUS' button after IN-Date.
- Tracking Info in order list
- Filter order list according to the tracking info, and it will clear all others 'Regular filters' and 'Current filters'.
- (Double click TODO)V3 has 'Tracking' as a flag to decide whether filter or open tracking detail. V4 now just filter and we will re-consider this after the tracking detail is finished.
- Optimizations:
- Dropdown-menu：Dropdown-menu commonization
- Current usages:
- Current filter(Order list).
- Current input list(Order list).
- Update order status(Order list).
- Filter item (My filter).
- Menu(Footer menu).
- Parameters and functions:
- (required) data-toggle="dropdown"
- (required) data-type: radio/checkbox/date/etc.
- (required) data-search: dropdown-menu's search function.
- (optional) data-selected: selected input value
- (required) data-source: dropdown-menu's items
- (optional) easyDingZhi.common.dropdown.setTitle: set dropdown-menu's title
- (optional) easyDingZhi.common.dropdown.setFooter: set dropdown-menu's footer
- (optional) easyDingZhi.common.dropdown.setExtraClasses: set dropdown-menu's extra classes
- (required) easyDingZhi.common.dropdown.create: create dropdown-menu, and support callback().
- About data-source, it must be json format and the value should be the following:
- (required) value: input's value
- (optional) text: input's text
- (optional) text_icon: input's text icon before text
- (optional) name: input's name attr
- (optional) placeholder: input's placeholder(when input type is not radio/checkbox)
- (optional) class: input's extra classes
- (optional) hex: input's background-color
- Modify the expand up/down logic
- Expand down: default
- Expand UP: If the dropdown menu is below half of the screen and there is not enough space to display the entire dropdown menu
- If drowndown-menu has search function + expand UP
- Set the fixed height of dropdown-menu with the search function when it expands UP to avoid flicking(since the decrease of dropdown-menu's items) when searching.
- Tooltip:
- Add easyDingZhi.common.tooltip for some reminder to the user.
- Parameters:
- (required)data-toggle="tooltip"
- (required)data-text-tooltip
- Input type="date"
- IOS <input> 'date' type's 'calendar' icon disappears and the height will collapse when there is no value.
- Replace the inherited 'calendar' icon with google icon
- Use fixed height to input
TODO: Order list剩余TODO移到新票 #455
- Functions:
- Order list: tracking number支持多条查询
- Regular/My filter中dropdwon menu 展开时不要挡住selected区域
- (Double click):显示tracking detail
- AttachOverflowDetection （Maybe we add a sticky headline that can apply on Dropdown-menu）
- Mobile(long press): upload pictures(long press/double click)
- Mobile(long press):download files(long press/double click)
- Optimizations:
- Default filter order except for 'Completed' （默认Order List显示排除了Order Status = Completed的订单产品，但是Filter中没有提示）
- Order status排除completed，要保持Regular/My filer一致（默认勾选除Completed的所有status）
- Mobile: 折叠/展开子订单时增加动画效果。
- Common: 子订单分别在第一页末尾和第二页开头时，order No.出现会出现两次
- Common: 共通化
- popover
- On hover style for clickable elements (such as underscore, background color, mouse pointer, and so on)
- % Done changed from 40 to 50
- Subject changed from v4.0: Order list to v4.0: Order list - 1
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Description updated (diff)
- Copied to 追加功能 #455: v4.0: Order list - Step 2 added
- Status changed from 进行中 to 已关闭
- % Done changed from 50 to 100
- Tracker changed from 其他 to 追加功能
- Description updated (diff)
- Subject changed from v4.0: Order list - 1 to v4.0: Order list - Step 1
Also available in: Atom
PDF