nocodb/packages/nc-gui/components/project/spreadsheet/components/sharedViewsList.vue

<template>
  <v-card max-width="900">
    <v-container>
      <v-simple-table v-slot:default dense>
        <thead>
        <tr>
          <th class="caption">View Link</th>
          <th class="caption">Password</th>
          <th class="caption">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="link of viewsList" :key="link.id">
          <td class="caption">

            <nuxt-link :to="`/nc/view/${link.view_id}`">{{ `${origin}/dashboard#/xc/view/${link.view_id}` }}</nuxt-link>

          </td>
          <td class="caption">
            <template v-if="link.password">
              <span>{{ link.showPassword ? link.password : '***************************' }}</span>
              <v-icon small @click="$set(link, 'showPassword' , !link.showPassword)">
                {{ link.showPassword ? 'visibility_off' : 'visibility' }}
              </v-icon>
            </template>
          </td>
          <td class="caption">
            <v-icon small @click="deleteLink(link.id)"> mdi-delete-outline</v-icon>
          </td>
        </tr>
        </tbody>
      </v-simple-table>
    </v-container>
  </v-card>
</template>

<script>
export default {
  name: "sharedViewsList",
  props: ['modelName', 'nodes'],
  created() {
    this.loadSharedViewsList();
  },
  methods: {
    async loadSharedViewsList() {
      this.viewsList = await this.$store.dispatch('sqlMgr/ActSqlOp', [{dbAlias: this.nodes.dbAlias}, 'listSharedViewLinks', {
        model_name: this.modelName
      }])
    },
    async deleteLink(id) {
      try {
        await this.$store.dispatch('sqlMgr/ActSqlOp', [{dbAlias: this.nodes.dbAlias}, 'deleteSharedViewLink', {
          id: id
        }])
        this.$toast.success('Deleted shared view successfully').goAway(3000)
        this.loadSharedViewsList()
      }catch (e){
        this.$toast.error(e.message).goAway(3000)
      }
    }
  },
  data: () => ({
    viewsList: null,
  }),
  computed: {
    origin() {
      return location.origin
    }
  }
}
</script>

<style scoped>

</style>