More ts migration

src/components/Folder.vue

@@ -17,7 +17,7 @@
         </div>
 
         <div class="previews">
-            <div class="img-outer" v-for="info of previewFileInfos">
+            <div class="img-outer" v-for="info of previewFileInfos" :key="info.fileid">
                 <img
                     :key="'fpreview-' + info.fileid"
                     :src="getPreviewUrl(info.fileid, info.etag)"
@@ -32,68 +32,58 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { IFileInfo, IFolder } from '../types';
+
 import * as dav from "../services/DavRequests";
 import constants from "../mixins/constants"
 import { getPreviewUrl } from "../services/FileUtils";
 
-export default {
-    name: 'Folder',
-    props: {
-        data: {
-            type: Object,
-            required: true
-        },
-        rowHeight: {
-            type: Number,
-            required: true,
-        }
-    },
-    data() {
-        return {
-            c: constants,
-            previewFileInfos: [],
-        }
-    },
+@Component({})
+export default class Folder extends Vue {
+    @Prop() data: IFolder;
+    @Prop() rowHeight: number;
+
+    private readonly c = constants
+    private previewFileInfos: IFileInfo[] = [];
+
+    /** Passthrough */
+    private getPreviewUrl = getPreviewUrl;
+
     mounted() {
         this.refreshPreviews();
-    },
-    watch: {
-        data: {
-            handler() {
-                this.refreshPreviews();
-            },
-        },
-    },
-    methods: {
-        /** Passthrough */
-        getPreviewUrl: getPreviewUrl,
+    }
 
-        /** Refresh previews */
-        refreshPreviews() {
-            if (!this.data.previewFileInfos) {
-                const folderPath = this.data.path.split('/').slice(3).join('/');
-                dav.getFolderPreviewFileIds(folderPath, 4).then(fileInfos => {
-                    fileInfos = fileInfos.filter(f => f.hasPreview);
-                    fileInfos.forEach(f => f.flag = 0);
-                    if (fileInfos.length > 0 && fileInfos.length < 4) {
-                        fileInfos = [fileInfos[0]];
-                    }
-                    this.data.previewFileInfos = fileInfos;
-                    this.previewFileInfos = fileInfos;
-                }).catch(() => {
-                    this.data.previewFileInfos = [];
-                    this.previewFileInfos = [];
-                });
-            } else {
-                this.previewFileInfos = this.data.previewFileInfos;
-            }
-        },
+    @Watch('data')
+    dataChanged() {
+        this.refreshPreviews();
+    }
 
-        /** Open folder */
-        openFolder(id) {
-            this.$router.push({ name: 'folders', params: { id } });
-        },
+    /** Refresh previews */
+    refreshPreviews() {
+        if (!this.data.previewFileInfos) {
+            const folderPath = this.data.path.split('/').slice(3).join('/');
+            dav.getFolderPreviewFileIds(folderPath, 4).then(fileInfos => {
+                fileInfos = fileInfos.filter(f => f.hasPreview);
+                fileInfos.forEach(f => f.flag = 0);
+                if (fileInfos.length > 0 && fileInfos.length < 4) {
+                    fileInfos = [fileInfos[0]];
+                }
+                this.data.previewFileInfos = fileInfos;
+                this.previewFileInfos = fileInfos;
+            }).catch(() => {
+                this.data.previewFileInfos = [];
+                this.previewFileInfos = [];
+            });
+        } else {
+            this.previewFileInfos = this.data.previewFileInfos;
+        }
+    }
+
+    /** Open folder */
+    openFolder(id) {
+        this.$router.push({ name: 'folders', params: { id } });
     }
 }
 </script>

src/components/Settings.vue

@@ -39,24 +39,23 @@ input[type=text] {
 }
 </style>
 
-<script>
+<script lang="ts">
+import { Component, Mixins, Vue } from 'vue-property-decorator';
 import UserConfig from '../mixins/UserConfig'
 
-export default {
-    name: 'Settings',
+@Component({
     mixins: [
         UserConfig,
     ],
-
-    methods: {
-        async updateAll() {
-            const res = await this.updateSetting('timelinePath');
-            if (res.status === 200) {
-                window.location.reload();
-            } else {
-                alert('Error updating settings');
-            }
-        },
-    },
+})
+export default class Settings extends Mixins(UserConfig) {
+    async updateAll() {
+        const res = await this.updateSetting('timelinePath');
+        if (res.status === 200) {
+            window.location.reload();
+        } else {
+            alert('Error updating settings');
+        }
+    }
 }
 </script>

src/components/Timeline.vue

@@ -193,8 +193,8 @@ export default class Timeline extends Vue {
         this.scrollPositionChange();
     }
 
-    @Watch('route')
-    routeChange(from, to) {
+    @Watch('$route')
+    routeChange(from: any, to: any) {
         this.resetState();
         this.fetchDays();
     };

src/mixins/UserConfig.ts

@@ -20,6 +20,7 @@
  *
  */
 
+import { Component, Vue } from 'vue-property-decorator';
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
@@ -27,34 +28,30 @@ import axios from '@nextcloud/axios'
 
 const eventName = 'memories:user-config-changed'
 
-export default {
-    data() {
-        return {
-            timelinePath: loadState('memories', 'timelinePath') || '',
-        }
-    },
+@Component
+export default class MyMixin extends Vue {
+    timelinePath = loadState('memories', 'timelinePath') || '';
 
     created() {
         subscribe(eventName, this.updateLocalSetting)
-    },
+    }
 
     beforeDestroy() {
         unsubscribe(eventName, this.updateLocalSetting)
-    },
+    }
 
-    methods: {
-        updateLocalSetting({ setting, value }) {
-            this[setting] = value
-        },
-        async updateSetting(setting) {
-            const value = this[setting]
-            // Long time save setting
-            const res = await axios.put(generateUrl('apps/memories/api/config/' + setting), {
-                value: value.toString(),
-            })
-            // Visible elements update setting
-            emit(eventName, { setting, value })
-            return res;
-        },
-    },
+    updateLocalSetting({ setting, value }) {
+        this[setting] = value
+    }
+
+    async updateSetting(setting: string) {
+        const value = this[setting]
+        // Long time save setting
+        const res = await axios.put(generateUrl('apps/memories/api/config/' + setting), {
+            value: value.toString(),
+        })
+        // Visible elements update setting
+        emit(eventName, { setting, value })
+        return res;
+    }
 }

src/types.ts

@@ -2,6 +2,8 @@ export type IFileInfo = {
     fileid: number;
     filename: string;
     etag: string;
+    hasPreview: boolean;
+    flag?: number;
 }
 
 export type IDay = {
@@ -34,6 +36,13 @@ export type IPhoto = {
     isfavorite?: boolean;
 }
 
+export interface IFolder extends IPhoto {
+    /** Path to folder */
+    path: string;
+    /** FileInfos for preview images */
+    previewFileInfos?: IFileInfo[];
+}
+
 export type IRow = {
     /** Vue Recycler identifier */
     id?: number;