Merge remote-tracking branch 'origin/angular-14' into explore-redesign

dashboard/portal/portals.component.html

@@ -55,11 +55,11 @@
                   Bulk Actions ({{getSelectedPortals().length}})
                 </button>
                 <div uk-dropdown="mode: click">
-                  <ul class="uk-nav uk-dropdown-nav"
+                  <ul class="uk-nav uk-dropdown-nav uk-text-capitalize"
                       [attr.uk-tooltip]="getSelectedPortals().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
                       title="Select at least one entity">
                     <li>
-                      <a (click)="confirmDeleteSelectedPortals()"><i></i>Delete</a>
+                      <a (click)="confirmDeleteSelectedPortals()">Delete</a>
                     </li>
                   </ul>
                 </div>
@@ -67,6 +67,7 @@
             </th>
             <th>Name</th>
             <th>Type</th>
+            <th>Piwik</th>
             <th>Actions</th>
           </tr>
           </thead>
@@ -81,6 +82,9 @@
               <td>
                 <div class="type" href="#">{{check.portal.type}}</div>
               </td>
+              <td>
+                <div class="name" href="#">{{check.portal.piwik}}</div>
+              </td>
               <td>
                 <div class="uk-flex uk-flex-middle">
                   <icon class="clickable" [flex]="true" name="edit" [customClass]="'uk-text-primary'" (click)="editPortal(i)"></icon>

dashboard/portal/portals.component.ts

@@ -229,11 +229,11 @@ export class PortalsComponent implements OnInit {
   
   public filterByType(portal: Portal): boolean {
     let type = this.filterForm.get("type").value;
-    return type == "all" || (type == portal.type);
+    return type == "all" || (type === portal.type);
   }
   
   public filterPortals(portal: Portal): boolean {
-    return this.searchText.toString() === '' || (portal.name || portal.type).match(this.searchText) != null;
+    return this.searchText.toString() === '' || (portal.name + portal.type + portal.pid).match(this.searchText) != null;
   }
   
   handleUpdateError(message: string, error = null) {

dashboard/sharedComponents/page-content/page-content.component.ts

@@ -2,14 +2,15 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
-  ElementRef, Inject,
+  ElementRef,
+  Inject,
   Input,
   OnDestroy,
-  OnInit, PLATFORM_ID,
+  OnInit,
+  PLATFORM_ID,
   ViewChild
 } from "@angular/core";
 import {LayoutService} from "../sidebar/layout.service";
-import {Subscription} from "rxjs";
 
 declare var UIkit;
 declare var ResizeObserver;
@@ -18,8 +19,8 @@ declare var ResizeObserver;
   selector: '[page-content]',
   template: `
     <div id="page_content">
-      <div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer class="uk-tile-default uk-blur-background"
+      <div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer
-           [attr.uk-sticky]="'bottom: true'" [attr.offset]="footer_offset">
+           class="uk-tile-default uk-blur-background">
         <div class="uk-container uk-container-large">
           <div class="uk-padding-small uk-padding-remove-vertical">
             <ng-content select="[sticky_footer]"></ng-content>
@@ -27,7 +28,6 @@ declare var ResizeObserver;
         </div>
       </div>
       <div id="page_content_header" #header class="uk-blur-background"
-           [attr.uk-sticky]="(headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset"
            [attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
         <div class="uk-container uk-container-large">
           <div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
@@ -37,8 +37,7 @@ declare var ResizeObserver;
           </div>
         </div>
       </div>
-      <div id="page_content_actions" #actions class="uk-blur-background"
+      <div id="page_content_actions" #actions class="uk-blur-background">
-           [attr.uk-sticky]="(!headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset">
         <div class="uk-container uk-container-large">
           <div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
             <div class="actions">
@@ -69,43 +68,49 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   public shouldSticky: boolean = true;
   @ViewChild('header') header: ElementRef;
   @ViewChild('actions') actions: ElementRef;
-  public footer_offset: number = 0;
   public footer_height: number = 0;
-  @ViewChild("sticky_footer") sticky_footer;
+  @ViewChild("sticky_footer") sticky_footer: ElementRef;
+  private sticky = {
+    header: null,
+    footer: null
+  }
   subscriptions = [];
-  
+
   constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef,
               @Inject(PLATFORM_ID) private platformId) {
   }
-  
+
   ngOnInit() {
     if (typeof document !== "undefined") {
       this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
+      this.stickyBugWorkaround();
     }
   }
-  
+
   get isBrowser() {
     return this.platformId === 'browser';
   }
-  
+
   get isStickyActive() {
-    if (this.header && this.actions && this.shouldSticky) {
+    return this.sticky.header?.isActive;
-      let sticky = this.headerSticky ? this.header.nativeElement : this.actions.nativeElement;
-      return UIkit.sticky(sticky).isActive;
-    } else {
-      return false;
-    }
   }
-  
+
   ngAfterViewInit() {
     if (typeof document !== "undefined") {
-      // TODO make it smooth
-      // this.observeBottom();
-      this.observeHeader();
       this.observeStickyFooter();
+      if (this.shouldSticky && typeof document !== 'undefined') {
+        this.sticky.header = UIkit.sticky((this.headerSticky ? this.header.nativeElement : this.actions.nativeElement), {
+          media: '@m',
+          offset: this.offset
+        });
+      }
+      if (this.sticky_footer) {
+        let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
+        this.sticky.footer = UIkit.sticky(this.sticky_footer.nativeElement, {bottom: true, offset: footer_offset});
+      }
     }
   }
-  
+
   ngOnDestroy() {
     this.subscriptions.forEach(subscription => {
       if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
@@ -113,13 +118,48 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     });
   }
-  
+
-  ngAfterContentChecked() {
+
-    if (this.sticky_footer && typeof document !== 'undefined') {
+  /**
-      this.footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
+   * Workaround for sticky not update bug when sidebar is toggled.
-    }
+   * TODO when UIKit will be updated => remove
+   *
+   * */
+  stickyBugWorkaround() {
+    let sidebarOffset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-width')) -
+      Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-mini-width'));
+    let transitionDelay = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-transition-delay')) * 1000;
+    this.subscriptions.push(this.layoutService.isOpen.subscribe(isOpen => {
+      if (this.sticky.header) {
+        if (isOpen) {
+          this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) - sidebarOffset + 'px';
+        } else {
+          this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) + sidebarOffset + 'px';
+        }
+        setTimeout(() => {
+          this.sticky.header.$emit();
+        }, transitionDelay);
+      }
+      if (this.sticky.footer) {
+        if (isOpen) {
+          this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) - sidebarOffset + 'px';
+        } else {
+          this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) + sidebarOffset + 'px';
+        }
+        setTimeout(() => {
+          this.sticky.footer.$emit();
+        }, transitionDelay);
+      }
+      this.cdr.detectChanges();
+    }));
   }
-  
+
+  /**
+   * @deprecated
+   *
+   * Should be smooth
+   *
+   * */
   private observeBottom() {
     let bottom = document.getElementById('bottom');
     if (bottom) {
@@ -132,12 +172,15 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
       bottomObs.observe(bottom);
     }
   }
-  
+
+  /**
+   * @deprecated
+   * */
   private observeHeader() {
     if (this.header) {
       let headerObs = new IntersectionObserver(entries => {
         entries.forEach(entry => {
-          if(entry.boundingClientRect.height > 0) {
+          if (entry.boundingClientRect.height > 0) {
             this.layoutService.setReplaceHeader(!entry.isIntersecting);
           }
         })
@@ -146,13 +189,13 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
       headerObs.observe(this.header.nativeElement);
     }
   }
-  
+
   private observeStickyFooter() {
     if (this.sticky_footer) {
       let resizeObs = new ResizeObserver(entries => {
         entries.forEach(entry => {
           setTimeout(() => {
-            this.footer_offset = this.calcStickyFooterOffset(entry.target);
+            this.sticky.footer.offset = this.calcStickyFooterOffset(entry.target);
             this.cdr.detectChanges();
           });
         })
@@ -161,7 +204,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
       resizeObs.observe(this.sticky_footer.nativeElement);
     }
   }
-  
+
   calcStickyFooterOffset(element) {
     this.footer_height = element.offsetHeight;
     return window.innerHeight - this.footer_height;

dashboard/sharedComponents/sidebar/layout.service.ts

@@ -160,7 +160,11 @@ export class LayoutService {
     }));
     this.setObserver();
   }
-  
+
+  get isOpen(): Observable<boolean> {
+    return this.openSubject.asObservable();
+  }
+
   get open(): boolean {
     return this.openSubject.getValue();
   }

dashboard/sharedComponents/sidebar/sidebar-content.component.ts

@@ -1,4 +1,4 @@
-import {Component, HostListener} from "@angular/core";
+import {Component} from "@angular/core";
 import {LayoutService} from "./layout.service";
 
 @Component({