Skip to content

Commit

Permalink
temp date time
Browse files Browse the repository at this point in the history
  • Loading branch information
GrabowskiM committed Feb 2, 2022
1 parent 484c1f9 commit 2474f60
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 10 deletions.
1 change: 1 addition & 0 deletions src/bundle/Resources/encore/ibexa.js.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const layout = [
path.resolve(__dirname, '../public/js/scripts/core/popup.menu.js'),
path.resolve(__dirname, '../public/js/scripts/core/tag.view.select.js'),
path.resolve(__dirname, '../public/js/scripts/core/toggle.button.js'),
path.resolve(__dirname, '../public/js/scripts/core/date.and.time.js'),
path.resolve(__dirname, '../public/js/scripts/admin.notifications.js'),
path.resolve(__dirname, '../public/js/scripts/button.trigger.js'),
path.resolve(__dirname, '../public/js/scripts/button.prevent.default.js'),
Expand Down
64 changes: 64 additions & 0 deletions src/bundle/Resources/public/js/scripts/core/date.and.time.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
(function(global, doc, ibexa, flatpickr) {
const { convertDateToTimezone, formatShortDateTime } = ibexa.helpers.timezone;
const userTimezone = ibexa.adminUiConfig.timezone;

const DEFAULT_CONFIG = {
enableTime: true,
time_24hr: true,
formatDate: (date) => formatShortDateTime(date, null),

}
class DateAndTime {
constructor(config) {
this.container = config.container;
this.fieldWrapper = this.container.querySelector('.ibexa-date-time-picker');
this.inputField = this.fieldWrapper.querySelector('.ibexa-date-time-picker__input');
this.customOnChange = config.onChange;
console.log(this.fieldWrapper.classList);
this.flatpickrConfig = {
...DEFAULT_CONFIG,
inline: this.fieldWrapper.classList.contains('ibexa-date-time-picker--inline-flatpickr'),
onChange: this.onChange,
...(config.flatpickrConfig ?? {})
}

this.init = this.init.bind(this);
this.onChange = this.onChange.bind(this);
this.onInputBtn = this.onInputBtn.bind(this);
}

onChange = (dates) => {
const isDateSelected = !!dates[0];

if (!isDateSelected) {
this.inputField.dataset.timestamp = '';

this.customOnChange(this.inputField, '');

return;
}

const selectedDate = dates[0];
const selectedDateWithUserTimezone = convertDateToTimezone(selectedDate, userTimezone, true);
const timestamp = Math.floor(selectedDateWithUserTimezone.valueOf() / 1000);

this.inputField.dataset.timestamp = timestamp;

this.customOnChange(this.inputField, timestamp);
};

onInputBtn(event) {
if (event.target.value === '' && this.inputField.dataset.timestamp !== '') {
this.flatpickrInstance.setDate(null, true);
}
}

init() {
this.flatpickrInstance = flatpickr(this.inputField, this.flatpickrConfig);

this.inputField.addEventListener('input', this.onInputBtn, false);
}
}

ibexa.addConfig('core.DateAndTime', DateAndTime);
})(window, window.document, window.ibexa, window.flatpickr);
14 changes: 14 additions & 0 deletions src/bundle/Resources/public/scss/_date-and-time.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.ibexa-date-time-picker {
max-width: 30ch;
position: relative;

&__input {
&[readonly] {
background-color: $ibexa-color-white;
}
}

.ibexa-input-text-wrapper__actions {
top: calculateRem(16px);
}
}
1 change: 1 addition & 0 deletions src/bundle/Resources/public/scss/ibexa.scss
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,4 @@
@import 'location-swap-form';
@import 'selection-table';
@import 'assign';
@import 'date-and-time';
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{% set wrapper_attr = wrapper_attr|default({})|merge({
class: (wrapper_attr.class|default('')
~ ' ibexa-date-time-picker'
~ (inline_flatpickr ? ' ibexa-date-time-picker--inline-flatpickr')
)|trim
}) %}

{% embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: false } %}
{% block content %}
<input
class="
ibexa-input ibexa-input--text form-control ibexa-date-time-picker__input flatpickr flatpickr-date-input
{{ is_small|default(false) ? 'ibexa-input--small' }}
"
readonly="readonly"
type="text"
/>
{% endblock %}
{% block actions %}
{{ parent() }}
<div class="ibexa-input-text-wrapper__action-btn">
<svg class="ibexa-icon ibexa-icon--small">
<use xlink:href="{{ ibexa_icon_path('date') }}"></use>
</svg>
</div>
{% endblock %}
{% endembed %}
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,19 @@
<div {{ html.attributes(wrapper_attr) }}>
{% block content %}{% endblock %}
<div class="ibexa-input-text-wrapper__actions">
<button type="button" class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear" tabindex="-1">
<svg class="ibexa-icon">
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
</svg>
</button>
{% if has_search %}
<button type="submit" class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
<svg class="ibexa-icon ibexa-icon--small">
<use xlink:href="{{ ibexa_icon_path('search') }}"></use>
{% block actions %}
<button type="button" class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear" tabindex="-1">
<svg class="ibexa-icon">
<use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
</svg>
</button>
{% endif %}
{% if has_search %}
<button type="submit" class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--search" tabindex="-1">
<svg class="ibexa-icon ibexa-icon--small">
<use xlink:href="{{ ibexa_icon_path('search') }}"></use>
</svg>
</button>
{% endif %}
{% endblock %}
</div>
</div>

0 comments on commit 2474f60

Please sign in to comment.