Automation history issue fix

This commit is contained in:
Peter Clement 2023-11-08 10:27:15 +00:00
parent b607c17615
commit d86e943765
3 changed files with 43 additions and 28 deletions

View File

@ -13,13 +13,13 @@
export let idx export let idx
export let addLooping export let addLooping
export let deleteStep export let deleteStep
export let enableNaming = true
let validRegex = /^[A-Za-z0-9_\s]+$/ let validRegex = /^[A-Za-z0-9_\s]+$/
let typing = false let typing = false
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
$: stepNames = $selectedAutomation.definition.stepNames $: stepNames = $selectedAutomation?.definition.stepNames
$: automationName = stepNames?.[block.id] || block?.name || "" $: automationName = stepNames?.[block.id] || block?.name || ""
$: automationNameError = getAutomationNameError(automationName) $: automationNameError = getAutomationNameError(automationName)
$: status = updateStatus(testResult, isTrigger) $: status = updateStatus(testResult, isTrigger)
@ -32,7 +32,7 @@
)?.[0] )?.[0]
} }
} }
$: loopBlock = $selectedAutomation.definition.steps.find( $: loopBlock = $selectedAutomation?.definition.steps.find(
x => x.blockToLoop === block?.id x => x.blockToLoop === block?.id
) )
@ -126,24 +126,33 @@
<Body size="XS"><b>Step {idx}</b></Body> <Body size="XS"><b>Step {idx}</b></Body>
</div> </div>
{/if} {/if}
<input
placeholder="Enter some text" {#if enableNaming}
name="name" <input
autocomplete="off" class="input-text"
value={automationName} disabled={!enableNaming}
on:input={e => { placeholder="Enter some text"
automationName = e.target.value.trim() name="name"
}} autocomplete="off"
on:click={startTyping} value={automationName}
on:blur={async () => { on:input={e => {
typing = false automationName = e.target.value.trim()
if (automationNameError) { }}
automationName = stepNames[block.id] || block?.name on:click={startTyping}
} else { on:blur={async () => {
await saveName() typing = false
} if (automationNameError) {
}} automationName = stepNames[block.id] || block?.name
/> } else {
await saveName()
}
}}
/>
{:else}
<div class="input-text">
{automationName}
</div>
{/if}
</div> </div>
</div> </div>
<div class="blockTitle"> <div class="blockTitle">
@ -178,9 +187,11 @@
<Icon on:click={addLooping} hoverable name="RotateCW" /> <Icon on:click={addLooping} hoverable name="RotateCW" />
</AbsTooltip> </AbsTooltip>
{/if} {/if}
<AbsTooltip type="negative" text="Delete step"> {#if !isHeaderTrigger}
<Icon on:click={deleteStep} hoverable name="DeleteOutline" /> <AbsTooltip type="negative" text="Delete step">
</AbsTooltip> <Icon on:click={deleteStep} hoverable name="DeleteOutline" />
</AbsTooltip>
{/if}
{/if} {/if}
{#if !showTestStatus} {#if !showTestStatus}
<Icon <Icon
@ -244,18 +255,21 @@
display: none; display: none;
} }
input { input {
font-family: var(--font-sans);
color: var(--ink); color: var(--ink);
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
font-size: var(--spectrum-alias-font-size-default);
width: 230px; width: 230px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.input-text {
font-size: var(--spectrum-alias-font-size-default);
font-family: var(--font-sans);
text-overflow: ellipsis;
}
input:focus { input:focus {
outline: none; outline: none;
} }

View File

@ -48,6 +48,7 @@
<div class="block" style={width ? `width: ${width}` : ""}> <div class="block" style={width ? `width: ${width}` : ""}>
{#if block.stepId !== ActionStepID.LOOP} {#if block.stepId !== ActionStepID.LOOP}
<FlowItemHeader <FlowItemHeader
enableNaming={false}
open={!!openBlocks[block.id]} open={!!openBlocks[block.id]}
on:toggle={() => (openBlocks[block.id] = !openBlocks[block.id])} on:toggle={() => (openBlocks[block.id] = !openBlocks[block.id])}
isTrigger={idx === 0} isTrigger={idx === 0}

View File

@ -56,7 +56,7 @@
{/if} {/if}
{#key history} {#key history}
<div class="history"> <div class="history">
<TestDisplay testResults={history} width="100%" /> <TestDisplay testResults={history} width="320px" />
</div> </div>
{/key} {/key}
</Layout> </Layout>