From 2f6d3f0a6a20501c02bbd6faac9ac69be1410bf8 Mon Sep 17 00:00:00 2001
From: Niladri Adhikary <91966855+niladrix719@users.noreply.github.com>
Date: Sat, 27 Jul 2024 22:48:51 +0530
Subject: [PATCH] feat(gsoc'24): OpenOffline.vue component jquery to Vue's
 reactive and ts integration (#318)

* OpenOffline.vue component jquery to Vue's reactive and ts integration

* Update OpenOffline.vue
---
 src/components/DialogBox/OpenOffline.vue | 30 +++++++++++++++---------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/DialogBox/OpenOffline.vue b/src/components/DialogBox/OpenOffline.vue
index 7bd3b94f..3fe7063f 100644
--- a/src/components/DialogBox/OpenOffline.vue
+++ b/src/components/DialogBox/OpenOffline.vue
@@ -26,11 +26,12 @@
                             type="radio"
                             name="projectId"
                             :value="projectId"
+                            v-model="selectedProjectId"
                         />
                         {{ projectName }}<span></span>
                         <i
                             class="fa fa-trash deleteOfflineProject"
-                            @click="deleteOfflineProject(projectId)"
+                            @click="deleteOfflineProject(projectId.toString())"
                         ></i>
                     </label>
                     <p v-if="JSON.stringify(projectList) == '{}'">
@@ -64,21 +65,26 @@
 <script lang="ts" setup>
 import load from '#/simulator/src/data/load'
 import { useState } from '#/store/SimulatorStore/state'
-import { onMounted, onUpdated, ref, toRaw } from '@vue/runtime-core'
+import { onMounted, onUpdated, ref, reactive } from '@vue/runtime-core'
 const SimulatorState = useState()
-const projectList = ref({})
+const projectList: {
+    [key: string]: string
+} = reactive({})
+const selectedProjectId = ref<string | null>(null)
+
 onMounted(() => {
     SimulatorState.dialogBox.open_project_dialog = false
 })
 
 onUpdated(() => {
-    var data = localStorage.getItem('projectList')
-    projectList.value = JSON.parse(localStorage.getItem('projectList')) || {}
+    const data = localStorage.getItem('projectList')
+    projectList.value = data ? JSON.parse(data) : {}
 })
 
-function deleteOfflineProject(id) {
+function deleteOfflineProject(id: string) {
     localStorage.removeItem(id)
-    const temp = JSON.parse(localStorage.getItem('projectList')) || {}
+    const data = localStorage.getItem('projectList')
+    const temp = data ? JSON.parse(data) : {}
     delete temp[id]
     projectList.value = temp
     localStorage.setItem('projectList', JSON.stringify(temp))
@@ -86,10 +92,12 @@ function deleteOfflineProject(id) {
 
 function openProjectOffline() {
     SimulatorState.dialogBox.open_project_dialog = false
-    let ele = $('input[name=projectId]:checked')
-    if (!ele.val()) return
-    load(JSON.parse(localStorage.getItem(ele.val())))
-    window.projectId = ele.val()
+    if (!selectedProjectId.value) return
+    const projectData = localStorage.getItem(selectedProjectId.value)
+    if (projectData) {
+        load(JSON.parse(projectData))
+        window.projectId = selectedProjectId.value
+    }
 }
 
 function OpenImportProjectDialog() {