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