feat(ref-table): initial setup 🎉 #41

README.md

@@ -234,6 +234,21 @@ This plugin registers a field `tinymce` for rendering the TinyMCE WYSIWYG Editor
           "tinymce/plugins/advlist"
         ]
     ``` 
+
+#### RefTable
+
+This plugin registers a field `ref-table` that enables the editing of referenced item in an array and adding new references.
+
+##### Dependencies
+
+This plugin doesn't have any additional dependencies.
+
+##### Set up
+
+1. Install the plugin `npm i --save @jaspero/fb-ref-table`
+2. Add the plugin module `FbRefTableModule` to your module
+
+__Note:__ If doing something like `users/{{id}}/notifications` it's important to have an initial value for the id.
 
 #### Page Builder
 
@@ -350,7 +365,7 @@ This plugin doesn't have any additional dependencies.
 
 ### Creating a plugin
 
-1. Run `ng g library [plugin-name]`
+1. Run `ng g library [plugin-name] --prefix="fb-[library-prefix]"`
 2. Add `@jaspero/` prefix in the projects `package.json`
 3. Add a `release` property as well. Example from `tincymce` plugin.
     ```json

angular.json

@@ -329,10 +329,51 @@
           }
         }
       }
+    },
+    "ref-table": {
+      "projectType": "library",
+      "root": "projects/ref-table",
+      "sourceRoot": "projects/ref-table/src",
+      "prefix": "fb-rt",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "projects/ref-table/tsconfig.lib.json",
+            "project": "projects/ref-table/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ref-table/tsconfig.lib.prod.json",
+              "project": "projects/ref-table/ng-package.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ref-table/src/test.ts",
+            "tsConfig": "projects/ref-table/tsconfig.spec.json",
+            "karmaConfig": "projects/ref-table/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ref-table/tsconfig.lib.json",
+              "projects/ref-table/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "schema-forms",
   "cli": {
     "analytics": false
   }
-}
+}

package.json

@@ -10,6 +10,7 @@
     "build:page-builder": "ng build --prod page-builder && cp ./README.md ./dist/@jaspero/fb-page-builder && cp LICENSE ./dist/@jaspero/fb-page-builder",
     "build:form-ui": "ng build --prod form-ui && cp ./README.md ./dist/@jaspero/fb-form-ui && cp LICENSE ./dist/@jaspero/fb-form-ui",
     "build:tinymce": "ng build --prod tinymce && cp ./README.md ./dist/@jaspero/fb-tinymce && cp LICENSE ./dist/@jaspero/fb-tinymce",
+    "build:ref-table": "ng build --prod ref-table && cp ./README.md ./dist/@jaspero/fb-ref-table && cp LICENSE ./dist/@jaspero/fb-ref-table",
     "build": "npm run build:form-builder && npm run build:page-builder && npm run build:tinymce && npm run build:form-ui",
     "build:dev:form-builder": "ng build form-builder",
     "build:dev:page-builder": "ng build page-builder",

projects/form-builder/src/lib/services/db.service.ts

@@ -73,4 +73,8 @@ export abstract class DbService {
   removeUserAccount(id: string): Observable<any> {
     return of();
   }
+
+  createId() {
+    return '';
+  }
 }

projects/ref-table/README.md

@@ -0,0 +1,24 @@
+# RefTable
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ref-table` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ref-table`.
+> Note: Don't forget to add `--project ref-table` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ref-table` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ref-table`, go to the dist folder `cd dist/ref-table` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ref-table` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

projects/ref-table/karma.conf.js

@@ -0,0 +1,35 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ref-table'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

projects/ref-table/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ref-table",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/ref-table/ng-package.prod.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/@jaspero/fb-ref-table",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/ref-table/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@jaspero/fb-ref-table",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^11.0.0",
+    "@angular/core": "^11.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "release": {
+    "pkgRoot": "../../dist/@jaspero/fb-ref-table",
+    "branch": "master",
+    "verifyConditions": [
+      "@semantic-release/changelog",
+      "@semantic-release/npm",
+      "@semantic-release/git"
+    ],
+    "prepare": [
+      "@semantic-release/changelog",
+      "@semantic-release/npm",
+      "@semantic-release/git"
+    ],
+    "publish": [
+      "@semantic-release/npm",
+      [
+        "@semantic-release/github",
+        {
+          "assets": [
+            "dist/@jaspero/fb-ref-table"
+          ]
+        }
+      ]
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator"
+    ]
+  }
+}

projects/ref-table/src/lib/ref-table.module.ts

@@ -0,0 +1,33 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+import {FormBuilderContextService, FormBuilderModule} from '@jaspero/form-builder';
+import {TranslocoModule} from '@ngneat/transloco';
+import {RefTableComponent} from './ref-table/ref-table.component';
+
+@NgModule({
+  declarations: [RefTableComponent],
+  imports: [
+    CommonModule,
+
+    FormBuilderModule,
+
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+
+    TranslocoModule
+  ]
+})
+export class FbRefTableModule {
+  constructor(
+    private ctx: FormBuilderContextService
+  ) {
+    this.ctx.registerField(
+      'ref-table',
+      RefTableComponent
+    );
+  }
+}

projects/ref-table/src/lib/ref-table/ref-table.component.html

@@ -0,0 +1,20 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>{{cData.label}}</mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <div class="item" *ngFor="let item of items; index as index">
+      <button class="item-delete" mat-icon-button color="warn" (click)="remove(item, index)">
+        <mat-icon>cancel</mat-icon>
+      </button>
+      <fb-form-builder [data]="item.data"></fb-form-builder>
+    </div>
+  </mat-card-content>
+
+  <mat-card-actions>
+    <button mat-stroked-button color="primary" (click)="add()">
+      {{cData.addLabel | transloco}}
+    </button>
+  </mat-card-actions>
+</mat-card>

projects/ref-table/src/lib/ref-table/ref-table.component.scss

@@ -0,0 +1,12 @@
+.item {
+  display: flex;
+  justify-content: space-between;
+
+  &-delete {
+    padding-top: 1rem;
+  }
+
+  fb-form-builder {
+    width: 100%;
+  }
+}

projects/ref-table/src/lib/ref-table/ref-table.component.spec.ts

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