Tomerg7898/annotateflow-data-annotation-command-center
0
1class EditClientModal extends HTMLElement {2 constructor() {3 super();4 this.attachShadow({ mode: 'open' });5 }6 7 connectedCallback() {8 this.render();9 this.setupEventListeners();10 }11 12 static get observedAttributes() {13 return ['client-id', 'name', 'contact', 'email', 'phone', 'industry', 'notes'];14 }15 16 attributeChangedCallback(name, oldValue, newValue) {17 if (oldValue !== newValue) {18 this.render();19 }20 }21 22 render() {23 this.shadowRoot.innerHTML = `24 <style>25 .modal-overlay {26 position: fixed;27 top: 0;28 left: 0;29 right: 0;30 bottom: 0;31 background: rgba(0, 0, 0, 0.5);32 display: flex;33 align-items: center;34 justify-content: center;35 z-index: 1000;36 }37 .modal-content {38 background: white;39 border-radius: 0.5rem;40 width: 100%;41 max-width: 500px;42 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);43 }44 .modal-header {45 padding: 1.5rem;46 border-bottom: 1px solid #e5e7eb;47 display: flex;48 justify-content: space-between;49 align-items: center;50 }51 .modal-title {52 font-size: 1.25rem;53 font-weight: 600;54 color: #111827;55 }56 .close-btn {57 background: none;58 border: none;59 cursor: pointer;60 color: #6b7280;61 }62 .modal-body {63 padding: 1.5rem;64 }65 .form-group {66 margin-bottom: 1.25rem;67 }68 label {69 display: block;70 margin-bottom: 0.5rem;71 font-size: 0.875rem;72 font-weight: 500;73 color: #374151;74 }75 input, textarea, select {76 width: 100%;77 padding: 0.5rem 0.75rem;78 border: 1px solid #d1d5db;79 border-radius: 0.375rem;80 font-size: 0.875rem;81 }82 .modal-footer {83 padding: 1.5rem;84 border-top: 1px solid #e5e7eb;85 display: flex;86 justify-content: flex-end;87 gap: 0.75rem;88 }89 .btn {90 padding: 0.5rem 1rem;91 border-radius: 0.375rem;92 font-weight: 500;93 cursor: pointer;94 }95 .btn-primary {96 background-color: #3b82f6;97 color: white;98 border: none;99 }100 .btn-primary:hover {101 background-color: #2563eb;102 }103 .btn-outline {104 background-color: white;105 border: 1px solid #d1d5db;106 color: #374151;107 }108 .btn-outline:hover {109 background-color: #f9fafb;110 }111 .btn-danger {112 background-color: #ef4444;113 color: white;114 border: none;115 }116 .btn-danger:hover {117 background-color: #dc2626;118 }119 </style>120 121 <div class="modal-overlay">122 <div class="modal-content">123 <div class="modal-header">124 <h3 class="modal-title">Edit Client</h3>125 <button class="close-btn" id="close-modal">126 <i data-feather="x"></i>127 </button>128 </div>129 <div class="modal-body">130 <form id="edit-client-form">131 <input type="hidden" id="client-id" value="${this.getAttribute('client-id') || ''}">132 <div class="form-group">133 <label for="client-name">Client Name</label>134 <input type="text" id="client-name" value="${this.getAttribute('name') || ''}" required>135 </div>136 <div class="form-group">137 <label for="contact-name">Contact Person</label>138 <input type="text" id="contact-name" value="${this.getAttribute('contact') || ''}" required>139 </div>140 <div class="form-group">141 <label for="contact-email">Email</label>142 <input type="email" id="contact-email" value="${this.getAttribute('email') || ''}" required>143 </div>144 <div class="form-group">145 <label for="contact-phone">Phone</label>146 <input type="tel" id="contact-phone" value="${this.getAttribute('phone') || ''}">147 </div>148 <div class="form-group">149 <label for="client-industry">Industry</label>150 <select id="client-industry">151 <option value="">Select Industry</option>152 <option ${this.getAttribute('industry') === 'Technology' ? 'selected' : ''}>Technology</option>153 <option ${this.getAttribute('industry') === 'Healthcare' ? 'selected' : ''}>Healthcare</option>154 <option ${this.getAttribute('industry') === 'Finance' ? 'selected' : ''}>Finance</option>155 <option ${this.getAttribute('industry') === 'Retail' ? 'selected' : ''}>Retail</option>156 <option ${this.getAttribute('industry') === 'Manufacturing' ? 'selected' : ''}>Manufacturing</option>157 </select>158 </div>159 <div class="form-group">160 <label for="client-notes">Notes</label>161 <textarea id="client-notes" rows="3">${this.getAttribute('notes') || ''}</textarea>162 </div>163 </form>164 </div>165 <div class="modal-footer">166 <button class="btn btn-danger" id="delete-btn">Delete</button>167 <button class="btn btn-outline" id="cancel-btn">Cancel</button>168 <button type="submit" form="edit-client-form" class="btn btn-primary" id="save-btn">Save Changes</button>169 </div>170 </div>171 </div>172 `;173 feather.replace();174 }175 176 setupEventListeners() {177 const closeBtn = this.shadowRoot.getElementById('close-modal');178 const cancelBtn = this.shadowRoot.getElementById('cancel-btn');179 const deleteBtn = this.shadowRoot.getElementById('delete-btn');180 const form = this.shadowRoot.getElementById('edit-client-form');181 182 const closeModal = () => {183 this.remove();184 };185 186 closeBtn.addEventListener('click', closeModal);187 cancelBtn.addEventListener('click', closeModal);188 189 deleteBtn.addEventListener('click', () => {190 if (confirm('Are you sure you want to delete this client?')) {191 this.dispatchEvent(new CustomEvent('client-deleted', {192 detail: { id: this.getAttribute('client-id') },193 bubbles: true,194 composed: true195 }));196 this.remove();197 }198 });199 200 form.addEventListener('submit', (e) => {201 e.preventDefault();202 this.handleSubmit();203 });204 }205 206 handleSubmit() {207 const clientData = {208 id: this.shadowRoot.getElementById('client-id').value,209 name: this.shadowRoot.getElementById('client-name').value,210 contact: this.shadowRoot.getElementById('contact-name').value,211 email: this.shadowRoot.getElementById('contact-email').value,212 phone: this.shadowRoot.getElementById('contact-phone').value,213 industry: this.shadowRoot.getElementById('client-industry').value,214 notes: this.shadowRoot.getElementById('client-notes').value,215 updatedAt: new Date().toISOString()216 };217 218 this.dispatchEvent(new CustomEvent('client-updated', {219 detail: clientData,220 bubbles: true,221 composed: true222 }));223 224 this.remove();225 }226}227 228customElements.define('edit-client-modal', EditClientModal);