Skip to content

Commit

Permalink
Add preview to edit usage page
Browse files Browse the repository at this point in the history
  • Loading branch information
superdav42 committed Apr 20, 2023
1 parent 2fdc7e6 commit 699de04
Show file tree
Hide file tree
Showing 5 changed files with 188 additions and 1 deletion.
12 changes: 12 additions & 0 deletions Block/Adminhtml/Usage/Edit/Preview.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?php

namespace DevStone\UsageCalculator\Block\Adminhtml\Usage\Edit;
use Magento\Backend\Block\Template;

class Preview extends Template
{

protected $_template = 'DevStone_UsageCalculator::usage/edit/preview.phtml';


}
51 changes: 50 additions & 1 deletion Ui/Component/Form/Usage/UsageOptions.php
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
use Magento\Framework\UrlInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Ui\Component\Container;
use Magento\Ui\Component\HtmlContent;
use Magento\Ui\Component\DynamicRows;
use Magento\Ui\Component\Form\Element\ActionDelete;
use Magento\Ui\Component\Form\Element\Checkbox;
Expand Down Expand Up @@ -217,9 +218,12 @@ protected function createCustomOptionsPanel()
],
],
'children' => [
'preview' => $this->getPreviewPane(5),
static::CONTAINER_HEADER_NAME => $this->getHeaderContainerConfig(10),

static::FIELD_ENABLE => $this->getEnableFieldConfig(20),
static::GRID_OPTIONS_NAME => $this->getOptionsGridConfig(30)
static::GRID_OPTIONS_NAME => $this->getOptionsGridConfig(30),

]
]
]
Expand All @@ -228,6 +232,37 @@ protected function createCustomOptionsPanel()
return $this;
}

protected function getPreviewPane($sortOrder)
{
return [
'arguments' => [
'data' => [
'config' => [
'label' => 'leel',
'formElement' => Container::NAME,
'componentType' => Container::NAME,

'component' => 'DevStone_UsageCalculator/js/components/preview',
'template' => 'DevStone_UsageCalculator/form/components/preview',
'sortOrder' => $sortOrder,
'content' => __('Preview.'),
],
],
],
// 'children' => [
// 'body' => [
// 'arguments' => [
// 'data' => [
// 'config' => [
//
// ]
// ]
// ]
// ]
// ]
];
}

/**
* Get config for header container
*
Expand Down Expand Up @@ -272,6 +307,20 @@ protected function getHeaderContainerConfig($sortOrder)
],
],
],
// 'preview' => [
// 'arguments' => [
// 'data' => [
// 'config' => [
// 'label' => 'leel',
// 'formElement' => Container::NAME,
// 'componentType' => Container::NAME,
// 'template' => 'ui/form/components/complex',
// 'sortOrder' => $sortOrder,
// 'content' => __('Preview.'),
// ],
// ],
// ],
// ],
],
];
}
Expand Down
10 changes: 10 additions & 0 deletions view/adminhtml/templates/usage/edit/preview.phtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?php
echo 'preview the usage ';
?>
<script>
var customOptionsContainer = jQuery('div[data-index=custom_options]')

customOptionsContainer.find('tr.data-row').each(function (elem) {

} );
</script>
83 changes: 83 additions & 0 deletions view/adminhtml/web/js/components/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

define([
'underscore',
'Magento_Ui/js/form/element/abstract',
'uiRegistry',
'ko'
], function (_, Abstract, registry, ko) {
'use strict';

return Abstract.extend({
defaults: {
listens: {
'${ $.provider }:data': 'dataChanged'
},
links: {
allData: '${ $.provider }:data'
}
},
calculatedPrice: ko.observable(),
calculatedSize: ko.observable(),

/**
* Invokes initialize method of parent class,
* contains initialization logic
*/
initialize: function () {
this._super();
this.selectedUsageOptions = [];
this.dataChanged(this.allData);
return this;
},

selectedUsageOptionsChanged: function(changed) {
var price = this.allData.price;
var size_id = this.allData.size_id;
for( var index in this.allData.usage.options ) {
if (this.allData.usage.options[index].type !== 'drop_down') {
continue
}
var selectedOption = this.selectedUsageOptions[index]()
if ( ! selectedOption ) {
this.calculatedPrice('');
return;
}
if ( ! selectedOption.price ) {
continue;
}
if ( selectedOption.size_id && selectedOption.size_id !== '0') {
size_id = selectedOption.size_id;
}
price *= parseFloat(selectedOption.price.replace(/,/g, '')) / 100;
}
var size = registry.get('index = size_id').indexedOptions[size_id].label;
this.calculatedSize(size);
this.calculatedPrice('$'+price.toFixed(2));
},

dataChanged: function( data ) {
if ( ! this.selectedUsageOptions || ! data.usage || ! data.usage.options ) {
return;
}
for( var i = this.selectedUsageOptions.length; i < data.usage.options.length; i++ ) {
var ob = ko.observable();
ob.subscribe(this.selectedUsageOptionsChanged.bind(this));
this.selectedUsageOptions.push(ob)
}
},

/**
* {@inheritdoc}
*/
initObservable: function () {
this._super()
.observe(['content']);

return this;
}
});
});
33 changes: 33 additions & 0 deletions view/adminhtml/web/template/form/components/preview.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@

<div class="admin__field-complex" style="margin: 0" css="$data.additionalClasses" attr="'data-index': index">

<div class="admin__field-complex-title" if="allData.price">
Preview
</div>
<div class="admin__field-complex-title" if="allData.price">
Base Price $<span text="allData.price"></span>
</div>

<div class=""
each="data: allData.usage.options, as: 'option'"
>
<div class="admin__field" style="margin:0" if="option.type === 'drop_down'">
<div class="admin__field-label" style="text-align: left">
<label>
<span text="option.title"></span>
</label>
</div>
<div class="admin__field-control">
<select class="admin__control-select" data-bind="options: option.values, optionsCaption:'-- Please Select --',value: $parent.selectedUsageOptions[$index()], optionsText: function(item) {return item.title + ' (price * ' + item.price + '%)'}">
</select>
</div>
</div>
</div>
<div class="admin__field-complex-title" if="calculatedPrice">
<br />
Calculated Price <span style="color:#DD6666;font-weight: bold;font-size:1.3em;" text="calculatedPrice"></span>
<br />
Calculated Size <span style="color:#726866;font-weight: bold;font-size:1.1em;" text="calculatedSize"></span>
</div>
<br />
</div>

0 comments on commit 699de04

Please sign in to comment.