Author: Tan Hui Ying

Posted on

Last Week Internship at Tong Hin

This week is the last week I intern in Tong Hin. Continuing modified the category panel, I install the “Chip” react native paper from “mui-material”. 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.

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.

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.

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(…): <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.

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.

Posted on

Creating Item Page with Using API

This week, I started doing the “Item” page which will using the API. First of all, I modified the style of the “Item” page, I was using the style in the past few weeks before when I was creating the page by using mock data. Then, I convert the CSS style to the Tailwind CSS style too to ensure it is using the first priority style that I want. After calling the API, I use the “useDidMountEffect() function instead of using useEffect() function to display the item list. When the user clicked one of the Item box, it will display the item details.

Besides that, I also modified the function by implementing Regex. This will change the UI implementation to be more user friendly. When there is no matching for the input value, it will prompt out a message “No items match the search criteria”.

At the end of the week, I display the Pricing panel which consist of the multiple properties from the data. When the user clicked to the “Price” button, it will pop out the detail panel. On the other hand, I also create a “Search Category” button beside the search bar to let the user search the category. Inside the category panel, I separate the main category by using bold font and different color comparing to their child category. Each child will leave some left space to let the user know which category is parent or child. However, this category function I haven’t modify the function which will able to filter the item box according to it’s category.

Posted on

Adding Layout and Modifying CSS Style.

During this week, I was faced two problems in the UI. When I want to add the layout into the page, there are showing an error that use a UI event handler in a non-client component. To overcome this error, I should add the “use client directive” in the page I want to add the layout. The second problem I faced was the “TypeError: map() is not a function” in React. To tackle this kind of problem, I should make sure the values are an Array before calling “map()” function.

Besides that, I was adding the “Header” and “Hamburger Menu” into the main page before I doing the layout. Therefore, I adding the layout with these two components, I found that the web page renders the components twice, and I removed the components in the main page. But I need to modified again as I see it re-render twice at the element there. In the “Header” component, I add the title function for changing the title in each page. I also modified the “Search” function as the user typing some inputs, the system will not be sending the request every single time until the user press the “Enter” key or clicked the “Search” button.

On the other hand, I change the external CSS file to inline Tailwind CSS style. This is due to the reason that the inline Tailwind style will set the styling priority first, and this way is very easy to capture the CSS problem when coding. In this process, I learned something new with the difference between the CSS style and the Tailwind CSS style. When I was changing the CSS style, meanwhile, I was checking and cleaning the code.

In the end of this week, Mr. Peter was giving me a new task which is create a CRUD function for Entity Type. This function is same like the task I created before, so I just copy and paste the code and change the terms only. In addition, he also told me try to integrate the real Item API into the React frontend. Since this Item page consider many components, he tells me to break down the API first. Therefore, I am trying to call the list DTO of the item first to show in the page.

Posted on

Adding General Alert and Binding Sequence Generator to Store Detail

Continuing the task from last week, I successfully create a Sequence Generator page with a CRUD functions. In the page, I show the sequence name and the pattern in a table form. To create or edit the sequence, it will pop up a panel form to ask the user fill up the name, pattern and the count. After I complete this task, Mr. Peter told me the purpose of creating the sequence generator is used to connect to the “Store” to generate the sequence.

Therefore, I modify the Store detail panel to add sequence name input but it is just read only. The user can search the sequence name by clicking the “Search” button provided. Once it is clicked, it will pop up a panel to show the sequence name and the pattern like the Sequence Generator page to let the user select the sequence he/she wants. When the sequence is selected by the user, it will close the panel and display the sequence name in the input field of the store detail panel. When the user clicks the “Save” button to save the store detail, the system will auto generate the sequence generator id which will bind with the SequenceId in the Dto.

Besides that, my colleague also created a “General Alert” for this project which will alert the message to showing an error, Yes or No, Confirm or Cancel and success message to the user. I apply this component into my CRUD functions which are in the Sequence Generator page as well as Store page and their detail panel. On the other hand, I also fix the CSS style file what I use “.className” method instead of directly use “body” method, so when I refresh the page, the style will not disappear.

In the end of this week, Mr. Peter check my work, he suggests me clean the code and create a page layout for all my tasks. He also told me prevent used any magic strings as it will hard to maintain it later.

Posted on

Implement CRUD Functions by Using API

This week, I continued modified the Store page, there are 2 DTOs I should used in this page, they are used to facilitate communication between two systems like API and server without potentially exposing sensitive information. I used dto to display the details of the specific store like name, addresses and other details, the other dto is used to display a list of the store name.

Besides that, I received help from my colleague to add the API address to .env.local, this API address is important which allow me to get and post the data from or to the API. Since last week I was hard coded the CRUD function, so I modified some part to ensure all the data is success connect to the API and success fetch the data according to the CRUD function. I also added some CSS style for it. For example, I added the condition for saving progress, if the data are in the progress, the button will show the “Saving….” And when it is completed, it will show “Save” and the button is disabled to clicked. For the delete function, it will pop out an alert message to ask user a confirmation to delete the data again.

At the end of this week, Mr. Peter give me a new task, this task is about the generator which will generate a counter for the store. This task is same like the “Store” page which need to create the CRUD function first. Currently, I had completed the create function and update function. This task also consists of 2 DTOs, which consists the id, name, and other details but only detail has the count. Therefore, I need to create a page to ensure these functions in this task can run smoothly.

Posted on

Using CRUD Function to Implement a New Task

On the first and second day of last week, I continue modified the item-detail panel and the width of the web page when the side drawer is opened. In the item-detail panel, I used Array.join() method to separate the category type with a comma in the table. I also used carousel method to display multiple images in the panel. For the search function, I used Array.every() method to ensure that each term in search query is present in the item name.

Mr. Peter give me a task that create a Store page which should include CRUD function. He mentions that this page should consists the entity details. This store page is getting data from the API. At first, I created a panel that show the detail of the store. Then, I pulled out the branch and merge it into my existing feature branch which is “store” in order to use Redux.

For the CRUD function, I refer to the “Customer” which created from my colleague and make some changes that fulfil the requirement of “Store” page. So far, I completed the “Create” and “Update” function, the “Read” function I will complete in next week to show the list of the store with the search function.

Posted on

Modifying some Features from Supervisor’s Suggestion

This week I display what I have done so far to Mr. Peter. He pointed out several points that I should change. First of all, he suggests me prevent any hardcoded way because all of the data will get from API. Therefore, the hardcoded way will lead me to write the same function again and again and I use the .map function to overcome this issue. He also suggests that the naming of the folder and the file must be consistent. This is due to the reason that easier to let other find the file according to the structure. For example, every file or the folder of the first letter must be capital and the CSS style must be renaming it with the same name of the file that use the CSS file.

On the other hand, he also suggests the position of the “Search bar” need to change to on the top center of the page. This “Search” is the most frequently use in the page, therefore, I make the width of the search bar 70% to the width of the page and place between the “Header” and “Navigator”. In the item-detail panel, he mention that there will be a several number of images need to display, not only one, so, I am consider to use carousel method to display the images.

Lastly, he suggests the general components like the “Header” which can use anywhere put into the main file so that any page can display the header code at one time, no need every file to import this component again. Since, I change the location of the file, so I need to rename the path and the division of the header and the main content of the page need to change.

Posted on

Adding Some Features and Styling the Task from Last Week

Continuing the task from last week, I modified the arrangement of the item box in the main page as well as the “price” and the “stock in the item box itself horizontally by solving it with CSS style and I controlling the spaces between each of the item box. Besides that, I also adding two navigator tabs with “Code” and “Record/Stock” labels and adding the new table in the item details panel. In the content of the “Code” tab, I added the Barcode of the item and arrange them horizontally and space evenly. In the content of the “Record / Stock” tab, I added the “History Sales Record” table and “Stock” table and space evenly between each of them.

I also modifying the styles of the item detail panel according to the colour, effect and position of the elements inside the panel, especially the division between them. I separate them into 3 part, the main part includes the image, name, stock, price, UoM and some description or remark, the second part include the navigator tab and the content of it, and the third part include the extra information such as the attributes.

On the other hand, I added the additional table as a panel to show the detail of the item and it will pop out when I clicked the particular button in the item detail panel. I also added the dropdown menu and it’s sub navigator, the “Filter” sidebar which is on the right-hand side of the item page – able to filter the item according to the brand of the item and able to sort the price from lower price to lower or vice versa and yet the “Pagination” feature which will control the page of maximum 20 items per page.

Lastly, I modified the position of the drawer navigation to the left-top of the Item Page and push all the elements to the right when I clicked the hamburger icon. Previously, it was appearing under the item list, Mr. Peter suggest me to create a new page that include the drawer and the header only to settle this problem, but actually it is just a division problem, I changed the arrangement of the code according to the division to overcome this problem. I also modified the styling of the dropdown menu with the colour, hover effect and the width of the menu list.


Posted on

Starting Coding by Using React with TypeScript

This week, I started to code the prototype which I completed last week by using React with TypeScript. I add the header, navigation bar, drawer navigator with a hamburger icon, search bar and item list. Meanwhile, I started created the style for each part by using css. Since I used the latest version of the node which is newer and it cause some errors that lead to the code cannot run completely, so I downgraded the version by installing the v13 to solve the problems.

Besides that, I create a json file to store some mock data of item list and the details of the item. This json file can help me decrease typing the same things by using the loop. This json file can also keep adding new items without any issues.

I also create a dynamic panel for showing the items detail when I clicking the item I want in the “Item Page” which will show the image, name, price, and others. I also added table into the dynamic panel which is the conversion factor of UoM (Unit of Measure).

Posted on

Modifying Prototype

Continuing the task from last week, I modified some features of the “Item List” in Axure RP 10. The description of the item, I modified some of the details to make them as a table form. Since the dynamic panel was too small, I adjusted the panel size and modified the position and arrangement of the items inside the panel to fit all the features in a panel.

After that, I added the UoM (Unit of Measure) which is a standard unit of measurements used when accounting for stock, and expressing them in quantities for each item’s description. Due to the fact that each item not only sales in a UoM, I also modified it as a table to view all the conversation factor of pricing based on the UoM.

Beside that, I modified the item’s name based on the brand, model and part number of the item. I also make it to a table to easy the user to see which categories are and other information of that item. Lastly, I create a pagination feature in the prototype to easy the user browse the items.