nuxeo-development-framework 3.1.1 → 3.1.2

package/src/lib/components/file-manger/file-manger.module.ts

@@ -0,0 +1,154 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SidepanelComponent } from './components/sidepanel/sidepanel.component';
+import { CopyComponent } from './components/copy/copy.component';
+import { DeleteComponent } from './components/delete/delete.component';
+import { MoveComponent } from './components/move/move.component';
+import { RenameComponent } from './components/rename/rename.component';
+import { AddToCollectionComponent } from './components/add-to-collection/add-to-collection.component';
+import { TransferDocComponent } from './components/transfer-doc/transfer-doc.component';
+import { LoanRequestComponent } from './components/loan-request/loan-request.component';
+import { CreateDirectoryComponent } from './components/create-directory/create-directory.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { TranslateModule } from '@ngx-translate/core';
+import { LibrarySharedModule } from '../../shared/libraryShared.module';
+import { DxPopupModule, DxScrollViewModule, DxButtonModule, DxTemplateModule, DxTextBoxModule, DxFormModule, DxTreeViewModule } from 'devextreme-angular';
+import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DynamicFormModule } from '../dynamic-form/dynamic-form.module';
+import { DirectiveModule } from '../../directive/directive.module';
+import { AvatarModule } from '../avatar/avatar.module';
+import { CardModule } from '../card/card.module';
+import { CommentsModule } from '../comments/comments.module';
+import { CorrespondenceRelationModule } from '../correspondence-relation/correspondence-relation.module';
+import { CtsTagsModule } from '../cts-tags/cts-tags.module';
+import { DocumentsModule } from '../documents/documents.module';
+import { ViewerLogModule } from '../viewer-log/viewer-log.module';
+import { CreateModalComponent } from './components/create-modal/create-modal.component';
+import { CreationTypeComponent } from './components/creation-type/creation-type.component';
+import { FolderModalComponent } from './components/folder-modal/folder-modal.component';
+import { PublishDialogComponent } from './components/publish-dialog/publish-dialog.component';
+import { ScanModalComponent } from './components/scan-modal/scan-modal.component';
+import { ShareDialogComponent } from './components/share-dialog/share-dialog.component';
+import { TemplateModalComponent } from './components/template-modal/template-modal.component';
+import { UpdateModalComponent } from './components/update-modal/update-modal.component';
+import { DynamicFieldsRendererModule } from '../dynamic-fields-renderer/dynamic-fields-renderer.module';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { SelectUsersByDepartmentModule } from '../select-users-by-department/select-users-by-department.module';
+import { PipesModule } from '../../pipes/pipes.module';
+import { DynamicTabsModule } from '../dynamic-tabs/dynamic-tabs.module';
+import { ActivitiesLogModule } from '../activities-log/activities-log.module';
+import { SharedServicesModule } from '../../shared-services/shared-services.module';
+import { ConfirmationDialogModule } from '../confirmation-dialog/confirmation-dialog.module';
+import { PermissionsModule } from '../permissions/permissions.module';
+import { UserModule } from '../user/user.module';
+import { MutipleDynamicFormViewerModule } from '../mutiple-dynamic-form-viewer/mutiple-dynamic-form-viewer.module';
+
+// -----
+import { BrowserTransferStateModule } from '@angular/platform-browser';
+import { AttachmentModalModule } from '../attachment-modal/attachment-modal.module';
+import { ClipboardComponent } from './components/clipboard/clipboard.component';
+import { DisplaySuitableIconModule } from '../display-suitable-icon/display-suitable-icon.module';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+
+@NgModule({
+  declarations: [
+    SidepanelComponent,
+    CopyComponent,
+    DeleteComponent,
+    MoveComponent,
+    RenameComponent,
+    AddToCollectionComponent,
+    TransferDocComponent,
+    LoanRequestComponent,
+    CreateDirectoryComponent,
+    CreateModalComponent,
+    CreationTypeComponent,
+    FolderModalComponent,
+    PublishDialogComponent,
+    ScanModalComponent,
+    ShareDialogComponent,
+    TemplateModalComponent,
+    UpdateModalComponent,
+    ClipboardComponent
+  ],
+  imports: [
+    CommonModule,
+    MatIconModule,
+    DynamicFormModule,
+    FormsModule,
+    ReactiveFormsModule,
+    LibrarySharedModule,
+    TranslateModule,
+    DocumentsModule,
+    DirectiveModule,
+    DxPopupModule,
+    DxScrollViewModule,
+    DxiToolbarItemModule,
+    DxButtonModule,
+    DxTemplateModule,
+    DxTextBoxModule,
+    DxFormModule,
+    NgSelectModule,
+    CommentsModule,
+    CardModule,
+    DxTreeViewModule,
+    ViewerLogModule,
+    CtsTagsModule,
+    MatDialogModule,
+    MatTooltipModule,
+    CorrespondenceRelationModule,
+    AvatarModule,
+    DynamicFieldsRendererModule,
+    MatProgressSpinnerModule,
+    SelectUsersByDepartmentModule,
+    PipesModule,
+    DynamicTabsModule,
+    ActivitiesLogModule,
+    SharedServicesModule,
+    ConfirmationDialogModule,
+    PermissionsModule,
+    UserModule,
+    MutipleDynamicFormViewerModule,
+    BrowserTransferStateModule,
+    AttachmentModalModule,
+    FormsModule,
+    DisplaySuitableIconModule,
+    MatProgressBarModule,
+    MatCheckboxModule
+  ],
+  exports: [
+    SidepanelComponent,
+    CopyComponent,
+    DeleteComponent,
+    MoveComponent,
+    RenameComponent,
+    AddToCollectionComponent,
+    TransferDocComponent,
+    LoanRequestComponent,
+    CreateDirectoryComponent,
+    CreateModalComponent,
+    CreationTypeComponent,
+    FolderModalComponent,
+    PublishDialogComponent,
+    ScanModalComponent,
+    ShareDialogComponent,
+    TemplateModalComponent,
+    UpdateModalComponent,
+    DxPopupModule,
+    DxScrollViewModule,
+    DxiToolbarItemModule,
+    DxButtonModule,
+    DxTemplateModule,
+    DxTextBoxModule,
+    DxFormModule,
+    DxTreeViewModule,
+    ClipboardComponent
+  ]
+})
+export class FileMangerModule { }

package/src/lib/components/filter/filter/filter.component.html

@@ -0,0 +1,79 @@
+<div class="filter-wrapper">
+    <div class="filter-title">
+        <!-- {{filterTitle | translate}} -->
+    </div>
+    <div class="iner-filter-wrapper" *ngIf="filterForm">
+        <form [formGroup]="filterForm">
+            <div class="single-control-wrapper" *ngFor="let field of fields">
+
+                <div class="control" *ngIf="field.type === 'text'">
+                    <app-dynamic-form-textitem
+                    [label]="field.label"
+                    [formControlName]="field.formControlName"
+                    placeholder="{{ 'CREATE.PLACE_HOLDER' | translate }} {{
+                        field.placeholder | translate
+                      }}"
+                  >
+                  </app-dynamic-form-textitem>
+                </div>
+
+                <div class="control" *ngIf="field.type === 'dropdown'">
+                    <app-dynamic-form-vocabulary-item
+                    [shwoAllValues]="false"
+                    [label]="field.label"
+                    [bindLabel]="field.bindLabel"
+                    [bindValue]="field.bindValue"
+                    [placeholder]="field.placeholder | translate"
+                    [multiple]="field.multiple"
+                    [searchable]="field.searchable"
+                    [closeOnSelect]="field.closeOnSelect"
+                    [hideSelectedItems]="field.hideSelectedItems"
+                    [vocabularyType]="field.vocabularyType"
+                    [formControlName]="field.formControlName"
+                  >
+                  </app-dynamic-form-vocabulary-item>
+                </div>
+
+                <div class="control" *ngIf="field.type === 'rang'">
+                    <cts-dynamic-form-hijri-dateitem [label]="field.label" [formControlName]="field.formControlName"[range]="true" [vertical]="false" >
+                    </cts-dynamic-form-hijri-dateitem>
+                </div>
+
+                <div  class="control" *ngIf="field.type === 'department'">
+                    <app-dynamic-form-department
+                    [label]="field.label"
+                    placeholder="{{ 'CREATE.PLACE_HOLDER' | translate }} {{
+                        field.placeholder | translate
+                    }}"
+                    [formControlName]="field.formControlName"
+                  >
+                  </app-dynamic-form-department>
+                </div>
+
+                <div  class="control" *ngIf="field.type === 'toggle'">
+                    <cts-dynamic-form-slide-toggleitem
+                    [label]="field.label"
+                    [formControlName]="field.formControlName"
+                  ></cts-dynamic-form-slide-toggleitem>
+                </div>
+
+                <div   class="control" *ngIf="field.type === 'date'">
+                    <cts-dynamic-form-hijri-dateitem
+                    [formControlName]="field.formControlName"
+                    [label]="field.label"
+                  >
+                  </cts-dynamic-form-hijri-dateitem>
+                </div>
+  
+
+            </div>
+
+        </form>
+           
+    </div>
+    <div class="form-actions">
+        <button class="my-button mx-2" type="button" (click)="filter()"> {{'FILTER' | translate}}</button>
+        <button class="my-button reset mx-2" type="button" (click)="reset()"> {{'reset' | translate}}</button>
+    </div>
+</div>
+

package/src/lib/components/filter/filter/filter.component.md

@@ -0,0 +1,68 @@
+
+# Filter Fields JSON
+
+```json
+ [
+    {
+      "type": "text",
+      "label": "CREATE.SUBJECT",
+      "placeholder": "CREATE.SUBJECT",
+      "formControlName": "subject",
+      "queryParamName": "Correspondence_subject"
+    },
+    {
+      "type": "text",
+      "label": "CREATE.EXTERNAL_REFR_NUMBER",
+      "placeholder": "CREATE.EXTERNAL_REFR_NUMBER",
+      "formControlName": "externalNumber",
+      "queryParamName": "Correspondence_externalCorrespondenceNumber"
+    },
+    {
+      "type": "text",
+      "label": "CREATE.REFR_NUMBER",
+      "placeholder": "CREATE.REFR_NUMBER",
+      "formControlName": "refrenceNumber",
+      "queryParamName": "Correspondence_referenceNumber"
+    },
+    {
+      "type": "dropdown",
+      "label": "CREATE.STATE",
+      "bindLabel": "label",
+      "bindValue": "id",
+      "placeholder": "VOCABULARY.SELECT_ITEM",
+      "multiple": false,
+      "searchable": false,
+      "closeOnSelect": true,
+      "hideSelectedItems": false,
+      "vocabularyType": "VOC_CorrespondenceLifeCycle",
+      "formControlName": "state",
+      "queryParamName": "system_currentLifeCycleState"
+    },
+    {
+      "type": "dropdown",
+      "label": "CREATE.SCRECY_LEVEL",
+      "bindLabel": "label",
+      "bindValue": "id",
+      "placeholder": "VOCABULARY.SELECT_ITEM",
+      "multiple": false,
+      "searchable": false,
+      "closeOnSelect": true,
+      "hideSelectedItems": false,
+      "vocabularyType": "VOC_CorrespondenceSecrecyLevel",
+      "formControlName": "secrecyLevel",
+      "queryParamName": "Correspondence_secrecyLevel"
+    },
+    {
+      "type": "date",
+      "label": "CREATE.FROM_DATE",
+      "formControlName": "fromDate",
+      "queryParamName": "dublincore_created_min"
+    },
+    {
+      "type": "date",
+      "label": "CREATE.TO_DATE",
+      "formControlName": "toDate",
+      "queryParamName": "dublincore_created_max"
+    }
+  ]
+ ```

package/src/lib/components/filter/filter/filter.component.scss

@@ -0,0 +1,50 @@
+@import "../../../assets/scss/myApp.scss";
+
+.filter-wrapper{
+    .filter-title{
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 15px;
+    }
+    .iner-filter-wrapper{
+        height: 320px;
+        overflow: auto;
+        scrollbar-color: $gray-200 transparent !important;
+        scrollbar-width: thin !important;
+        padding: 15px 15px 0px;
+        .single-control-wrapper{
+            margin-bottom: 15px;
+            .control{
+
+            }
+        }
+
+    }
+    .form-actions{
+      //  margin-top: 50px;
+        display: flex;
+        justify-content: flex-start;
+        align-content: center;
+        padding: 10px 15px;
+        .filter{
+            border: none;
+            background-color: transparent;
+            font-weight: bold;
+            width: 80px;
+            height: 40px;
+            background-image: $sideBar-gradient;
+            color: $white;
+            border-radius: 5px;
+        }
+        .reset{
+            // border: none;
+            // background-color: transparent;
+            // font-weight: bold;
+            // width: 80px;
+            // height: 40px;
+            // // background-image: $sideBar-gradient;
+            // // color: $white;
+            // border-radius: 5px;
+        }
+    }
+}

package/src/lib/components/filter/filter/filter.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterComponent } from './filter.component';
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/filter/filter/filter.component.ts

@@ -0,0 +1,81 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+/**
+ * A component for filtering that can be generated dynamically by providing inputs object,
+ * which will generate a form for filtering and emit the form value on filtering.
+ *
+ * @title
+ * Filter Component
+ *
+ * @example
+ * <cts-filter [fields]="filterFields" (onFiltering)="filterData($event)"></cts-filter>
+ */
+@Component({
+  selector: 'cts-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+export class FilterComponent implements OnInit {
+  /** Fields array */
+  @Input() fields = [];
+  /** Filter title */
+  @Input() filterTitle = 'Filter';
+  /** Emits values on filter button click */
+  @Output() onFiltering = new EventEmitter();
+  filterForm: FormGroup;
+  constructor(private formBuilder: FormBuilder) {
+
+  }
+
+  ngOnInit(): void {
+    this.initiateForm();
+    let data = JSON.parse(sessionStorage.getItem('dataSource'))
+    this.filterForm.patchValue({
+      subject: data?.Correspondence_subject,
+      externalNumber: data?.Correspondence_externalCorrespondenceNumber,
+      from: data?.Correspondence_from,
+      refrenceNumber: data?.Correspondence_referenceNumber,
+      secrecyLevel: data?.Correspondence_secrecyLevel,
+      to: data?.Correspondence_to,
+      toDate: data?.dublincore_created_max,
+      fromDate: data?.dublincore_created_min,
+      state: data?.system_currentLifeCycleState
+    });
+  }
+
+  initiateForm() {
+    let controls = {};
+    this.fields.map(field => {
+      controls[field.formControlName] = this.formBuilder.control('')
+    })
+    this.filterForm = this.formBuilder.group(controls);
+  }
+
+  constructSubmission(param: boolean = true) {
+    let submisionObject = {};
+    this.fields.map(field => {
+      if (field.type === 'rang') {
+        submisionObject[field.minQueryParamName] = this.filterForm.value[field.formControlName] ? this.filterForm.value[field.formControlName].from : null;
+        submisionObject[field.maxQueryParamName] = this.filterForm.value[field.formControlName] ? this.filterForm.value[field.formControlName].to : null;
+      } else {
+        submisionObject[field.queryParamName] = this.filterForm.value[field.formControlName] ? this.filterForm.value[field.formControlName] : '';
+      }
+    });
+    if (param)
+      sessionStorage.setItem('dataSource', JSON.stringify(submisionObject));
+    this.onFiltering.emit(submisionObject);
+    console.log(submisionObject);
+  }
+
+  filter() {
+    this.constructSubmission();
+  }
+
+  reset() {
+    this.filterForm.reset();
+    sessionStorage.removeItem('dataSource');
+    this.constructSubmission(false);
+  }
+}
+

package/src/lib/components/filter/filter.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FilterComponent } from './filter/filter.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { DynamicFormModule } from '../dynamic-form/dynamic-form.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+/**
+ * @title
+ * Filter Module
+ */
+@NgModule({
+  declarations: [
+    FilterComponent
+  ],
+  imports: [
+    CommonModule,
+    TranslateModule ,
+    DynamicFormModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  exports:[
+    FilterComponent
+  ]
+})
+export class FilterModule { }

package/src/lib/components/hijri-gregorian-datepicker/hijri-gregorian-datepicker/gregorian-datepicker/gregorian-date-picker.component.scss

@@ -0,0 +1,67 @@
+.date-input-container {
+  position: relative;
+  .date-input-wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 999999;
+  }
+}
+.hijriInput {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.input-filled{
+  border-color: #1a96c6 !important;
+ }
+ 
+.ngb-dp-weekday {
+  width: 2.1rem !important;
+}
+
+.custom-day {
+  text-align: center;
+  padding: 0.185rem 0.25rem;
+  display: inline-block;
+  height: 2rem;
+  width: 2rem;
+}
+.custom-day.focused {
+  background-color: #e6e6e6;
+}
+.custom-day.range,
+.custom-day:hover {
+  background-color: rgb(2, 117, 216);
+  color: white;
+}
+.custom-day.faded {
+  background-color: rgba(2, 117, 216, 0.5);
+}
+.ranger {
+  width: calc(50% - 5px);
+  margin: 0px 2px;
+  float: left;
+  &.vertical {
+    width: calc(100% - 5px);
+    margin: 8px 2px 8px 2px;
+    &:nth-child(2) {
+      margin-top: 0px;
+    }
+    &:last-child {
+      margin-bottom: 0px;
+    }
+  }
+}
+.rtl {
+  .custom-select {
+    background: #ffffff
+      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
+      left 0.75rem center/8px 10px no-repeat;
+  }
+  .ngb-dp-arrow-btn {
+    transform: rotate(180deg);
+  }
+  .ranger {
+    float: right;
+  }
+}

package/src/lib/components/hijri-gregorian-datepicker/hijri-gregorian-datepicker/gregorian-datepicker/gregorian-datepicker.component.html

@@ -0,0 +1,47 @@
+<div provideParentForm>
+  <input class="form-control" [ngClass]="{'hidden':range, 'input-filled' : selectedDate}" [ngModel]="!range && selectedDate"
+  (ngModelChange)="!range && selectedDate=$event"
+    [placeholder]="placeHolder ?placeHolder : 'd/M/yyyy'" ngbDatepicker (click)="d.toggle()" (keyup.enter)="openDatePicker()"
+    (dateSelect)="onDateSelection($event)" #d="ngbDatepicker" firstDayOfWeek="7" [readonly]="readonly"
+    [autoClose]="range ? 'outside' : true" [minDate]="min" [maxDate]="max" [required]="isRequired"
+    [displayMonths]="range ? 2 : 1" [name]="name" [startDate]="range ? selectedDate.from! : selectedDate!" [dayTemplate]="t"
+    (blur)="onBlur()" [footerTemplate]="footerTemplate" [disabled]="disabled" />
+  <ng-container *ngIf="range">
+    <div class="form-group ranger" [ngClass]="{'vertical':vertical}">
+      <div class="input-group">
+        <input #dpFromDate class="form-control" (click)="d.toggle()"  [placeholder]="placeHolder ?placeHolder : 'd/M/yyyy'" name="dpFromDate"
+          [value]="formatter.format(selectedDate.from)" (input)="fromDate = validateInput(selectedDate.from, dpFromDate.value)">
+        <div class="input-group-append">
+          <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
+            <i class="bi bi-calendar-week icon"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="form-group ranger" [ngClass]="{'vertical':vertical}">
+      <div class="input-group">
+        <input #dpToDate class="form-control" (click)="d.toggle()"  [placeholder]="placeHolder ?placeHolder : 'd/M/yyyy'" name="dpToDate"
+          [value]="formatter.format(selectedDate.to)" (input)="selectedDate.to = validateInput(selectedDate.to, dpToDate.value)">
+        <div class="input-group-append">
+          <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
+            <i class="bi bi-calendar-week icon"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>
+<ng-template #t let-date let-focused="focused">
+  <span class="custom-day" [class.focused]="focused || isToday(date)" [class.range]="isRange(date) || isSelectedDate(date)"
+    [class.faded]="isHovered(date) || (isInside(date) && range)" (mouseenter)="hoveredDate = date"
+    (mouseleave)="hoveredDate = null">
+    {{ date.day }}
+  </span>
+</ng-template>
+
+
+<ng-template #footerTemplate>
+  <hr class="my-0">
+  <button class="btn btn-secondary btn-sm m-2 float-right" type="button" (click)="d.close()">{{ "BUTTONS.CLOSE" | translate }}</button>
+  <button class="btn btn-primary btn-sm m-2 float-left" type="button" (click)="clear()">{{ "BUTTONS.CLEAR" | translate }}</button>
+</ng-template>