Fast 72 Hours - Gmail API Search and Delete Tool Front End

JavaJSPJavaScriptGoogle
Register
Submit a solution
The challenge is finished.

Challenge Overview

Gmail API Search and Delete Tool - Frontend Specification

1.     Project Overview

1.1     System Description

The Gmail API Search and Delete Tool is an administrative tool that can search for and delete messages in a Google Apps user’s Gmail account.  This application will also be responsible for OU based authorization and logging of applications actions.

This is a fast challenge to convert the UI Prototype to Java/JSP/JavaScript on Google App Engine platform. You can mock the backend services, we will integrate the back end services later.

1.2     Competition Task Overview

A complete list of deliverables can be found in the TopCoder Assembly competition Tutorial at:

http://apps.topcoder.com/wiki/display/tc/Assembly+Competition+Tutorials

Note: Please read the whole Application Design Specification first. All the details not mentioned in this specification are provided in that document.

1.2.1     Scope

This assembly is responsible for the following:

  • All classes shown on "Frontend Class Diagram"
  • Relevant JSP pages and JavaScript.

Implementation details for Spring MVC Controllers, interceptor and exception resolvers are provided at TCUML method documentations.

1.2.2     Spring MVC Controllers, Interceptors, Exception Resolvers

Implementation details for Spring MVC Controllers, interceptor and exception resolvers are provided at TCUML method documentations.

1.2.3     AJAX

This application makes extensive use of AJAX technique to avoid full-page refreshes.

The following is a general guideline for working with AJAX in this application:

$.ajax({

    url : "/userActions/12345/status",

    type : "GET",

    success : function() {

        // Perform logic after success

        ...

    },

    error : function(request, status, error) {

        ...

    }

});

AJAX operations in specific JSPs are only explained with the URL to request, HTTP method, request data and operations to do after successful AJAX request.

1.2.4     JSP Pages

1.2.4.1     header.jsp

This is the JSP that defines a page header fragment.

This JSP should be included by all JSP pages except for header.jsp and footer.jsp.

This JSP fragment includes:

  • Branding elements (logo, etc.)
  • Logout link (URL is retrieved from model attribute "logoutURL")

Wireframe Pages:

  • All wireframe pages

1.2.4.2     footer.jsp

This is the JSP that defines a page footer fragment.

This JSP should be included by all JSP pages except for header.jsp and footer.jsp.

This JSP fragment includes static copyright information and some external links as per storyboard.

Storyboard Pages:

  • All wireframe pages.

1.2.4.3     forbidden.jsp

This JSP page will display an error message indicating current logged in user does not have permission to access this application.

The Spring application should be configured to show this JSP page for 403 Forbidden response (AuthorizationInterceptor will respond with 403 if current user does not have permission).

Implementation Notes:

  • Show a static error message indicating current user does not have permission too access this application.

1.2.4.4     home.jsp

This JSP page presents the UI for searching/deleting email messages as well as logs.

This is the JSP view for HomeController#home.

Wireframe Pages:

  • home.html
  • search_results.html

Implementation Notes:

  • This JSP will display HTML form to gather user input for searching/deleting parameters.

  • Clicking on "Delete" or "Search" button will result the following AJAX request:

var file = $('#userListFile'); // the User List file input

var formData = new FormData();

formData.append('file', userListFile, userListFile.name);

$.ajax({

    url : "/userList",

    type : "POST",

    data : formData,

    cache : false,

    contentType : false,

    processData : false,

    success : function(users) {

        // successfully uploaded the file,

        // users in the file are returned as response data

        // Send request to POST /userActions to submit the user action

        var userAction = ...; // gather form input to UserAction object

        userAction.userEmails = users;

        userAction.messageSearchCriteria.searchTerm =  ...; // search term input

        userAction.messageSearchCriteria.subject = ...; // subject input

        userAction.messageSearchCriteria.startDate = ...; // startDate input

        userAction.messageSearchCriteria.endDate = ...; / endDate input

        userAction.actionType = ...; // "SEARCH" if "SEARCH" button is clicked, "SEARTCH_AND_DELETE" if "DELETE" button is clicked.

        $.ajax(

            url : "/userActions",

            type : "POST",

            data : userAction,

            success : function(userAction) {

                // successfully submitted user action

                // execute the user action

                $.ajax(

                    url : "/userActions/" + userAction.id + "/execute",

                    type : "POST",

                    success : function(userAction) {

                        // successfully executed user action

                        // display user action execution result

                        ...

                    },

                    error : function(request, status, error) {

                        ...

                    }

                );

                // at the same time, periodically poll user action status

                var pollStatus = function() {

                    $.ajax(

                        url : "/userActions/" + userAction.id + "/status",

                        type : "GET",

                        success : function(status) {

                            // update user action execution status

                            var progressPercentage = status.numberOfCompletedUsers /

                                  (status.numberOfCompletedUsers

                                     + status.numberOfInProgressUsers);

                            ...

                            if (status.numberOfInProgressUsers > 0) {

                                // interval is 1 second

                                setTimeout(pollStatus, 1000);

                            }

                        },

                        error : function(request, status, error) {

                            ...

                        }

                    );

                };

                pollStatus();

            },

            error : function(request, status, error) {

                ...

            }

        );

    },

    error : function(request, status, error) {

        ...

    }

});
  • This JSP will display HTML form to gather user input for searching UserAction's or UserActionPerUserResult's.

  • Clicking on "Search" button will result AJAX request to GET /userActions?searchTerm=<searchTerm> (if search term is specified) or GET /userActionPerUserResults?userEmail=<userEmail>&subject=<subject> (if user name and/or message title are specified). And upon receiving success response update the results table with the search result in the AJAX response.
  • On the search result table, each item should have an "Export" button, which should make GET request to "/userActions/{id}/export?format=<format>" (if the item represents a UserAction record) or "/userActionPerUserResults/{id}/export?format=<format>" (if the item represents a UserActionPerUserResult record). The <format> should be "PDF", "CSV" or "GOOGLE_SHEET" according to export format chosen by user.

1.3     Deliverables

  • Source code and configuration files.
  • Deployment guide to configure and verify the application.

1.4     Technology overview



Final Submission Guidelines

  • Source Code
  • Deployment Guide

Review style

Final Review

Community Review Board

Approval

User Sign-Off

Challenge links

ID: 30046643