<template>
<div>
<v-row no-gutters>
<ItemsSelectionFloating
v-if="datasetState.enableSelection"
:dataset-state="datasetState"
:store-module-name="storeModuleName"
/>
<v-row v-if="showSelection" no-gutters>
<v-col cols="12">
<v-row>
<v-col cols="6">
......@@ -33,12 +38,14 @@
// import QuickTextSearch from '~/web-components-submodule/components/common/Browsers/items/QuickTextSearch.vue'
import ChEMBLDataTable from '~/web-components-submodule/components/common/dataSets/data_table/ChEMBLDataTable.vue'
import ItemsSelection from '~/web-components-submodule/components/common/Browsers/items/ItemsSelection.vue'
import ItemsSelectionFloating from '~/web-components-submodule/components/common/Browsers/items/ItemsSelectionFloating.vue'
export default {
components: {
// QuickTextSearch,
ChEMBLDataTable,
ItemsSelection,
ItemsSelectionFloating,
},
props: {
datasetState: {
......@@ -54,6 +61,14 @@ export default {
exceptionsItems() {
return [...this.datasetState.selection.exceptions]
},
showSelection() {
switch (this.$vuetify.breakpoint.name) {
case 'xs':
return false
default:
return true
}
},
},
}
</script>
......
<template>
<v-banner v-if="show" sticky class="grey lighten-4">
<v-row dense>
<v-col cols="12">
<ItemsSelection
v-if="datasetState.enableSelection"
:dataset-state="datasetState"
:store-module-name="storeModuleName"
/>
</v-col>
<v-col cols="12">
<LinksToOtherEntities
v-if="datasetState.initialLoad && thereAreLinksToOtherEntities"
class="actions-item"
:store-module-name="storeModuleName"
:dataset-state="datasetState"
/>
</v-col>
</v-row>
</v-banner>
</template>
<script>
import ItemsSelection from '~/web-components-submodule/components/common/Browsers/items/ItemsSelection.vue'
import LinksToOtherEntities from '~/web-components-submodule/components/common/Browsers/actions/LinksToOtherEntities.vue'
export default {
components: {
ItemsSelection,
LinksToOtherEntities,
},
props: {
datasetState: {
type: Object,
default: () => {},
},
storeModuleName: {
type: String,
default: () => '',
},
},
computed: {
show() {
const showBecauseOfSelection =
this.datasetState.selection.numItemsSelected > 0 &&
this.datasetState.initialLoad
const showBecauseOfScreenSize = ['xs'].includes(
this.$vuetify.breakpoint.name
)
return showBecauseOfSelection && showBecauseOfScreenSize
},
thereAreLinksToOtherEntities() {
if (this.datasetState.possibleJoinDestinations == null) {
return false
}
if (this.datasetState.possibleJoinDestinations.length === 0) {
return false
}
return true
},
},
}
</script>
<style lang="scss" scoped></style>
<template>
<div class="d-flex justify-end">
<div class="d-flex" :class="layoutClasses">
<v-skeleton-loader v-if="showSkeletonLoader" type="list-item">
</v-skeleton-loader>
<v-pagination
......@@ -41,6 +41,18 @@ export default {
return 7
}
},
layoutClasses() {
switch (this.$vuetify.breakpoint.name) {
case 'xs':
return {
'justify-center': true,
}
default:
return {
'justify-end': true,
}
}
},
},
methods: {
triggerNextPage() {
......
<template>
<v-card :outlined="outlinedCard">
<v-card-text>
<v-row v-if="thereAreItems" dense>
<v-col cols="6" offset="3" offset-sm="0" sm="2" order="1">
<ChEMBLSelectItemsPerPage
:dataset-state="datasetState"
@setItemsPerPage="setItemsPerPage"
/>
</v-col>
<v-col
v-if="inReportCard"
cols="3"
class="d-flex justify-center align-center"
order="2"
>
<v-btn
v-if="inReportCard"
small
depressed
color="primary"
:loading="datasetState.browseAll.processingLink"
@click="goToFullBrowser"
>
Browse All
</v-btn>
</v-col>
<v-col cols="12" sm="10" order="3" order-lg="4" lg="6">
<ChEMBLPaginator
:dataset-state="datasetState"
@next="loadNextPage"
@previous="loadPreviousPage"
@input="triggerPage"
/>
</v-col>
<v-col
cols="12"
class="d-flex justify-center align-center"
order="4"
order-lg="3"
lg="4"
>
<ChEMBLItemsCounts :dataset-state="datasetState" />
</v-col>
</v-row>
<div @click="recordIteratorClickCoordinates">
<v-card :outlined="outlinedCard">
<v-card-text>
<v-row v-if="thereAreItems" dense>
<v-col cols="6" offset="3" offset-sm="0" sm="2" order="1">
<ChEMBLSelectItemsPerPage
:dataset-state="datasetState"
@setItemsPerPage="setItemsPerPage"
/>
</v-col>
<v-row>
<v-col cols="12">
<v-skeleton-loader
v-if="showSkeletonLoader"
type="table-heading, table-tbody, actions"
<v-col cols="12" sm="6" order="2" order-sm="3" order-lg="4" lg="4">
<ChEMBLPaginator
:dataset-state="datasetState"
@next="loadNextPage"
@previous="loadPreviousPage"
@input="triggerPage"
/>
</v-col>
<v-col
cols="12"
class="d-flex justify-center align-center"
order="3"
order-sm="4"
order-lg="3"
lg="4"
>
</v-skeleton-loader>
<v-data-table
v-if="showTable"
:value="datasetState.selection.selectedInPage"
:headers="datasetState.currentHeaders"
:loading="datasetState.pageLoading"
:items="datasetState.currentItems"
:items-per-page="datasetState.itemsPerPage"
:page-count="datasetState.pageCount"
hide-default-footer
:server-items-length="datasetState.totalItems"
dense
multi-sort
:show-select="datasetState.enableSelection"
:hide-default-header="true"
@update:sort-by="triggerSort"
@update:sort-desc="triggerSortDirection"
@item-selected="itemSelected"
@toggle-select-all="allSelected"
<ChEMBLItemsCounts :dataset-state="datasetState" />
</v-col>
<v-col
cols="12"
sm="4"
lg="2"
class="d-flex justify-center align-center"
order-sm="2"
order="4"
>
<template #header="{ on, props, isMobile }">
<v-data-table-header
:some-items="datasetState.selection.someItemsSelected"
v-bind="props"
:is-mobile="isMobile"
v-on="on"
/>
</template>
<template
v-for="slot in datasetState.slots"
#[slot.slotID]="{ item }"
<v-btn
v-if="inReportCard"
small
depressed
color="primary"
:loading="datasetState.browseAll.processingLink"
@click="goToFullBrowser"
>
<ChEMBLDataSlot
:key="slot.slotID"
:slot-description="slot"
:item="item"
/>
</template>
</v-data-table>
</v-col>
</v-row>
Browse All
</v-btn>
</v-col>
</v-row>
<v-row v-if="thereAreItems" dense>
<v-col cols="12" class="d-flex justify-center align-center" sm="4">
<ChEMBLItemsCounts :dataset-state="datasetState" />
</v-col>
<v-col cols="8">
<ChEMBLPaginator
:dataset-state="datasetState"
@next="loadNextPage"
@previous="loadPreviousPage"
@input="triggerPage"
/>
</v-col>
</v-row>
</v-card-text>
</v-card>
<v-row>
<v-col cols="12">
<v-skeleton-loader
v-if="showSkeletonLoader"
type="table-heading, table-tbody, actions"
>
</v-skeleton-loader>
<v-data-table
v-if="showTable"
:value="datasetState.selection.selectedInPage"
:headers="datasetState.currentHeaders"
:loading="datasetState.pageLoading"
:items="datasetState.currentItems"
:items-per-page="datasetState.itemsPerPage"
:page-count="datasetState.pageCount"
hide-default-footer
:server-items-length="datasetState.totalItems"
dense
multi-sort
:show-select="datasetState.enableSelection"
:hide-default-header="true"
@update:sort-by="triggerSort"
@update:sort-desc="triggerSortDirection"
@item-selected="itemSelected"
@toggle-select-all="allSelected"
>
<template #header="{ on, props, isMobile }">
<v-data-table-header
:some-items="datasetState.selection.someItemsSelected"
v-bind="props"
:is-mobile="isMobile"
v-on="on"
/>
</template>
<template
v-for="slot in datasetState.slots"
#[slot.slotID]="{ item }"
>
<ChEMBLDataSlot
:key="slot.slotID"
:slot-description="slot"
:item="item"
/>
</template>
</v-data-table>
</v-col>
</v-row>
<v-row v-if="thereAreItems" dense>
<v-col cols="12" class="d-flex justify-center align-center" sm="4">
<ChEMBLItemsCounts :dataset-state="datasetState" />
</v-col>
<v-col cols="8">
<ChEMBLPaginator
:dataset-state="datasetState"
@next="loadNextPage"
@previous="loadPreviousPage"
@input="triggerPage"
/>
</v-col>
</v-row>
</v-card-text>
</v-card>
</div>
</template>
<script>
......@@ -197,7 +203,7 @@ export default {
const setSortDesc = `${this.storeModuleName}/setSortDesc`
this.$store.dispatch(setSortDesc, sortParams)
},
itemSelected({ item, value }) {
itemSelected({ item, value }, event) {
const id = item.id
const setItemSelectedAction = `${this.storeModuleName}/setItemSelected`
this.$store.dispatch(setItemSelectedAction, { id, value })
......@@ -210,6 +216,9 @@ export default {
const goToFullBrowserAction = `${this.storeModuleName}/goToFullBrowser`
this.$store.dispatch(goToFullBrowserAction)
},
recordIteratorClickCoordinates() {
console.log('recordIteratorClickCoordinates')
},
},
}
</script>
......