@mongoosejs/studio 0.0.71 → 0.0.72

package/frontend/public/app.js

@@ -67,7 +67,31 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('', { action: 'Model.deleteDocument', ...params}).then(res => res.data);
     },
     exportQueryResults(params) {
-      return client.post('', { action: 'Model.exportQueryResults', ...params }).then(res => res.data);
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+
+      return fetch(window.MONGOOSE_STUDIO_CONFIG.baseURL + new URLSearchParams({ ...params, action: 'Model.exportQueryResults' }).toString(), {
+        method: 'GET',
+        headers: {
+          'Authorization': `${accessToken}`, // Set your authorization token here
+          'Accept': 'text/csv'
+        }
+      })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          return response.blob();
+        })
+        .then(blob => {
+          const blobURL = window.URL.createObjectURL(blob);
+          const anchor = document.createElement('a');
+          anchor.href = blobURL;
+          anchor.download = 'export.csv';
+          document.body.appendChild(anchor);
+          anchor.click();
+          document.body.removeChild(anchor);
+          window.URL.revokeObjectURL(blobURL);
+        });
     },
     getDocument: function getDocument(params) {
       return client.post('', { action: 'Model.getDocument', ...params }).then(res => res.data);
@@ -114,12 +138,31 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('/Model/deleteDocument', params).then(res => res.data);
     },
     exportQueryResults(params) {
-      const anchor = document.createElement('a');
-      anchor.href = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/exportQueryResults?' + (new URLSearchParams(params)).toString();
-      anchor.target = '_blank';
-      anchor.download = 'export.csv';
-      anchor.click();
-      return;
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+
+      return fetch(window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/exportQueryResults?' + new URLSearchParams(params).toString(), {
+        method: 'GET',
+        headers: {
+          'Authorization': `${accessToken}`, // Set your authorization token here
+          'Accept': 'text/csv'
+        }
+      })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          return response.blob();
+        })
+        .then(blob => {
+          const blobURL = window.URL.createObjectURL(blob);
+          const anchor = document.createElement('a');
+          anchor.href = blobURL;
+          anchor.download = 'export.csv';
+          document.body.appendChild(anchor);
+          anchor.click();
+          document.body.removeChild(anchor);
+          window.URL.revokeObjectURL(blobURL);
+        });
     },
     getDocument: function getDocument(params) {
       return client.post('/Model/getDocument', params).then(res => res.data);
@@ -215,6 +258,88 @@ module.exports = app => app.component('async-button', {
 
 /***/ }),
 
+/***/ "./frontend/src/clone-document/clone-document.js":
+/*!*******************************************************!*\
+  !*** ./frontend/src/clone-document/clone-document.js ***!
+  \*******************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
+
+const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.cjs");
+
+const ObjectId = new Proxy(BSON.ObjectId, {
+  apply (target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
+
+const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
+
+appendCSS(__webpack_require__(/*! ./clone-document.css */ "./frontend/src/clone-document/clone-document.css"));
+
+const template = __webpack_require__(/*! ./clone-document.html */ "./frontend/src/clone-document/clone-document.html")
+
+module.exports = app => app.component('clone-document', {
+  props: ['currentModel', 'doc', 'schemaPaths'],
+  template,
+  data: function() {
+    return {
+      documentData: '',
+      editor: null,
+      errors: []
+    }
+  },
+  methods: {
+    async cloneDocument() {
+      const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
+      const { doc } = await api.Model.createDocument({ model: this.currentModel, data }).catch(err => {
+        if (err.response?.data?.message) {
+          console.log(err.response.data);
+          const message = err.response.data.message.split(": ").slice(1).join(": ");
+          this.errors = message.split(',').map(error => {
+            return error.split(': ').slice(1).join(': ').trim();
+          })
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+      this.errors.length = 0;
+      this.$emit('close', doc);
+    },
+  },
+  mounted: function() {
+    const pathsToClone = this.schemaPaths.map(x => x.path);
+    
+    // Create a filtered version of the document data
+    const filteredDoc = {};
+    pathsToClone.forEach(path => {
+      const value = this.doc[path];
+      if (value !== undefined) {
+        filteredDoc[path] = value;
+      }
+    });
+
+    // Replace _id with a new ObjectId
+    if (pathsToClone.includes('_id')) {
+      filteredDoc._id = new ObjectId();
+    }
+
+    this.documentData = JSON.stringify(filteredDoc, null, 2);
+    this.$refs.codeEditor.value = this.documentData;
+    this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
+      mode: 'javascript',
+      lineNumbers: true,
+      smartIndent: false
+    });
+  },
+})
+
+/***/ }),
+
 /***/ "./frontend/src/create-dashboard/create-dashboard.js":
 /*!***********************************************************!*\
   !*** ./frontend/src/create-dashboard/create-dashboard.js ***!
@@ -943,7 +1068,8 @@ module.exports = app => app.component('document', {
     editting: false,
     virtuals: [],
     shouldShowConfirmModal: false,
-    shouldShowDeleteModal: false
+    shouldShowDeleteModal: false,
+    shouldShowCloneModal: false
   }),
   async mounted() {
     window.pageState = this;
@@ -1004,6 +1130,9 @@ module.exports = app => app.component('document', {
         });
         this.$router.push({ path: `/model/${this.model}`});
       }
+    },
+    showClonedDocument(doc) {
+      this.$router.push({ path: `/model/${this.model}/document/${doc._id}`});
     }
   }
 });
@@ -2937,6 +3066,28 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 
 /***/ }),
 
+/***/ "./frontend/src/clone-document/clone-document.css":
+/*!********************************************************!*\
+  !*** ./frontend/src/clone-document/clone-document.css ***!
+  \********************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "";
+
+/***/ }),
+
+/***/ "./frontend/src/clone-document/clone-document.html":
+/*!*********************************************************!*\
+  !*** ./frontend/src/clone-document/clone-document.html ***!
+  \*********************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div>\n    <div class=\"mb-2\">\n      <textarea class=\"border border-gray-200 p-2 h-[300px] w-full\" ref=\"codeEditor\"></textarea>\n    </div>\n    <button @click=\"cloneDocument()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Submit</button>\n    <div v-if=\"errors.length > 0\" class=\"rounded-md bg-red-50 p-4 mt-1\">\n      <div class=\"flex\">\n        <div class=\"flex-shrink-0\">\n          <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n          </svg>\n        </div>\n        <div class=\"ml-3\">\n          <h3 class=\"text-sm font-medium text-red-800\">There were {{errors.length}} errors with your submission</h3>\n          <div class=\"mt-2 text-sm text-red-700\">\n            <ul role=\"list\" class=\"list-disc space-y-1 pl-5\">\n              <li v-for=\"error in errors\">\n                {{error}}\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  ";
+
+/***/ }),
+
 /***/ "./frontend/src/create-dashboard/create-dashboard.html":
 /*!*************************************************************!*\
   !*** ./frontend/src/create-dashboard/create-dashboard.html ***!
@@ -3164,7 +3315,7 @@ module.exports = ".document {\n  max-width: 1200px;\n  margin-left: auto;\n  mar
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button\n        @click=\"$router.push('/model/' + this.model)\"\n        class=\"rounded-md bg-gray-400 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"shouldShowDeleteModal=true;\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowDeleteModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-delete @close=\"shouldShowConfirmModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n      </template>\n    </modal>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button\n        @click=\"$router.push('/model/' + this.model)\"\n        class=\"rounded-md bg-gray-400 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"shouldShowDeleteModal=true;\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n      <button\n        @click=\"shouldShowCloneModal=true;\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        class=\"rounded-md bg-pink-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/duplicate.svg\" class=\"inline\" /> Clone\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowDeleteModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-delete @close=\"shouldShowConfirmModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowCloneModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n          <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n      </template>\n    </modal>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -3252,7 +3403,7 @@ module.exports = "";
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"export-query-results\">\n  <h2>Export as CSV</h2>\n  <div>\n    Choose fields to export\n  </div>\n  <div v-for=\"schemaPath in schemaPaths\">\n    <input type=\"checkbox\" v-model=\"shouldExport[schemaPath.path]\">\n    <span>{{schemaPath.path}}</span>\n  </div>\n  <async-button @click=\"exportQueryResults\">Export</async-button>\n</div>";
+module.exports = "<div class=\"export-query-results\">\n  <h2>Export as CSV</h2>\n  <div>\n    Choose fields to export\n  </div>\n  <div v-for=\"(schemaPath,index) in schemaPaths\" class=\"w-5 flex items-center\">\n    <input type=\"checkbox\" class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" v-model=\"shouldExport[schemaPath.path]\" :id=\"'schemaPath.path'+index\">\n    <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n      <label :for=\"'schemaPath.path'+index\">{{schemaPath.path}}</label>\n    </div>\n  </div>\n  <async-button class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\" @click=\"exportQueryResults\">Export</async-button>\n</div>";
 
 /***/ }),
 
@@ -3428,7 +3579,7 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow flex-col gap-y-5 overflow-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)] w-48\">\n      <div class=\"flex font-bold font-xl mt-4 pl-2\">\n        Models\n      </div>\n      <nav class=\"flex flex-1 flex-col\">\n        <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n          <li>\n            <ul role=\"list\">\n              <li v-for=\"model in models\">\n                <router-link\n                  :to=\"'/model/' + model\"\n                  class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                  :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                  {{model}}\n                </router-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </nav>\n    </div>\n\n  </div>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"flex-grow m-0\">\n            <input ref=\"searchInput\" class=\"w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter or text\" v-model=\"searchText\" />\n          </form>\n          <div>\n            <span v-if=\"status === 'loading'\">Loading ...</span>\n            <span v-if=\"status === 'loaded'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Export\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :filter=\"filter\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <button type=\"submit\" @click=\"dropIndex()\" disabled=\"true\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">Drop</button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"submit\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"submit\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"submit\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"models\">\n  <div>\n    <div class=\"flex grow flex-col gap-y-5 overflow-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)] w-48\">\n      <div class=\"flex font-bold font-xl mt-4 pl-2\">\n        Models\n      </div>\n      <nav class=\"flex flex-1 flex-col\">\n        <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n          <li>\n            <ul role=\"list\">\n              <li v-for=\"model in models\">\n                <router-link\n                  :to=\"'/model/' + model\"\n                  class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n                  :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n                  {{model}}\n                </router-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </nav>\n    </div>\n\n  </div>\n  <div class=\"documents\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\">\n      <div class=\"documents-menu\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <form @submit.prevent=\"search\" class=\"flex-grow m-0\">\n            <input ref=\"searchInput\" class=\"w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter or text\" v-model=\"searchText\" />\n          </form>\n          <div>\n            <span v-if=\"status === 'loading'\">Loading ...</span>\n            <span v-if=\"status === 'loaded'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"shouldShowExportModal = true\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Export\n          </button>\n          <button\n            @click=\"openIndexModal\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Indexes\n          </button>\n          <button\n            @click=\"shouldShowCreateModal = true;\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Create\n          </button>\n          <button\n            @click=\"openFieldSelection\"\n            type=\"button\"\n            class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            Fields\n          </button>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"outputType = 'table'\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"outputType = 'json'\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <table v-if=\"outputType === 'table'\">\n        <thead>\n          <th v-for=\"path in filteredPaths\" @click=\"clickFilter(path.path)\" class=\"cursor-pointer\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n            <td v-for=\"schemaPath in filteredPaths\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"outputType === 'json'\">\n        <div v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n          <list-json :value=\"filterDocument(document)\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :filter=\"filter\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold\">{{ index.name }}</div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <button type=\"submit\" @click=\"dropIndex()\" disabled=\"true\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">Drop</button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"submit\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"submit\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"submit\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -11313,6 +11464,7 @@ const app = Vue.createApp({
 });
 
 __webpack_require__(/*! ./async-button/async-button */ "./frontend/src/async-button/async-button.js")(app);
+__webpack_require__(/*! ./clone-document/clone-document */ "./frontend/src/clone-document/clone-document.js")(app);
 __webpack_require__(/*! ./create-dashboard/create-dashboard */ "./frontend/src/create-dashboard/create-dashboard.js")(app);
 __webpack_require__(/*! ./create-document/create-document */ "./frontend/src/create-document/create-document.js")(app);
 __webpack_require__(/*! ./dashboards/dashboards */ "./frontend/src/dashboards/dashboards.js")(app);

package/frontend/public/images/duplicate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M560-320h80v-120h120v-80H640v-120h-80v120H440v80h120v120ZM240-140Q131-178 65.5-271.5T0-480q0-115 65.5-208.5T240-820v88q-74 35-117 103T80-480q0 81 43 149t117 103v88Zm360 20q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T240-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T600-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T960-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T600-120Zm0-360Zm0 280q117 0 198.5-81.5T880-480q0-117-81.5-198.5T600-760q-117 0-198.5 81.5T320-480q0 117 81.5 198.5T600-200Z"/></svg>

package/frontend/public/tw.css

@@ -1199,6 +1199,11 @@ video {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
+.bg-pink-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 39 119 / var(--tw-bg-opacity));
+}
+
 .bg-red-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(252 165 165 / var(--tw-bg-opacity));

package/frontend/src/clone-document/clone-document.html

@@ -0,0 +1,26 @@
+<div>
+    <div class="mb-2">
+      <textarea class="border border-gray-200 p-2 h-[300px] w-full" ref="codeEditor"></textarea>
+    </div>
+    <button @click="cloneDocument()" class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Submit</button>
+    <div v-if="errors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+          </svg>
+        </div>
+        <div class="ml-3">
+          <h3 class="text-sm font-medium text-red-800">There were {{errors.length}} errors with your submission</h3>
+          <div class="mt-2 text-sm text-red-700">
+            <ul role="list" class="list-disc space-y-1 pl-5">
+              <li v-for="error in errors">
+                {{error}}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  

package/frontend/src/clone-document/clone-document.js

@@ -0,0 +1,72 @@
+'use strict';
+
+const api = require('../api');
+
+const { BSON, EJSON } = require('bson');
+
+const ObjectId = new Proxy(BSON.ObjectId, {
+  apply (target, thisArg, argumentsList) {
+    return new target(...argumentsList);
+  }
+});
+
+const appendCSS = require('../appendCSS');
+
+appendCSS(require('./clone-document.css'));
+
+const template = require('./clone-document.html')
+
+module.exports = app => app.component('clone-document', {
+  props: ['currentModel', 'doc', 'schemaPaths'],
+  template,
+  data: function() {
+    return {
+      documentData: '',
+      editor: null,
+      errors: []
+    }
+  },
+  methods: {
+    async cloneDocument() {
+      const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
+      const { doc } = await api.Model.createDocument({ model: this.currentModel, data }).catch(err => {
+        if (err.response?.data?.message) {
+          console.log(err.response.data);
+          const message = err.response.data.message.split(": ").slice(1).join(": ");
+          this.errors = message.split(',').map(error => {
+            return error.split(': ').slice(1).join(': ').trim();
+          })
+          throw new Error(err.response?.data?.message);
+        }
+        throw err;
+      });
+      this.errors.length = 0;
+      this.$emit('close', doc);
+    },
+  },
+  mounted: function() {
+    const pathsToClone = this.schemaPaths.map(x => x.path);
+    
+    // Create a filtered version of the document data
+    const filteredDoc = {};
+    pathsToClone.forEach(path => {
+      const value = this.doc[path];
+      if (value !== undefined) {
+        filteredDoc[path] = value;
+      }
+    });
+
+    // Replace _id with a new ObjectId
+    if (pathsToClone.includes('_id')) {
+      filteredDoc._id = new ObjectId();
+    }
+
+    this.documentData = JSON.stringify(filteredDoc, null, 2);
+    this.$refs.codeEditor.value = this.documentData;
+    this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
+      mode: 'javascript',
+      lineNumbers: true,
+      smartIndent: false
+    });
+  },
+})

package/frontend/src/document/document.html

@@ -42,6 +42,14 @@
         class="rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
         <img src="images/delete.svg" class="inline" /> Delete
       </button>
+      <button
+        @click="shouldShowCloneModal=true;"
+        :disabled="!canManipulate"
+        :class="{'cursor-not-allowed opacity-50': !canManipulate}"
+        type="button"
+        class="rounded-md bg-pink-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
+        <img src="images/duplicate.svg" class="inline" /> Clone
+      </button>
     </div>
   </div>
   <div v-if="status === 'loaded'">
@@ -63,5 +71,11 @@
         <confirm-delete @close="shouldShowConfirmModal = false;" @remove="remove" :value="document"></confirm-delete>
       </template>
     </modal>
+    <modal v-if="shouldShowCloneModal">
+      <template v-slot:body>
+        <div class="modal-exit" @click="shouldShowCloneModal = false;">&times;</div>
+          <clone-document :currentModel="model" :doc="document" :schemaPaths="schemaPaths" @close="showClonedDocument"></clone-document>
+      </template>
+    </modal>
   </div>
 </div>

package/frontend/src/document/document.js

@@ -21,7 +21,8 @@ module.exports = app => app.component('document', {
     editting: false,
     virtuals: [],
     shouldShowConfirmModal: false,
-    shouldShowDeleteModal: false
+    shouldShowDeleteModal: false,
+    shouldShowCloneModal: false
   }),
   async mounted() {
     window.pageState = this;
@@ -82,6 +83,9 @@ module.exports = app => app.component('document', {
         });
         this.$router.push({ path: `/model/${this.model}`});
       }
+    },
+    showClonedDocument(doc) {
+      this.$router.push({ path: `/model/${this.model}/document/${doc._id}`});
     }
   }
 });

package/frontend/src/index.js

@@ -13,6 +13,7 @@ const app = Vue.createApp({
 });
 
 require('./async-button/async-button')(app);
+require('./clone-document/clone-document')(app);
 require('./create-dashboard/create-dashboard')(app);
 require('./create-document/create-document')(app);
 require('./dashboards/dashboards')(app);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "dependencies": {
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",