feat(gsoc): update prompt component structure to make it a common hel…

…per component

Signed-off-by: Arnabdaz <[email protected]>

src/helpers/promptComponent/components/PromptComponent.vue

@@ -0,0 +1,19 @@
+<template>
+    <messageBox
+        v-model="promptStore.prompt.changeProjectName"
+        :messageText="promptStore.prompt.messageText"
+        :isPersistent="promptStore.prompt.isPersistent"
+        :buttonList="promptStore.prompt.buttonList"
+        :inputList="promptStore.prompt.inputList"
+        input-class="saveInput"
+        @buttonClick="(selectedOption) => confirmName(selectedOption)"
+    />
+</template>
+
+<script lang="ts" setup>
+import messageBox from '#/components/MessageBox/messageBox.vue'
+import { usePromptStore } from '#/store/promptStore'
+import { confirmName } from '#/helpers/promptComponent/ts/confirm'
+
+const promptStore = usePromptStore()
+</script>

src/helpers/promptComponent/ts/confirm.ts

@@ -0,0 +1,12 @@
+import { usePromptStore } from '#/store/promptStore'
+
+export const confirmName = (selectedOption: string): void => {
+    const promptStore = usePromptStore()
+    // let resolvePromise = promptStore.resolvePromise
+    promptStore.prompt.changeProjectName = false
+    if (selectedOption === 'save') {
+        promptStore.resolvePromise(promptStore.prompt.inputList[0].val)
+    } else {
+        promptStore.resolvePromise(undefined)
+    }
+}

src/helpers/promptComponent/ts/provideProjectName.ts

@@ -0,0 +1,40 @@
+// import { usepromptStore } from '#/store/promptStore'
+import { usePromptStore } from '#/store/promptStore'
+
+// export let resolvePromise: (value?: string) => void // will be used to store the resolve function of the Promise
+
+export const provideProjectName = async (): Promise<string | undefined> => {
+    const promptStore = usePromptStore()
+    // const resolvePromise = promptStore.resolvePromise
+    promptStore.prompt.changeProjectName = true
+    promptStore.prompt.isPersistent = true
+    // promptStore.prompt.messageText =
+    //     'Provide a name for the project'
+    promptStore.prompt.buttonList = [
+        {
+            text: 'Save',
+            emitOption: 'save',
+        },
+        {
+            text: 'Cancel',
+            emitOption: 'cancel',
+        },
+    ]
+    promptStore.prompt.inputList = [
+        {
+            text: 'Enter Project Name:',
+            val: '',
+            placeholder: 'Untitled',
+            id: 'projectName',
+            class: 'inputField',
+            style: '',
+            type: 'text',
+        },
+    ]
+
+    const projectName = await new Promise<string | undefined>((resolve) => {
+        promptStore.resolvePromise = resolve
+    })
+
+    return projectName
+}

src/pages/simulatorHandler.vue

@@ -8,7 +8,7 @@
     <template v-else-if="!isLoading && hasAccess">
         <simulator />
     </template>
-    <projectNameSet />
+    <PromptComponent />
     <setDetailsOnCreate />
 </template>
 
@@ -17,7 +17,7 @@ import simulator from './simulator.vue'
 import { onBeforeMount, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useAuthStore } from '#/store/authStore'
-import projectNameSet from '#/components/DialogBox/ProjectNameSet.vue'
+import PromptComponent from '#/helpers/promptComponent/components/PromptComponent.vue'
 import setDetailsOnCreate from '#/components/DialogBox/SetDetailsOnCreate.vue'
 
 const route = useRoute()

src/simulator/src/data/save.js

@@ -14,7 +14,7 @@ import domtoimage from 'dom-to-image'
 import '../../vendor/canvas2svg'
 import { useProjectStore } from '#/store/projectStore'
 // import provideProjectName from '#/components/DialogBox/save.vue'
-import { provideProjectName } from '#/components/DialogBox/ProjectNameSetHelper'
+import { provideProjectName } from '#/helpers/promptComponent/ts/provideProjectName'
 
 // var projectName = undefined
 

src/store/projectStore.ts

@@ -6,25 +6,6 @@ interface projectStoreType {
         name: string
         nameDefined: boolean
     }
-    CreateProjectHelper: {
-        changeProjectName: boolean
-        resolvePromise: null | ((value?: string) => void)
-        messageText: string
-        isPersistent: boolean
-        buttonList: Array<{
-            text: string
-            emitOption: string
-        }>
-        inputList: Array<{
-            text: string
-            val: string
-            placeholder: string
-            id: string
-            class: string
-            style: string
-            type: string
-        }>
-    }
 }
 
 export const useProjectStore = defineStore({
@@ -35,14 +16,6 @@ export const useProjectStore = defineStore({
             name: 'Untitled',
             nameDefined: false,
         },
-        CreateProjectHelper: {
-            changeProjectName: false,
-            resolvePromise: null,
-            messageText: '',
-            isPersistent: false,
-            buttonList: [],
-            inputList: [],
-        },
     }),
     actions: {
         setProjectName(projectName: string): void {

src/store/promptStore.ts

@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia'
+
+interface promptStoreType {
+    resolvePromise: Function
+    prompt: {
+        changeProjectName: boolean
+        resolvePromise: null | ((value?: string) => void)
+        messageText: string
+        isPersistent: boolean
+        buttonList: Array<{
+            text: string
+            emitOption: string
+        }>
+        inputList: Array<{
+            text: string
+            val: string
+            placeholder: string
+            id: string
+            class: string
+            style: string
+            type: string
+        }>
+    }
+}
+
+export const usePromptStore = defineStore({
+    id: 'promptStore',
+    state: (): promptStoreType => ({
+        resolvePromise: (): any => {},
+        prompt: {
+            changeProjectName: false,
+            resolvePromise: null,
+            messageText: '',
+            isPersistent: false,
+            buttonList: [],
+            inputList: [],
+        },
+    }),
+    actions: {
+        // resolvePromise(): any {},
+    },
+})