feat(user): add profile images

src/services.json

@@ -8,6 +8,7 @@
   "network": "/api/network",
   "gsuite-wrapper": "/api/gsuite-wrapper",
   "oms-frontend": "",
+  "core-static": "/media/core",
   "events-static": "/media/events",
   "summeruniversity-static": "/media/summeruniversity",
   "statutory-static": "/media/statutory"

src/views/core/members/PictureModal.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Change picture</p>
+      <button class="delete" aria-label="close" @click="$parent.close()" />
+    </header>
+
+    <section class="modal-card-body">
+      <div class="field is-grouped">
+        <div class="control">
+          <div class="file has-name">
+            <label class="file-label">
+              <input class="file-input" type="file" name="resume" @change="setFile($event)">
+              <span class="file-cta">
+                <span class="file-icon">
+                  <font-awesome-icon icon="upload" />
+                </span>
+                <span class="file-label">
+                  Choose a file
+                </span>
+              </span>
+              <span class="file-name">
+                {{ file ? file.name : 'Not set.' }}
+              </span>
+            </label>
+          </div>
+        </div>
+
+        <div class="control">
+          <a class="button is-info" :disabled="!file" @click="updateImage()">Upload</a>
+        </div>
+
+        <div class="control">
+          <a class="button is-danger" :disabled="!user.image" @click="removeImage()">Delete</a>
+        </div>
+      </div>
+    </section>
+
+    <footer class="modal-card-foot" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PictureModal',
+  props: ['user', 'permissions', 'services', 'showError', 'showSuccess', 'router'],
+  data () {
+    return {
+      file: null
+    }
+  },
+  methods: {
+    setFile (event) {
+      this.file = event.target.files[0]
+    },
+    updateImage () {
+      if (!this.file) return
+
+      const data = new FormData()
+      data.append('head_image', this.file)
+
+      this.axios.post(this.services['core'] + '/members/' + this.user.id + '/upload', data).then(() => {
+        this.showSuccess('User image is updated.')
+        this.router.go(0)
+      }).catch((err) => {
+        this.showError('Could not update image', err)
+      })
+    },
+    removeImage () {
+      if (!this.user.image) return
+
+      this.axios.delete(this.services['core'] + '/members/' + this.user.id + '/image').then(() => {
+        this.showSuccess('User image is removed.')
+        this.router.go(0)
+      }).catch((err) => {
+        this.showError('Could not remove image', err)
+      })
+    }
+  }
+}
+</script>

src/views/core/members/Single.vue

@@ -3,15 +3,16 @@
     <div class="tile is-vertical is-3">
       <div class="tile is-parent is-vertical">
         <article class="tile is-child is-primary">
-          <figure class="image is-1by1">
-            <img src="/images/logo.png">
+          <figure class="image">
+            <img v-if="!user.image" src="/images/logo.png">
+            <img v-if="user.image" :src="services['core-static'] + '/headimages/' + user.image">
           </figure>
         </article>
       </div>
       <div class="tile is-parent">
         <article class="tile is-child is-info" v-if="can.edit">
           <div class="field is-grouped">
-            <a class="button is-fullwidth is-primary" data-cy="picture-change-link" @click="updatePicture()">
+            <a class="button is-fullwidth is-primary" data-cy="picture-change-link" @click="openPictureModal()">
               <span>Change picture</span>
               <span class="icon"><font-awesome-icon icon="camera" /></span>
             </a>
@@ -197,6 +198,7 @@
 import { mapGetters } from 'vuex'
 import EditPrimaryBodyModal from './EditPrimaryBodyModal.vue'
 import EditPrimaryEmailModal from './EditPrimaryEmailModal.vue'
+import PictureModal from './PictureModal.vue'
 
 export default {
   name: 'SingleUser',
@@ -215,7 +217,8 @@ export default {
         notification_email: null,
         active: null,
         superadmin: null,
-        username: null
+        username: null,
+        image: null
       },
       isOwnProfile: false,
       isLoading: false,
@@ -230,8 +233,19 @@ export default {
     }
   },
   methods: {
-    updatePicture () {
-      this.$root.showInfo('This feature is not implemented yet, come join MyAEGEE to help us implementing it ;)')
+    openPictureModal () {
+      this.$buefy.modal.open({
+        component: PictureModal,
+        hasModalCard: true,
+        props: {
+          user: this.user,
+          permissions: this.permissions,
+          services: this.services,
+          showError: this.$root.showError,
+          showSuccess: this.$root.showSuccess,
+          router: this.$router
+        }
+      })
     },
     askDeleteUser () {
       this.$buefy.dialog.confirm({

src/views/events/Edit.vue

@@ -1,47 +1,21 @@
 <template>
   <div class="tile is-ancestor ">
     <div class="tile is-child">
-      <div v-if="$route.params.id">
-        <div class="subtitle">Update event image</div>
-
-        <div class="field is-grouped">
-          <div class="control">
-            <div class="file has-name">
-              <label class="file-label">
-                <input class="file-input" type="file" name="resume" @change="setFile($event)">
-                <span class="file-cta">
-                  <span class="file-icon">
-                    <font-awesome-icon icon="upload" />
-                  </span>
-                  <span class="file-label">
-                    Choose a file
-                  </span>
-                </span>
-                <span class="file-name">
-                  {{ file ? file.name : 'Not set.' }}
-                </span>
-              </label>
-            </div>
-          </div>
-
-          <div class="control">
-            <a class="button is-info" :disabled="!file" @click="updateImage()">Upload!</a>
-          </div>
-        </div>
-
-        <hr />
-      </div>
-
       <form @submit.prevent="saveEvent()">
         <div class="notification is-info" v-if="!$route.params.id">
           <div class="content">
-            <p>If you want to upload the image, please add it after creating the event by going to "Edit event" and uploading it there.</p>
+            <p>If you want to upload an image, please do it from the event page after creating the event.</p>
             <p><strong>If the event is not published, people won't be able to see the event in the listing or apply to it.</strong></p>
             <p>Also, <strong>once the event is published you won't be able to edit it.</strong> So please check everything twice.</p>
             <p>If you will need the event info to be changed after publishing, please contact CD or EQAC.</p>
             <p><strong>PLEASE KEEP IN MIND THAT THE APPROVAL OF YOUR SUBMITTED EVENT WILL TAKE 3-4 DAYS.</strong></p>
           </div>
         </div>
+        <div class="notification is-info" v-else>
+          <div class="content">
+            <p>If you want to upload an image, please do it from the event page.</p>
+          </div>
+        </div>
 
         <div class="subtitle is-fullwidth has-text-centered">Event details</div>
         <hr />
@@ -667,24 +641,6 @@ export default {
     }
   },
   methods: {
-    setFile (event) {
-      this.file = event.target.files[0]
-    },
-    updateImage () {
-      if (!this.file) {
-        return
-      }
-
-      const data = new FormData()
-      data.append('head_image', this.file)
-
-      this.axios.post(this.services['events'] + '/single/' + this.$route.params.id + '/upload', data).then(() => {
-        this.$root.showSuccess('Event image is updated.')
-        this.file = null
-      }).catch((err) => {
-        this.$root.showError('Could not update image', err)
-      })
-    },
     fetchMembers (query) {
       if (!query) return
 

src/views/events/PictureModal.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Change picture</p>
+      <button class="delete" aria-label="close" @click="$parent.close()" />
+    </header>
+
+    <section class="modal-card-body">
+      <div class="field is-grouped">
+        <div class="control">
+          <div class="file has-name">
+            <label class="file-label">
+              <input class="file-input" type="file" name="resume" @change="setFile($event)">
+              <span class="file-cta">
+                <span class="file-icon">
+                  <font-awesome-icon icon="upload" />
+                </span>
+                <span class="file-label">
+                  Choose a file
+                </span>
+              </span>
+              <span class="file-name">
+                {{ file ? file.name : 'Not set.' }}
+              </span>
+            </label>
+          </div>
+        </div>
+
+        <div class="control">
+          <a class="button is-info" :disabled="!file" @click="updateImage()">Upload!</a>
+        </div>
+      </div>
+    </section>
+
+    <footer class="modal-card-foot" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PictureModal',
+  props: ['event', 'permissions', 'services', 'showError', 'showSuccess', 'router'],
+  data () {
+    return {
+      file: null
+    }
+  },
+  methods: {
+    setFile (event) {
+      this.file = event.target.files[0]
+    },
+    updateImage () {
+      if (!this.file) {
+        return
+      }
+
+      const data = new FormData()
+      data.append('head_image', this.file)
+
+      this.axios.post(this.services['events'] + '/single/' + this.event.id + '/upload', data).then(() => {
+        this.showSuccess('Event image is updated.')
+        this.router.go(0)
+      }).catch((err) => {
+        this.showError('Could not update image', err)
+      })
+    }
+  }
+}
+</script>

src/views/events/Single.vue

@@ -32,6 +32,13 @@
             </router-link>
           </div>
 
+          <div class="field is-grouped" v-if="can.edit_event">
+            <a class="button is-fullwidth is-primary" data-cy="picture-change-link" @click="openPictureModal()">
+              <span>Change picture</span>
+              <span class="icon"><font-awesome-icon icon="camera" /></span>
+            </a>
+          </div>
+
           <div class="field is-grouped" v-if="can.edit_event">
             <router-link :to="{ name: 'oms.events.edit', params: { id: event.url || event.id } }" class="button is-fullwidth is-warning">
               <span>Edit event</span>
@@ -249,6 +256,7 @@ import { MglMap, MglMarker, MglPopup, MglNavigationControl } from 'vue-mapbox'
 import constants from '../../constants'
 import credentials from '../../credentials'
 import TimezoneTooltip from '../../components/tooltips/TimezoneTooltip'
+import PictureModal from './PictureModal.vue'
 
 export default {
   components: {
@@ -306,6 +314,20 @@ export default {
     }
   },
   methods: {
+    openPictureModal () {
+      this.$buefy.modal.open({
+        component: PictureModal,
+        hasModalCard: true,
+        props: {
+          event: this.event,
+          permissions: this.permissions,
+          services: this.services,
+          showError: this.$root.showError,
+          showSuccess: this.$root.showSuccess,
+          router: this.$router
+        }
+      })
+    },
     askDeleteEvent () {
       this.$buefy.dialog.confirm({
         title: 'Deleting an event',

src/views/static/Status.vue

@@ -119,6 +119,14 @@ export default {
           isAlive: 'Waiting...',
           changelog: 'https://github.com/AEGEE/frontend/blob/stable/CHANGELOG.md'
         },
+        'core-static': {
+          roundTrip: null,
+          version: '-',
+          latestVersion: '-',
+          latestTag: '-',
+          isAlive: 'Waiting...',
+          changelog: null
+        },
         'statutory-static': {
           roundTrip: null,
           version: '-',