0013178: select week of year button for week view
authorMichael Spahn <m.spahn@metaways.de>
Thu, 8 Jun 2017 13:07:23 +0000 (15:07 +0200)
committerPhilipp Schüle <p.schuele@metaways.de>
Thu, 15 Jun 2017 09:46:47 +0000 (11:46 +0200)
https://forge.tine20.org/view.php?id=13178

Change-Id: I81476fe4ce1cf8c8be7ff1c18bc8790af25e0edd
Reviewed-on: http://gerrit.tine20.com/customers/4844
Tested-by: Jenkins CI (http://ci.tine20.com/)
Reviewed-by: Philipp Schüle <p.schuele@metaways.de>
tine20/Calendar/css/Calendar.css
tine20/Calendar/js/PagingToolbar.js
tine20/Tinebase/js/extFixes.js
tine20/library/ExtJS/src/widgets/menu/DateMenu.js

index b27ae97..0b8c222 100644 (file)
@@ -262,4 +262,17 @@ span.tw-containerselect-trigger2 img.tw-containerselect-trigger2-bg {
 .cal-status-TENTATIVE,
 .cal-status-TENTATIVE .x-grid3-cell-inner {
     font-style: italic;
+}
+
+.inline {
+    height: 24px;
+    padding: 0;
+    margin: 0;
+}
+.inline input {
+    margin-top: -14px;
+}
+.inline input,
+.inline table {
+    display: inline-block;
 }
\ No newline at end of file
index 2c0ec34..3d6107a 100644 (file)
@@ -295,23 +295,66 @@ Tine.Calendar.PagingToolbar.DayPeriodPicker = Ext.extend(Tine.Calendar.PagingToo
  * @constructor
  */
 Tine.Calendar.PagingToolbar.WeekPeriodPicker = Ext.extend(Tine.Calendar.PagingToolbar.AbstractPeriodPicker, {
+    datepickerMenu: null,
+    datepickerButton: null,
+    wkField: null,
+
     init: function() {
         this.label = new Ext.form.Label({
             text: Tine.Tinebase.appMgr.get('Calendar').i18n._('Week'),
             style: 'padding-right: 3px'
-            //hidden: this.tb.activeView != 'week'
         });
-        this.field = new Ext.form.TextField({
+
+        this.wkField = new Ext.form.TextField({
             value: this.tb.dtStart.getWeekOfYear(),
             width: 30,
             cls: "x-tbar-page-number",
-            //hidden: this.tb.activeView != 'week',
             listeners: {
                 scope: this,
                 specialkey: this.onSelect,
                 blur: this.onSelect
             }
         });
+
+        this.datepickerMenu = new Ext.menu.DateMenu({
+            value: this.tb.dtStart,
+            hideOnClick: true,
+            focusOnSelect: true,
+            plugins: [new Ext.ux.DatePickerWeekPlugin({
+                weekHeaderString: Tine.Tinebase.appMgr.get('Calendar').i18n._('WK')
+            })],
+            listeners: {
+                'select': function (picker, date) {
+                    var toolbar = arguments[arguments.length - 1];
+
+                    this.setValue(date.getWeekOfYear());
+
+                    var diff = this.getValue() - toolbar.dtStart.getWeekOfYear() - parseInt(toolbar.dtStart.getDay() < 1 ? 1 : 0, 10);
+
+                    if (diff !== 0) {
+                        toolbar.update(toolbar.dtStart.add(Date.DAY, diff * 7));
+                        toolbar.fireEvent('change', toolbar, 'week', toolbar.getPeriod());
+                    }
+                }.createDelegate(this.wkField, [this], true)
+            }
+        });
+
+        this.datepickerButton = new Ext.Button({
+            iconCls: 'cal-sheet-view-type'
+        });
+
+        this.datepickerButton.on('click', function () {
+            this.datepickerMenu.show(this.datepickerButton.el);
+        }.createDelegate(this));
+
+        this.field = {
+            xtype: 'container',
+            cls: 'inline',
+            items: [
+                this.wkField,
+                this.datepickerButton
+            ]
+        }
     },
     onSelect: function(field, e) {
         if (e && e.getKey() == e.ENTER) {
@@ -319,7 +362,7 @@ Tine.Calendar.PagingToolbar.WeekPeriodPicker = Ext.extend(Tine.Calendar.PagingTo
         }
         var diff = field.getValue() - this.dtStart.getWeekOfYear() - parseInt(this.dtStart.getDay() < 1 ? 1 : 0, 10);
         if (diff !== 0) {
-            this.update(this.dtStart.add(Date.DAY, diff * 7))
+            this.update(this.dtStart.add(Date.DAY, diff * 7));
             this.fireEvent('change', this, 'week', this.getPeriod());
         }
         
@@ -332,11 +375,11 @@ Tine.Calendar.PagingToolbar.WeekPeriodPicker = Ext.extend(Tine.Calendar.PagingTo
         }
         this.dtStart = from;
         
-        if (this.field && this.field.rendered) {
+        if (this.wkField && this.wkField.rendered) {
             // NOTE: '+1' is to ensure we display the ISO8601 based week where weeks always start on monday!
             var wkStart = dtStart.add(Date.DAY, dtStart.getDay() < 1 ? 1 : 0);
             
-            this.field.setValue(parseInt(wkStart.getWeekOfYear(), 10));
+            this.wkField.setValue(parseInt(wkStart.getWeekOfYear(), 10));
         }
     },
     render: function() {
@@ -364,20 +407,7 @@ Tine.Calendar.PagingToolbar.WeekPeriodPicker = Ext.extend(Tine.Calendar.PagingTo
             from: this.dtStart.clone(),
             until: this.dtStart.add(Date.DAY, 7)
         };
-    }/*
-    getPeriod: function() {
-        // period is the week current startDate is in
-        var startDay = Ext.DatePicker.prototype.startDay;
-        console.log(startDay);
-        var diff = startDay - this.dtStart.getDay();
-        console.log(diff);
-        
-        var from = Date.parseDate(this.dtStart.add(Date.DAY, diff).format('Y-m-d') + ' 00:00:00', Date.patterns.ISO8601Long);
-        return {
-            from: from,
-            until: from.add(Date.DAY, 7)
-        };
-    }*/
+    }
 });
 
 /**
index 5520616..bb77e70 100644 (file)
@@ -778,3 +778,40 @@ Ext.util.CSS = function(){
         }
     };
 }();
+
+// don't apply plugins to the menu, apply them only to the datepicker
+Ext.override(Ext.menu.DateMenu, {
+    initComponent : function(){
+        this.on('beforeshow', this.onBeforeShow, this);
+        if(this.strict = (Ext.isIE7 && Ext.isStrict)){
+            this.on('show', this.onShow, this, {single: true, delay: 20});
+        }
+        Ext.apply(this, {
+            plain: true,
+            showSeparator: false,
+            items: this.picker = new Ext.DatePicker(Ext.applyIf({
+                internalRender: this.strict || !Ext.isIE,
+                ctCls: 'x-menu-date-item',
+                id: this.pickerId
+            }, this.initialConfig))
+        });
+
+        // remove plugins from menu itself
+        this.plugins = [];
+
+        this.picker.purgeListeners();
+        Ext.menu.DateMenu.superclass.initComponent.call(this);
+        /**
+         * @event select
+         * Fires when a date is selected from the {@link #picker Ext.DatePicker}
+         * @param {DatePicker} picker The {@link #picker Ext.DatePicker}
+         * @param {Date} date The selected date
+         */
+        this.relayEvents(this.picker, ['select']);
+        this.on('show', this.picker.focus, this.picker);
+        this.on('select', this.menuHide, this);
+        if(this.handler){
+            this.on('select', this.handler, this.scope || this);
+        }
+    }
+});
index fdf5a9c..0cec636 100644 (file)
@@ -1,9 +1,9 @@
-/*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
+/*!\r
+ * Ext JS Library 3.1.1\r
+ * Copyright(c) 2006-2010 Ext JS, LLC\r
+ * licensing@extjs.com\r
+ * http://www.extjs.com/license\r
+ */\r
 /**\r
  * @class Ext.menu.DateMenu\r
  * @extends Ext.menu.Menu\r