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.

Sign up for GitHub

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

Fix discard changes glitch and first-run glitch #315

Merged
merged 7 commits into from
Oct 13, 2023
Merged

Fix discard changes glitch and first-run glitch #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e814db4
Fixed glitch on workflow task deletion (discard changes modal)
zonia3000 Oct 12, 2023
d660448
Fixed first-run glitches
zonia3000 Oct 12, 2023
e64923a
Updated CHANGELOG.md
zonia3000 Oct 12, 2023
0dbf9e1
Added type="button" in jschema components to avoid automatic form sub…
zonia3000 Oct 12, 2023
8809029
autoindent and minor improvements
zonia3000 Oct 12, 2023
8b5c642
autoindent and displayed error for invalid argument properties
zonia3000 Oct 12, 2023
968f50e
Improve CHANGELOG
tcompa Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

# Unreleased

* Fixed bug with save/discard changes in workflow task (\#315).
* Fixed first-run redirects issue (\#315).

# 0.6.0

* Added fractal-web version to the footer (\#312).
Expand Down
114 changes: 61 additions & 53 deletions src/lib/components/common/jschema/ArrayProperty.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
import PropertyDiscriminator from '$lib/components/common/jschema/PropertyDiscriminator.svelte';
import PropertyDescription from '$lib/components/common/jschema/PropertyDescription.svelte';

export let schemaProperty = undefined;
export let schemaProperty;
let nestedProperties = [];

let accordionParentKey = schemaProperty.key.replaceAll('#', '');
let collapseSymbol = accordionParentKey + '-collapse';

onMount(() => {
schemaProperty.value?.forEach((nestedValue, index) => {
schemaProperty.value?.forEach((/** @type {any} */ nestedValue, /** @type {number} */ index) => {
schemaProperty.addNestedSchemaProperty(nestedValue, index);
});
nestedProperties = schemaProperty.nestedProperties;
Expand All @@ -21,60 +21,68 @@
nestedProperties = schemaProperty.nestedProperties;
}

function removeNestedProperty(index) {
function removeNestedProperty(/** @type {number} */ index) {
schemaProperty.removeNestedSchemaProperty(index);
nestedProperties = schemaProperty.nestedProperties;
}

</script>

{#if schemaProperty }
<div class='d-flex flex-column p-2'>
<div class='property-metadata d-flex flex-row w-100'>
<span class='{schemaProperty.isRequired() ? "fw-bold" : ""}'>{ schemaProperty.title || "" }</span>
<PropertyDescription description={schemaProperty.description} />
</div>
<div class='array-items my-2'>


<div class='accordion' id='{accordionParentKey}'>
<div class='accordion-item'>
<div class='accordion-header'>
<button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
data-bs-target='#{collapseSymbol}'>Arguments list
</button>
</div>
<div id='{collapseSymbol}' class='accordion-collapse collapse' data-bs-parent='#{accordionParentKey}'>
<div class='accordion-body p-1'>
<div class='d-flex justify-content-center p-2'>
<button class='btn btn-primary' on:click={addNestedProperty}>Add argument to list</button>
</div>
<div>
{#each nestedProperties as nestedProperty, index (nestedProperty.key)}
<div class='d-flex'>
<div class='align-self-center m-2'>
<button class='btn btn-warning' on:click={removeNestedProperty(index)}>Remove</button>
</div>
<div class='flex-fill'>
<PropertyDiscriminator schemaProperty={nestedProperty} />
</div>
</div>
{/each}
</div>
</div>
</div>
</div>
</div>


</div>
</div>

{#if schemaProperty}
<div class="d-flex flex-column p-2">
<div class="property-metadata d-flex flex-row w-100">
<span class={schemaProperty.isRequired() ? 'fw-bold' : ''}>{schemaProperty.title || ''}</span>
<PropertyDescription description={schemaProperty.description} />
</div>
<div class="array-items my-2">
<div class="accordion" id={accordionParentKey}>
<div class="accordion-item">
<div class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#{collapseSymbol}"
>
Arguments list
</button>
</div>
<div
id={collapseSymbol}
class="accordion-collapse collapse"
data-bs-parent="#{accordionParentKey}"
>
<div class="accordion-body p-1">
<div class="d-flex justify-content-center p-2">
<button class="btn btn-primary" type="button" on:click={addNestedProperty}>
Add argument to list
</button>
</div>
<div>
{#each nestedProperties as nestedProperty, index (nestedProperty.key)}
<div class="d-flex">
<div class="align-self-center m-2">
<button
class="btn btn-warning"
type="button"
on:click={() => removeNestedProperty(index)}
>
Remove
</button>
</div>
<div class="flex-fill">
<PropertyDiscriminator schemaProperty={nestedProperty} />
</div>
</div>
{/each}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{:else}

<div>
<p>Unable to display array data</p>
</div>


{/if}
<div>
<p>Unable to display array data</p>
</div>
{/if}
182 changes: 88 additions & 94 deletions src/lib/components/common/jschema/ObjectProperty.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<script>
import { onMount } from 'svelte';
import { onMount } from 'svelte';
import PropertiesBlock from '$lib/components/common/jschema/PropertiesBlock.svelte';
import PropertyDescription from '$lib/components/common/jschema/PropertyDescription.svelte';

export let objectSchema = undefined;
export let objectSchema;

let customObjectPropertyKey = undefined;
/** @type {string | undefined} */
let addNestedObjectError = undefined;

let accordionParentKey = objectSchema.key.replaceAll('#', '');
Expand All @@ -23,105 +24,98 @@

function addNestedObjectProperty() {
try {
addNestedObjectError = undefined;
objectSchema.addProperty(customObjectPropertyKey);
customObjectPropertyKey = '';
objectSchema = objectSchema;
} catch (e) {
console.error(e.message);
addNestedObjectError = e;
const msg = /** @type {Error} */ (e).message;
console.error(msg);
addNestedObjectError = msg;
}
}

</script>

{#if objectSchema}

<div class='d-flex flex-column p-2'>
<div class='property-metadata d-flex flex-row w-100'>
<span class='{objectSchema.isRequired() ? "fw-bold" : ""}'>{ objectSchema.title }</span>
<PropertyDescription description={objectSchema.description} />
</div>
<div class='object-properties my-2'>
<div class='accordion' id='{accordionParentKey}'>
<div class='accordion-item'>
<div class='accordion-header'>
<button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
data-bs-target='#{collapseSymbol}'>Argument Properties
</button>
</div>
<div id='{collapseSymbol}' class='accordion-collapse collapse' data-bs-parent='#{accordionParentKey}'>
<div class='accordion-body p-1'>
{#if objectSchema.hasCustomKeyValues}
<div class='d-flex justify-content-center'>
<form class='row row-cols-auto g-3 align-items-center p-2'>
<div class='col-6'>
<input type='text' bind:value={customObjectPropertyKey} placeholder='Key' class='form-control'>
</div>
<div class='col-6'>
<button class='btn btn-primary' on:click={addNestedObjectProperty}>Add property</button>
</div>
</form>
</div>
{#if objectSchema.properties}
{#key objectSchema.properties }
<PropertiesBlock blockKey={objectSchema.key} properties={objectSchema.properties}
removePropertyBlock={(propertyKey) => {
propertyKey = propertyKey.split(objectSchema.manager.keySeparator).pop();
objectSchema.removeProperty(propertyKey);
objectSchema = objectSchema;
}} />
{/key}
{/if}
{:else}
{#if objectSchema.properties}
{#key objectSchema.properties }
<PropertiesBlock blockKey={objectSchema.key} properties={objectSchema.properties} />
{/key}
{/if}
{/if}
</div>
</div>
</div>

</div>
</div>
</div>

<div class="d-flex flex-column p-2">
<div class="property-metadata d-flex flex-row w-100">
<span class={objectSchema.isRequired() ? 'fw-bold' : ''}>{objectSchema.title}</span>
<PropertyDescription description={objectSchema.description} />
</div>
<div class="object-properties my-2">
<div class="accordion" id={accordionParentKey}>
<div class="accordion-item">
<div class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#{collapseSymbol}"
>
Argument Properties
</button>
</div>
<div
id={collapseSymbol}
class="accordion-collapse collapse"
data-bs-parent="#{accordionParentKey}"
>
<div class="accordion-body p-1">
{#if objectSchema.hasCustomKeyValues}
<div class="d-flex justify-content-center">
<form class="row row-cols-auto g-3 align-items-center p-2 flex-grow-1">
<div class="col-lg-6 offset-lg-3 mb-1">
<div class="input-group" class:has-validation={addNestedObjectError}>
<input
type="text"
bind:value={customObjectPropertyKey}
placeholder="Key"
class="form-control"
class:is-invalid={addNestedObjectError}
/>
<button
class="btn btn-primary"
type="button"
on:click={addNestedObjectProperty}
>
Add property
</button>
{#if addNestedObjectError}
<div class="invalid-feedback">{addNestedObjectError}</div>
{/if}
</div>
</div>
</form>
</div>
{#if objectSchema.properties}
{#key objectSchema.properties}
<PropertiesBlock
blockKey={objectSchema.key}
properties={objectSchema.properties}
removePropertyBlock={(propertyKey) => {
propertyKey = propertyKey.split(objectSchema.manager.keySeparator).pop();
objectSchema.removeProperty(propertyKey);
objectSchema = objectSchema;
}}
/>
{/key}
{/if}
{:else if objectSchema.properties}
{#key objectSchema.properties}
<PropertiesBlock
blockKey={objectSchema.key}
properties={objectSchema.properties}
/>
{/key}
{/if}
</div>
</div>
</div>
</div>
</div>
</div>
{:else}


<!--
{#if objectSchema}
<div style='background-color: #9e9e9e'>
<p>Object property</p>

{#if objectSchema.hasCustomKeyValues}
<p>Custom key values</p>
<form action=''>
<input type='text' bind:value={customObjectPropertyKey} placeholder='Key'>
<button on:click={addNestedObjectProperty}>Add property</button>
</form>
{#if objectSchema.properties}
{#key objectSchema.properties }
<PropertiesBlock blockKey={objectSchema.key} properties={objectSchema.properties} removePropertyBlock={(propertyKey) => {
propertyKey = propertyKey.split(objectSchema.manager.keySeparator).pop();
objectSchema.removeProperty(propertyKey);
objectSchema = objectSchema;
}} />
{/key}
{/if}
{:else}
{#if objectSchema.properties}
{#key objectSchema.properties }
<PropertiesBlock blockKey={objectSchema.key} properties={objectSchema.properties} />
{/key}
{/if}
{/if}
</div>

{:else}
-->
<div>
<p>Object schema is undefined</p>
</div>
{/if}
<div>
<p>Object schema is undefined</p>
</div>
{/if}
24 changes: 12 additions & 12 deletions src/lib/components/common/jschema/PropertiesBlock.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@
blockProperties.push(schemaManager.addProperty(prop));
});
});

</script>

<div class='d-flex flex-column properties-block'>
{#if parsedProperties}
{#each blockProperties as prop}
{#if removePropertyBlock }
<button class='btn btn-danger' on:click={removePropertyBlock.bind(this, prop.key)}>Remove Property Block
</button>
{/if}
<PropertyDiscriminator schemaProperty={prop}></PropertyDiscriminator>
{/each}
{/if}
</div>
<div class="d-flex flex-column properties-block">
{#if parsedProperties}
{#each blockProperties as prop}
{#if removePropertyBlock}
<button class="btn btn-danger" type="button" on:click={() => removePropertyBlock(prop.key)}>
Remove Property Block
</button>
{/if}
<PropertyDiscriminator schemaProperty={prop} />
{/each}
{/if}
</div>
Loading