Eric Fernandez / foca-modal-informe

1

1

2

2

3

<div class="col-12"><h5 class="modal-title">Informe general por unidad de reparto</h5></div>

3

<div class="col-12"><h5 class="modal-title">Informe general por unidad de reparto</h5></div>

4

4

5

Filtros: Fecha desde: {{params.fechaDesde | date: 'dd/MM/yyyy'}},

5

Filtros: Fecha desde: {{params.fechaDesde | date: 'dd/MM/yyyy'}},

6

Fecha hasta: {{params.fechaHasta | date: 'dd/MM/yyyy'}}

6

Fecha hasta: {{params.fechaHasta | date: 'dd/MM/yyyy'}}

7

<span ng-if="params.sector">, Sector: {{params.sector.NOMBRE}}</span>

7

<span ng-if="params.sector">, Sector: {{params.sector.NOMBRE}}</span>

8

<span ng-if="params.diferenciarProductos">, Productos diferenciados</span>

8

<span ng-if="params.diferenciarProductos">, Productos diferenciados</span>

9

<span ng-if="params.diferenciarMeses">, Meses diferenciados</span>

9

<span ng-if="params.diferenciarMeses">, Meses diferenciados</span>

10

</div>

10

</div>

11

</div>

11

</div>

12

</div>

12

</div>

13

13

14

15

<div class="input-group row"

15

<div class="input-group row"

16

ng-show="buscar">

16

ng-show="buscar">

17

<small class="col-md-2 col-4 text-left my-1">Fecha Desde</small>

17

<small class="col-md-2 col-4 text-left my-1">Fecha Desde</small>

18

18

19

19

20

<button

20

<button

21

class="input-group-text"

21

class="input-group-text"

22

type="button"

22

type="button"

23

ng-click="datepickerOpen = true"

23

ng-click="datepickerOpen = true"

24

>

24

>

25

25

26

</button>

26

</button>

27

</div>

27

</div>

28

<input

28

<input

29

class="form-control form-control-sm"

29

class="form-control form-control-sm"

30

id="inlineFormInputGroup"

30

id="inlineFormInputGroup"

31

type="text"

31

type="text"

32

ng-model="params.fechaDesde"

32

ng-model="params.fechaDesde"

33

ng-required="true"

33

ng-required="true"

34

uib-datepicker-popup="dd/MM/yyyy"

34

uib-datepicker-popup="dd/MM/yyyy"

35

show-button-bar="false"

35

show-button-bar="false"

36

is-open="datepickerOpen"

36

is-open="datepickerOpen"

37

on-open-focus="false"

37

on-open-focus="false"

38

ng-focus="datepickerOpen = true"

38

ng-focus="datepickerOpen = true"

39

datepicker-options="dateOptions"

39

datepicker-options="dateOptions"

40

/>

40

/>

41

</div>

41

</div>

42

<small class="col-md-2 col-4 text-left my-1">Fecha Hasta</small>

42

<small class="col-md-2 col-4 text-left my-1">Fecha Hasta</small>

43

43

44

44

45

<button

45

<button

46

class="input-group-text"

46

class="input-group-text"

47

type="button"

47

type="button"

48

ng-click="datepicker2Open = true"

48

ng-click="datepicker2Open = true"

49

>

49

>

50

50

51

</button>

51

</button>

52

</div>

52

</div>

53

<input

53

<input

54

class="form-control form-control-sm"

54

class="form-control form-control-sm"

55

id="inlineFormInputGroup"

55

id="inlineFormInputGroup"

56

type="text"

56

type="text"

57

ng-model="params.fechaHasta"

57

ng-model="params.fechaHasta"

58

ng-required="true"

58

ng-required="true"

59

uib-datepicker-popup="dd/MM/yyyy"

59

uib-datepicker-popup="dd/MM/yyyy"

60

show-button-bar="false"

60

show-button-bar="false"

61

is-open="datepicker2Open"

61

is-open="datepicker2Open"

62

on-open-focus="false"

62

on-open-focus="false"

63

ng-focus="datepicker2Open = true"

63

ng-focus="datepicker2Open = true"

64

/>

64

/>

65

</div>

65

</div>

66

<small class="col-md-2 col-4 text-left my-1">Sector</small>

66

<small class="col-md-2 col-4 text-left my-1">Sector</small>

67

67

68

<input

68

<input

69

class="form-control form-control-sm"

69

class="form-control form-control-sm"

70

id="inlineFormInputGroup"

70

id="inlineFormInputGroup"

71

type="text"

71

type="text"

72

ng-model="params.sector.NOMBRE"

72

ng-model="params.sector.NOMBRE"

73

ng-required="true"

73

ng-required="true"

74

ng-keypress="seleccionarSector($event.keyCode)"

74

ng-keypress="seleccionarSector($event.keyCode)"

75

/>

75

/>

76

<button

76

<button

77

ng-show="params.sector.NOMBRE.length >= 1"

77

ng-show="params.sector.NOMBRE.length >= 1"

78

style="color:lightgray"

79

type="button"

78

type="button"

80

class="clear-input"

79

class="clear-input"

81

ng-click="clearSector()"

80

ng-click="clearSector()"

82

>

81

>

83

82

84

</button>

83

</button>

85

84

86

85

87

<button

86

<button

88

ladda="searchLoading"

87

ladda="searchLoading"

89

data-spinner-color="#FF0000"

88

data-spinner-color="#FF0000"

90

class="btn btn-outline-secondary"

89

class="btn btn-outline-secondary"

91

type="button"

90

type="button"

92

ng-click="seleccionarSector(13)">

91

ng-click="seleccionarSector(13)">

93

92

94

</button>

93

</button>

95

</div>

94

</div>

96

</div>

95

</div>

97

</div>

96

</div>

98

<small class="col-md-4 col-8 text-left my-1">Diferenciar productos</small>

97

<small class="col-md-4 col-8 text-left my-1">Diferenciar productos</small>

99

98

100

99

101

<input

100

<input

102

type="checkbox"

101

type="checkbox"

103

class="custom-control-input"

102

class="custom-control-input"

104

ng-model="params.diferenciarProductos"

103

ng-model="params.diferenciarProductos"

105

id="customCheck1">

104

id="customCheck1">

106

105

107

</div>

106

</div>

108

</div>

107

</div>

109

<small class="col-md-4 col-8 text-left my-1">Detallar por mes</small>

108

<small class="col-md-4 col-8 text-left my-1">Detallar por mes</small>

110

109

111

110

112

<input

111

<input

113

type="checkbox"

112

type="checkbox"

114

class="custom-control-input"

113

class="custom-control-input"

115

ng-model="params.diferenciarMeses"

114

ng-model="params.diferenciarMeses"

116

id="customCheck2">

115

id="customCheck2">

117

116

118

</div>

117

</div>

119

</div>

118

</div>

120

</div>

119

</div>

121

<div

120

<div

122

ng-if="!buscar"

121

ng-if="!buscar"

123

class="row">

122

class="row">

124

123

125

<div

124

<div

126

class="gridInforme"

125

class="gridInforme"

127

ui-grid="gridOptions"

126

ui-grid="gridOptions"

128

ui-grid-exporter

127

ui-grid-exporter

129

ui-grid-resize-columns

128

ui-grid-resize-columns

130

></div>

129

></div>

131

</div>

130

</div>

132

</div>

131

</div>

133

</div>

132

</div>

134

133

135

<button

134

<button

136

ladda="generando"

135

ladda="generando"

137

class="btn btn-sm btn-secondary"

136

class="btn btn-sm btn-secondary"

138

type="button"

137

type="button"

139

ng-click="generarInforme()"

138

ng-click="generarInforme()"

140

ng-show="buscar">Generar</button>

139

ng-show="buscar">Generar</button>

141

<button

140

<button

142

class="btn btn-sm btn-secondary"

141

class="btn btn-sm btn-secondary"

143

type="button"

142

type="button"

144

ng-click="cancel()"

143

ng-click="cancel()"

145

ng-show="buscar">Salir</button>

144

ng-show="buscar">Salir</button>

146

<button

145

<button

147

class="btn btn-sm btn-secondary"

146

class="btn btn-sm btn-secondary"

148

type="button"

147

type="button"

149

ng-click="volver()"

148

ng-click="volver()"

150

ng-hide="buscar">Volver</button>

149

ng-hide="buscar">Volver</button>

151

</div>

150

</div>

152

151

GITLAB

Eric Fernandez / foca-modal-informe

Arreglo responsividad de inputs

 <div class="modal-header py-1">
     <div class="row w-100">
         <div class="col-12"><h5 class="modal-title">Informe general por unidad de reparto</h5></div>
         <div class="col-12" ng-hide="buscar">
             Filtros: Fecha desde: {{params.fechaDesde | date: 'dd/MM/yyyy'}},
             Fecha hasta: {{params.fechaHasta | date: 'dd/MM/yyyy'}}
             <span ng-if="params.sector">, Sector: {{params.sector.NOMBRE}}</span>
             <span ng-if="params.diferenciarProductos">, Productos diferenciados</span>
             <span ng-if="params.diferenciarMeses">, Meses diferenciados</span>
         </div>
     </div>
 </div>
 <div class="modal-body" id="modal-body">
     <div class="input-group row"
         ng-show="buscar">
         <small class="col-md-2 col-4 text-left my-1">Fecha Desde</small>
-        <div class="col-md-4 col-8 input-group mb-2">
+        <div class="col-md-4 col-8 input-group mb-3">
             <div class="input-group-prepend">
                 <button
                     class="input-group-text"
                     type="button"
                     ng-click="datepickerOpen = true"
                 >
                     <i class="fa fa-calendar"></i>
                 </button>
             </div>
             <input
                 class="form-control form-control-sm"
                 id="inlineFormInputGroup"
                 type="text"
                 ng-model="params.fechaDesde"
                 ng-required="true"
                 uib-datepicker-popup="dd/MM/yyyy"
                 show-button-bar="false"
                 is-open="datepickerOpen"
                 on-open-focus="false"
                 ng-focus="datepickerOpen = true"
                 datepicker-options="dateOptions"
             />
         </div>
         <small class="col-md-2 col-4 text-left my-1">Fecha Hasta</small>
-        <div class="col-md-4 col-8 input-group mb-2">
+        <div class="col-md-4 col-8 input-group mb-3">
             <div class="input-group-prepend">
                 <button
                     class="input-group-text"
                     type="button"
                     ng-click="datepicker2Open = true"
                 >
                     <i class="fa fa-calendar"></i>
                 </button>
             </div>
             <input
                 class="form-control form-control-sm"
                 id="inlineFormInputGroup"
                 type="text"
                 ng-model="params.fechaHasta"
                 ng-required="true"
                 uib-datepicker-popup="dd/MM/yyyy"
                 show-button-bar="false"
                 is-open="datepicker2Open"
                 on-open-focus="false"
                 ng-focus="datepicker2Open = true"
             />
         </div>
         <small class="col-md-2 col-4 text-left my-1">Sector</small>
-        <div class="col-md-4 col-8 input-group mb-2">
+        <div class="col-md-4 col-8 input-group mb-3">
             <input
                 class="form-control form-control-sm"
                 id="inlineFormInputGroup"
                 type="text"
                 ng-model="params.sector.NOMBRE"
                 ng-required="true"
                 ng-keypress="seleccionarSector($event.keyCode)"
             />
             <button
                 ng-show="params.sector.NOMBRE.length >= 1"
-                style="color:lightgray"
                 type="button"
                 class="clear-input"
                 ng-click="clearSector()"
                 >
                     <i class="fa fa-times"></i>
             </button>
             <div class="input-group-append">
                 <div class="input-group-append" ng-hide="ingreso">
                     <button
                         ladda="searchLoading"
                         data-spinner-color="#FF0000"
                         class="btn btn-outline-secondary"
                         type="button"
                         ng-click="seleccionarSector(13)">
                         <i class="fa fa-search" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>
         </div>
         <small class="col-md-4 col-8 text-left my-1">Diferenciar productos</small>
         <div class="col-md-2 col-4 input-group mb-2">
             <div class="custom-control custom-checkbox ml-auto">
                 <input
                     type="checkbox"
                     class="custom-control-input"
                     ng-model="params.diferenciarProductos"
                     id="customCheck1">
                 <label class="custom-control-label" for="customCheck1"></label>
             </div>
         </div>
         <small class="col-md-4 col-8 text-left my-1">Detallar por mes</small>
         <div class="col-md-2 col-4 input-group mb-2">
             <div class="custom-control custom-checkbox ml-auto">
                 <input
                     type="checkbox"
                     class="custom-control-input"
                     ng-model="params.diferenciarMeses"
                     id="customCheck2">
                 <label class="custom-control-label" for="customCheck2"></label>
             </div>
         </div>
     </div>
     <div
         ng-if="!buscar"
         class="row">
         <div class="col-12">
             <div
                 class="gridInforme"
                 ui-grid="gridOptions"
                 ui-grid-exporter
                 ui-grid-resize-columns
                 ></div>
         </div>
     </div>
 </div>
 <div class="modal-footer py-1">
     <button
         ladda="generando"
         class="btn btn-sm btn-secondary"
         type="button"
         ng-click="generarInforme()"
         ng-show="buscar">Generar</button>
     <button
         class="btn btn-sm btn-secondary"
         type="button"
         ng-click="cancel()"
         ng-show="buscar">Salir</button>
     <button
         class="btn btn-sm btn-secondary"
         type="button"
         ng-click="volver()"
         ng-hide="buscar">Volver</button>
 </div>