pict-section-recordset 1.0.27 → 1.0.29

package/example_applications/simple_entity/Simple-RecordSet-Application.js

@@ -182,6 +182,7 @@ module.exports.default_configuration.pict_configuration = (
 		{
 			"ExternalJoinBookByAuthor":
 			{
+				"DisplayName": "Author's Name",
 				"Type": "ExternalJoinStringMatch",
 				"ExternalFilterByColumns": [ "Name" ],
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pict-section-recordset",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "Pict dynamic record set management views",
   "main": "source/Pict-Section-RecordSet.js",
   "directories": {
@@ -33,7 +33,7 @@
     "browser-env": "^3.3.0",
     "eslint": "^9.28.0",
     "jquery": "^3.7.1",
-    "pict": "^1.0.288",
+    "pict": "^1.0.289",
     "pict-application": "^1.0.27",
     "pict-service-commandlineutility": "^1.0.15",
     "quackage": "^1.0.42",

package/source/providers/RecordSet-RecordProvider-Base.js

@@ -68,6 +68,9 @@ class RecordSetProviderBase extends libPictProvider
 		this.fable;
 		/** @type {import('pict')} */
 		this.pict;
+
+		/** @type {Record<string, any>} */
+		this._FilterSchema = { };
 	}
 
 	/**
@@ -246,6 +249,157 @@ class RecordSetProviderBase extends libPictProvider
 	async decorateCoreRecords(pRecords)
 	{
 	}
+
+	getFilterSchemaKeys()
+	{
+		return Object.keys(this._FilterSchema);
+	}
+
+	/**
+	 * @param {string} pFilterKey - The filter key to get the schema for.
+	 *
+	 * @return {Record<string, any>} The schema for the filter clause.
+	 */
+	getFilterClauseSchemaForKey(pFilterKey)
+	{
+		return this._FilterSchema?.[pFilterKey];
+	}
+
+	/**
+	 * @return {Record<string, Record<string, any>>} The schema for the filter clauses.
+	 */
+	getFilterSchema()
+	{
+		/** @type {Record<string, Record<string, any>>} */
+		const tmpSchema = {};
+		for (const tmpKey of this.getFilterSchemaKeys())
+		{
+			tmpSchema[tmpKey] = this.getFilterClauseSchemaForKey(tmpKey);
+		}
+		return tmpSchema;
+	}
+
+	/**
+	 * @param {string} pFilterKey - The filter key to add the clause for.
+	 * @param {string} pClauseKey - The clause key to add.
+	 */
+	addFilterClause(pFilterKey, pClauseKey)
+	{
+		let tmpClause = this.getFilterClauseSchemaForKey(pFilterKey)?.AvailableClauses?.find?.((c) => c.ClauseKey == pClauseKey);
+		if (!tmpClause)
+		{
+			this.pict.log.error(`RecordSetProviderBase.addFilterClause() - No filter clause schema found for key ${pFilterKey} and clause ${pClauseKey}.`);
+			return;
+		}
+		tmpClause = JSON.parse(JSON.stringify(tmpClause));
+		tmpClause.Hash = `${pFilterKey}-${pClauseKey}-${this.pict.getUUID()}`;
+		tmpClause.Label = tmpClause.Label || tmpClause.DisplayName;
+		const tmpClauses = this.getFilterClauses();
+		tmpClauses.push(tmpClause);
+	}
+
+	/**
+	 */
+	clearFilterClauses()
+	{
+		const tmpClauses = this.pict.Bundle._ActiveFilterState?.[this.options.RecordSet]?.FilterClauses;
+		if (!Array.isArray(tmpClauses))
+		{
+			return;
+		}
+		tmpClauses.length = 0; // Clear the array
+	}
+
+	/**
+	 * @param {string} pSpecificFilterClauseHash - The hash of the specific filter clause to remove.
+	 */
+	removeFilterClause(pSpecificFilterClauseHash)
+	{
+		const tmpClauses = this.pict.Bundle._ActiveFilterState?.[this.options.RecordSet]?.FilterClauses;
+		if (!Array.isArray(tmpClauses))
+		{
+			this.pict.log.error('RecordSetProviderBase.removeFilterClause() - No filter clauses found.');
+			return;
+		}
+		const tmpClauseIndex = tmpClauses.findIndex((c) => pSpecificFilterClauseHash == c.Hash);
+		if (tmpClauseIndex < 0)
+		{
+			this.pict.log.error(`RecordSetProviderBase.removeFilterClause() - Filter clause with hash ${pSpecificFilterClauseHash} not found.`);
+			return;
+		}
+		tmpClauses.splice(tmpClauseIndex, 1);
+	}
+
+	/**
+	 * @return {Array<Record<string, any>>} The filter clauses.
+	 */
+	getFilterClauses()
+	{
+		let tmpClauses = this.pict.Bundle._ActiveFilterState?.[this.options.RecordSet]?.FilterClauses;
+		if (!Array.isArray(tmpClauses))
+		{
+			tmpClauses = [];
+			this.pict.Bundle._ActiveFilterState = this.pict.Bundle._ActiveFilterState || {};
+			this.pict.Bundle._ActiveFilterState[this.options.RecordSet] = this.pict.Bundle._ActiveFilterState[this.options.RecordSet] || {};
+			this.pict.Bundle._ActiveFilterState[this.options.RecordSet].FilterClauses = tmpClauses;
+		}
+		return tmpClauses;
+	}
+
+	/**
+	 * @param {string} pSpecificFilterClauseHash - The hash of the specific filter clause to move.
+	 * @param {number} pOrdinal - The ordinal position to move the filter clause to.
+	 */
+	moveFilterClauseTo(pSpecificFilterClauseHash, pOrdinal)
+	{
+		const tmpClauses = this.pict.Bundle._ActiveFilterState?.[this.options.RecordSet]?.FilterClauses;
+		if (!Array.isArray(tmpClauses))
+		{
+			this.pict.log.error('RecordSetProviderBase.moveFilterClauseTo() - No filter clauses found.');
+			return;
+		}
+		if (pOrdinal < 0 || pOrdinal >= tmpClauses.length)
+		{
+			this.pict.log.error(`RecordSetProviderBase.moveFilterClauseTo() - Invalid ordinal ${pOrdinal}.`);
+			return;
+		}
+		const tmpClauseIndex = tmpClauses.indexOf((c) => pSpecificFilterClauseHash == c.Hash);
+		if (tmpClauseIndex < 0)
+		{
+			this.pict.log.error(`RecordSetProviderBase.moveFilterClauseTo() - Filter clause with hash ${pSpecificFilterClauseHash} not found.`);
+			return;
+		}
+		const tmpClause = tmpClauses.splice(tmpClauseIndex, 1)[0];
+		tmpClauses.splice(pOrdinal, 0, tmpClause);
+	}
+
+	/**
+	 * @param {string} pSpecificFilterClauseHash - The hash of the specific filter clause to move.
+	 * @param {number} pOrdinalOffset - The ordinal offset to move the filter clause by.
+	 */
+	moveFilterClauseBy(pSpecificFilterClauseHash, pOrdinalOffset)
+	{
+		const tmpClauses = this.pict.Bundle._ActiveFilterState?.[this.options.RecordSet]?.FilterClauses;
+		if (!Array.isArray(tmpClauses))
+		{
+			this.pict.log.error('RecordSetProviderBase.moveFilterClauseBy() - No filter clauses found.');
+			return;
+		}
+		const tmpClauseIndex = tmpClauses.indexOf((c) => pSpecificFilterClauseHash == c.Hash);
+		if (tmpClauseIndex < 0)
+		{
+			this.pict.log.error(`RecordSetProviderBase.moveFilterClauseBy() - Filter clause with hash ${pSpecificFilterClauseHash} not found.`);
+			return;
+		}
+		const tmpNewOrdinal = tmpClauseIndex + pOrdinalOffset;
+		if (tmpNewOrdinal < 0 || tmpNewOrdinal >= tmpClauses.length)
+		{
+			this.pict.log.error(`RecordSetProviderBase.moveFilterClauseBy() - Invalid new ordinal ${tmpNewOrdinal} (offset of ${pOrdinalOffset} for original ordinal ${tmpClauseIndex}).`);
+			return;
+		}
+		const tmpClause = tmpClauses.splice(tmpClauseIndex, 1)[0];
+		tmpClauses.splice(tmpNewOrdinal, 0, tmpClause);
+	}
 }
 
 module.exports = RecordSetProviderBase;

package/source/providers/RecordSet-RecordProvider-MeadowEndpoints.js

@@ -424,11 +424,189 @@ class MeadowEndpointsRecordSetProvider extends libRecordSetProviderBase
 			}
 			this.initializeEntitySchema(() =>
 			{
+				const tmpSchema = this._Schema;
+				if (!tmpSchema || !tmpSchema.properties)
+				{
+					return fCallback(pError);
+				}
+				const tmpProperties = tmpSchema?.properties;
+				// loop throught the schema and add the columns to the tableCells
+				let tmpOrdinal = 0;
+				for (const tmpSchemaField in tmpProperties)
+				{
+					++tmpOrdinal;
+					if (tmpSchemaField === 'Deleted' || tmpSchemaField === 'DeletingIDUser')
+					{
+						continue;
+					}
+					const tmpColumn = tmpProperties[tmpSchemaField];
+					let tmpFieldFilterSchema = this._FilterSchema[tmpSchemaField];
+					if (!tmpFieldFilterSchema)
+					{
+						this._FilterSchema[tmpSchemaField] = tmpFieldFilterSchema = { };
+					}
+					if (!tmpFieldFilterSchema.FilterKey)
+					{
+						tmpFieldFilterSchema.FilterKey = tmpSchemaField;
+					}
+					if (!tmpFieldFilterSchema.RecordSet)
+					{
+						tmpFieldFilterSchema.RecordSet = this.options.RecordSet;
+					}
+					if (!tmpFieldFilterSchema.DisplayName)
+					{
+						tmpFieldFilterSchema.DisplayName = this._getHumanReadableFieldName(tmpSchemaField);
+					}
+					if (!tmpFieldFilterSchema.Description)
+					{
+						tmpFieldFilterSchema.Description = `Filter by ${tmpFieldFilterSchema.DisplayName}`;
+					}
+					if (!tmpFieldFilterSchema.HelpText)
+					{
+						tmpFieldFilterSchema.HelpText = `Filter by ${tmpFieldFilterSchema.DisplayName} for the ${this._getHumanReadbleEntityName(this.options.Entity)} entity.`;
+					}
+					if (tmpFieldFilterSchema.Ordinal == null)
+					{
+						tmpFieldFilterSchema.Ordinal = tmpOrdinal;
+					}
+					if (!Array.isArray(tmpFieldFilterSchema.AvailableClauses))
+					{
+						tmpFieldFilterSchema.AvailableClauses = [];
+					}
+					const tmpFieldHumanName = this._getHumanReadableFieldName(tmpSchemaField);
+					switch (tmpColumn.type)
+					{
+						case 'string':
+							tmpFieldFilterSchema.AvailableClauses.push({ FilterKey: tmpSchemaField, ClauseKey: `${tmpSchemaField}_Match_Exact`, DisplayName: `${tmpFieldHumanName} Exact Match`, Type: 'StringMatch', FilterByColumn: tmpSchemaField, ExactMatch: true, Ordinal: tmpFieldFilterSchema.AvailableClauses.length + 1 });
+							tmpFieldFilterSchema.AvailableClauses.push({ FilterKey: tmpSchemaField, ClauseKey: `${tmpSchemaField}_Match_Fuzzy`, DisplayName: `${tmpFieldHumanName} Partial Match`, Type: 'StringMatch', FilterByColumn: tmpSchemaField, ExactMatch: false , Ordinal: tmpFieldFilterSchema.AvailableClauses.length + 1 });
+							tmpFieldFilterSchema.AvailableClauses.push({ FilterKey: tmpSchemaField, ClauseKey: `${tmpSchemaField}_Range`, DisplayName: `${tmpFieldHumanName} in Range`, Type: 'StringRange', FilterByColumn: tmpSchemaField , Ordinal: tmpFieldFilterSchema.AvailableClauses.length + 1 });
+							break;
+						case 'date':
+						case 'datetime':
+							tmpFieldFilterSchema.AvailableClauses.push({ FilterKey: tmpSchemaField, ClauseKey: `${tmpSchemaField}_Match_Exact`, DisplayName: `${tmpFieldHumanName} Exact Match`, Type: 'DateMatch', FilterByColumn: tmpSchemaField, ExactMatch: true , Ordinal: tmpFieldFilterSchema.AvailableClauses.length + 1 });
+							tmpFieldFilterSchema.AvailableClauses.push({ FilterKey: tmpSchemaField, ClauseKey: `${tmpSchemaField}_Match_Fuzzy`, DisplayName: `${tmpFieldHumanName} Partial Match`, Type: 'DateMatch', FilterByColumn: tmpSchemaField, ExactMatch: false , Ordinal: tmpFieldFilterSchema.AvailableClauses.length + 1 });
+							tmpFieldFilterSchema.AvailableClauses.push({ FilterKey: tmpSchemaField, ClauseKey: `${tmpSchemaField}_Range`, DisplayName: `${tmpFieldHumanName} in Range`, Type: 'DateRange', FilterByColumn: tmpSchemaField , Ordinal: tmpFieldFilterSchema.AvailableClauses.length + 1 });
+							break;
+						case 'boolean': //TODO: we didn't add filters for this - they are just numeric but it's weird for the user, maybe we should add views for this that account for the difference
+						case 'integer':
+							tmpFieldFilterSchema.AvailableClauses.push({ FilterKey: tmpSchemaField, ClauseKey: `${tmpSchemaField}_Match_Exact`, DisplayName: `${tmpFieldHumanName} Exact Match`, Type: 'NumericMatch', FilterByColumn: tmpSchemaField, ExactMatch: true , Ordinal: tmpFieldFilterSchema.AvailableClauses.length + 1 });
+							tmpFieldFilterSchema.AvailableClauses.push({ FilterKey: tmpSchemaField, ClauseKey: `${tmpSchemaField}_Match_Fuzzy`, DisplayName: `${tmpFieldHumanName} Partial Match`, Type: 'NumericMatch', FilterByColumn: tmpSchemaField, ExactMatch: false , Ordinal: tmpFieldFilterSchema.AvailableClauses.length + 1 });
+							tmpFieldFilterSchema.AvailableClauses.push({ FilterKey: tmpSchemaField, ClauseKey: `${tmpSchemaField}_Range`, DisplayName: `${tmpFieldHumanName} in Range`, Type: 'NumberRange', FilterByColumn: tmpSchemaField , Ordinal: tmpFieldFilterSchema.AvailableClauses.length + 1 });
+							break;
+						default:
+							this.pict.log.warn(`Unsupported field type ${tmpColumn.type} for field ${tmpSchemaField}`, { Schema: tmpColumn });
+					}
+				}
+				if (typeof this.pict.providers.FilterManager.filters === 'object')
+				{
+					for (const tmpFilterKey of Object.keys(this.pict.providers.FilterManager.filters))
+					{
+						const tmpFilterClause = this.pict.providers.FilterManager.filters[tmpFilterKey];
+						if (tmpFilterClause.CoreConnectionColumn === `ID${this.options.Entity}`)
+						{
+							//FIXME: I don't think using filter key is right here
+							let tmpFieldFilterSchema = this._FilterSchema[tmpFilterKey];
+							if (!tmpFieldFilterSchema)
+							{
+								this._FilterSchema[tmpFilterKey] = tmpFieldFilterSchema = { };
+							}
+							if (!tmpFieldFilterSchema.FilterKey)
+							{
+								tmpFieldFilterSchema.FilterKey = tmpFilterKey;
+							}
+							if (!tmpFieldFilterSchema.RecordSet)
+							{
+								tmpFieldFilterSchema.RecordSet = this.options.RecordSet;
+							}
+							if (!tmpFieldFilterSchema.DisplayName)
+							{
+								tmpFieldFilterSchema.DisplayName = tmpFilterClause.DisplayName || this._getHumanReadableFieldName(tmpFilterKey);
+							}
+							if (!tmpFieldFilterSchema.Description)
+							{
+								tmpFieldFilterSchema.Description = tmpFilterClause.Description || `Filter by ${tmpFieldFilterSchema.DisplayName}`;
+							}
+							if (!tmpFieldFilterSchema.HelpText)
+							{
+								tmpFieldFilterSchema.HelpText = tmpFilterClause.HelpText || `Filter by ${tmpFieldFilterSchema.DisplayName} for the ${this._getHumanReadbleEntityName(this.options.Entity)} entity.`;
+							}
+							if (tmpFieldFilterSchema.Ordinal == null)
+							{
+								tmpFieldFilterSchema.Ordinal = tmpOrdinal;
+							}
+							if (!Array.isArray(tmpFieldFilterSchema.AvailableClauses))
+							{
+								tmpFieldFilterSchema.AvailableClauses = [];
+							}
+							const tmpFieldHumanName = this._getHumanReadableFieldName(tmpFilterKey);
+							tmpFieldFilterSchema.AvailableClauses.push(tmpFilterClause);
+							if (!tmpFilterClause.FilterKey)
+							{
+								tmpFilterClause.FilterKey = tmpFilterKey;
+							}
+							if (!tmpFilterClause.ClauseKey)
+							{
+								tmpFilterClause.ClauseKey = tmpFilterKey;
+							}
+							if (!tmpFilterClause.DisplayName)
+							{
+								tmpFilterClause.DisplayName = tmpFieldHumanName;
+							}
+							tmpFilterClause.Ordinal = tmpFieldFilterSchema.AvailableClauses.length + 1;
+						}
+					}
+				}
 				return fCallback(pError);
 			});
 		});
 	}
 
+	/**
+	 * @param {string} pEntity - The schema field name.
+	 * @return {string} - The human-readable name for the entity.
+	 */
+	_getHumanReadbleEntityName(pEntity)
+	{
+		return pEntity.replace(/([a-z])([A-Z])/g, '$1 $2'); // Add space before capital letters
+	}
+
+	/**
+	 * @param {string} pSchemaField - The schema field name.
+	 * @return {string} - The human-readable name for the schema field.
+	 */
+	_getHumanReadableFieldName(pSchemaField)
+	{
+		if (!this._Schema || !this._Schema.properties || !this._Schema.properties[pSchemaField])
+		{
+			return pSchemaField;
+		}
+		if (pSchemaField === `ID${this.options.Entity}`)
+		{
+			return `${this._getHumanReadbleEntityName(this.options.Entity)} Unique Database ID`;
+		}
+		if (pSchemaField === `GUID${this.options.Entity}`)
+		{
+			return `${this._getHumanReadbleEntityName(this.options.Entity)} Unique Identifier`;
+		}
+		if (pSchemaField === 'CreatingIDUser')
+		{
+			return 'Created By User';
+		}
+		if (pSchemaField === 'CreateDate')
+		{
+			return 'Date Created';
+		}
+		if (pSchemaField === 'UpdatingIDUser')
+		{
+			return 'Last Updated By User';
+		}
+		if (pSchemaField === 'UpdateDate')
+		{
+			return 'Date Last Updated';
+		}
+		return pSchemaField.replace(/([a-z])([A-Z])/g, '$1 $2') // Add space before capital letters
+	}
+
 	/**
 	 * @param {(error?: Error) => void} fCallback - The callback function.
 	 */
@@ -446,7 +624,9 @@ class MeadowEndpointsRecordSetProvider extends libRecordSetProviderBase
 			{
 				if (error)
 				{
-					throw error;
+					this.fable.log.error('Error fetching schema', error);
+					this._Schema = null;
+					return fCallback(error);
 				}
 				this._Schema = result;
 				return fCallback(null);

package/source/services/RecordsSet-MetaController.js

@@ -312,6 +312,7 @@ class RecordSetMetacontroller extends libFableServiceProviderBase
 		// Add the subviews internally and externally
 		this.pict.addTemplate(require('../templates/Pict-Template-FilterView.js'));
 		this.pict.addTemplate(require('../templates/Pict-Template-FilterInstanceViews.js'));
+		this.pict.addTemplate(require('../views/filters').Base);
 		this.childViews.errorNotFound = this.fable.addView('RSP-RecordSet-Error-NotFound', ViewDefinitionRecordSetErrorNotFound);
 		this.childViews.list = this.fable.addView('RSP-RecordSet-List', this.options, ViewRecordSetList);
 		this.childViews.edit = this.fable.addView('RSP-RecordSet-Edit', this.options, ViewRecordSetEdit);

package/source/views/RecordSet-Filters.js

@@ -38,6 +38,7 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 				{~FIV:Record~}
 			</div>
 			{~T:PRSP-SUBSET-Filters-Template-Button-Fieldset~}
+			{~T:PRSP-SUBSET-Filters-Template-AddFilter-Fieldset~}
 		</form>
 	</section>
 	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template] -->
@@ -63,6 +64,60 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 		<button type="submit" id="PRSP_Filter_Button_Apply">Apply</button>
 	</fieldset>
 	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-Button-Fieldset] -->
+`
+		},
+		{
+			Hash: 'PRSP-SUBSET-Filters-Template-AddFilter-Fieldset',
+			Template: /*html*/`
+	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-AddFilter-Fieldset] -->
+	<fieldset>
+		<button type="button" id="PRSP_Filter_Button_Add" onclick="_Pict.views['PRSP-Filters'].selectFilterToAdd(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">+</button>
+		<div id="PRSP-SUBSET-Filters-Template-AddFilter-Dropdown"></div>
+	</fieldset>
+	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-AddFilter-Fieldset] -->
+`
+		},
+		{
+			Hash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown',
+			Template: /*html*/`
+	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-AddFilter-Dropdown] -->
+	<div>
+		<select id="PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Select" onchange="event.preventDefault(); _Pict.views['PRSP-Filters'].render('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown', undefined,
+		{
+			RecordSet: event.target.querySelector('option:checked').getAttribute('data-i-recordset'),
+			FilterKey: event.target.querySelector('option:checked').getAttribute('data-i-filter-key'),
+			AvailableClauses: _Pict.providers[\`RSP-Provider-\${event.target.querySelector('option:checked').getAttribute('data-i-recordset')}\`].getFilterClauseSchemaForKey(event.target.querySelector('option:checked').getAttribute('data-i-filter-key')).AvailableClauses,
+		});">
+			{~TS:PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Entry:Scope.getFilterSchema()~}
+		</select>
+		<div id="PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown">
+		</div>
+	</div>
+	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-AddFilter-Dropdown] -->
+`
+		},
+		{
+			Hash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown',
+			Template: /*html*/`
+	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown] -->
+	<select id="PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown-Select">
+		{~TS:PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Entry:Record.AvailableClauses~}
+	</select>
+	<button type="button" id="PRSP_Filter_Button_ConfirmAdd" onclick="_Pict.views['PRSP-Filters'].addFilter(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}',
+		document.getElementById('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown').querySelector('option:checked').getAttribute('data-i-filter-key'),
+		document.getElementById('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown').querySelector('option:checked').getAttribute('data-i-clause-key'),
+	)">Add Filter</button>
+	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown] -->
+`
+		},
+		{
+			Hash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Entry',
+			Template: /*html*/`
+	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Entry] -->
+	<option value="{~D:Record.FilterKey~}|{~D:Record.ClauseKey~}" data-i-recordset="{~D:Record.RecordSet~}" data-i-filter-key="{~D:Record.FilterKey~}" data-i-clause-key="{~D:Record.ClauseKey~}">
+		{~D:Record.DisplayName~}
+	</option>
+	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Entry] -->
 `
 		},
 	],
@@ -75,6 +130,18 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 			DestinationAddress: '#PRSP_Filters_Container',
 			RenderMethod: 'replace'
 		},
+		{
+			RenderableHash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown',
+			TemplateHash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown',
+			ContentDestinationAddress: '#PRSP-SUBSET-Filters-Template-AddFilter-Dropdown',
+			RenderMethod: 'replace',
+		},
+		{
+			RenderableHash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown',
+			TemplateHash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown',
+			ContentDestinationAddress: '#PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown',
+			RenderMethod: 'replace',
+		},
 	],
 
 	Manifests: {},
@@ -275,6 +342,33 @@ class ViewRecordSetSUBSETFilters extends libPictView
 		this.performSearch(pRecordSet, pViewContext);
 	}
 
+	/**
+	 * @param {Event} pEvent - The DOM event that triggered the search
+	 * @param {string} pRecordSet - The record set being filtered
+	 * @param {string} pViewContext - The view context for the filter (ex. List, Dashboard)
+	 */
+	selectFilterToAdd(pEvent, pRecordSet, pViewContext)
+	{
+		pEvent.preventDefault();
+		//const tmpRecordsetProvider = this.pict.providers['RSP-Provider-' + pRecordSet];
+		//this.pict.log.info(`Selecting filter to add for record set: ${pRecordSet} in view context: ${pViewContext}`, tmpRecordsetProvider.getFilterSchema())
+		this.renderWithScope(this.pict.providers[`RSP-Provider-${pRecordSet}`], 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown');
+	}
+
+	addFilter(pEvent, pRecordSet, pViewContext, pFilterKey, pClauseKey)
+	{
+		this.pict.log.info(`Adding filter: ${pFilterKey} with clause: ${pClauseKey} to record set: ${pRecordSet} in view context: ${pViewContext}`);
+		this.pict.providers[`RSP-Provider-${pRecordSet}`].addFilterClause(pFilterKey, pClauseKey);
+		//FIXME: we need the record from the original render here but no longer have it...
+		//this.render();
+	}
+
+	getFilterSchema(pRecordSet)
+	{
+		const tmpRecordsetProvider = this.pict.providers['RSP-Provider-' + pRecordSet];
+		return Object.values(tmpRecordsetProvider.getFilterSchema()).flatMap((pFilter) => pFilter.AvailableClauses || []);
+	}
+
 	/**
 	 * Lifecycle hook that triggers after the view is rendered.
 	 *
@@ -288,7 +382,36 @@ class ViewRecordSetSUBSETFilters extends libPictView
 		//FIXME: since this is rendering to the DOM indirectly, can't marshal right after render; need to fix this better, if this even works
 		setTimeout(() =>
 		{
-			this.onMarshalToView();
+			if (!pRecord)
+			{
+				pRecord = {};
+			}
+			if (!Array.isArray(pRecord.AvailableClauses))
+			{
+				const tmpSelect = document.getElementById('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Select');
+				if (tmpSelect)
+				{
+					const tmpActiveOption = document.getElementById('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Select')?.querySelector('option:checked')
+					const tmpRecordSet = tmpActiveOption?.getAttribute('data-i-recordset');
+					const tmpFilterKey = tmpActiveOption?.getAttribute('data-i-filter-key');
+					if (tmpRecordSet && tmpFilterKey)
+					{
+						const tmpProvider = this.pict.providers[`RSP-Provider-${tmpRecordSet}`];
+						if (tmpProvider)
+						{
+							pRecord.AvailableClauses = tmpProvider.getFilterClauseSchemaForKey(tmpFilterKey).AvailableClauses;
+							if (Array.isArray(pRecord.AvailableClauses))
+							{
+								this.render('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown', undefined, pRecord);
+							}
+						}
+					}
+				}
+			}
+			setTimeout(() =>
+			{
+				this.onMarshalToView();
+			}, 1);
 		}, 1);
 		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
 	}

package/source/views/filters/RecordSet-Filter-Base.js

@@ -30,13 +30,23 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 	Templates:
 	[
 		{
-			Hash: 'PRSP-Filter-DateRange-Template',
+			Hash: 'PRSP-Filter-Base-Form',
 			Template: /*html*/`
-	<!-- DefaultPackage pict view template: [PRSP-Filter-Base-Template] -->
+	<!-- DefaultPackage pict view template: [PRSP-Filter-Base-Form] -->
 	{~JD:Record~}
+	<!-- DefaultPackage end view template:	[PRSP-Filter-Base-Form] -->
+`
+		},
+		{
+			Hash: 'PRSP-Filter-Base-Template',
+			Template: /*html*/`
+	<!-- DefaultPackage pict view template: [PRSP-Filter-Base-Template] -->
+	<div>
+		{~TBR:Context[0].getFilterFormTemplate()~}
+	</div>
 	<!-- DefaultPackage end view template:	[PRSP-Filter-Base-Template] -->
 `
-		}
+		},
 	],
 
 	Renderables:
@@ -78,7 +88,11 @@ class ViewRecordSetSUBSETFilterBase extends libPictView
 			Name: pRecord.Label || pRecord.ExternalFilterByColumn || pRecord.ExternalFilterByColumns?.[0] || pRecord.FilterByColumn || pRecord.FilterByColumns?.[0] || 'Value',
 			DataType: 'String',
 		};
+	}
 
+	getFilterFormTemplate()
+	{
+		return 'PRSP-Filter-Base-Form';
 	}
 }
 

package/source/views/filters/RecordSet-Filter-DateMatch.js

@@ -6,9 +6,6 @@ const _DEFAULT_CONFIGURATION_Filter_DateMatch =
 {
 	ViewIdentifier: 'PRSP-Filter-DateMatch',
 
-	DefaultRenderable: 'PRSP_Renderable_Filter_DateMatch',
-	DefaultDestinationAddress: '#PRSP_Renderable_Filter_DateMatch',
-
 	Templates:
 	[
 		{
@@ -20,16 +17,6 @@ const _DEFAULT_CONFIGURATION_Filter_DateMatch =
 `
 		}
 	],
-
-	Renderables:
-	[
-		{
-			RenderableHash: 'PRSP_Renderable_Filter_DateMatch',
-			TemplateHash: 'PRSP-Filter-DateMatch-Template',
-			DestinationAddress: '#PRSP_Filter_DateMatch_Container',
-			RenderMethod: 'replace'
-		}
-	],
 };
 
 class ViewRecordSetSUBSETFilterDateMatch extends ViewRecordSetSUBSETFilterBase
@@ -49,6 +36,11 @@ class ViewRecordSetSUBSETFilterDateMatch extends ViewRecordSetSUBSETFilterBase
 	//{~IWVDA:PSRSFilterProxyView:Record.ClauseDescriptor~}
 		pRecord.ClauseDescriptor.DataType = 'DateTime';
 	}
+
+	getFilterFormTemplate()
+	{
+		return 'PRSP-Filter-DateMatch-Template';
+	}
 }
 
 module.exports = ViewRecordSetSUBSETFilterDateMatch;

package/source/views/filters/RecordSet-Filter-DateRange.js

@@ -6,9 +6,6 @@ const _DEFAULT_CONFIGURATION_Filter_DateRange =
 {
 	ViewIdentifier: 'PRSP-Filter-DateRange',
 
-	DefaultRenderable: 'PRSP_Renderable_Filter_DateRange',
-	DefaultDestinationAddress: '#PRSP_Renderable_Filter_DateRange',
-
 	Templates:
 	[
 		{
@@ -21,16 +18,6 @@ const _DEFAULT_CONFIGURATION_Filter_DateRange =
 `
 		}
 	],
-
-	Renderables:
-	[
-		{
-			RenderableHash: 'PRSP_Renderable_Filter_DateRange',
-			TemplateHash: 'PRSP-Filter-DateRange-Template',
-			DestinationAddress: '#PRSP_Filter_DateRange_Container',
-			RenderMethod: 'replace'
-		}
-	],
 };
 
 class ViewRecordSetSUBSETFilterDateRange extends ViewRecordSetSUBSETFilterBaseRange
@@ -67,6 +54,11 @@ class ViewRecordSetSUBSETFilterDateRange extends ViewRecordSetSUBSETFilterBaseRa
 			return fCallback(pError);
 		});
 	}
+
+	getFilterFormTemplate()
+	{
+		return 'PRSP-Filter-DateRange-Template';
+	}
 }
 
 module.exports = ViewRecordSetSUBSETFilterDateRange;