feat: ui

daeuniverse · Mar 28, 2024 · 5036d21 · 5036d21
1 parent 52b9608
commit 5036d21
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 109 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -0,0 +1,10 @@
+export default defineAppConfig({
+  ui: {
+    icons: {
+      dynamic: true
+    },
+    table: {
+      divide: ''
+    }
+  }
+})
diff --git a/components/ResourceNode.vue b/components/ResourceNode.vue
@@ -39,8 +39,12 @@ const {
   pending: isLoading,
   execute
 } = useAsyncData(
+  'nodes',
   async () =>
-    (await apiStore.apiClient?.query(queries.nodes, {}))?.data?.nodes.edges
+    (await apiStore.apiClient?.query(queries.nodes, {}))?.data?.nodes.edges,
+  {
+    default: () => []
+  }
 )
 
 const isRemoving = ref(false)
@@ -80,17 +84,19 @@ const onError = (event: FormErrorEvent) => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
-    <div class="flex justify-end gap-2">
-      <UButton
-        :loading="isRemoving"
-        :disabled="!selected.length"
-        icon="i-heroicons-minus"
-        @click="onRemove"
-      />
-
-      <UButton icon="i-heroicons-link" @click="isNodeModalOpen = true" />
-    </div>
+  <UCard>
+    <template #header>
+      <div class="flex justify-end gap-2">
+        <UButton
+          :loading="isRemoving"
+          :disabled="!selected.length"
+          icon="i-heroicons-minus"
+          @click="onRemove"
+        />
+
+        <UButton icon="i-heroicons-link" @click="isNodeModalOpen = true" />
+      </div>
+    </template>
 
     <ClientOnly>
       <UTable v-model="selected" :rows="nodes" :loading="isLoading" />
@@ -165,5 +171,5 @@ const onError = (event: FormErrorEvent) => {
         </UCard>
       </UForm>
     </UModal>
-  </div>
+  </UCard>
 </template>
diff --git a/components/ResourceSubscription.vue b/components/ResourceSubscription.vue
@@ -41,14 +41,19 @@ const {
   data: subscriptions,
   pending: isLoading,
   execute
-} = useAsyncData(async () =>
-  (
-    await apiStore.apiClient?.query(queries.subscriptions, {})
-  )?.data?.subscriptions.map((subscription) => ({
-    ...subscription,
-    nodes: subscription.nodes.edges.length,
-    updatedAt: dayjs(subscription.updatedAt).format('YYYY-MM:DD HH:mm:ss')
-  }))
+} = useAsyncData(
+  'subscriptions',
+  async () =>
+    (
+      await apiStore.apiClient?.query(queries.subscriptions, {})
+    )?.data?.subscriptions.map((subscription) => ({
+      ...subscription,
+      nodes: subscription.nodes.edges.length,
+      updatedAt: dayjs(subscription.updatedAt).format('YYYY-MM:DD HH:mm:ss')
+    })),
+  {
+    default: () => []
+  }
 )
 
 const isRemoving = ref(false)
@@ -94,20 +99,22 @@ const onError = (event: FormErrorEvent) => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
-    <div class="flex justify-end gap-2">
-      <UButton
-        :loading="isRemoving"
-        :disabled="!selected.length"
-        icon="i-heroicons-minus"
-        @click="onRemove"
-      />
-
-      <UButton
-        icon="i-heroicons-link"
-        @click="isSubscriptionModalOpen = true"
-      />
-    </div>
+  <UCard>
+    <template #header>
+      <div class="flex justify-end gap-2">
+        <UButton
+          :loading="isRemoving"
+          :disabled="!selected.length"
+          icon="i-heroicons-minus"
+          @click="onRemove"
+        />
+
+        <UButton
+          icon="i-heroicons-link"
+          @click="isSubscriptionModalOpen = true"
+        />
+      </div>
+    </template>
 
     <ClientOnly>
       <UTable v-model="selected" :rows="subscriptions" :loading="isLoading" />
@@ -182,5 +189,5 @@ const onError = (event: FormErrorEvent) => {
         </UCard>
       </UForm>
     </UModal>
-  </div>
+  </UCard>
 </template>
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
@@ -7,6 +7,7 @@ import * as queries from '~/queries'
 const apiStore = useAPIStore()
 
 const { data: user, execute } = useAsyncData(
+  'user',
   async () => (await apiStore.apiClient?.query(queries.user, {}))?.data?.user
 )
 
@@ -85,6 +86,7 @@ const dropdownItems = [
       async click() {
         apiStore.endpointURL = ''
         apiStore.token = ''
+
         await navigateTo('/setup', { replace: true })
       }
     }

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,5 +1,3 @@
-<script setup lang="ts"></script>
-
 <template>
   <UContainer>
     <TheHeader />

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -9,6 +9,11 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     '@nuxt/ui'
   ],
+  nitro: {
+    experimental: {
+      websocket: true
+    }
+  },
   imports: {
     presets: [
       {

diff --git a/package.json b/package.json
@@ -16,10 +16,10 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/fonts": "^0.5.1",
-    "@nuxt/ui": "^2.14.2",
+    "@nuxt/ui": "^2.15.0",
     "@nuxtjs/i18n": "^8.2.0",
     "@pinia/nuxt": "^0.5.1",
-    "@shikijs/monaco": "^1.2.0",
+    "@shikijs/monaco": "^1.2.1",
     "@types/lodash-es": "^4.17.12",
     "@urql/core": "^4.3.0",
     "@vueuse/core": "^10.9.0",
@@ -39,11 +39,11 @@
     "nuxt-monaco-editor": "^1.2.7",
     "nuxt-zod-i18n": "^1.4.0",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.12",
-    "shiki": "^1.2.0",
-    "sort-package-json": "^2.8.0",
+    "prettier-plugin-tailwindcss": "^0.5.13",
+    "shiki": "^1.2.1",
+    "sort-package-json": "^2.9.0",
     "splitpanes": "^3.1.5",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.4.3",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",

diff --git a/pages/setup.vue b/pages/setup.vue
@@ -66,10 +66,12 @@ const onSubmit = async (event: FormSubmitEvent<Schema>) => {
         />
       </UFormGroup>
 
-      <div class="space-x-4">
-        <UButton :loading="isLoading" type="submit">Login</UButton>
+      <div class="flex items-center space-x-4">
+        <UButton :loading="isLoading" type="submit" icon="i-tabler:login">
+          Login
+        </UButton>
 
-        <UButton>Sign Up</UButton>
+        <UButton icon="i-tabler:user-plus">Sign Up</UButton>
       </div>
     </UForm>
   </UCard>