Skip to content

Commit 3c8fb69

Browse files
negro89negro89
committed
fix: corrige comportamiento de datetime y estilos de tabs y tooltip
1 parent 638c04d commit 3c8fb69

7 files changed

Lines changed: 73 additions & 25 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@andes/plex",
3-
"version": "9.0.0-beta.1",
3+
"version": "9.0.0-beta.2",
44
"repository": {
55
"type": "git",
66
"url": "git+https://github.com/andes/plex.git"

‎projects/plex-demo/src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
66
import { HttpClientModule } from '@angular/common/http';
77
import { MatTooltipModule } from '@angular/material/tooltip';
88
import { RouterModule } from '@angular/router';
9+
import { MatNativeDateModule } from '@angular/material/core';
910

1011
import { AppComponent } from './app.component';
1112
import { appRoutingProviders, routing } from './app.routes';
@@ -162,7 +163,7 @@ import { DemoTitleComponent } from './title/title.component';
162163
SimpleNotificationsModule,
163164
PushNotificationsModule,
164165
routing,
165-
// PlexIconsModule
166+
MatNativeDateModule
166167
],
167168
providers: [
168169
appRoutingProviders,

‎projects/plex-demo/src/app/home/home.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import { Plex } from '@andes/plex';
77
})
88
export class HomeDemoComponent implements OnInit {
99
public field = '';
10-
public tooltip = 'Este es un tooltip<br>multilinea que ocupa mucho espacio';
10+
public tooltip = 'Este es un tooltip de una sola linea pero con gran tantidad de texto';
11+
hint = 'Este es un hint ubicado en el sidebar. Debería poder contener varias líneas de texto.';
1112
public data = [];
1213
documento = '45979360';
14+
fecha;
1315

1416
public modelSelector;
1517

‎projects/plex-demo/src/app/home/home.html‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -224,16 +224,21 @@
224224

225225
<form #form="ngForm">
226226
<p>El siguiente ejemplo muestra el uso de la propiedad <strong>validateForm</strong></p>
227+
<plex-badge size="sm" type="info" tooltip="{{tooltip}}" tooltipPosition="right">
228+
<plex-icon name="message"></plex-icon>
229+
</plex-badge>
227230
<plex-text label="Este es un campo de texto requerido" name="campo1" [(ngModel)]="field" [disabled]="false"
228-
required>
231+
required [hint]="hint">
229232
</plex-text>
230233
<plex-button label="Guardar formulario" validateForm="true" (click)="guardar($event)">
231234
</plex-button>
235+
<plex-datetime type="date" label="Seleccione fecha" name="componenteFecha" [(ngModel)]="fecha"
236+
placeholder="dd/mm/aaaa" size="sm" [required]="true">
237+
</plex-datetime>
232238
</form>
233-
<div class="grow">
234-
<plex-text [(ngModel)]="field" prefix="barcode" ariaLabel="Ingrese un código"></plex-text>
235-
<plex-button type="success">HOLA</plex-button>
236-
239+
<div class="grow mt-2">
240+
<plex-text label="Búsqueda por texto o scanner" [(ngModel)]="field" prefix="barcode"
241+
ariaLabel="Ingrese un código"></plex-text>
237242
</div>
238243
</plex-layout-sidebar>
239244
<plex-layout-footer>

‎src/lib/css/plex-tabs.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ plex-tabs {
2929
text-align: center;
3030

3131
a {
32-
display: inline-block;
32+
display: block;
3333
width: 100%;
3434
}
3535
}

‎src/lib/css/tooltip.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
$tooltip-padding-y: 0.35rem;
2-
$tooltip-padding-x: 0.55rem;
1+
$tooltip-padding-y: 0.25rem;
2+
$tooltip-padding-x: 0.25rem;
33
$border-radius: 4px;
4-
// $tooltip-bg: #616161;
4+
$tooltip-bg: #505050;
55
$tooltip-opacity: 0.85;
6-
$tooltip-arrow-color: #616161;
6+
$tooltip-arrow-color: #505050;
77

88
.tooltip {
99
display: flex;
@@ -14,8 +14,8 @@ $tooltip-arrow-color: #616161;
1414

1515
// Wrapper for the tooltip content
1616
.tooltip-inner {
17-
font-size: 11px;
18-
max-width: $tooltip-max-width;
17+
font-size: 12px;
18+
max-width: none !important;
1919
padding: $tooltip-padding-y $tooltip-padding-x;
2020
color: $tooltip-color;
2121
text-align: center;

‎src/lib/datetime/datetime.component.ts‎

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
ChangeDetectionStrategy,
1010
forwardRef,
1111
Injector,
12-
ViewChild
12+
ViewChild,
13+
OnDestroy
1314
} from '@angular/core';
1415
import { NgControl, UntypedFormControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
1516
import { dateValidator, hasRequiredValidator } from '../core/validator.functions';
@@ -58,9 +59,11 @@ export type Moment = _moment.Moment;
5859
[(ngModel)]="_value" [min]="min" [max]="max"
5960
[placeholder]="placeholder" [disabled]="disabled" [readonly]="readonly"
6061
(dateChange)="onDateChange($event)">
61-
<mat-datepicker #datePicker [touchUi]="true" type="datetime">
62+
<mat-datepicker #datePicker [touchUi]="true" type="datetime" >
6263
<mat-datepicker-actions>
63-
<plex-button class="btn-ok-fecha" matDatepickerApply type="info" size="sm" label="Aceptar"></plex-button>
64+
<plex-button class="btn-ok-fecha" matDatepickerApply type="info" size="sm" label="Aceptar"
65+
[disabled]="!hasDaySelected">
66+
</plex-button>
6467
</mat-datepicker-actions>
6568
</mat-datepicker>
6669
</ng-container>
@@ -134,11 +137,11 @@ export type Moment = _moment.Moment;
134137
`,
135138
})
136139

137-
export class PlexDateTimeComponent implements AfterViewInit, OnChanges, ControlValueAccessor {
140+
export class PlexDateTimeComponent implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor {
138141

139-
@ViewChild(MatDatepicker) datePicker?: MatDatepicker<Date>;
140-
@ViewChild(NgxMatTimepickerComponent) dateTimePicker?: NgxMatTimepickerComponent;
141-
@ViewChild(NgxMatTimepickerComponent) timePicker?: NgxMatTimepickerComponent;
142+
@ViewChild('datePicker') datePicker?: MatDatepicker<Date>;
143+
@ViewChild('dateTimePicker') dateTimePicker?: NgxMatTimepickerComponent;
144+
@ViewChild('timePicker') timePicker?: NgxMatTimepickerComponent;
142145

143146
private _min: Date | null = null;
144147
private _max: Date | null = null;
@@ -223,6 +226,7 @@ export class PlexDateTimeComponent implements AfterViewInit, OnChanges, ControlV
223226
private onTouched: () => void = () => { };
224227
private propagateChange: (val: Date | null) => void = () => { };
225228
control?: NgControl;
229+
hasDaySelected = false;
226230

227231
constructor(
228232
private element: ElementRef<HTMLElement>,
@@ -238,6 +242,41 @@ export class PlexDateTimeComponent implements AfterViewInit, OnChanges, ControlV
238242
const input: HTMLInputElement | null = this.element.nativeElement?.querySelector('input[data-main]');
239243
input?.focus();
240244
}
245+
246+
this.datePicker?.openedStream.subscribe(() => {
247+
// este bloque se usa para habilitar/deshabilitar el botón Aceptar del datepicker
248+
this.hasDaySelected = false;
249+
250+
setTimeout(() => {
251+
const dpAny = this.datePicker as any;
252+
const overlayEl: HTMLElement | null = dpAny?._overlayRef?.overlayElement ?? null;
253+
if (!overlayEl) { return; }
254+
255+
const handler = (ev: MouseEvent) => {
256+
const t = ev.target as HTMLElement | null;
257+
if (!t) { return; }
258+
259+
// Si el click ocurrió en una celda de día del calendario => ya hay selección (o intento de selección)
260+
if (t.closest('.mat-calendar-content .mat-calendar-body-cell')) {
261+
this.hasDaySelected = true;
262+
}
263+
};
264+
265+
overlayEl.addEventListener('click', handler, true);
266+
this.removeClickListener = () => overlayEl.removeEventListener('click', handler, true);
267+
}, 0);
268+
});
269+
270+
this.datePicker?.closedStream.subscribe(() => this.cleanup());
271+
}
272+
273+
ngOnDestroy() {
274+
this.cleanup();
275+
}
276+
277+
private cleanup() {
278+
this.removeClickListener?.();
279+
this.removeClickListener = undefined;
241280
}
242281

243282
ngOnChanges(changes: any) {
@@ -247,6 +286,9 @@ export class PlexDateTimeComponent implements AfterViewInit, OnChanges, ControlV
247286
}
248287
}
249288

289+
private removeClickListener?: () => void;
290+
291+
250292
writeValue(value: any) {
251293
this._value = value ? moment(value).toDate() : null;
252294
this.timeString = this._value ? moment(this._value).format('HH:mm') : '';
@@ -318,12 +360,10 @@ export class PlexDateTimeComponent implements AfterViewInit, OnChanges, ControlV
318360
registerOnTouched(fn: () => void) { this.onTouched = fn; }
319361
setDisabledState(isDisabled: boolean) { this.disabled = isDisabled; }
320362

363+
321364
// type === 'date'
322365
onDateChange(ev: any) {
323366
const input = ev.targetElement?.value || ev.target?.value;
324-
if (!input) {
325-
return;
326-
}
327367
const m = moment(input, this._format);
328368
this._value = m.isValid() ? m.toDate() : null;
329369
this.emitChange(true);

0 commit comments

Comments
 (0)