@mongoosejs/studio 0.4.0 → 0.4.1

package/frontend/src/detail-objectid/detail-objectid.html

@@ -0,0 +1 @@
+<pre class="w-full whitespace-pre-wrap break-words font-mono text-sm text-content-secondary m-0">{{displayValue}}</pre>

package/frontend/src/detail-objectid/detail-objectid.js

@@ -0,0 +1,67 @@
+'use strict';
+
+const template = require('./detail-objectid.html');
+const ObjectId = require('mongoose/lib/types/objectid');
+
+module.exports = app => app.component('detail-objectid', {
+  template,
+  props: ['value', 'viewMode'],
+  emits: ['updated'],
+  watch: {
+    displayValue: {
+      immediate: true,
+      handler(val) {
+        this.$emit('updated', val);
+      }
+    }
+  },
+  computed: {
+    format() {
+      return this.viewMode || 'hex';
+    },
+    hexValue() {
+      if (this.value == null) {
+        return null;
+      }
+      if (typeof this.value === 'string') {
+        return this.value;
+      }
+      if (typeof this.value === 'object') {
+        if (typeof this.value.toHexString === 'function') {
+          return this.value.toHexString();
+        }
+        if (typeof this.value.$oid === 'string') {
+          return this.value.$oid;
+        }
+      }
+      return String(this.value);
+    },
+    objectIdDate() {
+      const hex = this.hexValue;
+      return new ObjectId(hex).getTimestamp();
+    },
+    displayValue() {
+      if (this.value == null) {
+        return String(this.value);
+      }
+
+      const hex = this.hexValue;
+      if (this.format === 'object_call') {
+        return `ObjectId('${hex}')`;
+      }
+      if (this.format === 'unix_seconds') {
+        if (!this.objectIdDate) {
+          return 'Invalid ObjectId';
+        }
+        return String(Math.floor(this.objectIdDate.getTime() / 1000));
+      }
+      if (this.format === 'date') {
+        if (!this.objectIdDate) {
+          return 'Invalid ObjectId';
+        }
+        return this.objectIdDate.toISOString();
+      }
+      return hex;
+    }
+  }
+});

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

@@ -20,7 +20,7 @@
       <span class="ml-2 text-sm text-content-tertiary">({{(path.instance || 'unknown').toLowerCase()}})</span>
       <div v-if="isGeoJsonGeometry" class="ml-3 inline-flex items-center gap-2">
         <div class="inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold">
-          <button
+      <button
             type="button"
             class="rounded-full px-2.5 py-0.5 transition"
             :class="detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'"
@@ -76,6 +76,11 @@
         :path="path"
         @update:viewMode="dateViewMode = $event"
       ></date-view-mode-picker>
+      <objectid-view-mode-picker
+        v-if="isObjectIdPath"
+        :viewMode="objectIdViewMode"
+        @update:viewMode="objectIdViewMode = $event"
+      ></objectid-view-mode-picker>
       <button
         type="button"
         class="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-edge-strong bg-surface"
@@ -202,7 +207,7 @@
         <component
           :is="getComponentForPath(path)"
           :value="rawValue"
-          :viewMode="isDatePath ? dateViewMode : detailViewMode"
+          :viewMode="isDatePath ? dateViewMode : (isObjectIdPath ? objectIdViewMode : detailViewMode)"
           @updated="renderedValue = $event"></component>
         <button
           @click="toggleValueExpansion"
@@ -219,7 +224,7 @@
         <component
           :is="getComponentForPath(path)"
           :value="rawValue"
-          :viewMode="isDatePath ? dateViewMode : detailViewMode"
+          :viewMode="isDatePath ? dateViewMode : (isObjectIdPath ? objectIdViewMode : detailViewMode)"
           @updated="renderedValue = $event"></component>
       </div>
     </div>

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

@@ -18,6 +18,7 @@ module.exports = app => app.component('document-property', {
     return {
       dateType: 'picker', // picker, iso
       dateViewMode: 'utc_iso',
+      objectIdViewMode: 'hex',
       renderedValue: UNSET,
       isCollapsed: false, // Start uncollapsed by default
       isValueExpanded: false, // Track if the value is expanded
@@ -38,6 +39,9 @@ module.exports = app => app.component('document-property', {
     isDatePath() {
       return this.path?.instance === 'Date';
     },
+    isObjectIdPath() {
+      return this.path?.instance === 'ObjectID' || this.path?.instance === 'ObjectId';
+    },
     rawValue() {
       return this.getValueForPath(this.path.path);
     },
@@ -177,6 +181,9 @@ module.exports = app => app.component('document-property', {
       if (schemaPath.instance === 'Date') {
         return 'detail-date';
       }
+      if (schemaPath.instance === 'ObjectID' || schemaPath.instance === 'ObjectId') {
+        return 'detail-objectid';
+      }
       return 'detail-default';
     },
     getEditComponentForPath(path) {

package/frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.html

@@ -0,0 +1,12 @@
+<div class="flex items-center gap-2" @click.stop>
+  <select
+    :value="format"
+    @input="onFormatChange($event.target.value)"
+    class="text-xs border border-edge rounded-md bg-surface px-2 py-1"
+  >
+    <option value="hex">Hex string</option>
+    <option value="object_call">ObjectId('...')</option>
+    <option value="unix_seconds">Unix timestamp</option>
+    <option value="date">Date</option>
+  </select>
+</div>

package/frontend/src/document-details/objectid-view-mode-picker/objectid-view-mode-picker.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const template = require('./objectid-view-mode-picker.html');
+
+module.exports = app => app.component('objectid-view-mode-picker', {
+  template,
+  props: ['viewMode'],
+  emits: ['update:viewMode'],
+  computed: {
+    format() {
+      return this.viewMode || 'hex';
+    }
+  },
+  methods: {
+    onFormatChange(newFormat) {
+      this.$emit('update:viewMode', newFormat);
+    }
+  }
+});

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

@@ -45,6 +45,12 @@ module.exports = app => app.component('document-search', {
     this.$refs.searchInput.focus();
   },
   methods: {
+    focusInput() {
+      const input = this.$refs.searchInput;
+      if (input && typeof input.focus === 'function') {
+        input.focus();
+      }
+    },
     emitSearch() {
       this.$emit('input', this.searchText);
       this.$emit('search', this.searchText);

package/frontend/src/models/models.html

@@ -263,14 +263,12 @@
           </span>
         </div>
         <div v-if="isProjectionMenuSelected && (outputType === 'table' || outputType === 'json')" class="flex items-center gap-2 w-full mt-2 flex-shrink-0">
-          <input
-            ref="projectionInput"
-            v-model="projectionText"
-            type="text"
-            placeholder="Projection: name email, or -password"
-            class="flex-1 min-w-0 rounded border border-edge bg-surface px-2 py-1.5 text-sm font-mono placeholder:text-content-tertiary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-            @focus="initProjection($event)"
-            @keydown.enter="applyProjectionFromInput()"
+          <projection-search
+            ref="projectionSearch"
+            :value="projectionText"
+            :schema-paths="schemaPaths"
+            @projection-input="projectionText = $event"
+            @apply="applyProjectionFromInput"
           />
         </div>
       </div>