@rws-framework/client 2.18.17 → 2.19.0

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

@@ -1,85 +1,85 @@
-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();
-
+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 +1,73 @@
-.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;
-      }
-    }
-  }
-}
-
+.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 +1,27 @@
-<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 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/services/_api/backend.ts

@@ -1,87 +1,87 @@
-import { ApiServiceInstance, IBackendRoute, IHTTProute } from "../ApiService";
-import { ConfigServiceInstance } from "../ConfigService";
-
-export const backend = {
-    getBackendUrl(this: ApiServiceInstance, routeName: string, params: {[key: string]: string} = {}): string
-    {       
-        const config = this.config;
-        const routesPackage = config.get('backendRoutes');
-
-        let routes: IHTTProute[] = [];       
-
-        routesPackage.forEach((item: IBackendRoute) => {
-            // Check if item is an instance of IPrefixedHTTProutes
-            if ('prefix' in item && 'routes' in item && Array.isArray(item.routes)) {
-                // Handle the case where item is of type IPrefixedHTTProutes
-                if(item.exportAutoRoutes){
-                    item.routes = [...item.routes, 
-                        {
-                            name: `list`,
-                            path: '/',
-                            method: 'GET'
-                        },
-                        {
-                            name: `create`,
-                            path: '/',
-                            method: 'POST'
-                        },
-                        {
-                            name: `show`,
-                            path: '/:id',
-                            method: 'GET'
-                        },                      
-                        {
-                            name: `update`,
-                            path: '/:id',
-                            method: 'PUT'
-                        },
-                        {
-                            name: `delete`,
-                            path: '/:id',
-                            method: 'DELETE'
-                        },
-                    ];
-                }
-
-                routes = [...routes, ...item.routes.map((subRouteItem: IHTTProute): IHTTProute => {
-                    const subRoute: IHTTProute = {
-                        path: item.prefix + subRouteItem.path,
-                        name: backend.checkPrefixedRouteName(subRouteItem.name, item.controllerName),
-                        method: subRouteItem.method || 'GET'
-                    };
-            
-                    return subRoute;
-                })];
-
-            } else {
-                // Handle the case where item is of type IHTTProute
-                routes.push(item as IHTTProute);
-            }          
-        });        
-
-        const route = routes.find((item: IHTTProute) => item.name === routeName);        
-
-        if(!route){
-            throw new Error(`Backend route '${routeName}' does not exist.`);
-        }
-
-        let apiPath = route.path;
-
-        Object.keys(params).forEach((paramKey: string) => {
-            const paramValue = params[paramKey];
-
-            apiPath = apiPath.replace(`:${paramKey}`, paramValue);
-        });
-
-        return `${config.get('backendUrl')}${config.get('apiPrefix') || ''}${apiPath}`;
-    },
-    checkPrefixedRouteName(routeName: string, prefixName: string){
-        let finalRoute = routeName;
-
-        if(routeName.indexOf(prefixName) === -1){
-            finalRoute = `${prefixName}:${routeName}`;
-        }
-
-        return finalRoute;
-    }
+import { ApiServiceInstance, IBackendRoute, IHTTProute } from "../ApiService";
+import { ConfigServiceInstance } from "../ConfigService";
+
+export const backend = {
+    getBackendUrl(this: ApiServiceInstance, routeName: string, params: {[key: string]: string} = {}): string
+    {       
+        const config = this.config;
+        const routesPackage = config.get('backendRoutes');
+
+        let routes: IHTTProute[] = [];       
+
+        routesPackage.forEach((item: IBackendRoute) => {
+            // Check if item is an instance of IPrefixedHTTProutes
+            if ('prefix' in item && 'routes' in item && Array.isArray(item.routes)) {
+                // Handle the case where item is of type IPrefixedHTTProutes
+                if(item.exportAutoRoutes){
+                    item.routes = [...item.routes, 
+                        {
+                            name: `list`,
+                            path: '/',
+                            method: 'GET'
+                        },
+                        {
+                            name: `create`,
+                            path: '/',
+                            method: 'POST'
+                        },
+                        {
+                            name: `show`,
+                            path: '/:id',
+                            method: 'GET'
+                        },                      
+                        {
+                            name: `update`,
+                            path: '/:id',
+                            method: 'PUT'
+                        },
+                        {
+                            name: `delete`,
+                            path: '/:id',
+                            method: 'DELETE'
+                        },
+                    ];
+                }
+
+                routes = [...routes, ...item.routes.map((subRouteItem: IHTTProute): IHTTProute => {
+                    const subRoute: IHTTProute = {
+                        path: item.prefix + subRouteItem.path,
+                        name: backend.checkPrefixedRouteName(subRouteItem.name, item.controllerName),
+                        method: subRouteItem.method || 'GET'
+                    };
+            
+                    return subRoute;
+                })];
+
+            } else {
+                // Handle the case where item is of type IHTTProute
+                routes.push(item as IHTTProute);
+            }          
+        });        
+
+        const route = routes.find((item: IHTTProute) => item.name === routeName);        
+
+        if(!route){
+            throw new Error(`Backend route '${routeName}' does not exist.`);
+        }
+
+        let apiPath = route.path;
+
+        Object.keys(params).forEach((paramKey: string) => {
+            const paramValue = params[paramKey];
+
+            apiPath = apiPath.replace(`:${paramKey}`, paramValue);
+        });
+
+        return `${config.get('backendUrl')}${config.get('apiPrefix') || ''}${apiPath}`;
+    },
+    checkPrefixedRouteName(routeName: string, prefixName: string){
+        let finalRoute = routeName;
+
+        if(routeName.indexOf(prefixName) === -1){
+            finalRoute = `${prefixName}:${routeName}`;
+        }
+
+        return finalRoute;
+    }
 }