From aef66a7ed2bb3d1b49de12f092e467928ce74521 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=C5=BBu=C5=82awski?= <dzulawski@unit-soft.pl>
Date: Wed, 8 Sep 2021 11:21:36 +0200
Subject: [PATCH 1/2] ProductAttributes

---
 .../Views/Product/_ProductAttributes.cshtml   | 411 ++++++++----------
 .../Views/Shared/_AttributesQV.cshtml         |  10 +-
 .../wwwroot/theme/css/common/common.css       |  20 +
 .../wwwroot/theme/css/common/common.rtl.css   |  20 +
 src/Web/Grand.Web/wwwroot/theme/script/app.js |   8 +
 5 files changed, 243 insertions(+), 226 deletions(-)

diff --git a/src/Web/Grand.Web/Views/Product/_ProductAttributes.cshtml b/src/Web/Grand.Web/Views/Product/_ProductAttributes.cshtml
index 0b4aa0936..77bc2a5b9 100644
--- a/src/Web/Grand.Web/Views/Product/_ProductAttributes.cshtml
+++ b/src/Web/Grand.Web/Views/Product/_ProductAttributes.cshtml
@@ -45,8 +45,187 @@
         }
     }
     //render scripts
-    <script asp-location="Footer">
-                function @(attributeChangeHandlerFuncName)() {
+    <div id="product-attributes">
+        <template v-if="standardProductAttributes.ProductAttributes !== 'undefined'">
+            <div class="attributes">
+                <table class="table">
+                    <tr v-for="attribute in standardProductAttributes.ProductAttributes">
+                        <td :id="'product_attribute_label_' + attribute.Id">
+                            <span class="attribute-name">{{attribute.Name}}</span> <span v-if="attribute.IsRequired" class="required">*</span>
+                            <template v-if="attribute.TextPrompt !==null">
+                                <span class="text-prompt">{{attribute.TextPrompt}}</span>
+                            </template>
+                            <template v-if="attribute.Description !==null">
+                                <span v-html="attribute.Description" class="attribute-description"></span>
+                            </template>
+                        </td>
+                        <td :id="'product_attribute_input_' + attribute.Id">
+                            <template v-if="attribute.AttributeControlType==4">
+                                <label :for="'product_attribute_' + attribute.Id" class="sr-only">product_attribute_{{attribute.Id}}</label>
+                                <input :name="'product_attribute_' + attribute.Id" type="text" class="form-control textbox" :id="'product_attribute_' + attribute.Id" :value="attribute.DefaultValue" @@change="standardProductAttributes.attrchange" />
+                            </template>
+                            <template v-if="attribute.AttributeControlType==1">
+                                <label :for="'product_attribute_' + attribute.Id" class="sr-only">product_attribute_{{attribute.Id}}</label>
+                                <select :id="'product_attribute_' + attribute.Id" class="form-control custom-select" :name="'product_attribute_' + attribute.Id" @@change="standardProductAttributes.attrchange">
+                                    <template v-if="attribute.IsRequired==false">
+                                        <option value="">---</option>
+                                    </template>
+                                    <option v-for="attributeValue in attribute.Values" :selected="attributeValue.IsPreSelected" :value="attributeValue.Id" :data-disable="attributeValue.Id">
+                                        <template v-if="attributeValue.PriceAdjustment==null">
+                                            {{attributeValue.Name}}
+                                        </template>
+                                        <template v-else>
+                                            {{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]
+                                        </template>
+                                    </option>
+                                </select>
+                            </template>
+                            <template v-if="attribute.AttributeControlType==2">
+                                <ul class="option-list px-0 mb-0">
+                                    <li v-for="attributeValue in attribute.Values">
+                                        <fieldset>
+                                            <legend class="sr-only">product_attribute_{{attribute.Id}}</legend>
+                                            <label class="custom-control custom-radio">
+                                                <input class="custom-control-input"
+                                                       :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
+                                                       type="radio"
+                                                       :name="'product_attribute_' + attribute.Id"
+                                                       :value="attributeValue.Id"
+                                                       :checked="attributeValue.IsPreSelected"
+                                                       :data-disable="attributeValue.Id"
+                                                       @@change="standardProductAttributes.attrchange" />
+                                                <span class="custom-control-label"></span>
+                                                <span class="custom-control-description" :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id">
+                                                    <template v-if="attributeValue.PriceAdjustment==null">
+                                                        {{attributeValue.Name}}
+                                                    </template>
+                                                    <template v-else>
+                                                        {{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]
+                                                    </template>
+                                                </span>
+                                            </label>
+                                        </fieldset>
+                                    </li>
+                                </ul>
+                            </template>
+                            <template v-if="attribute.AttributeControlType==3 || attribute.AttributeControlType==50">
+                                <fieldset>
+                                    <legend></legend>
+                                    <ul class="option-list px-0 mb-0">
+                                        <li v-for="attributeValue in attribute.Values">
+                                            <label class="custom-control custom-checkbox">
+                                                <input v-if="attribute.AttributeControlType==50"
+                                                       class="custom-control-input"
+                                                       :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
+                                                       type="checkbox"
+                                                       :name="'product_attribute_' + attribute.Id"
+                                                       :value="attributeValue.Id"
+                                                       :checked="attributeValue.IsPreSelected"
+                                                       @@change="standardProductAttributes.attrchange"
+                                                       disabled="disabled" />
+                                                <input v-else
+                                                       class="custom-control-input"
+                                                       :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
+                                                       type="checkbox"
+                                                       :name="'product_attribute_' + attribute.Id"
+                                                       :value="attributeValue.Id"
+                                                       :checked="attributeValue.IsPreSelected"
+                                                       :data-disable="attributeValue.Id"
+                                                       @@change="standardProductAttributes.attrchange" />
+                                                <span class="custom-control-label"></span>
+                                                <span class="custom-control-description" :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id">
+                                                    <template v-if="attributeValue.PriceAdjustment==null">
+                                                        {{attributeValue.Name}}
+                                                    </template>
+                                                    <template v-else>
+                                                        {{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]
+                                                    </template>
+                                                </span>
+                                            </label>
+                                        </li>
+                                    </ul>
+                                </fieldset>
+                            </template>
+                            <template v-if="attribute.AttributeControlType==10">
+                                <textarea :id="'product_attribute_' + attribute.Id" :name="'product_attribute_' + attribute.Id">{{attribute.DefaultValue}}</textarea>
+                            </template>
+                            <template v-if="attribute.AttributeControlType==30">
+                                <template>
+                                    <div :id="'product_attribute_' + attribute.Id + 'uploader'">
+                                        <b-form-file :accept="attribute.AllowedFileExtensions"
+                                                     type="file"
+                                                     id="qqfile"
+                                                     name="qqfile"
+                                                     :data-url="'@fileLink/' + attribute.Id + '?productId=' + attribute.ProductId"
+                                                     @@change="vm.uploadFile($event.target)" />
+                                    </div>
+                                </template>
+                                <input class="hidden-upload-input"
+                                       type="hidden"
+                                       :id="'product_attribute_' + attribute.Id"
+                                       :name="'product_attribute_' + attribute.Id"
+                                       v-model="attribute.DefaultValue"
+                                       :value="attribute.DefaultValue" />
+                                <div id="download-message" class="alert my-2" style="display: none;"></div>
+                                <div :id="'product_attribute_' + attribute.Id + 'downloadurl'" class="download-file" style="display: none;"><a class="btn btn-outline-info"> Download </a></div>
+                            </template>
+                            <template v-if="attribute.AttributeControlType==40">
+                                <ul class="option-list color-squares w-100 d-inline-flex flex-wrap px-0 mb-0" :id="'color-squares-' + attribute.Id">
+                                    <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
+                                        <label :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
+                                            <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="standardProductAttributes.attrchange" />
+                                            <template v-if="attributeValue.PriceAdjustment==null">
+                                                <span class="color-container" :title="attributeValue.Name"> <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span> </span>
+                                            </template>
+                                            <template v-else>
+                                                <span class="color-container" :title="attributeValue.Name + ' [' + attributeValue.PriceAdjustment + ']'"> <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span> </span>
+                                            </template>
+                                        </label>
+                                    </li>
+                                </ul>
+                            </template>
+                            <template v-if="attribute.AttributeControlType==45">
+                                <ul class="option-list color-squares w-100 d-inline-flex flex-wrap px-0 mb-0" :id="'color-squares-' + attribute.Id">
+                                    <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
+                                        <label :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
+                                            <template v-if="attributeValue.PriceAdjustment==null">
+                                                <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="standardProductAttributes.attrchange" />
+                                                <span :id="'imgSqr_' + attributeValue.Id" class="color-container">
+                                                    <span class="color" :style="'background: url(' + attributeValue.ImageSquaresPictureModel.ImageUrl + ') 50% 50% no-repeat;'"></span>
+                                                </span>
+                                                <b-tooltip :target="'imgSqr_' + attributeValue.Id" placement="bottom">
+                                                    <div class="image-square-tooltip"><img :src="attributeValue.ImageSquaresPictureModel.FullSizeImageUrl" :alt="attributeValue.Name" /> <span>{{attributeValue.Name}}</span></div>
+                                                </b-tooltip>
+                                            </template>
+                                            <template v-else>
+                                                <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="standardProductAttributes.attrchange" />
+                                                <span class="color-container"> <span class="color" :style="'background: url(' + attributeValue.ImageSquaresPictureModel.ImageUrl + ') 50% 50% no-repeat;'"></span> </span>
+                                                <b-tooltip :target="'imgSqr_' + attributeValue.Id" placement="bottom">
+                                                    <div class="image-square-tooltip">
+                                                        <img :src="attributeValue.ImageSquaresPictureModel.FullSizeImageUrl" :alt="attributeValue.Name + ' [' + attributeValue.PriceAdjustment + ']'" />
+                                                        <span>{{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]</span>
+                                                    </div>
+                                                </b-tooltip>
+                                            </template>
+                                        </label>
+                                    </li>
+                                </ul>
+                            </template>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </template>
+    </div>
+    <script asp-location="Header">
+        var StandardProductAttributes = Vue.extend({
+            data: function () {
+                return {
+                    ProductAttributes: null
+                }
+            },
+            methods: {
+                attrchange: function @(attributeChangeHandlerFuncName)() {
                     var form = document.getElementById('product-details-form');
                     var data = new FormData(form);
                     axios({
@@ -54,7 +233,7 @@
                         data: data,
                         method: 'post',
                         params: { product: '@productId' },
-                    }).then(function (response, url) {
+                    }).then(function (response) {
                         if (response.data.price) {
                             document.querySelector('.price-value-@productId').innerText = response.data.price;
                         }
@@ -110,7 +289,6 @@
                                 }
                             }
                         }
-
                         var product = this.product;
                         setTimeout(function () {
                             if (response.data.pictureDefaultSizeUrl) {
@@ -120,226 +298,15 @@
                                 else {
                                     document.getElementById('main-product-img-@productId').setAttribute("src", response.data.pictureDefaultSizeUrl);
                                 }
-
                             }
                         }, 100);
                     });
-                }
-                function uploadFile(e) {
-                    var formData = new FormData();
-                    var imagefile = e;
-                    var url = imagefile.getAttribute('data-url');
-                    formData.append("image", qqfile.files[0]);
-                    axios.post(url, formData, {
-                        headers: {
-                            'Content-Type': 'multipart/form-data'
-                        }
-                    }).then(function (response) {
-                        if (response.data.success) {
-                            var message = response.data.message;
-                            var downloadGuid = response.data.downloadGuid;
-                            var downloadUrl = response.data.downloadUrl;
-                            var downloadBtn = document.querySelector('.download-file');
-                            var messageContainer = document.getElementById('download-message');
-
-                            e.setAttribute('qq-button-id', downloadGuid);
-                            document.querySelector('.hidden-upload-input').value = downloadGuid;
-
-                            messageContainer.style.display = "block";
-                            messageContainer.classList.remove('alert-danger');
-                            messageContainer.classList.add('alert-info');
-                            messageContainer.innerText = message;
-
-                            downloadBtn.style.display = "block";
-                            downloadBtn.children[0].setAttribute('href', downloadUrl);
-
-                        } else {
-                            var message = response.data.message;
-                            var messageContainer = document.getElementById('download-message');
-                            messageContainer.style.display = "block";
-                            messageContainer.classList.remove('alert-info');
-                            messageContainer.classList.add('alert-danger');
-                            messageContainer.innerText = message;
-                        }
-                    }).then(function () {
-                                @(attributeChangeHandlerFuncName)();
-                    });
-                }
-            document.addEventListener("DOMContentLoaded", function () {
-                var ProductAttributes = Vue.extend({
-                    template: `
-                        <div class="attributes">
-                            <table class="table">
-                                <tr v-for="attribute in productAttributes">
-                                    <td :id="'product_attribute_label_' + attribute.Id">
-                                        <span class="attribute-name">{{attribute.Name}}</span> <span v-if="attribute.IsRequired" class="required">*</span>
-                                        <template v-if="attribute.TextPrompt !==null"> <span class="text-prompt">{{attribute.TextPrompt}}</span> </template>
-                                        <template v-if="attribute.Description !==null"> <span v-html="attribute.Description" class="attribute-description"></span> </template>
-                                    </td>
-                                    <td :id="'product_attribute_input_' + attribute.Id">
-                                        <template v-if="attribute.AttributeControlType==4">
-                                            <label :for="'product_attribute_' + attribute.Id" class="sr-only">product_attribute_{{attribute.Id}}</label>
-                                            <input :name="'product_attribute_' + attribute.Id" type="text" class="form-control textbox" :id="'product_attribute_' + attribute.Id" :value="attribute.DefaultValue" />
-                                        </template>
-                                        <template v-if="attribute.AttributeControlType==1">
-                                            <label :for="'product_attribute_' + attribute.Id" class="sr-only">product_attribute_{{attribute.Id}}</label>
-                                            <select :id="'product_attribute_' + attribute.Id" class="form-control custom-select" :name="'product_attribute_' + attribute.Id">
-                                                <template v-if="attribute.IsRequired==false"> <option value="">---</option> </template>
-                                                <option v-for="attributeValue in attribute.Values" :selected="attributeValue.IsPreSelected" :value="attributeValue.Id" :data-disable="attributeValue.Id">
-                                                    <template v-if="attributeValue.PriceAdjustment==null">{{attributeValue.Name}}</template> <template v-else>{{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}] </template>
-                                                </option>
-                                            </select>
-                                        </template>
-                                        <template v-if="attribute.AttributeControlType==2">
-                                            <ul class="option-list px-0 mb-0">
-                                                <li v-for="attributeValue in attribute.Values">
-                                                    <fieldset>
-                                                        <legend class="sr-only">product_attribute_{{attribute.Id}}</legend>
-                                                        <label class="custom-control custom-radio">
-                                                            <input
-                                                                class="custom-control-input"
-                                                                :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
-                                                                type="radio"
-                                                                :name="'product_attribute_' + attribute.Id"
-                                                                :value="attributeValue.Id"
-                                                                :checked="attributeValue.IsPreSelected"
-                                                                :data-disable="attributeValue.Id"
-                                                            />
-                                                            <span class="custom-control-label"></span>
-                                                            <span class="custom-control-description" :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id">
-                                                                <template v-if="attributeValue.PriceAdjustment==null">{{attributeValue.Name}}</template> <template v-else>{{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}] </template>
-                                                            </span>
-                                                        </label>
-                                                    </fieldset>
-                                                </li>
-                                            </ul>
-                                        </template>
-                                        <template v-if="attribute.AttributeControlType==3 || attribute.AttributeControlType==50">
-                                            <fieldset>
-                                                <legend></legend>
-                                                <ul class="option-list px-0 mb-0">
-                                                    <li v-for="attributeValue in attribute.Values">
-                                                        <label class="custom-control custom-checkbox">
-                                                            <input
-                                                                v-if="attribute.AttributeControlType==50"
-                                                                class="custom-control-input"
-                                                                :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
-                                                                type="checkbox"
-                                                                :name="'product_attribute_' + attribute.Id"
-                                                                :value="attributeValue.Id"
-                                                                :checked="attributeValue.IsPreSelected"
-                                                                disabled="disabled"
-                                                            />
-                                                            <input
-                                                                v-else
-                                                                class="custom-control-input"
-                                                                :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
-                                                                type="checkbox"
-                                                                :name="'product_attribute_' + attribute.Id"
-                                                                :value="attributeValue.Id"
-                                                                :checked="attributeValue.IsPreSelected"
-                                                                :data-disable="attributeValue.Id"
-                                                            />
-                                                            <span class="custom-control-label"></span>
-                                                            <span class="custom-control-description" :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id">
-                                                                <template v-if="attributeValue.PriceAdjustment==null">{{attributeValue.Name}}</template> <template v-else>{{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}] </template>
-                                                            </span>
-                                                        </label>
-                                                    </li>
-                                                </ul>
-                                            </fieldset>
-                                        </template>
-                                        <template v-if="attribute.AttributeControlType==10"><textarea :id="'product_attribute_' + attribute.Id" :name="'product_attribute_' + attribute.Id">{{attribute.DefaultValue}}</textarea></template>
-                                        <template v-if="attribute.AttributeControlType==30">
-                                            <template>
-                                                <div :id="'product_attribute_' + attribute.Id + 'uploader'">
-                                                    <b-form-file
-                                                        :accept="attribute.AllowedFileExtensions"
-                                                        type="file"
-                                                        id="qqfile"
-                                                        name="qqfile"
-                                                        :data-url="'@fileLink/' + attribute.Id + '?productId=' + attribute.ProductId"
-                                                        onchange="uploadFile(this)"
-                                                    />
-                                                </div>
-                                            </template>
-                                            <input
-                                                class="hidden-upload-input"
-                                                type="hidden"
-                                                onchange="@(attributeChangeHandlerFuncName)()"
-                                                :id="'product_attribute_' + attribute.Id"
-                                                :name="'product_attribute_' + attribute.Id"
-                                                v-model="attribute.DefaultValue"
-                                                :value="attribute.DefaultValue"
-                                            />
-                                            <div id="download-message" class="alert my-2" style="display: none;"></div>
-                                            <div id="'product_attribute_' + attribute.Id + 'downloadurl'" class="download-file" style="display: none;"><a class="btn btn-outline-info"> Download </a></div>
-                                        </template>
-                                        <template v-if="attribute.AttributeControlType==40">
-                                            <ul class="option-list color-squares w-100 d-inline-flex flex-wrap px-0 mb-0" :id="'color-squares-' + attribute.Id">
-                                                <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
-                                                    <label :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
-                                                        <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" />
-                                                        <template v-if="attributeValue.PriceAdjustment==null">
-                                                            <span class="color-container" :title="attributeValue.Name"> <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span> </span>
-                                                        </template>
-                                                        <template v-else>
-                                                            <span class="color-container" :title="attributeValue.Name + ' [' + attributeValue.PriceAdjustment + ']'"> <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span> </span>
-                                                        </template>
-                                                    </label>
-                                                </li>
-                                            </ul>
-                                        </template>
-                                        <template v-if="attribute.AttributeControlType==45">
-                                            <ul class="option-list color-squares w-100 d-inline-flex flex-wrap px-0 mb-0" :id="'color-squares-' + attribute.Id">
-                                                <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
-                                                    <label :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
-                                                        <template v-if="attributeValue.PriceAdjustment==null">
-                                                            <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" />
-                                                            <span :id="'imgSqr_' + attributeValue.Id" class="color-container">
-                                                                <span class="color" :style="'background: url(' + attributeValue.ImageSquaresPictureModel.ImageUrl + ') 50% 50% no-repeat;'"></span>
-                                                            </span>
-                                                            <b-tooltip :target="'imgSqr_' + attributeValue.Id" placement="bottom">
-                                                                <div class="image-square-tooltip"><img :src="attributeValue.ImageSquaresPictureModel.FullSizeImageUrl" :alt="attributeValue.Name" /> <span>{{attributeValue.Name}}</span></div>
-                                                            </b-tooltip>
-                                                        </template>
-                                                        <template v-else>
-                                                            <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" />
-                                                            <span class="color-container"> <span class="color" :style="'background: url(' + attributeValue.ImageSquaresPictureModel.ImageUrl + ') 50% 50% no-repeat;'"></span> </span>
-                                                            <b-tooltip :target="'imgSqr_' + attributeValue.Id" placement="bottom">
-                                                                <div class="image-square-tooltip">
-                                                                    <img :src="attributeValue.ImageSquaresPictureModel.FullSizeImageUrl" :alt="attributeValue.Name + ' [' + attributeValue.PriceAdjustment + ']'" />
-                                                                    <span>{{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]</span>
-                                                                </div>
-                                                            </b-tooltip>
-                                                        </template>
-                                                    </label>
-                                                </li>
-                                            </ul>
-                                        </template>
-                                    </td>
-                                </tr>
-                            </table>
-                        </div>
-                    `,
-                    props: {
-                        productAttributes: null
-                    },
-                    methods: {
-                        initAttributes() {
-                            this.productAttributes = @Json.Serialize(Model);
-                        }
-                    },
-                    mounted() {
-                        this.initAttributes();
-                    },
-                    updated() {
-                            @(attributeChangeHandlerFuncName)();
-                            @Html.Raw(attributeChangeScriptsBuilder.ToString());
-                    }
-                })
-                new ProductAttributes().$mount('#product-attributes')
-
-            });
+                },
+            },
+            mounted() {
+                this.ProductAttributes = @Json.Serialize(Model);
+            }
+        });
+        var standardProductAttributes = new StandardProductAttributes().$mount('#product-attributes');
     </script>
 }
\ No newline at end of file
diff --git a/src/Web/Grand.Web/Views/Shared/_AttributesQV.cshtml b/src/Web/Grand.Web/Views/Shared/_AttributesQV.cshtml
index 3dfdd6440..32e2d78c1 100644
--- a/src/Web/Grand.Web/Views/Shared/_AttributesQV.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/_AttributesQV.cshtml
@@ -21,7 +21,7 @@
             <template v-if="attribute.IsRequired==false">
                 <option value="">---</option>
             </template>
-            <option v-for="attributeValue in attribute.Values" :selected="attributeValue.IsPreSelected" :value="attributeValue.Id">
+            <option v-for="attributeValue in attribute.Values" :selected="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" :value="attributeValue.Id">
                 <template v-if="attributeValue.PriceAdjustment==null">
                     {{attributeValue.Name}}
                 </template>
@@ -43,6 +43,7 @@
                                :name="'product_attribute_' + attribute.Id"
                                :value="attributeValue.Id"
                                :checked="attributeValue.IsPreSelected"
+                               :data-disable="attributeValue.Id"
                                @@change="vm.attrchange(attribute.ProductId, attribute.HasCondition, true)" />
                         <span class="custom-control-label"></span>
                         <span class="custom-control-description" :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id">
@@ -80,6 +81,7 @@
                                :name="'product_attribute_' + attribute.Id"
                                :value="attributeValue.Id"
                                :checked="attributeValue.IsPreSelected"
+                               :data-disable="attributeValue.Id"
                                @@change="vm.attrchange(attribute.ProductId, attribute.HasCondition, true)" />
                         <span class="custom-control-label"></span>
                         <span class="custom-control-description" :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id">
@@ -122,7 +124,7 @@
         <ul class="option-list color-squares w-100 d-inline-flex flex-wrap px-0 mb-0" :id="'color-squares-' + attribute.Id">
             <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
                 <label :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
-                    <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" @@change="vm.attrchange(attribute.ProductId, attribute.HasCondition, true)" />
+                    <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :data-disable="attributeValue.Id" :checked="attributeValue.IsPreSelected" @@change="vm.attrchange(attribute.ProductId, attribute.HasCondition, true)" />
                     <template v-if="attributeValue.PriceAdjustment==null">
                         <span class="color-container" :title="attributeValue.Name"> <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span> </span>
                     </template>
@@ -138,7 +140,7 @@
             <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
                 <label :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
                     <template v-if="attributeValue.PriceAdjustment==null">
-                        <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" @@change="vm.attrchange(attribute.ProductId, attribute.HasCondition, true)" />
+                        <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="vm.attrchange(attribute.ProductId, attribute.HasCondition, true)" />
                         <span :id="'imgSqr_' + attributeValue.Id" class="color-container">
                             <span class="color" :style="'background: url(' + attributeValue.ImageSquaresPictureModel.ImageUrl + ') 50% 50% no-repeat;'"></span>
                         </span>
@@ -147,7 +149,7 @@
                         </b-tooltip>
                     </template>
                     <template v-else>
-                        <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" @@change="vm.attrchange(attribute.ProductId, attribute.HasCondition, true)" />
+                        <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="vm.attrchange(attribute.ProductId, attribute.HasCondition, true)" />
                         <span class="color-container"> <span class="color" :style="'background: url(' + attributeValue.ImageSquaresPictureModel.ImageUrl + ') 50% 50% no-repeat;'"></span> </span>
                         <b-tooltip :target="'imgSqr_' + attributeValue.Id" placement="bottom">
                             <div class="image-square-tooltip">
diff --git a/src/Web/Grand.Web/wwwroot/theme/css/common/common.css b/src/Web/Grand.Web/wwwroot/theme/css/common/common.css
index cf680167f..d90272373 100644
--- a/src/Web/Grand.Web/wwwroot/theme/css/common/common.css
+++ b/src/Web/Grand.Web/wwwroot/theme/css/common/common.css
@@ -187,6 +187,9 @@ body:not(.modal-open) {
     background: #fff;
     transform: rotate(-45deg);
 }
+select option:disabled {
+    color: #aaa;
+} 
 
 /* sidebar common */
 
@@ -646,6 +649,23 @@ input:checked ~ .color-container .color::before {
     left: 5px;
     color: #efefef;
 }
+.color-squares .color-container {
+    position: relative;
+}
+.color-squares input:disabled + .color-container::after {
+    content: '';
+    position: absolute;
+    top: 10px;
+    left: -4px;
+    width: 32px;
+    height: 2px;
+    background: #dc3545;
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+}
+.color-squares input:disabled + .color-container .color {
+    opacity: .5;
+}
 
 /* search box */
 
diff --git a/src/Web/Grand.Web/wwwroot/theme/css/common/common.rtl.css b/src/Web/Grand.Web/wwwroot/theme/css/common/common.rtl.css
index ca8c23d12..27b223668 100644
--- a/src/Web/Grand.Web/wwwroot/theme/css/common/common.rtl.css
+++ b/src/Web/Grand.Web/wwwroot/theme/css/common/common.rtl.css
@@ -227,6 +227,9 @@ body:not(.modal-open) {
 .alert {
     text-align: right;
 }
+select option:disabled {
+    color: #aaa;
+}
 
 /* bootstrap slider */
 
@@ -732,6 +735,23 @@ input:checked ~ .color-container .color::before {
     left: 5px;
     color: #efefef;
 }
+.color-squares .color-container {
+    position: relative;
+}
+.color-squares input:disabled + .color-container::after {
+    content: '';
+    position: absolute;
+    top: 10px;
+    left: -4px;
+    width: 32px;
+    height: 2px;
+    background: #dc3545;
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+}
+.color-squares input:disabled + .color-container .color {
+    opacity: .5;
+}
 
 /* search box */
 
diff --git a/src/Web/Grand.Web/wwwroot/theme/script/app.js b/src/Web/Grand.Web/wwwroot/theme/script/app.js
index e2387d605..9e42c8dfd 100644
--- a/src/Web/Grand.Web/wwwroot/theme/script/app.js
+++ b/src/Web/Grand.Web/wwwroot/theme/script/app.js
@@ -197,6 +197,14 @@
                         document.querySelector('#product_attribute_input_' + response.data.disabledattributemappingids[i]).style.display = "none";
                     }
                 }
+                if (response.data.notAvailableAttributeMappingids) {
+                    document.querySelectorAll('[data-disable]').forEach((element) => element.disabled = false);
+                    for (var i = 0; i < response.data.notAvailableAttributeMappingids.length; i++) {
+                        if (document.querySelectorAll("[data-disable='" + response.data.notAvailableAttributeMappingids[i] + "']").length > 0) {
+                            document.querySelectorAll("[data-disable='" + response.data.notAvailableAttributeMappingids[i] + "']")[0].disabled = true;
+                        }
+                    }
+                }
                 if (response.data.pictureDefaultSizeUrl !== null) {
                     vm.PopupQuickViewVueModal.DefaultPictureModel.ImageUrl = response.data.pictureDefaultSizeUrl;
                 }

From a3555cb984d550b582af40f9a284133c8dd92450 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=C5=BBu=C5=82awski?= <dzulawski@unit-soft.pl>
Date: Wed, 8 Sep 2021 14:16:50 +0200
Subject: [PATCH 2/2] Table templates - minor changes

---
 .../Grand.Web/Views/Account/Auctions.cshtml   | 198 +++++++++---------
 .../Views/Account/DownloadableProducts.cshtml |  90 ++++----
 .../Views/Order/CustomerLoyaltyPoints.cshtml  |  78 +++----
 src/Web/Grand.Web/Views/Order/Details.cshtml  | 126 +++++++----
 4 files changed, 272 insertions(+), 220 deletions(-)

diff --git a/src/Web/Grand.Web/Views/Account/Auctions.cshtml b/src/Web/Grand.Web/Views/Account/Auctions.cshtml
index 790656ff1..537d3891c 100644
--- a/src/Web/Grand.Web/Views/Account/Auctions.cshtml
+++ b/src/Web/Grand.Web/Views/Account/Auctions.cshtml
@@ -20,58 +20,56 @@
                 <b-tab title="@Loc["Account.Auctions.Tab.Ongoing"]" active>
                     @if (Model.ProductBidList.Where(x => !x.Ended).Any())
                     {
-                        <div id="auction-table-ongoing"></div>
-                        <script>
-                            var AuctionTableOngoing = Vue.extend({
-                                template: '<b-table :fields="fields" :items="items"><template v-slot:cell(product)="data"><div v-html="data.value.nameraw"></div></template><template v-slot:cell(status)="data"><div v-html="data.value.statusraw"></div></template><template v-slot:cell(bid)="data"><div v-html="data.value.bidraw"></div></template><template v-slot:cell(endtime)="data"><div v-html="data.value.endtimeraw"></div></template></b-table>',
-                                data: function () {
-                                    return {
-                                        fields: [
-                                            { key: 'product', label: '@Loc["Account.CustomerAuctions.ProductName"]'},
-                                            { key: 'status', label: '@Loc["Account.CustomerAuctions.Status"]'},
-                                            { key: 'bid', label: '@Loc["Account.CustomerAuctions.Highestbid"]'},
-                                            { key: 'endtime', label: '@Loc["Account.CustomerAuctions.AuctionEndTime"]'},
-                                        ],
-                                        items: [
-                                            @{
-                                                var ongoing = Model.ProductBidList.Where(x => !x.Ended);
-                                            }
-                                            @foreach (var item in ongoing)
+                        <div id="auction-table-ongoing" class="table-responsive">
+                            <table class="table">
+                                <thead role="rowgroup">
+                                    <tr role="row">
+                                        <th role="columnheader"><div>@Loc["Account.CustomerAuctions.ProductName"]</div></th>
+                                        <th role="columnheader"><div>@Loc["Account.CustomerAuctions.Status"]</div></th>
+                                        <th role="columnheader"><div>@Loc["Account.CustomerAuctions.Highestbid"]</div></th>
+                                        <th role="columnheader"><div>@Loc["Account.CustomerAuctions.AuctionEndTime"]</div></th>
+                                    </tr>
+                                </thead>
+                                <tbody role="rowgroup">
+                                    @{
+                                        var ongoing = Model.ProductBidList.Where(x => !x.Ended);
+                                    }
+                                    @foreach (var item in ongoing)
+                                    {
+                                        <tr role="row">
+                                            <td>
+                                                <div><a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">@item.ProductName</a></div>
+                                            </td>
+                                            @if (item.HighestBidder)
                                             {
-                                                        <text>
+                                                <td>
+                                                    <div>
+                                                        <span class="text-success">@Loc["Account.CustomerAuctions.Status.HighestBidder"]</span>
+                                                    </div>
+                                                </td>
+                                            }
+                                            else
                                             {
-                                                product: {
-                                                    nameraw: '<a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">@item.ProductName</a>'
-                                                },
-                                                status: {
-                                                                @if (item.HighestBidder)
-                                                                {
-                                                                    <text>
-                                                    statusraw: '<span class="text-success">@Loc["Account.CustomerAuctions.Status.HighestBidder"]</span>'
-                                                                    </text>
-                                                                }
-                                                                else
-                                                                {
-                                                                    <text>
-                                                                        statusraw: '<span class="text-danger">@Loc["Account.CustomerAuctions.Status.Outbid"]</span>'
-                                                                    </text>
-                                                                }
-                                                },
-                                                bid: {
-                                                    bidraw: '@item.CurrentBidAmount @if (item.CurrentBidAmountValue > item.BidAmountValue) { <small>(@item.BidAmount)</small> }'
-                                                },
-                                                endtime: {
-                                                    endtimeraw: '@item.EndBidDate'
-                                                }
-                                            },
-                                                        </text>
-                                             }
-                                        ]
-                                    }
-                                }
-                            })
-                            new AuctionTableOngoing().$mount('#auction-table-ongoing')
-                        </script>
+                                                <td>
+                                                    <div>
+                                                        <span class="text-danger">@Loc["Account.CustomerAuctions.Status.Outbid"]</span>
+                                                    </div>
+                                                </td>
+                                            }
+                                            <td>
+                                                <div>
+                                                    @item.CurrentBidAmount @if (item.CurrentBidAmountValue > item.BidAmountValue)
+                                                    {<small>(@item.BidAmount)</small>}
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div>@item.EndBidDate</div>
+                                            </td>
+                                        </tr>
+                                     }
+                                    </tbody>
+                            </table>
+                        </div>
                     }
                     else
                     {
@@ -84,59 +82,57 @@
                     @if (Model.ProductBidList.Where(x => x.Ended).Any())
                     {
 
-                        <div id="auction-table-ended"></div>
-                        <script>
-                            var AuctionTableEnded = Vue.extend({
-                                template: '<b-table :fields="fields" :items="items"><template v-slot:cell(product)="data"><div v-html="data.value.nameraw"></div></template><template v-slot:cell(status)="data"><div v-html="data.value.statusraw"></div></template><template v-slot:cell(bid)="data"><div v-html="data.value.bidraw"></div></template><template v-slot:cell(endtime)="data"><div v-html="data.value.endtimeraw"></div></template></b-table>',
-                                data: function () {
-                                    return {
-                                        fields: [
-                                            { key: 'product', label: '@Loc["Account.CustomerAuctions.ProductName"]'},
-                                            { key: 'status', label: '@Loc["Account.CustomerAuctions.Status"]'},
-                                            { key: 'bid', label: '@Loc["Account.CustomerAuctions.Highestbid"]'},
-                                            { key: 'endtime', label: '@Loc["Account.CustomerAuctions.AuctionEndTime"]'},
-                                        ],
-                                        items:  [
-                                            @{
-                                                var ended = Model.ProductBidList.Where(x => x.Ended);
-                                            }
+                        <div id="auction-table-ended" class="table-responsive">
+                            <table class="table">
+                                <thead role="rowgroup">
+                                    <tr role="row">
+                                        <th role="columnheader"><div>@Loc["Account.CustomerAuctions.ProductName"]</div></th>
+                                        <th role="columnheader"><div>@Loc["Account.CustomerAuctions.Status"]</div></th>
+                                        <th role="columnheader"><div>@Loc["Account.CustomerAuctions.Highestbid"]</div></th>
+                                        <th role="columnheader"><div>@Loc["Account.CustomerAuctions.AuctionEndTime"]</div></th>
+                                    </tr>
+                                </thead>
+                                <tbody role="rowgroup">
+                                        @{
+                                            var ended = Model.ProductBidList.Where(x => x.Ended);
+                                        }
 
-                                            @foreach (var item in ended)
-                                            {
-                                                        <text>
-                                                        {
-                                                            product: {
-                                                                nameraw: '<a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">@item.ProductName</a>'
-                                                            },
-                                                            status: {
-                                                                @if (item.HighestBidder)
-                                                                {
-                                                                    <text>
-                                                                        statusraw: '<span class="text-success">@Loc["Account.CustomerAuctions.Status.HighestBidder"]</span>'
-                                                                    </text>
-                                                                }
-                                                                else
-                                                                {
-                                                                    <text>
-                                                                        statusraw: '<span class="text-danger">@Loc["Account.CustomerAuctions.Status.Outbid"]</span>'
-                                                                    </text>
-                                                                }
-                                                            },
-                                                            bid: {
-                                                                bidraw: '@item.CurrentBidAmount @if (item.CurrentBidAmountValue > item.BidAmountValue) { <small>(@item.BidAmount)</small> }'
-                                                            },
-                                                            endtime: {
-                                                                endtimeraw: '@item.EndBidDate'
-                                                            }
-                                                        },
-                                                        </text>
-                                             }
-                                                ]
+                                        @foreach (var item in ended)
+                                        {
+                                            <tr role="row">
+                                                <td>
+                                                    <div><a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">@item.ProductName</a></div>
+                                                </td>
+                                                @if (item.HighestBidder)
+                                                {
+                                                    <td>
+                                                        <div>
+                                                            <span class="text-success">@Loc["Account.CustomerAuctions.Status.HighestBidder"]</span>
+                                                        </div>
+                                                    </td>
+                                                }
+                                                else
+                                                {
+                                                    <td>
+                                                        <div>
+                                                            <span class="text-danger">@Loc["Account.CustomerAuctions.Status.Outbid"]</span>
+                                                        </div>
+                                                    </td>
+                                                }
+                                                <td>
+                                                    <div>
+                                                        @item.CurrentBidAmount @if (item.CurrentBidAmountValue > item.BidAmountValue)
+                                                        {<small>(@item.BidAmount)</small>}
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <div>@item.EndBidDate</div>
+                                                </td>
+                                            </tr>
                                         }
-                                    }
-                                })
-                            new AuctionTableEnded().$mount('#auction-table-ended')
-                        </script>
+                                </tbody>
+                            </table>
+                        </div>
                     }
                     else
                     {
diff --git a/src/Web/Grand.Web/Views/Account/DownloadableProducts.cshtml b/src/Web/Grand.Web/Views/Account/DownloadableProducts.cshtml
index 5df503c5f..df993fc17 100644
--- a/src/Web/Grand.Web/Views/Account/DownloadableProducts.cshtml
+++ b/src/Web/Grand.Web/Views/Account/DownloadableProducts.cshtml
@@ -16,46 +16,58 @@
     @if (Model.Items.Any())
     {
 
-                        <div id="downloadable-products"></div>
-                        <script>
-                                var DownloadableProducts = Vue.extend({
-                                    template: '<b-table :fields="fields" :items="items" responsive><template v-slot:cell(order)="data"><div v-html="data.value.order"></div></template><template v-slot:cell(date)="data"><div v-html="data.value.date"></div></template><template v-slot:cell(product)="data"><div v-html="data.value.product"></div></template><template v-slot:cell(download)="data"><div v-html="data.value.download"></div></template></b-table>',
-                                    data: function () {
-                                        return {
-                                            fields: [
-                                                { key: 'order', label: '@Loc["DownloadableProducts.Fields.Order"]'},
-                                                { key: 'date', label: '@Loc["DownloadableProducts.Fields.Date"]'},
-                                                { key: 'product', label: '@Loc["DownloadableProducts.Fields.Product"]'},
-                                                { key: 'download', label: '@Loc["DownloadableProducts.Fields.Download"]'},
-                                            ],
-                                            items: [
-                                                @for (int i = 0; i < Model.Items.Count; i++)
-                                                {
-                                                    var item = Model.Items[i];
-                                                    <text>
-                                                {
-                                                    order: {
-                                                        order: '<a href="@Url.RouteUrl("OrderDetails", new { orderId = item.OrderId })">@item.OrderNumber</a>'
-                                                    },
-                                                    date: {
-                                                        date: '@item.CreatedOn.ToString("d")'
-                                                    },
-                                                    product: {
-                                                        product: '<a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">@item.ProductName</a>@if (!String.IsNullOrEmpty(item.ProductAttributes)) {<div class="attributes">@Html.Raw(item.ProductAttributes)</div>}'
-                                                    },
-                                                    download: {
-                                                        download: '@if (!String.IsNullOrEmpty(item.DownloadId)) { <a href="@Url.RouteUrl("GetDownload", new { orderItemId = item.OrderItemGuid })">@Loc["DownloadableProducts.Fields.Download"]</a>}else {@Loc["DownloadableProducts.Fields.Download.NA"]}@if (!String.IsNullOrEmpty(item.LicenseId))@if (!String.IsNullOrEmpty(item.LicenseId)) {<a href="@Url.RouteUrl("GetLicense", new { orderItemId = item.OrderItemGuid })">@Loc["DownloadableProducts.Fields.DownloadLicense"]</a> }'
-                                                    },
-
-                                                },
-                                                    </text>
-                                                }
-                                            ]
-                                        }
+        <div id="downloadable-products" class="table-responsive">
+            <table class="table">
+                <thead role="rowgroup">
+                    <tr role="row">
+                        <th role="columnheader"><div>@Loc["DownloadableProducts.Fields.Order"]</div></th>
+                        <th role="columnheader"><div>@Loc["DownloadableProducts.Fields.Date"]</div></th>
+                        <th role="columnheader"><div>@Loc["DownloadableProducts.Fields.Product"]</div></th>
+                        <th role="columnheader"><div>@Loc["DownloadableProducts.Fields.Download"]</div></th>
+                    </tr>
+                </thead>
+                <tbody role="rowgroup">
+                    @for (int i = 0; i < Model.Items.Count; i++)
+                    {
+                        var item = Model.Items[i];
+                        <tr role="row">
+                            <td>
+                                <div><a href="@Url.RouteUrl("OrderDetails", new { orderId = item.OrderId })">@item.OrderNumber</a></div>
+                            </td>
+                            <td>
+                                <div>
+                                    @item.CreatedOn.ToString("d")
+                                </div>
+                            </td>
+                            <td>
+                                <div>
+                                    <a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">@item.ProductName</a>
+                                    @if (!String.IsNullOrEmpty(item.ProductAttributes))
+                                    {
+                                        <div class="attributes">@Html.Raw(item.ProductAttributes)</div>
+                                    }
+                                </div>
+                            </td>
+                            <td>
+                                <div>
+                                    @if (!String.IsNullOrEmpty(item.DownloadId)) { 
+                                        <a href="@Url.RouteUrl("GetDownload", new { orderItemId = item.OrderItemGuid })">
+                                            @Loc["DownloadableProducts.Fields.Download"]</a>
+                                    }else {
+                                        @Loc["DownloadableProducts.Fields.Download.NA"]
                                     }
-                                })
-                            new DownloadableProducts().$mount('#downloadable-products')
-                        </script>
+                                    @if (!String.IsNullOrEmpty(item.LicenseId)) {
+                                        <a href="@Url.RouteUrl("GetLicense", new { orderItemId = item.OrderItemGuid })">
+                                            @Loc["DownloadableProducts.Fields.DownloadLicense"]
+                                        </a> 
+                                    }
+                                </div>
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
     }
     else
     {
diff --git a/src/Web/Grand.Web/Views/Order/CustomerLoyaltyPoints.cshtml b/src/Web/Grand.Web/Views/Order/CustomerLoyaltyPoints.cshtml
index 3ffe07d1b..5189676f3 100644
--- a/src/Web/Grand.Web/Views/Order/CustomerLoyaltyPoints.cshtml
+++ b/src/Web/Grand.Web/Views/Order/CustomerLoyaltyPoints.cshtml
@@ -23,46 +23,46 @@
         <h5><strong>@Loc["LoyaltyPoints.History"]</strong></h5>
         @if (Model.LoyaltyPoints.Any())
         {
-                        <div id="customer-loyalty-points"></div>
-                        <script>
-                            var CustomerLoyaltyPoints = Vue.extend({
-                                template: '<b-table :fields="fields" :items="items"> <template v-slot:cell(date)="data"> <div v-html="data.value.date"></div></template> <template v-slot:cell(points)="data"> <div v-html="data.value.points"></div></template> <template v-slot:cell(pointsbalance)="data"> <div v-html="data.value.pointsbalance"></div></template> <template v-slot:cell(message)="data"> <div v-html="data.value.message"></div></template> </b-table>',
-                                data: function () {
-                                    return {
-                                         fields: [
-                                            { key: 'date', label: '@Loc["LoyaltyPoints.Fields.Date"]'},
-                                            { key: 'points', label: '@Loc["LoyaltyPoints.Fields.Points"]'},
-                                            { key: 'pointsbalance', label: '@Loc["LoyaltyPoints.Fields.PointsBalance"]'},
-                                            { key: 'message', label: '@Loc["LoyaltyPoints.Fields.Message"]'},
-                                        ],
-                                        items: [
-                                             @for (int i = 0; i < Model.LoyaltyPoints.Count; i++)
-                                             {
-                                             <text>
-                                                @{ var item = Model.LoyaltyPoints[i];}
-                                            {
-                                                date: {
-                                                    date: '@item.CreatedOn'
-                                                },
-                                                points: {
-                                                    points: '@item.Points'
-                                                },
-                                                pointsbalance: {
-                                                    pointsbalance: '@item.PointsBalance'
-                                                },
-                                                message: {
-                                                    message: '@item.Message',
-                                                }
-
-                                            },
-                                            </text>
-                                            }
-                                        ]
+                        <div id="customer-loyalty-points" class="table-responsive">
+                            <table class="table">
+                                <thead role="rowgroup">
+                                    <tr role="row">
+                                        <th role="columnheader"><div>@Loc["LoyaltyPoints.Fields.Date"]</div></th>
+                                        <th role="columnheader"><div>@Loc["LoyaltyPoints.Fields.Points"]</div></th>
+                                        <th role="columnheader"><div>@Loc["LoyaltyPoints.Fields.PointsBalance"]</div></th>
+                                        <th role="columnheader"><div>@Loc["LoyaltyPoints.Fields.Message"]</div></th>
+                                    </tr>
+                                </thead>
+                                <tbody role="rowgroup">
+                                    @for (int i = 0; i < Model.LoyaltyPoints.Count; i++)
+                                    {
+                                        var item = Model.LoyaltyPoints[i];
+                                        <tr role="row">
+                                            <td>
+                                                <div>
+                                                    @item.CreatedOn
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div>
+                                                    @item.Points
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div>
+                                                    @item.PointsBalance
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div>
+                                                    @item.Message
+                                                </div>
+                                            </td>
+                                        </tr>
                                     }
-                                }
-                            })
-                            new CustomerLoyaltyPoints().$mount('#customer-loyalty-points')
-                        </script>
+                                </tbody>
+                            </table>
+                        </div>
         }
         else
         {
diff --git a/src/Web/Grand.Web/Views/Order/Details.cshtml b/src/Web/Grand.Web/Views/Order/Details.cshtml
index 8373d918f..bb8b8676e 100644
--- a/src/Web/Grand.Web/Views/Order/Details.cshtml
+++ b/src/Web/Grand.Web/Views/Order/Details.cshtml
@@ -392,48 +392,92 @@
                         <div class="col-xl-8 col-12 cart-out-container">
                             <h5 class="generalTitle">@Loc["Order.Product(s)"]</h5>
                             <div class="shopping-cart-container">
-                                <div id="order-details"></div>
-                                <script>
-                                    var OrderDetails = Vue.extend({
-                                    template: '<b-table :fields="fields" :items="items" class="shopping-cart"> <template v-slot:cell(picture)="data"> <div v-html="data.value.picture"></div></template> <template v-slot:cell(product)="data"> <div v-html="data.value.product"></div></template> <template v-slot:cell(unitprice)="data"> <div v-html="data.value.unitprice"></div></template> <template v-slot:cell(quantity)="data"> <div v-html="data.value.quantity"></div></template> <template v-slot:cell(subtotal)="data"> <div v-html="data.value.subtotal"></div></template> </b-table>',
-                                    data: function () {
-                                    return {
-                                         fields: [
-                                            { key: 'picture', label: '@Loc["Order.Product(s).Picture"]', class: 'text-center' },
-                                            { key: 'product', label: '@Loc["Order.Product(s).Name"]', class: 'text-center' },
-                                            { key: 'unitprice', label: '@Loc["Order.Product(s).Price"]', class: 'text-center'  },
-                                            { key: 'quantity', label: '@Loc["Order.Product(s).Quantity"]',  class: 'text-center' },
-                                            { key: 'subtotal', label: '@Loc["Order.Product(s).Total"]', class: 'text-center' },
-                                        ],
-                                        items: [
-                                             @foreach (var item in Model.Items)
-                                             {
-                                             <text>
-                                             {
-                                                picture: {
-                                                     picture: '<a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })"><img alt="@item.Picture.AlternateText" src="@item.Picture.ImageUrl" title="@item.Picture.Title" /></a>'
-                                                },
-                                                product: {
-                                                    product: '@if (!Model.PrintMode){<em><a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">@item.ProductName</a></em>}else{@item.ProductName}@if (Model.ShowSku){<div class="sku w-100 text-center text-md-left">@item.Sku</div>}@if (!string.IsNullOrEmpty(item.AttributeInfo)){<div class="attributes">@Html.Raw(item.AttributeInfo)</div>}@if (!string.IsNullOrEmpty(item.RentalInfo)){<div class="rental-info">@Html.Raw(item.RentalInfo)</div>}@if (!String.IsNullOrEmpty(item.DownloadId)){<div class="download"><a href="@Url.RouteUrl("GetDownload", new { orderItemId = item.OrderItemGuid })">@Loc["DownloadableProducts.Fields.Download"]</a></div>}@if (!String.IsNullOrEmpty(item.LicenseId)){<div class="download license"><a href="@Url.RouteUrl("GetLicense", new {orderItemId = item.OrderItemGuid})">@Loc["DownloadableProducts.Fields.DownloadLicense"]</a></div>}@await Component.InvokeAsync("Widget", new { widgetZone = "orderdetails_product_line", additionalData = item.Id })'
-                                                },
-                                                unitprice: {
-                                                    unitprice: '<span class="product-unit-price price">@item.UnitPrice</span>@if (item.UnitPriceWithoutDiscountValue != item.UnitPriceValue && item.UnitPriceWithoutDiscountValue > 0){<div class="text-center"><del class="small text-danger">(@item.UnitPriceWithoutDiscount)</del></div>}'
-                                                },
-                                                quantity: {
-                                                    quantity: '<span class="d-inline-block d-xl-none mr-1">@Loc["shoppingcart.quantity"]:</span> @item.Quantity',
-                                                },
-                                                subtotal: {
-                                                    subtotal: '<span class="product-subtotal price prod-total">@item.SubTotal</span>@if (!string.IsNullOrEmpty(item.Discount)) {<div class="discount text-success text-center"><span>@Loc["ShoppingCart.Discount"]: </span><span>@item.Discount</span></div>}',
-                                                }
-                                             },
-                                            </text>
+                                <div id="order-details" class="table-responsive">
+                                    <table class="table">
+                                        <thead role="rowgroup">
+                                            <tr role="row">
+                                                <th role="columnheader" class="text-center"><div>@Loc["Order.Product(s).Picture"]</div></th>
+                                                <th role="columnheader" class="text-center"><div>@Loc["Order.Product(s).Name"]</div></th>
+                                                <th role="columnheader" class="text-center"><div>@Loc["Order.Product(s).Price"]</div></th>
+                                                <th role="columnheader" class="text-center"><div>@Loc["Order.Product(s).Quantity"]</div></th>
+                                                <th role="columnheader" class="text-center"><div>@Loc["Order.Product(s).Total"]</div></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody role="rowgroup">
+                                            @foreach (var item in Model.Items)
+                                            {
+                                                <tr role="row">
+                                                    <td class="text-center">
+                                                        <div>
+                                                            <a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">
+                                                                <img alt="@item.Picture.AlternateText" src="@item.Picture.ImageUrl" title="@item.Picture.Title" />
+                                                            </a>
+                                                        </div>
+                                                    </td>
+                                                    <td class="text-center">
+                                                        <div>
+                                                            @if (!Model.PrintMode)
+                                                            {
+                                                                <em><a href="@Url.RouteUrl("Product", new { SeName = item.ProductSeName })">@item.ProductName</a></em>}
+                                                            else
+                                                            {
+                                                                @item.ProductName
+                                                            }
+                                                            @if (Model.ShowSku)
+                                                            {
+                                                                <div class="sku w-100 text-center text-md-left">@item.Sku</div>
+                                                            }
+                                                            @if (!string.IsNullOrEmpty(item.AttributeInfo))
+                                                            {
+                                                                <div class="attributes">@Html.Raw(item.AttributeInfo)</div>
+                                                            }
+                                                            @if (!string.IsNullOrEmpty(item.RentalInfo))
+                                                            {
+                                                                <div class="rental-info">@Html.Raw(item.RentalInfo)</div>
+                                                            }
+                                                            @if (!String.IsNullOrEmpty(item.DownloadId))
+                                                            {
+                                                                <div class="download"><a href="@Url.RouteUrl("GetDownload", new { orderItemId = item.OrderItemGuid })">@Loc["DownloadableProducts.Fields.Download"]</a></div>
+                                                            }
+                                                            @if (!String.IsNullOrEmpty(item.LicenseId))
+                                                            {
+                                                                <div class="download license">
+                                                                    <a href="@Url.RouteUrl("GetLicense", new {orderItemId = item.OrderItemGuid})">@Loc["DownloadableProducts.Fields.DownloadLicense"]</a>
+                                                                </div>
+                                                            }
+                                                            @await Component.InvokeAsync("Widget", new { widgetZone = "orderdetails_product_line", additionalData = item.Id })
+                                                        </div>
+                                                    </td>
+                                                    <td class="text-center">
+                                                        <div>
+                                                            <span class="product-unit-price price">@item.UnitPrice</span>
+                                                            @if (item.UnitPriceWithoutDiscountValue != item.UnitPriceValue && item.UnitPriceWithoutDiscountValue > 0)
+                                                            {
+                                                                <div class="text-center">
+                                                                    <del class="small text-danger">(@item.UnitPriceWithoutDiscount)</del>
+                                                                </div>
+                                                            }
+                                                        </div>
+                                                    </td>
+                                                    <td class="text-center">
+                                                        <div>
+                                                            <span class="d-inline-block d-xl-none mr-1">@Loc["shoppingcart.quantity"]:</span> @item.Quantity
+                                                        </div>
+                                                    </td>
+                                                    <td class="text-center">
+                                                        <div>
+                                                            <span class="product-subtotal price prod-total">@item.SubTotal</span>
+                                                            @if (!string.IsNullOrEmpty(item.Discount))
+                                                            {
+                                                                <div class="discount text-success text-center"><span>@Loc["ShoppingCart.Discount"]: </span><span>@item.Discount</span></div>
+                                                            }
+                                                        </div>
+                                                    </td>
+                                                </tr>
                                             }
-                                                ]
-                                    }
-                                }
-                            })
-                        new OrderDetails().$mount('#order-details')
-                                </script>
+                                        </tbody>
+                                    </table>
+                                </div>
                             </div>
                         </div>
                         <div class="col-lg-4 col-12 totals">