make 'general' tab of list dialog functional

static/js/pandora/info.js

@@ -169,7 +169,7 @@ pandora.ui.listInfo = function() {
     //pandora.api.editPage({name: 'allItems', body: 'foobar'}, callback)
     if (list) {
         pandora.api.findLists({
-            query: { conditions: [{key: 'id', value: list, operator: '=='}] },
+            query: {conditions: [{key: 'id', value: list, operator: '=='}]},
             keys: ['description', 'name', 'user']
         }, function(result) {
             if (result.data.items.length) {
@@ -231,7 +231,6 @@ pandora.ui.listInfo = function() {
                                 // scrollbars may appear
                                 setTimeout(function() {
                                     var width = that.width();
-                                    Ox.print('WIDTH', width, $description.options('width'))
                                     $description.options({
                                         height: width,
                                         width: width
@@ -245,6 +244,7 @@ pandora.ui.listInfo = function() {
                                         description: data.value
                                     }, function(result) {
                                         item.description = result.data.description;
+                                        Ox.Request.clearCache('findLists');
                                     });
                                 }
                             }

static/js/pandora/listDialog.js

@@ -16,31 +16,31 @@ pandora.ui.listDialog = function(section) {
         );
     Ox.getObjectById(tabs, section).selected = true;
 
-    var $tabPanel = Ox.TabPanel({
+    pandora.$ui.listDialogTabPanel = Ox.TabPanel({
-            content: function(id) {
+        content: function(id) {
-                if (id == 'general') {
+            if (id == 'general') {
-                    return pandora.ui.listGeneralPanel(listData);
+                return pandora.ui.listGeneralPanel(listData);
-                } else if (id == 'icon') {
+            } else if (id == 'icon') {
-                    return pandora.ui.listIconPanel(listData);
+                return pandora.ui.listIconPanel(listData);
-                } else if (id == 'query') {
+            } else if (id == 'query') {
-                    return pandora.$ui.filter = pandora.ui.filter(listData);
+                return pandora.$ui.filter = pandora.ui.filter(listData);
-                }
-            },
-            tabs: tabs
-        })
-        .bindEvent({
-            change: function(data) {
-                var width = getWidth(data.selected);
-                $dialog.options({
-                    maxWidth: width,
-                    minWidth: width,
-                    title: 'Smart List - ' + listData.name + ' - '
-                        + Ox.getObjectById(tabs, data.selected).title
-                });
-                $dialog.setSize(width, 312);
-                $findElement[data.selected == 'icon' ? 'show' : 'hide']();
             }
-        });
+        },
+        tabs: tabs
+    })
+    .bindEvent({
+        change: function(data) {
+            var width = getWidth(data.selected);
+            $dialog.options({
+                maxWidth: width,
+                minWidth: width,
+                title: 'Smart List - ' + listData.name + ' - '
+                    + Ox.getObjectById(tabs, data.selected).title
+            });
+            $dialog.setSize(width, 312);
+            $findElement[data.selected == 'icon' ? 'show' : 'hide']();
+        }
+    });
 
     var $findElement = Ox.FormElementGroup({
             elements: [
@@ -75,8 +75,7 @@ pandora.ui.listDialog = function(section) {
     if (section != 'icon') {
         $findElement.hide();
     }
-    $findElement.appendTo($tabPanel.children('.OxBar'));
+    $findElement.appendTo(pandora.$ui.listDialogTabPanel.children('.OxBar'));
-
 
     var $dialog = Ox.Dialog({
         buttons: [
@@ -99,13 +98,13 @@ pandora.ui.listDialog = function(section) {
                     }
                 })
         ],
-        content: $tabPanel,
+        content: pandora.$ui.listDialogTabPanel,
         maxWidth: width,
         minHeight: 312,
         minWidth: width,
         height: 312,
         // keys: {enter: 'save', escape: 'cancel'},
-        title: 'Smart List - ' + listData.name,
+        title: 'List - ' + listData.name,
         width: width
     });
 
@@ -119,49 +118,156 @@ pandora.ui.listDialog = function(section) {
 };
 
 pandora.ui.listGeneralPanel = function(listData) {
-    var that = Ox.Element({}),
+    var that = Ox.Element();
-        $icon = $('<img>')
+    pandora.api.findLists({
-            .attr({src: '/list/' + listData.id + '/icon256.jpg?' + Ox.uid()})
+        query: {conditions: [{key: 'id', value: listData.id, operator: '=='}]},
-            .css({position: 'absolute', left: '16px', top: '16px', width: '128px', height: '128px', borderRadius: '32px'})
+        keys: ['description', 'subscribers']
-            .appendTo(that),
+    }, function(result) {
-        $nameInput = Ox.Input({
+        var description = result.data.items[0].description,
-                label: 'Name',
+            subscribers = result.data.items[0].subscribers,
-                labelWidth: 80,
+            $icon = Ox.Element({
-                value: listData.name,
+                    element: '<img>',
-                width: 320
+                    tooltip: 'Doubleclick to edit icon'
-            })
+                })
-            .css({position: 'absolute', left: '160px', top: '16px'})
+                .attr({
-            .appendTo(that),
+                    src: '/list/' + listData.id + '/icon256.jpg?' + Ox.uid()
-        $itemsInput = Ox.Input({
+                })
-                disabled: true,
+                .css({
-                label: 'Items',
+                    position: 'absolute',
-                labelWidth: 80,
+                    left: '16px',
-                value: listData.items,
+                    top: '16px',
-                width: 320
+                    width: '128px',
-            })
+                    height: '128px',
-            .css({position: 'absolute', left: '160px', top: '40px'})
+                    borderRadius: '32px'
-            .appendTo(that),
+                })
-        $statusSelect = Ox.Select({
+                .bindEvent({
-                items: [
+                    doubleclick: function() {
-                    {id: 'private', title: 'Private', selected: listData.status == 'private'},
+                        pandora.$ui.listDialogTabPanel.select('icon');
-                    {id: 'public', title: 'Public', selected: listData.status == 'public'},
+                    }
-                    {id: 'featured', title: 'Featured', selected: listData.status == 'featured'},
+                })
-                ],
+                .appendTo(that),
-                label: 'Status',
+            $nameInput = Ox.Input({
-                labelWidth: 80,
+                    label: 'Name',
-                width: 320
+                    labelWidth: 80,
-            })
+                    value: listData.name,
-            .css({position: 'absolute', left: '160px', top: '64px'})
+                    width: 320
-            .appendTo(that),
+                })
-        $subscribersInput = Ox.Input({
+                .css({position: 'absolute', left: '160px', top: '16px'})
-                disabled: true,
+                .bindEvent({
-                label: 'Subscribers',
+                    blur: editName,
-                labelWidth: 80,
+                    submit: editName
-                value: 0,
+                })
-                width: 320
+                .appendTo(that),
-            })
+            $itemsInput = Ox.Input({
-            .css({position: 'absolute', left: '160px', top: '88px'})
+                    disabled: true,
-            .appendTo(that);
+                    label: 'Items',
+                    labelWidth: 80,
+                    value: listData.items,
+                    width: 320
+                })
+                .css({position: 'absolute', left: '160px', top: '40px'})
+                .appendTo(that),
+            $statusSelect = listData.status == 'featured'
+                ? Ox.Input({
+                    disabled: true,
+                    label: 'Status',
+                    labelWidth: 80,
+                    value: 'Featured',
+                    width: 320
+                })
+                .css({position: 'absolute', left: '160px', top: '64px'})
+                .appendTo(that)
+                : Ox.Select({
+                    items: [
+                        {id: 'private', title: 'Private', checked: listData.status == 'private'},
+                        {id: 'public', title: 'Public', checked: listData.status == 'public'}
+                    ],
+                    label: 'Status',
+                    labelWidth: 80,
+                    width: 320
+                })
+                .css({position: 'absolute', left: '160px', top: '64px'})
+                .bindEvent({
+                    change: editStatus
+                })
+                .appendTo(that),
+            $subscribersInput = Ox.Input({
+                    disabled: true,
+                    label: 'Subscribers',
+                    labelWidth: 80,
+                    value: subscribers,
+                    width: 320
+                })
+                .css({position: 'absolute', left: '160px', top: '88px'})
+                [getSubscribersAction()]()
+                .appendTo(that),
+            $descriptionInput = Ox.Input({
+                    height: getDescriptionHeight(),
+                    placeholder: 'Description',
+                    type: 'textarea',
+                    value: description,
+                    width: 320
+                })
+                .css({position: 'absolute', left: '160px', top: getDescriptionTop() + 'px'})
+                .bindEvent({
+                    blur: editDescription,
+                    submit: editDescription
+                })
+                .appendTo(that);
+        function editDescription(data) {
+            if (data.value != description) {
+                pandora.api.editList({
+                    id: listData.id,
+                    description: data.value
+                }, function(result) {
+                    description = result.data.description;
+                    Ox.Request.clearCache('findLists');
+                    pandora.$ui.info.updateListInfo();
+                });
+            }
+        }
+        function editName(data) {
+            if (data.value != listData.name) {
+                pandora.api.editList({
+                    id: listData.id,
+                    name: data.value
+                }, function(result) {
+                    if (result.data.id != listData.id) {
+                        pandora.renameList(listData.id, result.data.id, result.data.name);
+                        listData.id = result.data.id;
+                        listData.name = result.data.name;
+                        Ox.Request.clearCache('findLists');
+                        pandora.$ui.info.updateListInfo();
+                    }
+                });
+            }
+        }
+        function editStatus(data) {
+            var status = data.selected[0].id;
+            pandora.api.editList({
+                id: listData.id,
+                status: status
+            }, function(result) {
+                listData.status = result.data.status;
+                $subscribersInput[getSubscribersAction()]();
+                $descriptionInput
+                    .options({height: getDescriptionHeight()})
+                    .css({top: getDescriptionTop() + 'px'});
+                pandora.$ui.folderList[listData.folder].value(
+                    result.data.id, 'status', result.data.status
+                );
+            });
+        }
+        function getDescriptionHeight() {
+            return listData.status == 'private' ? 184 : 160;
+        }
+        function getDescriptionTop() {
+            return listData.status == 'private' ? 88 : 112;
+        }
+        function getSubscribersAction() {
+            return listData.status == 'private' ? 'hide' : 'show';
+        }
+    });
     return that;
 };
 
@@ -366,7 +472,6 @@ pandora.ui.listIconPanel = function(listData) {
         $frame.css('border-' + quarters[quarter] + '-radius', '128px');
     }
 
-
     return that;
 
 }