OpenSlides/client/src/app/shared/shared.module.ts
Sean Engelhardt 15e9ea898b Add virtual scrolling to tables
Replaces most mat-tables with tables using the NGrid library, supporting
extremly performant virtual scrolling.

The ListViewBaseComponent have been extremly simplified.
All list-view code is now mich shorter and way less repitative

The group list and the workflow list have not been altered.

**Works:**
- Fast virtual Scrolling without pagination
- Click Filter
- Search Filter
- Sorting
- Export filtered values (using click filters)
- Export sorted values in correct order
- Right-Click-new-tab
- Hiding/showing columns by permission and screen size
- Multi select
- Auto Updates in MultiSelectMode keep the correct items selected
- OsHeadBar shows the correct amount of data
- Restore scroll position after navigation
- Shared-Table Component
- Clean-Up base-list-view
- Motion List
- Motion Block List
- Motion Block Detail
- User List
- Agnnda List
- Assignment List
- MediaFile List
- Tag List

**TODO:**
- Formulate filter predicates
- LOS Badge autoupdate (change detection)
- Better ellipses in lists
- Horrizontal Scrolling, if the screen get's too small.
- Issues in the change detection
- Some Layouting

**BUG:**
- Using the seach filter prevents the sorting from working.
- NGrid currently has no way to get the filtered list
  using search filter. Thus, search-filtered list cannot
  be exported.
2019-06-14 11:18:54 +02:00

281 lines
10 KiB
TypeScript

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule, DecimalPipe } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
// MaterialUI modules
import {
MatButtonModule,
MatCheckboxModule,
MatToolbarModule,
MatCardModule,
MatInputModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatSidenavModule,
MatSnackBarModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
MatDatepickerModule,
MatNativeDateModule,
DateAdapter,
MatIconModule,
MatButtonToggleModule,
MatBadgeModule,
MatStepperModule,
MatTabsModule,
MatBottomSheetModule,
MatSliderModule,
MatDividerModule
} from '@angular/material';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipsModule } from '@angular/material';
import { MatRadioModule } from '@angular/material';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { MatDialogModule } from '@angular/material/dialog';
import { MatListModule } from '@angular/material/list';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatMenuModule } from '@angular/material/menu';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { CdkTreeModule } from '@angular/cdk/tree';
import { ScrollingModule } from '@angular/cdk/scrolling';
// ngx-translate
import { TranslateModule } from '@ngx-translate/core';
// ngx-file-drop
import { FileDropModule } from 'ngx-file-drop';
// TinyMCE
import { EditorModule } from '@tinymce/tinymce-angular';
// directives
import { PermsDirective } from './directives/perms.directive';
import { DomChangeDirective } from './directives/dom-change.directive';
import { AutofocusDirective } from './directives/autofocus.directive';
// PblNgrid. Cleanup Required.
import { PblNgridModule } from '@pebula/ngrid';
import { PblNgridMaterialModule } from '@pebula/ngrid-material';
// components
import { HeadBarComponent } from './components/head-bar/head-bar.component';
import { LegalNoticeContentComponent } from './components/legal-notice-content/legal-notice-content.component';
import { PrivacyPolicyContentComponent } from './components/privacy-policy-content/privacy-policy-content.component';
import { SearchValueSelectorComponent } from './components/search-value-selector/search-value-selector.component';
import { OpenSlidesDateAdapter } from './date-adapter';
import { PromptDialogComponent } from './components/prompt-dialog/prompt-dialog.component';
import { SortingListComponent } from './components/sorting-list/sorting-list.component';
import { SortingTreeComponent } from './components/sorting-tree/sorting-tree.component';
import { ChoiceDialogComponent } from './components/choice-dialog/choice-dialog.component';
import { SortFilterBarComponent } from './components/sort-filter-bar/sort-filter-bar.component';
import { SortBottomSheetComponent } from './components/sort-filter-bar/sort-bottom-sheet/sort-bottom-sheet.component';
import { FilterMenuComponent } from './components/sort-filter-bar/filter-menu/filter-menu.component';
import { LogoComponent } from './components/logo/logo.component';
import { C4DialogComponent, CopyrightSignComponent } from './components/copyright-sign/copyright-sign.component';
import { ProjectorButtonComponent } from './components/projector-button/projector-button.component';
import { ProjectionDialogComponent } from './components/projection-dialog/projection-dialog.component';
import { ResizedDirective } from './directives/resized.directive';
import { MetaTextBlockComponent } from './components/meta-text-block/meta-text-block.component';
import { OpenSlidesTranslateModule } from '../core/translate/openslides-translate-module';
import { ProjectorComponent } from './components/projector/projector.component';
import { SlideContainerComponent } from './components/slide-container/slide-container.component';
import { CountdownTimeComponent } from './components/contdown-time/countdown-time.component';
import { MediaUploadContentComponent } from './components/media-upload-content/media-upload-content.component';
import { PrecisionPipe } from './pipes/precision.pipe';
import { SpeakerButtonComponent } from './components/speaker-button/speaker-button.component';
import { GridLayoutComponent } from './components/grid-layout/grid-layout.component';
import { TileComponent } from './components/tile/tile.component';
import { BlockTileComponent } from './components/block-tile/block-tile.component';
import { IconContainerComponent } from './components/icon-container/icon-container.component';
import { ListViewTableComponent } from './components/list-view-table/list-view-table.component';
/**
* Share Module for all "dumb" components and pipes.
*
* These components don not import and inject services from core or other features
* in their constructors.
*
* Should receive all data though attributes in the template of the component using them.
* No dependency to the rest of our application.
*/
@NgModule({
imports: [
CommonModule,
FormsModule,
MatFormFieldModule,
MatSelectModule,
ReactiveFormsModule,
MatAutocompleteModule,
MatButtonModule,
MatCheckboxModule,
MatToolbarModule,
MatDatepickerModule,
MatNativeDateModule,
MatCardModule,
MatInputModule,
MatTableModule,
MatSortModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatSidenavModule,
MatListModule,
MatExpansionModule,
MatMenuModule,
MatDialogModule,
MatSnackBarModule,
MatChipsModule,
MatBottomSheetModule,
MatTooltipModule,
MatBadgeModule,
// TODO: there is an error with missing icons
// we either wait or include a fixed version manually (dirty)
// https://github.com/google/material-design-icons/issues/786
MatIconModule,
MatRadioModule,
MatButtonToggleModule,
MatStepperModule,
MatTabsModule,
MatSliderModule,
MatDividerModule,
OwlDateTimeModule,
OwlNativeDateTimeModule,
DragDropModule,
OpenSlidesTranslateModule.forChild(),
RouterModule,
NgxMatSelectSearchModule,
FileDropModule,
EditorModule,
CdkTreeModule,
ScrollingModule,
PblNgridModule,
PblNgridMaterialModule
],
exports: [
FormsModule,
MatAutocompleteModule,
MatFormFieldModule,
MatSelectModule,
ReactiveFormsModule,
MatButtonModule,
MatCheckboxModule,
MatToolbarModule,
MatCardModule,
MatDatepickerModule,
MatInputModule,
MatTableModule,
MatSortModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatSidenavModule,
MatListModule,
MatExpansionModule,
MatMenuModule,
MatDialogModule,
MatSnackBarModule,
MatChipsModule,
MatTooltipModule,
MatTabsModule,
MatBadgeModule,
MatIconModule,
MatRadioModule,
MatButtonToggleModule,
MatStepperModule,
MatSliderModule,
MatDividerModule,
DragDropModule,
NgxMatSelectSearchModule,
FileDropModule,
TranslateModule,
OpenSlidesTranslateModule,
PermsDirective,
DomChangeDirective,
AutofocusDirective,
HeadBarComponent,
SearchValueSelectorComponent,
LegalNoticeContentComponent,
PrivacyPolicyContentComponent,
PromptDialogComponent,
SortingListComponent,
EditorModule,
SortingTreeComponent,
SortFilterBarComponent,
LogoComponent,
CopyrightSignComponent,
C4DialogComponent,
ProjectorButtonComponent,
ProjectionDialogComponent,
ResizedDirective,
MetaTextBlockComponent,
ProjectorComponent,
SlideContainerComponent,
OwlDateTimeModule,
OwlNativeDateTimeModule,
CountdownTimeComponent,
MediaUploadContentComponent,
PrecisionPipe,
SpeakerButtonComponent,
GridLayoutComponent,
TileComponent,
BlockTileComponent,
ScrollingModule,
IconContainerComponent,
SpeakerButtonComponent,
PblNgridModule,
PblNgridMaterialModule,
ListViewTableComponent
],
declarations: [
PermsDirective,
DomChangeDirective,
AutofocusDirective,
HeadBarComponent,
LegalNoticeContentComponent,
PrivacyPolicyContentComponent,
SearchValueSelectorComponent,
PromptDialogComponent,
SortingListComponent,
SortingTreeComponent,
ChoiceDialogComponent,
SortFilterBarComponent,
SortBottomSheetComponent,
FilterMenuComponent,
LogoComponent,
CopyrightSignComponent,
C4DialogComponent,
ProjectorButtonComponent,
ProjectionDialogComponent,
ResizedDirective,
MetaTextBlockComponent,
ProjectorComponent,
SlideContainerComponent,
CountdownTimeComponent,
MediaUploadContentComponent,
PrecisionPipe,
SpeakerButtonComponent,
GridLayoutComponent,
TileComponent,
BlockTileComponent,
IconContainerComponent,
ListViewTableComponent
],
providers: [
{ provide: DateAdapter, useClass: OpenSlidesDateAdapter },
SearchValueSelectorComponent,
SortingListComponent,
SortingTreeComponent,
SortFilterBarComponent,
SortBottomSheetComponent,
DecimalPipe
],
entryComponents: [SortBottomSheetComponent, C4DialogComponent]
})
export class SharedModule {}