Convert to composition api

bcgov · Nov 15, 2023 · 5c67d3c · 5c67d3c
1 parent f9637c0
commit 5c67d3c
Showing 1 changed file with 79 additions and 62 deletions.
diff --git a/auth-web/src/components/auth/account-settings/account-info/AccountAccessType.vue b/auth-web/src/components/auth/account-settings/account-info/AccountAccessType.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-form ref="accountAccessTypeForm">
+    <v-form>
       <v-card elevation="0">
         <div class="account-label">
           <div
@@ -88,7 +88,7 @@
                       color="primary"
                       :loading="false"
                       aria-label="Save Account Access Type"
-                      @click="updateDetails()"
+                      @click="updateDetails(false)"
                     >
                       <span class="save-btn__label">Save</span>
                     </v-btn>
@@ -159,77 +159,94 @@
 
 <script lang="ts">
 import { AccessType, Account } from '@/util/constants'
-import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'
-import { Organization } from '@/models/Organization'
 import ModalDialog from '@/components/auth/common/ModalDialog.vue'
+import { reactive, computed, defineComponent, watch, toRefs } from '@vue/composition-api'
 
-@Component({
+export default defineComponent({
+  name: 'AccountAccessType',
   components: {
     ModalDialog
-  }
-})
-export default class AccountAccessType extends Vue {
-  @Prop({ default: undefined }) organization: Organization
-  @Prop({ default: true }) viewOnlyMode: boolean
-  @Prop({ default: false }) canChangeAccessType: boolean
-  @Prop({ default: undefined }) currentOrgPaymentType: string
+  },
+  props: {
+    organization: {
+      type: Object,
+      default: undefined,
+    },
+    viewOnlyMode: {
+      type: Boolean,
+      default: true,
+    },
+    canChangeAccessType: {
+      type: Boolean,
+      default: false,
+    },
+    currentOrgPaymentType: {
+      type: String,
+      default: undefined,
+    },
+  },
+  emits: ['update:updateAndSaveAccessTypeDetails', 'update:viewOnlyMode'],
+  setup(props , { emit }) {
+      // const AccessType = AccessType
+      const state = reactive({
+        changeAccessTypeToRegularDialog: null,
+        selectedAccessType: undefined,
+        isLoading: false,
+        // Only allow PREMIUM -> GOVN and GOVN -> PREMIUM
+        isChangeButtonEnabled: computed<boolean>(() => {
+          // Check access type and orgtype must be premium
+          const accessType: any = props.organization.accessType
+          const isAllowedAccessType = props.organization.orgType === Account.PREMIUM &&
+            [AccessType.REGULAR, AccessType.EXTRA_PROVINCIAL, AccessType.REGULAR_BCEID, AccessType.GOVN].includes(accessType)
+          return isAllowedAccessType && props.canChangeAccessType // canChangeAccessType is the role based access passed as a property
+        }),
+        getAccessTypeText: computed<string>(() => {
+          let accessTypeText = 'Regular Access'
+          if (props.organization.accessType === AccessType.GOVN) {
+            accessTypeText = 'Government agency (other than BC provincial)'
+          } else if (props.organization.accessType === AccessType.GOVM) {
+            accessTypeText = 'BC Government Ministry'
+          }
+          return accessTypeText
+        })
+      })
 
-  $refs: {
-    accountAccessTypeForm: HTMLFormElement,
-    changeAccessTypeToRegularDialog: InstanceType<typeof ModalDialog>
-    selectedAccessType: HTMLFormElement,
-  }
-  selectedAccessType: string = undefined
-  AccessType = AccessType
-  isLoading = false
+      const updateDetails = (confirmed: boolean) => {
+        if (state.selectedAccessType === AccessType.REGULAR && !confirmed) {
+          state.changeAccessTypeToRegularDialog.open()
+        } else {
+          emit('update:updateAndSaveAccessTypeDetails', state.selectedAccessType)
+          state.changeAccessTypeToRegularDialog.close()
+        }
+      }
 
-  // Only allow PREMIUM -> GOVN and GOVN -> PREMIUM
-  get isChangeButtonEnabled (): boolean {
-    // Check access type and orgtype must be premium
-    const accessType: any = this.organization.accessType
-    const isAllowedAccessType = this.organization.orgType === Account.PREMIUM &&
-      [AccessType.REGULAR, AccessType.EXTRA_PROVINCIAL, AccessType.REGULAR_BCEID, AccessType.GOVN].includes(accessType)
-    return isAllowedAccessType && this.canChangeAccessType // canChangeAccessType is the role based access passed as a property
-  }
+      const closeDialog = () => {
+        state.changeAccessTypeToRegularDialog.close()
+      }
 
-  get getAccessTypeText (): string {
-    let accessTypeText = 'Regular Access'
-    if (this.organization.accessType === AccessType.GOVN) {
-      accessTypeText = 'Government agency (other than BC provincial)'
-    } else if (this.organization.accessType === AccessType.GOVM) {
-      accessTypeText = 'BC Government Ministry'
-    }
-    return accessTypeText
-  }
+      const cancelEdit = () => {
+        state.selectedAccessType = props.organization.accessType === AccessType.GOVN ? AccessType.GOVN : AccessType.REGULAR
+        emit('update:viewOnlyMode', {
+          component: 'accessType',
+          mode: true
+        })
+      }
 
-  // Watch property access type and update model
-  @Watch('organization', { deep: true, immediate: true })
-  onOrganizationChange () {
-    this.selectedAccessType = this.organization.accessType === AccessType.GOVN ? AccessType.GOVN : AccessType.REGULAR
-  }
+      // Watch property access type and update model
+      watch(() => props.organization, (newVal) => {
+        state.selectedAccessType = newVal.accessType === AccessType.GOVN ? AccessType.GOVN : AccessType.REGULAR
+      }, { deep: true, immediate: true })
 
-  updateDetails (confirmed: boolean) {
-    if (this.selectedAccessType === AccessType.REGULAR && !confirmed) {
-      this.$refs.changeAccessTypeToRegularDialog.open()
-    } else {
-      this.$emit('update:updateAndSaveAccessTypeDetails', this.selectedAccessType)
-      this.$refs.changeAccessTypeToRegularDialog.close()
-    }
-  }
-
-  closeDialog () {
-    this.$refs.changeAccessTypeToRegularDialog.close()
-  }
 
-  @Emit('update:viewOnlyMode')
-  cancelEdit () {
-    this.selectedAccessType = this.organization.accessType === AccessType.GOVN ? AccessType.GOVN : AccessType.REGULAR
-    return {
-      component: 'accessType',
-      mode: true
-    }
+      return {
+        AccessType,
+        ...toRefs(state),
+        updateDetails,
+        closeDialog,
+        cancelEdit
+      }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>