web/satellite: fixing linting errors in the FileEntry component

Transitioned all functions into typescript code and changed the vue component to be a class component.

Change-Id: If804c8c58399c304c416f2e53672fa6f9c8bbffe

web/satellite/src/components/browser/FileEntry.vue

@@ -1,102 +1,11 @@
-<script lang="ts"> /* eslint-disable */ </script>
-
 // Copyright (C) 2021 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-<style>
-/* stylelint-disable */
-
-a {
-    text-decoration: none !important;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-}
-
-.table td,
-.table th {
-    padding: 16px 16px 16px 0 !important;
-    white-space: nowrap;
-    vertical-align: middle !important;
-}
-
-.table-hover tbody tr:hover {
-    background-color: #f9f9f9;
-}
-
-.selected-row {
-    background-color: #f4f5f7;
-}
-
-.btn-actions {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
-.dropdown-menu {
-    padding: 0;
-}
-
-.dropdown-item {
-    font-size: 14px;
-    font-family: 'Inter';
-}
-
-.dropdown-item svg {
-    color: #768394;
-}
-
-.dropdown-item:focus,
-.dropdown-item:hover {
-    color: #1b2533;
-    background-color: #f4f5f7;
-    font-weight: bold;
-}
-
-.dropdown-item:focus svg,
-.dropdown-item:hover svg {
-    color: #0068dc;
-}
-
-.deletion-confirmation {
-    font-size: 14px;
-    font-weight: bold;
-}
-
-.bi-trash {
-    cursor: pointer;
-}
-
-.file-name {
-    margin-left: 5px;
-    cursor: pointer;
-    color: #000;
-}
-
-.file-name:hover {
-    color: #376fff;
-}
-
-.file-name:hover svg path {
-    fill: #376fff;
-}
-
-.folder-name:hover {
-    color: #376fff;
-}
-
-.folder-name:hover svg path {
-    fill: #376fff;
-}
-</style>
-
 <template>
     <tr
         scope="row"
         :class="{ 'selected-row': isFileSelected }"
-        @click="selectFile"
+        @click.stop="selectFile"
     >
         <td class="w-50" data-ls-disabled>
             <span v-if="fileTypeIsFolder" class="folder-name">
@@ -114,7 +23,7 @@ a {
                     />
                 </svg>
 
-                <span @click="fileClick">
+                <span @click.stop="fileClick">
                     <router-link :to="link">
                         <a
                             href="javascript:null"
@@ -131,7 +40,7 @@ a {
                 v-else
                 class="file-name"
                 aria-roledescription="file"
-                @click="openModal"
+                @click.stop="openModal"
             >
                 <svg
                     width="1.5em"
@@ -176,7 +85,7 @@ a {
                         aria-haspopup="true"
                         aria-expanded="false"
                         aria-roledescription="dropdown"
-                        @click="toggleDropdown"
+                        @click.stop="toggleDropdown"
                     >
                         <svg
                             width="4"
@@ -201,8 +110,9 @@ a {
                     </button>
                     <div v-if="dropdownOpen" class="dropdown-menu shadow show">
                         <button
+                            type="button"
                             class="dropdown-item action p-3"
-                            @click="openModal"
+                            @click.stop="openModal"
                         >
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
@@ -222,8 +132,9 @@ a {
                             Details
                         </button>
                         <button
+                            type="button"
                             class="dropdown-item action p-3"
-                            @click="download"
+                            @click.stop="download"
                         >
                             <svg
                                 width="1.2em"
@@ -245,8 +156,9 @@ a {
                             Download
                         </button>
                         <button
+                            type="button"
                             class="dropdown-item action p-3"
-                            @click="share"
+                            @click.stop="share"
                         >
                             <svg
                                 width="1.5em"
@@ -267,8 +179,9 @@ a {
                         </button>
                         <button
                             v-if="!deleteConfirmation"
+                            type="button"
                             class="dropdown-item action p-3"
-                            @click="confirmDeletion"
+                            @click.stop="confirmDeletion"
                         >
                             <svg
                                 width="1.5em"
@@ -291,8 +204,9 @@ a {
                             </p>
                             <div class="d-flex">
                                 <button
+                                    type="button"
                                     class="dropdown-item trash p-3 action"
-                                    @click="finalDelete"
+                                    @click.stop="finalDelete"
                                 >
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -313,8 +227,9 @@ a {
                                     Yes
                                 </button>
                                 <button
+                                    type="button"
                                     class="dropdown-item p-3 action"
-                                    @click="cancelDeletion"
+                                    @click.stop="cancelDeletion"
                                 >
                                     <svg
                                         width="1.5em"
@@ -350,7 +265,7 @@ a {
                         aria-haspopup="true"
                         aria-expanded="false"
                         aria-roledescription="dropdown"
-                        @click="toggleDropdown"
+                        @click.stop="toggleDropdown"
                     >
                         <svg
                             width="4"
@@ -376,8 +291,9 @@ a {
                     <div v-if="dropdownOpen" class="dropdown-menu shadow show">
                         <button
                             v-if="!deleteConfirmation"
+                            type="button"
                             class="dropdown-item action p-3"
-                            @click="confirmDeletion"
+                            @click.stop="confirmDeletion"
                         >
                             <svg
                                 width="1.5em"
@@ -400,8 +316,9 @@ a {
                             </p>
                             <div class="d-flex">
                                 <button
+                                    type="button"
                                     class="dropdown-item trash p-3 action"
-                                    @click="finalDelete"
+                                    @click.stop="finalDelete"
                                 >
                                     <svg
                                         xmlns="http://www.w3.org/2000/svg"
@@ -422,8 +339,9 @@ a {
                                     Yes
                                 </button>
                                 <button
+                                    type="button"
                                     class="dropdown-item p-3 action"
-                                    @click="cancelDeletion"
+                                    @click.stop="cancelDeletion"
                                 >
                                     <svg
                                         width="1.5em"
@@ -448,31 +366,55 @@ a {
     </tr>
 </template>
 
-<script>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import type { BrowserFile } from "@/types/browser.ts";
 import prettyBytes from "pretty-bytes";
 
-export default {
+// @vue/component
-    props: ["path", "file"],
+@Component
-    data: () => ({
+export default class FileEntry extends Vue {
-        deleteConfirmation: false
+    public deleteConfirmation = false;
-    }),
 
-    computed: {
+    @Prop({default: ""})
-        filename() {
+    private readonly path: string;
+    @Prop()
+    private readonly file: BrowserFile;
+
+    /**
+     * Return the name of file/folder formatted.
+     */
+    public get filename(): string {
         return this.file.Key.length > 25
             ? this.file.Key.slice(0, 25) + "..."
             : this.file.Key;
-        },
+    }
-        size() {
+
+    /**
+     * Return the size of the file formatted.
+     */
+    public get size(): string {
         return prettyBytes(this.file.Size);
-        },
+    }
-        uploadDate() {
+
+    /**
+     * Return the upload date of the file formatted.
+     */
+    public get uploadDate(): string {
         return this.file.LastModified.toLocaleString().split(",")[0];
-        },
+    }
-        dropdownOpen() {
+
+    /**
+     * Check with the store to see if the dropdown is open for the current file/folder.
+     */
+    public get dropdownOpen(): boolean {
         return this.$store.state.files.openedDropdown === this.file.Key;
-        },
+    }
-        link() {
+
+    /**
+     * Return a link to the current folder for navigation.
+     */
+    public get link(): string {
         const browserRoot = this.$store.state.files.browserRoot;
         const pathAndKey = this.$store.state.files.path + this.file.Key;
         const url =
@@ -480,9 +422,13 @@ export default {
                 ? browserRoot + pathAndKey + "/"
                 : browserRoot;
         return url;
-        },
+    }
-        isFileSelected() {
+
-            return (
+    /**
+     * Return a boolean signifying whether the current file/folder is selected.
+     */
+    public get isFileSelected(): boolean {
+        return !!(
             this.$store.state.files.selectedAnchorFile === this.file ||
             this.$store.state.files.selectedFiles.find(
                 (file) => file === this.file
@@ -491,34 +437,50 @@ export default {
                 (file) => file === this.file
             )
         );
-        },
+    }
-        fileTypeIsFolder() {
+
+    /**
+     * Return a boolean signifying whether the current file/folder is a folder.
+     */
+    public get fileTypeIsFolder(): boolean {
         return this.file.type === "folder";
-        },
+    }
-        fileTypeIsFile() {
+
+    /**
+     * Return a boolean signifying whether the current file/folder is a folder.
+     */
+    public get fileTypeIsFile(): boolean {
         return this.file.type === "file";
     }
-    },
 
-    methods: {
+    /**
-        openModal(event) {
+     * Open the modal for the current file.
-            event.stopPropagation();
+     */
+    public openModal(): void {
         this.$store.commit("files/openModal", this.path + this.file.Key);
         this.$store.dispatch("files/closeDropdown");
-        },
+    }
 
-        loadingSpinner() {
+    /**
+     * Return a boolean signifying whether the current file/folder is in the process of being deleted, therefore a spinner shoud be shown.
+     */
+    public loadingSpinner(): boolean {
         return !!this.$store.state.files.filesToBeDeleted.find(
             (file) => file === this.file
         );
-        },
+    }
-        fileClick(event) {
-            event.stopPropagation();
-            this.$store.dispatch("files/updateCreateFolderInputShow", false);
-        },
-        selectFile(event) {
-            event.stopPropagation();
 
+    /**
+     * Hide the folder creation input on navigation due to folder click.
+     */
+    public fileClick(): void {
+        this.$store.dispatch("files/updateCreateFolderInputShow", false);
+    }
+
+    /**
+     * Select the current file/folder whether it be a click, click + shiftKey, click + metaKey or ctrlKey, or unselect the rest.
+     */
+    public selectFile(event: KeyboardEvent): void {
         if (this.$store.state.files.openedDropdown) {
             this.$store.dispatch("files/closeDropdown");
         }
@@ -530,8 +492,12 @@ export default {
         } else {
             this.setSelectedFile(false);
         }
-        },
+    }
-        setSelectedFile(command) {
+
+    /**
+     * Set the selected file/folder in the store.
+     */
+    private setSelectedFile(command: boolean): void {
         /* this function is responsible for selecting and unselecting a file on file click or [CMD + click] AKA command. */
 
         const files = [
@@ -604,8 +570,12 @@ export default {
             this.$store.dispatch("files/updateShiftSelectedFiles", []);
             this.$store.dispatch("files/updateSelectedFiles", []);
         }
-        },
+    }
-        setShiftSelectedFiles() {
+
+    /**
+     * Set files/folders selected using shift key in the store.
+     */
+    private setShiftSelectedFiles(): void {
         /* this function is responsible for selecting all files from selectedAnchorFile to the file that was selected with [shift + click] */
 
         const files = this.$store.getters["files/sortedFiles"];
@@ -649,20 +619,24 @@ export default {
                         ) && file !== selectedAnchorFile
                 )
         );
-        },
+    }
-        async share(event) {
-            event.stopPropagation();
 
+    /**
+     * Open the share modal for the current file.
+     */
+    public async share(): Promise<void> {
         this.$store.dispatch("files/closeDropdown");
 
         this.$store.commit(
             "files/setFileShareModal",
             this.path + this.file.Key
         );
-        },
+    }
-        toggleDropdown(event) {
-            event.stopPropagation();
 
+    /**
+     * Toggle the dropdown for the current file/folder.
+     */
+    public toggleDropdown(): void {
         if (this.$store.state.files.openedDropdown === this.file.Key) {
             this.$store.dispatch("files/closeDropdown");
         } else {
@@ -671,20 +645,28 @@ export default {
 
         // remove the dropdown delete confirmation
         this.deleteConfirmation = false;
-        },
+    }
-        download(event) {
-            event.stopPropagation();
 
+    /**
+     * Download the current file.
+     */
+    public download(): void {
         this.$store.dispatch("files/download", this.file);
         this.$store.dispatch("files/closeDropdown");
         this.deleteConfirmation = false;
-        },
+    }
-        confirmDeletion(event) {
+
-            event.stopPropagation();
+    /**
+     * Set the data property deleteConfirmation to true, signifying that this user does in fact want the current selected file/folder.
+     */
+    public confirmDeletion(): void {
         this.deleteConfirmation = true;
-        },
+    }
-        async finalDelete(event) {
+
-            event.stopPropagation();
+    /**
+     * Delete the selected file/folder.
+     */
+    public async finalDelete(): Promise<void> {
         this.$store.dispatch("files/closeDropdown");
         this.$store.dispatch("files/addFileToBeDeleted", this.file);
 
@@ -703,12 +685,101 @@ export default {
         await this.$store.dispatch("files/list");
         this.$store.dispatch("files/removeFileFromToBeDeleted", this.file);
         this.deleteConfirmation = false;
-        },
+    }
-        cancelDeletion(event) {
+
-            event.stopPropagation();
+    /**
+     * Abort the deletion of the current file/folder.
+     */
+    public cancelDeletion(): void {
         this.$store.dispatch("files/closeDropdown");
         this.deleteConfirmation = false;
     }
-    }
+}
-};
 </script>
+
+<style>
+a {
+    text-decoration: none !important;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.table td,
+.table th {
+    padding: 16px 16px 16px 0 !important;
+    white-space: nowrap;
+    vertical-align: middle !important;
+}
+
+.table-hover tbody tr:hover {
+    background-color: #f9f9f9;
+}
+
+.selected-row {
+    background-color: #f4f5f7;
+}
+
+.btn-actions {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.dropdown-menu {
+    padding: 0;
+}
+
+.dropdown-item {
+    font-size: 14px;
+    font-family: 'Inter', sans-serif;
+}
+
+.dropdown-item svg {
+    color: #768394;
+}
+
+.dropdown-item:focus,
+.dropdown-item:hover {
+    color: #1b2533;
+    background-color: #f4f5f7;
+    font-weight: bold;
+}
+
+.dropdown-item:focus svg,
+.dropdown-item:hover svg {
+    color: #0068dc;
+}
+
+.deletion-confirmation {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.bi-trash {
+    cursor: pointer;
+}
+
+.file-name {
+    margin-left: 5px;
+    cursor: pointer;
+    color: #000;
+}
+
+.file-name:hover {
+    color: #376fff;
+}
+
+.file-name:hover svg path {
+    fill: #376fff;
+}
+
+.folder-name:hover {
+    color: #376fff;
+}
+
+.folder-name:hover svg path {
+    fill: #376fff;
+}
+</style>

web/satellite/src/types/browser.ts

@@ -7,5 +7,6 @@
 export interface BrowserFile extends File {
   Key: string;
   LastModified: Date;
+  Size: number;
   type: string;
 }