JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: migrate BucketsView component to use SFC composition api

Browse Source 
Change-Id: Ic3f015008587b335192ec6f6ccc13cc7ec6bfc04
This commit is contained in:
Vitalii 2023-04-04 14:02:40 +03:00 committed by Storj Robot
parent 35f9262c1b
commit 923ad68075
1 changed files with 84 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
web/satellite/src/components/objects/BucketsView.vue
View File

@ -18,8 +18,8 @@
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { LocalData } from '@/utils/localData';
@ -27,125 +27,110 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { BucketPage } from '@/types/buckets';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import EncryptionBanner from '@/components/objects/EncryptionBanner.vue';
import BucketsTable from '@/components/objects/BucketsTable.vue';
import WhitePlusIcon from '@/../static/images/common/plusWhite.svg';
// @vue/component
@Component({
components: {
WhitePlusIcon,
BucketsTable,
EncryptionBanner,
},
})
export default class BucketsView extends Vue {
public isLoading = true;
public isServerSideEncryptionBannerHidden = true;
const store = useStore();
const notify = useNotify();
public readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/**
* Lifecycle hook after initial render.
* Sets bucket view.
*/
public async mounted(): Promise<void> {
this.isServerSideEncryptionBannerHidden = LocalData.getServerSideEncryptionBannerHidden();
await this.setBucketsView();
}
const isLoading = ref<boolean>(true);
const isServerSideEncryptionBannerHidden = ref<boolean>(true);
@Watch('selectedProjectID')
public async handleProjectChange(): Promise<void> {
this.isLoading = true;
/**
* Returns fetched buckets page from store.
*/
const bucketsPage = computed((): BucketPage => {
return store.state.bucketUsageModule.page;
});
await this.$store.dispatch(OBJECTS_ACTIONS.CLEAR);
await this.setBucketsView();
}
/**
* Indicates if user should be prompt for passphrase.
*/
const promptForPassphrase = computed((): boolean => {
return store.state.objectsModule.promptForPassphrase;
});
/**
* Sets buckets view when needed.
*/
public async setBucketsView(): Promise<void> {
try {
await this.fetchBuckets();
/**
* Returns selected project id from store.
*/
const selectedProjectID = computed((): string => {
return store.getters.selectedProject.id;
});
const wasDemoBucketCreated = LocalData.getDemoBucketCreatedStatus();
/**
* Sets buckets view when needed.
*/
async function setBucketsView(): Promise<void> {
try {
await fetchBuckets();
if (this.bucketsPage.buckets.length && !wasDemoBucketCreated) {
LocalData.setDemoBucketCreatedStatus();
const wasDemoBucketCreated = LocalData.getDemoBucketCreatedStatus();
return;
}
if (bucketsPage.value.buckets.length && !wasDemoBucketCreated) {
LocalData.setDemoBucketCreatedStatus();
if (!this.bucketsPage.buckets.length && !wasDemoBucketCreated && !this.promptForPassphrase) {
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
}
} catch (error) {
await this.$notify.error(`Failed to setup Buckets view. ${error.message}`, AnalyticsErrorEventSource.BUCKET_PAGE);
} finally {
this.isLoading = false;
return;
}
}
/**
* Fetches bucket using api.
*/
public async fetchBuckets(page = 1): Promise<void> {
try {
await this.$store.dispatch(BUCKET_ACTIONS.FETCH, page);
} catch (error) {
await this.$notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.BUCKET_PAGE);
if (!bucketsPage.value.buckets.length && !wasDemoBucketCreated && !promptForPassphrase.value) {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
}
}
/**
* Toggles create project passphrase modal visibility.
*/
public onSetClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
}
/**
* Toggles create bucket modal visibility.
*/
public onCreateBucketClick(): void {
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
}
/**
* Hides server-side encryption banner.
*/
public hideBanner(): void {
this.isServerSideEncryptionBannerHidden = true;
LocalData.setServerSideEncryptionBannerHidden(true);
}
/**
* Returns fetched buckets page from store.
*/
public get bucketsPage(): BucketPage {
return this.$store.state.bucketUsageModule.page;
}
/**
* Indicates if user should be prompt for passphrase.
*/
public get promptForPassphrase(): boolean {
return this.$store.state.objectsModule.promptForPassphrase;
}
/**
* Returns selected project id from store.
*/
private get selectedProjectID(): string {
return this.$store.getters.selectedProject.id;
} catch (error) {
await notify.error(`Failed to setup Buckets view. ${error.message}`, AnalyticsErrorEventSource.BUCKET_PAGE);
} finally {
isLoading.value = false;
}
}
/**
* Fetches bucket using api.
*/
async function fetchBuckets(page = 1): Promise<void> {
try {
await store.dispatch(BUCKET_ACTIONS.FETCH, page);
} catch (error) {
await notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.BUCKET_PAGE);
}
}
/**
* Toggles create bucket modal visibility.
*/
function onCreateBucketClick(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createBucket);
}
/**
* Hides server-side encryption banner.
*/
function hideBanner(): void {
isServerSideEncryptionBannerHidden.value = true;
LocalData.setServerSideEncryptionBannerHidden(true);
}
/**
* Lifecycle hook after initial render.
* Sets bucket view.
*/
onMounted(async (): Promise<void> => {
isServerSideEncryptionBannerHidden.value = LocalData.getServerSideEncryptionBannerHidden();
await setBucketsView();
});
watch(selectedProjectID, async () => {
isLoading.value = true;
await store.dispatch(OBJECTS_ACTIONS.CLEAR);
await setBucketsView();
});
</script>
<style scoped lang="scss">