This week is the last week I intern in Tong Hin. Continuing modified the category panel, I install the \u201cChip\u201d react native paper from \u201cmui-material\u201d. These chips are compact elements that can represent inputs, attributes or actions. They can have an icon or avatar on the left and a close button icon on the right. They are typically used to present multiple options, represent attributes active or chosen, present filter options and trigger actions related to primary content. I used the chip function for trigger the options of the category. When a category is selected, there have a close button on the right which can remove the selected category.<\/p>\n\n\n\n
On the other hand, I modified some small changes in the item detail panel. First of all, I call the ItemDto from the API to obtain the data for other table. Next, I replace the price with UoM in the UoM table which is the checkbox will be checked which UoM for that item. Thirdly, I move the Barcode to the position that easily seen by user. Lastly, I switch the navigation tab between the Stock and the Record. That’s means, I will display the Stock content for the user first then it will show the sales record when click to the tab. For the other detail panel, I make the date time more readable which separate the date and time with a comma.<\/p>\n\n\n\n
In addition, I also modified the pagination for this item page. For the input of the page, I modified the input to be changeable by number. When it is invalid input the page is set to current page. For the previous, I set the previous button to disable when the page is 1. For the next button, I set to disable when the page is equal to total page. I also display the total items beside the pagination which is count the items from the API. For calculating the total pages, I use Math.max to set the minimum pages is 1 not 0 and use Math.ceil to calculate total page equals to total items divided by page size. Then, I make this pagination as a component to implement for Item page, sequence generator page and store page.<\/p>\n\n\n\n
When Mr Peter checking my code, he found that I repeat creating the same layout for each page. So, he told me to DRY the layout and he also ask other colleagues to ping my computer to help me testing the page. When I doing the layout, the console there showing a warning said that validateDOMNesting(\u2026): <div> cannot appear as a child of <html>. To solve this issue, I add <meta> and <title> at <head> at the Root Layout there, and for the <body> of the layout which is the part React app will be mounted.<\/p>\n\n\n\n
During last day of this week, I did the validation for the sequence and store pages. For the store page, I validate the error when the required input field is blank. For the sequence page, I validate the same thing as store page, and add the checking for the sequence pattern to check the user is input the correct pattern which is start from alphabet then is number with 3 to 6 digits. Finally, I push all my task to server by using git.<\/p>\n","protected":false},"excerpt":{"rendered":"
This week is the last week I intern in Tong Hin. Continuing modified the category panel, I install the \u201cChip\u201d react native paper from \u201cmui-material\u201d. These chips are compact elements that can represent inputs, attributes or actions. They can have an icon or avatar on the left and a close button icon on the right. … <\/p>\n