From b44fb7565c97def59b571b2fec6ad9be1b0c3690 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Thu, 21 Mar 2024 13:56:32 +0800
Subject: [PATCH] feat: disable config form modal submit button when nothing
 changed

---
 components/ConfigFormModal.vue | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/components/ConfigFormModal.vue b/components/ConfigFormModal.vue
index 75415df..ef9bf8f 100644
--- a/components/ConfigFormModal.vue
+++ b/components/ConfigFormModal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Form, FormErrorEvent, FormSubmitEvent } from '#ui/types'
+import { isEqual } from 'lodash-es'
 import { z } from 'zod'
 
 withDefaults(
@@ -223,6 +224,8 @@ enum UTLSImitate {
   qq_11_1 = 'qq_11_1'
 }
 
+const isResetDisabled = computed(() => isEqual(state, initialState()))
+
 const onReset = () => {
   formRef.value?.clear()
   Object.assign(state, initialState())
@@ -324,8 +327,15 @@ defineExpose({
                   :loading="isLanInterfaceLoading"
                   :options="lanInterfaceOptions"
                   multiple
-                  placeholder="Select LanInterfaces"
-                />
+                >
+                  <template #label>
+                    <span v-if="state.lanInterface.length" class="truncate">
+                      {{ state.lanInterface.join(', ') }}
+                    </span>
+
+                    <span v-else>Select LanInterfaces</span>
+                  </template>
+                </USelectMenu>
               </UFormGroup>
 
               <UFormGroup label="wanInterface">
@@ -334,8 +344,15 @@ defineExpose({
                   :loading="isWanInterfaceLoading"
                   :options="wanInterfaceOptions"
                   multiple
-                  placeholder="Select wanInterfaces"
-                />
+                >
+                  <template #label>
+                    <span v-if="state.wanInterface.length" class="truncate">
+                      {{ state.wanInterface.join(', ') }}
+                    </span>
+
+                    <span v-else>Select WanInterfaces</span>
+                  </template>
+                </USelectMenu>
               </UFormGroup>
 
               <UFormGroup label="autoConfigKernelParameter">
@@ -461,7 +478,9 @@ defineExpose({
 
         <template #footer>
           <div class="flex justify-end gap-2">
-            <UButton color="black" @click="onReset"> Reset </UButton>
+            <UButton :disabled="isResetDisabled" color="black" @click="onReset">
+              Reset
+            </UButton>
             <UButton :loading="isLoading" type="submit">Submit</UButton>
           </div>
         </template>