Bug fixes : last 10 logs, Flushing data in case of new node fetch , Showing stringified data in case of array and object data types

src/components/editorPage/editor-res/editor-res.tsx

@@ -15,12 +15,14 @@ export class EditorRes {
  const chips = { ...state.order };
  delete chips[item];
  state.order = chips;
+ state.refreshData();
  }
 
  removeSearchChip = (item) => {
  const chips = { ...state.filter };
  delete chips[item];
  state.filter = chips;
+ state.refreshData();
  }
 
  computeHeader() {
@@ -40,20 +42,27 @@ export class EditorRes {
  rowsHandler(e) {
  state.limit = e.target.value;
  state.page = 1;
+ state.offset = (state.limit*state.page)- state.limit;
+ state.refreshData();
  }
 
  nextPage() {
  ++state.page;
+ state.offset = (state.limit*state.page)- state.limit;
+ state.refreshData();
  }
 
  prevPage() {
  --state.page;
+ state.offset = (state.limit*state.page)- state.limit;
+ state.refreshData();
  }
 
  toggleSortMethod = (id: string) => {
  const chips = {};
  chips[id] = state.order[id] === "desc" ? 'asc' : 'desc';
  state.order = chips;
+ state.refreshData();
  };
 
  searchMethod(searchValue: string, colName: string, searchOption: string, textSearchOption: string, numberSearchOption: string) {
@@ -67,6 +76,7 @@ export class EditorRes {
  chips[colName] = searchOperation;
 
  state.filter = chips;
+ state.refreshData();
  }
 
 

src/components/editorPage/node-item/node-item.tsx

@@ -10,6 +10,16 @@ const DROPDOWN_ITEMS = ['View'];
 })
 export class NodeItem {
  @Prop() nodeError:null | string;
+ nodeChangeHandler(nodeName){
+ state.selectedNodeName = nodeName
+ state.limit= 10,
+ state.offset= 0, //remove
+ state.page= 1,
+ state.order= {},
+ state.filter= {},
+ state.total= 0,
+ state.refreshData()
+ }
  render() {
  return (
  <div style={{ overflow: 'visible' }} class={'py-4 px-3 bg-gray-100 rounded-md'}>
@@ -19,7 +29,7 @@ export class NodeItem {
  <li>
  <div class="flex justify-between p-2 text-base font-normal text-gray-900 rounded-lg bg-gray-200">
  <div class="ml-3">{item}</div>
- <menu-drop-down listTitle={item} list={DROPDOWN_ITEMS} fetchData={nodeName => (state.selectedNodeName = nodeName)}></menu-drop-down>
+ <menu-drop-down listTitle={item} list={DROPDOWN_ITEMS} fetchData={(nodeName) => this.nodeChangeHandler(nodeName)}></menu-drop-down>
  </div>
  </li>
  );

src/components/editorPage/query-result-table/query-result-table.tsx

@@ -30,7 +30,6 @@ export class QueryResultTable {
  @Prop() toggleSortMethod: any;
  @Prop() searchMethod: any;
  @Prop() clearSearch: any;
- // @Prop() isLoading: boolean;
  @Prop() isLoadingError: boolean;
 
  @State() data: any;
@@ -43,6 +42,21 @@ export class QueryResultTable {
  this.from = (this.currentPage - 1) * this.limit + 1;
  this.to = this.currentPage * this.limit;
  }
+ dataFormatter(rawData) {
+ let data: any = rawData;
+ if(typeof(data) !== 'string' && typeof(data) !== 'number'){
+ data = JSON.stringify(data);
+ }
+ if (data.length > 25) {
+ return data.slice(0, 25) + '...';
+ } else {
+ if (/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/.test(data)) {
+ return data.slice(0, 16).split('T')[0] + ' at ' + data.slice(11, 19);
+ } else {
+ return data;
+ }
+ }
+ }
 
  render() {
  const trList = [];
@@ -95,17 +109,10 @@ export class QueryResultTable {
  this.tableBody.map((item: any) => (
  <tr class="hover:bg-gray-100 transition">
  {this.tableHeader.map((id: any) => (
- // <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{item[id.alias]}</td>
  <td title={item[id.alias]} text-overflow:ellipsis class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
  {!id.click.clickable ? (
  item[id.alias] ? (
- item[id.alias].length > 25 ? (
- item[id.alias].slice(0, 25) + '...'
- ) : /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/.test(item[id.alias]) ? (
- item[id.alias].slice(0, 16).split('T')[0] + ' at ' + item[id.alias].slice(11, 19)
- ) : (
- item[id.alias]
- )
+ this.dataFormatter(item[id.alias])
  ) : (
  item[id.alias]
  )

src/components/editorPage/store.ts

@@ -34,18 +34,9 @@ const { state, onChange, reset } = createStore({
  timeTaken:null,
  refresh:null,
 
-});
-
-onChange('selectedNodeName', value => {
- fetchData(value);
-});
-
-onChange('order', () => {
- fetchData(state.selectedNodeName);
-});
-
-onChange('filter', () => {
- fetchData(state.selectedNodeName);
+ refreshData: async () => {
+ await fetchData(state.selectedNodeName)
+ }
 });
 
 onChange('refresh', () => {
@@ -130,14 +121,5 @@ const fetchData = async (nodeName: string) => {
  }
 };
 
-onChange('page', (value) => {
- state.offset = (state.limit*value)- state.limit;
- fetchData(state.selectedNodeName);
-});
-
-onChange('limit', () => {
- fetchData(state.selectedNodeName);
-});
-
 export default state;
-export { fetchData, reset }
+export { fetchData, reset }

src/components/userProfilePage/last-logs/last-logs.tsx

@@ -109,7 +109,7 @@ export class LastLogs {
  this.isLoading = true;
  this.isLoadingError = false;
  try {
- const response =await axios.get(`http://localhost:3000/api/editor/query/logs?limit=49&offset=0&filter_ownerId=${this.user}&order=desc`)
+ const response =await axios.get(`${this.url}api/editor/query/logs?limit=49&offset=0&filter_ownerId=${this.user}&order=desc`)
  response.data.respond.map(item=>{item.isCustomQuery===true? item["isCustomQuery"]="Custom Query": item["isCustomQuery"]="Builder Query"});
  this.total = response.data.total;
  this.total = response.data.total;