【Side Project】 (老板)订单清单UX功能实作2-ChcekBox

上一篇中我们已经可以将左边的未完成清单移动到右边的已完成清单，
也可以将已完成清单返回到未完成清单。
这一篇中我们要来接着完成资料的状态

已完成餐点(状态变更)

当老板完成餐点的时候会点选checkbox表示已经完成了，
所以我们要在chekbox中加入事件，将完成的资讯给记录下来。

打开 Proprietor.cshtml
修改 undo_order_item()

function undo_order_item(h_id, b_id, item, count) {
    cb_id =`cb_${h_id}_${b_id}`
    item_html =`
<label for='${cb_id}' id='for${cb_id}' class="list-group-item list-group-item-primary">
 
<input id='${cb_id}' class="form-check-input me-1" type="checkbox" name="item_checkbox" value="">
${item} * ${count}
</label>
`
    return item_html
}

将表头的id 跟餐点的id传入写在checkbox的id中，
另外给checkboxname。
3. 给chekbox新增change事件

$('#undo_list').on("change", 'input[name="item_checkbox"]', function () {
        //取得表头 & 表身 id
        var h_uid = $(this).attr("id").split("_")[1]
        var b_uid = $(this).attr("id").split("_")[2]
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        //修改状态
        var selectOrder = undo_data.find(order => order.head.uid == h_uid)
        var selectItem = selectOrder.bodys.find(item => item.uid == b_uid)
        selectItem.itemDone = $(this).prop('checked')
        localStorage.setItem("undo_data", JSON.stringify(undo_data))
        
    })

修改订单状态

在上一篇中我们已经完成订单的画面更动，
只需要分别在按下完成与返回按键的时候修改状态即可

//按下完成时
item.head.orderDone = true
//按下返回时
item.head.orderDone = false

完整 完成click事件:

$('#undo_list').on("click", 'button[name="done_btn"]', function () {
        var uid = $(this).attr("id").replace("_btn", "")
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        var done_data = JSON.parse(localStorage.getItem("done_data"))
        undo_data.forEach((item,index) => {
            if (item.head.uid == uid) {
                item.head.orderDone = true
                done_order(item.head, item.bodys)
                if (done_data[0] == null) {
                    done_data[0] = item
                } else {
                    done_data[done_data.length] = item
                }
                $(`#${uid}_li`).remove()
                undo_data.splice(index, 1)
                localStorage.setItem("done_data", JSON.stringify(done_data))
                localStorage.setItem("undo_data", JSON.stringify(undo_data))
            }
        })

    });

完整 返回click事件:

('#done_list').on("click", 'button[name="itemback_btn"]', function () {
        var uid = $(this).attr("id").replace("btn", "")
        var undo_data = JSON.parse(localStorage.getItem("undo_data"))
        var done_data = JSON.parse(localStorage.getItem("done_data"))
        done_data.forEach((item, index) => {
            if (item.head.uid == uid) {
                item.head.orderDone = false
                undo_order(item.head, item.bodys)
                undo_data[undo_data.length] = item
                $(`#${uid}_div`).remove()
                done_data.splice(index, 1)
                localStorage.setItem("done_data", JSON.stringify(done_data))
                localStorage.setItem("undo_data", JSON.stringify(undo_data))
            }
        })

    });