Dc 2982 frontend changes

core/settings.py

@@ -129,7 +129,9 @@
 with open(SAMPLE_SEARCH_RESULTS_FILENAME) as f:
     SAMPLE_SEARCH_RESULTS = yaml.safe_load(f)
 
-
 # Catalog settings
 CATALOGUE_URL = os.environ.get("CATALOGUE_URL")
 CATALOGUE_TOKEN = os.environ.get("CATALOGUE_TOKEN")
+
+# session
+SESSION_ENGINE = 'django.contrib.sessions.backends.db'

home/helper.py

@@ -0,0 +1,6 @@
+def filter_seleted_domains(domain_list, domains):
+    selected_domain = {}
+    for domain in domain_list:
+        if domain.value in domains:
+            selected_domain[domain.value] = domain.label
+    return selected_domain

home/urls.py

@@ -7,4 +7,5 @@
 urlpatterns = [
     path("", views.home_view, name="home"),
     path("search", views.search_view, name="search"),
+    path("details/<str:id>/", views.details_view, name="details"),
 ]

home/views.py

@@ -1,25 +1,91 @@
+from django.conf import settings
 from django.shortcuts import render
-
 from .services import get_catalogue_client
+from .helper import filter_seleted_domains
+from data_platform_catalogue.search_types import MultiSelectFilter
 
 
 # Create your views here.
 def home_view(request):
     context = {}
-    context["service_name"] = "Daap Data Catalogue"
     return render(request, "home.html", context)
 
 
+def details_view(request, id):
+
+    context = {}
+    client = get_catalogue_client()
+    filter_value = [MultiSelectFilter("urn", id)]
+    search_results = client.search(query="", page=None, filters=filter_value)
+    context["result"] = search_results.page_results[0]
+
+    return render(request, "details.html", context)
+
+
 def search_view(request):
+
     query = request.GET.get("query", "")
     page = request.GET.get("page", None)
 
     client = get_catalogue_client()
-    search_results = client.search(query=query, page=page)
 
+    # Fetch domainlist without query
+    # This will be replaced ater matt creates a new function
+    search_results = client.search(query="", page=None)
     context = {}
+    domain_list = search_results.facets['domains']
+    context["domainlist"] = domain_list
+
+    domains = request.GET.getlist("domain", [])
+    if domains:
+        selected_domain = filter_seleted_domains(domain_list, domains)
+        context['selected_domain'] = selected_domain
+        request.session['selected_domain'] = selected_domain
+        request.session['domains'] = domains
+        filter_value = [MultiSelectFilter("domains", domains)]
+    elif request.GET.get('clear_filter') == "True":
+        filter_value = []
+        context['selected_domain'] = {}
+    elif request.GET.get('clear_label') == 'True':
+        # Value to clear
+        label_value = request.GET.getlist("value")
+
+        # Remove the selected value from list
+        domains = request.session.get('domains', None)
+        domains = list(set(domains) - set(label_value))
+
+        # Populated selected domain
+        selected_domain = filter_seleted_domains(domain_list, domains)
+        context['domains'] = domains
+        context['selected_domain'] = selected_domain
+
+        # Reassign to session
+        request.session['selected_domain'] = selected_domain
+        request.session['domains'] = domains
+        if not domains:
+            filter_value = []
+        else:
+            filter_value = [MultiSelectFilter("domains", domains)]
+
+    elif request.GET.get('query'):
+        domains = request.session.get('domains', None)
+        # Preserve filter
+        selected_domain = filter_seleted_domains(domain_list, domains)
+        if not domains:
+            filter_value = []
+        else:
+            context['selected_domain'] = selected_domain
+            context['domains'] = domains
+            filter_value = [MultiSelectFilter("domains", domains)]
+    else:
+        filter_value = []
+        context['selected_domain'] = {}
+
+    # Search with filter
+    search_results = client.search(
+        query=query, page=page, filters=filter_value)
     context["query"] = query
-    context["service_name"] = "Daap Data Catalogue"
     context["results"] = search_results.page_results
     context["total_results"] = search_results.total_results
+
     return render(request, "search.html", context)

templates/base/base.html

@@ -43,4 +43,4 @@
   window.MOJFrontend.initAll();
 </script>
 </body>
-</html>
+</html>

templates/base/head.html

@@ -12,4 +12,4 @@
   <link rel="stylesheet" type="text/css" href="{% static 'assets/css/search.css' %}">
   <link rel="stylesheet" type="text/css" href="{% static 'assets/css/base.css' %}">
   <meta property="og:image" content="{% static 'assets/images/govuk-opengraph-image.png' %}">
-</head>
+</head>

templates/base/navigation.html

@@ -17,25 +17,20 @@
       </a>
     </div>
     <div class="govuk-header__content">
-      <a href="#" class="govuk-header__link govuk-header__service-name">
-        {{ service_name}}
+      <a href="{% url 'home:home' %}" class="govuk-header__link govuk-header__service-name">
+        Data Catalogue
       </a>
       <nav aria-label="Menu" class="govuk-header__navigation">
         <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>Menu</button>
         <ul id="navigation" class="govuk-header__navigation-list">
           <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
-            <a class="govuk-header__link" href="#">
-              Navigation item 1
+            <a class="govuk-header__link" href="{% url 'home:home' %}">
+              Home
             </a>
           </li>
           <li class="govuk-header__navigation-item">
-            <a class="govuk-header__link" href="#">
-              Navigation item 2
-            </a>
-          </li>
-          <li class="govuk-header__navigation-item">
-            <a class="govuk-header__link" href="#">
-              Navigation item 3
+            <a class="govuk-header__link" href="{% url 'home:search' %}">
+              Search
             </a>
           </li>
         </ul>

templates/details.html

@@ -0,0 +1,134 @@
+{% extends "base/base.html" %}
+{% load static %}
+{% load markdown %}
+
+{% block content %}
+<div class="govuk-width-container">
+
+  <a onclick="history.back()" class="govuk-back-link">Back</a>
+      <main class="govuk-main-wrapper">
+        <div class="govuk-grid-row"> 
+          <span class="govuk-caption-l">{{result.result_type.name}}</span>        
+          <h2 class="govuk-heading-l">{{result.name}}</h2>
+          <div class="govuk-grid-column-two-thirds">
+            <div class="govuk-summary-card__title-wrapper" >
+            <dl class="govuk-summary-list govuk-summary-list--no-border">
+
+              <div class="govuk-summary-list__row">
+                <dt class="govuk-summary-list__key">Registered by</dt>
+                <dd class="govuk-summary-list__value">
+                  {{result.metadata.owner}}
+                </dd>
+              </div>
+
+              <div class="govuk-summary-list__row">
+                <dt class="govuk-summary-list__key">Owner email</dt>
+                <dd class="govuk-summary-list__value">
+                {{result.metadata.owner_email}}
+                </dd>
+              </div>
+
+
+              <div class="govuk-summary-list__row">
+                <dt class="govuk-summary-list__key">Domain name</dt>
+                <dd class="govuk-summary-list__value">
+                {{result.metadata.domain.properties.name}}
+                </dd>
+              </div>
+
+
+              <div class="govuk-summary-list__row">
+                <dt class="govuk-summary-list__key">Last updated date</dt>
+                <dd class="govuk-summary-list__value">
+                  {{result.last_updated}}
+                </dd>
+              </div>
+
+              <div class="govuk-summary-list__row">
+                <dt class="govuk-summary-list__key">Refresh period</dt>
+                <dd class="govuk-summary-list__value">
+
+                </dd>
+              </div>
+
+              <div class="govuk-summary-list__row">
+                <dt class="govuk-summary-list__key">Retention period</dt>
+                <dd class="govuk-summary-list__value">
+
+                </dd>
+              </div>
+              <div class="govuk-summary-list__row">
+                <dt class="govuk-summary-list__key">DPIA Status </dt>
+                <dd class="govuk-summary-list__value">
+
+                </dd>
+              </div>
+              <div class="govuk-summary-list__row">
+                <dt class="govuk-summary-list__key">Tags</dt>
+                <dd class="govuk-summary-list__value">
+                {{ result.tags |join:", " }}
+                </dd>
+              </div>
+              <div class="govuk-summary-list__row">
+                <dt class="govuk-summary-list__key">Description</dt>
+                <dd class="govuk-summary-list__value">
+                  {{result.description}}
+                </dd>
+              </div>
+            </dl>
+            </div>
+            <br/>
+            <table class="govuk-table">
+              <caption class="govuk-table__caption govuk-table__caption--m">Database content</caption>
+              <thead class="govuk-table__head">
+                <tr class="govuk-table__row">
+                  <th scope="col" class="govuk-table__header app-custom-class">Table name</th>
+                  <th scope="col" class="govuk-table__header app-custom-class">Description</th>
+                  <th scope="col" class="govuk-table__header app-custom-class">Schema Details</th>
+                </tr>
+              </thead>
+              <tbody class="govuk-table__body">
+                <tr class="govuk-table__row">
+                  <th scope="row" class="govuk-table__header">Table 1</th>
+                  <td class="govuk-table__cell">This is description about the table</td>
+                  <td class="govuk-table__cell">  <a href="#" class="govuk-link">Schema details</a></td>
+                </tr>
+                <tr class="govuk-table__row">
+                  <th scope="row" class="govuk-table__header">Table 2</th>
+                  <td class="govuk-table__cell">This is description about the table</td>
+                  <td class="govuk-table__cell">  <a href="#" class="govuk-link">Schema details</a></td>
+                </tr>
+                <tr class="govuk-table__row">
+                  <th scope="row" class="govuk-table__header">Table 3</th>
+                  <td class="govuk-table__cell">This is description about the table</td>
+                  <td class="govuk-table__cell">  <a href="#" class="govuk-link">Schema details</a></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="govuk-grid-column-one-third">
+              <div class="govuk-body">
+                <p class="govuk-heading-s">IAO or Data Owner</p>
+                <span class="govuk-body">
+                  {{result.metadata.owner}}
+                </span>
+              </div>
+              <div class="govuk-body">
+                <p class="govuk-heading-s">Contact for Access requirement</p>
+                <span class="govuk-body">
+                  {{result.metadata.owner_email}}
+                </span>
+              </div>
+              <div class="govuk-body">
+                <p class="govuk-heading-s">Access requirement</p>
+                <span class="govuk-body">
+                  Processing the data might require 
+                  permission from IAO or Data owner
+                </span>
+              </div>
+          </div>
+        </div>
+      </main>
+</div>
+{% endblock content %}

templates/home.html

@@ -3,7 +3,7 @@
 
 {% block content %}
 
-  <a href="#" class="govuk-back-link">Back</a>
+  <a onclick="history.back()" class="govuk-back-link">Back</a>
   <main class="govuk-main-wrapper app-main-class" id="main-content" role="main">
     <h1 class="govuk-heading-xl">Customised page template</h1>
   </main>