Skip to content

Commit

Permalink
Merge branch 'main' into 8381-disable-switcher
Browse files Browse the repository at this point in the history
  • Loading branch information
yohannahbautista committed Apr 3, 2024
2 parents 2e16d74 + f87df83 commit 2d7e05d
Show file tree
Hide file tree
Showing 38 changed files with 545 additions and 1,352 deletions.
138 changes: 138 additions & 0 deletions app/views/components/cards/example-workspace-widgets.html
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,144 @@ <h2 class="widget-title">Title</h2>
</div>
</div>

<div class="widget bordered">
<div class="widget-header">
<h2 class="widget-title">Warehouse Demand Fulfillment</h2>
<button class="btn-actions" type="button">
<span class="audible">Actions</span>
<svg class="icon" focusable="false" aria-hidden="true" role="presentation">
<use href="#icon-more"></use>
</svg>
</button>
<ul class="popupmenu actions top">
<li><a href="#">Action One</a></li>
<li><a href="#">Action Two</a></li>
</ul>
</div>
<div class="widget-content">
<div id="wdf-content" class="row" style="display: block;">
<div class="twelve columns">
<div id="wdf-timeline" class="timeline">
<div id="warehouse-demand-created" class="timeline-block">
<div class="indicator-container">
<div id="warehouse-demand-created-indicator" class="indicator complete"></div>
</div>
<div class="content">
<div class="heading">Warehouse Demand Created</div>
<div id="created-document" class="sub-heading"> Document: 4214 </div>
</div>
<div class="date">
<svg focusable="false" aria-hidden="true" role="presentation" class="icon">
<use href="#icon-calendar"/>
</svg>
<span id="created-document-date">March 17, 2023</span>
</div>
</div>

<div id="demand-quantity-allocated" class="timeline-block">
<div class="indicator-container">
<div soho-tooltip="" id="demand-quantity-allocated-indicator" class="indicator has-tooltip complete"></div>
</div>
<div class="content">
<div class="heading">Demand Quantity Allocated</div>
</div>
<div class="date">
<svg focusable="false" aria-hidden="true" role="presentation" class="icon">
<use href="#icon-calendar"/>
</svg>
<span id="quantity-allocated-date">March 16, 2023</span>
</div>
</div>

<div id="ready-for-picking" class="timeline-block">
<div class="indicator-container">
<div id="ready-for-picking-indicator" class="indicator complete"></div>
</div>
<div class="content">
<div class="heading">Ready For Picking At Warehouse</div>
<div id="picking-location-and-document" class="sub-heading"> Warehouse Location: LOC3 <br> Shipment Document: 4214 </div>
</div>
</div>

<div id="picking-finished" class="timeline-block">
<div class="indicator-container">
<div soho-tooltip="" id="picking-finished-indicator" class="indicator has-tooltip complete"></div>
</div>
<div class="content">
<div class="heading">Picking Finished</div>
</div>
<div class="date">
<svg focusable="false" aria-hidden="true" role="presentation" class="icon">
<use href="#icon-calendar"/>
</svg>
<span id="picking-date">March 16, 2023</span>
</div>
</div>

<div id="ready-for-packing" class="timeline-block">
<div class="indicator-container">
<div id="ready-for-packing-indicator" class="indicator complete"></div>
</div>
<div class="content">
<div class="heading">Ready For Packing At Warehouse</div>
<div id="packing-location-and-document" class="sub-heading"> Warehouse Location: LOC3 <br> Shipment Document: 4214 </div>
</div>
</div>

<div id="packing-finished" class="timeline-block">
<div class="indicator-container">
<div soho-tooltip="" id="packing-finished-indicator" class="indicator has-tooltip complete"></div>
</div>
<div class="content">
<div class="heading">Packing Finished</div>
</div>
<div class="date">
<svg focusable="false" aria-hidden="true" role="presentation" class="icon">
<use href="#icon-calendar"/>
</svg>
<span id="packing-date">March 16, 2023</span>
</div>
</div>

<div id="ready-for-shipment" class="timeline-block">
<div class="indicator-container">
<div id="ready-for-shipment-indicator" class="indicator complete"></div>
</div>
<div class="content">
<div class="heading">Ready For Shipment</div>
</div>
</div>

<div id="shipment-releasing" class="timeline-block">
<div class="indicator-container">
<div id="shipment-releasing-indicator" class="indicator complete"></div>
</div>
<div class="content">
<div class="heading">Shipment Releasing</div>
</div>
</div>

<div id="shipped-from-warehouse" class="timeline-block last populated">
<div class="indicator-container">
<div soho-tooltip="" id="shipped-from-warehouse-indicator" class="indicator complete has-tooltip"></div>
</div>
<div class="content">
<div class="heading">Shipped From Warehouse</div>
<div id="ship-location-and-document" class="sub-heading ng-star-inserted"> Ship To Location: RLOC1 <br> Shipment Document: 4214 </div>
</div>
<div class="date">
<svg focusable="false" aria-hidden="true" role="presentation" class="icon">
<use href="#icon-calendar"/>
</svg>
<span id="shipped-date">March 16, 2023</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

Expand Down
104 changes: 104 additions & 0 deletions app/views/components/datagrid/test-flex-toolbar.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<div class="row top-padding">
<div class="twelve columns">
<div class="flex-toolbar">
<div class="toolbar-section title">
<h2>This is the Title</h2>
<span class="datagrid-result-count">(N Results)</span>
</div>
<div class="toolbar-section buttonset">
<!-- Insert IDS Buttons here -->
</div>
<div class="toolbar-section search">
<!-- Insert IDS Searchfield here -->
</div>
<div class="toolbar-section more">
<!-- Begin More Actions Button -->
<button class="btn-actions">
<svg
class="icon"
focusable="false"
aria-hidden="true"
role="presentation"
>
<use href="#icon-more"></use>
</svg>
<span class="audible">More Actions</span>
</button>
<ul class="popupmenu">
<li>
<a
data-option="personalize-columns"
href="#"
data-translate="text"
>PersonalizeColumns</a
>
</li>
<li>
<a data-option="reset-layout" href="#" data-translate="text"
>ResetDefault</a
>
</li>
<li class="separator"></li>
<li>
<a data-option="export-to-excel" href="#" data-translate="text"
>ExportToExcel</a
>
</li>
<li class="separator single-selectable-section"></li>
<li class="heading">Row Height</li>
<li class="is-selectable">
<a data-option="row-extra-small" href="#" data-translate="text"
>ExtraSmall</a
>
</li>
<li class="is-selectable">
<a data-option="row-small" href="#" data-translate="text"
>Small</a
>
</li>
<li class="is-selectable">
<a data-option="row-medium" href="#" data-translate="text"
>Medium</a
>
</li>
<li class="is-selectable is-checked">
<a data-option="row-large" href="#" data-translate="text"
>Large</a
>
</li>
</ul>
<!-- End More Actions Button -->
</div>
</div>
<div id="datagrid"></div>
</div>
</div>

<script id="datagrid-script">
$('body').one('initialized', function () {

var columns = [];

$.getJSON('{{basepath}}api/datagrid-sample-data', function(res) {

// Define Columns for the Grid.
columns.push({ id: 'productId', hideable: false, name: 'Id', field: 'productId', formatter: Soho.Formatters.Text, whiteSpace: 'pre-wrap' });
columns.push({ id: 'productName', name: 'Product Name', field: 'productName', formatter: Soho.Formatters.Hyperlink, click: function(e) { console.log('Click Fired') }, whiteSpace: 'pre-wrap' });
columns.push({ id: 'activity', name: 'Activity', field: 'activity'});
columns.push({ id: 'hidden', hidden: true, name: 'Hidden', field: 'hidden'});
columns.push({ id: 'price', align: 'right', name: 'Actual Price', field: 'price', formatter: Soho.Formatters.Decimal, numberFormat: {minimumFractionDigits: 0, maximumFractionDigits: 0, style: 'currency', currencySign: '$'}});
columns.push({ id: 'percent', align: 'right', name: 'Actual %', field: 'percent', formatter: Soho.Formatters.Decimal, numberFormat: {minimumFractionDigits: 0, maximumFractionDigits: 0, style: 'percent'}});
columns.push({ id: 'orderDate', name: 'Order Date', field: 'orderDate', formatter: Soho.Formatters.Date, dateFormat: 'M/d/yyyy'});
columns.push({ id: 'phone', name: 'Phone', field: 'phone', formatter: Soho.Formatters.Text});

// Init and get the api for the grid
$('#datagrid').datagrid({
columns: columns,
dataset: res,
saveColumns: false,
attributes: [{ name: 'id', value: 'custom-id' }, { name: 'data-automation-id', value: 'custom-automation-id' } ],
toolbar: {title: 'Compressors', results: true, actions: true, rowHeight: true, personalize: true}
});
});
});
</script>
146 changes: 146 additions & 0 deletions app/views/components/timeline/test-on-widget.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<div class="homepage page-container scrollable" data-init="false" id="maincontent" data-columns="3" role="main">
<div class="content">
<div class="widget bordered">
<div class="widget-header">
<h2 class="widget-title">Warehouse Demand Fulfillment</h2>
<button class="btn-actions" type="button">
<span class="audible">Actions</span>
<svg class="icon" focusable="false" aria-hidden="true" role="presentation">
<use href="#icon-more"></use>
</svg>
</button>
<ul class="popupmenu actions top">
<li><a href="#">Action One</a></li>
<li><a href="#">Action Two</a></li>
</ul>
</div>
<div class="widget-content">
<div id="wdf-content" class="row" style="display: block;">
<div class="twelve columns">
<div id="wdf-timeline" class="timeline">
<div id="warehouse-demand-created" class="timeline-block">
<div class="indicator-container">
<div id="warehouse-demand-created-indicator" class="indicator complete"></div>
</div>
<div class="content">
<div class="heading">Warehouse Demand Created</div>
<div id="created-document" class="sub-heading"> Document: 4214 </div>
</div>
<div class="date">
<svg focusable="false" aria-hidden="true" role="presentation" class="icon">
<use href="#icon-calendar"/>
</svg>
<span id="created-document-date">March 17, 2023</span>
</div>
</div>

<div id="demand-quantity-allocated" class="timeline-block">
<div class="indicator-container">
<div soho-tooltip="" id="demand-quantity-allocated-indicator" class="indicator has-tooltip complete"></div>
</div>
<div class="content">
<div class="heading">Demand Quantity Allocated</div>
</div>
<div class="date">
<svg focusable="false" aria-hidden="true" role="presentation" class="icon">
<use href="#icon-calendar"/>
</svg>
<span id="quantity-allocated-date">March 16, 2023</span>
</div>
</div>

<div id="ready-for-picking" class="timeline-block">
<div class="indicator-container">
<div id="ready-for-picking-indicator" class="indicator complete"></div>
</div>
<div class="content">
<div class="heading">Ready For Picking At Warehouse</div>
<div id="picking-location-and-document" class="sub-heading"> Warehouse Location: LOC3 <br> Shipment Document: 4214 </div>
</div>
</div>

<div id="picking-finished" class="timeline-block">
<div class="indicator-container">
<div soho-tooltip="" id="picking-finished-indicator" class="indicator has-tooltip complete"></div>
</div>
<div class="content">
<div class="heading">Picking Finished</div>
</div>
<div class="date">
<svg focusable="false" aria-hidden="true" role="presentation" class="icon">
<use href="#icon-calendar"/>
</svg>
<span id="picking-date">March 16, 2023</span>
</div>
</div>

<div id="ready-for-packing" class="timeline-block">
<div class="indicator-container">
<div id="ready-for-packing-indicator" class="indicator complete"></div>
</div>
<div class="content">
<div class="heading">Ready For Packing At Warehouse</div>
<div id="packing-location-and-document" class="sub-heading"> Warehouse Location: LOC3 <br> Shipment Document: 4214 </div>
</div>
</div>

<div id="packing-finished" class="timeline-block">
<div class="indicator-container">
<div soho-tooltip="" id="packing-finished-indicator" class="indicator has-tooltip complete"></div>
</div>
<div class="content">
<div class="heading">Packing Finished</div>
</div>
<div class="date">
<svg focusable="false" aria-hidden="true" role="presentation" class="icon">
<use href="#icon-calendar"/>
</svg>
<span id="packing-date">March 16, 2023</span>
</div>
</div>

<div id="ready-for-shipment" class="timeline-block">
<div class="indicator-container">
<div id="ready-for-shipment-indicator" class="indicator complete"></div>
</div>
<div class="content">
<div class="heading">Ready For Shipment</div>
</div>
</div>

<div id="shipment-releasing" class="timeline-block">
<div class="indicator-container">
<div id="shipment-releasing-indicator" class="indicator complete"></div>
</div>
<div class="content">
<div class="heading">Shipment Releasing</div>
</div>
</div>

<div id="shipped-from-warehouse" class="timeline-block last populated">
<div class="indicator-container">
<div soho-tooltip="" id="shipped-from-warehouse-indicator" class="indicator complete has-tooltip"></div>
</div>
<div class="content">
<div class="heading">Shipped From Warehouse</div>
<div id="ship-location-and-document" class="sub-heading ng-star-inserted"> Ship To Location: RLOC1 <br> Shipment Document: 4214 </div>
</div>
<div class="date">
<svg focusable="false" aria-hidden="true" role="presentation" class="icon">
<use href="#icon-calendar"/>
</svg>
<span id="shipped-date">March 16, 2023</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script>
$('.homepage').homepage();
</script>

Loading

0 comments on commit 2d7e05d

Please sign in to comment.