refactor(global): use switch to show and control enable status

emqx · May 7, 2022 · 862281b · 862281b
1 parent a4db41a
commit 862281b
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 81 deletions.
diff --git a/src/i18n/Base.js b/src/i18n/Base.js
@@ -395,4 +395,8 @@ export default {
     zh: '以  -----BEGIN RSA PRIVATE KEY----- 开头',
     en: 'Begins with -----BEGIN RSA PRIVATE KEY-----',
   },
+  isEnabled: {
+    zh: '是否启用',
+    en: 'Enable',
+  },
 }
diff --git a/src/views/APIKey/APIKey.vue b/src/views/APIKey/APIKey.vue
@@ -25,15 +25,17 @@
           </span>
         </template>
       </el-table-column>
+      <el-table-column prop="enable" :label="$t('Base.isEnabled')">
+        <template #default="{ row }">
+          <el-switch v-model="row.enable" @change="toggleKeyItemEnable(row)" />
+        </template>
+      </el-table-column>
       <el-table-column :label="$t('Base.operation')" min-width="100">
         <template #default="{ row }">
           <el-button size="small" @click="operateKeyItem('view', row)"> {{ tl('view') }}</el-button>
           <el-button size="small" @click="operateKeyItem('edit', row)">
             {{ tl('edit', 'Base') }}
           </el-button>
-          <el-button size="small" @click="toggleKeyItemEnable(row)">
-            {{ tl(!row.enable ? 'enable' : 'disable') }}
-          </el-button>
           <el-button size="small" @click="deleteKey(row)">{{ tl('delete', 'Base') }}</el-button>
         </template>
       </el-table-column>
@@ -84,17 +86,17 @@ const toggleKeyItemEnable = async (itemData: APIKey) => {
   try {
     const { name, enable, expired_at, desc } = itemData
     const body: { enable: boolean; desc: string; expired_at?: string } = {
-      enable: !enable,
+      enable,
       desc,
     }
     if (expired_at) {
       body.expired_at = expired_at
     }
     await updateAPIKey(name, body)
-    ElMessage.success(t(`Base.${!enable ? 'enableSuccess' : 'disabledSuccess'}`))
-    getList()
+    ElMessage.success(t(`Base.${enable ? 'enableSuccess' : 'disabledSuccess'}`))
   } catch (error) {
     console.error(error)
+    itemData.enable = !itemData.enable
   }
 }
 

diff --git a/src/views/Auth/Authn.vue b/src/views/Auth/Authn.vue
@@ -39,18 +39,22 @@
         prop="metrics.metrics.rate"
         :min-width="148"
       />
+      <el-table-column prop="enable" :label="$t('Base.isEnabled')" :min-width="92">
+        <template #default="{ row }">
+          <el-switch v-model="row.enable" @change="toggleEnable(row)" />
+        </template>
+      </el-table-column>
       <el-table-column prop="enable" :label="$t('Auth.status')" :min-width="116">
         <template #default="{ row }">
           <AuthItemStatus :enable="row.enable" :metrics="row.metrics" />
         </template>
       </el-table-column>
-      <el-table-column prop="oper" :label="$t('Base.operation')" :min-width="232">
+      <el-table-column prop="oper" :label="$t('Base.operation')" :min-width="168">
         <template #default="{ row, $index }">
           <table-dropdown
             :row-data="row"
             :table-data-len="authnList.length"
             :position="findIndex(row)"
-            @update="handleUpdate"
             @delete="handleDelete"
             @setting="handleSetting"
             @move-up="moveAuthnUp($index)"
@@ -96,13 +100,15 @@ const {
   moveAuthnToBottom,
 } = useAuthn()
 
-const handleUpdate = async (row: AuthnItemInTable) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { img, metrics, ...data } = row
-  await updateAuthn(row.id, data)
-  ElMessage.success(t('Base.updateSuccess'))
-  await getAuthnList()
-  await updateAuthnItemMetrics(row)
+const toggleEnable = async (row: AuthnItemInTable) => {
+  try {
+    const { img, metrics, ...data } = row
+    await updateAuthn(row.id, data)
+    ElMessage.success(t(row.enable ? 'Base.enableSuccess' : 'Base.disabledSuccess'))
+    await updateAuthnItemMetrics(row)
+  } catch (error) {
+    row.enable = !row.enable
+  }
 }
 
 const handleDelete = async function ({ id }: AuthnItem) {

diff --git a/src/views/Auth/Authz.vue b/src/views/Auth/Authz.vue
@@ -37,25 +37,30 @@
         prop="metrics.metrics.rate"
         :min-width="148"
       />
+      <el-table-column prop="enable" :label="$t('Base.isEnabled')" :min-width="92">
+        <template #default="{ row }">
+          <el-switch v-model="row.enable" @change="toggleEnable(row)" />
+        </template>
+      </el-table-column>
+      <!-- FIXME: -->
       <el-table-column prop="enable" :label="$t('Auth.status')" :min-width="116">
         <template #default="{ row }">
           <AuthItemStatus :enable="row.enable" :metrics="row.metrics" />
         </template>
       </el-table-column>
-      <el-table-column prop="oper" :label="$t('Base.operation')" :min-width="232">
+      <el-table-column prop="oper" :label="$t('Base.operation')" :min-width="168">
         <template #default="{ row, $index }">
           <table-dropdown
             :row-data="row"
             :table-data-len="authzList.length"
             :position="$index"
-            @update="handleUpdate"
             @delete="handleDelete"
             @setting="handleSetting"
             @move-up="moveAuthzUp($index)"
             @move-down="moveAuthzDown($index)"
             @move-to-top="moveAuthzToTop(row)"
             @move-to-bottom="moveAuthzToBottom(row)"
-          ></table-dropdown>
+          />
         </template>
       </el-table-column>
     </el-table>
@@ -96,12 +101,15 @@ const {
   moveAuthzToBottom,
 } = useAuthz()
 
-const handleUpdate = async (row: AuthzItemInTable) => {
-  const { img, metrics, ...data } = row
-  await updateAuthz(row.type, data)
-  ElMessage.success(t('Base.updateSuccess'))
-  await getAuthzList()
-  await updateAuthnItemMetrics(row)
+const toggleEnable = async (row: AuthzItemInTable) => {
+  try {
+    const { img, metrics, ...data } = row
+    await updateAuthz('row.type', data)
+    ElMessage.success(t(row.enable ? 'Base.enableSuccess' : 'Base.disabledSuccess'))
+    await updateAuthnItemMetrics(row)
+  } catch (error) {
+    row.enable = !row.enable
+  }
 }
 
 const handleDelete = async function ({ type }: AuthzSourceItem) {

diff --git a/src/views/Auth/components/TableDropdown.vue b/src/views/Auth/components/TableDropdown.vue
@@ -3,9 +3,6 @@
     <el-button size="small" @click="$emit('setting', rowData)">
       {{ $t('Base.setting') }}
     </el-button>
-    <el-button size="small" @click="$emit('update', { ...rowData, enable: !rowData.enable })">
-      {{ rowData.enable ? $t('Base.disable') : $t('Base.enable') }}
-    </el-button>
     <el-dropdown
       @command="handleCommand(rowData, $event)"
       @visible-change="dropdownVisibleChanged"
@@ -50,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue'
+import { defineComponent, PropType, ref } from 'vue'
 import { Top, Bottom, Delete, CaretBottom, ArrowUp, ArrowDown } from '@element-plus/icons-vue'
 import { AuthnItem } from '@/types/auth'
 
@@ -71,12 +68,13 @@ export default defineComponent({
       type: Number,
     },
   },
-  emits: ['setting', 'delete', 'move-up', 'move-down', 'move-to-top', 'move-to-bottom', 'update'],
+  emits: ['setting', 'delete', 'move-up', 'move-down', 'move-to-top', 'move-to-bottom'],
   setup(props, ctx) {
     const dropdownVisible = ref<boolean>(false)
     const dropdownVisibleChanged = (value: boolean) => {
       dropdownVisible.value = value
     }
+
     const handleCommand = function (
       row: AuthnItem,
       command: 'delete' | 'moveToTop' | 'moveToBottom' | 'moveUp' | 'moveDown',

diff --git a/src/views/Exhook/Exhook.vue b/src/views/Exhook/Exhook.vue
@@ -40,22 +40,22 @@
           {{ row.metrics?.rate }}
         </template>
       </el-table-column>
+      <el-table-column prop="enable" :label="$t('Base.isEnabled')" :min-width="92">
+        <template #default="{ row }">
+          <el-switch v-model="row.enable" @change="changeExhookStatus(row)" />
+        </template>
+      </el-table-column>
+      <!-- FIXME: -->
       <el-table-column :label="tl('status')" :min-width="132">
         <template #default="{ row }">
           <ExhookItemStatus :exhook="row" />
         </template>
       </el-table-column>
-      <el-table-column :label="$t('Base.operation')" :min-width="220">
+      <el-table-column :label="$t('Base.operation')" :min-width="168">
         <template #default="{ row, $index }">
           <el-button size="small" @click="goExhookDetail(row)">
             {{ tl('setting', 'Base') }}
           </el-button>
-          <el-button size="small" v-if="!row.enable" @click="changeExhookStatus(row, true)">
-            {{ tl('enable', 'Base') }}
-          </el-button>
-          <el-button size="small" v-else @click="changeExhookStatus(row, false)">
-            {{ tl('disable', 'Base') }}
-          </el-button>
           <TableItemDropdown
             :row-data="row"
             :table-len="exhooks.length"
@@ -84,6 +84,7 @@ import useSortableTable from '@/hooks/useSortableTable'
 import { SortableEvent } from 'sortablejs'
 import ExhookItemStatus from './components/ExhookItemStatus.vue'
 import useMove from '@/hooks/useMove'
+import { ElMessage } from 'element-plus'
 
 const router = useRouter()
 const { t } = useI18n()
@@ -152,9 +153,12 @@ const goExhookDetail = (exhook: Exhook) => {
   router.push(exhookDetailRoute(exhook))
 }
 
-const changeExhookStatus = async (exhook: Exhook, enable: boolean) => {
-  await updateExhookEnable(exhook, enable)
-  getExhooks()
+const changeExhookStatus = async (exhook: Exhook) => {
+  try {
+    await updateExhookEnable(exhook, exhook.enable)
+  } catch (error) {
+    exhook.enable = !exhook.enable
+  }
 }
 
 const handleDeleteExhook = async (exhook: Exhook) => {

diff --git a/src/views/Listener/Listener.vue b/src/views/Listener/Listener.vue
@@ -32,24 +32,16 @@
           </el-tooltip>
         </template>
       </el-table-column>
-      <el-table-column :label="t('Base.status')" :min-width="90">
+      <el-table-column prop="enable" :label="$t('Base.isEnabled')" :min-width="92">
         <template #default="{ row }">
-          <span class="node-status">
-            <el-badge is-dot :type="getListenerStatusClass(row)" />
-            <span class="text-status" :class="getListenerStatusClass(row)">
-              {{ getStatusLabel(row) }}
-            </span>
-          </span>
+          <el-switch v-model="row.enable" @change="toggleListenerStatus(row)" />
         </template>
       </el-table-column>
-      <el-table-column :label="$t('Base.operation')" :min-width="220">
+      <el-table-column :label="$t('Base.operation')" :min-width="152">
         <template #default="{ row }">
           <el-button size="small" @click="editListener(row)">
             {{ $t('Base.edit') }}
           </el-button>
-          <el-button size="small" @click="toggleListenerStatus(row)">
-            {{ $t(`Base.${row.enable ? 'disable' : 'enable'}`) }}
-          </el-button>
           <el-button size="small" type="danger" plain @click="deleteListener(row)">
             {{ $t('Base.delete') }}
           </el-button>
@@ -72,7 +64,7 @@ import {
 import useListenerUtils from '@/hooks/Config/useListenerUtils'
 import { Listener, ListenerSimpleInfo } from '@/types/listener'
 import { calcPercentage } from '@/common/utils'
-import { NodeStatusClass, ListenerAction } from '@/types/enum'
+import { ListenerAction } from '@/types/enum'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import ListenerDialog from '@/components/ListenerDialog/ListenerDialog.vue'
 
@@ -101,11 +93,6 @@ const getListenerData = async () => {
   }
 }
 
-const getListenerStatusClass = ({ enable }: Listener) =>
-  enable ? NodeStatusClass.Success : NodeStatusClass.Danger
-
-const getStatusLabel = ({ enable }: Listener) => t(`Base.${enable ? 'enable' : 'disable'}`)
-
 const addListener = () => {
   currentListener.value = undefined
   showDialog.value = true
@@ -116,11 +103,15 @@ const editListener = (listener: Listener) => {
   showDialog.value = true
 }
 
-const toggleListenerStatus = async ({ id, enable }: Listener) => {
-  const action = enable ? ListenerAction.Stop : ListenerAction.Start
-  await handleListener(id, action)
-  ElMessage.success(t(`Base.${enable ? 'disabledSuccess' : 'enableSuccess'}`))
-  getListenerData()
+const toggleListenerStatus = async (listener: Listener) => {
+  try {
+    const { enable, id } = listener
+    const action = enable ? ListenerAction.Start : ListenerAction.Stop
+    await handleListener(id, action)
+    ElMessage.success(t(`Base.${enable ? 'enableSuccess' : 'disabledSuccess'}`))
+  } catch (error) {
+    listener.enable = !listener.enable
+  }
 }
 
 const deleteListener = async ({ id }: Listener) => {

diff --git a/src/views/RuleEngine/Bridge/DataBridge.vue b/src/views/RuleEngine/Bridge/DataBridge.vue
@@ -41,19 +41,22 @@
             prop="metrics.rate"
             :min-width="168"
           />
+          <el-table-column prop="enable" :label="$t('Base.isEnabled')" :min-width="92">
+            <template #default="{ row }">
+              <el-switch v-model="row.enable" @change="enableOrDisableBridge(row)" />
+            </template>
+          </el-table-column>
+          <!-- FIXME: -->
           <el-table-column :label="tl('status')" sortable :min-width="120">
             <template #default="{ row }">
               <BridgeItemStatus :bridge="row" />
             </template>
           </el-table-column>
-          <el-table-column :label="$t('Base.operation')" :min-width="232">
+          <el-table-column :label="$t('Base.operation')" :min-width="168">
             <template #default="{ row }">
               <el-button size="small" @click="$router.push(getBridgeDetailPageRoute(row.id))">
                 {{ $t('Base.setting') }}
               </el-button>
-              <el-button size="small" @click="enableOrDisableBridge(row)">
-                {{ row.enable ? $t('Base.disable') : $t('Base.enable') }}
-              </el-button>
               <el-button size="small" type="danger" plain @click="submitDeleteBridge(row.id)">
                 {{ $t('Base.delete') }}
               </el-button>
@@ -96,17 +99,14 @@ export default defineComponent({
     }
 
     const enableOrDisableBridge = async (row: BridgeItem) => {
-      tbLoading.value = true
-      const statusToSend = row.enable ? 'disable' : 'enable'
-      const sucMessage = row.enable ? 'Base.disabledSuccess' : 'Base.enableSuccess'
+      const statusToSend = row.enable ? 'enable' : 'disable'
+      const sucMessage = row.enable ? 'Base.enableSuccess' : 'Base.disabledSuccess'
       try {
         await startStopBridge(row.id, statusToSend)
         M.success(t(sucMessage))
-        listBridge()
       } catch (error) {
         console.error(error)
-      } finally {
-        tbLoading.value = false
+        row.enable = !row.enable
       }
     }