From 8d79151a30a77927d5222e59ff4c050a46b3b8ad Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Sat, 10 Dec 2022 01:27:04 -0800
Subject: [PATCH] remove class vue dep (2)

---
 src/components/frame/Photo.vue              | 309 ++++++-------
 src/components/frame/Tag.vue                | 146 ++++---
 src/components/modal/AddToAlbumModal.vue    |  94 ++--
 src/components/modal/AlbumCollaborators.vue | 452 ++++++++++----------
 src/components/modal/AlbumCreateModal.vue   |  85 ++--
 src/components/modal/AlbumDeleteModal.vue   | 103 +++--
 src/components/modal/AlbumForm.vue          | 202 +++++----
 src/components/modal/AlbumPicker.vue        |  72 ++--
 src/components/modal/AlbumShareModal.vue    |  73 ++--
 9 files changed, 817 insertions(+), 719 deletions(-)

diff --git a/src/components/frame/Photo.vue b/src/components/frame/Photo.vue
index e1f39d41..edc940da 100644
--- a/src/components/frame/Photo.vue
+++ b/src/components/frame/Photo.vue
@@ -67,8 +67,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins, Prop, Watch } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent, PropType } from "vue";
 
 import { getPreviewUrl } from "../../services/FileUtils";
 import { IDay, IPhoto } from "../../types";
@@ -80,38 +79,48 @@ import Star from "vue-material-design-icons/Star.vue";
 import Video from "vue-material-design-icons/PlayCircleOutline.vue";
 import LivePhoto from "vue-material-design-icons/MotionPlayOutline.vue";
 
-@Component({
+export default defineComponent({
+  name: "Photo",
   components: {
     CheckCircle,
     Video,
     Star,
     LivePhoto,
   },
-})
-export default class Photo extends Mixins(GlobalMixin) {
-  private touchTimer = 0;
-  private src = null;
-  private hasFaceRect = false;
 
-  @Prop() data: IPhoto;
-  @Prop() day: IDay;
+  props: {
+    data: {
+      type: Object as PropType<IPhoto>,
+      required: true,
+    },
+    day: {
+      type: Object as PropType<IDay>,
+      required: true,
+    },
+  },
 
-  @Emit("select") emitSelect(data: IPhoto) {}
+  data() {
+    return {
+      touchTimer: 0,
+      src: null,
+      hasFaceRect: false,
+    };
+  },
 
-  @Watch("data")
-  onDataChange(newData: IPhoto, oldData: IPhoto) {
-    // Copy flags relevant to this component
-    if (oldData && newData) {
-      newData.flag |=
-        oldData.flag & (this.c.FLAG_SELECTED | this.c.FLAG_LOAD_FAIL);
-    }
-  }
+  watch: {
+    data(newData: IPhoto, oldData: IPhoto) {
+      // Copy flags relevant to this component
+      if (oldData && newData) {
+        newData.flag |=
+          oldData.flag & (this.c.FLAG_SELECTED | this.c.FLAG_LOAD_FAIL);
+      }
+    },
 
-  @Watch("data.etag")
-  onEtagChange() {
-    this.hasFaceRect = false;
-    this.refresh();
-  }
+    "data.etag": function () {
+      this.hasFaceRect = false;
+      this.refresh();
+    },
+  },
 
   mounted() {
     this.hasFaceRect = false;
@@ -122,136 +131,144 @@ export default class Photo extends Mixins(GlobalMixin) {
     if (video) {
       utils.setupLivePhotoHooks(video);
     }
-  }
-
-  get videoDuration() {
-    if (this.data.video_duration) {
-      return utils.getDurationStr(this.data.video_duration);
-    }
-    return null;
-  }
-
-  get videoUrl() {
-    if (this.data.liveid) {
-      return utils.getLivePhotoVideoUrl(this.data, true);
-    }
-  }
-
-  async refresh() {
-    this.src = await this.getSrc();
-  }
-
-  /** Get src for image to show */
-  async getSrc() {
-    if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
-      return null;
-    } else if (this.data.flag & this.c.FLAG_LOAD_FAIL) {
-      return errorsvg;
-    } else {
-      return this.url();
-    }
-  }
-
-  /** Get url of the photo */
-  url() {
-    let base = 256;
-
-    // Check if displayed size is larger than the image
-    if (this.data.dispH > base * 0.9 && this.data.dispW > base * 0.9) {
-      // Get a bigger image
-      // 1. No trickery here, just get one size bigger. This is to
-      //    ensure that the images can be cached even after reflow.
-      // 2. Nextcloud only allows 4**x sized images, so technically
-      //    this ends up being equivalent to 1024x1024.
-      base = 512;
-    }
-
-    // Make the shorter dimension equal to base
-    let size = base;
-    if (this.data.w && this.data.h) {
-      size =
-        Math.floor(
-          (base * Math.max(this.data.w, this.data.h)) /
-            Math.min(this.data.w, this.data.h)
-        ) - 1;
-    }
-
-    return getPreviewUrl(this.data, false, size);
-  }
-
-  /** Set src with overlay face rect */
-  async addFaceRect() {
-    if (!this.data.facerect || this.hasFaceRect) return;
-    this.hasFaceRect = true;
-
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    const img = this.$refs.img as HTMLImageElement;
-
-    canvas.width = img.naturalWidth;
-    canvas.height = img.naturalHeight;
-    context.drawImage(img, 0, 0);
-    context.strokeStyle = "#00ff00";
-    context.lineWidth = 2;
-    context.strokeRect(
-      this.data.facerect.x * img.naturalWidth,
-      this.data.facerect.y * img.naturalHeight,
-      this.data.facerect.w * img.naturalWidth,
-      this.data.facerect.h * img.naturalHeight
-    );
-
-    canvas.toBlob(
-      (blob) => {
-        this.src = URL.createObjectURL(blob);
-      },
-      "image/jpeg",
-      0.95
-    );
-  }
-
-  /** Post load tasks */
-  load() {
-    this.addFaceRect();
-  }
-
-  /** Error in loading image */
-  error(e: any) {
-    this.data.flag |= this.c.FLAG_LOAD_FAIL;
-    this.refresh();
-  }
+  },
 
   /** Clear timers */
   beforeUnmount() {
     clearTimeout(this.touchTimer);
-  }
+  },
 
-  toggleSelect() {
-    if (this.data.flag & this.c.FLAG_PLACEHOLDER) return;
-    this.emitSelect(this.data);
-  }
+  computed: {
+    videoDuration() {
+      if (this.data.video_duration) {
+        return utils.getDurationStr(this.data.video_duration);
+      }
+      return null;
+    },
 
-  contextmenu(e: Event) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
+    videoUrl() {
+      if (this.data.liveid) {
+        return utils.getLivePhotoVideoUrl(this.data, true);
+      }
+    },
+  },
 
-  /** Start preview video */
-  playVideo() {
-    if (this.$refs.video && !(this.data.flag & this.c.FLAG_SELECTED)) {
-      const video = this.$refs.video as HTMLVideoElement;
-      video.currentTime = 0;
-      video.play();
-    }
-  }
+  methods: {
+    emitSelect(data: IPhoto) {
+      this.$emit("select", data);
+    },
 
-  /** Stop preview video */
-  stopVideo() {
-    if (this.$refs.video) {
-      const video = this.$refs.video as HTMLVideoElement;
-      video.pause();
-    }
-  }
-}
+    async refresh() {
+      this.src = await this.getSrc();
+    },
+
+    /** Get src for image to show */
+    async getSrc() {
+      if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
+        return null;
+      } else if (this.data.flag & this.c.FLAG_LOAD_FAIL) {
+        return errorsvg;
+      } else {
+        return this.url();
+      }
+    },
+
+    /** Get url of the photo */
+    url() {
+      let base = 256;
+
+      // Check if displayed size is larger than the image
+      if (this.data.dispH > base * 0.9 && this.data.dispW > base * 0.9) {
+        // Get a bigger image
+        // 1. No trickery here, just get one size bigger. This is to
+        //    ensure that the images can be cached even after reflow.
+        // 2. Nextcloud only allows 4**x sized images, so technically
+        //    this ends up being equivalent to 1024x1024.
+        base = 512;
+      }
+
+      // Make the shorter dimension equal to base
+      let size = base;
+      if (this.data.w && this.data.h) {
+        size =
+          Math.floor(
+            (base * Math.max(this.data.w, this.data.h)) /
+              Math.min(this.data.w, this.data.h)
+          ) - 1;
+      }
+
+      return getPreviewUrl(this.data, false, size);
+    },
+
+    /** Set src with overlay face rect */
+    async addFaceRect() {
+      if (!this.data.facerect || this.hasFaceRect) return;
+      this.hasFaceRect = true;
+
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
+      const img = this.$refs.img as HTMLImageElement;
+
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      context.drawImage(img, 0, 0);
+      context.strokeStyle = "#00ff00";
+      context.lineWidth = 2;
+      context.strokeRect(
+        this.data.facerect.x * img.naturalWidth,
+        this.data.facerect.y * img.naturalHeight,
+        this.data.facerect.w * img.naturalWidth,
+        this.data.facerect.h * img.naturalHeight
+      );
+
+      canvas.toBlob(
+        (blob) => {
+          this.src = URL.createObjectURL(blob);
+        },
+        "image/jpeg",
+        0.95
+      );
+    },
+
+    /** Post load tasks */
+    load() {
+      this.addFaceRect();
+    },
+
+    /** Error in loading image */
+    error(e: any) {
+      this.data.flag |= this.c.FLAG_LOAD_FAIL;
+      this.refresh();
+    },
+
+    toggleSelect() {
+      if (this.data.flag & this.c.FLAG_PLACEHOLDER) return;
+      this.emitSelect(this.data);
+    },
+
+    contextmenu(e: Event) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+
+    /** Start preview video */
+    playVideo() {
+      if (this.$refs.video && !(this.data.flag & this.c.FLAG_SELECTED)) {
+        const video = this.$refs.video as HTMLVideoElement;
+        video.currentTime = 0;
+        video.play();
+      }
+    },
+
+    /** Stop preview video */
+    stopVideo() {
+      if (this.$refs.video) {
+        const video = this.$refs.video as HTMLVideoElement;
+        video.pause();
+      }
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/frame/Tag.vue b/src/components/frame/Tag.vue
index 2737f129..f96f9bac 100644
--- a/src/components/frame/Tag.vue
+++ b/src/components/frame/Tag.vue
@@ -29,99 +29,111 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Mixins, Emit } from "vue-property-decorator";
+import { defineComponent, PropType } from "vue";
+
 import { IAlbum, ITag } from "../../types";
 import { getPreviewUrl } from "../../services/FileUtils";
 import { getCurrentUser } from "@nextcloud/auth";
 
 import NcCounterBubble from "@nextcloud/vue/dist/Components/NcCounterBubble";
 
-import GlobalMixin from "../../mixins/GlobalMixin";
 import { constants } from "../../services/Utils";
 import { API } from "../../services/API";
 
-@Component({
+export default defineComponent({
+  name: "Tag",
   components: {
     NcCounterBubble,
   },
-})
-export default class Tag extends Mixins(GlobalMixin) {
-  @Prop() data: ITag;
-  @Prop() noNavigate: boolean;
 
-  /**
-   * Open tag event
-   * Unless noNavigate is set, the tag will be opened
-   */
-  @Emit("open")
-  openTag(tag: ITag) {}
+  props: {
+    data: {
+      type: Object as PropType<ITag>,
+      required: true,
+    },
+    noNavigate: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
-  get previewUrl() {
-    if (this.face) {
-      return API.FACE_PREVIEW(this.faceApp, this.face.fileid);
-    }
+  computed: {
+    previewUrl() {
+      if (this.face) {
+        return API.FACE_PREVIEW(this.faceApp, this.face.fileid);
+      }
 
-    if (this.album) {
-      const mock = { fileid: this.album.last_added_photo, etag: "", flag: 0 };
-      return getPreviewUrl(mock, true, 512);
-    }
+      if (this.album) {
+        const mock = { fileid: this.album.last_added_photo, etag: "", flag: 0 };
+        return getPreviewUrl(mock, true, 512);
+      }
 
-    return API.TAG_PREVIEW(this.data.name);
-  }
+      return API.TAG_PREVIEW(this.data.name);
+    },
 
-  get subtitle() {
-    if (this.album && this.album.user !== getCurrentUser()?.uid) {
-      return `(${this.album.user})`;
-    }
+    subtitle() {
+      if (this.album && this.album.user !== getCurrentUser()?.uid) {
+        return `(${this.album.user})`;
+      }
 
-    return "";
-  }
+      return "";
+    },
 
-  get face() {
-    return this.data.flag & constants.c.FLAG_IS_FACE_RECOGNIZE ||
-      this.data.flag & constants.c.FLAG_IS_FACE_RECOGNITION
-      ? this.data
-      : null;
-  }
+    face() {
+      return this.data.flag & constants.c.FLAG_IS_FACE_RECOGNIZE ||
+        this.data.flag & constants.c.FLAG_IS_FACE_RECOGNITION
+        ? this.data
+        : null;
+    },
 
-  get faceApp() {
-    return this.data.flag & constants.c.FLAG_IS_FACE_RECOGNITION
-      ? "facerecognition"
-      : "recognize";
-  }
+    faceApp() {
+      return this.data.flag & constants.c.FLAG_IS_FACE_RECOGNITION
+        ? "facerecognition"
+        : "recognize";
+    },
 
-  get album() {
-    return this.data.flag & constants.c.FLAG_IS_ALBUM
-      ? <IAlbum>this.data
-      : null;
-  }
+    album() {
+      return this.data.flag & constants.c.FLAG_IS_ALBUM
+        ? <IAlbum>this.data
+        : null;
+    },
 
-  /** Target URL to navigate to */
-  get target() {
-    if (this.noNavigate) return {};
+    /** Target URL to navigate to */
+    target() {
+      if (this.noNavigate) return {};
 
-    if (this.face) {
-      const name = this.face.name || this.face.fileid.toString();
-      const user = this.face.user_id;
-      return { name: this.faceApp, params: { name, user } };
-    }
+      if (this.face) {
+        const name = this.face.name || this.face.fileid.toString();
+        const user = this.face.user_id;
+        return { name: this.faceApp, params: { name, user } };
+      }
 
-    if (this.album) {
-      const user = this.album.user;
-      const name = this.album.name;
-      return { name: "albums", params: { user, name } };
-    }
+      if (this.album) {
+        const user = this.album.user;
+        const name = this.album.name;
+        return { name: "albums", params: { user, name } };
+      }
 
-    return { name: "tags", params: { name: this.data.name } };
-  }
+      return { name: "tags", params: { name: this.data.name } };
+    },
 
-  get error() {
-    return (
-      Boolean(this.data.flag & this.c.FLAG_LOAD_FAIL) ||
-      Boolean(this.album && this.album.last_added_photo <= 0)
-    );
-  }
-}
+    error() {
+      return (
+        Boolean(this.data.flag & this.c.FLAG_LOAD_FAIL) ||
+        Boolean(this.album && this.album.last_added_photo <= 0)
+      );
+    },
+  },
+  methods: {
+    /**
+     * Open tag event
+     * Unless noNavigate is set, the tag will be opened
+     */
+    openTag(tag: ITag) {
+      this.$emit("open", tag);
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modal/AddToAlbumModal.vue b/src/components/modal/AddToAlbumModal.vue
index c79506ba..2506be73 100644
--- a/src/components/modal/AddToAlbumModal.vue
+++ b/src/components/modal/AddToAlbumModal.vue
@@ -20,8 +20,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent } from "vue";
 
 import * as dav from "../../services/DavRequests";
 import { showInfo } from "@nextcloud/dialogs";
@@ -30,58 +29,65 @@ import { IAlbum, IPhoto } from "../../types";
 import AlbumPicker from "./AlbumPicker.vue";
 import Modal from "./Modal.vue";
 
-@Component({
+export default defineComponent({
+  name: "AddToAlbumModal",
   components: {
     Modal,
     AlbumPicker,
   },
-})
-export default class AddToAlbumModal extends Mixins(GlobalMixin) {
-  private show = false;
-  private photos: IPhoto[] = [];
-  private photosDone: number = 0;
-  private processing: boolean = false;
 
-  public open(photos: IPhoto[]) {
-    this.photosDone = 0;
-    this.processing = false;
-    this.show = true;
-    this.photos = photos;
-  }
+  data() {
+    return {
+      show: false,
+      photos: [] as IPhoto[],
+      photosDone: 0,
+      processing: false,
+    };
+  },
 
-  @Emit("added")
-  public added(photos: IPhoto[]) {}
+  methods: {
+    open(photos: IPhoto[]) {
+      this.photosDone = 0;
+      this.processing = false;
+      this.show = true;
+      this.photos = photos;
+    },
 
-  @Emit("close")
-  public close() {
-    this.photos = [];
-    this.processing = false;
-    this.show = false;
-  }
+    added(photos: IPhoto[]) {
+      this.$emit("added", photos);
+    },
 
-  public async selectAlbum(album: IAlbum) {
-    const name = album.name || album.album_id.toString();
-    const gen = dav.addToAlbum(album.user, name, this.photos);
-    this.processing = true;
+    close() {
+      this.photos = [];
+      this.processing = false;
+      this.show = false;
+      this.$emit("close");
+    },
 
-    for await (const fids of gen) {
-      this.photosDone += fids.filter((f) => f).length;
-      this.added(this.photos.filter((p) => fids.includes(p.fileid)));
-    }
+    async selectAlbum(album: IAlbum) {
+      const name = album.name || album.album_id.toString();
+      const gen = dav.addToAlbum(album.user, name, this.photos);
+      this.processing = true;
 
-    const n = this.photosDone;
-    showInfo(
-      this.n(
-        "memories",
-        "{n} item added to album",
-        "{n} items added to album",
-        n,
-        { n }
-      )
-    );
-    this.close();
-  }
-}
+      for await (const fids of gen) {
+        this.photosDone += fids.filter((f) => f).length;
+        this.added(this.photos.filter((p) => fids.includes(p.fileid)));
+      }
+
+      const n = this.photosDone;
+      showInfo(
+        this.n(
+          "memories",
+          "{n} item added to album",
+          "{n} items added to album",
+          n,
+          { n }
+        )
+      );
+      this.close();
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modal/AlbumCollaborators.vue b/src/components/modal/AlbumCollaborators.vue
index 72c8ae46..bc231366 100644
--- a/src/components/modal/AlbumCollaborators.vue
+++ b/src/components/modal/AlbumCollaborators.vue
@@ -141,8 +141,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent, PropType } from "vue";
 
 import Magnify from "vue-material-design-icons/Magnify.vue";
 import Close from "vue-material-design-icons/Close.vue";
@@ -173,7 +172,8 @@ type Collaborator = {
   type: Type;
 };
 
-@Component({
+export default defineComponent({
+  name: "AddToAlbumModal",
   components: {
     Magnify,
     Close,
@@ -188,250 +188,270 @@ type Collaborator = {
     NcPopover,
     NcEmptyContent,
   },
-})
-export default class AddToAlbumModal extends Mixins(GlobalMixin) {
-  @Prop() private albumName: string;
-  @Prop() collaborators: Collaborator[];
-  @Prop() allowPublicLink: boolean;
 
-  private searchText = "";
-  private availableCollaborators: { [key: string]: Collaborator } = {};
-  private selectedCollaboratorsKeys: string[] = [];
-  private currentSearchResults = [];
-  private loadingAlbum = false;
-  private errorFetchingAlbum = null;
-  private loadingCollaborators = false;
-  private errorFetchingCollaborators = null;
-  private randomId = Math.random().toString().substring(2, 10);
-  private publicLinkCopied = false;
-  private config = {
-    minSearchStringLength:
-      parseInt(window.OC.config["sharing.minSearchStringLength"], 10) || 0,
-  };
+  props: {
+    albumName: {
+      type: String,
+      required: true,
+    },
+    collaborators: {
+      type: Array as PropType<Collaborator[]>,
+      required: true,
+    },
+    allowPublicLink: {
+      type: Boolean,
+      required: false,
+    },
+  },
 
-  get searchResults(): string[] {
-    return this.currentSearchResults
-      .filter(({ id }) => id !== getCurrentUser()?.uid)
-      .map(({ type, id }) => `${type}:${id}`)
-      .filter(
+  data() {
+    return {
+      searchText: "",
+      availableCollaborators: {} as { [key: string]: Collaborator },
+      selectedCollaboratorsKeys: [] as string[],
+      currentSearchResults: [] as Collaborator[],
+      loadingAlbum: false,
+      errorFetchingAlbum: null,
+      loadingCollaborators: false,
+      errorFetchingCollaborators: null,
+      randomId: Math.random().toString().substring(2, 10),
+      publicLinkCopied: false,
+      config: {
+        minSearchStringLength:
+          parseInt(window.OC.config["sharing.minSearchStringLength"], 10) || 0,
+      },
+    };
+  },
+
+  computed: {
+    searchResults(): string[] {
+      return this.currentSearchResults
+        .filter(({ id }) => id !== getCurrentUser()?.uid)
+        .map(({ type, id }) => `${type}:${id}`)
+        .filter(
+          (collaboratorKey) =>
+            !this.selectedCollaboratorsKeys.includes(collaboratorKey)
+        );
+    },
+
+    listableSelectedCollaboratorsKeys(): string[] {
+      return this.selectedCollaboratorsKeys.filter(
         (collaboratorKey) =>
-          !this.selectedCollaboratorsKeys.includes(collaboratorKey)
+          this.availableCollaborators[collaboratorKey].type !==
+          Type.SHARE_TYPE_LINK
       );
-  }
+    },
 
-  get listableSelectedCollaboratorsKeys(): string[] {
-    return this.selectedCollaboratorsKeys.filter(
-      (collaboratorKey) =>
-        this.availableCollaborators[collaboratorKey].type !==
-        Type.SHARE_TYPE_LINK
-    );
-  }
+    selectedCollaborators(): Collaborator[] {
+      return this.selectedCollaboratorsKeys.map(
+        (collaboratorKey) => this.availableCollaborators[collaboratorKey]
+      );
+    },
 
-  get selectedCollaborators(): Collaborator[] {
-    return this.selectedCollaboratorsKeys.map(
-      (collaboratorKey) => this.availableCollaborators[collaboratorKey]
-    );
-  }
+    isPublicLinkSelected(): boolean {
+      return this.selectedCollaboratorsKeys.includes(`${Type.SHARE_TYPE_LINK}`);
+    },
 
-  get isPublicLinkSelected(): boolean {
-    return this.selectedCollaboratorsKeys.includes(`${Type.SHARE_TYPE_LINK}`);
-  }
-
-  get publicLink(): Collaborator {
-    return this.availableCollaborators[Type.SHARE_TYPE_LINK];
-  }
-
-  @Watch("collaborators")
-  collaboratorsChanged(collaborators) {
-    this.populateCollaborators(collaborators);
-  }
+    publicLink(): Collaborator {
+      return this.availableCollaborators[Type.SHARE_TYPE_LINK];
+    },
+  },
+  watch: {
+    collaborators(collaborators) {
+      this.populateCollaborators(collaborators);
+    },
+  },
 
   mounted() {
     this.searchCollaborators();
     this.populateCollaborators(this.collaborators);
-  }
+  },
 
-  /**
-   * Fetch possible collaborators.
-   */
-  async searchCollaborators() {
-    if (this.searchText.length >= 1) {
-      (<any>this.$refs.popover).$refs.popover.show();
-    }
-
-    try {
-      if (this.searchText.length < this.config.minSearchStringLength) {
-        return;
+  methods: {
+    /**
+     * Fetch possible collaborators.
+     */
+    async searchCollaborators() {
+      if (this.searchText.length >= 1) {
+        (<any>this.$refs.popover).$refs.popover.show();
       }
 
-      this.loadingCollaborators = true;
-      const response = await axios.get(
-        generateOcsUrl("core/autocomplete/get"),
-        {
-          params: {
-            search: this.searchText,
-            itemType: "share-recipients",
-            shareTypes: [Type.SHARE_TYPE_USER, Type.SHARE_TYPE_GROUP],
-          },
+      try {
+        if (this.searchText.length < this.config.minSearchStringLength) {
+          return;
         }
+
+        this.loadingCollaborators = true;
+        const response = await axios.get(
+          generateOcsUrl("core/autocomplete/get"),
+          {
+            params: {
+              search: this.searchText,
+              itemType: "share-recipients",
+              shareTypes: [Type.SHARE_TYPE_USER, Type.SHARE_TYPE_GROUP],
+            },
+          }
+        );
+
+        this.currentSearchResults = response.data.ocs.data.map(
+          (collaborator) => {
+            switch (collaborator.source) {
+              case "users":
+                return {
+                  id: collaborator.id,
+                  label: collaborator.label,
+                  type: Type.SHARE_TYPE_USER,
+                };
+              case "groups":
+                return {
+                  id: collaborator.id,
+                  label: collaborator.label,
+                  type: Type.SHARE_TYPE_GROUP,
+                };
+              default:
+                throw new Error(
+                  `Invalid collaborator source ${collaborator.source}`
+                );
+            }
+          }
+        );
+
+        this.availableCollaborators = {
+          ...this.availableCollaborators,
+          ...this.currentSearchResults.reduce(this.indexCollaborators, {}),
+        };
+      } catch (error) {
+        this.errorFetchingCollaborators = error;
+        showError(this.t("photos", "Failed to fetch collaborators list."));
+      } finally {
+        this.loadingCollaborators = false;
+      }
+    },
+
+    /**
+     * Populate selectedCollaboratorsKeys and availableCollaborators.
+     */
+    populateCollaborators(collaborators: Collaborator[]) {
+      const initialCollaborators = collaborators.reduce(
+        this.indexCollaborators,
+        {}
       );
-
-      this.currentSearchResults = response.data.ocs.data.map((collaborator) => {
-        switch (collaborator.source) {
-          case "users":
-            return {
-              id: collaborator.id,
-              label: collaborator.label,
-              type: Type.SHARE_TYPE_USER,
-            };
-          case "groups":
-            return {
-              id: collaborator.id,
-              label: collaborator.label,
-              type: Type.SHARE_TYPE_GROUP,
-            };
-          default:
-            throw new Error(
-              `Invalid collaborator source ${collaborator.source}`
-            );
-        }
-      });
-
+      this.selectedCollaboratorsKeys = Object.keys(initialCollaborators);
       this.availableCollaborators = {
+        3: {
+          id: "",
+          label: this.t("photos", "Public link"),
+          type: Type.SHARE_TYPE_LINK,
+        },
         ...this.availableCollaborators,
-        ...this.currentSearchResults.reduce(this.indexCollaborators, {}),
+        ...initialCollaborators,
       };
-    } catch (error) {
-      this.errorFetchingCollaborators = error;
-      showError(this.t("photos", "Failed to fetch collaborators list."));
-    } finally {
-      this.loadingCollaborators = false;
-    }
-  }
+    },
 
-  /**
-   * Populate selectedCollaboratorsKeys and availableCollaborators.
-   */
-  populateCollaborators(collaborators: Collaborator[]) {
-    const initialCollaborators = collaborators.reduce(
-      this.indexCollaborators,
-      {}
-    );
-    this.selectedCollaboratorsKeys = Object.keys(initialCollaborators);
-    this.availableCollaborators = {
-      3: {
+    /**
+     * @param {Object<string, Collaborator>} collaborators - Index of collaborators
+     * @param {Collaborator} collaborator - A collaborator
+     */
+    indexCollaborators(
+      collaborators: { [s: string]: Collaborator },
+      collaborator: Collaborator
+    ) {
+      return {
+        ...collaborators,
+        [`${collaborator.type}${
+          collaborator.type === Type.SHARE_TYPE_LINK ? "" : ":"
+        }${collaborator.type === Type.SHARE_TYPE_LINK ? "" : collaborator.id}`]:
+          collaborator,
+      };
+    },
+
+    async createPublicLinkForAlbum() {
+      this.selectEntity(`${Type.SHARE_TYPE_LINK}`);
+      await this.updateAlbumCollaborators();
+      try {
+        this.loadingAlbum = true;
+        this.errorFetchingAlbum = null;
+
+        const album = await dav.getAlbum(
+          getCurrentUser()?.uid.toString(),
+          this.albumName
+        );
+        this.populateCollaborators(album.collaborators);
+      } catch (error) {
+        if (error.response?.status === 404) {
+          this.errorFetchingAlbum = 404;
+        } else {
+          this.errorFetchingAlbum = error;
+        }
+
+        showError(this.t("photos", "Failed to fetch album."));
+      } finally {
+        this.loadingAlbum = false;
+      }
+    },
+
+    async deletePublicLink() {
+      this.unselectEntity(`${Type.SHARE_TYPE_LINK}`);
+      this.availableCollaborators[3] = {
         id: "",
         label: this.t("photos", "Public link"),
         type: Type.SHARE_TYPE_LINK,
-      },
-      ...this.availableCollaborators,
-      ...initialCollaborators,
-    };
-  }
+      };
+      this.publicLinkCopied = false;
+      await this.updateAlbumCollaborators();
+    },
 
-  /**
-   * @param {Object<string, Collaborator>} collaborators - Index of collaborators
-   * @param {Collaborator} collaborator - A collaborator
-   */
-  indexCollaborators(
-    collaborators: { [s: string]: Collaborator },
-    collaborator: Collaborator
-  ) {
-    return {
-      ...collaborators,
-      [`${collaborator.type}${
-        collaborator.type === Type.SHARE_TYPE_LINK ? "" : ":"
-      }${collaborator.type === Type.SHARE_TYPE_LINK ? "" : collaborator.id}`]:
-        collaborator,
-    };
-  }
+    async updateAlbumCollaborators() {
+      try {
+        const album = await dav.getAlbum(
+          getCurrentUser()?.uid.toString(),
+          this.albumName
+        );
+        await dav.updateAlbum(album, {
+          albumName: this.albumName,
+          properties: {
+            collaborators: this.selectedCollaborators,
+          },
+        });
+      } catch (error) {
+        showError(this.t("photos", "Failed to update album."));
+      } finally {
+        this.loadingAlbum = false;
+      }
+    },
 
-  async createPublicLinkForAlbum() {
-    this.selectEntity(`${Type.SHARE_TYPE_LINK}`);
-    await this.updateAlbumCollaborators();
-    try {
-      this.loadingAlbum = true;
-      this.errorFetchingAlbum = null;
-
-      const album = await dav.getAlbum(
-        getCurrentUser()?.uid.toString(),
-        this.albumName
+    async copyPublicLink() {
+      await navigator.clipboard.writeText(
+        `${window.location.protocol}//${window.location.host}${generateUrl(
+          `apps/photos/public/${this.publicLink.id}`
+        )}`
       );
-      this.populateCollaborators(album.collaborators);
-    } catch (error) {
-      if (error.response?.status === 404) {
-        this.errorFetchingAlbum = 404;
-      } else {
-        this.errorFetchingAlbum = error;
+      this.publicLinkCopied = true;
+      setTimeout(() => {
+        this.publicLinkCopied = false;
+      }, 10000);
+    },
+
+    selectEntity(collaboratorKey) {
+      if (this.selectedCollaboratorsKeys.includes(collaboratorKey)) {
+        return;
       }
 
-      showError(this.t("photos", "Failed to fetch album."));
-    } finally {
-      this.loadingAlbum = false;
-    }
-  }
+      (<any>this.$refs.popover).$refs.popover.hide();
+      this.selectedCollaboratorsKeys.push(collaboratorKey);
+    },
 
-  async deletePublicLink() {
-    this.unselectEntity(`${Type.SHARE_TYPE_LINK}`);
-    this.availableCollaborators[3] = {
-      id: "",
-      label: this.t("photos", "Public link"),
-      type: Type.SHARE_TYPE_LINK,
-    };
-    this.publicLinkCopied = false;
-    await this.updateAlbumCollaborators();
-  }
+    unselectEntity(collaboratorKey) {
+      const index = this.selectedCollaboratorsKeys.indexOf(collaboratorKey);
 
-  async updateAlbumCollaborators() {
-    try {
-      const album = await dav.getAlbum(
-        getCurrentUser()?.uid.toString(),
-        this.albumName
-      );
-      await dav.updateAlbum(album, {
-        albumName: this.albumName,
-        properties: {
-          collaborators: this.selectedCollaborators,
-        },
-      });
-    } catch (error) {
-      showError(this.t("photos", "Failed to update album."));
-    } finally {
-      this.loadingAlbum = false;
-    }
-  }
+      if (index === -1) {
+        return;
+      }
 
-  async copyPublicLink() {
-    await navigator.clipboard.writeText(
-      `${window.location.protocol}//${window.location.host}${generateUrl(
-        `apps/photos/public/${this.publicLink.id}`
-      )}`
-    );
-    this.publicLinkCopied = true;
-    setTimeout(() => {
-      this.publicLinkCopied = false;
-    }, 10000);
-  }
-
-  selectEntity(collaboratorKey) {
-    if (this.selectedCollaboratorsKeys.includes(collaboratorKey)) {
-      return;
-    }
-
-    (<any>this.$refs.popover).$refs.popover.hide();
-    this.selectedCollaboratorsKeys.push(collaboratorKey);
-  }
-
-  unselectEntity(collaboratorKey) {
-    const index = this.selectedCollaboratorsKeys.indexOf(collaboratorKey);
-
-    if (index === -1) {
-      return;
-    }
-
-    this.selectedCollaboratorsKeys.splice(index, 1);
-  }
-}
+      this.selectedCollaboratorsKeys.splice(index, 1);
+    },
+  },
+});
 </script>
 <style lang="scss" scoped>
 .manage-collaborators {
diff --git a/src/components/modal/AlbumCreateModal.vue b/src/components/modal/AlbumCreateModal.vue
index a3d5bca6..01808bac 100644
--- a/src/components/modal/AlbumCreateModal.vue
+++ b/src/components/modal/AlbumCreateModal.vue
@@ -21,8 +21,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent } from "vue";
 
 import { showError } from "@nextcloud/dialogs";
 import * as dav from "../../services/DavRequests";
@@ -30,53 +29,59 @@ import * as dav from "../../services/DavRequests";
 import Modal from "./Modal.vue";
 import AlbumForm from "./AlbumForm.vue";
 
-@Component({
+export default defineComponent({
+  name: "AlbumCreateModal",
   components: {
     Modal,
     AlbumForm,
   },
-})
-export default class AlbumCreateModal extends Mixins(GlobalMixin) {
-  private show = false;
-  private album: any = null;
 
-  /**
-   * Open the modal
-   * @param edit If true, the modal will be opened in edit mode
-   */
-  public async open(edit: boolean) {
-    if (edit) {
-      try {
-        this.album = await dav.getAlbum(
-          this.$route.params.user,
-          this.$route.params.name
-        );
-      } catch (e) {
-        console.error(e);
-        showError(this.t("photos", "Could not load the selected album"));
-        return;
+  data() {
+    return {
+      show: false,
+      album: null as any,
+    };
+  },
+
+  methods: {
+    /**
+     * Open the modal
+     * @param edit If true, the modal will be opened in edit mode
+     */
+    async open(edit: boolean) {
+      if (edit) {
+        try {
+          this.album = await dav.getAlbum(
+            this.$route.params.user,
+            this.$route.params.name
+          );
+        } catch (e) {
+          console.error(e);
+          showError(this.t("photos", "Could not load the selected album"));
+          return;
+        }
+      } else {
+        this.album = null;
       }
-    } else {
-      this.album = null;
-    }
 
-    this.show = true;
-  }
+      this.show = true;
+    },
 
-  @Emit("close")
-  public close() {
-    this.show = false;
-  }
+    close() {
+      this.show = false;
+      this.$emit("close");
+    },
 
-  public done({ album }: any) {
-    if (!this.album || album.basename !== this.album.basename) {
-      const user = album.filename.split("/")[2];
-      const name = album.basename;
-      this.$router.push({ name: "albums", params: { user, name } });
-    }
-    this.close();
-  }
-}
+    done({ album }: any) {
+      if (!this.album || album.basename !== this.album.basename) {
+        const user = album.filename.split("/")[2];
+        const name = album.basename;
+        this.$router.push({ name: "albums", params: { user, name } });
+      }
+      this.close();
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modal/AlbumDeleteModal.vue b/src/components/modal/AlbumDeleteModal.vue
index 636ffb18..d7cc8ef6 100644
--- a/src/components/modal/AlbumDeleteModal.vue
+++ b/src/components/modal/AlbumDeleteModal.vue
@@ -23,70 +23,79 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins, Watch } from "vue-property-decorator";
+import { defineComponent } from "vue";
+
 import NcButton from "@nextcloud/vue/dist/Components/NcButton";
 const NcTextField = () => import("@nextcloud/vue/dist/Components/NcTextField");
 import { showError } from "@nextcloud/dialogs";
 import { getCurrentUser } from "@nextcloud/auth";
 import Modal from "./Modal.vue";
-import GlobalMixin from "../../mixins/GlobalMixin";
 import client from "../../services/DavClient";
 
-@Component({
+export default defineComponent({
+  name: "AlbumDeleteModal",
   components: {
     NcButton,
     NcTextField,
     Modal,
   },
-})
-export default class AlbumDeleteModal extends Mixins(GlobalMixin) {
-  private user: string = "";
-  private name: string = "";
-  private show = false;
 
-  @Emit("close")
-  public close() {
-    this.show = false;
-  }
+  data() {
+    return {
+      show: false,
+      user: "",
+      name: "",
+    };
+  },
 
-  public open() {
-    const user = this.$route.params.user || "";
-    if (this.$route.params.user !== getCurrentUser()?.uid) {
-      showError(
-        this.t("memories", 'Only user "{user}" can delete this album', { user })
-      );
-      return;
-    }
-    this.show = true;
-  }
-
-  @Watch("$route")
-  async routeChange(from: any, to: any) {
-    this.refreshParams();
-  }
+  watch: {
+    $route: async function (from: any, to: any) {
+      this.refreshParams();
+    },
+  },
 
   mounted() {
     this.refreshParams();
-  }
+  },
 
-  public refreshParams() {
-    this.user = this.$route.params.user || "";
-    this.name = this.$route.params.name || "";
-  }
+  methods: {
+    close() {
+      this.show = false;
+      this.$emit("close");
+    },
 
-  public async save() {
-    try {
-      await client.deleteFile(`/photos/${this.user}/albums/${this.name}`);
-      this.$router.push({ name: "albums" });
-      this.close();
-    } catch (error) {
-      console.log(error);
-      showError(
-        this.t("photos", "Failed to delete {name}.", {
-          name: this.name,
-        })
-      );
-    }
-  }
-}
+    open() {
+      const user = this.$route.params.user || "";
+      if (this.$route.params.user !== getCurrentUser()?.uid) {
+        showError(
+          this.t("memories", 'Only user "{user}" can delete this album', {
+            user,
+          })
+        );
+        return;
+      }
+      this.show = true;
+    },
+
+    refreshParams() {
+      this.user = this.$route.params.user || "";
+      this.name = this.$route.params.name || "";
+    },
+
+    async save() {
+      try {
+        await client.deleteFile(`/photos/${this.user}/albums/${this.name}`);
+        this.$router.push({ name: "albums" });
+        this.close();
+      } catch (error) {
+        console.log(error);
+        showError(
+          this.t("photos", "Failed to delete {name}.", {
+            name: this.name,
+          })
+        );
+      }
+    },
+  },
+});
 </script>
\ No newline at end of file
diff --git a/src/components/modal/AlbumForm.vue b/src/components/modal/AlbumForm.vue
index 8df02120..77a2df92 100644
--- a/src/components/modal/AlbumForm.vue
+++ b/src/components/modal/AlbumForm.vue
@@ -97,8 +97,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins, Prop } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent, PropType } from "vue";
 
 import { getCurrentUser } from "@nextcloud/auth";
 import NcButton from "@nextcloud/vue/dist/Components/NcButton";
@@ -112,7 +111,8 @@ import AlbumCollaborators from "./AlbumCollaborators.vue";
 import Send from "vue-material-design-icons/Send.vue";
 import AccountMultiplePlus from "vue-material-design-icons/AccountMultiplePlus.vue";
 
-@Component({
+export default defineComponent({
+  name: "AlbumForm",
   components: {
     NcButton,
     NcLoadingIcon,
@@ -122,35 +122,48 @@ import AccountMultiplePlus from "vue-material-design-icons/AccountMultiplePlus.v
     Send,
     AccountMultiplePlus,
   },
-})
-export default class AlbumForm extends Mixins(GlobalMixin) {
-  @Prop() private album: any;
-  @Prop() private displayBackButton: boolean;
 
-  private showCollaboratorView = false;
-  private albumName = "";
-  private albumLocation = "";
-  private loading = false;
+  props: {
+    album: {
+      type: Object as PropType<any>,
+      default: null,
+    },
+    displayBackButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
-  /**
-   * @return Whether sharing is enabled.
-   */
-  get editMode(): boolean {
-    return Boolean(this.album);
-  }
+  data() {
+    return {
+      showCollaboratorView: false,
+      albumName: "",
+      albumLocation: "",
+      loading: false,
+    };
+  },
 
-  get saveText(): string {
-    return this.editMode
-      ? this.t("photos", "Save")
-      : this.t("photos", "Create album");
-  }
+  computed: {
+    /**
+     * @return Whether sharing is enabled.
+     */
+    editMode(): boolean {
+      return Boolean(this.album);
+    },
 
-  /**
-   * @return Whether sharing is enabled.
-   */
-  get sharingEnabled(): boolean {
-    return window.OC.Share !== undefined;
-  }
+    saveText(): string {
+      return this.editMode
+        ? this.t("photos", "Save")
+        : this.t("photos", "Create album");
+    },
+
+    /**
+     * @return Whether sharing is enabled.
+     */
+    sharingEnabled(): boolean {
+      return window.OC.Share !== undefined;
+    },
+  },
 
   mounted() {
     if (this.editMode) {
@@ -158,76 +171,79 @@ export default class AlbumForm extends Mixins(GlobalMixin) {
       this.albumLocation = this.album.location;
     }
     this.$nextTick(() => {
-      (<any>this.$refs.nameInput).$el.getElementsByTagName("input")[0].focus();
+      (<any>this.$refs.nameInput)?.$el.getElementsByTagName("input")[0].focus();
     });
-  }
+  },
 
-  submit(collaborators = []) {
-    if (this.albumName === "" || this.loading) {
-      return;
-    }
-    if (this.editMode) {
-      this.handleUpdateAlbum();
-    } else {
-      this.handleCreateAlbum(collaborators);
-    }
-  }
-
-  async handleCreateAlbum(collaborators = []) {
-    try {
-      this.loading = true;
-      let album = {
-        basename: this.albumName,
-        filename: `/photos/${getCurrentUser()?.uid}/albums/${this.albumName}`,
-        nbItems: 0,
-        location: this.albumLocation,
-        lastPhoto: -1,
-        date: moment().format("MMMM YYYY"),
-        collaborators,
-      };
-      await dav.createAlbum(album.basename);
-
-      if (this.albumLocation !== "" || collaborators.length !== 0) {
-        album = await dav.updateAlbum(album, {
-          albumName: this.albumName,
-          properties: {
-            location: this.albumLocation,
-            collaborators,
-          },
-        });
+  methods: {
+    submit(collaborators = []) {
+      if (this.albumName === "" || this.loading) {
+        return;
       }
-
-      this.$emit("done", { album });
-    } finally {
-      this.loading = false;
-    }
-  }
-
-  async handleUpdateAlbum() {
-    try {
-      this.loading = true;
-      let album = { ...this.album };
-      if (this.album.basename !== this.albumName) {
-        album = await dav.renameAlbum(this.album, {
-          currentAlbumName: this.album.basename,
-          newAlbumName: this.albumName,
-        });
+      if (this.editMode) {
+        this.handleUpdateAlbum();
+      } else {
+        this.handleCreateAlbum(collaborators);
       }
-      if (this.album.location !== this.albumLocation) {
-        album.location = await dav.updateAlbum(this.album, {
-          albumName: this.albumName,
-          properties: { location: this.albumLocation },
-        });
-      }
-      this.$emit("done", { album });
-    } finally {
-      this.loading = false;
-    }
-  }
+    },
 
-  @Emit("back")
-  back() {}
-}
+    async handleCreateAlbum(collaborators = []) {
+      try {
+        this.loading = true;
+        let album = {
+          basename: this.albumName,
+          filename: `/photos/${getCurrentUser()?.uid}/albums/${this.albumName}`,
+          nbItems: 0,
+          location: this.albumLocation,
+          lastPhoto: -1,
+          date: moment().format("MMMM YYYY"),
+          collaborators,
+        };
+        await dav.createAlbum(album.basename);
+
+        if (this.albumLocation !== "" || collaborators.length !== 0) {
+          album = await dav.updateAlbum(album, {
+            albumName: this.albumName,
+            properties: {
+              location: this.albumLocation,
+              collaborators,
+            },
+          });
+        }
+
+        this.$emit("done", { album });
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async handleUpdateAlbum() {
+      try {
+        this.loading = true;
+        let album = { ...this.album };
+        if (this.album.basename !== this.albumName) {
+          album = await dav.renameAlbum(this.album, {
+            currentAlbumName: this.album.basename,
+            newAlbumName: this.albumName,
+          });
+        }
+        if (this.album.location !== this.albumLocation) {
+          album.location = await dav.updateAlbum(this.album, {
+            albumName: this.albumName,
+            properties: { location: this.albumLocation },
+          });
+        }
+        this.$emit("done", { album });
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    back() {
+      this.$emit("back");
+    },
+  },
+});
 </script>
 <style lang="scss" scoped>
 .album-form {
diff --git a/src/components/modal/AlbumPicker.vue b/src/components/modal/AlbumPicker.vue
index 1e9d1abc..46424ccc 100644
--- a/src/components/modal/AlbumPicker.vue
+++ b/src/components/modal/AlbumPicker.vue
@@ -57,8 +57,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent } from "vue";
+
 import { getCurrentUser } from "@nextcloud/auth";
 
 import AlbumForm from "./AlbumForm.vue";
@@ -74,7 +74,8 @@ import { IAlbum, IPhoto } from "../../types";
 import axios from "@nextcloud/axios";
 import { API } from "../../services/API";
 
-@Component({
+export default defineComponent({
+  name: "AlbumPicker",
   components: {
     AlbumForm,
     Plus,
@@ -83,6 +84,7 @@ import { API } from "../../services/API";
     NcListItem,
     NcLoadingIcon,
   },
+
   filters: {
     toCoverUrl(fileId: string) {
       return getPreviewUrl(
@@ -94,42 +96,48 @@ import { API } from "../../services/API";
       );
     },
   },
-})
-export default class AlbumPicker extends Mixins(GlobalMixin) {
-  private showAlbumCreationForm = false;
-  private albums: IAlbum[] = [];
-  private loadingAlbums = true;
+
+  data() {
+    return {
+      showAlbumCreationForm: false,
+      albums: [] as IAlbum[],
+      loadingAlbums: true,
+    };
+  },
 
   mounted() {
     this.loadAlbums();
-  }
+  },
 
-  albumCreatedHandler() {
-    this.showAlbumCreationForm = false;
-    this.loadAlbums();
-  }
+  methods: {
+    albumCreatedHandler() {
+      this.showAlbumCreationForm = false;
+      this.loadAlbums();
+    },
 
-  getAlbumName(album: IAlbum) {
-    if (album.user === getCurrentUser()?.uid) {
-      return album.name;
-    }
-    return `${album.name} (${album.user})`;
-  }
+    getAlbumName(album: IAlbum) {
+      if (album.user === getCurrentUser()?.uid) {
+        return album.name;
+      }
+      return `${album.name} (${album.user})`;
+    },
 
-  async loadAlbums() {
-    try {
-      const res = await axios.get<IAlbum[]>(API.ALBUM_LIST());
-      this.albums = res.data;
-    } catch (e) {
-      console.error(e);
-    } finally {
-      this.loadingAlbums = false;
-    }
-  }
+    async loadAlbums() {
+      try {
+        const res = await axios.get<IAlbum[]>(API.ALBUM_LIST());
+        this.albums = res.data;
+      } catch (e) {
+        console.error(e);
+      } finally {
+        this.loadingAlbums = false;
+      }
+    },
 
-  @Emit("select")
-  pickAlbum(album: IAlbum) {}
-}
+    pickAlbum(album: IAlbum) {
+      this.$emit("select", album);
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modal/AlbumShareModal.vue b/src/components/modal/AlbumShareModal.vue
index 481a447f..7f2064ba 100644
--- a/src/components/modal/AlbumShareModal.vue
+++ b/src/components/modal/AlbumShareModal.vue
@@ -28,8 +28,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins } from "vue-property-decorator";
-import GlobalMixin from "../../mixins/GlobalMixin";
+import { defineComponent } from "vue";
 
 import NcButton from "@nextcloud/vue/dist/Components/NcButton";
 import NcLoadingIcon from "@nextcloud/vue/dist/Components/NcLoadingIcon";
@@ -39,47 +38,53 @@ import * as dav from "../../services/DavRequests";
 import Modal from "./Modal.vue";
 import AlbumCollaborators from "./AlbumCollaborators.vue";
 
-@Component({
+export default defineComponent({
+  name: "AlbumShareModal",
   components: {
     NcButton,
     NcLoadingIcon,
     Modal,
     AlbumCollaborators,
   },
-})
-export default class AlbumShareModal extends Mixins(GlobalMixin) {
-  private album: any = null;
-  private show = false;
-  private loadingAddCollaborators = false;
 
-  @Emit("close")
-  public close() {
-    this.show = false;
-    this.album = null;
-  }
+  data() {
+    return {
+      album: null as any,
+      show: false,
+      loadingAddCollaborators: false,
+    };
+  },
 
-  public async open() {
-    this.show = true;
-    this.loadingAddCollaborators = true;
-    const user = this.$route.params.user || "";
-    const name = this.$route.params.name || "";
-    this.album = await dav.getAlbum(user, name);
-    this.loadingAddCollaborators = false;
-  }
+  methods: {
+    close() {
+      this.show = false;
+      this.album = null;
+      this.$emit("close");
+    },
 
-  async handleSetCollaborators(collaborators: any[]) {
-    try {
+    async open() {
+      this.show = true;
       this.loadingAddCollaborators = true;
-      await dav.updateAlbum(this.album, {
-        albumName: this.album.basename,
-        properties: { collaborators },
-      });
-      this.close();
-    } catch (error) {
-      console.error(error);
-    } finally {
+      const user = this.$route.params.user || "";
+      const name = this.$route.params.name || "";
+      this.album = await dav.getAlbum(user, name);
       this.loadingAddCollaborators = false;
-    }
-  }
-}
+    },
+
+    async handleSetCollaborators(collaborators: any[]) {
+      try {
+        this.loadingAddCollaborators = true;
+        await dav.updateAlbum(this.album, {
+          albumName: this.album.basename,
+          properties: { collaborators },
+        });
+        this.close();
+      } catch (error) {
+        console.error(error);
+      } finally {
+        this.loadingAddCollaborators = false;
+      }
+    },
+  },
+});
 </script>
\ No newline at end of file