diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue index da27b53db8f..7b44cf3390e 100644 --- a/resources/js/components/assets/Browser/Browser.vue +++ b/resources/js/components/assets/Browser/Browser.vue @@ -22,6 +22,7 @@ :columns="columns" :sort-column="sortColumn" :sort-direction="sortDirection" + :filters="filters" :action-url="actionUrl" :action-context="actionContext" :allow-bulk-actions="allowBulkActions" @@ -84,6 +85,7 @@
+
@@ -130,7 +132,7 @@ :folders="folders" :columns="columns" :visible-columns="visibleColumns" - :is-searching="!!searchQuery" + :is-searching="isSearching" v-bind="sharedAssetProps" v-on="sharedAssetEvents" /> @@ -193,6 +195,7 @@ import { Listing, ListingTable, ListingPagination, + ListingFilters, ListingSearch, ListingCustomizeColumns, Slider, @@ -226,6 +229,7 @@ export default { ListingTable, ListingPagination, ListingSearch, + ListingFilters, ListingCustomizeColumns, Breadcrumbs, Slider, @@ -250,6 +254,7 @@ export default { restrictFolderNavigation: Boolean, // Whether to restrict to a single folder and prevent navigation. selectedAssets: Array, selectedPath: String, // The path to display, determined by a parent component. + filters: Array, initialColumns: { type: Array, default: () => [], @@ -268,6 +273,7 @@ export default { folders: [], folder: {}, searchQuery: '', + activeFilters: {}, editedAssetId: this.initialEditingAssetId, creatingFolder: false, creatingFolderError: false, @@ -289,7 +295,7 @@ export default { computed: { requestUrl() { - return this.searchQuery + return this.isSearching ? cp_url( `assets/browse/search/${this.container.id}/${this.restrictFolderNavigation ? this.path : ''}`, ).replace(/\/$/, '') @@ -332,6 +338,21 @@ export default { return this.selectedAssets.length > 0; }, + hasActiveFilters() { + return Object.entries(this.activeFilters).some(([key, value]) => { + if (Array.isArray(value)) { + return value.length > 0; + } else if (typeof value === 'object' && value !== null) { + return Object.keys(value).length > 0; + } + return Boolean(value); + }); + }, + + isSearching() { + return this.searchQuery || this.hasActiveFilters; + }, + parameters() { return { page: this.page, @@ -439,6 +460,13 @@ export default { this.page = 1; }, + activeFilters: { + deep: true, + handler() { + this.page = 1; + }, + }, + selectedPath: { immediate: true, handler(newPath) { @@ -456,6 +484,10 @@ export default { }, methods: { + filtersUpdated(filters) { + this.activeFilters = filters; + }, + modeChanged(mode) { this.mode = mode; }, @@ -468,7 +500,7 @@ export default { listingRequestCompleted({ response }) { this.assets = response.data.data; - if (this.searchQuery) { + if (this.isSearching) { this.folder = null; this.folders = []; } else { diff --git a/resources/js/components/ui/Listing/FieldFilter.vue b/resources/js/components/ui/Listing/FieldFilter.vue index 56b72e53d90..ee85f2895f1 100644 --- a/resources/js/components/ui/Listing/FieldFilter.vue +++ b/resources/js/components/ui/Listing/FieldFilter.vue @@ -1,5 +1,4 @@