feat: add mentorship edit drawer

Author: JulienDroulez

src/components/people/skill/EditMentorshipDrawer.vue

@@ -0,0 +1,90 @@
+<script setup>
+import BaseDrawer from '@/components/base/BaseDrawer.vue'
+import useSkillTexts from '@/composables/useSkillTexts.js'
+import { ref, watchEffect } from 'vue'
+import LpiCheckbox from '@/components/base/form/LpiCheckbox.vue'
+import TextInput from '@/components/base/form/TextInput.vue'
+
+const emit = defineEmits(['close', 'update-mentorship'])
+
+const props = defineProps({
+    skill: { type: Object, required: true },
+    isOpened: { type: Boolean, required: true },
+})
+
+const mentorship = ref({
+    can_mentor: false,
+    needs_mentor: false,
+    comment: '',
+})
+
+watchEffect(function onOpen() {
+    if (props.isOpened) {
+        mentorship.value = {
+            can_mentor: props.skill.can_mentor || false,
+            needs_mentor: props.skill.needs_mentor || false,
+            comment: props.skill.comment || '',
+        }
+    }
+})
+
+function saveMentorship() {
+    emit('update-mentorship', { id: props.skill.id, ...mentorship.value })
+}
+
+const skillTexts = useSkillTexts()
+</script>
+<template>
+    <BaseDrawer
+        data-test="edit-mentorship-drawer"
+        :confirm-action-name="$t('common.confirm')"
+        :confirm-action-disabled="false"
+        :asyncing="asyncing"
+        :is-opened="isOpened"
+        :title="$t('profile.edit.skills.mentorship.edit', { skill: skillTexts.title(skill) })"
+        class="medium"
+        @close="$emit('close')"
+        @confirm="saveMentorship"
+    >
+        <div class="form-group">
+            <p>{{ $t('profile.edit.skills.mentorship.notice') }}</p>
+        </div>
+        <div class="form-group">
+            <div class="buttons-group">
+                <LpiCheckbox
+                    v-model="mentorship.can_mentor"
+                    :label="$t('profile.edit.skills.mentorship.can-mentor')"
+                    class="as-button"
+                />
+
+                <LpiCheckbox
+                    v-model="mentorship.needs_mentor"
+                    :label="$t('profile.edit.skills.mentorship.needs-mentor')"
+                    class="as-button"
+                />
+            </div>
+        </div>
+        <div class="form-group">
+            <TextInput
+                v-model="mentorship.comment"
+                :label="$t('profile.edit.skills.mentorship.comment')"
+                input-type="textarea"
+                :placeholder="$t('profile.edit.skills.mentorship.comment-placeholder')"
+            />
+        </div>
+    </BaseDrawer>
+</template>
+<style lang="scss" scoped>
+.buttons-group {
+    display: flex;
+    gap: $space-unit;
+
+    > * {
+        flex-basis: 50%;
+    }
+}
+
+.form-group + .form-group {
+    margin-top: $space-unit;
+}
+</style>

src/components/people/skill/SkillEditor.vue

@@ -4,13 +4,14 @@ import IconImage from '@/components/base/media/IconImage.vue'
 import useSkillTexts from '@/composables/useSkillTexts.js'
 import useSkillLevels from '@/composables/useSkillLevels.js'
 import ConfirmModal from '@/components/base/modal/ConfirmModal.vue'
-
+import EditMentorshipDrawer from '@/components/people/skill/EditMentorshipDrawer.vue'
+import LpiButton from '@/components/base/button/LpiButton.vue'
 const props = defineProps({
     skill: { type: Object, required: true },
     type: { type: String, required: true }, // "skills" or "hobbies"
     scrollIntoView: { type: Boolean, default: false },
 })
-const emit = defineEmits(['set-level', 'delete'])
+const emit = defineEmits(['set-level', 'update-mentorship', 'delete'])
 
 const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
     const { top, left, bottom, right } = el.getBoundingClientRect()
@@ -41,6 +42,12 @@ function deleteSkill() {
     asyncing.value = true
     emit('delete', props.skill)
 }
+
+const editMentorship = ref(false)
+function onUpdateMentorship(mentorship) {
+    emit('update-mentorship', mentorship)
+    editMentorship.value = false
+}
 </script>
 <template>
     <div
@@ -61,6 +68,13 @@ function deleteSkill() {
                 <span class="level-name">{{ level.label }}</span>
             </label>
         </div>
+        <div class="mentorship">
+            <LpiButton
+                secondary
+                @click="editMentorship = true"
+                :label="$t('profile.edit.skills.mentorship.choose')"
+            />
+        </div>
         <div class="delete-action">
             <IconImage
                 name="TrashCanOutline"
@@ -79,6 +93,12 @@ function deleteSkill() {
             @cancel="confirmDelete = false"
             @confirm="deleteSkill"
         />
+        <EditMentorshipDrawer
+            :is-opened="editMentorship"
+            :skill="skill"
+            @update-mentorship="onUpdateMentorship"
+            @close="editMentorship = false"
+        />
     </div>
 </template>
 <style scoped lang="scss">

src/locales/en.json

@@ -1354,6 +1354,18 @@
                     },
                     "selection": "Selected hobbies"
                 },
+
+                "mentorship": {
+                    "choose": "Choose",
+                    "edit": "Mentorship for \"{skill}\"",
+                    "error": "Error while saving mentorship.",
+                    "success": "Mentorship saved",
+                    "notice": "Would you like to become a mentor or be mentee for this skill? You will determine the frequency of exchange that suits you with the mentee or your mentor. Rest assured, our guide is here to help you.",
+                    "can-mentor": "I can mentor",
+                    "needs-mentor": "I'm looking for a mentor",
+                    "comment": "Comment",
+                    "comment-placeholder": "Indicate what help you can offer or the help you need (hourly volume, frequency, etc.)"
+                },
                 "levels": {
                     "curious": "Curious",
                     "basic": "Basic",

src/locales/fr.json

@@ -1355,6 +1355,17 @@
                     "competent": "Compétent",
                     "expert": "Expert"
                 },
+                "mentorship": {
+                    "choose": "Choisir",
+                    "edit": "Mentorat pour \"{skill}\"",
+                    "error": "Erreur lors de la sauvegarde du mentorat.",
+                    "success": "Mentorat sauvegardé",
+                    "notice": "Vous souhaitez devenir mentor ou être mentoré pour cette compétence ? Vous déterminerez la fréquence d’échange qui vous arrange avec le/la mentoré·e ou votre mentor. Rassurez-vous, notre guide est là pour vous aider.",
+                    "can-mentor": "Je peux être mentor",
+                    "needs-mentor": "Je chercher un mentor",
+                    "comment": "Commentaire",
+                    "comment-placeholder": "Indiquez quelle aide vous pouvez offrir ou l’aide dont vous avez besoin (volume horaire, fréquence, etc...)"
+                },
                 "tip": {
                     "intro-edit": "Les différents niveaux parmi lesquels vous pouvez choisir :",
                     "curious": {

src/pages/ProfileEditPage/Tabs/ProfileSkillsEditTab.vue

@@ -51,6 +51,7 @@
                             :type="key"
                             :data-skill-id="skill.id"
                             @set-level="setTalentLevel(key, $event.skill, $event.level)"
+                            @update-mentorship="updateMentorship(key, $event, skill)"
                             @delete="removeTalent(key, $event)"
                             :scroll-into-view="lastAddedTalent === skill.id"
                         />
@@ -177,6 +178,24 @@ export default {
                 }
             }
         },
+
+        async updateMentorship(type, data, talent) {
+            try {
+                await patchUserSkill(this.user.id, data.id, {
+                    ...data,
+                })
+                this.toaster.pushSuccess(
+                    this.$t(`profile.edit.skills.${type}.edit-success`, {
+                        name: this.skillTexts.title(talent),
+                    })
+                )
+                this.reloadUser()
+                this.$emit('profile-edited')
+            } catch (error) {
+                console.error(error)
+                this.toaster.pushError(this.$t('profile.edit.skills.save-error'))
+            }
+        },
         async removeTalent(type, talent) {
             try {
                 await deleteUserSkill(this.user.id, talent.id)