Skip to content

Commit 8b5c642

Browse files
zonia3000zonia3000
committed
autoindent and displayed error for invalid argument properties
1 parent 8809029 commit 8b5c642

File tree

1 file changed

+88
-94
lines changed

1 file changed

+88
-94
lines changed

‎src/lib/components/common/jschema/ObjectProperty.svelte‎

Lines changed: 88 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script>
2-
import { onMount } from 'svelte';
2+
import { onMount } from 'svelte';
33
import PropertiesBlock from '$lib/components/common/jschema/PropertiesBlock.svelte';
44
import PropertyDescription from '$lib/components/common/jschema/PropertyDescription.svelte';
55
6-
export let objectSchema = undefined;
6+
export let objectSchema;
77
88
let customObjectPropertyKey = undefined;
9+
/** @type {string | undefined} */
910
let addNestedObjectError = undefined;
1011
1112
let accordionParentKey = objectSchema.key.replaceAll('#', '');
@@ -23,105 +24,98 @@
2324
2425
function addNestedObjectProperty() {
2526
try {
27+
addNestedObjectError = undefined;
2628
objectSchema.addProperty(customObjectPropertyKey);
2729
customObjectPropertyKey = '';
2830
objectSchema = objectSchema;
2931
} catch (e) {
30-
console.error(e.message);
31-
addNestedObjectError = e;
32+
const msg = /** @type {Error} */ (e).message;
33+
console.error(msg);
34+
addNestedObjectError = msg;
3235
}
3336
}
34-
3537
</script>
3638

3739
{#if objectSchema}
38-
39-
<div class='d-flex flex-column p-2'>
40-
<div class='property-metadata d-flex flex-row w-100'>
41-
<span class='{objectSchema.isRequired() ? "fw-bold" : ""}'>{ objectSchema.title }</span>
42-
<PropertyDescription description={objectSchema.description} />
43-
</div>
44-
<div class='object-properties my-2'>
45-
<div class='accordion' id='{accordionParentKey}'>
46-
<div class='accordion-item'>
47-
<div class='accordion-header'>
48-
<button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
49-
data-bs-target='#{collapseSymbol}'>Argument Properties
50-
</button>
51-
</div>
52-
<div id='{collapseSymbol}' class='accordion-collapse collapse' data-bs-parent='#{accordionParentKey}'>
53-
<div class='accordion-body p-1'>
54-
{#if objectSchema.hasCustomKeyValues}
55-
<div class='d-flex justify-content-center'>
56-
<form class='row row-cols-auto g-3 align-items-center p-2'>
57-
<div class='col-6'>
58-
<input type='text' bind:value={customObjectPropertyKey} placeholder='Key' class='form-control'>
59-
</div>
60-
<div class='col-6'>
61-
<button class='btn btn-primary' type="button" on:click={addNestedObjectProperty}>Add property</button>
62-
</div>
63-
</form>
64-
</div>
65-
{#if objectSchema.properties}
66-
{#key objectSchema.properties }
67-
<PropertiesBlock blockKey={objectSchema.key} properties={objectSchema.properties}
68-
removePropertyBlock={(propertyKey) => {
69-
propertyKey = propertyKey.split(objectSchema.manager.keySeparator).pop();
70-
objectSchema.removeProperty(propertyKey);
71-
objectSchema = objectSchema;
72-
}} />
73-
{/key}
74-
{/if}
75-
{:else}
76-
{#if objectSchema.properties}
77-
{#key objectSchema.properties }
78-
<PropertiesBlock blockKey={objectSchema.key} properties={objectSchema.properties} />
79-
{/key}
80-
{/if}
81-
{/if}
82-
</div>
83-
</div>
84-
</div>
85-
86-
</div>
87-
</div>
88-
</div>
89-
40+
<div class="d-flex flex-column p-2">
41+
<div class="property-metadata d-flex flex-row w-100">
42+
<span class={objectSchema.isRequired() ? 'fw-bold' : ''}>{objectSchema.title}</span>
43+
<PropertyDescription description={objectSchema.description} />
44+
</div>
45+
<div class="object-properties my-2">
46+
<div class="accordion" id={accordionParentKey}>
47+
<div class="accordion-item">
48+
<div class="accordion-header">
49+
<button
50+
class="accordion-button collapsed"
51+
type="button"
52+
data-bs-toggle="collapse"
53+
data-bs-target="#{collapseSymbol}"
54+
>
55+
Argument Properties
56+
</button>
57+
</div>
58+
<div
59+
id={collapseSymbol}
60+
class="accordion-collapse collapse"
61+
data-bs-parent="#{accordionParentKey}"
62+
>
63+
<div class="accordion-body p-1">
64+
{#if objectSchema.hasCustomKeyValues}
65+
<div class="d-flex justify-content-center">
66+
<form class="row row-cols-auto g-3 align-items-center p-2 flex-grow-1">
67+
<div class="col-lg-6 offset-lg-3 mb-1">
68+
<div class="input-group" class:has-validation={addNestedObjectError}>
69+
<input
70+
type="text"
71+
bind:value={customObjectPropertyKey}
72+
placeholder="Key"
73+
class="form-control"
74+
class:is-invalid={addNestedObjectError}
75+
/>
76+
<button
77+
class="btn btn-primary"
78+
type="button"
79+
on:click={addNestedObjectProperty}
80+
>
81+
Add property
82+
</button>
83+
{#if addNestedObjectError}
84+
<div class="invalid-feedback">{addNestedObjectError}</div>
85+
{/if}
86+
</div>
87+
</div>
88+
</form>
89+
</div>
90+
{#if objectSchema.properties}
91+
{#key objectSchema.properties}
92+
<PropertiesBlock
93+
blockKey={objectSchema.key}
94+
properties={objectSchema.properties}
95+
removePropertyBlock={(propertyKey) => {
96+
propertyKey = propertyKey.split(objectSchema.manager.keySeparator).pop();
97+
objectSchema.removeProperty(propertyKey);
98+
objectSchema = objectSchema;
99+
}}
100+
/>
101+
{/key}
102+
{/if}
103+
{:else if objectSchema.properties}
104+
{#key objectSchema.properties}
105+
<PropertiesBlock
106+
blockKey={objectSchema.key}
107+
properties={objectSchema.properties}
108+
/>
109+
{/key}
110+
{/if}
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
</div>
90117
{:else}
91-
92-
93-
<!--
94-
{#if objectSchema}
95-
<div style='background-color: #9e9e9e'>
96-
<p>Object property</p>
97-
98-
{#if objectSchema.hasCustomKeyValues}
99-
<p>Custom key values</p>
100-
<form action=''>
101-
<input type='text' bind:value={customObjectPropertyKey} placeholder='Key'>
102-
<button on:click={addNestedObjectProperty}>Add property</button>
103-
</form>
104-
{#if objectSchema.properties}
105-
{#key objectSchema.properties }
106-
<PropertiesBlock blockKey={objectSchema.key} properties={objectSchema.properties} removePropertyBlock={(propertyKey) => {
107-
propertyKey = propertyKey.split(objectSchema.manager.keySeparator).pop();
108-
objectSchema.removeProperty(propertyKey);
109-
objectSchema = objectSchema;
110-
}} />
111-
{/key}
112-
{/if}
113-
{:else}
114-
{#if objectSchema.properties}
115-
{#key objectSchema.properties }
116-
<PropertiesBlock blockKey={objectSchema.key} properties={objectSchema.properties} />
117-
{/key}
118-
{/if}
119-
{/if}
120-
</div>
121-
122-
{:else}
123-
-->
124-
<div>
125-
<p>Object schema is undefined</p>
126-
</div>
127-
{/if}
118+
<div>
119+
<p>Object schema is undefined</p>
120+
</div>
121+
{/if}

0 commit comments

Comments
 (0)