Skip to content

Commit

Permalink
CLDR-15649 Dashboard using filters, show spinner while updating visib…
Browse files Browse the repository at this point in the history 
…ility

-The spinner replaces the Dashboard rows until Vue updates the DOM to reflect checkbox change

-Format cldrErrorSubtypes.mjs (from another ticket)
  • Loading branch information
@btangmu
btangmu authored and Squash Bot committed May 2, 2024
1 parent 3256844 commit ae342d1
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 84 deletions.
2 changes: 1 addition & 1 deletion tools/cldr-apps/js/src/esm/cldrErrorSubtypes.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ function reloadMapHandler(json) {
}
el.innerHTML = html;
if (json.err) {
const b = cldrDom.createLinkToFn('special_error_subtypes', load, 'button');
const b = cldrDom.createLinkToFn("special_error_subtypes", load, "button");
el.appendChild(b);
}
}
Expand Down
182 changes: 99 additions & 83 deletions tools/cldr-apps/js/src/views/DashboardWidget.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,93 +74,99 @@
</span>
</header>
<section id="DashboardScroller" class="sidebyside-scrollable">
<template
v-for="entry of data.entries"
:key="'template-' + entry.xpstrid"
>
<template v-if="anyCatIsShown(entry.cats)">
<p
v-if="!(hideChecked && entry.checked)"
:key="'dash-item-' + entry.xpstrid"
:id="'dash-item-' + entry.xpstrid"
:class="
'dash-' + (lastClicked === entry.xpstrid ? ' last-clicked' : '')
"
>
<span class="dashEntry">
<a
v-bind:href="getLink(locale, entry)"
@click="() => setLastClicked(entry.xpstrid)"
>
<span v-bind:key="cat" v-for="cat of entry.cats">
<template v-if="updatingVisibility">
<a-spin delay="1000" size="large" />
</template>
<template v-else>
<template
v-for="entry of data.entries"
:key="'template-' + entry.xpstrid"
>
<template v-if="anyCatIsShown(entry.cats)">
<p
v-if="!(hideChecked && entry.checked)"
:key="'dash-item-' + entry.xpstrid"
:id="'dash-item-' + entry.xpstrid"
:class="
'dash-' +
(lastClicked === entry.xpstrid ? ' last-clicked' : '')
"
>
<span class="dashEntry">
<a
v-bind:href="getLink(locale, entry)"
@click="() => setLastClicked(entry.xpstrid)"
>
<span v-bind:key="cat" v-for="cat of entry.cats">
<span
v-if="!catIsHidden[cat]"
class="category"
:title="describeAbbreviation(cat)"
>{{ abbreviate(cat) }}</span
>
</span>
<span class="section-page" title="section—page">{{
humanize(entry.section + "—" + entry.page)
}}</span>
|
<span
v-if="!catIsHidden[cat]"
class="category"
:title="describeAbbreviation(cat)"
>{{ abbreviate(cat) }}</span
v-if="entry.header"
class="entry-header"
title="entry header"
>{{ entry.header }}</span
>
</span>
<span class="section-page" title="section—page">{{
humanize(entry.section + "—" + entry.page)
}}</span>
|
<span
v-if="entry.header"
class="entry-header"
title="entry header"
>{{ entry.header }}</span
>
|
<span class="code" title="code">{{ entry.code }}</span>
|
<cldr-value
class="previous-english"
title="previous English"
lang="en"
dir="ltr"
v-if="entry.previousEnglish"
>{{ entry.previousEnglish }} →</cldr-value
>
<cldr-value
class="english"
lang="en"
dir="ltr"
title="English"
v-if="entry.english"
>{{ entry.english }}</cldr-value
>
|
<cldr-value
v-if="entry.winning"
class="winning"
title="Winning"
>{{ entry.winning }}</cldr-value
>
<template v-if="entry.comment">
|
<span v-html="entry.comment" title="comment"></span>
</template>
<span v-if="entry.cats.has('Reports')"
>{{ humanizeReport(entry.code) }} Report</span
>
</a>
</span>
<input
v-if="canBeHidden(entry.cats)"
type="checkbox"
class="right-control"
title="You can hide checked items with the hide checkbox above"
v-model="entry.checked"
@change="
(event) => {
entryCheckmarkChanged(event, entry);
}
"
/>
</p>
<span class="code" title="code">{{ entry.code }}</span>
|
<cldr-value
class="previous-english"
title="previous English"
lang="en"
dir="ltr"
v-if="entry.previousEnglish"
>{{ entry.previousEnglish }} →</cldr-value
>
<cldr-value
class="english"
lang="en"
dir="ltr"
title="English"
v-if="entry.english"
>{{ entry.english }}</cldr-value
>
|
<cldr-value
v-if="entry.winning"
class="winning"
title="Winning"
>{{ entry.winning }}</cldr-value
>
<template v-if="entry.comment">
|
<span v-html="entry.comment" title="comment"></span>
</template>
<span v-if="entry.cats.has('Reports')"
>{{ humanizeReport(entry.code) }} Report</span
>
</a>
</span>
<input
v-if="canBeHidden(entry.cats)"
type="checkbox"
class="right-control"
title="You can hide checked items with the hide checkbox above"
v-model="entry.checked"
@change="
(event) => {
entryCheckmarkChanged(event, entry);
}
"
/>
</p>
</template>
</template>
<p class="bottom-padding">...</p>
</template>
<p class="bottom-padding">...</p>
</section>
</template>
</nav>
Expand Down Expand Up @@ -190,6 +196,7 @@ export default {
level: null,
downloadMessage: null,
catIsHidden: {},
updatingVisibility: false,
};
},
Expand Down Expand Up @@ -366,7 +373,16 @@ export default {
// the user may click again thinking the first click wasn't recognized. Postponing
// the DOM update of thousands of rows ensures that the header checkbox updates
// without delay.
setTimeout(() => (this.catIsHidden[category] = !event.target.checked), 0);
this.updatingVisibility = true;
setTimeout(
() => this.updateVisibility(event.target.checked, category),
0
);
},
updateVisibility(checked, category) {
this.catIsHidden[category] = !checked;
this.updatingVisibility = false;
},
canBeHidden(cats) {
Expand Down

0 comments on commit ae342d1

Please sign in to comment.