Skip to content

Commit b4e10b8

Browse files
ingleoingleo
committed
implemented initial mat-table component
1 parent fbf5b3d commit b4e10b8

File tree

5 files changed

+66
-13
lines changed

5 files changed

+66
-13
lines changed

‎i4t_web/client/imports/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
44
import { FlexLayoutModule } from '@angular/flex-layout';
55
import { RouterModule } from '@angular/router';
66
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
7-
import { MatGridListModule, MatSnackBarModule, MatDatepickerModule, MatNativeDateModule, MatDialogModule, MatSidenavModule, MatListModule, MatCardModule, MatButtonModule, MatInputModule, MatSelectModule, MatSlideToggleModule, MatTabsModule, MatCheckboxModule, MatSliderModule, MatProgressSpinnerModule, MatTooltipModule, MatIconModule, MatToolbarModule, MatMenuModule, MatButtonToggleModule, MatRadioModule, MatExpansionModule, MatStepperModule, MatChipsModule } from '@angular/material';
7+
import { MatGridListModule, MatSnackBarModule, MatDatepickerModule, MatNativeDateModule, MatDialogModule, MatSidenavModule, MatListModule, MatCardModule, MatButtonModule, MatInputModule, MatSelectModule, MatSlideToggleModule, MatTabsModule, MatCheckboxModule, MatSliderModule, MatProgressSpinnerModule, MatTooltipModule, MatIconModule, MatToolbarModule, MatMenuModule, MatButtonToggleModule, MatRadioModule, MatExpansionModule, MatStepperModule, MatChipsModule, MatTableModule } from '@angular/material';
88
import { HttpClientModule, HttpClient } from '@angular/common/http';
99
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
1010
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@@ -73,6 +73,7 @@ export function createTranslateLoader(http: HttpClient) {
7373
MatExpansionModule,
7474
MatStepperModule,
7575
MatChipsModule,
76+
MatTableModule,
7677
AgmCoreModule.forRoot({
7778
apiKey: 'AIzaSyCFXGTI9kCa4U7YyMd2USL9LCV_JlQinyw'
7879
}),

‎i4t_web/client/imports/app/web/administrator/payment/bags-payment/bags-payment.component.html‎

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,45 @@
11
<mat-card>
2-
<mat-card-header>
3-
<mat-card-title>{{'BAGS_PAYMENT.TITLE' | translate }}</mat-card-title>
4-
<mat-card-subtitle>{{'BAGS_PAYMENT.SUBTITLE' | translate}}</mat-card-subtitle>
5-
</mat-card-header>
2+
<mat-card-title>{{'BAGS_PAYMENT.TITLE' | translate }}</mat-card-title>
3+
<mat-card-subtitle>{{'BAGS_PAYMENT.SUBTITLE' | translate}}</mat-card-subtitle>
64

7-
<mat-card-content style="background: #FFF">
8-
5+
<mat-card-content>
6+
<div class="example-container mat-elevation-z8">
7+
<mat-table #table [dataSource]="dataSource">
8+
9+
<ng-container matColumnDef="_id">
10+
<mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
11+
<mat-cell *matCellDef="let element"> {{element._id}} </mat-cell>
12+
</ng-container>
913

14+
<ng-container matColumnDef="isActive">
15+
<mat-header-cell *matHeaderCellDef> Active </mat-header-cell>
16+
<mat-cell *matCellDef="let element"> {{element.isActive}} </mat-cell>
17+
</ng-container>
18+
19+
<ng-container matColumnDef="name">
20+
<mat-header-cell *matHeaderCellDef> Nombre </mat-header-cell>
21+
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
22+
</ng-container>
23+
24+
<ng-container matColumnDef="code">
25+
<mat-header-cell *matHeaderCellDef> Código </mat-header-cell>
26+
<mat-cell *matCellDef="let element"> {{element.code}} </mat-cell>
27+
</ng-container>
28+
29+
<ng-container matColumnDef="numericCode">
30+
<mat-header-cell *matHeaderCellDef> Código </mat-header-cell>
31+
<mat-cell *matCellDef="let element"> {{element.numericCode}} </mat-cell>
32+
</ng-container>
33+
34+
<ng-container matColumnDef="decimal">
35+
<mat-header-cell *matHeaderCellDef> Código </mat-header-cell>
36+
<mat-cell *matCellDef="let element"> {{element.decimal}} </mat-cell>
37+
</ng-container>
38+
39+
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
40+
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
41+
</mat-table>
42+
</div>
1043
</mat-card-content>
1144

1245
<mat-card-actions>

‎i4t_web/client/imports/app/web/administrator/payment/bags-payment/bags-payment.component.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.example-container {
2+
display: flex;
3+
flex-direction: column;
4+
max-height: 500px;
5+
min-width: 300px;
6+
}
7+
8+
.mat-table {
9+
overflow: auto;
10+
max-height: 500px;
11+
}

‎i4t_web/client/imports/app/web/administrator/payment/bags-payment/bags-payment.component.ts‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
22
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
3+
import { MatTableDataSource } from '@angular/material';
34
import { Router } from '@angular/router';
45
import { Meteor } from 'meteor/meteor';
56
import { MeteorObservable } from 'meteor-rxjs';
@@ -22,12 +23,14 @@ export class BagsPaymentComponent implements OnInit, OnDestroy {
2223
private _user = Meteor.userId();
2324
private _establishments: Observable<Establishment[]>;
2425
private _currencies: Observable<Currency[]>;
25-
2626
private _establishmentSub: Subscription;
2727
private _currencySub: Subscription;
28-
2928
private _ngUnsubscribe: Subject<void> = new Subject<void>();
3029

30+
private _currenciesArray: Currency[] = [];
31+
private displayedColumns = ['_id', 'isActive', 'name', 'code', 'numericCode', 'decimal'];
32+
private dataSource: any;
33+
3134
/**
3235
* MonthlyPaymentComponent Constructor
3336
* @param {Router} router
@@ -47,11 +50,18 @@ export class BagsPaymentComponent implements OnInit, OnDestroy {
4750
this.removeSubscriptions();
4851

4952
this._establishmentSub = MeteorObservable.subscribe('establishments', this._user).takeUntil(this._ngUnsubscribe).subscribe(() => {
50-
this._establishments = Establishments.find({ creation_user: this._user }).zone();
53+
this._ngZone.run(() => {
54+
this._establishments = Establishments.find({ creation_user: this._user }).zone();
55+
});
5156
});
5257

53-
this._currencySub = MeteorObservable.subscribe('getCurrenciesByUserId').takeUntil(this._ngUnsubscribe).subscribe(() => {
58+
this._currencySub = MeteorObservable.subscribe('currencies').takeUntil(this._ngUnsubscribe).subscribe(() => {
5459
this._currencies = Currencies.find({}).zone();
60+
61+
this._currenciesArray = Currencies.find({}).fetch();
62+
63+
this.dataSource = new MatTableDataSource(this._currenciesArray);
64+
console.log(this._currenciesArray);
5565
});
5666
}
5767

‎i4t_web/server/imports/publications/general/currency.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ Meteor.publish('getCurrenciesByUserId', function (_userId: string) {
2929
_currenciesIds.push(establishment.currencyId);
3030
});
3131

32-
console.log('------------------------------');
33-
console.log(_currenciesIds);
3432
return Currencies.find({ _id: { $in: _currenciesIds } });
3533
});
3634

0 commit comments

Comments
 (0)