@crystaldesign/diva-backoffice 24.11.0-beta.39 → 24.11.0-beta.40

package/build/esm/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { createElement, createContext, useState, useEffect, useRef, useMemo, useImperativeHandle, useCallback, createRef, useReducer, useContext, memo } from 'react';
 import 'antd/dist/reset.css';
-import { Form as Form$1, Button, Input, Popover, Typography, Divider, Select as Select$1, Avatar, Spin, Radio, DatePicker, Checkbox, InputNumber, Modal as Modal$2, Progress, Space, Cascader, Descriptions, Row, Col, Tooltip as Tooltip$1, Collapse, List as List$1, Skeleton, Alert, Card, Upload, Switch, Table as Table$1, Popconfirm, Tabs, Image, Slider, Breadcrumb, Result as Result$1, message, Layout, Drawer, ConfigProvider, theme } from 'antd';
+import { Form as Form$1, Button, Input, Popover, Typography, Divider, Select as Select$1, Avatar, Spin, Radio, Space, DatePicker, Checkbox, InputNumber, Modal as Modal$2, Progress, Cascader, Descriptions, Row, Col, Tooltip as Tooltip$1, Collapse, List as List$1, Skeleton, Alert, Card, Upload as Upload$2, Switch, Table as Table$1, Popconfirm, Tabs, Image, Slider, Breadcrumb, Result as Result$1, message, Layout, Drawer, ConfigProvider, theme } from 'antd';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { observer } from 'mobx-react-lite';
 import { getLogger, DivaError, useTranslation, useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
@@ -65,20 +65,23 @@ import FolderOutlined from '@ant-design/icons/FolderOutlined';
 import SettingOutlined from '@ant-design/icons/SettingOutlined';
 import PieChartOutlined from '@ant-design/icons/PieChartOutlined';
 import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
-import { merge as merge$1 } from 'lodash';
+import { cloneDeep, merge as merge$1, mergeWith } from 'lodash';
+import DivaUtils$1, { nanoid, DivaError as DivaError$1 } from '@crystaldesign/diva-utils';
 import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
 import JSONEditor from 'jsoneditor';
 import 'jsoneditor/dist/jsoneditor.css';
-import { MinusCircleOutlined, PlusOutlined, DownloadOutlined as DownloadOutlined$1, PlusSquareOutlined, DeleteOutlined as DeleteOutlined$1, FullscreenOutlined, FileUnknownOutlined, CloseOutlined as CloseOutlined$1, PlusCircleOutlined as PlusCircleOutlined$1, HomeOutlined as HomeOutlined$1, InboxOutlined, PushpinOutlined, PushpinFilled, ReloadOutlined as ReloadOutlined$1 } from '@ant-design/icons';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { MinusCircleOutlined, PlusOutlined, DownloadOutlined as DownloadOutlined$1, PlusSquareOutlined, DeleteOutlined as DeleteOutlined$1, FullscreenOutlined, FileUnknownOutlined, CloseOutlined as CloseOutlined$1, PlusCircleOutlined as PlusCircleOutlined$1, HomeOutlined as HomeOutlined$1, InboxOutlined, PushpinOutlined, PushpinFilled, ReloadOutlined as ReloadOutlined$1 } from '@ant-design/icons';
 import classnames from 'classnames';
 import { Editor } from '@tinymce/tinymce-react';
 import debounce from 'lodash/debounce';
+import Button$1 from 'antd/es/button';
+import Upload$1 from 'antd/es/upload';
+import Space$1 from 'antd/es/space';
 import { stringify } from 'csv';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
 import PlusOutlined$1 from '@ant-design/icons/PlusOutlined';
-import DivaUtils$1, { nanoid, DivaError as DivaError$1 } from '@crystaldesign/diva-utils';
 import ReactCrop from 'react-image-crop';
 import 'react-image-crop/dist/ReactCrop.css';
 import RoomSelection from '@crystaldesign/room-selection';
@@ -113,7 +116,6 @@ import Descriptions$1 from 'antd/es/descriptions';
 import { Spreadsheet } from '@crystaldesign/spreadsheet';
 import EditOutlined from '@ant-design/icons/lib/icons/EditOutlined';
 import UploadOutlined$1 from '@ant-design/icons/lib/icons/UploadOutlined';
-import Space$1 from 'antd/es/space';
 import Switch$1 from 'antd/es/switch';
 import Layout$1 from 'antd/es/layout';
 import Menu from 'antd/es/menu';
@@ -3142,6 +3144,17 @@ function loadConfiguration(t, root, config, lang) {
         }]
       }
     },
+    GroupContentItems: {
+      type: 'Group',
+      items: [{
+        id: 'ContentItems',
+        type: 'Table'
+      }, {
+        id: 'ContentItemsTemplate',
+        type: 'Table'
+      }],
+      setSelectedOrganization: true
+    },
     ContentItems: {
       title: t('backoffice.table.contentitems.title'),
       type: 'Table',
@@ -3155,6 +3168,7 @@ function loadConfiguration(t, root, config, lang) {
         id: 'FormEditContentItem',
         title: t('backoffice.table.contentItem.copyAction.title'),
         label: t('backoffice.table.services.copyAction.label'),
+        disableOnMultiselect: true,
         mapping: {
           type: 'body',
           map: [{
@@ -3169,14 +3183,6 @@ function loadConfiguration(t, root, config, lang) {
           }]
         }
       },
-      createAction: {
-        actionType: 'Detail',
-        type: 'JsonEditor',
-        id: 'JsonEditorCreateContentItem',
-        title: t('backoffice.table.contentItem.label.create'),
-        label: t('backoffice.table.contentItem.label.create'),
-        permission: 'backoffice_create_contentitem_template'
-      },
       deleteAction: {
         disabled: function disabled(datas) {
           return (datas === null || datas === void 0 ? void 0 : datas.find(function (d) {
@@ -3195,19 +3201,19 @@ function loadConfiguration(t, root, config, lang) {
         field: 'supplierName',
         sorter: 1,
         filter: 'advanced',
-        width: 200
+        width: 150
       }, {
         title: t('backoffice.table.roles.columns.catalogName'),
         field: 'catalogName',
         sorter: 1,
         filter: 'advanced',
-        width: 200
+        width: 150
       }, {
-        title: t('backoffice.table.views.lastUpdatedBy'),
-        field: 'lastUpdatedBy_displayText',
+        title: t('backoffice._id'),
+        field: '_id',
         sorter: 1,
         filter: 'advanced',
-        width: 150
+        width: 100
       }, {
         title: t('backoffice.table.views.lastUpdated'),
         field: 'lastUpdated',
@@ -3215,6 +3221,12 @@ function loadConfiguration(t, root, config, lang) {
         sorter: 1,
         filter: 'advanced',
         width: 200
+      }, {
+        title: t('backoffice.table.views.lastUpdatedBy'),
+        field: 'lastUpdatedBy_displayText',
+        sorter: 1,
+        filter: 'advanced',
+        width: 150
       }, {
         title: 'backoffice.content',
         field: 'content',
@@ -3223,9 +3235,102 @@ function loadConfiguration(t, root, config, lang) {
         title: t('backoffice.table.medien.columns.title.organizationId'),
         field: 'organizationId',
         sorter: 1,
-        defaultSortOrder: 'ascend',
         filter: 'advanced',
         width: 150
+      }],
+      rowAction: [{
+        actionType: 'Detail',
+        disabled: function disabled(data) {
+          return !(data !== null && data !== void 0 && data.organizationId) && !root.actions.userHasPermission('backoffice_edit_contentitem_template');
+        },
+        disableOnMultiselect: true,
+        type: 'Form',
+        id: 'FormEditContentItem',
+        title: t('backoffice.table.contentItem.edit'),
+        label: t('backoffice.edit')
+      }, {
+        disableOnMultiselect: true,
+        actionType: 'Detail',
+        permission: 'backoffice_edit_contentitem_template',
+        type: 'JsonEditor',
+        label: t('backoffice.table.contentItem.editjson'),
+        id: 'JsonEditorEditContentItem',
+        title: t('backoffice.table.contentItem.edit')
+      }],
+      apiInterface: {
+        read: {
+          list: '${catalogService}/contentItems',
+          filterServerSide: true
+        },
+        "delete": '${catalogService}/contentItems/${id}'
+      }
+    },
+    ContentItemsTemplate: {
+      title: t('backoffice.table.contentitemstemplate.title'),
+      type: 'Table',
+      canRefresh: true,
+      pagination: {
+        pageSize: 50
+      },
+      copyAction: {
+        actionType: 'Detail',
+        type: 'Form',
+        id: 'FormEditContentItem',
+        disableOnMultiselect: true,
+        title: t('backoffice.table.contentItem.copyAction.title'),
+        label: t('backoffice.table.services.copyAction.label'),
+        mapping: {
+          type: 'body',
+          map: [{
+            targetField: 'content',
+            sourceField: 'content'
+          }, {
+            targetField: 'description',
+            sourceField: 'description'
+          }, {
+            targetField: 'organizationId',
+            globalValue: 'organizationId'
+          }]
+        }
+      },
+      createAction: {
+        actionType: 'Detail',
+        type: 'JsonEditor',
+        id: 'JsonEditorCreateContentItem',
+        title: t('backoffice.table.contentItem.label.create'),
+        label: t('backoffice.table.contentItem.label.create'),
+        permission: 'backoffice_create_contentitem_template'
+      },
+      deleteAction: {
+        disabled: function disabled(datas) {
+          return (datas === null || datas === void 0 ? void 0 : datas.find(function (d) {
+            return !d.organizationId;
+          })) && !root.actions.userHasPermission('backoffice_delete_contentitem_template');
+        }
+      },
+      columns: [{
+        title: t('backoffice.table.roles.columns.description'),
+        field: 'description',
+        sorter: 1,
+        filter: 'advanced',
+        width: 500
+      }, {
+        title: t('backoffice.table.views.lastUpdatedBy'),
+        field: 'lastUpdatedBy_displayText',
+        sorter: 1,
+        filter: 'advanced',
+        width: 150
+      }, {
+        title: t('backoffice.table.views.lastUpdated'),
+        field: 'lastUpdated',
+        type: 'unixTimeStamp',
+        sorter: 1,
+        filter: 'advanced',
+        width: 200
+      }, {
+        title: 'backoffice.content',
+        field: 'content',
+        hidden: true
       }, {
         title: t('backoffice._id'),
         field: '_id',
@@ -3264,7 +3369,7 @@ function loadConfiguration(t, root, config, lang) {
       }],
       apiInterface: {
         read: {
-          list: '${catalogService}/contentItems',
+          list: '${catalogService}/contentItems?onlyTemplates=true',
           filterServerSide: true
         },
         "delete": '${catalogService}/contentItems/${id}'
@@ -6938,7 +7043,7 @@ function loadConfiguration(t, root, config, lang) {
         hidden: function hidden(data) {
           return (data === null || data === void 0 ? void 0 : data.type) !== 'RETAILER' && (data === null || data === void 0 ? void 0 : data.parentType) !== 'RETAILER';
         },
-        onSave: function onSave(_, newD) {
+        onSave: function onSave(newD) {
           if (!newD) return;
           if (!newD.iwofurn) newD.iwoFurnOptions = undefined;
           delete newD.iwofurn;
@@ -7517,10 +7622,45 @@ function loadConfiguration(t, root, config, lang) {
                       label: 'Video'
                     }]
                   }, {
-                    name: 'url',
-                    type: 'input',
+                    name: 'mediaItemImage',
+                    type: 'media',
+                    allowedTypes: ['image/*'],
+                    mediaItemRefField: 'mediaItemRefImage',
+                    urlField: 'image',
                     label: t('backoffice.form.api2servers.items.url'),
-                    doTranslate: true
+                    functionType: 'CAT',
+                    hidden: function hidden(d) {
+                      return (d === null || d === void 0 ? void 0 : d.type) !== 'Image' && d !== undefined;
+                    },
+                    onSave: function onSave(data) {
+                      if ((data === null || data === void 0 ? void 0 : data.type) !== 'Image' && data !== undefined) {
+                        delete data.image;
+                        delete data.mediaItemRefImage;
+                        delete data.mediaItemImage;
+                        return data;
+                      }
+                      return data;
+                    }
+                  }, {
+                    name: 'mediaItemVideo',
+                    type: 'media',
+                    allowedTypes: ['video/*'],
+                    mediaItemRefField: 'mediaItemRefVideo',
+                    urlField: 'video',
+                    label: t('backoffice.form.api2servers.items.url'),
+                    functionType: 'INF',
+                    hidden: function hidden(d) {
+                      return (d === null || d === void 0 ? void 0 : d.type) !== 'Video';
+                    },
+                    onSave: function onSave(data) {
+                      if (data.type !== 'Video') {
+                        delete data.video;
+                        delete data.mediaItemRefVideo;
+                        delete data.mediaItemVideo;
+                        return data;
+                      }
+                      return data;
+                    }
                   }, {
                     name: 'altText',
                     type: 'input',
@@ -7532,6 +7672,18 @@ function loadConfiguration(t, root, config, lang) {
                   }, {
                     name: 'cover',
                     hidden: true
+                  }, {
+                    name: 'image',
+                    hidden: true
+                  }, {
+                    name: 'mediaItemRefImage',
+                    hidden: true
+                  }, {
+                    name: 'video',
+                    hidden: true
+                  }, {
+                    name: 'mediaItemRefVideo',
+                    hidden: true
                   }]
                 });
                 break;
@@ -7708,7 +7860,7 @@ function loadConfiguration(t, root, config, lang) {
                 break;
               case 'Gallery':
                 translationItems.push({
-                  name: 'Gallery',
+                  name: [].concat(_toConsumableArray(p), ['Gallery']),
                   type: 'subTitle'
                 });
                 translationItems.push({
@@ -7758,7 +7910,7 @@ function loadConfiguration(t, root, config, lang) {
                 break;
               case 'Image':
                 translationItems.push({
-                  name: 'Image',
+                  name: [].concat(_toConsumableArray(p), ['Image']),
                   type: 'subTitle'
                 });
                 translationItems.push({
@@ -7788,7 +7940,7 @@ function loadConfiguration(t, root, config, lang) {
                 break;
               case 'Video':
                 translationItems.push({
-                  name: 'Video',
+                  name: [].concat(_toConsumableArray(p), ['Video']),
                   type: 'subTitle'
                 });
                 translationItems.push({
@@ -7830,6 +7982,7 @@ function loadConfiguration(t, root, config, lang) {
         });
         return result;
       },
+      disableSave: true,
       tools: [{
         id: 'WYSIWYG_ContentItem',
         name: 'ContentItem Preview',
@@ -8079,7 +8232,7 @@ function loadConfiguration(t, root, config, lang) {
           name: 'viewPoint',
           label: t('backoffice.form.createorupdaterenderpackages.items.viewpoint'),
           hidden: function hidden(data) {
-            return data.job !== 'HQ';
+            return (data === null || data === void 0 ? void 0 : data.job) !== 'HQ' && data !== undefined;
           }
         }, {
           name: 'preset',
@@ -12028,18 +12181,6 @@ var menu = [{
   label: 'backoffice.menu.items.label.GroupCurrentOrganization',
   permission: 'backoffice_current_organization',
   icon: 'ApartmentOutlined'
-}, {
-  id: 'GridShopMonitoring',
-  path: 'monitoring',
-  label: 'backoffice.menu.items.label.GridShopMonitoring',
-  permission: 'backoffice_monitoring_shop',
-  icon: 'DashboardOutlined'
-}, {
-  id: 'TableApplicationLogs',
-  path: 'applicationlogs',
-  label: 'backoffice.menu.items.label.TableApplicationLogs',
-  permission: 'backoffice_application_status',
-  icon: 'AlertOutlined'
 }, {
   id: 'TableClientRenderJobs',
   path: 'renderjobs',
@@ -12109,7 +12250,7 @@ var menu = [{
       }
     }]
   }, {
-    id: 'ContentItems',
+    id: 'GroupContentItems',
     path: 'contentitems',
     label: 'backoffice.menu.items.label.ContentItems',
     icon: 'OrderedListOutlined',
@@ -12294,7 +12435,7 @@ var menu = [{
       permission: 'backoffice_admin_tests',
       icon: 'HistoryOutlined'
     }, {
-      label: 'File Upload BETA',
+      label: 'backoffice.menu.items.label.fileupload',
       path: 'fileupload',
       id: 'FileUploadBeta',
       permission: 'backoffice_admin_fileupload',
@@ -12305,6 +12446,12 @@ var menu = [{
       label: 'backoffice.menu.items.label.TableEmailTemplates',
       permission: 'backoffice_admin_emailtemplates',
       icon: 'MailOutlined'
+    }, {
+      id: 'GridShopMonitoring',
+      path: 'monitoring',
+      label: 'backoffice.menu.items.label.GridShopMonitoring',
+      permission: 'backoffice_monitoring_shop',
+      icon: 'DashboardOutlined'
     }]
   }]
 }, {
@@ -12400,6 +12547,12 @@ var menu = [{
     label: 'backoffice.menu.items.label.UIBuilderAnalytics',
     permission: 'backoffice_analytics_optionvalues',
     icon: 'OrderedListOutlined'
+  }, {
+    id: 'TableApplicationLogs',
+    path: 'applicationlogs',
+    label: 'backoffice.menu.items.label.TableApplicationLogs',
+    permission: 'backoffice_application_status',
+    icon: 'AlertOutlined'
   }]
 }];
 
@@ -13286,6 +13439,399 @@ function removeEmpty(data) {
   return undefined;
 }
 
+function fetchFileData(_x) {
+  return _fetchFileData.apply(this, arguments);
+}
+function _fetchFileData() {
+  _fetchFileData = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return fetch(url).then(function (response) {
+            return response.blob();
+          }).then(function (blob) {
+            return new File([blob], nameFromUrl(url), {
+              type: blob.type
+            });
+          });
+        case 2:
+          return _context.abrupt("return", _context.sent);
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _fetchFileData.apply(this, arguments);
+}
+function nameFromUrl(url) {
+  var noParams = url.split('?')[0];
+  var name = noParams.split('/').pop();
+  return name !== null && name !== void 0 ? name : 'file';
+}
+function getFileAsDataUri(_x2) {
+  return _getFileAsDataUri.apply(this, arguments);
+}
+function _getFileAsDataUri() {
+  _getFileAsDataUri = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(file) {
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          return _context2.abrupt("return", new Promise(function (resolve, reject) {
+            var reader = new FileReader();
+            reader.onload = function () {
+              if (reader.result) {
+                resolve(reader.result.toString());
+              } else {
+                reject(new Error('Failed to read file as data URI'));
+              }
+            };
+            reader.onerror = function () {
+              reject(new Error('Error reading file'));
+            };
+            reader.readAsDataURL(file);
+          }));
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _getFileAsDataUri.apply(this, arguments);
+}
+function isFileOfType(file) {
+  var typeList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var fileType = file.type.toLocaleLowerCase();
+  var fileName = file.name;
+  var fileExtension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+  if (typeList.length === 0) return true;
+  return typeList.some(function (type) {
+    if (type.startsWith('.')) {
+      // Check file extension
+      return fileExtension === type.toLowerCase();
+    } else if (type.endsWith('/*')) {
+      // Check wildcard MIME type
+      var baseType = type.split('/')[0];
+      return fileType.startsWith(baseType.toLocaleLowerCase());
+    } else {
+      // Check exact MIME type
+      return fileType === type;
+    }
+  });
+}
+function getMediaItemRef(_x3, _x4, _x5) {
+  return _getMediaItemRef.apply(this, arguments);
+}
+function _getMediaItemRef() {
+  _getMediaItemRef = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(baseUrl, jwt, ref) {
+    var url, filter, result;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          url = new URL("".concat(baseUrl, "/v1/mediaitems/refs"));
+          filter = "{_id,eq,".concat(ref, "}");
+          url.searchParams.append('limit', '1');
+          url.searchParams.append('filter', encodeURIComponent("[".concat(filter, "]")));
+          _context3.prev = 4;
+          _context3.next = 7;
+          return fetch(url.toString(), {
+            method: 'GET',
+            headers: {
+              Authorization: "Bearer ".concat(jwt)
+            }
+          }).then(function (r) {
+            return r.json();
+          });
+        case 7:
+          result = _context3.sent;
+          if (!(result.data.length === 0)) {
+            _context3.next = 10;
+            break;
+          }
+          throw new Error('Media item not found');
+        case 10:
+          return _context3.abrupt("return", result.data[0]);
+        case 13:
+          _context3.prev = 13;
+          _context3.t0 = _context3["catch"](4);
+          throw new Error('Could not fetch media item ref', {
+            cause: _context3.t0
+          });
+        case 16:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3, null, [[4, 13]]);
+  }));
+  return _getMediaItemRef.apply(this, arguments);
+}
+function uploadMediaItem(_x6, _x7, _x8) {
+  return _uploadMediaItem.apply(this, arguments);
+}
+function _uploadMediaItem() {
+  _uploadMediaItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(baseUrl, jwt, formData) {
+    var url;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          url = new URL("".concat(baseUrl, "/v1/mediaitems?ref=true"));
+          _context4.prev = 1;
+          return _context4.abrupt("return", fetch(url.toString(), {
+            method: 'POST',
+            headers: {
+              Authorization: "Bearer ".concat(jwt)
+            },
+            body: formData
+          }).then(function (r) {
+            return r.json();
+          }));
+        case 5:
+          _context4.prev = 5;
+          _context4.t0 = _context4["catch"](1);
+          throw new Error('Could not upload media item', {
+            cause: _context4.t0
+          });
+        case 8:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4, null, [[1, 5]]);
+  }));
+  return _uploadMediaItem.apply(this, arguments);
+}
+function removeMediaItemRef(_x9, _x10, _x11) {
+  return _removeMediaItemRef.apply(this, arguments);
+}
+function _removeMediaItemRef() {
+  _removeMediaItemRef = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(baseUrl, jwt, id) {
+    var url;
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          url = new URL("".concat(baseUrl, "/v1/mediaitems/refs/").concat(id));
+          _context5.prev = 1;
+          return _context5.abrupt("return", fetch(url.toString(), {
+            method: 'DELETE',
+            headers: {
+              Authorization: "Bearer ".concat(jwt)
+            }
+          }).then(function (r) {
+            return r.json();
+          }));
+        case 5:
+          _context5.prev = 5;
+          _context5.t0 = _context5["catch"](1);
+          throw new Error('Could not delete media item ref', {
+            cause: _context5.t0
+          });
+        case 8:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5, null, [[1, 5]]);
+  }));
+  return _removeMediaItemRef.apply(this, arguments);
+}
+function isExternalVid(file) {
+  return (file === null || file === void 0 ? void 0 : file.startsWith('https://youtu.be')) || (file === null || file === void 0 ? void 0 : file.startsWith('https://www.youtube.com')) || (file === null || file === void 0 ? void 0 : file.startsWith('https://vimeo.com'));
+}
+
+var VIDEO_THUMB_PLACEHOLDER = 'data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjgwMHB4IiB3aWR0aD0iODAwcHgiIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgCgkgdmlld0JveD0iMCAwIDQ5IDQ5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMzkuMjU2LDYuNUg5Ljc0NEM0LjM3MSw2LjUsMCwxMC44ODUsMCwxNi4yNzR2MTYuNDUxYzAsNS4zOSw0LjM3MSw5Ljc3NCw5Ljc0NCw5Ljc3NGgyOS41MTIKCQkJYzUuMzczLDAsOS43NDQtNC4zODUsOS43NDQtOS43NzRWMTYuMjc0QzQ5LDEwLjg4NSw0NC42MjksNi41LDM5LjI1Niw2LjV6IE00NywzMi43MjZjMCw0LjI4Ny0zLjQ3NCw3Ljc3NC03Ljc0NCw3Ljc3NEg5Ljc0NAoJCQlDNS40NzQsNDAuNSwyLDM3LjAxMiwyLDMyLjcyNlYxNi4yNzRDMiwxMS45ODgsNS40NzQsOC41LDkuNzQ0LDguNWgyOS41MTJjNC4yNywwLDcuNzQ0LDMuNDg4LDcuNzQ0LDcuNzc0VjMyLjcyNnoiLz4KCQk8cGF0aCBkPSJNMzMuMzYsMjQuMTM4bC0xMy44NTUtOC4xMTVjLTAuMzA4LTAuMTgtMC42OTEtMC4xODMtMS4wMDItMC4wMDVTMTgsMTYuNTI3LDE4LDE2Ljg4NnYxNi4yMjkKCQkJYzAsMC4zNTgsMC4xOTIsMC42OSwwLjUwMiwwLjg2OGMwLjE1NCwwLjA4OCwwLjMyNiwwLjEzMiwwLjQ5OCwwLjEzMmMwLjE3NSwwLDAuMzQ5LTAuMDQ2LDAuNTA1LTAuMTM3bDEzLjg1NS04LjExMwoJCQljMC4zMDYtMC4xNzksMC40OTUtMC41MDgsMC40OTUtMC44NjNTMzMuNjY3LDI0LjMxNywzMy4zNiwyNC4xMzh6IE0yMCwzMS4zN1YxOC42M2wxMC44NzYsNi4zNzFMMjAsMzEuMzd6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+';
+var MediaItem = /*#__PURE__*/function () {
+  function MediaItem(media, config, mediaItemId, medaItemRefId) {
+    _classCallCheck(this, MediaItem);
+    this.config = config;
+    _defineProperty(this, "_url", void 0);
+    _defineProperty(this, "_file", void 0);
+    _defineProperty(this, "_mediaItemId", void 0);
+    _defineProperty(this, "_mediaItemRefId", void 0);
+    _defineProperty(this, "_itemRef", void 0);
+    _defineProperty(this, "_isRemoteUrl", void 0);
+    if (typeof media === 'string') {
+      this._url = media;
+      this._isRemoteUrl = isExternalVid(media);
+    } else {
+      this._file = media;
+    }
+    this._mediaItemId = mediaItemId;
+    this._mediaItemRefId = medaItemRefId;
+  }
+  return _createClass(MediaItem, [{
+    key: "file",
+    get: function get() {
+      return this._file;
+    }
+  }, {
+    key: "url",
+    get: function get() {
+      return this._url;
+    }
+  }, {
+    key: "itemRefId",
+    get: function get() {
+      return this._mediaItemRefId;
+    }
+  }, {
+    key: "itemId",
+    get: function get() {
+      return this._mediaItemId;
+    }
+  }, {
+    key: "antdFile",
+    get: function get() {
+      var _this$_itemRef$_id, _this$_itemRef, _ref, _this$_itemRef$fileNa, _this$_itemRef2, _this$_file, _this$_url;
+      return {
+        uid: (_this$_itemRef$_id = (_this$_itemRef = this._itemRef) === null || _this$_itemRef === void 0 ? void 0 : _this$_itemRef._id) !== null && _this$_itemRef$_id !== void 0 ? _this$_itemRef$_id : nanoid(),
+        name: this._isRemoteUrl ? this._url : (_ref = (_this$_itemRef$fileNa = (_this$_itemRef2 = this._itemRef) === null || _this$_itemRef2 === void 0 ? void 0 : _this$_itemRef2.fileName) !== null && _this$_itemRef$fileNa !== void 0 ? _this$_itemRef$fileNa : (_this$_file = this._file) === null || _this$_file === void 0 ? void 0 : _this$_file.name) !== null && _ref !== void 0 ? _ref : nameFromUrl((_this$_url = this._url) !== null && _this$_url !== void 0 ? _this$_url : ''),
+        url: this._url,
+        thumbUrl: this._isRemoteUrl ? VIDEO_THUMB_PLACEHOLDER : undefined
+      };
+    }
+  }, {
+    key: "delete",
+    value: function () {
+      var _delete2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              this._url = undefined;
+              this._file = undefined;
+              if (this._mediaItemRefId) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return");
+            case 4:
+              _context.next = 6;
+              return removeMediaItemRef(this.config.baseUrl, this.config.jwt, this._mediaItemRefId);
+            case 6:
+              this._mediaItemId = undefined;
+              this._mediaItemRefId = undefined;
+              return _context.abrupt("return");
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function _delete() {
+        return _delete2.apply(this, arguments);
+      }
+      return _delete;
+    }()
+  }, {
+    key: "init",
+    value: function () {
+      var _init = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(allowedTypes) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!this._mediaItemRefId) {
+                _context2.next = 5;
+                break;
+              }
+              _context2.next = 3;
+              return getMediaItemRef(this.config.baseUrl, this.config.jwt, this._mediaItemRefId);
+            case 3:
+              this._itemRef = _context2.sent;
+              this._url = this._itemRef.url;
+            case 5:
+              if (!(this.file && !this._url)) {
+                _context2.next = 11;
+                break;
+              }
+              _context2.next = 8;
+              return getFileAsDataUri(this.file);
+            case 8:
+              this._url = _context2.sent;
+              _context2.next = 15;
+              break;
+            case 11:
+              if (!(this._url && !this._file && !this._isRemoteUrl)) {
+                _context2.next = 15;
+                break;
+              }
+              _context2.next = 14;
+              return fetchFileData(this._url);
+            case 14:
+              this._file = _context2.sent;
+            case 15:
+              if (!(this.file && !isFileOfType(this.file, allowedTypes))) {
+                _context2.next = 17;
+                break;
+              }
+              throw new Error('File type is not allowed');
+            case 17:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function init(_x) {
+        return _init.apply(this, arguments);
+      }
+      return init;
+    }()
+  }, {
+    key: "upload",
+    value: function () {
+      var _upload = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(organizationId, functionType) {
+        var formData, mediaitem, response;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!(this._itemRef || this._isRemoteUrl)) {
+                _context3.next = 2;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 2:
+              if (this._file) {
+                _context3.next = 4;
+                break;
+              }
+              throw new Error('The MediaItem must be initialized before uploading');
+            case 4:
+              formData = new FormData();
+              mediaitem = {
+                fileName: this._file.name,
+                organizationId: organizationId
+              };
+              if (isFileOfType(this._file, ['image/svg+xml'])) {
+                mediaitem.mediaType = 'SVG';
+              } else if (isFileOfType(this._file, ['image/*'])) {
+                mediaitem.mediaType = 'PCT';
+              } else if (isFileOfType(this._file, ['video/*'])) {
+                mediaitem.mediaType = 'VID';
+              } else ;
+              formData.append('mediaItem', JSON.stringify(mediaitem));
+              formData.append('mediaItemRef', JSON.stringify({
+                functionType: functionType
+              }));
+              formData.append('file', this._file, this._file.name);
+              _context3.next = 12;
+              return uploadMediaItem(this.config.baseUrl, this.config.jwt, formData);
+            case 12:
+              response = _context3.sent;
+              this._mediaItemRefId = response.ref._id;
+              this._mediaItemId = response._id;
+              this._itemRef = response.ref;
+              this._url = response.ref.url;
+            case 17:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function upload(_x2, _x3) {
+        return _upload.apply(this, arguments);
+      }
+      return upload;
+    }()
+  }]);
+}();
+
 function ownKeys$I(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$I(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$I(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$I(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper$j(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$j(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
@@ -13328,6 +13874,10 @@ function useFormData (_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     progressBarPercentage = _useState10[0],
     setProgressBarPercentage = _useState10[1];
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    removedMedias = _useState12[0],
+    setRemovedMedias = _useState12[1];
   var _useMemo = useMemo(function () {
       var c = {
         apiHandler: root.getApiHandler(id, apiInterface),
@@ -13340,56 +13890,57 @@ function useFormData (_ref) {
     }, [id]),
     apiHandler = _useMemo.apiHandler,
     configuration = _useMemo.configuration;
-  var onSaveFields = function onSaveFields(oldData, newData) {
-    var items = selectedItems !== null && selectedItems !== void 0 ? selectedItems : configuration.items;
+  useEffect(function () {
+    if (configuration.disableSave) setCanSave === null || setCanSave === void 0 || setCanSave(false);
+  }, [configuration]);
+  var _onLoadFields = function onLoadFields(data) {
+    var items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : selectedItems !== null && selectedItems !== void 0 ? selectedItems : configuration.items;
     var _iterator = _createForOfIteratorHelper$j(items),
       _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var item = _step.value;
-        if (item.onSave) {
-          newData = item === null || item === void 0 ? void 0 : item.onSave(oldData, newData);
-        }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-    return newData;
-  };
-  useEffect(function () {
-    if (!configuration.apiInterface) setCanSave === null || setCanSave === void 0 || setCanSave(false);
-    if (configuration.apiInterface) setCanSave === null || setCanSave === void 0 || setCanSave(true);
-  }, [configuration]);
-  var onLoadFields = function onLoadFields(data) {
-    var items = selectedItems !== null && selectedItems !== void 0 ? selectedItems : configuration.items;
-    if (Array.isArray(items[0])) items = configuration.items[0];
-    var _iterator2 = _createForOfIteratorHelper$j(items),
-      _step2;
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var item = _step2.value;
-        if (item.onLoad) {
-          data = item === null || item === void 0 ? void 0 : item.onLoad(data);
-        }
         if (item.defaultValue && getData(item.name, data) === undefined) {
           setFieldInObject(item.name, data, item.defaultValue);
         }
+        var itemName = typeof item.name == 'string' ? [item.name] : item.name;
+        if (item.type == 'media') {
+          var urlName = typeof item.urlField == 'string' ? [item.urlField] : item.urlField;
+          var ref = typeof item.mediaItemRefField == 'string' ? [item.mediaItemRefField] : item.mediaItemRefField;
+          var media = getData(itemName, data);
+          if (media) {
+            var mediaItem = new MediaItem(getData(urlName, data), {
+              baseUrl: root.configurationStore.apiConfig.mediaService,
+              jwt: root.dataStore.jwt
+            }, media, getData(ref, data));
+            mediaItem.init(item.allowedTypes);
+            setFieldInObject(itemName, data, mediaItem);
+          }
+        } else if (item.type == 'translation') {
+          _onLoadFields(data, item.items);
+        } else if (item.type == 'array') {
+          var arrayData = getData(item.name, data);
+          if (arrayData) {
+            for (var i = 0; i < arrayData.length; i++) {
+              _onLoadFields(arrayData[i], item.items);
+            }
+          }
+        }
+        if (item.onLoad) data = item === null || item === void 0 ? void 0 : item.onLoad(data);
       }
     } catch (err) {
-      _iterator2.e(err);
+      _iterator.e(err);
     } finally {
-      _iterator2.f();
+      _iterator.f();
     }
     return data;
   };
   var _useMemo2 = useMemo(function () {
-      var dt = inboundData;
+      var dt = cloneDeep(inboundData);
       var multipleEditingData = undefined;
-      if (Array.isArray(inboundData)) {
-        var _data = inboundData[0];
-        inboundData.forEach(function (dt) {
+      if (Array.isArray(dt)) {
+        var _data = dt[0];
+        dt.forEach(function (dt) {
           if (dt.state > _data.state) {
             _data = dt;
           }
@@ -13398,13 +13949,13 @@ function useFormData (_ref) {
         multipleEditingData = inboundData;
       }
       return {
-        loadedData: onLoadFields(_objectSpread$I({}, dt)),
+        loadedData: _onLoadFields(_objectSpread$I({}, dt)),
         multipleEditingData: multipleEditingData
       };
     }, [inboundData, selectedItemsIndex]),
     loadedData = _useMemo2.loadedData,
     multipleEditingData = _useMemo2.multipleEditingData;
-  var _useState11 = useState({
+  var _useState13 = useState({
       loading: false,
       data: loadedData,
       origData: JSON.parse(JSON.stringify(inboundData !== null && inboundData !== void 0 ? inboundData : {})),
@@ -13412,27 +13963,27 @@ function useFormData (_ref) {
       update: !!((_loadedData$_id = loadedData === null || loadedData === void 0 ? void 0 : loadedData._id) !== null && _loadedData$_id !== void 0 ? _loadedData$_id : loadedData === null || loadedData === void 0 ? void 0 : loadedData.ID),
       form: form
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    state = _useState12[0],
-    setState = _useState12[1];
+    _useState14 = _slicedToArray(_useState13, 2),
+    state = _useState14[0],
+    setState = _useState14[1];
   var selectedItemsInitValues = undefined;
   if (!Array.isArray(configuration.items[0])) {
     selectedItemsInitValues = configuration.items;
   } else if (configuration.itemSelector && configuration.itemSelectorDefautIndex !== undefined) {
     selectedItemsInitValues = filterItems(configuration.items[configuration.itemSelectorDefautIndex], userHasPermission);
   }
-  var _useState13 = useState(selectedItemsInitValues ? filterItems(selectedItemsInitValues, userHasPermission) : undefined),
-    _useState14 = _slicedToArray(_useState13, 2),
-    selectedItems = _useState14[0],
-    setSelectedItems = _useState14[1];
-  var _useState15 = useState(getHiddenRequredDisabled(loadedData, selectedItems !== null && selectedItems !== void 0 ? selectedItems : [])),
+  var _useState15 = useState(selectedItemsInitValues ? filterItems(selectedItemsInitValues, userHasPermission) : undefined),
     _useState16 = _slicedToArray(_useState15, 2),
-    hiddenRequiredDisabled = _useState16[0],
-    setHiddenRequiredDisabled = _useState16[1];
-  var _useState17 = useState({}),
+    selectedItems = _useState16[0],
+    setSelectedItems = _useState16[1];
+  var _useState17 = useState(getHiddenRequredDisabled(loadedData, selectedItems !== null && selectedItems !== void 0 ? selectedItems : [])),
     _useState18 = _slicedToArray(_useState17, 2),
-    fieldErrors = _useState18[0],
-    setFieldErrors = _useState18[1];
+    hiddenRequiredDisabled = _useState18[0],
+    setHiddenRequiredDisabled = _useState18[1];
+  var _useState19 = useState({}),
+    _useState20 = _slicedToArray(_useState19, 2),
+    fieldErrors = _useState20[0],
+    setFieldErrors = _useState20[1];
   useEffect(function () {
     var _loadedData$_id2;
     setState(_objectSpread$I(_objectSpread$I({}, state), {}, {
@@ -13544,21 +14095,23 @@ function useFormData (_ref) {
             return setDynamicFields(_objectSpread$I({}, state.data), newData);
           case 5:
             newData = _context2.sent;
-            newData = onSaveFields(_objectSpread$I({}, state.data), newData);
+            _context2.next = 8;
+            return preSaveProcess(newData, selectedItems !== null && selectedItems !== void 0 ? selectedItems : configuration.items);
+          case 8:
             newData = removeEmpty(newData);
             setState(_objectSpread$I(_objectSpread$I({}, state), {}, {
               loading: true
             }));
             finalData = state.data;
-            _context2.prev = 10;
-            _context2.next = 13;
+            _context2.prev = 11;
+            _context2.next = 14;
             return apiCall(newData);
-          case 13:
+          case 14:
             response = _context2.sent;
             i = 0;
-          case 15:
+          case 16:
             if (!(i < (((_configuration$additi = configuration.additionals) === null || _configuration$additi === void 0 ? void 0 : _configuration$additi.length) || 0))) {
-              _context2.next = 25;
+              _context2.next = 26;
               break;
             }
             // perform additional server actions before returning the data
@@ -13570,20 +14123,20 @@ function useFormData (_ref) {
             if (additional.addBaseUrl) {
               data[additional.addBaseUrl] = window.location.origin;
             }
-            _context2.next = 22;
+            _context2.next = 23;
             return additionalApi.create(data, additional.mapping, response);
-          case 22:
+          case 23:
             i++;
-            _context2.next = 15;
+            _context2.next = 16;
             break;
-          case 25:
+          case 26:
             finalData = response;
             return _context2.abrupt("return", response);
-          case 29:
-            _context2.prev = 29;
-            _context2.t0 = _context2["catch"](10);
+          case 30:
+            _context2.prev = 30;
+            _context2.t0 = _context2["catch"](11);
             if (!(_context2.t0 instanceof DivaError && _context2.t0.name)) {
-              _context2.next = 37;
+              _context2.next = 38;
               break;
             }
             errorCode = _context2.t0.name;
@@ -13592,25 +14145,25 @@ function useFormData (_ref) {
               return (_item$onError = item.onError) === null || _item$onError === void 0 ? void 0 : _item$onError[errorCode];
             });
             if (!item) {
-              _context2.next = 37;
+              _context2.next = 38;
               break;
             }
             setFieldErrors(_objectSpread$I(_objectSpread$I({}, fieldErrors), {}, _defineProperty({}, item.name.toString(), item.onError[errorCode])));
             return _context2.abrupt("return", undefined);
-          case 37:
-            throw _context2.t0;
           case 38:
-            _context2.prev = 38;
+            throw _context2.t0;
+          case 39:
+            _context2.prev = 39;
             setState(_objectSpread$I(_objectSpread$I({}, state), {}, {
               data: finalData,
               loading: false
             }));
-            return _context2.finish(38);
-          case 41:
+            return _context2.finish(39);
+          case 42:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[10, 29, 38, 41]]);
+      }, _callee2, null, [[11, 30, 39, 42]]);
     }));
     return function onSave(_x2) {
       return _ref3.apply(this, arguments);
@@ -13644,7 +14197,7 @@ function useFormData (_ref) {
     }
   };
   var onInputChanged = function onInputChanged(id, value, d) {
-    var data = d !== null && d !== void 0 ? d : merge$1(_objectSpread$I({}, state.data), state.form.getFieldsValue());
+    var data = d !== null && d !== void 0 ? d : mergeWith(_objectSpread$I({}, state.data), state.form.getFieldsValue(), mergeCustomizer);
     if (id) {
       setFieldInObject(id, data, value);
       var newFieldErrors = _objectSpread$I({}, fieldErrors);
@@ -13656,6 +14209,12 @@ function useFormData (_ref) {
     }));
     return data;
   };
+
+  //if at an array an entry got added or deleted, its handeled by and so we take the data from the formdata
+  var mergeCustomizer = function mergeCustomizer(obj, src) {
+    if (Array.isArray(obj) && obj.length != src.length) return src;
+    return undefined;
+  };
   var setNewData = function setNewData(newData, orig) {
     if (usedPreset.used === true) {
       var usdPreset = presets.data[usedPreset.index];
@@ -13700,31 +14259,159 @@ function useFormData (_ref) {
             data: _objectSpread$I(_objectSpread$I({}, state.data), {}, _defineProperty({}, name, val))
           }));
         }
-        setSelectedItemsIndex(idx);
-      }
-    });
-  };
-  useEffect(function () {
-    if (!Array.isArray(configuration.items[0])) return;
-    setSelectedItems(filterItems(configuration.items[selectedItemsIndex], userHasPermission));
-  }, [selectedItemsIndex]);
-  useEffect(function () {
-    updateHiddenRequiredDisabled(state.data);
-  }, [selectedItems]);
-  function setDynamicFields(_x3, _x4) {
+        setSelectedItemsIndex(idx);
+      }
+    });
+  };
+  useEffect(function () {
+    if (!Array.isArray(configuration.items[0])) return;
+    setSelectedItems(filterItems(configuration.items[selectedItemsIndex], userHasPermission));
+  }, [selectedItemsIndex]);
+  useEffect(function () {
+    updateHiddenRequiredDisabled(state.data);
+  }, [selectedItems]);
+  function preSaveProcess(_x3, _x4) {
+    return _preSaveProcess.apply(this, arguments);
+  }
+  function _preSaveProcess() {
+    _preSaveProcess = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(data, items) {
+      var _iterator3, _step3, item, itemName, media, mediaItemRefIdPath, urlPath, arrayData, i, _iterator4, _step4, _media;
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _iterator3 = _createForOfIteratorHelper$j(items);
+            _context4.prev = 1;
+            _iterator3.s();
+          case 3:
+            if ((_step3 = _iterator3.n()).done) {
+              _context4.next = 37;
+              break;
+            }
+            item = _step3.value;
+            itemName = typeof item.name == 'string' ? [item.name] : item.name;
+            if (item !== null && item !== void 0 && item.onSave) {
+              data = item.onSave(data);
+            }
+            if (!(item.type == 'media')) {
+              _context4.next = 19;
+              break;
+            }
+            media = getData(itemName, data);
+            if (!(media instanceof MediaItem)) {
+              _context4.next = 17;
+              break;
+            }
+            _context4.next = 12;
+            return media.upload(root.dataStore.organizationId, item.functionType);
+          case 12:
+            mediaItemRefIdPath = item.mediaItemRefField ? itemName.slice(0, -1).concat(item.mediaItemRefField) : undefined;
+            urlPath = item.urlField ? itemName.slice(0, -1).concat(item.urlField) : undefined;
+            setFieldInObject(itemName, data, media.itemId);
+            if (urlPath) {
+              setFieldInObject(urlPath, data, media.url);
+            }
+            if (mediaItemRefIdPath) {
+              setFieldInObject(mediaItemRefIdPath, data, media.itemRefId);
+            }
+          case 17:
+            _context4.next = 35;
+            break;
+          case 19:
+            if (!(item.type == 'translation')) {
+              _context4.next = 24;
+              break;
+            }
+            _context4.next = 22;
+            return preSaveProcess(data, item.items);
+          case 22:
+            _context4.next = 35;
+            break;
+          case 24:
+            if (!(item.type == 'array')) {
+              _context4.next = 35;
+              break;
+            }
+            arrayData = getData(item.name, data);
+            if (!arrayData) {
+              _context4.next = 34;
+              break;
+            }
+            i = 0;
+          case 28:
+            if (!(i < arrayData.length)) {
+              _context4.next = 34;
+              break;
+            }
+            _context4.next = 31;
+            return preSaveProcess(arrayData[i], item.items);
+          case 31:
+            i++;
+            _context4.next = 28;
+            break;
+          case 34:
+            setFieldInObject(item.name, data, arrayData);
+          case 35:
+            _context4.next = 3;
+            break;
+          case 37:
+            _context4.next = 42;
+            break;
+          case 39:
+            _context4.prev = 39;
+            _context4.t0 = _context4["catch"](1);
+            _iterator3.e(_context4.t0);
+          case 42:
+            _context4.prev = 42;
+            _iterator3.f();
+            return _context4.finish(42);
+          case 45:
+            _iterator4 = _createForOfIteratorHelper$j(removedMedias);
+            _context4.prev = 46;
+            _iterator4.s();
+          case 48:
+            if ((_step4 = _iterator4.n()).done) {
+              _context4.next = 54;
+              break;
+            }
+            _media = _step4.value;
+            _context4.next = 52;
+            return _media["delete"]();
+          case 52:
+            _context4.next = 48;
+            break;
+          case 54:
+            _context4.next = 59;
+            break;
+          case 56:
+            _context4.prev = 56;
+            _context4.t1 = _context4["catch"](46);
+            _iterator4.e(_context4.t1);
+          case 59:
+            _context4.prev = 59;
+            _iterator4.f();
+            return _context4.finish(59);
+          case 62:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[1, 39, 42, 45], [46, 56, 59, 62]]);
+    }));
+    return _preSaveProcess.apply(this, arguments);
+  }
+  function setDynamicFields(_x5, _x6) {
     return _setDynamicFields.apply(this, arguments);
   }
   function _setDynamicFields() {
-    _setDynamicFields = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(oldData, newData) {
-      var items, getDynamicValue, _getDynamicValue, _iterator3, _step3, item, oldDynamicValue, newDynamicValue;
-      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
+    _setDynamicFields = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(oldData, newData) {
+      var items, getDynamicValue, _getDynamicValue, _iterator5, _step5, item, oldDynamicValue, newDynamicValue;
+      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
             _getDynamicValue = function _getDynamicValue3() {
-              _getDynamicValue = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(dynamic, data) {
+              _getDynamicValue = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(dynamic, data) {
                 var val, scene, accessorie, room;
-                return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                  while (1) switch (_context3.prev = _context3.next) {
+                return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+                  while (1) switch (_context5.prev = _context5.next) {
                     case 0:
                       val = dynamic.fields.map(function (field) {
                         return data[field];
@@ -13734,13 +14421,13 @@ function useFormData (_ref) {
                       scene = data['renderScene'];
                       accessorie = data['alternativeRendering'];
                       if (!scene) {
-                        _context3.next = 8;
+                        _context5.next = 8;
                         break;
                       }
-                      _context3.next = 6;
+                      _context5.next = 6;
                       return mediaHandler.getRooms(scene);
                     case 6:
-                      room = _context3.sent[0];
+                      room = _context5.sent[0];
                       if (room) {
                         val += '_MOOD';
                       }
@@ -13748,66 +14435,66 @@ function useFormData (_ref) {
                       if (accessorie) {
                         val += '_MODIF';
                       }
-                      return _context3.abrupt("return", val);
+                      return _context5.abrupt("return", val);
                     case 10:
                     case "end":
-                      return _context3.stop();
+                      return _context5.stop();
                   }
-                }, _callee3);
+                }, _callee5);
               }));
               return _getDynamicValue.apply(this, arguments);
             };
-            getDynamicValue = function _getDynamicValue2(_x5, _x6) {
+            getDynamicValue = function _getDynamicValue2(_x9, _x10) {
               return _getDynamicValue.apply(this, arguments);
             };
             items = selectedItems !== null && selectedItems !== void 0 ? selectedItems : configuration.items;
-            _iterator3 = _createForOfIteratorHelper$j(items);
-            _context4.prev = 4;
-            _iterator3.s();
+            _iterator5 = _createForOfIteratorHelper$j(items);
+            _context6.prev = 4;
+            _iterator5.s();
           case 6:
-            if ((_step3 = _iterator3.n()).done) {
-              _context4.next = 19;
+            if ((_step5 = _iterator5.n()).done) {
+              _context6.next = 19;
               break;
             }
-            item = _step3.value;
+            item = _step5.value;
             if (!(item.dynamic && typeof item.name == 'string')) {
-              _context4.next = 17;
+              _context6.next = 17;
               break;
             }
-            _context4.next = 11;
+            _context6.next = 11;
             return getDynamicValue(item.dynamic, oldData);
           case 11:
-            oldDynamicValue = _context4.sent;
+            oldDynamicValue = _context6.sent;
             if (!(oldData[item.name] == oldDynamicValue && newData[item.name] == oldData[item.name])) {
-              _context4.next = 17;
+              _context6.next = 17;
               break;
             }
-            _context4.next = 15;
+            _context6.next = 15;
             return getDynamicValue(item.dynamic, newData);
           case 15:
-            newDynamicValue = _context4.sent;
+            newDynamicValue = _context6.sent;
             newData[item.name] = newDynamicValue;
           case 17:
-            _context4.next = 6;
+            _context6.next = 6;
             break;
           case 19:
-            _context4.next = 24;
+            _context6.next = 24;
             break;
           case 21:
-            _context4.prev = 21;
-            _context4.t0 = _context4["catch"](4);
-            _iterator3.e(_context4.t0);
+            _context6.prev = 21;
+            _context6.t0 = _context6["catch"](4);
+            _iterator5.e(_context6.t0);
           case 24:
-            _context4.prev = 24;
-            _iterator3.f();
-            return _context4.finish(24);
+            _context6.prev = 24;
+            _iterator5.f();
+            return _context6.finish(24);
           case 27:
-            return _context4.abrupt("return", newData);
+            return _context6.abrupt("return", newData);
           case 28:
           case "end":
-            return _context4.stop();
+            return _context6.stop();
         }
-      }, _callee4, null, [[4, 21, 24, 27]]);
+      }, _callee6, null, [[4, 21, 24, 27]]);
     }));
     return _setDynamicFields.apply(this, arguments);
   }
@@ -13833,10 +14520,11 @@ function useFormData (_ref) {
     }
     return rules;
   }
-  var getIsHidden = function getIsHidden(item, data) {
-    var _data4, _state$hiddenRequired;
+  var getIsHidden = function getIsHidden(item, data, absolutName) {
+    var _state$hiddenRequired;
     var hidden = !!item.hidden;
-    if (item.hidden && data) if (typeof item.hidden === 'function') if ((_data4 = data[item.name]) !== null && _data4 !== void 0 && _data4[item.name[0]]) hidden = item.hidden(data[item.name][item.name[0]]);else hidden = false;
+    if (absolutName) data = getData(absolutName, data);
+    if (typeof item.hidden === 'function') hidden = item.hidden(data);
     if (!hidden) hidden = (_state$hiddenRequired = state.hiddenRequiredDisabled) === null || _state$hiddenRequired === void 0 || (_state$hiddenRequired = _state$hiddenRequired[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired === void 0 ? void 0 : _state$hiddenRequired.hidden;
     return hidden;
   };
@@ -13864,6 +14552,92 @@ function useFormData (_ref) {
     }
     return;
   }, [state.data]);
+  var _keepRemovedMeidaItem = /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(data, items) {
+      var _iterator2, _step2, item, itemName, media, arrayData, i;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _iterator2 = _createForOfIteratorHelper$j(items);
+            _context3.prev = 1;
+            _iterator2.s();
+          case 3:
+            if ((_step2 = _iterator2.n()).done) {
+              _context3.next = 28;
+              break;
+            }
+            item = _step2.value;
+            itemName = typeof item.name == 'string' ? [item.name] : item.name;
+            if (!(item.type == 'media')) {
+              _context3.next = 11;
+              break;
+            }
+            media = getData(itemName, data);
+            if (media) pushRemovedMeidaItem(media);
+            _context3.next = 26;
+            break;
+          case 11:
+            if (!(item.type == 'translation')) {
+              _context3.next = 16;
+              break;
+            }
+            _context3.next = 14;
+            return _keepRemovedMeidaItem(data, item.items);
+          case 14:
+            _context3.next = 26;
+            break;
+          case 16:
+            if (!(item.type == 'array')) {
+              _context3.next = 26;
+              break;
+            }
+            arrayData = getData(item.name, data);
+            if (!arrayData) {
+              _context3.next = 26;
+              break;
+            }
+            i = 0;
+          case 20:
+            if (!(i < arrayData.length)) {
+              _context3.next = 26;
+              break;
+            }
+            _context3.next = 23;
+            return _keepRemovedMeidaItem(arrayData[i], item.items);
+          case 23:
+            i++;
+            _context3.next = 20;
+            break;
+          case 26:
+            _context3.next = 3;
+            break;
+          case 28:
+            _context3.next = 33;
+            break;
+          case 30:
+            _context3.prev = 30;
+            _context3.t0 = _context3["catch"](1);
+            _iterator2.e(_context3.t0);
+          case 33:
+            _context3.prev = 33;
+            _iterator2.f();
+            return _context3.finish(33);
+          case 36:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[1, 30, 33, 36]]);
+    }));
+    return function keepRemovedMeidaItem(_x7, _x8) {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+  var pushRemovedMeidaItem = function pushRemovedMeidaItem(media) {
+    if (removedMedias.find(function (m) {
+      return m.itemRefId === media.itemRefId;
+    })) return;
+    setRemovedMedias([].concat(_toConsumableArray(removedMedias), [media]));
+  };
   return _objectSpread$I(_objectSpread$I({}, state), {}, {
     getIsHidden: getIsHidden,
     setUsedPreset: setUsedPreset,
@@ -13886,7 +14660,9 @@ function useFormData (_ref) {
     updateHiddenRequiredDisabled: updateHiddenRequiredDisabled,
     getRules: getRules,
     progressBarOpen: progressBarOpen,
-    progressBarPercentage: progressBarPercentage
+    progressBarPercentage: progressBarPercentage,
+    keepRemovedMeidaItem: _keepRemovedMeidaItem,
+    pushRemovedMeidaItem: pushRemovedMeidaItem
   });
 }
 function setFieldInObject(id, data, value) {
@@ -13978,6 +14754,7 @@ var JsonEditor$2 = function JsonEditor(_ref) {
   });
 };
 
+var _excluded$3 = ["key", "name"];
 function ownKeys$H(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FormList$2 = function FormList(_ref) {
@@ -13985,51 +14762,56 @@ var FormList$2 = function FormList(_ref) {
   var value = _ref.value,
     item = _ref.item,
     state = _ref.state,
-    data = _ref.data,
     setCanSave = _ref.setCanSave,
     onError = _ref.onError,
     form = _ref.form,
     root = _ref.root,
-    postFixName = _ref.postFixName;
+    postFixName = _ref.postFixName,
+    absoluteName = _ref.absoluteName;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var remove = function remove(index, r) {
+    var _state$getData;
+    var data = (_state$getData = state.getData(absoluteName, state.data)) === null || _state$getData === void 0 ? void 0 : _state$getData[index];
+    state.keepRemovedMeidaItem(data, item.items);
     r(index);
-    var array = state.getData(item.name, state.data);
-    if (array) {
-      array.splice(index, 1);
-      state.onInputChanged(Array.isArray(item.name) ? item.name : _toConsumableArray(item.name), array);
-    }
+    state.onInputChanged();
   };
   var add = function add(a) {
     a();
   };
   return /*#__PURE__*/jsx(Form$1.List, {
-    name: item.name,
+    name: absoluteName,
     initialValue: (_item$initialValue = item.initialValue) !== null && _item$initialValue !== void 0 ? _item$initialValue : value,
     children: function children(fields, _ref2) {
       var a = _ref2.add,
         r = _ref2.remove;
       return /*#__PURE__*/jsxs(Fragment, {
-        children: [fields.map(function (field, idx) {
+        children: [fields.map(function (_ref3) {
+          var key = _ref3.key,
+            name = _ref3.name,
+            restField = _objectWithoutProperties(_ref3, _excluded$3);
           return /*#__PURE__*/jsxs("div", {
-            id: field.key.toString(),
+            id: key.toString(),
             style: {
               display: 'flex'
             },
             children: [!item.disablePushOrPop && /*#__PURE__*/jsx(MinusCircleOutlined, {
               onClick: function onClick() {
-                return remove(field.name, r);
+                remove(name, r);
               }
             }), /*#__PURE__*/jsx("div", {
               style: {
                 flexGrow: 1
               },
               children: item.items.map(function (i, idx) {
-                var n = [field.name].concat(_toConsumableArray(Array.isArray(i.name) ? i.name : [i.name]), _toConsumableArray(i.doTranslate && postFixName ? Array.isArray(postFixName) ? postFixName : [postFixName] : []));
-                var hidden = state.getIsHidden(i, data);
-                return /*#__PURE__*/jsx(Form$1.Item, {
-                  id: idx.toString(),
+                var n = [name].concat(_toConsumableArray(Array.isArray(i.name) ? i.name : [i.name]), _toConsumableArray(i.doTranslate && postFixName ? Array.isArray(postFixName) ? postFixName : [postFixName] : []));
+                var aName = [].concat(_toConsumableArray(Array.isArray(absoluteName) ? absoluteName : [absoluteName]), _toConsumableArray(n));
+                var hidden = state.getIsHidden(i, state.data, [].concat(_toConsumableArray(Array.isArray(absoluteName) ? absoluteName : [absoluteName]), [name]));
+                if (hidden) return /*#__PURE__*/jsx(Fragment, {});
+                return /*#__PURE__*/createElement(Form$1.Item, _objectSpread$H(_objectSpread$H({}, restField), {}, {
+                  id: n.join(),
+                  key: n.join(),
                   name: n,
                   rules: state.getRules(i, state.data),
                   label: getLabel(i, t),
@@ -14038,14 +14820,13 @@ var FormList$2 = function FormList(_ref) {
                   hasFeedback: !!state.fieldErrors[n.toString()],
                   validateStatus: !!state.fieldErrors[n.toString()] ? 'error' : undefined,
                   help: state.fieldErrors[n.toString()],
-                  hidden: hidden,
-                  children: getElement(_objectSpread$H(_objectSpread$H({}, i), {}, {
-                    name: n
-                  }), state.data, setCanSave, state, state.onInputChanged, onError, root, form, hidden)
-                }, idx);
+                  hidden: hidden
+                }), getElement(_objectSpread$H(_objectSpread$H({}, i), {}, {
+                  name: n
+                }), setCanSave, state, aName, state.onInputChanged, onError, root, form, hidden));
               })
             })]
-          }, field.key);
+          }, key);
         }), !item.disablePushOrPop && /*#__PURE__*/jsx(Form$1.Item, {
           children: /*#__PURE__*/jsx(Button, {
             type: "dashed",
@@ -16244,7 +17025,8 @@ var Translation = function Translation(_ref) {
     setCanSave = _ref.setCanSave,
     onError = _ref.onError,
     form = _ref.form,
-    root = _ref.root;
+    root = _ref.root,
+    absoluteName = _ref.absoluteName;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useTranslationHook = useTranslationHook(item, state),
@@ -16281,13 +17063,13 @@ var Translation = function Translation(_ref) {
       },
       children: item.items.map(function (i, idx) {
         var n = [].concat(_toConsumableArray(Array.isArray(i.name) ? i.name : [i.name]), _toConsumableArray(i.doTranslate ? [currentLang] : []));
+        var key = typeof n == 'string' ? n : n.join('.');
         var hidden = state.getIsHidden(i, data);
-        return /*#__PURE__*/jsx(Fragment, {
-          children: ['subTitle', 'array'].includes(i.type) ? /*#__PURE__*/jsx(Fragment, {
-            children: getElement(_objectSpread$B(_objectSpread$B({}, i), {}, {
-              name: n
-            }), state.data, setCanSave, state, state.onInputChanged, onError, root, form, hidden, currentLang)
-          }) : /*#__PURE__*/jsx(Form$1.Item, {
+        var newAbsoluteName = absoluteName !== '' ? [].concat(_toConsumableArray(Array.isArray(absoluteName) ? absoluteName : [absoluteName]), _toConsumableArray(n)) : n;
+        return /*#__PURE__*/jsx(React.Fragment, {
+          children: ['subTitle', 'array'].includes(i.type) ? getElement(_objectSpread$B(_objectSpread$B({}, i), {}, {
+            name: n
+          }), setCanSave, state, newAbsoluteName, state.onInputChanged, onError, root, form, hidden, currentLang) : /*#__PURE__*/jsx(Form$1.Item, {
             id: idx.toString(),
             name: n,
             rules: state.getRules(i, state.data),
@@ -16300,9 +17082,9 @@ var Translation = function Translation(_ref) {
             hidden: hidden,
             children: getElement(_objectSpread$B(_objectSpread$B({}, i), {}, {
               name: n
-            }), state.data, setCanSave, state, state.onInputChanged, onError, root, form, hidden)
-          }, idx)
-        });
+            }), setCanSave, state, newAbsoluteName, state.onInputChanged, onError, root, form, hidden)
+          })
+        }, key);
       })
     })]
   });
@@ -16311,16 +17093,266 @@ var Translation$1 = observer(Translation, {
   forwardRef: true
 });
 
+function FileFromWeb (_ref) {
+  var _onEnter = _ref.onEnter;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    uploadFromWeb = _useState2[0],
+    setUploadFromWeb = _useState2[1];
+  if (uploadFromWeb) {
+    return /*#__PURE__*/jsx(FileInput, {
+      onEnter: function onEnter(f) {
+        _onEnter(f);
+        setUploadFromWeb(false);
+      },
+      onAbort: function onAbort() {
+        return setUploadFromWeb(false);
+      }
+    });
+  }
+  return /*#__PURE__*/jsx(Teaser, {
+    onClick: function onClick() {
+      return setUploadFromWeb(true);
+    }
+  });
+}
+function Teaser(_ref2) {
+  var _onClick = _ref2.onClick;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx(Button, {
+    type: "link",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      _onClick();
+    },
+    children: t('backoffice.mediaupload.alternative_url')
+  });
+}
+function FileInput(_ref3) {
+  var onEnter = _ref3.onEnter,
+    onAbort = _ref3.onAbort;
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  return /*#__PURE__*/jsxs(Space, {
+    direction: "horizontal",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    children: [/*#__PURE__*/jsxs(Space.Compact, {
+      children: [/*#__PURE__*/jsx(Input, {
+        onChange: function onChange(e) {
+          return setValue(e.target.value);
+        },
+        onPressEnter: function onPressEnter(e) {
+          e.stopPropagation();
+          value ? onEnter(value) : undefined;
+        },
+        allowClear: true
+      }), /*#__PURE__*/jsx(Button, {
+        onClick: function onClick() {
+          onEnter(value);
+        },
+        disabled: !value,
+        children: "\xDCbernehmen"
+      })]
+    }), /*#__PURE__*/jsx(Button, {
+      type: "link",
+      onClick: onAbort,
+      children: "Abbrechen"
+    })]
+  });
+}
+
+function Upload (_ref) {
+  var allowedTypes = _ref.allowedTypes,
+    media = _ref.media,
+    onRemove = _ref.onRemove,
+    onAdd = _ref.onAdd,
+    onError = _ref.onError,
+    config = _ref.config;
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    files = _React$useState2[0],
+    setFiles = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    loading = _React$useState4[0],
+    setLoading = _React$useState4[1];
+  var fileList = useMemo(function () {
+    return files.map(function (f) {
+      return f.antdFile;
+    });
+  }, [files]);
+  useEffect(function () {
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (media !== null && media !== void 0 && media.url) {
+              _context.next = 4;
+              break;
+            }
+            setFiles([]);
+            _context.next = 17;
+            break;
+          case 4:
+            setLoading(true);
+            _context.prev = 5;
+            _context.next = 8;
+            return media.init(allowedTypes);
+          case 8:
+            setFiles([media]);
+            _context.next = 14;
+            break;
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](5);
+            onError === null || onError === void 0 || onError(_context.t0);
+          case 14:
+            _context.prev = 14;
+            setLoading(false);
+            return _context.finish(14);
+          case 17:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[5, 11, 14, 17]]);
+    }))();
+  }, [media === null || media === void 0 ? void 0 : media.url]);
+  var addMediaItem = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(media) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            setLoading(true);
+            _context2.prev = 1;
+            _context2.next = 4;
+            return media.init(allowedTypes);
+          case 4:
+            setFiles([media]);
+            onAdd === null || onAdd === void 0 || onAdd(media);
+            _context2.next = 11;
+            break;
+          case 8:
+            _context2.prev = 8;
+            _context2.t0 = _context2["catch"](1);
+            onError === null || onError === void 0 || onError(_context2.t0);
+          case 11:
+            _context2.prev = 11;
+            setLoading(false);
+            return _context2.finish(11);
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[1, 8, 11, 14]]);
+    }));
+    return function addMediaItem(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var onRemoveMedia = function onRemoveMedia() {
+    var media = files[0];
+    if (media) {
+      onRemove === null || onRemove === void 0 || onRemove(media);
+      setFiles([]);
+    }
+  };
+  var beforeUpload = function beforeUpload(file) {
+    var mediaItem = new MediaItem(file, config);
+    addMediaItem(mediaItem);
+    return Upload$1.LIST_IGNORE;
+  };
+  var onFileFormWeb = function onFileFormWeb(url) {
+    var mediaItem = new MediaItem(url, config);
+    addMediaItem(mediaItem);
+  };
+  return /*#__PURE__*/jsx(Upload$1, {
+    listType: "picture",
+    maxCount: 1,
+    fileList: fileList,
+    beforeUpload: beforeUpload,
+    onRemove: onRemoveMedia,
+    accept: allowedTypes === null || allowedTypes === void 0 ? void 0 : allowedTypes.join(','),
+    children: /*#__PURE__*/jsxs(Space$1, {
+      direction: "horizontal",
+      children: [/*#__PURE__*/jsx(Button$1, {
+        type: "primary",
+        icon: /*#__PURE__*/jsx(UploadOutlined, {}),
+        loading: loading,
+        children: "Upload"
+      }), /*#__PURE__*/jsx(FileFromWeb, {
+        onEnter: onFileFormWeb
+      })]
+    })
+  });
+}
+
+function Media (_ref) {
+  var item = _ref.item,
+    value = _ref.value,
+    state = _ref.state,
+    absoluteName = _ref.absoluteName;
+  var mediaItemRefIdPath = item.mediaItemRefField ? absoluteName.slice(0, -1).concat(item.mediaItemRefField) : undefined;
+  var urlPath = item.urlField ? absoluteName.slice(0, -1).concat(item.urlField) : undefined;
+  var mediaItemRefId = mediaItemRefIdPath ? state.getData(mediaItemRefIdPath, state.data) : undefined;
+  var url = urlPath ? state.getData(urlPath, state.data) : undefined;
+  var _React$useState = React.useState(value ? new MediaItem(url, {
+      baseUrl: state.root.configurationStore.apiConfig.mediaService,
+      jwt: state.root.dataStore.jwt
+    }, value, mediaItemRefId) : undefined),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    media = _React$useState2[0],
+    setMedia = _React$useState2[1];
+  var onAdd = function onAdd(media) {
+    setMedia(media);
+    var newData = state.onInputChanged(absoluteName, media);
+    if (item.urlField) {
+      newData = state.onInputChanged(urlPath, media.url, newData);
+    }
+    if (item.mediaItemRefField) {
+      state.onInputChanged(mediaItemRefIdPath, media.itemRefId, newData);
+    }
+  };
+  var onRemove = function onRemove(media) {
+    setMedia(undefined);
+    var newData = state.onInputChanged(absoluteName, undefined);
+    if (item.urlField) {
+      newData = state.onInputChanged(urlPath, undefined, newData);
+    }
+    if (item.mediaItemRefField) {
+      state.onInputChanged(mediaItemRefIdPath, undefined, newData);
+    }
+    if (media) state.pushRemovedMeidaItem(media);
+  };
+  var onError = function onError(e) {
+    onRemove();
+  };
+  return /*#__PURE__*/jsx(Upload, {
+    allowedTypes: item.allowedTypes,
+    media: media,
+    onAdd: onAdd,
+    onRemove: onRemove,
+    onError: onError,
+    config: {
+      baseUrl: state.root.configurationStore.apiConfig.mediaService,
+      jwt: state.root.dataStore.jwt
+    }
+  });
+}
+
 function _createForOfIteratorHelper$g(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$g(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$g(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$g(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$g(r, a) : void 0; } }
 function _arrayLikeToArray$g(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys$A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function getElement(item, data, setCanSave, state, _onChange, _onError, root, form, hidden, postFixName) {
+function getElement(item, setCanSave, state, absoluteName, _onChange, _onError, root, form, hidden, postFixName) {
   var _isReadonly, _state$hiddenRequired;
   if (hidden) return /*#__PURE__*/jsx(Fragment, {});
-  var name = item.name;
-  var disabled = (_isReadonly = isReadonly(item, data)) !== null && _isReadonly !== void 0 ? _isReadonly : (_state$hiddenRequired = state.hiddenRequiredDisabled[typeof name == 'string' ? name : name.join('.')]) === null || _state$hiddenRequired === void 0 ? void 0 : _state$hiddenRequired.disabled;
+  var disabled = (_isReadonly = isReadonly(item, state.data)) !== null && _isReadonly !== void 0 ? _isReadonly : (_state$hiddenRequired = state.hiddenRequiredDisabled[typeof absoluteName == 'string' ? absoluteName : absoluteName.join('.')]) === null || _state$hiddenRequired === void 0 ? void 0 : _state$hiddenRequired.disabled;
   switch (item.type) {
     case 'select':
       return /*#__PURE__*/jsx(Select, {
@@ -16340,7 +17372,7 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
         wholeData: state.data,
         disabledConfig: item === null || item === void 0 ? void 0 : item['disabledSelection'],
         onChange: function onChange(value) {
-          _onChange(name, item.valueField ? value[item.valueField] : value);
+          _onChange(absoluteName, item.valueField ? value[item.valueField] : value);
         },
         allowClear: item.allowClear,
         placeholder: item.placeholder,
@@ -16352,7 +17384,7 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
       return /*#__PURE__*/jsx(SimpleSelect, _objectSpread$A(_objectSpread$A({}, item), {}, {
         disabled: disabled,
         onChange: function onChange(value) {
-          _onChange(name, value);
+          _onChange(absoluteName, value);
         }
       }));
     case 'textarea':
@@ -16365,7 +17397,7 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
         defaultValue: item.value,
         placeholder: item.placeholder,
         onChange: function onChange(e) {
-          return _onChange === null || _onChange === void 0 ? void 0 : _onChange(name, e.target.value);
+          return _onChange === null || _onChange === void 0 ? void 0 : _onChange(absoluteName, e.target.value);
         }
       });
     case 'input':
@@ -16374,7 +17406,7 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
       if (item.syncDataWithUserInput) {
         return /*#__PURE__*/jsx(InputComponent$1, {
           item: item,
-          data: data,
+          data: state.data,
           value: item.value,
           onChange: state.onInputChanged
         });
@@ -16403,8 +17435,8 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
           var _root$detailStore$ope, _root$detailStore;
           return root === null || root === void 0 || (_root$detailStore$ope = (_root$detailStore = root.detailStore).openLeftDetail) === null || _root$detailStore$ope === void 0 ? void 0 : _root$detailStore$ope.call(_root$detailStore, {
             configurationId: item.action.id,
-            data: data,
-            mappingData: data,
+            data: state.data,
+            mappingData: state.data,
             callback: function callback(data) {
               if (!item.callbackMapping) return;
               var _iterator = _createForOfIteratorHelper$g(item.callbackMapping),
@@ -16436,8 +17468,8 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
       });
     case 'richText':
       return /*#__PURE__*/jsx(RichTextEditor, {
-        initValue: state.getData(name, data),
-        name: name,
+        initValue: state.getData(absoluteName, state.data),
+        name: absoluteName,
         onChange: _onChange
       });
     case 'number':
@@ -16455,7 +17487,7 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
           if (value && cbItem !== null && cbItem !== void 0 && cbItem.valueOnEnabled) {
             value = root === null || root === void 0 ? void 0 : root.getGlobalValue(cbItem.valueOnEnabled.globalValue);
           }
-          _onChange(name, value);
+          _onChange(absoluteName, value);
         }
       });
     case 'display':
@@ -16465,28 +17497,29 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
     case 'array':
       return /*#__PURE__*/jsx(FormList$3, {
         item: item,
-        data: data,
         state: state,
         onError: _onError,
         root: root,
         setCanSave: setCanSave,
         form: form,
-        postFixName: postFixName
+        postFixName: postFixName,
+        absoluteName: absoluteName
       });
     case 'translation':
       return /*#__PURE__*/jsx(Translation$1, {
         item: item,
-        data: data,
+        data: state.data,
         state: state,
         onError: _onError,
         root: root,
         setCanSave: setCanSave,
-        form: form
+        form: form,
+        absoluteName: absoluteName
       });
     case 'object':
       return /*#__PURE__*/jsx(JsonEditor$2, {
         setCanSave: setCanSave,
-        data: data,
+        data: state.data,
         height: item.height,
         savable: true
       });
@@ -16497,7 +17530,7 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
     case 'subTitle':
       return /*#__PURE__*/jsx(SubTitle$1, {
         item: item,
-        data: data
+        data: state.data
       });
     case 'apiKey':
       return /*#__PURE__*/jsx(ApiKey, {
@@ -16516,16 +17549,16 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
             if (item.accountName) {
               var newData = state.onInputChanged(item.accountName, supplier === null || supplier === void 0 ? void 0 : supplier._id);
               if (!supplier) {
-                newData = state.onInputChanged(name, undefined, newData);
+                newData = state.onInputChanged(absoluteName, undefined, newData);
                 if (item.catalogCodex) state.onInputChanged(item.catalogCodex, undefined, newData);
               }
             }
           },
-          initAccountId: item.accountName ? state.getData(item.accountName, data) : undefined,
-          initCatalogId: state.getData(name, data),
-          currentOrganizationId: data._id,
+          initAccountId: item.accountName ? state.getData(item.accountName, state.data) : undefined,
+          initCatalogId: state.getData(absoluteName, state.data),
+          currentOrganizationId: state.data._id,
           onSelectedCatalog: function onSelectedCatalog(catalogItem) {
-            var newData = state.onInputChanged(name, catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem._id);
+            var newData = state.onInputChanged(absoluteName, catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem._id);
             if (item.catalogCodex) state.onInputChanged(item.catalogCodex, catalogItem === null || catalogItem === void 0 ? void 0 : catalogItem.codex, newData);
           },
           onError: function onError(text) {
@@ -16540,21 +17573,20 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
         options: item.options.map(function (o) {
           var _o$disabled;
           return _objectSpread$A(_objectSpread$A({}, o), {}, {
-            disabled: (_o$disabled = o.disabled) === null || _o$disabled === void 0 ? void 0 : _o$disabled.call(o, data)
+            disabled: (_o$disabled = o.disabled) === null || _o$disabled === void 0 ? void 0 : _o$disabled.call(o, state.data)
           });
         }),
         buttonStyle: item.buttonStyle,
         optionType: item.optionType,
-        defaultValue: item.defaultValue,
         onChange: function onChange(_ref) {
           var value = _ref.target.value;
-          _onChange(name, value);
+          _onChange(absoluteName, value);
         }
       });
     case 'button':
       return /*#__PURE__*/jsx(CustomButton$1, {
         id: item.buttonId,
-        data: data,
+        data: state.data,
         useActionResult: {
           styles: true,
           message: true
@@ -16564,6 +17596,13 @@ function getElement(item, data, setCanSave, state, _onChange, _onError, root, fo
           return form === null || form === void 0 ? void 0 : form.setFieldsValue(_objectSpread$A(_objectSpread$A({}, state.data), data));
         }
       });
+    case 'media':
+      return /*#__PURE__*/jsx(Media, {
+        item: item,
+        state: state,
+        absoluteName: absoluteName,
+        value: item.value
+      });
     default:
       return /*#__PURE__*/jsx(Fragment, {});
   }
@@ -16957,11 +17996,11 @@ var FormWrapper$1 = function FormWrapper(_ref, ref) {
           rules: state.getRules(state.configuration.itemSelector, state.data),
           label: state.configuration.itemSelector.label ? t(state.configuration.itemSelector.label, state.configuration.itemSelector.label) : state.configuration.itemSelector.name,
           valuePropName: state.configuration.itemSelector.type == 'checkbox' ? 'checked' : 'value',
-          children: getElement(state.configuration.itemSelector, state.data, setCanSave, state, state.onItemSelectorChanged, onErrorInternal)
+          children: getElement(state.configuration.itemSelector, setCanSave, state, state.configuration.itemSelector.name, state.onItemSelectorChanged, onErrorInternal)
         }, state.configuration.itemSelector.name.toString()), (_state$selectedItems2 = state.selectedItems) === null || _state$selectedItems2 === void 0 ? void 0 : _state$selectedItems2.map(function (item) {
           var _state$hiddenRequired, _state$hiddenRequired2, _state$hiddenRequired3;
           return /*#__PURE__*/jsxs("div", {
-            children: [item.marker && /*#__PURE__*/jsx(InfoCircleOutlined, {}), ['subTitle', 'array'].includes(item.type) ? getElement(item, state.data, setCanSave, state, state.onInputChanged, onErrorInternal, undefined, undefined, (_state$hiddenRequired = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired === void 0 ? void 0 : _state$hiddenRequired.hidden) : /*#__PURE__*/jsx(Form$1.Item, {
+            children: [item.marker && /*#__PURE__*/jsx(InfoCircleOutlined, {}), ['subTitle', 'array'].includes(item.type) ? getElement(item, setCanSave, state, item.name, state.onInputChanged, onErrorInternal, undefined, undefined, (_state$hiddenRequired = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired === void 0 ? void 0 : _state$hiddenRequired.hidden) : /*#__PURE__*/jsx(Form$1.Item, {
               name: item.name,
               rules: state.getRules(item, state.data),
               label: getLabel(item, t),
@@ -16971,7 +18010,7 @@ var FormWrapper$1 = function FormWrapper(_ref, ref) {
               validateStatus: !!state.fieldErrors[item.name.toString()] ? 'error' : undefined,
               help: state.fieldErrors[item.name.toString()],
               hidden: (_state$hiddenRequired2 = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired2 === void 0 ? void 0 : _state$hiddenRequired2.hidden,
-              children: getElement(item, state.data, setCanSave, state, state.onInputChanged, onErrorInternal, root, form, (_state$hiddenRequired3 = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired3 === void 0 ? void 0 : _state$hiddenRequired3.hidden)
+              children: getElement(item, setCanSave, state, item.name, state.onInputChanged, onErrorInternal, root, form, (_state$hiddenRequired3 = state.hiddenRequiredDisabled[typeof item.name == 'string' ? item.name : item.name.join('.')]) === null || _state$hiddenRequired3 === void 0 ? void 0 : _state$hiddenRequired3.hidden)
             }, Array.isArray(item.name) ? item.name.join('.') : item.name)]
           }, item.name.toString());
         })]
@@ -20974,7 +22013,7 @@ var FileUploadWrapper = function FileUploadWrapper(_ref) {
     setOrganizations = _useState10[1];
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Descriptions, {
-      title: "File Upload BETA"
+      title: t('backoffice.menu.items.label.fileupload')
     }), success && /*#__PURE__*/jsx(Alert, {
       message: success,
       type: "success",
@@ -21390,7 +22429,7 @@ var MediaUpload = observer(function (_ref) {
       className: size == 'big' ? big : size == 'small' ? small : medium,
       children: /*#__PURE__*/jsx(Spin, {
         spinning: loading,
-        children: /*#__PURE__*/jsx(Upload, {
+        children: /*#__PURE__*/jsx(Upload$2, {
           name: 'file',
           disabled: loading,
           maxCount: 1,
@@ -22897,6 +23936,7 @@ function DeleteButton(_ref2) {
   });
 }
 function CopyButton(_ref3) {
+  var _state$configuration$25;
   var state = _ref3.state;
   var root = useStore();
   var apiHandler = new _default$d({
@@ -23018,7 +24058,7 @@ function CopyButton(_ref3) {
   return /*#__PURE__*/jsx(Button, {
     type: "primary",
     onClick: onCopy,
-    disabled: state.selected.length == 0,
+    disabled: state.selected.length == 0 || state.selected.length > 1 && ((_state$configuration$25 = state.configuration.copyAction) === null || _state$configuration$25 === void 0 ? void 0 : _state$configuration$25.disableOnMultiselect),
     children: t('backoffice.basetable.copy')
   });
 }
@@ -24281,19 +25321,22 @@ function CatalogTable (props) {
         fontSize: 20
       },
       children: state.title
-    }), /*#__PURE__*/jsx("div", {
+    }), /*#__PURE__*/jsxs("div", {
       style: {
-        "float": 'right'
+        display: 'flex',
+        justifyContent: 'space-between'
       },
-      children: /*#__PURE__*/jsx(SelectClientRelationCatalog, {
-        onSelectedCatalog: state.onSelectedCatalog,
-        onLoadingCatalog: state.setLoading,
-        dontLoadCatalogData: true
-      })
-    }), /*#__PURE__*/jsx(TranslationTabs, {
-      filterContex: state.filterContex,
-      setFilterContext: state.setFilterContext,
-      tabs: state.configuration.tabs
+      children: [/*#__PURE__*/jsx(TranslationTabs, {
+        filterContex: state.filterContex,
+        setFilterContext: state.setFilterContext,
+        tabs: state.configuration.tabs
+      }), /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx(SelectClientRelationCatalog, {
+          onSelectedCatalog: state.onSelectedCatalog,
+          onLoadingCatalog: state.setLoading,
+          dontLoadCatalogData: true
+        })
+      })]
     }), /*#__PURE__*/jsx(BaseTable, {
       state: state
     })]
@@ -27035,7 +28078,7 @@ function DragDropUpload(_ref) {
     startImport = _ref.startImport;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var Dragger = Upload.Dragger;
+  var Dragger = Upload$2.Dragger;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     fileName = _useState2[0],
@@ -30437,7 +31480,7 @@ var Toolbar = function Toolbar(_ref) {
             }
           },
           children: t.name
-        });
+        }, t.id);
       })
     })]
   });