fix conflict

src/app/Internal-Page/hospital-content/hospital-content.component.html

@@ -38,6 +38,7 @@
                                   </div>
                               </div>
                           </div>
+                        
                       </div>
                   </div>
                   <div class="col-6 col-md-9">

src/app/app.module.ts

@@ -60,6 +60,9 @@ import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
 //import localeDE from '@angular/common/locales/de';
 
 import { Ng2CarouselamosModule } from 'ng2-carouselamos';
+import { NumberDerictiveDirective } from './number-derictive.directive';
+import { EnglishCharactersDirective } from './shared/english-characters.directive';
+import { OnlyNumberDirective } from './shared/only-number.directive';
 
 
 //registerLocaleData(localeAr, 'ar');
@@ -80,6 +83,9 @@ import { Ng2CarouselamosModule } from 'ng2-carouselamos';
     ServicesComponent,
     PageNotFoundComponent,
     //CeiboShare,
+    NumberDerictiveDirective,
+    EnglishCharactersDirective,
+    OnlyNumberDirective,
   ],
   imports: [
     BrowserModule,

src/app/dashboard/achievements/achievement-list/achievement.component.html

@@ -47,7 +47,7 @@
           <th>
             <div class="custom-control custom-checkbox">
               <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px;"></label>
+              <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px;"></label> -->
             </div>
           </th>
           <th>العنوان</th>
@@ -59,7 +59,7 @@
           <td>
             <div class="custom-control custom-checkbox centerIneerItem">
               <input type="checkbox" class="custom-control-input" id="{{achievement.id}}" [(ngModel)]="achievement.selected" [value]='achievement' (change)="checkIfAllSelected();">
-              <label class="custom-control-label disblayBlock-w" for="{{achievement.id}}" style="color:#2a2a2a"></label>
+              <!-- <label class="custom-control-label disblayBlock-w" for="{{achievement.id}}" style="color:#2a2a2a"></label> -->
             </div>
           </td>
           <td>{{achievement.title}}</td>

src/app/dashboard/advertisiment/advertisiment.component.html

@@ -48,8 +48,8 @@
         <tr>
           <th>
             <div class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+              <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
             </div>
           </th>
           <th> تاريخ الإبتداء </th>
@@ -62,7 +62,7 @@
           <td>
             <div class="custom-control custom-checkbox centerIneerItem">
               <input type="checkbox" class="custom-control-input" id="{{adver.id}}" [(ngModel)]="adver.selected" [value]='adver' (change)="checkIfAllSelected();">
-              <label class="custom-control-label disblayBlock-w" for="{{adver.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+              <!-- <label class="custom-control-label disblayBlock-w" for="{{adver.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
             </div>
           </td>
           <td>{{adver.start_time}}</td>

src/app/dashboard/dashboard.module.ts

@@ -4,12 +4,12 @@ import { CommonModule } from '@angular/common';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { NumberDerictiveDirective } from './../number-derictive.directive';
-import { EnglishCharactersDirective } from './../shared/english-characters.directive';
+//import { NumberDerictiveDirective } from './../number-derictive.directive';
+//import { EnglishCharactersDirective } from './../shared/english-characters.directive';
 import { ModalModule } from 'ngx-modialog';
 import { FiltterPipePipe } from './../filtter-pipe.pipe';
 import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
-import { OnlyNumberDirective } from '../shared/only-number.directive';
+//import { OnlyNumberDirective } from '../shared/only-number.directive';
 import { ShortenPipe } from '../shorten.pipe';
 import { HigriDateComponent } from '../higri-date/higri-date.component';
 
@@ -80,6 +80,8 @@ import { ReportListComponent } from './report-list/report-list.component';
 import { UserService } from '../shared/user.service';
 import { BarEventsListComponent } from './bar-events/bar-events-list/bar-events-list.component';
 import { AddBarEventComponent } from './bar-events/add-bar-event/add-bar-event.component';
+import { NumberDirective } from './number.directive';
+import { EnglishDirective } from './english.directive';
 
 
 
@@ -103,8 +105,8 @@ import { AddBarEventComponent } from './bar-events/add-bar-event/add-bar-event.c
         RoleReport2Component,
         ReportsPageComponent,
         ReportListComponent,
-        EnglishCharactersDirective,
-        OnlyNumberDirective,
+        //EnglishCharactersDirective,
+        //OnlyNumberDirective,
         HospitalListComponent,
         AddHospitalComponent,
         EventsComponent,
@@ -130,9 +132,10 @@ import { AddBarEventComponent } from './bar-events/add-bar-event/add-bar-event.c
         HigriDateComponent,
         AdvertisimentComponent,
         AddAdverComponent,
-        NumberDerictiveDirective,
         BarEventsListComponent,
         AddBarEventComponent,
+        NumberDirective,
+        EnglishDirective,
     ],
     imports: [
         CommonModule,

src/app/dashboard/department/department-list/department-list.component.html

@@ -46,8 +46,8 @@
           <tr>
             <th>
               <div class="custom-control custom-checkbox">
-                  <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                <label class="custom-control-label fixedWidthLabel-w" for="customCheck" style="margin-bottom:20px;"></label>
+                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                <!-- <label class="custom-control-label fixedWidthLabel-w" for="customCheck" style="margin-bottom:20px;"></label> -->
               </div>
             </th>
             <th>الاسم</th>
@@ -59,7 +59,7 @@
             <td>
               <div class="custom-control custom-checkbox centerIneerItem">
                 <input type="checkbox" class="custom-control-input" id="{{department.id}}" [(ngModel)]="department.selected" [value]='department' (change)="checkIfAllSelected();">
-                <label class="custom-control-label disblayBlock-w" for="{{department.id}}" style="color:#2a2a2a"></label>
+                <!-- <label class="custom-control-label disblayBlock-w" for="{{department.id}}" style="color:#2a2a2a"></label> -->
               </div>
             </td>
             <td>{{department.name}}</td>

src/app/dashboard/english.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, HostListener, ElementRef, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appEnglish]'
+})
+export class EnglishDirective {
+
+  regexStr = '^[a-zA-Z0-@-.-9_]*$';
+  @Input() isAlphaNumeric: boolean;
+
+  constructor(private el: ElementRef) { }
+
+
+  @HostListener('keypress', ['$event']) onKeyPress(event) {
+    return new RegExp(this.regexStr).test(event.key);
+  }
+
+  @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
+    this.validateFields(event);
+  }
+
+  validateFields(event) {
+    setTimeout(() => {
+
+      this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^A-Za-z ]/g, '').replace(/\s/g, '');
+      event.preventDefault();
+
+    }, 100)
+  }
+
+}

src/app/dashboard/events/events.component.html

@@ -48,8 +48,8 @@
         <tr>
           <th>
             <div class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+              <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
             </div>
           </th>
           <th>الاسم</th>
@@ -64,7 +64,7 @@
           <td>
             <div class="custom-control custom-checkbox centerIneerItem">
               <input type="checkbox" class="custom-control-input" id="{{event.id}}" [(ngModel)]="event.selected" [value]='event' (change)="checkIfAllSelected();">
-              <label class="custom-control-label disblayBlock-w" for="{{event.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+              <!-- <label class="custom-control-label disblayBlock-w" for="{{event.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
             </div>
           </td>
           <td>{{event.name}}</td>

src/app/dashboard/footer/external-services/external-list/external-list.component.html

@@ -47,8 +47,8 @@
             <tr>
               <th>
                 <div class="custom-control custom-checkbox">
-                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                    <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+                  <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                  <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
                 </div>
               </th>
               <th>الاسم</th>
@@ -62,7 +62,7 @@
               <td>
                 <div class="custom-control custom-checkbox centerIneerItem">
                   <input type="checkbox" class="custom-control-input" id="{{external.id}}" [(ngModel)]="external.selected" [value]='external' (change)="checkIfAllSelected();">
-                  <label class="custom-control-label disblayBlock-w" for="{{external.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+                  <!-- <label class="custom-control-label disblayBlock-w" for="{{external.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
                 </div>
               </td>
               <td>{{external.name}}</td>

src/app/dashboard/footer/footer-list/footer-list.component.html

@@ -47,7 +47,7 @@
         <th>
           <div class="custom-control custom-checkbox">
             <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-            <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+            <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
           </div>
         </th>
         <th>الاسم</th>
@@ -61,7 +61,7 @@
         <td>
           <div class="custom-control custom-checkbox centerIneerItem">
             <input type="checkbox" class="custom-control-input" id="{{footer.id}}" [(ngModel)]="footer.selected" [value]='footer' (change)="checkIfAllSelected();">
-            <label class="custom-control-label disblayBlock-w" for="{{footer.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+            <!-- <label class="custom-control-label disblayBlock-w" for="{{footer.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
           </div>
         </td>
         <td>{{footer.name}}</td>

src/app/dashboard/hospitals/hospital-list/hospital-list.component.html

@@ -3,7 +3,7 @@
   <div class="row">
     <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه إداره المحتوي > </li>
+          <li class="headingText-w"> {{typeServices}} > </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px">{{typeLink}}</li>
         </ul>
     </div>
@@ -47,8 +47,8 @@
             <tr>
               <th>
                 <div class="custom-control custom-checkbox">
-                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                    <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+                  <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                  <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
                 </div>
               </th>
               <th>الاسم</th>
@@ -60,7 +60,7 @@
               <td>
                 <div class="custom-control custom-checkbox centerIneerItem">
                   <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
-                  <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+                  <!-- <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
                 </div>
               </td>
               <td>{{data.name}}</td>

src/app/dashboard/hospitals/hospital-list/hospital-list.component.ts

@@ -37,6 +37,7 @@ export class HospitalListComponent implements OnInit {
   typeLink: string = '';
   dataTableNumber: number = 5;
   pages = [];
+  typeServices: string = '';
 
   ngOnInit() {
 
@@ -60,8 +61,13 @@ export class HospitalListComponent implements OnInit {
         this.pageId = params['typePageId'];
         if(this.pageId == 6) {
           this.typeLink = 'المستشفيات والمراكز';
+          this.typeServices = 'خدمه إداره المحتوي';
         } else if(this.pageId == 10) {
           this.typeLink = 'الإدرات';
+          this.typeServices = 'خدمه الصلاحيات';
+        } else if(this.pageId == 30) {
+          this.typeLink = 'المستشفيات والمراكز';
+          this.typeServices = 'خدمه إداره الصفحه الخارجيه';
         }
       }
     );
@@ -71,7 +77,7 @@ export class HospitalListComponent implements OnInit {
       (params: Params) => {
         this.userLoginId = params['userID'];
         this.serviceId = params['serviceID'];
-        if(this.pageId == 6) {
+        if(this.pageId == 6 || this.pageId == 30) {
           this.hospitalService.getHospitalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
             (responce) => {
               console.log(responce);
@@ -100,6 +106,18 @@ export class HospitalListComponent implements OnInit {
                       this.authSer.showDeleteBtn = true;
                     }
                   }
+                } else if(this.pages[i].id == 30){
+                  for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                    if(this.pages[i].permissions[j].name == 'add_hospitals_centers_ex'){
+                      this.authSer.showAddBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'edit_hospitals_centers_ex'){
+                      this.authSer.showEditBtn = true;
+                    }
+                    if(this.pages[i].permissions[j].name == 'delete_hospitals_centers_ex'){
+                      this.authSer.showDeleteBtn = true;
+                    }
+                  }
                 }else {
                   console.log('no roles');
                 }
@@ -204,7 +222,7 @@ export class HospitalListComponent implements OnInit {
                         console.log(error);
                       }
                     );
-                  } else if(this.pageId == 6){
+                  } else if(this.pageId == 6 || this.pageId == 30){
                     this.hospitalService.getHospitalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
                       (responce) => {
                         console.log(responce);
@@ -240,7 +258,7 @@ export class HospitalListComponent implements OnInit {
     this.currentPage = 1;
     console.log('search curent page', this.currentPage);
     console.log('search page id', this.pageId);
-    if(this.pageId == 6){
+    if(this.pageId == 6 || this.pageId == 30){
       this.hospitalService.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
@@ -276,7 +294,7 @@ export class HospitalListComponent implements OnInit {
     this.spinner.show();
     this.dataList = [];
     this.dataTableNumber = event.target.value;
-    if(this.pageId == 6) {
+    if(this.pageId == 6 || this.pageId == 30) {
       this.hospitalService.getHospitalsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
         (responce) => {
           console.log(responce);
@@ -309,7 +327,7 @@ export class HospitalListComponent implements OnInit {
 
   //add hospitals 
   onAdd() {
-    if(this.pageId == 6) {
+    if(this.pageId == 6 || this.pageId == 30) {
       this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/add/Hospital']);
     } else if(this.pageId == 10) {
       this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/add/Management']);

src/app/dashboard/internal-services/internal-services.component.html

@@ -48,7 +48,7 @@
         <th>
           <div class="custom-control custom-checkbox">
             <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-            <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+            <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
           </div>
         </th>
         <th>الاسم</th>
@@ -61,7 +61,7 @@
         <td>
           <div class="custom-control custom-checkbox centerIneerItem">
             <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
-            <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+            <!-- <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
           </div>
         </td>
         <td>{{data.name}}</td>

src/app/dashboard/lectures/lectures-list/lectures-list.component.html

@@ -49,7 +49,7 @@
           <th>
             <div class="custom-control custom-checkbox">
                 <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+                <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
             </div>
           </th>
           <th>عنوان الحدث</th>
@@ -65,7 +65,7 @@
           <td>
             <div class="custom-control custom-checkbox centerIneerItem">
               <input type="checkbox" class="custom-control-input" id="{{lecture.id}}" [(ngModel)]="lecture.selected" [value]='lecture' (change)="checkIfAllSelected();">
-              <label class="custom-control-label disblayBlock-w" for="{{lecture.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+              <!-- <label class="custom-control-label disblayBlock-w" for="{{lecture.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
             </div>
           </td>
           <td>{{lecture.name}}</td>

src/app/dashboard/main-menu/main-list/main-list.component.html

@@ -47,8 +47,8 @@
             <tr>
               <th>
                 <div class="custom-control custom-checkbox">
-                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                    <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+                  <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                  <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
                 </div>
               </th>
               <th>عنصر القائمه</th>
@@ -63,7 +63,7 @@
               <td>
                 <div class="custom-control custom-checkbox centerIneerItem">
                   <input type="checkbox" class="custom-control-input" id="{{menu.id}}" [(ngModel)]="menu.selected" [value]='menu' (change)="checkIfAllSelected();">
-                  <label class="custom-control-label disblayBlock-w" for="{{menu.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+                  <!-- <label class="custom-control-label disblayBlock-w" for="{{menu.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
                 </div>
               </td>
               <td>{{menu.name}}</td>

src/app/dashboard/news/news-list/news-list.component.html

@@ -47,7 +47,7 @@
           <th>
             <div class="custom-control custom-checkbox">
                 <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+                <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
             </div>
           </th>
           <th>العنوان</th>
@@ -64,7 +64,7 @@
           <td>
             <div class="custom-control custom-checkbox centerIneerItem">
               <input type="checkbox" class="custom-control-input" id="{{news.id}}" [(ngModel)]="news.selected" [value]='news' (change)="checkIfAllSelected();">
-              <label class="custom-control-label disblayBlock-w" for="{{news.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+              <!-- <label class="custom-control-label disblayBlock-w" for="{{news.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
             </div>
           </td>
           <td>{{news.title}}</td>

src/app/dashboard/number.directive.ts

@@ -0,0 +1,30 @@
+import { Directive, HostListener, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[appNumber]'
+})
+export class NumberDirective {
+
+
+
+  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);
+
+  private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];
+
+  constructor(private el: ElementRef) {
+  }
+
+  @HostListener('keydown', [ '$event' ])
+  onKeyDown(event: KeyboardEvent) {
+      // Allow Backspace, tab, end, and home keys
+      if (this.specialKeys.indexOf(event.key) !== -1) {
+          return;
+      }
+      let current: string = this.el.nativeElement.value;
+      let next: string = current.concat(event.key);
+      if (next && !String(next).match(this.regex) || next.length > 10) {
+          event.preventDefault();
+      }
+  }
+
+}

src/app/dashboard/roles/roles-list/roles-list.component.html

@@ -48,7 +48,7 @@
         <th>
           <div class="custom-control custom-checkbox">
               <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-              <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px;"></label>
+              <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px;"></label> -->
           </div>
         </th>
         <th>الاسم</th>
@@ -60,7 +60,7 @@
         <td>
           <div class="custom-control custom-checkbox centerIneerItem">
             <input type="checkbox" class="custom-control-input" id="{{role.id}}" [(ngModel)]="role.selected" [value]='role' (change)="checkIfAllSelected();">
-            <label class="custom-control-label disblayBlock-w" for="{{role.id}}" style="color:#2a2a2a"></label>
+            <!-- <label class="custom-control-label disblayBlock-w" for="{{role.id}}" style="color:#2a2a2a"></label> -->
           </div>
         </td>
         <td>{{role.role_name}}</td>

src/app/dashboard/sections/section-list/section-list.component.html

@@ -47,8 +47,8 @@
               <tr>
                 <th>
                   <div class="custom-control custom-checkbox">
-                      <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                    <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                    <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
                   </div>
                 </th>
                 <th>الاسم</th>
@@ -60,7 +60,7 @@
                 <td>
                   <div class="custom-control custom-checkbox centerIneerItem">
                     <input type="checkbox" class="custom-control-input" id="{{section.id}}" [(ngModel)]="section.selected" [value]='section' (change)="checkIfAllSelected()">
-                    <label class="custom-control-label disblayBlock-w" for="{{section.id}}" style="color:#2a2a2a; cursor: pointer;"></label>
+                    <!-- <label class="custom-control-label disblayBlock-w" for="{{section.id}}" style="color:#2a2a2a; cursor: pointer;"></label> -->
                   </div>
                 </td>
                 <td>{{section.name}}</td>

src/app/dashboard/service-item/service-item.component.html

@@ -28,6 +28,8 @@
               </div>
             </ul>
           </div>
+
+          
         </nav>
     </div>
   </div>

src/app/dashboard/service-item/service-item.component.ts

@@ -97,6 +97,7 @@ export class ServiceItemComponent implements OnInit {
       },
       (error) => {console.log(error)}
     );
+
   }
 
   //click on service in side button
@@ -129,7 +130,7 @@ export class ServiceItemComponent implements OnInit {
         (error) => {console.log(error)}
       );
 
-    } else if(service.id == 6) {
+    } else if(service.id == 6 || service.id == 2) {
       //خدمه اداره المحتوي
       this.extraPages = [];
       this.userservice.getPagesPermetiotns(this.userId, service.id).subscribe(
@@ -182,6 +183,9 @@ export class ServiceItemComponent implements OnInit {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/mainMenuList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 24) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/advertisimentList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 30) {
+            console.log('/service/' + this.userId + '/' + service.id + '/hospitalsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/hospitalsList/' + this.pages[0].id]);
           }
           this.spinner.hide();
         },

src/app/dashboard/tabs/tab-list/tab-list.component.html

@@ -47,7 +47,7 @@
         <th>
           <div class="custom-control custom-checkbox">
             <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-            <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px;"></label>
+            <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px;"></label> -->
           </div>
         </th>
         <th>إسم الوثيقه</th>
@@ -63,7 +63,7 @@
         <td>
           <div class="custom-control custom-checkbox centerIneerItem">
             <input type="checkbox" class="custom-control-input" id="{{tab.id}}" [(ngModel)]="tab.selected" [value]='tab' (change)="checkIfAllSelected();">
-            <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label>
+            <!-- <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label> -->
           </div>
         </td>
         <td>{{tab.name}}</td>

src/app/dashboard/users/form-user/form-user.component.html

@@ -33,8 +33,8 @@
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label style="float:right">الجنسيه <span class="spanReqired-w">*</span></label>
-                <select class="form-control" formControlName="nationality_id">
-                  <option *ngFor="let country of countries; let i = index" [value]="country.id">{{country.name}}</option>
+                <select class="form-control" formControlName="nationality_id" style="padding:0 5px">
+                  <option *ngFor="let country of countries; let i = index" [value]="country.id">{{country.country_arName}}</option>
                 </select>
               </div>
             </div>
@@ -51,7 +51,7 @@
             <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="identity_id != 4">
               <div class="form-group">
                 <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
-                <input type="phone" class="form-control" placeholder="رقم الهويه"d="identityNumber" formControlName="identity_number" appOnlyNumber (input)="onIdentitiyChange($event.target.value)" />
+                <input type="phone" class="form-control" placeholder="رقم الهويه"d="identityNumber" formControlName="identity_number" appNumber (input)="onIdentitiyChange($event.target.value)" />
                 <span *ngIf="identity_id == 1"  style="color:red">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
                 <span *ngIf="identity_id == 2" style="color:red">أدخل رقم هويه مكون من 10 أرقام </span>
                 <span *ngIf="identity_id == 3" style="color:red">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
@@ -69,7 +69,7 @@
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
-                <input type="email" id="email" class="form-control" placeholder="البريد الإلكتروني" appEnglishCharacters formControlName="email" />
+                <input type="email" id="email" class="form-control" placeholder="البريد الإلكتروني" appEnglish formControlName="email" />
                 <span class="help-block" *ngIf="!signupForm.get('email').valid && signupForm.get('email').touched" style="color:red">من فضلك أدخل إيميل صحيح</span>
               </div>
             </div>
@@ -77,7 +77,7 @@
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
-                <input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
+                <input type="text" id="phone" appNumber class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
               </div>
             </div>
 
@@ -197,14 +197,14 @@
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
               <div class="form-group">
-                <div class="custom-control custom-radio inlineBlock-w">
-                  <input type="radio" class="custom-control-input" id="defaultUnchecked" value="male" formControlName="gender" name="gender">
+                <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                  <input type="radio" class="custom-control-input customStyleInput" id="defaultUnchecked" value="male" formControlName="gender" name="gender">
                   <label class="custom-control-label" for="defaultUnchecked" style="cursor: pointer;">ذكر</label>
                 </div>
                 
-                <div class="custom-control custom-radio inlineBlock-w">
-                  <input type="radio" class="custom-control-input" id="defaultChecked" value="female" formControlName="gender" name="gender">
-                  <label class="custom-control-label" for="defaultChecked" style="cursor: pointer; margin-right:30px">انثي</label>
+                <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                  <input type="radio" class="custom-control-input customStyleInput" id="defaultChecked" value="female" formControlName="gender" name="gender">
+                  <label class="custom-control-label" for="defaultChecked" style="cursor: pointer;">انثي</label>
                 </div>
               </div>
             </div>

src/app/dashboard/users/users.component.html

@@ -48,7 +48,7 @@
               <th>
                 <div class="custom-control custom-checkbox">
                     <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
-                    <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor:pointer"></label>
+                    <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor:pointer"></label> -->
                 </div>
               </th>
               <th>الاسم</th>
@@ -63,7 +63,7 @@
               <td>
                 <div class="custom-control custom-checkbox centerIneerItem">
                   <input type="checkbox" class="custom-control-input" id="{{user.id}}" [(ngModel)]="user.selected" [value]='user' (change)="checkIfAllSelected()">
-                  <label class="custom-control-label disblayBlock-w" for="{{user.id}}" style="color:#2a2a2a; cursor:pointer"></label>
+                  <!-- <label class="custom-control-label disblayBlock-w" for="{{user.id}}" style="color:#2a2a2a; cursor:pointer"></label> -->
                 </div>
               </td>
               <td>{{user.name}}</td>

src/app/regester/regester.component.html

@@ -43,8 +43,8 @@
 							<div class="col-12 col-sm-12 col-md-6 col-lg-4">
 							  <div class="form-group">
 								<label style="float:right">الجنسية <span class="spanReqired-w">*</span></label>
-								<select class="form-control" formControlName="nationality_id">
-								  <option *ngFor="let country of countries; let i = index" [value]="country.id">{{country.name}}</option>
+								<select class="form-control" formControlName="nationality_id" style="padding:0 5px">
+								  <option *ngFor="let country of countries; let i = index" [value]="country.id">{{country.country_arName}}</option>
 								</select>
 							  </div>
 							</div>
@@ -62,7 +62,7 @@
 							<div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="identity_id != 4">
 							  <div class="form-group">
 								<label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
-								<input type="number" class="form-control" placeholder="رقم الهويه" id="identityNumber" formControlName="identity_number" appOnlyNumber (input)="onIdentitiyChange($event.target.value)" />
+								<input type="number" class="form-control" placeholder="رقم الهويه" id="identityNumber" formControlName="identity_number" appNumberDerictive (input)="onIdentitiyChange($event.target.value)" />
 								<span class="errorMessage-w" *ngIf="identity_id == 1">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
 								<span class="errorMessage-w" *ngIf="identity_id == 2">أدخل رقم هويه مكون من 10 أرقام </span>
 								<span class="errorMessage-w" *ngIf="identity_id == 3">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
@@ -86,14 +86,15 @@
               <div class="form-group">
                 <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
                 <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
-                  <input type="radio" class="custom-control-input" id="defaultUnchecked" value="male" formControlName="gender" name="gender">
+                  <input type="radio" class="custom-control-input customStyleInput" id="defaultUnchecked" value="male" formControlName="gender" name="gender">
                   <label class="custom-control-label" for="defaultUnchecked" style="cursor: pointer;">ذكر</label>
                 </div>
                 
                 <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
-                  <input type="radio" class="custom-control-input" id="defaultChecked" value="female" formControlName="gender" name="gender">
-                  <label class="custom-control-label" for="defaultChecked" style="cursor: pointer; margin-right:30px">انثي</label>
+                  <input type="radio" class="custom-control-input customStyleInput" id="defaultChecked" value="female" formControlName="gender" name="gender">
+                  <label class="custom-control-label" for="defaultChecked" style="cursor: pointer;">انثي</label>
                 </div>
+
               </div>
             </div>
 					
@@ -133,6 +134,14 @@
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
+                <input class="form-control"  
+                  placeholder="yyyy-mm-dd"
+                  formControlName="date_of_employment_hij" 
+                  ngbDatepicker #d="ngbDatepicker" />
+                          
+              <div class="input-group-append">
+                  <button class="btn calendar higriButton" (click)="d.toggle()" type="button"><i class="fas fa-calendar-minus"></i></button>
+              </div>
                 <!-- <div *ngIf='bindingDateSplit && typeMode'>
                   <app-higri-date (onDatePicked)="getDate($event)" [myDate]="bindingDateSplit"></app-higri-date>
                 </div>

src/app/regester/regester.component.ts

@@ -3,16 +3,45 @@ import { Observable } from 'rxjs/Observable';
 import { AuthServiceService } from './../shared/auth-service.service';
 import { UserService } from './../shared/user.service';
 import { Component, OnInit, Injectable } from '@angular/core';
-import { NgForm, FormGroup, FormControl, Validators } from '@angular/forms';
+import { NgForm, FormGroup, FormControl, Validators, FormControlName } from '@angular/forms';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { NgxSpinnerService } from 'ngx-spinner';
+import {
+  NgbDate,NgbDateStruct, NgbCalendar, NgbCalendarIslamicUmalqura, NgbDatepickerI18n
+} from '@ng-bootstrap/ng-bootstrap';
+
+const WEEKDAYS = ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'];
+const MONTHS = ['محرم', 'صفر', 'ربيع الأول', 'ربيع الآخر', 'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان', 'رمضان', 'شوال',
+  'ذو القعدة', 'ذو الحجة'];
+
+  @Injectable()
+  export class IslamicI18n extends NgbDatepickerI18n {
+    getWeekdayShortName(weekday: number) {
+      return WEEKDAYS[weekday - 1];
+    }
+
+    getMonthShortName(month: number) {
+      return MONTHS[month - 1];
+    }
 
+    getMonthFullName(month: number) {
+      return MONTHS[month - 1];
+    }
+
+    getDayAriaLabel(date: NgbDateStruct): string {
+      return `${date.day}-${date.month}-${date.year}`;
+    }
+}
 
 @Component({
   selector: 'app-regester',
   templateUrl: './regester.component.html',
   styleUrls: ['./regester.component.css'],
+  providers: [
+    {provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura},
+    {provide: NgbDatepickerI18n, useClass: IslamicI18n}
+  ]
 })
 
 
@@ -56,7 +85,6 @@ export class RegesterComponent implements OnInit {
   changesSave:boolean = false;
   typeMode:boolean = false;
   typeTitle:string = '';
-  higriDateVal = "";
   bindingDateSplit: any;
   data = {
     name: ''
@@ -97,6 +125,7 @@ export class RegesterComponent implements OnInit {
       department_id: new FormControl(null, Validators.required),
       nationality_id: new FormControl(null, Validators.required),
       date_of_employment_gre: new FormControl(null, Validators.required),
+      date_of_employment_hij: new FormControl(null,Validators.required),
       job_title_id: new FormControl(null),
       specialization_id: new FormControl(null),
       functional_number: new FormControl(null, Validators.required),
@@ -202,7 +231,7 @@ export class RegesterComponent implements OnInit {
         department_id: new FormControl(null, Validators.required),
         nationality_id: new FormControl(null, Validators.required),
         date_of_employment_gre: new FormControl(null, Validators.required),
-        //date_of_employment_hij: new FormControl(null, Validators.required),
+        date_of_employment_hij: new FormControl(null,Validators.required),
         job_title_id: new FormControl(null),
         specialization_id: new FormControl(null),
         functional_number: new FormControl(null, Validators.required),
@@ -219,6 +248,15 @@ export class RegesterComponent implements OnInit {
 
           this.data.name = responce['user'].name;
 
+          const date = responce['user'].date_of_employment_hij.split('-');  
+          this.bindingDateSplit = {
+            'year': parseInt(date[0]),
+            'month': parseInt(date[1]),
+            'day': parseInt(date[2])
+          };
+
+          console.log('vaaaaaaaaal', this.bindingDateSplit);
+
           this.regesterForm.patchValue({
             name: responce['user'].name,
             identity_type_id: responce['user'].identity_type_id,
@@ -238,16 +276,11 @@ export class RegesterComponent implements OnInit {
             staff_id: responce['user'].staff_id,
             functional_number: responce['user'].functional_number,
             status: responce['user'].status,
+            date_of_employment_hij: this.bindingDateSplit, //responce['user'].date_of_employment_hij//
           });
-          const date = responce['user'].date_of_employment_hij.split('-');
-            
-          this.bindingDateSplit = {
-            'year': parseInt(date[0]),
-            'month': parseInt(date[1]),
-            'day': parseInt(date[2])
-          };
+         
 
-          this.higriDateVal = responce['user'].date_of_employment_hij;
+          //this.higriDateVal = responce['user'].date_of_employment_hij;
           console.log(this.bindingDateSplit);
 
           this.getDepartment();
@@ -334,11 +367,11 @@ export class RegesterComponent implements OnInit {
 
 
       //get value date from child component 
-      public getDate(date: any):void {
-        console.log( date);
-        this.higriDateVal = date.year + '-' + date.month + '-' + date.day;
-        console.log('higrii date', this.higriDateVal);
-      }
+      // public getDate(date: any):void {
+      //   console.log( date);
+      //   this.higriDateVal = date.year + '-' + date.month + '-' + date.day;
+      //   console.log('higrii date', this.higriDateVal);
+      // }
 
    
 
@@ -351,18 +384,20 @@ export class RegesterComponent implements OnInit {
       this.changesSave = true;
       console.log(this.regesterForm);
       const userDataRegester = this.regesterForm.value;
-      console.log(userDataRegester);
+      userDataRegester['date_of_employment_hij'] = userDataRegester['date_of_employment_hij'].year  + '-' + userDataRegester['date_of_employment_hij'].month + '-' + userDataRegester['date_of_employment_hij'].day;
+      userDataRegester['identity_number'] = userDataRegester['identity_number'].toString();
+      console.log('valueee' , userDataRegester);
 
       const birthDate = userDataRegester['birthday'].split('-')[0];
       const joinJobDate = userDataRegester['date_of_employment_gre'].split('-')[0];
 
+
       if(this.checkChangeImage) {
         userDataRegester['photo'] = this.imageBase64;
         userDataRegester['photo_type'] = this.photoType[1];
       }
 
       const userData = this.regesterForm.value;
-      userData['date_of_employment_hij'] = this.higriDateVal;
   
 
       if(this.userProfileId) {
@@ -370,10 +405,7 @@ export class RegesterComponent implements OnInit {
         console.log('dataaaaaaaaaaaa', userDataRegester);
         if(this.regesterForm.get('password').value != this.regesterForm.get('password_confirmation').value){
           this.toastr.warning(' من فضلك , تأكد أن كلمه المورو نفس تأكيد كلمه المرور!');
-        } else if(this.higriDateVal == "") {
-          this.toastr.warning('من فضلك أدخل تاريخ التوظيف الهجري !');
-        } 
-        else if(this.regesterForm.get('identity_number').value.substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
+        }else if(this.regesterForm.get('identity_number').value.substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
         } else if(this.regesterForm.get('identity_number').value.substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
@@ -404,11 +436,9 @@ export class RegesterComponent implements OnInit {
         console.log('dataaaaaaaaaaaa', userDataRegester);
         if(this.regesterForm.get('password').value != this.regesterForm.get('password_confirmation').value){
           this.toastr.warning('  من فضلك تأكد أن كلمه المرور نفس تأكيد كلمه المرور !');
-        } else if(this.higriDateVal = "") {
-          this.toastr.warning('من فضلك أدخل تاريخ التوظيف الهجري !');
-        } else if(this.regesterForm.get('identity_number').value.substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
+        } else if(userDataRegester['identity_number'].substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
-        } else if(this.regesterForm.get('identity_number').value.substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
+        } else if(userDataRegester['identity_number'].substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
         } else if(birthDate > joinJobDate) {
           this.toastr.warning('تارخ الميلاد أكبر من تاريخ التوظيف الميلادي !');

src/app/servicesItems/services.component.ts

@@ -130,6 +130,20 @@ export class ServicesComponent implements OnInit, OnDestroy {
         },
         (error) => {console.log(error)}
       );
+    } else if(dataService.id == 2) {
+      this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.pages = responce['pages'];
+          if(this.pages[0].id == 30) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/hospitalsList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/hospitalsList/' + this.pages[0].id]);
+          } 
+        },
+        (error) => {
+          console.log(error);
+        }
+      )
     }
    
    

src/styles.css

@@ -359,6 +359,16 @@ input:-webkit-autofill:active  {
     width: 20px;
     height: 20px;
   }
+
+  .customStyleInput {
+    opacity: 1;
+    z-index: 1;
+    width: 13px;
+    height: 20px;
+    position: absolute;
+    right: 8px;
+    top: 6px;
+  }
 /*
   .table{
     border: 2px solid #ecdcc7;
@@ -898,6 +908,15 @@ height: 7px !important;
 }
 
 
+.higriButton {
+  position: absolute;
+    top: 31px;
+    left: 16px;
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+}
+