diff options
Diffstat (limited to 'src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue')
| -rw-r--r-- | src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue | 256 |
1 files changed, 146 insertions, 110 deletions
diff --git a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue index e05ef639..14359dfb 100644 --- a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue +++ b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue @@ -1,26 +1,27 @@ <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"> + <table-cell-count + :filtered-items-count="filteredRows" + :total-number-of-cells="allLogs.length" + ></table-cell-count> + <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 +32,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 +41,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> @@ -151,33 +161,33 @@ import IconDownload from '@carbon/icons-vue/es/download/20'; import IconExport from '@carbon/icons-vue/es/document--export/20'; import { omit } from 'lodash'; -import PageTitle from '@/components/_sila/Global/PageTitle'; -import Search from '@/components/_sila/Global/Search'; -import TableCellCount from '@/components/_sila/Global/TableCellCount'; -import TableDateFilter from '@/components/_sila/Global/TableDateFilter'; -import TableRowAction from '@/components/_sila/Global/TableRowAction'; -import TableToolbar from '@/components/_sila/Global/TableToolbar'; -import TableToolbarExport from '@/components/_sila/Global/TableToolbarExport'; -import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; -import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import PageTitle from '@/components/Global/PageTitle'; +import Search from '@/components/Global/Search'; +import TableCellCount from '@/components/Global/TableCellCount'; +import TableDateFilter from '@/components/Global/TableDateFilter'; +import TableRowAction from '@/components/Global/TableRowAction'; +import TableToolbar from '@/components/Global/TableToolbar'; +import TableToolbarExport from '@/components/Global/TableToolbarExport'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; import BVPaginationMixin, { currentPage, perPage, itemsPerPageOptions, -} from '@/components/_sila/Mixins/BVPaginationMixin'; +} from '@/components/Mixins/BVPaginationMixin'; import BVTableSelectableMixin, { selectedRows, tableHeaderCheckboxModel, tableHeaderCheckboxIndeterminate, -} from '@/components/_sila/Mixins/BVTableSelectableMixin'; -import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; -import TableSortMixin from '@/components/_sila/Mixins/TableSortMixin'; +} from '@/components/Mixins/BVTableSelectableMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import TableSortMixin from '@/components/Mixins/TableSortMixin'; import TableRowExpandMixin, { expandRowLabel, -} from '@/components/_sila/Mixins/TableRowExpandMixin'; +} from '@/components/Mixins/TableRowExpandMixin'; import SearchFilterMixin, { searchFilter, -} from '@/components/_sila/Mixins/SearchFilterMixin'; +} from '@/components/Mixins/SearchFilterMixin'; export default { components: { @@ -210,32 +220,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 +367,17 @@ export default { }, }; </script> +<style lang="scss" scoped> +.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> |