From c1220be5bd34100cd539265eccd0aaa1f33134dd Mon Sep 17 00:00:00 2001
From: yumoqing <yumoqing@gmail.com>
Date: Mon, 11 Mar 2024 15:22:03 +0800
Subject: [PATCH] bugfix

---
 bricks/build.sh            |   4 +-
 bricks/dataviewer.js       | 291 ++++++++++++++++++++++++++++++-------
 bricks/dynamicaccordion.js | 145 +++++-------------
 3 files changed, 279 insertions(+), 161 deletions(-)

diff --git a/bricks/build.sh b/bricks/build.sh
index 47130db..625c1e4 100755
--- a/bricks/build.sh
+++ b/bricks/build.sh
@@ -1,5 +1,5 @@
-SOURCES=" factory.js uitypesdef.js utils.js i18n.js widget.js \
-	layout.js bricks.js image.js \
+SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \
+	i18n.js widget.js layout.js bricks.js image.js \
 	jsoncall.js myoperator.js scroll.js menu.js modal.js \
 	markdown_viewer.js video.js audio.js toolbar.js tab.js \
 	input.js registerfunction.js button.js accordion.js \
diff --git a/bricks/dataviewer.js b/bricks/dataviewer.js
index e2fc90c..278aced 100644
--- a/bricks/dataviewer.js
+++ b/bricks/dataviewer.js
@@ -2,70 +2,257 @@ var bricks = window.bricks || {};
 
 bricks.DataViewer = class extends bricks.VScrollPanel {
 	/*
-	opts={
-		dataurl:
-		pagerows:
-		params:
-		buffer_page:
-		viewer_url: or
-		viewer_tmpl:
-	}
+		{
+			"title":
+			"description",
+			"data_url",
+			"mobile_cols":
+			"content_view"
+			"has_content",
+			"content_toggle_field"
+			"cache_page_limit",
+			"page_rows",
+			"header":
+			"record_view"
+		}
 	*/
 	constructor(opts){
-		opts.width = '100%';
 		super(opts);
-		this.loader = new bricks.BufferedDataLoader(this, {
-				pagerows: opts.pagerows || 80,
-				buffer_pages: opts.buffer_pages || 5,
-				url: opts.dataurl,
-				method: opts.method || 'GET',
-				params: opts.params
-			});
-		this.set_css('multicolumns');
-		this.bind('min_threshold', 
-					this.loader.previousPage.bind(this.loader))
-		this.bind('max_threshold', 
-					this.loader.nextPage.bind(this.loader))
-		if (opts.viewer_tmpl){
-			this.viewer_tmpl = opts.viewer_tmpl;
+		this.set_css("accordion");
+		this.element = this.dom_element;
+		this.dataUrl = this.opts.data_url;
+		this.base_params = opts.params || {};
+		this.rows = parseInt(this.opts.page_rows);
+		this.lastPage = null;
+		this.contentUrl = this.opts.content_url;
+		this.pages = new Map(); // 用于存储已加载的页面数据
+		this.pageContents = new Map(); // 用于存储已加载的页面内容
+		this.active_content = null;
+		this.loading = false;
+		this.cachePageLimit = this.opts.cache_page_limit;
+		if (this.opts.content_view){
+			this.content_view_tmpl = JSON.stringify(this.opts.content_view);
 		}
-		if (opts.viewer_url){
-			this.get_tmpl_string();
+		if (this.opts.record_view){
+			this.record_view_tmpl = JSON.stringify(this.opts.record_view);
 		}
+		this.bind('min_threshold', this.load_previous_page.bind(this));
+		this.bind('max_threshold', this.load_next_page.bind(this));
+		this.oldscrollY = null;
+		this.render();
 	}
-	loadData(params){
-		this.loader.loadData(params)
+	create_container(){
+		this.container = new Filler();
 	}
-	get_tmpl_string(){
-		fetch(this.opts.viewer_url)
-		.then(response => response.text())
-		.then(data => {
-			bricks.debug('viewer_tmpl=', data);
-			this.viewer_tmpl = data
-			schedule_once(this.loader.loadData.bind(this.loader), 0.01);
-		});
-	}
-	clear_data(){
+
+	render(params) {
+		bricks.debug('params=', params, 'render() called');
 		this.clear_widgets();
+		this.pages = new Map(); // 用于存储已加载的页面数据
+		this.pageContents = new Map(); // 用于存储已加载的页面内容
+		params = params || {};
+		this.params = bricks.extend(this.base_params, params);
+		this.loadPage(1);
+		this.dom_element.scrollTop = 0;
+
+
 	}
-	add_rows = async function(rows, direction){
-		for (var i=0;i<rows.length;i++){
-			await this.add_row(rows[i], direction);
+
+	async loadPage(page) {
+		// 检查页面是否在缓存中
+		if (! this.pages.has(page)) {
+			var jc = new bricks.HttpJson();
+			var params = bricks.extend({}, this.params);
+			params = bricks.extend(params,{
+				page:page, 
+				rows:this.rows
+			});
+			var d = await jc.get(this.dataUrl,{params:params});
+			if (!d){
+				bricks.debug(this.dataUrl,{params:params}, 'error');
+				this.loading = false;
+				return;
+			}
+			var data = d.rows;
+			this.lastPage = Math.ceil(d.total / this.rows);
+			this.pages.set(page, data); // 将数据缓存起来
+			await this.renderAccordionItems(data, page);
+			// 检查缓存是否已满
+			if (this.pages.size > this.cachePageLimit) {
+				// 删除当前页最远的一页
+				var max, min;
+				var pages = Array.from(this.pages.keys());
+				max = Math.max(...pages);
+				min = Math.min(...pages);
+				const farthestPage = page == max? min : max;
+				this.delete_page(farthestPage);
+				this.pages.delete(farthestPage);
+			}
+		} else {
+			bricks.debug(page, 'already n buffer, do not thing');
+		}
+		return;
+	}
+	is_max_page(page){
+		const pages = Array.from(this.pages.keys());
+		return page == Math.max(...pages);
+	}
+	is_min_page(page){
+		const pages = Array.from(this.pages.keys());
+		return page == Math.min(...pages);
+	}
+	async renderRecords(data, page) {
+		var pos;
+		for (var i=0;i<data.length;i++){
+			if (this.is_max_page(page)){
+				pos = -1;
+			} else {
+				pos = i;
+			}
+			const record = data[i];
+			const item = new bricks.AccordionItem({});
+			const header = new bricks.AccordionHeader({});
+			if (this.opts.record_view){
+				var w;
+				w = await bricks.widgetBuildWithData(this.record_view_tmpl,
+						header, record);
+				if (w){
+					header.add_widget(w);
+				} else {
+					bricks.debug('bricks.widgetBuildWithData(), tmpl=', this.record_view_tmpl, 'record=', record);
+				}
+			}
+			header.textContent = record.title; // 使用数据记录的标题字段
+			var content = new bricks.VBox({
+				height:'auto',
+				display:'none'
+			});
+			content.set_css('accordion-item-content');
+			content.hide();
+			header.bind('click', this.toggle_content.bind(this, header, content, record));
+			item.add_widget(header);
+			item.add_widget(content);
+			item.set_attribute('data-page', page);
+			this.add_widget(item, pos);
+			if (pos >= 0){
+				this.dom_element.scrollTop += item.get_height();
+			} else {
+				this.dom_element.scrollTop -= item.get_height();
+			}
+		};
+	}
+	delete_page(page){
+		var items = this.dom_element.querySelectorAll('[data-page="' + page + '"]');
+		for (var i=0;i<items.length;i++) {
+			var w = items[i].bricks_widget;
+			this.remove_widget(w);
 		}
 	}
-	add_row = async function(row, direction){
-		var s = bricks.obj_fmtstr(row, this.viewer_tmpl);
-		var desc = JSON.parse(s);
-		var w = await bricks.widgetBuild(desc, this);
-		if (! w){
-			bricks.debug(desc, 'widgetBuild() failed...........');
+
+	async toggle_content(header, content, record, event){
+		var h = this.dom_element.offsetHeight  - 3 * header.dom_element.offsetHeight;
+		content.set_style('height', h + 'px');
+		if (this.active_content){
+			if (this.active_content != content){
+				this.active_content.clear_widgets();
+				this.active_content.hide();
+				this.active_content = null;
+			}
+		}
+		content.toggle_hide();
+		if (content.dom_element.style.display == 'none'){
+			bricks.debug('content just collapsed');
+			content.clear_widgets();
+			this.active_content = null;
 			return;
 		}
-		w.row_data = row;
-		var index = null;
-		if (direction == 'down') index = 0;
-		bricks.debug('w=', w, 'this=', this);
-		this.add_widget(w, index);
+		
+		var jc = new bricks.HttpJson();
+		var w;
+		if (this.content_view_tmpl){
+			w = await bricks.widgetBuildWithData(this.content_view_tmpl,
+					content, record);
+		} else if (this.contentUrl){
+			var url = this.contentUrl;
+			var params = {
+				'id':record.id
+			}
+			var desc = await jc.get(url, {params:params});
+			w = await bricks.widgetBuild(desc, content);
+		}
+		if (w){
+			content.add_widget(w);
+			this.active_content = content;
+		} else {
+			this.active_content = null;
+			content.hide();
+		}
+	}
+	get_load_page(dir){
+		var pages = Array.from(this.pages.keys());
+		if (pages.length == 0){
+			return 1;
+		}
+		if (dir=='up'){
+			var page =  Math.min(...pages);
+			bricks.debug('page=', page, pages, 'dir=', dir);
+			return page - 1;
+		} else {
+			var page = Math.max(...pages);
+			bricks.debug('page=', page, pages, 'dir=', dir);
+			return page + 1;
+		}
+	}
+	async load_previous_page(){
+		if (this.loading){
+			bricks.debug('this.loading is set, do not thing');
+			return;
+		}
+		this.loading = true;
+		try {
+			var page = this.get_load_page('up');
+			if (page > 0){
+				await this.loadPage(page);
+				var pages = Array.from(this.pages.keys());
+				bricks.debug('load_previous_page():page loaded, page=', page, pages);
+			} else {
+				var pages = Array.from(this.pages.keys());
+				bricks.debug('page NOT loaded, page=', page,
+								'lastPage=', this.lastPage,
+								'rows=', this.rows,
+								'cachePageLimit=', this.cachePageLimit,
+								'buffered page=', pages.length);
+			}
+		} catch(e){
+			bricks.debug('error happened', e);
+		}
+		this.loading = false;
+	}
+	async load_next_page(){
+		if (this.loading){
+			bricks.debug('this.loading is set, do not thing');
+			return;
+		}
+		this.loading = true;
+		try {
+			var page = this.get_load_page('down');
+			if (page <= this.lastPage){
+				await this.loadPage(page);
+				var pages = Array.from(this.pages.keys());
+				bricks.debug('load_next_page():page Loaded, page=', page, pages);
+			} else {
+				var pages = Array.from(this.pages.keys());
+				bricks.debug('page=', page,
+								'lastPage=', this.lastPage,
+								'rows=', this.rows,
+								'cachePageLimit=', this.cachePageLimit,
+								'buffered page=', pages);
+			}
+		} catch (e){
+			bricks.debug('error happened', e);
+		}
+		this.loading = false;
+		bricks.debug('load_next_page() finished');
 	}
 }
-bricks.Factory.register('DataViewer', bricks.DataViewer);
+bricks.Factory.register('DynamicAccordion', bricks.DynamicAccordion);
diff --git a/bricks/dynamicaccordion.js b/bricks/dynamicaccordion.js
index 0a55601..0a01f1e 100644
--- a/bricks/dynamicaccordion.js
+++ b/bricks/dynamicaccordion.js
@@ -25,6 +25,7 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			"title":
 			"description",
 			"data_url",
+			"data_method",
 			"content_url"
 			"content_view"
 			"cache_limit",
@@ -38,16 +39,16 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 		super(opts);
 		this.set_css("accordion");
 		this.element = this.dom_element;
-		this.dataUrl = this.opts.data_url;
-		this.base_params = opts.params || {};
-		this.rows = parseInt(this.opts.page_rows);
-		this.lastPage = null;
+		this.loader = new bricks.PageDataLoader({
+			url:this.opts.data_url,
+			params:this.opts.data_params,
+			pagerows:this.opts.page_rows,
+			method:this.opts.data_method,
+			cache_pages:this.opts.cache_limit
+		});
 		this.contentUrl = this.opts.content_url;
-		this.pages = new Map(); // 用于存储已加载的页面数据
-		this.pageContents = new Map(); // 用于存储已加载的页面内容
 		this.active_content = null;
 		this.loading = false;
-		this.cacheLimit = this.opts.cache_limit;
 		if (this.opts.content_view){
 			this.content_view_tmpl = JSON.stringify(this.opts.content_view);
 		}
@@ -56,70 +57,32 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 		}
 		this.bind('min_threshold', this.load_previous_page.bind(this));
 		this.bind('max_threshold', this.load_next_page.bind(this));
-		this.oldscrollY = null;
-		this.render();
+		schedule_once(this.render.bind(this), 0.1);
 	}
 
-	render(params) {
-		bricks.debug('params=', params, 'render() called');
-		this.clear_widgets();
-		this.pages = new Map(); // 用于存储已加载的页面数据
-		this.pageContents = new Map(); // 用于存储已加载的页面内容
+	async render(params) {
 		params = params || {};
-		this.params = bricks.extend(this.base_params, params);
-		this.loadPage(1);
-		this.dom_element.scrollTop = 0;
-
-
-	}
-
-	async loadPage(page) {
-		// 检查页面是否在缓存中
-		if (! this.pages.has(page)) {
-			var jc = new bricks.HttpJson();
-			var params = bricks.extend({}, this.params);
-			params = bricks.extend(params,{
-				page:page, 
-				rows:this.rows
-			});
-			var d = await jc.get(this.dataUrl,{params:params});
-			if (!d){
-				bricks.debug(this.dataUrl,{params:params}, 'error');
-				this.loading = false;
-				return;
-			}
-			var data = d.rows;
-			this.lastPage = Math.ceil(d.total / this.rows);
-			this.pages.set(page, data); // 将数据缓存起来
-			await this.renderAccordionItems(data, page);
-			// 检查缓存是否已满
-			if (this.pages.size > this.cacheLimit) {
-				// 删除当前页最远的一页
-				var max, min;
-				var pages = Array.from(this.pages.keys());
-				max = Math.max(...pages);
-				min = Math.min(...pages);
-				const farthestPage = page == max? min : max;
-				this.delete_page(farthestPage);
-				this.pages.delete(farthestPage);
-			}
+		bricks.debug('params=', params, 'render() called');
+		var d = await this.loader.loadData(params);
+		if (d){
+			this.clear_widgets();
+			await this.dataHandle(d);
 		} else {
-			bricks.debug(page, 'already n buffer, do not thing');
+			bricks.debug(params, 'load data return null');
 		}
-		return;
 	}
-	is_max_page(page){
-		const pages = Array.from(this.pages.keys());
-		return page == Math.max(...pages);
-	}
-	is_min_page(page){
-		const pages = Array.from(this.pages.keys());
-		return page == Math.min(...pages);
+	async dataHandle(d){
+		var data = d.rows;
+		var page = d.add_page;
+		await this.renderAccordionItems(data, page);
+		if (d.delete_page){
+			this.delete_page(d.delete_page);
+		}
 	}
 	async renderAccordionItems(data, page) {
 		var pos;
 		for (var i=0;i<data.length;i++){
-			if (this.is_max_page(page)){
+			if (this.loader.is_max_page(page)){
 				pos = -1;
 			} else {
 				pos = i;
@@ -137,7 +100,6 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 					bricks.debug('bricks.widgetBuildWithData(), tmpl=', this.record_view_tmpl, 'record=', record);
 				}
 			}
-			header.textContent = record.title; // 使用数据记录的标题字段
 			var content = new bricks.VBox({
 				height:'auto',
 				display:'none'
@@ -149,11 +111,6 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			item.add_widget(content);
 			item.set_attribute('data-page', page);
 			this.add_widget(item, pos);
-			if (pos >= 0){
-				this.dom_element.scrollTop += item.get_height();
-			} else {
-				this.dom_element.scrollTop -= item.get_height();
-			}
 		};
 	}
 	delete_page(page){
@@ -163,7 +120,6 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			this.remove_widget(w);
 		}
 	}
-
 	async toggle_content(header, content, record, event){
 		var h = this.dom_element.offsetHeight  - 3 * header.dom_element.offsetHeight;
 		content.set_style('height', h + 'px');
@@ -203,21 +159,6 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			content.hide();
 		}
 	}
-	get_load_page(dir){
-		var pages = Array.from(this.pages.keys());
-		if (pages.length == 0){
-			return 1;
-		}
-		if (dir=='up'){
-			var page =  Math.min(...pages);
-			bricks.debug('page=', page, pages, 'dir=', dir);
-			return page - 1;
-		} else {
-			var page = Math.max(...pages);
-			bricks.debug('page=', page, pages, 'dir=', dir);
-			return page + 1;
-		}
-	}
 	async load_previous_page(){
 		if (this.loading){
 			bricks.debug('this.loading is set, do not thing');
@@ -225,21 +166,16 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 		}
 		this.loading = true;
 		try {
-			var page = this.get_load_page('up');
-			if (page > 0){
-				await this.loadPage(page);
-				var pages = Array.from(this.pages.keys());
-				bricks.debug('load_previous_page():page loaded, page=', page, pages);
+			var d = await this.loader.loadPreviousPage();
+			if (d){
+				this.dataHandle(d);
+				var total = this.dom_element.scrollHeight - this.dom_element.clientHeight;
+				this.dom_element.scrollTop = d.pos_rate * total;
 			} else {
-				var pages = Array.from(this.pages.keys());
-				bricks.debug('page NOT loaded, page=', page,
-								'lastPage=', this.lastPage,
-								'rows=', this.rows,
-								'cacheLimit=', this.cacheLimit,
-								'buffered page=', pages.length);
+				bricks.debug(this.loader, 'load previous page error');
 			}
-		} catch(e){
-			bricks.debug('error happened', e);
+		} catch (e) {
+			bricks.debug('e=', e);
 		}
 		this.loading = false;
 	}
@@ -250,18 +186,13 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 		}
 		this.loading = true;
 		try {
-			var page = this.get_load_page('down');
-			if (page <= this.lastPage){
-				await this.loadPage(page);
-				var pages = Array.from(this.pages.keys());
-				bricks.debug('load_next_page():page Loaded, page=', page, pages);
+			var d = await this.loader.loadNextPage();
+			if (d){
+				this.dataHandle(d);
+				var total = this.dom_element.scrollHeight - this.dom_element.clientHeight;
+				this.dom_element.scrollTop = d.pos_rate * total;
 			} else {
-				var pages = Array.from(this.pages.keys());
-				bricks.debug('page=', page,
-								'lastPage=', this.lastPage,
-								'rows=', this.rows,
-								'cacheLimit=', this.cacheLimit,
-								'buffered page=', pages);
+				bricks.debug(this.loader, 'load next page error');
 			}
 		} catch (e){
 			bricks.debug('error happened', e);