[chore] add helper section for files tab

- added to wp single view at split and show routes
2026-06-13 19:20:00 +00:00 · 2022-03-31 11:12:30 +02:00
parent 266a471483
commit c2c0ad46ea
8 changed files with 161 additions and 124 deletions
@@ -291,9 +291,6 @@ ij_javascript_while_on_new_line = false
 ij_javascript_wrap_comments = false

 [{*.sht,*.html,*.shtm,*.shtml,*.htm,*.ng}]
-indent_size = 2
-tab_width = 2
-ij_continuation_indent_size = 2
 ij_html_add_new_line_before_tags = body,div,p,form,h1,h2,h3
 ij_html_align_attributes = true
 ij_html_align_text = false
@@ -1073,6 +1073,7 @@ en:
        relations: Relations
        watchers: Watchers
        files: Files
+        files_tab_migration_help: 'You can now attach files to work packages via the new tab:'
      time_relative:
        days: "days"
        weeks: "weeks"
@@ -35,6 +35,7 @@ import {
  Input,
  OnInit,
 } from '@angular/core';
+import { StateService } from '@uirouter/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { distinctUntilChanged, map } from 'rxjs/operators';
@@ -114,6 +115,10 @@ export class WorkPackageSingleViewComponent extends UntilDestroyedMixin implemen
    attachments: {
      label: this.I18n.t('js.label_attachments'),
    },
+    files: {
+      label: this.I18n.t('js.work_packages.tabs.files'),
+      migration_help: this.I18n.t('js.work_packages.tabs.files_tab_migration_help'),
+    },
    project: {
      required: this.I18n.t('js.project.required_outside_context'),
      context: this.I18n.t('js.project.context'),
@@ -131,6 +136,8 @@ export class WorkPackageSingleViewComponent extends UntilDestroyedMixin implemen

  public isNewResource:boolean;

+  public uiSelfRef:string;
+
  protected firstTimeFocused = false;

  $element:JQuery;
@@ -138,6 +145,7 @@ export class WorkPackageSingleViewComponent extends UntilDestroyedMixin implemen
  constructor(readonly I18n:I18nService,
    protected currentProject:CurrentProjectService,
    protected PathHelper:PathHelperService,
+    protected $state:StateService,
    protected states:States,
    protected halEditing:HalResourceEditingService,
    protected halResourceService:HalResourceService,
@@ -151,11 +159,13 @@ export class WorkPackageSingleViewComponent extends UntilDestroyedMixin implemen
    super();
  }

-  public ngOnInit() {
+  public ngOnInit():void {
    this.$element = jQuery(this.elementRef.nativeElement as HTMLElement);

    this.isNewResource = isNewResource(this.workPackage);

+    this.uiSelfRef = this.$state.$current.name;
+
    const change = this.halEditing.changeFor<WorkPackageResource, WorkPackageChangeset>(this.workPackage);
    this.resourceContextChange.next(this.contextFrom(change.projectedResource));
    this.refresh(change);
@@ -368,7 +378,7 @@ export class WorkPackageSingleViewComponent extends UntilDestroyedMixin implemen
  private contextFrom(workPackage:WorkPackageResource):ResourceContextChange {
    const schema = this.schema(workPackage);

-    let schemaHref:string|null = null;
+    let schemaHref:string|null;
    const projectHref:string|null = workPackage.project && workPackage.project.href;

    if (schema.baseSchema) {
@@ -5,8 +5,8 @@
  <div class="wp-new--subject-wrapper"
       *ngIf="isNewResource">
    <editable-attribute-field [resource]="workPackage"
-                   [wrapperClasses]="'-no-label'"
-                   [fieldName]="'subject'"></editable-attribute-field>
+                              [wrapperClasses]="'-no-label'"
+                              [fieldName]="'subject'"></editable-attribute-field>
  </div>

  <div class="wp-info-wrapper">
@@ -25,11 +25,13 @@
      because otherwise the browser would add a second space after it -->
      <span>&nbsp;</span>
      <op-user-link class="user-link"
-                 [user]="workPackage.author"></op-user-link>.
+                    [user]="workPackage.author"></op-user-link>
+      .
      <span [textContent]="text.infoRow.lastUpdatedOn"></span>
      <span>&nbsp;</span>
-      <op-date-time [dateTimeValue]="workPackage.updatedAt"></op-date-time>.
-     </div>
+      <op-date-time [dateTimeValue]="workPackage.updatedAt"></op-date-time>
+      .
+    </div>

    <wp-custom-actions [workPackage]="workPackage" class="custom-actions"></wp-custom-actions>
  </div>
@@ -53,7 +55,7 @@
        </div>
        <div class="attributes-key-value--value-container">
          <editable-attribute-field [resource]="workPackage"
-                         [fieldName]="descriptor.name"></editable-attribute-field>
+                                    [fieldName]="descriptor.name"></editable-attribute-field>
        </div>
      </div>
    </div>
@@ -84,9 +86,9 @@
  <div class="attributes-group description-group">
    <div class="single-attribute work-packages--details--description">
      <editable-attribute-field [fieldName]="'description'"
-                     [resource]="workPackage"
-                     [isDropTarget]="true"
-                     [wrapperClasses]="'-no-label'">
+                                [resource]="workPackage"
+                                [isDropTarget]="true"
+                                [wrapperClasses]="'-no-label'">
      </editable-attribute-field>
    </div>
  </div>
@@ -102,7 +104,7 @@
      <ndc-dynamic [ndcDynamicComponent]="attributeGroupComponent(group)"
                   [ndcDynamicInputs]="{ workPackage: workPackage,
                                         group: group,
-                                         query: group.query }" >
+                                         query: group.query }">
      </ndc-dynamic>
    </ng-container>

@@ -140,3 +142,23 @@
    </ndc-dynamic>
  </div>
 </div>
+
+<div class="work-packages--files attributes-group" *ngIf="!isNewResource">
+  <div class="work-packages--files-container">
+    <div class="attributes-group--header">
+      <div class="attributes-group--header-container">
+        <h3 class="attributes-group--header-text" [textContent]="text.files.label"></h3>
+      </div>
+    </div>
+
+    <div class="attributes-group--icon-indented-text">
+      <op-icon icon-classes="icon-info1"></op-icon>
+      <span [textContent]="text.files.migration_help"></span>
+      <a
+        [textContent]="text.files.label"
+        [uiSref]="uiSelfRef"
+        [uiParams]="{ workPackageId: workPackage.id, tabIdentifier: 'files' }"
+      ></a>
+    </div>
+  </div>
+</div>
@@ -29,7 +29,7 @@
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 import { StateService } from '@uirouter/core';
 import { Component, Injector, OnInit } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { of } from 'rxjs';
 import { WorkPackageViewSelectionService } from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-selection.service';
 import { WorkPackageSingleViewBase } from 'core-app/features/work-packages/routing/wp-view-base/work-package-single-view.base';
 import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service';
@@ -3,78 +3,78 @@
     *ngIf="workPackage"
     class="work-packages--show-view">

-    <wp-breadcrumb [workPackage]="workPackage"></wp-breadcrumb>
+  <wp-breadcrumb [workPackage]="workPackage"></wp-breadcrumb>

-    <div class="toolbar-container">
-      <div id="toolbar">
-        <div class="wp-show--header-container">
+  <div class="toolbar-container">
+    <div id="toolbar">
+      <div class="wp-show--header-container">

-          <op-back-button
-            linkClass="work-packages-back-button op-back-button_mobile-full-width"
-          >
-          </op-back-button>
+        <op-back-button
+          linkClass="work-packages-back-button op-back-button_mobile-full-width"
+        >
+        </op-back-button>

-          <div class="subject-header">
-            <wp-subject></wp-subject>
-          </div>
+        <div class="subject-header">
+          <wp-subject></wp-subject>
        </div>
-        <ul id="toolbar-items" class="toolbar-items hide-when-print">
-          <li class="toolbar-item hidden-for-mobile">
-            <wp-create-button
-              [allowed]="['work_package.addChild', 'work_package.copy']"
-              [stateName$]="stateName$">
-            </wp-create-button>
-          </li>
-          <li class="toolbar-item" *ngIf="displayWatchButton">
-            <wp-watcher-button [workPackage]="workPackage"
-                               [showText]="false">
-            </wp-watcher-button>
-          </li>
-          <li class="toolbar-item hidden-for-mobile">
-            <zen-mode-toggle-button>
-            </zen-mode-toggle-button>
-          </li>
-          <li class="toolbar-item action_menu_main" id="action-show-more-dropdown-menu">
-            <button class="button dropdown-relative toolbar-icon"
-                    [attr.title]="text.full_view.button_more"
-                    wpSingleContextMenu
-                    [wpSingleContextMenu-workPackage]="workPackage">
-              <op-icon icon-classes="button--icon icon-show-more"></op-icon>
-            </button>
-          </li>
-        </ul>
+      </div>
+      <ul id="toolbar-items" class="toolbar-items hide-when-print">
+        <li class="toolbar-item hidden-for-mobile">
+          <wp-create-button
+            [allowed]="['work_package.addChild', 'work_package.copy']"
+            [stateName$]="stateName$">
+          </wp-create-button>
+        </li>
+        <li class="toolbar-item" *ngIf="displayWatchButton">
+          <wp-watcher-button [workPackage]="workPackage"
+                             [showText]="false">
+          </wp-watcher-button>
+        </li>
+        <li class="toolbar-item hidden-for-mobile">
+          <zen-mode-toggle-button>
+          </zen-mode-toggle-button>
+        </li>
+        <li class="toolbar-item action_menu_main" id="action-show-more-dropdown-menu">
+          <button class="button dropdown-relative toolbar-icon"
+                  [attr.title]="text.full_view.button_more"
+                  wpSingleContextMenu
+                  [wpSingleContextMenu-workPackage]="workPackage">
+            <op-icon icon-classes="button--icon icon-show-more"></op-icon>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="work-packages-full-view--split-container">
+    <div class="work-packages-full-view--split-left">
+      <div class="work-packages--panel-inner">
+        <wp-single-view [workPackage]="workPackage"></wp-single-view>
      </div>
    </div>
-
-    <div class="work-packages-full-view--split-container">
-      <div class="work-packages-full-view--split-left">
-        <div class="work-packages--panel-inner">
-          <wp-single-view [workPackage]="workPackage"></wp-single-view>
+    <div class="work-packages-full-view--split-right work-packages-tab-view--overflow">
+      <div class="work-packages--panel-inner">
+        <span class="hidden-for-sighted" tabindex="-1" opAutofocus [textContent]="focusAnchorLabel"></span>
+        <op-wp-tabs [workPackage]="workPackage" [view]="'full'"></op-wp-tabs>
+        <div class="work-packages-full-view--tab-breadcrumb">
+          <op-work-package-mark-notification-button
+            *ngIf="(displayNotificationsButton$ | async) && keepTab.currentTabIdentifier === 'activity'"
+            class="work-package--details-button"
+            [workPackage]="workPackage"
+            buttonClasses="-round button_no-margin"
+            data-qa-selector="mark-notification-read-button"
+          ></op-work-package-mark-notification-button>
+        </div>
+        <div class="tabcontent"
+             data-notification-selector='notification-scroll-container'
+             ui-view>
        </div>
      </div>
-      <div class="work-packages-full-view--split-right work-packages-tab-view--overflow">
-        <div class="work-packages--panel-inner">
-          <span class="hidden-for-sighted" tabindex="-1" opAutofocus [textContent]="focusAnchorLabel"></span>
-          <op-wp-tabs [workPackage]="workPackage" view="full"></op-wp-tabs>
-          <div class="work-packages-full-view--tab-breadcrumb">
-            <op-work-package-mark-notification-button
-                    *ngIf="(displayNotificationsButton$ | async) && keepTab.currentTabIdentifier === 'activity'"
-                    class="work-package--details-button"
-                    [workPackage]="workPackage"
-                    buttonClasses="-round button_no-margin"
-                    data-qa-selector="mark-notification-read-button"
-            ></op-work-package-mark-notification-button>
-          </div>
-          <div class="tabcontent"
-               data-notification-selector='notification-scroll-container'
-               ui-view>
-          </div>
-        </div>

-        <div class="work-packages-full-view--resizer hidden-for-mobile hide-when-print">
-          <wp-resizer [elementClass]="'work-packages-full-view--split-right'"
-                      [localStorageKey]="'openProject-fullViewFlexBasis'"></wp-resizer>
-        </div>
+      <div class="work-packages-full-view--resizer hidden-for-mobile hide-when-print">
+        <wp-resizer [elementClass]="'work-packages-full-view--split-right'"
+                    [localStorageKey]="'openProject-fullViewFlexBasis'"></wp-resizer>
      </div>
    </div>
+  </div>
 </div>
@@ -3,8 +3,8 @@
  data-indicator-name="wpDetails"
  *ngIf="workPackage"
 >
-    <op-wp-tabs [workPackage]="workPackage" view="split"></op-wp-tabs>
-    <div class="work-packages--details-content work-packages-tab-view--overflow" *ngIf="workPackage">
+  <op-wp-tabs [workPackage]="workPackage" [view]="'split'"></op-wp-tabs>
+  <div class="work-packages--details-content work-packages-tab-view--overflow" *ngIf="workPackage">
      <span
        class="hidden-for-sighted"
        tabindex="-1"
@@ -12,51 +12,51 @@
        [textContent]="focusAnchorLabel"
      ></span>

-      <edit-form
-        [resource]="workPackage"
-        class="work-packages--details-form"
-      >
-        <div class="work-packages--details-header">
-          <div class="work-packages--details-header-left">
-            <wp-breadcrumb
-              [workPackage]="workPackage"
-              class="work-packages--breadcrumb"
-            ></wp-breadcrumb>
-
-            <div class="wp-show--header-container">
-              <op-back-button
-                *ngIf="showBackButton()"
-                linkClass="work-packages-back-button"
-                [customBackMethod]="backToList.bind(this)"
-              ></op-back-button>
-
-              <wp-subject class="subject-header"></wp-subject>
-            </div>
-          </div>
-
-          <op-work-package-mark-notification-button
-            *ngIf="(displayNotificationsButton$ | async) && keepTab.currentTabIdentifier === 'activity'"
-            class="work-packages--details-button"
+    <edit-form
+      [resource]="workPackage"
+      class="work-packages--details-form"
+    >
+      <div class="work-packages--details-header">
+        <div class="work-packages--details-header-left">
+          <wp-breadcrumb
            [workPackage]="workPackage"
-            buttonClasses="-round"
-            data-qa-selector="mark-notification-read-button"
-          ></op-work-package-mark-notification-button>
+            class="work-packages--breadcrumb"
+          ></wp-breadcrumb>
+
+          <div class="wp-show--header-container">
+            <op-back-button
+              *ngIf="showBackButton()"
+              linkClass="work-packages-back-button"
+              [customBackMethod]="backToList.bind(this)"
+            ></op-back-button>
+
+            <wp-subject class="subject-header"></wp-subject>
+          </div>
        </div>

-        <div
-          class="work-package-details-tab"
-          data-notification-selector='notification-scroll-container'
-          ui-view
-        ></div>
-      </edit-form>
-    </div>
+        <op-work-package-mark-notification-button
+          *ngIf="(displayNotificationsButton$ | async) && keepTab.currentTabIdentifier === 'activity'"
+          class="work-packages--details-button"
+          [workPackage]="workPackage"
+          buttonClasses="-round"
+          data-qa-selector="mark-notification-read-button"
+        ></op-work-package-mark-notification-button>
+      </div>

-    <div class="work-packages--details-toolbar-container" *ngIf="workPackage">
-      <wp-details-toolbar [workPackage]="workPackage"></wp-details-toolbar>
-    </div>
+      <div
+        class="work-package-details-tab"
+        data-notification-selector='notification-scroll-container'
+        ui-view
+      ></div>
+    </edit-form>
+  </div>

-    <div class="work-packages--details--resizer hidden-for-mobile hide-when-print">
-      <wp-resizer [elementClass]="'work-packages-partitioned-page--content-right'"
-                  [localStorageKey]="'openProject-splitViewFlexBasis'"></wp-resizer>
-    </div>
+  <div class="work-packages--details-toolbar-container" *ngIf="workPackage">
+    <wp-details-toolbar [workPackage]="workPackage"></wp-details-toolbar>
+  </div>
+
+  <div class="work-packages--details--resizer hidden-for-mobile hide-when-print">
+    <wp-resizer [elementClass]="'work-packages-partitioned-page--content-right'"
+                [localStorageKey]="'openProject-splitViewFlexBasis'"></wp-resizer>
+  </div>
 </div>
@@ -33,7 +33,7 @@

 .attributes-group--header
  @include grid-block
-  margin:  0 0 0.5rem 0
+  margin: 0 0 0.5rem 0
  border-bottom: 1px solid #ddd
  align-items: flex-end

@@ -61,6 +61,13 @@
  .button
    margin: 0 0 8px 0

+.attributes-group--icon-indented-text
+  display: grid
+  margin-top: 1rem
+  grid-template-columns: auto auto 1fr
+  column-gap: 8px
+
+
 // HACK. TODO: Remove H3 element rules in various places.
 .attributes-group--header-text,
 #content h3.attributes-group--header-text