Skip to content

Commit 999aa06

Browse files
btangmubtangmu
authored
CLDR-15649 Dashboard using filters, show spinner while updating visibility (#3674)
1 parent f1242b4 commit 999aa06

File tree

1 file changed

+99
-83
lines changed

1 file changed

+99
-83
lines changed

‎tools/cldr-apps/js/src/views/DashboardWidget.vue‎

Lines changed: 99 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -74,93 +74,99 @@
7474
</span>
7575
</header>
7676
<section id="DashboardScroller" class="sidebyside-scrollable">
77-
<template
78-
v-for="entry of data.entries"
79-
:key="'template-' + entry.xpstrid"
80-
>
81-
<template v-if="anyCatIsShown(entry.cats)">
82-
<p
83-
v-if="!(hideChecked && entry.checked)"
84-
:key="'dash-item-' + entry.xpstrid"
85-
:id="'dash-item-' + entry.xpstrid"
86-
:class="
87-
'dash-' + (lastClicked === entry.xpstrid ? ' last-clicked' : '')
88-
"
89-
>
90-
<span class="dashEntry">
91-
<a
92-
v-bind:href="getLink(locale, entry)"
93-
@click="() => setLastClicked(entry.xpstrid)"
94-
>
95-
<span v-bind:key="cat" v-for="cat of entry.cats">
77+
<template v-if="updatingVisibility">
78+
<a-spin delay="1000" size="large" />
79+
</template>
80+
<template v-else>
81+
<template
82+
v-for="entry of data.entries"
83+
:key="'template-' + entry.xpstrid"
84+
>
85+
<template v-if="anyCatIsShown(entry.cats)">
86+
<p
87+
v-if="!(hideChecked && entry.checked)"
88+
:key="'dash-item-' + entry.xpstrid"
89+
:id="'dash-item-' + entry.xpstrid"
90+
:class="
91+
'dash-' +
92+
(lastClicked === entry.xpstrid ? ' last-clicked' : '')
93+
"
94+
>
95+
<span class="dashEntry">
96+
<a
97+
v-bind:href="getLink(locale, entry)"
98+
@click="() => setLastClicked(entry.xpstrid)"
99+
>
100+
<span v-bind:key="cat" v-for="cat of entry.cats">
101+
<span
102+
v-if="!catIsHidden[cat]"
103+
class="category"
104+
:title="describeAbbreviation(cat)"
105+
>{{ abbreviate(cat) }}</span
106+
>
107+
</span>
108+
<span class="section-page" title="section—page">{{
109+
humanize(entry.section + "—" + entry.page)
110+
}}</span>
111+
|
96112
<span
97-
v-if="!catIsHidden[cat]"
98-
class="category"
99-
:title="describeAbbreviation(cat)"
100-
>{{ abbreviate(cat) }}</span
113+
v-if="entry.header"
114+
class="entry-header"
115+
title="entry header"
116+
>{{ entry.header }}</span
101117
>
102-
</span>
103-
<span class="section-page" title="section—page">{{
104-
humanize(entry.section + "—" + entry.page)
105-
}}</span>
106-
|
107-
<span
108-
v-if="entry.header"
109-
class="entry-header"
110-
title="entry header"
111-
>{{ entry.header }}</span
112-
>
113-
|
114-
<span class="code" title="code">{{ entry.code }}</span>
115-
|
116-
<cldr-value
117-
class="previous-english"
118-
title="previous English"
119-
lang="en"
120-
dir="ltr"
121-
v-if="entry.previousEnglish"
122-
>{{ entry.previousEnglish }} →</cldr-value
123-
>
124-
<cldr-value
125-
class="english"
126-
lang="en"
127-
dir="ltr"
128-
title="English"
129-
v-if="entry.english"
130-
>{{ entry.english }}</cldr-value
131-
>
132-
|
133-
<cldr-value
134-
v-if="entry.winning"
135-
class="winning"
136-
title="Winning"
137-
>{{ entry.winning }}</cldr-value
138-
>
139-
<template v-if="entry.comment">
140118
|
141-
<span v-html="entry.comment" title="comment"></span>
142-
</template>
143-
<span v-if="entry.cats.has('Reports')"
144-
>{{ humanizeReport(entry.code) }} Report</span
145-
>
146-
</a>
147-
</span>
148-
<input
149-
v-if="canBeHidden(entry.cats)"
150-
type="checkbox"
151-
class="right-control"
152-
title="You can hide checked items with the hide checkbox above"
153-
v-model="entry.checked"
154-
@change="
155-
(event) => {
156-
entryCheckmarkChanged(event, entry);
157-
}
158-
"
159-
/>
160-
</p>
119+
<span class="code" title="code">{{ entry.code }}</span>
120+
|
121+
<cldr-value
122+
class="previous-english"
123+
title="previous English"
124+
lang="en"
125+
dir="ltr"
126+
v-if="entry.previousEnglish"
127+
>{{ entry.previousEnglish }} →</cldr-value
128+
>
129+
<cldr-value
130+
class="english"
131+
lang="en"
132+
dir="ltr"
133+
title="English"
134+
v-if="entry.english"
135+
>{{ entry.english }}</cldr-value
136+
>
137+
|
138+
<cldr-value
139+
v-if="entry.winning"
140+
class="winning"
141+
title="Winning"
142+
>{{ entry.winning }}</cldr-value
143+
>
144+
<template v-if="entry.comment">
145+
|
146+
<span v-html="entry.comment" title="comment"></span>
147+
</template>
148+
<span v-if="entry.cats.has('Reports')"
149+
>{{ humanizeReport(entry.code) }} Report</span
150+
>
151+
</a>
152+
</span>
153+
<input
154+
v-if="canBeHidden(entry.cats)"
155+
type="checkbox"
156+
class="right-control"
157+
title="You can hide checked items with the hide checkbox above"
158+
v-model="entry.checked"
159+
@change="
160+
(event) => {
161+
entryCheckmarkChanged(event, entry);
162+
}
163+
"
164+
/>
165+
</p>
166+
</template>
161167
</template>
168+
<p class="bottom-padding">...</p>
162169
</template>
163-
<p class="bottom-padding">...</p>
164170
</section>
165171
</template>
166172
</nav>
@@ -190,6 +196,7 @@ export default {
190196
level: null,
191197
downloadMessage: null,
192198
catIsHidden: {},
199+
updatingVisibility: false,
193200
};
194201
},
195202
@@ -366,7 +373,16 @@ export default {
366373
// the user may click again thinking the first click wasn't recognized. Postponing
367374
// the DOM update of thousands of rows ensures that the header checkbox updates
368375
// without delay.
369-
setTimeout(() => (this.catIsHidden[category] = !event.target.checked), 0);
376+
this.updatingVisibility = true;
377+
setTimeout(
378+
() => this.updateVisibility(event.target.checked, category),
379+
0
380+
);
381+
},
382+
383+
updateVisibility(checked, category) {
384+
this.catIsHidden[category] = !checked;
385+
this.updatingVisibility = false;
370386
},
371387
372388
canBeHidden(cats) {

0 commit comments

Comments
 (0)