Merge pull request #246 from bcgov/ofmcc-4146-icon-button-update

ofmcc-4146 - UI change button icon to text
bcgov · Jun 19, 2024 · 29b1ad9 · 29b1ad9
2 parents a2a876b + 577bb91
commit 29b1ad9
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 19 deletions.
diff --git a/frontend/src/components/funding/FundingAgreementsTab.vue b/frontend/src/components/funding/FundingAgreementsTab.vue
@@ -14,12 +14,10 @@
           <span :class="getStatusClass(item?.statusCode)">{{ item?.statusName }}</span>
         </template>
         <template #[`item.actions`]="{ item }">
-          <v-btn v-if="showSign(item)" variant="text" @click="goToFundingAgreement(item)">
-            <v-icon aria-label="Sign" size="large">mdi-signature-freehand</v-icon>
-          </v-btn>
-          <v-btn v-else-if="showOpen(item)" variant="text" @click="goToFundingAgreement(item)">
-            <v-icon aria-label="Open" size="large">mdi-folder-open-outline</v-icon>
-          </v-btn>
+          <v-row no-gutters class="my-2 align-center justify-end justify-md-start">
+            <AppButton v-if="showSign(item)" :primary="false" size="small" @click="goToFundingAgreement(item)">Sign</AppButton>
+            <AppButton v-else-if="showOpen(item)" :primary="false" size="small" @click="goToFundingAgreement(item)">Open</AppButton>
+          </v-row>
         </template>
       </v-data-table>
     </v-skeleton-loader>
@@ -28,6 +26,7 @@
 
 <script>
 import { mapState } from 'pinia'
+import AppButton from '@/components/ui/AppButton.vue'
 import FundingSearchCard from '@/components/funding/FundingSearchCard.vue'
 import alertMixin from '@/mixins/alertMixin.js'
 import { useAuthStore } from '@/stores/auth'
@@ -37,7 +36,7 @@ import format from '@/utils/format'
 
 export default {
   name: 'FundingAgreementsTab',
-  components: { FundingSearchCard },
+  components: { AppButton, FundingSearchCard },
   mixins: [alertMixin],
   data() {
     return {
@@ -111,9 +110,9 @@ export default {
 
     getStatusClass(statusCode) {
       return {
-        'status-gray': [FUNDING_AGREEMENT_STATUS_CODES.DRAFT, FUNDING_AGREEMENT_STATUS_CODES.FA_REVIEW, FUNDING_AGREEMENT_STATUS_CODES.ACTIVE].includes(statusCode),
+        'status-gray': [FUNDING_AGREEMENT_STATUS_CODES.DRAFT, FUNDING_AGREEMENT_STATUS_CODES.FA_REVIEW].includes(statusCode),
         'status-yellow': statusCode === FUNDING_AGREEMENT_STATUS_CODES.SIGNATURE_PENDING,
-        'status-green': statusCode === FUNDING_AGREEMENT_STATUS_CODES.SUBMITTED,
+        'status-green': [FUNDING_AGREEMENT_STATUS_CODES.ACTIVE, FUNDING_AGREEMENT_STATUS_CODES.SUBMITTED].includes(statusCode),
         'status-purple': statusCode === FUNDING_AGREEMENT_STATUS_CODES.EXPIRED,
         'status-red': statusCode === FUNDING_AGREEMENT_STATUS_CODES.TERMINATED,
       }

diff --git a/frontend/src/components/reports/PendingReportsTab.vue b/frontend/src/components/reports/PendingReportsTab.vue
@@ -27,10 +27,9 @@
         </template>
         <template #[`item.actions`]="{ item }">
           <v-row no-gutters class="my-2 align-center justify-end justify-md-start">
-            <AppButton :primary="false" size="small" class="mr-2" @click="openSurveyResponse(item)">
-              {{ isActiveReportResponse(item) ? 'Update' : 'View' }}
-            </AppButton>
-            <AppButton v-if="!isActiveReportResponse(item)" :primary="false" size="small" :disabled="hasInProgressAssistanceRequest(item)" @click="toggleAssistanceRequestDialog(item)">
+            <AppButton v-if="showUpdate(item)" :primary="false" size="small" @click="openSurveyResponse(item)">Update</AppButton>
+            <AppButton v-else-if="showView()" :primary="false" size="small" @click="openSurveyResponse(item)">View</AppButton>
+            <AppButton v-if="showUnlock(item)" :primary="false" size="small" class="ml-2" :disabled="hasInProgressAssistanceRequest(item)" @click="toggleAssistanceRequestDialog(item)">
               Unlock
             </AppButton>
             <v-btn v-if="showTrash(item)" variant="text" @click="toggleDeleteDialog(item)">
@@ -62,13 +61,12 @@ import DeleteSurveyResponseDialog from '@/components/reports/DeleteSurveyRespons
 import NewRequestDialog from '@/components/messages/NewRequestDialog.vue'
 import alertMixin from '@/mixins/alertMixin.js'
 import reportMixin from '@/mixins/reportMixin'
-import permissionsMixin from '@/mixins/permissionsMixin'
 import ReportsService from '@/services/reportsService'
 import { REQUEST_CATEGORY_NAMES, SURVEY_RESPONSE_STATUSES, SURVEY_RESPONSE_STATUS_CODES } from '@/utils/constants'
 
 export default {
   components: { AppAlertBanner, AppButton, FacilityFilter, DeleteSurveyResponseDialog, NewRequestDialog },
-  mixins: [alertMixin, reportMixin, permissionsMixin],
+  mixins: [alertMixin, reportMixin],
   data() {
     return {
       headers: [

diff --git a/frontend/src/components/reports/ReportingHistoryTab.vue b/frontend/src/components/reports/ReportingHistoryTab.vue
@@ -20,10 +20,9 @@
         </template>
         <template #[`item.actions`]="{ item }">
           <v-row no-gutters class="my-2 align-center justify-end justify-md-start">
-            <AppButton :primary="false" size="small" class="mr-2" @click="openSurveyResponse(item)">
-              {{ isActiveReportResponse(item) ? 'Update' : 'View' }}
-            </AppButton>
-            <AppButton v-if="!isActiveReportResponse(item)" :primary="false" size="small" :disabled="hasInProgressAssistanceRequest(item)" @click="toggleAssistanceRequestDialog(item)">
+            <AppButton v-if="showUpdate(item)" :primary="false" size="small" @click="openSurveyResponse(item)">Update</AppButton>
+            <AppButton v-else-if="showView()" :primary="false" size="small" @click="openSurveyResponse(item)">View</AppButton>
+            <AppButton v-if="showUnlock(item)" :primary="false" size="small" class="ml-2" :disabled="hasInProgressAssistanceRequest(item)" @click="toggleAssistanceRequestDialog(item)">
               Unlock
             </AppButton>
             <v-btn variant="text" @click="false">

diff --git a/frontend/src/mixins/reportMixin.js b/frontend/src/mixins/reportMixin.js
@@ -1,13 +1,15 @@
 import { isEmpty } from 'lodash'
 import { mapState } from 'pinia'
 
+import permissionsMixin from '@/mixins/permissionsMixin'
 import { useAppStore } from '@/stores/app'
 import { useAuthStore } from '@/stores/auth'
 import { useMessagesStore } from '@/stores/messages'
 import { ASSISTANCE_REQUEST_STATUS_CODES, BLANK_FIELD, CRM_STATE_CODES, SURVEY_QUESTION_TYPES } from '@/utils/constants'
 import format from '@/utils/format'
 
 export default {
+  mixins: [permissionsMixin],
   computed: {
     ...mapState(useAuthStore, ['userInfo']),
     ...mapState(useAppStore, ['getRequestCategoryIdByName']),
@@ -40,6 +42,18 @@ export default {
       )
     },
 
+    showView() {
+      return this.hasPermission(this.PERMISSIONS.SEARCH_VIEW_REPORTS)
+    },
+
+    showUpdate(surveyResponse) {
+      return this.isActiveReportResponse(surveyResponse) && this.hasPermission(this.PERMISSIONS.SUBMIT_DRAFT_REPORTS)
+    },
+
+    showUnlock(surveyResponse) {
+      return !this.isActiveReportResponse(surveyResponse) && this.hasPermission(this.PERMISSIONS.SUBMIT_DRAFT_REPORTS)
+    },
+
     getReportTitle(surveyResponse) {
       return isEmpty(surveyResponse) ? BLANK_FIELD : `${surveyResponse?.surveyTemplateName} - ${surveyResponse?.monthName} ${surveyResponse?.fiscalYearName?.slice(0, -3)}`
     },