From d2d0de0fd00718095902952de0e56afab8e15b17 Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Sat, 10 Dec 2022 02:04:07 -0800
Subject: [PATCH] remove class vue dep (4)

---
 src/components/top-matter/AlbumTopMatter.vue  |  77 ++++---
 src/components/top-matter/FaceTopMatter.vue   |  61 ++---
 src/components/top-matter/FolderTopMatter.vue |  73 +++---
 src/components/top-matter/OnThisDay.vue       | 217 +++++++++---------
 src/components/top-matter/TagTopMatter.vue    |  42 ++--
 src/components/top-matter/TopMatter.vue       |  75 +++---
 6 files changed, 291 insertions(+), 254 deletions(-)

diff --git a/src/components/top-matter/AlbumTopMatter.vue b/src/components/top-matter/AlbumTopMatter.vue
index bc4e6a38..92c61ce6 100644
--- a/src/components/top-matter/AlbumTopMatter.vue
+++ b/src/components/top-matter/AlbumTopMatter.vue
@@ -66,9 +66,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
-import UserConfig from "../../mixins/UserConfig";
+import { defineComponent } from "vue";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
@@ -90,7 +88,8 @@ import PlusIcon from "vue-material-design-icons/Plus.vue";
 import ShareIcon from "vue-material-design-icons/ShareVariant.vue";
 import { API } from "../../services/API";
 
-@Component({
+export default defineComponent({
+  name: "AlbumTopMatter",
   components: {
     NcActions,
     NcActionButton,
@@ -107,46 +106,54 @@ import { API } from "../../services/API";
     PlusIcon,
     ShareIcon,
   },
-})
-export default class AlbumTopMatter extends Mixins(GlobalMixin, UserConfig) {
-  private name: string = "";
 
-  get isAlbumList() {
-    return !Boolean(this.$route.params.name);
-  }
+  data() {
+    return {
+      name: "",
+    };
+  },
 
-  get canEditAlbum() {
-    return (
-      !this.isAlbumList && this.$route.params.user === getCurrentUser()?.uid
-    );
-  }
+  computed: {
+    isAlbumList() {
+      return !Boolean(this.$route.params.name);
+    },
 
-  @Watch("$route")
-  async routeChange(from: any, to: any) {
-    this.createMatter();
-  }
+    canEditAlbum() {
+      return (
+        !this.isAlbumList && this.$route.params.user === getCurrentUser()?.uid
+      );
+    },
+  },
+
+  watch: {
+    $route: async function (from: any, to: any) {
+      this.createMatter();
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
-  createMatter() {
-    this.name = this.$route.params.name || this.t("memories", "Albums");
-  }
+  methods: {
+    createMatter() {
+      this.name = this.$route.params.name || this.t("memories", "Albums");
+    },
 
-  back() {
-    this.$router.push({ name: "albums" });
-  }
+    back() {
+      this.$router.push({ name: "albums" });
+    },
 
-  async downloadAlbum() {
-    const res = await axios.post(
-      API.ALBUM_DOWNLOAD(this.$route.params.user, this.$route.params.name)
-    );
-    if (res.status === 200 && res.data.handle) {
-      downloadWithHandle(res.data.handle);
-    }
-  }
-}
+    async downloadAlbum() {
+      const res = await axios.post(
+        API.ALBUM_DOWNLOAD(this.$route.params.user, this.$route.params.name)
+      );
+      if (res.status === 200 && res.data.handle) {
+        downloadWithHandle(res.data.handle);
+      }
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/top-matter/FaceTopMatter.vue b/src/components/top-matter/FaceTopMatter.vue
index d13d07c6..d62ba846 100644
--- a/src/components/top-matter/FaceTopMatter.vue
+++ b/src/components/top-matter/FaceTopMatter.vue
@@ -52,9 +52,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
-import UserConfig from "../../mixins/UserConfig";
+import { defineComponent } from "vue";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
@@ -68,7 +66,8 @@ import EditIcon from "vue-material-design-icons/Pencil.vue";
 import DeleteIcon from "vue-material-design-icons/Close.vue";
 import MergeIcon from "vue-material-design-icons/Merge.vue";
 
-@Component({
+export default defineComponent({
+  name: "FaceTopMatter",
   components: {
     NcActions,
     NcActionButton,
@@ -81,37 +80,43 @@ import MergeIcon from "vue-material-design-icons/Merge.vue";
     DeleteIcon,
     MergeIcon,
   },
-})
-export default class FaceTopMatter extends Mixins(GlobalMixin, UserConfig) {
-  private name: string = "";
 
-  @Watch("$route")
-  async routeChange(from: any, to: any) {
-    this.createMatter();
-  }
+  data() {
+    return {
+      name: "",
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
+      this.createMatter();
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
-  createMatter() {
-    this.name = this.$route.params.name || "";
-  }
+  methods: {
+    createMatter() {
+      this.name = this.$route.params.name || "";
+    },
 
-  back() {
-    this.$router.push({ name: this.$route.name });
-  }
+    back() {
+      this.$router.push({ name: this.$route.name });
+    },
 
-  changeShowFaceRect() {
-    localStorage.setItem(
-      "memories_showFaceRect",
-      this.config_showFaceRect ? "1" : "0"
-    );
-    setTimeout(() => {
-      this.$router.go(0); // refresh page
-    }, 500);
-  }
-}
+    changeShowFaceRect() {
+      localStorage.setItem(
+        "memories_showFaceRect",
+        this.config_showFaceRect ? "1" : "0"
+      );
+      setTimeout(() => {
+        this.$router.go(0); // refresh page
+      }, 500);
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/top-matter/FolderTopMatter.vue b/src/components/top-matter/FolderTopMatter.vue
index aa2ef1d0..9c216b48 100644
--- a/src/components/top-matter/FolderTopMatter.vue
+++ b/src/components/top-matter/FolderTopMatter.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
+import { defineComponent } from "vue";
 import { TopMatterFolder, TopMatterType } from "../../types";
 
 const NcBreadcrumbs = () =>
@@ -42,14 +42,13 @@ const NcBreadcrumb = () =>
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
 
-import GlobalMixin from "../../mixins/GlobalMixin";
-
 import FolderShareModal from "../modal/FolderShareModal.vue";
 
 import HomeIcon from "vue-material-design-icons/Home.vue";
 import ShareIcon from "vue-material-design-icons/ShareVariant.vue";
 
-@Component({
+export default defineComponent({
+  name: "FolderTopMatter",
   components: {
     NcBreadcrumbs,
     NcBreadcrumb,
@@ -59,42 +58,48 @@ import ShareIcon from "vue-material-design-icons/ShareVariant.vue";
     HomeIcon,
     ShareIcon,
   },
-})
-export default class FolderTopMatter extends Mixins(GlobalMixin) {
-  private topMatter?: TopMatterFolder = null;
 
-  @Watch("$route")
-  async routeChange(from: any, to: any) {
-    this.createMatter();
-  }
+  data() {
+    return {
+      topMatter: null as TopMatterFolder | null,
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
+      this.createMatter();
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
-  createMatter() {
-    if (this.$route.name === "folders") {
-      let path: any = this.$route.params.path || "";
-      if (typeof path === "string") {
-        path = path.split("/");
+  methods: {
+    createMatter() {
+      if (this.$route.name === "folders") {
+        let path: any = this.$route.params.path || "";
+        if (typeof path === "string") {
+          path = path.split("/");
+        }
+
+        this.topMatter = {
+          type: TopMatterType.FOLDER,
+          list: path
+            .filter((x) => x)
+            .map((x, idx, arr) => {
+              return {
+                text: x,
+                path: arr.slice(0, idx + 1).join("/"),
+              };
+            }),
+        };
+      } else {
+        this.topMatter = null;
       }
-
-      this.topMatter = {
-        type: TopMatterType.FOLDER,
-        list: path
-          .filter((x) => x)
-          .map((x, idx, arr) => {
-            return {
-              text: x,
-              path: arr.slice(0, idx + 1).join("/"),
-            };
-          }),
-      };
-    } else {
-      this.topMatter = null;
-    }
-  }
-}
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/top-matter/OnThisDay.vue b/src/components/top-matter/OnThisDay.vue
index 026bfe00..f4776c5b 100644
--- a/src/components/top-matter/OnThisDay.vue
+++ b/src/components/top-matter/OnThisDay.vue
@@ -41,8 +41,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins, Prop } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent } from "vue";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
@@ -63,7 +62,7 @@ interface IYear {
   text: string;
 }
 
-@Component({
+export default defineComponent({
   name: "OnThisDay",
   components: {
     NcActions,
@@ -71,21 +70,23 @@ interface IYear {
     LeftMoveIcon,
     RightMoveIcon,
   },
-})
-export default class OnThisDay extends Mixins(GlobalMixin) {
-  private getPreviewUrl = getPreviewUrl;
 
-  @Prop()
-  private viewer: any;
+  props: {
+    viewer: {
+      type: Object,
+      required: false,
+    },
+  },
 
-  @Emit("load")
-  onload() {}
-
-  private years: IYear[] = [];
-
-  private hasRight = false;
-  private hasLeft = false;
-  private scrollStack: number[] = [];
+  data() {
+    return {
+      getPreviewUrl,
+      years: [] as IYear[],
+      hasRight: false,
+      hasLeft: false,
+      scrollStack: [] as number[],
+    };
+  },
 
   mounted() {
     const inner = this.$refs.inner as HTMLElement;
@@ -94,112 +95,118 @@ export default class OnThisDay extends Mixins(GlobalMixin) {
     });
 
     this.refresh();
-  }
+  },
 
-  async refresh() {
-    // Look for cache
-    const dayIdToday = utils.dateToDayId(new Date());
-    const cacheUrl = `/onthisday/${dayIdToday}`;
-    const cache = await utils.getCachedData<IPhoto[]>(cacheUrl);
-    if (cache) this.process(cache);
+  methods: {
+    onload() {
+      this.$emit("load");
+    },
 
-    // Network request
-    const photos = await dav.getOnThisDayRaw();
-    utils.cacheData(cacheUrl, photos);
+    async refresh() {
+      // Look for cache
+      const dayIdToday = utils.dateToDayId(new Date());
+      const cacheUrl = `/onthisday/${dayIdToday}`;
+      const cache = await utils.getCachedData<IPhoto[]>(cacheUrl);
+      if (cache) this.process(cache);
 
-    // Check if exactly same as cache
-    if (
-      cache?.length === photos.length &&
-      cache.every((p, i) => p.fileid === photos[i].fileid)
-    )
-      return;
-    this.process(photos);
-  }
+      // Network request
+      const photos = await dav.getOnThisDayRaw();
+      utils.cacheData(cacheUrl, photos);
 
-  async process(photos: IPhoto[]) {
-    this.years = [];
+      // Check if exactly same as cache
+      if (
+        cache?.length === photos.length &&
+        cache.every((p, i) => p.fileid === photos[i].fileid)
+      )
+        return;
+      this.process(photos);
+    },
 
-    let currentYear = 9999;
+    async process(photos: IPhoto[]) {
+      this.years = [];
 
-    for (const photo of photos) {
-      const dateTaken = utils.dayIdToDate(photo.dayid);
-      const year = dateTaken.getUTCFullYear();
-      photo.key = `${photo.fileid}`;
+      let currentYear = 9999;
 
-      if (year !== currentYear) {
-        this.years.push({
-          year,
-          url: "",
-          preview: null,
-          photos: [],
-          text: utils.getFromNowStr(dateTaken),
-        });
-        currentYear = year;
+      for (const photo of photos) {
+        const dateTaken = utils.dayIdToDate(photo.dayid);
+        const year = dateTaken.getUTCFullYear();
+        photo.key = `${photo.fileid}`;
+
+        if (year !== currentYear) {
+          this.years.push({
+            year,
+            url: "",
+            preview: null,
+            photos: [],
+            text: utils.getFromNowStr(dateTaken),
+          });
+          currentYear = year;
+        }
+
+        const yearObj = this.years[this.years.length - 1];
+        yearObj.photos.push(photo);
       }
 
-      const yearObj = this.years[this.years.length - 1];
-      yearObj.photos.push(photo);
-    }
-
-    // For each year, randomly choose 10 photos to display
-    for (const year of this.years) {
-      year.photos = utils.randomSubarray(year.photos, 10);
-    }
-
-    // Choose preview photo
-    for (const year of this.years) {
-      // Try to prioritize landscape photos on desktop
-      if (globalThis.windowInnerWidth <= 600) {
-        const landscape = year.photos.filter((p) => p.w > p.h);
-        year.preview = utils.randomChoice(landscape);
+      // For each year, randomly choose 10 photos to display
+      for (const year of this.years) {
+        year.photos = utils.randomSubarray(year.photos, 10);
       }
 
-      // Get random photo
-      year.preview ||= utils.randomChoice(year.photos);
-      year.url = getPreviewUrl(year.preview, false, 512);
-    }
+      // Choose preview photo
+      for (const year of this.years) {
+        // Try to prioritize landscape photos on desktop
+        if (globalThis.windowInnerWidth <= 600) {
+          const landscape = year.photos.filter((p) => p.w > p.h);
+          year.preview = utils.randomChoice(landscape);
+        }
 
-    await this.$nextTick();
-    this.onScroll();
-    this.onload();
-  }
+        // Get random photo
+        year.preview ||= utils.randomChoice(year.photos);
+        year.url = getPreviewUrl(year.preview, false, 512);
+      }
 
-  moveLeft() {
-    const inner = this.$refs.inner as HTMLElement;
-    inner.scrollBy(-(this.scrollStack.pop() || inner.clientWidth), 0);
-  }
+      await this.$nextTick();
+      this.onScroll();
+      this.onload();
+    },
 
-  moveRight() {
-    const inner = this.$refs.inner as HTMLElement;
-    const innerRect = inner.getBoundingClientRect();
-    const nextChild = Array.from(inner.children)
-      .map((c) => c.getBoundingClientRect())
-      .find((rect) => rect.right > innerRect.right);
+    moveLeft() {
+      const inner = this.$refs.inner as HTMLElement;
+      inner.scrollBy(-(this.scrollStack.pop() || inner.clientWidth), 0);
+    },
 
-    let scroll = nextChild
-      ? nextChild.left - innerRect.left
-      : inner.clientWidth;
-    scroll = Math.min(
-      inner.scrollWidth - inner.scrollLeft - inner.clientWidth,
-      scroll
-    );
-    this.scrollStack.push(scroll);
-    inner.scrollBy(scroll, 0);
-  }
+    moveRight() {
+      const inner = this.$refs.inner as HTMLElement;
+      const innerRect = inner.getBoundingClientRect();
+      const nextChild = Array.from(inner.children)
+        .map((c) => c.getBoundingClientRect())
+        .find((rect) => rect.right > innerRect.right);
 
-  onScroll() {
-    const inner = this.$refs.inner as HTMLElement;
-    if (!inner) return;
-    this.hasLeft = inner.scrollLeft > 0;
-    this.hasRight =
-      inner.clientWidth + inner.scrollLeft < inner.scrollWidth - 20;
-  }
+      let scroll = nextChild
+        ? nextChild.left - innerRect.left
+        : inner.clientWidth;
+      scroll = Math.min(
+        inner.scrollWidth - inner.scrollLeft - inner.clientWidth,
+        scroll
+      );
+      this.scrollStack.push(scroll);
+      inner.scrollBy(scroll, 0);
+    },
 
-  click(year: IYear) {
-    const allPhotos = this.years.flatMap((y) => y.photos);
-    this.viewer.openStatic(year.preview, allPhotos, 512);
-  }
-}
+    onScroll() {
+      const inner = this.$refs.inner as HTMLElement;
+      if (!inner) return;
+      this.hasLeft = inner.scrollLeft > 0;
+      this.hasRight =
+        inner.clientWidth + inner.scrollLeft < inner.scrollWidth - 20;
+    },
+
+    click(year: IYear) {
+      const allPhotos = this.years.flatMap((y) => y.photos);
+      this.viewer.openStatic(year.preview, allPhotos, 512);
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/top-matter/TagTopMatter.vue b/src/components/top-matter/TagTopMatter.vue
index 2bb67445..4639aa98 100644
--- a/src/components/top-matter/TagTopMatter.vue
+++ b/src/components/top-matter/TagTopMatter.vue
@@ -11,41 +11,47 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent } from "vue";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
 
 import BackIcon from "vue-material-design-icons/ArrowLeft.vue";
 
-@Component({
+export default defineComponent({
+  name: "TagTopMatter",
   components: {
     NcActions,
     NcActionButton,
     BackIcon,
   },
-})
-export default class TagTopMatter extends Mixins(GlobalMixin) {
-  private name: string = "";
 
-  @Watch("$route")
-  async routeChange(from: any, to: any) {
-    this.createMatter();
-  }
+  data() {
+    return {
+      name: "",
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
+      this.createMatter();
+    },
+  },
 
   mounted() {
     this.createMatter();
-  }
+  },
 
-  createMatter() {
-    this.name = this.$route.params.name || "";
-  }
+  methods: {
+    createMatter() {
+      this.name = this.$route.params.name || "";
+    },
 
-  back() {
-    this.$router.push({ name: "tags" });
-  }
-}
+    back() {
+      this.$router.push({ name: "tags" });
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/top-matter/TopMatter.vue b/src/components/top-matter/TopMatter.vue
index a50553b5..cea1dba1 100644
--- a/src/components/top-matter/TopMatter.vue
+++ b/src/components/top-matter/TopMatter.vue
@@ -8,56 +8,63 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
+import { defineComponent } from "vue";
+
 import FolderTopMatter from "./FolderTopMatter.vue";
 import TagTopMatter from "./TagTopMatter.vue";
 import FaceTopMatter from "./FaceTopMatter.vue";
 import AlbumTopMatter from "./AlbumTopMatter.vue";
 
-import GlobalMixin from "../../mixins/GlobalMixin";
 import { TopMatterType } from "../../types";
 
-@Component({
+export default defineComponent({
+  name: "TopMatter",
   components: {
     FolderTopMatter,
     TagTopMatter,
     FaceTopMatter,
     AlbumTopMatter,
   },
-})
-export default class TopMatter extends Mixins(GlobalMixin) {
-  public type: TopMatterType = TopMatterType.NONE;
 
-  @Watch("$route")
-  async routeChange(from: any, to: any) {
-    this.setTopMatter();
-  }
+  data() {
+    return {
+      type: TopMatterType.NONE,
+    };
+  },
+
+  watch: {
+    $route: function (from: any, to: any) {
+      this.setTopMatter();
+    },
+  },
 
   mounted() {
     this.setTopMatter();
-  }
+  },
 
-  /** Create top matter */
-  setTopMatter() {
-    this.type = (() => {
-      switch (this.$route.name) {
-        case "folders":
-          return TopMatterType.FOLDER;
-        case "tags":
-          return this.$route.params.name
-            ? TopMatterType.TAG
-            : TopMatterType.NONE;
-        case "recognize":
-        case "facerecognition":
-          return this.$route.params.name
-            ? TopMatterType.FACE
-            : TopMatterType.NONE;
-        case "albums":
-          return TopMatterType.ALBUM;
-        default:
-          return TopMatterType.NONE;
-      }
-    })();
-  }
-}
+  methods: {
+    /** Create top matter */
+    setTopMatter() {
+      this.type = (() => {
+        switch (this.$route.name) {
+          case "folders":
+            return TopMatterType.FOLDER;
+          case "tags":
+            return this.$route.params.name
+              ? TopMatterType.TAG
+              : TopMatterType.NONE;
+          case "recognize":
+          case "facerecognition":
+            return this.$route.params.name
+              ? TopMatterType.FACE
+              : TopMatterType.NONE;
+          case "albums":
+            return TopMatterType.ALBUM;
+          default:
+            return TopMatterType.NONE;
+        }
+      })();
+    },
+  },
+});
 </script>
\ No newline at end of file