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

<template>
  <div>
    <v-menu offset-y transition="slide-y-transition">
      <template #activator="{ on }">
        <v-btn
          v-show="isDashboard && _isUIAllowed('previewAs')"
          small
          light
          color="#fff3"
          class="white--text nc-btn-preview"
          v-on="on"
        >
          <v-icon small class="mr-1"> mdi-play-circle </v-icon>
          Preview
          <v-icon small> mdi-menu-down </v-icon>
        </v-btn>
      </template>
      <v-list dense>
        <template v-for="role in rolesList">
          <v-list-item
            :key="role.title"
            :class="`pointer nc-preview-${role.title}`"
            @click="setPreviewUser(role.title)"
          >
            <v-list-item-title>
              <v-icon small class="mr-1" :color="role.title === previewAs ? 'x-active' : ''">
                {{ roleIcon[role.title] }}
              </v-icon>
              <span class="caption text-capitalize" :class="{ 'x-active--text': role.title === previewAs }">{{
                role.title
              }}</span>
            </v-list-item-title>
          </v-list-item>
        </template>

        <template v-if="previewAs">
          <!--                <v-divider></v-divider>-->
          <v-list-item @click="setPreviewUser(null)">
            <v-icon small class="mr-1"> mdi-close </v-icon>
            <!-- Reset Preview -->
            <span class="caption nc-preview-reset">{{ $t('activity.resetReview') }}</span>
          </v-list-item>
        </template>
      </v-list>
    </v-menu>

    <v-menu
      :position-x="position.x"
      :position-y="position.y"
      :value="previewAs"
      activator=""
      :close-on-click="false"
      :close-on-content-click="false"
    >
      <div
        class="floating-reset-btn white py-1 pr-3 caption primary lighten-2 white--text font-weight-bold d-flex align-center nc-floating-preview-btn"
        style="overflow-y: hidden"
      >
        <v-icon style="cursor: move" color="white" @mousedown="mouseDown"> mdi-drag </v-icon>

        <v-divider vertical class="mr-2" />

        <div class="d-inline pointer d-flex align-center">
          <span>Preview as :</span>
          <v-radio-group :value="previewAs" dense row class="mt-0 pt-0" hide-details @change="setPreviewUser($event)">
            <v-radio
              v-for="role in rolesList"
              :key="role.title"
              :value="role.title"
              color="white"
              dark
              :class="`ml-1 nc-floating-preview-${role.title}`"
            >
              <template #label>
                <span class="white--text caption text-capitalize">{{ role.title }}</span>
              </template>
            </v-radio>
          </v-radio-group>
          <v-divider vertical class="mr-2" />
          <span class="pointer" @click="setPreviewUser(null)">
            <v-icon small color="white">mdi-exit-to-app</v-icon> Exit</span
          >
        </div>
      </div>
    </v-menu>
  </div>
</template>

<script>
export default {
  name: 'PreviewAs',
  data: () => ({
    roleIcon: {
      owner: 'mdi-account-star',
      creator: 'mdi-account-hard-hat',
      editor: 'mdi-account-edit',
      viewer: 'mdi-eye-outline',
      commenter: 'mdi-comment-account-outline',
    },
    rolesList: [{ title: 'editor' }, { title: 'commenter' }, { title: 'viewer' }],
    position: {
      x: 9999,
      y: 9999,
    },
  }),
  computed: {
    previewAs: {
      get() {
        return this.$store.state.users.previewAs;
      },
      set(previewAs) {
        this.$store.commit('users/MutPreviewAs', previewAs);
      },
    },
  },
  mounted() {
    this.position = {
      y: window.innerHeight - 100,
      x: window.innerWidth / 2 - 250,
    };

    window.addEventListener('mouseup', this.mouseUp, false);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.divMove, true);
    window.removeEventListener('mouseup', this.mouseUp, false);
  },
  methods: {
    setPreviewUser(previewAs) {
      this.$e('a:navdraw:preview', { role: previewAs });
      if (!process.env.EE) {
        this.$toast.info('Available in Enterprise edition').goAway(3000);
      } else {
        this.previewAs = previewAs;
        window.location.reload();
      }
    },
    mouseUp() {
      window.removeEventListener('mousemove', this.divMove, true);
    },
    mouseDown(e) {
      window.addEventListener('mousemove', this.divMove, true);
    },

    divMove(e) {
      this.position = { y: e.clientY - 10, x: e.clientX - 18 };
    },
  },
};
</script>

<style scoped></style>