EditInPlaceManager

ภาพรวม

EditInPlaceManager คือ component สำหรับ inline editing ใน Now.js Framework คลิกเพื่อแก้ไขข้อความโดยตรงใน element

ใช้เมื่อ:

• ต้องการแก้ไข text inline
• ต้องการ click-to-edit fields
• ต้องการ quick edit ไม่ต้องเปิด modal
• ต้องการ spreadsheet-like editing

ทำไมต้องใช้:

• ✅ Click to edit
• ✅ Auto-save on blur
• ✅ Keyboard support (Enter/Escape)
• ✅ API integration
• ✅ Validation support
• ✅ Only saves when changed

การใช้งานพื้นฐาน

HTML Declarative

<span data-edit-in-place
      data-api="/api/users/1"
      data-field="name">
  John Doe
</span>

With Validation

<span data-edit-in-place
      data-api="/api/products/1"
      data-field="price"
      data-min="0"
      data-max="10000"
      data-required="true">
  99.99
</span>

JavaScript API

const editable = EditInPlaceManager.create(element, {
  api: '/api/users/1',
  field: 'name',
  onSave: (value) => {
    console.log('Saved:', value);
  }
});

Data Attributes

Options

EditInPlaceManager.create(element, {
  // API endpoint
  api: '/api/resource/1',

  // Field name
  field: 'title',

  // HTTP method
  method: 'PATCH',

  // Select text on edit
  selectOnEdit: true,

  // Validation rules
  required: false,
  min: null,
  max: null,
  pattern: null,

  // Callbacks
  onSave: (value) => {},
  onError: (error) => {},
  onCancel: () => {}
});

API อ้างอิง

EditInPlaceManager.create(element, options)

สร้าง editable element

Returns: Object - Instance

EditInPlaceManager.getInstance(element)

รับ instance จาก element

Returns: Object|null

instance.destroy()

ทำลาย instance

เหตุการณ์

element.addEventListener('edit:save', (e) => {
  console.log(`Changed from "${e.detail.oldValue}" to "${e.detail.value}"`);
});

Keyboard Shortcuts

การจัดรูปแบบ CSS

/* Editable element */
[data-edit-in-place] {
  cursor: pointer;
  border-bottom: 1px dashed #9ca3af;
}

[data-edit-in-place]:hover {
  background: rgba(59, 130, 246, 0.1);
}

/* Editing state */
[data-edit-in-place].editing {
  border-bottom: none;
}

[data-edit-in-place].editing input {
  font: inherit;
  border: 1px solid #3b82f6;
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
}

/* Saving state */
[data-edit-in-place].saving {
  opacity: 0.7;
  pointer-events: none;
}

/* Error state */
[data-edit-in-place].error {
  color: #ef4444;
  border-bottom-color: #ef4444;
}

ตัวอย่างการใช้งานจริง

Editable Table Cell

<table>
  <tr>
    <td>Name:</td>
    <td data-edit-in-place
        data-api="/api/profile"
        data-field="name">
      John Doe
    </td>
  </tr>
  <tr>
    <td>Email:</td>
    <td data-edit-in-place
        data-api="/api/profile"
        data-field="email"
        data-pattern="[^@]+@[^@]+\.[^@]+">
      john@example.com
    </td>
  </tr>
</table>

Editable Title

<h1 data-edit-in-place
    data-api="/api/articles/123"
    data-field="title"
    data-required="true">
  My Article Title
</h1>

With Custom Callback

document.querySelectorAll('[data-edit-in-place]').forEach(el => {
  el.addEventListener('edit:save', async (e) => {
    // Custom save logic
    try {
      await customSaveFunction(e.detail.value);
      NotificationManager.success('บันทึกสำเร็จ');
    } catch (error) {
      NotificationManager.error('บันทึกไม่สำเร็จ');
      // Revert to old value
      e.target.textContent = e.detail.oldValue;
    }
  });
});

Kanban Card Title

<div class="kanban-card">
  <h4 data-edit-in-place
      data-api="/api/tasks/456"
      data-field="title">
    Task Title
  </h4>
  <p data-edit-in-place
     data-api="/api/tasks/456"
     data-field="description">
    Task description goes here...
  </p>
</div>

ข้อควรระวัง

⚠️ 1. API Response Format

// API ควร return ค่าใหม่
{
  "success": true,
  "data": {
    "name": "New Value"  // ใช้ค่านี้แสดง
  }
}

// หรือ return ค่าที่ formatted แล้ว
{
  "value": "New Value"
}

⚠️ 2. Content ต้องเป็น Text

<!-- ❌ มี HTML ข้างใน -->
<span data-edit-in-place>
  <strong>Text</strong>
</span>

<!-- ✅ Text only -->
<span data-edit-in-place>Text</span>

⚠️ 3. Multiple Lines

<!-- ❌ EditInPlace ไม่รองรับ multiline -->
<p data-edit-in-place>
  Line 1
  Line 2
</p>

<!-- ✅ ใช้ textarea mode หรือ modal -->

เอกสารที่เกี่ยวข้อง

• FormManager - Form handling
• ApiService - API calls