blixify-ui-web 1.2.182 → 1.2.183

package/lib/components/data/dataTemplate/index.js

@@ -137,7 +137,6 @@ var blobModule_1 = require("../blobModule");
 var listModule_1 = require("../listModule");
 var formula_1 = require("../formula");
 var moduleUtils_1 = require("../moduleUtils");
-var queryForm_1 = require("../queryForm");
 var readModule_1 = require("../readModule");
 var readQuery_1 = require("../readQuery");
 var unionPagination_1 = require("./unionPagination");
@@ -147,7 +146,6 @@ var utils_1 = require("../utils");
 var writeQuery_1 = require("../writeQuery");
 var activityModal_1 = require("./activityModal");
 var authModal_1 = require("./authModal");
-var dataStateModel_1 = require("./dataStateModel");
 var indexedDb_1 = require("./indexedDb");
 var socket_1 = require("./socket");
 var newPagination_1 = require("../../display/newPagination");
@@ -382,13 +380,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var calendarViewInitRef = (0, react_1.useRef)(false);
     var _127 = (0, react_1.useState)(true), kanbanDroppable = _127[0], setKanbanDroppable = _127[1];
     var _128 = (0, react_1.useState)([]), kanbanOptions = _128[0], setKanbanOptions = _128[1];
-    var _129 = (0, react_1.useState)(false), queryForm = _129[0], setQueryForm = _129[1];
-    var _130 = (0, react_1.useState)(false), batchUpdateModal = _130[0], setBatchUpdateModal = _130[1];
-    var _131 = (0, react_1.useState)({
+    var _129 = (0, react_1.useState)(false), batchUpdateModal = _129[0], setBatchUpdateModal = _129[1];
+    var _130 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _131[0], setBatchUpdateData = _131[1];
-    var _132 = (0, react_1.useState)(function () {
+    }), batchUpdateData = _130[0], setBatchUpdateData = _130[1];
+    var _131 = (0, react_1.useState)(function () {
         var baseModel = (props === null || props === void 0 ? void 0 : props.model) || [];
         if (!persistedState)
             return baseModel;
@@ -414,8 +411,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             });
         }
         return model;
-    }), structure = _132[0], setStructure = _132[1];
-    var _133 = (0, react_1.useState)(((_m = props === null || props === void 0 ? void 0 : props.organise) === null || _m === void 0 ? void 0 : _m.additionalQuery) || []), additionalQuery = _133[0], setAdditionalQuery = _133[1];
+    }), structure = _131[0], setStructure = _131[1];
+    var _132 = (0, react_1.useState)(((_m = props === null || props === void 0 ? void 0 : props.organise) === null || _m === void 0 ? void 0 : _m.additionalQuery) || []), additionalQuery = _132[0], setAdditionalQuery = _132[1];
     // INFO: State for user-configurable flex filters (Monday.com-style)
     // INFO: Initialize with one empty row so users see inputs immediately without clicking "Add Filter"
     var defaultFlexFilterRow = [
@@ -426,9 +423,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             value: undefined,
         },
     ];
-    var _134 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _133 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFilters = _134[0], setFlexFilters = _134[1];
+        : defaultFlexFilterRow), flexFilters = _133[0], setFlexFilters = _133[1];
     // INFO: always-current mirror of flexFilters, read by the imperative apply/
     // clear methods so chained calls in one tick aren't stale.
     var flexFiltersRef = (0, react_1.useRef)(flexFilters);
@@ -441,9 +438,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     }, [flexFilters]);
     // INFO: Debounced version of flexFilters used by renderImpSearchFilterConditions
     // to prevent API calls on every keystroke when typing in value inputs
-    var _135 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _134 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFiltersDebounced = _135[0], setFlexFiltersDebounced = _135[1];
+        : defaultFlexFilterRow), flexFiltersDebounced = _134[0], setFlexFiltersDebounced = _134[1];
+    // INFO: the filter rows of the export being set up — started from the
+    // list's own when the export opens, so changing them leaves the list as it is
+    var _135 = (0, react_1.useState)(defaultFlexFilterRow), exportFlexFilters = _135[0], setExportFlexFilters = _135[1];
     var _136 = (0, react_1.useState)({}), flexFilterReferenceOptions = _136[0], setFlexFilterReferenceOptions = _136[1];
     var _137 = (0, react_1.useState)({}), flexFilterReferenceSearch = _137[0], setFlexFilterReferenceSearch = _137[1];
     var _138 = (0, react_1.useState)(false), flexFilterModalOpen = _138[0], setFlexFilterModalOpen = _138[1];
@@ -497,18 +497,17 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var _165 = (0, react_1.useState)([]), importTableData = _165[0], setImportTableData = _165[1];
     var _166 = (0, react_1.useState)([]), queryList = _166[0], setQueryList = _166[1];
     var _167 = (0, react_1.useState)(undefined), allQueryList = _167[0], setAllQueryList = _167[1];
-    var _168 = (0, react_1.useState)(-1), queryIndex = _168[0], setQueryIndex = _168[1];
     // INFO: a restored state wins over the prop; its "" is a list the user
     // ungrouped, so it opens ungrouped
-    var _169 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.groupBy) !== undefined
+    var _168 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.groupBy) !== undefined
         ? persistedState.groupBy || undefined
-        : (_y = props.organise) === null || _y === void 0 ? void 0 : _y.groupBy), groupId = _169[0], setGroupId = _169[1];
+        : (_y = props.organise) === null || _y === void 0 ? void 0 : _y.groupBy), groupId = _168[0], setGroupId = _168[1];
     // INFO: Monday-board per-group paging. Keyed by the group key that
     // handleBuildNewTableGroups() produces (a list option or "Unknown/No Value").
     // Each group tracks its own loaded cursor + total so it can lazily load its
     // next page as the user scrolls inside that band, independent of every other
     // group. Only used when renderCheckGroupPaging() is true.
-    var _170 = (0, react_1.useState)({}), groupPageState = _170[0], setGroupPageState = _170[1];
+    var _169 = (0, react_1.useState)({}), groupPageState = _169[0], setGroupPageState = _169[1];
     // INFO: read fresh inside the async per-group fetch so chained scroll fires
     // in one tick do not re-fetch an already in-flight page.
     var groupPageStateRef = (0, react_1.useRef)({});
@@ -517,59 +516,59 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // list was re-read (new search, filter, sort or grouping) is dropped on
     // arrival instead of appending rows that belong to the old list
     var groupPagingGenRef = (0, react_1.useRef)(0);
-    var _171 = (0, react_1.useState)(""), readTabSection = _171[0], setReadTabSection = _171[1];
-    var _172 = (0, react_1.useState)(false), readFloatingNav = _172[0], setReadFloatingNav = _172[1];
+    var _170 = (0, react_1.useState)(""), readTabSection = _170[0], setReadTabSection = _170[1];
+    var _171 = (0, react_1.useState)(false), readFloatingNav = _171[0], setReadFloatingNav = _171[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _173 = (0, react_1.useState)(false), modalVisible = _173[0], setModalVisible = _173[1];
-    var _174 = (0, react_1.useState)(false), deleteModal = _174[0], setDeleteModal = _174[1];
-    var _175 = (0, react_1.useState)(false), excelModal = _175[0], setExcelModal = _175[1];
-    var _176 = (0, react_1.useState)(false), exportExcel = _176[0], setExportExcel = _176[1];
-    var _177 = (0, react_1.useState)(""), exportType = _177[0], setExportType = _177[1];
-    var _178 = (0, react_1.useState)(false), exportQR = _178[0], setExportQR = _178[1];
-    var _179 = (0, react_1.useState)(function () {
+    var _172 = (0, react_1.useState)(false), modalVisible = _172[0], setModalVisible = _172[1];
+    var _173 = (0, react_1.useState)(false), deleteModal = _173[0], setDeleteModal = _173[1];
+    var _174 = (0, react_1.useState)(false), excelModal = _174[0], setExcelModal = _174[1];
+    var _175 = (0, react_1.useState)(false), exportExcel = _175[0], setExportExcel = _175[1];
+    var _176 = (0, react_1.useState)(""), exportType = _176[0], setExportType = _176[1];
+    var _177 = (0, react_1.useState)(false), exportQR = _177[0], setExportQR = _177[1];
+    var _178 = (0, react_1.useState)(function () {
         var _a, _b;
         var firstTabId = (_b = (_a = structure.find(function (item) { return item.tabId; })) === null || _a === void 0 ? void 0 : _a.tabId) !== null && _b !== void 0 ? _b : "";
         return firstTabId;
-    }), activeTab = _179[0], setActiveTab = _179[1];
-    var _180 = (0, react_1.useState)(false), signatureSigning = _180[0], setSignatureSigning = _180[1];
-    var _181 = (0, react_1.useState)({}), selectedData = _181[0], setSelectedData = _181[1];
-    var _182 = (0, react_1.useState)(""), selectedObjectStructureId = _182[0], setSelectedObjectStructureId = _182[1];
-    var _183 = (0, react_1.useState)(""), selectedObjectId = _183[0], setSelectedObjectId = _183[1];
-    var _184 = (0, react_1.useState)(""), selectedListAddressId = _184[0], setSelectedListAddressId = _184[1];
-    var _185 = (0, react_1.useState)(-1), selectedListAddressIndex = _185[0], setSelectedListAddressIndex = _185[1];
-    var _186 = (0, react_1.useState)({
+    }), activeTab = _178[0], setActiveTab = _178[1];
+    var _179 = (0, react_1.useState)(false), signatureSigning = _179[0], setSignatureSigning = _179[1];
+    var _180 = (0, react_1.useState)({}), selectedData = _180[0], setSelectedData = _180[1];
+    var _181 = (0, react_1.useState)(""), selectedObjectStructureId = _181[0], setSelectedObjectStructureId = _181[1];
+    var _182 = (0, react_1.useState)(""), selectedObjectId = _182[0], setSelectedObjectId = _182[1];
+    var _183 = (0, react_1.useState)(""), selectedListAddressId = _183[0], setSelectedListAddressId = _183[1];
+    var _184 = (0, react_1.useState)(-1), selectedListAddressIndex = _184[0], setSelectedListAddressIndex = _184[1];
+    var _185 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _186[0], setSelectedListAddress = _186[1];
-    var _187 = (0, react_1.useState)({}), selectedObjectData = _187[0], setSelectedObjectData = _187[1];
-    var _188 = (0, react_1.useState)(null), objectCellEdit = _188[0], setObjectCellEdit = _188[1];
-    var _189 = (0, react_1.useState)(false), referenceLoading = _189[0], setReferenceLoading = _189[1];
-    var _190 = (0, react_1.useState)({}), referencesOptions = _190[0], setReferencesOptions = _190[1];
-    var _191 = (0, react_1.useState)({}), referencesDetails = _191[0], setReferencesDetails = _191[1];
-    var _192 = (0, react_1.useState)({}), listReferencesOptions = _192[0], setListReferencesOptions = _192[1];
-    var _193 = (0, react_1.useState)({}), referenceDeleteTableData = _193[0], setReferenceDeleteTableData = _193[1];
-    var _194 = (0, react_1.useState)([]), relatedSections = _194[0], setRelatedSections = _194[1];
-    var _195 = (0, react_1.useState)(0), referenceDeleteIndex = _195[0], setReferenceDeleteIndex = _195[1];
-    var _196 = (0, react_1.useState)({
+    }), selectedListAddress = _185[0], setSelectedListAddress = _185[1];
+    var _186 = (0, react_1.useState)({}), selectedObjectData = _186[0], setSelectedObjectData = _186[1];
+    var _187 = (0, react_1.useState)(null), objectCellEdit = _187[0], setObjectCellEdit = _187[1];
+    var _188 = (0, react_1.useState)(false), referenceLoading = _188[0], setReferenceLoading = _188[1];
+    var _189 = (0, react_1.useState)({}), referencesOptions = _189[0], setReferencesOptions = _189[1];
+    var _190 = (0, react_1.useState)({}), referencesDetails = _190[0], setReferencesDetails = _190[1];
+    var _191 = (0, react_1.useState)({}), listReferencesOptions = _191[0], setListReferencesOptions = _191[1];
+    var _192 = (0, react_1.useState)({}), referenceDeleteTableData = _192[0], setReferenceDeleteTableData = _192[1];
+    var _193 = (0, react_1.useState)([]), relatedSections = _193[0], setRelatedSections = _193[1];
+    var _194 = (0, react_1.useState)(0), referenceDeleteIndex = _194[0], setReferenceDeleteIndex = _194[1];
+    var _195 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _196[0], setReferenceCreationModal = _196[1];
-    var _197 = (0, react_1.useState)({}), referenceModelSchema = _197[0], setReferenceSchema = _197[1];
-    var _198 = (0, react_1.useState)([]), kanbanChecked = _198[0], setKanbanChecked = _198[1];
+    }), referenceCreationModal = _195[0], setReferenceCreationModal = _195[1];
+    var _196 = (0, react_1.useState)({}), referenceModelSchema = _196[0], setReferenceSchema = _196[1];
+    var _197 = (0, react_1.useState)([]), kanbanChecked = _197[0], setKanbanChecked = _197[1];
     //INFO : Offline
-    var _199 = (0, react_1.useState)(0), offlineDataLength = _199[0], setOfflineDataLength = _199[1];
-    var _200 = (0, react_1.useState)(false), offlineModal = _200[0], setOfflineModal = _200[1];
+    var _198 = (0, react_1.useState)(0), offlineDataLength = _198[0], setOfflineDataLength = _198[1];
+    var _199 = (0, react_1.useState)(false), offlineModal = _199[0], setOfflineModal = _199[1];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    var _201 = (0, react_1.useState)(false), isLive = _201[0], setIsLive = _201[1];
-    var _202 = (0, react_1.useState)(false), isLiveOffline = _202[0], setIsLiveOffline = _202[1];
+    var _200 = (0, react_1.useState)(false), isLive = _200[0], setIsLive = _200[1];
+    var _201 = (0, react_1.useState)(false), isLiveOffline = _201[0], setIsLiveOffline = _201[1];
     // INFO: true when navigator is offline — used to switch ReadQueryHoc between
     // server reads (online, full pagination) and IndexedDB reads (offline, cached data).
     // Independent of SSE status so it works even when bareSocketName is not set.
-    var _203 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _203[0], setIsNetworkOffline = _203[1];
+    var _202 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _202[0], setIsNetworkOffline = _202[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -789,7 +788,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var isSchemaHideMode = ((_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.onChangeHide) ? true : false;
     // INFO: rows per page is a view setting the user can change, so it starts from
     // the persisted value and falls back to the consumer's limit
-    var _204 = (0, react_1.useState)((_12 = (_11 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _11 !== void 0 ? _11 : props.limit) !== null && _12 !== void 0 ? _12 : 10), pageLimit = _204[0], setPageLimit = _204[1];
+    var _203 = (0, react_1.useState)((_12 = (_11 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _11 !== void 0 ? _11 : props.limit) !== null && _12 !== void 0 ? _12 : 10), pageLimit = _203[0], setPageLimit = _203[1];
     var limit = pageLimit;
     var isSavedViewsEnabled = !!((_13 = props.organise) === null || _13 === void 0 ? void 0 : _13.savedViews) && resolvedType === "list";
     // INFO: an app that stores views takes over from this browser's storage, so
@@ -843,6 +842,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var flexFilterStructure = isFormulaViewSupported
         ? structure
         : structure.filter(function (eachModel) { return eachModel.type !== "formula"; });
+    // INFO: an export's filters run on the export server, which cannot work out
+    // a formula, so its rows leave formula columns out — a formula filter on
+    // the list still narrows the export, by the ids of the rows it kept
+    var exportFilterStructure = structure.filter(function (eachModel) { return eachModel.type !== "formula"; });
     // INFO: every matching row of a formula view, unsorted — pages are cut
     // from it locally, so paging does not read the collection again
     // INFO: the formula sort and filter the row cap was last announced for
@@ -880,7 +883,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             displayRows: filtered.map(function (eachEntry) { return eachEntry.displayRow; }),
         };
     };
-    var _205 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _205.canUpdateRecord, canInlineUpdate = _205.canInlineUpdate, canBatchUpdate = _205.canBatchUpdate, canDeleteRecord = _205.canDeleteRecord;
+    var _204 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _204.canUpdateRecord, canInlineUpdate = _204.canInlineUpdate, canBatchUpdate = _204.canBatchUpdate, canDeleteRecord = _204.canDeleteRecord;
     var isEditor = ((_19 = props.edit) === null || _19 === void 0 ? void 0 : _19.allEditable) ? true : false;
     var isOffline = (_20 = props.bareSettings) === null || _20 === void 0 ? void 0 : _20.bareOffline;
     // INFO: when bareOfflineNetworkAware is true, the save path is also gated on
@@ -1245,8 +1248,61 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             return (__assign(__assign({}, prev), (_a = {}, _a[columnId] = search, _a)));
         });
     };
-    var renderImpSearchFilterConditions = function () {
+    // INFO: the export's own filter rows, handled like the list's but never
+    // reading the list again — a reference column's options are shared with it
+    var handleNewExportFilterRow = function () { return ({
+        id: (0, uuid_1.v4)(),
+        columnId: "",
+        operator: "=",
+        value: undefined,
+    }); };
+    var exportFlexActions = {
+        handleAddFilter: function () {
+            return setExportFlexFilters(function (previous) { return __spreadArray(__spreadArray([], previous, true), [
+                handleNewExportFilterRow(),
+            ], false); });
+        },
+        handleRemoveFilter: function (filterId) {
+            return setExportFlexFilters(function (previous) {
+                var remaining = previous.filter(function (each) { return each.id !== filterId; });
+                return remaining.length > 0 ? remaining : [handleNewExportFilterRow()];
+            });
+        },
+        handleClearAllFilters: function () {
+            return setExportFlexFilters([handleNewExportFilterRow()]);
+        },
+        handleColumnChange: function (filterId, columnId) {
+            return setExportFlexFilters(function (previous) {
+                return previous.map(function (each) {
+                    var _a, _b, _c;
+                    if (each.id !== filterId)
+                        return each;
+                    var operators = flexFilter_1.FLEX_FILTER_OPERATOR_MAP[(_b = (_a = structure.find(function (eachModel) { return eachModel.id === columnId; })) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ""];
+                    return __assign(__assign({}, each), { columnId: columnId, operator: (_c = operators === null || operators === void 0 ? void 0 : operators[0]) !== null && _c !== void 0 ? _c : "=", value: undefined });
+                });
+            });
+        },
+        handleOperatorChange: function (filterId, operator) {
+            return setExportFlexFilters(function (previous) {
+                return previous.map(function (each) {
+                    return each.id === filterId ? __assign(__assign({}, each), { operator: operator, value: undefined }) : each;
+                });
+            });
+        },
+        handleValueChange: function (filterId, value) {
+            return setExportFlexFilters(function (previous) {
+                return previous.map(function (each) {
+                    return each.id === filterId ? __assign(__assign({}, each), { value: value }) : each;
+                });
+            });
+        },
+        handleReferenceOptionsLoaded: handleFlexFilterReferenceOptionsLoaded,
+        handleReferenceSearch: handleFlexFilterReferenceSearch,
+    };
+    // INFO: flexRows defaults to the list's filters; an export passes its own
+    var renderImpSearchFilterConditions = function (flexRows) {
         var _a;
+        if (flexRows === void 0) { flexRows = flexFiltersDebounced; }
         var query = (0, listModule_1.renderSearchFilterConditions)(structure, devSettings, {
             filterSearchParams: filterSearchParams,
             filterSelection: filterSelection,
@@ -1255,10 +1311,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             filterDraft: filterDraft,
         }, additionalQuery !== null && additionalQuery !== void 0 ? additionalQuery : [], (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterQuery, selectedTab);
         // INFO: Merge flex filter conditions into the query array (uses debounced state to avoid API calls on every keystroke)
-        if (flexFiltersDebounced.length > 0) {
+        if (flexRows.length > 0) {
             // INFO: formula conditions never reach the server — the field is not
             // stored — and are applied to the rows by handleApplyFormulaView
-            var flexQuery = (0, listModule_1.renderFlexFilterConditions)(flexFiltersDebounced, structure).filter(function (eachQuery) { var _a; return !formulaColumnIds.includes((_a = eachQuery.queryId) !== null && _a !== void 0 ? _a : ""); });
+            var flexQuery = (0, listModule_1.renderFlexFilterConditions)(flexRows, structure).filter(function (eachQuery) { var _a; return !formulaColumnIds.includes((_a = eachQuery.queryId) !== null && _a !== void 0 ? _a : ""); });
             if (flexQuery.length > 0) {
                 if (query) {
                     query = __spreadArray(__spreadArray([], query, true), flexQuery, true);
@@ -2113,6 +2169,17 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         if (props.devSettings.schemaReference)
             setReferenceSchema(props.devSettings.schemaReference);
     }, [props.devSettings.schemaReference]);
+    // INFO: an export starts from the filters the list shows, formula rows
+    // aside (see exportFilterStructure)
+    (0, react_1.useEffect)(function () {
+        if (!exportExcel && !exportQR)
+            return;
+        var rows = flexFiltersRef.current.filter(function (eachFilter) { return !formulaColumnIds.includes(eachFilter.columnId); });
+        setExportFlexFilters(rows.length > 0
+            ? JSON.parse(JSON.stringify(rows))
+            : [handleNewExportFilterRow()]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [exportExcel, exportQR]);
     (0, react_1.useEffect)(function () {
         var _a;
         var newQuery = renderImpSearchFilterConditions();
@@ -6570,14 +6637,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     }); };
     var handleExportCSVData = function (downloadLinkOnly, printOnly) { return __awaiter(void 0, void 0, void 0, function () {
         var exportQueryList, formulaRows, kept, baseUrl, apiEndpoint, reqData, res, dataList, csvDownloadLink, notificaitonMsg, err_27;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-        return __generator(this, function (_1) {
-            switch (_1.label) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+        return __generator(this, function (_2) {
+            switch (_2.label) {
                 case 0:
-                    _1.trys.push([0, 5, , 6]);
+                    _2.trys.push([0, 5, , 6]);
                     setLoading(true);
-                    exportQueryList = JSON.parse(JSON.stringify(queryList));
-                    if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareCSVExportSettings) {
+                    exportQueryList = ((_a = renderImpSearchFilterConditions(exportFlexFilters)) !== null && _a !== void 0 ? _a : []).filter(function (eachQuery) { return eachQuery.type !== "search"; });
+                    if ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCSVExportSettings) {
                         if (props.bareSettings.bareListFilterQuery)
                             exportQueryList.push.apply(exportQueryList, props.bareSettings.bareListFilterQuery);
                     }
@@ -6607,20 +6674,20 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         apiEndpoint += "/handleExportCSV";
                     reqData = __assign(__assign({ spaceId: props.collectionId, query: exportQueryList, userData: {
                             userEmail: downloadLinkOnly ? "" : exportCSVEmail,
-                            userName: (_c = (_b = props.devSettings.currentUser) === null || _b === void 0 ? void 0 : _b.userName) !== null && _c !== void 0 ? _c : "",
-                        }, downloadLinkOnly: downloadLinkOnly, exportType: exportType === "excel" ? "excel" : undefined, excludeReferenceId: (_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.exportSettings) === null || _e === void 0 ? void 0 : _e.excludeReferenceId, excludeSecondaryLabel: (_g = (_f = props.organise) === null || _f === void 0 ? void 0 : _f.exportSettings) === null || _g === void 0 ? void 0 : _g.excludeSecondaryLabel, csvHeaderUseName: (_j = (_h = props.organise) === null || _h === void 0 ? void 0 : _h.exportSettings) === null || _j === void 0 ? void 0 : _j.csvHeaderUseName, dateFormatString: (_l = (_k = props.organise) === null || _k === void 0 ? void 0 : _k.exportSettings) === null || _l === void 0 ? void 0 : _l.dateFormatString, excludeDataId: (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.excludeDataId, columnIds: (_q = (_p = props.organise) === null || _p === void 0 ? void 0 : _p.exportSettings) === null || _q === void 0 ? void 0 : _q.columnIds, sort: (_s = (_r = props.organise) === null || _r === void 0 ? void 0 : _r.exportSettings) === null || _s === void 0 ? void 0 : _s.sort, groupBy: groupId, sumAttributeId: exportSumAttributeIds, viewId: (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.id) !== "general" ? selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name : undefined }, (exportType === "qr-data" && {
+                            userName: (_d = (_c = props.devSettings.currentUser) === null || _c === void 0 ? void 0 : _c.userName) !== null && _d !== void 0 ? _d : "",
+                        }, downloadLinkOnly: downloadLinkOnly, exportType: exportType === "excel" ? "excel" : undefined, excludeReferenceId: (_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.exportSettings) === null || _f === void 0 ? void 0 : _f.excludeReferenceId, excludeSecondaryLabel: (_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.exportSettings) === null || _h === void 0 ? void 0 : _h.excludeSecondaryLabel, csvHeaderUseName: (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.csvHeaderUseName, dateFormatString: (_m = (_l = props.organise) === null || _l === void 0 ? void 0 : _l.exportSettings) === null || _m === void 0 ? void 0 : _m.dateFormatString, excludeDataId: (_p = (_o = props.organise) === null || _o === void 0 ? void 0 : _o.exportSettings) === null || _p === void 0 ? void 0 : _p.excludeDataId, columnIds: (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.columnIds, sort: (_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.exportSettings) === null || _t === void 0 ? void 0 : _t.sort, groupBy: groupId, sumAttributeId: exportSumAttributeIds, viewId: (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.id) !== "general" ? selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name : undefined }, (exportType === "qr-data" && {
                         public: true,
                         publicLink: window.location.origin,
                     })), { hideSubItems: hideSubItems });
-                    return [4 /*yield*/, ((_t = props.lib) === null || _t === void 0 ? void 0 : _t.axios({
+                    return [4 /*yield*/, ((_u = props.lib) === null || _u === void 0 ? void 0 : _u.axios({
                             url: apiEndpoint,
                             method: "post",
                             data: { data: reqData },
                         }))];
                 case 1:
-                    res = _1.sent();
-                    if (!(downloadLinkOnly && ((_u = res === null || res === void 0 ? void 0 : res.data) === null || _u === void 0 ? void 0 : _u.dataList))) return [3 /*break*/, 4];
-                    dataList = (_v = res === null || res === void 0 ? void 0 : res.data) === null || _v === void 0 ? void 0 : _v.dataList;
+                    res = _2.sent();
+                    if (!(downloadLinkOnly && ((_v = res === null || res === void 0 ? void 0 : res.data) === null || _v === void 0 ? void 0 : _v.dataList))) return [3 /*break*/, 4];
+                    dataList = (_w = res === null || res === void 0 ? void 0 : res.data) === null || _w === void 0 ? void 0 : _w.dataList;
                     if (!(dataList && typeof dataList === "object")) return [3 /*break*/, 4];
                     csvDownloadLink = Object.values(dataList)[0];
                     if (!(exportType === "csv" ||
@@ -6632,10 +6699,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     if (!(exportType === "pdf" ||
                         printOnly ||
                         exportType === "print")) return [3 /*break*/, 4];
-                    return [4 /*yield*/, (0, listModule_1.handleExportPDF)(csvDownloadLink, exportPDFTitle, printOnly, (_y = (_x = (_w = props.organise) === null || _w === void 0 ? void 0 : _w.exportSettings) === null || _x === void 0 ? void 0 : _x.generateBy) !== null && _y !== void 0 ? _y : "Admin")];
+                    return [4 /*yield*/, (0, listModule_1.handleExportPDF)(csvDownloadLink, exportPDFTitle, printOnly, (_z = (_y = (_x = props.organise) === null || _x === void 0 ? void 0 : _x.exportSettings) === null || _y === void 0 ? void 0 : _y.generateBy) !== null && _z !== void 0 ? _z : "Admin")];
                 case 3:
-                    _1.sent();
-                    _1.label = 4;
+                    _2.sent();
+                    _2.label = 4;
                 case 4:
                     notificaitonMsg = "A download link will be sent to your email. This may take a while if the data is huge, contact our team if you do not receive any email after 10 minutes (Check your Junk Email too).";
                     if (downloadLinkOnly)
@@ -6649,10 +6716,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }
                     setLoading(false);
                     handlePopUpModal(false);
-                    setExportCSVEmail((_0 = (_z = props.devSettings.currentUser) === null || _z === void 0 ? void 0 : _z.userEmail) !== null && _0 !== void 0 ? _0 : "");
+                    setExportCSVEmail((_1 = (_0 = props.devSettings.currentUser) === null || _0 === void 0 ? void 0 : _0.userEmail) !== null && _1 !== void 0 ? _1 : "");
                     return [3 /*break*/, 6];
                 case 5:
-                    err_27 = _1.sent();
+                    err_27 = _2.sent();
                     setNotification({
                         type: true,
                         title: "Export Failed",
@@ -7038,43 +7105,6 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
         });
     }); };
-    var handleViewQuery = function (index) {
-        setQueryIndex(index);
-        setQueryForm(!queryForm);
-    };
-    var handleSortQuery = function (index, sortType) {
-        var _a;
-        var sortList = JSON.parse(JSON.stringify(queryList));
-        var ascIndex = sortType === "up" ? index - 1 : index + 1;
-        _a = [
-            sortList[ascIndex],
-            sortList[index],
-        ], sortList[index] = _a[0], sortList[ascIndex] = _a[1];
-        setQueryList(sortList);
-    };
-    var handlePushQueryList = function (queryInput, queryIndex) {
-        var tempQueryList = [];
-        tempQueryList = queryList;
-        if (!tempQueryList.some(function (eachQuery) { return eachQuery.queryId === queryInput.queryId; })) {
-            tempQueryList.push(queryInput);
-            setQueryList(tempQueryList);
-            setQueryForm(false);
-        }
-        else if (queryIndex >= 0) {
-            var newQueryList = tempQueryList.map(function (eachQuery) {
-                return eachQuery.queryId === queryInput.queryId ? queryInput : eachQuery;
-            });
-            setQueryList(newQueryList);
-            handleViewQuery(-1);
-        }
-        else {
-            setNotification({
-                type: false,
-                title: "Failed to add",
-                msg: "Query with column ID already exists",
-            });
-        }
-    };
     //=====================================================================================
     //SECTION: Handle Utils
     //=====================================================================================
@@ -7139,16 +7169,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         var header = Object.keys(csvFileData[0]);
         var dataList = [];
         csvAPIAttribute.map(function (eachAttribute) {
+            var _a, _b;
             dataList.push({
                 header: header[eachAttribute.ori],
-                detail: eachAttribute.id,
+                // INFO: the field's name, as the mapping step showed it
+                detail: (_b = (_a = structure.find(function (eachModel) { return eachModel.id === eachAttribute.id; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : eachAttribute.id,
             });
             return null;
         });
         return dataList;
     };
     var renderStepCSV = function () {
-        var _a;
+        var _a, _b;
         switch (stepCSVIndex) {
             case 0:
                 return (react_1.default.createElement(uploadInput_1.UploadInput, { lib: { axios: (_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios }, label: "Please insert a csv file", fileDescription: "CSV file thats doesn't exceeds 30MB and row not more than 100 data", accept: ".csv", hidePreview: true, onChange: handleOnChangeCSV }));
@@ -7164,37 +7196,47 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }
                     return "";
                 });
-                return (react_1.default.createElement(react_1.default.Fragment, null, csvFileData.length > 0 && (react_1.default.createElement("div", { className: "pb-32" }, Object.entries(csvFileData[0]).map(function (eachRow, index) {
-                    var eachKey = eachRow[0];
-                    if (!eachKey)
-                        return null;
-                    var clonedListValue = JSON.parse(JSON.stringify(listCSVMapAttribute));
-                    var selectedObjectModel = structure.find(function (eachModel) {
-                        return ((eachModel.id === clonedListValue[index] &&
-                            eachModel.type === "listObject") ||
-                            (eachModel.id === clonedListValue[index] &&
-                                eachModel.type === "object"));
-                    });
-                    return (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("div", { className: "grid items-center grid-cols-3 mt-6" },
-                            eachKey,
-                            react_1.default.createElement(select_1.Select, { portalDropdown: true, containerClassName: selectedObjectModel ? "ml-2" : "ml-2 col-span-2", label: "", options: filterOptions_1, value: clonedListValue[index], onChange: function (value) {
-                                    var clonedListValueAttribute = JSON.parse(JSON.stringify(listCSVMapAttribute));
-                                    clonedListValueAttribute[index] = value;
-                                    setListCSVMapAttribute(clonedListValueAttribute);
-                                } }),
-                            selectedObjectModel && (react_1.default.createElement(select_1.Select, { portalDropdown: true, containerClassName: "ml-4", label: "", options: (0, readModule_1.renderObjectOptions)(selectedObjectModel.objectData), value: listCSVObjAttribute[index], onChange: function (value) {
-                                    var clonedListObjectValueAttribute = JSON.parse(JSON.stringify(listCSVObjAttribute));
-                                    clonedListObjectValueAttribute[index] = value;
-                                    setListCSVObjAttribute(clonedListObjectValueAttribute);
-                                } })))));
-                })))));
+                return (react_1.default.createElement(react_1.default.Fragment, null, csvFileData.length > 0 && (
+                // INFO: one compact row per Excel column — its header, then the
+                // field it fills — so a wide sheet maps without a long form
+                react_1.default.createElement("div", { className: "pb-32" },
+                    react_1.default.createElement("div", { className: "grid grid-cols-[minmax(0,2fr)_1rem_minmax(0,3fr)] items-center gap-x-2 border-b pb-1 text-xs font-medium ".concat(((_b = props.organise) === null || _b === void 0 ? void 0 : _b.darkMode) ? "border-gray-700 text-gray-400" : "border-gray-200 text-gray-500") },
+                        react_1.default.createElement("span", null, "Excel column"),
+                        react_1.default.createElement("span", null),
+                        react_1.default.createElement("span", null, "Field")),
+                    Object.entries(csvFileData[0]).map(function (eachRow, index) {
+                        var _a;
+                        var eachKey = eachRow[0];
+                        if (!eachKey)
+                            return null;
+                        var clonedListValue = JSON.parse(JSON.stringify(listCSVMapAttribute));
+                        var selectedObjectModel = structure.find(function (eachModel) {
+                            return ((eachModel.id === clonedListValue[index] &&
+                                eachModel.type === "listObject") ||
+                                (eachModel.id === clonedListValue[index] &&
+                                    eachModel.type === "object"));
+                        });
+                        return (react_1.default.createElement("div", { key: "".concat(eachKey, "-").concat(index), className: "grid grid-cols-[minmax(0,2fr)_1rem_minmax(0,3fr)] items-center gap-x-2 py-1.5" },
+                            react_1.default.createElement("span", { className: "truncate text-sm ".concat(((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode) ? "text-gray-200" : "text-gray-700") }, eachKey),
+                            react_1.default.createElement(outline_1.ArrowRightIcon, { className: "h-4 w-4 text-gray-400", "aria-hidden": "true" }),
+                            react_1.default.createElement("div", { className: "flex min-w-0 gap-x-2" },
+                                react_1.default.createElement(select_1.Select, { portalDropdown: true, size: "xs", containerClassName: "min-w-0 flex-1", label: "", options: filterOptions_1, value: clonedListValue[index], onChange: function (value) {
+                                        var clonedListValueAttribute = JSON.parse(JSON.stringify(listCSVMapAttribute));
+                                        clonedListValueAttribute[index] = value;
+                                        setListCSVMapAttribute(clonedListValueAttribute);
+                                    } }),
+                                selectedObjectModel && (react_1.default.createElement(select_1.Select, { portalDropdown: true, size: "xs", containerClassName: "min-w-0 flex-1", label: "", options: (0, readModule_1.renderObjectOptions)(selectedObjectModel.objectData), value: listCSVObjAttribute[index], onChange: function (value) {
+                                        var clonedListObjectValueAttribute = JSON.parse(JSON.stringify(listCSVObjAttribute));
+                                        clonedListObjectValueAttribute[index] = value;
+                                        setListCSVObjAttribute(clonedListObjectValueAttribute);
+                                    } })))));
+                    })))));
             case 2:
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("div", { className: "flex flex-col mx-auto mt-2" }, "Mapped Column"),
                     react_1.default.createElement(table_1.Table, { loading: false, data: renderExcelReviewData(), hidePagination: true, limit: csvAPIAttribute.length + 1, header: [
-                            { key: "header", title: "Excel Column" },
-                            { key: "detail", title: "Mapping Column" },
+                            { key: "header", title: "Excel column" },
+                            { key: "detail", title: "Field" },
                         ] })));
             case 3:
                 return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -7207,40 +7249,6 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 return null;
         }
     };
-    var renderQueryData = function () {
-        var queryStructureView = [];
-        var sortComponent = undefined;
-        queryList.map(function (data, index) {
-            if (queryList.length > 1) {
-                var upData_1 = index === queryList.length - 1;
-                sortComponent = (react_1.default.createElement("div", { className: "ml-2 cursor-pointer", onClick: function () {
-                        handleSortQuery(index, upData_1 ? "up" : "down");
-                    } }, upData_1 ? (react_1.default.createElement(outline_1.ArrowUpIcon, { className: "block w-5 h-5 text-primary-600" })) : (react_1.default.createElement(outline_1.ArrowDownIcon, { className: "block w-5 h-5 text-primary-600" }))));
-            }
-            var value = data.value;
-            var isDate = (0, dayjs_1.default)(value);
-            if (isDate.isValid())
-                value = (0, dayjs_1.default)(value).format("DD/MM/YYYY h:mm a");
-            queryStructureView.push({
-                key: index,
-                name: data.queryId,
-                value: value,
-                sort: sortComponent,
-                view: (react_1.default.createElement("div", { className: "ml-2 cursor-pointer", onClick: function () {
-                        handleViewQuery(index);
-                    } },
-                    react_1.default.createElement(outline_1.EyeIcon, { className: "block w-5 h-5 text-primary-600" }))),
-                del: (react_1.default.createElement("div", { className: "ml-2 cursor-pointer", onClick: function () {
-                        var temp = JSON.parse(JSON.stringify(queryList));
-                        temp.splice(index, 1);
-                        setQueryList(temp);
-                    } },
-                    react_1.default.createElement(outline_1.TrashIcon, { className: "block w-5 h-5 text-primary-600" }))),
-            });
-            return "";
-        });
-        return queryStructureView;
-    };
     //=====================================================================================
     //SECTION: Render CRUD
     //=====================================================================================
@@ -10984,52 +10992,37 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
         else if (exportExcel || exportQR) {
             var showEmail = exportType !== "pdf" && !((_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.exportSettings) === null || _f === void 0 ? void 0 : _f.disableEmail);
-            return (react_1.default.createElement(react_1.default.Fragment, null, queryForm ? (react_1.default.createElement(queryForm_1.QueryForm, { dbModule: (_g = props.lib) === null || _g === void 0 ? void 0 : _g.axios, model: structure, updateQuery: queryIndex >= 0 ? queryList[queryIndex] : undefined, devSettings: props.devSettings, handleCloseForm: function () {
-                    handleViewQuery(-1);
-                }, handleQueryOnComplete: function (queryData) {
-                    handlePushQueryList(queryData, queryIndex);
-                }, renderReferenceLabelOptions: ((_h = props.organise) === null || _h === void 0 ? void 0 : _h.renderReferenceLabelOptions)
-                    ? (_j = props.organise) === null || _j === void 0 ? void 0 : _j.renderReferenceLabelOptions
-                    : function () {
-                        return [];
-                    } })) : (react_1.default.createElement("div", null,
-                showEmail ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("h1", null, "Download file or send it via email."),
-                        react_1.default.createElement("p", { className: "pt-2 mb-4 text-sm text-gray-600" },
-                            exportExcel
-                                ? "Export your data to .csv format to be viewable on Excel."
-                                : "Export your data to .pdf format to be viewable on Adobe/Browser.",
-                            "Filter your data exported based on conditions by creating queries at the table below."),
-                        react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(textInput_1.TextInput, { ref: exportCSVEmailInputRef, value: exportCSVEmail, type: "email", label: "Email", subLabel: "A download link will be sent to your email", placeholder: (_l = (_k = props.devSettings.currentUser) === null || _k === void 0 ? void 0 : _k.userEmail) !== null && _l !== void 0 ? _l : "Enter your email", onChange: function (e) { return setExportCSVEmail(e.target.value); } }),
-                            react_1.default.createElement("div", { className: "flex mt-5 items-center justify-end" },
-                                react_1.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_1.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: function () { return setQueryForm(!queryForm); } })))),
-                    react_1.default.createElement(table_1.Table, { className: "mt-5", header: dataStateModel_1.queryTableHeader, data: renderQueryData(), loading: false }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("p", null, "Click the button below to download."),
-                    (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(textInput_1.TextInput, { containerClassName: "mt-5", value: exportPDFTitle, type: "text", label: "Title (Optional)", placeholder: (_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.defaultExportPDFName) !== null && _p !== void 0 ? _p : "Enter your report title", onChange: function (e) { return setExportPDFTitle(e.target.value); } })),
-                    (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "Sum Attribute", containerClassName: "mt-5", value: exportSumAttributeIds, options: (_s = (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.renderReferenceLabelOptions) === null || _r === void 0 ? void 0 : _r.call(_q, "", false, "number")) !== null && _s !== void 0 ? _s : [], staticDropdown: true, onChange: function (value) {
-                            setExportSumAttributeIds(value);
-                        } })))),
-                react_1.default.createElement("div", { className: "mt-5 flex items-center justify-between" },
-                    react_1.default.createElement("label", { className: "text-sm font-medium ".concat(((_t = props.organise) === null || _t === void 0 ? void 0 : _t.darkMode) ? "text-gray-200" : "text-gray-700") }, "Hide Sub Items"),
-                    react_1.default.createElement(toggle_1.Toggle, { text: "", direction: "right", value: hideSubItems, onClick: function () { return setHideSubItems(!hideSubItems); } })),
-                react_1.default.createElement("div", { className: "flex justify-end mt-5 " },
-                    showEmail && (react_1.default.createElement(button_1.Button, { text: "Send to email", size: "small", type: "normal", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, exportCSVEmailInputRef.current.handleSubmit()];
-                                    case 1:
-                                        if (_a.sent()) {
-                                            handleExportCSVData();
-                                        }
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); } })),
-                    react_1.default.createElement(button_1.Button, { type: "normal", text: "Download", size: "small", className: "ml-3", onClick: function () {
-                            return handleExportCSVData(true, exportType === "print");
-                        } }))))));
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", null,
+                    showEmail ? (react_1.default.createElement(textInput_1.TextInput, { ref: exportCSVEmailInputRef, value: exportCSVEmail, type: "email", label: "Email", size: "xs", placeholder: (_h = (_g = props.devSettings.currentUser) === null || _g === void 0 ? void 0 : _g.userEmail) !== null && _h !== void 0 ? _h : "Enter your email", onChange: function (e) { return setExportCSVEmail(e.target.value); } })) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("p", null, "Click the button below to download."),
+                        (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(textInput_1.TextInput, { containerClassName: "mt-5", value: exportPDFTitle, type: "text", label: "Title (Optional)", placeholder: (_l = (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.defaultExportPDFName) !== null && _l !== void 0 ? _l : "Enter your report title", onChange: function (e) { return setExportPDFTitle(e.target.value); } })),
+                        (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "Sum Attribute", containerClassName: "mt-5", value: exportSumAttributeIds, options: (_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.renderReferenceLabelOptions) === null || _o === void 0 ? void 0 : _o.call(_m, "", false, "number")) !== null && _p !== void 0 ? _p : [], staticDropdown: true, onChange: function (value) {
+                                setExportSumAttributeIds(value);
+                            } })))),
+                    react_1.default.createElement("div", { className: "mt-3 -mx-4 [&>div]:w-full [&>div]:max-w-none" }, (0, flexFilter_1.renderFlexFilterPopupContent)(exportFlexFilters, exportFilterStructure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, exportFlexActions, (_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareListFilterQuery, undefined, undefined, true, {
+                        darkMode: (_r = props.organise) === null || _r === void 0 ? void 0 : _r.darkMode,
+                        darkModeBg: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.darkModeBg,
+                    })),
+                    react_1.default.createElement("div", { className: "mt-3 flex items-center justify-between" },
+                        react_1.default.createElement("label", { className: "text-sm font-medium ".concat(((_t = props.organise) === null || _t === void 0 ? void 0 : _t.darkMode) ? "text-gray-200" : "text-gray-700") }, "Hide Sub Items"),
+                        react_1.default.createElement(toggle_1.Toggle, { text: "", direction: "right", value: hideSubItems, onClick: function () { return setHideSubItems(!hideSubItems); } })),
+                    react_1.default.createElement("div", { className: "flex justify-end mt-5 " },
+                        showEmail && (react_1.default.createElement(button_1.Button, { text: "Send to email", size: "small", type: "normal", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, exportCSVEmailInputRef.current.handleSubmit()];
+                                        case 1:
+                                            if (_a.sent()) {
+                                                handleExportCSVData();
+                                            }
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); } })),
+                        react_1.default.createElement(button_1.Button, { type: "normal", text: "Download", size: "small", className: "ml-3", onClick: function () {
+                                return handleExportCSVData(true, exportType === "print");
+                            } })))));
         }
         else if (addTabModal) {
             return (react_1.default.createElement(settingsModal_1.TabModal, { type: resolvedType, tabs: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.extendedTabs, editIndex: editTabIndex >= 0 ? editTabIndex : undefined, onChangeTabs: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.onChangeTabs, model: structure, collectionId: props.collectionId, renderReferenceLabelOptions: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.renderReferenceLabelOptions, onClose: function () {
@@ -11391,12 +11384,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 var _a, _b;
                 if (loading)
                     return;
-                if (queryForm)
-                    handleViewQuery(-1);
-                else {
-                    handlePopUpModal(false);
-                    setExportCSVEmail((_b = (_a = props.devSettings.currentUser) === null || _a === void 0 ? void 0 : _a.userEmail) !== null && _b !== void 0 ? _b : "");
-                }
+                handlePopUpModal(false);
+                setExportCSVEmail((_b = (_a = props.devSettings.currentUser) === null || _a === void 0 ? void 0 : _a.userEmail) !== null && _b !== void 0 ? _b : "");
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) })),
         react_1.default.createElement(modal_1.Modal, { darkMode: (_83 = props.organise) === null || _83 === void 0 ? void 0 : _83.darkMode, darkModeBg: (_84 = props.organise) === null || _84 === void 0 ? void 0 : _84.darkModeBg, maxWidth: "2xl", open: referenceCreationModal.id ? true : false, renderContent: function () {
                 return (react_1.default.createElement(referenceModal_1.ReferenceModal, { referenceModelSchema: referenceModelSchema, referenceDataStructure: referenceCreationModal, devSettings: props.devSettings, handleCreateRefId: function (dataId) {