Split up global settings rest/web actions in th eUI

amidaware · Apr 14, 2024 · 6eda2a6 · 6eda2a6
1 parent 409abdc
commit 6eda2a6
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 78 deletions.
diff --git a/quasar.extensions.json b/quasar.extensions.json
diff --git a/src/api/core.ts b/src/api/core.ts
@@ -21,7 +21,7 @@ export async function fetchCustomFields(params = {}) {
   }
 }
 
-export async function fetchURLActions(params = {}) {
+export async function fetchURLActions(params = {}): Promise<URLAction[]> {
   const { data } = await axios.get(`${baseUrl}/urlaction/`, {
     params: params,
   });

diff --git a/src/components/modals/coresettings/EditCoreSettings.vue b/src/components/modals/coresettings/EditCoreSettings.vue
@@ -10,6 +10,7 @@
           <q-tab name="customfields" label="Custom Fields" />
           <q-tab name="keystore" label="Key Store" />
           <q-tab name="urlactions" label="URL Actions" />
+          <q-tab name="webhooks" label="Web Hooks" />
           <q-tab name="retention" label="Retention" />
           <q-tab name="apikeys" label="API Keys" />
           <q-tab name="tasks" label="Server Tasks" />
@@ -489,17 +490,28 @@
                   </q-input>
                 </q-card-section>
               </q-tab-panel>
+
+              <!-- custom fields -->
               <q-tab-panel name="customfields">
                 <CustomFields />
               </q-tab-panel>
 
+              <!-- key store -->
               <q-tab-panel name="keystore">
                 <KeyStoreTable />
               </q-tab-panel>
 
+              <!-- url actions -->
               <q-tab-panel name="urlactions">
-                <URLActionsTable />
+                <URLActionsTable type="web" />
+              </q-tab-panel>
+
+              <!-- web hooks -->
+              <q-tab-panel name="webhooks">
+                <URLActionsTable type="rest" />
               </q-tab-panel>
+
+              <!-- retention -->
               <q-tab-panel name="retention">
                 <q-card-section class="row">
                   <div class="col-4">Check History (days):</div>

diff --git a/src/components/modals/coresettings/URLActionsForm.vue b/src/components/modals/coresettings/URLActionsForm.vue
@@ -7,7 +7,15 @@
   >
     <q-card class="q-dialog-plugin" style="width: 60vw">
       <q-bar>
-        {{ props.action ? "Edit URL Action" : "Add URL Action" }}
+        {{
+          props.action
+            ? props.type === "web"
+              ? "Edit URL Action"
+              : "Edit Web Hook"
+            : props.type === "web"
+              ? "Add URL Action"
+              : "Add Web Hook"
+        }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
           <q-tooltip class="bg-white text-primary">Close</q-tooltip>
@@ -36,16 +44,6 @@
           />
         </q-card-section>
 
-        <!-- url action type -->
-        <q-card-section>
-          <q-option-group
-            v-model="localAction.action_type"
-            :options="URLActionOptions"
-            color="primary"
-            inline
-          />
-        </q-card-section>
-
         <!-- pattern -->
         <q-card-section>
           <q-input
@@ -57,7 +55,7 @@
           />
         </q-card-section>
 
-        <q-card-section v-if="localAction.action_type === 'rest'">
+        <q-card-section v-if="type === 'rest'">
           <q-select
             v-model="localAction.rest_method"
             label="Method"
@@ -69,7 +67,7 @@
           />
         </q-card-section>
 
-        <q-card-section v-show="localAction.action_type === 'rest'">
+        <q-card-section v-show="type === 'rest'">
           <q-toolbar>
             <q-space />
             <q-tabs v-model="tab" dense shrink>
@@ -100,26 +98,21 @@ import { ref, computed, reactive, watch } from "vue";
 import { useDialogPluginComponent, useQuasar, extend } from "quasar";
 import { editURLAction, saveURLAction } from "@/api/core";
 import { notifySuccess } from "@/utils/notify";
-import { URLAction } from "@/types/core/urlactions";
+import { URLAction, URLActionType } from "@/types/core/urlactions";
 
 import * as monaco from "monaco-editor";
 
 // define emits
 defineEmits([...useDialogPluginComponent.emits]);
 
 // define props
-const props = defineProps<{ action?: URLAction }>();
+const props = defineProps<{ type: URLActionType; action?: URLAction }>();
 
 // setup quasar
 const $q = useQuasar();
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 
 // static data
-const URLActionOptions = [
-  { value: "web", label: "Web" },
-  { value: "rest", label: "REST" },
-];
-
 const URLActionMethods = [
   { value: "get", label: "GET" },
   { value: "post", label: "POST" },
@@ -134,7 +127,7 @@ const localAction: URLAction = props.action
       name: "",
       desc: "",
       pattern: "",
-      action_type: "web",
+      action_type: props.type,
       rest_body: "{\n    \n}",
       rest_method: "get",
       rest_headers: "{\n    \n}",

diff --git a/src/components/modals/coresettings/URLActionsTable.vue b/src/components/modals/coresettings/URLActionsTable.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="row">
-      <div class="text-subtitle2">URL Actions</div>
+      <div class="text-subtitle2">
+        {{ props.type === "web" ? "URL Actions" : "Web Hooks" }}
+      </div>
       <q-space />
       <q-btn
         size="sm"
@@ -24,6 +26,7 @@
       virtual-scroll
       :rows-per-page-options="[0]"
       no-data-label="No URL Actions added yet"
+      :loading="loading"
     >
       <!-- body slots -->
       <template v-slot:body="props">
@@ -67,10 +70,6 @@
           <q-td>
             {{ props.row.desc }}
           </q-td>
-          <!-- action type -->
-          <q-td>
-            {{ props.row.action_type }}
-          </q-td>
           <!-- pattern -->
           <q-td>
             {{ props.row.pattern }}
@@ -92,12 +91,17 @@ import { notifySuccess } from "@/utils/notify";
 import URLActionsForm from "@/components/modals/coresettings/URLActionsForm.vue";
 
 // types
-import { type URLAction } from "@/types/core/urlactions";
+import { type URLActionType, type URLAction } from "@/types/core/urlactions";
+
+// define props
+const props = defineProps<{ type: URLActionType }>();
 
 // setup quasar
 const $q = useQuasar();
 
-const actions = ref([]);
+const loading = ref(false);
+
+const actions = ref([] as URLAction[]);
 
 const columns: QTableColumn[] = [
   {
@@ -107,13 +111,6 @@ const columns: QTableColumn[] = [
     align: "left",
     sortable: true,
   },
-  {
-    name: "action_type",
-    label: "Type",
-    field: "action_type",
-    align: "left",
-    sortable: true,
-  },
   {
     name: "desc",
     label: "Description",
@@ -134,7 +131,9 @@ async function getURLActions() {
   $q.loading.show();
   try {
     const result = await fetchURLActions();
-    actions.value = result;
+    actions.value = result.filter(
+      (action) => action.action_type === props.type,
+    );
   } catch (e) {
     console.error(e);
   }
@@ -145,34 +144,37 @@ async function getURLActions() {
 function addURLAction() {
   $q.dialog({
     component: URLActionsForm,
+    componentProps: {
+      type: props.type,
+    },
   }).onOk(getURLActions);
 }
 
 function editURLAction(action: URLAction) {
   $q.dialog({
     component: URLActionsForm,
     componentProps: {
+      type: props.type,
       action: action,
     },
   }).onOk(getURLActions);
 }
+
 function deleteURLAction(action: URLAction) {
   $q.dialog({
     title: `Delete URL Action: ${action.name}?`,
     cancel: true,
     ok: { label: "Delete", color: "negative" },
   }).onOk(async () => {
-    $q.loading.show();
-
+    loading.value = true;
     try {
       await removeURLAction(action.id);
       await getURLActions();
       notifySuccess(`URL Action: ${action.name} was deleted!`);
     } catch (e) {
       console.error(e);
     }
-
-    $q.loading.hide();
+    loading.value = false;
   });
 }
 onMounted(getURLActions);

diff --git a/src/types/core/urlactions.ts b/src/types/core/urlactions.ts
@@ -1,10 +1,10 @@
-export type ActionType = "web" | "rest";
+export type URLActionType = "web" | "rest";
 
 export interface URLAction {
   id: number;
   name: string;
   desc?: string;
-  action_type: ActionType;
+  action_type: URLActionType;
   pattern: string;
   rest_method: string;
   rest_body: string;

diff --git a/vitest.config.mts b/vitest.config.mts