Option to hide deprecated elements from lists

Author: m-mohr

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Option to hide deprecated elements from lists by default (prop: `hideDeprecatedByDefault`)
+
 ### Fixed
 
 - `Logs`:

README.md

@@ -11,44 +11,51 @@ Examples: <https://open-eo.github.io/openeo-vue-components/>
 
 **Table of Contents:**
 
-1. [Usage](#usage)
-	* [HTML](#html)
-	* [Vue](#vue)
-2. [Components](#components)
-	* [BillingPlans](#billingplans)
-	* [Capabilities](#capabilities)
-	* [Collection](#collection)
-	* [Collections](#collections)
-	* [DataTable](#datatable)
-	* [DeprecationNotice](#deprecationnotice)
-	* [Description](#description)
-	* [ExperimentalNotice](#experimentalnotice)
-	* [FederationMissingNotice](#federationmissingnotice)
-	* [FileFormat](#fileformat)
-	* [FileFormats](#fileformats)
-	* [Item](#item)
-	* [Items](#items)
-	* [Job](#job)
-	* [JobEstimate](#jobestimate)
-	* [JsonSchema](#jsonschema)
-	* [LinkList](#linklist)
-	* [Logs](#logs)
-	* [ModelBuilder](#modelbuilder)
-	* [ObjectTree](#objecttree)
-	* [Process](#process)
-	* [Processes](#processes)
-	* [SearchableList](#searchablelist)
-	* [SearchBox](#searchbox)
-	* [Service](#service)
-	* [ServiceType](#servicetype)
-	* [ServiceTypes](#servicetypes)
-	* [SupportedFeatures](#supportedfeatures)
-	* [Tabs and Tab](#tabs-and-tab)
-	* [UdfRuntime](#udfruntime)
-	* [UdfRuntimes](#udfruntimes)
-3. [Other Features](#other-features)
-	* [FeatureList](#featurelist)
-	* [Utils](#utils)
+- [Vue Components for openEO](#vue-components-for-openeo)
+	- [Usage](#usage)
+		- [HTML](#html)
+		- [FontAwesome](#fontawesome)
+		- [Vue](#vue)
+	- [Components](#components)
+		- [`BillingPlans`](#billingplans)
+		- [`Capabilities`](#capabilities)
+		- [`Collection`](#collection)
+		- [`Collections`](#collections)
+		- [`DataTable`](#datatable)
+		- [`DeprecationNotice`](#deprecationnotice)
+		- [`FederationMissingNotice`](#federationmissingnotice)
+		- [`Description`](#description)
+		- [`ExperimentalNotice`](#experimentalnotice)
+		- [`FileFormat`](#fileformat)
+		- [`FileFormats`](#fileformats)
+		- [`JsonSchema`](#jsonschema)
+		- [`Item`](#item)
+		- [`Items`](#items)
+		- [`Job`](#job)
+		- [`JobEstimate`](#jobestimate)
+		- [`LinkList`](#linklist)
+		- [`Logs`](#logs)
+		- [`ObjectTree`](#objecttree)
+		- [`Process`](#process)
+		- [`ModelBuilder`](#modelbuilder)
+		- [`Processes`](#processes)
+		- [`SearchableList`](#searchablelist)
+		- [`SearchBox`](#searchbox)
+		- [`Service`](#service)
+		- [`ServiceType`](#servicetype)
+		- [`ServiceTypes`](#servicetypes)
+		- [`SupportedFeatures`](#supportedfeatures)
+		- [`Tabs` and `Tab`](#tabs-and-tab)
+			- [`Tabs`](#tabs)
+			- [`Tab`](#tab)
+			- [Examples](#examples)
+				- [Simple example with three static tabs](#simple-example-with-three-static-tabs)
+				- [Dynamically adding tabs + custom tab names appearance](#dynamically-adding-tabs--custom-tab-names-appearance)
+		- [`UdfRuntime`](#udfruntime)
+		- [`UdfRuntimes`](#udfruntimes)
+	- [Other features](#other-features)
+		- [`FeatureList`](#featurelist)
+		- [`Utils`](#utils)
 
 ## Usage
 
@@ -187,6 +194,7 @@ Shows an (expandable) list of all STAC-based collections available at a back-end
 - `showKeywords` / `show-keywords` (boolean): Adds the keywords to the third line of the summary if set to `true`. Defaults to `false`.
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
 - `missing` (array): The identifiers of the federated back-ends that are not providing data for the list of collections due to an issue.
+- `hideDeprecatedByDefault`: Whether to hide deprecated items ny default. Defaults to `false`.
 
 **Slots:**
 
@@ -305,6 +313,7 @@ Visualizes all supported file formats of the back-end.
 - `heading` (string|null): Specifies the title of the component. If set to `null`, the title is hidden. Defaults to `File Formats`.
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
 - `missing` (array): The identifiers of the federated back-ends that are not providing data for the list of file formats due to an issue.
+- `hideDeprecatedByDefault`: Whether to hide deprecated items ny default. Defaults to `false`.
 
 *Note: At least one of `showInput` or `showOutput` must be set to `true`. Otherwise, the list will be empty.*
 
@@ -374,6 +383,7 @@ Shows an (expandable) list of STAC-based Items.
 - `loadAdditionalData` / `load-additional-data` (function|null): See the corresponding prop in [`SearchableList`](#searchablelist).
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
 - `missing` (array): The identifiers of the federated back-ends that are not providing data for the list of items due to an issue.
+- `hideDeprecatedByDefault`: Whether to hide deprecated items ny default. Defaults to `false`.
 
 **Slots:**
 
@@ -571,6 +581,7 @@ Shows an (expandable) list of all processes available at a back-end.
 - `loadAdditionalData` / `load-additional-data` (function|null): See the corresponding prop in [`SearchableList`](#searchablelist).
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
 - `missing` (array): The identifiers of the federated back-ends that are not providing data for the list of processes due to an issue.
+- `hideDeprecatedByDefault`: Whether to hide deprecated items ny default. Defaults to `false`.
 
 **Slots:**
 
@@ -605,6 +616,7 @@ A template to implement searchable, sortable and collapsible lists (all optional
 - `allowCopy` (boolean): If set to `true`, shows a copy button for the identifier when the heading is hovered. May not work if the `summary` slot is used.
 - `heading` (string|null): Specifies the title of the component. If set to `null`, the title is hidden. Defaults to `null`.
 - `searchMinLength` / `search-min-length` (integer): The number of characters required to be given until the search starts. Defaults to `2` as it's usually not very meaningful to search for a single character.
+- `hideDeprecatedByDefault`: Whether to hide deprecated items ny default. Defaults to `false`.
 - `loadAdditionalData` / `load-additional-data` (function|null): An asynchronous function that returns newly loaded data and replaces the original data in the viewer. The function has three parameters:
     - `key` (integer): Gives the index (for arrays) or the key (for objects) of the toggled element in the array or object given in the prop `data`.
     - `identifier` (number|string): Gives the identifier of the toggled element (corresponds to the values selected via the prop `identifierKey`).
@@ -613,7 +625,7 @@ A template to implement searchable, sortable and collapsible lists (all optional
 **Slots:**
 
 - `heading`: HTML to display the heading, which by default consists of a title (see property `heading`) and the count of elements available in total. Will also show the count of elements matching the search term, if a search term has been given. The following slot properties are made available:
-	- `filteredCount` (integer|null): The count of elements matching the search term. `null` if no search term has been specified and all elements are shown.
+	- `filteredCount` (integer|null): The count of elements matching the search term. `null` if no filters are applied and all elements are shown.
 	- `totalCount` (integer): The total count of elements.
 - `content-start`: After heading, before searchbox and list.
 - `after-search-box`:
@@ -708,6 +720,7 @@ Visualizes all secondary web service types supported by the back-end.
 - `collapsed` (boolean|null): See the corresponding prop in [`SearchableList`](#searchablelist).
 - `heading` (string|null): Specifies the title of the component. If set to `null`, the title is hidden. Defaults to `Secondary Web Services`.
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
+- `hideDeprecatedByDefault`: Whether to hide deprecated items ny default. Defaults to `false`.
 
 **Slots:**
 
@@ -945,6 +958,7 @@ Visualizes all UDF (user-defined function) runtimes supported by the back-end.
 - `collapsed` (boolean|null): See the corresponding prop in [`SearchableList`](#searchablelist).
 - `heading` (string|null): Specifies the title of the component. If set to `null`, the title is hidden. Defaults to `UDF Runtimes`.
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
+- `hideDeprecatedByDefault`: Whether to hide deprecated items ny default. Defaults to `false`.
 
 **Slots:**
 

components/Collections.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="vue-component collections">
-		<SearchableList :data="collections" identifierKey="id" summaryKey="title" keywordsKey="keywords" :showKeywords="showKeywords"  :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :loadAdditionalData="loadAdditionalData" @detailsToggled="detailsToggled" allowCopy>
+		<SearchableList :data="collections" identifierKey="id" summaryKey="title" keywordsKey="keywords" :showKeywords="showKeywords"  :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :loadAdditionalData="loadAdditionalData" @detailsToggled="detailsToggled" :hideDeprecatedByDefault="hideDeprecatedByDefault" allowCopy>
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template v-if="missing" #content-start><FederationMissingNotice :missing="missing" :federation="federation" /></template>
 			<template #summary="scope"><slot name="summary" v-bind="scope" /></template>
@@ -67,6 +67,10 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		hideDeprecatedByDefault: {
+			type: Boolean,
+			default: false
+		},
 		missing: {
 			type: Array,
 			default: null

components/FileFormats.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="vue-component file-formats">
-		<SearchableList :data="fileFormats" summaryKey="title" keywordsKey="gis_data_types" :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" @detailsToggled="detailsToggled">
+		<SearchableList :data="fileFormats" summaryKey="title" keywordsKey="gis_data_types" :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :hideDeprecatedByDefault="hideDeprecatedByDefault" @detailsToggled="detailsToggled">
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template v-if="missing" #content-start><FederationMissingNotice :missing="missing" :federation="federation" /></template>
 			<template #summary="slot">
@@ -74,6 +74,10 @@ export default {
 			type: Boolean,
 			default: null
 		},
+		hideDeprecatedByDefault: {
+			type: Boolean,
+			default: false
+		},
 		missing: {
 			type: Array,
 			default: null

components/Items.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="vue-component items">
-		<SearchableList :data="data" summaryKey="title" :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :loadAdditionalData="loadAdditionalData" @summaries="updateFeatures" @detailsToggled="detailsToggled" ref="list">
+		<SearchableList :data="data" summaryKey="title" :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :hideDeprecatedByDefault="hideDeprecatedByDefault" :loadAdditionalData="loadAdditionalData" @summaries="updateFeatures" @detailsToggled="detailsToggled" ref="list">
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template #after-search-box>
 				<slot v-if="showMap" name="map" :geojson="geojson" :mapOptions="mapOptions">
@@ -69,6 +69,10 @@ export default {
 			type: Boolean,
 			default: null
 		},
+		hideDeprecatedByDefault: {
+			type: Boolean,
+			default: false
+		},
 		loadAdditionalData: {
 			type: Function,
 			default: null

components/Processes.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="vue-component processes">
-		<SearchableList :data="processes" keywordsKey="categories" :showKeywords="showCategories" :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :loadAdditionalData="loadAdditionalData" @detailsToggled="detailsToggled" allowCopy>
+		<SearchableList :data="processes" keywordsKey="categories" :showKeywords="showCategories" :showSummaryOnExpand="false" :externalSearchTerm="searchTerm" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :hideDeprecatedByDefault="hideDeprecatedByDefault" :loadAdditionalData="loadAdditionalData" @detailsToggled="detailsToggled" allowCopy>
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template #content-start v-if="missing"><FederationMissingNotice :missing="missing" :federation="federation" /></template>
 			<template #summary="scope"><slot name="summary" v-bind="scope" /></template>
@@ -66,6 +66,10 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		hideDeprecatedByDefault: {
+			type: Boolean,
+			default: false
+		},
 		loadAdditionalData: {
 			type: Function,
 			default: null

components/SearchableList.vue

@@ -13,7 +13,13 @@
 				<p>No data available.</p>
 			</template>
 			<template v-else>
-				<SearchBox v-if="externalSearchTerm === null" v-model="searchTerm" :placeholder="searchPlaceholder" :minLength="searchMinLength" />
+				<section class="action-bar">
+					<SearchBox v-if="externalSearchTerm === null" v-model="searchTerm" :placeholder="searchPlaceholder" :minLength="searchMinLength" />
+					<label class="deprecated" title="Show deprecated elements?">
+						<input type="checkbox" v-model="hideDeprecated" :true-value="false" :false-value="true">
+						Show deprecated
+					</label>
+				</section>
 				<slot name="after-search-box" :filteredCount="filteredCount" :summaries="summaries"></slot>
 				<p v-if="filteredCount === 0">No search results found.</p>
 				<ul v-else class="list" :class="{expandable: offerDetails}">
@@ -114,6 +120,10 @@ export default {
 		allowCopy: {
 			type: Boolean,
 			default: false
+		},
+		hideDeprecatedByDefault: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -126,6 +136,7 @@ export default {
 			// This allows with a combination of v-if and v-show to not render by default (=> null), but keep rendered versions in cache (=> false)
 			showDetails: {},
 			showList: this.collapsed ? null : true,
+			hideDeprecated: this.hideDeprecatedByDefault,
 			summaries: [],
 			canCopy: false
 		};
@@ -160,19 +171,11 @@ export default {
 				this.$emit('summaries', this.summaries);
 			}
 		},
-		searchTerm: {
-			immediate: true,
-			handler(value) {
-				if (value.length >= this.searchMinLength) {
-					this.summaries.forEach(item => {
-						this.$set(item, 'show', Utils.search(this.searchTerm, [item.identifier, item.summary].concat(item.keywords)));
-					});
-				}
-				else {
-					this.summaries.forEach(item => this.$set(item, 'show', true));
-				}
-				this.$emit('summaries', this.summaries);
-			}
+		searchTerm() {
+			this.filter();
+		},
+		hideDeprecated() {
+			this.filter();
 		},
 		collapsed(newState) {
 			if (newState === false) {
@@ -189,16 +192,36 @@ export default {
 			return Utils.size(this.data);
 		},
 		filteredCount() {
-			if (this.searchTerm.length >= this.searchMinLength) {
+			if (this.hasActiveFilter()) {
 				return this.summaries.filter(item => item.show === true).length;
 			}
 			return null;
 		}
 	},
+	created() {
+		this.filter();
+	},
 	mounted() {
 		this.canCopy = navigator && navigator.clipboard && typeof navigator.clipboard.writeText === 'function';
 	},
 	methods: {
+		hasActiveFilter() {
+			return this.searchTerm.length >= this.searchMinLength || this.hideDeprecated;
+		},
+		filter() {
+			const doSearch = this.searchTerm.length >= this.searchMinLength;
+			this.summaries.forEach(item => {
+				let show = true;
+				if (this.hideDeprecated && item.deprecated) {
+					show = false;
+				}
+				else if (doSearch) {
+					show = Utils.search(this.searchTerm, [item.identifier, item.summary].concat(item.keywords))
+				}
+				this.$set(item, 'show', show);
+			});
+			this.$emit('summaries', this.summaries);
+		},
 		copyIdentifier(event, summary) {
 			if (this.allowCopy && this.canCopy) {
 				let elem = event.composedPath()[0]; // event.target doesn't work in web components
@@ -310,6 +333,25 @@ export default {
 		content: "▾";
 	}
 
+	.action-bar {
+		width: 100%;
+		display: flex;
+		margin-bottom: 1em;
+		padding: 1px;
+		gap: 0.5em;
+
+		> .search-box {
+			min-width: 150px;
+			flex: 1;
+			margin: 0;
+		}
+
+		> .deprecated {
+			white-space: nowrap;
+			align-content: center;
+		}
+	}
+
 	.details  {
 		display: none;
 	}

components/ServiceTypes.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="vue-component service-types">
-		<SearchableList :data="services" summaryKey="title" :externalSearchTerm="searchTerm" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" @detailsToggled="detailsToggled">
+		<SearchableList :data="services" summaryKey="title" :externalSearchTerm="searchTerm" :sort="sort" :offerDetails="offerDetails" :heading="heading" :collapsed="collapsed" :hideDeprecatedByDefault="hideDeprecatedByDefault" @detailsToggled="detailsToggled">
 			<template #heading="scope"><slot name="heading" v-bind="scope" /></template>
 			<template #summary="scope"><slot name="summary" v-bind="scope" /></template>
 			<template #details="slot">
@@ -52,6 +52,10 @@ export default {
 			type: Boolean,
 			default: null
 		},
+		hideDeprecatedByDefault: {
+			type: Boolean,
+			default: false
+		},
 		...FederationMixin.props
 	},
 	beforeCreate() {