feat: component passed

TRIPTYK · Jan 8, 2025 · 5efc732 · 5efc732
1 parent 506d97e
commit 5efc732
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 49 deletions.
diff --git a/doc-app/app/controllers/docs/ember-ui/prefabs/table-generic.ts b/doc-app/app/controllers/docs/ember-ui/prefabs/table-generic.ts
@@ -26,7 +26,6 @@ export default class DocsTpkTableGenericPrefabController extends Controller {
     field: 'email',
     headerName: 'Email',
     sortable: false,
-    component : 'tpkinput',
     }],
     actionMenu: [{
       icon: 'edit',

diff --git a/doc-app/app/templates/docs/ember-ui/prefabs/composants/tpk-input.gts b/doc-app/app/templates/docs/ember-ui/prefabs/composants/tpk-input.gts
diff --git a/doc-app/app/templates/docs/ember-ui/prefabs/table-generic.md b/doc-app/app/templates/docs/ember-ui/prefabs/table-generic.md
@@ -3,7 +3,7 @@
 the generic table is a component which is created from an object.
 It is also possible to pass components to the desired column.
 
-Basic usage:
+# Basic usage:
 
 <DocsDemo as |demo|>
   <demo.example @name="tpk-table-generic-prefab.hbs">  
@@ -17,21 +17,85 @@ Basic usage:
 
 - `@tableParams`: The field name in the changeset for validation.
 
-Advanced usage:
 
-<DocsDemo as |demo|>
-  <demo.example @name="tpk-table-generic-prefab.hbs">  
-    <Prefabs::TpkTableGenericPrefab 
-      @tableParams={{this.tableParams}}
-      @columnsComponent={{hash
-              tpkinput=(component
-                TpkInput
-                  value=this.value
-                  onChange=this.onChange
-              )
-      }}
-    />
-  </demo.example>
-  <demo.snippet @name="tpk-table-generic-prefab.hbs"/>
-  <demo.snippet @name="tpk-table-generic-prefab.js"/>
-</DocsDemo>
+
+# Advanced Usage:
+!!! Ember doc cannotdisplay example with code snippet
+
+```ts
+//exemple on gts file
+export interface TableRouteComponentSignature {}
+
+export class TableRouteComponent extends Component<TableRouteComponentSignature> {
+  emailOptions = ['info@triptyk.eu','loempia@triptyk.eu'];
+
+  tableParamsWithFunctions: TableParams = {
+    entity: 'user',
+    pageSizes: [10,30,50,75],
+    defaultSortColumn: 'firstName',
+    columns:[
+      {
+        field: 'firstName',
+        headerName: 'Prénom',
+        sortable: true,
+      },
+      {
+        field: 'email',
+        headerName: 'Email',
+        sortable:false,
+        component : 'selectEmail', //component name
+      },
+    ],
+    actionMenu: [],
+  };
+
+  onUpdate = (selection: unknown, row: UserModel) => {
+    row.set('email', selection as string);
+    console.log(selection);
+    console.log(row);
+  }
+
+  <template>
+    <div class="flex justify-center items-center h-screen px-32">
+      <TpkTableGenericPrefab
+        @tableParams={{this.tableParamsWithFunctions}}
+        @columnsComponent={{hash
+          selectEmail=(component
+            SelectTableRegister
+              label="Email"
+              options=this.emailOptions
+              onUpdate=this.onUpdate
+          )
+        }} 
+      />
+    </div>
+  </template>
+}
+
+//exemple on component file to pass to the column
+class SelectTableRegister extends Component<TpkSelectSignature & {
+    Args: {
+      cellValue: string,
+      onUpdate: (selection: unknown, row: UserModel) => void,
+      row: UserModel
+    }
+}> {
+
+  onChange = (selection: unknown) => {
+    this.args.onUpdate(selection, this.args.row);
+  }
+
+  <template>
+    <div data-test-table-generic-select>
+    <TpkSelectComponent  @options={{@options}} @onChange={{this.onChange}} @selected={{@cellValue}} @label="" as |S| >
+      <S.Option as |O|>
+        {{O.option}}
+      </S.Option>
+    </TpkSelectComponent>
+    </div>
+  </template>;
+}
+```
+## Optional properties
+
+- `@columnsComponent:` The component that will be passed to the column of the table.
diff --git a/packages/ember-ui/src/components/prefabs/tpk-table-generic-prefab.gts b/packages/ember-ui/src/components/prefabs/tpk-table-generic-prefab.gts
@@ -118,6 +118,7 @@ export default class TableGenericPrefabComponent extends Component<TableGenericP
             {{#each this.columns as |column|}}
               <Body.Cell >
                 {{#if column.component}}
+                {{'Prout'}}
                   {{#let (this.getComponent column.component) as |ComponentName|}}
                     <ComponentName
                       @row={{element}}