benjaminramey/Twain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Get grid working

Browse Source
This commit is contained in:
Benjamin Ramey
2024-04-30 22:22:13 -05:00
parent 45df75d68f
commit c64202b66b
14 changed files with 466 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/OAP/Oap.Theme.Svelte/src/ApplicationForm.svelte
View File

@@ -2,7 +2,10 @@
import { Client, setContextClient, queryStore } from "@urql/svelte";
import { graphql } from "./gql";
import ApplicationFormStep from "./components/ApplicationFormStep.svelte";
import step from "./lib/stores/step";
import { step, applicationId, application } from "./lib/stores";
import { createHttpClient } from "./lib/oap/oapApiV1Client";
import { onMount } from "svelte";
import type { IServiceError, IServiceResult } from "facility-core";
export let antiForgeryToken: string | null;
export let contentItemId: string;
@@ -33,9 +36,61 @@
},
});
function handleSubmit(event: SubmitEvent) {
const oapApi = createHttpClient({
fetch,
baseUri: "https://localhost:5001/oap/api/v1",
});
let serviceError: IServiceError | null = null;
let serviceMsg: string | null;
function setResultOrError<T>(
response: IServiceResult<T>,
) {
if (response.error) {
serviceError = response.error;
} else {
serviceMsg = "Did a thing!";
step.update((x) => x + 1);
}
}
async function handleSubmit(event: SubmitEvent) {
if (!$applicationId) {
const response = await oapApi.createApplication({
applicationCreateSet: {
terms: {
hasReadInstructions: true,
},
},
});
setResultOrError(response);
applicationId.set(response.value?.application?.id ?? null);
} else {
const response = await oapApi.updateApplication({
id: $applicationId,
applicationChangeSet: {
terms: {
hasReadInstructions: true,
},
},
});
setResultOrError(response);
}
}
onMount(async () => {
if ($applicationId) {
const response = await oapApi.getApplication({
id: $applicationId,
});
setResultOrError(response);
application.set(response.value?.application ?? null);
}
});
</script>
{#if $content.fetching}
@@ -54,6 +109,16 @@
{oapApplicationForm.displayText}
</h1>
{/if}
{#if serviceError}
<div>
ERRORS: {serviceError.message}
</div>
{/if}
{#if serviceMsg}
<div>
success: {serviceMsg}
</div>
{/if}
{#each oapApplicationForm?.list?.contentItems ?? [] as contentItem, index}
{#if contentItem?.__typename === "OapApplicationFormStep" && $step === index}
<ApplicationFormStep

19
src/OAP/Oap.Theme.Svelte/src/components/ButtonPart.svelte
View File

@@ -3,6 +3,10 @@
export const ButtonPartFragment = graphql(/* GraphQL */ `
fragment ButtonPart on Button {
metadata {
alignment
size
}
button {
type
text
@@ -16,20 +20,28 @@
}
`);
export function isButtonType(buttonType: string | undefined | null): buttonType is HTMLButtonElement['type'] {
return !!(buttonType as HTMLButtonElement['type']);
export function isButtonType(
buttonType: string | undefined | null,
): buttonType is HTMLButtonElement["type"] {
return !!(buttonType as HTMLButtonElement["type"]);
}
</script>
<script lang="ts">
import { type FragmentType, useFragment } from "../gql";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof ButtonPartFragment>;
const content = useFragment(ButtonPartFragment, fragment);
const buttonType: HTMLButtonElement['type'] = isButtonType(content.button?.type) ? content.button?.type : "button";
const buttonType: HTMLButtonElement["type"] = isButtonType(
content.button?.type,
)
? content.button?.type
: "button";
</script>
<Widget metadata={content.metadata}>
<button
class="block cursor-pointer rounded-md bg-amber-300 px-4 py-2 text-gray-800 hover:bg-amber-500 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-600"
type={buttonType}
@@ -38,3 +50,4 @@
>
{content.button?.text}
</button>
</Widget>

26
src/OAP/Oap.Theme.Svelte/src/components/Form.svelte
View File

@@ -1,5 +1,4 @@
<script context="module" lang="ts">
import type { EventHandler } from "svelte/elements";
import { graphql } from "../gql";
export const FormFragment = graphql(/* GraphQL */ `
@@ -26,14 +25,19 @@
</script>
<script lang="ts">
import type { EventHandler } from "svelte/elements";
import { useFragment, type FragmentType } from "../gql";
import ButtonPart from "./ButtonPart.svelte";
import InputPart from "./InputPart.svelte";
import LabelPart from "./LabelPart.svelte";
import SelectPart from "./SelectPart.svelte";
import TextAreaPart from "./TextAreaPart.svelte";
import Widget from "./Widget.svelte";
export let onSubmit: EventHandler<SubmitEvent, HTMLFormElement> | undefined | null;
export let onSubmit:
| EventHandler<SubmitEvent, HTMLFormElement>
| undefined
| null;
export let antiForgeryToken: string | null;
export let fragment: FragmentType<typeof FormFragment>;
@@ -46,30 +50,24 @@
method={content.form?.method}
on:submit|preventDefault={onSubmit}
>
<input type="hidden" name="__RequestVerificationToken" value={antiForgeryToken}/>
<div class="flex flex-col gap-2">
<input
type="hidden"
name="__RequestVerificationToken"
value={antiForgeryToken}
/>
<div class="grid grid-cols-12 gap-2">
{#if content.flow}
{#each content.flow.widgets ?? [] as widget}
{#if widget?.__typename === "Button"}
<div class="flex justify-end">
<ButtonPart fragment={widget} />
</div>
{:else if widget?.__typename === "Input"}
<div>
<InputPart fragment={widget} />
</div>
{:else if widget?.__typename === "Label"}
<div>
<LabelPart fragment={widget} />
</div>
{:else if widget?.__typename === "Select"}
<div>
<SelectPart fragment={widget} />
</div>
{:else if widget?.__typename === "TextArea"}
<div>
<TextAreaPart fragment={widget} />
</div>
{/if}
{/each}
{/if}

13
src/OAP/Oap.Theme.Svelte/src/components/InputPart.svelte
View File

@@ -3,6 +3,10 @@
export const InputPartFragment = graphql(/* GraphQL */ `
fragment InputPart on Input {
metadata {
alignment
size
}
input {
defaultValue
placeholder
@@ -27,6 +31,7 @@
<script lang="ts">
import { useFragment, type FragmentType } from "../gql";
import CommonFieldParts from "./CommonFieldParts.svelte";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof InputPartFragment>;
const content = useFragment(InputPartFragment, fragment);
@@ -41,9 +46,12 @@
let value = content.input?.defaultValue ?? "";
</script>
<CommonFieldParts formElementLabel={content.formElementLabel}
<Widget metadata={content.metadata}>
<CommonFieldParts
formElementLabel={content.formElementLabel}
formElement={content.formElement}
explanation={content.explanation} />
explanation={content.explanation}
/>
<input
id={content.formElement?.id}
@@ -53,3 +61,4 @@
{value}
placeholder={content.input?.placeholder}
/>
</Widget>

7
src/OAP/Oap.Theme.Svelte/src/components/LabelPart.svelte
View File

@@ -3,6 +3,10 @@
export const LabelPartFragment = graphql(/* GraphQL */ `
fragment LabelPart on Label {
metadata {
alignment
size
}
displayText
formElement {
id
@@ -18,10 +22,13 @@
<script lang="ts">
import { useFragment, type FragmentType } from "../gql";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof LabelPartFragment>;
const content = useFragment(LabelPartFragment, fragment);
</script>
<Widget metadata={content.metadata}>
<label id={content.formElement?.id} for={content.label?.for}>
{content.label?.value}
</label>
</Widget>

18
src/OAP/Oap.Theme.Svelte/src/components/SelectPart.svelte
View File

@@ -3,6 +3,10 @@
export const SelectPartFragment = graphql(/* GraphQL */ `
fragment SelectPart on Select {
metadata {
alignment
size
}
formElementLabel {
label
}
@@ -30,15 +34,19 @@
<script lang="ts">
import { useFragment, type FragmentType } from "../gql";
import CommonFieldParts from "./CommonFieldParts.svelte";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof SelectPartFragment>;
const content = useFragment(SelectPartFragment, fragment);
const showDropdown = content.select?.editor === "select";
</script>
<CommonFieldParts formElementLabel={content.formElementLabel}
<Widget metadata={content.metadata}>
<CommonFieldParts
formElementLabel={content.formElementLabel}
formElement={content.formElement}
explanation={content.explanation} />
explanation={content.explanation}
/>
{#if !showDropdown}
<div class="mt-2 space-y-2">
@@ -67,10 +75,12 @@
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
>
{#each content.select?.options ?? [] as option}
<option value={option?.value ?? option?.text} selected={false}
>{option?.text}</option
<option
value={option?.value ?? option?.text}
selected={false}>{option?.text}</option
>
{/each}
</select>
</div>
{/if}
</Widget>

19
src/OAP/Oap.Theme.Svelte/src/components/TextAreaPart.svelte
View File

@@ -3,6 +3,10 @@
export const TextAreaPartFragment = graphql(/* GraphQL */ `
fragment TextAreaPart on TextArea {
metadata {
alignment
size
}
explanation {
...RichText
}
@@ -26,16 +30,23 @@
<script lang="ts">
import { useFragment, type FragmentType } from "../gql";
import CommonFieldParts from "./CommonFieldParts.svelte";
import Widget from "./Widget.svelte";
export let fragment: FragmentType<typeof TextAreaPartFragment>;
const content = useFragment(TextAreaPartFragment, fragment);
</script>
<CommonFieldParts formElementLabel={content.formElementLabel}
<Widget metadata={content.metadata}>
<CommonFieldParts
formElementLabel={content.formElementLabel}
formElement={content.formElement}
explanation={content.explanation} />
explanation={content.explanation}
/>
<textarea id={content.formElement?.id}
<textarea
id={content.formElement?.id}
name={content.formInputElement?.name}
class="block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"
placeholder={content.textArea?.placeholder}>
placeholder={content.textArea?.placeholder}
>
</textarea>
</Widget>

25
src/OAP/Oap.Theme.Svelte/src/components/Widget.svelte Normal file
View File

@@ -0,0 +1,25 @@
<script lang="ts">
import type { FlowMetadata } from "../gql/graphql";
export let metadata: FlowMetadata | null | undefined;
const colspan = metadata?.size == 100 ? "col-span-12"
: metadata?.size == 50 ? "col-span-6"
: metadata?.size == 25 ? "col-span-3"
: metadata?.size == 33 ? "col-span-4"
: metadata?.size == 66 ? "col-span-8"
: "";
const justify = metadata?.alignment === "Right" ? "justify-self-end"
: metadata?.alignment === "Left" ? "justify-self-start"
: metadata?.alignment === "Center" ? "justify-self-center"
: metadata?.alignment === "Justify" ? "justify-self-stretch"
: "";
const cssClasses = colspan + " " + justify;
</script>
<div class={cssClasses}>
<slot>
A widget should be here.
</slot>
</div>

30
src/OAP/Oap.Theme.Svelte/src/gql/gql.ts
View File

@@ -14,14 +14,14 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
*/
const documents = {
"\n\t\tquery OapApplicationForm($contentItemId: ID!) {\n\t\t\toapApplicationForm(where: { contentItemId: $contentItemId }) {\n\t\t\t\tdisplayText\n\t\t\t\tcontentItemId\n\t\t\t\tlist {\n\t\t\t\t\tcontentItems {\n\t\t\t\t\t\t__typename\n\t\t\t\t\t\t...OapApplicationFormStep\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.OapApplicationFormDocument,
"\n fragment ButtonPart on Button {\n button {\n type\n text\n }\n formInputElement {\n name\n }\n formElement {\n id\n }\n }\n ": types.ButtonPartFragmentDoc,
"\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...LabelPart\n\t\t\t\t\t...ButtonPart\n\t\t\t\t\t...InputPart\n\t\t\t\t\t...SelectPart\n\t\t\t\t\t...TextAreaPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.FormFragmentDoc,
"\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t": types.InputPartFragmentDoc,
"\n\t\tfragment LabelPart on Label {\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t": types.LabelPartFragmentDoc,
"\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.OapApplicationFormStepFragmentDoc,
"\n\t\tfragment ButtonPart on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t}\n\t": types.ButtonPartFragmentDoc,
"\n\t\tfragment Form on Form {\n\t\t\tdisplayText\n\t\t\tform {\n\t\t\t\taction\n\t\t\t\tmethod\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...LabelPart\n\t\t\t\t\t...ButtonPart\n\t\t\t\t\t...InputPart\n\t\t\t\t\t...SelectPart\n\t\t\t\t\t...TextAreaPart\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.FormFragmentDoc,
"\n\t\tfragment InputPart on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t": types.InputPartFragmentDoc,
"\n\t\tfragment LabelPart on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t": types.LabelPartFragmentDoc,
"\n\t\tfragment RichText on HtmlBodyPart {\n\t\t\thtml\n\t\t}\n\t": types.RichTextFragmentDoc,
"\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.SelectPartFragmentDoc,
"\n\t\tfragment TextAreaPart on TextArea {\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t": types.TextAreaPartFragmentDoc,
"\n\t\tfragment SelectPart on Select {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t": types.SelectPartFragmentDoc,
"\n\t\tfragment TextAreaPart on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t": types.TextAreaPartFragmentDoc,
};
/**
@@ -45,7 +45,11 @@ export function graphql(source: "\n\t\tquery OapApplicationForm($contentItemId:
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment ButtonPart on Button {\n button {\n type\n text\n }\n formInputElement {\n name\n }\n formElement {\n id\n }\n }\n "): (typeof documents)["\n fragment ButtonPart on Button {\n button {\n type\n text\n }\n formInputElement {\n name\n }\n formElement {\n id\n }\n }\n "];
export function graphql(source: "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n\t\tfragment ButtonPart on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment ButtonPart on Button {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tbutton {\n\t\t\t\ttype\n\t\t\t\ttext\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t}\n\t"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
@@ -53,15 +57,11 @@ export function graphql(source: "\n\t\tfragment Form on Form {\n\t\t\tdisplayTex
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment InputPart on Input {\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"];
export function graphql(source: "\n\t\tfragment InputPart on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment InputPart on Input {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t\ttype\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n\t\tfragment LabelPart on Label {\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment LabelPart on Label {\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment OapApplicationFormStep on OapApplicationFormStep {\n\t\t\tdisplayText\n\t\t\tcontentItemId\n\t\t\thtmlBody {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tflow {\n\t\t\t\twidgets {\n\t\t\t\t\t...Form\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
export function graphql(source: "\n\t\tfragment LabelPart on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment LabelPart on Label {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tdisplayText\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tlabel {\n\t\t\t\tfor\n\t\t\t\tvalue\n\t\t\t}\n\t\t\tcontentType\n\t\t}\n\t"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
@@ -69,11 +69,11 @@ export function graphql(source: "\n\t\tfragment RichText on HtmlBodyPart {\n\t\t
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment SelectPart on Select {\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
export function graphql(source: "\n\t\tfragment SelectPart on Select {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment SelectPart on Select {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tselect {\n\t\t\t\tdefaultValue\n\t\t\t\teditor\n\t\t\t\toptions {\n\t\t\t\t\ttext\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n\t\tfragment TextAreaPart on TextArea {\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment TextAreaPart on TextArea {\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"];
export function graphql(source: "\n\t\tfragment TextAreaPart on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"): (typeof documents)["\n\t\tfragment TextAreaPart on TextArea {\n\t\t\tmetadata {\n\t\t\t\talignment\n\t\t\t\tsize\n\t\t\t}\n\t\t\texplanation {\n\t\t\t\t...RichText\n\t\t\t}\n\t\t\tformElement {\n\t\t\t\tid\n\t\t\t}\n\t\t\tformElementLabel {\n\t\t\t\tlabel\n\t\t\t}\n\t\t\tformInputElement {\n\t\t\t\tname\n\t\t\t}\n\t\t\ttextArea {\n\t\t\t\tdefaultValue\n\t\t\t\tplaceholder\n\t\t\t}\n\t\t}\n\t"];
export function graphql(source: string) {
return (documents as any)[source] ?? {};

42
src/OAP/Oap.Theme.Svelte/src/gql/graphql.ts
View File

File diff suppressed because one or more lines are too long

178
src/OAP/Oap.Theme.Svelte/src/lib/oap/oapApiV1Client.ts
View File

@@ -1,48 +1,81 @@
// DO NOT EDIT: generated by fsdgenjs
import { HttpClientUtility, IServiceResult, IHttpClientOptions } from 'facility-core';
import { IOapApiV1Client, IGetApplicationsRequest, IGetApplicationsResponse, ICreateApplicationRequest, ICreateApplicationResponse, IGetApplicationRequest, IGetApplicationResponse, IUpdateApplicationRequest, IUpdateApplicationResponse, IApplication, IApplicationCreateSet, IApplicationChangeSet, IApplicationTermsCreateSet, IApplicationTerms, ApplicationStatus } from './oapApiV1ClientTypes';
export * from './oapApiV1ClientTypes';
import {
HttpClientUtility,
type IServiceResult,
type IHttpClientOptions,
} from "facility-core";
import type {
IOapApiV1Client,
IGetApplicationsRequest,
IGetApplicationsResponse,
ICreateApplicationRequest,
ICreateApplicationResponse,
IGetApplicationRequest,
IGetApplicationResponse,
IUpdateApplicationRequest,
IUpdateApplicationResponse,
IApplication,
IApplicationCreateSet,
IApplicationChangeSet,
IApplicationTermsCreateSet,
IApplicationTerms,
ApplicationStatus,
} from "./oapApiV1ClientTypes";
export * from "./oapApiV1ClientTypes";
/** Provides access to OapApiV1Client over HTTP via fetch. */
export function createHttpClient({ fetch, baseUri }: IHttpClientOptions): IOapApiV1Client {
export function createHttpClient({
fetch,
baseUri,
}: IHttpClientOptions): IOapApiV1Client {
return new OapApiV1ClientHttpClient(fetch, baseUri);
}
const { fetchResponse, createResponseError, createRequiredRequestFieldError } = HttpClientUtility;
const { fetchResponse, createResponseError, createRequiredRequestFieldError } =
HttpClientUtility;
type IFetch = HttpClientUtility.IFetch;
type IFetchRequest = HttpClientUtility.IFetchRequest;
class OapApiV1ClientHttpClient implements IOapApiV1Client {
constructor(fetch: IFetch, baseUri?: string) {
if (typeof fetch !== 'function') {
throw new TypeError('fetch must be a function.');
if (typeof fetch !== "function") {
throw new TypeError("fetch must be a function.");
}
if (typeof baseUri === 'undefined') {
baseUri = 'https://oaprotection.org/api/v1';
if (typeof baseUri === "undefined") {
baseUri = "https://oaprotection.org/api/v1";
}
if (/[^\/]$/.test(baseUri)) {
baseUri += '/';
baseUri += "/";
}
this._fetch = fetch;
this._baseUri = baseUri;
}
/** Gets applications for the current user. */
public getApplications(request: IGetApplicationsRequest, context?: unknown): Promise<IServiceResult<IGetApplicationsResponse>> {
let uri = 'applications';
public getApplications(
request: IGetApplicationsRequest,
context?: unknown
): Promise<IServiceResult<IGetApplicationsResponse>> {
let uri = "applications";
const query: string[] = [];
request.status == null || query.push('status=' + request.status);
request.limit == null || query.push('limit=' + request.limit.toString());
request.nextToken == null || query.push('nextToken=' + encodeURIComponent(request.nextToken));
request.status == null || query.push("status=" + request.status);
request.limit == null ||
query.push("limit=" + request.limit.toString());
request.nextToken == null ||
query.push("nextToken=" + encodeURIComponent(request.nextToken));
if (query.length) {
uri = uri + '?' + query.join('&');
uri = uri + "?" + query.join("&");
}
const fetchRequest: IFetchRequest = {
method: 'GET',
method: "GET",
};
return fetchResponse(this._fetch, this._baseUri + uri, fetchRequest, context)
.then(result => {
return fetchResponse(
this._fetch,
this._baseUri + uri,
fetchRequest,
context
).then((result) => {
const status = result.response.status;
let value: IGetApplicationsResponse | null = null;
if (status === 200) {
@@ -51,69 +84,96 @@ class OapApiV1ClientHttpClient implements IOapApiV1Client {
}
}
if (!value) {
return createResponseError(status, result.json) as IServiceResult<IGetApplicationsResponse>;
return createResponseError(
status,
result.json
) as IServiceResult<IGetApplicationsResponse>;
}
return { value: value };
});
}
/** Creates a new application for the current user. */
public createApplication(request: ICreateApplicationRequest, context?: unknown): Promise<IServiceResult<ICreateApplicationResponse>> {
const uri = 'applications/';
public createApplication(
request: ICreateApplicationRequest,
context?: unknown
): Promise<IServiceResult<ICreateApplicationResponse>> {
const uri = "applications/";
if (!request.applicationCreateSet) {
return Promise.resolve(createRequiredRequestFieldError('applicationCreateSet'));
return Promise.resolve(
createRequiredRequestFieldError("applicationCreateSet")
);
}
const fetchRequest: IFetchRequest = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(request.applicationCreateSet)
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(request.applicationCreateSet),
};
return fetchResponse(this._fetch, this._baseUri + uri, fetchRequest, context)
.then(result => {
return fetchResponse(
this._fetch,
this._baseUri + uri,
fetchRequest,
context
).then((result) => {
const status = result.response.status;
let value: ICreateApplicationResponse | null = null;
if (status === 200) {
if (result.json) {
value = { application: result.json } as ICreateApplicationResponse;
value = {
application: result.json,
} as ICreateApplicationResponse;
}
}
else if (status === 201) {
} else if (status === 201) {
value = {};
}
if (!value) {
return createResponseError(status, result.json) as IServiceResult<ICreateApplicationResponse>;
return createResponseError(
status,
result.json
) as IServiceResult<ICreateApplicationResponse>;
}
return { value: value };
});
}
/** Gets the specified application for the current user. */
public getApplication(request: IGetApplicationRequest, context?: unknown): Promise<IServiceResult<IGetApplicationResponse>> {
public getApplication(
request: IGetApplicationRequest,
context?: unknown
): Promise<IServiceResult<IGetApplicationResponse>> {
const uriPartId = request.id != null && encodeURIComponent(request.id);
if (!uriPartId) {
return Promise.resolve(createRequiredRequestFieldError('id'));
return Promise.resolve(createRequiredRequestFieldError("id"));
}
const uri = `applications/${uriPartId}`;
const fetchRequest: IFetchRequest = {
method: 'GET',
method: "GET",
};
return fetchResponse(this._fetch, this._baseUri + uri, fetchRequest, context)
.then(result => {
return fetchResponse(
this._fetch,
this._baseUri + uri,
fetchRequest,
context
).then((result) => {
const status = result.response.status;
let value: IGetApplicationResponse | null = null;
if (status === 200) {
if (result.json) {
value = { application: result.json } as IGetApplicationResponse;
value = {
application: result.json,
} as IGetApplicationResponse;
}
}
else if (status === 304) {
} else if (status === 304) {
value = { notModified: true };
}
if (!value) {
return createResponseError(status, result.json) as IServiceResult<IGetApplicationResponse>;
return createResponseError(
status,
result.json
) as IServiceResult<IGetApplicationResponse>;
}
let headerValue: string | null | undefined;
headerValue = result.response.headers.get('eTag');
headerValue = result.response.headers.get("eTag");
if (headerValue != null) {
value.eTag = headerValue;
}
@@ -122,31 +182,45 @@ class OapApiV1ClientHttpClient implements IOapApiV1Client {
}
/** Updates the application. */
public updateApplication(request: IUpdateApplicationRequest, context?: unknown): Promise<IServiceResult<IUpdateApplicationResponse>> {
public updateApplication(
request: IUpdateApplicationRequest,
context?: unknown
): Promise<IServiceResult<IUpdateApplicationResponse>> {
const uriPartId = request.id != null && encodeURIComponent(request.id);
if (!uriPartId) {
return Promise.resolve(createRequiredRequestFieldError('id'));
return Promise.resolve(createRequiredRequestFieldError("id"));
}
const uri = `applications/${uriPartId}`;
if (!request.applicationChangeSet) {
return Promise.resolve(createRequiredRequestFieldError('applicationChangeSet'));
return Promise.resolve(
createRequiredRequestFieldError("applicationChangeSet")
);
}
const fetchRequest: IFetchRequest = {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(request.applicationChangeSet)
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(request.applicationChangeSet),
};
return fetchResponse(this._fetch, this._baseUri + uri, fetchRequest, context)
.then(result => {
return fetchResponse(
this._fetch,
this._baseUri + uri,
fetchRequest,
context
).then((result) => {
const status = result.response.status;
let value: IUpdateApplicationResponse | null = null;
if (status === 200) {
if (result.json) {
value = { application: result.json } as IUpdateApplicationResponse;
value = {
application: result.json,
} as IUpdateApplicationResponse;
}
}
if (!value) {
return createResponseError(status, result.json) as IServiceResult<IUpdateApplicationResponse>;
return createResponseError(
status,
result.json
) as IServiceResult<IUpdateApplicationResponse>;
}
return { value: value };
});

5
src/OAP/Oap.Theme.Svelte/src/lib/stores.ts Normal file
View File

@@ -0,0 +1,5 @@
import applicationId from "./stores/applicationId";
import step from "./stores/step";
import application from './stores/application';
export { step, applicationId, application };

6
src/OAP/Oap.Theme.Svelte/src/lib/stores/application.ts Normal file
View File

@@ -0,0 +1,6 @@
import { writable } from "svelte/store";
import { type IApplication } from "../oap/oapApiV1ClientTypes";
const application = writable<IApplication | null>(null);
export default application;

4
src/OAP/Oap.Theme.Svelte/src/lib/stores/applicationId.ts Normal file
View File

@@ -0,0 +1,4 @@
import { writable } from 'svelte/store';
const applicationId = writable<string | null>(null);
export default applicationId;