Merge pull request #58 from ezeep/feature/page-ranges

PageRanges support added

src/components.d.ts

@@ -82,6 +82,10 @@ export namespace Components {
           * Description...
          */
         "label": string;
+        /**
+          * Description...
+         */
+        "placeholder": string;
         /**
           * Description...
          */
@@ -460,6 +464,10 @@ declare namespace LocalJSX {
           * Events
          */
         "onInputValueChanged"?: (event: CustomEvent<any>) => void;
+        /**
+          * Description...
+         */
+        "placeholder"?: string;
         /**
           * Description...
          */

src/components/ezp-input/ezp-input.tsx

@@ -34,6 +34,9 @@ export class EzpInput {
   /** Description... */
   @Prop() eventType: string
 
+  /** Description... */
+  @Prop() placeholder: string = ''
+
 
    /**
    *
@@ -54,7 +57,7 @@ export class EzpInput {
     if (this.timeout) {
       clearTimeout(this.timeout)
     }
-    this.value = event.target.value ? event.target.value : 0
+    this.value = event.target.value ? event.target.value : this.type === 'number' ? 0 : ''
     this.timeout = setTimeout(() => {
       this.inputValueChanged.emit({
         type: this.eventType.toLowerCase(),
@@ -84,6 +87,7 @@ export class EzpInput {
           id="input"
           type={this.type}
           value={this.value}
+          placeholder={this.placeholder}
           onInput={(event) => this.handleChange(event)}
           ref={(input) => (this.input = input)}
           onFocus={this.handleFocus}

src/components/ezp-printer-selection/ezp-printer-selection.tsx

@@ -16,7 +16,7 @@ import userStore, { EzpUserService } from '../../services/user'
 import { Printer, PrinterConfig, PrinterProperties } from '../../shared/types'
 import { managePaperDimensions, poll, removeEmptyStrings } from '../../utils/utils'
 import { BlobUploadCommonResponse } from '@azure/storage-blob'
-import { PAPER_ID } from '../../utils/utils'
+import { PAPER_ID , validatePageRange } from '../../utils/utils'
 
 @Component({
   tag: 'ezp-printer-selection',
@@ -66,6 +66,7 @@ export class EzpPrinterSelection {
    */
   @State() loading: boolean = true
   @State() printProcessing: boolean = false
+  @State() pageRangeInvalid: boolean = false
   @State() uploading: boolean = false
   @State() preparingUpload: boolean = false
   @State() printSuccess: boolean = false
@@ -97,7 +98,8 @@ export class EzpPrinterSelection {
     copies: '',
     resolution: 0,
     paperlength : 0,
-    paperwidth : 0
+    paperwidth : 0,
+    PageRanges : '',
   }
 
   @State() paperid: number | string
@@ -376,6 +378,11 @@ export class EzpPrinterSelection {
         this.selectedProperties.paperwidth = eventDetails.value
         // console.log(this.selectedProperties)
         break
+      case 'paper_ranges':
+          this.selectedProperties.PageRanges = eventDetails.value;
+          this.pageRangeInvalid = !validatePageRange(this.selectedProperties.PageRanges);
+          // console.log(this.selectedProperties.PageRanges)
+          break  
       case 'duplex':
         if (eventDetails.title === 'None') {
           this.selectedProperties.duplex = false
@@ -781,6 +788,15 @@ export class EzpPrinterSelection {
                 preSelected={this.selectedPrinter.id ? this.selectedProperties.resolution : null}
                 disabled={!(this.selectedPrinterConfig.Resolutions.length > 0)}
               />
+              <ezp-input
+                  icon="width"
+                  suffix=""
+                  placeholder="1-2,4-5,8"
+                  value={this.selectedProperties.PageRanges}
+                  eventType="paper_ranges"
+                  type="text"
+                  label={i18next.t('printer_selection.paper_ranges')}
+              />
             </div>
             <ezp-stepper label={i18next.t('printer_selection.copies')} max={10} icon="copies" />
           </div>
@@ -794,7 +810,7 @@ export class EzpPrinterSelection {
               id="cancel"
             />
             <ezp-text-button
-              disabled={this.selectedPrinter.id === '' || this.printProcessing}
+              disabled={this.selectedPrinter.id === '' || this.printProcessing || this.pageRangeInvalid}
               type="button"
               onClick={this.handlePrint}
               label={i18next.t('button_actions.print')}

src/data/locales/de.json

@@ -42,7 +42,8 @@
         "duplex_short": "auf der kurzen Seite umdrehen",
         "pull_print_success": "Bereit zum Auslösen.",
         "width":"Breite",
-        "length":"Länge"
+        "length":"Länge",
+        "paper_ranges": "Papier-Ranges"
     },
     "button_actions": {
         "login": "Anmelden",

src/data/locales/en.json

@@ -42,7 +42,8 @@
         "no_printers": "No printers found.",
         "copies": "Copies",
         "width":"Width",
-        "length":"Length"
+        "length":"Length",
+        "paper_ranges": "Paper Ranges"
     },
     "button_actions": {
         "login": "Sign In",

src/shared/types.d.ts

@@ -64,6 +64,7 @@ export interface PrinterProperties {
   resolution?: string | number
   paperlength? : string | number
   paperwidth? : string | number
+  PageRanges? : string
 }
 
 export interface Printer {

src/utils/utils.ts

@@ -85,4 +85,33 @@ export const managePaperDimensions = (properties :PrinterProperties)=>{
   return properties
 }
 
+export const validatePageRange = (pageRange) => {
+  if (!pageRange) {
+    return true
+  }
+  const regex = /^(\d+(-\d+)?(,\d+(-\d+)?)*|(\d+,\d+(-\d+)?(,\d+(-\d+)?)*)+)$/;
+  const isValid = regex.test(pageRange);
+  if (!isValid) {
+    return false
+  }
+  let ranges = pageRange.split(',');
+  for (let i = 0; i < ranges.length; i++) {
+    let rng = ranges[i].trim();
+    if (rng.includes('-')) {
+      let [start, end] = rng.split('-');
+      start = parseInt(start);
+      end = parseInt(end);
+      if (isNaN(start) || isNaN(end) || start > end || start <= 0) {
+        return false;
+      }
+    } else {
+      let page = parseInt(rng);
+      if (isNaN(page) || page <= 0) {
+        return false
+      }
+    }
+  }
+  return true
+}
+
 export const PAPER_ID = 256