From 699de0482b3362964023d039f0bc10361f6a3360 Mon Sep 17 00:00:00 2001
From: David Stone <david@nnucomputerwhiz.com>
Date: Thu, 20 Apr 2023 15:29:08 -0600
Subject: [PATCH] Add preview to edit usage page closes
 https://github.com/superdav42/goodsalt2/issues/139

---
 Block/Adminhtml/Usage/Edit/Preview.php        | 12 +++
 Ui/Component/Form/Usage/UsageOptions.php      | 51 +++++++++++-
 .../templates/usage/edit/preview.phtml        | 10 +++
 view/adminhtml/web/js/components/preview.js   | 83 +++++++++++++++++++
 .../web/template/form/components/preview.html | 33 ++++++++
 5 files changed, 188 insertions(+), 1 deletion(-)
 create mode 100644 Block/Adminhtml/Usage/Edit/Preview.php
 create mode 100644 view/adminhtml/templates/usage/edit/preview.phtml
 create mode 100644 view/adminhtml/web/js/components/preview.js
 create mode 100644 view/adminhtml/web/template/form/components/preview.html

diff --git a/Block/Adminhtml/Usage/Edit/Preview.php b/Block/Adminhtml/Usage/Edit/Preview.php
new file mode 100644
index 0000000..56bd357
--- /dev/null
+++ b/Block/Adminhtml/Usage/Edit/Preview.php
@@ -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';
+
+
+}
diff --git a/Ui/Component/Form/Usage/UsageOptions.php b/Ui/Component/Form/Usage/UsageOptions.php
index 953d9be..1046f15 100644
--- a/Ui/Component/Form/Usage/UsageOptions.php
+++ b/Ui/Component/Form/Usage/UsageOptions.php
@@ -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;
@@ -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),
+
                     ]
                 ]
             ]
@@ -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
      *
@@ -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.'),
+//                            ],
+//                        ],
+//                    ],
+//                ],
             ],
         ];
     }
diff --git a/view/adminhtml/templates/usage/edit/preview.phtml b/view/adminhtml/templates/usage/edit/preview.phtml
new file mode 100644
index 0000000..e14200e
--- /dev/null
+++ b/view/adminhtml/templates/usage/edit/preview.phtml
@@ -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>
diff --git a/view/adminhtml/web/js/components/preview.js b/view/adminhtml/web/js/components/preview.js
new file mode 100644
index 0000000..8af91da
--- /dev/null
+++ b/view/adminhtml/web/js/components/preview.js
@@ -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;
+        }
+    });
+});
diff --git a/view/adminhtml/web/template/form/components/preview.html b/view/adminhtml/web/template/form/components/preview.html
new file mode 100644
index 0000000..8355e66
--- /dev/null
+++ b/view/adminhtml/web/template/form/components/preview.html
@@ -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>