Merge pull request #452 from fiji-flo/sections

Clean up profile sections a little bit.
mozilla-iam · Aug 29, 2019 · e791e4b · e791e4b
2 parents a3a9492 + dbd4b43
commit e791e4b
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 358 deletions.
diff --git a/src/components/profile/Profile.vue b/src/components/profile/Profile.vue
diff --git a/src/components/profile/ProfileSection.vue b/src/components/profile/ProfileSection.vue
@@ -0,0 +1,61 @@
+<template>
+  <section :class="cssClasses">
+    <a :id="`nav-${section}`" class="profile__anchor"></a>
+    <slot name="edit" v-if="editing"></slot>
+    <template v-else>
+      <header class="profile__section-header">
+        <h2>{{ title }}</h2>
+        <EditButton
+          v-if="editable && userOnOwnProfile"
+          :section="section"
+          :sectionId="section"
+        ></EditButton>
+      </header>
+      <p v-if="empty">{{ userOnOwnProfile ? messageOwn : message }}</p>
+      <slot name="view" v-else></slot>
+    </template>
+  </section>
+</template>
+
+<script>
+import EditButton from '@/components/profile/edit/EditButton.vue';
+import EmptyCard from '@/components/profile/view/EmptyCard.vue';
+
+export default {
+  name: 'ProfileSection',
+  props: {
+    section: String,
+    title: String,
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+    userOnOwnProfile: Boolean,
+    empty: {
+      type: Boolean,
+      default: true,
+    },
+    message: String,
+    messageOwn: String,
+    editing: Boolean,
+  },
+  components: { EditButton, EmptyCard },
+  computed: {
+    cssClasses() {
+      return {
+        profile__section: true,
+        'profile__section--editing': this.editing,
+        'profile__section--disabled': !this.editing && this.empty,
+      };
+    },
+  },
+};
+</script>
+
+<style>
+.profile__section--disabled {
+  background-color: var(--gray-20);
+  color: var(--gray-50);
+  border: 2px solid var(--gray-30);
+}
+</style>
diff --git a/src/components/profile/edit/EditKeys.vue b/src/components/profile/edit/EditKeys.vue
@@ -4,7 +4,7 @@
       <h2>Keys</h2>
     </header>
     <template
-      v-if="pgpPublicKeys && Object.keys(pgpPublicKeys.values).length > 0"
+      v-if="pgpPublicKeys && Object.keys(pgpPublicKeys.values || {}).length > 0"
     >
       <div class="edit-keys__header">
         <h3>PGP keys</h3>
@@ -28,7 +28,7 @@
       />
     </template>
     <template
-      v-if="sshPublicKeys && Object.keys(sshPublicKeys.values).length > 0"
+      v-if="sshPublicKeys && Object.keys(sshPublicKeys.values || {}).length > 0"
     >
       <div class="edit-keys__header">
         <h3>SSH keys</h3>

diff --git a/src/components/profile/view/ViewAccessGroups.vue b/src/components/profile/view/ViewAccessGroups.vue
@@ -1,21 +1,13 @@
 <template>
-  <div>
-    <header class="profile__section-header">
-      <h2>Access Groups</h2>
-    </header>
-    <a id="nav-access-groups" class="profile__anchor"></a>
-    <IconBlockList class="icon-block-list--multi-col">
-      <IconBlock
-        v-for="[group] in Object.entries(
-          accessInformation.mozilliansorg.values,
-        )"
-        :key="`group-${group}`"
-        icon="dino"
-      >
-        {{ group }}
-      </IconBlock>
-    </IconBlockList>
-  </div>
+  <IconBlockList class="icon-block-list--multi-col">
+    <IconBlock
+      v-for="[group] in Object.entries(accessInformation.mozilliansorg.values)"
+      :key="`group-${group}`"
+      icon="dino"
+    >
+      {{ group }}
+    </IconBlock>
+  </IconBlockList>
 </template>
 
 <script>

diff --git a/src/components/profile/view/ViewAccounts.vue b/src/components/profile/view/ViewAccounts.vue
@@ -1,61 +1,50 @@
 <template>
-  <div>
-    <header class="profile__section-header">
-      <h2>Accounts</h2>
-      <EditButton
-        v-if="userOnOwnProfile"
-        section="accounts"
-        sectionId="accounts"
-      ></EditButton>
-    </header>
-    <div class="profile__external-accounts">
-      <div v-if="accounts.mozilla.length">
-        <h3>Mozilla</h3>
-        <IconBlockList>
-          <IconBlock
-            v-for="(acc, index) in accounts.mozilla"
-            :key="`acc-moz-${index}`"
-            :heading="acc.text"
-            :icon="acc.icon"
+  <div class="profile__external-accounts">
+    <div v-if="accounts.mozilla.length">
+      <h3>Mozilla</h3>
+      <IconBlockList>
+        <IconBlock
+          v-for="(acc, index) in accounts.mozilla"
+          :key="`acc-moz-${index}`"
+          :heading="acc.text"
+          :icon="acc.icon"
+        >
+          <a
+            v-if="acc.uri"
+            :href="acc.uri"
+            target="_blank"
+            rel="noreferrer noopener"
+            >{{ acc.value }}</a
           >
-            <a
-              v-if="acc.uri"
-              :href="acc.uri"
-              target="_blank"
-              rel="noreferrer noopener"
-              >{{ acc.value }}</a
-            >
-            <template v-else>{{ acc.value }}</template>
-          </IconBlock>
-        </IconBlockList>
-      </div>
-      <div v-if="accounts.other.length">
-        <h3>Elsewhere</h3>
-        <IconBlockList>
-          <IconBlock
-            v-for="(acc, index) in accounts.other"
-            :key="`acc-other-${index}`"
-            :heading="acc.text"
-            :icon="acc.icon"
+          <template v-else>{{ acc.value }}</template>
+        </IconBlock>
+      </IconBlockList>
+    </div>
+    <div v-if="accounts.other.length">
+      <h3>Elsewhere</h3>
+      <IconBlockList>
+        <IconBlock
+          v-for="(acc, index) in accounts.other"
+          :key="`acc-other-${index}`"
+          :heading="acc.text"
+          :icon="acc.icon"
+        >
+          <a
+            v-if="acc.uri"
+            :href="acc.uri"
+            target="_blank"
+            rel="noreferrer noopener"
+            >{{ acc.value }}</a
           >
-            <a
-              v-if="acc.uri"
-              :href="acc.uri"
-              target="_blank"
-              rel="noreferrer noopener"
-              >{{ acc.value }}</a
-            >
-            <template v-else>{{ acc.value }}</template>
-          </IconBlock>
-        </IconBlockList>
-      </div>
+          <template v-else>{{ acc.value }}</template>
+        </IconBlock>
+      </IconBlockList>
     </div>
   </div>
 </template>
 
 <script>
 import AccountsMixin from '@/components/_mixins/AccountsMixin.vue';
-import EditButton from '@/components/profile/edit/EditButton.vue';
 import IconBlock from '@/components/ui/IconBlock.vue';
 import IconBlockList from '@/components/ui/IconBlockList.vue';
 
@@ -67,7 +56,6 @@ export default {
   },
   mixins: [AccountsMixin],
   components: {
-    EditButton,
     IconBlock,
     IconBlockList,
   },

diff --git a/src/components/profile/view/ViewContact.vue b/src/components/profile/view/ViewContact.vue
@@ -1,13 +1,5 @@
 <template>
   <div>
-    <header class="profile__section-header">
-      <h2>Contact</h2>
-      <EditButton
-        v-if="userOnOwnProfile"
-        section="contact"
-        sectionId="contact"
-      ></EditButton>
-    </header>
     <h3 class="visually-hidden">Contact options</h3>
     <IconBlockList class="icon-block-list--multi-col">
       <IconBlock heading="Email" subHeading="primary" icon="email">
@@ -28,7 +20,6 @@
 
 <script>
 import PhoneNumbersMixin from '@/components/_mixins/PhoneNumbersMixin.vue';
-import EditButton from '@/components/profile/edit/EditButton.vue';
 import IconBlock from '@/components/ui/IconBlock.vue';
 import IconBlockList from '@/components/ui/IconBlockList.vue';
 
@@ -41,7 +32,6 @@ export default {
   },
   mixins: [PhoneNumbersMixin],
   components: {
-    EditButton,
     IconBlock,
     IconBlockList,
   },

diff --git a/src/components/profile/view/ViewIdentities.vue b/src/components/profile/view/ViewIdentities.vue
@@ -1,45 +1,34 @@
 <template>
-  <div>
-    <header class="profile__section-header">
-      <h2>Identities</h2>
-      <EditButton
-        v-if="userOnOwnProfile"
-        section="identities"
-        sectionId="identities"
-      ></EditButton>
-    </header>
-    <div class="profile__identities">
-      <IconBlockList class="icon-block-list--multi-col">
-        <IconBlock
-          v-if="identities.hasGithub()"
-          heading="GitHub"
-          :subHeading="githubUsername && 'Verified'"
-          icon="github"
+  <div class="profile__identities">
+    <IconBlockList class="icon-block-list--multi-col">
+      <IconBlock
+        v-if="identities.hasGithub()"
+        heading="GitHub"
+        :subHeading="githubUsername && 'Verified'"
+        icon="github"
+      >
+        <a :href="githubLink" target="_blank" rel="noreferrer noopener">{{
+          githubUsername
+        }}</a>
+      </IconBlock>
+      <IconBlock
+        v-if="identities.hasBugzilla()"
+        heading="Bugzilla"
+        subHeading="Verified"
+        icon="dino"
+      >
+        <a
+          :href="identities.bugzillaProfile()"
+          target="_blank"
+          rel="noreferrer noopener"
+          >{{ identities.bugzillaEmail() }}</a
         >
-          <a :href="githubLink" target="_blank" rel="noreferrer noopener">{{
-            githubUsername
-          }}</a>
-        </IconBlock>
-        <IconBlock
-          v-if="identities.hasBugzilla()"
-          heading="Bugzilla"
-          subHeading="Verified"
-          icon="dino"
-        >
-          <a
-            :href="identities.bugzillaProfile()"
-            target="_blank"
-            rel="noreferrer noopener"
-            >{{ identities.bugzillaEmail() }}</a
-          >
-        </IconBlock>
-      </IconBlockList>
-    </div>
+      </IconBlock>
+    </IconBlockList>
   </div>
 </template>
 
 <script>
-import EditButton from '@/components/profile/edit/EditButton.vue';
 import IconBlock from '@/components/ui/IconBlock.vue';
 import IconBlockList from '@/components/ui/IconBlockList.vue';
 
@@ -50,7 +39,6 @@ export default {
     userOnOwnProfile: Boolean,
   },
   components: {
-    EditButton,
     IconBlock,
     IconBlockList,
   },

diff --git a/src/components/profile/view/ViewKeys.vue b/src/components/profile/view/ViewKeys.vue
@@ -1,13 +1,5 @@
 <template>
   <div>
-    <header class="profile__section-header">
-      <h2>Keys</h2>
-      <EditButton
-        v-if="userOnOwnProfile"
-        section="keys"
-        sectionId="keys"
-      ></EditButton>
-    </header>
     <template
       v-if="pgpPublicKeys && Object.keys(pgpPublicKeys.values).length > 0"
     >
@@ -94,7 +86,6 @@
 </template>
 
 <script>
-import EditButton from '@/components/profile/edit/EditButton.vue';
 import Icon from '@/components/ui/Icon.vue';
 import Key from '@/components/ui/Key.vue';
 import ShowMore from '@/components/_functional/ShowMore.vue';
@@ -107,7 +98,6 @@ export default {
     userOnOwnProfile: Boolean,
   },
   components: {
-    EditButton,
     Icon,
     Key,
     ShowMore,

diff --git a/src/components/profile/view/ViewLanguages.vue b/src/components/profile/view/ViewLanguages.vue
@@ -1,13 +1,5 @@
 <template>
   <div>
-    <header class="profile__section-header">
-      <h2>Languages</h2>
-      <EditButton
-        v-if="userOnOwnProfile"
-        section="languages"
-        sectionId="languages"
-      ></EditButton>
-    </header>
     <Tag
       v-if="Object.entries(languages.values).length > 0"
       v-for="(language, index) in languages.values"
@@ -20,7 +12,6 @@
 </template>
 
 <script>
-import EditButton from '@/components/profile/edit/EditButton.vue';
 import Tag from '@/components/ui/Tag.vue';
 
 export default {
@@ -30,7 +21,6 @@ export default {
     userOnOwnProfile: Boolean,
   },
   components: {
-    EditButton,
     Tag,
   },
 };