refactor(ui): init connection details view

apps/desktop/src/renderer/src/pages/connections/Details.vue

@@ -1,27 +1,15 @@
 <script lang="ts" setup>
-// Web Data Fetch
-import { ref, watch } from 'vue'
-import useMockData from '@/composables/useMockData'
-
-const props = defineProps<{
+// Desktop Data Fetch
+defineProps<{
   id: string
 }>()
-
-const { getMockConnectionDetail } = useMockData()
-const selectedConnection = ref({})
-const loadDetails = (id: string): void => {
-  selectedConnection.value = getMockConnectionDetail(id)
-}
-loadDetails(props.id)
-watch(
-  () => props.id,
-  (newId) => {
-    loadDetails(newId)
-  },
-  { immediate: true },
-)
 </script>
 
 <template>
-  <connection-details-view :connection="selectedConnection" />
+  <connection-details-view
+    :connection="{
+      name: 'test',
+      id,
+    }"
+  />
 </template>

apps/web/src/pages/connections/Details.vue

@@ -1,27 +1,15 @@
 <script lang="ts" setup>
 // Web Data Fetch
-import { ref, watch } from 'vue'
-import useMockData from '@/composables/useMockData'
-
-const props = defineProps<{
+defineProps<{
   id: string
 }>()
-
-const { getMockConnectionDetail } = useMockData()
-const selectedConnection = ref({})
-const loadDetails = (id: string): void => {
-  selectedConnection.value = getMockConnectionDetail(id)
-}
-loadDetails(props.id)
-watch(
-  () => props.id,
-  (newId) => {
-    loadDetails(newId)
-  },
-  { immediate: true },
-)
 </script>
 
 <template>
-  <connection-details-view :connection="selectedConnection" />
+  <connection-details-view
+    :connection="{
+      name: 'test',
+      id,
+    }"
+  />
 </template>

packages/ui/src/components/connections/DetailsView.vue

@@ -1,44 +1,28 @@
 <script setup lang="ts">
 import type { ConnectionDetail } from 'mqttx'
-import { ref } from 'vue'
+// import { ref } from 'vue'
 import SplitView from '../common/SplitView.vue'
 
 defineProps<{
   connection: ConnectionDetail
 }>()
 
-const payload = ref(
-  JSON.stringify(
-    {
-      msg: 'hello',
-    },
-    null,
-    2,
-  ),
-)
+// const payload = ref(
+//   JSON.stringify(
+//     {
+//       msg: 'hello',
+//     },
+//     null,
+//     2,
+//   ),
+// )
 </script>
 
 <template>
   <div class="connection-details-view text-base h-full">
     <split-view vertical fixed-panel-size="180px" max-size="500px" min-size="180px" handle-color="bg-border-default">
-      <template #panel-1>
-        <div class="p-4">
-          <p>Connection ID: {{ connection.id }}</p>
-          <p>Name: {{ connection.name }}</p>
-          <p>Host: {{ connection.host }}</p>
-          <p>Port: {{ connection.port }}</p>
-          <p>Username: {{ connection.username }}</p>
-          <p>Last Connected: {{ connection.lastConnected }}</p>
-          <ul class="ml-12">
-            <li v-for="topic in connection.topics" :key="topic">{{ topic }}</li>
-          </ul>
-        </div>
-      </template>
-      <template #panel-2>
-        <div class="p-4">
-          <el-input v-model="payload" type="textarea" :rows="4"></el-input>
-        </div>
-      </template>
+      <template #panel-1> </template>
+      <template #panel-2> </template>
     </split-view>
   </div>
 </template>

packages/ui/src/components/connections/ListView.vue

@@ -1,32 +1,14 @@
 <script lang="ts" setup>
-import type { Connection } from 'mqttx'
+// import type { Connection } from 'mqttx'
 
-const props = defineProps<{
-  data: Connection[]
-  activeId: string
-}>()
+// const props = defineProps<{
+//   data: Connection[]
+//   activeId: string
+// }>()
 
-const isActive = (id: string): boolean => id === props.activeId
+// const isActive = (id: string): boolean => id === props.activeId
 </script>
 
 <template>
-  <div class="connection-list-view p-4">
-    <div class="list-header mb-3">
-      <h1>{{ $t('connections.connections') }}</h1>
-    </div>
-    <ul v-if="data.length">
-      <li v-for="{ id, name } in data" :key="id" class="flex items-center">
-        <svg class="icon w-[24px] h-[24px] mr-2" aria-hidden="true">
-          <use :xlink:href="isActive(id) ? '#icon-unfold' : '#icon-fold'"></use>
-        </svg>
-        <router-link
-          :to="`/connections/${id}`"
-          :class="['truncate overflow-hidden text-base', isActive(id) ? 'text-main-green' : '']"
-        >
-          {{ name }}
-        </router-link>
-      </li>
-    </ul>
-    <div v-else>No Data!</div>
-  </div>
+  <div class="connection-list-view p-4"></div>
 </template>