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

Change-Id: I2e2bb654d1d759fb66ecbcbece1afb38557e271b

web/satellite/src/components/project/CreateProject.vue

@@ -59,8 +59,8 @@
     </div>
 </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';
@@ -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
+const store = useStore();
-@Component({
+const notify = useNotify();
-    components: {
+const router = useRouter();
-        VInput,
-        VButton,
-        VLoader,
-    },
-})
-export default class NewProjectPopup 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;
+}
+
+/**
+ * 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;
     }
 
-    /**
+    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();
-     * Redirects to previous route.
-     */
-    public onCancelClick(): void {
-        const PREVIOUS_ROUTE_NUMBER = -1;
 
-        this.$router.go(PREVIOUS_ROUTE_NUMBER);
+    await notify.success('Project created successfully!');
-    }
 
-    /**
+    isLoading.value = false;
-     * Creates project and refreshes store.
-     */
-    public async onCreateProjectClick(): Promise<void> {
-        if (this.isLoading) {
-            return;
-        }
 
-        this.isLoading = true;
+    analytics.pageVisit(RouteConfig.ProjectDashboard.path);
-        this.projectName = this.projectName.trim();
+    await router.push(RouteConfig.ProjectDashboard.path);
+}
 
-        const project = new ProjectFields(
+/**
-            this.projectName,
+ * Selects just created project.
-            this.description,
+ */
-            this.$store.getters.user.id,
+function selectCreatedProject(): void {
-        );
+    store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId.value);
-
+    LocalData.setSelectedProjectId(createdProjectId.value);
-        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);
-    }
 }
 </script>