From 650b75f8e3eba73a450d4b5aed6dde006346a571 Mon Sep 17 00:00:00 2001 From: Zog Date: Fri, 19 Jan 2018 08:50:52 +0100 Subject: Refs #3542; Adds pagination --- .../components/_referential_overview.sass | 307 +++++++++++---------- app/helpers/pagination_helper.rb | 2 +- app/services/referential_overview.rb | 21 +- app/views/referentials/_overview.html.slim | 63 +++-- 4 files changed, 207 insertions(+), 186 deletions(-) diff --git a/app/assets/stylesheets/components/_referential_overview.sass b/app/assets/stylesheets/components/_referential_overview.sass index 0af5a99f7..5fae8080c 100644 --- a/app/assets/stylesheets/components/_referential_overview.sass +++ b/app/assets/stylesheets/components/_referential_overview.sass @@ -1,171 +1,172 @@ .referential-overview - display: flex - margin-top: 50px - $left-size: 100px - .head - height: $left-size - border-top: 1px solid $lightgrey - .line - height: 80px - .left - flex: 0 0 - background: $lightgrey - min-width: $left-size - overflow: hidden - border-right: 1px solid white + .overview-table + display: flex + margin-top: 50px + $left-size: 100px .head - position: relative - border-bottom: 1px solid white - border-right: 1px solid $lightgrey - .dates, .lines - position: absolute - font-size: 0.8em - z-index: 2 - .dates - right: 20px - top: 20px - .lines - left: 20px - bottom: 20px - &:after - position: absolute - border-left: ($left-size - 2px)/2 solid transparent - border-bottom: ($left-size - 2px)/2 solid transparent - border-right: ($left-size - 2px)/2 solid white - border-top: ($left-size - 2px)/2 solid white - z-index: 1 - top: 0 - right: 0 - width: 0 - content: "" + height: $left-size + border-top: 1px solid $lightgrey .line - padding: 15px 10px 10px - border-bottom: 1px solid white - font-size: 0.8em - &:last-child - border-bottom: 1px solid $grey - .number - border-radius: 100px - display: inline-block - width: 20px - height: 20px - text-align: center - padding-top: 1px - text-decoration: none - color: black - border: 1px solid $grey - .name - display: inline-block - width: $left-size - 50px() - white-space: nowrap - line-height: 20px - margin-left: 5px - text-overflow: ellipsis - overflow: hidden - vertical-align: bottom - color: black - text-decoration: none - - .company, .mode - font-size: 0.9em - margin-top: 5px - white-space: nowrap - text-overflow: ellipsis - overflow: hidden - - .mode - margin-top: 0 - text-transform: uppercase - color: $grey - font-weight: bold - .right - flex: 1 1 - overflow-x: scroll - overflow-y: hidden - .head - white-space: nowrap - .week - display: inline-block + height: 80px + .left + flex: 0 0 + background: $lightgrey + min-width: $left-size + overflow: hidden + border-right: 1px solid white + .head position: relative - height: 100% - .week-span - left: 5px - top: 10px - right: 30px - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - position: absolute - - .week-number - background-color: lightgrey - color: white + border-bottom: 1px solid white + border-right: 1px solid $lightgrey + .dates, .lines position: absolute - top: 0 - right: 0 - padding: 2px 4px - + font-size: 0.8em + z-index: 2 + .dates + right: 20px + top: 20px + .lines + left: 20px + bottom: 20px &:after position: absolute - right: 0 + border-left: ($left-size - 2px)/2 solid transparent + border-bottom: ($left-size - 2px)/2 solid transparent + border-right: ($left-size - 2px)/2 solid white + border-top: ($left-size - 2px)/2 solid white + z-index: 1 top: 0 - bottom: 0 - background: $grey - width: 1px + right: 0 + width: 0 content: "" - - .days - position: relative - top: 50% - height: 50% - border-top: 1px solid $grey + .line + padding: 15px 10px 10px + border-bottom: 1px solid white + font-size: 0.8em + &:last-child border-bottom: 1px solid $grey + .number + border-radius: 100px + display: inline-block + width: 20px + height: 20px + text-align: center + padding-top: 1px + text-decoration: none + color: black + border: 1px solid $grey + .name + display: inline-block + width: $left-size - 50px() + white-space: nowrap + line-height: 20px + margin-left: 5px + text-overflow: ellipsis + overflow: hidden + vertical-align: bottom + color: black + text-decoration: none - .day - float: left - border-left: 1px solid $grey - box-sizing: border-box - padding-left: 5px - padding-top: 3px + .company, .mode + font-size: 0.9em + margin-top: 5px + white-space: nowrap + text-overflow: ellipsis + overflow: hidden + + .mode + margin-top: 0 + text-transform: uppercase + color: $grey + font-weight: bold + .right + flex: 1 1 + overflow-x: scroll + overflow-y: hidden + .head + white-space: nowrap + .week + display: inline-block position: relative height: 100% - .name, .number + .week-span + left: 5px + top: 10px + right: 30px + white-space: nowrap + overflow: hidden + text-overflow: ellipsis position: absolute - left: 10px - right: 10px + + .week-number + background-color: lightgrey + color: white + position: absolute + top: 0 + right: 0 + padding: 2px 4px + + &:after + position: absolute + right: 0 + top: 0 + bottom: 0 + background: $grey + width: 1px + content: "" + + .days + position: relative top: 50% - transform: translateY(-50%) - margin-top: 10px - .name - font-weight: bold - font-size: 0.8em - margin-top: -10px - &:first-child - border: none - &.weekend - background: $lightgrey + height: 50% + border-top: 1px solid $grey + border-bottom: 1px solid $grey - .line - border-bottom: 1px solid $grey - position: relative - overflow: hidden + .day + float: left + border-left: 1px solid $grey + box-sizing: border-box + padding-left: 5px + padding-top: 3px + position: relative + height: 100% + .name, .number + position: absolute + left: 10px + right: 10px + top: 50% + transform: translateY(-50%) + margin-top: 10px + .name + font-weight: bold + font-size: 0.8em + margin-top: -10px + &:first-child + border: none + &.weekend + background: $lightgrey + + .line + border-bottom: 1px solid $grey + position: relative + overflow: hidden - .period - height: 100% - top: 0 - background: rgb(219, 249, 196) - position: absolute - &:before - content: "" - border-right: 1px dashed $grey - top: -100% - bottom: -100% + .period + height: 100% + top: 0 + background: rgb(219, 249, 196) position: absolute - right: -1px - z-index: 10 - &.empty - background: rgb(244, 67, 67) - background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 10px,#e49393 10px,#e49393 20px) - &.accepted - background: #f19039 - background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 10px,#f19039 10px,#f19039 20px) + &:before + content: "" + border-right: 1px dashed $grey + top: -100% + bottom: -100% + position: absolute + right: -1px + z-index: 10 + &.empty + background: rgb(244, 67, 67) + background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 10px,#e49393 10px,#e49393 20px) + &.accepted + background: #f19039 + background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 10px,#f19039 10px,#f19039 20px) diff --git a/app/helpers/pagination_helper.rb b/app/helpers/pagination_helper.rb index 02eec39dc..9b6042377 100644 --- a/app/helpers/pagination_helper.rb +++ b/app/helpers/pagination_helper.rb @@ -25,7 +25,7 @@ module PaginationHelper if collection.total_pages > 1 links = content_tag :div, '', class: 'page_links' do - will_paginate collection, container: false, page_links: false, previous_label: '', next_label: '' + will_paginate collection, container: false, page_links: false, previous_label: '', next_label: '', param_name: collection.try(:pagination_param_name) end content_tag :div, pinfos.concat(links).html_safe, class: "pagination #{cls}" diff --git a/app/services/referential_overview.rb b/app/services/referential_overview.rb index 5b0e144db..14e917bbe 100644 --- a/app/services/referential_overview.rb +++ b/app/services/referential_overview.rb @@ -1,14 +1,16 @@ class ReferentialOverview attr_reader :h + PER_PAGE = 10 + def initialize referential, h @referential = referential - @page = 1 + @page = h.params[pagination_param_name]&.to_i || 1 @h = h end def lines - @referential.metadatas_lines.includes(:company).page(@page).map{|l| Line.new(l, @referential, period.first, h)} + referential_lines.includes(:company).map{|l| Line.new(l, @referential, period.first, h)} end def period @@ -23,6 +25,21 @@ class ReferentialOverview @weeks.values end + def referential_lines + @referential.metadatas_lines.page(@page).per_page(PER_PAGE) + end + + ### Pagination + + delegate :empty?, :first, :total_pages, :size, :total_entries, :offset, :length, to: :referential_lines + def current_page + @page + end + + def pagination_param_name + "referential_#{@referential.slug}_overview" + end + class Line attr_reader :h attr_reader :referential_line diff --git a/app/views/referentials/_overview.html.slim b/app/views/referentials/_overview.html.slim index 03c72752e..6dd129405 100644 --- a/app/views/referentials/_overview.html.slim +++ b/app/views/referentials/_overview.html.slim @@ -1,31 +1,34 @@ .referential-overview - .left - .head - .dates= I18n.t("referentials.overview.head.dates") - .lines= I18n.t("referentials.overview.head.lines") - .lines - - overview.lines.each do |line| - .line - a.number style="background-color: #{line.color.present? ? "##{line.color}" : 'whitesmoke'}" title=line.name - = line.number - - unless line.number == line.name - a.name title=line.name - = line.name - .company= line.company&.name - .mode= line.transport_mode - .right - .head - - overview.weeks.each do |week| - .week - .week-span= week.span - .week-number= week.number - .days - - week.days.each do |day| - .day style=day.html_style class=day.html_class - .name= day.short_name - .number= day.number - .lines - - overview.lines.each do |line| - .line style=line.html_style class=line.html_class - - line.periods.each do |period| - .period style=period.html_style class=period.html_class title=period.title + .overview-table + .left + .head + .dates= I18n.t("referentials.overview.head.dates") + .lines= I18n.t("referentials.overview.head.lines") + .lines + - overview.lines.each do |line| + .line + a.number style="background-color: #{line.color.present? ? "##{line.color}" : 'whitesmoke'}" title=line.name + = line.number + - unless line.number == line.name + a.name title=line.name + = line.name + .company= line.company&.name + .mode= line.transport_mode + .right + .head + - overview.weeks.each do |week| + .week + .week-span= week.span + .week-number= week.number + .days + - week.days.each do |day| + .day style=day.html_style class=day.html_class + .name= day.short_name + .number= day.number + .lines + - overview.lines.each do |line| + .line style=line.html_style class=line.html_class + - line.periods.each do |period| + .period style=period.html_style class=period.html_class title=period.title + + = new_pagination overview, 'pull-right' -- cgit v1.2.3