Skip to content

Commit

Permalink
removed render modifiers
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelchadwick
michaelchadwick committed Jan 11, 2025
1 parent 9169843 commit 2245642
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 128 deletions.
244 changes: 118 additions & 126 deletions packages/ilios-common/addon/components/mesh-manager.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,139 +1,131 @@
<section
class="mesh-manager"
data-test-mesh-manager
>
{{#let (unique-id) as |templateId|}}
{{#if @targetItemTitle}}
<h2 class="target-title">
{{t "general.selectMeshFor" title=@targetItemTitle}}
</h2>
{{/if}}
{{#if this.sortedTerms.length}}
<ul class="selected-terms">
{{#each this.sortedTerms as |term|}}
<li>
{{#if @editable}}
<button
type="button"
{{on "click" (fn @remove term)}}
>
<span class="term-title">
{{term.name}}
</span>
<span class="term-details">
{{term.id}}
{{#if term.deleted}}
- <span class="deprecated">({{t "general.deprecatedAbbreviation"}})</span>
{{else if term.trees.length}}
- <MeshDescriptorLastTreeNumber @descriptor={{term}} />
{{/if}}
</span>
<FaIcon @icon="xmark" class="remove" />
</button>
{{else}}
<section class="mesh-manager" data-test-mesh-manager>
{{#if @targetItemTitle}}
<h2 class="target-title">
{{t "general.selectMeshFor" title=@targetItemTitle}}
</h2>
{{/if}}
{{#if this.sortedTerms.length}}
<ul class="selected-terms">
{{#each this.sortedTerms as |term|}}
<li>
{{#if @editable}}
<button type="button" {{on "click" (fn @remove term)}}>
<span class="term-title">
{{term.name}}
</span>
<span class="term-details">
{{term.id}}
{{term.id}}
{{#if term.deleted}}
- <span class="deprecated">({{t "general.deprecatedAbbreviation"}})</span>
-
<span class="deprecated">({{t "general.deprecatedAbbreviation"}})</span>
{{else if term.trees.length}}
- <MeshDescriptorLastTreeNumber @descriptor={{term}} />
-
<MeshDescriptorLastTreeNumber @descriptor={{term}} />
{{/if}}
</span>
<FaIcon @icon="xmark" class="remove" />
</button>
{{else}}
<span class="term-title">
{{term.name}}
</span>
<span class="term-details">
{{term.id}}
{{#if term.deleted}}
-
<span class="deprecated">({{t "general.deprecatedAbbreviation"}})</span>
{{else if term.trees.length}}
-
<MeshDescriptorLastTreeNumber @descriptor={{term}} />
{{/if}}
</span>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
{{#if @editable}}
<div class="mesh-search" data-test-mesh-search>
<label for={{this.meshSearchInputId}}>{{t "general.searchMesh"}}:</label>
<input
id={{this.meshSearchInputId}}
autocomplete="off"
class="search-input"
type="search"
value={{this.query}}
placeholder={{t "general.search"}}
{{on "input" this.update}}
{{on "keyup" this.keyUp}}
/>
</div>
{{/if}}
<div {{on-click-outside this.clear}} data-test-search-results-container>
{{#if this.search.isRunning}}
<ul class="mesh-search-results">
<li>
{{t "general.currentlySearchingPrompt"}}
</li>
</ul>
{{else if (and this.hasSearchQuery (lte this.query.length 2))}}
<ul class="mesh-search-results" data-test-search-results>
<li data-test-search-result>
{{t "general.moreInputRequiredPrompt"}}
</li>
</ul>
{{else if this.searchResults.length}}
<ul class="mesh-search-results" data-test-search-results>
{{#each this.searchResults as |term|}}
<li
class={{if (includes term.id (map-by "id" this.terms)) "disabled"}}
data-test-search-result
>
<button type="button" {{on "click" (fn this.add term)}}>
<span class="descriptor-name" data-test-name>
{{term.name}}
</span>
<span class="descriptor-id">
{{term.id}}
{{#if term.trees.length}}
-
<MeshDescriptorLastTreeNumber @descriptor={{term}} />
{{/if}}
</span>
{{/if}}
<ul class="mesh-concepts">
{{#each term.concepts as |concept|}}
{{#if concept.scopeNote}}
<li
class="{{unless term.isActive 'disabled'}}
{{if concept.hasTruncatedScopeNote 'truncated'}}"
>
{{concept.truncatedScopeNote}}
</li>
{{/if}}
{{/each}}
</ul>
</button>
</li>
{{/each}}
</ul>
{{/if}}
{{#if @editable}}
<div class="mesh-search" data-test-mesh-search>
<label for="mesh-search-{{templateId}}">{{t "general.searchMesh"}}:</label>
<input
id="mesh-search-{{templateId}}"
autocomplete="off"
class="search-input"
type="search"
value={{this.query}}
placeholder={{t "general.search"}}
{{on "input" this.update}}
{{on "keyup" this.keyUp}}
{{did-insert (set this "searchInput")}}
{{#if this.hasMoreSearchResults}}
<button
disabled={{if this.searchMore.isRunning true}}
type="button"
{{on "click" (perform this.searchMore)}}
data-test-show-more
>
</div>
{{/if}}
<div {{on-click-outside this.clear}} data-test-search-results-container>
{{#if this.search.isRunning}}
<ul class="mesh-search-results">
<li>
{{t "general.currentlySearchingPrompt"}}
</li>
</ul>
{{else if (and this.hasSearchQuery (lte this.query.length 2))}}
<ul class="mesh-search-results" data-test-search-results>
<li data-test-search-result>
{{t "general.moreInputRequiredPrompt"}}
</li>
</ul>
{{else if this.searchResults.length}}
<ul class="mesh-search-results" data-test-search-results>
{{#each this.searchResults as |term|}}
<li
class={{if (includes term.id (map-by "id" this.terms)) "disabled"}}
data-test-search-result
>
<button
type="button"
{{on "click" (fn this.add term)}}
>
<span class="descriptor-name" data-test-name>
{{term.name}}
</span>
<span class="descriptor-id">
{{term.id}}
{{#if term.trees.length}}
- <MeshDescriptorLastTreeNumber @descriptor={{term}} />
{{/if}}
</span>
<ul class="mesh-concepts">
{{#each term.concepts as |concept|}}
{{#if concept.scopeNote}}
<li
class="{{unless term.isActive "disabled"}}
{{if concept.hasTruncatedScopeNote "truncated"}}"
>
{{concept.truncatedScopeNote}}
</li>
{{/if}}
{{/each}}
</ul>
</button>
</li>
{{/each}}
</ul>
{{#if this.hasMoreSearchResults}}
<button
disabled={{if this.searchMore.isRunning true}}
type="button"
{{on "click" (perform this.searchMore)}}
data-test-show-more
>
<FaIcon
@icon={{if this.searchMore.isRunning "spinner"}}
@spin={{if this.searchMore.isRunning true false}}
/>
{{t "general.showMore"}}
</button>
{{/if}}
{{else if (and this.hasSearchQuery this.search.lastSuccessful)}}
<ul class="mesh-search-results" data-test-search-results>
<li data-test-search-result>
{{t "general.noSearchResultsPrompt"}}
</li>
</ul>
<FaIcon
@icon={{if this.searchMore.isRunning "spinner"}}
@spin={{if this.searchMore.isRunning true false}}
/>
{{t "general.showMore"}}
</button>
{{/if}}
</div>
{{/let}}
</section>
{{else if (and this.hasSearchQuery this.search.lastSuccessful)}}
<ul class="mesh-search-results" data-test-search-results>
<li data-test-search-result>
{{t "general.noSearchResultsPrompt"}}
</li>
</ul>
{{/if}}
</div>
</section>
12 changes: 10 additions & 2 deletions packages/ilios-common/addon/components/mesh-manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { tracked } from '@glimmer/tracking';
import { dropTask, restartableTask, timeout } from 'ember-concurrency';
import { action } from '@ember/object';
import { mapBy, sortBy } from 'ilios-common/utils/array-helpers';
import { guidFor } from '@ember/object/internals';

const DEBOUNCE_TIMEOUT = 250;
const MIN_INPUT = 3;
Expand All @@ -16,7 +17,14 @@ export default class MeshManagerComponent extends Component {
@tracked searchResults = [];
@tracked searchPage = 0;
@tracked hasMoreSearchResults = false;
@tracked searchInput;

get meshSearchInputId() {
return `mesh-search-input-${guidFor(this)}`;
}

get meshSearchInputElement() {
return document.getElementById(this.meshSearchInputId);
}

get terms() {
return this.args.terms ?? [];
Expand Down Expand Up @@ -69,7 +77,7 @@ export default class MeshManagerComponent extends Component {
@action
moveFocus() {
// place focus into the search box when search icon is clicked
this?.searchInput.focus();
this?.meshSearchInputElement.focus();
}

search = restartableTask(async () => {
Expand Down

0 comments on commit 2245642

Please sign in to comment.