web/satellite: VAlidationMessage, TableItem and TablePagination migrated to use composition api
Change-Id: Id02dd4f32fdd9924a2528a7363682fb6e1cb7afa
This commit is contained in:
parent
d069045058
commit
e54d9b1c6a
@ -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);
|
||||
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.
|
||||
this.onClick();
|
||||
}
|
||||
props.onClick();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -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}`;
|
||||
});
|
||||
|
||||
/**
|
||||
* Indicates if current page is first.
|
||||
*/
|
||||
public get isFirstPage(): boolean {
|
||||
return this.currentPageNumber === 1;
|
||||
}
|
||||
const isFirstPage = computed((): boolean => {
|
||||
return currentPageNumber.value === 1;
|
||||
});
|
||||
|
||||
/**
|
||||
* Indicates if current page is last.
|
||||
*/
|
||||
public get isLastPage(): boolean {
|
||||
return this.currentPageNumber === this.totalPageCount;
|
||||
}
|
||||
const isLastPage = computed((): boolean => {
|
||||
return currentPageNumber.value === props.totalPageCount;
|
||||
});
|
||||
|
||||
/**
|
||||
/**
|
||||
* nextPage fires after 'next' arrow click.
|
||||
*/
|
||||
public async nextPage(): Promise<void> {
|
||||
if (this.isLastPage || this.isLoading) {
|
||||
async function nextPage(): Promise<void> {
|
||||
if (isLastPage.value || isLoading.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoading = true;
|
||||
await this.onPageClickCallback(this.currentPageNumber + 1);
|
||||
this.incrementCurrentPage();
|
||||
this.isLoading = false;
|
||||
}
|
||||
isLoading.value = true;
|
||||
await props.onPageClickCallback(currentPageNumber.value + 1);
|
||||
incrementCurrentPage();
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* prevPage fires after 'previous' arrow click.
|
||||
*/
|
||||
public async prevPage(): Promise<void> {
|
||||
if (this.isFirstPage || this.isLoading) {
|
||||
async function prevPage(): Promise<void> {
|
||||
if (isFirstPage.value || isLoading.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoading = true;
|
||||
await this.onPageClickCallback(this.currentPageNumber - 1);
|
||||
this.decrementCurrentPage();
|
||||
this.isLoading = false;
|
||||
}
|
||||
isLoading.value = true;
|
||||
await props.onPageClickCallback(currentPageNumber.value - 1);
|
||||
decrementCurrentPage();
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
private incrementCurrentPage(): void {
|
||||
this.currentPageNumber++;
|
||||
}
|
||||
function incrementCurrentPage(): void {
|
||||
currentPageNumber.value++;
|
||||
}
|
||||
|
||||
private decrementCurrentPage(): void {
|
||||
this.currentPageNumber--;
|
||||
}
|
||||
function decrementCurrentPage(): void {
|
||||
currentPageNumber.value--;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -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">
|
||||
|
@ -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("memberClick", _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("memberClick", _vm.itemData)
|
||||
}" class="owner"></table-item-stub>
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user