Issues/1721

package.json

@@ -40,6 +40,7 @@
         "system": "^2.0.1",
         "v-markdown-editor": "^1.2.6",
         "valid-url": "^1.0.9",
+        "validator": "^13.7.0",
         "vue": "^2.5.16",
         "vue-codemirror": "^4.0.6",
         "vue-css-donut-chart": "^1.3.0",

src/components/admin/createProjectSlider/CreateProjectSlide.vue

@@ -283,6 +283,28 @@
             </b-collapse>
           </b-card>
 
+          <!-- Custom API Config -->
+
+          <b-card no-body class="mb-1">
+            <b-card-header header-tag="header" class="p-1 accordin-header accordion-header-theme"  :style="headerThemeCss" role="tab">
+              <b-button block v-b-toggle.accordion-10 variant="info"
+                class="bg-transparent border-0 text-left theme-color"
+                title="Create Custom Api configuration for your event">
+                <img src="../../../assets/filled-rest-api-50.png" height="20px" class="ml-0" />
+                Custom API Configurations
+              </b-button>
+            </b-card-header>
+            <b-collapse id="accordion-10" accordion="my-accordion" role="tabpanel">
+              <b-card-body>               
+                <custom-api-event-action-config
+                v-on="$listeners"
+                :eventActionList="CustomApi"
+                eventActionType="CUSTOMAPI"                
+                ></custom-api-event-action-config>
+              </b-card-body>
+            </b-collapse>
+          </b-card>
+
           <!-- <b-card no-body class="mb-1">
             <b-card-header
               header-tag="header"
@@ -381,6 +403,7 @@ import KycEventActionConfig from "../createProjectSlider/components/KycEventActi
 import PrizeEventActionConfig from "../createProjectSlider/components/PrizeEventActionConfig.vue"
 import SmartContractEventActionConfig from "../createProjectSlider/components/SmartContractEventActionConfig.vue"
 import CustomContractEventActionConfig from "../createProjectSlider/components/CustomContractEventActionConfig.vue"
+import CustomApiEventActionConfig from "../createProjectSlider/components/CustomApiEventActionConfig.vue"
 export default {
   name: "CreateProjectSlide",
   components: {
@@ -395,7 +418,8 @@ export default {
     KycEventActionConfig,
     PrizeEventActionConfig,
     SmartContractEventActionConfig,
-    CustomContractEventActionConfig
+    CustomContractEventActionConfig,
+    CustomApiEventActionConfig
   },
 
   props: {
@@ -464,6 +488,16 @@ export default {
       '--header-text-color':config.app.headerTextColor
       }
   },
+    CustomApi: function () {      
+       if (this.actionList && this.actionList.length > 0) {
+        return this.actionList.filter(
+          (x) =>
+            x.type.indexOf("CUSTOM_API") > -1          
+        );
+      } else {
+        return [];
+      }
+    },
     getTagDb: function () {
       if (this.tagFdb && this.tagFdb.length > 0) {
         for (let index = 0; index < this.tagFdb.length; index++) {

src/components/admin/createProjectSlider/components/ActionInputs/CustomApi.vue

@@ -0,0 +1,133 @@
+<template>
+  <b-card no-body class="action-wrap">
+    <b-card-header :class="visible ? null : 'collapsed'" :aria-expanded="visible ? 'true' : 'false'"
+      :aria-controls="`collapse-${idValue}`" @click="visible = !visible">
+      <b-row>
+        <b-col cols="1" sm="1" md="1">
+          <img src="../../../assets/filled-rest-api-50.png" height="25px" />
+          <!-- <img src="../../../assets/metamask.svg" height="25px" /> -->
+        </b-col>
+        <b-col cols="9" sm="9" class="text-left" md="9">
+          <div class="text text-capitalize">{{ data.title }}</div>
+        </b-col>
+
+        <b-col cols="2" sm="2" md="2">
+          <b-badge class="btn-score" :style="buttonThemeCss" @click="authToken && update()" v-if="!done">
+           <i class="fa fa-plus" aria-hidden="true"></i>
+            {{ data.score }}
+          </b-badge>
+          <img class="check-mark" src="../../../assets/check-circle-fill.svg" height="25px" v-if="done" />
+        </b-col>
+      </b-row>
+    </b-card-header>
+    <b-collapse :id="`collapse-${idValue}`" v-model="visible">
+      <b-card-body class="user-details">
+        <b-row>
+          <b-col cols="12" sm="12" md="12">
+            <div class="metamask">
+              <b-form-input type="text"
+              :placeholder="data.placeHolder"
+              v-model="value"
+              :disabled="done"
+              :required="data.isManadatory"
+              ></b-form-input>
+
+            </div>
+          </b-col>
+        </b-row>  
+        <b-row v-if="!done">
+          <b-col cols="12" sm="12" md="12">
+            <button class="btn btn-link center" @click="update()">Continue</button>
+          </b-col>
+        </b-row>
+      </b-card-body>
+    </b-collapse>
+  </b-card>
+</template>
+<style scoped>
+.center{
+  display: block; margin-left: auto;margin-right: auto
+}
+</style>
+
+<script>
+
+import eventBus from "../../../eventBus.js";
+import apiClient from "../../../mixins/apiClientMixin.js";
+import {
+  isValidURL,
+  isValidText,
+  isEmpty,
+} from "../../../mixins/fieldValidationMixin";
+import notificationMixins from "../../../mixins/notificationMixins";
+import Messages from "../../../utils/messages/participants/en";
+import ErrorMessage from "../ErrorMessage.vue";
+export default {
+  name: "CustomApi",
+  props: {
+    idValue: {
+      required: true,
+    },
+    data: {
+      required: true,
+    },
+    authToken: {
+      required: true
+    },
+    done: {
+      required: true,
+    },
+    themeData: {
+      required: true,
+    }
+  },
+  components: {
+    ErrorMessage,
+  },
+computed:{
+ buttonThemeCss() {
+      return {
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
+      }
+     }
+  },
+  data() {
+    return {
+      visible: false,
+      value:""
+      }
+  },
+  mounted() {
+    if(this.done && this.data.value){
+      this.value = this.data.value
+    }
+    eventBus.$on(`disableInput${this.data._id}`, this.disableInput);
+  },
+  methods: {
+    async update() {      
+      if (!this.value || this.value === "") {
+        return this.notifyErr('Enter value');
+      } else {
+        this.$emit("input",this.value);
+      }
+    },
+    // isFieldValid() {
+    //   if (isEmpty(this.value.userWalletAddress)) {
+    //     return false;
+    //   }
+    //   if (isValidURL(this.value.userWalletAddress)) {
+    //     return false;
+    //   }
+    //   if (!isValidText(this.value.userWalletAddress)) {
+    //     return false;
+    //   }
+    //   return true;
+    // },
+    disableInput(data) {
+     this.data.isDone = data;
+    },
+  },
+  mixins: [notificationMixins],
+};
+</script>