feat: import subscriptions

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

Hide file tree

Showing 3 changed files with 136 additions and 15 deletions.
diff --git a/components/ConfigFormModal.vue b/components/ConfigFormModal.vue
@@ -331,17 +331,28 @@ defineExpose({
             <div class="space-y-2">
               <UFormGroup label="tcpCheckUrl">
                 <div class="space-y-2">
-                  <UInput
+                  <div
                     v-for="(url, index) in state.tcpCheckUrl"
                     :key="index"
-                    :value="url"
-                    @input="
-                      (event: InputEvent) =>
-                        (state.tcpCheckUrl[index] = (
-                          event.target as HTMLInputElement
-                        ).value)
-                    "
-                  />
+                    class="flex items-center gap-2"
+                  >
+                    <UInput
+                      class="w-full"
+                      :value="url"
+                      @input="
+                        (event: InputEvent) =>
+                          (state.tcpCheckUrl[index] = (
+                            event.target as HTMLInputElement
+                          ).value)
+                      "
+                    />
+
+                    <UButton
+                      size="xs"
+                      icon="i-heroicons-minus"
+                      @click="state.udpCheckDns.splice(index, 1)"
+                    />
+                  </div>
 
                   <div class="flex justify-end">
                     <UButton

diff --git a/components/ResourceSubscription.vue b/components/ResourceSubscription.vue
@@ -1,18 +1,66 @@
 <script setup lang="ts">
+import type { FormErrorEvent, FormSubmitEvent } from '#ui/types'
+import { z } from 'zod'
+import * as mutations from '~/mutations'
 import * as queries from '~/queries'
 
 const apiStore = useAPIStore()
 
 const isSubscriptionModalOpen = ref(false)
 
-const { data: subscriptions } = useAsyncData(async () =>
+const schema = z.object({
+  importSubscriptions: z.array(
+    z.object({
+      tag: z.string(),
+      link: z.string().url()
+    })
+  )
+})
+
+type Schema = z.output<typeof schema>
+
+const initialState = () =>
+  ({
+    importSubscriptions: [
+      {
+        tag: '',
+        link: ''
+      }
+    ]
+  }) satisfies Schema
+
+const state = reactive<Schema>(initialState())
+
+const { data: subscriptions, execute } = useAsyncData(async () =>
   (
     await apiStore.apiClient?.query(queries.subscriptions, {})
   )?.data?.subscriptions.map((subscription) => ({
     id: subscription.id,
     link: subscription.link
   }))
 )
+
+const onSubmit = async (event: FormSubmitEvent<Schema>) => {
+  const { importSubscriptions } = event.data
+
+  for (const { tag, link } of importSubscriptions) {
+    await apiStore.apiClient?.mutation(mutations.importSubscription, {
+      arg: {
+        tag,
+        link
+      },
+      rollbackError: false
+    })
+  }
+
+  await execute()
+
+  isSubscriptionModalOpen.value = false
+}
+
+const onError = (event: FormErrorEvent) => {
+  console.log(event)
+}
 </script>
 
 <template>
@@ -27,9 +75,71 @@ const { data: subscriptions } = useAsyncData(async () =>
     <UTable :rows="subscriptions" />
 
     <UModal v-model="isSubscriptionModalOpen">
-      <UCard>
-        <template #header>Import Subscriptions</template>
-      </UCard>
+      <UForm
+        :schema="schema"
+        :state="state"
+        @submit="onSubmit"
+        @error="onError"
+      >
+        <UCard>
+          <template #header>Import Subscriptions</template>
+
+          <div class="space-y-2">
+            <div
+              v-for="({ tag, link }, index) in state.importSubscriptions"
+              :key="index"
+              class="flex items-center gap-2"
+            >
+              <UInput
+                class="w-full"
+                :value="tag"
+                @input="
+                  (event: InputEvent) =>
+                    (state.importSubscriptions[index].tag = (
+                      event.target as HTMLInputElement
+                    ).value)
+                "
+              />
+
+              <UInput
+                class="w-full"
+                :value="link"
+                @input="
+                  (event: InputEvent) =>
+                    (state.importSubscriptions[index].link = (
+                      event.target as HTMLInputElement
+                    ).value)
+                "
+              />
+
+              <UButton
+                size="xs"
+                icon="i-heroicons-minus"
+                @click="state.importSubscriptions.splice(index, 1)"
+              />
+            </div>
+
+            <div class="flex justify-end">
+              <UButton
+                size="xs"
+                icon="i-heroicons-plus"
+                @click="
+                  state.importSubscriptions.push({
+                    tag: '',
+                    link: ''
+                  })
+                "
+              />
+            </div>
+          </div>
+
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton type="submit">Confirm</UButton>
+            </div>
+          </template>
+        </UCard>
+      </UForm>
     </UModal>
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
@@ -53,7 +53,7 @@ const accordionItems = [
 
 <template>
   <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
-    <UTabs :items="tabsItems" class="w-full">
+    <UTabs :items="tabsItems" class="w-full sm:w-1/2">
       <template #group>
         <ResourceGroup />
       </template>
@@ -71,7 +71,7 @@ const accordionItems = [
       </template>
     </UTabs>
 
-    <UAccordion :items="accordionItems">
+    <UAccordion :items="accordionItems" class="w-full sm:w-1/2">
       <template #subscription>
         <ResourceSubscription />
       </template>