diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf index 9827bda41..92b4c9a35 100644 --- a/src-ui/messages.xlf +++ b/src-ui/messages.xlf @@ -256,21 +256,21 @@ Document added src/app/app.component.ts - 75 + 78 Document was added to paperless. src/app/app.component.ts - 77 + 80 Open document src/app/app.component.ts - 78 + 81 src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html @@ -281,28 +281,112 @@ Could not add : src/app/app.component.ts - 94 + 97 New document detected src/app/app.component.ts - 109 + 112 Document is being processed by paperless. src/app/app.component.ts - 111 + 114 + + + + The dashboard can be used to show saved views, such as an 'Inbox'. Those settings are found under Settings > Saved Views once you have created some. + + src/app/app.component.ts + 122 + + + + Drag-and-drop documents here to start uploading or place them in the consume folder. You can also drag-and-drop documents anywhere on all other pages of the web app. Once you do, Paperless-ngx will start training it's machine learning algorithms. + + src/app/app.component.ts + 129 + + + + The documents list shows all of your documents and allows for filtering as well as bulk-editing. There are three different view styles: list, small cards and large cards. A list of documents currently opened for editing is shown in the sidebar. + + src/app/app.component.ts + 135 + + + + The filtering tools allow you to quickly find documents using various searches, dates, tags, etc. + + src/app/app.component.ts + 144 + + + + Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar. + + src/app/app.component.ts + 151 + + + + Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view. + + src/app/app.component.ts + 157 + + + + File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process. + + src/app/app.component.ts + 163 + + + + Check out the settings for various tweaks to the web app or to toggle settings for saved views. + + src/app/app.component.ts + 169 + + + + The Admin area contains more advanced controls as well as the settings for automatic e-mail fetching. + + src/app/app.component.ts + 175 + + + + Thank you! ๐Ÿ™ + + src/app/app.component.ts + 180 + + + + There are <em>tons</em> more features and info we didn't cover here, but this should get you started. Check out the documentation or visit the project on GitHub to learn more or to report issues. + + src/app/app.component.ts + 182 + + + + Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx! + + src/app/app.component.ts + 184 Initiating upload... src/app/app.component.ts - 146 + 230 @@ -1079,7 +1163,7 @@ src/app/components/document-list/document-list.component.html - 87 + 88 src/app/components/manage/tasks/tasks.component.html @@ -1090,18 +1174,18 @@ 27 - - Hello , welcome to Paperless-ngx! + + Hello , welcome to Paperless-ngx src/app/components/dashboard/dashboard.component.ts - 19 + 18 - - Welcome to Paperless-ngx! + + Welcome to Paperless-ngx src/app/components/dashboard/dashboard.component.ts - 21 + 20 @@ -1252,53 +1336,39 @@ this string is used to separate processing, failed and added on the file upload widget - - First steps + + Paperless-ngx is running! src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html - 1 + 3 - - Paperless is running! :) + + You're ready to start uploading documents! Explore the various features of this web app on your own, or start a quick tour using the button below. + + src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html + 4 + + + + More detail on how to use and configure Paperless-ngx is always available in the documentation. src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html 5 - - You can start uploading documents by dropping them in the file upload box to the right or by dropping them in the configured consumption folder and they'll start showing up in the documents list. After you've added some metadata to your documents, use the filtering mechanisms of paperless to create custom views (such as 'Recently added', 'Tagged TODO') and they will appear on the dashboard instead of this message. - - src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html - 6,7 - - - - Paperless offers some more features that try to make your life easier: + + Thanks for being a part of the Paperless-ngx community! src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html 8 - - Once you've got a couple documents in paperless and added metadata to them, paperless can assign that metadata to new documents automatically. + + Start the tour src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html - 10 - - - - You can configure paperless to read your mails and add documents from attached files. - - src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html - 11 - - - - Consult the documentation on how to use these features. The section on basic usage also has some information on how to use paperless in general. - - src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html - 13 + 9 @@ -1326,21 +1396,21 @@ Add comment src/app/components/document-comments/document-comments.component.html - 10 + 11 Error saving comment: src/app/components/document-comments/document-comments.component.ts - 57 + 68 Error deleting comment: src/app/components/document-comments/document-comments.component.ts - 72 + 83 @@ -2295,28 +2365,28 @@ {VAR_PLURAL, plural, =1 {Selected of one document} other {Selected of documents}} src/app/components/document-list/document-list.component.html - 89 + 90 {VAR_PLURAL, plural, =1 {One document} other { documents}} src/app/components/document-list/document-list.component.html - 91 + 92 (filtered) src/app/components/document-list/document-list.component.html - 91 + 92 Error while loading documents src/app/components/document-list/document-list.component.html - 102 + 103 @@ -2729,6 +2799,13 @@ 168,170 + + Start tour + + src/app/components/manage/settings/settings.component.html + 2 + + General @@ -2964,56 +3041,56 @@ Saved view "" deleted. src/app/components/manage/settings/settings.component.ts - 176 + 178 Settings saved src/app/components/manage/settings/settings.component.ts - 253 + 255 Settings were saved successfully. src/app/components/manage/settings/settings.component.ts - 254 + 256 Settings were saved successfully. Reload is required to apply some changes. src/app/components/manage/settings/settings.component.ts - 258 + 260 Reload now src/app/components/manage/settings/settings.component.ts - 259 + 261 An error occurred while saving settings. src/app/components/manage/settings/settings.component.ts - 269 + 271 Use system language src/app/components/manage/settings/settings.component.ts - 277 + 279 Use date format of display language src/app/components/manage/settings/settings.component.ts - 284 + 286 @@ -3022,7 +3099,7 @@ )"/> src/app/components/manage/settings/settings.component.ts - 304,306 + 306,308 @@ -3481,168 +3558,168 @@ English (US) src/app/services/settings.service.ts - 140 + 142 Belarusian src/app/services/settings.service.ts - 146 + 148 Czech src/app/services/settings.service.ts - 152 + 154 Danish src/app/services/settings.service.ts - 158 + 160 German src/app/services/settings.service.ts - 164 + 166 English (GB) src/app/services/settings.service.ts - 170 + 172 Spanish src/app/services/settings.service.ts - 176 + 178 French src/app/services/settings.service.ts - 182 + 184 Italian src/app/services/settings.service.ts - 188 + 190 Luxembourgish src/app/services/settings.service.ts - 194 + 196 Dutch src/app/services/settings.service.ts - 200 + 202 Polish src/app/services/settings.service.ts - 206 + 208 Portuguese (Brazil) src/app/services/settings.service.ts - 212 + 214 Portuguese src/app/services/settings.service.ts - 218 + 220 Romanian src/app/services/settings.service.ts - 224 + 226 Russian src/app/services/settings.service.ts - 230 + 232 Slovenian src/app/services/settings.service.ts - 236 + 238 Serbian src/app/services/settings.service.ts - 242 + 244 Swedish src/app/services/settings.service.ts - 248 + 250 Turkish src/app/services/settings.service.ts - 254 + 256 Chinese Simplified src/app/services/settings.service.ts - 260 + 262 ISO 8601 src/app/services/settings.service.ts - 277 + 279 Successfully completed one-time migratration of settings to the database! src/app/services/settings.service.ts - 372 + 374 Unable to migrate settings to the database, please try saving manually. src/app/services/settings.service.ts - 373 + 375 diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json index 7e9e0061c..274117558 100644 --- a/src-ui/package-lock.json +++ b/src-ui/package-lock.json @@ -26,6 +26,7 @@ "ngx-color": "^8.0.3", "ngx-cookie-service": "^14.0.1", "ngx-file-drop": "^14.0.1", + "ngx-ui-tour-ng-bootstrap": "^11.0.0", "rxjs": "~7.5.7", "tslib": "^2.3.1", "uuid": "^9.0.0", @@ -12936,6 +12937,36 @@ "@angular/core": ">=14.0.0" } }, + "node_modules/ngx-ui-tour-core": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/ngx-ui-tour-core/-/ngx-ui-tour-core-9.0.0.tgz", + "integrity": "sha512-3HvrprosDaZm9jHi/w+oA8N9bPeaV9k0Y70nsEkRPRQ1jM302JyjGYFuM6/FzbXU5FITGLChtrFJpBn/Q4yJIA==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": "^14.0.0", + "@angular/core": "^14.0.0", + "@angular/router": "^14.0.0", + "rxjs": ">=6.0.0", + "typescript": ">=3.8.0" + } + }, + "node_modules/ngx-ui-tour-ng-bootstrap": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/ngx-ui-tour-ng-bootstrap/-/ngx-ui-tour-ng-bootstrap-11.0.0.tgz", + "integrity": "sha512-oF5ySZEiO4ib/RfYno81V2UBaX7EMzxSPwfCdedDr38e5BEPTOrcCufOaiOfuQzQftg+7CC/BbFY8Df9kmeL1A==", + "dependencies": { + "ngx-ui-tour-core": "9.0.0", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": "^14.0.0", + "@angular/core": "^14.0.0", + "@ng-bootstrap/ng-bootstrap": "^13.0.0", + "typescript": ">=3.8.0" + } + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", @@ -27156,6 +27187,23 @@ "tslib": "^2.3.0" } }, + "ngx-ui-tour-core": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/ngx-ui-tour-core/-/ngx-ui-tour-core-9.0.0.tgz", + "integrity": "sha512-3HvrprosDaZm9jHi/w+oA8N9bPeaV9k0Y70nsEkRPRQ1jM302JyjGYFuM6/FzbXU5FITGLChtrFJpBn/Q4yJIA==", + "requires": { + "tslib": "^2.0.0" + } + }, + "ngx-ui-tour-ng-bootstrap": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/ngx-ui-tour-ng-bootstrap/-/ngx-ui-tour-ng-bootstrap-11.0.0.tgz", + "integrity": "sha512-oF5ySZEiO4ib/RfYno81V2UBaX7EMzxSPwfCdedDr38e5BEPTOrcCufOaiOfuQzQftg+7CC/BbFY8Df9kmeL1A==", + "requires": { + "ngx-ui-tour-core": "9.0.0", + "tslib": "^2.0.0" + } + }, "nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", diff --git a/src-ui/package.json b/src-ui/package.json index 513e1b2f7..02afd7e79 100644 --- a/src-ui/package.json +++ b/src-ui/package.json @@ -31,6 +31,7 @@ "ngx-color": "^8.0.3", "ngx-cookie-service": "^14.0.1", "ngx-file-drop": "^14.0.1", + "ngx-ui-tour-ng-bootstrap": "^11.0.0", "rxjs": "~7.5.7", "tslib": "^2.3.1", "uuid": "^9.0.0", diff --git a/src-ui/src/app/app.component.html b/src-ui/src/app/app.component.html index 2b050ed3f..84a4f595c 100644 --- a/src-ui/src/app/app.component.html +++ b/src-ui/src/app/app.component.html @@ -11,3 +11,28 @@ + + + +

+
+
+ {{ tourService.steps?.indexOf(step) + 1 }} / {{ tourService.steps?.length }} + +
+ + diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts index b1ba49c3a..4ab48f32c 100644 --- a/src-ui/src/app/app.component.ts +++ b/src-ui/src/app/app.component.ts @@ -1,6 +1,6 @@ import { SettingsService } from './services/settings.service' import { SETTINGS_KEYS } from './data/paperless-uisettings' -import { Component, OnDestroy, OnInit } from '@angular/core' +import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core' import { Router } from '@angular/router' import { Subscription } from 'rxjs' import { ConsumerStatusService } from './services/consumer-status.service' @@ -8,6 +8,7 @@ import { ToastService } from './services/toast.service' import { NgxFileDropEntry } from 'ngx-file-drop' import { UploadDocumentsService } from './services/upload-documents.service' import { TasksService } from './services/tasks.service' +import { TourService } from 'ngx-ui-tour-ng-bootstrap' @Component({ selector: 'app-root', @@ -29,7 +30,9 @@ export class AppComponent implements OnInit, OnDestroy { private toastService: ToastService, private router: Router, private uploadDocumentsService: UploadDocumentsService, - private tasksService: TasksService + private tasksService: TasksService, + public tourService: TourService, + private renderer: Renderer2 ) { let anyWindow = window as any anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.js' @@ -112,6 +115,87 @@ export class AppComponent implements OnInit, OnDestroy { }) } }) + + this.tourService.initialize([ + { + anchorId: 'tour.dashboard', + content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Those settings are found under Settings > Saved Views once you have created some.`, + route: '/dashboard', + enableBackdrop: true, + delayAfterNavigation: 500, + }, + { + anchorId: 'tour.upload-widget', + content: $localize`Drag-and-drop documents here to start uploading or place them in the consume folder. You can also drag-and-drop documents anywhere on all other pages of the web app. Once you do, Paperless-ngx will start training it's machine learning algorithms.`, + route: '/dashboard', + enableBackdrop: true, + }, + { + anchorId: 'tour.documents', + content: $localize`The documents list shows all of your documents and allows for filtering as well as bulk-editing. There are three different view styles: list, small cards and large cards. A list of documents currently opened for editing is shown in the sidebar.`, + route: '/documents?sort=created&reverse=1&page=1', + delayAfterNavigation: 500, + placement: 'bottom', + enableBackdrop: true, + disableScrollToAnchor: true, + }, + { + anchorId: 'tour.documents-filter-editor', + content: $localize`The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.`, + route: '/documents?sort=created&reverse=1&page=1', + placement: 'bottom', + enableBackdrop: true, + }, + { + anchorId: 'tour.documents-views', + content: $localize`Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar.`, + route: '/documents?sort=created&reverse=1&page=1', + enableBackdrop: true, + }, + { + anchorId: 'tour.tags', + content: $localize`Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.`, + route: '/tags', + enableBackdrop: true, + }, + { + anchorId: 'tour.file-tasks', + content: $localize`File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.`, + route: '/tasks', + enableBackdrop: true, + }, + { + anchorId: 'tour.settings', + content: $localize`Check out the settings for various tweaks to the web app or to toggle settings for saved views.`, + route: '/settings', + enableBackdrop: true, + }, + { + anchorId: 'tour.admin', + content: $localize`The Admin area contains more advanced controls as well as the settings for automatic e-mail fetching.`, + enableBackdrop: true, + }, + { + anchorId: 'tour.outro', + title: $localize`Thank you! ๐Ÿ™`, + content: + $localize`There are tons more features and info we didn't cover here, but this should get you started. Check out the documentation or visit the project on GitHub to learn more or to report issues.` + + '

' + + $localize`Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!`, + route: '/dashboard', + }, + ]) + + this.tourService.start$.subscribe(() => { + this.renderer.addClass(document.body, 'tour-active') + }) + + this.tourService.end$.subscribe(() => { + // animation time + setTimeout(() => { + this.renderer.removeClass(document.body, 'tour-active') + }, 500) + }) } public get dragDropEnabled(): boolean { diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 9840deb58..02fd8ea66 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -69,6 +69,11 @@ import { ColorComponent } from './components/common/input/color/color.component' import { DocumentAsnComponent } from './components/document-asn/document-asn.component' import { DocumentCommentsComponent } from './components/document-comments/document-comments.component' import { DirtyDocGuard } from './guards/dirty-doc.guard' +import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component' +import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component' +import { SettingsService } from './services/settings.service' +import { TasksComponent } from './components/manage/tasks/tasks.component' +import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap' import localeBe from '@angular/common/locales/be' import localeCs from '@angular/common/locales/cs' @@ -89,10 +94,6 @@ import localeSr from '@angular/common/locales/sr' import localeSv from '@angular/common/locales/sv' import localeTr from '@angular/common/locales/tr' import localeZh from '@angular/common/locales/zh' -import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component' -import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component' -import { SettingsService } from './services/settings.service' -import { TasksComponent } from './components/manage/tasks/tasks.component' registerLocaleData(localeBe) registerLocaleData(localeCs) @@ -188,6 +189,7 @@ function initializeApp(settings: SettingsService) { PdfViewerModule, NgSelectModule, ColorSliderModule, + TourNgBootstrapModule.forRoot(), ], providers: [ { diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html index 7d003225d..0c69b808d 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.html +++ b/src-ui/src/app/components/app-frame/app-frame.component.html @@ -4,8 +4,8 @@ (click)="isMenuCollapsed = !isMenuCollapsed"> - - + + Paperless-ngx @@ -127,7 +127,7 @@
  • - +  Tags @@ -148,7 +148,7 @@
  • - + {{tasksService.failedFileTasks.length}} @@ -163,14 +163,14 @@
  • - +  Settings
  • - +  Admin @@ -183,7 +183,7 @@