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

<template>
  <div>
    <slot :click="() => settingsModal = true">
      <v-icon class="mx-2" @click="settingsModal=true">
        mdi-cog-outline
      </v-icon>
    </slot>
    <v-dialog v-model="settingsModal" width="90%" overlay-opacity=".9">
      <v-card
        v-if="settingsModal"
        width="100%"
        min-height="350px"
      >
        <div class="d-flex">
          <v-navigation-drawer
            left
            permanent
            height="90vh"
            style="background-color: #f7f6f3"
          >
            <div class=" advance-menu ">
              <v-list
                v-if="_isUIAllowed('treeViewProjectSettings')"
                dense
                :class="{ 'advanced-border': overShieldIcon }"
              >
                <v-list-item>
                  <v-list-item-title>
                    <!-- Settings -->
                    <span class="body-2 font-weight-medium grey--text  text-uppercase caption">{{ $t('activity.settings') }}</span>
                  </v-list-item-title>
                </v-list-item>
                <v-list-item-group v-model="activePage" color="x-active" mandatory>
                  <v-tooltip bottom>
                    <template #activator="{ on }">
                      <v-list-item
                        v-t="['settings:team-auth']"
                        value="roles"
                        dense
                        class="body-2 nc-settings-teamauth"
                        v-on="on"
                      >
                        <v-list-item-icon>
                          <v-icon small>
                            mdi-account-group
                          </v-icon>
                        </v-list-item-icon>
                        <!-- Team & Auth -->
                        <v-list-item-title>
                          <span :class="{'font-weight-medium': activePage === 'roles', 'font-weight-regular':activePage !=='roles'}">{{
                            $t('title.team&auth')
                          }}</span>
                        </v-list-item-title>
                      </v-list-item>
                    </template>
                    <!-- Roles & Users Management -->
                    {{ $t('title.rolesUserMgmt') }}
                  </v-tooltip>

                  <template v-if="_isUIAllowed('treeViewProjectSettings')">
                    <v-tooltip bottom>
                      <template #activator="{ on }">
                        <v-list-item
                          v-t="['settings:appstore']"
                          dense
                          class="body-2 nc-settings-appstore"
                          value="appStore"
                          v-on="on"
                        >
                          <v-list-item-icon>
                            <v-icon small>
                              mdi-storefront-outline
                            </v-icon>
                          </v-list-item-icon>
                          <!-- App Store -->
                          <v-list-item-title>
                            <span :class="{'font-weight-medium': activePage === 'appStore', 'font-weight-regular':activePage !=='appStore'}">{{
                              $t('title.appStore')
                            }}</span>
                          </v-list-item-title>
                        </v-list-item>
                      </template>
                      <!-- App Store -->
                      {{ $t('title.appStore') }}
                    </v-tooltip>

                    <v-tooltip bottom>
                      <template #activator="{ on }">
                        <v-list-item
                          v-t="['settings:proj-metadata']"
                          dense
                          class="body-2 nc-settings-projmeta"
                          value="disableOrEnableModel"
                          v-on="on"
                        >
                          <v-list-item-icon>
                            <v-icon small>
                              mdi-table-multiple
                            </v-icon>
                          </v-list-item-icon>
                          <!-- Project Metadata -->
                          <v-list-item-title>
                            <span :class="{'font-weight-medium': activePage === 'disableOrEnableModel', 'font-weight-regular':activePage !=='disableOrEnableModel'}">{{
                              $t('title.projMeta')
                            }}</span>
                          </v-list-item-title>
                        </v-list-item>
                      </template>
                      <!-- Meta Management -->
                      {{ $t('title.metaMgmt') }}
                    </v-tooltip>

                    <v-tooltip bottom>
                      <template #activator="{ on }">
                        <v-list-item
                          v-t="['settings:audit']"
                          dense
                          class="body-2 nc-settings-audit"
                          value="audit"
                          v-on="on"
                        >
                          <v-list-item-icon>
                            <v-icon small>
                              mdi-notebook-outline
                            </v-icon>
                          </v-list-item-icon>
                          <!-- Project Metadata -->
                          <v-list-item-title>
                            <span :class="{'font-weight-medium': activePage === 'audit', 'font-weight-regular':activePage !=='audit' }">{{
                              $t('title.audit')
                            }}</span>
                          </v-list-item-title>
                        </v-list-item>
                      </template>
                      <!-- Meta Management -->
                      {{ $t('title.auditLogs') }}
                    </v-tooltip>
                  </template>
                </v-list-item-group>
              </v-list>
            </div>
          </v-navigation-drawer>
          <v-container class="flex-grow-1 py-9 px-15" style="max-height: 90vh; overflow-y: auto">
            <div v-if="activePage === 'audit'" style="height:100%">
              <audit-tab />
            </div>
            <div
              v-else-if="activePage === 'meta'"
            >
              <xc-meta />
            </div>
            <div
              v-else-if="activePage === 'roles'"
            >
              <auth-tab
                v-if="_isUIAllowed('team-auth')"
              />
            </div>
            <div
              v-else-if="activePage === 'disableOrEnableModel'"
            >
              <disable-or-enable-models
                v-if="_isUIAllowed('project-metadata')"
              />
            </div>
            <app-store v-else />
          </v-container>
        </div>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import AppStore from '~/components/project/appStore'
import DisableOrEnableModels from '~/components/project/projectMetadata/disableOrEnableModels'
import AuthTab from '~/components/authTab'
import XcMeta from '~/components/project/settings/xcMeta'
import AuditTab from '~/components/project/auditTab'

export default {
  name: 'SettingsModal',
  components: { AuditTab, XcMeta, AuthTab, DisableOrEnableModels, AppStore },
  data: () => ({
    settingsModal: false,
    activePage: 'role'
  })
}
</script>

<style scoped lang="scss">
::v-deep{
  .v-list-item__icon{
    margin-right: 0 !important;
  }
}

</style>