Public Entities

.gitignore

@@ -4,6 +4,7 @@ env
 staticfiles/
 docs/_build
 *.sqlite3
+*.sql
 .tox
 .coverage
 /.vscode/

assets/js/components/header-and-footer/NavBar/index.html

@@ -46,16 +46,20 @@ <h2 class="u-sReadOnly">Navigate to a section on this site:</h2>
             <span class="NavBar-link{{ activeClass }}{{ subLinkClass }} {% if item.children.all %}dropdown{% endif %}">
             {% endif %}
 
-
             {% if item.name == 'homepage' %}
             <span class="NavBar-iconWrap">
               {% include 'components/Icon/index.html' with type="home" %}
             </span>
             <span class="NavBar-text is-mobileOnly">Home</span>
             {% else %}
-            <span class="NavBar-text">{{ item.label }}</span>
+            <span class="NavBar-text">{{ item.label }}
+              {% if item.highlight_as_new %}
+              <span class="Navbar-Tag-new">New</span>
+              {% endif %}
+            </span>
             {% endif %}
 
+
 
             {% if item.url %}
             </a>

assets/js/components/public-entity-budgets/ArrowButtons/index.html

@@ -0,0 +1,53 @@
+{% load define_action %}
+
+{% if fixed == "true" %}
+  {% assign "<nav class='ArrowButtons ArrowButtons--fixed' data-sticky-arrows>" as root %}
+  {% assign  "" as activeModifiers %}
+  {% assign "" as responsiveModifiers %}
+  {% assign "</nav>" as closingTag %}
+  {% assign " nav-link" as navlinkModifier %}
+{% else %}
+  {% assign "<div class='ArrowButtons'>" as root %}
+  {% assign " active" as activeModifiers %}
+  {% assign " is-responsive" as responsiveModifiers %}
+  {% assign "</div>" as closingTag %}
+  {% assign "" as navlinkModifier %}
+{% endif %}
+
+
+{{ root }}
+  <ul class="ArrowButtons-list nav">
+    <li class="ArrowButtons-item nav-item">
+      <a class="ArrowButtons-button ArrowButtons-button--link ArrowButtons-button--green{{ navlinkModifier }}{{ activeModifiers }}{{ responsiveModifiers }}" href="{{ link_1 }}" data-scroll-smooth="{{ link_1 }}">
+        <div class="ArrowButtons-box ArrowButtons-box--green{{ responsiveModifiers }}">
+          <div>
+            <div class="ArrowButtons-heading{{ responsiveModifiers }}">Plan</div>
+            <div class="ArrowButtons-description{{ responsiveModifiers }}">Budgets and expenditure planning.</div>
+          </div>
+        </div>
+      </a>
+    </li>
+
+    <li class="ArrowButtons-item nav-item">
+      <a class="ArrowButtons-button ArrowButtons-button--link ArrowButtons-button--orange{{ navlinkModifier }}{{ activeModifiers }}{{ responsiveModifiers }}" href="{{ link_2 }}" data-scroll-smooth="{{ link_2 }}">
+        <div class="ArrowButtons-box ArrowButtons-box--orange{{ responsiveModifiers }}">
+          <div>
+            <div class="ArrowButtons-heading{{ responsiveModifiers }}">Implement</div>
+            <div class="ArrowButtons-description{{ responsiveModifiers }}">Implementation of department’s programmes.</div>
+          </div>
+        </div>
+      </a>
+    </li>
+
+    <li class="ArrowButtons-item nav-item">
+      <a class="ArrowButtons-button ArrowButtons-button--link ArrowButtons-button--purple {{ navlinkModifier }}{{ activeModifiers }}{{ responsiveModifiers }}" href="{{ link_3 }}" data-scroll-smooth="{{ link_3 }}">
+        <div class="ArrowButtons-box ArrowButtons-box--purple{{ responsiveModifiers }}">
+          <div>
+            <div class="ArrowButtons-heading{{ responsiveModifiers }}">Review</div>
+            <div class="ArrowButtons-description{{ responsiveModifiers }}">Review of expenditure over the fiscal year.</div>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+{{ closingTag }}

assets/js/components/public-entity-budgets/ArrowButtons/scripts.js

@@ -0,0 +1,72 @@
+import DebounceFunction from '../../../utilities/js/helpers/DebounceFunction.js';
+
+
+const calcAbsolutePositionFromTop = (node) => {
+  const { top } = node.getBoundingClientRect();
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  return top + scrollTop;
+};
+
+
+function ArrowButtons() {
+  const node = document.querySelector('[data-sticky-arrows]');
+  const clickNodes = document.querySelectorAll('[data-scroll-smooth]');
+
+  const clickOverride = (event, target) => {
+    event.preventDefault();
+    const targetNode = document.querySelector(target);
+    const absoluteTop = calcAbsolutePositionFromTop(targetNode);
+    const top = absoluteTop - 100;
+
+    window.scrollTo({
+      behavior: 'smooth',
+      top,
+    });
+  };
+
+  if (Array.from) {
+    Array.from(clickNodes).forEach((innerNode) => {
+      const target = innerNode.getAttribute('data-scroll-smooth');
+
+      if (target) {
+        innerNode.addEventListener(
+          'click',
+          event => clickOverride(event, target),
+        );
+      }
+    });
+  }
+
+  const updateSticky = () => {
+    if (node) {
+      const active = node.classList.contains('is-active');
+      const top = window.pageYOffset || document.documentElement.scrollTop;
+
+      if (top < 700 && active) {
+        return node.classList.remove('is-active');
+      }
+
+      if (top > 700 && !active) {
+        return node.classList.add('is-active');
+      }
+    }
+
+    return null;
+  };
+
+  const viewportDebounce = new DebounceFunction(50);
+  const updateViewport = () => viewportDebounce.update(updateSticky);
+
+  window.addEventListener(
+    'resize',
+    updateViewport,
+  );
+
+  window.addEventListener(
+    'scroll',
+    updateViewport,
+  );
+}
+
+
+export default ArrowButtons();

assets/js/components/public-entity-budgets/ContributedData/index.html

@@ -0,0 +1,38 @@
+{% load define_action %}
+
+{% if datasets|length > 0 %}
+  {% assign '' as padding %}
+{% else %}
+  {% assign ' u-paddingBottom0' as padding %}
+{% endif %}
+
+
+<div class="Section is-bevel" id="contributed-data">
+  <div class="Section-card is-invisible {{ padding }}">
+    <div class="Section-title">Contributed data</div>
+  </div>
+
+  {% if datasets|length > 0 %}
+    {% for item in datasets %}
+
+      <div class="Section-card u-marginBottom10">
+        <div class="ContributedItem">
+          <div class="ContributedItem-info">
+            <div class="u-fontWeightBold">{{ item.name }}</div>
+            <div class="u-marginTop5">Data by {{ item.contributor }}</div>
+          </div>
+          <div class="ContributedItem-button">
+            <a class="Button is-inline" href="{{ item.url_path }}">View Dataset</a>
+          </div>
+        </div>
+      </div>
+
+    {% endfor %}
+  {% endif %}
+
+  <div class="Section-card is-invisible u-marginTop15">
+    <h3>How can I contribute?</h3>
+    <div>Do you have data related to this department that you would like to contribute?</div>
+    <a class="Button is-secondary u-marginTop15" href="{{ CKAN_URL }}/user/login?came_from=/dataset/new" target="_blank">Log in and submit your data</a>
+  </div>
+</div>

assets/js/components/public-entity-budgets/IntroSection/index.html

@@ -0,0 +1,19 @@
+{% load define_action %}
+{% load markdownify %}
+{% if location == 'National' %}
+  {% assign 'ENE' as short_estimate %}
+  {% assign 'Estimates of National Expenditure' as long_estimate %}
+{% else %}
+  {% assign 'EPRE' as short_estimate %}
+  {% assign 'Estimates of Provincial Revenue and Expenditure' as long_estimate %}
+{% endif %}
+
+<div class="IntroSection">
+  <div class="IntroSection-textWrap">
+    <div class="js-initIntroSection">
+      <div class="IntroSection-text js-content">
+        {{ description  | markdownify }}
+      </div>
+    </div>
+  </div>
+</div>

assets/js/components/public-entity-budgets/IntroSection/index.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+
+export default function IntroSection({ innerHtml, open, setOpen, parentAction, triggered }) {
+  const prompt = (
+    <div>
+      <div className="IntroSection-fade" />
+      <div className="IntroSection-button">
+        <button className="Button is-secondary is-inline" onClick={setOpen}>Read More</button>
+      </div>
+    </div>
+  );
+
+  if (triggered) {
+    return (
+      <div className={`IntroSection-text is-initialised ${open ? ' is-open' : ''}`}>
+        <div
+          className="IntroSection-content"
+          dangerouslySetInnerHTML={{ __html: innerHtml }}
+          ref={node => parentAction(node)}
+        />
+        {open ? null : prompt}
+      </div>
+    );
+  }
+
+  return (
+    <div className="IntroSection-text">
+      <div
+        className="IntroSection-content"
+        dangerouslySetInnerHTML={{ __html: innerHtml }}
+        ref={node => parentAction(node)}
+      />
+    </div>
+  );
+}

assets/js/components/public-entity-budgets/IntroSection/scripts.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import IntroSection from './index.jsx';
+
+
+class IntroSectionContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: false,
+      triggered: false,
+    };
+
+    this.parent = null;
+    this.setOpen = this.setOpen.bind(this);
+    this.parentAction = this.parentAction.bind(this);
+  }
+
+  setOpen() {
+    this.setState({ open: !this.state.open });
+  }
+
+  parentAction(node) {
+    if (node && this.parent !== node.clientHeight) {
+      this.parent = node.clientHeight;
+      this.calcIfTriggered(node.clientHeight);
+    }
+  }
+
+  calcIfTriggered(value) {
+    if (value > 330) {
+      return this.setState({ triggered: true });
+    }
+
+    return this.setState({ triggered: false });
+  }
+
+  render() {
+    return (
+      <IntroSection
+        triggered={this.state.triggered}
+        innerHtml={this.props.innerHtml}
+        setOpen={this.setOpen}
+        open={this.state.open}
+        parentAction={this.parentAction}
+      />
+    );
+  }
+}
+
+
+function scripts() {
+  const nodes = document.getElementsByClassName('js-initIntroSection');
+
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const innerHtml = node.getElementsByClassName('js-content')[0].innerHTML;
+
+    ReactDOM.render(
+      <IntroSectionContainer {...{ innerHtml }} />,
+      node,
+    );
+  }
+
+}
+
+
+export default scripts();