Feat/bootstrap 5

angular.json

@@ -39,9 +39,7 @@
               "src/styles.scss"
             ],
             "scripts": [
-              "node_modules/plotly.js/dist/plotly.min.js",
-              "node_modules/jsonpath-plus/dist/index-umd.js",
-              "src/assets/js/jsonpath.js"
+              "node_modules/plotly.js/dist/plotly.min.js"
             ],
             "vendorChunk": true,
             "extractLicenses": false,

package.json

@@ -18,62 +18,61 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.3.1",
+    "@angular/animations": "~13.3.2",
     "@angular/cdk": "^13.3.2",
-    "@angular/common": "~13.3.1",
-    "@angular/compiler": "~13.3.1",
-    "@angular/core": "~13.3.1",
-    "@angular/forms": "~13.3.1",
-    "@angular/localize": "~13.3.1",
-    "@angular/platform-browser": "~13.3.1",
-    "@angular/platform-browser-dynamic": "~13.3.1",
-    "@angular/platform-server": "~13.3.1",
-    "@angular/router": "~13.3.1",
-    "@angular/service-worker": "~13.3.1",
-    "@fortawesome/angular-fontawesome": "^0.10.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fullcalendar/core": "^5.10.1",
-    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
+    "@angular/common": "~13.3.2",
+    "@angular/compiler": "~13.3.2",
+    "@angular/core": "~13.3.2",
+    "@angular/forms": "~13.3.2",
+    "@angular/localize": "~13.3.2",
+    "@angular/platform-browser": "~13.3.2",
+    "@angular/platform-browser-dynamic": "~13.3.2",
+    "@angular/platform-server": "~13.3.2",
+    "@angular/router": "~13.3.2",
+    "@angular/service-worker": "~13.3.2",
+    "@fortawesome/angular-fontawesome": "^0.10.2",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@ng-bootstrap/ng-bootstrap": "^12.0.2",
     "@nguniversal/express-engine": "^13.1.0",
     "@triply/yasgui": "^4.2.23",
+    "ace-builds": "^1.4.14",
     "angular-plotly.js": "^4.0.4",
-    "bootstrap": "^4.6.1",
-    "brace": "^0.11.1",
-    "express": "^4.17.1",
-    "flag-icon-css": "^3.5.0",
-    "font-awesome": "^4.7.0",
-    "jsonpath-plus": "4.0.0",
-    "keycloak-angular": "^8.4.0",
-    "keycloak-js": "^16.1.0",
-    "moment": "^2.29.1",
+    "bootstrap": "^5.1.3",
+    "express": "4.17.3",
+    "jsonpath-plus": "6.0.1",
+    "keycloak-angular": "^9.1.0",
+    "keycloak-js": "^17.0.1",
+    "marked": "^4.0.13",
+    "moment": "^2.29.2",
     "moment-timezone": "^0.5.34",
-    "ng2-pdf-viewer": "^6.4.1",
+    "ng2-pdf-viewer": "^9.0.0",
     "ngx-autosize": "^1.8.7",
     "ngx-file-drop": "^13.0.0",
-    "ngx-highlightjs": "^6.1.0",
+    "ngx-highlightjs": "^6.1.2",
     "ngx-markdown-editor": "4.0.0",
     "ngx-webstorage-service": "^4.1.0",
-    "plotly.js": "^1.57.1",
+    "plotly.js": "^2.11.1",
     "primeicons": "^5.0.0",
     "primeng": "^13.3.2",
     "rxjs": "~6.6.6",
     "serve-favicon": "^2.5.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.1",
-    "@angular-devkit/schematics": "^13.3.1",
-    "@angular-eslint/builder": "13.1.0",
-    "@angular-eslint/eslint-plugin": "13.1.0",
-    "@angular-eslint/eslint-plugin-template": "13.1.0",
-    "@angular-eslint/schematics": "13.1.0",
-    "@angular-eslint/template-parser": "13.1.0",
-    "@angular/cli": "~13.3.1",
-    "@angular/compiler-cli": "~13.3.1",
+    "@angular-devkit/build-angular": "~13.3.2",
+    "@angular-devkit/schematics": "^13.3.2",
+    "@angular-eslint/builder": "13.2.0",
+    "@angular-eslint/eslint-plugin": "13.2.0",
+    "@angular-eslint/eslint-plugin-template": "13.2.0",
+    "@angular-eslint/schematics": "13.2.0",
+    "@angular-eslint/template-parser": "13.2.0",
+    "@angular/cli": "~13.3.2",
+    "@angular/compiler-cli": "~13.3.2",
     "@nguniversal/builders": "^13.1.0",
+    "@types/bootstrap": "^5.1.9",
     "@types/express": "^4.17.9",
     "@types/jasmine": "~3.6.1",
     "@types/jasminewd2": "~2.0.8",

src/app/app.component.html

@@ -1,24 +1,18 @@
 <app-navbar  (toggleExpand)="expand($event)"></app-navbar>
 <ng-container>
-  <div class="d-flex justify-content-start" [class.bg-dark]="true"
+  <div class="d-flex justify-content-start" 
   >
-    <nav [class.nav-padding]="true"
-         class=" p-0 bg-dark-nav nav-fixed collapse"
-         [class.position-fixed]="isDesktop"
-         [class.show]="toggle"
+    <nav 
     >
       <app-sidebar></app-sidebar>
     </nav>
     <main [class.nav-padding]="true" role="main"
-          [class.margin-navbar]="toggle"
-          [class.margin-navbar-big]="toggle"
-          class=" bg-white d-block container-fluid"
+          class="d-block container-fluid"
     >
       <router-outlet></router-outlet>
     </main>
 
   </div>
-  <app-gdpr></app-gdpr>
 
 </ng-container>
 

src/app/app.module.ts

@@ -80,12 +80,15 @@ import {
   faUserCog,
   faUserSecret,
   faWindowClose,
+  faFileCode,
+  faBold,
+  faListOl,
+  faItalic,
 } from '@fortawesome/free-solid-svg-icons';
 import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '@env/environment';
 import { LayoutModule } from '@feature/layout/layout.module';
-import { GdprModule } from '@feature/gdpr/gdpr.module';
 import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs';
 import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
 import { initializeKeycloak } from './init/keycloak-init.factory';
@@ -99,7 +102,6 @@ registerLocaleData(localeDe, 'de');
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
     AppRoutingModule,
     LayoutModule,
-    GdprModule,
     KeycloakAngularModule,
     HighlightModule,
     ServiceWorkerModule.register('ngsw-worker.js', {
@@ -138,6 +140,10 @@ export class AppModule {
       faKey,
       faIdCard,
       faAddressBook,
+      faFileCode,
+      faBold,
+      faListOl,
+      faItalic,
       faPhone,
       faBirthdayCake,
       faMailBulk,

src/app/features/administrative-document/document-editor/document-editor.component.html

@@ -3,24 +3,24 @@
     <span class="modal-title text-break">
       {{adminDoc?.title ? 'Edit ' + adminDoc?.title : 'New Document'}}
     </span>
-    <button type="button" class="close" aria-label="Close"
+    <button type="button" class="btn-close" aria-label="Close"
             (click)="activeModal?.dismiss('Cross click')">
-      <span aria-hidden="true">&times;</span>
+
     </button>
   </div>
   <div class="modal-body">
     <form [formGroup]="form" (ngSubmit)="submit()">
-      <div class="form-group ">
+      <div class="mb-1">
         <label for="title">Title</label>
         <input type="text" class="form-control" id="title" formControlName="title">
       </div>
 
-      <div class="form-group ">
+      <div class="mb-1">
         <label for="description">Description</label>
         <textarea [autosize]="true" class="form-control" id="description" formControlName="description"></textarea>
       </div>
 
-      <div class="form-group ">
+      <div class="mb-1">
         <label for="tags">Tags</label>
         <p-chips id="tags" formControlName="tags" separator=","></p-chips>
       </div>
@@ -29,7 +29,7 @@
                      dropZoneClassName="flat bg-light d-block"
                      [multiple]="false">
         <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-          <button id="dd" class="btn btn-primary mr-1" type="button" (click)="openFileSelector()"
+          <button id="dd" class="btn btn-primary me-1" type="button" (click)="openFileSelector()"
                   *ngIf="!document && !adminDoc?.attachment">
             <fa-icon [icon]="['fas','upload']"></fa-icon>
           </button>

src/app/features/administrative-document/document-result/document-result.component.html

@@ -62,10 +62,5 @@
       [collectionSize]="adminDocuments.totalElements"
       (pageChange)="load($event)">
     </ngb-pagination>
-    <select id="pageSize" class="form-control form-control-sm ml-2 col-1 " [(ngModel)]="pageSize"
-           *ngIf="adminDocuments?.content?.length" 
-            (ngModelChange)="load()">
-      <option *ngFor="let op of [5,10,20,50,100]" [selected]="op === pageSize">{{op}}</option>
-    </select>
   </div>
 </ng-container>

src/app/features/administrative-document/document-search-form/document-search-form.component.html

@@ -6,32 +6,34 @@
   </div>
   <div class="card-body" [ngbCollapse]="isCollapsed">
     <form [formGroup]="searchForm" (ngSubmit)="submit()">
-      <div class="form-group row">
+      <div class="mb-1 row">
         <label class="col-sm-2 col-form-label" for="title">Title</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="title" formControlName="title"
                  placeholder="Title">
         </div>
       </div>
-      <div class="form-group row">
+      <div class="mb-1 row">
         <label class="col-sm-2 col-form-label" for="description">Description</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" id="description" formControlName="description"
                  placeholder="Description">
         </div>
       </div>
-      <div class="form-group ">
-        <label for="tags">Tags</label>
-        <p-chips id="tags" formControlName="tags" separator=","></p-chips>
+      <div class="mb-1 d-flex justify-content-start">
+        <label class="col-sm-2 col-form-label" for="tags">Tags</label>
+        <div class="col-sm-10 ms-1">
+          <p-chips id="tags" formControlName="tags" placehholder="Tags"  separator=","></p-chips>
+          </div>
       </div>
-      <div class="form-group row">
+      <div class="mb-1 row">
         <label class="col-sm-2 col-form-label" for="dateBefore">Before</label>
         <div class="col-sm-10">
           <input type="datetime-local" class="form-control" id="dateBefore" formControlName="dateBefore"
           >
         </div>
       </div>
-      <div class="form-group row">
+      <div class="mb-1 row">
         <label class="col-sm-2 col-form-label" for="dateAfter">After</label>
         <div class="col-sm-10">
           <input type="datetime-local" class="form-control" id="dateAfter" formControlName="dateAfter">
@@ -40,7 +42,7 @@
       <hr>
       <div class="d-flex justify-content-end">
         <button type="submit" class="btn btn-primary" [disabled]="!searchForm.valid">Submit</button>
-        <button class="btn btn-outline-danger ml-1" (click)="resetForm()">Reset</button>
+        <button class="btn btn-outline-danger ms-1" (click)="resetForm()">Reset</button>
       </div>
     </form>
 

src/app/features/blog/blog.module.ts

@@ -11,9 +11,11 @@ import { BlogRoutingModule } from './blog-routing.module';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { PostDetailComponent } from './post-detail/post-detail.component';
 import { ChipsModule } from 'primeng/chips';
-
-import 'brace';
-import 'brace/mode/markdown';
+import 'ace-builds/src-min-noconflict/ace';
+import 'ace-builds/src-min-noconflict/mode-markdown';
+import("marked").then(m=> {
+    (window as any).marked = m.marked;
+});
 
 @NgModule({
   declarations: [PostsComponent, PostEditorComponent, PostDetailComponent],

src/app/features/blog/post-detail/post-detail.component.html

@@ -1,10 +1,10 @@
 <ng-container *ngIf="post">
-  <div class="border-0 mb-3 mt-3 ml-0 mr-0">
+  <div class="border-0 mb-3 mt-3 ms-0 me-0">
     <img [src]="getCoverUrl()" class="cover bg-light" alt="...">
     <article class="d-block mt-3">
       <h4>{{post.title | titlecase}}</h4>
       <div class="d-inline">
-        <button class="btn btn-link text-dark p-0 pr-1" (click)="generatePdf()">
+        <button class="btn btn-link text-dark p-0 pe-1" (click)="generatePdf()">
           <fa-icon [icon]="['fas','file-pdf']"></fa-icon>
         </button>
         <small class="text-muted">Last updated: {{post.updatedDate | date: 'dd/MM/yyyy HH:mm'}},
@@ -24,7 +24,7 @@ <h4>{{post.title | titlecase}}</h4>
       <ng-container>
         <div class="d-block">
 
-      <span class="badge badge-primary p-1 mr-1 mb-1"
+      <span class="badge bg-primary p-1 me-1 mb-1"
             *ngFor="let t of post.tags">#{{t}}</span>
         </div>
       </ng-container>

src/app/features/blog/post-detail/post-detail.component.scss

@@ -19,3 +19,9 @@
 ::ng-deep .hljs {
   background-color: #f8f9fa;
 }
+
+.cover {
+  object-fit: cover;
+  width: 100%;
+  height: 200px;
+}

src/app/features/blog/post-editor/post-editor.component.html

@@ -1,9 +1,9 @@
 <ng-container *ngIf="post">
   <div class="modal-header" *ngIf="post.title && activeModal">
     <span class="modal-title text-break">{{post.title | titlecase}}</span>
-    <button type="button" class="close" aria-label="Close"
+    <button type="button" class="btn-close" aria-label="Close"
             (click)="activeModal?.dismiss('Cross click')">
-      <span aria-hidden="true">&times;</span>
+
     </button>
   </div>
   <div class="modal-body">
@@ -13,28 +13,28 @@
         <li ngbNavItem>
           <a ngbNavLink>Metadata</a>
           <ng-template ngbNavContent>
-            <div class="form-group">
+            <div class="mb-1">
               <label class="col-form-label" for="title">Title</label>
               <input type="text" class="form-control" id="title" formControlName="title"
                      placeholder="Title">
             </div>
-            <div class="form-group">
+            <div class="mb-1">
               <label class="col-form-label" for="description">Description</label>
               <textarea class="form-control" id="description" formControlName="description"
                         placeholder="Description"></textarea>
             </div>
-            <div class="form-group ">
+            <div class="mb-1">
               <label for="tags">Tags</label>
               <p-chips id="tags" formControlName="tags" separator=","></p-chips>
             </div>
-            <div class="form-group">
+            <div class="mb-1">
               <label for="sd">Cover image</label>
               <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="drop($event)"
                              dropZoneClassName="flat bg-light d-block"
                              [accept]="'image/*'"
                              [multiple]="false">
                 <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-                  <button id="sd" class="btn btn-primary mr-1" type="button" (click)="openFileSelector()" *ngIf="!url">
+                  <button id="sd" class="btn btn-primary me-1" type="button" (click)="openFileSelector()" *ngIf="!url">
                     <fa-icon [icon]="['fas','upload']"></fa-icon>
                   </button>
                   <a *ngIf="url" (click)="openFileSelector()" class="border-0">
@@ -54,7 +54,7 @@
         <li ngbNavItem>
           <a ngbNavLink>Editor</a>
           <ng-template ngbNavContent>
-            <div class="form-group">
+            <div class="mb-1 zindex-tooltip">
               <md-editor id="htmlContent"
                          [upload]="doUpload"
                          formControlName="htmlContent"

src/app/features/blog/post-editor/post-editor.component.scss

@@ -1,2 +1,5 @@
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css');
 
+::ng-deep .preview-panel{
+    border-left: 0 !important;
+}