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

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

        <v-tabs
          v-model="tab"
          color="pink"
        >
          <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 #default>
                  <tbody>
                    <tr>
                      <td>Dark Mode</td>
                      <td>
                        <v-tooltip bottom>
                          <template #activator="{ on }">
                            <v-icon
                              x-large
                              :color="$vuetify.theme.dark ? 'primary':'primary'"
                              @click="toggleDarkTheme"
                              v-on="on"
                            >
                              mdi-bat
                            </v-icon>
                          </template>
                          <h3 class="pa-3">
                            {{ $vuetify.theme.dark ? 'It does come in Black' : 'Does it come in Black ?' }}
                            <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-group>
                      </td>
                    </tr>
                    <tr>
                      <td>Themes</td>
                      <td class="pa-1">
                        <v-list rounded>
                          <!--              <v-subheader>REPORTS</v-subheader>-->
                          <v-list-item-group v-model="item" color="primary">
                            <v-list-item
                              v-for="(t,i) in themes"
                              :key="i"
                              class="mb-n1"
                              :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
                                          v-for="(col,key) in t"
                                          :key="key"
                                          class="mx-2"
                                          style="height: 20px"
                                          :style="{backgroundColor: 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
                                      v-for="(col,key) in customTheme"
                                      :key="key"
                                      small
                                      btn.class="ma-1 caption"
                                      :color="col"
                                      tooltip="Click to change the color"
                                      @click="customKey = key, colorPickerModel= true"
                                    >
                                      {{ 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-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 #default>
                  <tbody>
                    <tr>
                      <td>
                        Version
                      </td>
                      <td>
                        <span @contextmenu="rightClick">{{ $store.state.settings.version }}</span>
                      </td>
                    </tr>
                    <tr @dblclick="enableAppRefresh = true">
                      <td>
                        Auto update
                      </td>
                      <td>
                        <v-switch
                          v-model="autoUpdate"
                          flat
                          color="grey "
                        />
                      </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
          v-if="customTheme[customKey]"
          v-model="customTheme[customKey]"
          class="mx-auto my-2"
          @input="changeTheme(customTheme)"
        />
      </v-dialog>

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

      <dlgLabelSubmitCancel
        v-if="dialogShow"
        :dialog-show="logReportDialogShow"
        :actions-mtd="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 themes from '../helpers/themes'
import dlgLabelSubmitCancel from './utils/DlgLabelSubmitCancel'

export default {
  components: { dlgLabelSubmitCancel },
  directives: {},
  validate({ params }) {
    return true
  },
  props: { value: Boolean },

  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
    }
  },
  fetch({ store, params }) {
  },
  computed: {
    checkForUpdate: {
      get() {
        return this.$store.state.settings.checkForUpdate
      },
      set(value) {
        this.$store.commit('settings/MutCheckForUpdate', value)
      }
    },
    autoUpdate: {
      get() {
        return this.$store.state.settings.downloadAndUpdateRelease
      },
      set(value) {
        this.$store.commit('settings/MutDownloadAndUpdateRelease', value)
      }
    },
    isGaEnabled: {
      get() {
        return this.$store.state.settings.isGaEnabled
      },
      set(value) {
        this.$store.commit('settings/MutToggleGaEnabled', value)
      }
    },
    isErrorReportingEnabled: {
      get() {
        return this.$store.state.settings.isErrorReportingEnabled
      },
      set(value) {
        this.$store.commit('settings/MutToggleErrorReportingEnabled', value)
      }
    },
    isTelemetryEnabled: {
      get() {
        return this.$store.state.settings.isErrorReportingEnabled
      },
      set(value) {
        this.$store.commit('settings/MutToggleTelemetryEnabled', value)
      }
    },
    dialogShow: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    language: {
      get() {
        return this.$store.state.settings.language
      },
      set(val) {
        this.$store.commit('settings/MutSetLanguage', val)
      }
    }
  },
  watch: {},
  created() {
    this.customTheme = { ...this.customTheme, ...this.$store.state.settings.customTheme }
    this.item = this.$store.state.settings.themeName
    this.$store.watch(
      state => state.settings.customTheme,
      (theme) => {
        this.customTheme = { ...this.customTheme, ...theme }
      })

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

  },
  beforeDestroy() {
  },
  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('settings/ActSetTheme', { theme: { ...t }, custom: true }) }
      await this.$store.dispatch('settings/ActSetTheme', { theme: { ...t }, themeName: theme })
    },
    toggleDarkTheme() {
      this.$store.commit('settings/MutToggleDarkMode')
    }
  },
  beforeCreated() {
  },
  destroy() {
  }
}
</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/>.
 *
 */
-->