Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add linkedQueryParam implementation, tests and docs #526

Merged
merged 1 commit into from
Dec 9, 2024

Conversation

eneajaho
Copy link
Collaborator

@eneajaho eneajaho commented Nov 15, 2024

Added docs for most of the usecases:

  • string
  • number
  • boolean
  • object
  • array

Added example for filtering and pagination with resource API.

Added multiple tests to test all the possible usecases.

Added 2 helper functions for easier parsing (paramToNumber, paramToBoolean), with support for defaultValue.

Here is some self-explanatory code examples:

export class MyCmp {

        readonly searchQuery = linkedQueryParam('searchQuery');
	
	// Parse a boolean query parameter
	showHidden = linkedQueryParam('showHidden', { parse: paramToBoolean({defaultValue: false}) });

	// Parse a number query parameter
	count = linkedQueryParam('count', { parse: paramToNumber({defaultValue: 0}) });

	// Parse an object query parameter
	filter = linkedQueryParam('filter', {
		parse: (value) => JSON.parse(value ?? '{}'),
		stringify: (value) => JSON.stringify(value),
	});

	// Parse an array query parameter
	selectedCategoriesIds = linkedQueryParam<string[]>('selectedCategoriesIds', {
		parse: (value) => value?.split(',').map((x) => x.trim()) ?? [],
		stringify: (value) => value.join(','),
	});

	selectCategoryId(id: string) {
           // we are working with writable signals, so we can set/update them
           this.selectedCategoriesIds.update((x) => [...x, id]);
	}
}

Playground: https://stackblitz.com/edit/stackblitz-starters-v1gtrd?file=src%2Ftodos.ts

@eneajaho eneajaho force-pushed the feat/linked-query-param-initial branch 2 times, most recently from 0a67319 to 097819a Compare December 1, 2024 14:42
@eneajaho eneajaho changed the title wip: feat(linked-query-param): add initial implementation for linked query… feat: add linkedQueryParam implementation, tests and docs Dec 1, 2024
@eneajaho eneajaho force-pushed the feat/linked-query-param-initial branch from 097819a to fbba399 Compare December 1, 2024 14:45
@eneajaho eneajaho marked this pull request as ready for review December 1, 2024 14:45
@eneajaho eneajaho force-pushed the feat/linked-query-param-initial branch from fbba399 to 1b251b6 Compare December 1, 2024 14:52
@eneajaho eneajaho requested a review from nartc December 1, 2024 16:16
@eneajaho eneajaho force-pushed the feat/linked-query-param-initial branch from 1b251b6 to 265ebff Compare December 2, 2024 18:45
The `linkedQueryParam` utility function creates a signal that is linked to a query parameter in the URL. This allows you to easily keep your Angular application's state in sync with the URL, making it easier to share and bookmark specific views.
@eneajaho eneajaho force-pushed the feat/linked-query-param-initial branch from 265ebff to 5d93e68 Compare December 2, 2024 23:16
@eneajaho eneajaho requested review from nartc and JeanMeche December 2, 2024 23:16
@eneajaho eneajaho merged commit 9d4c725 into main Dec 9, 2024
1 check passed
@eneajaho eneajaho deleted the feat/linked-query-param-initial branch December 9, 2024 15:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants