Merge pull request #2879 from uw-it-aca/qa

MUWM-5134 initial setup of the name-pron card (#2797)

Author: fanglinfang

myuw/templates/profile.html

@@ -11,6 +11,7 @@
   <template #mobile>
     <div class="col-md-12 px-0">
       <myuw-uname></myuw-uname>
+      <myuw-name-pron></myuw-name-pron>
       <myuw-employee-profile></myuw-employee-profile>
       <myuw-student-profile></myuw-student-profile>
       <myuw-applicant-profile></myuw-applicant-profile>
@@ -22,6 +23,7 @@
       <myuw-uname></myuw-uname>
     </div>
     <div class="col-md-8">
+      <myuw-name-pron></myuw-name-pron>
       <myuw-employee-profile></myuw-employee-profile>
       <myuw-student-profile></myuw-student-profile>
       <myuw-applicant-profile></myuw-applicant-profile>

myuw_vue/components/profile/employee-profile.vue

@@ -154,3 +154,4 @@ export default {
   padding-left: 32px;
 }
 </style>
+

myuw_vue/components/profile/name-pron.vue

@@ -0,0 +1,81 @@
+<template>
+  <uw-card :loaded="isReady" :errored="isErrored" :errored-show="showError">
+    <template #card-heading>
+      <h2 class="h4 mb-3 text-dark-beige myuw-font-encode-sans">Name &amp; Pronouns</h2>
+    </template>
+    <template #card-body>
+      <uw-card-property-group>
+        <uw-card-property title="Official Name">
+          {{ fullName }}
+        </uw-card-property>
+
+        <uw-card-property title="Preferred Name">
+          <p v-if="!hasPreferredName" class="text-muted">No Preferred name listed</p>
+          <div v-else>
+            {{ prefName }}
+          </div>
+        </uw-card-property>
+        <uw-card-property title="Pronouns">
+          <div v-if="hasPronouns">
+            {{ pronouns }}
+          </div>
+          <div v-else class="text-muted">No pronouns listed</div>
+          <div class="mt-4">
+            <uw-link-button
+              class="px-2 py-1"
+              href="https://identity.uw.edu/"
+              >Edit in Identity.UW
+            </uw-link-button>
+          </div>
+        </uw-card-property>
+      </uw-card-property-group>
+    </template>
+  </uw-card>
+</template>
+
+<script>
+import { mapGetters, mapState, mapActions } from 'vuex';
+import Card from '../_templates/card.vue';
+import CardProperty from '../_templates/card-property.vue';
+import CardPropertyGroup from '../_templates/card-property-group.vue';
+import LinkButton from '../_templates/link-button.vue';
+
+export default {
+  components: {
+    'uw-card': Card,
+    'uw-card-property': CardProperty,
+    'uw-card-property-group': CardPropertyGroup,
+    'uw-link-button': LinkButton,
+  },
+  computed: {
+    ...mapState({
+      fullName: (state) => state.directory.value.full_name,
+      prefName: (state) => state.directory.value.display_name,
+      pronouns: (state) => state.directory.value.pronouns,
+    }),
+    ...mapGetters('directory', {
+      isReady: 'isReady',
+      isErrored: 'isErrored',
+    }),
+    hasPreferredName() {
+      return Boolean(this.prefName && this.prefName.length);
+    },
+    hasPronouns() {
+      return Boolean(this.pronouns && this.pronouns.length);
+    },
+    showError() {
+      return false;
+    },
+  },
+  mounted() {
+    this.fetch();
+  },
+  methods: {
+    ...mapActions('directory', {
+      fetch: 'fetch',
+    }),
+  },
+};
+</script>
+
+

myuw_vue/components/profile/student-profile.vue

@@ -169,7 +169,6 @@ export default {
     ...mapGetters('profile', {
       isReady: 'isReady',
       isErrored: 'isErrored',
-      statusCode: 'statusCode',
     }),
     ...mapState({
       student: (state) => state.user.affiliations.student,

myuw_vue/components/profile/user-name.vue

@@ -1,55 +1,34 @@
 <template>
-  <uw-panel
-      v-if="hasName"
-      :loaded="isReady"
-      :errored="isErrored"
-  >
+  <uw-panel v-if="hasName" :loaded="isReady" :errored="isErrored">
     <template #panel-body>
       <h2 class="h4 mb-3">
-        <span v-if="hasPreferred">
-          {{ titleCaseName(displayName) }}
-          <span v-if="fullName"
-            class="myuw-text-md text-uppercase"
-            title="Full name"
-          >
-            ({{ titleCaseName(fullName) }})
+        <span>
+            {{ titleCaseName(name) }}
+          <span v-if="hasPronouns" class="myuw-text-md text-uppercase" title="Pronouns">
+            ({{ titleCaseName(pronouns) }})
           </span>
         </span>
-        <span v-else-if="fullName" title="Full name">
-          {{ titleCaseName(fullName) }}
-        </span>
-        <a
-          v-out="'Manage preferred name - Identity.UW'"
-          href="https://identity.uw.edu/"
-          title="Manage your preferred name">
-            <font-awesome-icon :icon="faPencilAlt" class="myuw-text-md" />
-            <span class="visually-hidden">Manage your preferred name</span>
-        </a>
       </h2>
     </template>
   </uw-panel>
 </template>
 
 <script>
-import {
-  faPencilAlt,
-} from '@fortawesome/free-solid-svg-icons';
-import {mapGetters, mapState, mapActions} from 'vuex';
+import { mapGetters, mapState, mapActions } from 'vuex';
 import Card from '../_templates/panel.vue';
 
 export default {
   components: {
     'uw-panel': Card,
   },
   data() {
-    return {
-      faPencilAlt,
-    };
+    return {};
   },
   computed: {
     ...mapState({
       displayName: (state) => state.directory.value.display_name,
       fullName: (state) => state.directory.value.full_name,
+      pronouns: (state) => state.directory.value.pronouns,
     }),
     ...mapGetters('directory', {
       isReady: 'isReady',
@@ -58,8 +37,11 @@ export default {
     hasName() {
       return Boolean(this.displayName) || Boolean(this.fullName);
     },
-    hasPreferred() {
-      return Boolean(this.displayName) && this.displayName !== this.fullName;
+    name() {
+      return this.displayName ? this.displayName : this.fullName;
+    },
+    hasPronouns() {
+      return Boolean(this.pronouns && this.pronouns.length);
     },
   },
   mounted() {

myuw_vue/profile.js

@@ -5,6 +5,7 @@ import Boilerplate from './components/_templates/boilerplate/boilerplate.vue';
 
 // components
 import Uname from './components/profile/user-name.vue';
+import NamePron from './components/profile/name-pron.vue';
 import StudentProfile from './components/profile/student-profile.vue';
 import EmployeeProfile from './components/profile/employee-profile.vue';
 import ApplicantProfile from './components/profile/applicant-profile.vue';
@@ -27,6 +28,7 @@ vueConf.store.commit('addVarToState', {
 
 Vue.component('myuw-boilerplate', Boilerplate);
 Vue.component('myuw-uname', Uname);
+Vue.component('myuw-name-pron', NamePron);
 Vue.component('myuw-student-profile', StudentProfile);
 Vue.component('myuw-employee-profile', EmployeeProfile);
 Vue.component('myuw-applicant-profile', ApplicantProfile);

myuw_vue/tests/user-name.test.js

@@ -27,22 +27,22 @@ describe('Uname Card', () => {
     });
   });
 
-  it('Test case1', async () => {
+  it('Having diff pref name and full name specified', async () => {
     axios.get.mockResolvedValue({data: mockData});
     const wrapper = mount(Uname, {store, localVue});
     // It takes like 10 ms to process the mock data through fetch postProcess
     await new Promise(setImmediate);
     expect(wrapper.vm.isReady).toBe(true);
     expect(wrapper.vm.hasName).toBe(true);
-    expect(wrapper.vm.hasPreferred).toBe(true);
+    expect(wrapper.vm.name).toBe("J. Average Student");
   });
-  it('Test case2', async () => {
+  it('Pref name is the same as full name', async () => {
     axios.get.mockResolvedValue({data: mockData1});
     const wrapper = mount(Uname, {store, localVue});
     // It takes like 10 ms to process the mock data through fetch postProcess
     await new Promise(setImmediate);
     expect(wrapper.vm.isReady).toBe(true);
     expect(wrapper.vm.hasName).toBe(true);
-    expect(wrapper.vm.hasPreferred).toBe(false);
+    expect(wrapper.vm.name).toBe("JAMES AVERAGE STUDENT");
   });
 });