Browse Source

Set min and max bounds in page modal input. Closes #18

Phyks (Lucas Verney) 5 years ago
parent
commit
85dcf6d271
5 changed files with 26 additions and 14 deletions
  1. 3
    1
      README.md
  2. 12
    2
      app/components/elements/Pagination.jsx
  3. 1
    1
      public/fix.ie9.js.map
  4. 9
    9
      public/index.js
  5. 1
    1
      public/index.js.map

+ 3
- 1
README.md View File

@@ -16,7 +16,9 @@ Or you can use the [hosted version](https://phyks.github.io/ampache_react/).
16 16
 ## Requirements
17 17
 
18 18
 To use this interface, you need:
19
-* An Ampache server on which you have an account.
19
+* An Ampache server on which you have an account, serving the [XML
20
+  API](https://github.com/ampache/ampache/wiki/XML-API). Ensures your server
21
+  has correct [CORS header](https://www.w3.org/wiki/CORS_Enabled) set.
20 22
 * A modern browser.
21 23
 
22 24
 For now, this is a work in progress and as such, the [hosted

+ 12
- 2
app/components/elements/Pagination.jsx View File

@@ -40,10 +40,18 @@ class PaginationCSSIntl extends Component {
40 40
 
41 41
         // Parse and check page number
42 42
         const pageNumber = filterInt(this.refs.pageInput.value);
43
-        if (pageNumber && !isNaN(pageNumber)) {
43
+        if (pageNumber && !isNaN(pageNumber) && pageNumber > 0 && pageNumber <= this.props.nPages) {
44
+            // Remove error class from input form
45
+            this.refs.pageFormGroup.classList.remove("has-error");
46
+            this.refs.pageFormGroup.classList.add("has-success");
44 47
             // Hide the modal and go to page
45 48
             $(this.refs.paginationModal).modal("hide");
46 49
             this.props.goToPage(pageNumber);
50
+        } else {
51
+            // Set error class on input form
52
+            this.refs.pageFormGroup.classList.add("has-error");
53
+            this.refs.pageFormGroup.classList.remove("has-success");
54
+            return;
47 55
         }
48 56
     }
49 57
 
@@ -164,7 +172,9 @@ class PaginationCSSIntl extends Component {
164 172
                                 </div>
165 173
                                 <div className="modal-body">
166 174
                                     <form onSubmit={this.goToPage}>
167
-                                        <input className="form-control" autoComplete="off" type="number" ref="pageInput" aria-label={formatMessage(paginationMessages["app.pagination.pageToGoTo"])} autoFocus />
175
+                                        <div className="form-group" ref="pageFormGroup">
176
+                                            <input className="form-control" autoComplete="off" type="number" ref="pageInput" aria-label={formatMessage(paginationMessages["app.pagination.pageToGoTo"])} min="1" max={this.props.nPages} step="1" defaultValue={this.props.currentPage} autoFocus />
177
+                                        </div>
168 178
                                     </form>
169 179
                                 </div>
170 180
                                 <div className="modal-footer">

+ 1
- 1
public/fix.ie9.js.map
File diff suppressed because it is too large
View File


+ 9
- 9
public/index.js
File diff suppressed because it is too large
View File


+ 1
- 1
public/index.js.map
File diff suppressed because it is too large
View File