General developer forum

Newbie in trouble - Calendar Modal

 
Picture of João Ciocca
Newbie in trouble - Calendar Modal
 

Hi there, new guy here. At my work we have a test instance of 3.4.0-beta, and I've been tasked with a couple things, despite never having touched moodle as a dev before, so I'd like to ask for help and pointers on what I should research/read/edit/etc.

I've been asked to change how the "Event name" field on "New event" modal of the calendar works. Boss wants it to show suggestions as we type there - don't care how it's done, can be a simple "SELECT event from table like <event_name_field>". I know that calendar files have been installed in /srv/www/moodle/calendar, I know a bit of PHP and can google/stack for how to make the query, I just don't have the slightest idea where the "New event" modal is created and how to change it.

A couple of other things boss asked was:

  • that I change the label "Date" ("Data", in pt-br) for "Limit"; 
  • add a new "Priority" field;
  • and create a "Suggestions +" button besides the event name which would link to XYZ other stuff.

Again - I'm a total newbie on moodle, I can scratch something on PHP (but I'm an ace googler =p), I know basic logic programming. Any tips and directions you guys can give me will be awesome (and I won't be sitting waiting for replies, I'm continuing to search on my own...)

I'm sorry if this sound confusing, it's just that even I'm at a loss...

 
Average of ratings: -
Picture of Willian Mano Araújo
Re: Newbie in trouble - Calendar Modal
Plugin developers

Hi João, welcome to the Moodle World! smile

The "New event" form it's on /calendar/classes/local/event/forms/create.php file in definition function.

Add a new field will be a little bit complicated. You will need to modify some files.

You can put the "Suggestions +" button on the same form definition file.

Best regards.

 
Average of ratings: Useful (1)
Picture of João Ciocca
Re: Newbie in trouble - Calendar Modal
 

Yeah, looks like my PHP knowledge needs more PHP knowledge. I got to the file but still have no idea how to do anything. Thanks anyway, Willian!

 
Average of ratings: -
Picture of Murilo Timo Neto
Re: Newbie in trouble - Calendar Modal
 

Remember that the new calendar use mustashe templates.

modal_event_form.mustache in   /calendar/templates

And the js is in modal_event_form.js in /calendar/amd/src


o/ Nice job Ciocca

 
Average of ratings: -
Picture of João Ciocca
Re: Newbie in trouble - Calendar Modal
 

Following Willian's point about create.php file I was able to figure out how to rename "Date" label (that label was using a fixed "date" string, so I changed it to use "eventdate" string from "calendar.php" lang file and changed that), and also how to include the priority dropdown select control... now I just need to figure out how to store the priority information of each event.


Even if Willian said that it's possible to put the "Suggestions+" button on the same form, I fail now to see how that could be - at least following the original idea of it being placed after the Event Name textfield. From what I understand that row is created using the "addElement" (the same way I used to create the priority select control), so unless I can understand and figure out a way to hack this... function? method? whatever "addElement" is, there is no way of adding it after the textfield.


Murilo's pointing me to the mustache files got me puzzled. This is the content of the modal_event_form.mustache:

{{< core/modal }}

    {{$footer}}

        <button type="button"

                class="btn btn-primary"

                data-context-id="{{contextid}}"

                data-action="save">


            {{#str}} save {{/str}}

            <span class="hidden" data-region="loading-icon-container">

                {{> core/loading }}

            </span>

        </button>

    {{/footer}}

{{/ core/modal }}


First thing I thought was "so, there's a save string that isn't being translated. Maybe if I add that string to the lang files the button will be translated" - that totally failed.


Also, from the little I grasp about mustache so far, I can understand that the template contain only the footer with the save button, nothing else - so I can't use it for anything. Maybe my mustache needs more mustache.


I'm trying to understand the modal_event_form.js to see if there's something there I can use as base for the autocomplete suggestions while typing in the "Event name" textfield, but now I think my js needs more js - or maybe I'm getting dizzy with sleepiness. I'm also trying to figure out (with this same js file) how I can include the newly created Priority select control, and failing.


 
Average of ratings: -
Picture of João Ciocca
Re: Newbie in trouble - Calendar Modal
 

Crap, can't edit anymore. I'll leave this here in case my sleep starts beating me up - I think the solution to the autocomplete suggestion issue may lie in the autocomplete element of the Form API I just found out about - https://docs.moodle.org/dev/lib/formslib.php_Form_Definition#autocomplete

I think I should first try to make an autocomplete example using something native to moodle, like "SELECT distinct name FROM `mdl_config_plugins`"...

 
Average of ratings: -
Picture of Murilo Timo Neto
Re: Newbie in trouble - Calendar Modal
 

For autocompletion I think it's easier to implement new code, using jquery, maybe call a amd module in mustache template. 

the autocomplete defined in the API seems to work more with tags, and I do not know if it's the effect you want.

to understand how the form is being rendered, take a look at this link:

https://docs.moodle.org/dev/MForm_Modal#Step_3_-_Add_a_callback_for_the_fragments_API_to_load_the_form

 
Average of ratings: -
Picture of João Ciocca
Re: Newbie in trouble - Calendar Modal
 

Looks like my Moodle needs more Moodle. I really fail to see how I can alter that when I can't find where to change the addElement that creates the textfield, be it using jquery or anything else...

Creating the Priority select control was "easy": inside create.php file indicated by Willian I added "$mform->addElement('select','eventpriority', get_string('eventpriority', 'calendar'), ['Baixa','Média','Alta']);" between the Event name field and Event time start field. But that's as far as I could go so far, understanding how to use "$mform->addElement" to include a new element on the form. No idea on how to change the addElement.

BTW, for some reason the link in your post seems broken - I need to copy and paste it on another tab to go there... but anyway, I decided to check that page from top to bottom. "This tutorial is for advanced Moodle devs" - I'm so not there yet =p but let's see if I can take something from there.

Find something like Step 1 mentions on moodle/calendar/view.php - looks like "$renderer = $PAGE->get_renderer('core_calendar');" is an equivalent to the example on that page "$output = $PAGE->get_renderer('core_group');" - but there's no equivalent to "echo $output->render($renderable)". Also, I fail to see an equivalent to $renderable. Also no equivalent for the next public function "render_index_page".

But there are 4 "render_something" on view.php: 3 of those inside a condition that considers day, upcoming or month view. Bunch of variables here - $data, $template, $calendar and $view - most of them linked to the calendar_get_view(), which seems to be where the "new event" button would be created, which is described (defined? I always fail at these concepts of programing - one language will call it this way, another will call the same thing something else...) on calendar\lib.php file at line 3059. 

But the only reference for "New event button" is before that, at line 2428. And all it does is check if the user can add event. This function appears 6 times in all files: definition at calendar\lib.php, calendar\managesubscriptions.php, 3 exporters (day, upcoming and month) and the footer. No sign of the button being created - so that trail of thought dies here.

Trying something else - the modal_event_form.mustache, as mentioned in a previous post, only mentions the footer of the modal and the save button (which apparently can't be translated), so that's a dead end.

The AMD file modal_event_form.js... at line 395 begins "Send the form data to the server to create or update an event" - well, seems like this is where I need to mess around if Priority control is going to be of use and not just cosmetic, but that's all.

 
Average of ratings: -
Picture of João Ciocca
Re: Newbie in trouble - Calendar Modal
 

ok, I got to hijack view.php, inspired by it's line 155 "echo html_writer::end_tag('div');"

From there, I've been trying stuff at the bottom. This, works:

$loadAttrib = [
    'src' => 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js',
];
echo html_writer::tag('script',null,$loadAttrib);
$jqScript = '
    $( document ).ready(function() {
            alert( "Hijacked!" );
        });
';
$jqSattrib = [
    'type' => 'text/javascript',
];
echo html_writer::tag('script',$jqScript,$jqSattrib);

But something like this, doesn't...

$jqScript = '
    $( "#id_name" ).keypress(function() {
            alert( "Hijacked!" );
        });
';

And I have just no idea why... =D (keypress, keydown, keyup, none of them works)
 
Average of ratings: -
Picture of João Ciocca
Re: Newbie in trouble - Calendar Modal
 

I also got this snippet to work on amd/src/view_manager.js...

require(['jquery'], function($) {
    function hijacked() {
        alert( "Hijacked!" );
    }

    $( document ).ready(hijacked);
});

But that all. Anything I try to do with #id_name won't work no matter what, no matter how.

 
Average of ratings: -