Xmysql is now NocoDB (An Open Source Airtable alternative)

packages/nc-gui/components/project/spreadsheet/dialog/createViewDialog.vue

@@ -0,0 +1,120 @@
+<template>
+  <v-dialog v-model="localState" max-width="500">
+    <v-card class="elevation-20">
+      <v-card-title class="grey darken-2 subheading" style="height:30px">
+      </v-card-title>
+      <v-card-text class="pt-4 pl-4">
+        <p class="headline">
+          Create <span class="text-capitalize">{{ show_as }}</span> View
+        </p>
+        <v-form ref="form" v-model="valid" @submit.prevent="createView">
+          <v-text-field
+            ref="name"
+            label="View Name"
+            :rules="[v=>!!v || 'View name required']"
+            v-model="view_name"
+            autofocus
+          ></v-text-field>
+
+        </v-form>
+      </v-card-text>
+      <v-card-actions class="pa-4">
+        <v-spacer></v-spacer>
+        <v-btn class="" small @click="$emit('input',false)">
+          Cancel
+        </v-btn>
+        <v-btn
+          small
+          :loading="loading"
+          class="primary "
+          @click="createView"
+          :disabled="!valid"
+        >Submit
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import table from "@/components/project/table";
+
+export default {
+  props: ['value', 'nodes', 'table', 'alias', 'show_as', 'viewsCount', 'primaryValueColumn', 'meta', 'copyView'],
+  name: "createViewDialog",
+  data: () => ({
+    valid: false,
+    view_name: '',
+    loading: false,
+    queryParams: {}
+  }),
+  mounted() {
+    try {
+      if (this.copyView && this.copyView.query_params) {
+        this.queryParams = {...JSON.parse(this.copyView.query_params)};
+      }
+    } catch (e) {
+
+    }
+    this.view_name = `${this.alias || this.table}${this.viewsCount}`
+
+    this.$nextTick(() => {
+      const input = this.$refs.name.$el.querySelector('input');
+      input.setSelectionRange(0, this.view_name.length)
+      input.focus();
+    })
+  },
+  computed: {
+    localState: {
+      get() {
+        return this.value;
+      }, set(v) {
+        this.$emit('input', v);
+      }
+    }
+  },
+  methods: {
+    async createView() {
+      let showFields = null;
+
+      if (this.show_as === 'gallery') {
+        showFields = {[this.primaryValueColumn]: true};
+        const attachmentCol = this.meta.columns.find(c => c.uidt === "Attachment");
+        if (attachmentCol) {
+          showFields[attachmentCol.cn] = true;
+        }
+        this.meta.columns.forEach(c => {
+          if (c.pk) {
+            showFields[c.cn] = true;
+          }
+        })
+      }
+
+      this.loading = true;
+      try {
+        const view_meta = await this.sqlOp({
+          dbAlias: this.nodes.dbAlias
+        }, 'xcVirtualTableCreate', {
+          title: this.view_name,
+          query_params: {
+            showFields,
+            ...this.queryParams
+          },
+          parent_model_title: this.table,
+          show_as: this.show_as
+        })
+        this.$toast.success('View created successfully').goAway(3000);
+        this.$emit('created', view_meta);
+        this.$emit('input', false);
+      } catch (e) {
+        this.$toast.error(e.message).goAway(3000);
+      }
+      this.loading = false;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>