templates/js/library/json_form_saver/json_form_saver.js.twig line 1

Open in your IDE?
  1. class JsonFormSaver {
  2.     EVENTS = {
  3.         ON_CHANGE: 'onChange',
  4.         ON_SAVE: 'onSave',
  5.         ON_SAVE_ERROR: 'onSaveError',
  6.     };
  8.     options = {
  9.         jsonObject: null,
  10.         /** @type {JsonObjectToComponentsDataBinder} */
  11.         componentsDataBinder: null,
  12.         symfonyFormDataBuilder: null,
  13.         url: null,
  14.         csrfToken: null,
  15.         saveOnChanges: false,
  16.     };
  18.     constructor(options = null) {
  19.         this.options = { ...this.options, ...options };
  20.         this.eventDispatcher = new EventDispatcher();
  21.     }
  23.     init() {
  24.         const componentsBinder = this.options.componentsDataBinder;
  25.         const formBuilder = this.options.symfonyFormDataBuilder;
  27.         const doSave = () => {
  28.             if (this.options.saveOnChanges) {
  29.                 this.save(() => {
  30.                     this.eventDispatcher.emit(this.EVENTS.ON_SAVE);
  31.                 });
  32.             }
  33.         };
  35.         const saveDebounced = (new Debouncer2()).debounce(() => {
  36.             doSave();
  37.         }, 3000);
  39.         const handler = (data) => {
  40.             const json = this.options.jsonObject;
  41.             Object.keys(json).forEach((key) => {
  42.                 const value = json[key];
  43.                 if (Array.isArray(value)) {
  44.                     formBuilder.setTextArrayField(key, value);
  45.                 } else if (typeof value === 'string') {
  46.                     formBuilder.setField(key, value);
  47.                 } else if (typeof value === 'number') {
  48.                     formBuilder.setField(key, String(value));
  49.                 } else if (typeof value === 'boolean') {
  50.                     if (value) {
  51.                         formBuilder.setField(key, "1");
  52.                     } else {
  53.                         formBuilder.removeField(key);
  54.                     }
  55.                 } else if (value === null || typeof value === 'undefined') {
  56.                     formBuilder.setField(key, '');
  57.                 } else if (typeof value === 'object') {
  58.                     try {
  59.                         formBuilder.setField(key, JSON.stringify(value));
  60.                     } catch (e) {
  61.                         formBuilder.setField(key, '');
  62.                     }
  63.                 } else {
  64.                     formBuilder.setField(key, String(value));
  65.                 }
  66.             });
  68.             if (this.options.csrfToken) {
  69.                 formBuilder.setField('_token', this.options.csrfToken);
  70.             }
  72.             if (data.saveDebounced) {
  73.                 saveDebounced();
  74.             } else {
  75.                 doSave();
  76.             }
  77.         };
  79.         componentsBinder.eventDispatcher.on(componentsBinder.EVENTS.ON_CHANGE, handler);
  80.     }
  82.     save(onSuccess = null) {
  83.         const formBuilder = this.options.symfonyFormDataBuilder;
  84.         const formData = formBuilder.getFormData();
  85.         const url = this.options.url;
  87.         (async () => {
  88.             try {
  89.                 const response = await fetch(url, {
  90.                     method: 'POST',
  91.                     body: formData,
  92.                     credentials: 'same-origin'
  93.                 });
  95.                 if (!response.ok) {
  96.                     const text = await response.text();
  97.                     console.error('Ошибка при сохранении данных:', response.status, text);
  98.                     this.eventDispatcher.emit(this.EVENTS.ON_SAVE_ERROR, { response: response });
  99.                 } else {
  100.                     onSuccess && onSuccess();
  101.                 }
  103.                 const contentType = response.headers.get('content-type') || '';
  104.                 if (contentType.includes('application/json')) {
  105.                     const data = await response.json();
  106.                     console.log('Response JSON:', data);
  107.                     if (data.redirect) {
  108.                         window.location = data.redirect;
  109.                     }
  110.                 }
  111.             } catch (e) {
  112.                 console.error(e);
  113.             }
  114.         })();
  115.     }
  116. }