Shutov / Create interface to upload employee

package.json

@@ -52,6 +52,7 @@
     "ngx-window-token": "^7.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.6.2",
+    "xlsx": "^0.18.5",
     "zone.js": "~0.13.0"
   },
   "devDependencies": {

src/app/header/header.component.html

@@ -145,6 +145,13 @@ <h2 class="header-descr">{{ headerSubtitle }}</h2>
         {{ 'ENUM.NAV_BAR_NAME.ADMINISTRATION' | translate }}
       </button>
     </a>
+    <a
+      *ngIf="user.role === Role.provider || user.role === Role.providerDeputy"
+      [routerLink]="'./personal-cabinet/provider/provider-employees'">
+      <button mat-menu-item>
+        {{ 'ENUM.NAV_BAR_NAME.EMPLOYEES' | translate }}
+      </button>
+    </a>
     <a *ngIf="user.role === Role.provider" [routerLink]="'./personal-cabinet/provider/positions'">
       <button mat-menu-item>
         {{ 'ENUM.NAV_BAR_NAME.POSITIONS' | translate }}

src/app/header/header.component.scss

@@ -204,7 +204,7 @@
   min-height: auto !important;
 }
 
-::ng-deep .mat-mdc-menu-item-text{
+::ng-deep .mat-mdc-menu-item-text {
   font-size: 13px !important;
   font-family: 'Innerspace';
   font-weight: 700 !important;

src/app/shared/base-components/upload-excel/upload-excel.component.scss

@@ -0,0 +1,226 @@
+@import 'src/app/shared/styles/buttons.scss';
+
+$duplicated-value: #fd0707b3;
+$empty-field: #fd07071a;
+$wrong-length: #0d138980;
+$wrong-language: #22b01280;
+$wrong-format: #ffff0080;
+$length-warning-message: #ff0000;
+
+::ng-deep .custom-color-toggle .mdc-switch__track::before {
+  background-color: #e5e9f2 !important;
+}
+.import-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .submit-btn {
+    margin-left: 1px;
+  }
+  .file-name {
+    margin-left: 1rem;
+  }
+  .btn {
+    text-transform: uppercase;
+    height: 40px;
+    margin-bottom: 10px;
+  }
+  .mat-raised-button {
+    border-radius: 20px;
+    height: 40px;
+    margin-bottom: 10px;
+    &:hover {
+      color: white;
+      background-color: #3849f9;
+    }
+  }
+}
+.file-actions {
+  display: flex;
+}
+.errors-menu {
+  display: flex;
+  width: fit-content;
+  .length-warning {
+    max-width: 200px;
+    line-height: 15px;
+    mat-card-subtitle {
+      color: $length-warning-message !important;
+      animation: pulse 3s infinite;
+    }
+  }
+  mat-slide-toggle {
+    padding-top: 5px;
+  }
+  .incorrect-row {
+    color: red;
+  }
+  .incorrect-row-number {
+    color: red;
+  }
+}
+.errors-types-tooltip {
+  font-size: 20px;
+  margin-bottom: 10px;
+  display: flex;
+}
+.errors-types {
+  margin: 20px 20px;
+  ul {
+    padding: 0;
+    list-style-type: none;
+    li {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      .color-box {
+        width: 30px;
+        height: 15px;
+        border-radius: 50px;
+        border: 1px solid inherit;
+        margin-right: 15px;
+      }
+    }
+  }
+}
+.wrapper-provider-list {
+  position: relative;
+  margin-top: 2rem;
+  display: flex;
+  justify-content: center;
+}
+.wrapper-provider-list-container {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 30px;
+  width: 95%;
+}
+.table-container {
+  width: 100%;
+  height: fit-content;
+}
+.custom-table-style {
+  width: inherit;
+  th,
+  td {
+    padding-left: 5px;
+  }
+  td {
+    max-width: 150px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+.load-result {
+  display: flex;
+  p {
+    line-height: 13px;
+    margin-left: 5px;
+  }
+  &.load-result-success > span {
+    color: #3849f9;
+    font-size: 40px;
+  }
+  &.load-result-error > span {
+    color: red;
+    font-size: 40px;
+  }
+}
+.error-field {
+  &-empty {
+    background-color: $empty-field;
+  }
+  &-duplicate {
+    background-color: $duplicated-value;
+  }
+  &-wrong-length {
+    background-color: $wrong-length;
+  }
+  &-wrong-format {
+    background-color: $wrong-format;
+  }
+  &-wrong-language {
+    background-color: $wrong-language;
+  }
+}
+.loader-container {
+  height: 50px;
+  margin-left: 15px;
+  display: flex;
+  align-items: center;
+}
+.loader {
+  align-self: baseline;
+  margin: 15px;
+  width: 8px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  animation: loader 1s infinite linear alternate;
+}
+@keyframes loader {
+  0% {
+    box-shadow:
+      10px 0 #3849f9,
+      -10px 0 #3849f933;
+    background: #3849f9;
+  }
+  33% {
+    box-shadow:
+      10px 0 #3849f9,
+      -10px 0 #3849f933;
+    background: #3849f933;
+  }
+  66% {
+    box-shadow:
+      10px 0 #3849f933,
+      -10px 0 #3849f9;
+    background: #3849f933;
+  }
+  100% {
+    box-shadow:
+      10px 0 #3849f933,
+      -10px 0 #3849f9;
+    background: #3849f9;
+  }
+}
+@keyframes pulse {
+  0% {
+    color: $length-warning-message;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    color: $length-warning-message;
+  }
+}
+::ng-deep .import-providers-table-tooltip {
+  color: #f6f6f6;
+  background-color: #505050;
+  border-radius: 4px;
+  font-size: 12px;
+  margin: 14px 14px 14px 5px;
+  max-width: 300px;
+  padding-left: 8px;
+  padding-right: 8px;
+  overflow: hidden;
+  text-overflow: unset !important;
+  transform: scale(1.3) !important;
+}
+@media screen and (max-width: 930px) {
+  .import-buttons {
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+  .errors-menu {
+    padding-top: 5px;
+  }
+  mat-slide-toggle {
+    position: relative;
+    .incorrect-row {
+      display: none !important;
+    }
+  }
+}