nocodb/packages/nc-gui/components/settings.vue

<template>

  <v-dialog
    width="60%"
    v-model="dialogShow">
    <v-container>
      <v-card class="pa-10">
        <v-icon @click="dialogShow = false" class="float-right  " color="error">mdi-close-box-outline</v-icon>
        <p class="text-center">
        <p class="display-1 text-center">NocoDB: Settings</p>


        <v-tabs
          color="pink"
          v-model="tab"
        >
          <v-tabs-slider></v-tabs-slider>

          <v-tab
            href="#tab-theme"
          >
            Appearance
          </v-tab>

          <v-tab-item
            value="tab-theme"
          >
            <v-card
              flat
              tile
            >
              <v-simple-table dense style="border: 1px solid grey">
                <template v-slot:default>
                  <!--                  <thead>-->
                  <!--                  <tr>-->
                  <!--                    <th class="text-left " width="25%">Name</th>-->
                  <!--                    <th class="text-left ">Value</th>-->
                  <!--                  </tr>-->
                  <!--                  </thead>-->
                  <tbody>
                  <tr>
                    <td>Dark Mode</td>
                    <td>
                      <v-tooltip bottom>
                        <template v-slot:activator="{ on }">
                          <v-icon @click="toggleDarkTheme" v-on="on" x-large
                                  :color="$vuetify.theme.dark ? 'primary':'primary'">
                            mdi-bat
                          </v-icon>
                        </template>
                        <h3 class="pa-3">
                          {{$vuetify.theme.dark ? 'It does come in Black' : 'Does it come in Black ?' }}
                          <i></i>
                        </h3>
                      </v-tooltip>
                    </td>
                  </tr>
                  <tr>
                    <td>Language</td>
                    <td>
                      <v-radio-group v-model="language" row>
                        <v-radio
                          v-for="{label,value} in languages"
                          :key="value"
                          :label="label"
                          :value="value"
                        ></v-radio>
                      </v-radio-group>
                    </td>
                  </tr>
                  <tr>
                    <td>Themes</td>
                    <td class="pa-1">
                      <v-list rounded>
                        <!--              <v-subheader>REPORTS</v-subheader>-->
                        <v-list-item-group color="primary" v-model="item">
                          <v-list-item
                            class="mb-n1"
                            v-for="(t,i) in themes"
                            :key="i"
                            :value="i"
                            @click.native.prevent.stop="changeTheme(t,i)"
                          >
                            <v-list-item-content class="py-0">
                              <div class="d-flex align-center" style="width:100%">
                                <div style="width: 100px">{{i}}</div>
                                <div class="flex-grow-1">
                                  <v-container fluid class="pa-0">
                                    <v-row>
                                      <v-col class="mx-2" style="height: 20px" v-for="(col,key) in t"
                                             :style="{backgroundColor: col}"
                                             :key="key">
                                      </v-col>
                                    </v-row>
                                  </v-container>
                                </div>
                              </div>
                            </v-list-item-content>

                          </v-list-item>
                          <v-list-item
                            class="mb-n2"
                            value="Custom"
                            @click.native.prevent.stop="changeTheme(customTheme,'Custom')">
                            <v-list-item-content class="py-0">
                              <div class="d-flex align-center" style="width:100%">
                                <div style="min-width: 100px">Custom</div>
                                <div class="flex-grow-1">
                                  <!--                            <v-container fluid>-->

                                  <x-btn
                                    small
                                    btn.class="ma-1 caption"
                                    v-for="(col,key) in customTheme"
                                    :color="col"
                                    :key="key"
                                    @click="customKey = key, colorPickerModel= true"
                                    tooltip="Click to change the color"
                                  > {{key}}
                                  </x-btn>
                                </div>
                              </div>
                            </v-list-item-content>
                          </v-list-item>
                        </v-list-item-group>
                      </v-list>

                    </td>
                  </tr>
                  </tbody>
                </template>
              </v-simple-table>


            </v-card>
          </v-tab-item>

<!--          <v-tab-->
<!--            href="#tab-telemetry"-->
<!--          >-->
<!--            Telemetry-->
<!--          </v-tab>-->

<!--          <v-tab-item-->
<!--            value="tab-telemetry"-->
<!--          >-->
<!--            <v-card-->
<!--              flat-->
<!--              tile-->
<!--            >-->
<!--              <v-simple-table dense style="border: 1px solid grey">-->
<!--                <template v-slot:default>-->
<!--                  &lt;!&ndash;                  <thead>&ndash;&gt;-->
<!--                  &lt;!&ndash;                  <tr>&ndash;&gt;-->
<!--                  &lt;!&ndash;                    <th class="text-left" width="25%">Name</th>&ndash;&gt;-->
<!--                  &lt;!&ndash;                    <th class="text-left">Value</th>&ndash;&gt;-->
<!--                  &lt;!&ndash;                  </tr>&ndash;&gt;-->
<!--                  &lt;!&ndash;                  </thead>&ndash;&gt;-->
<!--                  <tbody>-->
<!--                  <tr>-->
<!--                    <td class="py-2">Error Reporting-->
<!--                      <x-icon small tooltip="For crash reports we use sentry.io">mdi-information-outline</x-icon>-->
<!--                    </td>-->

<!--                    <td class="py-2">-->
<!--                      <v-switch-->
<!--                        flat-->
<!--                        v-model="isErrorReportingEnabled"-->
<!--                        color="grey "-->
<!--                        @click.prevent.stop="toggleLogReport"-->
<!--                      ></v-switch>-->
<!--                    </td>-->
<!--                  </tr>-->
<!--                  <tr>-->
<!--                    <td class="py-2">Google Analytics</td>-->
<!--                    <td class="py-2" style="position: relative">-->

<!--                      <v-switch-->
<!--                        v-if="$store.state.users.ui_ability.rules.disableGA"-->
<!--                        v-model="isGaEnabled"-->
<!--                        color="grey "-->
<!--                        flat-->
<!--                        @click.prevent.stop="toggleGa"-->
<!--                      ></v-switch>-->

<!--                      <v-tooltip-->
<!--                        right-->
<!--                        bottom-->
<!--                        v-else>-->
<!--                        <template v-slot:activator="{on}">-->
<!--                          <div-->
<!--                            v-on="on">-->
<!--                            <v-switch-->
<!--                              v-model="isGaEnabled"-->
<!--                              disabled-->
<!--                              color="grey "-->
<!--                              flat-->
<!--                            ></v-switch>-->
<!--                          </div>-->
<!--                        </template>-->
<!--                        Only Enterprise user can disable Google Analytics-->
<!--                      </v-tooltip>-->

<!--                    </td>-->
<!--                  </tr>-->
<!--                  <tr>-->
<!--                    <td class="py-2"> Telemetry-->
<!--                      <x-icon small-->
<!--                              tooltip="Only count of {Tables, APIs, Relations}, Time taken for api creation and tool-uuid"-->
<!--                      >-->
<!--                        mdi-information-outline-->
<!--                      </x-icon>-->
<!--                    </td>-->
<!--                    <td class="py-2">-->

<!--                      <v-switch-->
<!--                        v-if="$store.state.users.ui_ability.rules.disableTelemetry"-->
<!--                        flat-->
<!--                        disabled-->
<!--                        v-model="isTelemetryEnabled"-->
<!--                        color="grey "-->
<!--                      ></v-switch>-->
<!--                      <v-tooltip-->
<!--                        v-else-->
<!--                        right-->
<!--                        bottom>-->
<!--                        <template v-slot:activator="{on}">-->
<!--                          <div-->
<!--                            v-on="on">-->
<!--                            <v-switch-->
<!--                              flat-->
<!--                              disabled-->
<!--                              v-model="isTelemetryEnabled"-->
<!--                              color="grey "-->
<!--                            ></v-switch>-->
<!--                          </div>-->
<!--                        </template>-->
<!--                        Only Enterprise user can disable Telemetry-->
<!--                      </v-tooltip>-->
<!--                    </td>-->
<!--                  </tr>-->
<!--                  </tbody>-->
<!--                </template>-->
<!--              </v-simple-table>-->


<!--            </v-card>-->
<!--          </v-tab-item>-->

          <v-tab
            href="#tab-other"
          >
            Version & Updates
          </v-tab>

          <v-tab-item
            value="tab-other"
          >
            <v-card
              flat
              tile
            >
              <v-simple-table dense style="border: 1px solid grey">
                <template v-slot:default>
                  <!--                <thead>-->
                  <!--                <tr>-->
                  <!--                  <th class="text-left " width="25%">Name</th>-->
                  <!--                  <th class="text-left ">Value</th>-->
                  <!--                </tr>-->
                  <!--                </thead>-->
                  <tbody>
                  <tr>
                    <td>
                      Version
                    </td>
                    <td>
                      <span @contextmenu="rightClick">{{$store.state.windows.version}}</span>
                    </td>
                  </tr>
                  <!--                <tr>-->
                  <!--                  <td>-->
                  <!--                    Check for updates-->
                  <!--                  </td>-->
                  <!--                  <td>-->
                  <!--                    <v-switch-->
                  <!--                      flat-->
                  <!--                      v-model="checkForUpdate"-->
                  <!--                      color="grey "-->
                  <!--                    ></v-switch>-->
                  <!--                  </td>-->
                  <!--                </tr>-->
                  <tr @dblclick="enableAppRefresh = true">
                    <td>
                      Auto update
                    </td>
                    <td>
                      <v-switch
                        flat
                        v-model="autoUpdate"
                        color="grey "
                      ></v-switch>
                    </td>
                  </tr>
                  <tr v-if="enableAppRefresh">
                    <td>
                      Application refresh
                    </td>
                    <td>
                      <v-btn @click="applicationRefresh">Refresh</v-btn>
                    </td>
                  </tr>
                  </tbody>
                </template>
              </v-simple-table>

            </v-card>
          </v-tab-item>
        </v-tabs>


      </v-card>
      <v-dialog
        v-model="colorPickerModel"
        width="350"
      >
        <v-color-picker class="mx-auto my-2" @input="changeTheme(customTheme)" v-if="customTheme[customKey]"
                        v-model="customTheme[customKey]"></v-color-picker>
      </v-dialog>

      <dlgLabelSubmitCancel
        v-if="dialogShow"
        :dialogShow="gaDialogShow"
        :actionsMtd="gaDialogFunction"
        heading="Click submit to disable Google Analytics."
        type="primary"
      />

      <dlgLabelSubmitCancel
        v-if="dialogShow"
        :dialogShow="logReportDialogShow"
        :actionsMtd="logReportDialogFunction"
        heading="Error reporting helps us to build a better product. Press cancel to help us build a better product ?"
        type="primary"
      />

    </v-container>
  </v-dialog>
</template>
<script>

  import dlgLabelSubmitCancel from './utils/dlgLabelSubmitCancel';
  import XIcon from "./global/xIcon";
  import themes from "../helpers/themes";

  export default {
    components: {XIcon, dlgLabelSubmitCancel},

    data() {
      return {
        rightClickCount: 0,
        enableAppRefresh: false,
        tab: null,
        gaDialogShow: false,
        logReportDialogShow: false,
        languages: [
          {label: 'English', value: 'en'},
          // {label: 'Japanese', value: 'ja'},
          // {label: 'Chinese', value: 'zh'}
        ],
        item: 'default',
        primary: '',
        colors: [
          '#ea4235',
          '#4CAF50',
          '#FF9800',
          '#0288D1'
        ],
        customKey: null,
        colorPickerModel: false,
        customTheme: {
          "primary": "#6f5dcc",
          "secondary": "#BFDBF7",
          "accent": "#ED254E",
          "info": "#00CED1",
          "success": "#4CAF50",
          "warning": "#FB8C00",
          error: '#ff0100',
        },
        themes:themes
      }
    },
    computed: {
      checkForUpdate: {
        get() {
          return this.$store.state.windows.checkForUpdate
        }, set(value) {
          this.$store.commit('windows/MutCheckForUpdate', value)
        }
      },
      autoUpdate: {
        get() {
          return this.$store.state.windows.downloadAndUpdateRelease
        }, set(value) {
          this.$store.commit('windows/MutDownloadAndUpdateRelease', value)
        }
      },
      isGaEnabled: {
        get() {
          return this.$store.state.windows.isGaEnabled
        }, set(value) {
          this.$store.commit('windows/MutToggleGaEnabled', value)
        }
      },
      isErrorReportingEnabled: {
        get() {
          return this.$store.state.windows.isErrorReportingEnabled
        }, set(value) {
          this.$store.commit('windows/MutToggleErrorReportingEnabled', value)
        }
      },
      isTelemetryEnabled: {
        get() {
          return this.$store.state.windows.isErrorReportingEnabled
        }, set(value) {
          this.$store.commit('windows/MutToggleTelemetryEnabled', value)
        }
      },
      dialogShow: {
        get() {
          return this.value;
        }, set(val) {
          this.$emit('input', val);
        }
      },
      language: {
        get() {
          return this.$store.state.windows.language;
        }, set(val) {
          this.$store.commit('windows/MutSetLanguage', val);
        }
      },
    },
    methods: {
      rightClick() {
        this.rightClickCount++;
        if (this.rightClickCount > 5) {
          // require('electron').remote.getCurrentWindow().toggleDevTools();
          this.rightClickCount = 0;
        }
      },
      async applicationRefresh() {
        localStorage.removeItem('vuex');
        location.reload();
      },
      toggleGa(event) {
        if (this.isGaEnabled) {
          this.gaDialogShow = true;
        } else
          this.isGaEnabled = true;
      },
      toggleLogReport(event) {
        if (this.isErrorReportingEnabled) {
          this.logReportDialogShow = true;
        } else
          this.isErrorReportingEnabled = true;
      },
      logReportDialogFunction(action) {
        if (action !== 'hideDialog' && this.$store.state.users.user && this.$store.state.users.user.email) {
          this.isErrorReportingEnabled = false;
        } else {
          this.$toast.error('Only a registered user can disable Error Reporting, Please Login then disable.').goAway(5000)
        }
        this.logReportDialogShow = false;
      },
      gaDialogFunction(action) {
        if (action !== 'hideDialog') {
          if (this.$store.state.users.user && this.$store.state.users.user.email) {
            this.isGaEnabled = false;
          } else {
            this.$toast.error('Only a registered user can disable Google Analytics, Please Login then disable.').goAway(5000)
          }
        }
        this.gaDialogShow = false;
      },
      async changeTheme(t, theme = 'Custom') {
        this.item = theme;
        if (theme === 'Custom')
          await this.$store.dispatch('windows/ActSetTheme', {theme: {...t}, custom: true});
        await this.$store.dispatch('windows/ActSetTheme', {theme: {...t}, themeName: theme});


      },
      toggleDarkTheme() {
        this.$store.commit('windows/MutToggleDarkMode');
      }
    },
    fetch({store, params}) {
    },
    beforeCreated() {
    },
    created() {
      this.customTheme = {...this.customTheme, ...this.$store.state.windows.customTheme}
      this.item = this.$store.state.windows.themeName;
      this.$store.watch(
        state => state.windows.customTheme,
        theme => {
          this.customTheme = {...this.customTheme, ...theme};
        })

      this.$store.watch(state => state.windows.themeName,
        theme => {
          this.$nextTick(() => {
            if (this.item !== theme) this.item = theme
          })
        })
    },
    beforeMount() {
    },
    async mounted() {

    },
    beforeDestroy() {
    },
    destroy() {
    },
    validate({params}) {
      return true
    },
    props: {value: Boolean},
    watch: {},
    directives: {},
  }
</script>

<style scoped>


</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/>.
 *
 */
-->