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

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

Browse Source 
Change-Id: I2e2bb654d1d759fb66ecbcbece1afb38557e271b
This commit is contained in:
Vitalii 2023-04-04 15:47:39 +03:00 committed by Vitalii Shpital
parent 1a8e5544b9
commit 45a8ac7f57
1 changed files with 78 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
web/satellite/src/components/project/CreateProject.vue
View File

@ -59,8 +59,8 @@
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script setup lang="ts">
import { ref } from 'vue';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
@ -68,107 +68,98 @@ import { ProjectFields } from '@/types/projects';
import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import VLoader from '@/components/common/VLoader.vue';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
// @vue/component
@Component({
components: {
VInput,
VButton,
VLoader,
},
})
export default class NewProjectPopup extends Vue {
private description = '';
private createdProjectId = '';
private isLoading = false;
const store = useStore();
const notify = useNotify();
const router = useRouter();
public projectName = '';
public nameError = '';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const description = ref<string>('');
const createdProjectId = ref<string>('');
const projectName = ref<string>('');
const nameError = ref<string>('');
const isLoading = ref<boolean>(false);
/**
* Sets project name from input value.
*/
public setProjectName(value: string): void {
this.projectName = value;
this.nameError = '';
/**
* Sets project name from input value.
*/
function setProjectName(value: string): void {
projectName.value = value;
nameError.value = '';
}
/**
* Sets project description from input value.
*/
function setProjectDescription(value: string): void {
description.value = value;
}
/**
* Redirects to previous route.
*/
function onCancelClick(): void {
const PREVIOUS_ROUTE_NUMBER = -1;
router.go(PREVIOUS_ROUTE_NUMBER);
}
/**
* Creates project and refreshes store.
*/
async function onCreateProjectClick(): Promise<void> {
if (isLoading.value) return;
isLoading.value = true;
projectName.value = projectName.value.trim();
const project = new ProjectFields(
projectName.value,
description.value,
store.getters.user.id,
);
try {
project.checkName();
} catch (error) {
isLoading.value = false;
nameError.value = error.message;
analytics.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
return;
}
/**
* Sets project description from input value.
*/
public setProjectDescription(value: string): void {
this.description = value;
try {
const createdProject = await store.dispatch(PROJECTS_ACTIONS.CREATE, project);
createdProjectId.value = createdProject.id;
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
isLoading.value = false;
return;
}
/**
* Redirects to previous route.
*/
public onCancelClick(): void {
const PREVIOUS_ROUTE_NUMBER = -1;
selectCreatedProject();
this.$router.go(PREVIOUS_ROUTE_NUMBER);
}
await notify.success('Project created successfully!');
/**
* Creates project and refreshes store.
*/
public async onCreateProjectClick(): Promise<void> {
if (this.isLoading) {
return;
}
isLoading.value = false;
this.isLoading = true;
this.projectName = this.projectName.trim();
analytics.pageVisit(RouteConfig.ProjectDashboard.path);
await router.push(RouteConfig.ProjectDashboard.path);
}
const project = new ProjectFields(
this.projectName,
this.description,
this.$store.getters.user.id,
);
try {
project.checkName();
} catch (error) {
this.isLoading = false;
this.nameError = error.message;
this.analytics.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
return;
}
try {
const createdProject = await this.$store.dispatch(PROJECTS_ACTIONS.CREATE, project);
this.createdProjectId = createdProject.id;
} catch (error) {
this.$notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
this.isLoading = false;
return;
}
this.selectCreatedProject();
await this.$notify.success('Project created successfully!');
this.isLoading = false;
this.analytics.pageVisit(RouteConfig.ProjectDashboard.path);
await this.$router.push(RouteConfig.ProjectDashboard.path);
}
/**
* Selects just created project.
*/
private selectCreatedProject(): void {
this.$store.dispatch(PROJECTS_ACTIONS.SELECT, this.createdProjectId);
LocalData.setSelectedProjectId(this.createdProjectId);
}
/**
* Selects just created project.
*/
function selectCreatedProject(): void {
store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId.value);
LocalData.setSelectedProjectId(createdProjectId.value);
}
</script>