feat: add select from items per page in table and smart table paginat…

…ion (#360) * feat: select from items per page in table and smart-table pagination #352 * feat: add select from items per page in table and smart table pagination * feat: adjust dropdown position when his at bottom's page * fix: dropdown showing up above footer table Co-authored-by: Pedro Miguel <[email protected]> Co-authored-by: Iury Nogueira <[email protected]>
Brisanet · Jan 5, 2023 · ae8973b · ae8973b
1 parent 3cbb324
commit ae8973b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/projects/ion/src/lib/dropdown/dropdown.component.ts b/projects/ion/src/lib/dropdown/dropdown.component.ts
@@ -45,6 +45,10 @@ export class DropdownComponent implements AfterViewInit {
     const elementProps = element.getBoundingClientRect();
     const elementRight = elementProps.right;
     elementRight > widthContainer && (element.style.right = '0');
+
+    const heightContainer = window.innerHeight;
+    const elementBottom = elementProps.bottom;
+    elementBottom > heightContainer && (element.style.bottom = '42px');
   }
 
   mouseEnter(option: DropdownItem): void {

diff --git a/projects/ion/src/lib/pagination/pagination.component.html b/projects/ion/src/lib/pagination/pagination.component.html
@@ -6,6 +6,7 @@
     [options]="optionsPage"
     customId="btn-select"
     (selected)="changeItemsPerPage($event)"
+    type="secondary"
   ></ion-button>
 
   <ion-button

diff --git a/projects/ion/src/lib/smart-table/smart-table.component.html b/projects/ion/src/lib/smart-table/smart-table.component.html
@@ -117,7 +117,6 @@
     <ion-icon size="40" type="exclamation-rounded"></ion-icon>
     <span>Não há dados</span>
   </div>
-
   <div
     *ngIf="config.pagination && config.data && config.data.length"
     data-testid="pagination-container"
@@ -137,6 +136,7 @@
         [page]="config.pagination.page"
         size="md"
         (events)="paginationEvents($event)"
+        [allowChangeQtdItems]="true"
       ></ion-pagination>
     </div>
   </div>

diff --git a/projects/ion/src/lib/table/table.component.scss b/projects/ion/src/lib/table/table.component.scss
@@ -5,14 +5,14 @@ $radius: 8px;
 .ion-table {
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
   border-radius: $radius;
-  max-height: 660px;
-  overflow-y: auto;
 }
 
 table {
   border-collapse: collapse;
   position: relative;
   width: 100%;
+  max-height: 592px;
+  overflow-y: auto;
 
   & .border-header {
     border-bottom: 1px solid $neutral-4;
@@ -135,7 +135,6 @@ table {
   display: flex;
   justify-content: space-between;
   padding: 16px;
-  overflow-x: auto;
   gap: spacing(2);
 
   position: sticky;
@@ -152,6 +151,7 @@ table {
   font-size: 14px;
   line-height: 20px;
   color: $neutral-7;
+
 }
 
 .noData {