Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CLDR-15649 Dashboard using filters, show spinner while updating visibility #3674

Merged
merged 1 commit into from
May 3, 2024
Merged

CLDR-15649 Dashboard using filters, show spinner while updating visibility #3674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion tools/cldr-apps/js/src/esm/cldrErrorSubtypes.mjs
View file
Open in desktop
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
Open in desktop
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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed lines below in this template are just indented one more level

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
Loading