fix: circuitname in property panel

src/components/MessageBox/messageBox.vue

@@ -1,82 +1,100 @@
-<template>
-    <v-dialog :persistent="isPersistent">
-        <v-card class="messageBoxContent">
-            <v-card-text>
-                <!-- NOTE: Add v-ifs -->
-                <p v-if="messageText" style="font-weight: bold">
-                    {{ messageText }}
-                </p>
-                <template v-if="tableHeader.length == 0">
-                    <div
-                        v-for="inputItem in inputList"
-                        :id="inputItem.id"
-                        :key="inputItem.id"
-                        :style="inputItem.style"
-                        :class="inputClass"
+    <template>
+        <v-dialog :persistent="isPersistent">
+            <v-card class="messageBoxContent">
+                <v-card-text>
+                    <!-- NOTE: Add v-ifs -->
+                    <p v-if="messageText" style="font-weight: bold">
+                        {{ messageText }}
+                    </p>
+                    <template v-if="tableHeader.length == 0">
+                        <div
+                            v-for="inputItem in inputList"
+                            :id="inputItem.id"
+                            :key="inputItem.id"
+                            :style="inputItem.style"
+                            :class="inputClass"
+                        >
+                            <p>{{ inputItem.text }}</p>
+                            <input
+                                v-if="inputItem.type != 'nil'"
+                                v-model="circuitName"
+                                :class="inputItem.class"
+                                :placeholder="inputItem.placeholder"
+                                :type="inputItem.type"
+                                ref="circuitNameRef"
+                            />
+                        </div>
+                    </template>
+                    <BooleanTable
+                        v-if="tableHeader.length > 0"
+                        :table-header="tableHeader"
+                        :table-body="tableBody"
+                    />
+                </v-card-text>
+                <v-card-actions>
+                    <v-btn
+                        v-for="buttonItem in buttonList"
+                        :key="buttonItem.text"
+                        class="messageBtn"
+                        block
+                        @click="
+                            $emit('buttonClick', buttonItem.emitOption, {name:circuitName})
+                        "
                     >
-                        <p>{{ inputItem.text }}</p>
-                        <input
-                            v-if="inputItem.type != 'nil'"
-                            v-model="inputItem.val"
-                            :class="inputItem.class"
-                            :placeholder="inputItem.placeholder"
-                            :type="inputItem.type"
-                        />
-                    </div>
-                </template>
-                <BooleanTable
-                    v-if="tableHeader.length > 0"
-                    :table-header="tableHeader"
-                    :table-body="tableBody"
-                />
-            </v-card-text>
-            <v-card-actions>
-                <v-btn
-                    v-for="buttonItem in buttonList"
-                    :key="buttonItem.text"
-                    class="messageBtn"
-                    block
-                    @click="
-                        $emit('buttonClick', buttonItem.emitOption, circuitItem)
-                    "
-                >
-                    {{ buttonItem.text }}
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
-</template>
+                        {{ buttonItem.text }}
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </template>
 
-<script lang="ts" setup>
-import BooleanTable from '@/DialogBox/BooleanTable.vue'
+    <script lang="ts" setup>
+    import { usePromptStore } from '#/store/promptStore';
+    import BooleanTable from '@/DialogBox/BooleanTable.vue'
+    import { watch, ref, computed, onMounted, nextTick } from 'vue';
+    const circuitNameRef = ref<HTMLInputElement | null>(null);
+    const promptInput = usePromptStore()
+    const circuitName = computed({
+        get:() => promptInput.prompt.inputText,
+        set: (newValue) => {
+            promptInput.prompt.inputText = newValue;
+        }
+    })
 
-defineEmits(['buttonClick'])
+    onMounted(() => {
+        nextTick(() => {
+            if(circuitNameRef.value) {
+                circuitNameRef.value?.focus();
+                circuitNameRef.value?.select();
+            }
+        })
+    })
+    defineEmits(['buttonClick'])
 
-defineProps({
-    messageText: { type: String, default: '' },
-    isPersistent: { type: Boolean, default: false },
-    buttonList: {
-        type: Array<{
-            text: string
-            emitOption: string | boolean
-        }>, default: () => []
-    },
-    inputList: {
-        type: Array<{
-            text: string
-            val: string
-            placeholder: string
-            id: string
-            class: string
-            style: string
-            type: string
-        }>, default: () => []
-    },
-    inputClass: { type: String, default: '' },
-    circuitItem: { type: Object, default: () => ({}) },
-    tableHeader: { type: Array, default: () => [] },
-    tableBody: { type: Array, default: () => [] },
-})
-</script>
+    defineProps({
+        messageText: { type: String, default: '' },
+        isPersistent: { type: Boolean, default: false },
+        buttonList: {
+            type: Array<{
+                text: string
+                emitOption: string | boolean
+            }>, default: () => []
+        },
+        inputList: {
+            type: Array<{
+                text: string
+                val: string
+                placeholder: string
+                id: string
+                class: string
+                style: string
+                type: string
+            }>, default: () => []
+        },
+        inputClass: { type: String, default: '' },
+        tableHeader: { type: Array, default: () => [] },
+        tableBody: { type: Array, default: () => [] },
+    })
+    </script>
 
-<style scoped></style>
+    <style scoped></style>

src/components/Panels/PropertiesPanel/ModuleProperty/ModuleProperty.vue

@@ -10,15 +10,15 @@
                 <ProjectProperty v-if="panelType == 1" />
                 <ElementProperty
                     v-else-if="panelType == 2"
-                    :key="panleBodyData"
-                    :obj="panleBodyData"
+                    :key="panelBodyData"
+                    :obj="panelBodyData"
                 />
                 <SubcircuitProperty
                     v-else-if="panelType == 3"
-                    :key="panleBodyData"
-                    :obj="panleBodyData"
+                    :key="panelBodyData"
+                    :obj="panelBodyData"
                 />
-                <HelpButton :key="panleBodyData" :obj="panleBodyData" />
+                <HelpButton :key="panelBodyData" :obj="panelBodyData" />
             </div>
         </div>
     </div>
@@ -34,10 +34,10 @@ import { ref, toRefs } from 'vue'
 import { onMounted } from 'vue'
 
 const props = defineProps({
-    panleBodyData: { type: Object, default: undefined },
+    panelBodyData: { type: Object, default: undefined },
     panelType: { type: Number, default: 1 },
     panelBodyHeader: { type: String, default: 'Properties' },
 })
 
-const { panleBodyData, panelType, panelBodyHeader } = toRefs(props)
+const { panelBodyData, panelType, panelBodyHeader } = toRefs(props)
 </script>

src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue

@@ -15,14 +15,13 @@
     <p>
         <span>Circuit:</span>
         <input
-            :ref="circnameInput"
             id="circname"
             :key="SimulatorState.activeCircuit?.id"
             class="objectPropertyAttribute"
             type="text"
             autocomplete="off"
             name="changeCircuitName"
-            :value="SimulatorState.activeCircuit?.name"
+            v-model="name"
         />
     </p>
 
@@ -96,37 +95,38 @@
 </template>
 
 <script lang="ts" setup>
-import { toggleLayoutMode } from '#/simulator/src/layoutMode'
 // import {
 //     deleteCurrentCircuit,
 //     getDependenciesList,
 //     scopeList,
 // } from '#/simulator/src/circuit'
 // import { showMessage } from '#/simulator/src/utils'
-import { simulationArea } from '#/simulator/src/simulationArea'
-import InputGroups from '#/components/Panels/Shared/InputGroups.vue'
 // import MessageBox from '#/components/MessageBox/messageBox.vue'
 // import { ref, Ref, onMounted, watch } from 'vue'
+// import DeleteCircuit from '#/components/helpers/deleteCircuit/DeleteCircuit.vue'
+import { toggleLayoutMode } from '#/simulator/src/layoutMode'
+import { simulationArea } from '#/simulator/src/simulationArea'
+import InputGroups from '#/components/Panels/Shared/InputGroups.vue'
 import { useState } from '#/store/SimulatorStore/state'
 import { useProjectStore } from '#/store/projectStore'
-// import DeleteCircuit from '#/components/helpers/deleteCircuit/DeleteCircuit.vue'
 import { closeCircuit } from '#/components/helpers/deleteCircuit/DeleteCircuit.vue'
 import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
 import { watch } from 'vue'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 const projectStore = useProjectStore()
-const SimulatorState = <SimulatorStateType>useState()
-const circnameInput = ref<HTMLInputElement | null>(null)
+const SimulatorState = useState()
+const name = computed({
+    get:() => SimulatorState.activeCircuit?.name,
+    set:(newValue:string | undefined) => { 
+        if (SimulatorState.activeCircuit) {
+      SimulatorState.activeCircuit.name = newValue; // Update the store's state
+    }
+    }
+})
+
 const simulatorMobileStore = useSimulatorMobileStore()
 
-watch(() => SimulatorState.circuit_name_clickable, () => {
-    setTimeout(() => {
-        if (circnameInput.value && SimulatorState.circuit_name_clickable) {
-            circnameInput.value.select()
-        }
-    }, 100)
-})
 // const circuitId: Ref<string | number> = ref(0)
 // const circuitName: Ref<string> = ref('Untitled-Cirucit')
 // const ifPersistentShow: Ref<boolean> = ref(false)
@@ -135,19 +135,6 @@ watch(() => SimulatorState.circuit_name_clickable, () => {
 //     { text: '', emitOption: '' },
 // ])
 // const circuitToDelete: Ref<Object> = ref({})
-
-type SimulatorStateType = {
-    activeCircuit: {
-        id: string | number
-        name: string
-    }
-    circuit_list: Array<Object>
-    dialogBox: {
-        delete_circuit: boolean
-    }
-    circuit_name_clickable: boolean
-}
-
 // type CircuitItem = {
 //     id: string | number
 //     name: string

src/components/Panels/PropertiesPanel/PropertiesPanel.vue

@@ -1,7 +1,7 @@
 <template>
     <ModuleProperty
         v-if="!propertiesPanelStore.inLayoutMode"
-        :panle-body-data="toRaw(propertiesPanelStore.propertiesPanelObj)"
+        :panel-body-data="toRaw(propertiesPanelStore.propertiesPanelObj)"
         :panel-type="propertiesPanelStore.panelType"
         :panel-body-header="propertiesPanelStore.panelBodyHeader"
     />

src/components/helpers/promptComponent/PromptComponent.vue

@@ -6,13 +6,14 @@
         :buttonList="promptStore.prompt.buttonList"
         :inputList="promptStore.prompt.inputList"
         :input-class="inputClass"
-        @buttonClick="(selectedOption) => confirmation(selectedOption)"
+        @buttonClick="(selectedOption,circuitItem) => confirmation(selectedOption,circuitItem)"
     />
 </template>
 
 <script lang="ts">
 import messageBox from '#/components/MessageBox/messageBox.vue'
 import { usePromptStore } from '#/store/promptStore'
+import { useState } from '#/store/SimulatorStore/state'
 import { ref } from 'vue'
 
 interface ButtonListType
@@ -53,7 +54,7 @@ const promptActivator = async (
     const promptStore = usePromptStore()
     promptStore.prompt.activate = true
     promptStore.prompt.isPersistent = true
-    promptStore.prompt.messageText = messageText
+    promptStore.prompt.messageText = messageText 
     promptStore.prompt.buttonList = buttonList
     promptStore.prompt.inputList = inputList
 
@@ -64,6 +65,8 @@ const promptActivator = async (
     return promptInput
 }
 
+const projectStore = useState();
+
 export const provideProjectName = async (): Promise<string | Error> => {
     inputClass.value = 'project-name-input'
     const messageText = ''
@@ -83,7 +86,7 @@ export const provideProjectName = async (): Promise<string | Error> => {
         {
             text: 'Enter Project Name:',
             val: '',
-            placeholder: 'Untitled',
+            placeholder: 'Untitled-circuit',
             id: 'projectName',
             class: 'inputField',
             style: '',
@@ -96,7 +99,6 @@ export const provideProjectName = async (): Promise<string | Error> => {
         buttonList,
         inputList
     )
-
     return projectName
 }
 
@@ -132,18 +134,19 @@ export const provideCircuitName = async (): Promise<string | Error> => {
         buttonList,
         inputList
     )
-
     return circuitName
 }
 </script>
 
 <script lang="ts" setup>
 const promptStore = usePromptStore()
 
-const confirmation = (selectedOption: string): void => {
+const confirmation = (selectedOption: string, circuitItem:any): void => {
     promptStore.prompt.activate = false
     if (selectedOption === 'save') {
         promptStore.resolvePromise(promptStore.prompt.inputList[0].val)
+        projectStore.circuit_list.push(circuitItem);
+        projectStore.activeCircuit = circuitItem;
     } else {
         promptStore.resolvePromise(new Error('cancel'))
     }