Added documentation

.venv

@@ -0,0 +1 @@
+sphinx

docs/conf.py

@@ -20,6 +20,7 @@
 # import os
 # import sys
 # sys.path.insert(0, os.path.abspath('.'))
+import sphinx_rtd_theme
 
 
 # -- General configuration ------------------------------------------------
@@ -83,7 +84,8 @@
 # The theme to use for HTML and HTML Help pages.  See the documentation for
 # a list of builtin themes.
 #
-html_theme = 'alabaster'
+html_theme = 'sphinx_rtd_theme'
+html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
 
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the

docs/form-field-checkbox.rst

@@ -0,0 +1,36 @@
+form-field-checkbox
+===================
+
+Render a checkbox.
+
+.. image:: images/form-field-checkbox.png
+
+Binding reference
+-----------------
+
+- ``field-id``: A unique HTML id to associate label and input (string)
+- ``field-label``: The label text (string)
+- ``field-placeholder``: The input placeholder, default empty (string)
+- ``field-width``: The width of the field in bootstrap columns (1-12), default 6 (integer)
+- ``field-label-width``: The width of the label in bootstrap columns (1-12), default 3 (integer)
+- ``field-value``: A controller variable to return the ``ng-model`` input value (variable)
+- ``on-change``: A callback function to call if value changes (function)
+
+Transclude
+----------
+
+The component allows transclude to provide additional markup.
+
+Code sample
+-----------
+
+::
+
+        <form-field-checkbox field-id="product-status"
+                             field-label="Active"
+                             field-placeholder="Product status"
+                             field-value="$ctrl.product.status"></form-field-checkbox>
+
+`Reference`_
+
+.. _Reference: https://github.com/Wtower/phoebe4/blob/34d39c43867c231936a1ea155dae7f51e05c792a/angular/product-detail/product-detail.template.html#L64

docs/form-field-image.rst

@@ -0,0 +1,45 @@
+form-field-image
+================
+
+Provide an image upload field. This relies on `ng-file-upload`_.
+
+.. image:: images/form-field-image.png
+
+Binding reference
+-----------------
+
+- ``field-id``: A unique HTML id to associate label and input (string)
+- ``field-label``: The label text (string)
+- ``field-width``: The width of the field in bootstrap columns (1-12), default 9 (integer)
+- ``field-label-width``: The width of the label in bootstrap columns (1-12), default 3 (integer)
+- ``field-required``: Whether the field is required, default false (boolean)
+- ``field-media-url``: The url where the image filename value resides (string)
+- ``field-title``: The ``<img title>`` (string)
+- ``field-data``: A relevant entity data to send with the upload, optional (object)
+- ``field-value``: A controller variable to return the ``ng-model`` input value (variable)
+
+Transclude
+----------
+
+The controller allows transclude to replace the thumbnail markup.
+
+Controller
+----------
+
+The controller uploads the file to ``api/uploads`` using `ng-file-upload`_.
+
+Code sample
+-----------
+
+::
+
+              <form-field-image field-id="image-{{ $index }}-image"
+                                field-media-url="/media/product"
+                                field-title="{{ image.title || 'Product image' }}"
+                                field-data="{_id: $ctrl.productId, entity: 'product'}"
+                                field-value="image.image"></form-field-image>
+
+`Reference`_
+
+.. _Reference: https://github.com/Wtower/phoebe4/blob/34d39c43867c231936a1ea155dae7f51e05c792a/angular/product-detail/product-detail.template.html#L241
+.. _ng-file-upload: https://github.com/danialfarid/ng-file-upload

docs/form-field-select.rst

@@ -0,0 +1,48 @@
+form-field-select
+=================
+
+Render a gentelella form select box. Depending on the options provided this can be extended to multiple selection.
+
+.. image:: images/form-field-select.png
+
+Binding reference
+-----------------
+
+- ``field-id``: A unique HTML id to associate label and input (string)
+- ``field-label``: The label text (string)
+- ``field-placeholder``: The input placeholder, default empty (string)
+- ``field-width``: The width of the field in bootstrap columns (1-12), default 6 (integer)
+- ``field-label-width``: The width of the label in bootstrap columns (1-12), default 3 (integer)
+- ``field-required``: Whether the field is required, default false (boolean)
+- ``field-multiple``: Allow multiple selection, default false (boolean)
+- ``field-link``: Provide a URL to present a link next to the combo box, default empty (string)
+- ``field-link-text``: A description of the above link to present on hover (string)
+- ``field-value``: A controller variable to return the ``ng-model`` input value (variable)
+- ``on-change``: A callback function to call if value changes (function)
+
+Controller
+----------
+
+The controller initializes the gentelella select2 script (currently disabled due to `issue #11`_.
+
+.. _issue #11: https://github.com/Wtower/ng-gentelella/issues/11
+
+Code sample
+-----------
+
+::
+
+        <form-field-select field-id="product-family"
+                           field-label="Family"
+                           field-placeholder="Product Family"
+                           field-link="#!/product-families"
+                           field-link-text="Open family"
+                           field-value="$ctrl.product.family">
+          <option></option>
+          <option ng-repeat="item in $ctrl.productFamilies | orderBy:''"
+                  value="{{ item._id }}">{{ item.name }}</option>
+        </form-field-select>
+
+`Reference`_
+
+.. _Reference: https://github.com/Wtower/phoebe4/blob/34d39c43867c231936a1ea155dae7f51e05c792a/angular/product-detail/product-detail.template.html#L39

docs/form-field-text.rst

@@ -0,0 +1,58 @@
+form-field-text
+===============
+
+Render a standard gentelella form textbox.
+
+.. image:: images/form-field-text.png
+
+Binding reference
+-----------------
+
+- ``field-id``: A unique HTML id to associate label and input (string)
+- ``field-type``: The `HTML input type`_, default ``text`` (string)
+- ``field-label``: The label text (string)
+- ``field-placeholder``: The input placeholder, default empty (string)
+- ``field-width``: The width of the field in bootstrap columns (1-12), default 6 (integer)
+- ``field-label-width``: The width of the label in bootstrap columns (1-12), default 3 (integer)
+- ``field-required``: Whether the field is required, default false (boolean)
+- ``field-form``: The controller form variable to update if validation is required (variable)
+- ``field-name``: The field's name in the `Angular form`_. Requires ``field-form`` (string)
+- ``field-pattern``: A regular expression **without surrounding slashes** to test the input validity against.
+  Combine with ``field-form`` and ``field-name`` to allow Angular to validate (string)
+- ``field-alert``: The text to display if the field is invalid. Requires ``field-form`` and ``field-name`` (string)
+- ``field-value``: A controller variable to return the ``ng-model`` input value (variable)
+- ``on-change``: A callback function to call if value changes (function)
+
+.. _HTML input type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+.. _Angular form: https://docs.angularjs.org/guide/forms
+
+Controller
+----------
+
+The controller initializes the default values and regex pattern.
+
+Code sample
+-----------
+
+::
+
+        <form-field-text field-id="product-name"
+                         field-label="Name"
+                         field-placeholder="Product full name"
+                         field-required="true"
+                         field-value="$ctrl.product.name"></form-field-text>
+
+        <form-field-text field-id="product-alias"
+                         field-label="Alias"
+                         field-placeholder="Unique machine name"
+                         field-required="true"
+                         field-width="5"
+                         field-name="productAlias"
+                         field-form="$ctrl.productEdit"
+                         field-pattern="^[a-z0-9-]+$"
+                         field-alert="Example: 'my-product'"
+                         field-value="$ctrl.product.alias"></form-field-text>
+
+`Reference`_
+
+.. _Reference: https://github.com/Wtower/phoebe4/blob/34d39c43867c231936a1ea155dae7f51e05c792a/angular/product-detail/product-detail.template.html

docs/ga-dashboard-counter.rst

@@ -0,0 +1,38 @@
+ga-dashboard-counter
+====================
+
+Provide a large counter panel for dashboard as in `Gentelella index2`_.
+
+.. _Gentelella index2: https://colorlib.com/polygon/gentelella/index2.html
+
+.. image:: images/ga-dashboard-counter.png
+
+Binding reference
+-----------------
+
+- ``counter-icon``: A `font awesome`_ icon name, eg ``building`` (string)
+- ``counter-var``: The number to present (integer)
+- ``counter-title``: The title to present (string)
+
+.. _font awesome: https://colorlib.com/polygon/gentelella/icons.html
+
+Transclude
+----------
+
+The component allows transclude to present additional text.
+
+Code sample
+-----------
+
+::
+
+  <ga-dashboard-counter counter-icon="users"
+                        counter-var="$ctrl.dashboard.users"
+                        counter-title="Users">
+    Number of total users
+  </ga-dashboard-counter>
+
+
+`Reference`_
+
+.. _Reference: https://github.com/Wtower/generator-makrina/blob/master/generators/angular-app/templates/dashboard/dashboard.template.html

docs/ga-dashboard-graph-flot.rst

@@ -0,0 +1,63 @@
+ga-dashboard-graph-flot
+=======================
+
+Render a line graph in panel as in `Gentelella index`_.
+
+.. _Gentelella index: https://colorlib.com/polygon/gentelella/index.html
+
+.. image:: images/ga-dashboard-graph-flot.png
+
+Binding reference
+-----------------
+
+- ``graph-title``: The graph panel title (string)
+- ``graph-sub-title``: The subtitle presented next to title in smaller font size (string)
+- ``graph-range``: The date range to present (string)
+- ``graph-id``: A unique HTML id for jquery reference, default ``main-graph`` (string)
+- ``graph-legend-title``: The title of the legent column (string)
+- ``graph-data``: The main graph data (array)
+
+Regarding the graph data. Gentelella uses the `Flot`_ graph library that requires that data is sorted by date.
+Otherwise the data looks bizarre. The graph data should follow the format:
+
+.. _Flot: http://www.flotcharts.org/
+
+::
+
+  [
+    {
+      _id: {year: 2016, month: 12, day: 19},
+      count: 10
+    },
+    ...
+  ]
+
+Transclude
+----------
+
+The component allows the transclude of markup for the legend column body.
+
+Controller
+----------
+
+The controller calls initializes the Flot graph appropriately.
+
+Code sample
+-----------
+
+::
+
+    <ga-dashboard-graph-flot graph-title="Contest Activity"
+                             graph-sub-title="subscriptions total, valid over time"
+                             graph-legend-title="Validity"
+                             graph-range="Start-End"
+                             graph-data="$ctrl.dashboard.data">
+      <div class="col-md-12 col-sm-12 col-xs-6">
+        <p>Users</p>
+        <ga-progress progress-value="$ctrl.userValidity"></ga-progress>
+      </div>
+      <div class="col-md-12 col-sm-12 col-xs-6">
+        <p>Subscriptions</p>
+        <ga-progress progress-value="$ctrl.subscriptionValidity"></ga-progress>
+      </div>
+    </ga-dashboard-graph-flot>

docs/ga-paginate.rst

@@ -0,0 +1,44 @@
+ga-paginate
+===========
+
+Provide a list paginator.
+
+.. image:: images/ga-paginate.png
+
+Binding reference
+-----------------
+
+- ``paginate-id``: A unique HTML id for the page size combo box (string)
+- ``paginate-page``: A controller variable in which the current page number will be returned (variable)
+- ``paginate-size``: A controller variable in which the current page size will be returned (variable)
+- ``paginate-initial-size``: The initial page size (integer)
+- ``paginate-sizes``: An array of page sizes, default ``[10, 25, 50, 100]`` (array)
+- ``paginate-count``: The total number of records (integer)
+- ``paginate-ellipsis``: The maximum number of page numbers to show if too many, default 5. For more than that,
+  ellipsis ``...`` are presented (integer)
+- ``on-paginate``: A callback function to call when a new page is selected. Used to fetch new data (function)
+
+Transclude
+----------
+
+The controller presents additional test right of the page size combo box such as a link.
+
+Controller
+----------
+
+The controller handles the operation of the paginator.
+
+Code sample
+-----------
+
+::
+
+  <ga-paginate paginate-id="paginate-subscriptions"
+               paginate-page="$ctrl.page"
+               paginate-size="$ctrl.pageSize"
+               paginate-initial-size="$ctrl.viewLimit"
+               paginate-count="$ctrl.count"
+               on-paginate="$ctrl.getList(paginator)">
+    <a href="#!{{ $ctrl.viewLink }}">| more</a>
+  </ga-paginate>
+