@mongoosejs/studio 0.5.7 → 0.5.9

package/frontend/src/document/document.html

@@ -273,9 +273,120 @@
         :changes="changes"
         :invalid="invalid"
         :viewMode="viewMode"
-        :model="model"
-        @add-field="addField"
         @view-mode-change="updateViewMode"></document-details>
+      <modal v-if="showAddFieldModal">
+        <template v-slot:body>
+          <div class="modal-exit" @click="closeAddFieldModal">&times;</div>
+          <div class="add-field-modal">
+            <div class="mb-6">
+              <h2 class="text-xl font-semibold text-content mb-2">Add New Field</h2>
+              <p class="text-sm text-gray-600">Create a new field for this document</p>
+            </div>
+
+            <form @submit.prevent="handleAddFieldSubmit" class="space-y-4">
+              <div>
+                <label for="fieldName" class="block text-sm font-medium text-content-secondary mb-1">
+                  Field Name *
+                </label>
+                <input
+                  id="fieldName"
+                  v-model="fieldData.name"
+                  type="text"
+                  required
+                  placeholder="Enter field name..."
+                  class="w-full px-3 py-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  :class="{ 'border-red-500': fieldErrors.name }"
+                />
+                <p v-if="fieldErrors.name" class="mt-1 text-sm text-red-600">{{fieldErrors.name}}</p>
+                <p v-if="fieldData.name && getTransformedFieldName() !== fieldData.name.trim()" class="mt-1 text-sm text-blue-600">
+                  Field name will be: <code class="bg-blue-50 px-1 py-0.5 rounded text-xs">{{getTransformedFieldName()}}</code>
+                </p>
+              </div>
+
+              <div>
+                <label for="fieldType" class="block text-sm font-medium text-content-secondary mb-1">
+                  Field Type *
+                </label>
+                <select
+                  id="fieldType"
+                  v-model="fieldData.type"
+                  required
+                  class="w-full px-3 py-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  :class="{ 'border-red-500': fieldErrors.type }"
+                >
+                  <option value="">Select field type...</option>
+                  <option v-for="type in allFieldTypes" :key="type" :value="type">
+                    {{type}}
+                  </option>
+                </select>
+                <p v-if="fieldErrors.type" class="mt-1 text-sm text-red-600">{{fieldErrors.type}}</p>
+              </div>
+
+              <div>
+                <label for="fieldValue" class="block text-sm font-medium text-content-secondary mb-1">
+                  Initial Value
+                </label>
+
+                <custom-date-picker
+                  v-if="shouldUseDatePicker"
+                  id="fieldValue"
+                  mode="date"
+                  :value="fieldData.value"
+                  :class="{ 'border-red-500': fieldErrors.value, 'max-w-[400px]': true }"
+                  :horizontal="true"
+                  @input="fieldData.value = $event"
+                />
+
+                <input
+                  v-else-if="!shouldUseAce"
+                  v-model="fieldData.value"
+                  type="text"
+                  id="fieldValue"
+                  placeholder="Enter initial value (optional)..."
+                  class="w-full px-3 py-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  :class="{ 'border-red-500': fieldErrors.value }"
+                />
+
+                <ace-editor
+                  v-else
+                  id="fieldValue"
+                  v-model="fieldData.value"
+                  mode="json"
+                  :line-numbers="true"
+                  :min-lines="3"
+                  class="add-field-ace-editor w-full min-h-[100px]"
+                  :class="{ 'border-red-500': fieldErrors.value }"
+                />
+
+                <p v-if="fieldErrors.value" class="mt-1 text-sm text-red-600">{{fieldErrors.value}}</p>
+                <p class="mt-1 text-xs text-content-tertiary">
+                  <span v-if="shouldUseDatePicker">Select a date or leave empty for null/undefined values.</span>
+                  <span v-else-if="shouldUseAce">Leave empty for null/undefined values. Use valid JSON format.</span>
+                  <span v-else>Leave empty for null/undefined values.</span>
+                </p>
+              </div>
+
+              <div class="flex justify-end gap-3 pt-4 border-t border-edge">
+                <button
+                  type="button"
+                  @click="closeAddFieldModal"
+                  class="px-4 py-2 text-sm font-medium text-content-secondary bg-surface border border-edge-strong rounded-md hover:bg-page focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  :disabled="isSubmittingField"
+                  class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <span v-if="isSubmittingField">Adding...</span>
+                  <span v-else>Add Field</span>
+                </button>
+              </div>
+            </form>
+          </div>
+        </template>
+      </modal>
       <modal v-if="shouldShowConfirmModal">
         <template v-slot:body>
           <div class="modal-exit" @click="shouldShowConfirmModal = false;">&times;</div>

package/frontend/src/document/document.js

@@ -27,7 +27,15 @@ module.exports = app => app.component('document', {
     shouldShowDeleteModal: false,
     shouldShowCloneModal: false,
     shouldShowValidationModal: false,
+    showAddFieldModal: false,
     validationResult: null,
+    fieldData: {
+      name: '',
+      type: '',
+      value: ''
+    },
+    fieldErrors: {},
+    isSubmittingField: false,
     previousQuery: null,
     lastUpdatedAt: null,
     isRefreshing: false,
@@ -89,6 +97,33 @@ module.exports = app => app.component('document', {
       }
       return shortcuts;
     },
+    allFieldTypes() {
+      const types = new Set(['String', 'Number', 'Boolean', 'Date', 'Array', 'Object']);
+
+      (this.schemaPaths || []).forEach(path => {
+        if (path.instance) {
+          types.add(path.instance);
+        }
+      });
+
+      Object.keys(this.document || {}).forEach(key => {
+        if ((this.schemaPaths || []).some(path => path.path === key)) {
+          return;
+        }
+        const fieldType = this.getFieldType(this.document[key]);
+        if (fieldType && fieldType !== 'unknown' && fieldType !== 'null') {
+          types.add(fieldType);
+        }
+      });
+
+      return Array.from(types).sort();
+    },
+    shouldUseAce() {
+      return ['Array', 'Object', 'Embedded'].includes(this.fieldData.type);
+    },
+    shouldUseDatePicker() {
+      return this.fieldData.type === 'Date';
+    },
     isLambda() {
       return !!window?.MONGOOSE_STUDIO_CONFIG?.isLambda;
     }
@@ -285,16 +320,143 @@ module.exports = app => app.component('document', {
     showClonedDocument(doc) {
       this.$router.push({ path: `/model/${this.model}/document/${doc._id}` });
     },
-    async addField(fieldData) {
-      const { doc } = await api.Model.addField({
-        model: this.model,
-        _id: this.document._id,
-        fieldName: fieldData.name,
-        fieldValue: fieldData.value
-      });
-      this.document = doc;
+    addField() {
+      this.showAddFieldModal = true;
+    },
+    closeAddFieldModal() {
+      this.showAddFieldModal = false;
+      this.resetFieldForm();
+    },
+    resetFieldForm() {
+      this.fieldData = {
+        name: '',
+        type: '',
+        value: ''
+      };
+      this.fieldErrors = {};
+      this.isSubmittingField = false;
+    },
+    getTransformedFieldName() {
+      const trimmedName = this.fieldData.name.trim();
+      return trimmedName
+        .replace(/[^a-zA-Z0-9_$]/g, '_')
+        .replace(/^[^a-zA-Z_$]+/, '');
+    },
+    validateFieldForm() {
+      this.fieldErrors = {};
+
+      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 $';
+        }
+      }
+
+      if (!this.fieldData.type) {
+        this.fieldErrors.type = 'Field type is required';
+      }
+
+      if (this.fieldData.value && this.fieldData.value.trim()) {
+        if (['Object', 'Array'].includes(this.fieldData.type)) {
+          try {
+            JSON.parse(this.fieldData.value);
+          } catch (err) {
+            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') {
+          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':
+          return ['true', '1', 'yes'].includes(value.toLowerCase());
+        case 'Date':
+          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 fieldName = this.getTransformedFieldName();
+        const fieldValue = this.parseFieldValue(this.fieldData.value, this.fieldData.type);
+
+        const { doc } = await api.Model.addField({
+          model: this.model,
+          _id: this.document._id,
+          fieldName,
+          fieldValue
+        });
+        this.document = doc;
+        this.closeAddFieldModal();
 
-      this.$toast.success(`Field added! Field "${fieldData.name}" has been added to the document`);
+        this.$toast.success(`Field added! Field "${fieldName}" has been added to the document`);
+      } catch (error) {
+        console.error('Error adding field:', error);
+        this.fieldErrors.value = 'Error adding field';
+      } finally {
+        this.isSubmittingField = false;
+      }
+    },
+    getFieldType(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';
     },
     updateViewMode(mode) {
       this.viewMode = mode;

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

@@ -2,6 +2,7 @@
   <select
     :value="format"
     @input="onFormatChange($event.target.value)"
+    :disabled="editting"
     class="text-xs border border-edge rounded-md bg-surface px-2 py-1"
   >
     <option value="utc_iso">UTC (ISO)</option>

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

@@ -4,7 +4,7 @@ const template = require('./date-view-mode-picker.html');
 
 module.exports = app => app.component('date-view-mode-picker', {
   template,
-  props: ['viewMode', 'path'],
+  props: ['viewMode', 'path', 'editting'],
   emits: ['update:viewMode'],
   computed: {
     format() {

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

@@ -22,68 +22,6 @@
   margin-top: -7px;
 }
 
-/* Add Field Modal Styles */
-.add-field-modal {
-  max-width: 500px;
-  width: 100%;
-}
-
-.add-field-modal .modal-exit {
-  position: absolute;
-  top: 15px;
-  right: 20px;
-  font-size: 24px;
-  cursor: pointer;
-  color: #6b7280;
-  z-index: 10;
-}
-
-.add-field-modal .modal-exit:hover {
-  color: #374151;
-}
-
-.add-field-modal form {
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
-.add-field-modal input[type="text"],
-.add-field-modal input[type="email"],
-.add-field-modal input[type="password"],
-.add-field-modal select,
-.add-field-modal textarea {
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-
-.add-field-modal input:focus,
-.add-field-modal select:focus,
-.add-field-modal textarea:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.add-field-modal .border-red-500 {
-  border-color: #ef4444 !important;
-}
-
-.add-field-modal .border-red-500:focus {
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
-}
-
-/* Ace editor styling in modal */
-.add-field-modal .add-field-ace-editor.ace_editor {
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  font-size: 14px;
-  min-height: 100px;
-}
-
-.add-field-modal .add-field-ace-editor:focus-within.ace_editor,
-.add-field-modal .add-field-ace-editor.ace_focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
 /* JSON View Styles */
 .json-view {
   width: 100%;
@@ -113,4 +51,4 @@
 
 .json-view pre::-webkit-scrollbar-thumb:hover {
   background: #555;
-}
+}

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

@@ -172,126 +172,4 @@
       <pre class="text-sm font-mono text-gray-800 whitespace-pre">{{formattedJson}}</pre>
     </div>
   </div>
-
-  <!-- Add Field Modal -->
-  <modal v-if="showAddFieldModal">
-    <template v-slot:body>
-      <div class="modal-exit" @click="closeAddFieldModal">&times;</div>
-      <div class="add-field-modal">
-        <div class="mb-6">
-          <h2 class="text-xl font-semibold text-content mb-2">Add New Field</h2>
-          <p class="text-sm text-gray-600">Create a new field for this document</p>
-        </div>
-
-        <form @submit.prevent="handleAddFieldSubmit" class="space-y-4">
-          <!-- Field Name -->
-          <div>
-            <label for="fieldName" class="block text-sm font-medium text-content-secondary mb-1">
-              Field Name *
-            </label>
-            <input
-              id="fieldName"
-              v-model="fieldData.name"
-              type="text"
-              required
-              placeholder="Enter field name..."
-              class="w-full px-3 py-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              :class="{ 'border-red-500': fieldErrors.name }"
-            />
-            <p v-if="fieldErrors.name" class="mt-1 text-sm text-red-600">{{fieldErrors.name}}</p>
-            <p v-if="fieldData.name && getTransformedFieldName() !== fieldData.name.trim()" class="mt-1 text-sm text-blue-600">
-              Field name will be: <code class="bg-blue-50 px-1 py-0.5 rounded text-xs">{{getTransformedFieldName()}}</code>
-            </p>
-          </div>
-
-          <!-- Field Type -->
-          <div>
-            <label for="fieldType" class="block text-sm font-medium text-content-secondary mb-1">
-              Field Type *
-            </label>
-            <select
-              id="fieldType"
-              v-model="fieldData.type"
-              required
-              class="w-full px-3 py-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              :class="{ 'border-red-500': fieldErrors.type }"
-            >
-              <option value="">Select field type...</option>
-              <option v-for="type in allFieldTypes" :key="type" :value="type">
-                {{type}}
-              </option>
-            </select>
-            <p v-if="fieldErrors.type" class="mt-1 text-sm text-red-600">{{fieldErrors.type}}</p>
-          </div>
-
-          <!-- Field Value -->
-          <div>
-            <label for="fieldValue" class="block text-sm font-medium text-content-secondary mb-1">
-              Initial Value
-            </label>
-
-            <!-- Date picker for Date type -->
-            <input
-              v-if="shouldUseDatePicker"
-              v-model="fieldData.value"
-              type="date"
-              id="fieldValue"
-              class="w-full px-3 py-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              :class="{ 'border-red-500': fieldErrors.value }"
-            />
-
-            <!-- Simple input for basic types -->
-            <input
-              v-else-if="!shouldUseAce"
-              v-model="fieldData.value"
-              type="text"
-              id="fieldValue"
-              placeholder="Enter initial value (optional)..."
-              class="w-full px-3 py-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              :class="{ 'border-red-500': fieldErrors.value }"
-            />
-
-            <!-- Ace editor for complex types (Array/Object/Embedded) -->
-            <ace-editor
-              v-else
-              id="fieldValue"
-              v-model="fieldData.value"
-              mode="json"
-              :line-numbers="true"
-              :min-lines="3"
-              class="add-field-ace-editor w-full min-h-[100px]"
-              :class="{ 'border-red-500': fieldErrors.value }"
-            />
-
-            <p v-if="fieldErrors.value" class="mt-1 text-sm text-red-600">{{fieldErrors.value}}</p>
-            <p class="mt-1 text-xs text-content-tertiary">
-              <span v-if="shouldUseDatePicker">Select a date or leave empty for null/undefined values.</span>
-              <span v-else-if="shouldUseAce">Leave empty for null/undefined values. Use valid JSON format.</span>
-              <span v-else>Leave empty for null/undefined values.</span>
-            </p>
-          </div>
-
-
-          <!-- Action Buttons -->
-          <div class="flex justify-end gap-3 pt-4 border-t border-edge">
-            <button
-              type="button"
-              @click="closeAddFieldModal"
-              class="px-4 py-2 text-sm font-medium text-content-secondary bg-surface border border-edge-strong rounded-md hover:bg-page focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              :disabled="isSubmittingField"
-              class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              <span v-if="isSubmittingField">Adding...</span>
-              <span v-else>Add Field</span>
-            </button>
-          </div>
-        </form>
-      </div>
-    </template>
-  </modal>
 </div>