Migrate directives/controllers to Angular components

bansalnitish commented 3 years ago

This issue aims to migrate directives/controllers written in AngularJS to modern Angular components.

We would request you to pick up any directive of your choice from core/templates/pages or core/templates/components. After you've picked up a directive, please mention the directive name that you want to take up. We will assign that particular directive to you and keep a track so that there is no duplication of work that goes along. After you're assigned, please go ahead and read this wiki page:https://github.com/oppia/oppia/wiki/Angular-Migration#implementation-details-to-migrate-directives, it has all the steps mentioned clearly that will help you to migrate the directives/controllers.

Also, make sure all the services that your directive is using are migrated to Angular.

Please feel free to reach out to @nithusha21 and @darksun27 in case you have any issues.

Some useful videos

How to find usages of your PR: https://vimeo.com/442416282 How to check your PR : https://vimeo.com/440915367 (This is an example on how to check topic landing page)

Unclaimed directives:

[ ] answer-submit-action.component.ts [difficult without separate work--talk to @srijanreddy98]
[ ] questions-list-select-skill-modal.controller @brianyou0
[ ] exploration-player-suggestion-modal.controller
[ ] exploration-player-page.component.ts
[ ] confirm-discard-changes-modal.template
[ ] confirm-leave-modal.template @ishar19
[ ] editor-reloading-modal.controller
[ ] exploration-metadata-modal.controller
[ ] exploration-publish-modal.template
[ ] exploration-save-modal.controller @JeeveshGarg
[ ] help-modal.controller @patrycjapraczyk
[x] lost-changes-modal.controller
[x] post-publish-modal.controller @heyimShivam
[x] save-validation-fail-modal.controller
[x] save-version-mismatch-modal.controller
[ ] state-diff-modal.controller @soumyo123-prog
[ ] welcome-modal.controller @ZhanLiangUF

Claimed directives:

[ ] admin-config-tab.directive.ts @benberk
[ ] information-card-modal.controller @benberk
[ ] side-navigation-bar.directive.ts - @cemcshane
[ ] review-test-page.directive.ts - @darksun27
[ ] collection-navbar.directive.ts - @hngerebara
[ ] exploration-title-editor.component.ts - @suryasiriki4
[ ] question-difficulty-selector.directive.ts - @Bhanu-mbvg
[ ] delete-account-page.component.ts @ritvikkhanijo
[ ] topic-selector.directive.ts @sayantan1413
[ ] classroom-page.component.ts @tanishq67
[ ] response-header.directive.ts @karma200020
[ ] skill-selector.directive.ts @jcqli
[ ] upload-activity-modal.controller.ts @mridul-netizen
[ ] continue-button.directive.ts @div-yam
[ ] select-skill-modal.controller.ts @krishita30j

Note: For a guide on how to access Oppia's webpages, see this.

bansalnitish commented 3 years ago

@orthodoxparadox can you please also add an unclaimed section of directives in this issue that follows all the prerequisites mentioned in the issue description so that other contributors can work on them as well when you get time? Please do not add any such directive that could not be migrated (either due to some AngularJS service or some it uses some above mentioned terms).

sainanee commented 3 years ago

@bansalnitish Sure, I'll do it by EOD today

bansalnitish commented 3 years ago

Thank you :)

sainanee commented 3 years ago

A few files to be migrated:

alert-message.directive.ts answer-content-modal.controller.ts confirm-or-cancel-modal.controller.ts side-navigation-bar.directive.ts apply-validation.directive.ts audio-file-uploader.directive.ts edit-thumbnail-modal.controller.ts html-select.directive.ts image-uploader.directive.ts forms/schema-based-editors/ (all files) forms/schema-viewers/ (all files)

bansalnitish commented 3 years ago

Added these all in the unclaimed section. Thanks @orthodoxparadox!

bansalnitish commented 3 years ago

Could you please do one thing? For forms/schema-based-editors/ (all files) and forms/schema-viewers/ (all files) can we please add all the directives listed in these? It would easy for contributors to pick up. They can just add a comment to claim a directive. Now, they would have to go manually in these directives and choose one.

(It is not urgent since we have few directives listed in unclaimed section but important)

bansalnitish commented 3 years ago

Please do not add it in the comment. Add an unclaimed section in the issue description and add these there.

github-actions[bot] commented 3 years ago

Hi @orthodoxparadox, thanks for proposing this as a good first issue. I am removing the label for now and looping in @Showtim3 to approve the label. It will be added back if approved. Thanks!

tianqi-wu commented 3 years ago

@Showtim3 @bansalnitish Can I do continue-button.directive.ts and correctness-footer.directive.ts? Thanks!

darksun27 commented 3 years ago

@Showtim3 @bansalnitish can you assign me subtopic-viewer-navbar-breadcrumb.directive.ts and subtopic-viewer-navbar-pre-logo-action.component.ts

sainanee commented 3 years ago

@darksun27 The first one is migrated already, I'll assign you the second one. Sorry that the list is not updated, it'll be done by Monday!

darksun27 commented 3 years ago

@orthodoxparadox can you assign me collection-permissions-card.directive.ts and review-test-page.directive.ts

sainanee commented 3 years ago

@darksun27 collection-permissions-card.directive.ts has unmigrated service dependencies. You can choose from the updated list! I've assigned you review-test-page.directive.ts

EricZLou commented 3 years ago

Hello! Can you assign me to exploration-player-page.component.ts? Thanks!

srijanreddy98 commented 3 years ago

Done! It is all yours @EricZLou.

Deepam101 commented 3 years ago

Hello! Can you please assign me with state-param-changes-editor.component.ts? Thanks!

hngerebara commented 3 years ago

@srijanreddy98 Please can you assign collection-navbar.directive.ts to me? Thanks

srijanreddy98 commented 3 years ago

@Deepam101 assigned you state-param-changes-editor.component.ts

@hngerebara assigned you collection-navbar.directive.ts

krishita30j commented 3 years ago

Hi, I would like to work on the followng files:

topics-and-skills-dashboard-navbar-breadcrumb.directive.ts
admin-prod-mode-activities-tab.directive.ts

Please assign the same to me. Thanks

mridul-netizen commented 3 years ago

can I work on continue-button.directive.ts?

srijanreddy98 commented 3 years ago

can I work on continue-button.directive.ts?

Hi @mridul-netizen, it is already being migrated by a contributor at the moment, can try for another file?

mridul-netizen commented 3 years ago

@srijanreddy98 ,would this one be okay? collection-local-nav.directive.ts

Rhytah commented 3 years ago

Hey @srijanreddy98 can I work on library-footer.component.ts ?

srijanreddy98 commented 3 years ago

@mridul-netizen and @Rhytah done! Assigned you the files respectively

gp201 commented 3 years ago

@srijanreddy98 Could you please assign circular-image.directive.ts to me? Thanks

suryasiriki4 commented 3 years ago

@srijanreddy98, can you please assign skill-selector.directive.ts to me? Thank you.

srijanreddy98 commented 3 years ago

@gp201, @suryasiriki4 Done! It is all yours.

suryasiriki4 commented 3 years ago

@srijanreddy98, can you please assign skill-selector.directive.ts to me? Thank you.

@srijanreddy98, I think I was a bit too ambitious. I would like to start with exploration-title-editor.component.ts. Can you please assign me this? Thank you.

srijanreddy98 commented 3 years ago

@suryasiriki4 done!

bhngupta commented 3 years ago

Hello, can you please assign me to question-difficulty-selector.directive.ts

srijanreddy98 commented 3 years ago

@Bhanu-mbvg done!

ritvikkhanijo commented 3 years ago

@srijanreddy98, can you please assign delete-account-page.component.ts to me? Thank you.

sayantan1413 commented 3 years ago

@kevintab95 Can you assign me the topic-selector.directive.ts ?

kevintab95 commented 3 years ago

@ritvikkhanijo, @sayantan1413 I've assigned you both the requested files. Thanks!

jcqli commented 3 years ago

Could I work on answer-submit-action.component.ts? Thanks!

BenHenning commented 3 years ago

Done @jcqli!

karma200020 commented 3 years ago

@srijanreddy98 @kevintab95 , can you please assign response-header.directive.ts to me? Thank you.

DubeySandeep commented 3 years ago

Assigning admin-prod-mode-activities-tab.directive.ts to @Nik-09 as per offline discussion.

@karma200020, I've assigned you to response-header.directive.ts. (Sorry for the delay.)

jcqli commented 3 years ago

The usage of angular-html-bind and just-in-time compile makes answer-submit-action.component.ts difficult to migrate without larger changes elsewhere -- could I be reassigned to skill-selector.directive.ts? Thanks in advance!

BenHenning commented 3 years ago

Done @jcqli!

tanishq67 commented 3 years ago

Can you please assign me classroom-page.component.ts? Thank you.

DubeySandeep commented 3 years ago

Hi @tanishq67, I've assigned you to classroom-page.component.ts.

tanishq67 commented 3 years ago

I have a query regarding the issue assigned to me - classroom-page.component.ts

The file's controller have

$filter and FATAL_ERROR_CODES, can you please explain me how shall I import them. Thank You

tanishq67 commented 3 years ago

@DubeySandeep @srijanreddy98 can anyone of you please help me with my query(https://github.com/oppia/oppia/issues/9749#issuecomment-767636026)

safwan20 commented 3 years ago

hello Guys , Hope you all doing well can you assigned me thread-table.component.ts ?? Thanks.

ashutoshc8101 commented 3 years ago

I want to work on audio-file-uploader.directive.ts. Will submit PR soon.

mridul-netizen commented 3 years ago

I am working on subtopic-viewer-navbar-pre-logo-action.component.ts please assign me the same

ashutoshc8101 commented 3 years ago

@DubeySandeep @srijanreddy98 @kevintab95 I want to work on thread-table.component.ts Please assign this to me.

ashutoshc8101 commented 3 years ago

@DubeySandeep I want to work on summary-list-header.directive.ts. Please assign this to me.

pankajdahiya008 commented 3 years ago

@DubeySandeep @srijanreddy98 @kevintab95 Please assign me outcome-feedback-editor.directive.ts. Thank You.

oppia / oppia