community/: Display org teams

The webpage will be displaying all the
organization teams, to the authenticated
users only. If tried to access w/o auth,
the user will be redirected to homepage
with an error message.

Closes coala#287

Author: KVGarg

community/urls.py

@@ -7,7 +7,10 @@
 from django.conf.urls.static import static
 from django.conf import settings
 
-from community.views import HomePageView, JoinCommunityView
+from community.views import (
+    HomePageView, JoinCommunityView,
+    OrganizationTeams
+)
 from gci.views import GCIStudentsList
 from gci.feeds import LatestTasksFeed as gci_tasks_rss
 from ci_build.view_log import BuildLogsView
@@ -39,6 +42,12 @@ def get_index():
         distill_func=get_index,
         distill_file='join/index.html',
     ),
+    distill_url(
+        r'teams/', OrganizationTeams.as_view(),
+        name='org-teams',
+        distill_func=get_index,
+        distill_file='teams/index.html',
+    ),
     distill_url(
         r'gci/tasks/rss.xml', gci_tasks_rss(),
         name='gci-tasks-rss',

community/views.py

@@ -7,6 +7,7 @@
 from trav import Travis
 
 from django.views.generic.base import TemplateView
+from django.views.generic import ListView
 
 from .git import (
     get_org_name,
@@ -209,3 +210,14 @@ def get_context_data(self, **kwargs):
             'JOIN_COMMUNITY_FORM_NAME', None
         )
         return context
+
+
+class OrganizationTeams(ListView):
+
+    template_name = 'teams.html'
+    model = Team
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context = get_header_and_footer(context)
+        return context

data/migrations/0008_auto_20190802_0745.py

@@ -0,0 +1,28 @@
+# Generated by Django 2.1.7 on 2019-08-02 07:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('data', '0007_auto_20190802_2015'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='team',
+            name='description',
+            field=models.TextField(default=None, max_length=500, null=True),
+        ),
+        migrations.AddField(
+            model_name='team',
+            name='increased_count',
+            field=models.PositiveSmallIntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name='team',
+            name='members_count',
+            field=models.PositiveSmallIntegerField(default=0),
+        ),
+    ]

data/models.py

@@ -3,6 +3,9 @@
 
 class Team(models.Model):
     name = models.CharField(max_length=200, default=None)
+    description = models.TextField(max_length=500, default=None, null=True)
+    members_count = models.PositiveSmallIntegerField(default=0)
+    increased_count = models.PositiveSmallIntegerField(default=0)
 
     def __str__(self):
         return self.name

static/css/teams.css

@@ -0,0 +1,17 @@
+.light-green-color {
+    color: green;
+}
+
+.organization-teams {
+    margin: auto;
+    width: 60%;
+    min-width: 330px;
+}
+
+.team-name {
+    font-size: 1.5em;
+}
+
+.team-desc {
+    padding-left: 20px;
+}

static/js/main.js

@@ -8,6 +8,17 @@ $(document).ready(function(){
     var formSubmitted = urlParams.get('form_submitted');
     var formType = urlParams.get('form_type');
 
+    var userAuthenticated = urlParams.get('auth');
+
+    var current_search_location = window.location;
+    if(current_search_location.toString().search('teams')>0){
+        var is_authenticated = Cookies.set('authenticated');
+        var username = Cookies.set('username');
+        if(is_authenticated !== true && username === undefined){
+            window.location = window.location.origin + '?auth=false';
+        }
+    }
+
     if(formSubmitted==='True'){
         var message = '';
         if(formType==='login'){
@@ -30,6 +41,13 @@ $(document).ready(function(){
         $('.important-message').text(message);
         $('.form-submission-popup').css('display', 'block');
     }
+    else if(userAuthenticated === 'false'){
+        $('.important-message').text(
+          'You tried to access a webpage, which is available to only' +
+          ' authenticated users. Please join the community or Login(if' +
+          ' already a member of organization)');
+        $('.form-submission-popup').css('display', 'block');
+    }
 
     function activate_dropdown(){
         if ($('nav').width() < 992 ){
@@ -44,7 +62,7 @@ $(document).ready(function(){
 
     function check_user_authenticated_or_not() {
         if(Cookies.get('authenticated')){
-            modify_html_elements('none', 'none','block', 'block');
+            modify_html_elements('none', 'none','block', 'block', 'block');
         }
     }
 
@@ -60,11 +78,12 @@ $(document).ready(function(){
 
     function modify_html_elements(popup_form_display, login_option_display,
                                   logout__option_display,
-                                  form_option_display) {
+                                  form_option_display, teams_option_display) {
         $('.form-popup').css('display', popup_form_display);
         login_user_el.css('display', login_option_display);
         logout_user_el.css('display', logout__option_display);
         $('.forms-dropdown-option').css('display', form_option_display);
+        $('.teams-dropdown-option').css('display', teams_option_display);
     }
 
     function manipulate_web_page_data(oauth_provider, http_response_text) {
@@ -73,7 +92,7 @@ $(document).ready(function(){
             // Cookies expires in 3 days
             Cookies.set('authenticated', true, {expires: 3});
             Cookies.set('username', json_data.user, {expires: 3});
-            modify_html_elements('none', 'none','block', 'block');
+            modify_html_elements('none', 'none','block', 'block', 'block');
         }
         else {
             display_error_message(oauth_provider, json_data.message);
@@ -144,7 +163,7 @@ $(document).ready(function(){
     logout_user_el.click(function () {
         Cookies.remove('authenticated');
         Cookies.remove('username');
-        modify_html_elements('none', 'block','none', 'none');
+        modify_html_elements('none', 'block','none', 'none', 'none');
     });
 
     $('.login-with-github').click(function(e) {

templates/base.html

@@ -67,7 +67,7 @@
     </ul>
 
     <ul id="organisation-dropdown" class="dropdown-content">
-      <li><a href="#">Teams</a></li>
+      <li class="teams-dropdown-option display-none"><a href="{% url 'org-teams' %}" class="">Teams</a></li>
       <li><a href="{% url 'community-data' %}">Contributors Information</a></li>
       <li><a href="#">Mentors</a></li>
       <li><a href="{% url 'community-gci' %}">Google Code-in Students</a></li>

templates/teams.html

@@ -0,0 +1,55 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+
+{% block add_css_files %}
+  <link rel="stylesheet" href="{% static 'css/teams.css' %}">
+{% endblock %}
+
+{% block main-content %}
+  <div class="web-page-details apply-flex center-content">
+    <h3 style="padding-right: 15px">~</h3>
+    <h3 class="page-name">
+      <img src="{{ org.logo_url }}" alt="{{ org.name }}">
+       Organization Teams
+    </h3>
+    <h3 style="padding-left: 15px">~</h3>
+  </div>
+  <div class="organization-teams">
+    <table class="highlight">
+      <thead>
+        <tr class="custom-green-color-font">
+          <th>
+            <h5>Team</h5>
+          </th>
+          <th class="text-center">
+            <h5>No. of Members</h5>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for team in object_list %}
+        <tr>
+          <td>
+            <div>
+              <h6 class="team-name">{{ team.name }}</h6>
+              <p class="team-desc"><em>{{ team.description }}</em></p>
+            </div>
+          </td>
+          <td class="text-center bold-text">
+            {{ team.members_count }}
+            {% if team.increased_count > 0 %}
+            (<i class="fa fa-arrow-up light-green-color"
+               aria-hidden="true">
+            </i>
+            {{ team.increased_count }} members)
+            {% endif %}
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  <p class="custom-green-color-font">Note: The increased members count
+    refreshes every week.</p>
+  </div>
+
+{% endblock %}