diff options
Diffstat (limited to 'src/views/_sila/Logs')
| -rw-r--r-- | src/views/_sila/Logs/Dumps/DumpsForm.vue | 6 | ||||
| -rw-r--r-- | src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue | 4 | ||||
| -rw-r--r-- | src/views/_sila/Logs/EventLogs/EventLogs.vue | 337 | ||||
| -rw-r--r-- | src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue | 256 |
4 files changed, 336 insertions, 267 deletions
diff --git a/src/views/_sila/Logs/Dumps/DumpsForm.vue b/src/views/_sila/Logs/Dumps/DumpsForm.vue index acd755c7..07f4a060 100644 --- a/src/views/_sila/Logs/Dumps/DumpsForm.vue +++ b/src/views/_sila/Logs/Dumps/DumpsForm.vue @@ -35,9 +35,9 @@ <script> import { required } from 'vuelidate/lib/validators'; import ModalConfirmation from './DumpsModalConfirmation'; -import Alert from '@/components/_sila/Global/Alert'; -import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; -import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import Alert from '@/components/Global/Alert'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; export default { components: { Alert, ModalConfirmation }, diff --git a/src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue index 49ef960e..f8e20cfd 100644 --- a/src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue +++ b/src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue @@ -38,8 +38,8 @@ </template> <script> -import StatusIcon from '@/components/_sila/Global/StatusIcon'; -import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import StatusIcon from '@/components/Global/StatusIcon'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; export default { components: { StatusIcon }, diff --git a/src/views/_sila/Logs/EventLogs/EventLogs.vue b/src/views/_sila/Logs/EventLogs/EventLogs.vue index adaa2e9e..dda42c6c 100644 --- a/src/views/_sila/Logs/EventLogs/EventLogs.vue +++ b/src/views/_sila/Logs/EventLogs/EventLogs.vue @@ -1,63 +1,93 @@ <template> - <b-container fluid="xl"> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + class="logs-section" + > <page-title /> + <div class="logs-head-container"> + <table-cell-count + :filtered-items-count="filteredRows" + :total-number-of-cells="allLogs.length" + ></table-cell-count> + <search + :placeholder="$t('pageEventLogs.table.searchLogs')" + data-test-id="eventLogs-input-searchLogs" + style="margin: 13px; width: 35%" + @change-search="onChangeSearchInput" + @clear-search="onClearSearchInput" + /> + </div> <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"> + <b-col md="12" xl="6"> <table-date-filter @change="onChangeDateTimeFilter" /> </b-col> - </b-row> - <b-row> - <b-col class="text-right"> + <b-col + md="12" + xl="6" + class="d-flex align-items-end justify-content-between mt-3" + > <table-filter :filters="tableFilters" @filter-change="onFilterChange" /> - <b-button - variant="link" - :disabled="allLogs.length === 0" - @click="deleteAllLogs" + <popover-with-slot + id="popover-delete" + :button-label="$t('pageEventLogs.clear')" + :popup-label="$t('pageEventLogs.clearLogs_popup')" + placement="left" + :action="deleteAllLogs" > - <icon-delete /> {{ $t('global.action.deleteAll') }} - </b-button> + <b-button + id="popover-delete" + ref="button" + variant="link" + style="color: $red-brand-primary" + :disabled="allLogs.length === 0" + > + <icon-delete /> {{ $t('pageEventLogs.clearLogs') }} + </b-button> + </popover-with-slot> <b-button variant="primary" + size="md" :class="{ disabled: allLogs.length === 0 }" :download="exportFileNameByDate()" :href="href" > - <icon-export /> {{ $t('global.action.exportAll') }} + <icon-download /> {{ $t('global.action.exportAll') }} </b-button> </b-col> </b-row> <b-row> - <b-col> + <b-col id="logs-table-wrapper" class="m-0 p-0"> <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"> + <b-button + size="md" + variant="secondary" + style="margin-right: 1rem" + @click="resolveLogs" + > + <img + class="sourse__img" + src="@/assets/images/_sila/event-logs/resolved-button.svg" + /> {{ $t('pageEventLogs.resolve') }} </b-button> - <b-button variant="primary" @click="unresolveLogs"> + <b-button + size="md" + variant="primary" + style="margin-right: 1rem" + @click="unresolveLogs" + > {{ $t('pageEventLogs.unresolve') }} </b-button> <table-toolbar-export :data="batchExportData" + style="margin-right: 1rem" :file-name="exportFileNameByDate()" /> </template> @@ -66,6 +96,7 @@ id="table-event-logs" ref="table" responsive="md" + class="logs-table" selectable no-select-on-click sort-icon-left @@ -73,7 +104,9 @@ no-sort-reset sort-desc show-empty + no-border-collapse sort-by="id" + :sticky-header="true" :fields="fields" :items="filteredLogs" :sort-compare="onSortCompare" @@ -106,126 +139,123 @@ <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)" + <!-- Description column --> + <template #cell(description)="data"> + <b-row class="semi-bold-16px tretiatry"> + {{ filteredLogs[data.index].name }} + </b-row> + <b-row + class="regular-12px tretiatry pointer" + @click="toggleRowDetails(data)" > - <icon-chevron /> - </b-button> + {{ data.value }} + </b-row> </template> <template #row-details="{ item }"> - <b-container fluid> + <b-container + fluid + style="border-bottom: 1px solid rgba(26, 62, 91, 0.1)" + > <b-row> - <b-col> + <b-col class="mt-1"> <dl> <!-- Name --> - <dt>{{ $t('pageEventLogs.table.name') }}:</dt> - <dd>{{ dataFormatter(item.name) }}</dd> + <dt class="semi-bold-12px"> + {{ $t('pageEventLogs.table.name') }}: + </dt> + <dd class="regular-12px">{{ dataFormatter(item.name) }}</dd> </dl> <dl> - <!-- Type --> - <dt>{{ $t('pageEventLogs.table.type') }}:</dt> - <dd>{{ dataFormatter(item.type) }}</dd> + <!-- Description --> + <dt class="semi-bold-12px"> + {{ $t('pageEventLogs.table.description') }}: + </dt> + <dd class="regular-12px tretiatry"> + {{ dataFormatter(item.description) }} + </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 }} + <!-- Type --> + <dt class="semi-bold-12px"> + {{ $t('pageEventLogs.table.type') }}: + </dt> + <dd class="regular-12px tretiatry"> + {{ dataFormatter(item.type) }} </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 }} + <span + :class="`indicators-${value}`" + class="bold-12px__caps" + style="text-overflow: ellipsis; white-space: nowrap" + > + {{ value }}</span + > </template> <!-- Date column --> <template #cell(date)="{ value }"> - <p class="mb-0">{{ value | formatDate }}</p> - <p class="mb-0">{{ value | formatTime }}</p> + <img + src="@/assets/images/_sila/event-logs/time.svg" + class="sourse__img" + /> + <span v-if="value" class="regular-12px quaternary"> + {{ value | formatDate }} + </span> + <span v-if="value" class="regular-12px quaternary"> + в {{ value | formatTimeShort }} + </span> </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"> + <template #cell(status)="{ value }"> + <b-row v-if="value === true"> + <img + class="sourse__img" + src="@/assets/images/_sila/event-logs/resolved.svg" + /> + <span class="semi-bold-12px__caps resolved"> {{ $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> + </b-row> + <b-row v-else> + <img + class="sourse__img" + src="@/assets/images/_sila/event-logs/not-resolved.svg" + /> + <span class="semi-bold-12px__caps not-resolved"> + {{ $t('pageEventLogs.unresolved') }}</span + > + </b-row> </template> </b-table> </b-col> </b-row> - <!-- Table pagination --> - <b-row> - <b-col sm="6"> + <b-row class="logs-pagination-container"> + <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-for="pagination-items-per-page" + label-class="semi-bold-16px mb-0" + label-for="pagination" > <b-form-select - id="pagination-items-per-page" + id="pagination" 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 @@ -241,21 +271,17 @@ <script> import IconDelete from '@carbon/icons-vue/es/trash-can/20'; -import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; -import IconExport from '@carbon/icons-vue/es/document--export/20'; -import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; import IconDownload from '@carbon/icons-vue/es/download/20'; import { omit } from 'lodash'; import PageTitle from '@/components/_sila/Global/PageTitle'; -import StatusIcon from '@/components/_sila/Global/StatusIcon'; import Search from '@/components/_sila/Global/Search'; import TableCellCount from '@/components/_sila/Global/TableCellCount'; import TableDateFilter from '@/components/_sila/Global/TableDateFilter'; import TableFilter from '@/components/_sila/Global/TableFilter'; -import TableRowAction from '@/components/_sila/Global/TableRowAction'; import TableToolbar from '@/components/_sila/Global/TableToolbar'; import TableToolbarExport from '@/components/_sila/Global/TableToolbarExport'; +import PopoverWithSlot from '@/components/_sila/Global/SilaComponents/PopoverWithSlot'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; @@ -282,19 +308,15 @@ import SearchFilterMixin, { export default { components: { IconDelete, - IconExport, - IconTrashcan, - IconChevron, IconDownload, PageTitle, Search, - StatusIcon, TableCellCount, TableFilter, - TableRowAction, TableToolbar, TableToolbarExport, TableDateFilter, + PopoverWithSlot, }, mixins: [ BVPaginationMixin, @@ -316,47 +338,52 @@ export default { data() { return { isBusy: true, + sortDesc: true, fields: [ { - key: 'expandRow', - label: '', - tdClass: 'table-row-expand', - }, - { key: 'checkbox', sortable: false, + thClass: ' logs-table__th', + tdClass: 'logs-table__td', }, { key: 'id', label: this.$t('pageEventLogs.table.id'), sortable: true, + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'semi-bold-12px logs-table__td', + }, + { + key: 'description', + label: this.$t('pageEventLogs.table.about_event'), + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td', }, { key: 'severity', label: this.$t('pageEventLogs.table.severity'), - sortable: true, - tdClass: 'text-nowrap', + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td', + }, + { + key: 'source', + label: this.$t('pageEventLogs.table.source'), + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td semi-bold-12px__caps tretiatry ', }, { key: 'date', label: this.$t('pageEventLogs.table.date'), sortable: true, - tdClass: 'text-nowrap', - }, - { - key: 'description', - label: this.$t('pageEventLogs.table.description'), - tdClass: 'text-break', + thClass: `bold-12px__caps logs-table__th`, + tdClass: 'logs-table__td', }, { key: 'status', + sortable: true, label: this.$t('pageEventLogs.table.status'), - }, - { - key: 'actions', - sortable: false, - label: '', - tdClass: 'text-right text-nowrap', + thClass: 'bold-12px__caps logs-table__th', + tdClass: 'logs-table__td', }, ], tableFilters: [ @@ -431,7 +458,7 @@ export default { return this.getFilteredTableData( this.filteredLogsByDate, this.activeFilters - ); + ).filter((el) => el.description); }, }, created() { @@ -454,21 +481,10 @@ export default { .catch(({ message }) => this.errorToast(message)); }, deleteAllLogs() { - this.$bvModal - .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), { - title: this.$t('pageEventLogs.modal.deleteAllTitle'), - okTitle: this.$t('global.action.delete'), - okVariant: 'danger', - cancelTitle: this.$t('global.action.cancel'), - }) - .then((deleteConfirmed) => { - if (deleteConfirmed) { - this.$store - .dispatch('eventLog/deleteAllEventLogs', this.allLogs) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)); - } - }); + this.$store + .dispatch('eventLog/deleteAllEventLogs', this.allLogs) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); }, deleteLogs(uris) { this.$store @@ -602,3 +618,20 @@ export default { }, }; </script> +<style lang="scss" scoped> +.semi-bold-14px { + margin: auto 0; +} +.row { + margin: 0px; +} + +.not-resolved { + color: $text-quaternary; +} + +.form-group, +.b-pagination { + margin: 0px !important; +} +</style> 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> |