GSoC Phase 3: Final Submission Report
--
GSoC Proposal Link: https://phabricator.wikimedia.org/T217493
Project Page: Page Forms
Mentors: Yaron Koren, Yashdeep Thorat, Erik Biegert
About my project
My project for GSoC was creating a special display interface for the MediaWiki Page Forms extension that allowed users to manage events and allows creation and editing for pages that call templates that contain one or more date/ datetime fields through a single calendar-like interface.
Templates are an integral part of MediaWiki. They can be used to render tables, infoboxes, and other HTML elements on the pages of a wiki. This makes it much easier for users to create complex and elegant pages, without any knowledge of HTML, CSS, etc. The Page Forms extension provides forms that can be used to create, edit and query data.
My project aims to add a calendar interface that allows creation and editing for pages that call templates that contain one or more date/ datetime fields. This interface was built with the FullCalendar JavaScript library. The interface also allows users to create and rename events. The spreadsheet interface supports input types like text, text area, tokens, date, datetime, and rating. Tree and Combobox are yet to be supported.
The calendar interface can be made into action for multiple-instance templates by setting ‘display=calendar’. The calendar interface supports two types of events:
- Single-day event. It can be configured by ‘event date field’ parameter of the {{{for template… tag.
- Multiple-day events. It can be configured by the use of two parameters ‘event start date field’ and ‘event end date field’
The ‘Title’ of the event can be set using the ‘event title field’ of the {{for template tag
Tutorial on how to use the calendar interface
Let’s say there is a template CalendarAllInput with three fields, Start Date, End Date and Title of the event. This is the {{{for template section.
{{{for template|CalendarAllInput|multiple|display=calendar|event title field=Title|event start date field=Start Date|event end date field=End Date|}}}
{| class=”formtable”
! Title:
| {{{field|Title}}}
|-
! Start Date:
| {{{field|Start Date|input type=datetime}}}
|-
! End Date:
| {{{field|End Date|input type=datetime}}}
|-
! Rating:
| {{{field|Rating|input type=rating}}}
|-
! AutoComplete:
| {{{field|AutoComplete|input type=text with autocomplete|values=Prospective,Live,Retired}}}
|-
! Tokens:
| {{{field|Tokens|input type=tokens}}}
|}
{{{end template}}}
Now I make a page ‘Form All Inputs’ using this form. The calendar would look like this. The user can select and one or more than dates and a popup form would appear which the user can fill. The ‘Title’ of the event also displays the event duration for datetime fields.The user can edit the duration of the event with datetime fields from the week tab. The user can pick and drop the events and event update the exisiting events.
This example shows the support for many input types like token input type, rating input type, text with autocomplete etc.
After hitting the “Save Page” button this is the wikitext that gets generated:
{{CalendarAllInput
|Title=Event 1
|Start Date=August 13, 2019 11:12:00 AM
|End Date=August 20, 2019 12:13:00 PM
|Rating=4
|AutoComplete=Live
|Tokens=This, is, indeed, AWESOME!
}}
Current status of the project: The features that I mentioned in my proposal have been implemented and the calendar interface is ready to be merged and get used.
I made some patches during the GSoC period. Here are the prominent ones:
I used the form structure created in the PageForms.php itself.
These parameters help the popup to know which fields are ‘Title’ of the event. Similarly, the date/datetime fields are defined.
Now, the event duration is shown alongside the event title.
Tokens input type is now supported by the calendar display too. I have used the select2.js prototypes to implement this.
This way user can resize the events of the calendar by pulling the end of the event. The catch here is, for single-day events, this can be done from the month view itself, but for multiple-days events, one has to go for week or day view.
- Miscellaneous
- Customised the create/edit/delete buttons.
- Improved the indentation and declaration of variables.
- Improved date and datetime input types handling. Here
The entire patchset is here
While working on my GSoC project, I faced a lot of challenges and overcoming them has taught me quite a few things. This was the first time I worked on such a huge project, one with a massive userbase. The major hurdle I faced at the start of each task was to understand the existing code related to it and accordingly implement the functions, prototypes. Many times, I was at crossroads and had to decide upon which approach to take to complete a task or solve an issue. My mentors were really helpful and guided me throughout the project duration. They also helped me make crucial decisions and introduced to me to the various modules of the MediaWiki codebase. In terms of coding, I learned how to use JavaScript, jQuery and Php callbacks efficiently and how to use the different actions provided by the MediaWiki API. In the process, I also started my own blog. I would also like to thank the org administrators of the Wikimedia Foundation for their valuable guidance and inputs.
