{"id":2006,"date":"2025-03-05T21:04:59","date_gmt":"2025-03-05T13:04:59","guid":{"rendered":"https:\/\/www.tonghin.com.my\/blog\/?p=2006"},"modified":"2025-03-05T21:05:01","modified_gmt":"2025-03-05T13:05:01","slug":"completing-detail-view-page","status":"publish","type":"post","link":"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/","title":{"rendered":"Completing Detail View Page"},"content":{"rendered":"\n<p>Monday, March 3 2025 \u2013&nbsp;Continuing from last week, I focused on the detail page, which includes both a read-only mode and a create mode, as there is no edit functionality for this feature. My priority was to complete the create mode first before working on the read-only mode.<\/p>\n\n\n\n<p>The second component I worked on displayed the line items of an order selected from the first table, which lists all available orders. This component allows users to pick line items to be issued. The selected data is then passed to a third component, which consolidates multiple line items from different orders.<\/p>\n\n\n\n<p>Since the feature involves transferring data between components and handling API requests, I had to manage multiple DTOs. Given that both view and create modes were involved, I created a new object to act as a bridge between the DTOs and command requests.<\/p>\n\n\n\n<p>I first ensured that the create command worked successfully. Since there were only two commands for the detail page which is create and cancel, the mode-switching logic was relatively simple. After confirming that the create function worked correctly, I tested the cancel function as well.<\/p>\n\n\n\n<p>By the end of the week, I had completed the feature. However, further testing is needed to identify and fix any remaining bugs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Monday, March 3 2025 \u2013&nbsp;Continuing from last week, I focused on the detail page, which includes both a read-only mode and a create mode, as there is no edit functionality for this feature. My priority was to complete the create mode first before working on the read-only mode. The second component I worked on displayed &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Completing Detail View Page&#8221;<\/span><\/a><\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Completing Detail View Page | Tong Hin&#039;s Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Completing Detail View Page | Tong Hin&#039;s Blog\" \/>\n<meta property=\"og:description\" content=\"Monday, March 3 2025 \u2013&nbsp;Continuing from last week, I focused on the detail page, which includes both a read-only mode and a create mode, as there is no edit functionality for this feature. My priority was to complete the create mode first before working on the read-only mode. The second component I worked on displayed &hellip; Continue reading &quot;Completing Detail View Page&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Tong Hin&#039;s Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-05T13:04:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-05T13:05:01+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1 minute\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\",\"name\":\"TONG HIN MACHINERY\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"sameAs\":[\"https:\/\/www.youtube.com\/channel\/UC60EoxJMNbu8mV0LuEGfrBg\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/wp-content\/uploads\/2020\/10\/web_logo_180_180.jpg\",\"width\":180,\"height\":180,\"caption\":\"TONG HIN MACHINERY\"},\"image\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#website\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"name\":\"Tong Hin&#039;s Blog\",\"description\":\"Sharing About Technology\",\"publisher\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.tonghin.com.my\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/#webpage\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/\",\"name\":\"Completing Detail View Page | Tong Hin&#039;s Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#website\"},\"datePublished\":\"2025-03-05T13:04:59+00:00\",\"dateModified\":\"2025-03-05T13:05:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/\",\"name\":\"Completing Detail View Page\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#\/schema\/person\/81e2366362d8d14b15519395755cee6f\"},\"headline\":\"Completing Detail View Page\",\"datePublished\":\"2025-03-05T13:04:59+00:00\",\"dateModified\":\"2025-03-05T13:05:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2025\/03\/05\/completing-detail-view-page\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\"},\"articleSection\":\"Experiential\",\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#\/schema\/person\/81e2366362d8d14b15519395755cee6f\",\"name\":\"nurlailiyuzi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5c0d4cc6f7fc881bd56d95bdbb0c4c14?s=96&d=mm&r=g\",\"caption\":\"nurlailiyuzi\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/2006"}],"collection":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/comments?post=2006"}],"version-history":[{"count":3,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/2006\/revisions"}],"predecessor-version":[{"id":2009,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/2006\/revisions\/2009"}],"wp:attachment":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/media?parent=2006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/categories?post=2006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/tags?post=2006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}