nocodb/packages/nc-gui/components/project/appStore/appInstall.vue

<template>
  <v-container fluid class="textColor--text">
    <v-form v-model="valid">
      <template v-if="formDetails">
        <div class="title  d-flex align-center justify-center mb-4">
          <div :style="{ background : plugin.title === 'SES' ? '#242f3e' : '' }"
               class="mr-1 d-flex align-center justify-center"
               :class="{ 'pa-2' : plugin.title === 'SES'}" v-if="plugin.logo">
            <img
              :src="plugin.logo" height="25">
          </div>
          <v-icon
            color="#242f3e" size="30" v-else-if="plugin.icon" class="mr-1">{{ plugin.icon }}
          </v-icon>

          <span @dblclick="copyDefault">{{ formDetails.title }}</span>
        </div>

        <v-divider class="mb-7"></v-divider>
        <div v-if="formDetails.array">

          <table class="form-table mx-auto" >
            <thead>
            <tr>
              <th v-for="(item,i) in formDetails.items" :key="i">
                <label class="caption ">{{ item.label }} <span v-if="item.required" class="red--text">*</span></label>
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(set,j) in settings" :key="j">
              <td v-for="(item,i) in formDetails.items" :key="i">
                <form-input :input-details="item" v-model="set[item.key]"></form-input>
              </td>
              <td v-if="j">
                <x-icon small iconClass="pointer" color="error" @click="settings.splice(j,1)">mdi-delete-outline
                </x-icon>
              </td>

            </tr>

            <tr>
              <td :colspan="formDetails.items.length" class="text-center">
                <x-icon iconClass="pointer" @click="settings.push({})">mdi-plus</x-icon>
              </td>
            </tr>
            </tbody>
          </table>


        </div>


        <div class="form-grid" v-else>
          <template v-for="(item,i) in formDetails.items">
            <div :key="i" class="text-right form-input-label">
              <label class="caption ">{{ item.label }} <span v-if="item.required" class="red--text">*</span></label>
            </div>
            <div :key="i">
              <form-input :input-details="item" v-model="settings[item.key]"></form-input>
            </div>
          </template>
        </div>


        <div class="d-flex mb-4 mt-7 justify-center">
          <v-btn small
                 :outlined="action.key !== 'save'"
                 v-for="action in formDetails.actions" @click="doAction(action)"
                 :key="action.key"
                 :color="action.key === 'save' ? 'primary' : '' "
                 :disabled="action.key === 'save'  && !valid"
          >{{ action.label }}
          </v-btn>
        </div>
      </template>
    </v-form>
  </v-container>
</template>

<script>
import FormInput from "@/components/project/appStore/FormInput";

export default {
  name: "appInstall",
  components: {FormInput},
  props: ['title', 'defaultConfig'],
  data: () => ({
    plugin: null,
    formDetails: null,
    settings: null,
    pluginId: null,
    title: null,
    valid: null
  }),
  methods: {
    simpleAnim() {
      var count = 200;
      var defaults = {
        origin: {y: 0.7}
      };

      function fire(particleRatio, opts) {
        window.confetti(Object.assign({}, defaults, opts, {
          particleCount: Math.floor(count * particleRatio)
        }));
      }

      fire(0.25, {
        spread: 26,
        startVelocity: 55,
      });
      fire(0.2, {
        spread: 60,
      });
      fire(0.35, {
        spread: 100,
        decay: 0.91,
        scalar: 0.8
      });
      fire(0.1, {
        spread: 120,
        startVelocity: 25,
        decay: 0.92,
        scalar: 1.2
      });
      fire(0.1, {
        spread: 120,
        startVelocity: 45,
      });
    },
    async saveSettings() {
      try {
        await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginSet', {
          input: this.settings,
          id: this.pluginId,
          title: this.plugin.title
        }]);

        this.$emit('saved');
        this.$toast.success(this.formDetails.msgOnInstall || 'Plugin settings saved successfully').goAway(5000);
        this.simpleAnim();
      } catch (e) {
        this.$toast.error(e.message).goAway(3000);
      }

    },
    async testSettings() {
      try {
        await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginTest', {
          input: this.settings,
          id: this.pluginId,
          category: this.plugin.category,
          title: this.plugin.title
        }]);
        this.$toast.success('Successfully tested plugin settings').goAway(3000)
      } catch (e) {
        this.$toast.error(e.message).goAway(3000);
      }
    },
    async doAction(action) {
      switch (action.key) {
        case 'save' :
          await this.saveSettings();
          break;
        case 'test' :
          await this.testSettings();
          break;
        default:
          break;
      }
    },
    async readPluginDetails() {
      try {
        this.plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
          title: this.title
        }]);
        this.formDetails = JSON.parse(this.plugin.input_schema);
        this.pluginId = this.plugin.id;
        this.settings = JSON.parse(this.plugin.input) || (this.formDetails.array ? [{}] : {});
      } catch (e) {
      }
    },
    copyDefault() {
      if (this.plugin.title.replace(/\s/g, '_').toLowerCase() in this.defaultConfig) {
        const data = this.defaultConfig[this.plugin.title.replace(/\s/g, '_').toLowerCase()];
        this.settings = JSON.parse(JSON.stringify(data));
        this.$toast.info('Demo credentials added').goAway(3000);
      }
    },

  },
  async created() {
    await this.readPluginDetails();
  },
  watch: {
    async id() {
      this.settings = {};
      await this.readPluginDetails();
    }
  }
}
</script>

<style scoped lang="scss">

::v-deep {
  //input,
  //select,
  //textarea {
  //  border: 1px solid #7f828b33;
  //  padding: 1px 5px;
  //  font-size: .8rem;
  //  border-radius: 4px;
  //
  //  &:focus {
  //    border: 1px solid var(--v-primary-base);
  //  }
  //
  //  &:hover:not(:focus) {
  //    box-shadow: 0 0 2px dimgrey;
  //  }
  //}
  //
  //
  //input, textarea {
  //  min-width: 300px;
  //}
}

.form-grid {
  display: grid;
  grid-template-columns:auto auto;
  column-gap: 10px;
  row-gap: 20px;
  align-items: center;
}


.form-table {
  border: none;
  min-width: 400px;
}

tbody tr:nth-of-type(odd) {
  background-color: transparent;
}

.form-input-label{
  padding-bottom: 16px;
}
</style>