Initial setup with dummy data #1663

assets/js/app.js

@@ -17,6 +17,7 @@ import collapseSubSidebar from "./ui/collapsible_sub_sidebar.js";
 import fileUpload from "./ui/file_upload.js";
 import tags from "./ui/tags.js";
 import facetDropdowns from "./ui/facet_dropdowns.js";
+import initSidebarMenu from "./ui/sidebar_menu.js";
 
 // configure htmx
 htmx.config.defaultFocusScroll = true;
@@ -45,6 +46,7 @@ document.addEventListener("DOMContentLoaded", function () {
   fileUpload();
   tags();
   facetDropdowns();
+  initSidebarMenu();
 });
 
 htmx.onLoad(function (el) {

assets/js/ui/sidebar_menu.js

@@ -0,0 +1,47 @@
+export default function initSidebarMenu() {
+  const menuButtons = document.querySelectorAll("[data-sidebar-menu] button");
+  const contents = document.querySelectorAll("[data-sidebar-content]");
+  const closeButtons = document.querySelectorAll("[data-sidebar-close]");
+
+  menuButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const targetId = button.getAttribute("data-target-id");
+      const targetContent = document.getElementById(targetId);
+
+      // Check if the target content is currently displayed.
+      if (targetContent.classList.contains("open")) {
+        // If so, hide it.
+        targetContent.classList.remove("open");
+        button.classList.remove("active");
+      } else {
+        // If not, hide all contents and show the target content.
+        contents.forEach((content) => {
+          content.classList.remove("open");
+        });
+        menuButtons.forEach((btn) => {
+          btn.classList.remove("active");
+        });
+
+        targetContent.classList.add("open");
+        button.classList.add("active");
+      }
+    });
+  });
+
+  closeButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const parentContent = button.closest("[data-sidebar-content]");
+      if (parentContent) {
+        parentContent.classList.remove("open");
+
+        // Find the corresponding menu button and remove active class.
+        const correspondingButton = document.querySelector(
+          `[data-sidebar-menu] button[data-target="${parentContent.id}"]`,
+        );
+        if (correspondingButton) {
+          correspondingButton.classList.remove("active");
+        }
+      }
+    });
+  });
+}

static/manifest.json

@@ -1,5 +1,5 @@
 {
-  "/js/app.js": "/static/js/app-X5MYBGAE.js",
+  "/js/app.js": "/static/js/app-4WA5PKDO.js",
   "/fonts/icon-font.woff2": "/static/fonts/icon-font-MKUEJCPC.woff2",
   "/fonts/icon-font.woff": "/static/fonts/icon-font-4S7CKSGJ.woff",
   "/css/app.css": "/static/css/app-MYWSA4HP.css",

views/publication/show.templ

@@ -4,6 +4,7 @@ import (
 	"github.com/ugent-library/biblio-backoffice/ctx"
 	"github.com/ugent-library/biblio-backoffice/models"
 	"github.com/ugent-library/biblio-backoffice/views"
+	"github.com/ugent-library/biblio-backoffice/views/shared"
 )
 
 templ Show(c *ctx.Ctx, p *models.Publication, redirectURL string) {
@@ -180,6 +181,7 @@ templ Show(c *ctx.Ctx, p *models.Publication, redirectURL string) {
 					hx-trigger="load delay:100ms"
 					hx-target="#show-content"
 				></div>
+				@shared.DetailsSidebar(c)
 			</div>
 		</div>
 	}

views/shared/details-sidebar.templ

@@ -0,0 +1,172 @@
+package shared
+
+import "github.com/ugent-library/biblio-backoffice/ctx"
+
+templ DetailsSidebar(c *ctx.Ctx) {
+	<div id="sidebar-message" data-sidebar-content class="c-sub-sidebar c-sub-sidebar--large h-100 u-z-reset bg-white border-start">
+		<div class="overflow-hidden u-scroll-wrapper">
+			<div class="bc-navbar bc-navbar--bordered-bottom">
+				<div class="bc-toolbar">
+					<div class="bc-toolbar-left">
+						<h3>Biblio messages</h3>
+					</div>
+					<div class="bc-toolbar-right">
+						<button class="btn btn-muted btn-icon-only" type="button" data-sidebar-close>
+							<i class="if if-close"></i>
+							<div class="visually-hidden">Close</div>
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="u-scroll-wrapper__body p-6">
+				<div class="form-group">
+					<div class="bc-toolbar">
+						<div class="bc-toolbar-left">
+							<label class="col-form-label">Messages from and for Biblio team</label>
+						</div>
+						<div class="bc-toolbar-right">
+							<button class="btn btn-primary btn-sm">Save</button>
+						</div>
+					</div>
+					<textarea class="form-control" rows="15">The language-edited version of the PhD will be published in the forthcoming weeks as a book with ISBN number, which will be fully open access (based on the contract with the publisher) and uploaded in biblio. Dr Depauw prefers the language-edited book version to be published in full open access instead of the original dissertation, which therefore has been limited to author/admin only</textarea>
+					<p class="text-muted mt-2">Have any questions or changes to report? Mail to <a href="mailto:[email protected]">[email protected]</a>.</p>
+				</div>
+				<div class="form-group">
+					<div class="bc-toolbar">
+						<div class="bc-toolbar-left">
+							<label class="col-form-label">Librarian tags</label>
+						</div>
+						<div class="bc-toolbar-right">
+							<button class="btn btn-primary btn-sm">Save</button>
+						</div>
+					</div>
+					<textarea class="form-control" id="tags" placeholder="tags" autofocus></textarea>
+					<p class="text-muted mt-2">For internal use only.</p>
+				</div>
+				<div class="form-group">
+					<div class="bc-toolbar">
+						<div class="bc-toolbar-left">
+							<label class="col-form-label">Librarian note</label>
+						</div>
+						<div class="bc-toolbar-right">
+							<button class="btn btn-primary btn-sm">Save</button>
+						</div>
+					</div>
+					<textarea class="form-control" rows="15">The language-edited version of the PhD will be published in the forthcoming weeks as a book with ISBN number, which will be fully open access (based on the contract with the publisher) and uploaded in biblio. Dr Depauw prefers the language-edited book version to be published in full open access instead of the original dissertation, which therefore has been limited to author/admin only</textarea>
+					<p class="text-muted mt-2">For internal use only.</p>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div id="sidebar-history" data-sidebar-content class="c-sub-sidebar c-sub-sidebar--large h-100 u-z-reset bg-white border-start">
+		<div class="overflow-hidden u-scroll-wrapper">
+			<div class="bc-navbar bc-navbar--bordered-bottom">
+				<div class="bc-toolbar">
+					<div class="bc-toolbar-left">
+						<h3>Activity history</h3>
+					</div>
+					<div class="bc-toolbar-right">
+						<button class="btn btn-muted btn-icon-only" type="button" data-sidebar-close>
+							<i class="if if-close"></i>
+							<div class="visually-hidden">Close</div>
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="u-scroll-wrapper__body p-6">
+				<ul class="c-activity-list">
+					<li class="c-activity-item">
+						<div class="c-activity-item__avatar-wrapper">
+							<div class="bc-avatar bc-avatar--muted bc-avatar--small">
+								<i class="if if-edit"></i>
+							</div>
+						</div>
+						<div class="c-activity-item__content">
+							<div class="c-activity-item__activity">
+								<div class="c-activity-item__date">21 maart 2022 at 18:34</div>
+								<div class="c-activity-item__text">
+									<span class="fw-bold">Wouter Bosmans</span>
+									edited the access level questions
+								</div>
+							</div>
+						</div>
+					</li>
+					<li class="c-activity-item">
+						<div class="c-activity-item__avatar-wrapper">
+							<div class="bc-avatar bc-avatar--muted bc-avatar--small">
+								<i class="if if-edit"></i>
+							</div>
+						</div>
+						<div class="c-activity-item__content">
+							<div class="c-activity-item__activity">
+								<div class="c-activity-item__date">21 maart 2022 at 18:34</div>
+								<div class="c-activity-item__text">
+									<span class="fw-bold">Wouter Bosmans</span>
+									started completing the draft publication.
+								</div>
+							</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div id="sidebar-info" data-sidebar-content class="c-sub-sidebar c-sub-sidebar h-100 u-z-reset bg-white border-start">
+		<div class="overflow-hidden u-scroll-wrapper">
+			<div class="bc-navbar bc-navbar--bordered-bottom">
+				<div class="bc-toolbar">
+					<div class="bc-toolbar-left">
+						<h3>Details</h3>
+					</div>
+					<div class="bc-toolbar-right">
+						<button class="btn btn-muted btn-icon-only" type="button" data-sidebar-close>
+							<i class="if if-close"></i>
+							<div class="visually-hidden">Close</div>
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="u-scroll-wrapper__body p-6">
+				<ul class="c-activity-list">
+					<div class="form-group">
+						<label class="form-label form-label-top">Created by</label>
+						<p>Jane Cooper</p>
+					</div>
+					<div class="form-group">
+						<label class="form-label form-label-top">Creation date</label>
+						<p>2023-06-02</p>
+					</div>
+					<div class="form-group">
+						<label class="form-label form-label-top">Source</label>
+						<a class="c-link" href="#">Plato</a>
+					</div>
+					<div class="form-group">
+						<label class="form-label form-label-top">DOI</label>
+						<a class="c-link" href="#">10.1016/j.apergo.2023.104214</a>
+					</div>
+					<div class="form-group">
+						<label class="form-label form-label-top">Web of Science</label>
+						<a class="c-link" href="#">001155148400001</a>
+					</div>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="c-sub-sidebar c-sub-sidebar--small bg-light">
+		<div class="c-sub-sidebar__content">
+			<div class="d-flex justify-content-center py-3">
+				<nav class="nav nav-sidebar flex-column gap-2" data-sidebar-menu>
+					<button class="nav-link" type="button" data-target-id="sidebar-message" title="Biblio messages">
+						<i class="if if-message if--notification"></i>
+					</button>
+					<button class="nav-link" type="button" data-target-id="sidebar-history" title="Activity history">
+						<i class="if if-time"></i>
+					</button>
+					<button class="nav-link" type="button" data-target-id="sidebar-info" title="Details">
+						<i class="if if-info-circle"></i>
+					</button>
+				</nav>
+			</div>
+		</div>
+	</div>
+}