lokeshloki143 commited on
Commit
7b752b5
·
verified ·
1 Parent(s): 359f788

Update templates/customer_details.html

Browse files
Files changed (1) hide show
  1. templates/customer_details.html +31 -12
templates/customer_details.html CHANGED
@@ -145,7 +145,8 @@
145
  </style>
146
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
147
  <script>
148
- function enableEditField(fieldId, flagId) {
 
149
  var field = document.getElementById(fieldId);
150
  var flagField = document.getElementById(flagId);
151
  var changeBtn = $(field).siblings('.change-btn');
@@ -157,26 +158,28 @@
157
  flagField.value = "true";
158
  });
159
  }
160
- // Show CHANGE buttons for all other readonly fields
161
  ['customerName', 'phone', 'email'].forEach(function(id) {
162
  if ($('#' + id).prop('readonly')) {
163
  $('#' + id).siblings('.change-btn').show();
164
  }
165
  });
166
  }
167
- function onFocusNext(inputField) {
 
168
  var changeBtn = $(inputField).siblings('.change-btn');
169
  if ($(inputField).prop('readonly')) {
170
  changeBtn.show();
171
  }
172
- // Show CHANGE buttons for all other readonly fields
173
  ['customerName', 'phone', 'email'].forEach(function(id) {
174
  if ($('#' + id).prop('readonly')) {
175
  $('#' + id).siblings('.change-btn').show();
176
  }
177
  });
178
  }
179
- function copyReferralCode(button) {
 
180
  var referralCode = document.getElementById('referralCode').value;
181
  navigator.clipboard.writeText(referralCode).then(() => {
182
  $(button).find('span').text('COPIED');
@@ -186,6 +189,12 @@
186
  }).catch(err => {
187
  console.error('Failed to copy: ', err);
188
  });
 
 
 
 
 
 
189
  }
190
  function updateProfile(event) {
191
  event.preventDefault();
@@ -234,6 +243,16 @@
234
  if ($('#emailEdited').val() === "true") {
235
  $('#email').siblings('.change-btn').addClass('disabled').off('click');
236
  }
 
 
 
 
 
 
 
 
 
 
237
  });
238
  </script>
239
  </head>
@@ -255,26 +274,26 @@
255
 
256
  <div class="form-group">
257
  <label for="customerName">Name</label>
258
- <input type="text" id="customerName" name="customerName" value="{{ customer['name'] }}" readonly>
259
- <span class="change-btn" onclick="enableEditField('customerName', 'nameEdited')">CHANGE</span>
260
  </div>
261
 
262
  <div class="form-group">
263
  <label for="phone">Mobile</label>
264
- <input type="text" id="phone" name="phone" value="{{ customer['phone'] }}" readonly onfocus="onFocusNext(this)">
265
- <span class="change-btn" onclick="enableEditField('phone', 'phoneEdited')">CHANGE</span>
266
  </div>
267
 
268
  <div class="form-group">
269
  <label for="email">Email</label>
270
- <input type="email" id="email" name="email" value="{{ customer['email'] }}" readonly onfocus="onFocusNext(this)">
271
- <span class="change-btn" onclick="enableEditField('email', 'emailEdited')">CHANGE</span>
272
  </div>
273
 
274
  <div class="form-group">
275
  <label for="referralCode">Referral Code</label>
276
  <input type="text" id="referralCode" name="referralCode" value="{{ customer['referral_code'] }}" readonly>
277
- <span class="copy-btn" onclick="copyReferralCode(this)">
278
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
279
  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
280
  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
 
145
  </style>
146
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
147
  <script>
148
+ function enableEditField(fieldId, flagId, event) {
149
+ event.stopPropagation(); // Prevent click from bubbling to document
150
  var field = document.getElementById(fieldId);
151
  var flagField = document.getElementById(flagId);
152
  var changeBtn = $(field).siblings('.change-btn');
 
158
  flagField.value = "true";
159
  });
160
  }
161
+ // Show CHANGE buttons for all readonly fields
162
  ['customerName', 'phone', 'email'].forEach(function(id) {
163
  if ($('#' + id).prop('readonly')) {
164
  $('#' + id).siblings('.change-btn').show();
165
  }
166
  });
167
  }
168
+ function onFocusNext(inputField, event) {
169
+ event.stopPropagation(); // Prevent focus click from bubbling to document
170
  var changeBtn = $(inputField).siblings('.change-btn');
171
  if ($(inputField).prop('readonly')) {
172
  changeBtn.show();
173
  }
174
+ // Show CHANGE buttons for all readonly fields
175
  ['customerName', 'phone', 'email'].forEach(function(id) {
176
  if ($('#' + id).prop('readonly')) {
177
  $('#' + id).siblings('.change-btn').show();
178
  }
179
  });
180
  }
181
+ function copyReferralCode(button, event) {
182
+ event.stopPropagation(); // Prevent click from bubbling to document
183
  var referralCode = document.getElementById('referralCode').value;
184
  navigator.clipboard.writeText(referralCode).then(() => {
185
  $(button).find('span').text('COPIED');
 
189
  }).catch(err => {
190
  console.error('Failed to copy: ', err);
191
  });
192
+ // Show CHANGE buttons for all readonly fields
193
+ ['customerName', 'phone', 'email'].forEach(function(id) {
194
+ if ($('#' + id).prop('readonly')) {
195
+ $('#' + id).siblings('.change-btn').show();
196
+ }
197
+ });
198
  }
199
  function updateProfile(event) {
200
  event.preventDefault();
 
243
  if ($('#emailEdited').val() === "true") {
244
  $('#email').siblings('.change-btn').addClass('disabled').off('click');
245
  }
246
+ // Handle outside clicks
247
+ $(document).on('click', function(event) {
248
+ if (!$(event.target).closest('.form-group input, .change-btn, .copy-btn').length) {
249
+ ['customerName', 'phone', 'email'].forEach(function(id) {
250
+ if ($('#' + id).prop('readonly')) {
251
+ $('#' + id).siblings('.change-btn').show();
252
+ }
253
+ });
254
+ }
255
+ });
256
  });
257
  </script>
258
  </head>
 
274
 
275
  <div class="form-group">
276
  <label for="customerName">Name</label>
277
+ <input type="text" id="customerName" name="customerName" value="{{ customer['name'] }}" readonly onfocus="onFocusNext(this, event)">
278
+ <span class="change-btn" onclick="enableEditField('customerName', 'nameEdited', event)">CHANGE</span>
279
  </div>
280
 
281
  <div class="form-group">
282
  <label for="phone">Mobile</label>
283
+ <input type="text" id="phone" name="phone" value="{{ customer['phone'] }}" readonly onfocus="onFocusNext(this, event)">
284
+ <span class="change-btn" onclick="enableEditField('phone', 'phoneEdited', event)">CHANGE</span>
285
  </div>
286
 
287
  <div class="form-group">
288
  <label for="email">Email</label>
289
+ <input type="email" id="email" name="email" value="{{ customer['email'] }}" readonly onfocus="onFocusNext(this, event)">
290
+ <span class="change-btn" onclick="enableEditField('email', 'emailEdited', event)">CHANGE</span>
291
  </div>
292
 
293
  <div class="form-group">
294
  <label for="referralCode">Referral Code</label>
295
  <input type="text" id="referralCode" name="referralCode" value="{{ customer['referral_code'] }}" readonly>
296
+ <span class="copy-btn" onclick="copyReferralCode(this, event)">
297
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
298
  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
299
  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>