@mongoosejs/studio 0.5.7 → 0.5.9

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

@@ -9,20 +9,12 @@ appendCSS(require('./document-details.css'));
 
 module.exports = app => app.component('document-details', {
   template,
-  props: ['document', 'schemaPaths', 'virtualPaths', 'editting', 'changes', 'invalid', 'viewMode', 'model'],
+  props: ['document', 'schemaPaths', 'virtualPaths', 'editting', 'changes', 'invalid', 'viewMode'],
   data() {
     return {
       searchQuery: '',
       selectedType: '',
-      collapsedVirtuals: new Set(),
-      showAddFieldModal: false,
-      fieldData: {
-        name: '',
-        type: '',
-        value: ''
-      },
-      fieldErrors: {},
-      isSubmittingField: false
+      collapsedVirtuals: new Set()
     };
   },
   mounted() {
@@ -92,20 +84,6 @@ module.exports = app => app.component('document-details', {
 
       return Array.from(types).sort();
     },
-    allFieldTypes() {
-      const schemaTypes = this.availableTypes;
-      const commonTypes = ['String', 'Number', 'Boolean', 'Date', 'Array', 'Object'];
-
-      // Combine schema types with common types, avoiding duplicates
-      const allTypes = new Set([...schemaTypes, ...commonTypes]);
-      return Array.from(allTypes).sort();
-    },
-    shouldUseAce() {
-      return ['Array', 'Object', 'Embedded'].includes(this.fieldData.type);
-    },
-    shouldUseDatePicker() {
-      return this.fieldData.type === 'Date';
-    },
     typeFilteredSchemaPaths() {
       let paths = this.schemaPaths || [];
 
@@ -317,120 +295,6 @@ module.exports = app => app.component('document-details', {
     isVirtualFieldCollapsed(fieldName) {
       return this.collapsedVirtuals.has(fieldName);
     },
-    openAddFieldModal() {
-      this.showAddFieldModal = true;
-    },
-    closeAddFieldModal() {
-      this.showAddFieldModal = false;
-      this.resetFieldForm();
-    },
-    async addNewField(fieldData) {
-      // Emit event to parent component to handle the field addition
-      this.$emit('add-field', fieldData);
-      this.closeAddFieldModal();
-    },
-    validateFieldForm() {
-      this.fieldErrors = {};
-
-      // Validate field name
-      const trimmedName = this.fieldData.name.trim();
-      if (!trimmedName) {
-        this.fieldErrors.name = 'Field name is required';
-      } else {
-        const transformedName = this.getTransformedFieldName();
-        if (!transformedName) {
-          this.fieldErrors.name = 'Field name contains only invalid characters';
-        } else if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(transformedName)) {
-          this.fieldErrors.name = 'Field name must start with a letter, underscore, or $ and contain only letters, numbers, underscores, and $';
-        }
-      }
-
-      // Validate field type
-      if (!this.fieldData.type) {
-        this.fieldErrors.type = 'Field type is required';
-      }
-
-      // Validate field value if provided
-      if (this.fieldData.value && this.fieldData.value.trim()) {
-        if (['Object', 'Array'].includes(this.fieldData.type)) {
-          try {
-            JSON.parse(this.fieldData.value);
-          } catch (e) {
-            this.fieldErrors.value = 'Invalid JSON format for object/array type';
-          }
-        } else if (this.fieldData.type === 'Number') {
-          if (isNaN(Number(this.fieldData.value))) {
-            this.fieldErrors.value = 'Invalid number format';
-          }
-        } else if (this.fieldData.type === 'Boolean') {
-          const lowerValue = this.fieldData.value.toLowerCase();
-          if (!['true', 'false', '1', '0', 'yes', 'no'].includes(lowerValue)) {
-            this.fieldErrors.value = 'Invalid boolean value (use true/false, 1/0, yes/no)';
-          }
-        } else if (this.fieldData.type === 'Date') {
-          // Date picker provides YYYY-MM-DD format, validate it
-          const dateValue = new Date(this.fieldData.value);
-          if (isNaN(dateValue.getTime())) {
-            this.fieldErrors.value = 'Invalid date format';
-          }
-        }
-      }
-
-      return Object.keys(this.fieldErrors).length === 0;
-    },
-    parseFieldValue(value, type) {
-      if (!value || !value.trim()) {
-        return null;
-      }
-
-      switch (type) {
-        case 'Number':
-          return Number(value);
-        case 'Boolean':
-          const lowerValue = value.toLowerCase();
-          return ['true', '1', 'yes'].includes(lowerValue);
-        case 'Date':
-          // For date picker, value is already in YYYY-MM-DD format
-          return new Date(value);
-        case 'Object':
-        case 'Array':
-          return JSON.parse(value);
-        default:
-          return value;
-      }
-    },
-    async handleAddFieldSubmit() {
-      if (!this.validateFieldForm()) {
-        return;
-      }
-
-      this.isSubmittingField = true;
-
-      try {
-        const fieldData = {
-          name: this.fieldData.name,
-          type: this.fieldData.type,
-          value: this.parseFieldValue(this.fieldData.value, this.fieldData.type)
-        };
-
-        this.$emit('add-field', fieldData);
-        this.closeAddFieldModal();
-      } catch (error) {
-        console.error('Error adding field:', error);
-        this.fieldErrors.value = 'Error processing field value';
-      } finally {
-        this.isSubmittingField = false;
-      }
-    },
-    resetFieldForm() {
-      this.fieldData = {
-        name: '',
-        type: '',
-        value: ''
-      };
-      this.fieldErrors = {};
-      this.isSubmittingField = false;
-    },
     getVirtualFieldType(virtual) {
       const value = virtual.value;
       if (value === null || value === undefined) {

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

@@ -94,6 +94,7 @@
         v-if="isDatePath"
         :viewMode="dateViewMode"
         :path="path"
+        :editting="editting"
         @update:viewMode="dateViewMode = $event"
       ></date-view-mode-picker>
       <objectid-view-mode-picker
@@ -129,7 +130,7 @@
     <div v-if="editting && path.instance === 'Date'" class="mb-3 flex gap-1.5">
       <div
         @click="dateType = 'picker'"
-        :class="dateType === 'picker' ? 'bg-teal-600' : ''"
+        :class="dateType === 'picker' ? 'bg-merlot-700' : ''"
         class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
         <div
           :class="dateType === 'picker' ? 'text-white' : ''"
@@ -139,7 +140,7 @@
       </div>
       <div
         @click="dateType = 'iso'"
-        :class="dateType === 'iso' ? 'bg-teal-600' : ''"
+        :class="dateType === 'iso' ? 'bg-merlot-700' : ''"
         class="self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer">
         <div
           :class="dateType === 'iso' ? 'text-white' : ''"

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

@@ -1,14 +1,16 @@
 <div>
-  <input
+  <custom-date-picker
     v-if="dateSelection == 'picker'"
-    class="w-64 h-8 border border-edge-strong outline-0"
-    type="datetime-local"
-    :value="valueAsLocalString"
-    @input="$emit('input', $event.target.value)">
+    :value="value"
+    mode="datetime"
+    :horizontal="true"
+    class="max-w-[420px]"
+    @input="$emit('input', $event)"
+  />
   <input
     v-if="dateSelection == 'iso'"
     type="text"
     class="w-64 h-8 border border-edge-strong outline-0"
     :value="valueAsISOString"
     @input="updateFromISO">
-</div>
+</div>

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

@@ -6,9 +6,6 @@ module.exports = app => app.component('edit-date', {
   template: template,
   props: ['value', 'format'],
   emits: ['input'],
-  data: () => ({
-    inputType: ''
-  }),
   methods: {
     updateFromISO($event) {
       const value = $event.target.value;
@@ -28,23 +25,6 @@ module.exports = app => app.component('edit-date', {
     }
   },
   computed: {
-    valueAsLocalString() {
-      if (this.value == null) {
-        return this.value;
-      }
-      const date = new Date(this.value);
-      return [
-        date.getFullYear(),
-        '-',
-        (date.getMonth() + 1).toString().padStart(2, '0'),
-        '-',
-        date.getDate().toString().padStart(2, '0'),
-        'T',
-        date.getHours().toString().padStart(2, '0'),
-        ':',
-        date.getMinutes().toString().padStart(2, '0')
-      ].join('');
-    },
     valueAsISOString() {
       if (this.value == null) {
         return '' + this.value;

package/frontend/src/index.js

@@ -195,7 +195,7 @@ app.component('app-component', {
     <div v-else-if="!hasAPIKey || user">
       <navbar :user="user" :roles="roles" />
       <div class="view">
-        <router-view :key="$route.fullPath" :user="user" :roles="roles" :hasAPIKey="hasAPIKey" />
+        <router-view :key="$route.meta.preserveStateKey || $route.fullPath" :user="user" :roles="roles" :hasAPIKey="hasAPIKey" />
       </div>
     </div>
   </div>

package/frontend/src/models/document-search/document-search.html

@@ -1,23 +1,79 @@
-<form @submit.prevent="emitSearch" class="relative flex-grow m-0">
-  <input
-    ref="searchInput"
-    class="w-full font-mono rounded-md p-1 border border-edge-strong outline-edge-strong text-lg focus:ring-1 focus:ring-primary-subtle focus:ring-offset-0 focus:outline-none"
-    type="text"
-    placeholder="Filter (supports JS, dates, ObjectIds, and more)"
-    v-model="searchText"
-    @click="initFilter"
-    @input="updateAutocomplete"
-    @keydown="handleKeyDown"
-  />
-  <ul v-if="autocompleteSuggestions.length" class="absolute z-[9999] bg-surface border border-edge-strong rounded mt-1 w-full max-h-40 overflow-y-auto shadow">
-    <li
-      v-for="(suggestion, index) in autocompleteSuggestions"
-      :key="suggestion"
-      class="px-2 py-1 cursor-pointer"
-      :class="{ 'bg-primary-subtle': index === autocompleteIndex }"
-      @mousedown.prevent="applySuggestion(index)"
+<div class="relative flex-grow m-0" @focusout="onWrapperFocusOut">
+  <form @submit.prevent="emitSearch" class="w-full mb-0">
+    <input
+      ref="searchInput"
+      class="w-full font-mono rounded-md p-1 border border-edge-strong outline-edge-strong text-lg focus:ring-1 focus:ring-primary-subtle focus:ring-offset-0 focus:outline-none"
+      type="text"
+      placeholder="Filter (supports JS, dates, ObjectIds, and more)"
+      v-model="searchText"
+      @click="initFilter($event); updateAutocomplete()"
+      @input="updateAutocomplete"
+      @keyup="onSearchKeyup"
+      @keydown="handleKeyDown"
+    />
+    <div
+      v-if="autocompleteSuggestions.length"
+      ref="autocompleteDropdown"
+      class="absolute z-[9999] bg-surface border border-edge-strong rounded mt-1 w-full shadow"
     >
-      {{ suggestion }}
-    </li>
-  </ul>
-</form>
+      <ul class="max-h-40 overflow-y-auto">
+        <li
+          v-for="(suggestion, index) in autocompleteSuggestions"
+          :key="suggestion"
+          class="px-2 py-1 cursor-pointer"
+          :class="{ 'bg-primary-subtle': index === autocompleteIndex }"
+          @mousedown.prevent="applySuggestion(index)"
+        >
+          {{ suggestion }}
+        </li>
+      </ul>
+    </div>
+  </form>
+
+  <div
+    v-if="datePickerContext"
+    class="absolute top-full left-0 z-[10000] mt-0 w-[400px] max-w-[calc(100vw-2rem)] bg-surface border border-edge-strong rounded-lg shadow-xl"
+    role="dialog"
+    aria-label="Date picker"
+    @mousedown.stop
+  >
+    <div class="flex items-center justify-between gap-2 px-3 py-2 border-b border-edge-strong">
+      <span class="text-sm font-medium text-content-primary">Insert date into filter</span>
+      <div class="flex items-center gap-2 shrink-0">
+        <select
+          v-if="!datePickerMinimized"
+          v-model="dateInsertFormat"
+          class="text-xs border border-edge rounded-md bg-surface px-2 py-1"
+          @mousedown.stop
+        >
+          <option value="timestamp">Milliseconds</option>
+          <option value="quoted">Date string</option>
+        </select>
+        <button
+          type="button"
+          class="flex items-center justify-center w-5 h-5 rounded hover:bg-surface-hover text-content-secondary"
+          :aria-label="datePickerMinimized ? 'Expand date picker' : 'Minimize date picker'"
+          @click.stop="datePickerMinimized = !datePickerMinimized"
+        >
+          <svg v-if="datePickerMinimized" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+          </svg>
+          <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div v-if="!datePickerMinimized" class="p-2">
+      <custom-date-picker
+        compact
+        horizontal
+        embedded
+        :immediate="false"
+        mode="datetime"
+        :value="datePickerLocalValue"
+        @commit="applyDateFromPicker"
+      />
+    </div>
+  </div>
+</div>

package/frontend/src/models/document-search/document-search.js

@@ -4,7 +4,10 @@ const template = require('./document-search.html');
 const {
   buildAutocompleteTrie,
   getAutocompleteSuggestions,
-  applySuggestion
+  applySuggestion,
+  getDatePickerInsertionRange,
+  dateArgumentSliceToDatetimeLocal,
+  insertDateInDateArgument
 } = require('../../_util/document-search-autocomplete');
 
 module.exports = app => app.component('document-search', {
@@ -24,7 +27,11 @@ module.exports = app => app.component('document-search', {
       autocompleteSuggestions: [],
       autocompleteIndex: 0,
       autocompleteTrie: null,
-      searchText: this.value || ''
+      searchText: this.value || '',
+      datePickerContext: null,
+      datePickerLocalValue: '',
+      dateInsertFormat: 'quoted', // 'timestamp' | 'quoted'
+      datePickerMinimized: false
     };
   },
   watch: {
@@ -66,10 +73,31 @@ module.exports = app => app.component('document-search', {
         });
       }
     },
+    onSearchKeyup(ev) {
+      if (
+        this.autocompleteSuggestions.length > 0 &&
+        (ev.key === 'ArrowUp' || ev.key === 'ArrowDown')
+      ) {
+        return;
+      }
+      this.updateAutocomplete();
+    },
     updateAutocomplete() {
       const input = this.$refs.searchInput;
       const cursorPos = input ? input.selectionStart : 0;
 
+      const dateRange = getDatePickerInsertionRange(this.searchText, cursorPos);
+      if (dateRange && !this.datePickerContext) {
+        this.datePickerMinimized = false;
+      }
+      this.datePickerContext = dateRange;
+      if (dateRange) {
+        const argSlice = this.searchText.slice(dateRange.innerStart, dateRange.innerEnd);
+        this.datePickerLocalValue = dateArgumentSliceToDatetimeLocal(argSlice);
+      } else {
+        this.datePickerLocalValue = '';
+      }
+
       if (this.autocompleteTrie) {
         this.autocompleteSuggestions = getAutocompleteSuggestions(
           this.autocompleteTrie,
@@ -82,6 +110,34 @@ module.exports = app => app.component('document-search', {
         this.autocompleteSuggestions = [];
       }
     },
+    applyDateFromPicker(localDateTime) {
+      if (!localDateTime || !this.datePickerContext) {
+        return;
+      }
+      const picked = new Date(localDateTime);
+      if (Number.isNaN(picked.getTime())) {
+        if (this.$toast) {
+          this.$toast.error('Invalid date or time. Enter a valid date and time, then try again.');
+        }
+        return;
+      }
+      const result = insertDateInDateArgument(
+        this.searchText,
+        this.datePickerContext,
+        picked,
+        this.dateInsertFormat
+      );
+      const input = this.$refs.searchInput;
+      this.searchText = result.text;
+      this.autocompleteSuggestions = [];
+      this.$nextTick(() => {
+        if (input) {
+          input.focus();
+          input.setSelectionRange(result.newCursorPos, result.newCursorPos);
+        }
+        this.updateAutocomplete();
+      });
+    },
     handleKeyDown(ev) {
       if (this.autocompleteSuggestions.length === 0) {
         return;
@@ -116,6 +172,12 @@ module.exports = app => app.component('document-search', {
       });
       this.autocompleteSuggestions = [];
     },
+    onWrapperFocusOut(ev) {
+      if (!this.$el.contains(ev.relatedTarget)) {
+        this.datePickerContext = null;
+        this.datePickerMinimized = false;
+      }
+    },
     addPathFilter(path) {
       if (this.searchText) {
         if (this.searchText.endsWith('}')) {

package/frontend/src/models/models.js

@@ -146,6 +146,7 @@ module.exports = app => app.component('models', {
     currentModel: null,
     modelDocumentCounts: {},
     documents: [],
+    allSchemaPaths: null,
     schemaPaths: [],
     filteredPaths: [],
     selectedPaths: [],
@@ -263,8 +264,9 @@ module.exports = app => app.component('models', {
     this.query = Object.assign({}, this.$route.query);
     // Keep UI mode in sync with the URL on remounts.
     this.isProjectionMenuSelected = this.$route?.query?.[PROJECTION_MODE_QUERY_KEY] === '1';
-    const { models, readyState } = await api.Model.listModels();
+    const { models, modelSchemaPaths, readyState } = await api.Model.listModels();
     this.models = models;
+    this.allSchemaPaths = modelSchemaPaths;
     await this.loadModelCounts();
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
@@ -275,6 +277,29 @@ module.exports = app => app.component('models', {
       if (readyState === 0) {
         this.error = 'No models found and Mongoose is not connected. Check our documentation for more information.';
       }
+    } else {
+      this._refreshSidebar = setInterval(async() => {
+        try {
+          const { models, modelSchemaPaths, readyState } = await api.Model.listModels();
+          this.models = models;
+          this.allSchemaPaths = modelSchemaPaths;
+          await this.loadModelCounts();
+          if (this.currentModel) {
+            const schemaPaths = this.allSchemaPaths?.[this.currentModel] ?? {};
+            this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+              if (k1 === '_id' && k2 !== '_id') {
+                return -1;
+              }
+              if (k1 !== '_id' && k2 === '_id') {
+                return 1;
+              }
+              return 0;
+            }).map(key => schemaPaths[key]);
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }, 20000);
     }
 
     await this.initSearchFromUrl();
@@ -285,25 +310,33 @@ module.exports = app => app.component('models', {
     this.$nextTick(() => {
       const focusIntent = takeModelsRemountFocusIntent();
       if (focusIntent === 'documentSearch') {
-        const ds = this.$refs.documentSearch;
-        if (ds && typeof ds.focusInput === 'function') {
-          ds.focusInput();
-        }
+        this.$refs.documentSearch?.focusInput();
         return;
       }
       if (focusIntent === 'projection' && this.isProjectionMenuSelected) {
-        const projectionSearch = this.$refs.projectionSearch;
-        if (projectionSearch && typeof projectionSearch.focusInput === 'function') {
-          projectionSearch.focusInput();
-        }
+        this.$refs.projectionSearch?.focusInput();
       }
     });
   },
+  unmounted() {
+    clearInterval(this._refreshSidebar);
+  },
   watch: {
     model(newModel) {
       if (newModel !== this.currentModel) {
         this.currentModel = newModel;
         if (this.currentModel != null) {
+          this.$refs.documentSearch?.focusInput();
+          const schemaPaths = this.allSchemaPaths?.[newModel] ?? {};
+          this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+            if (k1 === '_id' && k2 !== '_id') {
+              return -1;
+            }
+            if (k1 !== '_id' && k2 === '_id') {
+              return 1;
+            }
+            return 0;
+          }).map(key => schemaPaths[key]);
           this.initSearchFromUrl();
         }
       }
@@ -747,6 +780,8 @@ module.exports = app => app.component('models', {
         this.query.sortKey = sortKey;
         this.query.sortDirection = sortDirection;
         delete this.query.sort;
+      } else {
+        this.sortBy = {};
       }
       if (this.currentModel != null) {
         await this.getDocuments();
@@ -762,6 +797,8 @@ module.exports = app => app.component('models', {
           this.selectedPaths = [...this.filteredPaths];
           this.syncProjectionInputFromQueryOrPaths();
         }
+      } else {
+        this.selectedPaths = [];
       }
       this.status = 'loaded';
 
@@ -1043,7 +1080,6 @@ module.exports = app => app.component('models', {
 
         // Clear previous data
         this.documents = [];
-        this.schemaPaths = [];
         this.numDocuments = null;
         this.loadedAllDocs = false;
         this.lastSelectedIndex = null;

package/frontend/src/routes.js

@@ -33,7 +33,8 @@ module.exports = {
       name: 'model',
       component: 'models',
       meta: {
-        authorized: false
+        authorized: false,
+        preserveStateKey: 'model'
       }
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "description": "AI-Powered Data Workspace for MongoDB: Turn your MongoDB data into dashboards, maps, and interactive workflows - powered by your Mongoose models and AI.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {