open-vault/ui/app/templates/components/diff-version-selector.hbs
2022-01-10 11:08:05 -06:00

103 lines
4.2 KiB
Handlebars

<Toolbar>
<div class="version-diff-toolbar" data-test-version-diff-toolbar>
{{! Left side version }}
<BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
<D.Trigger
data-test-popup-menu-trigger="left-version"
class={{concat "toolbar-link" (if D.isOpen " is-active")}}
@htmlTag="button"
>
Version
{{or this.leftSideVersionSelected @model.currentVersion}}
<Chevron @direction="down" @isButton={{true}} />
</D.Trigger>
<D.Content class="popup-menu-content">
<nav class="box menu">
<ul class="menu-list">
{{#each (reverse @model.versions) as |leftSideSecretVersion|}}
<li class="action" data-test-leftSide-version={{leftSideSecretVersion.version}}>
<button
type="button"
class="link"
{{on "click" (fn this.selectVersion leftSideSecretVersion.version D.actions "left")}}
>
Version
{{leftSideSecretVersion.version}}
{{#if
(and
(eq leftSideSecretVersion.version (or this.leftSideVersionSelected @args.model.currentVersion))
(not leftSideSecretVersion.destroyed)
(not leftSideSecretVersion.deleted)
)
}}
<Icon @name="check-circle" class="has-text-success is-pulled-right" />
{{else if leftSideSecretVersion.destroyed}}
<Icon @name="x-square" class="has-text-danger is-pulled-right" />
{{else if leftSideSecretVersion.deleted}}
<Icon @name="x-square" class="has-text-grey is-pulled-right" />
{{/if}}
</button>
</li>
{{/each}}
</ul>
</nav>
</D.Content>
</BasicDropdown>
{{! Right side version }}
<BasicDropdown @class="popup-menu" @horizontalPosition="right" @verticalPosition="below" as |D|>
<D.Trigger
class={{concat "toolbar-link" (if D.isOpen " is-active")}}
@htmlTag="button"
data-test-popup-menu-trigger="right-version"
>
Version
{{or this.rightSideVersionSelected this.rightSideVersionInit}}
<Chevron @direction="down" @isButton={{true}} />
</D.Trigger>
<D.Content class="popup-menu-content">
<nav class="box menu">
<ul class="menu-list">
{{#each (reverse @model.versions) as |rightSideSecretVersion|}}
<li class="action">
<button
type="button"
class="link"
{{on "click" (fn this.selectVersion rightSideSecretVersion.version D.actions "right")}}
data-test-rightSide-version={{rightSideSecretVersion.version}}
>
Version
{{rightSideSecretVersion.version}}
{{#if
(and
(eq rightSideSecretVersion.version (or this.rightSideVersionSelected this.rightSideVersionInit))
(not rightSideSecretVersion.destroyed)
(not rightSideSecretVersion.deleted)
)
}}
<Icon @name="check-circle" class="has-text-success is-pulled-right" />
{{else if rightSideSecretVersion.destroyed}}
<Icon @name="x-square" class="has-text-danger is-pulled-right" />
{{else if rightSideSecretVersion.deleted}}
<Icon @name="x-square" class="has-text-grey is-pulled-right" />
{{/if}}
</button>
</li>
{{/each}}
</ul>
</nav>
</D.Content>
</BasicDropdown>
{{! Status }}
{{#if this.statesMatch}}
<div class="diff-status">
<span>States match</span>
<Icon @name="check-circle-fill" class="has-text-success" />
</div>
{{/if}}
</div>
</Toolbar>
<div class="form-section visual-diff">
{{! template-lint-configure no-triple-curlies "warn" }}
<pre>{{{this.visualDiff}}}</pre>
</div>