<template lang="pug">
.vehicle_alerts_table(ref="root")
.table_toolbar
TableModesToolbar(
:mode="mode"
@switchToListMode="switchToListMode({mapComponent:'LocationIdentBacsMap',selectedSubMenuTab:'identification_bacs'})"
@switchToTablePlusMapMode="switchToTablePlusMapMode({top: 'LocationIdentBacsMap', bottom: 'LocationIdentBacsTable'})"
@switchToTableMode="switchToTableMode({component: 'LocationIdentBacsTable'})"
)
DataTable(
v-if="table"
class="table_theme_1"
ref="datatable",
:ssrPaging="false",
:ssrShowMultiColumnFilter="false",
:searching="true",
:paging="true",
name="locationIdentification",
rowId="id",
scrollY="250px",
:columns="columns",
:columnDefs="columnDefs",
:language="$translations.datatable",
:extraOptions="extraOptions || {}",
:select="select",
:defaultSortingColumn="1"
@select="onSelect"
@deselect="onDeselect"
:autoHeight="true"
:autoHeightOffset="mode==='table'?0:0"
)
</template>
<script>
import DataTable, {
createComponentRender,
} from '@/components/shared/DataTable/DataTable.vue'
import { mapGetters } from 'vuex'
import $ from 'jquery'
import datatableMixin from '@/mixins/datatable.js'
import TableModesToolbar from '@c/shared/TableModesToolbar/TableModesToolbar.vue'
import locationLayoutModesMixin from '@c/location/mixins/location-layout-modes.js'
const R = require('ramda')
import { createSortableColumnDefinition } from '@/utils/datatable.js'
/**
* Table feature
* @namespace components
* @category components
* @subcategory location/identification
* @module LocationIdentBacsTable
**/
export default {
name: 'LocationIdentBacsTable',
components: {
DataTable,
TableModesToolbar,
},
mixins: [datatableMixin, locationLayoutModesMixin],
props: {
mode: {
type: String,
default: 'table+map',
enum: ['table', 'table+map'],
},
},
data() {
var self = this
return {
isModalOpen: false,
showInformationsPopup: false,
table: false,
select: {
items: 'row',
style: 'single',
info: false,
},
columns: [
{
data: 'zoomIcon',
title: '',
},
{
data: 'bacIcon',
title: '',
},
{
data: 'eyeIcon',
title: '',
},
createSortableColumnDefinition(
`timestamp`,
`formattedDate`,
this.$t('common.date')
),
createSortableColumnDefinition(
`timeUnix`,
`formattedTime`,
this.$t('common.hour')
),
createSortableColumnDefinition(
`vehicleName`,
`vehicleName`,
this.$t('common.Véhicule')
),
createSortableColumnDefinition(
`circuitName`,
`circuitName`,
this.$t('common.Circuit')
),
createSortableColumnDefinition(
`puceNumber`,
`puceNumber`,
this.$t('location_module.identification_bacs.table.puce')
),
createSortableColumnDefinition(
`weight`,
`weight`,
this.$t('location_module.identification_bacs.table.weight')
),
createSortableColumnDefinition(
`formattedAddress`,
`formattedAddress`,
this.$t('common.Adresse')
),
createSortableColumnDefinition(
`chairType`,
`chairType`,
this.$t('location_module.identification_bacs.table.chair_type')
),
createSortableColumnDefinition(
`isIdentified`,
`isIdentified`,
this.$t('location_module.identification_bacs.table.is_identified')
),
createSortableColumnDefinition(
`isStopped`,
`isStopped`,
this.$t('location_module.identification_bacs.table.is_stopped')
),
createSortableColumnDefinition(
`isHighPoint`,
`isHighPoint`,
this.$t('location_module.identification_bacs.table.is_highpoint')
),
createSortableColumnDefinition(
`isBlacklisted`,
`isBlacklisted`,
this.$t('location_module.identification_bacs.table.is_blacklisted')
),
],
columnDefs: [
{
targets: 0,
orderable: false,
render: createComponentRender({
name: 'ZoomActionButton',
template: `<div><em v-show="!this.row.hasInvalidCoords" @click="handleZoom" class="fas fa-search" style="cursor:pointer;"></em></div>`,
methods: {
handleZoom(e) {
e.stopPropagation()
self.$mitt.emit('SIMPLICITI_MAP_FIT_TO_BOUNDS', [
[this.row.lat, this.row.lng],
])
self.$mitt.emit('SIMPLICITI_MAP_OPEN_MARKER_POPUP', {
groupName: 'bacs_markers',
layerId: this.row.id,
})
},
},
}),
},
{
targets: 1,
orderable: false,
render: createComponentRender({
name: 'bacIcon',
template: `<div style="display: flex;justify-content: flex-start;align-items: center;column-gap: 3px;">
<svg
:fill="!this.row.isStopped ? '#014470' : 'red'"
class="material-design-icon__svg"
v-b-tooltip.hover.right
:title="!this.row.isStopped ? $t('location_module.identification_bacs.bac_collected') : $t('location_module.identification_bacs.bac_uncollected')"
:width="20"
:height="20"
viewBox="0 0 24 24">
<path class="icon-svg" d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,12.5A1.5,1.5 0 0,1 10.5,11A1.5,1.5 0 0,1 12,9.5A1.5,1.5 0 0,1 13.5,11A1.5,1.5 0 0,1 12,12.5M12,7.2C9.9,7.2 8.2,8.9 8.2,11C8.2,14 12,17.5 12,17.5C12,17.5 15.8,14 15.8,11C15.8,8.9 14.1,7.2 12,7.2Z">
</path>
</svg>
<div v-show="this.row.hasInvalidCoords"
v-b-tooltip.hover.viewport
:title="$t('common.invalid_position')"
>
<em style="color: var(--color-sandy-brown);" class="fa fa-exclamation-triangle"></em>
</div>
</div>`,
}),
},
{
targets: 2,
orderable: false,
render: createComponentRender({
name: 'eyeIcon',
template: `<em @click.self="showBacInformationModal" class="fas fa-eye" style="cursor:pointer;"></em>`,
methods: {
showBacInformationModal(e) {
e.stopPropagation()
self.showBacModal(true, this.row)
},
},
}),
},
{
targets: 11,
orderable: true,
sort: 'isIdentified',
render: createComponentRender({
name: 'BacIsIdentified',
template: `<em :class="setIcon(this.row)" :style="getIconColor(this.row)"></em>`,
methods: {
setIcon(item) {
return item.isIdentified ? 'fas fa-check' : 'fas fa-times'
},
getIconColor(item) {
return item.isIdentified ? 'color: green;' : 'color: red;'
},
},
}),
},
{
targets: 12,
orderable: true,
sort: 'isStopped',
render: createComponentRender({
name: 'BacIsStopped',
template: `<em :class="setIcon(this.row)" :style="getIconColor(this.row)"></em>`,
methods: {
setIcon(item) {
return item.isStopped ? 'fas fa-check' : 'fas fa-times'
},
getIconColor(item) {
return item.isStopped ? 'color: green;' : 'color: red;'
},
},
}),
},
{
targets: 13,
title: this.$t(
'location_module.identification_bacs.table.is_highpoint'
),
orderable: true,
sort: 'isHighPoint',
render: createComponentRender({
name: 'BacIsHighPoint',
template: `<div>
<em v-if="typeof this.row.isHighPoint==='boolean'" :class="setIcon(this.row)" :style="getIconColor(this.row)"></em>
<span v-if="typeof this.row.isHighPoint!=='boolean'">{{this.row.isHighPoint}}</span>
</div>`,
methods: {
setIcon(item) {
return item.isHighPoint ? 'fas fa-check' : 'fas fa-times'
},
getIconColor(item) {
return item.isHighPoint ? 'color: green;' : 'color: red;'
},
},
}),
},
{
targets: 14,
orderable: true,
sort: 'isBlacklisted',
render: createComponentRender({
name: 'BacIsBlacklisted',
template: `<em :class="setIcon(this.row)" :style="getIconColor(this.row)"></em>`,
methods: {
setIcon(item) {
return item.isBlacklisted ? 'fas fa-check' : 'fas fa-times'
},
getIconColor(item) {
return item.isBlacklisted ? 'color: green;' : 'color: red;'
},
},
}),
},
{
targets: 7,
width: '500px',
},
],
extraOptions: {
...this.configureColumnsFilters((filters) => {
return [
null,
null,
null,
filters.createTextFilter({ column: 3 }),
filters.createTextFilter({ column: 4 }),
filters.createTextFilter({ column: 5 }),
filters.createTextFilter({ column: 6 }),
filters.createTextFilter({ column: 7 }),
filters.createTextFilter({ column: 8 }),
filters.createTextFilter({ column: 9 }),
filters.createTextFilter({ column: 10 }),
null,
null,
null,
null,
]
}),
...this.configureExportButtons(),
dom: 'rtip',
pageLength: 20,
info: true,
},
}
},
computed: {
...mapGetters({
results: 'location_module/identificationBacsDetails',
selectedItem: 'location_module/selectedItem',
}),
},
watch: {
results() {
this.updateTable()
},
},
mounted() {
$.fn.dataTable.moment(this.$date.getDatetimePattern())
this.updateTable()
this.$store.dispatch('app/changeLayout', {
currentLayoutName: 'IDENTIFICATION_TABLE',
menu_full_collapse: true,
menu_collapsed: true,
})
setTimeout(() => {
this.table = true
setTimeout(() => {
this.$refs.datatable.datatable.draw()
}, 500)
}, 200)
},
destroyed() {
if (this.$store.state.search_module.view !== 'selection') {
this.$store.dispatch('app/changeLayout', {
currentLayoutName: 'IDENTIFICATION_LIST',
menu_full_collapse: false,
sub_menu: true,
})
}
this.$store.commit('location_module/SET_IDENTIFICATION_BAC_MODAL', false)
},
methods: {
onDeselect() {
/*this.$mitt.emit(
'SIMPLICITI_MAP_FIT_TO_BOUNDS',
this.results.map((item) => [item.lat, item.lng])
)*/
},
onSelect({ item }) {
if (!item.hasInvalidCoords) {
this.$mitt.emit('SIMPLICITI_MAP_FIT_TO_BOUNDS', [[item.lat, item.lng]])
}
},
updateTable() {
this.$store.dispatch('datatable/setTableItems', {
name: 'locationIdentification',
items: this.results,
})
},
showBacModal(value, item) {
this.$store
.dispatch('location_module/getIdentificationBacModalDetails', item)
.then(() => {
this.$store.commit(
'location_module/SET_IDENTIFICATION_BAC_MODAL',
value
)
})
.catch((error) => {
console.log(error)
})
},
},
}
</script>
<style lang="scss" scoped>
.title {
padding: 5px 10px 0px 10px;
margin-bottom: 0px;
flex-shrink: 0;
}
.title,
.title span,
.title strong {
font-size: 12px;
}
.vehicle_alerts_table {
height: 100%;
height: -moz-available; /* WebKit-based browsers will ignore this. */
height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
height: fill-available;
}
.table_toolbar {
display: flex;
align-items: center;
}
</style>
Source