diff --git a/src/views/DataTableView.vue b/src/views/DataTableView.vue index cfe0187a9c37b1478f08edb3e4e64bc3774aa7a0..e85eda5bd59a7fea50dfe8d9c85b20ffcd2d2ce3 100644 --- a/src/views/DataTableView.vue +++ b/src/views/DataTableView.vue @@ -2,7 +2,7 @@ /** * Vue imports */ -import { ref, computed, watch } from 'vue' +import { ref, computed, watch, watchEffect } from 'vue' /** * Components imports */ @@ -535,36 +535,48 @@ const columnIds = columns.map((column) => column.id) * Columns IDs to display initially (from props), filtered by keeping only those * actually existing. */ -const filteredInitialColumnsIds = props.initialColumnIds?.filter((columnId) => - columnIds?.includes(columnId) +const filteredInitialColumnsIds = computed(() => + props.initialColumnIds?.filter((columnId) => columnIds?.includes(columnId)) ) /** * Columns IDs to display initially, with default value if none provided. */ -const initialColumnIdsWithDefaults = filteredInitialColumnsIds?.length - ? filteredInitialColumnsIds - : [ - 'modificationName', - 'modificationPosition', - 'modificationSymbol', - 'targetName', - 'targetClass', - 'guideName', - 'guideClass', - 'guideChromosomeName', - 'guideStart', - 'guideEnd', - 'organismName' - ] - +const initialColumnIdsWithDefaults = computed(() => + filteredInitialColumnsIds.value?.length + ? filteredInitialColumnsIds.value + : [ + 'modificationName', + 'modificationPosition', + 'modificationSymbol', + 'targetName', + 'targetClass', + 'guideName', + 'guideClass', + 'guideChromosomeName', + 'guideStart', + 'guideEnd', + 'organismName' + ] +) /** * Columns selected by user with the MultiSelect * Will not be sorted anymore when user changes selection, * because MultiSelect v-model puts new selection at the end of the array */ const selectedColumns = ref<ColumnModel[]>( - columns.filter((col) => initialColumnIdsWithDefaults.includes(col.id)) + columns.filter((col) => initialColumnIdsWithDefaults.value.includes(col.id)) +) + +/** + * Watcher to reset the selected columns to the ones passed by prop when + * they change. + */ +watchEffect( + () => + (selectedColumns.value = columns.filter((col) => + initialColumnIdsWithDefaults.value.includes(col.id) + )) ) /** @@ -702,7 +714,47 @@ const specificFilterConfigs = computed<{ * Reactive column filters object */ const filters = ref<{ [columnField: string]: DataTableFilterMetaData }>( - columns.reduce((filters, column) => { + columns.reduce<{ [columnField: string]: DataTableFilterMetaData }>( + (filters, column) => { + // Retrieve corresponding initial filter + const columnInitialFilter = props.initialFilters?.[column.id] + return { + ...filters, + [column.field]: { + matchMode: + // Use specific filter matchMode if existent, CONTAINS by default + specificFilterConfigs.value[column.id]?.filter.matchMode || + primeVueFilterMatchMode.CONTAINS, + value: + // Use (if) provided initial filter, in the format required by the match mode + !columnInitialFilter + ? null + : specificFilterConfigs.value[column.id]?.filter.matchMode !== + primeVueFilterMatchMode.IN + ? columnInitialFilter + : Array.isArray(columnInitialFilter) + ? columnInitialFilter + : [columnInitialFilter] + } + } + }, + {} + ) +) +// Also set the global filter +filters.value.global = { + value: props.initialFilters?.global ? props.initialFilters.global : null, + matchMode: primeVueFilterMatchMode.CONTAINS +} + +/** + * Watcher to reset the column filters to the ones passed by prop when + * they change. + */ +watchEffect(() => { + filters.value = columns.reduce<{ + [columnField: string]: DataTableFilterMetaData + }>((filters, column) => { // Retrieve corresponding initial filter const columnInitialFilter = props.initialFilters?.[column.id] return { @@ -725,12 +777,12 @@ const filters = ref<{ [columnField: string]: DataTableFilterMetaData }>( } } }, {}) -) -// Also set the global filter -filters.value.global = { - value: props.initialFilters?.global ? props.initialFilters.global : null, - matchMode: primeVueFilterMatchMode.CONTAINS -} + // Also set the global filter + filters.value.global = { + value: props.initialFilters?.global ? props.initialFilters.global : null, + matchMode: primeVueFilterMatchMode.CONTAINS + } +}) /** * The fields of the columns to include in the global search for filtering.