Worked on folder modals.

YtManagerApp/templates/YtManagerApp/controls/folder_create_dialog.html

@@ -1,13 +0,0 @@
-{% extends 'YtManagerApp/controls/modal.html' %}
-{% load crispy_forms_tags %}
-
-{% block modal_title %}
-    New folder
-{% endblock modal_title %}
-
-{% block modal_body %}
-    {% crispy form %}
-{% endblock modal_body %}
-
-{% block modal_footer_wrapper %}
-{% endblock modal_footer_wrapper %}

YtManagerApp/templates/YtManagerApp/controls/folder_create_modal.html

@@ -0,0 +1,21 @@
+{% extends 'YtManagerApp/controls/modal.html' %}
+{% load crispy_forms_tags %}
+
+{% block modal_title %}
+    New folder
+{% endblock modal_title %}
+
+{% block modal_content %}
+    <form action="{% url 'modal_create_folder' %}" method="post">
+        {{ block.super }}
+    </form>
+{% endblock %}
+
+{% block modal_body %}
+    {% crispy form %}
+{% endblock modal_body %}
+
+{% block modal_footer %}
+    <input class="btn btn-primary" type="submit" value="Create">
+    <input class="btn btn-secondary" type="button" value="Cancel" data-dismiss="modal" aria-label="Cancel">
+{% endblock modal_footer %}

YtManagerApp/templates/YtManagerApp/controls/folder_delete_modal.html

@@ -0,0 +1,21 @@
+{% extends 'YtManagerApp/controls/modal.html' %}
+{% load crispy_forms_tags %}
+
+{% block modal_title %}
+    Delete folder
+{% endblock modal_title %}
+
+{% block modal_content %}
+    <form action="{% url 'modal_delete_folder' form.instance.pk %}" method="post">
+        {{ block.super }}
+    </form>
+{% endblock %}
+
+{% block modal_body %}
+    {% crispy form %}
+{% endblock modal_body %}
+
+{% block modal_footer %}
+    <input class="btn btn-danger" type="submit" value="Save" aria-label="Delete">
+    <input class="btn btn-secondary" type="button" value="Cancel" data-dismiss="modal" aria-label="Cancel">
+{% endblock modal_footer %}

YtManagerApp/templates/YtManagerApp/controls/folder_edit_dialog.html

@@ -1,40 +0,0 @@
-<div id="folderEditDialog" class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 id="folderEditDialog_Title" class="modal-title">Edit folder</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div id="folderEditDialog_Loading" class="modal-body">
-                <div class="loading-dual-ring"></div>
-            </div>
-            <div id="folderEditDialog_Error">
-            </div>
-            <form id="folderEditDialog_Form" action="{% url 'ajax_edit_folder' %}" method="post">
-                <div class="modal-body">
-                    {% csrf_token %}
-                    <input type="hidden" id="folderEditDialog_Id" name="id" value="#">
-                    <div class="form-group row">
-                        <label class="col-sm-3" for="folderEditDialog_Name">Name</label>
-                        <div class="col-sm-9">
-                            <input type="text" class="form-control" id="folderEditDialog_Name" name="name" placeholder="Folder name">
-                        </div>
-                    </div>
-                    <div class="form-group row">
-                        <label class="col-sm-3" for="folderEditDialog_Parent">Parent folder</label>
-                        <div class="col-sm-9">
-                            <select class="form-control" id="folderEditDialog_Parent" name="parent">
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button id="folderEditDialog_Submit" type="submit" class="btn btn-primary">Submit</button>
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>

YtManagerApp/templates/YtManagerApp/controls/folder_update_modal.html

@@ -0,0 +1,21 @@
+{% extends 'YtManagerApp/controls/modal.html' %}
+{% load crispy_forms_tags %}
+
+{% block modal_title %}
+    Edit folder
+{% endblock modal_title %}
+
+{% block modal_content %}
+    <form action="{% url 'modal_update_folder' form.instance.pk %}" method="post">
+        {{ block.super }}
+    </form>
+{% endblock %}
+
+{% block modal_body %}
+    {% crispy form %}
+{% endblock modal_body %}
+
+{% block modal_footer %}
+    <input class="btn btn-primary" type="submit" value="Save" aria-label="Save">
+    <input class="btn btn-secondary" type="button" value="Cancel" data-dismiss="modal" aria-label="Cancel">
+{% endblock modal_footer %}

YtManagerApp/templates/YtManagerApp/index.html

@@ -11,14 +11,19 @@
     <script>
         {% include 'YtManagerApp/js/subscription_tree.js' %}
     </script>
-
-    {% include 'YtManagerApp/controls/folder_edit_dialog.html' %}
-    {% include 'YtManagerApp/controls/subscription_edit_dialog.html' %}
-
 {% endblock %}
 
 {% block body %}
 
+    <div id="modal-wrapper">
+        <div id="modal-loading" class="black-overlay">
+            <div class="loading-dual-ring loading-dual-ring-center-screen"></div>
+        </div>
+
+        <div id="modal-wrapper">
+        </div>
+    </div>
+
     <div class="row">
 
         <div class="col-3">
@@ -55,10 +60,10 @@
                 {% crispy filter_form %}
             </div>
 
-            <div id="videos_wrapper">
+            <div id="videos-wrapper">
             </div>
 
-            <div id="videos_loading" style="display: none">
+            <div id="videos-loading" style="display: none">
                 <div class="d-flex">
                     <div class="loading-dual-ring mx-auto my-5"></div>
                 </div>

YtManagerApp/templates/YtManagerApp/js/common.js

@@ -42,4 +42,135 @@ class Dialog {
     hideModal() {
         this.modal.modal('hide');
     }
-}
+}
+
+
+class AjaxModal
+{
+    constructor(url)
+    {
+        this.wrapper = $("#modal-wrapper");
+        this.loading = $("#modal-loading");
+        this.url = url;
+        this.modal = null;
+        this.form = null;
+        this.submitCallback = null;
+    }
+
+    setSubmitCallback(callback) {
+        this.submitCallback = callback;
+    }
+
+    _showLoading() {
+        this.loading.fadeIn(500);
+    }
+
+    _hideLoading() {
+        this.loading.fadeOut(100);
+    }
+
+    _showModal() {
+        if (this.modal != null)
+            this.modal.modal();
+    }
+
+    _hideModal() {
+        if (this.modal != null)
+            this.modal.modal('hide');
+    }
+
+    _load(result) {
+        this.wrapper.html(result);
+
+        this.modal = this.wrapper.find('.modal');
+        this.form = this.wrapper.find('form');
+
+        let pThis = this;
+        this.form.submit(function(e) {
+            pThis._submit(e);
+        })
+    }
+
+    _loadFailed() {
+        this.wrapper.html('<div class="alert alert-danger">An error occurred while displaying the dialog!</div>');
+    }
+
+    _submit(e) {
+        let pThis = this;
+        let url = this.form.attr('action');
+        $.post(this.url, this.form.serialize())
+            .done(function(result) {
+                pThis._submitDone(result);
+            })
+            .fail(function() {
+                pThis._submitFailed();
+            });
+
+        e.preventDefault();
+    }
+
+    _submitDone(result) {
+        // Clear old errors first
+        this.form.find('.modal-field-error').remove();
+
+        if (result.success) {
+            this._hideModal();
+            if (this.submitCallback != null)
+                this.submitCallback();
+        }
+        else {
+            for (let field in result.errors)
+                if (result.errors.hasOwnProperty(field))
+                {
+                    let errorsArray = result.errors[field];
+                    let errorsConcat = "<div class=\"alert alert-danger modal-field-error\"><ul>";
+
+                    for(let error of errorsArray) {
+                        errorsConcat += `<li>${error.message}</li>`;
+                    }
+                    errorsConcat += '</ul></div>';
+
+                    if (field === '__all__')
+                        this.form.find('.modal-body').append(errorsConcat);
+                    else
+                        this.form.find(`[name='${field}']`).after(errorsConcat);
+                }
+
+            let errorsHtml = '';
+
+            let err = this.modal.find('#__modal_error');
+            if (err.length) {
+                err.html('An error occurred');
+            }
+            else {
+                this.modal.find('.modal-body').append(errorsHtml)
+            }
+        }
+    }
+
+    _submitFailed() {
+        // Clear old errors first
+        this.form.find('.modal-field-error').remove();
+
+        this.form.find('.modal-body')
+            .append(`<div class="alert alert-danger modal-field-error">An error occurred while processing request!</div>`);
+    }
+
+    loadAndShow()
+    {
+        let pThis = this;
+        this._showLoading();
+
+        $.get(this.url)
+            .done(function (result) {
+                pThis._load(result);
+                pThis._showModal();
+            })
+            .fail(function () {
+                pThis._loadFailed();
+            })
+            .always(function() {
+                pThis._hideLoading();
+            });
+    }
+}

YtManagerApp/templates/YtManagerApp/js/subscription_tree.js

@@ -228,11 +228,19 @@ function treeNode_Edit()
     if (selectedNodes.length === 1)
     {
         let node = selectedNodes[0];
+
         if (node.type === 'folder') {
-            folderEditDialog.showEdit(node);
+            let id = node.id.replace('folder', '');
+            let modal = new AjaxModal("{% url 'modal_update_folder' 98765 %}".replace('98765', id));
+            modal.setSubmitCallback(tree_Refresh);
+            modal.loadAndShow();
         }
         else {
-            subscriptionEditDialog.showEdit(node);
+            //TODO:
+            //let id = node.id.replace('sub', '');
+            //let modal = new AjaxModal("{ url 'modal_update_subscription' 98765 }".replace('98765', id));
+            //modal.setSubmitCallback(tree_Refresh);
+            //modal.loadAndShow();
         }
     }
 }
@@ -245,22 +253,17 @@ function treeNode_Delete()
         let node = selectedNodes[0];
 
         if (node.type === 'folder') {
-            let folderId = node.id.toString().replace('folder', '');
-            if (confirm('Are you sure you want to delete folder "' + node.text + '" and all its descendants?\nNote: the subscriptions won\'t be deleted, they will only be moved outside.'))
-            {
-                $.post("{% url 'ajax_delete_folder' 99999 %}".replace('99999', folderId), {
-                    csrfmiddlewaretoken: '{{ csrf_token }}'
-                }).done(tree_Refresh);
-            }
+            let id = node.id.replace('folder', '');
+            let modal = new AjaxModal("{% url 'modal_delete_folder' 98765 %}".replace('98765', id));
+            modal.setSubmitCallback(tree_Refresh);
+            modal.loadAndShow();
         }
         else {
-            let subId = node.id.toString().replace('sub', '');
-            if (confirm('Are you sure you want to delete subscription "' + node.text + '"?'))
-            {
-                $.post("{% url 'ajax_delete_subscription' 99999 %}".replace('99999', subId), {
-                    csrfmiddlewaretoken: '{{ csrf_token }}'
-                }).done(tree_Refresh);
-            }
+            //TODO:
+            //let id = node.id.replace('sub', '');
+            //let modal = new AjaxModal("{ url 'modal_delete_subscription' 98765 }".replace('98765', id));
+            //modal.setSubmitCallback(tree_Refresh);
+            //modal.loadAndShow();
         }
     }
 }
@@ -318,11 +321,14 @@ function tree_OnSelectionChanged(e, data)
     let filterForm_folderId = filterForm.find('#form_video_filter_folder_id');
     let filterForm_subId = filterForm.find('#form_video_filter_subscription_id');
 
-
     let node = data.instance.get_selected(true)[0];
 
     // Fill folder/sub fields
-    if (node.type === 'folder') {
+    if (node == null) {
+        filterForm_folderId.val('');
+        filterForm_subId.val('');
+    }
+    else if (node.type === 'folder') {
         let id = node.id.replace('folder', '');
         filterForm_folderId.val(id);
         filterForm_subId.val('');
@@ -340,16 +346,16 @@ function tree_OnSelectionChanged(e, data)
 function videos_Reload()
 {
     let filterForm = $('#form_video_filter');
-    let loadingDiv = $('#videos_loading');
+    let loadingDiv = $('#videos-loading');
     loadingDiv.fadeIn(300);
 
     // Perform query
     $.post("{% url 'ajax_index_get_videos' %}", filterForm.serialize())
         .done(function (result) {
-            $("#videos_wrapper").html(result);
+            $("#videos-wrapper").html(result);
         })
         .fail(function () {
-            $("#videos_wrapper").html('<div class="alert alert-danger">An error occurred while retrieving the video list!</div>');
+            $("#videos-wrapper").html('<div class="alert alert-danger">An error occurred while retrieving the video list!</div>');
         })
         .always(function() {
             loadingDiv.fadeOut(100);
@@ -387,8 +393,13 @@ $(document).ready(function ()
     // folderEditDialog = new FolderEditDialog('#folderEditDialog');
     // subscriptionEditDialog = new SubscriptionEditDialog('#subscriptionEditDialog');
     //
-    // $("#btn_create_sub").on("click", function () { subscriptionEditDialog.showNew(); });
+    $("#btn_create_folder").on("click", function () {
+        let modal = new AjaxModal("{% url 'modal_create_folder' %}");
+        modal.setSubmitCallback(tree_Refresh);
+        modal.loadAndShow();
+    });
+
     // $("#btn_create_folder").on("click", function () { folderEditDialog.showNew(); });
-    // $("#btn_edit_node").on("click", treeNode_Edit);
-    // $("#btn_delete_node").on("click", treeNode_Delete);
+    $("#btn_edit_node").on("click", treeNode_Edit);
+    $("#btn_delete_node").on("click", treeNode_Delete);
 });