From df209fa78f3b9cb4f35f33130aa49e76df6a69e1 Mon Sep 17 00:00:00 2001
From: Anna Manchenkova <wierrdoy@gmail.com>
Date: Mon, 5 Jun 2023 14:41:52 +0300
Subject: [PATCH] feat: added sidebar, fixed styles

---
 .../src/lib/components/grid/grid.component.js | 317 +++++++++---------
 .../_module-interactive-part.theme.scss       |  30 ++
 .../module-interactive-part.component.scss    |  30 +-
 .../en-US/modules-interactivity.json          |   5 +-
 .../ru-RU/modules-interactivity.json          |   5 +-
 .../styles/src/lib/_components.theme.scss     |   6 +-
 .../src/lib/element-ui/components/table.scss  |   4 -
 .../overriden-vue/_overriden-vue.theme.scss   |   8 +
 8 files changed, 230 insertions(+), 175 deletions(-)
 create mode 100644 web/libs/features/modules-interactivity/src/lib/components/module-interactive-part/_module-interactive-part.theme.scss

diff --git a/web/libs/features/modules-interactivity/src/lib/components/grid/grid.component.js b/web/libs/features/modules-interactivity/src/lib/components/grid/grid.component.js
index 829d356b..93d88198 100644
--- a/web/libs/features/modules-interactivity/src/lib/components/grid/grid.component.js
+++ b/web/libs/features/modules-interactivity/src/lib/components/grid/grid.component.js
@@ -11,173 +11,175 @@ const template = `
             <div class="layout-row">
                 <div v-if="hasSearch" class="flex-auto layout-row layout-align-start-center">
 
-                        <div class="vue-grid__rows-selector" v-if="canSelect && multiple && showSelectionMenu">
-                            <el-checkbox
-                                v-model="isSelectedAll"
-                                :indeterminate="selected.length > 0 && !isSelectedAll"
-                                @change="toggleAllSelection()">
-                                </el-checkbox>
-
-                                <el-dropdown trigger="click" placement="bottom-start" @command="onSelectionCommand">
-                                    <span class="el-dropdown-link">
-                                        <i class="el-icon-arrow-down el-icon--right"></i>
-                                    </span>
-                                    <el-dropdown-menu slot="dropdown">
-                                        <el-dropdown-item command="selectAll">
-                                            {{ $t('ModulesInteractivity.Grid.DropdownItemText.SelectAll') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item command="selectAllOnPage">
-                                            {{ $t('ModulesInteractivity.Grid.DropdownItemText.SelectPage') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item command="clearSelection">
-                                            {{ $t('ModulesInteractivity.Grid.DropdownItemText.ClearSelection') }}
-                                        </el-dropdown-item>
-                                    </el-dropdown-menu>
-                                </el-dropdown>
-                            </div>
-
-                            <div class="flex-auto layout-row layout-align-space-between"
-                                 :class="{ 'vue-grid__search-container_has-searchable-fields': hasSelectSearchableFields }">
-                                <el-select
-                                    v-if="hasSelectSearchableFields"
-                                    class="vue-grid__search-fields flex-none"
-                                    v-model="selectedSearchField"
-                                    value-key="prop"
-                                    slot="prepend"
-                                    @change="onSelectColumn()">
-                                    <el-option
-                                        v-for="column in searchableColumns"
-                                        :key="column.value"
-                                        :label="column.label"
-                                        :value="column">
-                                    </el-option>
-                                </el-select>
-
-                                <el-input
-                                    v-if="isSearchByText"
-                                    class="vue-grid__search-input flex-auto"
-                                    v-model="searchValue"
-                                    :placeholder="currentSearchPlaceholder"
-                                    @change="search()">
-                                </el-input>
-
-                                <el-select
-                                    ref="searchValuesSelect"
-                                    v-if="isSearchBySelect"
-                                    v-model="searchValue"
-                                    class="vue-grid__search-select flex-auto"
-                                    :multiple="selectedSearchField.search.multiple"
-                                    :placeholder="currentSearchPlaceholder"
-                                    @clear="search()">
-                                    <el-option
-                                        v-for="item in selectedSearchField.search.items"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value"
-                                        @change="search()">
-                                    </el-option>
-                                </el-select>
-
-                                <el-button
-                                    class="vue-grid__search-button flex-none"
-                                    size="medium"
-                                    icon="el-icon-search"
-                                    @click="search()">
-                                </el-button>
-                            </div>
-                        </div>
-
-                        <div v-bind:class="{'layout-margin-left-xl': $slots.toolbar, 'flex-auto': !hasSearch, 'flex-none': hasSearch }">
-                            <slot name="toolbar" v-bind:selected="selected" v-bind:isSelectedAll="isSelectedAll"></slot>
-                        </div>
-
-                        <div v-if="hasSettings" class="flex-none layout-margin-left-xl">
-                            <el-tooltip :content="$t('ModulesInteractivity.Grid.TooltipText.ColumnsSettings')">
-                                <el-button icon="el-icon-setting" v-popover:columnsSelectorPopover></el-button>
-                            </el-tooltip>
-                        </div>
+                    <div class="vue-grid__rows-selector" v-if="canSelect && multiple && showSelectionMenu">
+                        <el-checkbox
+                            v-model="isSelectedAll"
+                            :indeterminate="selected.length > 0 && !isSelectedAll"
+                            @change="toggleAllSelection()">
+                        </el-checkbox>
+
+                        <el-dropdown trigger="click" placement="bottom-start" @command="onSelectionCommand">
+                            <span class="el-dropdown-link">
+                                <i class="el-icon-arrow-down el-icon--right"></i>
+                            </span>
+                            <el-dropdown-menu slot="dropdown">
+                                <el-dropdown-item command="selectAll">
+                                    {{ $t('ModulesInteractivity.Grid.DropdownItemText.SelectAll') }}
+                                </el-dropdown-item>
+                                <el-dropdown-item command="selectAllOnPage">
+                                    {{ $t('ModulesInteractivity.Grid.DropdownItemText.SelectPage') }}
+                                </el-dropdown-item>
+                                <el-dropdown-item command="clearSelection">
+                                    {{ $t('ModulesInteractivity.Grid.DropdownItemText.ClearSelection') }}
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
                     </div>
-                </div>
-
-                <div
-                    class="vue-grid__container flex-auto"
-                    :class="{ 'vue-grid_no-selectable': noSelectionText }">
-
-                    <data-tables-server
-                        ref="table"
-                        :loading="isLoading"
-                    :data="data"
-                    :page-size="parseInt(query.pageSize || 50)"
-                    :current-page="parseInt(query.page || 1)"
-                    :table-props="tableProps"
-                    :row-class-name="calcTableRowClassName"
-                    :pagination-props="{
-                        layout: 'slot, prev, pager, next, jumper, sizes',
-                        pageSizes: [10, 30, 50],
-                        total: this.total
-                    }"
-                    @query-change="loadData"
-                    @row-click="onRowClick"
-                    @selection-change="onSelectionChange"
-                    @header-dragend="saveSettings">
-
-                    <template v-slot:empty>
-                        <template v-if="$slots['custom-no-rows']">
-                            <slot name="custom-no-rows"></slot>
-                        </template>
-                        <template v-else>
-                            {{ searchValue ? $t('Common.Pseudo.Text.NotFound') : emptyText || $t('Common.Pseudo.Text.NoData') }}
-                        </template>
-                    </template>
-
-                    <template v-if="renderComponent">
-                        <slot v-for="column in visibleColumns" :name="'column-' + column.prop"></slot>
-                    </template>
 
-                    <template v-slot:pagination v-if="canSelect">
-                        <span class="layout-row">
-                            <div class="el-pagination__selected">
-                                {{
-                                    $t('ModulesInteractivity.Grid.Text.RowsSummary', {
-                                        selected: isSelectedAll ? 'all' : selected.length,
-                                        total: total
-                                    })
-                                }}
-                            </div>
-                        </span>
-                    </template>
-                </data-tables-server>
-
-                <el-popover
-                    ref="columnsSelectorPopover"
-                    placement="bottom-end"
-                    width="640"
-                    trigger="click"
-                    :visible-arrow="false">
-                    <div class="layout-padding-l">
-                        <draggable-select
-                            class="layout-fill_horizontal"
-                            v-model="visibleColumns"
-                            multiple
+                    <div class="flex-auto layout-row layout-align-space-between"
+                         :class="{ 'vue-grid__search-container_has-searchable-fields': hasSelectSearchableFields }">
+                        <el-select
+                            v-if="hasSelectSearchableFields"
+                            class="vue-grid__search-fields flex-none"
+                            v-model="selectedSearchField"
                             value-key="prop"
-                            :placeholder="$t('ModulesInteractivity.Grid.SelectPlaceholder.SelectColumns')"
-                            @change="saveSettings">
+                            slot="prepend"
+                            @change="onSelectColumn()">
                             <el-option
-                                v-for="item in availableColumns"
-                                :key="item.prop"
+                                v-for="column in searchableColumns"
+                                :key="column.value"
+                                :label="column.label"
+                                :value="column">
+                            </el-option>
+                        </el-select>
+
+                        <el-input
+                            v-if="isSearchByText"
+                            class="vue-grid__search-input flex-auto"
+                            v-model="searchValue"
+                            :placeholder="currentSearchPlaceholder"
+                            @change="search()">
+                        </el-input>
+
+                        <el-select
+                            ref="searchValuesSelect"
+                            v-if="isSearchBySelect"
+                            v-model="searchValue"
+                            class="vue-grid__search-select flex-auto"
+                            :multiple="selectedSearchField.search.multiple"
+                            :placeholder="currentSearchPlaceholder"
+                            @clear="search()">
+                            <el-option
+                                v-for="item in selectedSearchField.search.items"
+                                :key="item.value"
                                 :label="item.label"
-                                :value="item">
+                                :value="item.value"
+                                @change="search()">
                             </el-option>
-                        </draggable-select>
+                        </el-select>
+
+                        <el-button
+                            class="vue-grid__search-button flex-none"
+                            size="medium"
+                            icon="el-icon-search"
+                            @click="search()">
+                        </el-button>
                     </div>
-                </el-popover>
-            </div>
+                </div>
+
+                <div v-bind:class="{'layout-margin-left-xl': $slots.toolbar, 'flex-auto': !hasSearch, 'flex-none': hasSearch }">
+                    <slot name="toolbar" v-bind:selected="selected" v-bind:isSelectedAll="isSelectedAll"></slot>
+                </div>
 
-            <div class="flex-none" ref="footerText">
-                {{ footerText }}
+                <div v-if="hasSettings" class="flex-none layout-margin-left-xl">
+                    <el-tooltip :content="$t('ModulesInteractivity.Grid.TooltipText.ColumnsSettings')">
+                        <el-button icon="el-icon-setting" v-popover:columnsSelectorPopover></el-button>
+                    </el-tooltip>
+                </div>
             </div>
         </div>
-    </template>
+
+        <div
+            class="vue-grid__container flex-auto"
+            :class="{ 'vue-grid_no-selectable': noSelectionText }">
+
+            <data-tables-server
+                ref="table"
+                :loading="isLoading"
+                :data="data"
+                :page-size="parseInt(query.pageSize || 50)"
+                :current-page="parseInt(query.page || 1)"
+                :table-props="tableProps"
+                :row-class-name="calcTableRowClassName"
+                :pagination-props="{
+                    layout: 'slot, prev, pager, next, sizes',
+                    pageSizes: [10, 30, 50],
+                    total: this.total
+                }"
+                @query-change="loadData"
+                @row-click="onRowClick"
+                @selection-change="onSelectionChange"
+                @header-dragend="saveSettings">
+
+                <template v-slot:empty>
+                    <template v-if="$slots['custom-no-rows']">
+                        <slot name="custom-no-rows"></slot>
+                    </template>
+                    <template v-else>
+                        {{ searchValue ? $t('Common.Pseudo.Text.NotFound') : emptyText || $t('Common.Pseudo.Text.NoData') }}
+                    </template>
+                </template>
+
+                <template v-if="renderComponent">
+                    <slot v-for="column in visibleColumns" :name="'column-' + column.prop"></slot>
+                </template>
+
+                <template v-slot:pagination v-if="canSelect">
+                    <span class="layout-row">
+                        <div class="el-pagination__selected">
+                            {{
+                                multipleSelection ? $t('ModulesInteractivity.Grid.Text.RowsSummarySelected', {
+                                    selected: isSelectedAll ? 'all' : selected.length,
+                                    total: total
+                                }) : $t('ModulesInteractivity.Grid.Text.RowsSummary', {
+                                    total: total
+                                })
+                            }}
+                        </div>
+                    </span>
+                </template>
+            </data-tables-server>
+
+            <el-popover
+                ref="columnsSelectorPopover"
+                placement="bottom-end"
+                width="640"
+                trigger="click"
+                :visible-arrow="false">
+                <div class="layout-padding-l">
+                    <draggable-select
+                        class="layout-fill_horizontal"
+                        v-model="visibleColumns"
+                        multiple
+                        value-key="prop"
+                        :placeholder="$t('ModulesInteractivity.Grid.SelectPlaceholder.SelectColumns')"
+                        @change="saveSettings">
+                        <el-option
+                            v-for="item in availableColumns"
+                            :key="item.prop"
+                            :label="item.label"
+                            :value="item">
+                        </el-option>
+                    </draggable-select>
+                </div>
+            </el-popover>
+        </div>
+
+        <div class="flex-none" ref="footerText">
+            {{ footerText }}
+        </div>
+    </div>
+</template>
 `;
 
 export const GridComponent = Vue.extend({
@@ -190,6 +192,7 @@ export const GridComponent = Vue.extend({
         ignoreEvents: { type: Boolean },
         canSelect: { type: Boolean },
         multiple: { type: Boolean },
+        multipleSelection: { type: Boolean },
         showSelectionMenu: { type: Boolean, default: true },
         query: { type: Object },
         data: { type: Array },
diff --git a/web/libs/features/modules-interactivity/src/lib/components/module-interactive-part/_module-interactive-part.theme.scss b/web/libs/features/modules-interactivity/src/lib/components/module-interactive-part/_module-interactive-part.theme.scss
new file mode 100644
index 00000000..8b280c6f
--- /dev/null
+++ b/web/libs/features/modules-interactivity/src/lib/components/module-interactive-part/_module-interactive-part.theme.scss
@@ -0,0 +1,30 @@
+$grid-border-color: #e4e7ed;
+
+@mixin module-interactive-part-theme($mosaic-theme) {
+    .module-interactivity-container {
+        .drag-select {
+            .sortable-ghost {
+                color: #fff !important;
+                background: #909399 !important;
+            }
+        }
+
+        .el-table .el-table__row_selected {
+            background-color: #f0f7ff;
+        }
+
+        .el-pagination__selected {
+            color: #606266;
+        }
+
+        .vue-grid__search-input .el-input-group__prepend {
+            background-color: #fff;
+        }
+
+        .vue-grid__container,
+        .sidebar,
+        .el-button.el-button--default {
+            border-color: $grid-border-color;
+        }
+    }
+}
diff --git a/web/libs/features/modules-interactivity/src/lib/components/module-interactive-part/module-interactive-part.component.scss b/web/libs/features/modules-interactivity/src/lib/components/module-interactive-part/module-interactive-part.component.scss
index d9ef6b12..180ea645 100644
--- a/web/libs/features/modules-interactivity/src/lib/components/module-interactive-part/module-interactive-part.component.scss
+++ b/web/libs/features/modules-interactivity/src/lib/components/module-interactive-part/module-interactive-part.component.scss
@@ -1,3 +1,5 @@
+$pagination-height: 58px;
+
 .module-interactivity-part {
     display: block;
     box-sizing: border-box;
@@ -11,8 +13,6 @@
     .drag-select {
         .sortable-ghost {
             opacity: 0.8;
-            color: #fff !important;
-            background: #909399 !important;
         }
 
         .el-tag {
@@ -86,13 +86,8 @@
         }
     }
 
-    .el-table .el-table__row_selected {
-        background-color: #f0f7ff;
-    }
-
     .el-pagination__selected {
         font-weight: normal;
-        color: #606266;
     }
 
     .el-table .el-table__row .cell {
@@ -110,9 +105,16 @@
         text-overflow: ellipsis;
     }
 
+    .el-table--fit {
+        height: calc(100% - $pagination-height) !important;
+    }
+
+    .el-pagination {
+        padding: 15px 15px;
+    }
+
     .vue-grid__search-input .el-input-group__prepend {
         width: 140px;
-        background-color: #fff;
     }
 
     .vue-grid__search-container_has-searchable-fields {
@@ -149,6 +151,14 @@
 
     .vue-grid__container {
         position: relative;
+        border-top: 1px solid transparent;
+    }
+
+    .sidebar {
+        width: 280px;
+        min-width: 280px;
+        padding: 15px 15px 0;
+        border-left: 1px solid transparent;
     }
 
     .vue-grid_no-selectable {
@@ -166,4 +176,8 @@
         right: 0;
         padding: 0 10px;
     }
+
+    .el-button.el-button--default {
+        border-color: transparent;
+    }
 }
diff --git a/web/libs/i18n-resources/en-US/modules-interactivity.json b/web/libs/i18n-resources/en-US/modules-interactivity.json
index 6e6bb7a8..466bb6df 100644
--- a/web/libs/i18n-resources/en-US/modules-interactivity.json
+++ b/web/libs/i18n-resources/en-US/modules-interactivity.json
@@ -1,8 +1,9 @@
 {
+    "ModulesInteractivity.Grid.DropdownItemText.ClearSelection": "Clear selection",
     "ModulesInteractivity.Grid.DropdownItemText.SelectAll": "Select All",
     "ModulesInteractivity.Grid.DropdownItemText.SelectPage": "Select everything on the page",
-    "ModulesInteractivity.Grid.DropdownItemText.ClearSelection": "Clear selection",
-    "ModulesInteractivity.Grid.Text.RowsSummary": "Total: {total}, {selected, select, all {all selected} other {selected: {selected}}}",
     "ModulesInteractivity.Grid.SelectPlaceholder.SelectColumns": "Select the displayed columns in the table",
+    "ModulesInteractivity.Grid.Text.RowsSummary": "Total: {total}",
+    "ModulesInteractivity.Grid.Text.RowsSummarySelected": "Total: {total}, {selected, select, all {all selected} other {selected: {selected}}}",
     "ModulesInteractivity.Grid.TooltipText.ColumnsSettings": "Columns setting"
 }
diff --git a/web/libs/i18n-resources/ru-RU/modules-interactivity.json b/web/libs/i18n-resources/ru-RU/modules-interactivity.json
index 33e26729..187422b4 100644
--- a/web/libs/i18n-resources/ru-RU/modules-interactivity.json
+++ b/web/libs/i18n-resources/ru-RU/modules-interactivity.json
@@ -1,8 +1,9 @@
 {
+    "ModulesInteractivity.Grid.DropdownItemText.ClearSelection": "Снять выделение",
     "ModulesInteractivity.Grid.DropdownItemText.SelectAll": "Выбрать все",
     "ModulesInteractivity.Grid.DropdownItemText.SelectPage": "Выбрать все на странице",
-    "ModulesInteractivity.Grid.DropdownItemText.ClearSelection": "Снять выделение",
-    "ModulesInteractivity.Grid.Text.RowsSummary": "Всего: {total}, {selected, select, all {выбраны все} other {выбрано: {selected}}}",
     "ModulesInteractivity.Grid.SelectPlaceholder.SelectColumns": "Выберите отображаемые столбцы в таблице",
+    "ModulesInteractivity.Grid.Text.RowsSummary": "Всего: {total}",
+    "ModulesInteractivity.Grid.Text.RowsSummarySelected": "Всего: {total}, {selected, select, all {выбраны все} other {выбрано: {selected}}}",
     "ModulesInteractivity.Grid.TooltipText.ColumnsSettings": "Выбрать столбцы"
 }
diff --git a/web/libs/styles/src/lib/_components.theme.scss b/web/libs/styles/src/lib/_components.theme.scss
index a28818ef..c26f9288 100644
--- a/web/libs/styles/src/lib/_components.theme.scss
+++ b/web/libs/styles/src/lib/_components.theme.scss
@@ -32,6 +32,7 @@
 @use '../../../features/agents/src/lib/routes/agents-page/agents-page.theme';
 @use '../../../features/distributions/src/lib/routes/distributions-page/distributions-page.theme';
 @use '../../../features/login/src/lib/routes/login-page/login-page.theme';
+@use '../../../features/modules-interactivity/src/lib/components/module-interactive-part/module-interactive-part.theme';
 @use '../../../features/modules/src/lib/components/import-module-modal/import-module-modal.theme';
 @use '../../../features/modules/src/lib/components/toggle-item/toggle-item.theme';
 @use '../../../features/password/src/lib/routes/password-change/password-change.theme';
@@ -47,6 +48,7 @@
     @include action-details-panel.action-details-panel-theme($mosaic-theme);
     @include action-priority.action-priority-theme($mosaic-theme);
     @include actionbar.actionbar-theme($mosaic-theme);
+    @include ag-grid-theme.ag-grid-theme($mosaic-theme);
     @include agent-connection-status.agent-connection-status-theme($mosaic-theme);
     @include agent-version.agent-version-theme($mosaic-theme);
     @include agents-page.agents-page-component-theme($mosaic-theme);
@@ -68,15 +70,15 @@
     @include import-module-modal.import-module-modal-theme($mosaic-theme);
     @include login-page.login-page-theme($mosaic-theme);
     @include mc-tabs.mc-tabs($mosaic-theme);
+    @include module-interactive-part.module-interactive-part-theme($mosaic-theme);
     @include modules-config.modules-config-theme($mosaic-theme);
     @include multiple-selection-panel.multiple-selection-panel-theme($mosaic-theme);
     @include navbar.navbar-theme($mosaic-theme);
     @include os.os-theme($mosaic-theme);
     @include page-layout.page-layout-theme($mosaic-theme);
-    @include progress-container.progress-container-theme($mosaic-theme);
     @include password-change.password-change-theme($mosaic-theme);
     @include policies-page.policies-page-component-theme($mosaic-theme);
-    @include ag-grid-theme.ag-grid-theme($mosaic-theme);
+    @include progress-container.progress-container-theme($mosaic-theme);
     @include related-list.related-list-theme($mosaic-theme);
     @include secure-module-config.secure-module-config-theme($mosaic-theme);
     @include sidebar.sidebar-theme($mosaic-theme);
diff --git a/web/libs/styles/src/lib/element-ui/components/table.scss b/web/libs/styles/src/lib/element-ui/components/table.scss
index 37e81c79..cbf90b36 100644
--- a/web/libs/styles/src/lib/element-ui/components/table.scss
+++ b/web/libs/styles/src/lib/element-ui/components/table.scss
@@ -48,10 +48,6 @@
             }
         }
 
-        &::before {
-            @include mixins.extend-rule(border-pseudo);
-        }
-
         // table--border
         @include mixins.m(border) {
             th {
diff --git a/web/libs/styles/src/lib/overriden-vue/_overriden-vue.theme.scss b/web/libs/styles/src/lib/overriden-vue/_overriden-vue.theme.scss
index f4ed5166..d839144f 100644
--- a/web/libs/styles/src/lib/overriden-vue/_overriden-vue.theme.scss
+++ b/web/libs/styles/src/lib/overriden-vue/_overriden-vue.theme.scss
@@ -26,4 +26,12 @@
     .vue_error-text {
         color: theming.mc-color(map-get($theme, error), 400) !important;
     }
+
+    .el-pagination .el-select .el-input .el-input__inner {
+        border-color: map-get($theme, foreground, divider);
+    }
+
+    .el-tabs--left .el-tabs__header.is-left {
+        margin-right: theming.$size-l;
+    }
 }