Эх сурвалжийг харах

HUE-9101 [editor] Extract common paginator component

Johan Ahlen 6 жил өмнө
parent
commit
1c2491e517

+ 15 - 0
desktop/core/src/desktop/js/apps/notebook2/components/__snapshots__/ko.paginator.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ko.paginator.js should render component 1`] = `
+"<div data-bind=\\"descendantsComplete: descendantsComplete, component: { name: &quot;paginator&quot;, params: params }\\"><div class=\\"pagination\\" data-bind=\\"visible: totalPages() > 1\\" style=\\"\\">
+  <ul>
+    <li data-bind=\\"css: { 'disabled' : currentPage() === 1 }\\" class=\\"disabled\\">
+      <a href=\\"javascript: void(0);\\" data-bind=\\"click: previousPage.bind($data)\\">Prev</a>
+    </li>
+    <li class=\\"active\\"><span data-bind=\\"text: currentPage() + '/' + totalPages()\\">1/5</span></li>
+    <li data-bind=\\"css: { 'disabled' : currentPage() === totalPages() }\\">
+      <a href=\\"javascript: void(0);\\" data-bind=\\"click: nextPage.bind($data)\\">Next</a>
+    </li>
+  </ul>
+</div></div>"
+`;

+ 63 - 0
desktop/core/src/desktop/js/apps/notebook2/components/ko.paginator.js

@@ -0,0 +1,63 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import componentUtils from 'ko/components/componentUtils';
+import DisposableComponent from 'ko/components/DisposableComponent';
+import I18n from 'utils/i18n';
+
+export const NAME = 'paginator';
+
+// prettier-ignore
+const TEMPLATE = `
+<div class="pagination" data-bind="visible: totalPages() > 1" style="display: none;">
+  <ul>
+    <li data-bind="css: { 'disabled' : currentPage() === 1 }">
+      <a href="javascript: void(0);" data-bind="click: previousPage.bind($data)">${ I18n("Prev") }</a>
+    </li>
+    <li class="active"><span data-bind="text: currentPage() + '/' + totalPages()"></span></li>
+    <li data-bind="css: { 'disabled' : currentPage() === totalPages() }">
+      <a href="javascript: void(0);" data-bind="click: nextPage.bind($data)">${ I18n("Next") }</a>
+    </li>
+  </ul>
+</div>
+`;
+
+class Paginator extends DisposableComponent {
+  constructor(params, element) {
+    super();
+    this.totalPages = params.totalPages;
+    this.currentPage = params.currentPage;
+    this.onPageChange = params.onPageChange;
+
+    if (this.onPageChange) {
+      this.subscribe(this.currentPage, this.onPageChange);
+    }
+  }
+
+  nextPage() {
+    if (this.currentPage() < this.totalPages()) {
+      this.currentPage(this.currentPage() + 1);
+    }
+  }
+
+  previousPage() {
+    if (this.currentPage() !== 1) {
+      this.currentPage(this.currentPage() - 1);
+    }
+  }
+}
+
+componentUtils.registerComponent(NAME, Paginator, TEMPLATE);

+ 15 - 0
desktop/core/src/desktop/js/apps/notebook2/components/ko.paginator.test.js

@@ -0,0 +1,15 @@
+import { koSetup } from 'jest/koTestUtils';
+import { NAME } from './ko.paginator';
+
+describe('ko.paginator.js', () => {
+  const setup = koSetup();
+
+  it('should render component', async () => {
+    const element = await setup.renderComponent(NAME, {
+      totalPages: () => 5,
+      currentPage: () => 1
+    });
+
+    expect(element.innerHTML).toMatchSnapshot();
+  });
+});

+ 11 - 24
desktop/core/src/desktop/js/apps/notebook2/components/ko.queryHistory.js

@@ -31,6 +31,8 @@ export const NAME = 'query-history';
 export const HISTORY_CLEARED_EVENT = 'query.history.cleared';
 export const UPDATE_HISTORY_EVENT = 'query.history.update';
 
+import { NAME as PAGINATOR_COMPONENT } from './ko.paginator';
+
 // prettier-ignore
 const TEMPLATE = `
 <div class="clear-history-modal modal hide fade">
@@ -142,17 +144,14 @@ const TEMPLATE = `
       </table>
     <!-- /ko -->
 
-    <div class="pagination" data-bind="visible: historyTotalPages() > 1" style="display: none;">
-      <ul>
-        <li data-bind="css: { 'disabled' : historyCurrentPage() === 1 }">
-          <a href="javascript: void(0);" data-bind="click: prevHistoryPage.bind($data)">${ I18n("Prev") }</a>
-        </li>
-        <li class="active"><span data-bind="text: historyCurrentPage() + '/' + historyTotalPages()"></span></li>
-        <li data-bind="css: { 'disabled' : historyCurrentPage() === historyTotalPages() }">
-          <a href="javascript: void(0);" data-bind="click: nextHistoryPage.bind($data)">${ I18n("Next") }</a>
-        </li>
-      </ul>
-    </div>
+    <!-- ko component: {
+      name: '${ PAGINATOR_COMPONENT }',
+      params: {
+        currentPage: historyCurrentPage,
+        totalPages: historyTotalPages,
+        onPageChange: onPageChange
+      }
+    } --><!-- /ko -->
   <!-- /ko -->
 </div>
 `;
@@ -199,7 +198,7 @@ class QueryHistory extends DisposableComponent {
       }
     });
 
-    this.subscribe(this.historyCurrentPage, throttledFetch);
+    this.onPageChange = throttledFetch;
 
     this.subscribe(UPDATE_HISTORY_EVENT, throttledFetch);
 
@@ -286,24 +285,12 @@ class QueryHistory extends DisposableComponent {
     huePubSub.publish(SHOW_EVENT, { importedCallback: this.fetchHistory.bind(this) });
   }
 
-  nextHistoryPage() {
-    if (this.historyCurrentPage() < this.historyTotalPages()) {
-      this.historyCurrentPage(this.historyCurrentPage() + 1);
-    }
-  }
-
   openNotebook(uuid) {
     if (window.getSelection().toString() === '' && uuid !== this.currentNotebook.uuid()) {
       this.openFunction(uuid);
     }
   }
 
-  prevHistoryPage() {
-    if (this.historyCurrentPage() !== 1) {
-      this.historyCurrentPage(this.historyCurrentPage() - 1);
-    }
-  }
-
   async refreshStatus(statusesToRefresh, interval) {
     const statusIndex = {};
     statusesToRefresh.forEach(status => {