From 1f8c775779e4834c204b0682b94f6694c59e5276 Mon Sep 17 00:00:00 2001
From: KVGarg <co16326.ccet@gmail.com>
Date: Fri, 9 Aug 2019 23:55:01 +0530
Subject: [PATCH] tabs: Fetch and Display forms from webservices

The forms uploaded by developers from community
website, are being fetched from Webservices
where the request to add a new form is being
processed. If a valid request is created, the form
is added to the database. Therefore, we can fetch
those forms and display them on the projects website.

Closes https://github.com/coala/projects/issues/284
---
 index.html               |  8 ++++---
 partials/tabs/forms.html | 46 ++++++++++++++++++++++++++++++++++++++++
 resources/css/style.css  |  7 ++++++
 resources/js/app.js      | 20 +++++++++++++++++
 4 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 partials/tabs/forms.html
diff --git a/index.html b/index.html
index dcd9166e..0488d153 100644
--- a/index.html
+++ b/index.html
@@ -38,11 +38,13 @@
         <div class="row">
           <div class="col s12">
             <ul class="tabs uppercase">
-              <li class="tab col m4"><a ng-click="tc.setTab('/projects')" onmousedown="keyPressed(event, '#/projects')" ng-class="{active:tc.isSet('/projects')}">Projects</a>
+              <li class="tab col m3"><a ng-click="tc.setTab('/projects')" onmousedown="keyPressed(event, '#/projects')" ng-class="{active:tc.isSet('/projects')}">Projects</a>
               </li>
-              <li class="tab col m4"><a ng-click="tc.setTab('/mentors')" onmousedown="keyPressed(event, '#/mentors')" ng-class="{active:tc.isSet('/mentors')}">Mentors</a>
+              <li class="tab col m3"><a ng-click="tc.setTab('/mentors')" onmousedown="keyPressed(event, '#/mentors')" ng-class="{active:tc.isSet('/mentors')}">Mentors</a>
               </li>
-              <li class="tab col m4"><a ng-click="tc.setTab('/faq')" onmousedown="keyPressed(event, '#/faq')" onerror="" ng-class="{active:tc.isSet('/faq')}">Faq</a>
+              <li class="tab col m3"><a ng-click="tc.setTab('/faq')" onmousedown="keyPressed(event, '#/faq')" onerror="" ng-class="{active:tc.isSet('/faq')}">Faq</a>
+              </li>
+              <li class="tab col m3"><a ng-click="tc.setTab('/forms')" onmousedown="keyPressed(event, '#/forms')" onerror="" ng-class="{active:tc.isSet('/forms')}">Forms</a>
               </li>
             </ul>
           </div>
diff --git a/partials/tabs/forms.html b/partials/tabs/forms.html
new file mode 100644
index 00000000..6cee7c6c
--- /dev/null
+++ b/partials/tabs/forms.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<div class="main-content container-fluid">
+  <div class="row">
+    <div class="col m8 offset-m2">
+      <h1 class="fine center">Open Source Forms</h1>
+      <br>
+    </div>
+  </div>
+</div>
+<section>
+  <div class="container">
+      <table class="striped" ng-show="osforms.formsList.length !== 0" style="margin-bottom:20px;">
+        <thead>
+            <tr class="center-align-text">
+                <th>Title</th>
+                <th>Submissions Till</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr ng-repeat="form in osforms.formsList">
+                <td>
+                    <div>
+                        <strong><a href="{{ form.url }}" data-proofer-ignore>{{ form.title }}</a></strong>
+                        <div style="padding-left: 10px;">
+                            <p ng-show="form.description !== null">{{ form.description }}</p>
+                            <p ng-show="form.user !== null">
+                                Uploaded by: <a href="https://github.com/{{ form.user }}" data-proofer-ignore>{{ form.user }}</a>
+                            </p>
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    {{ form.expiry_date | date:"medium" }}
+                </td>
+            </tr>
+        </tbody>
+      </table>
+      <div class="apply-flex" ng-show="osforms.formsList.length === 0" style="padding: 5% 0;">
+        <h6>
+            No forms have been uploaded, yet! If you are already a member of organization and a developer,
+            you can share it with us on <a href="https://community.coala.io/">Community website</a>
+            by logging-in.
+        </h6>
+      </div>
+  </div>
+</section>
diff --git a/resources/css/style.css b/resources/css/style.css
index f2395d87..4c51df5c 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -1,3 +1,10 @@
+.apply-flex {
+  display: flex;
+  justify-content: center;
+}
+.center-align-text {
+  text-align: center;
+}
 .hash_value_dup {
   position: 'absolute';
   left: '-9999px';
diff --git a/resources/js/app.js b/resources/js/app.js
index af811167..26076588 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -55,6 +55,9 @@
             when('/faq', {
                 template: '<faq></faq>'
             }).
+            when('/forms', {
+                template: '<forms></forms>'
+            }).
             otherwise({
                 redirectTo: '/projects'
             });
@@ -416,4 +419,21 @@
         }
     }]);
 
+    app.directive('forms', ['$http', function ($http) {
+        return {
+            restrict: 'E',
+            templateUrl: '/partials/tabs/forms.html',
+            controller: function ($scope, $rootScope) {
+                self = this
+                self.formsList = []
+
+                $http.get('https://webservices.coala.io/osforms')
+                    .then(function (forms) {
+                        self.formsList = forms.data
+                    })
+            },
+            controllerAs: "osforms"
+        }
+    }]);
+
 })();
