Marcelo Puebla / configuracion-imagenes

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

<span

12

<span

13

title="Buscar"

13

title="Buscar"

14

class="fa fa-search form-control-lg form-control-search pl-3"

14

class="fa fa-search form-control-lg form-control-search pl-3"

15

(click)="search()"></span>

15

(click)="search()"></span>

16

<input

16

<input

17

type="text"

17

type="text"

18

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

18

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

19

placeholder="Búsqueda productos"

19

placeholder="Búsqueda productos"

20

[(ngModel)]="searchTerm"

20

[(ngModel)]="searchTerm"

21

[disabled]="buscando"

21

[disabled]="buscando"

22

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

22

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

23

</div>

23

</div>

24

</div>

24

</div>

25

26

26

27

27

28

<h5>Productos</h5>

28

<h5>Productos</h5>

29

29

30

<thead>

30

<thead>

31

31

32

<th>Nombre</th>

32

<th>Nombre</th>

33

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

33

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

34

</tr>

34

</tr>

35

</thead>

35

</thead>

36

<tbody>

36

<tbody>

37

37

38

38

39

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

39

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

40

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

40

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

41

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

41

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

42

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

42

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

43

</td>

43

</td>

44

<td>

44

<td>

45

<img

45

<img

46

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

46

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

47

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

47

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

48

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

48

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

49

49

50

50

51

<img

51

<img

52

*ngIf="!item.fromGallery"

52

*ngIf="!item.fromGallery"

53

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

53

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

54

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

54

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

55

<img

55

<img

56

*ngIf="item.fromGallery"

56

*ngIf="item.fromGallery"

57

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

57

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

58

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

58

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

59

<button

59

<button

60

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

60

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

61

type="button"

61

type="button"

62

class="btn btn-lg btn-delete-image position-absolute">

62

class="btn btn-lg btn-delete-image position-absolute">

63

63

64

</button>

64

</button>

65

</slide>

65

</slide>

66

</carousel>

66

</carousel>

67

</td>

67

</td>

68

68

69

69

70

<input

70

<input

71

type="file"

71

type="file"

72

class="custom-file-input"

72

class="custom-file-input"

73

id="customFileLang"

73

id="customFileLang"

74

accept="image/*"

74

accept="image/*"

75

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

75

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

76

lang="es"

76

lang="es"

77

multiple>

77

multiple>

78

78

79

<small>Seleccionar archivo</small>

79

<small>Seleccionar archivo</small>

80

</label>

80

</label>

81

</div>

81

</div>

82

</td>

82

</td>

83

</tr>

83

</tr>

84

</tbody>

84

</tbody>

85

</table>

85

</table>

86

</div>

86

</div>

87

</div>

87

</div>

88

89

89

90

<div>

91

92

</div>

93

90

94

95

Por el momento la paginación no funciona.

96

</span>

97

<pagination

91

<pagination

98

[disabled]="true"

92

[disabled]="true"

99

[rotate]="false"

93

[rotate]="false"

100

[(ngModel)]="paginationData.page"

94

[(ngModel)]="paginationData.page"

101

[totalItems]="paginationData.rowCount"

95

[totalItems]="paginationData.rowCount"

102

[maxSize]="10"

96

[maxSize]="10"

103

[itemsPerPage]="paginationData.pageSize"

97

[itemsPerPage]="paginationData.pageSize"

104

(pageChanged)="pageChanged($event)"

98

(pageChanged)="pageChanged($event)"

105

[boundaryLinks]="true"

99

[boundaryLinks]="true"

106

[disabled]="disabledPaginador"

100

[disabled]="disabledPaginador"

107

previousText="&lsaquo;"

101

previousText="&lsaquo;"

108

nextText="&rsaquo;"

102

nextText="&rsaquo;"

109

firstText="«"

103

firstText="«"

110

lastText="»"

104

lastText="»"

111

></pagination>

105

></pagination>

112

</div>

106

</div>

113

</div>

107

</div>

114

108

115

</div>

109

</div>

116

110

GITLAB

Marcelo Puebla / configuracion-imagenes

Merge branch 'master' into 'master'

 <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
         title="Buscar"
         class="fa fa-search form-control-lg form-control-search pl-3"
         (click)="search()"></span>
       <input
         type="text"
         class="form-control form-control-lg shadow-sm rounded-pill px-5"
         placeholder="Búsqueda productos"
         [(ngModel)]="searchTerm"
         [disabled]="buscando"
         (keyup.enter)="search()">
     </div>
   </div>
   <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 articulos">
             <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="{{apiImagenes}}/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="{{apiImagenes}}/imagenes/{{item.imagen}}">
                   <img
                     *ngIf="item.fromGallery"
                     class="fade-in img-fluid w-100"
                     src="{{item.base64}}">
                   <button
                     (click)="deleteImage(articulo.imagenes, index)"
                     type="button"
                     class="btn btn-lg btn-delete-image position-absolute">
                       <i class="fa fa-trash text-dark" aria-hidden="true"></i>
                   </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>
-    </div>
     <div class="col">
-      <span class="text-danger">
-        Por el momento la paginación no funciona.
-      </span>
       <pagination
         [disabled]="true"
         [rotate]="false"
         [(ngModel)]="paginationData.page"
         [totalItems]="paginationData.rowCount"
         [maxSize]="10"
         [itemsPerPage]="paginationData.pageSize"
         (pageChanged)="pageChanged($event)"
         [boundaryLinks]="true"
         [disabled]="disabledPaginador"
         previousText="&lsaquo;"
         nextText="&rsaquo;"
         firstText="&laquo;"
         lastText="&raquo;"
       ></pagination>
     </div>
   </div>
 </div>