Frontend_V2: Add edit evaluation script to settings tab(#3451)

* add evaluation edit to settings tab * make two separate cards * minor fix * add one section * minor fixes * remove space * move both of the edit feature on one row * move both of them to next line * fix typo Co-authored-by: Rishabh Jain <rishabhjain2018@gmail.com>
Cloud-CV · Jun 15, 2021 · 4e4568e · 4e4568e
1 parent 39bd562
commit 4e4568e
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 97 deletions.
diff --git a/...nd_v2/src/app/components/challenge/challengeevaluation/challengeevaluation.component.html b/...nd_v2/src/app/components/challenge/challengeevaluation/challengeevaluation.component.html
@@ -6,18 +6,6 @@
           <h5 class="fw-light">Evaluation Criteria</h5>
           <div class="evaluation-details fs-16 fw-light" id="challenge-evaluation"></div>
         </div>
-        <div class="ev-action">
-          <div *ngIf="isChallengeHost" class="col-sm-1.5 col-xs-1.5 ev-upload-action">
-            <a class="pointer fs-15" (click)="editEvaluationScript()">
-              <i class="fa fa-file" aria-hidden="true"> </i>&nbsp;Upload
-            </a>
-          </div>
-          <div *ngIf="isChallengeHost" class="col-sm-1.5 col-xs-1.5">
-            <a class="pointer fs-16" (click)="editEvaluationCriteria()">
-              <i class="fa fa-pencil" aria-hidden="true"> </i>&nbsp;Edit
-            </a>
-          </div>
-        </div>
       </div>
     </div>
   </div>

diff --git a/...tend_v2/src/app/components/challenge/challengeevaluation/challengeevaluation.component.ts b/...tend_v2/src/app/components/challenge/challengeevaluation/challengeevaluation.component.ts
@@ -80,44 +80,6 @@ export class ChallengeevaluationComponent implements OnInit {
     this.tncElement.innerHTML = this.challenge['terms_and_conditions'];
   }
 
-  /**
-   * Edit evaluation criteria of the challenge
-   */
-  editEvaluationCriteria() {
-    const SELF = this;
-    SELF.apiCall = (params) => {
-      const BODY = JSON.stringify(params);
-      SELF.apiService
-        .patchUrl(SELF.endpointsService.editChallengeDetailsURL(SELF.challenge.creator.id, SELF.challenge.id), BODY)
-        .subscribe(
-          (data) => {
-            SELF.challenge.evaluation_details = data.evaluation_details;
-            this.updateView();
-            SELF.globalService.showToast('success', 'The evaluation details is successfully updated!', 5);
-          },
-          (err) => {
-            SELF.globalService.handleApiError(err, true);
-            SELF.globalService.showToast('error', err);
-          },
-          () => this.logger.info('EDIT-CHALLENGE-EVALUATION-DETAILS-FINISHED')
-        );
-    };
-
-    /**
-     * Parameters of the modal
-     */
-    const PARAMS = {
-      title: 'Edit Evaluation Details',
-      label: 'evaluation_details',
-      isEditorRequired: true,
-      editorContent: this.challenge.evaluation_details,
-      confirm: 'Submit',
-      deny: 'Cancel',
-      confirmCallback: SELF.apiCall,
-    };
-    SELF.globalService.showModal(PARAMS);
-  }
-
   /**
    * Edit terms and conditions of the challenge
    */
@@ -155,50 +117,4 @@ export class ChallengeevaluationComponent implements OnInit {
     };
     SELF.globalService.showModal(PARAMS);
   }
-
-  /**
-   * Edit evaluation script of the challenge
-   */
-  editEvaluationScript() {
-    const SELF = this;
-    SELF.apiCall = (params) => {
-      const FORM_DATA: FormData = new FormData();
-      FORM_DATA.append('evaluation_script', params['evaluation_script']);
-      SELF.apiService
-        .patchFileUrl(
-          SELF.endpointsService.editChallengeDetailsURL(SELF.challenge.creator.id, SELF.challenge.id),
-          FORM_DATA
-        )
-        .subscribe(
-          (data) => {
-            SELF.globalService.showToast('success', 'The evaluation script is successfully updated!');
-          },
-          (err) => {
-            SELF.globalService.showToast('error', err);
-          },
-          () => this.logger.info('EDIT-EVALUATION-SCRIPT-FINISHED')
-        );
-    };
-
-    /**
-     * Parameters of the modal
-     */
-    const PARAMS = {
-      title: 'Edit Evaluation Script',
-      confirm: 'Submit',
-      deny: 'Cancel',
-      form: [
-        {
-          name: 'evaluationScript',
-          isRequired: true,
-          label: 'evaluation_script',
-          placeholder: '',
-          type: 'file',
-          value: '',
-        },
-      ],
-      confirmCallback: SELF.apiCall,
-    };
-    SELF.globalService.showModal(PARAMS);
-  }
 }
diff --git a/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.html b/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.html
@@ -36,7 +36,6 @@ <h5 class="fw-light">Challenge Settings</h5>
           <strong class="text-light-black">Starts on:</strong>
           {{ challenge['start_date'] | date: 'medium' }} {{ challenge['start_zone'] }}
         </span>
-        &nbsp;
         <span *ngIf="isChallengeHost" class="fs-16 fw-light">
           <a class="pointer fs-16" (click)="challengeDateDialog()">
             <i class="fa fa-pencil" aria-hidden="true"></i>
@@ -72,6 +71,32 @@ <h5 class="fw-light">Challenge Settings</h5>
       </div>
     </div>
 
+    <!-- Evaluations and Annotations -->
+    <div class="row settings-section">
+      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
+        <span class="fw-light fs-18">Evaluation and Annotations</span>
+      </div>
+      <br />
+      <div class="ev-action">
+        <div *ngIf="isChallengeHost" class="col-sm-1.5 col-xs-1.5 ev-upload-action">
+          <!-- Evaluations Criteria Description -->
+          <span class="fs-16 fw-light">
+            <strong class="text-light-black">Evaluation Criteria </strong>
+          </span>
+          <a class="pointer fs-16" (click)="editEvaluationCriteria()">
+            <i class="fa fa-pencil" aria-hidden="true"> </i>
+          </a>&nbsp;&nbsp;
+          <!-- Evaluation Script -->
+          <span class="fs-16 fw-light">
+            <strong class="text-light-black">Evaluation Script </strong>
+          </span>
+          <a class="pointer fs-15" (click)="editEvaluationScript()">
+            <i class="fa fa-file" aria-hidden="true"> </i>
+          </a>
+        </div>
+      </div>
+    </div>
+
     <div class="row settings-section">
       <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
         <span class="fw-light fs-18">Banned emails Ids:</span>

diff --git a/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.ts b/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.ts
@@ -388,6 +388,90 @@ export class ChallengesettingsComponent implements OnInit, OnDestroy {
     SELF.globalService.showModal(PARAMS);
   }
 
+  /**
+   * Edit evaluation criteria of the challenge
+   */
+  editEvaluationCriteria() {
+    const SELF = this;
+    SELF.apiCall = (params) => {
+      const BODY = JSON.stringify(params);
+      SELF.apiService
+        .patchUrl(SELF.endpointsService.editChallengeDetailsURL(SELF.challenge.creator.id, SELF.challenge.id), BODY)
+        .subscribe(
+          (data) => {
+            SELF.challenge.evaluation_details = data.evaluation_details;
+            this.updateView();
+            SELF.globalService.showToast('success', 'The evaluation details is successfully updated!', 5);
+          },
+          (err) => {
+            SELF.globalService.handleApiError(err, true);
+            SELF.globalService.showToast('error', err);
+          },
+          () => this.logger.info('EDIT-CHALLENGE-EVALUATION-DETAILS-FINISHED')
+        );
+    };
+
+    /**
+     * Parameters of the modal
+     */
+    const PARAMS = {
+      title: 'Edit Evaluation Details',
+      label: 'evaluation_details',
+      isEditorRequired: true,
+      editorContent: this.challenge.evaluation_details,
+      confirm: 'Submit',
+      deny: 'Cancel',
+      confirmCallback: SELF.apiCall,
+    };
+    SELF.globalService.showModal(PARAMS);
+  }
+
+  /**
+   * Edit evaluation script of the challenge
+   */
+  editEvaluationScript() {
+    const SELF = this;
+    SELF.apiCall = (params) => {
+      const FORM_DATA: FormData = new FormData();
+      FORM_DATA.append('evaluation_script', params['evaluation_script']);
+      SELF.apiService
+        .patchFileUrl(
+          SELF.endpointsService.editChallengeDetailsURL(SELF.challenge.creator.id, SELF.challenge.id),
+          FORM_DATA
+        )
+        .subscribe(
+          (data) => {
+            SELF.globalService.showToast('success', 'The evaluation script is successfully updated!');
+          },
+          (err) => {
+            SELF.globalService.showToast('error', err);
+          },
+          () => this.logger.info('EDIT-EVALUATION-SCRIPT-FINISHED')
+        );
+    };
+
+    /**
+     * Parameters of the modal
+     */
+    const PARAMS = {
+      title: 'Edit Evaluation Script',
+      confirm: 'Submit',
+      deny: 'Cancel',
+      form: [
+        {
+          name: 'evaluationScript',
+          isRequired: true,
+          label: 'evaluation_script',
+          placeholder: '',
+          type: 'file',
+          value: '',
+        },
+      ],
+      confirmCallback: SELF.apiCall,
+    };
+    SELF.globalService.showModal(PARAMS);
+  }
+
   /**
    * Edit challenge image function
    */