nuxeo-development-framework 4.1.4 → 4.1.6

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

@@ -0,0 +1,648 @@
+@import "../../../assets/scss/myApp.scss";
+
+.ngx-datatable {
+  border: 1px solid #eef1f5;
+  border-radius: 5px;
+
+  .datatable-header {
+    font-weight: bold;
+    width: 100% !important;
+    height: 50px !important;
+    background-color: #eef1f5;
+    color: #9aa4ac;
+    font-size: 14px;
+
+    .datatable-header-inner {
+      width: 100% !important;
+      height: 100%;
+      padding: 0px 20px;
+
+      .datatable-row-center {
+        width: 100% !important;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .datatable-header-cell {
+          .sort-btn {
+            // background-repeat: no-repeat;
+            margin: 5px 5px 0px;
+            // display: none;
+            // background-image: url('../../../../assets/images/arrow-down-up.svg');
+            width: 16px;
+            height: 16px;
+          }
+
+          .sort-btn::before {
+            content: "\f127";
+            display: inline-block;
+            font-family: bootstrap-icons !important;
+            font-style: normal;
+            font-weight: normal !important;
+            font-variant: normal;
+            text-transform: none;
+            line-height: 1;
+            vertical-align: -0.125em;
+            -webkit-font-smoothing: antialiased;
+          }
+
+          .datatable-icon-up {
+            &.sort-btn::before {
+              // display: flex;
+              // background-image: url("../../../../assets/images/sort-up.svg");
+              content: "\f57b";
+              color: black;
+              font-size: 16px;
+            }
+          }
+
+          .datatable-icon-down {
+            &.sort-btn::before {
+              // display: flex;
+              // background-image: url("../../../../assets/images/sort-down.svg");
+              content: "\f574";
+              color: black;
+              font-size: 16px;
+            }
+          }
+
+          .datatable-header-cell-template-wrap {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            white-space: pre-wrap;
+
+            .datatable-header-cell-wrapper {
+              display: flex;
+
+              .datatable-header-cell-label {
+                text-align: center;
+              }
+            }
+
+            .checkbox-input {
+              z-index: 99;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .datatable-body {
+    .empty-row {
+      text-align: center;
+    }
+
+    .datatable-scroll {
+      width: 100% !important;
+
+      .datatable-summary-row {
+        display: flex !important;
+        min-height: 50px !important;
+        overflow: visible !important;
+
+        .datatable-row-center {
+          overflow: visible !important;
+
+          .datatable-body-cell {
+            overflow: visible !important;
+          }
+        }
+      }
+
+      .datatable-row-wrapper,
+      .datatable-summary-row {
+        height: 50px;
+        font-size: 14px;
+
+        .datatable-body-row {
+          width: 100% !important;
+          height: 100%;
+
+          .datatable-row-center {
+            width: 100% !important;
+            display: flex;
+            justify-content: space-between;
+            padding: 0px 20px;
+
+            .datatable-body-cell {
+              min-height: 50px;
+              display: flex;
+              align-items: center;
+              overflow: hidden;
+
+              .datatable-body-cell-label {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+
+                .checkbox-input {
+                  z-index: 99;
+                }
+
+                .cell-text-wrapper {
+                  text-align: center;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  padding: 0px 5px;
+                }
+              }
+
+              .status-wrapper {
+                .iner-status-wrapper {
+                  position: relative;
+
+                  .fav-icon-indicator {
+                    font-size: 12px;
+                    position: absolute;
+                    top: -5px;
+                    right: -10px;
+                    color: $yellow-200;
+                  }
+                }
+
+                .value {
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  border-radius: 5px;
+                  width: 100px;
+                  height: 25px;
+                  .status-icon{
+                    margin-inline-end: 5px;
+                    font-size: 16px;
+                  }
+                }
+
+                .draft {
+                  background-color: #596973;
+                  color: $white;
+                }
+
+                .inProgress {
+                  background-color: #3c3cf0;
+                  color: $white;
+                }
+
+                .registered {
+                  background-color: #5a1496;
+                  color: $white;
+                }
+
+                .archived {
+                  background-color: #fbb62c;
+                  color: $white;
+                }
+
+                .closed {
+                  background-color: #00dca5;
+                  color: $white;
+                }
+
+                .approved {
+                  background-color: $green-600;
+                  color: $white;
+                }
+
+                .assigned {
+                  background-color: #fd6670;
+                  color: $white;
+                }
+
+                .sent {
+                  background-color: #3c3cf0;
+                  color: $white;
+                }
+
+                .under_revision {
+                  background: #689be7;
+                  color: #e9f1fd;
+                }
+
+                .rejected {
+                  background-color: #fd6670;
+                  color: $white;
+                }
+
+                .under_sign {
+                  background-color: #dda722;
+                  color: $white;
+                }
+
+                .redirectSelection {
+                  background-color: #28b994;
+                  color: $white;
+                }
+
+                .redirect {
+                  background-color: #e38888;
+                  color: $white;
+                }
+
+                // .draft{
+                //   background-color: #596973;
+                //   color: $white;
+                // }
+                // .inProgress{
+                //   background-color: #ffdd40;
+                //   color: #FFFBE8;
+                // }
+                // .registered{
+                //   background-color: #4f008c;
+                //   color: #edddf1;
+                // }
+                // .archived{
+                //   background-color: #465573;
+                //   color: $white;
+                // }
+                // .closed{
+                //   background-color: #00c48c;
+                //   color: rgba(0, 196, 140, 0.05);
+                // }
+                // .approved{
+                //   background-color: $green-600;
+                //   color: $white;
+                // }
+                // .assigned{
+                //   background-color: #ff375e;
+                //   color: rgba(255, 106, 57, 0.08);
+                // }
+                &.Incoming {
+                  color: #00dca5;
+                  // cursor: pointer;
+                  font-size: 30px;
+                }
+
+                &.Outgoing {
+                  // cursor: pointer;
+                  color: #fbb62c;
+                  font-size: 30px;
+                }
+
+                &.Internal {
+                  // cursor: pointer;
+                  color: #3c3cf0;
+                  font-size: 30px;
+                }
+
+                &.internal {
+                  // cursor: pointer;
+                  color: #3c3cf0;
+                  font-size: 30px;
+                }
+              }
+
+              .actions-wrapper {
+                width: 100%;
+
+                .bi {
+                  font-size: 25px;
+                  cursor: pointer;
+                  color: #465573;
+                  margin: 0px 5px !important;
+                }
+
+                .bi:hover {
+                  color: $blue !important;
+                  font-size: 26px;
+                }
+
+                .action-menu-trigger {}
+
+                .datatable-actions-menu {
+                  button {
+                    display: flex;
+                    color: #5171A6;
+                    font-size: 16px;
+                    height: 45px;
+                    align-items: center;
+                    padding: 0px 10px;
+                    width: 100%;
+                    i {
+                      font-size: 20px;
+                      padding: 0px;
+                      display: flex;
+                      align-items: center;
+                    }
+
+                    .action-text {
+                      padding: 0px 5px;
+                    }
+                  }
+                  button:hover{
+                    background-color: #e6ebf2;
+                  }
+                }
+              }
+
+              .disabled-actions-wrapper {
+                width: 100%;
+
+                .bi {
+                  font-size: 25px;
+                  cursor: not-allowed;
+                  color: #465573;
+                  margin: 0px 5px !important;
+                  opacity: 0.7;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .datatable-row-wrapper:nth-child(even) {
+        background-color: #f4f6f8;
+      }
+
+      .datatable-row-wrapper:hover {
+        background-color: #eef1f5;
+
+        .actions-wrapper {}
+      }
+    }
+  }
+}
+
+.cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .single-card {
+    padding: 15px;
+    border: 1px solid rgba(180, 186, 198, 0.2);
+    border-radius: 3px;
+    min-width: 270px;
+    width: 24%;
+    margin: 0px 5px 10px;
+    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
+    cursor: pointer;
+
+    .memo-title {
+      font-size: 14px;
+      font-weight: bold;
+      color: #465573;
+      border-bottom: 1px solid lightgray;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .action-wrap {
+        .action {
+          margin: 0px 5px;
+          cursor: pointer;
+
+          i {
+            font-size: 16px;
+          }
+
+          i:hover {
+            color: blue;
+          }
+        }
+
+        .publish-state {
+          font-size: 12px;
+          color: #00dca5;
+          font-weight: bold;
+        }
+
+        button {
+          border: none;
+          color: #465573;
+          background-color: transparent;
+
+          i {
+            font-size: 16px;
+          }
+
+          i:hover {
+            color: blue;
+          }
+        }
+      }
+    }
+
+    .memo-body {
+      display: flex;
+      padding: 0px 10px;
+
+      .key {
+        width: 50%;
+        font-size: 12px;
+        color: #9aa4ac;
+      }
+
+      .value {
+        width: 50%;
+        font-size: 12px;
+
+        .text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .single-card:hover {
+    background-color: #f6f7f8;
+  }
+
+  .single-card:focus {
+    background-color: #f6f7f8;
+  }
+
+  .selected-card {
+    background-color: #f6f7f8;
+  }
+}
+
+.rtl {
+  .ngx-datatable {
+    .datatable-body {
+      .status-wrapper {
+        .fav-icon-indicator {
+          left: -10px;
+          top: 15px !important;
+          right: auto !important;
+        }
+      }
+    }
+  }
+}
+
+.dynamic-cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .single-card {
+    padding: 15px;
+    border: 1px solid rgba(180, 186, 198, 0.2);
+    border-radius: 3px;
+    min-width: 306px;
+    width: 24%;
+    margin: 0px 5px 10px;
+    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
+    cursor: pointer;
+
+    .memo-title {
+      font-size: 14px;
+      font-weight: bold;
+      color: #465573;
+      border-bottom: 1px solid lightgray;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .action-wrap {
+        .action {
+          // margin: 0px 5px;
+          cursor: pointer;
+
+          i {
+            font-size: 16px;
+          }
+
+          i:hover {
+            color: blue;
+          }
+        }
+
+        .publish-state {
+          font-size: 12px;
+          color: #00dca5;
+          font-weight: bold;
+        }
+
+        button {
+          border: none;
+          color: #465573;
+          background-color: transparent;
+
+          i {
+            font-size: 16px;
+          }
+
+          i:hover {
+            color: blue;
+          }
+        }
+      }
+    }
+
+    .memo-body {
+      display: flex;
+      padding: 0px 10px;
+
+      .key {
+        width: 58%;
+        font-size: 12px;
+        color: #9aa4ac;
+        margin-bottom: 4px;
+      }
+
+      .value {
+        width: 58%;
+        font-size: 12px;
+
+        .text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+      .draft {
+        background-color: #596973;
+        color: $white;
+        width: 24%;
+      }
+
+      .inProgress {
+        background-color: #3c3cf0;
+        color: $white;
+        width: 51%;
+      }
+
+      .registered {
+        background-color: #5a1496;
+        color: $white;
+        width: 51%;
+      }
+
+      .archived {
+        background-color: #fbb62c;
+        color: $white;
+        width: 40%;
+      }
+
+      .closed {
+        background-color: #00dca5;
+        color: $white;
+        width: 31%;
+      }
+
+      .approved {
+        background-color: $green-600;
+        color: $white;
+        width: 43%;
+      }
+
+      .assigned {
+        background-color: #fd6670;
+        color: $white;
+        width: 43%;
+      }
+
+      .sent {
+        background-color: #3c3cf0;
+        color: $white;
+        width: 23%;
+      }
+
+      .under_revision {
+        background: #689be7;
+        color: #e9f1fd;
+        width: 65%;
+      }
+
+      .rejected {
+        background-color: #fd6670;
+        color: $white;
+        width: 37%;
+      }
+
+      .under_sign {
+        background-color: #dda722;
+        color: $white;
+        width: 51%;
+      }
+    }
+  }
+
+  .single-card:hover {
+    background-color: #f6f7f8;
+  }
+
+  .single-card:focus {
+    background-color: #f6f7f8;
+  }
+
+  .selected-card {
+    background-color: #f6f7f8;
+  }
+}
+
+.overflowVisible {
+  overflow: visible !important;
+}

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

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