From ad4f5ee0f909533b67b232b31dd1e678990c101b Mon Sep 17 00:00:00 2001
From: Caroline Desprat <cdesprat@icij.org>
Date: Tue, 26 Mar 2024 11:38:09 +0000
Subject: [PATCH] refactor: remove inline template + lint

---
 .../src/views/TaskRecordReviewList.vue        | 371 +++++++++---------
 1 file changed, 195 insertions(+), 176 deletions(-)

diff --git a/prophecies/apps/frontend/src/views/TaskRecordReviewList.vue b/prophecies/apps/frontend/src/views/TaskRecordReviewList.vue
index 614f4ed0..e3ead555 100644
--- a/prophecies/apps/frontend/src/views/TaskRecordReviewList.vue
+++ b/prophecies/apps/frontend/src/views/TaskRecordReviewList.vue
@@ -22,7 +22,6 @@ import User from '@/models/User'
 
 export default {
   name: 'TaskRecordReviewList',
-  mixins: [taskRecordReviewFiltersMixin],
   components: {
     AppBreadcrumb,
     AppHeader,
@@ -38,12 +37,13 @@ export default {
     TaskRecordReviewPageParams,
     TaskRecordReviewTutorial
   },
+  mixins: [taskRecordReviewFiltersMixin],
   props: {
     taskId: {
       type: [Number, String]
     }
   },
-  data () {
+  data() {
     return {
       countBy: [],
       pagination: null,
@@ -53,100 +53,66 @@ export default {
       taskRecordReviewIds: []
     }
   },
-  watch: {
-    pageNumber (value) {
-      if (this.pagination && this.pagination.page !== value) {
-        return this.waitFor(this.fetchTaskRecordReviewsLoader, this.fetchTaskRecordReviews)
-      }
-    },
-    pageSize () {
-      return this.waitFor(this.fetchTaskRecordReviewsLoader, this.fetchTaskRecordReviews)
-    },
-    sort () {
-      return this.waitFor(this.fetchTaskRecordReviewsLoader, this.fetchTaskRecordReviews)
-    },
-    routeFilters (value, previousValue) {
-      if (!isEqual(value, previousValue)) {
-        return this.waitFor(this.fetchTaskRecordReviewsLoader, this.fetchTaskRecordReviews)
-      }
-    },
-    taskRecordReviewIds (value) {
-      // Maintain a clean list of selected ids
-      Object.entries(this.selectedIds).forEach(([id]) => {
-        // The task record review is not present on the page anymore...
-        // It needs to be deleted from the list of selected id!
-        if (!value.includes(id)) {
-          this.$delete(this.selectedIds, id)
-        }
-      })
-    }
-  },
-  created () {
-    this.$root.$on('prophecies::toggleCinematicView', () => {
-      this.showCinematicView = !this.showCinematicView
-    })
-    return this.setup()
-  },
   computed: {
     selectAll: {
-      set (checked) {
+      set(checked) {
         this.taskRecordReviews.forEach(({ id }) => {
           this.$set(this.selectedIds, id, checked)
         })
       },
-      get () {
+      get() {
         const selectedIds = values(this.selectedIds)
         return this.taskRecordReviews.length > 0 && compact(selectedIds).length === this.taskRecordReviews.length
       }
     },
-    pageNumber () {
+    pageNumber() {
       return Number(this.$route.query['page[number]']) || 1
     },
     pageSize: {
-      get () {
+      get() {
         return String(this.$route.query['page[size]'] || '10')
       },
-      set (pageSize) {
+      set(pageSize) {
         const query = { ...this.$route.query, 'page[size]': pageSize }
         this.$router.push({ path: this.$route.path, query }, noop)
       }
     },
     sort: {
-      get () {
+      get() {
         return this.$route.query.sort || 'task_record__id'
       },
-      set (sort) {
+      set(sort) {
         if (isEqual({ ...this.$route.query, sort }, this.$route.query)) {
           const query = { 'page[size]': this.pageSize, ...this.routeFiltersQueryParams }
           this.$router.push({ path: this.$route.path, query }, noop)
         }
       }
     },
-    hasSorting () {
+    hasSorting() {
       return this.sort !== 'task_record__id'
     },
-    hasFilters () {
+    hasFilters() {
       return !!keys(this.routeFilters).length
     },
-    hasSelectedAndLockedRecords () {
+    hasSelectedAndLockedRecords() {
       return this.selectedAndLockedIdsCount > 0
     },
-    hasSelectedRecords () {
+    hasSelectedRecords() {
       return this.selectedIdsCount > 0
     },
-    showAppliedFilters () {
+    showAppliedFilters() {
       return !this.showFilters && (this.hasFilters || this.hasSorting)
     },
-    isBulkSelectChoiceFormDisabled () {
+    isBulkSelectChoiceFormDisabled() {
       return !this.isTaskOpen || !this.hasSelectedRecords || this.$wait.is(this.bulkSelectChoiceLoader)
     },
-    selectedIdsCount () {
+    selectedIdsCount() {
       return this.selectedIdsList.length
     },
-    selectedAndLockedIdsCount () {
+    selectedAndLockedIdsCount() {
       return this.selectedAndLockedIdsList.length
     },
-    selectedIdsList () {
+    selectedIdsList() {
       return Object.entries(this.selectedIds).reduce((list, [id, selected]) => {
         if (selected) {
           list.push(id)
@@ -154,21 +120,21 @@ export default {
         return list
       }, [])
     },
-    selectedAndLockedIdsList () {
-      return filter(this.selectedIdsList, id => {
+    selectedAndLockedIdsList() {
+      return filter(this.selectedIdsList, (id) => {
         return this.isTaskRecordReviewLocked(id)
       })
     },
-    selectedAndUnlockedIdsList () {
-      return filter(this.selectedIdsList, id => {
+    selectedAndUnlockedIdsList() {
+      return filter(this.selectedIdsList, (id) => {
         return !this.isTaskRecordReviewLocked(id)
       })
     },
-    filters () {
+    filters() {
       // Method from the mixins
       return this.getTaskFilters(this.task)
     },
-    otherQueryParams () {
+    otherQueryParams() {
       return Object.entries(this.$route.query).reduce((all, [key, value]) => {
         if (!this.isFiltersParam(this.filters, { key })) {
           all[key] = value
@@ -176,7 +142,7 @@ export default {
         return all
       }, {})
     },
-    routeFiltersQueryParams () {
+    routeFiltersQueryParams() {
       return Object.entries(this.$route.query).reduce((all, [key, value]) => {
         if (this.isFiltersParam(this.filters, { key })) {
           all[key] = value
@@ -185,7 +151,7 @@ export default {
       }, {})
     },
     routeFilters: {
-      get () {
+      get() {
         return Object.entries(this.$route.query).reduce((all, [key, value]) => {
           if (this.isFiltersParam(this.filters, { key })) {
             all[key] = value
@@ -193,7 +159,7 @@ export default {
           return all
         }, {})
       },
-      set (routeFiltersQueryParams) {
+      set(routeFiltersQueryParams) {
         if (!isEqual(routeFiltersQueryParams, this.routeFiltersQueryParams)) {
           const otherQueryParams = this.otherQueryParams
           const query = { ...otherQueryParams, ...routeFiltersQueryParams, 'page[number]': 1 }
@@ -201,29 +167,24 @@ export default {
         }
       }
     },
-    appliedRouteFiltersQueryParams () {
+    appliedRouteFiltersQueryParams() {
       return this.mapRouteFiltersToAppliedQueryParams(this.routeFilters, this.task)
     },
-    task () {
-      return Task
-        .query()
+    task() {
+      return Task.query()
         .with('checkers')
         .with('choiceGroup')
         .with('choiceGroup.alternativeValues')
         .with('choiceGroup.choices')
         .find(this.taskId)
     },
-    taskIsNotOpened () {
+    taskIsNotOpened() {
       return this.task.status !== TaskStatusEnum.OPEN
     },
-    taskRecordReviews () {
-      return TaskRecordReview
-        .query()
-        .whereIdIn(this.taskRecordReviewIds)
-        .with('taskRecord')
-        .get()
+    taskRecordReviews() {
+      return TaskRecordReview.query().whereIdIn(this.taskRecordReviewIds).with('taskRecord').get()
     },
-    taskRecordReviewsParams () {
+    taskRecordReviewsParams() {
       return {
         ...this.appliedRouteFiltersQueryParams,
         'filter[task_record__task]': this.taskId,
@@ -234,40 +195,86 @@ export default {
         sort: this.sort
       }
     },
-    isTaskOpen () {
+    isTaskOpen() {
       return this.task && this.task.status === TaskStatusEnum.OPEN
     },
-    trailingTaskRecordReview () {
+    trailingTaskRecordReview() {
       return this.taskRecordReviews[this.taskRecordReviews.length - 1]
     },
-    fetchAllLoader () {
+    fetchAllLoader() {
       return uniqueId('load-all-task-record-review-')
     },
-    fetchTaskRecordReviewsLoader () {
+    fetchTaskRecordReviewsLoader() {
       return uniqueId('load-task-record-review-')
     },
-    bulkSelectChoiceLoader () {
+    bulkSelectChoiceLoader() {
       return uniqueId('bulk-select-choice-')
     },
-    firstPendingTaskRecordReview () {
+    firstPendingTaskRecordReview() {
       return TaskRecordReview.query()
         .whereIdIn(this.taskRecordReviewIds)
         .where('status', 'PENDING')
         .where('locked', false)
         .first()
     },
-    firstPendingTaskRecordReviewId () {
+    firstPendingTaskRecordReviewId() {
       return get(this, 'firstPendingTaskRecordReview.id')
     },
-    filtersTogglerVariant () {
+    filtersTogglerVariant() {
       return this.showFilters ? 'primary' : 'outline-primary'
     },
-    tipQueryParams () {
+    tipQueryParams() {
       return { 'filter[task]': this.task?.id, 'filter[project]': this.task?.projectId }
+    },
+    selectedResults() {
+      return this.$tc('taskRecordReviewList.selectedResults', this.selectedIdsCount)
+    },
+    lockedResults() {
+      let lockedResults = ''
+      if (this.taskIsNotOpened) {
+        lockedResults = `(${this.$tc('taskRecordReviewList.lockedResults', this.selectedIdsCount)})`
+      } else if (this.hasSelectedAndLockedRecords) {
+        lockedResults = `(${this.$tc('taskRecordReviewList.lockedResults', this.selectedAndLockedIdsCount)})`
+      }
+      return lockedResults
     }
   },
+  watch: {
+    pageNumber(value) {
+      if (this.pagination && this.pagination.page !== value) {
+        return this.waitFor(this.fetchTaskRecordReviewsLoader, this.fetchTaskRecordReviews)
+      }
+    },
+    pageSize() {
+      return this.waitFor(this.fetchTaskRecordReviewsLoader, this.fetchTaskRecordReviews)
+    },
+    sort() {
+      return this.waitFor(this.fetchTaskRecordReviewsLoader, this.fetchTaskRecordReviews)
+    },
+    routeFilters(value, previousValue) {
+      if (!isEqual(value, previousValue)) {
+        return this.waitFor(this.fetchTaskRecordReviewsLoader, this.fetchTaskRecordReviews)
+      }
+    },
+    taskRecordReviewIds(value) {
+      // Maintain a clean list of selected ids
+      Object.entries(this.selectedIds).forEach(([id]) => {
+        // The task record review is not present on the page anymore...
+        // It needs to be deleted from the list of selected id!
+        if (!value.includes(id)) {
+          this.$delete(this.selectedIds, id)
+        }
+      })
+    }
+  },
+  created() {
+    this.$root.$on('prophecies::toggleCinematicView', () => {
+      this.showCinematicView = !this.showCinematicView
+    })
+    return this.setup()
+  },
   methods: {
-    async setup () {
+    async setup() {
       try {
         await this.waitFor(this.fetchAllLoader, this.fetchAll)
         this.$core.setPageTitle(this.task.name)
@@ -276,54 +283,54 @@ export default {
         this.$router.replace({ name: 'error', params: { title, error } })
       }
     },
-    applyFilters (query) {
+    applyFilters(query) {
       return this.$router.push({ path: this.$route.path, query }, noop)
     },
-    applyPageParams ({ pageSize, sort }) {
+    applyPageParams({ pageSize, sort }) {
       this.$bvModal.hide('modal-page-params')
       const query = { ...this.$route.query, 'page[size]': pageSize, sort }
       return this.$router.push({ path: this.$route.path, query }, noop)
     },
-    clearFilters () {
+    clearFilters() {
       this.$set(this, 'routeFilters', {})
     },
-    async fetchTask () {
+    async fetchTask() {
       const params = { include: 'project,checkers,templateSetting' }
       return Task.api().find(this.taskId, { params })
     },
-    async fetchChoiceGroup () {
+    async fetchChoiceGroup() {
       const params = { include: 'alternative_values,choices' }
       return ChoiceGroup.api().find(this.task.choiceGroupId, { params })
     },
-    async fetchTaskRecordReviews () {
+    async fetchTaskRecordReviews() {
       const params = this.taskRecordReviewsParams
       const { response } = await TaskRecordReview.api().get('', { params })
       const countBy = get(response, 'data.meta.countBy', null)
       const pagination = get(response, 'data.meta.pagination', null)
-      const taskRecordReviewIds = get(response, 'data.data', []).map(t => t.id)
+      const taskRecordReviewIds = get(response, 'data.data', []).map((t) => t.id)
       this.$set(this, 'countBy', countBy)
       this.$set(this, 'pagination', pagination)
       this.$set(this, 'taskRecordReviewIds', taskRecordReviewIds)
     },
-    async goToPage (pageNumber) {
+    async goToPage(pageNumber) {
       const query = { ...this.$route.query, 'page[number]': pageNumber }
       await this.$router.push({ path: this.$route.path, query }, noop)
     },
-    async goToNextPage () {
+    async goToNextPage() {
       const currentPage = parseInt(this.pageNumber)
       // Don't go to a page if it doesn't exist
       if (currentPage < parseInt(this.pagination.pages)) {
         return this.goToPage(currentPage + 1)
       }
     },
-    async goToPreviousPage () {
+    async goToPreviousPage() {
       const currentPage = parseInt(this.pageNumber)
       // Don't go to a page if it doesn't exist
       if (currentPage > 1) {
         return this.goToPage(currentPage - 1)
       }
     },
-    async scrollToActiveTaskRecordReviewCard ({ id }) {
+    async scrollToActiveTaskRecordReviewCard({ id }) {
       if (!this.firstPendingTaskRecordReview && this.isTrailingTaskRecordReview(id)) {
         return this.goToNextPage()
       }
@@ -334,34 +341,34 @@ export default {
         element.scrollIntoView(options)
       }
     },
-    isTaskRecordReviewActive (id) {
+    isTaskRecordReviewActive(id) {
       const isSelected = this.isTaskRecordReviewSelected(id)
       return !this.showCinematicView && !isSelected && this.firstPendingTaskRecordReviewId === id
     },
-    isTrailingTaskRecordReview (id) {
+    isTrailingTaskRecordReview(id) {
       return this.trailingTaskRecordReview.id === id
     },
-    isTaskRecordReviewSelected (id) {
+    isTaskRecordReviewSelected(id) {
       return !!this.selectedIds[id]
     },
-    isTaskRecordReviewLocked (id) {
+    isTaskRecordReviewLocked(id) {
       const review = TaskRecordReview.query().with('taskRecord').find(id)
       // When task record is not found, we assume the review is not locked
       return get(review, 'taskRecord.locked', false)
     },
-    isTaskRecordReviewFrozen (id) {
+    isTaskRecordReviewFrozen(id) {
       const isLoading = this.$wait.is(this.bulkSelectChoiceLoader)
       return isLoading && this.isTaskRecordReviewSelected(id)
     },
-    selectTaskRecordReview (id, toggler) {
+    selectTaskRecordReview(id, toggler) {
       this.$set(this.selectedIds, id, toggler)
     },
-    async bulkSelectChoiceWithLoader (data) {
+    async bulkSelectChoiceWithLoader(data) {
       this.$wait.start(this.bulkSelectChoiceLoader)
       await this.bulkSelectChoice(data)
       this.$wait.end(this.bulkSelectChoiceLoader)
     },
-    async bulkSelectChoice (data) {
+    async bulkSelectChoice(data) {
       // Avoid trying to update locked reviews
       const ids = this.selectedAndUnlockedIdsList
       // We use a dedicated method that will format the data for the JSONAPI spec
@@ -374,20 +381,20 @@ export default {
       // so we need to fetch them ourselves
       await this.fetchTaskRecordReviews()
     },
-    async fetchAll () {
+    async fetchAll() {
       await this.fetchTask()
       await this.fetchChoiceGroup()
       await this.fetchTaskRecordReviews()
     },
-    async waitFor (loader, fn) {
+    async waitFor(loader, fn) {
       this.$wait.start(loader)
       await fn()
       this.$wait.end(loader)
     },
-    toggleFilters () {
+    toggleFilters() {
       this.showFilters = !this.showFilters
     },
-    toggleSelectAll () {
+    toggleSelectAll() {
       this.selectAll = !this.selectAll
     }
   }
@@ -396,68 +403,81 @@ export default {
 
 <template>
   <div class="task-record-review-list">
-    <b-modal v-if="pagination"
-             v-model="showCinematicView"
-             content-class="bg-transparent border-0 shadow-none"
-             dialog-class="mw-100 mx-5"
-             header-class="border-0 p-0"
-             hide-backdrop
-             hide-footer
-             body-class="px-0"
-             lazy
-             modal-class="task-record-review-list__cinematic-view"
-             no-close-on-backdrop
-             no-close-on-esc
-             size="xl">
+    <b-modal
+      v-if="pagination"
+      v-model="showCinematicView"
+      content-class="bg-transparent border-0 shadow-none"
+      dialog-class="mw-100 mx-5"
+      header-class="border-0 p-0"
+      hide-backdrop
+      hide-footer
+      body-class="px-0"
+      lazy
+      modal-class="task-record-review-list__cinematic-view"
+      no-close-on-backdrop
+      no-close-on-esc
+      size="xl"
+    >
       <template #modal-header="{ close }">
         <b-button variant="link" class="p-0" @click="close()">
-          {{$t('taskRecordReviewList.backToListView')}}
+          {{ $t('taskRecordReviewList.backToListView') }}
         </b-button>
       </template>
-      <cinematic-view @previousPage="goToPreviousPage"
-                      @nextPage="goToNextPage"
-                      :buzy="$wait.is(fetchTaskRecordReviewsLoader)"
-                      :page-number="Number(pageNumber)"
-                      :total-rows="pagination.count"
-                      :per-page="Number(pageSize)"
-                      :task-record-review-ids="taskRecordReviewIds" />
+      <cinematic-view
+        :buzy="$wait.is(fetchTaskRecordReviewsLoader)"
+        :page-number="Number(pageNumber)"
+        :total-rows="pagination.count"
+        :per-page="Number(pageSize)"
+        :task-record-review-ids="taskRecordReviewIds"
+        @previousPage="goToPreviousPage"
+        @nextPage="goToNextPage"
+      />
     </b-modal>
     <div class="d-flex align-items-center">
       <app-breadcrumb v-if="task">
         {{ task.name }}
       </app-breadcrumb>
-      <app-header class="flex-grow-1" :tip-query-params="tipQueryParams"/>
+      <app-header class="flex-grow-1" :tip-query-params="tipQueryParams" />
     </div>
     <div class="task-record-review-list__container">
       <div class="container-fluid p-5">
         <app-waiter :loader="fetchAllLoader" waiter-class="my-5 mx-auto d-block">
           <div v-if="task && task.userTaskRecordsCount">
-            <div class="row mb-4" v-if="pagination">
+            <div v-if="pagination" class="row mb-4">
               <div class="d-none d-lg-block col-lg-3">
                 <b-btn variant="outline-dark" class="border" tag="label">
                   <span class="custom-control custom-checkbox">
-                    <input class="custom-control-input" v-model="selectAll" type="checkbox" id="select-all-input" />
-                    <div class="task-record-review-list__container__select-all custom-control-label" for="select-all-input">
-                      {{ $tc('taskRecordReviewList.selectAll',  taskRecordReviews.length ) }}
+                    <input id="select-all-input" v-model="selectAll" class="custom-control-input" type="checkbox" />
+                    <div
+                      class="task-record-review-list__container__select-all custom-control-label"
+                      for="select-all-input"
+                    >
+                      {{ $tc('taskRecordReviewList.selectAll', taskRecordReviews.length) }}
                       <shortkey-badge
-                        @shortkey.native="toggleSelectAll()"
+                        v-shortkey="['ctrl', 'a']"
                         :value="['Ctrl', 'a']"
                         class="ml-2"
-                        v-shortkey="['ctrl', 'a']" />
+                        @shortkey.native="toggleSelectAll()"
+                      />
                     </div>
                   </span>
                 </b-btn>
               </div>
-              <div class="col-8 col-lg-6 text-lg-center" v-if="pagination">
+              <div v-if="pagination" class="col-8 col-lg-6 text-lg-center">
                 <div class="task-record-review-list__container__pagination">
                   <custom-pagination
                     compact
                     class="pl-0"
-                    @input="goToPage"
                     :value="Number(pageNumber)"
                     :total-rows="pagination.count"
-                    :per-page="Number(pageSize)" />
-                  <b-button v-b-modal.modal-page-params variant="link" class="task-record-review-list__container__pagination__toggler text-secondary px-2">
+                    :per-page="Number(pageSize)"
+                    @input="goToPage"
+                  />
+                  <b-button
+                    v-b-modal.modal-page-params
+                    variant="link"
+                    class="task-record-review-list__container__pagination__toggler text-secondary px-2"
+                  >
                     <settings-icon size="1.5x" />
                   </b-button>
                   <b-modal id="modal-page-params" hide-header hide-footer>
@@ -466,7 +486,8 @@ export default {
                       :page-size="pageSize"
                       :sort="sort"
                       @submit="applyPageParams"
-                      @cancel="$bvModal.hide('modal-page-params')" />
+                      @cancel="$bvModal.hide('modal-page-params')"
+                    />
                   </b-modal>
                 </div>
               </div>
@@ -474,39 +495,37 @@ export default {
                 <div class="ml-auto">
                   <b-btn :variant="filtersTogglerVariant" class="border font-weight-bold" @click="toggleFilters">
                     <filter-icon size="1x" class="mr-1" />
-                    {{$t('taskRecordReviewList.filters')}}
+                    {{ $t('taskRecordReviewList.filters') }}
                   </b-btn>
                 </div>
               </div>
             </div>
             <b-collapse :visible="showFilters">
-              <task-record-review-filters
-                :route-filters.sync="routeFilters"
-                :task-id="taskId" />
+              <task-record-review-filters :route-filters.sync="routeFilters" :task-id="taskId" />
             </b-collapse>
-            <ul class="list-inline d-flex align-items-center" v-if="pagination">
-              <li class="list-inline-item font-weight-bold">
-                {{ pagination.count }} results
-              </li>
+            <ul v-if="pagination" class="list-inline d-flex align-items-center">
+              <li class="list-inline-item font-weight-bold">{{ pagination.count }} results</li>
               <li class="list-inline-item">
-                <b-btn variant="link" @click="clearFilters()" v-if="hasFilters">
-                  {{$t('taskRecordReviewList.clearFilters')}}
+                <b-btn v-if="hasFilters" variant="link" @click="clearFilters()">
+                  {{ $t('taskRecordReviewList.clearFilters') }}
                 </b-btn>
               </li>
               <li class="list-inline-item">
-                <task-record-review-applied-sorting
-                  :sort.sync="sort"
-                  class="d-inline-block" />
+                <task-record-review-applied-sorting :sort.sync="sort" class="d-inline-block" />
               </li>
-              <li class="task-record-review-list__container__selected-results list-inline-item font-weight-bold" v-if="hasSelectedRecords">
-                {{ $tc('taskRecordReviewList.selectedResults',  selectedIdsCount ) }} <template v-if="taskIsNotOpened">({{ $tc('taskRecordReviewList.lockedResults',  selectedIdsCount ) }})</template><template v-else-if="hasSelectedAndLockedRecords">({{ $tc('taskRecordReviewList.lockedResults',  selectedAndLockedIdsCount ) }})</template>
+              <li
+                v-if="hasSelectedRecords"
+                class="task-record-review-list__container__selected-results list-inline-item font-weight-bold"
+              >
+                {{ selectedResults }} {{ lockedResults }}
               </li>
             </ul>
             <b-collapse :visible="showAppliedFilters">
               <task-record-review-applied-filters
                 :route-filters.sync="routeFilters"
                 :task-id="taskId"
-                class="d-inline-block" />
+                class="d-inline-block"
+              />
             </b-collapse>
             <b-collapse :visible="hasSelectedRecords">
               <task-record-review-bulk-choice-form
@@ -514,26 +533,29 @@ export default {
                 :disabled="isBulkSelectChoiceFormDisabled"
                 :task-id="taskId"
                 activate-shortkeys
-                @submit="bulkSelectChoiceWithLoader" />
+                @submit="bulkSelectChoiceWithLoader"
+              />
             </b-collapse>
             <task-record-review-tutorial />
             <app-waiter :loader="fetchTaskRecordReviewsLoader" waiter-class="my-5 mx-auto d-block">
               <div v-for="{ id } in taskRecordReviews" :key="id" class="mb-5">
                 <task-record-review-card-wrapper
-                  @update="scrollToActiveTaskRecordReviewCard({ id })"
-                  @update:selected="selectTaskRecordReview(id, $event)"
                   :task-record-review-id="id"
                   :active="isTaskRecordReviewActive(id)"
                   :selected="isTaskRecordReviewSelected(id)"
-                  :frozen="isTaskRecordReviewFrozen(id)" />
+                  :frozen="isTaskRecordReviewFrozen(id)"
+                  @update="scrollToActiveTaskRecordReviewCard({ id })"
+                  @update:selected="selectTaskRecordReview(id, $event)"
+                />
               </div>
               <custom-pagination
-                compact
                 v-if="pagination"
-                @input="goToPage"
+                compact
                 :value="Number(pageNumber)"
                 :total-rows="pagination.count"
-                :per-page="Number(pageSize)" />
+                :per-page="Number(pageSize)"
+                @input="goToPage"
+              />
             </app-waiter>
           </div>
           <empty-placeholder v-else :title="$t('taskRecordReviewList.noRecordsAssigned')" />
@@ -544,23 +566,20 @@ export default {
 </template>
 
 <style lang="scss">
-  .task-record-review-list {
+.task-record-review-list {
+  &__cinematic-view {
+    background: $primary-10;
+  }
 
-    &__cinematic-view {
-      background: $primary-10;
+  &__container {
+    &__pagination {
+      display: inline-flex;
+      align-items: center;
     }
 
-    &__container {
-
-      &__pagination {
-        display: inline-flex;
-        align-items: center;
-      }
-
-      &__selected-results {
-        text-decoration: underline;
-      }
-
+    &__selected-results {
+      text-decoration: underline;
     }
   }
+}
 </style>