From a4dcc4486cba71cd751327184a6651ebcba4e935 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Mon, 6 Jun 2022 18:39:19 +0300
Subject: Delete main-container, add global scroll to pages, add global style
 for logs.

---
 src/views/Logs/EventLogs/EventLogs.vue | 463 ++++++++++++++++-----------------
 1 file changed, 228 insertions(+), 235 deletions(-)

(limited to 'src/views/Logs')

diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 10aa9469..eb1c703a 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -1,248 +1,241 @@
 <template>
   <b-container fluid="xxl pt-0 m-2">
     <page-title />
-    <div class="main-container">
-      <b-row class="align-items-start">
-        <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
-          <search
-            :placeholder="$t('pageEventLogs.table.searchLogs')"
-            data-test-id="eventLogs-input-searchLogs"
-            @change-search="onChangeSearchInput"
-            @clear-search="onClearSearchInput"
-          />
-          <div class="ml-sm-4">
-            <table-cell-count
-              :filtered-items-count="filteredRows"
-              :total-number-of-cells="allLogs.length"
-            ></table-cell-count>
-          </div>
-        </b-col>
-        <b-col sm="8" md="7" xl="6">
-          <table-date-filter @change="onChangeDateTimeFilter" />
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col class="text-right">
-          <table-filter
-            :filters="tableFilters"
-            @filter-change="onFilterChange"
-          />
-          <b-button
-            variant="link"
-            :disabled="allLogs.length === 0"
-            @click="deleteAllLogs"
-          >
-            <icon-delete /> {{ $t('global.action.deleteAll') }}
-          </b-button>
-          <b-button
-            variant="primary"
-            :class="{ disabled: allLogs.length === 0 }"
-            :download="exportFileNameByDate()"
-            :href="href"
-          >
-            <icon-export /> {{ $t('global.action.exportAll') }}
-          </b-button>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col>
-          <table-toolbar
-            ref="toolbar"
-            :selected-items-count="selectedRows.length"
-            :actions="batchActions"
-            @clear-selected="clearSelectedRows($refs.table)"
-            @batch-action="onBatchAction"
-          >
-            <template #toolbar-buttons>
-              <b-button variant="primary" @click="resolveLogs">
-                {{ $t('pageEventLogs.resolve') }}
-              </b-button>
-              <b-button variant="primary" @click="unresolveLogs">
-                {{ $t('pageEventLogs.unresolve') }}
-              </b-button>
-              <table-toolbar-export
-                :data="batchExportData"
-                :file-name="exportFileNameByDate()"
-              />
-            </template>
-          </table-toolbar>
-          <b-table
-            id="table-event-logs"
-            ref="table"
-            responsive="md"
-            selectable
-            no-select-on-click
-            sort-icon-left
-            hover
-            no-sort-reset
-            sort-desc
-            show-empty
-            sort-by="id"
-            :fields="fields"
-            :items="filteredLogs"
-            :sort-compare="onSortCompare"
-            :empty-text="$t('global.table.emptyMessage')"
-            :empty-filtered-text="$t('global.table.emptySearchMessage')"
-            :per-page="perPage"
-            :current-page="currentPage"
-            :filter="searchFilter"
-            :busy="isBusy"
-            @filtered="onFiltered"
-            @row-selected="onRowSelected($event, filteredLogs.length)"
-          >
-            <!-- Checkbox column -->
-            <template #head(checkbox)>
-              <b-form-checkbox
-                v-model="tableHeaderCheckboxModel"
-                data-test-id="eventLogs-checkbox-selectAll"
-                :indeterminate="tableHeaderCheckboxIndeterminate"
-                @change="onChangeHeaderCheckbox($refs.table)"
-              >
-                <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
-              </b-form-checkbox>
-            </template>
-            <template #cell(checkbox)="row">
-              <b-form-checkbox
-                v-model="row.rowSelected"
-                :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
-                @change="toggleSelectRow($refs.table, row.index)"
-              >
-                <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
-              </b-form-checkbox>
-            </template>
+    <b-row class="align-items-start">
+      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
+        <search
+          :placeholder="$t('pageEventLogs.table.searchLogs')"
+          data-test-id="eventLogs-input-searchLogs"
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+        <div class="ml-sm-4">
+          <table-cell-count
+            :filtered-items-count="filteredRows"
+            :total-number-of-cells="allLogs.length"
+          ></table-cell-count>
+        </div>
+      </b-col>
+      <b-col sm="8" md="7" xl="6">
+        <table-date-filter @change="onChangeDateTimeFilter" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col class="text-right">
+        <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
+        <b-button
+          variant="link"
+          :disabled="allLogs.length === 0"
+          @click="deleteAllLogs"
+        >
+          <icon-delete /> {{ $t('global.action.deleteAll') }}
+        </b-button>
+        <b-button
+          variant="primary"
+          :class="{ disabled: allLogs.length === 0 }"
+          :download="exportFileNameByDate()"
+          :href="href"
+        >
+          <icon-export /> {{ $t('global.action.exportAll') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <table-toolbar
+          ref="toolbar"
+          :selected-items-count="selectedRows.length"
+          :actions="batchActions"
+          @clear-selected="clearSelectedRows($refs.table)"
+          @batch-action="onBatchAction"
+        >
+          <template #toolbar-buttons>
+            <b-button variant="primary" @click="resolveLogs">
+              {{ $t('pageEventLogs.resolve') }}
+            </b-button>
+            <b-button variant="primary" @click="unresolveLogs">
+              {{ $t('pageEventLogs.unresolve') }}
+            </b-button>
+            <table-toolbar-export
+              :data="batchExportData"
+              :file-name="exportFileNameByDate()"
+            />
+          </template>
+        </table-toolbar>
+        <b-table
+          id="table-event-logs"
+          ref="table"
+          responsive="md"
+          selectable
+          no-select-on-click
+          sort-icon-left
+          hover
+          no-sort-reset
+          sort-desc
+          show-empty
+          sort-by="id"
+          :fields="fields"
+          :items="filteredLogs"
+          :sort-compare="onSortCompare"
+          :empty-text="$t('global.table.emptyMessage')"
+          :empty-filtered-text="$t('global.table.emptySearchMessage')"
+          :per-page="perPage"
+          :current-page="currentPage"
+          :filter="searchFilter"
+          :busy="isBusy"
+          @filtered="onFiltered"
+          @row-selected="onRowSelected($event, filteredLogs.length)"
+        >
+          <!-- Checkbox column -->
+          <template #head(checkbox)>
+            <b-form-checkbox
+              v-model="tableHeaderCheckboxModel"
+              data-test-id="eventLogs-checkbox-selectAll"
+              :indeterminate="tableHeaderCheckboxIndeterminate"
+              @change="onChangeHeaderCheckbox($refs.table)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(checkbox)="row">
+            <b-form-checkbox
+              v-model="row.rowSelected"
+              :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
+              @change="toggleSelectRow($refs.table, row.index)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+            </b-form-checkbox>
+          </template>
 
-            <!-- Expand chevron icon -->
-            <template #cell(expandRow)="row">
-              <b-button
-                variant="link"
-                :aria-label="expandRowLabel"
-                :title="expandRowLabel"
-                class="btn-icon-only"
-                @click="toggleRowDetails(row)"
-              >
-                <icon-chevron />
-              </b-button>
-            </template>
+          <!-- Expand chevron icon -->
+          <template #cell(expandRow)="row">
+            <b-button
+              variant="link"
+              :aria-label="expandRowLabel"
+              :title="expandRowLabel"
+              class="btn-icon-only"
+              @click="toggleRowDetails(row)"
+            >
+              <icon-chevron />
+            </b-button>
+          </template>
 
-            <template #row-details="{ item }">
-              <b-container fluid>
-                <b-row>
-                  <b-col>
-                    <dl>
-                      <!-- Name -->
-                      <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
-                      <dd>{{ dataFormatter(item.name) }}</dd>
-                    </dl>
-                    <dl>
-                      <!-- Type -->
-                      <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
-                      <dd>{{ dataFormatter(item.type) }}</dd>
-                    </dl>
-                  </b-col>
-                  <b-col>
-                    <dl>
-                      <!-- Modified date -->
-                      <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
-                      <dd v-if="item.modifiedDate">
-                        {{ item.modifiedDate | formatDate }}
-                        {{ item.modifiedDate | formatTime }}
-                      </dd>
-                      <dd v-else>--</dd>
-                    </dl>
-                  </b-col>
-                  <b-col class="text-nowrap">
-                    <b-button
-                      class="btn btn-secondary float-right"
-                      :href="item.additionalDataUri"
-                      target="_blank"
-                    >
-                      <icon-download />{{
-                        $t('pageEventLogs.additionalDataUri')
-                      }}
-                    </b-button>
-                  </b-col>
-                </b-row>
-              </b-container>
-            </template>
+          <template #row-details="{ item }">
+            <b-container fluid>
+              <b-row>
+                <b-col>
+                  <dl>
+                    <!-- Name -->
+                    <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
+                    <dd>{{ dataFormatter(item.name) }}</dd>
+                  </dl>
+                  <dl>
+                    <!-- Type -->
+                    <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
+                    <dd>{{ dataFormatter(item.type) }}</dd>
+                  </dl>
+                </b-col>
+                <b-col>
+                  <dl>
+                    <!-- Modified date -->
+                    <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
+                    <dd v-if="item.modifiedDate">
+                      {{ item.modifiedDate | formatDate }}
+                      {{ item.modifiedDate | formatTime }}
+                    </dd>
+                    <dd v-else>--</dd>
+                  </dl>
+                </b-col>
+                <b-col class="text-nowrap">
+                  <b-button
+                    class="btn btn-secondary float-right"
+                    :href="item.additionalDataUri"
+                    target="_blank"
+                  >
+                    <icon-download />{{ $t('pageEventLogs.additionalDataUri') }}
+                  </b-button>
+                </b-col>
+              </b-row>
+            </b-container>
+          </template>
 
-            <!-- Severity column -->
-            <template #cell(severity)="{ value }">
-              <status-icon v-if="value" :status="statusIcon(value)" />
-              {{ value }}
-            </template>
-            <!-- Date column -->
-            <template #cell(date)="{ value }">
-              <p class="mb-0">{{ value | formatDate }}</p>
-              <p class="mb-0">{{ value | formatTime }}</p>
-            </template>
+          <!-- Severity column -->
+          <template #cell(severity)="{ value }">
+            <status-icon v-if="value" :status="statusIcon(value)" />
+            {{ value }}
+          </template>
+          <!-- Date column -->
+          <template #cell(date)="{ value }">
+            <p class="mb-0">{{ value | formatDate }}</p>
+            <p class="mb-0">{{ value | formatTime }}</p>
+          </template>
 
-            <!-- Status column -->
-            <template #cell(status)="row">
-              <b-form-checkbox
-                v-model="row.item.status"
-                name="switch"
-                switch
-                @change="changelogStatus(row.item)"
-              >
-                <span v-if="row.item.status">
-                  {{ $t('pageEventLogs.resolved') }}
-                </span>
-                <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
-              </b-form-checkbox>
-            </template>
-            <template #cell(filterByStatus)="{ value }">
-              {{ value }}
-            </template>
+          <!-- Status column -->
+          <template #cell(status)="row">
+            <b-form-checkbox
+              v-model="row.item.status"
+              name="switch"
+              switch
+              @change="changelogStatus(row.item)"
+            >
+              <span v-if="row.item.status">
+                {{ $t('pageEventLogs.resolved') }}
+              </span>
+              <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(filterByStatus)="{ value }">
+            {{ value }}
+          </template>
 
-            <!-- Actions column -->
-            <template #cell(actions)="row">
-              <table-row-action
-                v-for="(action, index) in row.item.actions"
-                :key="index"
-                :value="action.value"
-                :title="action.title"
-                :row-data="row.item"
-                :export-name="exportFileNameByDate('export')"
-                :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
-                @click-table-action="onTableRowAction($event, row.item)"
-              >
-                <template #icon>
-                  <icon-export v-if="action.value === 'export'" />
-                  <icon-trashcan v-if="action.value === 'delete'" />
-                </template>
-              </table-row-action>
-            </template>
-          </b-table>
-        </b-col>
-      </b-row>
+          <!-- Actions column -->
+          <template #cell(actions)="row">
+            <table-row-action
+              v-for="(action, index) in row.item.actions"
+              :key="index"
+              :value="action.value"
+              :title="action.title"
+              :row-data="row.item"
+              :export-name="exportFileNameByDate('export')"
+              :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
+              @click-table-action="onTableRowAction($event, row.item)"
+            >
+              <template #icon>
+                <icon-export v-if="action.value === 'export'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
 
-      <!-- Table pagination -->
-      <b-row>
-        <b-col sm="6">
-          <b-form-group
-            class="table-pagination-select"
-            :label="$t('global.table.itemsPerPage')"
-            label-for="pagination-items-per-page"
-          >
-            <b-form-select
-              id="pagination-items-per-page"
-              v-model="perPage"
-              :options="itemsPerPageOptions"
-            />
-          </b-form-group>
-        </b-col>
-        <b-col sm="6">
-          <b-pagination
-            v-model="currentPage"
-            first-number
-            last-number
-            :per-page="perPage"
-            :total-rows="getTotalRowCount(filteredRows)"
-            aria-controls="table-event-logs"
+    <!-- Table pagination -->
+    <b-row>
+      <b-col sm="6">
+        <b-form-group
+          class="table-pagination-select"
+          :label="$t('global.table.itemsPerPage')"
+          label-for="pagination-items-per-page"
+        >
+          <b-form-select
+            id="pagination-items-per-page"
+            v-model="perPage"
+            :options="itemsPerPageOptions"
           />
-        </b-col>
-      </b-row>
-    </div>
+        </b-form-group>
+      </b-col>
+      <b-col sm="6">
+        <b-pagination
+          v-model="currentPage"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount(filteredRows)"
+          aria-controls="table-event-logs"
+        />
+      </b-col>
+    </b-row>
   </b-container>
 </template>
 
-- 
cgit v1.2.3