From 98b44ced4e62398246207f8915a7074d97f87012 Mon Sep 17 00:00:00 2001
From: Basher <89542751+Basher03@users.noreply.github.com>
Date: Sun, 31 Jul 2022 03:08:52 +0300
Subject: [PATCH] Added groups for table in presentationeditor

---
 .../main/app/view/TableSettings.js            | 61 +++++++++++++++++--
 apps/presentationeditor/main/locale/en.json   |  5 ++
 apps/presentationeditor/main/locale/ru.json   |  5 ++
 .../main/resources/less/rightmenu.less        | 22 +++++++
 4 files changed, 87 insertions(+), 6 deletions(-)

diff --git a/apps/presentationeditor/main/app/view/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js
index ca9a5424b..9d13d2e7e 100644
--- a/apps/presentationeditor/main/app/view/TableSettings.js
+++ b/apps/presentationeditor/main/app/view/TableSettings.js
@@ -707,28 +707,72 @@ define([
 
         onAddTableStylesPreview: function(Templates){
             var self = this;
-            var arr = [];
+            var templates = [];
+            var groups = [
+                {id: 'menu-table-group-custom',    caption: self.txtGroupTable_Custom,  templates: []},
+                {id: 'menu-table-group-optimal',   caption: self.txtGroupTable_Optimal, templates: []},
+                {id: 'menu-table-group-light',     caption: self.txtGroupTable_Light,   templates: []},
+                {id: 'menu-table-group-medium',    caption: self.txtGroupTable_Medium,  templates: []},
+                {id: 'menu-table-group-dark',      caption: self.txtGroupTable_Dark,    templates: []},
+                {id: 'menu-table-group-no-name',   caption: '&nbsp',                    templates: []},
+            ];
+
+            self.mnuTableTemplatePicker.store.models.forEach(function(template) {
+                groups.filter(function(item){ return item.id == template.attributes.group; })[0].templates.push(template);
+            });
             _.each(Templates, function(template){
                 var tip = template.asc_getDisplayName();
+                var groupItem = '';
+
                 if (template.asc_getType()==0) {
+                    var arr = tip.split(' ');
+                    
+                    if(new RegExp('No Style|Themed Style', 'i').test(tip)){
+                        groupItem = 'menu-table-group-optimal';
+                    }
+                    else{
+                        if(arr[0]){
+                            groupItem = 'menu-table-group-' + arr[0].toLowerCase();
+                        }
+                        if(groups.some(function(item) {return item.id === groupItem;}) == false) {
+                            groupItem = 'menu-table-group-no-name';
+                        }
+                    }
+
                     ['No Style', 'No Grid', 'Table Grid', 'Themed Style', 'Light Style', 'Medium Style', 'Dark Style', 'Accent'].forEach(function(item){
                         var str = 'txtTable_' + item.replace(' ', '');
                         if (self[str])
                             tip = tip.replace(new RegExp(item, 'g'), self[str]);
                     });
                 }
-                arr.push({
+                else {
+                    groupItem = 'menu-table-group-custom'
+                }   
+
+                groups.filter(function(item){ return item.id == groupItem; })[0].templates.push({
                     imageUrl: template.asc_getImage(),
                     id     : Common.UI.getId(),
                     templateId: template.asc_getId(),
+                    group  : groupItem,
                     tip    : tip
                 });
             });
+            
+            groups = groups.filter(function(item, index){
+                return item.templates.length > 0
+            });
+            
+            groups.forEach(function(item){
+                templates = templates.concat(item.templates);
+                delete item.templates;
+            });
+            
             if (this._state.beginPreviewStyles) {
                 this._state.beginPreviewStyles = false;
-                self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.reset(arr);
-            } else
-                self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.add(arr);
+            } 
+            
+            self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.groups.reset(groups);
+            self.mnuTableTemplatePicker && self.mnuTableTemplatePicker.store.reset(templates);
             !this._state.currentStyleFound && this.selectCurrentTableStyle();
         },
 
@@ -878,7 +922,12 @@ define([
         txtTable_LightStyle: 'Light Style',
         txtTable_MediumStyle: 'Medium Style',
         txtTable_DarkStyle: 'Dark Style',
-        txtTable_Accent: 'Accent'
+        txtTable_Accent: 'Accent',
+        txtGroupTable_Custom: 'Custom',
+        txtGroupTable_Optimal: 'Best Match for Document',
+        txtGroupTable_Light: 'Light',
+        txtGroupTable_Medium: 'Medium',
+        txtGroupTable_Dark: 'Dark',
 
 }, PE.Views.TableSettings || {}));
 });
\ No newline at end of file
diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json
index f10ff9343..670c10d86 100644
--- a/apps/presentationeditor/main/locale/en.json
+++ b/apps/presentationeditor/main/locale/en.json
@@ -2087,6 +2087,11 @@
   "PE.Views.TableSettings.txtTable_NoStyle": "No Style",
   "PE.Views.TableSettings.txtTable_TableGrid": "Table Grid",
   "PE.Views.TableSettings.txtTable_ThemedStyle": "Themed Style",
+  "PE.Views.TableSettings.txtGroupTable_Custom": "Custom",
+  "PE.Views.TableSettings.txtGroupTable_Optimal": "Best Match for Document",
+  "PE.Views.TableSettings.txtGroupTable_Light": "Light",
+  "PE.Views.TableSettings.txtGroupTable_Medium": "Medium",
+  "PE.Views.TableSettings.txtGroupTable_Dark": "Dark",
   "PE.Views.TableSettingsAdvanced.textAlt": "Alternative Text",
   "PE.Views.TableSettingsAdvanced.textAltDescription": "Description",
   "PE.Views.TableSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart, or table.",
diff --git a/apps/presentationeditor/main/locale/ru.json b/apps/presentationeditor/main/locale/ru.json
index ff4ecf820..04b766107 100644
--- a/apps/presentationeditor/main/locale/ru.json
+++ b/apps/presentationeditor/main/locale/ru.json
@@ -2078,6 +2078,11 @@
   "PE.Views.TableSettings.txtTable_NoStyle": "Нет стиля",
   "PE.Views.TableSettings.txtTable_TableGrid": "сетка таблицы",
   "PE.Views.TableSettings.txtTable_ThemedStyle": "Стиль из темы",
+  "PE.Views.TableSettings.txtGroupTable_Custom": "Пользовательский",
+  "PE.Views.TableSettings.txtGroupTable_Optimal": "Оптимальный для документа",
+  "PE.Views.TableSettings.txtGroupTable_Light": "Светлый",
+  "PE.Views.TableSettings.txtGroupTable_Medium": "Средний",
+  "PE.Views.TableSettings.txtGroupTable_Dark": "Темный",
   "PE.Views.TableSettingsAdvanced.textAlt": "Альтернативный текст",
   "PE.Views.TableSettingsAdvanced.textAltDescription": "Описание",
   "PE.Views.TableSettingsAdvanced.textAltTip": "Альтернативное текстовое представление информации о визуальном объекте, которое будет зачитываться для людей с нарушениями зрения или когнитивными нарушениями, чтобы помочь им лучше понять, какую информацию содержит изображение, автофигура, диаграмма или таблица.",
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 7b3b7077b..3a2b4daa6 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -101,4 +101,26 @@
             }
         }
     }
+}
+
+#id-table-menu-template {
+    .group-description {
+        padding: 3px 0 3px 10px;
+        .font-weight-bold();
+        
+    } 
+
+    .group-items-container {
+        .item {
+            &:hover {
+                .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
+                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
+            }
+      
+            &.selected {
+                .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
+                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
+            }
+        }
+    }
 }
\ No newline at end of file