add chose language on run OCR

Let user choose language on run OCR

Author: ciur

app/components/select/index.hbs

@@ -3,6 +3,10 @@
   class="form-select"
   ...attributes>
   {{#each @options as |opt|}}
-    <option value="{{opt.key}}">{{opt.value}}</option>
+    {{#if opt.selected}}
+      <option value="{{opt.key}}" selected>{{opt.value}}</option>
+    {{else }}
+      <option value="{{opt.key}}">{{opt.value}}</option>
+    {{/if}}
   {{/each}}
-</select>
+</select>

app/components/viewer/action_buttons/index.hbs

@@ -14,15 +14,15 @@
         class="btn btn-light"
         type="button"
         disabled
-        {{on "click" @onRunOCR}}>
+        {{on "click" @openRerunOCRModal}}>
           <OcrStatus @status={{@ocrStatus}} />
         Run OCR
       </button>
     {{else}}
       <button
         class="btn btn-light"
         type="button"
-        {{on "click" @onRunOCR}}>
+        {{on "click" @openRerunOCRModal}}>
           <OcrStatus @status={{@ocrStatus}} />
         Run OCR
       </button>

app/components/viewer/index.hbs

@@ -12,8 +12,8 @@
       @openConfirmDeletionModal={{this.openConfirmDeletionModal}}
       @openRenameDocumentModal={{this.openRenameDocumentModal}}
       @openOCRedTextModal={{this.openOCRedTextModal}}
-      @onRotateClockwise={{this.onRotateClockwise}}
-      @onRunOCR={{this.onRunOCR}} />
+      @openRerunOCRModal={{this.openRunOCRModal}}
+      @onRotateClockwise={{this.onRotateClockwise}} />
 
     <Viewer::ActionModes
       @onPanelToggle={{@onPanelToggle}}
@@ -62,6 +62,14 @@
     @onSubmit={{this.submitConfirmDocumentMergeModal}}
     {{show-when this.show_confirm_document_merge_modal}} />
 
+  <Viewer::Modal::RunOcr
+    id="run-ocr"
+    @doc={{@doc}}
+    @getOCRLanguages={{this.getOCRLanguages}}
+    @ocr_languages={{this.ocr_languages}}
+    @onSubmit={{this.onRunOCR}}
+    {{show-when this.show_run_ocr_modal}} />
+
   <Modal::RenameNode
     @node={{@doc}}
     @onClose={{this.onCloseRenameModal}}

app/components/viewer/index.js

@@ -47,6 +47,10 @@ export default class ViewerComponent extends Component {
   @tracked show_ocred_text_modal = false;
   @tracked ocred_text_result;
 
+  // show runOCR modal ?
+  @tracked show_run_ocr_modal = false;
+  @tracked ocr_languages;
+
   @tracked page_order_changed = false;
   @tracked apply_page_order_changes_in_progress = false;
   // extract page = document -> folder
@@ -115,12 +119,13 @@ export default class ViewerComponent extends Component {
   }
 
   @action
-  onRunOCR() {
+  onRunOCR(lang) {
     this.is_locked = true;
     this.requests.runOCR({
       doc_id: this.args.doc.id,
-      lang: 'deu'
+      lang: lang
     });
+    this.show_run_ocr_modal = false;
   }
 
   @action
@@ -255,6 +260,34 @@ export default class ViewerComponent extends Component {
     });
   }
 
+  @action
+  openRunOCRModal() {
+    this.show_run_ocr_modal = true;
+    this.getOCRLanguages.perform();
+  }
+
+  @task *getOCRLanguages() {
+    let result1 = yield this.requests.preferences({
+      section_name: 'ocr'
+    });
+
+    let result2 = yield result1.json();
+    let ocr_language, languages, current_value;
+
+    ocr_language = result2.data.find(
+      item => item.attributes.identifier == 'ocr__language'
+    );
+
+    languages = ocr_language.attributes.additional_data.choices;
+    current_value = ocr_language.attributes.value;
+
+    this.ocr_languages = {
+      languages,
+      current_value
+    };
+
+  }
+
   @action
   onCloseOCRedTextModal() {
     this.show_ocred_text_modal = false;

app/components/viewer/modal/run_ocr/index.hbs

@@ -0,0 +1,38 @@
+<div class="modal" tabindex="-1" ...attributes>
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Run OCR</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>
+          <Label
+            @for="language"
+            @text="OCR Language:" />
+          {{#if this.getOCRLanguages.isRunning}}
+            <Spinner @inProgress={{true}} />
+          {{else}}
+            <Select
+              @options={{this.ocr_language_options}}
+              @onChange={{this.onLanguageChanged}}
+              name="ocr_language" />
+          {{/if}}
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button
+          type="button"
+          class="btn btn-secondary"
+          data-bs-dismiss="modal"
+          {{on "click" this.onCancel}}>Cancel</button>
+        <button
+          type="button"
+          class="btn btn-primary btn-success"
+          {{on "click" this.onSubmit}}>
+          Start
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

app/components/viewer/modal/run_ocr/index.js

@@ -0,0 +1,63 @@
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import Component from '@glimmer/component';
+
+
+export default class RunOCRModalComponent extends Component {
+  @tracked _lang;
+
+  get ocr_language_options() {
+    let langs;
+
+    if (this.args.ocr_languages) {
+      langs = this.args.ocr_languages['languages'];
+
+      return langs.map(item => {
+        let result = {
+          'key': item[0],
+          'value': item[1],
+          'selected': false
+        };
+
+        if (this.args.ocr_languages['current_value'] == item[0]) {
+          result['selected'] = true;
+        }
+
+        return result;
+      });
+    }
+
+    return [];
+  }
+
+  get getOCRLanguages() {
+    return this.args.getOCRLanguages;
+  }
+
+  @action
+  onLanguageChanged(event) {
+    this._lang = event.target.value;
+  }
+
+  @action
+  async onSubmit() {
+    let lang;
+
+    if (this._lang) {
+      lang = this._lang;
+    } else {
+      lang = this.args.ocr_languages['current_value'];
+    }
+
+    this.args.onSubmit(lang);
+  }
+
+  get lang() {
+    return this._lang;
+  }
+
+  @action
+  onCancel() {
+  }
+
+}