web/satellite: migrate CreateProjectModal to use SFC composition api

Change-Id: I8da5c3e034ebdd72c07a036d13a1e31a1d706cf6

web/satellite/src/components/modals/CreateProjectModal.vue

@@ -59,8 +59,8 @@
     </VModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+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
+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.
+ */
+function setProjectDescription(value: string): void {
+    description.value = value;
+}
+
+/**
+ * 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;
     }
 
-    /**
+    try {
-     * Sets project description from input value.
+        const createdProject = await store.dispatch(PROJECTS_ACTIONS.CREATE, project);
-     */
+        createdProjectId.value = createdProject.id;
-    public setProjectDescription(value: string): void {
+    } catch (error) {
-        this.description = value;
+        notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
+        isLoading.value = false;
+
+        return;
     }
 
-    /**
+    selectCreatedProject();
-     * Creates project and refreshes store.
-     */
-    public async onCreateProjectClick(): Promise<void> {
-        if (this.isLoading) {
-            return;
-        }
 
-        this.isLoading = true;
+    await notify.success('Project created successfully!');
-        this.projectName = this.projectName.trim();
 
-        const project = new ProjectFields(
+    isLoading.value = false;
-            this.projectName,
+    closeModal();
-            this.description,
-            this.$store.getters.user.id,
-        );
 
-        try {
+    store.commit(OBJECTS_MUTATIONS.CLEAR);
-            project.checkName();
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
-        } catch (error) {
-            this.isLoading = false;
-            this.nameError = error.message;
-            this.analytics.errorEventTriggered(AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
 
-            return;
+    analytics.pageVisit(RouteConfig.ProjectDashboard.path);
-        }
+    await router.push(RouteConfig.ProjectDashboard.path);
+}
 
-        try {
+/**
-            const createdProject = await this.$store.dispatch(PROJECTS_ACTIONS.CREATE, project);
+ * Selects just created project.
-            this.createdProjectId = createdProject.id;
+ */
-        } catch (error) {
+function selectCreatedProject(): void {
-            this.$notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
+    store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId.value);
-            this.isLoading = false;
+    LocalData.setSelectedProjectId(createdProjectId.value);
+}
 
-            return;
+/**
-        }
+ * Closes create project modal.
-
+ */
-        this.selectCreatedProject();
+function closeModal(): void {
-
+    store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
-        await this.$notify.success('Project created successfully!');
-
-        this.isLoading = false;
-        this.closeModal();
-
-        this.$store.commit(OBJECTS_MUTATIONS.CLEAR);
-        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProjectPassphrase);
-
-        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);
-    }
-
-    /**
-     * Closes create project modal.
-     */
-    public closeModal(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.createProject);
-    }
 }
 </script>