@retalia/sidebar-navigation 21.1.13 → 21.1.14

package/src/lib/sidebar/sidebar.component.html

@@ -0,0 +1,86 @@
+<div id="sidebar-panel">
+  <div class="panel-item" (click)="toggleSidebar($event, 'isModuleOpen')" data-testid="nav-menu">
+    @if (!panelButtonStates.isModuleOpen) {
+      <svg class="panel-icon" height="14" width="21" viewBox="0 0 18 12"
+        fill="#3e3e3e" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
+        <path d="M0 12H18V10H0V12ZM0 7H18V5H0V7ZM0 0V2H18V0H0Z" />
+      </svg>
+    }
+    @if (panelButtonStates.isModuleOpen) {
+      <svg class="panel-icon" height="13" width="13" viewBox="0 0 14 14"
+        fill="#3e3e3e" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
+        <path
+          d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" />
+        </svg>
+      }
+    </div>
+    <div class="panel-item" (click)="toggleSidebar($event, 'isSupportOpen')" data-testid="nav-support">
+      @if (!panelButtonStates.isSupportOpen) {
+        <svg class="panel-icon" width="18" height="21" viewBox="0 0 18 21"
+          fill="#3e3e3e" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M16 0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H6L9 21L12 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM10 16H8V14H10V16ZM12.07 8.25L11.17 9.17C10.45 9.9 10 10.5 10 12H8V11.5C8 10.4 8.45 9.4 9.17 8.67L10.41 7.41C10.78 7.05 11 6.55 11 6C11 4.9 10.1 4 9 4C7.9 4 7 4.9 7 6H5C5 3.79 6.79 2 9 2C11.21 2 13 3.79 13 6C13 6.88 12.64 7.68 12.07 8.25Z" />
+          </svg>
+        }
+        @if (panelButtonStates.isSupportOpen) {
+          <svg class="panel-icon" height="13" width="13" viewBox="0 0 14 14"
+            fill="#3e3e3e" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
+            <path
+              d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" />
+            </svg>
+          }
+        </div>
+
+        @if (!isSidebarOpen) {
+          <div class="collapsed-module-icons">
+            @for (module of modules; track module.authorizationId) {
+              @if (module.icon) {
+                <div class="collapsed-module-icon" [attr.title]="module.translatedName || module.name">
+                  <img [src]="module.icon" [alt]="module.translatedName || module.name" />
+                </div>
+              }
+            }
+          </div>
+        }
+
+
+        <div class="status-button" (mouseover)="hideStatus = false" (mouseleave)="hideStatus = true"
+          (click)="goToStatusPage()" data-testid="sidebar-status">
+          <svg class="panel-icon" width="22" height="22" viewBox="0 0 22 22" fill="#FFFFFF"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M20.625 6.5H1.375C0.615613 6.5 0 5.82842 0 5V2C0 1.17158 0.615613 0.5 1.375 0.5H20.625C21.3844 0.5 22 1.17158 22 2V5C22 5.82842 21.3844 6.5 20.625 6.5ZM18.5625 2.375C17.9929 2.375 17.5312 2.87867 17.5312 3.5C17.5312 4.12133 17.9929 4.625 18.5625 4.625C19.1321 4.625 19.5938 4.12133 19.5938 3.5C19.5938 2.87867 19.1321 2.375 18.5625 2.375ZM15.8125 2.375C15.2429 2.375 14.7812 2.87867 14.7812 3.5C14.7812 4.12133 15.2429 4.625 15.8125 4.625C16.3821 4.625 16.8438 4.12133 16.8438 3.5C16.8438 2.87867 16.3821 2.375 15.8125 2.375ZM20.625 14H1.375C0.615613 14 0 13.3284 0 12.5V9.5C0 8.67158 0.615613 8 1.375 8H20.625C21.3844 8 22 8.67158 22 9.5V12.5C22 13.3284 21.3844 14 20.625 14ZM18.5625 9.875C17.9929 9.875 17.5312 10.3787 17.5312 11C17.5312 11.6213 17.9929 12.125 18.5625 12.125C19.1321 12.125 19.5938 11.6213 19.5938 11C19.5938 10.3787 19.1321 9.875 18.5625 9.875ZM15.8125 9.875C15.2429 9.875 14.7812 10.3787 14.7812 11C14.7812 11.6213 15.2429 12.125 15.8125 12.125C16.3821 12.125 16.8438 11.6213 16.8438 11C16.8438 10.3787 16.3821 9.875 15.8125 9.875ZM20.625 21.5H1.375C0.615613 21.5 0 20.8284 0 20V17C0 16.1716 0.615613 15.5 1.375 15.5H20.625C21.3844 15.5 22 16.1716 22 17V20C22 20.8284 21.3844 21.5 20.625 21.5ZM18.5625 17.375C17.9929 17.375 17.5312 17.8787 17.5312 18.5C17.5312 19.1213 17.9929 19.625 18.5625 19.625C19.1321 19.625 19.5938 19.1213 19.5938 18.5C19.5938 17.8787 19.1321 17.375 18.5625 17.375ZM15.8125 17.375C15.2429 17.375 14.7812 17.8787 14.7812 18.5C14.7812 19.1213 15.2429 19.625 15.8125 19.625C16.3821 19.625 16.8438 19.1213 16.8438 18.5C16.8438 17.8787 16.3821 17.375 15.8125 17.375Z" />
+            </svg>
+            <iframe id="status-frame" [ngClass]="{'isOpen': !hideStatus, 'isClosed': hideStatus }"
+              src="//status.retalia.cloud/embed-status/light-sm" name="statusPage" width="230" height="61" frameBorder="0"
+              scrolling="no">
+            </iframe>
+          </div>
+        </div>
+
+        <div id="sidebar-container" [class.open-sidebar]="isSidebarOpen">
+          <div id="sticky-header">
+            <img class="logo-full" height="40px" src="https://imagineshared.blob.core.windows.net/portal/retalia_files/logos/sidebar_logo.png" (click)="goToPortal()"
+              data-testid="nav-logo" />
+              <div class="module-divider"></div>
+              @if (panelButtonStates.isModuleOpen) {
+                <div class="moduleSearchbar">
+                  <input class="moduleSearchInput" type="search" autocomplete="off" id="search" [value]="moduleSearchValue"
+                    required="false" [placeholder]="moduleSearchPlaceholder" (keyup)="handleModuleSearch($event)"
+                    (click)="handleModuleSearch($event)" />
+                  </div>
+                }
+              </div>
+              @if (panelButtonStates.isModuleOpen) {
+                <div id="menu">
+                  <sub-item [items]="modules"></sub-item>
+                </div>
+              }
+              @if (panelButtonStates.isSupportOpen) {
+                <div id="menu">
+                  <sub-item [items]="supportRoutes"></sub-item>
+                </div>
+              }
+            </div>
+
+            <shop-modal [availableShops]="availableShops" (selectedShop)="selectedShop($event)"></shop-modal>

package/src/lib/sidebar/sidebar.component.scss

@@ -0,0 +1,260 @@
+@import "../../styles/app.scss";
+
+
+
+#sidebar-panel {
+  z-index: 1;
+  position: fixed;
+  float: left;
+  width: 60px;
+  height: 100vh;
+  color: black;
+  text-align: center;
+  transition: 0.2s linear;
+  background-color: rgba(#ffffff, 1);
+  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+  @include responsive(mobileonly) {
+    height: 100%;
+  }
+}
+
+.panel-item {
+  cursor: pointer;
+  position: relative;
+  height: 40px;
+  margin: 10px;
+  transition: 0.2s linear;
+  border-radius: 50%;
+
+  &:hover {
+    background-color: imagine-color(nav-inactive-text-color);
+
+    .panel-icon {
+      fill: white;
+    }
+  }
+
+  &:active,
+  &:focus {
+    background: rgba(imagine-color(nav-active-text-color), 0.2);
+
+    .panel-icon {
+      fill: imagine-color(nav-active-text-color);
+    }
+  }
+
+  .panel-icon {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+  }
+}
+
+.collapsed-module-icons {
+  margin-top: 8px;
+  max-height: calc(100vh - 170px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.collapsed-module-icon {
+  width: 40px;
+  height: 40px;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+
+  img {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
+}
+
+#sidebar-container {
+  position: sticky;
+  top: 0; /* Sticky requires top/left */
+  height: 100vh; /* Set height by vh not % to fill viewport, handles sticky better */
+  overflow: hidden;
+  font-size: 12px;
+  font-family: "Chakra Petch", Arial, sans-serif;
+  width: 0px;
+  background: rgba(#ffffff, 1);
+  padding-left: 60px;
+  transition: 0.3s;
+  transition-timing-function: cubic-bezier(0.11, 0.95, 0.91, 0.93);
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+  @include responsive(mobileonly) {
+    top: auto;
+    position: relative;
+    border-right: 0px;
+  }
+}
+
+.open-sidebar {
+  width: 260px !important;
+  @include responsive(mobileonly) {
+    width: 160px !important;
+  }
+}
+
+@media print {
+  #container {
+    display: none;
+  }
+}
+
+.module-divider {
+  width: 240px;
+  margin: 10px;
+  border-top: 0.2px solid rgba(grey, 0.2);
+  -webkit-background-clip: padding-box; /* for Safari */
+  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+  @include responsive(mobileonly) {
+    width: 240px !important;
+  }
+}
+
+div#menu {
+  display: flex;
+  flex-flow: column;
+  background-color: transparent;
+  z-index: 10;
+  direction: ltr;
+  float: left;
+  width: 258px;
+  height: 85%;
+  overflow-y: overlay;
+  overflow-x: hidden;
+  transition: 0.2s linear;
+  @include responsive(mobileonly) {
+    width: 160px !important;
+  }
+}
+
+.moduleSearchbar {
+  z-index: 20;
+  position: inherit;
+  cursor: pointer;
+  width: 240px;
+  height: 28px;
+  border-radius: 4px;
+  margin: 10px;
+  background: rgba(#e2e2e2, 1);
+  @include responsive(mobileonly) {
+    width: 140px !important;
+    height: 40px;
+  }
+  .moduleSearchInput {
+    direction: ltr;
+    width: inherit;
+    height: inherit;
+    padding-left: 10px;
+    color: imagine-color(nav-active-text-color);
+    font-family: "Chakra Petch", Arial, sans-serif;
+
+    background-color: transparent;
+    border-style: none;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none; /* safari */
+  }
+
+  input:invalid {
+    box-shadow: none; /* prevent Mozilla Firefox from creating a red border */
+  }
+
+  ::placeholder {
+    color: imagine-color(nav-inactive-text-color);
+    /* text-transform: uppercase; */
+    font-size: 11px;
+    opacity: 1;
+  }
+}
+
+#sticky-header {
+  margin-top: 10px;
+  width: 100%;
+  text-align: center;
+  position: sticky;
+  transition: 1s ease;
+
+  .logo-full {
+    cursor: pointer;
+    padding: 5px 21px 0px 21px;
+  }
+}
+
+.status-button {
+  cursor: pointer;
+  position: inherit;
+  bottom: 0;
+  margin-left: 8px;
+  margin-bottom: 15px;
+  width: 40px;
+  height: 32px;
+  padding-top: 8px;
+  border-radius: 50%;
+  transition: 0.2s linear;
+  .panel-icon {
+    fill: #0c1830;
+  }
+
+  &:hover {
+    background-color: imagine-color(nav-active-text-color);
+
+    .panel-icon {
+      fill: #ffffff;
+    }
+  }
+}
+
+#status-frame {
+  position: inherit;
+  bottom: -8px;
+  padding-left: 25px;
+  transition: 0.2s linear;
+}
+
+.isOpen {
+  opacity: 1;
+  visibility: visible;
+}
+.isClosed {
+  opacity: 0;
+  visibility: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 5px; /* remove scrollbar space */
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(imagine-color(nav-active-text-color), 0.3);
+  border-radius: 10px;
+  transition: 0.2s linear;
+
+  &:hover {
+    background-color: rgba(imagine-color(nav-active-text-color), 0.9);
+  }
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}

package/src/lib/sidebar/sidebar.component.ts

@@ -0,0 +1,267 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { ModuleItem, Shop, SidebarEntry } from '../models/module';
+import { SubItemService } from '../services/sub-item.service';
+import { NgxSmartModalService } from 'ngx-smart-modal';
+import { ModuleService } from '../services/module.service';
+import { Environment } from '../models/environment';
+import { supportRoutes } from '../data/support-routes';
+import { CookieNames } from '../models/cookie-names';
+import { CookieService } from '../services/cookie.service';
+
+@Component({
+    selector: 'sidebar',
+    templateUrl: './sidebar.component.html',
+    styleUrls: ['./sidebar.component.scss'],
+    standalone: false
+})
+export class SidebarComponent implements OnChanges, OnDestroy {
+    private moduleRetryInterval: any;
+    private moduleFetchInProgress = false;
+
+    ngOnInit(): void {
+      this.tryFetchModulesUntilReady();
+    }
+  @Output() selectedRoute: EventEmitter<SidebarEntry> = new EventEmitter();
+  @Input() environment: Environment;
+  @Input() moduleSearchValue: any = '';
+  modules: ModuleItem[] = [];
+  modulesCopy: ModuleItem[] = [];
+  supportRoutes: ModuleItem[] = supportRoutes;
+  selectedModule: ModuleItem;
+  selectedItem;
+  availableShops: Shop[] = [];
+  availableShopsCopy: Shop[] = [];
+  moduleSearchPlaceholder = 'Search Modules ...';
+  isSidebarOpen: boolean = this.getSidebarState();
+  hideStatus: boolean = true;
+  panelButtonStates = {
+    isModuleOpen: this.isSidebarOpen,
+    isSupportOpen: false,
+  };
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private moduleService: ModuleService,
+    private subItemService: SubItemService,
+    private cookieService: CookieService,
+    public ngxSmartModalService: NgxSmartModalService
+  ) {
+    this.subItemService.subItemClickEvent.subscribe((item) => {
+      this.subItemClicked(item);
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['environment'] && changes['environment'].currentValue.apiRequestUrl) {
+      this.panelButtonStates.isModuleOpen = this.isSidebarOpen;
+      this.tryFetchModulesUntilReady();
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.moduleRetryInterval) {
+      clearInterval(this.moduleRetryInterval);
+    }
+  }
+
+  private tryFetchModulesUntilReady(): void {
+    if (this.moduleRetryInterval) {
+      clearInterval(this.moduleRetryInterval);
+    }
+    const tryFetch = () => {
+      if (
+        this.environment &&
+        this.environment.apiRequestUrl &&
+        this.modules.length === 0 &&
+        !this.moduleFetchInProgress
+      ) {
+        this.getModules(true);
+      }
+    };
+    tryFetch();
+    this.moduleRetryInterval = setInterval(tryFetch, 500);
+  }
+
+  public toggleSidebar(e: Event, option: string): void {
+    e.stopPropagation();
+    // Allows us to expand the panel items in future without needing to change the toggle logic
+    for (let item in Object(this.panelButtonStates)) {
+      item === option
+        ? (this.panelButtonStates[item] = !this.panelButtonStates[item])
+        : (this.panelButtonStates[item] = false);
+    }
+    this.isSidebarOpen = this.panelButtonStates[option];
+    this.setSidebarState();
+  
+    if (this.modules.length === 0) {
+      this.tryFetchModulesUntilReady();
+    }
+  }
+
+  public setSidebarState(): void {
+    this.cookieService.setCookie(CookieNames.isSidebarOpen, this.isSidebarOpen);
+  }
+
+  public getSidebarState(): boolean {
+    const cookieValue = this.cookieService.getCookie(
+      CookieNames.isSidebarOpen
+    );
+    //If the cookie doesn't exist, default to "open" so modules load immediately.
+    if (typeof cookieValue === 'undefined' || cookieValue === null) return true;
+    return cookieValue === 'true';
+  }
+
+  public goToPortal(): void {
+    window.location.href = this.environment.portalUrl;
+  }
+
+  public handleModuleSearch(e): void {
+    if (this.modulesCopy.length < 1) {
+      this.modulesCopy = [...this.modules];
+    }
+
+    this.moduleSearchValue = e && e.target ? e.target.value : '';
+    const searchString = this.moduleSearchValue.toLowerCase();
+
+    const moduleCopy = JSON.parse(JSON.stringify(this.modulesCopy));
+    this.modules = this.filterModules(moduleCopy, searchString);
+  }
+
+  public filterModules(
+    moduleItems: ModuleItem[] | SidebarEntry[],
+    searchTerm: string
+  ): any[] {
+    const matches = [];
+    if (!Array.isArray(this.modules)) return matches;
+
+    moduleItems.forEach((i) => {
+      if (i.name.toLowerCase().includes(searchTerm)) {
+        i.visible = true;
+        matches.push(i);
+      } else {
+        const childResults: SidebarEntry[] = this.filterModules(
+          i.children,
+          searchTerm
+        );
+        if (childResults.length) {
+          matches.push(Object.assign({}, i, { children: childResults }));
+        }
+      }
+    });
+
+    return matches;
+  }
+
+  public subItemClicked(item): void {
+    this.selectedModule = this.modules.find(
+      (m) =>
+        m.authorizationId ===
+        (item.authorizationId || item.moduleAuthorizationId)
+    );
+
+    if (this.selectedItem) this.selectedItem.active = false;
+    this.selectedItem = item;
+    this.selectedItem.active = true;
+
+    if (this.selectedItem.relationName === 'Documentation') {
+      window.open(this.selectedItem.url, '_blank', 'noopener noreferrer');
+    } else if (
+      (this.selectedModule && !this.selectedModule.entityAccess) ||
+      !this.selectedModule.entityAccess.length
+    ) {
+      this.routeToUrl();
+    } else if (
+      this.selectedModule &&
+      this.selectedModule.entityAccess.length === 1
+    ) {
+      const soleShop = this.selectedModule.entityAccess[0];
+      this.subItemService.saveItemInfo(this.selectedModule, soleShop);
+      this.routeToUrl();
+    } else {
+      this.mapShopModal();
+      this.ngxSmartModalService.getModal('shopModal').open();
+    }
+  }
+
+  public selectedShop(selectedShop: Shop): void {
+    this.subItemService.saveItemInfo(this.selectedModule, selectedShop.id);
+    this.routeToUrl();
+  }
+
+  public mapShopModal(): void {
+    if (this.availableShopsCopy.length < 1) {
+      this.availableShopsCopy = [...this.availableShops];
+    }
+    this.availableShops = this.availableShopsCopy.filter((shop) =>
+      this.selectedModule.entityAccess.includes(shop.id)
+    );
+  }
+
+  public goToStatusPage(): void {
+    window.open(
+      'https://status.retalia.cloud',
+      '_blank',
+      'noopener noreferrer'
+    );
+  }
+
+  public routeToUrl(): void {
+    let currentModule = this.moduleService.getCurrentModule(this.selectedItem);
+    if (
+      currentModule &&
+      this.selectedItem &&
+      (currentModule.authorizationId === this.selectedItem.authorizationId ||
+       currentModule.authorizationId === this.selectedItem.moduleAuthorizationId)
+    ) {
+      let currentItem = JSON.parse(JSON.stringify(this.selectedItem));
+      const pathArray = this.selectedItem.url.split('/');
+      pathArray.splice(0, 2);
+      currentItem.url = pathArray.join('/');
+      this.selectedRoute.emit(currentItem);
+    } else {
+      const itemUrl = this.selectedItem.url;
+      window.location.href = itemUrl;
+    }
+  }
+
+  private getModules(isFirstCall: boolean): void {
+    this.moduleFetchInProgress = true;
+    let apiUrl = this.environment.apiRequestUrl;
+    if (apiUrl.endsWith("/"))
+     apiUrl = apiUrl.slice(0, -1);
+
+    this.moduleService.getUserModules(apiUrl, '').then((moduleObject) => {
+      if (!moduleObject || !moduleObject.modulesDetails) {
+        if (!isFirstCall) {
+          console.log(`No modules were found using: ${apiUrl}`);
+        }
+        this.moduleFetchInProgress = false;
+        return;
+      }
+
+      this.availableShops = moduleObject.shops;
+      this.modules = this.moduleService.mapModuleItems(
+        moduleObject.modulesDetails
+      );
+      this.selectedItem = this.moduleService.findNestedUrlMatch(this.modules,window.location.pathname);
+      this.panelButtonStates.isModuleOpen = this.isSidebarOpen;
+      this.moduleFetchInProgress = false;
+      if (this.moduleRetryInterval) {
+        clearInterval(this.moduleRetryInterval);
+        this.moduleRetryInterval = null;
+      }
+      this.cdr.detectChanges();
+    }).catch(() => {
+      this.moduleFetchInProgress = false;
+    });
+  }
+}

package/src/lib/sidebar/sub-item/sub-item.component.html

@@ -0,0 +1,18 @@
+@for (item of items; track item; let i = $index) {
+  <div
+    [attr.data-testid]="'nav-' + (item.authorizationId || item.name)"
+    [class]="this.getClass(item, items)" (click)="subItemClicked($event, item)">
+    @if (item.visible) {
+      <div class="item-label">
+        @if (item.icon && item.authorizationId) {
+          <img [src]="item.icon" class="item-icon" alt="" />
+        }
+        {{ item.translatedName || item.name }}
+      </div>
+    }
+    @if (item.children) {
+      <sub-item [items]="item.children">
+      </sub-item>
+    }
+  </div>
+}