From bc3aac80fa5c751a60f8e9ebc00bfbaa4d9a83e1 Mon Sep 17 00:00:00 2001
From: rlx <rlx@rolux.org>
Date: Tue, 12 Jan 2016 11:54:48 +0530
Subject: [PATCH] update identify dialog

---
 static/js/identifyDialog.js | 119 +++++++++++++++++++++++++-----------
 1 file changed, 85 insertions(+), 34 deletions(-)

diff --git a/static/js/identifyDialog.js b/static/js/identifyDialog.js
index 2d577bf..7d94ac4 100644
--- a/static/js/identifyDialog.js
+++ b/static/js/identifyDialog.js
@@ -8,7 +8,7 @@ oml.ui.identifyDialog = function(data) {
 
         $findSelect = Ox.Select({
                 items: [
-                    {id: 'title', title: Ox._('Title, Author etc.')},
+                    {id: 'title', title: Ox._('Title')},
                     {id: 'isbn', title: Ox._('ISBN')},
                     {id: 'id', title: Ox._('ID')}
                 ],
@@ -17,47 +17,90 @@ oml.ui.identifyDialog = function(data) {
                 min: 1,
                 style: 'squared',
                 value: [data.isbn ? 'isbn' : 'title'],
-                width: 128
+                width: 96
             })
             .bindEvent({
                 change: function(data) {
-                    $findInput.options({
-                        value: getValue(data.value)
-                    }).focusInput(true);
+                    $innerElement.replaceElement(1, $findInput[data.value]);
+                    (
+                        data.value == 'title' ? $titleInput : $findInput[data.value]
+                    ).focusInput(true);
                 }
             }),
 
-        $findInput = Ox.Input({
+        $titleInput = Ox.Input({
                 style: 'squared',
-                value: getValue($findSelect.value()),
-                width: 480
+                value: Ox.decodeHTMLEntities(data.title || ''),
+                width: 224
             })
             .bindEvent({
-                change: function(data) {
-                    // ...
-                },
                 submit: findMetadata
             }),
 
+        $authorInput = Ox.Input({
+                style: 'squared',
+                value: Ox.decodeHTMLEntities((data.author || []).join('; ')),
+                width: 224
+            })
+            .bindEvent({
+                submit: findMetadata
+            }),
+
+        $findInput = {
+            title: Ox.InputGroup({
+                    inputs: [$titleInput, $authorInput],
+                    separators: [{
+                        title: Ox._('Author'),
+                        width: 96
+                    }],
+                    style: 'squared',
+                    width: 544
+                }),
+            isbn: Ox.Input({
+                    style: 'squared',
+                    value: data.isbn,
+                    width: 544
+                })
+                .bindEvent({
+                    change: function(data) {
+                        // ...
+                    },
+                    submit: findMetadata
+                }),
+            id: Ox.Input({
+                    style: 'squared',
+                    value: data.id,
+                    width: 544
+                })
+                .bindEvent({
+                    change: function(data) {
+                        // ...
+                    },
+                    submit: findMetadata
+                })
+        },
+
         $findButton = Ox.Button({
                 overlap: 'left',
                 style: 'squared',
                 title: Ox._('Find'),
-                width: 128
+                width: 96
             })
             .bindEvent({
                 click: findMetadata
             }),
 
-        $formElement = Ox.FormElementGroup({
+        $innerElement = Ox.FormElementGroup({
                 elements: [
-                    Ox.FormElementGroup({
-                        elements: [
-                            $findSelect,
-                            $findInput
-                        ],
-                        float: 'left'
-                    }),
+                    $findSelect,
+                    $findInput[$findSelect.value()]
+                ],
+                float: 'left'
+            }),
+
+        $outerElement = Ox.FormElementGroup({
+                elements: [
+                    $innerElement,
                     $findButton
                 ],
                 float: 'right'
@@ -158,7 +201,7 @@ oml.ui.identifyDialog = function(data) {
         $findSelect.options('items').forEach(function(item) {
             $findSelect.disableItem(item.id);
         });
-        $findInput.options({disabled: true});
+        $findInput[$findSelect.value()].options({disabled: true});
         $findButton.options({disabled: true});
         $updateSelect.options('items').forEach(function(item) {
             $updateSelect.disableItem(item.id);
@@ -170,7 +213,7 @@ oml.ui.identifyDialog = function(data) {
         $findSelect.options('items').forEach(function(item) {
             $findSelect.enableItem(item.id);
         });
-        $findInput.options({disabled: false});
+        $findInput[$findSelect.value()].options({disabled: false});
         $findButton.options({disabled: false});
         $updateSelect.options('items').forEach(function(item) {
             $updateSelect.enableItem(item.id);
@@ -179,19 +222,27 @@ oml.ui.identifyDialog = function(data) {
     }
 
     function findMetadata() {
+        var key = $findSelect.value();
         disableButtons();
         $outerPanel.replaceElement(1, Ox.LoadingScreen().start());
-        oml.api.findMetadata({
-            key: $findSelect.value(),
-            value: $findInput.value()
-        }, function(result) {
-            var items = result.data.items.map(function(item, index) {
-                return Ox.extend({index: index.toString()}, item);
-            });
-            enableButtons();
-            $updateButton.options({disabled: !items.length});
-            $outerPanel.replaceElement(1, renderResults(items));
-        });
+        oml.api.findMetadata(
+            key == 'title' ? {
+                title: $titleInput.value(),
+                author: $authorInput.value()
+            } : key == 'isbn' ? {
+                isbn: $findInput.isbn.value()
+            } : {
+                id: $findInput.id.value()
+            },
+            function(result) {
+                var items = result.data.items.map(function(item, index) {
+                    return Ox.extend({index: index.toString()}, item);
+                });
+                enableButtons();
+                $updateButton.options({disabled: !items.length});
+                $outerPanel.replaceElement(1, renderResults(items));
+            }
+        );
     }
 
     function getValue(key) {
@@ -199,7 +250,7 @@ oml.ui.identifyDialog = function(data) {
                 [data.title || ''].concat(data.author || []).join(' ')
             )
             : key == 'isbn' ? (data.isbn || '')
-            : data.id
+            : data.id;
     }
 
     function renderResult() {