Skip to content

Commit

Permalink
fix(console): using sveltekit-search-params
Browse files Browse the repository at this point in the history
  • Loading branch information
xmlking committed Sep 15, 2024
1 parent 1c8d953 commit bbc1de7
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 7 deletions.
1 change: 1 addition & 0 deletions apps/console/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
"svelte-ux": "0.74.8",
"sveltekit-flash-message": "2.4.4",
"sveltekit-rate-limiter": "0.5.2",
"sveltekit-search-params": "3.0.0",
"sveltekit-superforms": "2.18.1",
"sveltekit-view-transition": "0.5.3",
"swapy": "0.2.1",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script lang="ts">
import { goto } from '$app/navigation';
import * as m from '$i18n/messages';
import { type Subject, searchSubjects } from '$lib/api/search-subjects';
import { searchSubjects } from '$lib/api/search-subjects';
import type { PolicySearch } from '$lib/schema/policy';
import { getLoadingState } from '$lib/stores/loading';
import type { PartialGraphQLErrors } from '$lib/types';
import type { PartialGraphQLErrors, Subject } from '$lib/types';
import { AppBar, Autocomplete, type AutocompleteOption, type PopupSettings, popup } from '@skeletonlabs/skeleton';
import { DebugShell, GraphQLErrors } from '@spectacular/skeleton/components';
import { Alerts, ErrorMessage } from '@spectacular/skeleton/components/form';
Expand All @@ -14,13 +14,27 @@ import * as Form from 'formsnap';
import { LoaderIcon, MoreHorizontalIcon, ScaleIcon, SearchIcon, ShieldCheckIcon } from 'lucide-svelte';
import type { FormEventHandler } from 'svelte/elements';
import SuperDebug, { superForm, type SuperValidated } from 'sveltekit-superforms';
import { ssp, queryParameters } from 'sveltekit-search-params';
const log = new Logger('policies:search-form:browser');
export let formInitData: SuperValidated<PolicySearch>;
// Variables
const loadingState = getLoadingState();
const queryParams = queryParameters(
{
subjectType: true,
subjectId: true,
subjectDisplayName: true,
limit: ssp.number(), // .number(10),
offset: ssp.number(),
},
{
debounceHistory: 300, //a new history entry will be created after 300ms of this store not changing
},
);
$: console.log($queryParams);
// Search form
const form = superForm(formInitData, {
Expand Down Expand Up @@ -50,7 +64,12 @@ let subjects: Subject[];
// Functions
async function clearSubject() {
await goto(`/policies?subjectType=${$formData.subjectType}&limit=${$formData.limit}&offset=${$formData.offset}`);
$queryParams.subjectType = $formData.subjectType;
$queryParams.subjectId = null;
$queryParams.subjectDisplayName = null;
$queryParams.limit = $formData.limit;
$queryParams.offset = $formData.offset;
// await goto(`/policies?subjectType=${$formData.subjectType}&limit=${$formData.limit}&offset=${$formData.offset}`);
}
const onInput: FormEventHandler<HTMLInputElement> = async (event) => {
Expand All @@ -73,7 +92,6 @@ const onInput: FormEventHandler<HTMLInputElement> = async (event) => {
const onChange: FormEventHandler<HTMLInputElement> = async (event) => {
const value = event.currentTarget.value;
console.log(`onChange: ${value}`);
if (value === '') {
await clearSubject();
}
Expand All @@ -84,9 +102,15 @@ const onSelect = async (event: CustomEvent<AutocompleteOption<Subject>>) => {
console.log(`onSelect: ${value}`);
$formData.subjectId = value.id;
$formData.subjectDisplayName = value.displayName;
await goto(
`/policies?subjectType=${$formData.subjectType}&subjectId=${$formData.subjectId}&subjectDisplayName=${$formData.subjectDisplayName}&limit=${$formData.limit}&offset=${$formData.offset}`,
);
$queryParams.subjectType = $formData.subjectType;
$queryParams.subjectId = $formData.subjectId;
$queryParams.subjectDisplayName = $formData.subjectDisplayName;
$queryParams.limit = $formData.limit;
$queryParams.offset = $formData.offset;
// await goto(
// `/policies?subjectType=${$formData.subjectType}&subjectId=${$formData.subjectId}&subjectDisplayName=${$formData.subjectDisplayName}&limit=${$formData.limit}&offset=${$formData.offset}`,
// );
};
// Reactivity
Expand Down
18 changes: 18 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit bbc1de7

Please sign in to comment.