@rws-framework/client 2.17.2 → 2.18.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.17.2",
+    "version": "2.18.0",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"

package/src/components/rws/reformer/component.ts

@@ -1,29 +1,59 @@
 import { observable, attr } from '@microsoft/fast-element';
-import { IKDBTypesResponse } from '../../../types/IBackendCore';
+import { IKDBTypeInfo, IKDBTypesResponse } from '../../../types/IBackendCore';
 import { RWSViewComponent} from '../../_component';
 import { RWSView} from '../../_decorator';
 import { ReFormerText } from './fields/text/component';
+import { ReFormerDate } from './fields/date/component';
+import { ReFormerNumber } from './fields/number/component';
+import { ReFormerBoolean } from './fields/boolean/component';
 
+ReFormerBoolean;
+ReFormerNumber;
 ReFormerText;
+ReFormerDate;
 
 @RWSView('rws-reformer')
 class ReFormer extends RWSViewComponent {
-    @attr resourceName: string;  
+    @attr resource: string;  
 
     @observable fields: string[] | null = null;
+    @observable formFields: IKDBTypeInfo[];
+
     @observable modelTypes: IKDBTypesResponse;
+    @observable setForm: (key: string, val: any) => void = this.setFormField.bind(this);
+    @observable afterForm: (val: any) => Promise<void> = null;
+
+    private payload: {[key: string]: any} = {};
+
+    modelTypesChanged(oldVal:IKDBTypesResponse, newVal: IKDBTypesResponse)
+    {
+        console.log({newVal})
+        if(newVal){
+            this.formFields = newVal.data.types.filter((item) => !['id', 'created_at', 'updated_at'].includes(item.fieldName))
+        }
+    }
 
-    async connectedCallback(): Promise<void> 
+    setFormField(key: string, val: HTMLFormElement)
     {
-        this.modelTypes = await this.apiService.getResource(this.resourceName); 
+        this.payload[key] = val.value;
     }
 
-    setForm(key: string, val: any)
+    paintLabel(input: string): string
     {
-        console.log('set reformer form', {key, val});
+        return input;
+    }
+
+    async sendForm()
+    {
+        const resource = await this.apiService.back.post(`${this.resource}:create`, this.payload);
+        this.payload = {};
+
+        if(this.afterForm){
+            this.afterForm(resource);
+        }
     }
 }
 
 ReFormer.defineComponent();
 
-export { ReFormer };
+export { ReFormer };

package/src/components/rws/reformer/fields/boolean/component.ts

@@ -0,0 +1,20 @@
+import RWSViewComponent from '../../../../_component';
+import { RWSView} from '../../../../_decorator';
+import { attr, observable } from '@microsoft/fast-element';
+
+@RWSView('reformer-boolean')
+class ReFormerBoolean extends RWSViewComponent {
+    @attr name: string;
+    @observable defaultValue: boolean = null;
+    @observable value: boolean = null;
+    @observable setForm: (field: string, value: any) => Promise<void>; 
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.value = this.defaultValue;
+    }
+}
+
+ReFormerBoolean.defineComponent();
+
+export { ReFormerBoolean };

package/src/components/rws/reformer/fields/boolean/styles/layout.scss

@@ -0,0 +1,5 @@
+@import "@rws-mixins";
+
+.re-former-boolean-input {
+    display: flex;
+}

package/src/components/rws/reformer/fields/boolean/template.html

@@ -0,0 +1,6 @@
+<sl-switch     
+    name="${ x => x.name}"
+    id="re-former-field-${x => x.name}" 
+    :value="${x => x.value}"     
+    @change="${(x,c) => x.setForm(x.name, c.event.target)}"
+></sl-switch>

package/src/components/rws/reformer/fields/date/component.ts

@@ -0,0 +1,20 @@
+import RWSViewComponent from '../../../../_component';
+import { RWSView} from '../../../../_decorator';
+import { attr, observable } from '@microsoft/fast-element';
+
+@RWSView('reformer-date')
+class ReFormerDate extends RWSViewComponent {
+    @attr name: string;
+    @observable defaultValue: Date = null;
+    @observable value: Date = null;
+    @observable setForm: (field: string, value: any) => Promise<void>; 
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.value = this.defaultValue;
+    }
+}
+
+ReFormerDate.defineComponent();
+
+export { ReFormerDate };

package/src/components/rws/reformer/fields/date/styles/layout.scss

@@ -0,0 +1,5 @@
+@import "@rws-mixins";
+
+.re-former-date-input {
+    display: flex;
+}

package/src/components/rws/reformer/fields/date/template.html

@@ -0,0 +1,7 @@
+<sl-input 
+    type="date" 
+    name="${ x => x.name}"
+    id="re-former-field-${x => x.name}" 
+    :value="${x => x.value}"     
+    @change="${(x,c) => x.setForm(x.name, c.event.target)}"
+></sl-input>

package/src/components/rws/reformer/fields/number/component.ts

@@ -0,0 +1,20 @@
+import RWSViewComponent from '../../../../_component';
+import { RWSView} from '../../../../_decorator';
+import { attr, observable } from '@microsoft/fast-element';
+
+@RWSView('reformer-number')
+class ReFormerNumber extends RWSViewComponent {
+    @attr name: string;
+    @observable defaultValue: number = null;
+    @observable value: number = null;
+    @observable setForm: (field: string, value: any) => Promise<void>;    
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.value = this.defaultValue;
+    }
+}
+
+ReFormerNumber.defineComponent();
+
+export { ReFormerNumber };

package/src/components/rws/reformer/fields/number/styles/layout.scss

@@ -0,0 +1,5 @@
+@import "@rws-mixins";
+
+.re-former-number-input {
+    display: flex;
+}

package/src/components/rws/reformer/fields/number/template.html

@@ -0,0 +1,7 @@
+<sl-input 
+    type="number" 
+    name="${ x => x.name}"
+    id="re-former-field-${x => x.name}" 
+    :value="${x => x.value}"     
+    @change="${(x,c) => x.setForm(x.name, c.event.target)}"
+></sl-input>

package/src/components/rws/reformer/fields/text/component.ts

@@ -1,8 +1,19 @@
+import { attr, observable } from '@microsoft/fast-element';
+import RWSViewComponent from '../../../../_component';
 import { RWSView} from '../../../../_decorator';
-import { ReFormerFieldComponent } from '../_field';
 
 @RWSView('reformer-text')
-class ReFormerText extends ReFormerFieldComponent {}
+class ReFormerText extends RWSViewComponent {
+    @attr name: string;
+    @observable defaultValue: string = null;
+    @observable value: string = null;
+    @observable setForm: (field: string, value: any) => Promise<void>;
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.value = this.defaultValue;
+    }
+}
 
 ReFormerText.defineComponent();
 

package/src/components/rws/reformer/fields/text/template.html

@@ -1,7 +1,7 @@
 <sl-input 
     type="text" 
     name="${ x => x.name}"
-    id="re-former-field-${x.name}" 
-    value="${x => x.defaultValue}"     
-    @change="${(x,c) => x.changeField(x.name, c.event.target)}"
+    id="re-former-field-${x => x.name}" 
+    :value="${x => x.value}"     
+    @sl-change="${(x,c) => x.setForm(x.name, c.event.target)}"
 ></sl-input>

package/src/components/rws/reformer/styles/layout.scss

@@ -2,4 +2,15 @@
 
 .re-former-container {
     display: flex;
+    flex-direction: column;
+
+    .form-field {
+        max-width: 30%;
+        margin-bottom: 15px;
+
+        label {
+            font-weight: bold;
+            text-transform: capitalize;
+        }
+    }
 }

package/src/components/rws/reformer/template.html

@@ -1,7 +1,19 @@
-<div class="re-former-container">
-    ${T.repeat(x => x.modelTypes.data.types, T.html`<div class="form-field">
+<form class="re-former-container">
+    ${T.repeat(x => x.formFields, T.html`<div class="form-field">
+        <label for="re-former-field-${x => x.fieldName}">${ (x, c) => c.parent.paintLabel(x.fieldName)}</label>
         ${T.when(x => x.type === 'String', T.html`
-            <re-former-text :setForm="${x => x.setForm.bind(x)}" name="${x => x.fieldName}"></re-former-text>
+            <reformer-text class="reformer-field-input" :value="${ (x, c) => !!c.parent.payload[x.fieldName] ? c.parent.payload[x.fieldName] : null}" :setForm="${(x, c) => c.parent.setForm}" name="${x => x.fieldName}"></re-former-text>
         `)}
-    </div>`)}    
-</div>
+        ${T.when(x => x.type === 'Date', T.html`
+            <reformer-date class="reformer-field-input" :value="${ (x, c) => !!c.parent.payload[x.fieldName] ? c.parent.payload[x.fieldName] : null}" :setForm="${(x, c) => c.parent.setForm}" name="${x => x.fieldName}"></re-former-date>
+        `)}
+        ${T.when(x => x.type === 'Number', T.html`
+            <reformer-number class="reformer-field-input" :value="${ (x, c) => !!c.parent.payload[x.fieldName] ? c.parent.payload[x.fieldName] : null}" :setForm="${(x, c) => c.parent.setForm}" name="${x => x.fieldName}"></re-former-number>
+        `)}
+        ${T.when(x => x.type === 'Boolean', T.html`
+            <reformer-boolean class="reformer-field-input" :value="${ (x, c) => !!c.parent.payload[x.fieldName] ? c.parent.payload[x.fieldName] : null}" :setForm="${(x, c) => c.parent.setForm}" name="${x => x.fieldName}"></re-former-boolean>
+        `)}
+    </div>`)}   
+    
+    <sl-button @click="${ (x, c) => x.sendForm() }" variant="primary" >Save</sl-button>
+</div>

package/src/components/rws/reformer/types/IReFormerTypes.ts

@@ -0,0 +1,5 @@
+import { IKDBTypeInfo } from "../../../../types/IBackendCore";
+
+export type IReFormerOrder = IKDBTypeInfo[] | IReFormerOrder[];
+
+export type IReFormerMassOrdering = IReFormerOrder[];

package/src/components/rws/rws-api-resource/component.ts

@@ -1,4 +1,4 @@
-import { IKDBTypeInfo, IKDBTypesResponse } from '../../../types/IBackendCore';
+import { IKDBTypesResponse } from '../../../types/IBackendCore';
 import { observable, attr } from '@microsoft/fast-element';
 import { RWSView } from '../../_decorator';
 import { RWSViewComponent } from '../../_component';
@@ -15,38 +15,36 @@ RWSResourceFormComponent;
 class RWSApiResource extends RWSViewComponent {    
     @attr resource: string; 
     @attr resourceLabel: string = null;
-     
+
+    @attr createEntryLabel = 'Create entry';
+    @attr listEntryLabel = 'Entries list';
+
+    @attr createEnabled = 'true'; 
     @attr emptyLabel: string = 'No records';
 
     @observable dbModelData: IKDBTypesResponse = null;
-    @observable resourceList: any[] = [];
-    @observable columns: IFlexTableColumn[] = [];
 
+    @observable viewType: 'list' | 'form' = 'list';
+    
     @observable fields: string[] = [];
     @observable extraFormatters: {[header_key: string] : IExtraColumnFormatter} = {};  
     @observable headerTranslations: {[header_key: string] : string} = {};  
 
-    @observable actions: ActionType[] = []; 
+    @observable listActions: ActionType[] = []; 
+
+    @observable back: (resource: any) => Promise<void> = async (resource: any) => {
+        this.viewType = 'list';
+    };
 
     async connectedCallback(): Promise<void> 
     {
         super.connectedCallback();
+        this.dbModelData = await this.apiService.getResource(this.resource);          
+    }
 
-        this.dbModelData = await this.apiService.getResource(this.resource);  
-        this.resourceList = await this.apiService.back.get(`${this.resource}:list`);
-
-        const makeColumns: IFlexTableColumn[] = [];
-
-        for(const key in Object.keys(this.dbModelData.data.types)){
-            const responseObject: IKDBTypeInfo = this.dbModelData.data.types[key];
-
-            makeColumns.push({
-                key: responseObject.fieldName,
-                header: responseObject.fieldName,                
-            });
-        }
-
-        this.columns = makeColumns;
+    toggleForm()
+    {
+        this.viewType = this.viewType === 'form' ? 'list' : 'form';
     }
 }
 

package/src/components/rws/rws-api-resource/styles/layout.scss

@@ -1,5 +1,7 @@
 @import "@rws-mixins";
 
 .rws-api-container {
-    
+    .rws-api-controls{
+        margin-bottom: 15px;
+    }    
 }

package/src/components/rws/rws-api-resource/template.html

@@ -1,13 +1,29 @@
 <div class="rws-api-container">
     ${T.when(x => x.resourceLabel, T.html`<h3>${x => x.resourceLabel}</h3>`)}
-    ${x => console.log(x.columns)}
-    ${T.when(x => x.columns.length, T.html`<rws-table 
-        emptyLabel="${x => x.emptyLabel}"
-        :columns="${x => x.columns}" 
-        :data="${x => x.resourceList}" 
-        :fields="${x => x.fields}" 
-        :actions="${x => x.actions}" 
-        :extraFormatters="${x => x.extraFormatters}"
-        :headerTranslations="${x => x.headerTranslations}">
-    </rws-table>`)}
+
+    <div class="rws-api-controls">
+        ${T.when(x => x.createEnabled === 'true', T.html`<sl-button @click="${ (x, c) => x.toggleForm() }" variant="secondary" >
+            ${T.when(x => x.viewType === 'list', T.html`<span>${ x => x.createEntryLabel }</span>`)}
+            ${T.when(x => x.viewType === 'form', T.html`<span>${ x => x.listEntryLabel }</span>`)}
+        </sl-button>`)}  
+    </div>
+
+    <div class="rws-api-content">
+        ${T.when(x => x.dbModelData && x.viewType === 'list', T.html`<rws-resource-list 
+            resource="${x => x.resource}"
+            emptyLabel="${x => x.emptyLabel}"
+            :dbModelData="${x => x.dbModelData}"                
+            :fields="${x => x.fields}"
+            :actions="${x => x.listActions}" 
+            :extraFormatters="${x => x.extraFormatters}"
+            :headerTranslations="${x => x.headerTranslations}"
+            >
+        </rws-resource-list>`)}
+
+        ${T.when(x => x.viewType === 'form', T.html`<rws-resource-form
+            resource="${x => x.resource}"
+            :dbModelData="${x => x.dbModelData}"
+            :back="${x => x.back}"
+        ></rws-resource-form> `)}
+    </div>
 </div>

package/src/components/rws/rws-api-resource/variants/form/component.ts

@@ -1,9 +1,37 @@
+import { attr, observable } from '@microsoft/fast-element';
+import { IKDBTypesResponse } from '../../../../../types/IBackendCore';
 import { RWSViewComponent} from '../../../../_component';
 import { RWSView} from '../../../../_decorator';
+import { IReFormerMassOrdering } from '../../../reformer/types/IReFormerTypes';
 
 
 @RWSView('rws-resource-form')
 class RWSResourceFormComponent extends RWSViewComponent {
+    @attr resource: string;             
+    
+    @observable dbModelData: IKDBTypesResponse = null;
+    @observable formOrdering: IReFormerMassOrdering = [];
+    @observable back: (resource: any) => Promise<void>;
+
+    connectedCallback(): void 
+    {
+        super.connectedCallback();
+        this.createOrdering();
+    }
+
+    setForm()
+    {
+
+    }
+
+    createOrdering()
+    {
+        for(const type of this.dbModelData.data.types){
+            this.formOrdering.push(type as unknown as IReFormerMassOrdering);
+        }
+
+        console.log('ordering', this.formOrdering);
+    }
 }
 
 RWSResourceFormComponent.defineComponent();

package/src/components/rws/rws-api-resource/variants/form/template.html

@@ -1,3 +1,3 @@
 <div id="resource-form">
-
+    <rws-reformer :modelTypes="${ x => x.dbModelData}" resource="${x => x.resource}" :afterForm="${x => x.back}"></rws-reformer>
 </div>

package/src/components/rws/rws-api-resource/variants/list/component.ts

@@ -1,9 +1,42 @@
 import { RWSViewComponent} from '../../../../_component';
 import { RWSView} from '../../../../_decorator';
-
+import { observable, attr } from '@microsoft/fast-element';
+import { ActionType, IExtraColumnFormatter, IFlexTableColumn } from '../../../rws-table/component';
+import { IKDBTypeInfo, IKDBTypesResponse } from '../../../../../types/IBackendCore';
 
 @RWSView('rws-resource-list')
 class RWSResourceListComponent extends RWSViewComponent {
+    @attr resource: string;         
+    @attr emptyLabel: string = 'No records';
+
+    @observable dbModelData: IKDBTypesResponse = null;
+    @observable resourceList: any[] = [];
+    @observable columns: IFlexTableColumn[] = [];
+
+    @observable fields: string[] = [];
+    @observable extraFormatters: {[header_key: string] : IExtraColumnFormatter} = {};  
+    @observable headerTranslations: {[header_key: string] : string} = {};  
+
+    @observable actions: ActionType[] = []; 
+
+    async connectedCallback() 
+    {
+        super.connectedCallback();
+        const makeColumns: IFlexTableColumn[] = [];
+
+        for(const key in Object.keys(this.dbModelData.data.types)){
+            const responseObject: IKDBTypeInfo = this.dbModelData.data.types[key];
+
+            makeColumns.push({
+                key: responseObject.fieldName,
+                header: responseObject.fieldName,                
+            });
+        }
+
+        this.columns = makeColumns;
+
+        this.resourceList = await this.apiService.back.get(`${this.resource}:list`);
+    }
 }
 
 RWSResourceListComponent.defineComponent();

package/src/components/rws/rws-api-resource/variants/list/template.html

@@ -1,3 +1,11 @@
-<div id="resource-list">
-
-</div>
+<div class="resource-list">
+    ${T.when(x => x.columns.length, T.html`<rws-table 
+        emptyLabel="${x => x.emptyLabel}"
+        :columns="${x => x.columns}" 
+        :data="${x => x.resourceList}" 
+        :fields="${x => x.fields}" 
+        :actions="${x => x.actions}" 
+        :extraFormatters="${x => x.extraFormatters}"
+        :headerTranslations="${x => x.headerTranslations}">
+    </rws-table>`)}
+</div>

package/src/components/rws/reformer/fields/_field.ts

@@ -1,14 +0,0 @@
-import { observable, attr } from "@microsoft/fast-element";
-import RWSViewComponent from "../../../_component";
-import { IReFormerField } from "../../../../types/IReFormerField";
-
-export abstract class ReFormerFieldComponent extends RWSViewComponent implements IReFormerField  {
-    @attr name: string;
-    @observable defaultValue: any;
-    @observable setForm: (field: string, value: any) => Promise<void>;
-
-    changeField(key: string, value: any)
-    {        
-        this.setForm(key, value);
-    }
-}