[11.0][MIG] web_widget_timepicker

web_widget_timepicker/README.rst

@@ -1,82 +1,19 @@
-.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
-   :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
-   :alt: License: AGPL-3
+This file is going to be generated by oca-gen-addon-readme.
 
-===============================
-Timepicker widget in form views
-===============================
+Manual changes will be overwritten.
 
-This module provides a timepicker widget for float fields.
-It can be used as a replacement for the standard float_time widget in form views.
+Please provide content in the readme directory:
 
+    DESCRIPTION.rst (required)
+    INSTALL.rst (optional)
+    CONFIGURE.rst (optional)
+    USAGE.rst (optional, highly recommended)
+    DEVELOP.rst (optional)
+    ROADMAP.rst (optional)
+    HISTORY.rst (optional, recommended)
+    CONTRIBUTORS.rst (optional, highly recommended)
+    CREDITS.rst (optional)
 
-|picker|
+Content of this README will also be drawn from the addon manifest, from keys such as name, authors, maintainers, development_status, and license.
 
-
-The widget has the following default timepicker options:
-
-* the possible selection is based on 15 minute interval (step: 15)
-* 24 hour mode in H:i format (timeFormat: 'H:i')
-* scroll selection starts at current time (scrollDefault: 'now')
-
-
-|formview|
-
-
-Usage
-=====
-
-In the form view declaration, put widget='timepicker' attribute in the field tag::
-
-    ...
-    <field name="arch" type="xml">
-        <form string="View name">
-            ...
-            <field name="name"/>
-            <field name="mytimefieldname" widget="timepicker"/>
-            ...
-        </form>
-    </field>
-    ...
-
-Additional jquery-timepicker plugin options can be specified by an options attribute::
-
-    ...
-    <field name="mytimefieldname" widget="timepicker" options="{'step': '30', 'disableTextInput': false}"/>
-    ...
-
-See the available options at `jquery-timepicker <https://github.com//jonthornton//jquery-timepicker#timepicker-plugin-for-jquery>`_.
-
-.. |picker| image:: ./images/picker.png
-.. |formview| image:: ./images/form_view.png
-
-
-Credits
-=======
-
-* The module uses the `jquery-timepicker plugin <https://github.com//jonthornton//jquery-timepicker#timepicker-plugin-for-jquery>`_ by Jon Thornton. This software is made available under the open source MIT License. © 2014 Jon Thornton and contributors
-
-* Odoo Community Association (OCA)
-
-
-Contributors
-------------
-
-* Michael Fried <Michael.Fried@vividlab.de>
-* Kaushal Prajapati <kbprajapati@live.com>
-
-
-Maintainer
-----------
-
-.. image:: https://odoo-community.org/logo.png
-   :alt: Odoo Community Association
-   :target: https://odoo-community.org
-
-This module is maintained by the OCA.
-
-OCA, or the Odoo Community Association, is a nonprofit organization whose
-mission is to support the collaborative development of Odoo features and
-promote its widespread use.
-
-To contribute to this module, please visit https://odoo-community.org.
+A good, one sentence summary in the manifest is also highly recommended.

web_widget_timepicker/__init__.py

@@ -1,2 +1 @@
-# -*- coding: utf-8 -*-
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).

web_widget_timepicker/__manifest__.py

@@ -1,31 +1,20 @@
-# -*- coding: utf-8 -*-
-# © 2016 Vividlab (<http://www.vividlab.de>)
+# Copyright 2016 Vividlab (<http://www.vividlab.de>)
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 {
     "name": "Web Timepicker Widget",
-    "version": "10.0.1.0.0",
+    "version": "11.0.1.0.0",
     "author": "VividLab, "
-              "Odoo Community Association (OCA), "
-              "Kaushal Prajapati",
+              "Kaushal Prajapati, "
+              "Alexandre Díaz, "
+              "Odoo Community Association (OCA)",
     "license": "AGPL-3",
     "category": "Web",
-    "website": "http://www.vividlab.de",
+    "website": "https://github.com/OCA/web/",
     'installable': True,
     "depends": [
         "web",
     ],
-    "css": [
-        "static/src/lib/jquery.timerpicker/jquery.timepicker.css",
-        "static/src/css/web_widget_timepicker.css",
-    ],
-    "js": [
-        "static/src/lib/jquery.timerpicker/jquery.timepicker.js",
-        "static/src/js/web_widget_timepicker.js",
-    ],
     "data": [
         "views/web_widget_timepicker_assets.xml",
     ],
-    "qweb": [
-        "static/src/xml/web_widget_timepicker.xml",
-    ]
 }

web_widget_timepicker/readme/CONTRIBUTORS.rst

@@ -0,0 +1,3 @@
+* Michael Fried <Michael.Fried@vividlab.de>
+* Kaushal Prajapati <kbprajapati@live.com>
+* Alexandre Díaz <dev@redneboa.es>

web_widget_timepicker/readme/CREDITS.rst

@@ -0,0 +1,3 @@
+* The module uses the `datetime-picker <https://eonasdan.github.io/bootstrap-datetimepicker/Options/>`_. plugin by Jonathan Peterson. This software is made available under the open source MIT License. Copyright (c) 2015 Jonathan Peterson
+
+* Odoo Community Association (OCA)

web_widget_timepicker/readme/DESCRIPTION.rst

@@ -0,0 +1,2 @@
+This module provides a timepicker widget for float fields.
+It can be used as a replacement for the standard float_time widget in form views.

web_widget_timepicker/readme/USAGE.rst

@@ -0,0 +1,20 @@
+In the form view declaration, put widget='timepicker' attribute in the field tag::
+
+    ...
+    <field name="arch" type="xml">
+        <form string="View name">
+            ...
+            <field name="name"/>
+            <field name="mytimefieldname" widget="timepicker"/>
+            ...
+        </form>
+    </field>
+    ...
+
+Additional bootstrap datetime-picker plugin options can be specified by an options attribute::
+
+    ...
+    <field name="mytimefieldname" widget="timepicker" options="{'datepicker': {'stepping': 15}}"/>
+    ...
+
+See the available options at `datetime-picker <https://eonasdan.github.io/bootstrap-datetimepicker/Options/>`_.

web_widget_timepicker/static/src/css/web_widget_timepicker.css

@@ -1,6 +0,0 @@
-.o_form_editable .o_form_field_time input {
-    width: 6em;
-}
-.o_form_field_time{
-    display: -webkit-inline-box !important;
-}

web_widget_timepicker/static/src/js/web_widget_timepicker.js

@@ -1,89 +1,96 @@
+/* Copyright 2016 Vividlab <http://www.vividlab.de>
+ * Copyright 2017 Kaushal Prajapati <kbprajapati@live.com>
+ * Copyright 2019 Alexandre Díaz <dev@redneboa.es>
+ * License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). */
 odoo.define('web_widget_timepicker', function (require) {
-    "use strict";
+    'use strict';
 
-    var core = require('web.core');
-    var formats = require('web.formats');
-    var common = require('web.form_common');
+    var field_registry = require('web.field_registry');
+    var field_utils = require('web.field_utils');
+    var basic_fields = require('web.basic_fields');
+    var datepicker = require('web.datepicker');
+    var FieldDate = basic_fields.FieldDate;
 
-    var TimePickerField = common.AbstractField.extend(common.ReinitializeFieldMixin, {
-        is_field_number: true,
-        template: "TimePickerField",
-        internal_format: 'float_time',
-        widget_class: 'o_form_field_time',
-        events: {
-            'change input': 'store_dom_value',
-        },
-        init: function (field_manager, node) {
-            this._super(field_manager, node);
 
-            this.internal_set_value(0);
+    var TimeWidget = datepicker.DateWidget.extend({
+        type_of_date: "float_time",
 
-            this.options = _.defaults(this.options, {
-                step: 15,
-                selectOnBlur: true,
-                timeFormat: 'H:i',
-                scrollDefault: 'now',
-            });
-        },
-        initialize_content: function() {
-            if(!this.get("effective_readonly")) {
-                this.$el.find('input').timepicker(this.options);
-                this.setupFocus(this.$('input'));
+        _onShow: function () {
+            if (this.$input.val().length !== 0 && this.isValid()) {
+                var value = this.$input.val();
+                this.picker.date(new moment(value, this.options.format));
+                this.$input.select();
             }
         },
-        is_syntax_valid: function() {
-            if (!this.get("effective_readonly") && this.$("input").size() > 0) {
-                try {
-                    this.parse_value(this.$('input').val(), '');
-                    return true;
-                } catch(e) {
-                    return false;
-                }
+
+        setValue: function (value) {
+            this.set({'value': value});
+            var formatted_value = value ? this._formatClient(value) : null;
+            this.$input.val(formatted_value);
+            if (this.picker) {
+                var fdate = new moment(formatted_value, this.options.format);
+                this.picker.date(fdate && fdate.isValid()
+                    ? fdate : new moment());
             }
-            return true;
         },
-        is_false: function() {
-            return this.get('value') === '' || this._super();
+
+        getValue: function () {
+            var value = this.get('value');
+            return value ? this._formatClient(value) : null;
         },
-        focus: function() {
-            var input = this.$('input:first')[0];
-            return input ? input.focus() : false;
+
+        changeDatetime: function () {
+            if (this.isValid()) {
+                var oldValue = this.getValue();
+                this._setValueFromUi();
+                var newValue = this.getValue();
+                if (oldValue && newValue && newValue !== oldValue) {
+                    this.trigger("datetime_changed");
+                }
+            }
         },
-        set_dimensions: function (height, width) {
-            this._super(height, width);
-            this.$('input').css({
-                height: height,
-                width: width
+    });
+
+    var FieldTimePicker = FieldDate.extend({
+        supportedFieldTypes: ['float'],
+        floatTimeFormat: "HH:mm",
+
+        init: function () {
+            this._super.apply(this, arguments);
+            var defDate = null;
+            if (this.value) {
+                defDate = new moment(this._formatValue(this.value),
+                    this.floatTimeFormat);
+            }
+            // Hard-Coded Format: Field is an float and conversion only accept
+            // HH:mm format
+            this.datepickerOptions = _.extend(this.datepickerOptions, {
+                format: this.floatTimeFormat,
+                defaultDate: defDate && defDate.isValid()
+                    ? defDate : new moment(),
             });
         },
-        store_dom_value: function () {
-            if (!this.get('effective_readonly')) {
-                this.internal_set_value(
-                    this.parse_value(
-                        this.$('input').val(), ''));
-            }
+
+        _isSameValue: function (value) {
+            return value === this.value;
         },
-        parse_value: function(val, def) {
-            return formats.parse_value(val, {"widget": this.internal_format}, def);
+
+        _makeDatePicker: function () {
+            return new TimeWidget(this, this.datepickerOptions);
         },
-        format_value: function(val, def) {
-            return formats.format_value(val, {"widget": this.internal_format}, def);
+
+        _formatValue: function (value) {
+            return field_utils.format.float_time(value);
         },
-        render_value: function() {
-            var show_value = this.format_value(this.get('value'), '');
 
-            if (!this.get("effective_readonly")) {
-                this.$input = this.$el.find('input');
-                this.$input.val(show_value);
-            } else {
-                this.$(".o_form_time_content").text(show_value);
-            }
+        _parseValue: function (value) {
+            return field_utils.parse.float_time(value);
         },
     });
 
-    core.form_widget_registry.add('timepicker', TimePickerField);
-
+    field_registry.add('timepicker', FieldTimePicker);
     return {
-        TimePickerField: TimePickerField,
+        TimeWidget: TimeWidget,
+        FieldTimePicker: FieldTimePicker,
     };
 });

web_widget_timepicker/static/src/lib/jquery.timepicker/jquery.timepicker.css

@@ -1,72 +0,0 @@
-.ui-timepicker-wrapper {
-	overflow-y: auto;
-	max-height: 150px;
-	width: 6.5em;
-	background: #fff;
-	border: 1px solid #ddd;
-	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-	box-shadow:0 5px 10px rgba(0,0,0,0.2);
-	outline: none;
-	z-index: 10001;
-	margin: 0;
-}
-
-.ui-timepicker-wrapper.ui-timepicker-with-duration {
-	width: 13em;
-}
-
-.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
-.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
-	width: 11em;
-}
-
-.ui-timepicker-list {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-.ui-timepicker-duration {
-	margin-left: 5px; color: #888;
-}
-
-.ui-timepicker-list:hover .ui-timepicker-duration {
-	color: #888;
-}
-
-.ui-timepicker-list li {
-	padding: 3px 0 3px 5px;
-	cursor: pointer;
-	white-space: nowrap;
-	color: #000;
-	list-style: none;
-	margin: 0;
-}
-
-.ui-timepicker-list:hover .ui-timepicker-selected {
-	background: #fff; color: #000;
-}
-
-li.ui-timepicker-selected,
-.ui-timepicker-list li:hover,
-.ui-timepicker-list .ui-timepicker-selected:hover {
-	background: #1980EC; color: #fff;
-}
-
-li.ui-timepicker-selected .ui-timepicker-duration,
-.ui-timepicker-list li:hover .ui-timepicker-duration {
-	color: #ccc;
-}
-
-.ui-timepicker-list li.ui-timepicker-disabled,
-.ui-timepicker-list li.ui-timepicker-disabled:hover,
-.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
-	color: #888;
-	cursor: default;
-}
-
-.ui-timepicker-list li.ui-timepicker-disabled:hover,
-.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
-	background: #f2f2f2;
-}

web_widget_timepicker/static/src/xml/web_widget_timepicker.xml

@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<templates id="template" xml:space="preserve">
-    <t t-name="TimePickerField">
-        <span t-att-class="'o_form_field '+widget.widget_class" t-att-style="widget.node.attrs.style">
-            <t t-if="!widget.get('effective_readonly')">
-                <input t-att-type="'text'"
-                    class="o_timepicker_input"
-                    t-att-id="widget.id_for_label"
-                    t-att-tabindex="widget.node.attrs.tabindex"
-                    t-att-autofocus="widget.node.attrs.autofocus"
-                    t-att-placeholder="widget.node.attrs.placeholder"
-                    t-att-maxlength="widget.field.size"/>
-                <span class="fa fa-clock-o o_timepicker_button"/>
-            </t>
-            <t t-if="widget.get('effective_readonly')">
-                <span class="o_form_time_content"/>
-            </t>
-        </span>
-    </t>
-</templates>

web_widget_timepicker/views/web_widget_timepicker_assets.xml

@@ -1,18 +1,12 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<odoo>
-    <template id="web_widget_timepicker_assets_backend"
-              name="web_widget_timepicker assets"
-              inherit_id="web.assets_backend">
-        <xpath expr="." position="inside">
-            <script type="text/javascript"
-                    src="/web_widget_timepicker/static/src/lib/jquery.timepicker/jquery.timepicker.js"/>
-            <script type="text/javascript"
-                    src="/web_widget_timepicker/static/src/js/web_widget_timepicker.js"/>
-            <link rel="stylesheet"
-                  href="/web_widget_timepicker/static/src/lib/jquery.timepicker/jquery.timepicker.css"/>
-            <link rel="stylesheet"
-                  href="/web_widget_timepicker/static/src/css/web_widget_timepicker.css"/>
-        </xpath>
-    </template>
-</odoo>
+<?xml version="1.0" encoding="utf-8"?>
+
+<odoo>
+    <template id="web_widget_timepicker_assets_backend"
+              name="web_widget_timepicker_assets"
+              inherit_id="web.assets_backend">
+        <xpath expr="." position="inside">
+            <script type="text/javascript"
+                    src="/web_widget_timepicker/static/src/js/web_widget_timepicker.js"/>
+        </xpath>
+    </template>
+</odoo>