diff --git a/app/components/commander/index.hbs b/app/components/commander/index.hbs
index 6bcd4a64588d8b10baf4ea6a8a31372ec0e8ad11..455f2d219b08dafcae4eafbcfa5ab9645dfcd216 100644
--- a/app/components/commander/index.hbs
+++ b/app/components/commander/index.hbs
@@ -51,7 +51,7 @@
{{show-when this.show_rename_node_modal}} />
<Modal::DeleteNode
- id="rename-node"
+ id="delete-node"
@selectedNodes={{this.selected_nodes}}
@onClose={{this.closeConfirmDeletionModal}}
{{show-when this.show_confirm_deletion_modal}} />
diff --git a/app/components/modal/delete_pages.hbs b/app/components/modal/delete_pages.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..98d6c9464440f04360b08f24c04746f1f5ad1bba
--- /dev/null
+++ b/app/components/modal/delete_pages.hbs
@@ -0,0 +1,16 @@
+<Modal::Base
+ @title="Confirm Deletion"
+ @actionTitle="Delete"
+ @onClose={{@onClose}}
+ @onSubmit={{this.onSubmit}}
+ @submitButtonClass="btn-danger"
+ @onCancel={{this.onCancel}}
+ ...attributes>
+ <p>
+ You selected {{this.count}} page(s).
+ If you click DELETE button selected page(s) will be deleted.
+ </p>
+ <p>
+ Do you really want to do that?
+ </p>
+</Modal::Base>
\ No newline at end of file
diff --git a/app/components/modal/delete_pages.js b/app/components/modal/delete_pages.js
new file mode 100644
index 0000000000000000000000000000000000000000..e37de217b79dd70960d674aa1f0f6c1aff6e3285
--- /dev/null
+++ b/app/components/modal/delete_pages.js
@@ -0,0 +1,32 @@
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { A } from '@ember/array';
+
+import BaseComponent from "./base";
+
+
+export default class DeletePagesComponent extends BaseComponent {
+ @service store;
+ @service currentUser;
+
+ get pages() {
+ return this.args.selectedPages;
+ }
+
+ @action
+ onSubmit() {
+ let pages_copy = A(this.pages);
+
+ this.args.onClose(pages_copy);
+ }
+
+ get count() {
+ return this.pages.length;
+ }
+
+ @action
+ onCancel() {
+ this.args.onClose();
+ }
+
+}
diff --git a/app/components/viewer/action_buttons.hbs b/app/components/viewer/action_buttons/index.hbs
similarity index 68%
rename from app/components/viewer/action_buttons.hbs
rename to app/components/viewer/action_buttons/index.hbs
index 5ab80ede815f9eaa5ad9c9cc005f63cd1fc7ccc6..8ca8a63a669a9bc4200a0f6c93ff498305ea944c 100644
--- a/app/components/viewer/action_buttons.hbs
+++ b/app/components/viewer/action_buttons/index.hbs
@@ -19,4 +19,13 @@
Run OCR
</button>
{{/if}}
-</div>
\ No newline at end of file
+ {{#if this.is_any_page_selected }}
+ <button
+ class="btn btn-danger mx-5"
+ type="button"
+ {{on "click" @openConfirmDeletionModal}} >
+ <i class="fa fa-times"></i>
+ Delete Pages
+ </button>
+ {{/if}}
+</div>
diff --git a/app/components/viewer/action_buttons/index.js b/app/components/viewer/action_buttons/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..fdc931a903533d6478bf35a3aff775937f48bf9a
--- /dev/null
+++ b/app/components/viewer/action_buttons/index.js
@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+
+export default class ActionButtonsComponent extends Component {
+
+ get is_any_page_selected() {
+ return this.args.selectedPages.length > 0;
+ }
+}
\ No newline at end of file
diff --git a/app/components/viewer/document/index.hbs b/app/components/viewer/document/index.hbs
index bd599a2a59346592169fe88d42370ec30bf3df6e..9a7a17b572b5aa44cbb1af598771ae122b6bb697 100644
--- a/app/components/viewer/document/index.hbs
+++ b/app/components/viewer/document/index.hbs
@@ -2,7 +2,9 @@
{{#if this.thumbnails_visible}}
<Viewer::Thumbnails
@pages={{@pages}}
- @onDblClick={{this.onThumbnailDblClick}} />
+ @selectedPages={{@selectedPages}}
+ @onDblClick={{this.onThumbnailDblClick}}
+ @onCheckboxChange={{@onCheckboxChange}} />
{{/if}}
<Viewer::ThumbnailsSwitch
@onThumbnailsToggle={{this.onThumbnailsToggle}}
diff --git a/app/components/viewer/index.hbs b/app/components/viewer/index.hbs
index e3f3342d79dc8566fb0d5e9038985cbac1032148..33b1f8b70a365211fa0296641f10587034ed08c2 100644
--- a/app/components/viewer/index.hbs
+++ b/app/components/viewer/index.hbs
@@ -4,6 +4,8 @@
@document_versions={{this.document_versions}}
@isLocked={{this.isLocked}}
@ocrStatus={{this.ocrStatus}}
+ @selectedPages={{this.selected_pages}}
+ @openConfirmDeletionModal={{this.openConfirmDeletionModal}}
@onRunOCR={{this.onRunOCR}} />
<Viewer::ActionModes
@@ -12,6 +14,12 @@
@hint={{@hint}} />
</div>
+ <Modal::DeletePages
+ id="delete-pages"
+ @selectedPages={{this.selected_pages}}
+ @onClose={{this.closeConfirmDeletionModal}}
+ {{show-when this.show_confirm_pages_deletion_modal}} />
+
<Breadcrumb
@node={{@doc}}
@extranode={{@extranode}}
@@ -21,7 +29,7 @@
<Viewer::Document
@pages={{this.pages}}
+ @selectedPages={{this.selected_pages}}
@thumbnails_visible={{this.thumbnails_visible}}
- @onThumbnailsToggle={{this.onThumbnailsToggle}} />
-
+ @onCheckboxChange={{this.onThumbnailCheckboxChange}} />
</div>
diff --git a/app/components/viewer/index.js b/app/components/viewer/index.js
index bb30f001d278fa50dccb255c0fc5a15c09e76754..d53b6af36d292686f41fd1f5c062faa3ecaf213b 100644
--- a/app/components/viewer/index.js
+++ b/app/components/viewer/index.js
@@ -19,6 +19,7 @@ export default class ViewerComponent extends Component {
@service websockets;
@service store;
@service requests;
+ @service router;
@tracked ocr_status = null;
@tracked is_locked = false;
@@ -29,6 +30,9 @@ export default class ViewerComponent extends Component {
@tracked _pages = A([]);
@tracked __pages__;
+ @tracked selected_pages = A([]);
+ @tracked show_confirm_pages_deletion_modal = false;
+
constructor(owner, args) {
super(owner, args);
@@ -102,7 +106,32 @@ export default class ViewerComponent extends Component {
@action
onNodeClicked() {
- console.log('node clicked');
+ }
+
+ @action
+ onThumbnailCheckboxChange({page, is_selected}) {
+ if (is_selected) {
+ this.selected_pages.pushObject(page);
+ } else {
+ this.selected_pages.removeObject(page);
+ }
+ }
+
+ @action
+ openConfirmDeletionModal() {
+ this.show_confirm_pages_deletion_modal = true;
+ }
+
+ @action
+ async closeConfirmDeletionModal() {
+ let page_ids = [];
+
+ page_ids = this.selected_pages.map(page => page.id);
+ await this.requests.deletePages(page_ids);
+
+ this.show_confirm_pages_deletion_modal = false;
+ this.selected_pages = A([]);
+ this.router.refresh();
}
get versions() {
diff --git a/app/components/viewer/thumbnail/index.hbs b/app/components/viewer/thumbnail/index.hbs
index 87f494ba6cb570f47803213f1798323004c8b86e..30de6f9a3c9d1450d06036b1191c22324e242595 100644
--- a/app/components/viewer/thumbnail/index.hbs
+++ b/app/components/viewer/thumbnail/index.hbs
@@ -1,6 +1,11 @@
<div
- class="thumbnail d-flex flex-column align-items-center"
+ class="thumbnail d-flex flex-column align-items-center px-2 {{if this.is_selected 'checked'}}"
{{on "dblclick" this.onDblClick}} >
+ <Input
+ class="align-self-start m-1"
+ @type="checkbox"
+ @checked={{this.is_selected}}
+ {{on "change" this.onCheckboxChange}} />
{{#if @page.svg_image}}
{{{@page.svg_image}}}
{{else}}
diff --git a/app/components/viewer/thumbnail/index.js b/app/components/viewer/thumbnail/index.js
index 4a7220bb99d6269efedb2f3ffa195f32af8108e7..57474a26c6908f6994d3a4d8822fae18b8961c0c 100644
--- a/app/components/viewer/thumbnail/index.js
+++ b/app/components/viewer/thumbnail/index.js
@@ -8,4 +8,33 @@ export default class ViewerThumbnailComponent extends Component {
onDblClick() {
this.args.onDblClick(this.args.page);
}
+
+ @action
+ onCheckboxChange(event) {
+ let is_checked = event.target.checked;
+
+ this.args.onCheckboxChange({
+ page: this.args.page,
+ is_selected: is_checked
+ });
+ }
+
+ get is_selected() {
+ let page = this.args.page,
+ selected_page_ids;
+
+ if (!this.args.selectedPages) {
+ return false;
+ }
+
+ selected_page_ids = this.args.selectedPages.map(
+ page => page.id
+ );
+
+ if (selected_page_ids.includes(page.id)) {
+ return true;
+ }
+
+ return false;
+ }
}
\ No newline at end of file
diff --git a/app/components/viewer/thumbnails.hbs b/app/components/viewer/thumbnails.hbs
index c3e5aa9929f8adf4f259a463bfe8704b24a85d09..b8fc91cb31bafdccf412793ca569e56c8efba017 100644
--- a/app/components/viewer/thumbnails.hbs
+++ b/app/components/viewer/thumbnails.hbs
@@ -4,6 +4,8 @@
{{#each @pages as |page|}}
<Viewer::Thumbnail
@page={{page}}
- @onDblClick={{@onDblClick}} />
+ @selectedPages={{@selectedPages}}
+ @onDblClick={{@onDblClick}}
+ @onCheckboxChange={{@onCheckboxChange}} />
{{/each}}
</div>
diff --git a/app/services/requests.js b/app/services/requests.js
index bba8b644798365dc0efe75ab84b652a86cce0df8..2c4ea02cd9ed272581cd0e256ba1b62954e1ef6a 100644
--- a/app/services/requests.js
+++ b/app/services/requests.js
@@ -33,6 +33,10 @@ export default class Requests extends Service {
});
}
+ async deletePages(page_ids) {
+ return this._delete('/pages/', {'pages': page_ids});
+ }
+
/**
* `document_version` contains following attributes:
* id
@@ -150,6 +154,27 @@ export default class Requests extends Service {
});
}
+ async _delete(url, data) {
+ let url_with_base,
+ body_data = '',
+ headers_copy = {};
+
+ url_with_base = `${base_url()}${url}`;
+
+ Object.assign(headers_copy, this.headers);
+ headers_copy['Content-Type'] = 'application/json';
+
+ if (data) {
+ body_data = JSON.stringify(data);
+ }
+
+ return fetch(url_with_base, {
+ method: 'DELETE',
+ headers: headers_copy,
+ body: body_data,
+ });
+ }
+
async _get(url, params_str) {
let url_with_base,
headers_copy = {};
diff --git a/app/styles/document_version.scss b/app/styles/document_version.scss
index 7e2c22e9e79b4bf3107b215d566884baec49be20..db9a087b20c626fff82703c81513c63be2a7397b 100644
--- a/app/styles/document_version.scss
+++ b/app/styles/document_version.scss
@@ -5,10 +5,25 @@
overflow: scroll;
.thumbnail {
- margin: 1rem;
+ margin: 0.25rem;
img {
width: 6rem;
}
+ input[type=checkbox] {
+ visibility: hidden;
+ }
+ &:hover {
+ input[type=checkbox] {
+ visibility: visible;
+ }
+ }
+ &.checked {
+ input[type=checkbox] {
+ visibility: visible;
+ }
+ background-color: #e6f5ff;
+ outline: 1px solid #A6DAFF;
+ }
}
}