[AC-974] [Technical Dependency] Refactor Vault Tables (#4967)

* [EC-974] feat: scaffold new vault-items component * [EC-974] feat: add basic mocked data to story * [EC-974] feat: add initial table version * [EC-974] chore: split rows into separate components * [EC-974] chore: rename item row to cipher row * [EC-974] feat: create common vault item interface * [EC-974] feat: use cdk virtual scrolling * [EC-974] fix: tweak `itemSize` * [EC-974] chore: move vault-items component to app/vault folder * [EC-974] feat: initial support for extra column * [EC-974] feat: start adding org badge Having issues with modules import * [EC-974] feat: add working owner column on collections row * [EC-974] feat: add owner to ciphers * [EC-974] fix: org name badge bugs when reused * [EC-974] feat: fix and translate columns * [EC-974] feat: allow collections to be non-editable * [EC-974] feat: use data source * [EC-974] fix: remove profile name from vault items * [EC-974] feat: add events * [EC-974] feat: add support for copy event * [EC-974] feat: add support for collections column * [EC-974] feat: add support for group badges * [EC-974] chore: rename for consistency * [EC-974] feat: change story to use template * [EC-974] feat: add support for launching * [EC-974] feat: add support for attachements * [EC-974] feat: add stories for all use-cases * [EC-974] feat: add support for cloning * [EC-974] feat: add support for moving to organization * [EC-974] feat: add support for editing cipher collections * [EC-974] feat: add support for event logs * [EC-974] feat: add support for trash/delete/restore * [EC-974] feat: add support for editing collections * [EC-974] feat: add support for access and delete collections * [EC-974] feat: don't show menu if it's empty * [EC-974] feat: initial buggy implementation of selection * [EC-974] feat: implement bulk move * [EC-974] feat: add support for bulk moving to org * [EC-974] feat: add support for bulk restore * [EC-974] feat: add support for bulk delete * [EC-974] feat: add ability to disable the table * [EC-974] feat: create new filter function based on routed model * [EC-974] wip: start replacing vault items component * [EC-974] feat: add support for fetching ciphers * [EC-974] feat: hide trash by default * [EC-974] feat: add support for the rest of the data * [EC-974] feat: implement organization filtering using org badge * [EC-974] feat: fix navigation to "my vault" * [EC-974] feat: don't show bulk move options when filtering on org items * [EC-974] feat: prepare for disabling table * [EC-974] fix: add missing router link to collections * [EC-974] feat: connect all outputs * [EC-974] fix: list not properly refreshing after delete * [EC-974] feat: limit selection to top 500 items * [EC-974] feat: implement refresh tracker * [EC-974] feat: use refresh tracker to disable vault items * [EC-974] feat: add empty list message * [AC-974] feat: add initial load with spinner and fix empty -> show list bug * [EC-974] feat: replace action promise with simple loading boolean * [EC-974] feat: refactor individual vault header * [EC-974] feat: cache and make observables long lived * [EC-974] feat: implement searching * [EC-974] feat: add support for showing collections * [EC-974] feat: add ciphers to org vault list * [EC-974] feat: show group column * [EC-974] feat: tweak settings for org vault * [EC-974] feat: implement search using query params * [EC-974] feat: add support for events that are common with individual vault * [EC-974] feat: add support for all events * [EC-974] feat: add support for empty list message and no permission message * [EC-974] feat: always show table * [EC-974] feat: fix layout issues due to incorrect row height * [EC-974] feat: disable list if empty * [EC-974] feat: improve sync handling * [EC-974] feat: improve initial loading sequence * [EC-974] feat: improve initial load sequence in org vault * [EC-974] refactor: simplify and optimize data fetching * [EC-974] feat: use observables from org service * [EC-974] feat: refactor org vault header * [EC-974] fix: data not refreshing properly * [EC-974] fix: avoid collection double fetching * [EC-974] chore: clean up refresh tracker * [EC-974] chore: clean up old vault-items components * [EC-974] chore: clean up old code in vault component * [EC-974] fix: reduce rows in story The story ends up too big for chromatic. * [EC-974] docs: tweak and typo fixes of asyncToObservable docs comment * [EC-974] fix: `attachements` typo * [EC-974] chore: remove review question comment * [EC-974] chore: remove unused `securityCode` if statement * [EC-974] fix: use `takeUntill` for legacy dialogs * [EC-974] fix: use CollectionDialogTabType instead of custom strings * [EC-974] fix: copy implementation * [EC-974] fix: use `useTotp` to check for premium features * [EC-974] fix: use `tw-sr-only` * [EC-974] chore: remove unecessary eslint disable * [EC-974] fix: clarify vault item event naming * [EC-974] fix: remove `new` from `app-new-vault-items` * [EC-974] fix: collection row not disabled during loading * [EC-974] chore: simplify router links without path changes * [EC-974] feat: invert filter function to get rid of `cipherPassesFilter` * [EC-974] fix: move `NestingDelimiter` to collection view Nesting is currently only a presentational construct, and the concept does not exist in our domain. * [EC-974] fix: org vault header not updating when switching org * [EC-974] fix: table sizing jumping around * [EC-974] fix: list not refreshing after restoring item * [EC-974] fix: re-add missing unassigned collection * [EC-974] fix don't show new item button in unassigned collection * [EC-974] fix: navigations always leading to individual vault * [EC-974] fix: remove checkbox when collections are not editable * [EC-974] fix: null reference blocking collections from refreshing after delete * [EC-974] fix: don't show checbox for collections that user does not have permissions to delete * [EC-974] fix: navigate away from deleted folder * [EC-974] chore: clean up un-used output * [EC-974] fix: org badge changing color randomly * [EC-974] fix: lint issues after merge * [EC-974] fix: lower amount of ciphers in story chromatic doesn't like large snapshots * [EC-974] fix: "all collections" not taking `organizationId` filter into account * [EC-974] fix: make sure unassigned appears in table too * [EC-974] feat: add unassigned to storybook * [EC-974] fix: forced row height not being applied properly * [EC-974] fix: hopefully fix table jumping once and for all * [EC-974] fix: attachemnts getting hidden * [EC-974] feat: extract collection editable logic to parent component * [EC-974] feat: separately track editable items * [EC-974] feat: optimize permission checks * [EC-974] fix: bulk menu hidden on chrome :lolcry: * [EC-974] fix: don't show groups column if org doesnt use groups * [EC-974] feat: make entire row clickable * [EC-974] fix: typo resulting in non-editable collections
2025-12-25 20:53:22 +00:00 · 2023-04-13 20:48:29 +02:00
parent 5f26e58538
commit 0bc6add5c3
45 changed files with 3011 additions and 1775 deletions
--- a/apps/web/src/app/vault/components/vault-items/vault-items.component.html
+++ b/apps/web/src/app/vault/components/vault-items/vault-items.component.html
@@ -0,0 +1,105 @@
+<cdk-virtual-scroll-viewport [itemSize]="RowHeight" scrollWindow class="tw-pb-8">
+  <bit-table [dataSource]="dataSource" layout="fixed">
+    <ng-container header>
+      <tr>
+        <th bitCell class="tw-w-24 tw-whitespace-nowrap" colspan="2">
+          <input
+            class="tw-mr-2"
+            type="checkbox"
+            bitCheckbox
+            id="checkAll"
+            [disabled]="disabled || isEmpty"
+            (change)="$event ? toggleAll() : null"
+            [checked]="selection.hasValue() && isAllSelected"
+          />
+          <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="checkAll">{{
+            "all" | i18n
+          }}</label>
+        </th>
+        <th bitCell [class]="showExtraColumn ? 'tw-w-2/5' : 'tw-w-full'">{{ "name" | i18n }}</th>
+        <th bitCell class="tw-w-3/5" *ngIf="showOwner">{{ "owner" | i18n }}</th>
+        <th bitCell class="tw-w-3/5" *ngIf="showCollections">{{ "collections" | i18n }}</th>
+        <th bitCell class="tw-w-3/5" *ngIf="showGroups">{{ "groups" | i18n }}</th>
+        <th bitCell class="tw-w-12 tw-text-right">
+          <button
+            [disabled]="disabled || isEmpty"
+            [bitMenuTriggerFor]="headerMenu"
+            bitIconButton="bwi-ellipsis-v"
+            size="small"
+            type="button"
+            appA11yTitle="{{ 'options' | i18n }}"
+          ></button>
+          <bit-menu #headerMenu>
+            <button *ngIf="showBulkMove" type="button" bitMenuItem (click)="bulkMoveToFolder()">
+              <i class="bwi bwi-fw bwi-folder" aria-hidden="true"></i>
+              {{ "moveSelected" | i18n }}
+            </button>
+            <button
+              *ngIf="showBulkMove"
+              type="button"
+              bitMenuItem
+              (click)="bulkMoveToOrganization()"
+            >
+              <i class="bwi bwi-fw bwi-arrow-circle-right" aria-hidden="true"></i>
+              {{ "moveSelectedToOrg" | i18n }}
+            </button>
+            <button *ngIf="showBulkTrashOptions" type="button" bitMenuItem (click)="bulkRestore()">
+              <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
+              {{ "restoreSelected" | i18n }}
+            </button>
+            <button type="button" bitMenuItem (click)="bulkDelete()">
+              <span class="tw-text-danger">
+                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
+                {{ (showBulkTrashOptions ? "permanentlyDeleteSelected" : "deleteSelected") | i18n }}
+              </span>
+            </button>
+          </bit-menu>
+        </th>
+      </tr>
+    </ng-container>
+    <ng-template body let-rows$>
+      <ng-container *cdkVirtualFor="let item of rows$">
+        <tr
+          *ngIf="item.collection"
+          bitRow
+          appVaultCollectionRow
+          alignContent="middle"
+          [disabled]="disabled"
+          [collection]="item.collection"
+          [showOwner]="showOwner"
+          [showCollections]="showCollections"
+          [showGroups]="showGroups"
+          [organizations]="allOrganizations"
+          [groups]="allGroups"
+          [canDeleteCollection]="canDeleteCollection(item.collection)"
+          [canEditCollection]="canEditCollection(item.collection)"
+          [checked]="selection.isSelected(item)"
+          (checkedToggled)="selection.toggle(item)"
+          (onEvent)="event($event)"
+        ></tr>
+        <tr
+          *ngIf="item.cipher"
+          bitRow
+          appVaultCipherRow
+          alignContent="middle"
+          [disabled]="disabled"
+          [cipher]="item.cipher"
+          [showOwner]="showOwner"
+          [showCollections]="showCollections"
+          [showGroups]="showGroups"
+          [showPremiumFeatures]="showPremiumFeatures"
+          [useEvents]="useEvents"
+          [cloneable]="
+            (item.cipher.organizationId && cloneableOrganizationCiphers) ||
+            item.cipher.organizationId == null
+          "
+          [organizations]="allOrganizations"
+          [collections]="allCollections"
+          [checked]="selection.isSelected(item)"
+          (checkedToggled)="selection.toggle(item)"
+          (onEvent)="event($event)"
+        ></tr>
+      </ng-container>
+    </ng-template>
+  </bit-table>
+</cdk-virtual-scroll-viewport>