-
Notifications
You must be signed in to change notification settings - Fork 132
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Patch - Méli-mélo: DataTable Utilities (#2438)
* Initial Commit of 2024-10-datatable-utilities * Adjustment to the jeckell html pages as the Javascript Didn't load * Update to the meta.md * Fix to toFrenchMoney Function failing under 'use strict' and Some fixes to the Sample HTML pages * Fix for French Totals coming back as NaN * Implemented wet-boew team Accesibility changes to sample pages + added css to replace <strong> on the Totals * 1.1.0 - Wet-Boew Fixes + French Translation of Examples Page * Fixed a Typo * Added the URL Column to the Raw Data * Updated Implementation Plan * Fixed typo in implementation Plan --------- Co-authored-by: Steve Bourgeois <[email protected]>
- Loading branch information
Showing
8 changed files
with
1,706 additions
and
0 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
méli-mélo/2024-10-datatable-utilities/css/wb-pspc-datatable-utility.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .wb-col-sum { | ||
| font-weight: bold; | ||
| } |
328 changes: 328 additions & 0 deletions
328
méli-mélo/2024-10-datatable-utilities/data/datatable-utility.json
Large diffs are not rendered by default.
Oops, something went wrong.
122 changes: 122 additions & 0 deletions
122
méli-mélo/2024-10-datatable-utilities/datatable-utilities-doc-en.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| --- | ||
| title: DataTable Utilities - Documentation | ||
| language: en | ||
| description: List of utilities to manipulate DataTables tables. | ||
| tag: DataTable | ||
| altLangPage: datatable-utilities-doc-fr.html | ||
| dateModified: 2024-11-01 | ||
| --- | ||
|
|
||
| <p>DataTable Utilities, includes Data Manipulation Classes for emails, Urls and Money. Also Includes Datatable Footer Totals.</p> | ||
| <p>Having this plugin intergrated will make the transition to Canada.ca easier as these features are already in use on https://www.tpsgc-pwgsc.gc.ca, currently some of the pages that make use of this plugin and other pages that make use of Other Javascripts are just pointed to from Canada.ca</p> | ||
| <p>The Public at Large, the plugin makes DataTables more user friendly with Clickable Links, and they are used to this functionality our PRE Canada.ca Pages.</p> | ||
|
|
||
| <h2>GCWeb implementation plan</h2> | ||
|
|
||
| {% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2024-10-datatable-utilities" | first %} | ||
|
|
||
| <ul> | ||
| {% for deliverable in implPlan.implementationPlan %} | ||
| <li>{{ deliverable.due }} - {{ deliverable.what }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Todo and for future consideration</p> | ||
| <ul> | ||
| {% for todo in implPlan.todos %} | ||
| <li>{{ todo }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Sponsor: PSPC - {{ implPlan.sponsor }}</p> | ||
|
|
||
| <div class="wb-prettify all-pre"></div> | ||
|
|
||
| <h2>Working examples</h2> | ||
| <ul> | ||
| <li><a href="index-en.html">DataTables utilities</a></li> | ||
| </ul> | ||
|
|
||
| <h2>Configuration options</h2> | ||
|
|
||
| <p>Enable the plugin for the targeted table by adding the CSS class <code>wb-tables-utility</code> to the table. Add the attribute <code>data-wb-tables-utility</code> to configure the options.</p> | ||
|
|
||
| <table class="table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Option</th> | ||
| <th>Description</th> | ||
| <th>How to configure</th> | ||
| <th>Values</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>debug</td> | ||
| <td>Print Debug messages to the console</td> | ||
| <td><code>data-wb-tables-utility="{&quot;debug&quot;:true}"</code></td> | ||
| <td> | ||
| <dl> | ||
| <dt>false (default)</dt> | ||
| <dd>Suppress Printing of debug messages.</dd> | ||
| <dt>true</dt> | ||
| <dd>Show debug messages to the console.</dd> | ||
| </dl> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>filteredsum</td> | ||
| <td>Column Totals to reflect Filtered DataTable Data</td> | ||
| <td><code>data-wb-tables-utility="{&quot;filteredsum&quot;:false}"</code></td> | ||
| <td> | ||
| <dl> | ||
| <dt>true (default):</dt> | ||
| <dd>As Data is Filtered adjust Totals to match filtered Data.</dd> | ||
| <dt>false:</dt> | ||
| <dd>Show Grand Total Regardless of data filtered.</dd> | ||
| </dl> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-sum</td> | ||
| <td>When this class is applied to a column, a column footer total is calculated</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-sum", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-sum | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-money</td> | ||
| <td>When this class is applied to a column, the data is manipulated to reflect currency with $</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-money", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-money | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-cur-thousand</td> | ||
| <td>When this class is applied to a column, the data is manipulated to reflect currency without $</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-cur-thousand", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-cur-thousand | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-mailto</td> | ||
| <td>When this class is applied to a column, the data is searched with an email partern, and when found are wrapped with <a href="mailto:...">...</a> to make it a clikcable link.</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-mailto", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-mailto | ||
| </td> | ||
| </tr> | ||
| <tr>(column-name, column-name-url) | ||
| <td>wb-col-url</td> | ||
| <td>When this class is applied to a column, dataTable Utilites looks for a second column with the same name as this column that is ending with -url | ||
| and the 2 are stiched into a single column wrapped with <a href="column-name-url">column-name</a> to make it a clikcable link.</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-url", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-url | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> |
121 changes: 121 additions & 0 deletions
121
méli-mélo/2024-10-datatable-utilities/datatable-utilities-doc-fr.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| --- | ||
| title: Utilitaires DataTables - Documentation | ||
| language: fr | ||
| description: Liste d'utilitaires permettant la modification de tableaux DataTables. | ||
| tag: DataTable | ||
| altLangPage: datatable-utilities-doc-fr.html | ||
| dateModified: 2024-11-01 | ||
| --- | ||
| <p>Les utilitaires de table de données incluent des classes de manipulation de données pour les courriels, les URL et l’argent. Ils comprennent également des totaux dans le pied de page de la table de données.</p> | ||
| <p>L'intégration de ce plugin facilitera la transition vers Canada.ca, car ces fonctionnalités sont déjà mises en œuvre sur https://www.tpsgc-pwgsc.gc.ca. Actuellement, certaines pages utilisant ce plugiciel, ainsi que d'autres pages qui utilisent différents JavaScripts, sont simplement liées directement de Canada.ca.</p> | ||
| <p>Pour le grand public, le plugiciel rend les tables de données plus conviviales en fournissant des liens cliquables, et les utilisateurs sont déjà habitués à cette fonctionnalité sur nos anciennes pages Canada.ca.</p> | ||
|
|
||
| <h2>Plan de mise en œuvre de GCWeb</h2> | ||
|
|
||
| {% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2024-10-datatable-utilities" | first %} | ||
|
|
||
| <ul> | ||
| {% for deliverable in implPlan.implementationPlanFR %} | ||
| <li>{{ deliverable.due }} - {{ deliverable.what }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Todo and for future consideration</p> | ||
| <ul> | ||
| {% for todo in implPlan.todosFR %} | ||
| <li>{{ todo }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| <p>Commanditaire : SPAC - {{ implPlan.sponsor }}</p> | ||
|
|
||
| <div class="wb-prettify all-pre"></div> | ||
|
|
||
| <h2>Exemples pratiques</h2> | ||
| <ul> | ||
| <li><a href="index-fr.html">Utilitaire DataTable</a></li> | ||
| </ul> | ||
|
|
||
| <h2>Options de configuration</h2> | ||
|
|
||
| <p>Activez le plugiciel pour le tableau ciblé en ajoutant la classe CSS <code>wb-tables-utility</code> au tableau. Ajoutez l'attribut <code>data-wb-tables-utility</code> pour configurer les options.</p> | ||
|
|
||
| <table class="table" lang="en"> | ||
| <thead> | ||
| <tr> | ||
| <th>Option</th> | ||
| <th>Description</th> | ||
| <th>How to configure</th> | ||
| <th>Values</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>debug</td> | ||
| <td>Print Debug messages to the console</td> | ||
| <td><code>data-wb-tables-utility="{&quot;debug&quot;:true}"</code></td> | ||
| <td> | ||
| <dl> | ||
| <dt>false (default)</dt> | ||
| <dd>Suppress Printing of debug messages.</dd> | ||
| <dt>true</dt> | ||
| <dd>Show debug messages to the console.</dd> | ||
| </dl> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>filteredsum</td> | ||
| <td>Column Totals to reflect Filtered DataTable Data</td> | ||
| <td><code>data-wb-tables-utility="{&quot;filteredsum&quot;:false}"</code></td> | ||
| <td> | ||
| <dl> | ||
| <dt>true (default):</dt> | ||
| <dd>As Data is Filtered adjust Totals to match filtered Data.</dd> | ||
| <dt>false:</dt> | ||
| <dd>Show Grand Total Regardless of data filtered.</dd> | ||
| </dl> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-sum</td> | ||
| <td>When this class is applied to a column, a column footer total is calculated</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-sum", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-sum | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-money</td> | ||
| <td>When this class is applied to a column, the data is manipulated to reflect currency with $</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-money", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-money | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-cur-thousand</td> | ||
| <td>When this class is applied to a column, the data is manipulated to reflect currency without $</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-cur-thousand", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-cur-thousand | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>wb-col-mailto</td> | ||
| <td>When this class is applied to a column, the data is searched with an email partern, and when found are wrapped with <a href="mailto:...">...</a> to make it a clikcable link.</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-mailto", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-mailto | ||
| </td> | ||
| </tr> | ||
| <tr>(column-name, column-name-url) | ||
| <td>wb-col-url</td> | ||
| <td>When this class is applied to a column, dataTable Utilites looks for a second column with the same name as this column that is ending with -url | ||
| and the 2 are stiched into a single column wrapped with <a href="column-name-url">column-name</a> to make it a clikcable link.</td> | ||
| <td><code>"columnDefs": [{ "className": "wb-col-url", "targets": [3]}]</code></td> | ||
| <td> | ||
| wb-col-url | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> |
Oops, something went wrong.