ID-4310 Adds readonly DSP to show data source selection (#70)

Fliplet · Apr 30, 2024 · 28a24de · 28a24de
1 parent 1937c21
commit 28a24de
Showing 1 changed file with 24 additions and 38 deletions.
diff --git a/js/interface.js b/js/interface.js
@@ -1,45 +1,31 @@
 
-Fliplet.Widget.findParents().then(function(widgets) {
-  let dynamicContainer = null;
-  let recordContainer = null;
-  let listRepeater = null;
-
-  widgets.forEach(widget => {
-    if (widget.package === 'com.fliplet.dynamic-container') {
-      dynamicContainer = widget;
-    } else if (widget.package === 'com.fliplet.record-container') {
-      recordContainer = widget;
-    } else if (widget.package === 'com.fliplet.list-repeater') {
-      listRepeater = widget;
-    }
-  });
-
-  const dataSourceId = dynamicContainer?.dataSourceId;
-
-  if (!dynamicContainer || !dataSourceId || (!recordContainer && !listRepeater)) {
-    return;
-  }
-
-  return Fliplet.DataSources.getById(dataSourceId, {
-    attributes: ['name', 'columns']
-  }).then(async function(dataSource) {
-    const dataSourceColumns = dataSource.columns;
-    const dataSourceName = dataSource.name;
-
+Fliplet.Widget.findParents({ filter: { package: 'com.fliplet.dynamic-container' } }).then(function(widgets) {
+  const dynamicContainer = widgets[0];
+
+  return Fliplet.DataSources.getById(dynamicContainer && dynamicContainer.dataSourceId, {
+    attributes: ['columns']
+  }).then((dataSource) => {
+    return _.orderBy(dataSource.columns, column => column.toLowerCase());
+  }, () => {
+    return [];
+  }).then((dataSourceColumns = []) => {
     return Fliplet.Widget.generateInterface({
-      title: 'Dynamic image',
-      supportUrl: 'https://www.google.com', // TODO missing link
       fields: [
         {
-          type: 'html',
-          html: `<div>
-              <h3 style="color: black; font-weight: 600;">Get image from</h3>
-              <p style="margin-bottom: 5px;">
-                <span style="color: red;">${dataSourceId} </span>
-                <span style="color: black; font-weight: 600;">${dataSourceName}</span>
-              </p>
-              <p style="color: grey; font-size: 10px; margin-bottom: 25px;">To change this Data Source, go to Parent data container</p>
-            </div>`
+          type: 'provider',
+          package: 'com.fliplet.data-source-provider',
+          data: function() {
+            return Fliplet.Widget.findParents({ filter: { package: 'com.fliplet.dynamic-container' } }).then((widgets) => {
+              const dynamicContainer = widgets[0];
+
+              return {
+                readonly: true,
+                dataSourceTitle: 'Get image from...',
+                dataSourceId: dynamicContainer && dynamicContainer.dataSourceId,
+                helpText: 'To change this data source, go to the parent <strong>Dynamic container</strong>'
+              };
+            });
+          }
         },
         {
           name: 'imageColumnName',