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

<template>
  <div class="d-flex h-100">


    <v-dialog min-width="400px" max-width="700px" min-height="300" v-model="pluginInstallOverlay">

      <v-card v-if="installPlugin && pluginInstallOverlay" :dark="$store.state.windows.darkTheme"
              :light="!$store.state.windows.darkTheme">
        <app-install :title="installPlugin.title" @close="pluginInstallOverlay = false" @saved="saved()" :defaultConfig="defaultConfig"></app-install>

      </v-card>

    </v-dialog>


    <dlg-ok-new v-model="pluginUninstallModal"
                @ok="confirmResetPlugin"
                :heading="`Please click on submit to reset ${resetPluginRef && resetPluginRef.title}`"
                ok-label="Submit"
                type="primary"
    ></dlg-ok-new>

    <v-dialog min-width="400px" max-width="700px" min-height="300">


      <v-card v-if="resetPluginRef" :dark="$store.state.windows.darkTheme"
              :light="!$store.state.windows.darkTheme">
        <v-card-text> Please confirm to reset {{ resetPluginRef.title }}</v-card-text>
        <v-card-actions>
          <v-btn color="primary" @click="confirmResetPlugin">Yes</v-btn>
          <v-btn @click="pluginUninstallModal = false">No</v-btn>
        </v-card-actions>
      </v-card>

    </v-dialog>

    <v-container class="h-100 app-container">
      <v-row class="d-flex align-stretch">
        <v-col class="" v-for="(app,i) in filteredApps" :key="i" cols="6">
          <!--          @click="installApp(app)"-->

          <v-card
            height="100%"
            class="elevatio app-item-card "
          >
            <div class="install-btn ">
              <v-btn v-if="app.parsedInput" x-small outlined class=" caption text-capitalize"
                     @click="installApp(app)">
                <v-icon x-small class="mr-1">mdi-pencil</v-icon>
                Edit
              </v-btn>
              <v-btn v-if="app.parsedInput" x-small outlined class="caption text-capitalize"
                     @click="resetApp(app)">
                <v-icon x-small class="mr-1">mdi-close-circle-outline</v-icon>
                Reset
              </v-btn>
              <v-btn v-else x-small outlined class=" caption text-capitalize" @click="installApp(app)">
                <v-icon x-small class="mr-1">mdi-plus</v-icon>
                Install
              </v-btn>
            </div>


            <div class="d-flex flex-no-wrap">
              <v-avatar
                class="ma-3 align-self-center"
                size="50"
                tile
                :color="app.title === 'SES' ? '#242f3e' : ''"
              >
                <v-img v-if="app.logo" :src="app.logo" contain></v-img>
                <v-icon v-else-if="app.icon" color="#242f3e" size="50">{{ app.icon }}</v-icon>
              </v-avatar>
              <div class="flex-grow-1">
                <v-card-title
                  class="title "
                  v-text="app.title"
                ></v-card-title>

                <v-card-subtitle v-text="app.description" class="pb-1"></v-card-subtitle>
                <v-card-actions>
                  <div class="d-flex justify-space-between d-100 align-center">
                    <v-rating
                      full-icon="mdi-star"
                      readonly
                      length="5"
                      size="15"
                      :value="5"
                    ></v-rating>

                    <!--                    <span class="subtitles" v-if="app.price && app.price !== 'Free'">${{ app.price }} / mo</span>-->
                    <!--                    <span class="subtitles" v-else>Free</span>-->
                  </div>
                </v-card-actions>

                <!--                <v-card-actions>-->
                <!--                  <v-btn-->
                <!--                    outlined-->
                <!--                    rounded-->
                <!--                    small-->
                <!--                  >-->
                <!--                    Download-->
                <!--                  </v-btn>-->
                <!--                </v-card-actions>-->
              </div>

            </div>
          </v-card>
        </v-col>
      </v-row>
    </v-container>

    <v-navigation-drawer width="300" class="pa-1">
      <v-text-field
        dense
        v-model="query"
        hide-details
        placeholder="Search apps"
        color="primary"
        class="search-field caption"

      >
        <template v-slot:prepend-inner>
          <v-icon small class="mt-1">mdi-magnify</v-icon>
        </template>

      </v-text-field>

      <v-list dense>
        <v-list-item v-for="filter of filters" :key="filter" dense>
          <v-checkbox v-model="selectedTags" class="pt-0 mt-0" :value="filter" hide-details dense
                      :label="filter">
            <template v-slot:label>
              <v-icon small class="mr-1">{{ icons[filter] }}</v-icon>

              {{ filter }}
            </template>

          </v-checkbox>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

<script>
import AppInstall from "@/components/project/appStore/appInstall";
import DlgOkNew from "@/components/utils/dlgOkNew";

export default {
  name: "appStore",
  components: {DlgOkNew, AppInstall},
  data: () => ({
    query: '',
    selectedTags: [],
    apps: [],
    pluginInstallOverlay: false,
    installPlugin: null,
    resetPluginRef: null,
    pluginUninstallModal: false,
    defaultConfig:{},
    icons: {
      Email: 'mdi-email-outline',
      Storage: 'mdi-usb-flash-drive-outline',
      Notification: 'mdi-bell-outline',
      Authentication: 'mdi-shield-account-outline',
      Brand: 'mdi-sparkles',
      Cache: 'mdi-cached',
      Enterprise: 'mdi-bank',
      Chat: 'mdi-chat-outline'
    },
  }),
  async created() {
    await this.loadPluginList();
    this.readPluginDefaults();
  },
  methods: {
    async readPluginDefaults() {
      try {
        this.defaultConfig = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginDemoDefaults'])
      } catch (e) {
      }
    },
    async confirmResetPlugin() {
      try {
        await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginSet', {
          input: null,
          id: this.resetPluginRef.id,
          title: this.resetPluginRef.title,
          uninstall: true
        }]);

        this.$toast.success('Plugin uninstalled successfully').goAway(5000);
        await this.loadPluginList();
      } catch (e) {
        this.$toast.error(e.message).goAway(3000);
      }
    },
    async saved() {
      this.pluginInstallOverlay = false;
      await this.loadPluginList();
    },
    async installApp(app) {
      this.pluginInstallOverlay = true;
      this.installPlugin = app;
    },
    async resetApp(app) {
      this.pluginUninstallModal = true;
      this.resetPluginRef = app;
    },
    async loadPluginList() {
      try {
        const plugins = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginList']);
        plugins.push(...plugins.splice(0, 3));
        this.apps = plugins.map(p => {
          p.tags = p.tags ? p.tags.split(',') : [];
          p.parsedInput = p.input && JSON.parse(p.input)
          return p;
        })
      } catch (e) {

      }
    },
  },
  computed: {
    filters() {
      return this.apps.reduce((arr, app) => arr.concat(app.tags || []), []).filter((f, i, arr) => i === arr.indexOf(f)).sort();
    },
    filteredApps() {
      return this.apps.filter(app => (!this.query.trim() || app.name.toLowerCase().indexOf(this.query.trim().toLowerCase()) > -1)
        && (!this.selectedTags.length || this.selectedTags.some(t => app.tags && app.tags.includes(t)))
      );
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  color: var(--v-textColor-ligten2) !important;
}

.app-item-card {
  transition: .4s background-color;
  position: relative;
  overflow-x: hidden;

  .install-btn {
    position: absolute;
    opacity: 0;
    right: -100%;
    top: 10px;
    transition: .4s opacity, .4s right;
  }

  &:hover .install-btn {
    right: 10px;
    opacity: 1;
  }
}

.app-item-card {
  transition: .4s background-color, .4s transform;

  &:hover {
    background: rgba(123, 126, 136, 0.1) !important;
    transform: scale(1.01);
  }
}

::v-deep {
  .v-rating {
    margin-left: 6px;

    .v-icon {
      padding-right: 2px;
      padding-left: 2px;
    }
  }

  .v-input__control .v-input__slot .v-input--selection-controls__input {
    transform: scale(.75);
  }

  .v-input--selection-controls .v-input__slot > .v-label {
    font-size: .8rem;
  }


  .search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
    min-height: auto;
  }
}

.app-container {
  height: 100%;
  overflow-y: auto;
}


</style>
<!--
/**
 * @copyright Copyright (c) 2021, Xgene Cloud Ltd
 *
 * @author Naveen MR <oof1lab@gmail.com>
 * @author Pranav C Balan <pranavxc@gmail.com>
 *
 * @license GNU AGPL version 3 or any later version
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 *
 */
-->