From 931c2cad0da1a84e3df0745b385ec06d29cc2634 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Mon, 20 Jun 2022 11:52:15 +0300
Subject: fix Modals, Tables and Pages: event logs, inventoty, post logs,
 operttions, global styles

---
 src/views/Logs/PostCodeLogs/PostCodeLogs.vue | 232 ++++++++++++++++-----------
 1 file changed, 137 insertions(+), 95 deletions(-)

(limited to 'src/views/Logs/PostCodeLogs/PostCodeLogs.vue')

diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index d116d2ed..b13cef46 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -1,26 +1,29 @@
 <template>
-  <b-container fluid="xl">
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+    class="logs-section"
+  >
     <page-title />
-    <b-row class="align-items-start">
-      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
-        <search
-          :placeholder="$t('pagePostCodeLogs.table.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">
+    <div class="logs-head-container">
+      <div class="semi-bold-12px">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="allLogs.length"
+        ></table-cell-count>
+      </div>
+      <search
+        :placeholder="$t('pagePostCodeLogs.table.searchLogs')"
+        style="margin: 13px; width: 35%"
+        @change-search="onChangeSearchInput"
+        @clear-search="onClearSearchInput"
+      />
+    </div>
+    <b-row class="align-items-start m-0 p-0">
+      <b-col sm="7" md="6" xl="5">
         <table-date-filter @change="onChangeDateTimeFilter" />
       </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="12" class="text-right">
+      <b-col class="d-flex justify-content-end mt-3">
         <b-button
           variant="primary"
           :disabled="allLogs.length === 0"
@@ -31,8 +34,8 @@
         </b-button>
       </b-col>
     </b-row>
-    <b-row>
-      <b-col>
+    <b-row class="m-0 p-0">
+      <b-col class="p-0">
         <table-toolbar
           ref="toolbar"
           :selected-items-count="selectedRows.length"
@@ -40,107 +43,116 @@
         >
           <template #toolbar-buttons>
             <table-toolbar-export
+              style="margin-right: 1rem"
               :data="batchExportData"
               :file-name="exportFileNameByDate()"
             />
           </template>
         </table-toolbar>
-        <b-table
-          id="table-post-code-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"
-          :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="postCode-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="`postCode-checkbox-selectRow-${row.index}`"
-              @change="toggleSelectRow($refs.table, row.index)"
-            >
-              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
-            </b-form-checkbox>
-          </template>
-          <!-- Date column -->
-          <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
-          </template>
+        <div id="logs-table-wrapper">
+          <b-table
+            id="logs-table"
+            ref="table"
+            responsive="md"
+            class="logs-table"
+            selectable
+            no-select-on-click
+            sort-icon-left
+            hover
+            no-sort-reset
+            sort-desc
+            show-empty
+            sort-by="id"
+            :no-border-collapse="true"
+            :sticky-header="true"
+            :fields="fields"
+            :items="filteredLogs"
+            :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="postCode-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="`postCode-checkbox-selectRow-${row.index}`"
+                @change="toggleSelectRow($refs.table, row.index)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+              </b-form-checkbox>
+            </template>
+            <!-- Date column -->
+            <template #cell(date)="{ value }">
+              <p class="mb-0">{{ value | formatDate }}</p>
+              <p class="mb-0">{{ value | formatTime }}</p>
+            </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"
-              :btn-icon-only="true"
-              :export-name="exportFileNameByDate(action.value)"
-              :download-location="row.item.uri"
-              :download-in-new-tab="true"
-              :show-button="false"
-            >
-              <template #icon>
-                <icon-export v-if="action.value === 'export'" />
-                <icon-download v-if="action.value === 'download'" />
-              </template>
-            </table-row-action>
-          </template>
-        </b-table>
+            <!-- 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"
+                :btn-icon-only="true"
+                :export-name="exportFileNameByDate(action.value)"
+                :download-location="row.item.uri"
+                :download-in-new-tab="true"
+                :show-button="false"
+              >
+                <template #icon>
+                  <icon-export v-if="action.value === 'export'" />
+                  <icon-download v-if="action.value === 'download'" />
+                </template>
+              </table-row-action>
+            </template>
+          </b-table>
+        </div>
       </b-col>
     </b-row>
 
     <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
+    <b-row class="logs-pagination-container m-0">
+      <b-col sm="6" class="d-flex align-items-center justify-content-start">
         <b-form-group
           class="table-pagination-select"
           :label="$t('global.table.itemsPerPage')"
+          label-class="semi-bold-16px mb-0"
           label-for="pagination-items-per-page"
         >
           <b-form-select
             id="pagination-items-per-page"
             v-model="perPage"
+            class="select-per-page semi-bold-16px mb-0"
             :options="itemsPerPageOptions"
           />
         </b-form-group>
       </b-col>
-      <b-col sm="6">
+      <b-col sm="6" class="d-flex align-items-center justify-content-end">
+        <span class="semi-bold-16px"> Страницы </span>
         <b-pagination
           v-model="currentPage"
           first-number
           last-number
           :per-page="perPage"
           :total-rows="getTotalRowCount(filteredRows)"
-          aria-controls="table-post-code-logs"
+          aria-controls="table-event-logs"
         />
       </b-col>
     </b-row>
@@ -210,32 +222,44 @@ export default {
   data() {
     return {
       isBusy: true,
+      // stickyHeader: 'calc(100vh - 307px)',
       fields: [
         {
           key: 'checkbox',
           sortable: false,
+          thClass: ' logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'date',
           label: this.$t('pagePostCodeLogs.table.created'),
           sortable: true,
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'semi-bold-12px logs-table__td',
         },
         {
           key: 'timeStampOffset',
           label: this.$t('pagePostCodeLogs.table.timeStampOffset'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'bootCount',
           label: this.$t('pagePostCodeLogs.table.bootCount'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'postCode',
           label: this.$t('pagePostCodeLogs.table.postCode'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td semi-bold-12px__caps',
         },
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right text-nowrap',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'text-right logs-table__td',
         },
       ],
       expandRowLabel,
@@ -345,3 +369,21 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.table-pagination-select {
+  line-height: 1.8rem;
+}
+
+.form-group,
+.b-pagination {
+  margin: 0px !important;
+}
+.items-per-page {
+  padding: 0 0 0 5px;
+  width: 55px;
+  height: 24px;
+  background-color: transparent;
+  border: 1px solid $on-surface-tretiatry;
+  border-radius: 4px;
+}
+</style>
-- 
cgit v1.2.3