@valtimo/dossier 4.17.0 → 4.20.0

package/bundles/valtimo-dossier.umd.js

@@ -732,7 +732,7 @@
     DossierListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-list',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div>\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"processDocumentDefinitions.length === 0\"\n          >\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">\n                  {{ 'dashboard.startProcess.title' | translate }}\n                </h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-widget>\n        <valtimo-list\n          [items]=\"items\"\n          [fields]=\"fields\"\n          (rowClicked)=\"rowClick($event)\"\n          [pagination]=\"pagination\"\n          [viewMode]=\"true\"\n          [header]=\"true\"\n          paginationIdentifier=\"dossierList\"\n          (paginationClicked)=\"paginationClicked($event)\"\n          (paginationSet)=\"paginationSet()\"\n          [initialSortState]=\"getInitialSortState()\"\n          (sortChanged)=\"sortChanged($event)\"\n        >\n          <div header>\n            <h3 class=\"list-header-title\">\n              {{ schema?.title }}\n              <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n                documents?.content.length || 0\n              }}</sup>\n            </h3>\n          </div>\n        </valtimo-list>\n      </valtimo-widget>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [(ngModel)]=\"globalSearchFilter\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [(ngModel)]=\"sequence\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n",
+                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div>\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"processDocumentDefinitions.length === 0\"\n          >\n            <i class=\"icon mdi mdi-plus mr-1\"></i>\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">\n                  {{ 'dashboard.startProcess.title' | translate }}\n                </h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-widget>\n        <valtimo-list\n          [items]=\"items\"\n          [fields]=\"fields\"\n          (rowClicked)=\"rowClick($event)\"\n          [pagination]=\"pagination\"\n          [viewMode]=\"true\"\n          [header]=\"true\"\n          paginationIdentifier=\"dossierList\"\n          (paginationClicked)=\"paginationClicked($event)\"\n          (paginationSet)=\"paginationSet()\"\n          [initialSortState]=\"getInitialSortState()\"\n          (sortChanged)=\"sortChanged($event)\"\n        >\n          <div header>\n            <h3 class=\"list-header-title\">\n              {{ schema?.title }}\n              <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n                documents?.content.length || 0\n              }}</sup>\n            </h3>\n          </div>\n        </valtimo-list>\n      </valtimo-widget>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [(ngModel)]=\"globalSearchFilter\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [(ngModel)]=\"sequence\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n",
                     styles: [""]
                 },] }
     ];
@@ -1020,12 +1020,12 @@
             this.actions = [
                 {
                     columnName: '',
-                    iconClass: 'fas fa-external-link-alt',
+                    iconClass: 'mdi mdi-open-in-new',
                     callback: this.downloadDocument.bind(this),
                 },
                 {
                     columnName: '',
-                    iconClass: 'fas fa-trash-alt',
+                    iconClass: 'mdi mdi-delete',
                     callback: this.removeRelatedFile.bind(this),
                 },
             ];
@@ -1172,7 +1172,7 @@
      * limitations under the License.
      */
     var DossierDetailComponent = /** @class */ (function () {
-        function DossierDetailComponent(componentFactoryResolver, translateService, documentService, processService, route, router, location, tabService) {
+        function DossierDetailComponent(componentFactoryResolver, translateService, documentService, processService, route, router, location, tabService, configService) {
             this.componentFactoryResolver = componentFactoryResolver;
             this.translateService = translateService;
             this.documentService = documentService;
@@ -1181,10 +1181,12 @@
             this.router = router;
             this.location = location;
             this.tabService = tabService;
+            this.configService = configService;
             this.document = null;
             this.tabLoader = null;
             this.processDefinitionListFields = [];
             this.processDocumentDefinitions = [];
+            this.customDossierHeaderItems = [];
             this.snapshot = this.route.snapshot.paramMap;
             this.documentDefinitionName = this.snapshot.get('documentDefinitionName') || '';
             this.documentId = this.snapshot.get('documentId') || '';
@@ -1197,6 +1199,7 @@
                 .subscribe(function (definition) {
                 _this.documentDefinitionNameTitle = definition.schema.title;
             });
+            this.getCustomDossierHeader();
             this.initialTabName = this.snapshot.get('tab');
             this.tabLoader.initial(this.initialTabName);
             this.getAllAssociatedProcessDefinitions();
@@ -1218,12 +1221,41 @@
         DossierDetailComponent.prototype.startProcess = function (processDocumentDefinition) {
             this.supportingProcessStart.openModal(processDocumentDefinition, this.documentId);
         };
+        DossierDetailComponent.prototype.getCustomDossierHeader = function () {
+            var _this = this;
+            var _a;
+            if ((_a = this.configService.config.customDossierHeader) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(this.documentDefinitionName.toLowerCase())) {
+                this.documentService.getDocument(this.documentId).subscribe(function (document) {
+                    var _a;
+                    _this.document = document;
+                    (_a = _this.configService.config.customDossierHeader[_this.documentDefinitionName.toLowerCase()]) === null || _a === void 0 ? void 0 : _a.forEach(function (item) { return _this.getCustomDossierHeaderItem(item); });
+                });
+            }
+        };
+        DossierDetailComponent.prototype.getCustomDossierHeaderItem = function (item) {
+            var _this = this;
+            var _a;
+            this.customDossierHeaderItems.push({
+                label: item['labelTranslationKey'] || '',
+                columnSize: item['columnSize'] || 3,
+                textSize: item['textSize'] || 'md',
+                customClass: item['customClass'] || '',
+                value: (_a = item['propertyPaths']) === null || _a === void 0 ? void 0 : _a.reduce(function (prev, curr) { return prev + _this.getStringFromDocumentPath(item, curr); }, ''),
+            });
+        };
+        DossierDetailComponent.prototype.getStringFromDocumentPath = function (item, path) {
+            var prefix = item['propertyPaths'].indexOf(path) > 0 ? ' ' : '';
+            var string = path.split('.').reduce(function (o, i) { return o[i]; }, this.document.content) || item['noValueText'] || '';
+            var regex = new RegExp('(T\\d\\d:\\d\\d:\\d\\d[+-])');
+            var formattedString = regex.test(string) ? moment_(string).format('DD-MM-YYYY') : string;
+            return prefix + formattedString;
+        };
         return DossierDetailComponent;
     }());
     DossierDetailComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-detail',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-header bg-light card-header-divider pb-5\">\n          {{ documentDefinitionNameTitle }}\n          <div class=\"btn-group mt-m3px mb-3 float-right\">\n            <valtimo-extension\n              module=\"dossier\"\n              page=\"dossier-detail\"\n              section=\"card-header\"\n            ></valtimo-extension>\n            <div class=\"dropdown\">\n              <button\n                class=\"btn btn-primary dropdown-toggle\"\n                type=\"button\"\n                id=\"startProcessDropdown\"\n                placement=\"bottom\"\n                [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n                [disabled]=\"processDocumentDefinitions.length === 0\"\n                data-toggle=\"dropdown\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n              >\n                <span>Start</span>\n                <i class=\"pl-2 fas fa-caret-down\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"startProcessDropdown\">\n                <button\n                  *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                  class=\"dropdown-item p\"\n                  href=\"#\"\n                  (click)=\"startProcess(processDocumentDefinition)\"\n                >\n                  {{ processDocumentDefinition.processName }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ul class=\"nav nav-tabs\">\n          <li class=\"nav-item\" *ngFor=\"let tab of tabLoader.tabs\">\n            <a\n              id=\"{{ tab.name }}-tab\"\n              class=\"nav-link clickable\"\n              [ngClass]=\"{active: tab.isActive()}\"\n              data-toggle=\"tab\"\n              (click)=\"tabLoader.load(tab)\"\n            >\n              {{ tabLoader.translateTabName(tab) }}\n            </a>\n          </li>\n        </ul>\n        <div class=\"card-body bg-white p-5 position-relative tab-container\">\n          <ng-template #tabContainer>Loading...</ng-template>\n          <div class=\"clearfix\"></div>\n        </div>\n      </valtimo-widget>\n    </div>\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n",
+                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-header bg-light card-header-divider pb-2\">\n          <div class=\"row\">\n            <div class=\"col\">\n              <div class=\"row\" *ngIf=\"customDossierHeaderItems.length > 0; else defaultTitle\">\n                <span\n                  class=\"mb-0 mt-0 pb-2 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n                    item.columnSize * 2\n                  }} {{ item.customClass }}\"\n                  [ngClass]=\"{\n                    h1: item.textSize === 'xl',\n                    h2: item.textSize === 'lg',\n                    h3: item.textSize === 'md',\n                    h4: item.textSize === 'sm',\n                    h5: item.textSize === 'xs'\n                  }\"\n                  *ngFor=\"let item of customDossierHeaderItems\"\n                >\n                  <span *ngIf=\"item.label != ''\">{{ item.label | translate }}</span>\n                  <span *ngIf=\"item.label != '' && item.value != '' && item.value != null\">: </span>\n                  <strong>{{ item.value }}</strong>\n                </span>\n              </div>\n              <ng-template #defaultTitle>\n                {{ documentDefinitionNameTitle }}\n              </ng-template>\n            </div>\n            <div class=\"btn-group mt-m3px mb-3 col-auto\">\n              <valtimo-extension\n                module=\"dossier\"\n                page=\"dossier-detail\"\n                section=\"card-header\"\n              ></valtimo-extension>\n              <div class=\"dropdown\">\n                <button\n                  class=\"btn btn-primary dropdown-toggle\"\n                  type=\"button\"\n                  id=\"startProcessDropdown\"\n                  placement=\"bottom\"\n                  [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n                  [disabled]=\"processDocumentDefinitions.length === 0\"\n                  data-toggle=\"dropdown\"\n                  aria-haspopup=\"true\"\n                  aria-expanded=\"false\"\n                >\n                  <span>Start</span>\n                  <i class=\"ml-1 mdi mdi-chevron-down\"></i>\n                </button>\n                <div\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  aria-labelledby=\"startProcessDropdown\"\n                >\n                  <button\n                    *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                    class=\"dropdown-item p\"\n                    href=\"#\"\n                    (click)=\"startProcess(processDocumentDefinition)\"\n                  >\n                    {{ processDocumentDefinition.processName }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ul class=\"nav nav-tabs\">\n          <li class=\"nav-item\" *ngFor=\"let tab of tabLoader.tabs\">\n            <a\n              id=\"{{ tab.name }}-tab\"\n              class=\"nav-link clickable\"\n              [ngClass]=\"{active: tab.isActive()}\"\n              data-toggle=\"tab\"\n              (click)=\"tabLoader.load(tab)\"\n            >\n              {{ tabLoader.translateTabName(tab) }}\n            </a>\n          </li>\n        </ul>\n        <div class=\"card-body bg-white p-5 position-relative tab-container\">\n          <ng-template #tabContainer>Loading...</ng-template>\n          <div class=\"clearfix\"></div>\n        </div>\n      </valtimo-widget>\n    </div>\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n",
                     styles: [".tab-container{min-height:300px}"]
                 },] }
     ];
@@ -1235,7 +1267,8 @@
         { type: router.ActivatedRoute },
         { type: router.Router },
         { type: common.Location },
-        { type: TabService }
+        { type: TabService },
+        { type: i1.ConfigService }
     ]; };
     DossierDetailComponent.propDecorators = {
         viewContainerRef: [{ type: i0.ViewChild, args: ['tabContainer', { read: i0.ViewContainerRef, static: true },] }],