tranzito_utils 1.1.9 → 1.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 33842391f9a99c66cde758d8f8326ea654d0712a640c04892d493fd5378e5120
-  data.tar.gz: 55b4331dbf82a5fd674ff0966b4ebf2780cfb775ab7aef94b51d3e5d8d31c0f3
+  metadata.gz: b2c631d769babf37c8965014925e310d9f4481e7508c6ec9f311d77ebcefaede
+  data.tar.gz: b8e0aa0336e7adbba8cae83380e6b7a821b8fee699a5383b0e9353a0c34db0d9
 SHA512:
-  metadata.gz: 4b9c52e87fb6f5227d56209a5aaaf336343d516f79cb20d54caf0c4560dc596b39ea43c1fa4965687155f2e7caf1ff4ab9f565d6e875700156bc66fcc6750745
-  data.tar.gz: c280024f35fe14f1b302c00722dd1cd7b77b770445a4b2314e46144d0960db0879e1ef06f0ed0d01e0a7daf4a4750d9e5123d28eeb0fd3b96a0dc7fe42685529
+  metadata.gz: '09712962ee686325cfeb8acffa167d628c20ef7853417cc3bf830ae846713c891f1a82d122fead42ab2c24d9186b80d77dad6b296ed5fe781b2e11eeb773a3aa'
+  data.tar.gz: 9bd61565793edc38e2fe2212322294eb088f8fe54b6ec9343391c182b87fe19cade2c127dc5af32321204982764ffa7912effd194afa5dd34db13627deaf965b

data/README.md

@@ -1,6 +1,6 @@
 # TranzitoUtils [![CircleCI](https://dl.circleci.com/status-badge/img/gh/Tranzito/tranzito_utils/tree/main.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/Tranzito/tranzito_utils/tree/main)
 
-`tranzito_utils` is a ruby gem containing these Rails helpers, concerns and services.
+`tranzito_utils` is a ruby gem containing these Rails helpers, concerns and services:
 
 | Name | Type | Description |
 | ---- | ---- | ----------- |
@@ -14,9 +14,10 @@
 # Installation
 
 ## tranzito_utils (gem)
+
 Install the gem by adding this line to your application's Gemfile:
 
-```
+```ruby
 gem "tranzito_utils"
 ```
 
@@ -24,56 +25,53 @@ Then run `bundle install`
 
 To include the config file inside your host app run this command.
 
-```
+```shell
 rails g tranzito_utils:install
 ```
 
 This will add the `tranzito_utils.rb` file in the initializer where you can alter the default behaviour of several variables being used throughout the gem.
 
-
 # Usage
 
 #### SortableTable
 
-To use the SortableTable module you can include it in your required controllers and then be able to use its methods.
+To use the SortableTable module, include it in your required controllers:
 
-```
+```rb
 include TranzitoUtils::SortableTable
 ```
 
-You can use the following methods of ` TranzitoUtils::SortableTable` in your controllers. These are also the helper methods.
+You can use the following methods of `TranzitoUtils::SortableTable` in your controllers. These are also the helper methods.
 
-```
+```rb
 sort_column, sort_direction
 ```
 
 #### SetPeriod
 
-Include the `SetPeriod` module into your `ApplicationController` by adding this line
+Include the `SetPeriod` module in your `ApplicationController` by adding this line:
 
-```
+```rb
 include TranzitoUtils::SetPeriod
 ```
 
-You just need to add this line in the controller where you want to use the `SetPeriod` module.
+Add this line in the controller where you want to use the `SetPeriod` module:
 
-```
-  before_action :set_period, only: [:index]
+```rb
+before_action :set_period, only: [:index]
 ```
 
-Also, the `SetPeriod` has a partial file which you can include in your views using this line.
+`SetPeriod` depends on a partial file to show the period_select view for filtering. Include in your views with this:
 
+```erb
+<%= render partial: "/tranzito_utils/period_select" %>
 ```
-render partial: "/tranzito_utils/period_select"
-```
-
-This will include the period_select view for filtering.
 
 ### Helpers
 
 For gems helpers, you need to add this into your `application_helper.rb` file.
 
-```
+```rb
 include TranzitoUtils::Helpers
 ```
 
@@ -81,57 +79,65 @@ include TranzitoUtils::Helpers
 
 You can include the flash messages into your application by add it's partial in your layouts file.
 
+```erb
+<%= render partial: "/tranzito_utils/flash_messages" %>
 ```
-render partial: "/tranzito_utils/flash_messages"
-```
+
 ### Assets
 
 To include the styles from the gem you need to add this into your application.scss, this will include the compiled CSS into your application.
 
-```
+```js
 @import url('/tranzito_utils-compiled.css')
 ```
+
 ## tranzito_utils_js (npm)
 You also need to add this NPM package in order to use the gem without any issue. You can install it using `yarn` or `npm`.
 
-For yarn
-```
+For yarn:
+
+```shell
 yarn add tranzito_utils_js
+
 ```
 For npm
-```
+
+```shell
 npm install tranzito_utils_js
 ```
 
-Then import it into your application by adding this line in `application.js` or any `.js` file where you need it.
+Then import it into your application by adding this line in `application.js` or any `.js` file where you need it:
 
-```
+```js
 import { PeriodSelector, TimeParser } from "tranzito_utils_js"
 ```
-Here `TimeParser` and `PeriodSelector` are classes we can use in our app.
 
-For `TimeParser` You can use it by initializing like this
+Initialize them like this:
 
-```
-if (!window.timeParser) { window.timeParser = new TimeParser() }
-window.timeParser.localize()
-```
+```js
+
+document.addEventListener('DOMContentLoaded', function () {
+  if (!window.timeParser) { window.timeParser = new TimeParser() }
+  window.timeParser.localize()
 
-As for `PeriodSelector`, you can use it by initializing like this
-```
   if (document.getElementById('timeSelectionBtnGroup')) {
     const periodSelector = new PeriodSelector()
     periodSelector.init()
   }
+}
 ```
-`#timeSelectionBtnGroup` is being used in the partial in `tranzito_utils` gem.
+
+(if using [turbo](https://github.com/hotwired/turbo-rails), switch `'DOMContentLoaded'` to `'turbo:load'`)
+
 ## License
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+The gem is available as open source under the terms of the [MIT License](MIT-LICENSE).
 
 ## Development
 
-To compile the updated styles run these command 
-```
+Compile the updated styles:
+
+```shell
 cd tranzito_utils_js
 yarn build:css
 ```

data/app/assets/builds/tranzito_utils-compiled.css

@@ -77,39 +77,43 @@ input[type=radio] {
   text-align: center;
 }
 
-.pagination-flex {
+.pagination-container {
+  margin: 1.5rem 1rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+.pagination-container .pagination-flex {
   display: flex;
   flex-wrap: wrap;
   opacity: 0.65;
 }
-.pagination-flex .pagination {
+.pagination-container .pagination-flex .pagination {
   margin: 0.5rem 0.5rem 0 0;
 }
-.pagination-flex.pagination-sm a.page-link {
+.pagination-container .pagination-flex.pagination-sm a.page-link {
   padding: 0.25rem 0.5rem;
   font-size: 0.875rem;
 }
-.pagination-flex .pagination-number,
-.pagination-flex .per-page {
+.pagination-container .pagination-flex .pagination-number,
+.pagination-container .pagination-flex .per-page {
   display: flex;
   flex-basis: 0;
   flex-grow: 1;
   margin-top: 0.5rem;
 }
-.pagination-flex .per-page {
+.pagination-container .pagination-flex .per-page {
   min-width: 9rem;
   max-width: 9rem;
 }
-.pagination-flex .pagination-number {
+.pagination-container .pagination-flex .pagination-number {
   margin-left: 0.5rem;
 }
-.pagination-flex .per-page-select {
+.pagination-container .pagination-flex .per-page-select {
   margin-top: 0.5rem;
   width: 8rem;
   display: inline-block;
 }
-
-.pagination-number {
+.pagination-container .pagination-number {
   margin: 1rem 0 0;
 }
 
@@ -142,7 +146,7 @@ input[type=radio] {
   max-width: 100%;
   vertical-align: middle;
 }
-.custom-time-selection .btn-success {
+.custom-time-selection #updatePeriodSelectCustom {
   margin-right: 15px;
 }
 .custom-time-selection .end-time-control {

data/app/assets/stylesheets/tranzito_utils/_pagination.scss

@@ -1,36 +1,42 @@
-.pagination-flex {
+.pagination-container {
+  margin: 1.5rem 1rem;
   display: flex;
   flex-wrap: wrap;
-  opacity: 0.65; // Make it a little less prominent, it isn't the most important thing on the page
-  .pagination {
-    margin: 0.5rem 0.5rem 0 0;
-  }
-  &.pagination-sm a.page-link {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-  }
-  .pagination-number,
-  .per-page {
+
+  .pagination-flex {
     display: flex;
-    flex-basis: 0;
-    flex-grow: 1;
-    margin-top: 0.5rem;
-  }
-  .per-page {
-    min-width: 9rem;
-    max-width: 9rem;
+    flex-wrap: wrap;
+    opacity: 0.65; // Make it a little less prominent, it isn't the most important thing on the page
+    .pagination {
+      margin: 0.5rem 0.5rem 0 0;
+    }
+    &.pagination-sm a.page-link {
+      padding: 0.25rem 0.5rem;
+      font-size: 0.875rem;
+    }
+    .pagination-number,
+    .per-page {
+      display: flex;
+      flex-basis: 0;
+      flex-grow: 1;
+      margin-top: 0.5rem;
+    }
+    .per-page {
+      min-width: 9rem;
+      max-width: 9rem;
+    }
+    .pagination-number {
+      margin-left: 0.5rem;
+    }
+  
+    .per-page-select {
+      margin-top: 0.5rem; // Align with the pagination part
+      width: 8rem;
+      display: inline-block;
+    }
   }
+  
   .pagination-number {
-    margin-left: 0.5rem;
+    margin: 1rem 0 0;
   }
-
-  .per-page-select {
-    margin-top: 0.5rem; // Align with the pagination part
-    width: 8rem;
-    display: inline-block;
-  }
-}
-
-.pagination-number {
-  margin: 1rem 0 0;
 }

data/app/assets/stylesheets/tranzito_utils/_period_selection.scss

@@ -30,7 +30,7 @@
     max-width: 100%;
     vertical-align: middle;
   }
-  .btn-success {
+  #updatePeriodSelectCustom {
     margin-right: 15px;
   }
   .end-time-control {

data/app/views/tranzito_utils/_pagination.html.haml

@@ -1,11 +1,12 @@
 -# Requires locals: collection, name
-- count ||= collection.total_count
+-# total_count is pagination method. Handle non-paginated collections, in case this is used to display count and time range
+- count ||= defined?(collection.total_count) ? collection.total_count : collection.count
 - skip_total ||= false
 - skip_pagination ||= false
 -# override added to convert Created to Imported - for clarity in payroll_times
 - humanized_time_range_column_override ||= nil
 
-.row.mt-4.mb-4
+.pagination-container
   - unless skip_total
     .col-md-5
       %p.pagination-number

data/app/views/tranzito_utils/_period_select.html.haml

@@ -8,30 +8,30 @@
       = prepend_text
 
   - if include_future
-    %a.btn.btn-outline-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "next_week")), class: ("active" if @period == "next_week"), data: { period: "next_week" } }
+    %a.btn.btn-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "next_week")), class: ("active" if @period == "next_week"), data: { period: "next_week" } }
       %span.d-none.d-md-inline-block next
       seven days
-    %a.btn.btn-outline-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "next_month")), class: ("active" if @period == "next_month"), data: { period: "next_month" } }
+    %a.btn.btn-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "next_month")), class: ("active" if @period == "next_month"), data: { period: "next_month" } }
       %span.d-none.d-md-inline-block next
       thirty days
-  %a.btn.btn-outline-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "hour")), class: ("active" if @period == "hour"), data: { period: "hour" } }
+  %a.btn.btn-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "hour")), class: ("active" if @period == "hour"), data: { period: "hour" } }
     %span.d-none.d-md-inline-block past
     hour
-  %a.btn.btn-outline-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "day")), class: ("active" if @period == "day"), data: { period: "day" } }
+  %a.btn.btn-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "day")), class: ("active" if @period == "day"), data: { period: "day" } }
     %span.d-none.d-md-inline-block past
     day
-  %a.btn.btn-outline-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "week")), class: ("active" if @period == "week"), data: { period: "week" } }
+  %a.btn.btn-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "week")), class: ("active" if @period == "week"), data: { period: "week" } }
     %span.d-none.d-md-inline-block past
     seven days
-  %a.btn.btn-outline-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "month")), class: ("active" if @period == "month"), data: { period: "month" } }
+  %a.btn.btn-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "month")), class: ("active" if @period == "month"), data: { period: "month" } }
     %span.d-none.d-md-inline-block past
     thirty days
-  %a.btn.btn-outline-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "year")), class: ("active" if @period == "year"), data: { period: "year" } }
+  %a.btn.btn-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "year")), class: ("active" if @period == "year"), data: { period: "year" } }
     %span.d-none.d-md-inline-block past
     year
-  %a.btn.btn-outline-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "all")), class: ("active" if @period == "all"), data: { period: "all" } }
+  %a.btn.btn-secondary.btn-sm.period-select-standard{ href: url_for(sortable_search_params.merge(period: "all")), class: ("active" if @period == "all"), data: { period: "all" } }
     all
-  %button#periodSelectCustom.btn.btn-outline-secondary.btn-sm.ml-2{ class: ("active" if @period == "custom"), data: { period: "custom" } }
+  %button#periodSelectCustom.btn.btn-secondary.btn-sm.ml-2{ class: ("active" if @period == "custom"), data: { period: "custom" } }
     custom
 
 %form#timeSelectionCustom.custom-time-selection.row.mt-2.collapse{ class: @period == "custom" ? "in show" : "" }
@@ -41,5 +41,5 @@
   .form-group.end-time-control
     = label_tag :end_time_selector, "to", class: "control-label mr-2 ml-2"
     = datetime_local_field_tag :end_time_selector, @end_time.strftime("%Y-%m-%dT%H:%M"), step: 60, class: "form-control"
-  %button#updatePeriodSelectCustom.btn.btn-success.btn-sm.ml-2
+  %button#updatePeriodSelectCustom.btn.btn-primary.btn-sm.ml-2
     update

data/lib/tranzito_utils/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TranzitoUtils
-  VERSION = "1.1.9"
+  VERSION = "1.1.11"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tranzito_utils
 version: !ruby/object:Gem::Version
-  version: 1.1.9
+  version: 1.1.11
 platform: ruby
 authors:
 - willbarrettdev
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-17 00:00:00.000000000 Z
+date: 2023-01-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails