path: root/public/assets/js/admin/edit_page.js

// Globals
// -----------------------------------------------------------------------------

// NOTE:
// Variable `entity_id` is defined before evaluating this script
// id (int) : the id of edited post (or 0 if new post)

var page;

var id = (entity_id == 0) ? false : entity_id;

var files = [];     // array of { id:.., title:.., type:.., path:.. } records

// TODO: support tags
// var tags = [];      // array of integers



// an alternative--id when a page_id not exists (needed for file-upload)
// ... consist of a 6-digit date string + random number up to 999
const yymmdd = new Date().toISOString().slice(2, 10).replaceAll('-','');
var rnd999 = Math.floor(Math.random() * 1000);
var altID = (id == 0) ? ( yymmdd +'-'+ rnd999.toString() ) : id;




// Supplamentary functions
// -----------------------------------------------------------------------------

// function for sorting an array by 'label' attribute
// --- -- -- - - -
function compare_label (a,b) {
    if ( a.label < b.label ) { return -1; }
    if ( a.label > b.label ) { return 1; }
    return 0;
}

// return course record by course-id
// --- -- -- - - -
function course_record(id) {
    var record = 0;
    categories.forEach(el => { if (el.id == id) record = el; });
   
    return record;
}




// Modal HTML Creators
// -----------------------------------------------------------------------------

const modal_header = (title) => {
    return [
        '<div class="modal-header">',
            '<h4 class="modal-title" id="myModalLabel">',
                title,
            '</h4>',
            '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">',
                '<span aria-hidden="true"></span>',
            '</button>',
        '</div>'
    ].join('\n');
}


const upload_file_form = () => {
    return [
        '<form method="POST" id="file_upload_form" name="upload_file_form">',

            '<div class="modal-body">',

                '<input type="hidden" name="folder" value="'+ altID +'">',

                '<div class="form-group">',
                    '<label for="title">Τίτλος/Περιγραφή για το Αρχείο</label>',
                    '<input type="text" class="form-control " value="" name="title" id="title" placeholder="Τίτλος για το Αρχείο" required="">',
                '</div>',

                '<div class="form-group">',
                    '<label class="control-label" for="file">Εισαγωγή Αρχείου</label>',
                    '<input class="form-control" type="file" id="file" name="file" required="">',
                '</div>',

            '</div>',

            '<div class="modal-footer">',
                '<div class="row" style="width: 50%;">',
                    '<div class="form-actions">',
                        '<div class="col col-4">',
                            '<buton type="button" class="btn btn-default js-modal-close col-12" data-bs-dismiss="modal">',
                                'Κλείσιμο',
                            '</button>',
                        '</div>',
                        '<div class="col-8">',
                            '<button class="btn btn-success col-12" type="submit">Καταχώριση</button>',
                        '</div>',
                    '</div>',
                '</div>',
            '</div>',

        '</form>'
    ].join('\n');
}


const preview_article = (title, body) => {
    return [
        '<div class="modal-body">',
            '<div class="post">',

                '<h2>'+ title +'</h2>',

                '<div class="article-body">',
                    marked.parse(body, { sanitize: true }),
                '</div>',
             
            '</div>',
        '</div>',
        '<div class="modal-footer">',
            '<div class="row" style="width: 50%;">',
                '<div class="form-actions">',
                    '<div class="col-md-4 col-md-offset-4 col-6 col-offset-3">',
                        '<buton type="button" class="btn btn-default js-modal-close col-12" data-bs-dismiss="modal">',
                            'Κλείσιμο',
                        '</button>',
                    '</div>',
                '</div>',
            '</div>',
        '</div>'
    ].join('\n');
}


$(document).ready(function() {

    // When document is ready
    // -------------------------------------------------------------------------

    /** preload content
     * --- -- -- - - -
     * get page
     * update content (form-elements)
     */
    if (id) {   // if an `id` is given, load post .. then init_form

        $.getJSON( "/admin/api/page/" + id )
        .done( function (data) {
            page = data;            // keep post

            // update fields' values
            $('input[name=id]').val(page.id);           // id
            $('input[name=title]').val(page.title);     // title
            $('textarea[name=body]').val(page.body);    // body
            $('select[name=status]').val(
                (page.status == 0) ? '0' : "one"
                ).trigger('change');

            // $('#post-info').html('Δημιουργία: '+post.creation_date+'<br>Τελευταία Ενημέρωση: '+ post.update_date);

            // parse media files; then draw
            if (page.medias_json != null) {
                files = JSON.parse(page.medias_json);
            }
            draw_files_list();      // then draw the files list          

        });

    }


    /** draw_files_list
     * --- -- -- - - -
     */
    function draw_files_list() {
        var li_list = [];
        var ref_icon, ref_class;

        files.forEach( item => {
            var copy = [    // copy button
                '<button type="button" class="btn btn-xs btn-default js-copy"',
                    ' data-url="' + item.path +'"',
                    ' data-type="' + item.type + '"',
                    '>',
                    '<i class="far fa-clone"></i>',
                '</button>'
            ].join('');

            var del = [    // delete button
                '<button type="button" class="btn btn-xs btn-danger js-delete"',
                    'data-id="' + item.id + '">',
                    '<i class="fas fa-trash-alt"></i>',
                '</button>'
            ].join('');
            var option = [  // li html
                '<li>',
                    '<div class="text">' + item.label + '</div>',
                    '<div class="actions">',
                        copy, ' ',  del,
                    '</div>',
                '</li>'
            ].join('');
            li_list.push(option);   // push to li_list
        });
        $('#files_list').html( li_list.join('\n') );

    }



    // When form's action-buttons are clicked
    // -------------------------------------------------------------------------


    // form submit
    // --- -- -- - - -
    $('.edit-page form').submit( event => {
        event.preventDefault();

        var attachments = [];
        // attachments (array) of "`media_id`;`reference`" strings
        files.forEach( f => { attachments.push( f.id ) });

        // prepare data to POST
        // ---
        var data = {
            id: parseInt($('.edit-page form input[name=id]').val()),
            title: $('.edit-page form input[name=title]').val(),
            body: $('.edit-page form textarea[name=body]').val(),
            status: ( ($('select[name=status]').val() == "0") ? 0 : 1 ),
            media: attachments
        };

        // select action url (add or update)
        // ---
        var request = '/admin/api/page/' + ((data.id == 0) ? 'add' : 'update');

        // send POST (ajax) request
        $.post(request, data)
        .done(function( data ) {
            console.log(data);
            window.location.href = '/admin/pages';      // seems ok; bach to articles
        });       

    });


    // go-back (to pages)
    // --- -- -- - - -
    $('#go-back').click( event => {
        if (confirm('Θέλετε να ακυρώσετε τις όποιες αλλαγές και να φύγτε από τη σελίδα;')) {
            window.location.href = '/admin/pages';
        }
    });


    // copy url button
    // --- -- -- - - -
    $('.admin-container').on('click', 'button.js-copy', function (e) {
        var copytext = '';   // default: copy nothing

        if ($(this).data('id') !== undefined) {
            copytext = window.location.origin +'/page/' + $(this).data('id');
        }

        if ($(this).data('url') !== undefined) {
            copytext = window.location.origin + '/serve/file/' + $(this).data('url') + '?type=' + $(this).data('type');
        }
        
        navigator.clipboard
        .writeText(copytext)
        .then(() => {   // notify the copy event
            $(this).addClass('copied');
            setTimeout( () => { $(this).removeClass('copied'); }, 700);
            console.log(copytext, ' copied!');
        })
        .catch(() => {
            console.log("error on coping text");
        });
    });



    // delete (remove) file button
    // --- -- -- - - -
    $('.admin-container').on('click', 'button.js-delete', function (e) {
        console.log('delete!');
        var media_id = $(this).data('id');

        // remove from files array the one with id == media_id
        // ---
        var temp = [];
        files.forEach( it => { if (it.id != media_id) temp.push(it); });

        files = temp;           // re-define files
        draw_files_list();      // then re-draw files list
    });


   
    /** When modal show-up
     * -------------------------------------------------------------------------
     * ... prepare the manage-category form 
     * ... update select2 with possible parents
     */
    $('#editorModal').on('show.bs.modal', event => {
        let button = $(event.relatedTarget);    // Button that triggered the modal
        let action = button.data('action');     // action
        // var modal = $(this);    // modal object     
        
        // update modal literature

        switch (action) {
            case 'upload_file':
                $("#editorModal .modal-content").html(
                    modal_header('Εισαγωγή Αρχείου') + upload_file_form()
                );
                break;
            
                case 'preview':
                    let preview = preview_article(
                        $('.edit-page form input[name=title]').val(),
                        $('.edit-page form textarea[name=body]').val()
                    );
                    $("#editorModal .modal-content").html( modal_header('Προεπισκόπηση') + preview);
                    break;

            default:
                // do nothing
        }

    });



    /** submit upload file event
     * -------------------------------------------------------------------------
     */
    $('#editorModal').on('submit', 'form[name=upload_file_form]', function (event) {
        event.preventDefault();

        // create the FormData object
        // --- -- -- - - -
        var fd = new FormData(document.getElementById('file_upload_form'));

        // post the form (via ajax)
        $.ajax({
            url: '/admin/api/file_upload',
            type: 'POST',
            data: fd,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(response) {   // on success

                if (response.success) {      
                    files.push({    // ... update files array
                        id: response.id,
                        label: response.title,
                        path: response.path,
                        type: response.type
                    });
                    draw_files_list();                   

                    $('#editorModal').modal('hide');

                } else {
                    console.log('File not uploaded');
                }
            }
        });
    });


    // TODO:
    // disable links while previewing the article
    // OR add a target="_blank"


});