Merge pull request #132 from Gid733/master

renemadsen · web-flow · commit d2422d2b98b4 · 2018-09-10T13:36:55.000+02:00
Added missing shared module
diff --git a/.gitignore b/.gitignore
@@ -367,10 +367,12 @@ eFormAPI/EformBase\.Pn/Plugins/EformBase/
 
 eFormAPI/Plugins/Vehicles\.Pn/Vehicles/
 
-eform-client/src/app/plugins/modules/
 
 eFormAPI/Plugins/
 eFormAPI/eFormAPI/Areas/HelpPage/HelpPage.css
 
 eFormAPI/eFormAPI/output/
 eFormAPI/eFormAPI/dataFolder/
+
+eform-client/src/app/plugins/modules/customers-pn/
+
diff --git a/eform-client/src/app/plugins/modules/shared/components/index.ts b/eform-client/src/app/plugins/modules/shared/components/index.ts
@@ -0,0 +1,4 @@
+export * from './pagination-pn/pagination-pn.component';
+export * from './spinner-pn/spinner-pn.component';
+export * from './subheader-pn/subheader-pn.component';
+export * from './text-editor-pn/pell-pn.component';
diff --git a/eform-client/src/app/plugins/modules/shared/components/pagination-pn/pagination-pn.component.html b/eform-client/src/app/plugins/modules/shared/components/pagination-pn/pagination-pn.component.html
@@ -0,0 +1,24 @@
+<div class="d-flex justify-content-center">
+  <nav aria-label="pagination">
+    <ul class="pagination pg-blue">
+
+      <li class="page-item" *ngIf="currentPage > 1">
+        <a class="page-link" aria-label="Previous" (click)="selectPage(currentPage - 1)">
+          <span aria-hidden="true">&laquo;</span>
+        </a>
+      </li>
+
+      <li class="page-item active" *ngFor="let page of pages | async"
+          (click)="selectPage(page)"
+          [ngClass]="{'active': currentPage === page}">
+        <a class="page-link">{{page}} </a>
+      </li>
+
+      <li class="page-item" *ngIf="currentPage != totalPages">
+        <a class="page-link" (click)="selectPage(currentPage + 1)" aria-label="Next">
+          <span aria-hidden="true">&raquo;</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/eform-client/src/app/plugins/modules/shared/components/pagination-pn/pagination-pn.component.scss b/eform-client/src/app/plugins/modules/shared/components/pagination-pn/pagination-pn.component.scss
diff --git a/eform-client/src/app/plugins/modules/shared/components/pagination-pn/pagination-pn.component.ts b/eform-client/src/app/plugins/modules/shared/components/pagination-pn/pagination-pn.component.ts
@@ -0,0 +1,59 @@
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
+import {Observable, range} from 'rxjs';
+import {filter, map, toArray} from 'rxjs/operators';
+
+@Component({
+  selector: 'pagination-pn',
+  templateUrl: './pagination-pn.component.html',
+  styleUrls: ['./pagination-pn.component.scss']
+})
+export class PaginationPnComponent implements OnInit, OnChanges {
+  @Output() onPageChanged: EventEmitter<number> = new EventEmitter<number>();
+  @Input() offset = 0;
+  @Input() limit = 1;
+  @Input() size = 1;
+  @Input() range = 3;
+  currentPage: number;
+  totalPages: number;
+  pages: Observable<number[]>;
+
+  selectPage(page: number) {
+    if (page === 0 || page > this.totalPages) {
+      return;
+    }
+    if (this.isValidPageNumber(page, this.totalPages)) {
+      this.onPageChanged.emit((page - 1) * this.limit);
+    }
+  }
+
+  getPages(offset: number, limit: number, size: number) {
+    this.currentPage = this.getCurrentPage(offset, limit);
+    this.totalPages = this.getTotalPages(limit, size);
+    this.pages = range(-this.range, this.range * 2 + 1).pipe(
+      map((offset) => this.currentPage + offset),
+      filter(page => this.isValidPageNumber(page, this.totalPages)),
+      toArray()
+    );
+  }
+
+  getCurrentPage(offset: number, limit: number): number {
+    return Math.floor(offset / limit) + 1;
+  }
+
+  isValidPageNumber(page: number, totalPages: number): boolean {
+    return page > 0 && page <= totalPages;
+  }
+
+  getTotalPages(limit: number, size: number): number {
+    return Math.ceil(Math.max(size, 1) / Math.max(limit, 1));
+  }
+
+  ngOnChanges() {
+    this.getPages(this.offset, this.limit, this.size);
+  }
+
+  ngOnInit() {
+    this.getPages(this.offset, this.limit, this.size);
+  }
+
+}
diff --git a/eform-client/src/app/plugins/modules/shared/components/spinner-pn/spinner-pn.component.html b/eform-client/src/app/plugins/modules/shared/components/spinner-pn/spinner-pn.component.html
@@ -0,0 +1,6 @@
+<div class="animated fadeIn spinner-container load1"
+     id="spinner-animation"
+     *ngIf="spinnerVisibility"
+>
+  <div class="loader">{{'Loading' | translate}}...</div>
+</div>
diff --git a/eform-client/src/app/plugins/modules/shared/components/spinner-pn/spinner-pn.component.scss b/eform-client/src/app/plugins/modules/shared/components/spinner-pn/spinner-pn.component.scss
diff --git a/eform-client/src/app/plugins/modules/shared/components/spinner-pn/spinner-pn.component.ts b/eform-client/src/app/plugins/modules/shared/components/spinner-pn/spinner-pn.component.ts
@@ -0,0 +1,15 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'spinner-pn',
+  templateUrl: './spinner-pn.component.html',
+  styleUrls: ['./spinner-pn.component.scss']
+})
+export class SpinnerPnComponent implements OnInit {
+  @Input() spinnerVisibility = false;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/eform-client/src/app/plugins/modules/shared/components/subheader-pn/subheader-pn.component.html b/eform-client/src/app/plugins/modules/shared/components/subheader-pn/subheader-pn.component.html
@@ -0,0 +1,9 @@
+<div class="d-flex heading-bg">
+  <div class="mr-auto p-3">
+    <h1 #heading>
+      {{title}}
+      <small *ngIf="subtitle" style="font-size: 1rem">({{subtitle}})</small>
+    </h1>
+  </div>
+  <ng-content></ng-content>
+</div>
diff --git a/eform-client/src/app/plugins/modules/shared/components/subheader-pn/subheader-pn.component.scss b/eform-client/src/app/plugins/modules/shared/components/subheader-pn/subheader-pn.component.scss
@@ -0,0 +1,3 @@
+.heading-bg {
+  background-color: #F1F1F1;
+}
diff --git a/eform-client/src/app/plugins/modules/shared/components/subheader-pn/subheader-pn.component.ts b/eform-client/src/app/plugins/modules/shared/components/subheader-pn/subheader-pn.component.ts
@@ -0,0 +1,21 @@
+import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+
+@Component({
+  selector: 'subheader-pn',
+  templateUrl: './subheader-pn.component.html',
+  styleUrls: ['./subheader-pn.component.scss']
+})
+export class SubheaderPnComponent implements OnInit {
+
+  @ViewChild('heading') heading: ElementRef;
+
+  @Input() title = '';
+  @Input() subtitle = '';
+  @Input() heandingSizeRem = 2.5;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.heading.nativeElement.style.fontSize = `${this.heandingSizeRem}rem`;
+  }
+}
diff --git a/eform-client/src/app/plugins/modules/shared/components/text-editor-pn/pell-pn.component.html b/eform-client/src/app/plugins/modules/shared/components/text-editor-pn/pell-pn.component.html
@@ -0,0 +1 @@
+<div #wysiwyg></div>
diff --git a/eform-client/src/app/plugins/modules/shared/components/text-editor-pn/pell-pn.component.ts b/eform-client/src/app/plugins/modules/shared/components/text-editor-pn/pell-pn.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit, OnChanges, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
+import { ElementRef, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
+import * as pell from './pell-pn';
+
+
+@Component({
+  selector: 'pell-pn-editor',
+  templateUrl: './pell-pn.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class PellPnComponent implements OnInit, AfterViewInit, OnChanges {
+  @Input() actions: Array<Object> = [];
+  @Input() value: String = '';
+  @Output() valueChange = new EventEmitter();
+  pell = pell;
+  html;
+  editor;
+
+  constructor(
+    private rd: Renderer2
+
+  ) { }
+
+  ngOnInit() {
+  }
+
+  @ViewChild('wysiwyg') wysiwyg: ElementRef;
+
+  ngAfterViewInit() {
+    this.wysiwygInit(this.wysiwyg.nativeElement, this.actions);
+    this.editor.content.innerHTML = this.value;
+  }
+
+  ngOnChanges(changes: any) {
+    try {
+      if (this.editor.content.innerHTML != this.value) {
+        this.editor.content.innerHTML = this.value;
+      }
+    } catch (err) {
+
+    }
+  }
+
+  wysiwygInit(elm, actions) {
+    this.editor = pell.init({
+      element: elm,
+      onChange: html => {
+        this.html = html;
+        this.valueChange.emit(this.html);
+      },
+      styleWithCSS: true,
+      actions: [
+        'bold',
+        'underline',
+        'italic',
+        'strikethrough',
+      ].concat(actions),
+      classes: {}
+    });
+  }
+}
diff --git a/eform-client/src/app/plugins/modules/shared/components/text-editor-pn/pell-pn.ts b/eform-client/src/app/plugins/modules/shared/components/text-editor-pn/pell-pn.ts
@@ -0,0 +1,74 @@
+const actions = {
+  bold: {
+    icon: '<b class="text-black-60">B</b>',
+    title: 'Bold',
+    result: () => exec('bold')
+  },
+  italic: {
+    icon: '<i class="text-black-60">I</i>',
+    title: 'Italic',
+    result: () => exec('italic')
+  },
+  underline: {
+    icon: '<u class="text-black-60">U</u>',
+    title: 'Underline',
+    result: () => exec('underline')
+  },
+  strikethrough: {
+    icon: '<strike class="text-black-60">S</strike>',
+    title: 'Strike-through',
+    result: () => exec('strikeThrough')
+  }
+};
+
+const classes = {
+  actionbar: 'pell-actionbar',
+  button: 'pell-button',
+  content: 'pell-content'
+};
+
+export const exec = (command, value = null) => {
+  document.execCommand(command, false, value);
+};
+
+const preventTab = event => {
+  if (event.which === 9) { event.preventDefault(); }
+};
+
+export const init = settings => {
+  settings.actions = settings.actions
+    ? settings.actions.map(action => {
+      if (typeof action === 'string') { return actions[action]; }
+      else if (actions[action.name]) { return { ...actions[action.name], ...action }; }
+      return action;
+    })
+    : Object.keys(actions).map(action => actions[action]);
+
+  settings.classes = { ...classes, ...settings.classes };
+
+  const actionbar = document.createElement('div');
+  actionbar.className = settings.classes.actionbar;
+  settings.element.appendChild(actionbar);
+
+  settings.element.content = document.createElement('div');
+  settings.element.content.contentEditable = true;
+  settings.element.content.className = settings.classes.content;
+  settings.element.content.oninput = event => settings.onChange(event.target.innerHTML);
+  settings.element.content.onkeydown = preventTab;
+  settings.element.appendChild(settings.element.content);
+
+  settings.actions.forEach(action => {
+    const button = document.createElement('button');
+    button.className = settings.classes.button;
+    button.innerHTML = action.icon;
+    button.title = action.title;
+    button.onclick = action.result;
+    actionbar.appendChild(button);
+  });
+
+  if (settings.styleWithCSS) { exec('styleWithCSS'); }
+
+  return settings.element;
+};
+
+export default { exec, init };
diff --git a/eform-client/src/app/plugins/modules/shared/shared-pn.module.ts b/eform-client/src/app/plugins/modules/shared/shared-pn.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
+import {PaginationPnComponent, PellPnComponent, SpinnerPnComponent, SubheaderPnComponent} from './components';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TranslateModule
+  ],
+  declarations: [SpinnerPnComponent, PaginationPnComponent, SubheaderPnComponent, PellPnComponent],
+  exports: [SpinnerPnComponent, PaginationPnComponent, SubheaderPnComponent, PellPnComponent]
+})
+export class SharedPnModule { }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.heading-bg {`
	`2`	`+ background-color: #F1F1F1;`
	`3`	`+}`