feat: subscriptions & nodes

daeuniverse · Mar 24, 2024 · de4b54a · de4b54a
1 parent 7474610
commit de4b54a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/components/ResourceNode.vue b/components/ResourceNode.vue
@@ -3,6 +3,8 @@ import * as queries from '~/queries'
 
 const apiStore = useAPIStore()
 
+const isNodeModalOpen = ref(false)
+
 const { data: nodes } = useAsyncData(async () =>
   (await apiStore.apiClient?.query(queries.nodes, {}))?.data?.nodes.edges.map(
     (node) => ({
@@ -14,5 +16,17 @@ const { data: nodes } = useAsyncData(async () =>
 </script>
 
 <template>
-  <UTable :rows="nodes" />
+  <div class="flex flex-col gap-4">
+    <div class="flex justify-end">
+      <UButton icon="i-heroicons-plus" @click="isNodeModalOpen = true" />
+    </div>
+
+    <UTable :rows="nodes" />
+
+    <UModal v-model="isNodeModalOpen">
+      <UCard>
+        <template #header>Import Nodes</template>
+      </UCard>
+    </UModal>
+  </div>
 </template>
diff --git a/components/ResourceSubscription.vue b/components/ResourceSubscription.vue
@@ -3,6 +3,8 @@ import * as queries from '~/queries'
 
 const apiStore = useAPIStore()
 
+const isSubscriptionModalOpen = ref(false)
+
 const { data: subscriptions } = useAsyncData(async () =>
   (
     await apiStore.apiClient?.query(queries.subscriptions, {})
@@ -14,5 +16,20 @@ const { data: subscriptions } = useAsyncData(async () =>
 </script>
 
 <template>
-  <UTable :rows="subscriptions" />
+  <div class="flex flex-col gap-4">
+    <div class="flex justify-end">
+      <UButton
+        icon="i-heroicons-link"
+        @click="isSubscriptionModalOpen = true"
+      />
+    </div>
+
+    <UTable :rows="subscriptions" />
+
+    <UModal v-model="isSubscriptionModalOpen">
+      <UCard>
+        <template #header>Import Subscriptions</template>
+      </UCard>
+    </UModal>
+  </div>
 </template>