Fix Part of oppia#9749: rule-editor, router.service, skill-editor-rou…

…ting.service, answer-group-editor and other services/componets (Question-creation service removed dead code) (oppia#15674)
anugoyal998 · Jul 15, 2022 · be25974 · be25974
1 parent 1825120
commit be25974
Show file tree

Hide file tree

Showing 90 changed files with 6,398 additions and 6,784 deletions.
diff --git a/core/templates/components/forms/custom-forms-directives/html-select.component.html b/core/templates/components/forms/custom-forms-directives/html-select.component.html
@@ -1,29 +1,29 @@
-<div uib-dropdown class="oppia-html-select">
-  <button uib-dropdown-toggle class="btn btn-secondary oppia-html-select-selection" type="button" aria-expanded="false" data-toggle="dropdown">
-    <div class="oppia-dropdown-menu-text">
-      <angular-html-bind class="oppia-html-select-selection-element" html-data="$ctrl.options[getSelectionIndex()].val">
-      </angular-html-bind>
-    </div>
-  </button>
-  <ul uib-dropdown-menu class="oppia-dropdown-menu">
-    <li ng-repeat="choice in $ctrl.options" class="dropdown-item float-left">
-      <a ng-click="select(choice.id)">
-        <angular-html-bind class="oppia-html-select-option e2e-test-html-multiple-select-option" html-data="choice.val">
-        </angular-html-bind>
-      </a>
-    </li>
-  </ul>
-</div>
+<mat-form-field class="oppia-html-select" appearance="fill">
+  <mat-label>Parameter:</mat-label>
+  <mat-select class="e2e-test-main-html-select-selector"
+              [(value)]="selectionAsString"
+              disableRipple>
+    <mat-option class="e2e-test-html-select-selector"
+                *ngFor="let choice of options; index as index"
+                value="{{(choice.id)}}"
+                (click)="updatedSelection()">
+      <angular-html-bind-wrapper classStr="oppia-html-select-option"
+                                 [htmlData]="choice.val">
+      </angular-html-bind-wrapper>
+    </mat-option>
+  </mat-select>
+</mat-form-field>
 
 <style>
   .oppia-html-select {
-    position: relative;
     width: 80%;
   }
+
   .oppia-html-select .oppia-html-select-selection-element {
     overflow: hidden;
     padding-top: 5px;
   }
+
   .oppia-html-select .oppia-html-select-selection-caret {
     bottom: 0;
     color: black;
@@ -33,6 +33,7 @@
     right: 5px;
     top: 0;
   }
+
   .oppia-html-select .oppia-html-select-selection {
     min-width: 24rem;
     overflow: hidden;
@@ -42,28 +43,34 @@
     text-decoration: none;
     width: 80%;
   }
+
   .oppia-html-select .oppia-html-select-option {
     margin-right: 10px;
     overflow: hidden;
     padding-top: 10px;
   }
+
   .oppia-html-select .oppia-html-select-option:hover {
     background: #1485e6;
     color: black;
   }
+
   .oppia-html-select .oppia-html-select-option oppia-noninteractive-image {
     display: inline-block;
     margin-bottom: 0;
   }
+
   .oppia-html-select .oppia-dropdown-menu {
     max-width: 80%;
     overflow: auto;
     width: auto;
   }
+
   .oppia-html-select .oppia-dropdown-menu-text {
     white-space: normal;
     word-wrap: break-word;
   }
+
   @media only screen and (max-width: 1023px) {
     .oppia-html-select .oppia-html-select-selection {
     min-width: 12rem;
@@ -75,6 +82,7 @@
     width: 80%;
   }
   }
+
   @media only screen and (max-width: 767px) {
     .oppia-html-select .oppia-html-select-selection {
     min-width: 12rem;

diff --git a/core/templates/components/forms/custom-forms-directives/html-select.component.spec.ts b/core/templates/components/forms/custom-forms-directives/html-select.component.spec.ts
@@ -12,39 +12,43 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { importAllAngularServices } from 'tests/unit-test-utils.ajs';
-
 /**
  * @fileoverview Unit tests for HTML Select Component.
  */
 
-describe('HTML Select Component', () => {
-  let $scope = null;
-  let $rootScope = null;
-  let ctrl = null;
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HtmlSelectComponent } from './html-select.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 
-  beforeEach(angular.mock.module('oppia'));
-  importAllAngularServices();
+describe('HTML Select Component', () => {
+  let fixture: ComponentFixture<HtmlSelectComponent>;
+  let component: HtmlSelectComponent;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [HtmlSelectComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
 
-  beforeEach(angular.mock.inject(function($injector, $componentController) {
-    $rootScope = $injector.get('$rootScope');
-    $scope = $rootScope.$new();
+  beforeEach(() => {
+    fixture = TestBed.createComponent(
+      HtmlSelectComponent);
+    component = fixture.componentInstance;
 
-    ctrl = $componentController('htmlSelect', {
-      $scope: $scope
-    });
-  }));
+    component.options = [
+      { id: '12', val: 'string' },
+      { id: '21', val: 'string' }];
 
-  it('should set selection ID', () => {
-    expect(ctrl.selection).toBe(undefined);
-    $scope.select('12');
-    expect(ctrl.selection).toBe('12');
+    component.ngOnInit();
   });
 
-  it('should get selection index', () => {
-    ctrl.options = [{id: '12'}, {id: '21'}];
-    ctrl.selection = '21';
+  it('should update Selection', () => {
+    component.selection = 1;
+    component.selectionAsString = '2';
+
+    component.updatedSelection();
 
-    expect($scope.getSelectionIndex()).toBe(1);
+    expect(component.selection).toBe(2);
   });
 });
diff --git a/core/templates/components/forms/custom-forms-directives/html-select.component.ts b/core/templates/components/forms/custom-forms-directives/html-select.component.ts
@@ -16,33 +16,27 @@
  * @fileoverview Component for the selection dropdown with HTML content.
  */
 
-require('directives/angular-html-bind.directive.ts');
-require('domain/utilities/url-interpolation.service.ts');
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
-// This component allows user to put html into select's options.
-// 'options' should be an array of objects containing attributes 'id' and 'val'
-// Attribute 'val' is presented to the user. After user selection, the
-// corresponding attribute 'id' is assigned to 'selection'.
+@Component({
+  selector: 'oppia-html-select',
+  templateUrl: './html-select.component.html'
+})
+export class HtmlSelectComponent implements OnInit {
+  @Input() options: { id: string; val: string }[];
+  @Input() selection: number;
+  selectionAsString: string;
+  @Output() onSelectionChange = new EventEmitter();
 
-angular.module('oppia').component('htmlSelect', {
-  bindings: {
-    options: '=',
-    selection: '='
-  },
-  template: require(
-    'components/forms/custom-forms-directives/html-select.component.html'),
-  controller: ['$scope', function($scope) {
-    let ctrl = this;
-    $scope.select = function(id) {
-      ctrl.selection = id;
-    };
+  ngOnInit(): void {
+    this.selectionAsString = String(this.selection);
+    if (this.selection === null || this.selection === undefined) {
+      this.selection = Number(this.options[0].id);
+    }
+  }
 
-    $scope.getSelectionIndex = function() {
-      for (var index = 0; index < ctrl.options.length; index++) {
-        if (ctrl.options[index].id === ctrl.selection) {
-          return index;
-        }
-      }
-    };
-  }]
-});
+  updatedSelection(): void {
+    this.selection = Number(this.selectionAsString);
+    this.onSelectionChange.emit(this.selection);
+  }
+}