Merge pull request #60 from DemocraciaEnRed/dev2.0_about_us

agregando seccion preguntas y respuestas

ext/lib/api-v2/about/index.js

@@ -0,0 +1,44 @@
+const express = require('express')
+
+const middlewares = require('lib/api-v2/middlewares')
+
+const api = require('lib/db-api')
+
+const utils = require('lib/utils')
+const expose = utils.expose
+
+const app = (module.exports = express.Router())
+
+const goToNextRoute = (req, res, next) => next('route')
+
+app.post('/about',
+  middlewares.users.restrict,
+  middlewares.forums.findFromBody,
+  goToNextRoute)
+
+app.put('/about/:id',
+  middlewares.users.restrict, // restringe
+  middlewares.about.findById,
+  goToNextRoute)
+
+app.delete('/about/:id',
+  middlewares.users.restrict, // restringe
+  middlewares.about.findById,
+  goToNextRoute)
+
+app.put('/about-update-order',
+  middlewares.users.restrict, // restringe
+  middlewares.forums.findFromBody,
+  goToNextRoute
+  )
+
+app.get('/about-all', (req, res, next) => {
+  try {
+    api.about.all(function (err, faqs) {
+      if (err) return _handleError(err, req, res);
+      res.status(200).json(faqs.map(expose('id question answer createdAt order')))
+    })
+  } catch (err) {
+    next(err)
+  }
+})

ext/lib/api-v2/index.js

@@ -4,3 +4,4 @@ const app = module.exports = express()
 
 app.use(require('./topics'))
 app.use(require('./topics/xlsx'))
+app.use(require('./about'))

ext/lib/site/header/component.js

@@ -155,7 +155,7 @@ class Header extends Component {
 
             <div className={`header-item ${window.location.pathname.includes('/acerca-de') ? 'active' : ''}`}>
               <Link
-                to='/s/acerca-de'
+                to='/acerca-de'
                 className='header-link'
                 tabIndex="2"
                 >

ext/lib/site/header/mobile-menu/component.js

@@ -37,7 +37,7 @@ class MobileMenu extends Component {
               <ul>
                  <div className='header-item mobile-link'>
                   <Link
-                    to='/s/acerca-de'
+                    to='/acerca-de'
                     className='header-link'
                     activeStyle={{ color: '#8C1E81' }}
                     onClick={this.props.toggleOnClick}

ext/lib/site/home-about/component.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react'
+// https://github.com/glennflanagan/react-responsive-accordion
+import Accordion from 'react-responsive-accordion'
+
+import aboutStore from 'lib/stores/about-store/about-store'
+import Footer from 'ext/lib/site/footer/component'
+import Jump from 'ext/lib/site/jump-button/component'
+import Anchor from 'ext/lib/site/anchor'
+import forumStore from 'lib/stores/forum-store/forum-store'
+
+export default class HomeAbout extends Component {
+  constructor () {
+    super()
+
+    this.state = {
+      forum: null,
+      faqs: null
+    }
+  }
+
+  componentDidMount () {
+    aboutStore
+      .findAll()
+      .then((faqs) => this.setState({ faqs }))
+      .catch((err) => {
+        throw err
+      })
+    const u = new window.URLSearchParams(window.location.search)
+    if (u.get('scroll') === 'cronograma') return Anchor.goTo('cronograma')
+    this.goTop()
+
+    // traer forum al state
+    forumStore
+      .findOneByName('proyectos')
+      .then((forum) => this.setState({ forum }))
+      .catch((err) => {
+        throw err
+      })
+  }
+
+  goTop () {
+    window.scrollTo(0, 0)
+  }
+
+  render () {
+    const faqs = this.state.faqs
+
+    return (
+      <div>
+        <section className='banner-static'>
+          <div className='banner'></div>
+          <div className='contenedor'>
+            <div className='fondo-titulo'>
+              <h1>Presupuesto Participativo</h1>
+            </div>
+          </div>
+        </section>
+        <div id='container'>
+          <div className='ext-acerca-de container'>
+            <div>
+              <div className='faq text-left'>
+                {faqs && 
+                  <Accordion startPosition={-1}>
+                    {faqs.map((faq) => (
+                      <div key={faq.id} data-trigger={`${faq.question}`}>
+                        <p className='p-padding' dangerouslySetInnerHTML={{ __html: faq.answer }} ></p>
+                      </div>
+                    ))}
+                  </Accordion>
+                }
+              </div>
+
+              <div className='fila no-bg hidden'>
+                <Anchor id='mapa'>
+                  <div className='map-box'>
+                    <div className='mapa'>
+                      <iframe
+                        src='https://www.google.com/maps/d/u/0/embed?mid=1DEX8V6qaMQy-8NYKNPhsLH_xQnY&z=11&ll=-34.5174, -58.5026'
+                        width='640'
+                        height='480'
+                      ></iframe>
+                    </div>
+                  </div>
+                </Anchor>
+
+              </div>
+            </div>
+          </div>
+        </div>
+        <Jump goTop={this.goTop} />
+        <Footer />
+      </div>
+    );
+  }
+}

ext/lib/site/home-about/styles.styl

@@ -0,0 +1,2 @@
+.faq
+  margin-bottom: 16px

ext/lib/site/home-forum/component.js

@@ -1,12 +1,15 @@
 import React from 'react'
 //import HomeProyectos from '../home-proyectos/component'
 import HomePropuestas from '../home-propuestas/component'
+import HomeAbout from '../home-about/component';
 
 const HomeForum = (props) => {
   const { params: { forum } } = props
   switch (forum) {
     case 'propuestas':
       return <HomePropuestas {...props} />
+    case 'acerca-de':
+      return <HomeAbout {...props} />
     default:
       // que nunca caiga en la vieja pantalla de proyectos
       //return <HomeProyectos {...props} />

lib/admin/admin-about-us/styles.styl

@@ -0,0 +1,78 @@
+#user-badges-wrapper form .form-group span.error
+  top: 40px
+
+h5
+  font-size: 22px;
+  margin-top: 30px;
+
+.panel-group 
+  padding: 5px 30px
+  .panel-default
+    border: none
+    border-radius: 0px
+    box-shadow: none
+    border-top: 1px solid #7cbb42;
+    &:first-of-type
+      border-top: none
+    .panel-heading
+      cursor: pointer
+      display: flex
+      background-color: inherit
+      justify-content: space-between;
+      .glyphicon-sort
+        margin-top: 4px
+        font-size: 1.2em;
+        font-weight: 700;
+        color: #696969
+      .panel-title
+        font-size: 1.2em;
+        font-weight: 700;
+        color: #696969
+    .panel-body
+      color: #696969
+    .actions
+      padding: 8px
+      .glyphicon-edit, .glyphicon-trash
+        margin-right: 16px
+        cursor: pointer
+      .glyphicon-edit:after
+        display: none
+        position: absolute
+        top:-30px
+        left: -30px
+        content: 'Editar'
+        background-color: #ddd
+        padding: 5px 10px 
+        border-radius: 25px
+        font-size: 12px;
+        line-height: 1.4;
+        font-family: 'Open Sans', sans-serif;
+      .glyphicon-edit:hover:after
+        display: block
+      .glyphicon-trash:after
+        content: 'Borrar'
+        color: red
+        display: none
+        position: absolute
+        top:-30px
+        left: -30px
+        background-color: #ddd
+        padding: 5px 10px 
+        border-radius: 25px
+        font-size: 12px;
+        line-height: 1.4;
+        font-family: 'Open Sans', sans-serif;
+      .glyphicon-trash:hover:after
+        display: block
+
+.actionsForm
+  text-align: right 
+  button
+    margin-right: 8px 
+
+.msg.success
+  color: #27ae60
+
+.btn
+  margin-left: 5px
+  margin-bottom: 8px

lib/admin/admin-about-us/template.jade

@@ -0,0 +1,50 @@
+#topics-wrapper
+  .topics-admin
+    .heading
+      h2= 'Preguntas y respuestas'
+      .row
+        .col-sm-8
+          .form-messages 
+        .col-sm-4
+          .action.text-right
+            button.btn.btn-info.createSortable="Ordenar"
+            button.btn.btn-danger.cancel-order.hidden="Cancelar"
+            button.btn.btn-success.save-order.hidden="Guardar"
+
+      .template-panel-group 
+        .panel.panel-default.template
+          .panel-heading
+            h4.panel-title
+            span.glyphicon.glyphicon-sort.icon-sort.hidden     
+          .panel-collapsable
+            .panel-body
+            .actions.text-right
+              span.glyphicon.glyphicon-edit
+              span.glyphicon.glyphicon-trash
+      .panel-group
+      form#editForm.form(action=form.action, method='post', role='form', autovalidate, autosubmit)
+        .form-group
+          h5= 'Pregunta:'
+          input.form-control(
+            id='question'
+            type='text'
+            name='question'
+            required
+          )
+          br
+        .form-group
+          h5='Respuesta:'
+          #editAnswer
+          input#answer.textArea(
+            type='textarea'
+            hidden
+          )
+        .alert.alert-warning.hidden(
+          role="alert"
+        )
+          span.glyphicon.glyphicon-alert
+          span.sr-only="alert:"
+          span.alertText
+        .form-group.actionsForm
+          button.btn.btn-success.btn-lg= t('settings.save')
+          a.btn.btn-danger.btn-lg= t('common.cancel')