update metadata editor

dashboard-ui/components/metadataeditor/metadataeditor.js

@@ -81,48 +81,19 @@
 
     function editPerson(context, person, index) {
 
-        $('#popupEditPerson', context).popup("open");
+        require(['components/metadataeditor/personeditor'], function (personeditor) {
 
-        $('#txtPersonName', context).val(person.Name || '');
+            personeditor.show(person).then(function (updatedPerson) {
-        $('#selectPersonType', context).val(person.Type || '');
-        $('#txtPersonRole', context).val(person.Role || '');
 
-        if (index == null) {
+                var isNew = index == -1;
-            index = '';
-        }
-
-        $("#fldPersonIndex", context).val(index);
-    }
-
-    function savePersonInfo(page) {
-
-        $('#popupEditPerson', page).popup("close");
-
-        var index = $("#fldPersonIndex", page).val();
-        var person;
-
-        var isNew = true;
-
-        if (index) {
-
-            isNew = false;
-            index = parseInt(index);
-
-            person = currentItem.People[index];
-
-        } else {
-            person = {};
-        }
-
-        person.Name = $('#txtPersonName', page).val();
-        person.Type = $('#selectPersonType', page).val();
-        person.Role = $('#txtPersonRole', page).val();
 
                 if (isNew) {
-            currentItem.People.push(person);
+                    currentItem.People.push(updatedPerson);
                 }
 
-        populatePeople(page, currentItem.People);
+                populatePeople(context, currentItem.People);
+            });
+        });
     }
 
     function init(context) {
@@ -159,7 +130,7 @@
 
         $("#btnAddPerson", context).on('click', function (event, data) {
 
-            editPerson(context, {});
+            editPerson(context, {}, -1);
         });
     }
 

dashboard-ui/components/metadataeditor/personeditor.js

@@ -0,0 +1,65 @@
+define(['paperdialoghelper'], function (paperDialogHelper) {
+
+    return {
+        show: function (person) {
+            return new Promise(function (resolve, reject) {
+
+                var xhr = new XMLHttpRequest();
+                xhr.open('GET', 'components/metadataeditor/personeditor.template.html', true);
+
+                xhr.onload = function (e) {
+
+                    var template = this.response;
+                    var dlg = paperDialogHelper.createDialog({
+                        removeOnClose: true,
+                        size: 'small'
+                    });
+
+                    dlg.classList.add('ui-body-b');
+                    dlg.classList.add('background-theme-b');
+
+                    dlg.classList.add('formDialog');
+
+                    var html = '';
+                    var submitted = false;
+
+                    html += Globalize.translateDocument(template);
+
+                    dlg.innerHTML = html;
+                    document.body.appendChild(dlg);
+
+                    $('#txtPersonName', dlg).val(person.Name || '');
+                    $('#selectPersonType', dlg).val(person.Type || '');
+                    $('#txtPersonRole', dlg).val(person.Role || '');
+
+                    paperDialogHelper.open(dlg);
+
+                    dlg.addEventListener('iron-overlay-closed', function () {
+
+                        if (submitted) {
+                            resolve(person);
+                        } else {
+                            reject();
+                        }
+                    });
+
+                    dlg.querySelector('form').addEventListener('submit', function (e) {
+
+                        submitted = true;
+
+                        person.Name = $('#txtPersonName', dlg).val();
+                        person.Type = $('#selectPersonType', dlg).val();
+                        person.Role = $('#txtPersonRole', dlg).val() || null;
+
+                        paperDialogHelper.close(dlg);
+
+                        e.preventDefault();
+                        return false;
+                    });
+                }
+
+                xhr.send();
+            });
+        }
+    };
+});

dashboard-ui/components/metadataeditor/personeditor.template.html

@@ -0,0 +1,38 @@
+<div class="dialogHeader">
+    <paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>
+    <div class="dialogHeaderTitle">
+        ${ButtonEdit}
+    </div>
+</div>
+
+<form class="popupEditPersonForm" style="max-width: none;">
+
+    <div>
+        <paper-input type="text" id="txtPersonName" required="required" label="${LabelName}"></paper-input>
+    </div>
+
+    <br />
+    <div>
+        <label for="selectPersonType" class="selectLabel">${LabelType}</label>
+        <select id="selectPersonType" data-mini="true">
+            <option value=""></option>
+            <option value="Actor">${OptionActor}</option>
+            <option value="Composer">${OptionComposer}</option>
+            <option value="Director">${OptionDirector}</option>
+            <option value="GuestStar">${OptionGuestStar}</option>
+            <option value="Producer">${OptionProducer}</option>
+            <option value="Writer">${OptionWriter}</option>
+        </select>
+    </div>
+    <div>
+        <paper-input type="text" id="txtPersonRole" label="${LabelPersonRole}"></paper-input>
+        <div class="fieldDescription">${LabelPersonRoleHelp}</div>
+    </div>
+    <br />
+    <input type="hidden" id="fldPersonIndex" />
+    <p>
+        <button type="submit" data-role="none" class="clearButton">
+            <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
+        </button>
+    </p>
+</form>