section-review-trainee-add.component.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. <div class="addHospital-w">
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-12">
  5. <ul class="list-unstyled titileLi-w" style="margin:0">
  6. <li class="headingText-w">خدمه التدريب</li>
  7. <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> إستعراض القسم للمتدربين</li>
  8. <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
  9. </ul>
  10. </div>
  11. </div>
  12. <div class="containerContent-w">
  13. <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
  14. <div class="row">
  15. <div class="col-12">
  16. <h2 class="title">المعلومات الشخصيه</h2>
  17. <div class="row">
  18. <div class="wrapper">
  19. <div class="col-12 col-md-4">
  20. <div class="form-group">
  21. <label for="name" style="float:right">الإسم</label>
  22. <input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name" [(ngModel)]="userData.name" [disabled]="disabledInput" required/>
  23. </div>
  24. </div>
  25. <div class="col-12 col-sm-12 col-md-6 col-lg-4">
  26. <div class="form-group">
  27. <label style="float:right">الجنسية <span class="spanReqired-w">*</span></label>
  28. <select class="form-control" style="padding:0 5px" ngModel name="nationality_id" [(ngModel)]="userData.nationality_id" [disabled]="disabledInput" required>
  29. <option *ngFor="let country of countries; let i = index" [value]="country.id">{{country.country_arName}}</option>
  30. </select>
  31. </div>
  32. </div>
  33. <div class="col-12 col-sm-12 col-md-6 col-lg-4">
  34. <div class="form-group">
  35. <label for="identity" style="float:right"> الهويه <span class="spanReqired-w">*</span></label>
  36. <select class="form-control select" id="identity" (change)="getSelectedOptionText($event)" ngModel name="identity_type_id" [(ngModel)]="userData.identity_type_id" [disabled]="disabledInput" required>
  37. <option *ngFor="let identity of identities" [value]="identity.id">{{identity.name}}</option>
  38. </select>
  39. </div>
  40. </div>
  41. <div class="col-12 col-sm-12 col-md-6 col-lg-4">
  42. <div class="form-group">
  43. <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
  44. <input type="number" class="form-control" placeholder="رقم الهويه" id="identityNumber" (input)="onIdentitiyChange($event.target.value)" ngModel name="identity_number" [(ngModel)]="userData.identity_number" [disabled]="disabledInput" required/>
  45. <span class="errorMessage-w" *ngIf="identity_id == 1">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
  46. <span class="errorMessage-w" *ngIf="identity_id == 2">أدخل رقم هويه مكون من 10 أرقام </span>
  47. <span class="errorMessage-w" *ngIf="identity_id == 3">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
  48. </div>
  49. </div>
  50. <div class="col-12 col-sm-12 col-md-6 col-lg-4">
  51. <div class="form-group">
  52. <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
  53. <input type="date" max="{{min}}" id="birthdate" placeholder="تاريخ الميلاد" class="form-control" ngModel name="birthday" [(ngModel)]="userData.birthday" [disabled]="disabledInput" required/>
  54. </div>
  55. </div>
  56. <div class="col-12 col-sm-12 col-md-6 col-lg-4">
  57. <div class="form-group">
  58. <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
  59. <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
  60. <input type="radio" class="custom-control-input customStyleInput" id="defaultUnchecked" value="male" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
  61. <label class="custom-control-label" for="defaultUnchecked" style="cursor: pointer;">ذكر</label>
  62. </div>
  63. <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
  64. <input type="radio" class="custom-control-input customStyleInput" id="defaultChecked" value="female" name="gender" ngModel [(ngModel)]="userData.gender" [disabled]="disabledInput">
  65. <label class="custom-control-label" for="defaultChecked" style="cursor: pointer;">انثي</label>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="col-12">
  73. <h2 class="title">معلومات الإتصال</h2>
  74. <div class="row">
  75. <div class="wrapper">
  76. <div class="col-12 col-sm-12 col-md-6 col-lg-4">
  77. <div class="form-group">
  78. <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
  79. <input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" ngModel name="phone" [(ngModel)]="userData.phone" [disabled]="disabledInput" required/>
  80. </div>
  81. </div>
  82. <div class="col-12 col-md-4">
  83. <div class="form-group">
  84. <label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
  85. <input id="email" type="email" class="form-control" placeholder="الإيميل" ngModel name="email" [(ngModel)]="userData.email" [disabled]="disabledInput" required/>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. <div class="col-12">
  92. <h2 class="title">معلومات التدريب</h2>
  93. <div class="row">
  94. <div class="wrapper">
  95. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  96. <div class="form-group">
  97. <label style="float:right">نوع الطلب <span class="spanReqired-w">*</span></label>
  98. <select class="form-control selectStyle-w" ngModel name="type" [(ngModel)]="formData.type" [disabled]="disabledInput" (input)="changeType($event)" required>
  99. <option value="trainees">المتدربين</option>
  100. <option value="fellowship"> زماله(البورد السعودي) </option>
  101. <option value="university_administrators">مشرفي الجامعات</option>
  102. </select>
  103. </div>
  104. </div>
  105. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  106. <div class="form-group">
  107. <label for="order" style="float:right">اسم التخصص <span class="spanReqired-w">*</span></label>
  108. <input type="text" id="order" placeholder=" إسم التخصص" ngModel name="specialization_name" [(ngModel)]="formData.specialization_name" class="form-control" [disabled]="disabledInput" required/>
  109. </div>
  110. </div>
  111. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  112. <div class="form-group">
  113. <label for="spec" style="float:right">التخصص الدقيق <span class="spanReqired-w">*</span></label>
  114. <input type="text" id="spec" class="form-control" placeholder="التخصص الدقيق" name="specific_specialization" [(ngModel)]="formData.specific_specialization" [disabled]="disabledInput" ngModel required/>
  115. </div>
  116. </div>
  117. <div class="col-12 col-sm-12 col-md-4 col-lg-4 ">
  118. <div class="form-group">
  119. <label for="universty" style="float:right">الجامعه <span class="spanReqired-w">*</span></label>
  120. <input type="text" id="universty" placeholder="الجامعه" class="form-control" name="univeristy" ngModel [(ngModel)]="formData.university" [disabled]="disabledInput" required/>
  121. </div>
  122. </div>
  123. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  124. <div class="form-group">
  125. <label for="level" style="float:right">المستوي <span class="spanReqired-w">*</span></label>
  126. <input type="text" id="level" placeholder="المستوي" class="form-control" name="level" ngModel [(ngModel)]="formData.level" [disabled]="disabledInput" required/>
  127. </div>
  128. </div>
  129. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  130. <div class="form-group">
  131. <label for="trainning" style="float:right">الفتره التدريبيه <span class="spanReqired-w">*</span></label>
  132. <input type="text" id="trainning" placeholder="الفتره التدريبيه" class="form-control" name="training_period" ngModel [(ngModel)]="formData.training_period" [disabled]="disabledInput" required />
  133. </div>
  134. </div>
  135. <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
  136. <div class="form-group">
  137. <label for="regester" style="float:right">رقم التسجيل <span class="spanReqired-w">*</span></label>
  138. <input type="number" id="regester" placeholder="رقم التسجيل" class="form-control" name="register_number" ngModel [(ngModel)]="formData.registration_number" [disabled]="disabledInput" required/>
  139. </div>
  140. </div>
  141. <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
  142. <div class="form-group">
  143. <label for="card" style="float:right">رقم البطاقه الهينه <span class="spanReqired-w">*</span></label>
  144. <input id="card" type="number" placeholder="رقم البطاقه الهينه" class="form-control" name="authority_card_number" ngModel [(ngModel)]="formData.authority_card_number" [disabled]="disabledInput" required/>
  145. </div>
  146. </div>
  147. <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
  148. <div class="form-group">
  149. <label for="job" style="float:right"> البطاقه الوظيفي <span class="spanReqired-w">*</span></label>
  150. <input type="number" id="job" placeholder="البطاقه الوظيفي" class="form-control" name="functional_number" ngModel [(ngModel)]="formData.functional_number" [disabled]="disabledInput" required/>
  151. </div>
  152. </div>
  153. <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
  154. <div class="form-group">
  155. <label for="contract" style="float:right">نوع التعاقد <span class="spanReqired-w">*</span></label>
  156. <input type="text" id="contract" placeholder="نوع التعاقد" class="form-control" name="contract_type" ngModel [(ngModel)]="formData.contract_type" [disabled]="disabledInput" required/>
  157. </div>
  158. </div>
  159. <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="formData.type == 'fellowship'">
  160. <div class="form-group">
  161. <label for="field" style="float:right">الجهه التابع لها المتدرب <span class="spanReqired-w">*</span></label>
  162. <input type="text" id="field" placeholder="الجهه التابع لها المتدرب" class="form-control" name="organization_affiliated_with" ngModel [(ngModel)]="formData.organization_affiliated_with" [disabled]="disabledInput" required/>
  163. </div>
  164. </div>
  165. <!-- <h2 class="departmentHeading-w">أختر الأقسام <span>(قم بإختيار قسم كحد أدني)</span></h2> -->
  166. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  167. <div class="form-group">
  168. <label for="department1" style="float:right;">القسم الأول</label>
  169. <select class="form-control selectStyle-w" id="department1" name="department1" (input)="changeDepartment($event , 1)" [(ngModel)]="formData.department1" [disabled]="disabledInput">
  170. <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
  171. <option [value]="2001">حذف</option>
  172. </select>
  173. </div>
  174. </div>
  175. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  176. <div class="form-group">
  177. <label for="department2" style="float:right;">القسم الثاني</label>
  178. <select class="form-control selectStyle-w" id="department2" name="department2" (input)="changeDepartment($event , 2)" [(ngModel)]="formData.department2" [disabled]="disabledInput">
  179. <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
  180. <option [value]="2002">حذف</option>
  181. </select>
  182. </div>
  183. </div>
  184. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  185. <div class="form-group">
  186. <label for="department3" style="float:right;">القسم الثالث</label>
  187. <select class="form-control selectStyle-w" id="department3" name="department3" (input)="changeDepartment($event , 3)" [(ngModel)]="formData.department3" [disabled]="disabledInput">
  188. <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
  189. <option [value]="2003">حذف</option>
  190. </select>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="col-12">
  197. <h2 class="title">المرفقات</h2>
  198. <div class="row">
  199. <div class="col-12" *ngIf="files.length == 0">
  200. <h2 class="titileFiles-w">لا يوجد مرفقات لعرضها </h2>
  201. </div>
  202. <div class="wrapper" *ngIf="files.length > 0">
  203. <div class="col-12">
  204. <button type="button" class="btn btn-default" (click)="plusImage()" style="margin:20px 0; float:right;">إضافه مرفق</button>
  205. </div>
  206. <table class="table table-bordered">
  207. <thead class="headBackground-w">
  208. <tr>
  209. <th> إسم المرفق</th>
  210. <th>رفع املف ( بصيغه pdf )</th>
  211. <th>حذف</th>
  212. </tr>
  213. </thead>
  214. <tbody>
  215. <tr style="text-align:center;" *ngFor="let file of files; let i = index">
  216. <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput"/></td>
  217. <td style="position: relative;">
  218. <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" [disabled]="disabledInput"/>
  219. <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
  220. <span class="fileName-w">{{file.nameFile}}</span>
  221. </td>
  222. <td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)" [disabled]="disabledInput">حذف</button></td>
  223. </tr>
  224. </tbody>
  225. </table>
  226. </div>
  227. </div>
  228. </div>
  229. <div class="col-12" style="margin: 20px 0;">
  230. <div class="row">
  231. <div class="wrapper">
  232. <div class="askForOpinion-w" *ngIf="!isConfirmedStatus">
  233. <div class="col-12 col-md-12">
  234. <div class="form-group">
  235. <label style="float:right; margin: 20px;"> رأي القسم </label>
  236. <quill-editor id="description" name="actionOpinionForm" [(ngModel)]="actionOpinionForm.department_opinion" required>
  237. </quill-editor>
  238. </div>
  239. </div>
  240. </div>
  241. <div class="confirmed-w" *ngIf="isConfirmedStatus">
  242. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  243. <div class="form-group">
  244. <label for="startDate" style="float:right" >تاريخ البدايه</label>
  245. <div *ngIf='bindingDateSplitStart && typeMode'>
  246. <app-higri-date (onDatePicked)="getDate($event, 'start')" [myDate]="bindingDateSplitStart"></app-higri-date>
  247. </div>
  248. <!-- <div *ngIf='!typeMode'>
  249. <app-higri-date (onDatePicked)="getDate($event, 'start')" ></app-higri-date>
  250. </div> -->
  251. </div>
  252. </div>
  253. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  254. <div class="form-group">
  255. <label for="endDate" style="float:right" >تاريخ الإنتهاء</label>
  256. <div *ngIf='bindingDateSplitEnd && typeMode'>
  257. <app-end-higri-date (onDatePicked)="getDate($event, 'end')" [myEndDate]="bindingDateSplitEnd"> </app-end-higri-date>
  258. </div>
  259. <!-- <div *ngIf='!typeMode'>
  260. <app-end-higri-date (onDatePicked)="getDate($event, 'end')" ></app-end-higri-date>
  261. </div> -->
  262. </div>
  263. </div>
  264. <div class="col-12 col-sm-12 col-md-4 col-lg-4">
  265. <button class="btn btn-success" type="button" (click)="beginTrainning()" style="width: 100%; margin-top:30px;">بدء التدريب</button>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. </div>
  271. <div class="col-12">
  272. <button type="submit" class="btn btn-success rightW" [disabled]="checkSaveClick">حفظ</button>
  273. <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
  274. </div>
  275. </div>
  276. </form>
  277. </div>
  278. </div>
  279. </div>