@mongoosejs/studio 0.0.127 → 0.0.129

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

@@ -9,7 +9,54 @@ appendCSS(require('./document-details.css'));
 
 module.exports = app => app.component('document-details', {
   template,
-  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  props: ['document', 'schemaPaths', 'virtualPaths', 'editting', 'changes', 'invalid', 'viewMode'],
+  data() {
+    return {
+      searchQuery: '',
+      selectedType: '',
+      collapsedVirtuals: new Set(),
+      showAddFieldModal: false,
+      fieldData: {
+        name: '',
+        type: '',
+        value: ''
+      },
+      fieldErrors: {},
+      isSubmittingField: false,
+      fieldValueEditor: null
+    };
+  },
+  mounted() {
+    // Focus on search input when component loads
+    this.$nextTick(() => {
+      if (this.$refs.searchInput) {
+        this.$refs.searchInput.focus();
+      }
+
+      if (this.showAddFieldModal) {
+        this.initializeFieldValueEditor();
+      }
+    });
+  },
+  beforeDestroy() {
+    this.destroyFieldValueEditor();
+  },
+  watch: {
+    'fieldData.type'(newType, oldType) {
+      // When field type changes, we need to handle the transition
+      if (newType !== oldType) {
+        // Destroy existing CodeMirror if it exists
+        this.destroyFieldValueEditor();
+
+        // If switching to a type that needs CodeMirror, initialize it
+        if (this.shouldUseCodeMirror) {
+          this.$nextTick(() => {
+            this.initializeFieldValueEditor();
+          });
+        }
+      }
+    }
+  },
   computed: {
     virtuals() {
       if (this.schemaPaths == null) {
@@ -23,11 +70,289 @@ module.exports = app => app.component('document-details', {
       const result = [];
       for (let i = 0; i < docKeys.length; i++) {
         if (!exists.includes(docKeys[i])) {
-          result.push({ name: docKeys[i], value: this.document[docKeys[i]] });
+          const isVirtual = this.virtualPaths && this.virtualPaths.includes(docKeys[i]);
+          result.push({
+            name: docKeys[i],
+            value: this.document[docKeys[i]],
+            isVirtual: isVirtual,
+            isUserAdded: !isVirtual
+          });
         }
       }
 
       return result;
+    },
+    availableTypes() {
+      if (!this.schemaPaths) return [];
+      const types = new Set();
+      this.schemaPaths.forEach(path => {
+        if (path.instance) {
+          types.add(path.instance);
+        }
+      });
+
+      // Add virtual field types to the available types
+      this.virtuals.forEach(virtual => {
+        const virtualType = this.getVirtualFieldType(virtual);
+        if (virtualType && virtualType !== 'unknown') {
+          types.add(virtualType);
+        }
+      });
+
+      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();
+    },
+    shouldUseCodeMirror() {
+      return ['Array', 'Object', 'Embedded'].includes(this.fieldData.type);
+    },
+    shouldUseDatePicker() {
+      return this.fieldData.type === 'Date';
+    },
+    filteredSchemaPaths() {
+      let paths = this.schemaPaths || [];
+
+      // Filter by search query
+      if (this.searchQuery.trim()) {
+        const query = this.searchQuery.toLowerCase();
+        paths = paths.filter(path =>
+          path.path.toLowerCase().includes(query)
+        );
+      }
+
+      // Filter by data type
+      if (this.selectedType) {
+        paths = paths.filter(path =>
+          path.instance === this.selectedType
+        );
+      }
+
+      return paths;
+    },
+    filteredVirtuals() {
+      let virtuals = this.virtuals;
+
+      // Filter by search query
+      if (this.searchQuery.trim()) {
+        const query = this.searchQuery.toLowerCase();
+        virtuals = virtuals.filter(virtual =>
+          virtual.name.toLowerCase().includes(query)
+        );
+      }
+
+      // Filter by data type
+      if (this.selectedType) {
+        virtuals = virtuals.filter(virtual => {
+          const virtualType = this.getVirtualFieldType(virtual);
+          return virtualType === this.selectedType;
+        });
+      }
+
+      return virtuals;
+    },
+    formattedJson() {
+      if (!this.document) {
+        return '{}';
+      }
+      return JSON.stringify(this.document, null, 2);
+    }
+  },
+  methods: {
+    toggleVirtualField(fieldName) {
+      if (this.collapsedVirtuals.has(fieldName)) {
+        this.collapsedVirtuals.delete(fieldName);
+      } else {
+        this.collapsedVirtuals.add(fieldName);
+      }
+    },
+    isVirtualFieldCollapsed(fieldName) {
+      return this.collapsedVirtuals.has(fieldName);
+    },
+    openAddFieldModal() {
+      this.showAddFieldModal = true;
+      this.$nextTick(() => {
+        if (this.shouldUseCodeMirror) {
+          this.initializeFieldValueEditor();
+        }
+      });
+    },
+    closeAddFieldModal() {
+      this.showAddFieldModal = false;
+      this.destroyFieldValueEditor();
+      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.getTransformedFieldName(),
+          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;
+      // Reset CodeMirror editor if it exists
+      if (this.fieldValueEditor) {
+        this.fieldValueEditor.setValue('');
+      }
+    },
+    initializeFieldValueEditor() {
+      if (this.$refs.fieldValueEditor && !this.fieldValueEditor && this.shouldUseCodeMirror) {
+        this.$refs.fieldValueEditor.value = this.fieldData.value || '';
+        this.fieldValueEditor = CodeMirror.fromTextArea(this.$refs.fieldValueEditor, {
+          mode: 'javascript',
+          lineNumbers: true,
+          height: 'auto'
+        });
+        this.fieldValueEditor.on('change', () => {
+          this.fieldData.value = this.fieldValueEditor.getValue();
+        });
+      }
+    },
+    destroyFieldValueEditor() {
+      if (this.fieldValueEditor) {
+        this.fieldValueEditor.toTextArea();
+        this.fieldValueEditor = null;
+      }
+    },
+    toSnakeCase(str) {
+      return str
+        .trim()
+        .replace(/\s+/g, '_')  // Replace spaces with underscores
+        .replace(/[^a-zA-Z0-9_$]/g, '')  // Remove invalid characters
+        .replace(/^[0-9]/, '_$&')  // Prefix numbers with underscore
+        .toLowerCase();
+    },
+    getTransformedFieldName() {
+      if (!this.fieldData.name) return '';
+      return this.toSnakeCase(this.fieldData.name.trim());
+    },
+    getVirtualFieldType(virtual) {
+      const value = virtual.value;
+      if (value === null || value === undefined) {
+        return 'null';
+      }
+      if (Array.isArray(value)) {
+        return 'Array';
+      }
+      if (value instanceof Date) {
+        return 'Date';
+      }
+      if (typeof value === 'object') {
+        return 'Object';
+      }
+      if (typeof value === 'number') {
+        return 'Number';
+      }
+      if (typeof value === 'boolean') {
+        return 'Boolean';
+      }
+      if (typeof value === 'string') {
+        return 'String';
+      }
+      return 'unknown';
     }
   }
-});
+});

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

@@ -20,4 +20,19 @@
   .document-details .date-position {
     float: right;
     margin-top: -7px;
+  }
+
+  .truncated-value-container,
+  .expanded-value-container {
+    position: relative;
+  }
+
+  .truncated-value-container button,
+  .expanded-value-container button {
+    transition: all 0.2s ease;
+  }
+
+  .truncated-value-container button:hover,
+  .expanded-value-container button:hover {
+    transform: translateX(2px);
   }

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

@@ -1,22 +1,37 @@
-<div>
-  <div class="relative path-key p-1 flex">
-    <div class="grow flex justify-between items-center">
-      <div>
-        {{path.path}}
-        <span class="path-type">
-          ({{(path.instance || 'unknown').toLowerCase()}})
-        </span>
-      </div>
-      <div>
-        <router-link
-          v-if="path.ref && getValueForPath(path.path)"
-          :to="`/model/${path.ref}/document/${getValueForPath(path.path)}`"
-          class="bg-ultramarine-600 hover:bg-ultramarine-500 text-white px-2 py-1 text-sm mr-1 rounded-md"
-          >View Document
-        </router-link>
-      </div>
+<div class="border border-gray-200 rounded-lg mb-2">
+  <!-- Collapsible Header -->
+  <div 
+    @click="toggleCollapse"
+    class="p-3 bg-gray-50 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200"
+  >
+    <div class="flex items-center">
+      <svg 
+        :class="isCollapsed ? 'rotate-0' : 'rotate-90'"
+        class="w-4 h-4 text-gray-500 mr-2 transition-transform duration-200"
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+      </svg>
+      <span class="font-medium text-gray-900">{{path.path}}</span>
+      <span class="ml-2 text-sm text-gray-500">({{(path.instance || 'unknown').toLowerCase()}})</span>
+    </div>
+    <div class="flex items-center gap-2">
+      <router-link
+        v-if="path.ref && getValueForPath(path.path)"
+        :to="`/model/${path.ref}/document/${getValueForPath(path.path)}`"
+        class="bg-ultramarine-600 hover:bg-ultramarine-500 text-white px-2 py-1 text-sm rounded-md"
+        @click.stop
+        >View Document
+      </router-link>
     </div>
-    <div v-if="editting && path.instance === 'Date'" class="flex gap-1.5">
+  </div>
+  
+  <!-- Collapsible Content -->
+  <div v-if="!isCollapsed" class="p-3">
+    <!-- Date Type Selector (when editing dates) -->
+    <div v-if="editting && path.instance === 'Date'" class="mb-3 flex gap-1.5">
       <div
         @click="dateType = 'picker'"
         :class="dateType === 'picker' ? 'bg-teal-600' : ''"
@@ -38,18 +53,47 @@
         </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;"
-      >
-    </component>
-  </div>
-  <div v-else class="pl-1">
-    <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
+    
+    <!-- Field Content -->
+    <div v-if="editting && path.path !== '_id'">
+      <component
+        :is="getEditComponentForPath(path)"
+        :value="getEditValueForPath(path)"
+        :format="dateType"
+        @input="changes[path.path] = $event; delete invalid[path.path];"
+        @error="invalid[path.path] = $event;"
+        >
+      </component>
+    </div>
+    <div v-else>
+      <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->
+      <div v-if="needsTruncation && !isValueExpanded" class="truncated-value-container">
+        <div class="text-gray-700 whitespace-pre-wrap break-words font-mono text-sm">{{truncatedString}}</div>
+        <button 
+          @click="toggleValueExpansion"
+          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+          Show more ({{valueAsString.length}} characters)
+        </button>
+      </div>
+      <div v-else-if="needsTruncation && isValueExpanded" class="expanded-value-container">
+        <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
+        <button 
+          @click="toggleValueExpansion"
+          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
+        >
+          <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+          Show less
+        </button>
+      </div>
+      <div v-else>
+        <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
+      </div>
+    </div>
   </div>
 </div>

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

@@ -11,10 +11,41 @@ module.exports = app => app.component('document-property', {
   template,
   data: function() {
     return {
-      dateType: 'picker' // picker, iso
+      dateType: 'picker', // picker, iso
+      isCollapsed: false, // Start uncollapsed by default
+      isValueExpanded: false // Track if the value is expanded
     };
   },
   props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  computed: {
+    valueAsString() {
+      const value = this.getValueForPath(this.path.path);
+      if (value == null) {
+        return String(value);
+      }
+      if (typeof value === 'object') {
+        return JSON.stringify(value, null, 2);
+      }
+      return String(value);
+    },
+    needsTruncation() {
+      // Truncate if value is longer than 200 characters
+      return this.valueAsString.length > 200;
+    },
+    displayValue() {
+      if (!this.needsTruncation || this.isValueExpanded) {
+        return this.getValueForPath(this.path.path);
+      }
+      // Return truncated value - we'll handle this in the template
+      return this.getValueForPath(this.path.path);
+    },
+    truncatedString() {
+      if (this.needsTruncation && !this.isValueExpanded) {
+        return this.valueAsString.substring(0, 200) + '...';
+      }
+      return this.valueAsString;
+    }
+  },
   methods: {
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
@@ -35,6 +66,9 @@ module.exports = app => app.component('document-property', {
       if (path.instance === 'Embedded') {
         return 'edit-subdocument';
       }
+      if (path.instance === 'Boolean') {
+        return 'edit-boolean';
+      }
       return 'edit-default';
     },
     getValueForPath(path) {
@@ -50,7 +84,14 @@ module.exports = app => app.component('document-property', {
       if (!this.document) {
         return;
       }
-      return path in this.changes ? this.changes[path] : mpath.get(path, this.document);
+      const documentValue = mpath.get(path, this.document);
+      return documentValue;
+    },
+    toggleCollapse() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+    toggleValueExpansion() {
+      this.isValueExpanded = !this.isValueExpanded;
     }
   }
 });

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

@@ -0,0 +1,47 @@
+<div class="edit-boolean">
+  <div class="flex flex-wrap gap-2">
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50" 
+           :class="selectedValue === true ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+      <input
+        type="radio"
+        :checked="selectedValue === true"
+        @change="selectValue(true)"
+        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+      />
+      <span class="text-sm font-medium">true</span>
+    </label>
+    
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50"
+           :class="selectedValue === false ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+      <input
+        type="radio"
+        :checked="selectedValue === false"
+        @change="selectValue(false)"
+        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+      />
+      <span class="text-sm font-medium">false</span>
+    </label>
+    
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50"
+           :class="selectedValue === null ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+      <input
+        type="radio"
+        :checked="selectedValue === null"
+        @change="selectValue(null)"
+        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+      />
+      <span class="text-sm font-medium">null</span>
+    </label>
+    
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50"
+           :class="selectedValue === undefined ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+      <input
+        type="radio"
+        :checked="selectedValue === undefined"
+        @change="selectValue(undefined)"
+        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+      />
+      <span class="text-sm font-medium">undefined</span>
+    </label>
+  </div>
+</div>

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

@@ -0,0 +1,38 @@
+'use strict';
+
+const template = require('./edit-boolean.html');
+
+module.exports = app => app.component('edit-boolean', {
+  template: template,
+  props: ['value'],
+  emits: ['input'],
+  data() {
+    return {
+      selectedValue: null
+    };
+  },
+  mounted() {
+    this.selectedValue = this.value;
+  },
+  watch: {
+    value(newValue) {
+      this.selectedValue = newValue;
+    },
+    selectedValue(newValue) {
+      // Convert null/undefined to strings for proper backend serialization
+      const emitValue = this.convertValueToString(newValue);
+      this.$emit('input', emitValue);
+    }
+  },
+  methods: {
+    selectValue(value) {
+      this.selectedValue = value;
+    },
+    convertValueToString(value) {
+      // Convert null/undefined to strings for proper backend serialization
+      if (value === null) return 'null';
+      if (typeof value === 'undefined') return 'undefined';
+      return value;
+    }
+  }
+});