web/satellite: VSearchAlternateStyling, VTableCheckbox migrated to use composition api
tsc warnings fixed for defineProps and hooks Change-Id: I09cebfc3a6a63e59465bb01f28a7de536254e78a
This commit is contained in:
NickolaiYurchenko
Nikolay Yurchenko
parent
e76915421d
commit
3e5b527567
@ -57,7 +57,7 @@ import { useRouter, useStore } from '@/utils/hooks';
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
|
||||
const emit = defineEmits(['onUpdate']);
|
||||
const emit = defineEmits(['onUpdate', 'bucketClick']);
|
||||
|
||||
/**
|
||||
* Retrieves the current bucket name from the store.
|
||||
|
||||
@ -269,7 +269,7 @@ const filesUploading = computed((): string => {
|
||||
/**
|
||||
* Return up to five files currently being uploaded for display purposes.
|
||||
*/
|
||||
const formattedFilesUploading = computed((): BrowserFile[] => {
|
||||
const formattedFilesUploading = computed((): string => {
|
||||
if (filesUploading.value.length > 5) {
|
||||
return filesUploading.value.slice(0, 5);
|
||||
}
|
||||
@ -280,7 +280,7 @@ const formattedFilesUploading = computed((): BrowserFile[] => {
|
||||
/**
|
||||
* Return the text of how many files in total are being uploaded to be displayed to give users more context.
|
||||
*/
|
||||
const formattedFilesWaitingToBeUploaded = computed((): BrowserFile[] => {
|
||||
const formattedFilesWaitingToBeUploaded = computed((): string => {
|
||||
let file = 'file';
|
||||
|
||||
if (filesUploading.value.length > 1) {
|
||||
|
||||
@ -312,10 +312,10 @@ const store = useStore();
|
||||
const notify = useNotify();
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps({
|
||||
path: { type: String, default: '' },
|
||||
file: { type: Object as BrowserFile, default: undefined },
|
||||
});
|
||||
const props = defineProps<{
|
||||
path: string,
|
||||
file: BrowserFile,
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['onUpdate']);
|
||||
|
||||
@ -324,28 +324,28 @@ const deleteConfirmation = ref(false);
|
||||
/**
|
||||
* Return the size of the file formatted.
|
||||
*/
|
||||
const size: string = computed((): string => {
|
||||
const size = computed((): string => {
|
||||
return prettyBytes(props.file.Size);
|
||||
});
|
||||
|
||||
/**
|
||||
* Return the upload date of the file formatted.
|
||||
*/
|
||||
const uploadDate: string = computed((): string => {
|
||||
const uploadDate = computed((): string => {
|
||||
return props.file.LastModified.toLocaleString().split(',')[0];
|
||||
});
|
||||
|
||||
/**
|
||||
* Check with the store to see if the dropdown is open for the current file/folder.
|
||||
*/
|
||||
const dropdownOpen: string = computed((): string => {
|
||||
const dropdownOpen = computed((): boolean => {
|
||||
return store.state.files.openedDropdown === props.file.Key;
|
||||
});
|
||||
|
||||
/**
|
||||
* Return a link to the current folder for navigation.
|
||||
*/
|
||||
const link: string = computed((): string => {
|
||||
const link = computed((): string => {
|
||||
const browserRoot = store.state.files.browserRoot;
|
||||
const pathAndKey = store.state.files.path + props.file.Key;
|
||||
return pathAndKey.length > 0
|
||||
@ -356,7 +356,7 @@ const link: string = computed((): string => {
|
||||
/**
|
||||
* Return a flag signifying whether the current file/folder is selected.
|
||||
*/
|
||||
const isFileSelected: boolean = computed((): string => {
|
||||
const isFileSelected = computed((): boolean => {
|
||||
return Boolean(
|
||||
store.state.files.selectedAnchorFile === props.file ||
|
||||
store.state.files.selectedFiles.find(
|
||||
@ -371,14 +371,14 @@ const isFileSelected: boolean = computed((): string => {
|
||||
/**
|
||||
* Return a boolean signifying whether the current file/folder is a folder.
|
||||
*/
|
||||
const fileTypeIsFolder: boolean = computed((): string => {
|
||||
const fileTypeIsFolder = computed((): boolean => {
|
||||
return props.file.type === 'folder';
|
||||
});
|
||||
|
||||
/**
|
||||
* Return a boolean signifying whether the current file/folder is a file.
|
||||
*/
|
||||
const fileTypeIsFile: boolean = computed((): string => {
|
||||
const fileTypeIsFile = computed((): boolean => {
|
||||
return props.file.type === 'file';
|
||||
});
|
||||
|
||||
|
||||
@ -12,41 +12,28 @@
|
||||
>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
declare type searchCallback = (search: string) => Promise<void>;
|
||||
|
||||
// @vue/component
|
||||
@Component
|
||||
export default class VSearch extends Vue {
|
||||
@Prop({ default: '' })
|
||||
private readonly placeholder: string;
|
||||
@Prop({ default: function(): searchCallback {
|
||||
return async function(_: string) {};
|
||||
} })
|
||||
private readonly search: searchCallback;
|
||||
private searchQuery = '';
|
||||
const props = defineProps<{
|
||||
placeholder: string,
|
||||
search: searchCallback,
|
||||
}>();
|
||||
|
||||
public $refs!: {
|
||||
input: HTMLElement;
|
||||
};
|
||||
|
||||
public get searchString(): string {
|
||||
return this.searchQuery;
|
||||
}
|
||||
const searchQuery = ref<string>('');
|
||||
|
||||
/**
|
||||
* Clears search query.
|
||||
*/
|
||||
public clearSearch(): void {
|
||||
this.searchQuery = '';
|
||||
this.processSearchQuery();
|
||||
function clearSearch(): void {
|
||||
searchQuery.value = '';
|
||||
processSearchQuery();
|
||||
}
|
||||
|
||||
public async processSearchQuery(): Promise<void> {
|
||||
await this.search(this.searchQuery);
|
||||
}
|
||||
async function processSearchQuery(): Promise<void> {
|
||||
await props.search(searchQuery.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -31,14 +31,14 @@ import { OnPageClickCallback } from '@/types/pagination';
|
||||
|
||||
import TablePagination from '@/components/common/TablePagination.vue';
|
||||
|
||||
const props = defineProps({
|
||||
selectable: { type: Boolean, default: false },
|
||||
totalPageCount: { type: Number, default: 0 },
|
||||
itemsLabel: { type: String, default: 'items' },
|
||||
limit: { type: Number, default: 0 },
|
||||
totalItemsCount: { type: Number, default: 0 },
|
||||
onPageClickCallback: { type: Function as OnPageClickCallback, default: () => () => new Promise(() => false) },
|
||||
});
|
||||
const props = defineProps<{
|
||||
selectable: boolean,
|
||||
totalPageCount: number,
|
||||
itemsLabel: string,
|
||||
limit: number,
|
||||
totalItemsCount: number,
|
||||
onPageClickCallback: OnPageClickCallback,
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -12,25 +12,19 @@
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
value: boolean,
|
||||
disabled: boolean,
|
||||
}>();
|
||||
|
||||
// Custom checkbox alternative to VCheckbox.vue for use in TableItem.vue
|
||||
// this has no label and allows for external toggles
|
||||
// @vue/component
|
||||
@Component
|
||||
export default class VTableCheckbox extends Vue {
|
||||
@Prop({ default: false })
|
||||
private readonly value: boolean;
|
||||
@Prop({ default: false })
|
||||
private readonly disabled: boolean;
|
||||
const emit = defineEmits(['checkChange']);
|
||||
|
||||
/**
|
||||
* Emits value to parent component.
|
||||
*/
|
||||
public onChange(event: { target: {checked: boolean} }): void {
|
||||
this.$emit('checkChange', event.target.checked);
|
||||
}
|
||||
function onChange(event: { target: { checked: boolean } }): void {
|
||||
emit('checkChange', event.target.checked);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -42,9 +42,9 @@ const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
|
||||
const props = defineProps({
|
||||
bucketName: { type: String, default: '' },
|
||||
});
|
||||
const props = defineProps<{
|
||||
bucketName: string,
|
||||
}>();
|
||||
|
||||
const isDropdownOpen = ref(false);
|
||||
const isHoveredOver = ref(false);
|
||||
@ -52,7 +52,7 @@ const isHoveredOver = ref(false);
|
||||
/**
|
||||
* Returns files amount from store.
|
||||
*/
|
||||
const filesCount: number = computed((): number => {
|
||||
const filesCount = computed((): number => {
|
||||
return store.getters['files/sortedFiles'].length;
|
||||
});
|
||||
|
||||
@ -70,7 +70,7 @@ function onDetailsClick(): void {
|
||||
name: RouteConfig.BucketsDetails.name,
|
||||
params: {
|
||||
bucketName: props.bucketName,
|
||||
backRoute: route.name || '',
|
||||
backRoute: route?.name || '',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
import { getCurrentInstance } from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
|
||||
import { store } from '@/store';
|
||||
import { Notificator } from '@/utils/plugins/notificator';
|
||||
|
||||
// TODO: remove after updating router and store deps.
|
||||
export function useRoute() {
|
||||
@ -9,13 +13,13 @@ export function useRoute() {
|
||||
}
|
||||
|
||||
export function useRouter() {
|
||||
return getCurrentInstance()?.proxy.$router;
|
||||
return getCurrentInstance()?.proxy.$router || {} as VueRouter;
|
||||
}
|
||||
|
||||
export function useStore() {
|
||||
return getCurrentInstance()?.proxy.$store;
|
||||
return getCurrentInstance()?.proxy.$store || {} as typeof store;
|
||||
}
|
||||
|
||||
export function useNotify() {
|
||||
return getCurrentInstance()?.proxy.$notify;
|
||||
return getCurrentInstance()?.proxy.$notify || {} as Notificator;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import { VNode } from 'vue';
|
||||
import { DirectiveBinding } from 'vue/types/options';
|
||||
import Vuex from 'vuex';
|
||||
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
|
||||
import { createLocalVue, shallowMount } from '@vue/test-utils';
|
||||
|
||||
import { ProjectsApiMock } from '../../../mock/api/projects';
|
||||
import { PaymentsMock } from '../../../mock/api/payments';
|
||||
@ -65,7 +65,7 @@ describe('PeriodSelection', (): void => {
|
||||
});
|
||||
|
||||
it('renders correctly with dropdown', async (): Promise<void> => {
|
||||
const wrapper = mount(PeriodSelection, {
|
||||
const wrapper = shallowMount(PeriodSelection, {
|
||||
localVue,
|
||||
store,
|
||||
});
|
||||
@ -80,7 +80,7 @@ describe('PeriodSelection', (): void => {
|
||||
const previousClickSpy = jest.fn();
|
||||
const historyClickSpy = jest.fn();
|
||||
|
||||
const wrapper = mount<PeriodSelection>(PeriodSelection, {
|
||||
const wrapper = shallowMount<PeriodSelection>(PeriodSelection, {
|
||||
localVue,
|
||||
store,
|
||||
});
|
||||
|
||||
@ -23,10 +23,15 @@ exports[`PeriodSelection renders correctly 1`] = `
|
||||
exports[`PeriodSelection renders correctly with dropdown 1`] = `
|
||||
<div class="period-selection">
|
||||
<div class="period-selection__current-choice">
|
||||
<div class="period-selection__current-choice__label-area"><svg></svg> <span class="period-selection__current-choice__label-area__label">Current Billing Period</span></div> <svg></svg>
|
||||
<div class="period-selection__current-choice__label-area">
|
||||
<datepickericon-stub></datepickericon-stub> <span class="period-selection__current-choice__label-area__label">Current Billing Period</span>
|
||||
</div>
|
||||
<hideicon-stub></hideicon-stub>
|
||||
</div>
|
||||
<div class="period-selection__dropdown" style="">
|
||||
<div class="period-selection__dropdown__item"><svg class="selected-image"></svg> <span class="period-selection__dropdown__item__label">Current Billing Period</span></div>
|
||||
<div class="period-selection__dropdown__item">
|
||||
<selectedicon-stub class="selected-image"></selectedicon-stub> <span class="period-selection__dropdown__item__label">Current Billing Period</span>
|
||||
</div>
|
||||
<div class="period-selection__dropdown__item">
|
||||
<!----> <span class="period-selection__dropdown__item__label">Previous Billing Period</span>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
import Vuex from 'vuex';
|
||||
import { createLocalVue, mount } from '@vue/test-utils';
|
||||
import { createLocalVue, shallowMount } from '@vue/test-utils';
|
||||
|
||||
import { ProjectsApiGql } from '@/api/projects';
|
||||
import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';
|
||||
@ -28,7 +28,7 @@ describe('', () => {
|
||||
store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, 'testId');
|
||||
|
||||
it('should render correctly', function () {
|
||||
const wrapper = mount(ProjectMemberListItem, {
|
||||
const wrapper = shallowMount(ProjectMemberListItem, {
|
||||
store,
|
||||
localVue,
|
||||
propsData: {
|
||||
@ -44,7 +44,7 @@ describe('', () => {
|
||||
it('should render correctly with item row highlighted', function () {
|
||||
member.isSelected = true;
|
||||
|
||||
const wrapper = mount(ProjectMemberListItem, {
|
||||
const wrapper = shallowMount(ProjectMemberListItem, {
|
||||
store,
|
||||
localVue,
|
||||
propsData: {
|
||||
|
||||
@ -1,61 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[` should render correctly 1`] = `
|
||||
<tr class="item-container owner">
|
||||
<th class="icon select"><label class="container"><input id="checkbox" disabled="disabled" type="checkbox" class="checkmark-input"> <span class="checkmark"></span></label></th>
|
||||
<th class="align-left data">
|
||||
<!---->
|
||||
<div class="table-item">
|
||||
<!---->
|
||||
<p class="primary">testShortName</p>
|
||||
<!---->
|
||||
</div>
|
||||
</th>
|
||||
<th class="align-left data">
|
||||
<!---->
|
||||
<div class="table-item">
|
||||
<!---->
|
||||
<p class="">Jan 1, 1970</p>
|
||||
<!---->
|
||||
</div>
|
||||
</th>
|
||||
<th class="align-left data">
|
||||
<!---->
|
||||
<div class="table-item">
|
||||
<!---->
|
||||
<p class="">test@example.com</p>
|
||||
<!---->
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
`;
|
||||
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 with item row highlighted 1`] = `
|
||||
<tr class="item-container selected owner">
|
||||
<th class="icon select"><label class="container"><input id="checkbox" disabled="disabled" type="checkbox" class="checkmark-input"> <span class="checkmark"></span></label></th>
|
||||
<th class="align-left data">
|
||||
<!---->
|
||||
<div class="table-item">
|
||||
<!---->
|
||||
<p class="primary">testShortName</p>
|
||||
<!---->
|
||||
</div>
|
||||
</th>
|
||||
<th class="align-left data">
|
||||
<!---->
|
||||
<div class="table-item">
|
||||
<!---->
|
||||
<p class="">Jan 1, 1970</p>
|
||||
<!---->
|
||||
</div>
|
||||
</th>
|
||||
<th class="align-left data">
|
||||
<!---->
|
||||
<div class="table-item">
|
||||
<!---->
|
||||
<p class="">test@example.com</p>
|
||||
<!---->
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
`;
|
||||
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>`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user