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

<template>
  <v-container fluid class="textColor--text">
    <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">
            <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' : '' "
        >{{ action.label }}
        </v-btn>
      </div>
    </template>
  </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
  }),
  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
}


.form-table {
  border: none;
}

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