web/satellite: VAlidationMessage, TableItem and TablePagination migrated to use composition api

Change-Id: Id02dd4f32fdd9924a2528a7363682fb6e1cb7afa

web/satellite/src/components/common/TableItem.vue

@@ -35,9 +35,7 @@
     </tr>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
+<script setup lang="ts">
 import VTableCheckbox from '@/components/common/VTableCheckbox.vue';
 import BucketGuide from '@/components/objects/BucketGuide.vue';
 import MiddleTruncate from '@/components/browser/MiddleTruncate.vue';
@@ -46,54 +44,46 @@ import FolderIcon from '@/../static/images/objects/folder.svg';
 import BucketIcon from '@/../static/images/objects/bucketIcon.svg';
 import FileIcon from '@/../static/images/objects/file.svg';
 
-// @vue/component
-@Component({
-    components: {
-        MiddleTruncate,
-        VTableCheckbox,
-        BucketGuide,
-        BucketIcon,
-        FileIcon,
-        FolderIcon,
-    },
-})
-export default class TableItem extends Vue {
-    @Prop({ default: false })
-    public readonly selectDisabled: boolean;
-    @Prop({ default: false })
-    public readonly selected: boolean;
-    @Prop({ default: false })
-    public readonly selectable: boolean;
-    @Prop({ default: false })
-    public readonly showGuide: boolean;
-    @Prop({ default: 'none' })
-    private readonly tableType: string;
-    @Prop({ default: () => {} })
-    public readonly item: object;
-    @Prop({ default: null })
-    public readonly onClick: (data?: unknown) => void;
-    // click event for the first cell of this item.
-    @Prop({ default: null })
-    public readonly onPrimaryClick: (data?: unknown) => void;
-    @Prop({ default: null })
-    public readonly hideGuide: () => void;
+const props = withDefaults(defineProps<{
+    selectDisabled?: boolean;
+    selected?: boolean;
+    selectable?: boolean;
+    showGuide?: boolean;
+    tableType?: string;
+    item?: object;
+    onClick?: (data?: unknown) => void;
+    // event for the first cell of this item.
+    onPrimaryClick?: (data?: unknown) => void;
+    hideGuide?: () => void;
+}>(), {
+    selectDisabled: false,
+    selected: false,
+    selectable: false,
+    showGuide: false,
+    tableType: 'none',
+    item: () => ({}),
+    onClick: () => {},
+    onPrimaryClick: () => {},
+    hideGuide: () => {},
+});
 
-    public onChange(value: boolean): void {
-        this.$emit('selectChange', value);
-    }
+const emit = defineEmits(['selectChange']);
 
-    public showBucketGuide(index: number): boolean {
-        return (this.tableType.toLowerCase() === 'bucket') && (index === 0) && this.showGuide;
-    }
+function onChange(value: boolean): void {
+    emit('selectChange', value);
+}
 
-    public cellContentClicked(cellIndex: number, event: Event) {
-        if (cellIndex === 0 && this.onPrimaryClick) {
-            this.onPrimaryClick(event);
-            return;
-        }
-        // trigger default item onClick instead.
-        this.onClick();
+function showBucketGuide(index: number): boolean {
+    return (props.tableType.toLowerCase() === 'bucket') && (index === 0) && props.showGuide;
+}
+
+function cellContentClicked(cellIndex: number, event: Event) {
+    if (cellIndex === 0 && props.onPrimaryClick) {
+        props.onPrimaryClick(event);
+        return;
     }
+    // trigger default item onClick instead.
+    props.onClick();
 }
 </script>
 

web/satellite/src/components/common/TablePagination.vue

@@ -15,88 +15,77 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, ref } from 'vue';
 
 import { OnPageClickCallback } from '@/types/pagination';
 
 import PaginationRightIcon from '@/../static/images/common/tablePaginationArrowRight.svg';
 
-// @vue/component
-@Component({
-    components: {
-        PaginationRightIcon,
-    },
-})
-export default class TablePagination extends Vue {
-    private currentPageNumber = 1;
-    public isLoading = false;
+const props = withDefaults(defineProps<{
+    totalPageCount?: number;
+    limit?: number;
+    totalItemsCount?: number;
+    onPageClickCallback?: OnPageClickCallback;
+}>(), {
+    totalPageCount: 0,
+    limit: 0,
+    totalItemsCount: 0,
+    onPageClickCallback: () => () => new Promise(() => false),
+});
 
-    @Prop({ default: 0 })
-    private readonly totalPageCount: number;
-    @Prop({ default: 0 })
-    private readonly limit: number;
-    @Prop({ default: 0 })
-    private readonly totalItemsCount: number;
-    @Prop({ default: () => () => new Promise(() => false) })
-    private readonly onPageClickCallback: OnPageClickCallback;
+const currentPageNumber = ref<number>(1);
+const isLoading = ref<boolean>(false);
 
-    public get label(): string {
-        const currentMaxPage = this.currentPageNumber * this.limit > this.totalItemsCount ?
-            this.totalItemsCount
-            : this.currentPageNumber * this.limit;
-        return `${this.currentPageNumber * this.limit - this.limit + 1} - ${currentMaxPage} of ${this.totalItemsCount}`;
+const label = computed((): string => {
+    const currentMaxPage = currentPageNumber.value * props.limit > props.totalItemsCount ?
+        props.totalItemsCount
+        : currentPageNumber.value * props.limit;
+    return `${currentPageNumber.value * props.limit - props.limit + 1} - ${currentMaxPage} of ${props.totalItemsCount}`;
+});
+
+const isFirstPage = computed((): boolean => {
+    return currentPageNumber.value === 1;
+});
+
+const isLastPage = computed((): boolean => {
+    return currentPageNumber.value === props.totalPageCount;
+});
+
+/**
+ * nextPage fires after 'next' arrow click.
+ */
+async function nextPage(): Promise<void> {
+    if (isLastPage.value || isLoading.value) {
+        return;
     }
 
-    /**
-     * Indicates if current page is first.
-     */
-    public get isFirstPage(): boolean {
-        return this.currentPageNumber === 1;
+    isLoading.value = true;
+    await props.onPageClickCallback(currentPageNumber.value + 1);
+    incrementCurrentPage();
+    isLoading.value = false;
+}
+
+/**
+ * prevPage fires after 'previous' arrow click.
+ */
+async function prevPage(): Promise<void> {
+    if (isFirstPage.value || isLoading.value) {
+        return;
     }
 
-    /**
-     * Indicates if current page is last.
-     */
-    public get isLastPage(): boolean {
-        return this.currentPageNumber === this.totalPageCount;
-    }
+    isLoading.value = true;
+    await props.onPageClickCallback(currentPageNumber.value - 1);
+    decrementCurrentPage();
+    isLoading.value = false;
+}
 
-    /**
-     * nextPage fires after 'next' arrow click.
-     */
-    public async nextPage(): Promise<void> {
-        if (this.isLastPage || this.isLoading) {
-            return;
-        }
+function incrementCurrentPage(): void {
+    currentPageNumber.value++;
+}
 
-        this.isLoading = true;
-        await this.onPageClickCallback(this.currentPageNumber + 1);
-        this.incrementCurrentPage();
-        this.isLoading = false;
-    }
-
-    /**
-     * prevPage fires after 'previous' arrow click.
-     */
-    public async prevPage(): Promise<void> {
-        if (this.isFirstPage || this.isLoading) {
-            return;
-        }
-
-        this.isLoading = true;
-        await this.onPageClickCallback(this.currentPageNumber - 1);
-        this.decrementCurrentPage();
-        this.isLoading = false;
-    }
-
-    private incrementCurrentPage(): void {
-        this.currentPageNumber++;
-    }
-
-    private decrementCurrentPage(): void {
-        this.currentPageNumber--;
-    }
+function decrementCurrentPage(): void {
+    currentPageNumber.value--;
 }
 </script>
 

web/satellite/src/components/common/ValidationMessage.vue

@@ -11,27 +11,20 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
+<script setup lang="ts">
 import ErrorIcon from '@/../static/images/common/errorNotice.svg';
 
-// @vue/component
-@Component({
-    components: {
-        ErrorIcon,
-    },
-})
-export default class ValidationMessage extends Vue {
-    @Prop({ default: 'Valid!' })
-    protected readonly successMessage: string;
-    @Prop({ default: 'Invalid. Please Try again' })
-    protected readonly errorMessage: string;
-    @Prop({ default: false })
-    protected readonly isValid: boolean;
-    @Prop({ default: false })
-    protected readonly showMessage: boolean;
-}
+const props = withDefaults(defineProps<{
+    successMessage?: string;
+    errorMessage?: string;
+    isValid?: boolean;
+    showMessage?: boolean;
+}>(), {
+    successMessage: 'Valid!',
+    errorMessage: 'Invalid. Please try again',
+    isValid: false,
+    showMessage: false,
+});
 </script>
 
 <style scoped lang="scss">

web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMemberListItem.spec.ts.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` should render correctly 1`] = `<table-item-stub selectdisabled="true" selectable="true" tabletype="none" item="[object Object]" onclick="[Function]" class="owner"></table-item-stub>`;
+exports[` should render correctly 1`] = `
+<table-item-stub item="[object Object]" selectable="true" select-disabled="true" on-click="function (_) {
+        return _vm.$emit(&quot;memberClick&quot;, _vm.itemData)
+      }" class="owner"></table-item-stub>
+`;
 
-exports[` should render correctly with item row highlighted 1`] = `<table-item-stub selectdisabled="true" selected="true" selectable="true" tabletype="none" item="[object Object]" onclick="[Function]" class="owner"></table-item-stub>`;
+exports[` should render correctly with item row highlighted 1`] = `
+<table-item-stub item="[object Object]" selectable="true" select-disabled="true" selected="true" on-click="function (_) {
+        return _vm.$emit(&quot;memberClick&quot;, _vm.itemData)
+      }" class="owner"></table-item-stub>
+`;