From 41137d88716d55d39733827103d68def91745d5b Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Thu, 25 Apr 2024 22:13:20 +0800
Subject: [PATCH] feat: update

---
 components/ConfigFormModal.vue    | 138 ++++++++++++++++++++++++++++++
 components/ResourceConfig.vue     | 129 +++-------------------------
 components/ResourceConfigCard.vue |  95 ++++++++++++++++++++
 components/ResourceGroup.vue      |  39 ++-------
 package.json                      |   2 +-
 pages/index.vue                   |  16 ++--
 pages/test.vue                    |   2 +
 pnpm-lock.yaml                    |  28 +++---
 8 files changed, 275 insertions(+), 174 deletions(-)
 create mode 100644 components/ConfigFormModal.vue
 create mode 100644 components/ResourceConfigCard.vue

diff --git a/components/ConfigFormModal.vue b/components/ConfigFormModal.vue
new file mode 100644
index 0000000..a9040e2
--- /dev/null
+++ b/components/ConfigFormModal.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { ResultOf } from 'gql.tada'
+import { z } from 'zod'
+import type * as queries from '~/queries'
+
+const props = defineProps<{
+  config?: ResultOf<typeof queries.configs>['configs'][number]
+}>()
+
+const visible = defineModel('visible', {
+  type: Boolean,
+  default: false
+})
+
+const { handleSubmit } = useForm({
+  validationSchema: toTypedSchema(
+    z.object({
+      name: z.string().min(1),
+      tproxyPort: z.number()
+    })
+  ),
+  initialValues: {
+    name: props.config?.name || '',
+    tproxyPort: props.config?.global.tproxyPort || 0
+  }
+})
+
+const onSubmit = handleSubmit(async () => {})
+</script>
+
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :draggable="false"
+    header="Create Config"
+  >
+    <div>
+      <Field #="{ componentField }" name="name">
+        <FormItem class="w-full">
+          <FormLabel>Name</FormLabel>
+
+          <FormControl>
+            <InputText class="w-full" v-bind="componentField" />
+          </FormControl>
+
+          <FormDescription>The name of the configuration.</FormDescription>
+
+          <FormMessage />
+        </FormItem>
+      </Field>
+
+      <Accordion class="py-4" multiple>
+        <AccordionTab header="Software Options">
+          <Field
+            #="{ componentField: { onInput, ...componentField } }"
+            name="tproxyPort"
+          >
+            <FormItem class="w-full">
+              <FormLabel>tproxyPort</FormLabel>
+
+              <FormControl>
+                <InputNumber
+                  class="w-full"
+                  v-bind="componentField"
+                  :format="false"
+                  @input="({ value }) => onInput(value)"
+                />
+              </FormControl>
+
+              <FormDescription>
+                Transparent Proxy Port to listen on. Valid range is 0 - 65535.
+                It is NOT a HTTP/SOCKS port, and is just used by eBPF program.
+                In normal case, you do not need to use it.
+              </FormDescription>
+
+              <FormMessage />
+            </FormItem>
+          </Field>
+        </AccordionTab>
+
+        <AccordionTab header="Interface and Kernel Options">
+          <Field #="{ componentField }" name="name">
+            <FormItem class="w-full">
+              <FormLabel>Name</FormLabel>
+
+              <FormControl>
+                <InputText class="w-full" v-bind="componentField" />
+              </FormControl>
+
+              <FormDescription>The name of the configuration.</FormDescription>
+
+              <FormMessage />
+            </FormItem>
+          </Field>
+        </AccordionTab>
+
+        <AccordionTab header="Node Connectivity Check">
+          <Field #="{ componentField }" name="name">
+            <FormItem class="w-full">
+              <FormLabel>Name</FormLabel>
+
+              <FormControl>
+                <InputText class="w-full" v-bind="componentField" />
+              </FormControl>
+
+              <FormDescription>The name of the configuration.</FormDescription>
+
+              <FormMessage />
+            </FormItem>
+          </Field>
+        </AccordionTab>
+
+        <AccordionTab header="Connecting Options">
+          <Field #="{ componentField }" name="name">
+            <FormItem class="w-full">
+              <FormLabel>Name</FormLabel>
+
+              <FormControl>
+                <InputText class="w-full" v-bind="componentField" />
+              </FormControl>
+
+              <FormDescription>The name of the configuration.</FormDescription>
+
+              <FormMessage />
+            </FormItem>
+          </Field>
+        </AccordionTab>
+      </Accordion>
+    </div>
+
+    <template #footer>
+      <Button text>Reset</Button>
+
+      <Button @click="onSubmit">Save</Button>
+    </template>
+  </Dialog>
+</template>
diff --git a/components/ResourceConfig.vue b/components/ResourceConfig.vue
index cd5aa9f..87c3402 100644
--- a/components/ResourceConfig.vue
+++ b/components/ResourceConfig.vue
@@ -1,15 +1,9 @@
-<script setup lang="ts">
-import type { ConfigFormModal } from '#components'
-import * as mutations from '~/mutations'
+<script setup lang="tsx">
 import * as queries from '~/queries'
 
 const apiStore = useAPIStore()
-const { data: defaults } = useAsyncData(() => apiStore.getDefaults())
 
 const isCreateConfigModalOpen = ref(false)
-const createConfigFormModalRef = ref<InstanceType<typeof ConfigFormModal>>()
-const isUpdateConfigFormModalOpen = ref(false)
-const updateConfigFormModalRef = ref<InstanceType<typeof ConfigFormModal>>()
 
 const { data: configs, execute: reloadConfigs } = useAsyncData(
   'configs',
@@ -19,126 +13,23 @@ const { data: configs, execute: reloadConfigs } = useAsyncData(
     return data?.data?.configs
   }
 )
-
-const isRemovingConfig = ref(false)
-
-const removeConfig = async (id: string) => {
-  isRemovingConfig.value = true
-
-  try {
-    await apiStore.apiClient?.mutation(mutations.removeConfig, { id })
-
-    await reloadConfigs()
-  } finally {
-    isRemovingConfig.value = false
-  }
-}
-
-const isSelectingConfig = ref(false)
-
-const selectConfig = async (id: string) => {
-  isSelectingConfig.value = true
-
-  try {
-    await apiStore.apiClient?.mutation(mutations.selectConfig, { id })
-
-    await reloadConfigs()
-  } finally {
-    isSelectingConfig.value = false
-  }
-}
 </script>
 
 <template>
   <div class="space-y-2">
     <div class="flex justify-end">
-      <Button size="icon" @click="isCreateConfigModalOpen = true">
-        <Icon name="i-heroicons:plus" />
+      <Button @click="isCreateConfigModalOpen = true">
+        <template #icon>
+          <Icon name="i-heroicons:plus" />
+        </template>
       </Button>
     </div>
 
-    <UCard v-for="config in configs" :key="config.id">
-      <template #header>
-        {{ config.name }}
-      </template>
-
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <Button
-            size="icon"
-            @click="
-              () => {
-                // const {
-                //   checkInterval,
-                //   sniffingTimeout,
-                //   checkTolerance,
-                //   ...global
-                // } = config.global
-                // updateConfigFormModalRef?.setValues({
-                //   name: config.name,
-                //   checkIntervalSeconds: deriveTime(
-                //     checkInterval as string,
-                //     's'
-                //   ),
-                //   sniffingTimeoutMS: deriveTime(
-                //     sniffingTimeout as string,
-                //     'ms'
-                //   ),
-                //   checkToleranceMS: deriveTime(checkTolerance as string, 'ms'),
-                //   ...global
-                // })
-                // isUpdateConfigFormModalOpen = true
-              }
-            "
-          >
-            <Icon name="i-heroicons:pencil" />
-          </Button>
-
-          <Button
-            :loading="isRemovingConfig"
-            :disabled="
-              config.id === defaults?.defaultConfigID || config.selected
-            "
-            size="icon"
-            @click="removeConfig(config.id)"
-          >
-            <Icon name="i-heroicons:minus" />
-          </Button>
-
-          <Button
-            :loading="isSelectingConfig"
-            :disabled="config.selected"
-            size="icon"
-            @click="selectConfig(config.id)"
-          >
-            <Icon name="i-heroicons:map-pin" />
-          </Button>
-        </div>
-      </template>
-    </UCard>
-
-    <ConfigFormModal
-      ref="createConfigFormModalRef"
-      v-model:open="isCreateConfigModalOpen"
-      @submit="
-        async () => {
-          await reloadConfigs()
-
-          isCreateConfigModalOpen = false
-        }
-      "
-    />
-
-    <ConfigFormModal
-      ref="updateConfigFormModalRef"
-      v-model:open="isUpdateConfigFormModalOpen"
-      @submit="
-        async () => {
-          await reloadConfigs()
-
-          isUpdateConfigFormModalOpen = false
-        }
-      "
+    <ResourceConfigCard
+      v-for="config in configs"
+      :key="config.id"
+      :config="config"
+      @reload-configs="reloadConfigs"
     />
   </div>
 </template>
diff --git a/components/ResourceConfigCard.vue b/components/ResourceConfigCard.vue
new file mode 100644
index 0000000..3483606
--- /dev/null
+++ b/components/ResourceConfigCard.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { ResultOf } from 'gql.tada'
+import * as mutations from '~/mutations'
+import type * as queries from '~/queries'
+
+defineProps<{ config: ResultOf<typeof queries.configs>['configs'][number] }>()
+
+const emit = defineEmits<{
+  (event: 'reloadConfigs'): void
+}>()
+
+const apiStore = useAPIStore()
+
+const { data: defaults } = useAsyncData('defaults', () =>
+  apiStore.getDefaults()
+)
+
+const isEditModalVisible = ref(false)
+const isRemovingConfig = ref(false)
+
+const removeConfig = async (id: string) => {
+  isRemovingConfig.value = true
+
+  try {
+    await apiStore.apiClient?.mutation(mutations.removeConfig, { id })
+    emit('reloadConfigs')
+  } finally {
+    isRemovingConfig.value = false
+  }
+}
+
+const isSelectingConfig = ref(false)
+
+const selectConfig = async (id: string) => {
+  isSelectingConfig.value = true
+
+  try {
+    await apiStore.apiClient?.mutation(mutations.selectConfig, { id })
+
+    emit('reloadConfigs')
+  } finally {
+    isSelectingConfig.value = false
+  }
+}
+</script>
+
+<template>
+  <Card>
+    <template #title>
+      {{ config.name }}
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button
+          class="space-x-1"
+          label="Edit"
+          size="small"
+          @click="isEditModalVisible = true"
+        >
+          <template #icon>
+            <Icon name="i-heroicons:pencil" />
+          </template>
+        </Button>
+
+        <Button
+          class="space-x-1"
+          label="Remove"
+          size="small"
+          severity="danger"
+          :loading="isRemovingConfig"
+          :disabled="config.id === defaults?.defaultConfigID || config.selected"
+          @click="removeConfig(config.id)"
+        >
+          <template #icon>
+            <Icon name="i-heroicons:trash" />
+          </template>
+        </Button>
+
+        <Button
+          size="small"
+          :loading="isSelectingConfig"
+          :disabled="config.selected"
+          @click="selectConfig(config.id)"
+        >
+          <template #icon>
+            <Icon name="i-heroicons:map-pin" />
+          </template>
+        </Button>
+      </div>
+    </template>
+  </Card>
+
+  <ConfigFormModal v-model:visible="isEditModalVisible" :config="config" />
+</template>
diff --git a/components/ResourceGroup.vue b/components/ResourceGroup.vue
index 171cec6..b760d14 100644
--- a/components/ResourceGroup.vue
+++ b/components/ResourceGroup.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { ConfigFormModal } from '#components'
 import * as mutations from '~/mutations'
 import * as queries from '~/queries'
 
@@ -9,9 +8,7 @@ const { data: defaults } = useAsyncData('defaults', () =>
 )
 
 const isCreateModalOpen = ref(false)
-const createFormModalRef = ref<InstanceType<typeof ConfigFormModal>>()
 const isUpdateFormModalOpen = ref(false)
-const updateFormModalRef = ref<InstanceType<typeof ConfigFormModal>>()
 
 const { data: groups, execute: reloadGroups } = useAsyncData(
   'groups',
@@ -40,18 +37,17 @@ const removeGroup = async (id: string) => {
 <template>
   <div class="space-y-2">
     <div class="flex justify-end">
-      <UButton icon="i-heroicons:plus" @click="isCreateModalOpen = true" />
+      <Button icon="i-heroicons:plus" @click="isCreateModalOpen = true" />
     </div>
 
-    <UCard v-for="group in groups" :key="group.id">
+    <Card v-for="group in groups" :key="group.id">
       <template #header>
         {{ group.name }}
       </template>
 
       <template #footer>
         <div class="flex justify-end gap-2">
-          <UButton
-            size="xs"
+          <Button
             icon="i-heroicons:pencil"
             @click="
               () => {
@@ -60,39 +56,14 @@ const removeGroup = async (id: string) => {
             "
           />
 
-          <UButton
+          <Button
             :loading="isRemovingGroup"
             :disabled="group.id === defaults?.defaultGroupID"
-            size="xs"
             icon="i-heroicons:minus"
             @click="removeGroup(group.id)"
           />
         </div>
       </template>
-    </UCard>
-
-    <ConfigFormModal
-      ref="createFormModalRef"
-      v-model:open="isCreateModalOpen"
-      @submit="
-        async () => {
-          await reloadGroups()
-
-          isCreateModalOpen = false
-        }
-      "
-    />
-
-    <ConfigFormModal
-      ref="updateFormModalRef"
-      v-model:open="isUpdateFormModalOpen"
-      @submit="
-        async () => {
-          await reloadGroups()
-
-          isUpdateFormModalOpen = false
-        }
-      "
-    />
+    </Card>
   </div>
 </template>
diff --git a/package.json b/package.json
index 74d81dc..df83e59 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "eslint": "^9.1.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "gql.tada": "^1.5.7",
+    "gql.tada": "^1.5.8",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "lodash-es": "^4.17.21",
diff --git a/pages/index.vue b/pages/index.vue
index 01265bc..64a7823 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -31,14 +31,18 @@ watch(selectedResourceTab, (selectedResourceTab) => {
     <TheHeader />
 
     <div
-      class="flex flex-col items-start gap-4 px-0 py-4 sm:px-4 lg:flex-row lg:px-0 [&>*]:w-full lg:[&>*]:w-1/2"
+      class="flex flex-col items-start gap-4 px-0 py-4 sm:px-4 lg:flex-row lg:px-0 [&>*]:w-full [&>*]:space-y-2 lg:[&>*]:w-1/2"
     >
-      <TabMenu
-        v-model:active-index="selectedResourceTabIndex"
-        :model="resourceTabs"
-      />
+      <div>
+        <TabMenu
+          v-model:active-index="selectedResourceTabIndex"
+          :model="resourceTabs"
+        />
 
-      <div class="space-y-2">
+        <ResourceConfig />
+      </div>
+
+      <div>
         <ClientOnly>
           <Panel header="subscription">
             <ResourceSubscription />
diff --git a/pages/test.vue b/pages/test.vue
index af4f952..fedb60b 100644
--- a/pages/test.vue
+++ b/pages/test.vue
@@ -7,5 +7,7 @@
         <Icon name="heroicons:moon-20-solid" />
       </template>
     </Button>
+
+    <MonacoEditor class="h-[50vh]" lang="typescript" />
   </div>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4458eff..3c3c6a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,8 +83,8 @@ importers:
         specifier: ^5.1.3
         version: 5.1.3(@types/eslint@8.56.10)(eslint-config-prettier@9.1.0(eslint@9.1.1))(eslint@9.1.1)(prettier@3.2.5)
       gql.tada:
-        specifier: ^1.5.7
-        version: 1.5.7(encoding@0.1.13)(graphql@16.8.1)(svelte@4.2.15)(typescript@5.4.5)
+        specifier: ^1.5.8
+        version: 1.5.8(encoding@0.1.13)(graphql@16.8.1)(svelte@4.2.15)(typescript@5.4.5)
       husky:
         specifier: ^9.0.11
         version: 9.0.11
@@ -1148,10 +1148,10 @@ packages:
         integrity: sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==
       }
 
-  '@gql.tada/cli-utils@1.2.1':
+  '@gql.tada/cli-utils@1.2.2':
     resolution:
       {
-        integrity: sha512-WU5TE/V3McGGY+05X1ncI9qbUEeDAU6LRnWzezr9pEBPAfXP9cOId0ihalMkhZ2dXZasCAZ2MykGTU+Xj1cAww==
+        integrity: sha512-NxAIYodK7E0utELE+c+qtV4Mkp0gvJqPdA7V5FrQYD8Uy+ItZhHA5mCYCtp2iNqlBqAw7cqYLTsovWZEag5AvA==
       }
     peerDependencies:
       typescript: ^5.0.0
@@ -1165,10 +1165,10 @@ packages:
       graphql: ^16.8.1
       typescript: ^5.0.0
 
-  '@gql.tada/internal@0.2.3':
+  '@gql.tada/internal@0.2.4':
     resolution:
       {
-        integrity: sha512-K8MZgUTXu89Ji+eED43xU1U1kZclWmC2CdQh/hmwSGUF3OHoXu0/cUX4fxqS990+/IvSKXgyWSemoWCHjKJyBQ==
+        integrity: sha512-mZlw4TWKnYrRgtzywkMN0jAExXO5UQDE7F/BQFPnSL8YqS8QI6KkeMCZDWaKOukJPoXr/f2Rt1maL+3kETHREg==
       }
     peerDependencies:
       graphql: ^16.8.1
@@ -5154,10 +5154,10 @@ packages:
       }
     engines: { node: '>=18' }
 
-  gql.tada@1.5.7:
+  gql.tada@1.5.8:
     resolution:
       {
-        integrity: sha512-5Qg0sUF+NnRf4d0d0u4+k06G3edtyiQ/JsoyEnJSFsq6iwRuxBL8boa3LvX0bQ8SfaPRaiLbWiMvWnT0mJKxcw==
+        integrity: sha512-vmYoI0hstQbhz9Wx5sg6QuRgNgSt9F0SoygLyn6RvNIfSxrYR+/fkFGBmAwfraXRW4ddsOglrdo72ZD8ZnSESg==
       }
     hasBin: true
     peerDependencies:
@@ -10264,10 +10264,10 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@gql.tada/cli-utils@1.2.1(encoding@0.1.13)(svelte@4.2.15)(typescript@5.4.5)':
+  '@gql.tada/cli-utils@1.2.2(encoding@0.1.13)(svelte@4.2.15)(typescript@5.4.5)':
     dependencies:
       '@0no-co/graphqlsp': 1.11.0(encoding@0.1.13)(typescript@5.4.5)
-      '@gql.tada/internal': 0.2.3(graphql@16.8.1)(typescript@5.4.5)
+      '@gql.tada/internal': 0.2.4(graphql@16.8.1)(typescript@5.4.5)
       '@vue/compiler-dom': 3.4.25
       '@vue/language-core': 2.0.13(typescript@5.4.5)
       graphql: 16.8.1
@@ -10283,7 +10283,7 @@ snapshots:
       graphql: 16.8.1
       typescript: 5.4.5
 
-  '@gql.tada/internal@0.2.3(graphql@16.8.1)(typescript@5.4.5)':
+  '@gql.tada/internal@0.2.4(graphql@16.8.1)(typescript@5.4.5)':
     dependencies:
       '@0no-co/graphql.web': 1.0.5(graphql@16.8.1)
       graphql: 16.8.1
@@ -13449,11 +13449,11 @@ snapshots:
       slash: 5.1.0
       unicorn-magic: 0.1.0
 
-  gql.tada@1.5.7(encoding@0.1.13)(graphql@16.8.1)(svelte@4.2.15)(typescript@5.4.5):
+  gql.tada@1.5.8(encoding@0.1.13)(graphql@16.8.1)(svelte@4.2.15)(typescript@5.4.5):
     dependencies:
       '@0no-co/graphql.web': 1.0.5(graphql@16.8.1)
-      '@gql.tada/cli-utils': 1.2.1(encoding@0.1.13)(svelte@4.2.15)(typescript@5.4.5)
-      '@gql.tada/internal': 0.2.3(graphql@16.8.1)(typescript@5.4.5)
+      '@gql.tada/cli-utils': 1.2.2(encoding@0.1.13)(svelte@4.2.15)(typescript@5.4.5)
+      '@gql.tada/internal': 0.2.4(graphql@16.8.1)(typescript@5.4.5)
       typescript: 5.4.5
     transitivePeerDependencies:
       - encoding