From a93b2e59bc34478ff07746293da8dd9ceab684e9 Mon Sep 17 00:00:00 2001
From: btangmu <thomasbishop@wenlin.com>
Date: Wed, 5 Jun 2024 10:25:34 -0400
Subject: [PATCH] CLDR-17658 Experiment with virtual scroller, not working yet

---
 tools/cldr-apps/js/src/esm/cldrComponents.mjs |   5 +
 tools/cldr-apps/js/src/index.js               |   1 +
 .../js/src/views/DashboardWidget.vue          | 201 ++++++++----------
 3 files changed, 97 insertions(+), 110 deletions(-)

diff --git a/tools/cldr-apps/js/src/esm/cldrComponents.mjs b/tools/cldr-apps/js/src/esm/cldrComponents.mjs
index 80dcb462ec2..fae3bef30f9 100644
--- a/tools/cldr-apps/js/src/esm/cldrComponents.mjs
+++ b/tools/cldr-apps/js/src/esm/cldrComponents.mjs
@@ -40,6 +40,8 @@ import {
   Tooltip,
   UploadDragger,
 } from "ant-design-vue";
+
+import VueVirtualScroller from "vue-virtual-scroller";
 // Note: 'notification' is a function and is imported as a function in cldrVue.mjs,
 // or within a specific app.
 
@@ -90,4 +92,7 @@ function setup(app) {
   app.component("cldr-value", CldrValue);
 }
 
+// some plugins we can pull in wholesale
+app.use(VueVirtualScroller);
+
 export { setup };
diff --git a/tools/cldr-apps/js/src/index.js b/tools/cldr-apps/js/src/index.js
index cbfde3f5e79..68e7781b1ed 100644
--- a/tools/cldr-apps/js/src/index.js
+++ b/tools/cldr-apps/js/src/index.js
@@ -4,6 +4,7 @@
 // module stylesheets need to go here. See cldrVue.mjs
 // example: import 'someModule/dist/someModule.css'
 import "ant-design-vue/dist/antd.min.css";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 
 // global stylesheets
 import "./css/cldrForum.css";
diff --git a/tools/cldr-apps/js/src/views/DashboardWidget.vue b/tools/cldr-apps/js/src/views/DashboardWidget.vue
index 0e0aa8282c1..d905b7d794a 100644
--- a/tools/cldr-apps/js/src/views/DashboardWidget.vue
+++ b/tools/cldr-apps/js/src/views/DashboardWidget.vue
@@ -79,113 +79,98 @@
           <a-spin size="large" />
         </template>
         <template v-else>
-          <DynamicScroller :items="items" :min-item-size="54" class="scroller">
-            <template v-slot="{ item, index, active }">
-              <DynamicScrollerItem
-                :item="item"
-                :active="active"
-                :size-dependencies="[item.message]"
-                :data-index="index"
-              >
-                <div class="avatar">
-                  <img
-                    :src="item.avatar"
-                    :key="item.avatar"
-                    alt="avatar"
-                    class="image"
-                  />
-                </div>
-                <div class="text">{{ item.message }}</div>
-              </DynamicScrollerItem>
-            </template>
-          </DynamicScroller>
-          <template
-            v-for="entry of data.entries"
-            :key="'template-' + entry.xpstrid"
+          <RecycleScroller
+            class="sroller"
+            :items="data.entries"
+            :item-size="32"
+            key-field="xpstrid"
+            v-slot="{ item }"
           >
-            <template v-if="anyCatIsShown(entry.cats)">
-              <p
-                v-if="!(hideChecked && entry.checked)"
+            <!-- <template v-if="anyCatIsShown(entry.cats)"> -->
+            <!--
+                                v-if="true && !(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>
-                    |
+
+              -->
+            <p
+              :class="
+                'dash-' + (lastClicked === item.xpstrid ? ' last-clicked' : '')
+              "
+            >
+              <span class="dashEntry">
+                <a
+                  v-bind:href="getLink(locale, item)"
+                  @click="() => setLastClicked(item.xpstrid)"
+                >
+                  <span v-bind:key="cat" v-for="cat of item.cats">
                     <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
+                      v-if="!catIsHidden[cat]"
+                      class="category"
+                      :title="describeAbbreviation(cat)"
+                      >{{ abbreviate(cat) }}</span
                     >
+                  </span>
+                  <span class="section-page" title="section—page">{{
+                    humanize(item.section + "—" + item.page)
+                  }}</span>
+                  |
+                  <span
+                    v-if="item.header"
+                    class="entry-header"
+                    title="entry header"
+                    >{{ item.header }}</span
+                  >
+                  |
+                  <span class="code" title="code">{{ item.code }}</span>
+                  |
+                  <cldr-value
+                    class="previous-english"
+                    title="previous English"
+                    lang="en"
+                    dir="ltr"
+                    v-if="item.previousEnglish"
+                    >{{ item.previousEnglish }} →</cldr-value
+                  >
+                  <cldr-value
+                    class="english"
+                    lang="en"
+                    dir="ltr"
+                    title="English"
+                    v-if="item.english"
+                    >{{ item.english }}</cldr-value
+                  >
+                  |
+                  <cldr-value
+                    v-if="item.winning"
+                    class="winning"
+                    title="Winning"
+                    >{{ item.winning }}</cldr-value
+                  >
+                  <template v-if="item.comment">
                     |
-                    <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>
+                    <span v-html="item.comment" title="comment"></span>
+                  </template>
+                  <span v-if="item.cats.has('Reports')"
+                    >{{ humanizeReport(item.code) }} Report</span
+                  >
+                </a>
+              </span>
+              <input
+                v-if="canBeHidden(item.cats)"
+                type="checkbox"
+                class="right-control"
+                title="You can hide checked items with the hide checkbox above"
+                v-model="item.checked"
+                @change="
+                  (event) => {
+                    entryCheckmarkChanged(event, entry);
+                  }
+                "
+              />
+            </p>
+            <!-- todo /template-->
+          </RecycleScroller>
           <p class="bottom-padding">...</p>
         </template>
       </section>
@@ -194,6 +179,7 @@
 </template>
 
 <script>
+import { RecycleScroller } from "vue-virtual-scroller";
 import * as cldrCoverage from "../esm/cldrCoverage.mjs";
 import * as cldrDash from "../esm/cldrDash.mjs";
 import * as cldrGui from "../esm/cldrGui.mjs";
@@ -203,13 +189,9 @@ import * as cldrReport from "../esm/cldrReport.mjs";
 import * as cldrStatus from "../esm/cldrStatus.mjs";
 import * as cldrText from "../esm/cldrText.mjs";
 import { nextTick } from "vue";
-import VueVirtualScroller from "vue-virtual-scroller";
 
 export default {
-  props: {
-    items: Array,
-  },
-
+  props: [],
   data() {
     return {
       data: null,
@@ -463,6 +445,9 @@ export default {
 </script>
 
 <style scoped>
+.scroller {
+}
+
 .st-sad {
   font-style: italic;
   border: 1px dashed red;
@@ -577,8 +562,4 @@ a:hover {
 .last-clicked {
   background-color: #eee; /* light gray */
 }
-
-.scroller {
-  height: 100%;
-}
 </style>