wip: improved webhook gui

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/project/tableTabs/webhook/httpWebhook.vue

@@ -23,6 +23,9 @@
       class="req-tabs"
       height="24"
     >
+      <v-tab v-ge="['api-client','body']" class="caption">
+        <span class="text-capitalize">Body</span>
+      </v-tab>
       <v-tab v-ge="['api-client','params']" class="caption">
         <span class="text-capitalize"> Params&nbsp;<b
           v-if="paramsCount"
@@ -37,12 +40,19 @@
           headersCount
         }})</b></span>
       </v-tab>
-      <v-tab v-ge="['api-client','body']" class="caption">
-        <span class="text-capitalize">Body</span>
-      </v-tab>
       <v-tab v-ge="['api-client','auth']" class="caption">
         <span class="text-capitalize">Auth</span>
       </v-tab>
+      <v-tab-item>
+        <monaco-handlebar-editor
+          v-model="api.body"
+          style="height: 250px"
+          class="editor card text-left"
+          theme="vs-dark"
+          lang="json"
+          :options="{validate:true,documentFormattingEdits:true,foldingRanges:true}"
+        />
+      </v-tab-item>
       <v-tab-item>
         <params
           v-model="api.parameters"
@@ -55,23 +65,13 @@
           :env.sync="selectedEnv"
         />
       </v-tab-item>
+
       <v-tab-item>
-        <monaco-json-editor
-          v-model="api.body"
-          style="height: 250px"
-          class="editor card text-left"
-          theme="vs-dark"
-          lang="json"
-          :options="{validate:true,documentFormattingEdits:true,foldingRanges:true}"
-        />
-      </v-tab-item>
-      <v-tab-item>
-        <monaco-json-editor
+        <monaco-handlebar-editor
           v-model="api.auth"
           style="height: 250px"
           class="editor card text-left"
           theme="vs-dark"
-          lang="json"
           :options="{validate:true,documentFormattingEdits:true,foldingRanges:true}"
         />
         <span class="caption grey--text">For more about auth option refer <a href="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>.</span>
@@ -84,7 +84,7 @@
 import params from '../../../apiClient/params'
 import headers from '../../../apiClient/headers'
 
-import { MonacoJsonEditor } from '../../../monaco/index'
+import { MonacoHandlebarEditor } from '../../../monaco/index'
 
 export default {
   tab: 0,
@@ -92,7 +92,7 @@ export default {
   components: {
     params,
     headers,
-    MonacoJsonEditor
+    MonacoHandlebarEditor
   },
   props: {
     value: Object

packages/nc-gui/components/project/tableTabs/webhook/webhookEditor.vue

@@ -1,7 +1,17 @@
 <template>
-  <v-form v-if="hook" ref="form" v-model="valid" class="mx-auto" lazy-validation>
+  <v-form v-if="hook" ref="form" v-model="valid" class="mx-4" lazy-validation>
     <v-card-title>
-      Webhook / {{ hook.id ? hook.title : 'New' }}
+      <a class="pointer mr-1" @click="$emit('backToList')">
+        <v-icon>mdi-arrow-left-bold</v-icon>
+      </a>
+
+      <v-spacer />
+      {{ meta.title }} : {{ hook.title || 'Webhook' }}
+      <v-spacer />
+      <div style="width: 24px;height: 24px" />
+    </v-card-title>
+
+    <div class="mx-4 d-flex m-2">
       <v-spacer />
       <v-btn
         outlined
@@ -26,7 +36,8 @@
         <!-- Save -->
         {{ $t("general.save") }}
       </v-btn>
-    </v-card-title>
+    </div>
+
     <v-card-text>
       <v-text-field
         v-model="hook.title"
@@ -43,7 +54,7 @@
         :operation.sync="hook.operation"
       />
 
-      <v-card class="mb-8">
+      <v-card class="mb-8 nc-filter-wrapper">
         <v-card-text>
           <v-checkbox
             v-model="hook.condition"
@@ -51,7 +62,6 @@
             hide-details
             class="mt-1"
             label="On Condition"
-            @change="checkConditionAvail"
           />
 
           <column-filter
@@ -236,15 +246,17 @@
 import WebhooksTest from '~/components/project/tableTabs/webhook/webhooksTest'
 import WebhookEvent from '~/components/project/tableTabs/webhook/webhookEvent'
 import HttpWebhook from '~/components/project/tableTabs/webhook/httpWebhook'
+import ColumnFilter from '~/components/project/spreadsheet/components/columnFilter'
 export default {
   name: 'WebhookEditor',
-  components: { HttpWebhook, WebhookEvent, WebhooksTest },
+  components: { ColumnFilter, HttpWebhook, WebhookEvent, WebhooksTest },
   props: {
     meta: Object
   },
   data: () => ({
     hook: {
       notification: {
+        type: 'URL'
       }
     },
     valid: false,
@@ -416,15 +428,14 @@ export default {
             this.apps.Mattermost.parsedInput) ||
           []
       }
+      if (this.hook.notification.type === 'URL') {
+        this.notification = this.notification || {}
+        this.$set(this.notification, 'body', '{{ json data }}')
+      }
       this.$nextTick(() => this.$refs.form.validate())
     },
     async onEventChange() {
-      this.key++
-      if (!this.hooks || !this.hooks.length) {
-        return
-      }
-      const { notification: { payload, type } = {}, ...hook } =
-      this.hooks[this.selectedHook] || {}
+      const { notification: { payload, type } = {}, ...hook } = this.hook
 
       this.hook = {
         ...hook,
@@ -464,7 +475,8 @@ export default {
           )
       }
       if (this.hook.notification.type === 'URL') {
-        //
+        this.notification = this.notification || {}
+        this.$set(this.notification, 'body', this.notification.body || '{{ json data }}')
       }
     },
     async saveHooks() {
@@ -520,5 +532,7 @@ export default {
 </script>
 
 <style scoped>
-
+/deep/ .nc-filter-wrapper label {
+  font-size: 0.75rem !important;
+}
 </style>

packages/nc-gui/components/project/tableTabs/webhook/webhookList.vue

@@ -1,33 +1,47 @@
 <template>
   <div>
     <v-card-title>
-      Webhook
+      Webhooks
       <v-spacer />
       <v-btn
         outlined
         tooltip="Save"
         small
+        @click.prevent="$emit('add')"
       >
         Create webhook
       </v-btn>
     </v-card-title>
 
-    <div v-if="hooks" class="pa-4">
-      <v-card v-for="hook in hooks" v-ripple class="elevation-0 backgroundColor">
-        <div class="pa-4 ">
-          <h4 class="nc-text">
-            {{ hook.title }}
-          </h4>
-          <div class="d-flex">
-            <!--Title-->
-            <span class="caption textColor1--text">{{ $t("general.event") }} : {{ hook.event }} {{ hook.operation }}</span>
-            <v-spacer />
-            <!--Notify Via-->
-            <span class="caption textColor1--text">{{ $t("labels.notifyVia") }} : {{ hook.notification && hook.notification.type }}
-            </span>
+    <div v-if="hooks " class="pa-4">
+      <template v-if=" hooks.length">
+        <v-card v-for="(hook,i) in hooks" :key="hook.id" class="elevation-0 backgroundColor nc-hook" @click="$emit('edit', hook)">
+          <div class="pa-4 ">
+            <h4 class="nc-text">
+              {{ hook.title }}
+            </h4>
+            <div class="d-flex">
+              <!--Title-->
+              <span class="caption textColor1--text">{{ $t("general.event") }} : {{ hook.event }} {{
+                hook.operation
+              }}</span>
+              <v-spacer />
+              <!--Notify Via-->
+              <span class="caption textColor1--text">{{
+                $t("labels.notifyVia")
+              }} : {{ hook.notification && hook.notification.type }}
+              </span>
+            </div>
           </div>
-        </div>
-      </v-card>
+
+          <v-icon class="nc-hook-delete-icon" small @click.stop="deleteHook(hook,i)">
+            mdi-delete-outline
+          </v-icon>
+        </v-card>
+      </template>
+      <div v-else class="pa-4 backgroundColor caption textColor--text text--lighten-3">
+        Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
+      </div>
     </div>
 
     <!--    <v-simple-table dense>
@@ -130,11 +144,43 @@ export default {
         return h
       })
       this.loading = false
+    },
+    async deleteHook(item, i) {
+      try {
+        if (item.id) {
+          await this.$api.dbTableWebhook.delete(item.id)
+          this.hooks.splice(i, 1)
+        } else {
+          this.hooks.splice(i, 1)
+        }
+        this.$toast.success('Hook deleted successfully').goAway(3000)
+        if (!this.hooks.length) {
+          this.hook = null
+        }
+      } catch (e) {
+        this.$toast.error(e.message).goAway(3000)
+      }
+
+      this.$e('a:webhook:delete')
     }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.nc-hook {
+  position: relative;
 
+  .nc-hook-delete-icon {
+    position: absolute;
+    opacity: 0;
+    transition: .3s opacity;
+    right: 16px;
+    top: 16px
+  }
+
+  &:hover .nc-hook-delete-icon {
+    opacity: 1;
+  }
+}
 </style>

packages/nc-gui/components/project/tableTabs/webhook/webhookModal.vue

@@ -6,8 +6,8 @@
       min-height="350px"
       class="pa-4"
     >
-      <webhook-editor v-if="editOrAdd" :meta="meta" />
-      <webhook-list v-else :meta="meta" @edit="editOrAdd=true" @add="editOrAdd=true" />
+      <webhook-editor v-if="editOrAdd" ref="editor" :meta="meta" @backToList="editOrAdd = false" />
+      <webhook-list v-else :meta="meta" @edit="editHook" @add="editOrAdd = true" />
     </v-card>
   </v-dialog>
 </template>
@@ -36,6 +36,15 @@ export default {
         this.$emit('input', v)
       }
     }
+  },
+  methods: {
+    editHook(hook) {
+      this.editOrAdd = true
+      this.$nextTick(() => {
+        this.$refs.editor.hook = { ...hook }
+        this.$refs.editor.onEventChange()
+      })
+    }
   }
 }
 </script>