From 27b003b051ec918f4a749e9ee5b0f6ad7777bbd4 Mon Sep 17 00:00:00 2001
From: DenChaykovskiy <den.chaykovskiy@gmail.com>
Date: Wed, 27 Mar 2024 15:43:50 +0100
Subject: [PATCH] ui-gui: created product archive html page
---
.../templates/productarchive-show.html | 329 ++++++++++++++++++
1 file changed, 329 insertions(+)
create mode 100644 ui/gui/src/main/resources/templates/productarchive-show.html
diff --git a/ui/gui/src/main/resources/templates/productarchive-show.html b/ui/gui/src/main/resources/templates/productarchive-show.html
new file mode 100644
index 000000000..12f6564f4
--- /dev/null
+++ b/ui/gui/src/main/resources/templates/productarchive-show.html
@@ -0,0 +1,329 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" lang="en">
+
+<head>
+<meta charset="utf-8">
+<meta name="viewport"
+ content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title th:text="#{productarchive} + ' | ' + #{proseo}">proseo</title>
+
+<!-- Bootstrap core CSS -->
+<link rel="stylesheet"
+ href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+ integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
+ crossorigin="anonymous" />
+
+<!-- Custom styles for prosEO -->
+<link href="../static/fragments/proseo.css"
+ th:href="@{/fragments/proseo.css}" rel="stylesheet" type="text/css" />
+<link rel="stylesheet"
+ href="../static/fragments/bootstrap-multiselect.css"
+ th:href="@{/fragments/bootstrap-multiselect.css}" type="text/css" />
+</head>
+
+<body>
+
+ <div style="display: none;" class="loading">
+ <div class="loader"></div>
+ </div>
+
+ <nav id="proseo-nav"
+ class="navbar bg-light fixed-top flex-md-nowrap p-0 shadow navbar-expand-md">
+ <div class="container-fluid pl-0 pr-0">
+
+ <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" id="mission"
+ href="/"><img src="proseo_logo.png" class="rounded" width="50"
+ height="50"> <span th:text="#{proseo}">proseo</span></a>
+
+ <button class="navbar-toggler position-absolute d-md-none collapsed"
+ type="button" data-toggle="collapse" data-target="#sidebarMenu"
+ aria-controls="sidebarMenu" aria-expanded="false"
+ aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <ul class="navbar-nav mr-auto navbar-left">
+ <li class="p-breadcrumb-item"><a class="bread-link" href="/"><span
+ th:text="${missioncode}">mission</span></a></li>
+ <li class="p-breadcrumb-item"><span th:text="#{productarchive}">productarchive</span></li>
+ </ul>
+
+ <div th:replace="fragments/navbar.html :: navbarRight"></div>
+ </div>
+ </nav>
+
+ <div class="container-fluid">
+
+ <div class="row">
+
+ <div th:insert="fragments/sidebar.html :: sidebarMenu"></div>
+ <div class="proseo-top-div"></div>
+
+ <!-- Show an error message if the user is not authorized to view productarchives -->
+ <main th:unless="${hasroleproductarchivereader}" role="main"
+ class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
+ <h5 class="FAILED">
+ <br> <span th:text="#{noroleright}"></span>
+ <br>
+ </h5>
+ </main>
+
+ <!-- Show productarchives if the user is authorized -->
+ <main th:if="${hasroleproductarchivereader}" role="main"
+ class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
+
+ <div th:if="${errormsg != null}" id="errormsg" class="FAILED">
+ <h5>
+ <br> <span th:text="${errormsg}"></span>
+ </h5>
+ </div>
+
+
+ <!-- Filter productarchives -->
+ <form id="productarchiveFilters">
+ <div class="row py-lg-1">
+
+ <!-- Filter id -->
+ <div class="col-1 pr-lg-0">
+ <p class="input-group-text word-wrap" th:text="#{id}"></p>
+ </div>
+ <div class="col-1 pl-lg-0">
+ <input type="number" class="form-control" name="id" id="id">
+ </div>
+
+ <!-- Filter name -->
+ <div class="col-1 pr-lg-0">
+ <p class="input-group-text word-wrap" th:text="#{name}"></p>
+ </div>
+ <div class="col-3 pl-lg-0">
+ <input type="text" class="form-control" name="name" id="name">
+ </div>
+
+ <!-- Filter archiveType -->
+ <div class="col-2 pr-lg-0">
+ <p class="input-group-text word-wrap"
+ th:text="#{archiveType}"></p>
+ </div>
+ <div class="col-1 pl-lg-0">
+ <input type="text" class="form-control" name="archiveType"
+ id="archiveType">
+ </div>
+
+ </div>
+ <div class="row py-lg-1">
+
+ <!-- Submit button -->
+ <div class="col-3">
+ <button type="submit" class="btn btn-sm btn-outline-secondary">
+ <span th:text="#{productarchive-show}"></span>
+ </button>
+ </div>
+
+ </div>
+ </form>
+
+ <!-- The actual productarchiv table -->
+ <div id="productarchivecontent" name="productarchivecontent">
+
+ <table class="table" id="productarchiveTable">
+
+ <!-- Table header (parts that are always visible) -->
+ <thead class="thead-proseo" id="proseo-thead">
+ <tr>
+ <th><span> </span></th>
+ <th><span th:text="#{id}">id</span></th>
+ <th><span th:text="#{name}">name</span></th>
+ <th><span th:text="#{archiveType}">archiveType</span></th>
+ </tr>
+ </thead>
+
+ <div th:unless="${productarchives} == null">
+ <div th:each="productarchive : ${productarchives}">
+
+ <!-- productarchive content that is always visible -->
+ <tbody>
+ <tr>
+ <td th:id="'togglepa' + ${productarchive.id}"
+ class="cursorpointer first-row no-right-border"
+ th:onclick="'toggleProductArchive('+${productarchive.id}+')'">
+ <div class="hideproductarchive" th:id="'hidepa' + ${productarchive.id}"
+ th:style="${'display: none;'}">
+ <span data-feather="minus-circle"></span>
+ </div>
+ <div class="showproductarchive" th:id="'showpa' + ${productarchive.id}"
+ th:style="${'display: block;'}">
+ <span data-feather="plus-circle"></span>
+ </div>
+ </td>
+ <td class="cursorpointer first-row no-left-border"
+ th:onclick="'toggleProductArchive('+${productarchive.id}+')'"
+ th:text="${productarchive.id}"></td>
+ <td class="first-row" th:text="${productarchive.name}"></td>
+ <td class="first-row" th:text="${productarchive.archiveType}"></td>
+ </tr>
+ </tbody>
+
+ <!-- productarchive headers and content that can be hidden -->
+ <tbody class="filtercontent" th:id="'pacontent'+${productarchive.id}">
+
+ <!-- Table header (parts that are hidden by default) -->
+ <tr class="th-row">
+ <th class="tr-rowspan"><span> </span></th>
+ <th><span th:text="#{context}">context</span></th>
+ <th><span th:text="#{code}">code</span></th>
+ </tr>
+
+ <!-- Hidden content -->
+ <tr class="proseo-row-divider">
+ <td class="tr-rowspan"> </td>
+ <td class="first-row" th:text="${productarchive.context}"></td>
+ <td class="first-row" th:text="${productarchive.code}"></td>
+ </tr>
+
+ <!-- More hidden table headers -->
+ <tr class="th-row">
+ <th class="tr-rowspan"><span> </span></th>
+ <th><span th:text="#{username}">username</span></th>
+ </tr>
+
+ <!-- More hidden table content -->
+ <tr class="proseo-row-divider">
+ <td class="tr-rowspan"> </td>
+ <td class="first-row" th:text="${productarchive.username}"></td>
+ </tr>
+
+ </tbody>
+
+ </div>
+ </div>
+
+ </table>
+
+ <div th:replace="fragments/navbar.html :: alternatePageNav"></div>
+ </div>
+ <div th:insert="fragments/footer.html :: footer"></div>
+ </main>
+
+ </div>
+
+ </div>
+
+ <!-- Imports -->
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+ <script src="https://unpkg.com/feather-icons"></script>
+ <script
+ src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+ <script src="https://code.jquery.com/jquery-3.5.1.js"
+ integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
+ crossorigin="anonymous"></script>
+ <script
+ src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+ integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+ crossorigin="anonymous"></script>
+ <script
+ src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
+ integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
+ crossorigin="anonymous"></script>
+ <script
+ src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
+ <script src="../static/fragments/proseo.js"
+ th:src="@{/fragments/proseo.js}" type="text/javascript"></script>
+ <script src="../static/fragments/bootstrap-multiselect.js"
+ th:src="@{/fragments/bootstrap-multiselect.js}" type="text/javascript"></script>
+
+ <script type="text/javascript" th:inline="javascript">
+ // Global variables
+ var currentPage = 1; // Current page number
+ var pageSize = 50; // Maximum objects per page
+
+ // product archive filters
+ var id = null;
+ var name = null;
+ var archiveType = null;
+
+ // Function to fetch objects from the REST controller
+ function updateTable(newPage) {
+ currentPage = newPage;
+
+ var recordFrom = (currentPage - 1) * pageSize;
+ var recordTo = currentPage * pageSize;
+
+ var url = "/productarchive/get?recordFrom=" + recordFrom
+ + "&recordTo=" + recordTo
+ + "¤tPage=" + currentPage
+ + "&pageSize=" + pageSize;
+
+ if (id != null && id != "null")
+ url += "&id=" + id;
+
+ if (name != null && name != "null")
+ url += "&name=" + name;
+
+ if (archiveType != null && archiveType != "null")
+ url += "&archiveType=" + archiveType;
+
+ console.log(url);
+
+ fetch(url)
+ .then(response => response.text()) // Extract the response body as text
+ .then(html => {
+ $("#productarchivecontent").html(html); // Set the HTML content of the element
+ feather.replace(); // Display the arrows on the buttons
+ document.getElementById("pageSizeField").placeholder = pageSize; //Display correct page size
+ })
+ .catch(console.error);
+ }
+
+ // Function to fetch and apply filters
+ function setFilters(event) {
+ // Allow for custom form handling
+ event.preventDefault();
+
+ // Retrieve the values from the form inputs
+ id = document.getElementById("id").value.trim() === "" ? null : document.getElementById("id").value;
+ name = document.getElementById("name").value.trim() === "" ? null : document.getElementById("name").value;
+ archiveType = document.getElementById("archiveType").value.trim() === "" ? null : document.getElementById("archiveType").value;
+
+ // Update the table according to the new filters
+ updateTable(currentPage);
+ }
+
+ // Function to hide or show product archive details
+ function toggleProductArchive(id) {
+ var content = document.getElementById("pacontent" + id);
+ var eleshow = document.getElementById("showpa" + id);
+ var elehide = document.getElementById("hidepa" + id);
+ $(content).toggleClass("filtercontent");
+ if ($(content).css("display") === "none") {
+ $(eleshow).show();
+ $(elehide).hide();
+ } else {
+ $(eleshow).hide();
+ $(elehide).show();
+ }
+ }
+
+ // Function to customize the page size
+ function updatePageSize() {
+
+ // Retrieve the new page size
+ var newPageSize = document.getElementById("pageSizeField").value;
+ pageSize = (!isNaN(newPageSize) && newPageSize > 0) ? parseInt(newPageSize) : pageSize;console.log("New page size: " + pageSize);
+
+ // Call the function to update the table with the new page size
+ updateTable(currentPage);
+ }
+ </script>
+
+ <script>
+ window.onload = function init() {
+ // Call the updateTable(currentPage) function initially to populate the table on page load
+ updateTable(currentPage);
+
+ // Add an event listener to the form so that the filters will be applied
+ document.getElementById("productarchiveFilters").addEventListener("submit", setFilters);
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file