appview/pages,appview/issues: improve pagnation ui on issues #838

merged

opened by

vielle.dev 2 weeks ago targeting master

notification pagnation improvements should be roughly the same so im gonna add that in next. planning to make a seperate pr for that but if youd rather it be 1 pr or even 1 commit im happy to do that. also gonna look into adding pagnation to the pr page cause theres like none there afaict lol

options

unified split

Changed files

+114 -26

appview

issues

issues.go

pages

funcmap.go

pages.go

templates

repo

issues

issues.html

appview/issues/issues.go

···

       804
       804
        
       		return

     

       805
       805
        
       	}

     

       806
       806
        
       

     

       807
       807
       +
       	totalIssues := 0

     

       808
       808
       +
       	if isOpen {

     

       809
       809
       +
       		totalIssues = f.RepoStats.IssueCount.Open

     

       810
       810
       +
       	} else {

     

       811
       811
       +
       		totalIssues = f.RepoStats.IssueCount.Closed

     

       812
       812
       +
       	}

     

       813
       813
       +
       

     

       807
       814
        
       	keyword := params.Get("q")

     

       808
       815
        
       

     

       809
       816
        
       	var issues []models.Issue

     
···

       820
       827
        
       			return

     

       821
       828
        
       		}

     

       822
       829
        
       		l.Debug("searched issues with indexer", "count", len(res.Hits))

     

       830
       830
       +
       		totalIssues = int(res.Total)

     

       823
       831
        
       

     

       824
       832
        
       		issues, err = db.GetIssues(

     

       825
       833
        
       			rp.db,

     
···

       869
       877
        
       		LoggedInUser:    rp.oauth.GetUser(r),

     

       870
       878
        
       		RepoInfo:        f.RepoInfo(user),

     

       871
       879
        
       		Issues:          issues,

     

       880
       880
       +
       		IssueCount:      totalIssues,

     

       872
       881
        
       		LabelDefs:       defs,

     

       873
       882
        
       		FilteringByOpen: isOpen,

     

       874
       883
        
       		FilterQuery:     keyword,

appview/pages/funcmap.go

···

       100
       100
        
       		"sub": func(a, b int) int {

     

       101
       101
        
       			return a - b

     

       102
       102
        
       		},

     

       103
       103
       +
       		"mul": func (a, b int) int {

     

       104
       104
       +
       			return a * b

     

       105
       105
       +
       		},

     

       106
       106
       +
       		"div": func (a, b int) int {

     

       107
       107
       +
       			return a / b

     

       108
       108
       +
       		},

     

       109
       109
       +
       		"mod": func(a, b int) int {

     

       110
       110
       +
       			return a % b

     

       111
       111
       +
       		},

     

       103
       112
        
       		"f64": func(a int) float64 {

     

       104
       113
        
       			return float64(a)

     

       105
       114
        
       		},

appview/pages/pages.go

···

       908
       908
        
       	RepoInfo        repoinfo.RepoInfo

     

       909
       909
        
       	Active          string

     

       910
       910
        
       	Issues          []models.Issue

     

       911
       911
       +
       	IssueCount			int

     

       911
       912
        
       	LabelDefs       map[string]*models.LabelDefinition

     

       912
       913
        
       	Page            pagination.Page

     

       913
       914
        
       	FilteringByOpen bool

+95 -26

appview/pages/templates/repo/issues/issues.html

···

       70
       70
        
         <div class="mt-2">

     

       71
       71
        
           {{ template "repo/issues/fragments/issueListing" (dict "Issues" .Issues "RepoPrefix" .RepoInfo.FullName "LabelDefs" .LabelDefs) }}

     

       72
       72
        
         </div>

     

       73
       73
       -
         {{ block "pagination" . }} {{ end }}

     

       73
       73
       +
         {{if gt .IssueCount .Page.Limit }} 

     

       74
       74
       +
           {{ block "pagination" . }} {{ end }} 

     

       75
       75
       +
         {{ end }}

     

       74
       76
        
       {{ end }}

     

       75
       77
        
       

     

       76
       78
        
       {{ define "pagination" }}

     

       77
       77
       -
       <div class="flex justify-end mt-4 gap-2">

     

       78
       78
       -
           {{ $currentState := "closed" }}

     

       79
       79
       -
           {{ if .FilteringByOpen }}

     

       80
       80
       -
             {{ $currentState = "open" }}

     

       81
       81
       -
           {{ end }}

     

       79
       79
       +
       <div class="flex justify-center items-center mt-4 gap-2">

     

       80
       80
       +
         {{ $currentState := "closed" }}

     

       81
       81
       +
         {{ if .FilteringByOpen }}

     

       82
       82
       +
           {{ $currentState = "open" }}

     

       83
       83
       +
         {{ end }}

     

       84
       84
       +
       

     

       85
       85
       +
         {{ $prev := .Page.Previous.Offset }}

     

       86
       86
       +
         {{ $next := .Page.Next.Offset }}

     

       87
       87
       +
         {{ $lastPage := sub .IssueCount (mod .IssueCount .Page.Limit) }}

     

       82
       88
        
       

     

       89
       89
       +
         <a

     

       90
       90
       +
           class="

     

       91
       91
       +
             btn flex items-center gap-2 no-underline hover:no-underline 

     

       92
       92
       +
             dark:text-white dark:hover:bg-gray-700

     

       93
       93
       +
             {{ if le .Page.Offset 0 }}

     

       94
       94
       +
               cursor-not-allowed opacity-50

     

       95
       95
       +
             {{ end }}

     

       96
       96
       +
           "

     

       83
       97
        
           {{ if gt .Page.Offset 0 }}

     

       84
       84
       -
              {{ $prev := .Page.Previous }}

     

       85
       85
       -
               <a

     

       86
       86
       -
                   class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"

     

       87
       87
       -
                   hx-boost="true"

     

       88
       88
       -
                   href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $prev.Offset }}&limit={{ $prev.Limit }}"

     

       89
       89
       -
               >

     

       90
       90
       -
                   {{ i "chevron-left" "w-4 h-4" }}

     

       91
       91
       -
                   previous

     

       92
       92
       -
               </a>

     

       93
       93
       -
           {{ else }}

     

       94
       94
       -
               <div></div>

     

       98
       98
       +
             hx-boost="true"

     

       99
       99
       +
             href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $prev }}&limit={{ .Page.Limit }}"

     

       95
       100
        
           {{ end }}

     

       101
       101
       +
         >

     

       102
       102
       +
           {{ i "chevron-left" "w-4 h-4" }}

     

       103
       103
       +
           previous

     

       104
       104
       +
         </a>

     

       105
       105
       +
       

     

       106
       106
       +
         <!-- dont show first page if current page is first page -->

     

       107
       107
       +
         {{ if gt .Page.Offset 0 }}

     

       108
       108
       +
           <a

     

       109
       109
       +
             hx-boost="true"

     

       110
       110
       +
             href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset=0&limit={{ .Page.Limit }}"

     

       111
       111
       +
           >

     

       112
       112
       +
             1

     

       113
       113
       +
           </a>

     

       114
       114
       +
         {{ end }}

     

       115
       115
       +
       

     

       116
       116
       +
         <!-- if previous page is not first or second page (prev > limit) -->

     

       117
       117
       +
         {{ if gt $prev .Page.Limit }}

     

       118
       118
       +
           <span>...</span>

     

       119
       119
       +
         {{ end }}

     

       120
       120
       +
       

     

       121
       121
       +
         <!-- if previous page is not the first page -->

     

       122
       122
       +
         {{ if gt $prev 0 }}

     

       123
       123
       +
           <a

     

       124
       124
       +
             hx-boost="true"

     

       125
       125
       +
             href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $prev }}&limit={{ .Page.Limit }}"

     

       126
       126
       +
           >

     

       127
       127
       +
             {{ add (div $prev .Page.Limit) 1 }}

     

       128
       128
       +
           </a>

     

       129
       129
       +
         {{ end }}

     

       130
       130
       +
       

     

       131
       131
       +
         <!-- current page. this is always visible -->

     

       132
       132
       +
         <span class="font-bold">

     

       133
       133
       +
           {{ add (div .Page.Offset .Page.Limit) 1 }}

     

       134
       134
       +
         </span>

     

       135
       135
       +
       

     

       136
       136
       +
         <!-- if next page is not last page -->

     

       137
       137
       +
         {{ if lt $next $lastPage }}

     

       138
       138
       +
           <a

     

       139
       139
       +
             hx-boost="true"

     

       140
       140
       +
             href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $next }}&limit={{ .Page.Limit }}"

     

       141
       141
       +
           >

     

       142
       142
       +
             {{ add (div $next .Page.Limit) 1 }}

     

       143
       143
       +
           </a>

     

       144
       144
       +
         {{ end }}

     

       145
       145
       +
       

     

       146
       146
       +
         <!-- if next page is not second last or last page (next < issues - 2 * limit) -->

     

       147
       147
       +
         {{ if lt ($next) (sub .IssueCount (mul (2) .Page.Limit)) }}

     

       148
       148
       +
           <span>...</span>

     

       149
       149
       +
         {{ end }}

     

       96
       150
        
       

     

       151
       151
       +
         <!-- if its not the last page -->

     

       152
       152
       +
         {{ if lt .Page.Offset $lastPage }} 

     

       153
       153
       +
           <a

     

       154
       154
       +
             hx-boost="true"

     

       155
       155
       +
             href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $lastPage }}&limit={{ .Page.Limit }}"

     

       156
       156
       +
           >

     

       157
       157
       +
             {{ add (div $lastPage .Page.Limit) 1 }}

     

       158
       158
       +
           </a>

     

       159
       159
       +
         {{ end }}

     

       160
       160
       +
       

     

       161
       161
       +
         <a

     

       162
       162
       +
           class="

     

       163
       163
       +
             btn flex items-center gap-2 no-underline hover:no-underline 

     

       164
       164
       +
             dark:text-white dark:hover:bg-gray-700

     

       165
       165
       +
             {{ if ne (len .Issues) .Page.Limit }}

     

       166
       166
       +
                 cursor-not-allowed opacity-50

     

       167
       167
       +
             {{ end }}

     

       168
       168
       +
           "

     

       97
       169
        
           {{ if eq (len .Issues) .Page.Limit }}

     

       98
       98
       -
              {{ $next := .Page.Next }}

     

       99
       99
       -
               <a

     

       100
       100
       -
                   class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"

     

       101
       101
       -
                   hx-boost="true"

     

       102
       102
       -
                   href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $next.Offset }}&limit={{ $next.Limit }}"

     

       103
       103
       -
               >

     

       104
       104
       -
                   next

     

       105
       105
       -
                   {{ i "chevron-right" "w-4 h-4" }}

     

       106
       106
       -
               </a>

     

       170
       170
       +
             hx-boost="true"

     

       171
       171
       +
             href="/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $next }}&limit={{ .Page.Limit }}"

     

       107
       172
        
           {{ end }}

     

       173
       173
       +
         >

     

       174
       174
       +
           next

     

       175
       175
       +
           {{ i "chevron-right" "w-4 h-4" }}

     

       176
       176
       +
         </a>

     

       108
       177
        
       </div>

     

       109
       178
        
       {{ end }}