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

web/satellite: migrate CreateProjectModal to use SFC composition api

Browse Source 
Change-Id: I8da5c3e034ebdd72c07a036d13a1e31a1d706cf6
This commit is contained in:
Vitalii 2023-03-29 15:11:33 +03:00 committed by Storj Robot
parent 0acb28181f
commit b3969618f9
1 changed files with 79 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
web/satellite/src/components/modals/CreateProjectModal.vue
View File

@ -59,8 +59,8 @@
</VModal>
</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';
@ -71,111 +71,102 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
// @vue/component
@Component({
components: {
VButton,
VModal,
VInput,
VLoader,
},
})
export default class CreateProjectModal 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 = '';
function setProjectName(value: string): void {
projectName.value = value;
nameError.value = '';
}
/**
* Sets project description from input value.
*/
public setProjectDescription(value: string): void {
this.description = value;
function setProjectDescription(value: string): void {
description.value = value;
}
/**
* Creates project and refreshes store.
*/
public async onCreateProjectClick(): Promise<void> {
if (this.isLoading) {
return;
}
async function onCreateProjectClick(): Promise<void> {
if (isLoading.value) return;
this.isLoading = true;
this.projectName = this.projectName.trim();
isLoading.value = true;
projectName.value = projectName.value.trim();
const project = new ProjectFields(
this.projectName,
this.description,
this.$store.getters.user.id,
projectName.value,
description.value,
store.getters.user.id,
);
try {
project.checkName();
} catch (error) {
this.isLoading = false;
this.nameError = error.message;
this.analytics.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
isLoading.value = false;
nameError.value = error.message;
analytics.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
return;
}
try {
const createdProject = await this.$store.dispatch(PROJECTS_ACTIONS.CREATE, project);
this.createdProjectId = createdProject.id;
const createdProject = await store.dispatch(PROJECTS_ACTIONS.CREATE, project);
createdProjectId.value = createdProject.id;
} catch (error) {
this.$notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
this.isLoading = false;
notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
isLoading.value = false;
return;
}
this.selectCreatedProject();
selectCreatedProject();
await this.$notify.success('Project created successfully!');
await notify.success('Project created successfully!');
this.isLoading = false;
this.closeModal();
isLoading.value = false;
closeModal();
this.$store.commit(OBJECTS_MUTATIONS.CLEAR);
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
store.commit(OBJECTS_MUTATIONS.CLEAR);
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
this.analytics.pageVisit(RouteConfig.ProjectDashboard.path);
await this.$router.push(RouteConfig.ProjectDashboard.path);
analytics.pageVisit(RouteConfig.ProjectDashboard.path);
await router.push(RouteConfig.ProjectDashboard.path);
}
/**
* Selects just created project.
*/
private selectCreatedProject(): void {
this.$store.dispatch(PROJECTS_ACTIONS.SELECT, this.createdProjectId);
LocalData.setSelectedProjectId(this.createdProjectId);
function selectCreatedProject(): void {
store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId.value);
LocalData.setSelectedProjectId(createdProjectId.value);
}
/**
* Closes create project modal.
*/
public closeModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
}
function closeModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
}
</script>