Merge branch 'main' into ion-notification-service

projects/ion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brisanet/ion",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Brisanet/ion.git"

projects/ion/src/core/bn-table/bn-table.spec.ts

@@ -90,6 +90,24 @@ describe('BnTable', () => {
     });
   });
 
+  it('should add order on payload in first load when column have a order by default', async () => {
+    const config: IBnTable<MockItemData> = {
+      service: new MockEmptyService(),
+      tableConfig: {
+        columns: [
+          { label: 'Name', key: 'name', desc: true },
+          { label: 'Url', key: 'url' },
+        ],
+        actions: [{ label: 'Remove', icon: 'trash' }],
+      },
+    };
+    const bnTableWithDefaultOrder: BnTable<MockItemData> =
+      new BnTable<MockItemData>(config);
+
+    expect(bnTableWithDefaultOrder.payload.order).toBe('name');
+    expect(bnTableWithDefaultOrder.payload.sort).toBe('desc');
+  });
+
   it('should return empty array when dont have data or dados', async () => {
     const config: IBnTable<MockItemData> = {
       service: new MockEmptyService(),

projects/ion/src/core/bn-table/bn-table.ts

@@ -46,6 +46,7 @@ export default class BnTable<DataType> {
 
   private service: BnService<DataType>;
   private formatData: (data: DataType[]) => DataType[];
+  private firstLoad = true;
 
   constructor(config: IBnTable<DataType>) {
     this.service = config.service;
@@ -71,6 +72,21 @@ export default class BnTable<DataType> {
   smartData(): void {
     this.configTable.loading = true;
 
+    if (this.firstLoad) {
+      const firstOrderedColumn = this.configTable.columns.filter(
+        (column) => column.desc !== undefined
+      )[0];
+
+      if (firstOrderedColumn) {
+        this.handleSort({
+          column: firstOrderedColumn.key,
+          desc: firstOrderedColumn.desc,
+        });
+      }
+
+      this.firstLoad = false;
+    }
+
     const totalRequest$ = this.payload.total
       ? this.service.list(this.payload).pipe(take(1))
       : of(null);

projects/ion/src/lib/smart-table/smart-table.component.html

@@ -246,7 +246,7 @@
                     [circularButton]="true"
                     (ionOnClick)="handleEvent(row, action)"
                     [disabled]="
-                      action.disabled ? !disableAction(row, action) : false
+                      action.disabled ? disableAction(row, action) : false
                     "
                   ></ion-button>
                 </div>

projects/ion/src/lib/smart-table/smart-table.component.spec.ts

@@ -345,13 +345,27 @@ describe('Table > Actions', () => {
     );
   });
 
-  it('should render trash button disabled when he caracther is less than 160cm', async () => {
+  it('should render trash button enable when he character is less than 160cm', async () => {
     const tableItemDeleted = {
       ...tableWithActions,
     } as IonSmartTableProps<Character>;
 
     tableItemDeleted.config.data = [{ height: 96, name: 'RS-D2', mass: 96 }];
 
+    await sut(tableItemDeleted);
+    expect(screen.getByTestId('row-0-Desabilitar')).toHaveAttribute(
+      'ng-reflect-disabled',
+      'false'
+    );
+  });
+
+  it('should render trash button disabled when he character is taller than 160cm', async () => {
+    const tableItemDeleted = {
+      ...tableWithActions,
+    } as IonSmartTableProps<Character>;
+
+    tableItemDeleted.config.data = [{ height: 196, name: 'RS-D2', mass: 96 }];
+
     await sut(tableItemDeleted);
     expect(screen.getByTestId('row-0-Desabilitar')).toHaveAttribute(
       'ng-reflect-disabled',

projects/ion/src/lib/table/table.component.html

@@ -171,7 +171,7 @@
                     [circularButton]="true"
                     (ionOnClick)="handleEvent(row, action)"
                     [disabled]="
-                      action.disabled ? !disableAction(row, action) : false
+                      action.disabled ? disableAction(row, action) : false
                     "
                   ></ion-button>
                 </div>
@@ -183,17 +183,36 @@
     </tbody>
   </table>
   <div *ngIf="smartData.length === 0" class="noData">
+    <ion-spinner
+      *ngIf="config.loading; else noData"
+      [size]="42"
+      color="primary"
+    ></ion-spinner>
+  </div>
+
+  <ng-template #noData>
     <ion-icon size="40" type="exclamation-rounded"></ion-icon>
     <span>Não há dados</span>
-  </div>
+  </ng-template>
+
   <div
     *ngIf="config.pagination"
     data-testid="pagination-container"
     class="footer-table"
   >
-    <span>{{ config.pagination.total }}</span>
+    <span *ngIf="!config.loading">{{ config.pagination.total }}</span>
+
+    <span
+      *ngIf="config.loading"
+      class="loading-message"
+      data-testid="loading-pagination"
+    >
+      Carregando página
+    </span>
+
     <div style="overflow-x: auto">
       <ion-pagination
+        [loading]="config.loading"
         [total]="config.pagination.total"
         [itemsPerPage]="config.pagination.itemsPerPage"
         [page]="config.pagination.page"

projects/ion/src/lib/table/table.component.spec.ts

@@ -19,6 +19,7 @@ import { SafeAny } from '../utils/safe-any';
 import { StatusType } from './../core/types/status';
 import { IonTableComponent } from './table.component';
 import { IonTableModule } from './table.module';
+import { IonSpinnerModule } from './../spinner/spinner.module';
 import { ActionTable, Column, ColumnType, ConfigTable } from './utilsTable';
 
 const disabledArrowColor = '#CED2DB';
@@ -88,6 +89,7 @@ const sut = async (
       IonTagModule,
       IonPopConfirmModule,
       IonTooltipModule,
+      IonSpinnerModule,
     ],
   });
 };
@@ -243,6 +245,7 @@ describe('Table > Changes', () => {
         IonTagModule,
         IonPopConfirmModule,
         IonTooltipModule,
+        IonSpinnerModule,
       ],
     });
     const newData = [{ name: 'Meteora', deleted: false, id: 2 }];
@@ -264,6 +267,7 @@ describe('Table > Changes', () => {
         IonTagModule,
         IonPopConfirmModule,
         IonTooltipModule,
+        IonSpinnerModule,
       ],
     });
     propsToChange.config.data = [];
@@ -278,7 +282,7 @@ describe('Table > Actions', () => {
       label: 'Desabilitar',
       icon: 'block',
       disabled: (row: SafeAny): boolean => {
-        return !row.deleted;
+        return row.deleted;
       },
     },
     {
@@ -333,6 +337,22 @@ describe('Table > Actions', () => {
     expect(within(rowAction).getByRole('button')).toHaveClass('danger');
   });
 
+  it('should render trash button enabled when the item is not deleted', async () => {
+    const tableItemDeleted = {
+      ...tableWithActions,
+    } as IonTableProps<Disco>;
+
+    tableItemDeleted.config.data = [
+      { id: 1, name: 'Item Deleted', deleted: false },
+    ];
+
+    await sut(tableItemDeleted);
+    expect(screen.getByTestId('row-0-Desabilitar')).toHaveAttribute(
+      'ng-reflect-disabled',
+      'false'
+    );
+  });
+
   it('should render trash button disabled when the item is deleted', async () => {
     const tableItemDeleted = {
       ...tableWithActions,
@@ -692,6 +712,28 @@ describe('Table > Pagination', () => {
     },
   };
 
+  it('should render loading when table is loading', async () => {
+    const tableWithLoading = JSON.parse(
+      JSON.stringify(tableWithPagination)
+    ) as IonTableProps<Disco>;
+    const totalPagination = screen.queryByTestId('total-pagination');
+    tableWithLoading.config.loading = true;
+    await sut(tableWithLoading);
+    expect(screen.getByTestId('loading-pagination')).toBeInTheDocument();
+    expect(totalPagination).not.toBeInTheDocument();
+  });
+
+  it('should render loading when dont have data and table is loading', async () => {
+    const tableWithLoading = JSON.parse(
+      JSON.stringify(tableWithPagination)
+    ) as IonTableProps<Disco>;
+    tableWithLoading.config.loading = true;
+    tableWithLoading.config.data = [];
+
+    await sut(tableWithLoading);
+    expect(screen.getByTestId('ion-spinner')).toBeInTheDocument();
+  });
+
   it('should render the pagination', async () => {
     await sut(tableWithPagination);
     expect(screen.getByTestId('pagination-container')).toBeInTheDocument();
@@ -876,6 +918,7 @@ const sutCustomRowTemplate = async (
       IonTagModule,
       IonPopConfirmModule,
       IonTableModule,
+      IonSpinnerModule,
     ],
   });
 };

projects/ion/src/lib/table/table.module.ts

@@ -8,6 +8,7 @@ import { IonIconModule } from '../icon/icon.module';
 import { IonPaginationModule } from '../pagination/pagination.module';
 import { IonPopConfirmModule } from '../popconfirm/popconfirm.module';
 import { IonTooltipModule } from '../tooltip/tooltip.module';
+import { IonSpinnerModule } from '../spinner/spinner.module';
 
 @NgModule({
   declarations: [IonTableComponent],
@@ -20,6 +21,7 @@ import { IonTooltipModule } from '../tooltip/tooltip.module';
     IonPaginationModule,
     IonPopConfirmModule,
     IonTooltipModule,
+    IonSpinnerModule,
   ],
   exports: [IonTableComponent],
 })

projects/ion/src/lib/use-table/use-table.component.ts

@@ -17,7 +17,10 @@ export class IonUseTableComponent extends BnTable<User> {
     super({
       service,
       tableConfig: {
-        columns: [{ label: 'Nome', sort: true, key: 'nome' }],
+        columns: [
+          { label: 'Nome', sort: true, key: 'nome', desc: true },
+          { label: 'Url', sort: true, key: 'url' },
+        ],
         actions: [
           {
             icon: 'trash',

projects/ion/src/public-api.ts

@@ -53,3 +53,4 @@ export * from './lib/tooltip/tooltip.module';
 export * from './lib/typography/';
 export { default as debounce } from './lib/utils/debounce';
 export { default as BnTable } from './core/bn-table/bn-table';
+export * from './lib/table/utilsTable';