Search Results Page (UI Only) (#51)

skylight-hq · Sep 16, 2024 · e12f226 · e12f226
1 parent 44fda86
commit e12f226
Show file tree

Hide file tree

Showing 12 changed files with 359 additions and 44 deletions.
diff --git a/internal/app/handlers.go b/internal/app/handlers.go
@@ -460,6 +460,11 @@ func (app *Application) home(w http.ResponseWriter, r *http.Request) {
 	component.Render(r.Context(), w)
 }
 
+func (app *Application) searchResults(w http.ResponseWriter, r *http.Request) {
+	component := components.SearchResults("Search", "Hepatitis")
+	component.Render(r.Context(), w)
+}
+
 func (app *Application) handleBannerToggle(w http.ResponseWriter, r *http.Request) {
 	action := r.PathValue("action")
 	component := components.UsaBanner(action)

diff --git a/internal/app/routes.go b/internal/app/routes.go
@@ -44,6 +44,7 @@ func (app *Application) routes() http.Handler {
 	mux.HandleFunc("GET /toggle-banner/{action}", app.handleBannerToggle)
 	mux.HandleFunc("GET /load-hot-topics", app.getAllHotTopics)
 
+	mux.HandleFunc("GET /search-results", app.searchResults)
 	standard := alice.New(app.recoverPanic, app.logRequest, commonHeaders)
 
 	return standard.Then(mux)

diff --git a/internal/ui/assets/css/styles.css b/internal/ui/assets/css/styles.css
@@ -141,8 +141,9 @@ header.cdc-header .header-search {
   max-width: 100%;
 }
 
- .advanced-search-link {
+.advanced-search-link {
   justify-content: flex-end;
+  padding: 0.5rem;
 }
 
 .panel {
@@ -282,3 +283,151 @@ footer .row {
     display: inline;
   }
 }
+
+.cdc-breadcrumb {
+  background-color: #e5f4ff;
+  color: #495057;
+  padding: 0.25rem 0;
+}
+
+.cdc-breadcrumb__content {
+  font-size: smaller;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  line-height: 24px;
+}
+
+.search-results__table {
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.search-results__tabs {
+  display: flex;
+  justify-content: space-between;
+  font-weight: 600;
+}
+
+.tab-item {
+  font-weight: bold;
+  padding: 0.25rem;
+}
+
+.tab-item.active {
+  border-bottom: 10px solid #0b4778;
+}
+
+.search-results__table .rowgroup {
+  padding: 1rem;
+}
+
+.cdc-header.header-row {
+  align-items: center;
+  padding: 1rem 1rem 1rem 1rem;
+  border-bottom: 1px solid darkgrey;
+}
+
+.search-results__table .row {
+  padding: 1rem;
+  --bs-gutter-x: 0;
+}
+
+.cdc-header.header-row p {
+  font-weight: bold;
+}
+
+.search-results__table .content-row {
+  display: flex;
+  align-items: center;
+}
+
+.content-row.alternate-bg {
+  background-color: #e2e3e5;
+}
+.search-results__table .check {
+  flex-grow: 0;
+}
+
+.search-results__table .row p {
+  margin: 0;
+  padding: 0.5rem;
+}
+
+.cdc-header.top-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid lightgrey;
+  padding: 0.75rem;
+}
+
+.col.search-results {
+  max-width: fit-content;
+}
+
+.page-buttons .button-next {
+  display: inline-flex;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+}
+
+.pagination .col {
+  padding: 1rem 0.5rem 1rem 0rem;
+}
+
+.pagination .page-buttons {
+  padding-left: 1rem;
+}
+
+.page-buttons button {
+  padding: 0.25rem 0.75rem;
+  border: 1px solid lightgrey;
+  background-color: transparent;
+  color: #0b4778;
+  border-radius: 6px;
+  width: auto;
+  height: auto;
+}
+
+.page-buttons button.active {
+  background-color: #0b4778;
+  color: white;
+}
+
+.page-buttons button:not(.active, .button-next button):hover {
+  background-color: #005ea2;
+  color: white;
+}
+
+.button-next button {
+  border: none;
+  font-weight: 600;
+}
+
+.button-next button:hover {
+  background-color: transparent;
+  text-decoration: underline;
+}
+
+.button-next :after {
+  content: url(../img/usa-icons/chevron_right.svg);
+  margin: 2px 0 0 0;
+  position: absolute;
+}
+
+.download-button button {
+  border: none;
+  background-color: #005ea2;
+  padding: 0.5rem 1rem 0.5rem 0.75rem;
+  color: white;
+  border-radius: 6px;
+}
+
+.download-button button:hover {
+  background-color: #0b4778;
+  color: white;
+}
diff --git a/internal/ui/assets/img/material-icons/file_download.svg b/internal/ui/assets/img/material-icons/file_download.svg
diff --git a/internal/ui/assets/img/usa-icons/chevron_right.svg b/internal/ui/assets/img/usa-icons/chevron_right.svg
diff --git a/internal/ui/components/base.templ b/internal/ui/components/base.templ
@@ -1,6 +1,6 @@
 package components
 
-templ Base() {
+templ Base(currentPage string) {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
@@ -19,7 +19,7 @@ templ Base() {
 		</head>
 		<body>
 			@UsaBanner("close")
-			@NavBar()
+			@NavBar(currentPage)
 			<main class="cdc-page-offset">
 				{ children... }
 			</main>

diff --git a/internal/ui/components/breadcrumb.templ b/internal/ui/components/breadcrumb.templ
@@ -0,0 +1,15 @@
+package components
+
+templ Breadcrumb(currentPage string) {
+    <div>
+    if currentPage == "Home" {
+        <br>
+    } else {     
+        <div class="cdc-breadcrumb">
+            <div class="cdc-breadcrumb__content cdc-page-offset">
+                <a href="/">PHIN VADS Home</a> <img src="/assets/img/usa-icons/chevron_right.svg" /> {currentPage}
+            </div>
+        </div>
+    } 
+    </div>
+}
diff --git a/internal/ui/components/home.templ b/internal/ui/components/home.templ
@@ -1,45 +1,9 @@
 package components
 
 templ Home() {
-	@Base() {
+	@Base("Home") {
 		<h1>PHIN VADS Home</h1>
-		<div class="search">
-			<p>Search PHIN VADS</p>
-			<div class="grid-row">
-				<form class="usa-form">
-					<section class="grid-col-auto">
-					<select class="usa-select" name="options" id="options">
-						<option value> All Vocabulary </option>
-						<option value="value1">Option A</option>
-						<option value="value2">Option B</option>
-						<option value="value3">Option C</option>
-					</select>
-					</section>
-				</form>
-				<section class="grid-col-fill" aria-label="Big search component">
-					<form class="usa-search usa-search--big" role="search">
-						<label class="usa-sr-only" for="search-field-en-big">Search</label>
-							<input
-							class="usa-input"
-							id="search-field-en-big"
-							type="search"
-							name="search"
-							/>
-						<button class="usa-button" type="submit">
-						<span class="usa-search__submit-text">Search </span>
-						<img
-							src="/assets/img/usa-icons-bg/search--white.svg"
-							class="usa-search__submit-icon"
-							alt="Search"
-						/>
-						</button>
-					</form>
-				</section>
-			</div>
-			<div class="grid-row advanced-search-link">
-				<p><a href="#">Advanced Search</a></p>
-			</div>
-		</div>
+		@SearchBar()
 		<h2>Hot Topics</h2>
 		<div 
 			hx-trigger="load"

diff --git a/internal/ui/components/navbar.templ b/internal/ui/components/navbar.templ
@@ -1,6 +1,6 @@
 package components
 
-templ NavBar() {
+templ NavBar(currentPage string) {
 	<header class="container cdc-header noindex" role="banner">
 		<div class="cdc-header__desktop">
 			<div class="cdc-page-offset">
@@ -91,5 +91,6 @@ templ NavBar() {
 				</a>
 			</div>
 		</div>
+		@Breadcrumb(currentPage)
 	</header>
 }
diff --git a/internal/ui/components/search_bar.templ b/internal/ui/components/search_bar.templ
@@ -0,0 +1,41 @@
+package components
+
+templ SearchBar() {
+    <div class="search">
+        <p>Search PHIN VADS</p>
+        <div class="grid-row">
+            <form class="usa-form">
+                <section class="grid-col-auto">
+                    <select class="usa-select" name="options" id="options">
+                        <option value> All Vocabulary </option>
+                        <option value="value1">Option A</option>
+                        <option value="value2">Option B</option>
+                        <option value="value3">Option C</option>
+                    </select>
+                </section>
+            </form>
+            <section class="grid-col-fill" aria-label="Big search component">
+                <form class="usa-search usa-search--big" role="search">
+                    <label class="usa-sr-only" for="search-field-en-big">Search</label>
+                    <input
+                        class="usa-input"
+                        id="search-field-en-big"
+                        type="search"
+                        name="search"
+                    />
+                    <button class="usa-button" type="submit">
+                    <span class="usa-search__submit-text">Search </span>
+                    <img
+                        src="/assets/img/usa-icons-bg/search--white.svg"
+                        class="usa-search__submit-icon"
+                        alt="Search"
+                    />
+                    </button>
+                </form>
+            </section>
+        </div>
+        <div class="grid-row advanced-search-link">
+            <p><a href="#">Advanced Search</a></p>
+        </div>
+    </div>
+}
diff --git a/internal/ui/components/search_result_row.templ b/internal/ui/components/search_result_row.templ
@@ -0,0 +1,45 @@
+package components
+
+templ ResultRow(conceptCode, conceptName, prefName, codeSystem, valueSet string, alternate bool) {
+     <div 
+        if alternate == true {
+            class="row content-row" role="row"
+        } else {
+            class="row content-row alternate-bg" role="row"
+        }
+     >
+        <div class="col check">
+            <div role="cell">
+                <input 
+                    type="checkbox" 
+                    value={conceptCode}
+                >
+            </div>
+        </div>
+        <div class="col">
+            <div role="cell">
+                <p>{conceptCode}</p>
+            </div>
+        </div>
+        <div class="col">
+            <div role="cell">
+                <p>{conceptName}</p>
+            </div>
+        </div>
+        <div class="col">
+            <div role="cell">
+                <p>{prefName}</p>
+            </div>
+        </div>
+        <div class="col">
+            <div role="cell">
+                <p>{codeSystem}</p>
+            </div>
+        </div>
+        <div class="col">
+            <div role="cell">
+                <p>{valueSet}</p>
+            </div>
+        </div>
+    </div>
+}