Martin Macola / autoservicio

1

<app-header></app-header>

1

<app-header></app-header>

2

3

3

4

4

5

5

6

<p class="h2">Configuración de imágenes</p>

6

<p class="h2">Configuración de imágenes</p>

7

</div>

7

</div>

8

</div>

8

</div>

9

10

10

11

11

12

12

13

<input

13

<input

14

type="text"

14

type="text"

15

class="form-control form-control-lg shadow-sm rounded-pill px-5"

15

class="form-control form-control-lg shadow-sm rounded-pill px-5"

16

placeholder="Búsqueda productos"

16

placeholder="Búsqueda productos"

17

[(ngModel)]="searchTerm"

17

[(ngModel)]="searchTerm"

18

(ngModelChange)="filterItems()"

18

(ngModelChange)="filterItems()">

19

(keyup.enter)="onEnter()">

20

</div>

19

</div>

21

</div>

20

</div>

22

21

23

22

24

23

25

<h5>Productos</h5>

24

<h5>Productos</h5>

26

25

27

<thead>

26

<thead>

28

27

29

<th>Nombre</th>

28

<th>Nombre</th>

30

<th colspan="2">Imagen</th>

29

<th colspan="2">Imagen</th>

31

</tr>

30

</tr>

32

</thead>

31

</thead>

33

<tbody>

32

<tbody>

34

33

35

34

36

<p class="m-0">{{articulo.DET_LAR}}</p>

35

<p class="m-0">{{articulo.DET_LAR}}</p>

37

<p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>

36

<p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>

38

<p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>

37

<p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>

39

<p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>

38

<p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>

40

</td>

39

</td>

41

<td>

40

<td>

42

<img

41

<img

43

*ngIf="articulo.imagenes.length == 0"

42

*ngIf="articulo.imagenes.length == 0"

44

class="fade-in w-100 mx-auto img-fluid"

43

class="fade-in w-100 mx-auto img-fluid"

45

src="{{apiUrl}}/imagenes/noImage.jpg">

44

src="{{apiUrl}}/imagenes/noImage.jpg">

46

45

47

46

48

<img

47

<img

49

*ngIf="!item.fromGallery"

48

*ngIf="!item.fromGallery"

50

class="fade-in img-fluid w-100"

49

class="fade-in img-fluid w-100"

51

src="{{apiUrl}}/imagenes/{{item.imagen}}">

50

src="{{apiUrl}}/imagenes/{{item.imagen}}">

52

<img

51

<img

53

*ngIf="item.fromGallery"

52

*ngIf="item.fromGallery"

54

class="fade-in img-fluid w-100"

53

class="fade-in img-fluid w-100"

55

src="{{item.imagen}}">

54

src="{{item.imagen}}">

56

<button

55

<button

57

(click)="deleteImage(articulo.imagenes, index)"

56

(click)="deleteImage(articulo.imagenes, index)"

58

type="button"

57

type="button"

59

class="btn btn-light btn-delete-image position-absolute close">

58

class="btn btn-light btn-delete-image position-absolute close">

60

59

61

</button>

60

</button>

62

</slide>

61

</slide>

63

</carousel>

62

</carousel>

64

</td>

63

</td>

65

64

66

65

67

<input

66

<input

68

type="file"

67

type="file"

69

class="custom-file-input"

68

class="custom-file-input"

70

id="customFileLang"

69

id="customFileLang"

71

accept="image/*"

70

accept="image/*"

72

(change)="onFileSelected($event, articulo)"

71

(change)="onFileSelected($event, articulo)"

73

lang="es"

72

lang="es"

74

multiple>

73

multiple>

75

74

76

<small>Seleccionar archivo</small>

75

<small>Seleccionar archivo</small>

77

</label>

76

</label>

78

</div>

77

</div>

79

</td>

78

</td>

80

</tr>

79

</tr>

81

</tbody>

80

</tbody>

82

</table>

81

</table>

83

</div>

82

</div>

84

</div>

83

</div>

85

84

85

86

87

<pagination

88

[rotate]="false"

89

[(ngModel)]="paginationData.page"

90

[totalItems]="paginationData.rowCount"

91

[maxSize]="paginationData.pageCount"

92

[itemsPerPage]="paginationData.pageSize"

93

(pageChanged)="pageChanged($event)"

94

[boundaryLinks]="true"

95

previousText="&lsaquo;"

96

nextText="&rsaquo;"

97

firstText="«"

98

lastText="»"

99

></pagination>

100

</div>

101

</div>

102

86

</div>

103

</div>

GITLAB

Martin Macola / autoservicio

Agregado paginador.

 <app-header></app-header>
 <div class="container-fluid">
   <div class="row m-3">
     <div class="col">
       <p class="h2">Configuración de imágenes</p>
     </div>
   </div>
   <div class="row mx-3 search">
     <div class="col">
       <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
       <input
         type="text"
         class="form-control form-control-lg shadow-sm rounded-pill px-5"
         placeholder="Búsqueda productos"
         [(ngModel)]="searchTerm"
-        (ngModelChange)="filterItems()"
+        (ngModelChange)="filterItems()">
-        (keyup.enter)="onEnter()">
     </div>
   </div>
-  <div class="row m-3 vh-70 overflow-scroll">
+  <div class="row m-3 vh-60 overflow-scroll">
     <div class="col">
       <h5>Productos</h5>
       <table class="table table-striped table-hover table-borderless shadow">
         <thead>
           <tr class="bg-primary text-center text-white shadow-sm">
             <th>Nombre</th>
             <th colspan="2">Imagen</th>
           </tr>
         </thead>
         <tbody>
           <tr class="shadow-sm" *ngFor="let articulo of auxProductos">
             <td class="align-middle">
               <p class="m-0">{{articulo.DET_LAR}}</p>
               <p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>
               <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>
               <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>
             </td>
             <td>
               <img
                 *ngIf="articulo.imagenes.length == 0"
                 class="fade-in w-100 mx-auto img-fluid"
                 src="{{apiUrl}}/imagenes/noImage.jpg">
               <carousel [interval]="false">
                 <slide *ngFor="let item of articulo.imagenes; let index = index">
                   <img
                     *ngIf="!item.fromGallery"
                     class="fade-in img-fluid w-100"
                     src="{{apiUrl}}/imagenes/{{item.imagen}}">
                   <img
                     *ngIf="item.fromGallery"
                     class="fade-in img-fluid w-100"
                     src="{{item.imagen}}">
                   <button
                     (click)="deleteImage(articulo.imagenes, index)"
                     type="button"
                     class="btn btn-light btn-delete-image position-absolute close">
                       <span aria-hidden="true">&times;</span>
                   </button>
                 </slide>
               </carousel>
             </td>
             <td class="align-middle text-center">
               <div class="custom-file">
                 <input
                   type="file"
                   class="custom-file-input"
                   id="customFileLang"
                   accept="image/*"
                   (change)="onFileSelected($event, articulo)"
                   lang="es"
                   multiple>
                 <label class="custom-file-label text-left pr-5" for="customFileLang">
                   <small>Seleccionar archivo</small>
                 </label>
               </div>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>
+  <div class="row" *ngIf="paginationData">
+    <div class="col">
+      <pagination
+        [rotate]="false"
+        [(ngModel)]="paginationData.page"
+        [totalItems]="paginationData.rowCount"
+        [maxSize]="paginationData.pageCount"
+        [itemsPerPage]="paginationData.pageSize"
+        (pageChanged)="pageChanged($event)"
+        [boundaryLinks]="true"
+        previousText="&lsaquo;"
+        nextText="&rsaquo;"
+        firstText="&laquo;"
+        lastText="&raquo;"
+      ></pagination>
+    </div>
+  </div>
 </div>