@rws-framework/client 2.20.4 → 2.21.0

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

@@ -1,7 +0,0 @@
-<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,20 +0,0 @@
-import { attr, observable } from '@microsoft/fast-element';
-import RWSViewComponent from '../../../../_component';
-import { RWSView} from '../../../../_decorator';
-
-@RWSView('reformer-text')
-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();
-
-export { ReFormerText };

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

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

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

@@ -1,7 +0,0 @@
-<sl-input 
-    type="text" 
-    name="${ x => x.name}"
-    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

@@ -1,16 +0,0 @@
-@import "@rws-mixins";
-
-.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,19 +0,0 @@
-<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`
-            <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>
-        `)}
-        ${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

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

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

@@ -1,53 +0,0 @@
-import { IKDBTypesResponse } from '../../../types/IBackendCore';
-import { observable, attr } from '@microsoft/fast-element';
-import { RWSView } from '../../_decorator';
-import { RWSViewComponent } from '../../_component';
-import { RWSResourceListComponent } from './variants/list/component';
-import { RWSResourceFormComponent } from './variants/form/component';
-import { IRWSResourceQuery } from '../../../types/IRWSResource';
-import { ActionType, IExtraColumnFormatter, IFlexTableColumn } from '../rws-table/component';
-
-
-RWSResourceListComponent;
-RWSResourceFormComponent;
-
-@RWSView('rws-resource')
-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 viewType: 'list' | 'form' = 'list';
-    
-    @observable fields: string[] = [];
-    @observable extraFormatters: {[header_key: string] : IExtraColumnFormatter} = {};  
-    @observable headerTranslations: {[header_key: string] : string} = {};  
-
-    @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);          
-    }
-
-    toggleForm()
-    {
-        this.viewType = this.viewType === 'form' ? 'list' : 'form';
-    }
-}
-
-RWSApiResource.defineComponent();
-
-export { RWSApiResource };

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

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

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

@@ -1,29 +0,0 @@
-<div class="rws-api-container">
-    ${T.when(x => x.resourceLabel, T.html`<h3>${x => x.resourceLabel}</h3>`)}
-
-    <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,37 +0,0 @@
-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);
-        }
-    }
-}
-
-RWSResourceFormComponent.defineComponent();
-
-export { RWSResourceFormComponent };

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

@@ -1,3 +0,0 @@
-<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,44 +0,0 @@
-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();
-
-export { RWSResourceListComponent };

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

@@ -1,11 +0,0 @@
-<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/rws-modal/component.ts

@@ -1,20 +0,0 @@
-import { observable } from '@microsoft/fast-element';
-import { RWSViewComponent} from '../../_component';
-import { RWSView} from '../../_decorator';
-
-@RWSView('rws-modal')
-class RWSModal extends RWSViewComponent {      
-    @observable closeModal: () => void
-    @observable onShowModal: ($: ShadowRoot) => void
-
-    connectedCallback(): void {
-        super.connectedCallback(); 
-        if(this.onShowModal){
-            this.onShowModal(this.shadowRoot);
-        }       
-    }
-}
-
-RWSModal.defineComponent();
-
-export { RWSModal };

package/src/components/rws/rws-modal/styles/layout.scss

@@ -1,47 +0,0 @@
-@import "@rws-mixins";
-
-.backdrop {
-    position: fixed;    
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    background-color: rgba(0,0,0,0.8);
-    cursor: pointer;
-    z-index: 1001;
-}
-
-.rws-modal {
-    position: fixed;    
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    
-    .rws-modal-wrapper{
-        background: #FFF;
-        border-radius: 20px;
-        padding: 20px;
-        max-width: 70vw;
-        max-height: 80vh;
-        min-height: 40vh;
-        transform: translate(50%, 50%);
-        left: -15%;
-        margin-left: 30px;
-        color: #000;
-        position: relative;
-        z-index: 1002;
-        overflow-y: auto;
-        
-        @include customScrollbars();
-
-        .rws-modal-header{
-            display: flex;
-    
-            justify-content: end;
-        }
-    
-        .rws-modal-body{}
-    }   
-}

package/src/components/rws/rws-modal/template.html

@@ -1,11 +0,0 @@
-<div class="rws-modal">
-    <div @click="${ (x, c) => x.closeModal() }" class="backdrop"></div>
-    <div class="rws-modal-wrapper">
-      <div class="rws-modal-header">
-        <sl-button @click="${ (x, c) => x.closeModal() }" variant="secondary" >Close</sl-button>  
-      </div>
-      <div class="rws-modal-body">
-        <slot></slot>
-      </div>
-  </div>
-</div>

package/src/components/rws/rws-table/component.ts

@@ -1,85 +0,0 @@
-import { observable, attr } from '@microsoft/fast-element';
-import { RWSViewComponent} from '../../_component';
-import { RWSView} from '../../_decorator';
-
-export interface IFlexTableColumn {
-    key: string;
-    header: string;
-    formatter?: (value: any) => string;
-}
-
-export type IExtraColumnFormatter<T = unknown> = (inputType: T) => string;
-
-export type ActionType = {
-    key: string,
-    label: string,
-    variant: string,
-    handler: (id: string) => Promise<void>
-}
- 
-@RWSView('rws-table')
-class RWSTable extends RWSViewComponent {     
-    @attr emptyLabel: string = 'No records'; 
-    @observable columns: IFlexTableColumn[] = [];
-
-    @observable dataColumns: IFlexTableColumn[] = [];
-    @observable data: any[] = [];
-    @observable fields: string[] = [];
-
-    @observable actions: ActionType[] = [];
-
-    @observable extraFormatters: {[header_key: string] : IExtraColumnFormatter} = {};    
-    @observable headerTranslations: { [sourceKey: string]: string } = {};
-
-    connectedCallback(): void {
-        super.connectedCallback();
-
-        this.orderFields();
-    }
-
-    headerTranslationsChanged(oldValue: { [sourceKey: string]: string }, newValue: { [sourceKey: string]: string })
-    {
-        this.orderFields();
-    }
-
-    fieldsChanged(oldValue: string[], newValue: string[])
-    {
-        this.orderFields();
-    }
-    
-    columnsChanged(oldValue: IFlexTableColumn[], newValue: IFlexTableColumn[])
-    {        
-        this.orderFields();
-    }
-
-    orderFields(): void
-    {
-        if(this.columns  && this.fields && this.fields.length && this.columns.length){            
-            const orderedColumns: IFlexTableColumn[] = [];            
-
-            for(const fieldKey of this.fields){
-                const found = this.columns.find(item => item.key === fieldKey);
-
-                if(found){
-                    if(Object.keys(this.extraFormatters).includes(fieldKey)){
-                        found.formatter = this.extraFormatters[fieldKey];
-                    }
-
-                    if(this.headerTranslations && Object.keys(this.headerTranslations).includes(fieldKey)){
-                        found.header = this.headerTranslations[fieldKey];
-                    }
-
-                    orderedColumns.push(found);
-                }                
-            }                        
-
-            this.dataColumns = orderedColumns;            
-        }else{
-            this.dataColumns = this.columns;
-        }
-    }
-}
-
-RWSTable.defineComponent();
-
-export { RWSTable };

package/src/components/rws/rws-table/styles/layout.scss

@@ -1,73 +0,0 @@
-.flex-table {
-  width: 100%;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  overflow: hidden;
-  background: white;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-
-  .flex-table-row {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid #e2e8f0;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &.table-header {
-      background-color: #f8fafc;
-      font-weight: 600;
-      color: #475569;
-      text-transform: capitalize;
-    }
-
-    &.table-body {
-      &:hover {
-        background-color: #f1f5f9;
-      }
-    }
-    
-    &.flex-table-empty {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100px;
-      background-color: #f8fafc;
-    }
-  }
-
-  .flex-table-cell {
-    flex: 1;
-    padding: 12px 16px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-
-    sl-button {
-      margin: 0 4px;
-      
-      &:first-child {
-        margin-left: 0;
-      }
-      
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    // Add styles for the full-row cell
-    &.full-row {
-      flex: 1 1 100%;
-      text-align: center;
-      color: #64748b; // Slate-500 color
-      padding: 24px 16px;
-      
-      strong {
-        font-weight: 600;
-      }
-    }
-  }
-}
-

package/src/components/rws/rws-table/template.html

@@ -1,27 +0,0 @@
-<div class="flex-table">
-  <div class="flex-table-row table-header">
-    ${T.repeat(x => x.dataColumns, T.html`<div class="flex-table-cell">${x => x.header}</div>`)}
-    ${T.when(x => x.actions.length, T.html`<div class="flex-table-cell" data-field="_actions">Actions</div>`)}
-  </div>
-  
-  ${T.repeat((x, dataContext) => x.data,  T.html`<div class="flex-table-row table-body">
-          ${T.repeat((x, columnContext) => columnContext.parent.dataColumns, T.html`<div class="flex-table-cell" data-field="${x => x.key}">
-                  ${(column, ctx) => {                                            
-                      const value = ctx.parent[column.key];                                                    
-                      return column.formatter ? column.formatter(value) : value;
-                  }}                    
-              </div>
-          `)}
-          ${T.when((x,c) => c.parent.actions && c.parent.actions.length, T.html`<div class="flex-table-cell" data-field="_actions">
-            ${T.repeat((x, c) => c.parent.actions, T.html`
-              <sl-button @click="${ (x, c) => x.handler(c.parent.id) }" variant="${x => x.variant}" >${x => x.label}</sl-button>  
-            `)}                
-          </div>`)}
-      </div>
-  `)}
-
-  ${T.when(x => !x.data.length, T.html`<div class="flex-table-row flex-table-empty table-body">
-    <div class="flex-table-cell full-row"><strong>${ x => x.emptyLabel }</strong></div>
-  </div>`)}
-  
-</div>

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

@@ -1,86 +0,0 @@
-import { observable, attr } from '@microsoft/fast-element';
-import { RWSView } from '../../_decorator';
-import { RWSViewComponent } from '../../_component';
-
-@RWSView('rws-uploader')
-class RWSUploader extends RWSViewComponent {
-
-  @observable uploadProgress: number;
-
-  @observable uploadedFile: File;
-  @observable chosenFile: File;
-  @observable uploadParams: any;
-
-  @attr onFinish: (uploadResponse: any) => void;
-  @attr onStart: (chosenFile: File, context: any) => Promise<unknown> = async (chosenFile: File) => chosenFile;
-  @attr onProgress: (progress: number) => void = (progress: number) => null;
-
-
-  async onUploadStart(): Promise<void>
-  {    
-        if(!this.uploadProgress){
-            this.uploadProgress = 0;
-        }
-
-      const response = await this.onStart(this.chosenFile, this);
-   
-      if(response === null){
-          return;
-      }
-
-      this.onFinish(response);
-
-      this.uploadedFile = this.chosenFile;
-      this.chosenFile = null;    
-  }
-
-  onChoose(): void
-  {
-      const _self = this;
-      const fileInput = this.createFileInput();
-
-      this.triggerUpload(fileInput);
-
-      fileInput.addEventListener('change', () => {
-          _self.chosenFile = fileInput.files[0]; 
-          
-          _self.uploadedFile = null;
-
-          _self.removeFileInput(fileInput);      
-      });
-  }
-
-  removeFile(){
-      this.chosenFile = null;
-  }
-
-  private createFileInput(): HTMLInputElement
-  {
-      const fileInput: HTMLInputElement = document.createElement('input');
-      fileInput.type = 'file';
-      fileInput.style.display = 'none';
-
-
-      this.shadowRoot.appendChild(fileInput);
-      return fileInput;
-  }
-
-  private triggerUpload(fileInput: HTMLInputElement): void
-  {
-      fileInput.click();
-  }
-
-  private removeFileInput(fileInput: HTMLInputElement): void
-  {
-      this.shadowRoot.removeChild(fileInput);
-  }
-
-  uploadProgressChanged(oldV: any, newV: any)
-  {
-    
-  }
-}
-
-RWSUploader.defineComponent();
-
-export { RWSUploader };