@mongoosejs/studio 0.0.33 → 0.0.35

package/backend/actions/Dashboard/deleteDashboard.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const Archetype = require('archetype');
+const vm = require('vm');
+
+const DeleteDashboardParams = new Archetype({
+  dashboardId: {
+    $type: 'string',
+    $required: true
+  },
+}).compile('DeleteDashboardParams');
+
+module.exports = ({ db }) => async function deleteDashboard(params) {
+  const { dashboardId } = new DeleteDashboardParams(params);
+  const Dashboard = db.model('__Studio_Dashboard');
+
+  const result = await Dashboard.deleteOne({ _id: dashboardId }).orFail();
+  return { result };
+};

package/backend/actions/Dashboard/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 exports.createDashboard = require('./createDashboard');
+exports.deleteDashboard = require('./deleteDashboard');
 exports.getDashboard = require('./getDashboard');
 exports.getDashboards = require('./getDashboards');
 exports.updateDashboard = require('./updateDashboard');

package/backend/actions/Dashboard/updateDashboard.js

@@ -10,16 +10,32 @@ const UpdateDashboardParams = new Archetype({
   code: {
     $type: 'string',
     $required: true
+  },
+  title: {
+    $type: 'string'
+  },
+  description: {
+    $type: 'string'
   }
 }).compile('UpdateDashboardParams');
 
 module.exports = ({ db }) => async function updateDashboard(params) {
-  const { dashboardId, code } = new UpdateDashboardParams(params);
+  const { dashboardId, code, title, description } = new UpdateDashboardParams(params);
 
   const Dashboard = db.models[`__Studio_Dashboard`];
 
+  const updateObj = { code };
+  
+  if (title) {
+    updateObj.title = title;
+  }
+
+  if (description) {
+    updateObj.description = description;
+  }
+
   const doc = await Dashboard.
-    findByIdAndUpdate(dashboardId, { code }, { sanitizeFilter: true, returnDocument: 'after', overwriteImmutable: true });
+    findByIdAndUpdate(dashboardId, updateObj, { sanitizeFilter: true, returnDocument: 'after', overwriteImmutable: true });
   
   let result = null;
   try {

package/frontend/public/app.js

@@ -28,6 +28,16 @@ if (typeof config__setAuthorizationHeaderFrom === 'string' && config__setAuthori
   });
 }
 
+client.interceptors.response.use(
+  res => res,
+  err => {
+    if (typeof err.response.data === 'string') {
+      throw new Error(`Error in ${err.config?.method} ${err.config?.url}: ${err.response.data}`);
+    }
+    throw err;
+  }
+);
+
 if (false) {} else {
   exports.Dashboard = {
     createDashboard: function createDashboard(params) {
@@ -665,6 +675,11 @@ appendCSS(__webpack_require__(/*! ./document-details.css */ "./frontend/src/docu
 
 module.exports = app => app.component('document-details', {
   template,
+  data: function() {
+    return {
+      dateType: 'picker' // picker, iso
+    }
+  },
   props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
   methods: {
     getComponentForPath(schemaPath) {
@@ -713,7 +728,7 @@ module.exports = app => app.component('document-details', {
       }
 
       return result;
-    }
+    },
   }
 })
 
@@ -917,13 +932,11 @@ const template = __webpack_require__(/*! ./edit-date.html */ "./frontend/src/edi
 
 module.exports = app => app.component('edit-date', {
   template: template,
-  props: ['value'],
+  props: ['value', 'format'],
   emits: ['input'],
-  data: function() {
-    return {
-      inputType: 'picker' // picker, iso
-    }
-  },
+  data: () => ({
+    inputType: ''
+  }),
   computed: {
     valueAsLocalString() {
       if (this.value == null) {
@@ -948,6 +961,9 @@ module.exports = app => app.component('edit-date', {
       }
       const date = new Date(this.value);
       return date.toISOString();
+    },
+    dateSelection() {
+      return this.format;
     }
   }
 });
@@ -2559,7 +2575,7 @@ module.exports = "<div>\n  {{value}}\n</div>";
 /***/ ((module) => {
 
 "use strict";
-module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .value {\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n\n.document-details .path-key {\n  background-color: #f0f0f0;\n  margin-bottom: 0.5em;\n}\n\n.document-details .path-type {\n  color: rgba(0,0,0,.36);\n  font-size: 0.8em;\n}";
+module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .value {\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n\n.document-details .path-key {\n  background-color: #f0f0f0;\n  margin-bottom: 0.5em;\n}\n\n.document-details .path-type {\n  color: rgba(0,0,0,.36);\n  font-size: 0.8em;\n}\n\n.document-details .date-position {\n  float: right;\n  margin-top: -7px;\n}";
 
 /***/ }),
 
@@ -2570,7 +2586,7 @@ module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .v
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document-details\">\n  <div v-for=\"path in schemaPaths\" class=\"value\">\n    <div class=\"path-key p-1\">\n      {{path.path}}\n      <span class=\"path-type\">\n        ({{(path.instance || 'unknown').toLowerCase()}})\n      </span>        \n    </div>\n    <div v-if=\"editting && path.path !== '_id'\" class=\"pl-1\">\n      <component\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        @input=\"changes[path.path] = $event; delete invalid[path.path];\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else class=\"pl-1\">\n      <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n    </div>\n  </div>\n  <div v-for=\"path in virtuals\" class=\"mb-2\">\n    <div class=\"p-1 mb-1 bg-slate-100\">\n      {{path.name}}\n      <span class=\"path-type\">\n        (virtual)\n      </span>\n    </div>\n    <div v-if=\"path.value == null\" class=\"text-sky-800\">\n      {{'' + path.value}}\n    </div>\n    <div v-else>\n      {{path.value}}\n    </div>\n  </div>\n</div>";
+module.exports = "<div class=\"document-details\">\n  <div v-for=\"path in schemaPaths\" class=\"value\">\n    <div class=\"relative path-key p-1 flex\">\n      <div class=\"grow\">\n        {{path.path}}\n        <span class=\"path-type\">\n          ({{(path.instance || 'unknown').toLowerCase()}})\n        </span>\n      </div>\n      <div v-if=\"editting && path.instance === 'Date'\" class=\"flex gap-1.5\">\n        <div\n          @click=\"dateType = 'picker'\"\n          :class=\"dateType === 'picker' ? 'bg-white' : ''\"\n          class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n          <div\n            :class=\"dateType === 'picker' ? 'text-sky-600' : 'text-black'\"\n            class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n            Date Picker\n          </div>\n        </div>\n        <div\n          @click=\"dateType = 'iso'\"\n          :class=\"dateType === 'iso' ? 'bg-white' : ''\"\n          class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n          <div\n            :class=\"dateType === 'iso' ? 'text-sky-600' : 'text-black'\"\n            class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n            ISO String\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"editting && path.path !== '_id'\" class=\"pl-1\">\n      <component\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        @input=\"changes[path.path] = $event; delete invalid[path.path];\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else class=\"pl-1\">\n      <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n    </div>\n  </div>\n  <div v-for=\"path in virtuals\" class=\"mb-2\">\n    <div class=\"p-1 mb-1 bg-slate-100\">\n      {{path.name}}\n      <span class=\"path-type\">\n        (virtual)\n      </span>\n    </div>\n    <div v-if=\"path.value == null\" class=\"text-sky-800\">\n      {{'' + path.value}}\n    </div>\n    <div v-else>\n      {{path.value}}\n    </div>\n  </div>\n</div>";
 
 /***/ }),
 
@@ -2636,7 +2652,7 @@ module.exports = "<div class=\"edit-array\">\n  <textarea\n    ref=\"arrayEditor
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div>\n  <div class=\"flex mb-[-1px] w-64 justify-end\">\n    <button\n      @click=\"inputType = 'picker'\"\n      type=\"button\"\n      class=\"relative inline-flex items-center rounded-none p-1 rounded-tl-md text-sm text-gray-800 ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus:z-10\"\n      :class=\"inputType === 'picker' ? 'bg-gray-200' : 'bg-white'\">\n      Date Picker\n    </button>\n    <button\n      @click=\"inputType = 'iso'\"\n      type=\"button\"\n      class=\"relative -ml-px inline-flex items-center p-1 rounded-none rounded-tr-md text-sm text-gray-800 ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus:z-10\"\n      :class=\"inputType === 'iso' ? 'bg-gray-200' : 'bg-white'\">\n      ISO String Input\n    </button>\n  </div>\n  <input v-if=\"inputType == 'picker'\" class=\"w-64 h-8 border border-gray-300 outline-0\" type=\"datetime-local\" :value=\"valueAsLocalString\" @input=\"$emit('input', $event.target.value)\">\n  <input v-if=\"inputType == 'iso'\" type=\"text\" class=\"w-64 h-8 border border-gray-300 outline-0\" :value=\"valueAsISOString\" @input=\"$emit('input', $event.target.value)\">\n</div>";
+module.exports = "<div>\n  <input v-if=\"dateSelection == 'picker'\" class=\"w-64 h-8 border border-gray-300 outline-0\" type=\"datetime-local\" :value=\"valueAsLocalString\" @input=\"$emit('input', $event.target.value)\">\n  <input v-if=\"dateSelection == 'iso'\" type=\"text\" class=\"w-64 h-8 border border-gray-300 outline-0\" :value=\"valueAsISOString\" @input=\"$emit('input', $event.target.value)\">\n</div>";
 
 /***/ }),
 

package/frontend/public/tw.css

@@ -582,6 +582,10 @@ video {
   position: fixed;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .relative {
   position: relative;
 }
@@ -774,6 +778,10 @@ video {
   flex-grow: 1;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .list-disc {
   list-style-type: disc;
 }
@@ -790,8 +798,16 @@ video {
   align-items: center;
 }
 
-.justify-end {
-  justify-content: flex-end;
+.justify-center {
+  justify-content: center;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-1\.5 {
+  gap: 0.375rem;
 }
 
 .gap-2 {
@@ -828,6 +844,10 @@ video {
   border-color: rgb(209 213 219 / var(--tw-divide-opacity));
 }
 
+.self-stretch {
+  align-self: stretch;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -862,22 +882,22 @@ video {
   border-radius: 0px;
 }
 
-.rounded-l-md {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
+.rounded-xl {
+  border-radius: 0.75rem;
 }
 
-.rounded-r-md {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
+.rounded-sm {
+  border-radius: 0.125rem;
 }
 
-.rounded-tl-md {
+.rounded-l-md {
   border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
 }
 
-.rounded-tr-md {
+.rounded-r-md {
   border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
 }
 
 .border {
@@ -1096,6 +1116,10 @@ video {
   vertical-align: middle;
 }
 
+.font-\[\'Lato\'\] {
+  font-family: 'Lato';
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1116,6 +1140,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1128,10 +1157,18 @@ video {
   font-weight: 600;
 }
 
+.capitalize {
+  text-transform: capitalize;
+}
+
 .leading-6 {
   line-height: 1.5rem;
 }
 
+.leading-tight {
+  line-height: 1.25;
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1152,11 +1189,6 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1177,6 +1209,11 @@ video {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
+.text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
 .text-sky-800 {
   --tw-text-opacity: 1;
   color: rgb(7 89 133 / var(--tw-text-opacity));
@@ -1272,11 +1309,6 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.hover\:bg-gray-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));

package/frontend/src/api.js

@@ -18,6 +18,16 @@ if (typeof config__setAuthorizationHeaderFrom === 'string' && config__setAuthori
   });
 }
 
+client.interceptors.response.use(
+  res => res,
+  err => {
+    if (typeof err.response.data === 'string') {
+      throw new Error(`Error in ${err.config?.method} ${err.config?.url}: ${err.response.data}`);
+    }
+    throw err;
+  }
+);
+
 if (config__isLambda) {
   exports.Dashboard = {
     createDashboard(params) {
@@ -64,6 +74,9 @@ if (config__isLambda) {
     createDashboard: function createDashboard(params) {
       return client.post('/Dashboard/createDashboard', params).then(res => res.data);
     },
+    deleteDashboard: function deleteDashboard(params) {
+      return client.post('/Dashboard/deleteDashboard', params).then(res => res.data)
+    },
     getDashboard: function getDashboard(params) {
       return client.put('/Dashboard/getDashboard', params).then(res => res.data);
     },

package/frontend/src/dashboard/dashboard.html

@@ -1,7 +1,7 @@
 <div class="dashboard px-1">
   <div v-if="dashboard" class="max-w-5xl mx-auto">
     <div class="flex items-center w-full">
-      <h2 class="mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink">{{dashboard.title}}</h2>
+      <h2 class="mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink">{{title}}</h2>
       <div>
         <button
           v-if="!showEditor"
@@ -19,6 +19,8 @@
       <edit-dashboard
         :dashboardId="dashboard._id"
         :code="code"
+        :currentDescription="description"
+        :currentTitle="title"
         @close="showEditor=false;"
         @update="updateCode"></edit-dashboard>
     </div>

package/frontend/src/dashboard/dashboard.js

@@ -10,6 +10,8 @@ module.exports = app => app.component('dashboard', {
     return {
       status: 'loading',
       code: '',
+      title: '',
+      description: '',
       showEditor: false,
       dashboard: null,
       result: null
@@ -21,6 +23,8 @@ module.exports = app => app.component('dashboard', {
     },
     async updateCode(update) {
       this.code = update.doc.code;
+      this.title = update.doc.title;
+      this.description = update.doc.description;
       this.result = update.result;
     }
   },
@@ -31,6 +35,8 @@ module.exports = app => app.component('dashboard', {
     }
     this.dashboard = dashboard;
     this.code = this.dashboard.code;
+    this.title = this.dashboard.title;
+    this.description = this.dashboard.description ?? '';
     this.result = result;
     this.status = 'loaded';
   }

package/frontend/src/dashboard/edit-dashboard/edit-dashboard.html

@@ -1,5 +1,15 @@
-<div>
-    <textarea ref="codeEditor">{{code}}</textarea>
-    <button @click="updateCode" style="color: black;margin-right: 0.5em">Submit</button>
-    <button @click="closeEditor" class="gray" style="margin-right: 0.5em">Cancel</button>
+<div class="p-4 bg-gray-100 rounded-lg shadow-lg">
+    <div>
+        <input v-model="title" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Title"/>
+    </div>
+    <div>
+        <textarea v-model="description" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Description">{{description}}</textarea>
+    </div>
+    <div>
+        <textarea ref="codeEditor" class="w-full p-2 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="6">{{code}}</textarea>
+    </div>
+    <div class="flex space-x-2">
+        <button @click="updateCode" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">Submit</button>
+        <button @click="closeEditor" class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
+    </div>
 </div>

package/frontend/src/dashboard/edit-dashboard/edit-dashboard.js

@@ -5,11 +5,13 @@ const template = require('./edit-dashboard.html');
 
 module.exports = app => app.component('edit-dashboard', {
   template: template,
-  props: ['dashboardId', 'code'],
+  props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
   data: function() {
     return {
       status: 'loading',
       editor: null,
+      title: '',
+      description: ''
     }
   },
   methods: {
@@ -17,9 +19,12 @@ module.exports = app => app.component('edit-dashboard', {
         this.$emit('close')
     },
     async updateCode() {
+      console.log('this.title', this.title, 'this.description', this.description)
       const { doc, result } = await api.Dashboard.updateDashboard({
         dashboardId: this.dashboardId,
-        code: this.editor.getValue()
+        code: this.editor.getValue(),
+        title: this.title,
+        description: this.description
       });
       this.$emit('update', { doc, result });
       this.editor.setValue(doc.code);
@@ -45,7 +50,7 @@ module.exports = app => app.component('edit-dashboard', {
    
     this.editor.focus();
     // this.editor.refresh(); // if anything weird happens on load, this usually fixes it. However, this breaks it in this case.
-
-    
+    this.description = this.currentDescription;
+    this.title = this.currentTitle;
   }
 });

package/frontend/src/dashboards/dashboards.html

@@ -59,6 +59,13 @@
                     View
                   </router-link>
                 </td>
+                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                  <button
+                    @click="showDeleteDashboardModal=dashboard"
+                    class="text-teal-600 hover:text-teal-900">
+                    Delete
+                  </button>
+                </td>
               </tr>
   
               <!-- More people... -->
@@ -73,7 +80,18 @@
     <template v-slot:body>
       <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
       
-      <create-dashboard></create-dashboard>
+      <create-dashboard @close="insertNewDashboard"></create-dashboard>
+    </template>
+  </modal>
+
+  <modal v-if="showDeleteDashboardModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showDeleteDashboardModal = null;">&times;</div>
+      <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>
+      <div class="flex space-x-2">
+        <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500" @click="deleteDashboard(showDeleteDashboardModal)">Yes, delete</button>
+        <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600" @click="showDeleteDashboardModal=null;">Cancel</button>
+      </div>
     </template>
   </modal>
 </div>

package/frontend/src/dashboards/dashboards.js

@@ -9,8 +9,24 @@ module.exports = app => app.component('dashboards', {
   data: () => ({
     status: 'loading',
     dashboards: [],
-    showCreateDashboardModal: false
+    showCreateDashboardModal: false,
+    showDeleteDashboardModal: null
   }),
+  methods: {
+    async deleteDashboard(dashboard) {
+      if (!dashboard) {
+        return;
+      }
+      await api.Dashboard.deleteDashboard({ dashboardId: dashboard._id });
+      const removedDashboard = this.dashboards.findIndex(x => x._id.toString() === dashboard._id.toString());
+      this.dashboards.splice(removedDashboard, 1);
+      this.showDeleteDashboardModal = null;
+    },
+    insertNewDashboard(dashboard) {
+      this.dashboards.push(dashboard);
+      this.showCreateDashboardModal = false;
+    }
+  },
   async mounted() {
     const { dashboards } = await api.Dashboard.getDashboards();
     this.dashboards = dashboards;

package/frontend/src/document-details/document-details.css

@@ -15,4 +15,9 @@
 .document-details .path-type {
   color: rgba(0,0,0,.36);
   font-size: 0.8em;
+}
+
+.document-details .date-position {
+  float: right;
+  margin-top: -7px;
 }

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

@@ -1,15 +1,40 @@
 <div class="document-details">
   <div v-for="path in schemaPaths" class="value">
-    <div class="path-key p-1">
-      {{path.path}}
-      <span class="path-type">
-        ({{(path.instance || 'unknown').toLowerCase()}})
-      </span>        
+    <div class="relative path-key p-1 flex">
+      <div class="grow">
+        {{path.path}}
+        <span class="path-type">
+          ({{(path.instance || 'unknown').toLowerCase()}})
+        </span>
+      </div>
+      <div v-if="editting && path.instance === 'Date'" class="flex gap-1.5">
+        <div
+          @click="dateType = 'picker'"
+          :class="dateType === 'picker' ? 'bg-white' : ''"
+          class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
+          <div
+            :class="dateType === 'picker' ? 'text-sky-600' : 'text-black'"
+            class="text-xs font-medium font-['Lato'] capitalize leading-tight">
+            Date Picker
+          </div>
+        </div>
+        <div
+          @click="dateType = 'iso'"
+          :class="dateType === 'iso' ? 'bg-white' : ''"
+          class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
+          <div
+            :class="dateType === 'iso' ? 'text-sky-600' : 'text-black'"
+            class="text-xs font-medium font-['Lato'] capitalize leading-tight">
+            ISO String
+          </div>
+        </div>
+      </div>
     </div>
     <div v-if="editting && path.path !== '_id'" class="pl-1">
       <component
         :is="getEditComponentForPath(path)"
         :value="getEditValueForPath(path)"
+        :format="dateType"
         @input="changes[path.path] = $event; delete invalid[path.path];"
         @error="invalid[path.path] = $event;"
         >

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

@@ -9,6 +9,11 @@ appendCSS(require('./document-details.css'));
 
 module.exports = app => app.component('document-details', {
   template,
+  data: function() {
+    return {
+      dateType: 'picker' // picker, iso
+    }
+  },
   props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
   methods: {
     getComponentForPath(schemaPath) {
@@ -57,6 +62,6 @@ module.exports = app => app.component('document-details', {
       }
 
       return result;
-    }
+    },
   }
 })

package/frontend/src/edit-date/edit-date.html

@@ -1,20 +1,4 @@
 <div>
-  <div class="flex mb-[-1px] w-64 justify-end">
-    <button
-      @click="inputType = 'picker'"
-      type="button"
-      class="relative inline-flex items-center rounded-none p-1 rounded-tl-md text-sm text-gray-800 ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus:z-10"
-      :class="inputType === 'picker' ? 'bg-gray-200' : 'bg-white'">
-      Date Picker
-    </button>
-    <button
-      @click="inputType = 'iso'"
-      type="button"
-      class="relative -ml-px inline-flex items-center p-1 rounded-none rounded-tr-md text-sm text-gray-800 ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus:z-10"
-      :class="inputType === 'iso' ? 'bg-gray-200' : 'bg-white'">
-      ISO String Input
-    </button>
-  </div>
-  <input v-if="inputType == 'picker'" class="w-64 h-8 border border-gray-300 outline-0" type="datetime-local" :value="valueAsLocalString" @input="$emit('input', $event.target.value)">
-  <input v-if="inputType == 'iso'" type="text" class="w-64 h-8 border border-gray-300 outline-0" :value="valueAsISOString" @input="$emit('input', $event.target.value)">
+  <input v-if="dateSelection == 'picker'" class="w-64 h-8 border border-gray-300 outline-0" type="datetime-local" :value="valueAsLocalString" @input="$emit('input', $event.target.value)">
+  <input v-if="dateSelection == 'iso'" type="text" class="w-64 h-8 border border-gray-300 outline-0" :value="valueAsISOString" @input="$emit('input', $event.target.value)">
 </div>

package/frontend/src/edit-date/edit-date.js

@@ -4,13 +4,11 @@ const template = require('./edit-date.html');
 
 module.exports = app => app.component('edit-date', {
   template: template,
-  props: ['value'],
+  props: ['value', 'format'],
   emits: ['input'],
-  data: function() {
-    return {
-      inputType: 'picker' // picker, iso
-    }
-  },
+  data: () => ({
+    inputType: ''
+  }),
   computed: {
     valueAsLocalString() {
       if (this.value == null) {
@@ -35,6 +33,9 @@ module.exports = app => app.component('edit-date', {
       }
       const date = new Date(this.value);
       return date.toISOString();
+    },
+    dateSelection() {
+      return this.format;
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",