docs (action module): update the README and the demo app for action m…

…odule

- demo and docs for existingNameDirective incl. Stackblitz-Example
- demo and docs for keyPipe incl. Stackblitz-Example

projects/knora/action/README.md

@@ -12,6 +12,9 @@ You can use either the npm or yarn command-line tool to install packages. Use wh
 ### Yarn
 `yarn add @knora/action ts-md5@^1.2.4`
 
+---
+
+
 ## Components
 This module contains various components:
 
@@ -79,6 +82,11 @@ It's possible to set the position of the sort button to right side.
                  [position]="'right'">
 </kui-sort-button>
 
+---
+
+## Directives
+
+
 ### Admin image
 A attribute directive for images (`<img />`) to get a user avatar, which uses the service from gravatar.com and to set a project logo.
 
@@ -91,3 +99,45 @@ A attribute directive for images (`<img />`) to get a user avatar, which uses th
 #### Feature in both types
 - If no [image] is defined, a default image will be displayed.
 - If the defined image is not found, a default error-image will be displayed.
+
+### Existing Name
+This directive checks a form field to see if the value is unique. For example username or project short-name should be unique. Therefore we use the ExistingNameDirective.
+
+See the [Stackblitz example](https://stackblitz.com/edit/knora-existingname?file=src%2Fapp%2Fapp.component.ts) how it works.
+
+
+---
+
+## Pipes
+
+### Key
+In case of an object, where you don't know the labels or in case of an array with no numeric index, you can use the Key pipe. 
+
+For this array
+```
+array = [];
+
+[...]
+
+this.array['index-1'] = 'Value in index 1';
+this.array['index-2'] = 'Value in index 2';
+this.array['index-3'] = 'Value in index 3';
+
+]
+```
+we can use it in the template as follow:
+
+```
+<ul>
+    <li *ngFor="let item of array | key">
+        {{item.key}}: {{item.value}}
+    </li>
+</ul>
+```
+
+Which shows this list
+*  index-1: Value in index 1
+*  index-2: Value in index 2
+*  index-3: Value in index 3
+
+See the [Stackblitz example](https://stackblitz.com/edit/knora-key?file=src%2Fapp%2Fapp.component.html) how it works.

projects/knora/action/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knora/action",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "description": "Knora ui module",
   "repository": {
     "type": "git",

projects/knora/action/src/lib/pipes/key.pipe.ts

@@ -14,7 +14,6 @@ import { Pipe, PipeTransform } from '@angular/core';
  * {{item.value.name}} resp. {{item.value.label}}
  */
 
- // TODO: move this pipe to the action module
 
 @Pipe({
   name: 'key'

src/app/app.config.ts

@@ -37,7 +37,18 @@ export class AppDemo {
             },
             {
                 name: 'admin-image',
-                label: 'AdminImage'
+                label: 'AdminImage',
+                stackblitz: true
+            },
+            {
+                name: 'existing-name',
+                label: 'ExistingName',
+                stackblitz: true
+            },
+            {
+                name: 'key',
+                label: 'Key',
+                stackblitz: true
             }
         ]
     };
@@ -91,7 +102,7 @@ export class AppDemo {
 
     public static searchModule: DemoModule = {
         name: 'search',
-        published: false,
+        published: true,
         label: 'Search module'
     };
 

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
@@ -48,6 +49,8 @@ import { ModuleHeaderComponent } from './partials/module-header/module-header.co
 import { ModuleIndexComponent } from './partials/module-index/module-index.component';
 import { ModuleSubHeaderComponent } from './partials/module-sub-header/module-sub-header.component';
 import { SanitizeHtmlPipe } from './partials/pipes/sanitize-html.pipe';
+import { ExistingNameComponent } from './knora-ui-examples/action-demo/existing-name/existing-name.component';
+import { KeyComponent } from './knora-ui-examples/action-demo/key/key.component';
 
 
 @NgModule({
@@ -79,7 +82,9 @@ import { SanitizeHtmlPipe } from './partials/pipes/sanitize-html.pipe';
         PropertiesComponent,
         ObjectsComponent,
         ViewsComponent,
-        AuthComponent
+        AuthComponent,
+        ExistingNameComponent,
+        KeyComponent
     ],
     entryComponents: [
         // LoginFormComponent
@@ -100,7 +105,8 @@ import { SanitizeHtmlPipe } from './partials/pipes/sanitize-html.pipe';
         KuiViewerModule,
         MaterialModule,
         HttpClientModule,
-        MarkdownModule.forRoot({loader: HttpClient})
+        MarkdownModule.forRoot({loader: HttpClient}),
+        ReactiveFormsModule
     ],
     providers: [
         {

src/app/app.routing.ts

@@ -2,6 +2,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { AuthGuard } from '@knora/authentication';
 import { AppDemo } from './app.config';
+import { ExistingNameComponent } from './knora-ui-examples/action-demo/existing-name/existing-name.component';
+import { KeyComponent } from './knora-ui-examples/action-demo/key/key.component';
 // / start with main-intro
 import { MainIntroComponent } from './landing-page/main-intro/main-intro.component';
 // /modules demo
@@ -63,6 +65,14 @@ const appRoutes: Routes = [
                     {
                         path: 'admin-image',
                         component: AdminImageComponent
+                    },
+                    {
+                        path: 'existing-name',
+                        component: ExistingNameComponent
+                    },
+                    {
+                        path: 'key',
+                        component: KeyComponent
                     }
                 ]
             },

src/app/knora-ui-examples/action-demo/existing-name/existing-name.component.html

@@ -0,0 +1,29 @@
+<app-module-sub-header [demo]="partOf"></app-module-sub-header>
+
+<mat-card class="example-viewer">
+
+    <app-example-viewer [example]="existingName"></app-example-viewer>
+
+    <div class="demo">
+        <form [formGroup]="form" class="center card">
+            <mat-form-field>
+                <input matInput [formControl]="form.controls['name']" [placeholder]="'Name (should be unique)'">
+                <mat-hint *ngIf="formErrors.name">
+                    {{formErrors.name}}
+                </mat-hint>
+            </mat-form-field>
+
+            <button mat-button color="primary" [disabled]="!form.valid">
+                Submit
+            </button>
+        </form>
+    </div>
+</mat-card>
+
+
+<h3>The following names already exists</h3>
+<p>Try to use one of them in the form above and see what happens</p>
+<ul>
+    <li *ngFor="let n of dataMock">{{n}}</li>
+</ul>
+

src/app/knora-ui-examples/action-demo/existing-name/existing-name.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExistingNameComponent } from './existing-name.component';
+
+describe('ExistingNameComponent', () => {
+  let component: ExistingNameComponent;
+  let fixture: ComponentFixture<ExistingNameComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExistingNameComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExistingNameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});