0012932: file picker dialog in fileuploadgrid
[tine20] / tine20 / Filemanager / js / FilePickerDialog.js
1 /*
2  * Tine 2.0
3  *
4  * @license     http://www.gnu.org/licenses/agpl.html AGPL Version 3
5  * @author      Michael Spahn <m.spahn@metaways.de>
6  * @copyright   Copyright (c) 2017 Metaways Infosystems GmbH (http://www.metaways.de)
7  */
8 Ext.ns('Tine.Filemanager');
9
10 /**
11  * File picker dialog
12  *
13  * @namespace   Tine.Filemanager
14  * @class       Tine.Filemanager.FilePickerDialog
15  * @extends     Ext.Panel
16  * @constructor
17  * @param       {Object} config The configuration options.
18  */
19 Tine.Filemanager.FilePickerDialog = Ext.extend(Ext.Panel, {
20     layout: 'fit',
21     border: false,
22     frame: false,
23
24     /**
25      * ok button action held here
26      */
27     okAction: null,
28
29     /**
30      * Dialog window
31      */
32     window: null,
33
34     /**
35      * Window title
36      */
37     title: null,
38
39     /**
40      * Hide panel header by default
41      */
42     header: false,
43
44     /**
45      * The validated and choosen node
46      */
47     nodes: null,
48
49     /**
50      * @todo: maybe remove
51      */
52     windowNamePrefix: 'test',
53
54     /**
55      * Allow to select one or more node
56      */
57     singleSelect: true,
58
59     /**
60      * A constraint allows to alter the selection behaviour of the picker, for example only allow to select files.
61      *
62      * By default, file and folder are allowed to be selected, the concrete implementation needs to define it's purpose
63      *
64      * Valids constraints:
65      *  - file
66      *  - folder
67      *  - null (take all)
68      */
69     constraint: null,
70
71     /**
72      * Constructor.
73      */
74     initComponent: function () {
75         this.addEvents(
76             /**
77              * If the dialog will close and an valid node was selected
78              * @param node
79              */
80             'selected'
81         );
82
83         this.items = [{
84             layout: 'fit',
85             items: [
86                 this.getFilePicker()
87             ]
88         }];
89
90         var me = this;
91         this.okAction = new Ext.Action({
92             disabled: true,
93             text: 'Ok',
94             iconCls: 'action_saveAndClose',
95             minWidth: 70,
96             handler: this.onOk.createDelegate(me),
97             scope: this
98         });
99
100         this.bbar = [
101             '->',
102             this.okAction
103         ];
104
105         Tine.Filemanager.FilePickerDialog.superclass.initComponent.call(this);
106     },
107
108     /**
109      * button handler
110      */
111     onOk: function () {
112         this.fireEvent('selected', this.nodes);
113         this.window.close();
114     },
115
116     /**
117      * Create a new filepicker and register listener
118      * @returns {*}
119      */
120     getFilePicker: function () {
121         var picker = new Tine.Filemanager.FilePicker({
122             constraint: this.constraint,
123             singleSelect: this.singleSelect
124         });
125
126         picker.on('nodeSelected', this.onNodesSelected.createDelegate(this));
127         picker.on('invalidNodeSelected', this.onInvalidNodesSelected.createDelegate(this));
128
129         return picker;
130     },
131
132     /**
133      * If a node was selected
134      * @param node
135      */
136     onNodesSelected: function (nodes) {
137         this.nodes = nodes;
138         this.okAction.setDisabled(false);
139     },
140
141     /**
142      * If an invalid node was selected
143      */
144     onInvalidNodesSelected: function () {
145         this.okAction.setDisabled(true);
146     },
147
148     /**
149      * Creates a new pop up dialog/window (acc. configuration)
150      *
151      * @returns {null}
152      */
153     openWindow: function () {
154         this.window = Tine.WindowFactory.getWindow({
155             title: this.title,
156             closeAction: 'close',
157             modal: true,
158             width: 550,
159             height: 500,
160             layout: 'fit',
161             plain: true,
162             bodyStyle: 'padding:5px;',
163
164             items: [
165                 this
166             ]
167         });
168
169         return this.window;
170     }
171 });