refactor: replace custom CRM with Monica fork
Some checks failed
Build & Push Monica Image to Gitea Registry / build-and-push (push) Failing after 9s
Some checks failed
Build & Push Monica Image to Gitea Registry / build-and-push (push) Failing after 9s
This commit is contained in:
Kroonk
193
resources/js/components/people/Emotion.vue
Normal file
193
resources/js/components/people/Emotion.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<style scoped>
|
||||
.emotion-action-menu {
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 0px 1px rgba(43, 45, 80, 0.16), -1px 1px 1px rgba(43, 45, 80, 0.16), 0px 1px 4px rgba(43, 45, 80, 0.18);
|
||||
top: 34px;
|
||||
left: 0px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.emotion-action-menu li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion {
|
||||
background: #E5F3F9;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.emotion span {
|
||||
border-left-color: #A6C8D6;
|
||||
}
|
||||
|
||||
.emotion-add-arrow {
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.emotion-list-line:hover {
|
||||
background-color: #f1f5fd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<!-- CHOSEN EMOTIONS -->
|
||||
<ul v-show="chosenEmotions.length !== 0" class="mr2 di">
|
||||
<li v-for="chosenEmotion in chosenEmotions" :key="chosenEmotion.id" class="dib emotion br5 mr2">
|
||||
<span class="ph2 pv1 dib">
|
||||
{{ $t('app.emotion_' + chosenEmotion.name) }}
|
||||
</span>
|
||||
<span class="bl ph2 pv1 f6 pointer" @click.prevent="removeEmotion(chosenEmotion)">
|
||||
❌
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="relative dib">
|
||||
<a class="pointer small-btn pa2" @click.prevent="menu = true">
|
||||
😐 {{ $t('people.emotion_this_made_me_feel') }}
|
||||
</a>
|
||||
|
||||
<!-- MENU OF EMOTIONS -->
|
||||
<ul v-show="menu" class="absolute emotion-action-menu bg-white z-max pv1">
|
||||
<!-- PRIMARY -->
|
||||
<li v-for="primaryEmotion in primaryEmotions" v-show="emotionsMenu === 'primary'" :key="'primary' + primaryEmotion.id" class="pa2 pointer relative emotion-list-line" @click.prevent="showSecondary(primaryEmotion)">
|
||||
{{ $t('app.emotion_primary_' + primaryEmotion.name) }}
|
||||
|
||||
<svg class="absolute emotion-add-arrow" width="10" height="13" viewBox="0 0 10 13" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M8.75071 5.66783C9.34483 6.06361 9.34483 6.93653 8.75072 7.33231L1.80442 11.9598C1.13984 12.4025 0.25 11.9261 0.25 11.1275L0.25 1.87263C0.25 1.07409 1.13984 0.59767 1.80442 1.04039L8.75071 5.66783Z" fill="#C4C4C4" />
|
||||
</svg>
|
||||
</li>
|
||||
|
||||
<!-- SECONDARY -->
|
||||
<li v-show="emotionsMenu === 'secondary'" class="pa2 pointer bb b--gray-monica">
|
||||
<a class="no-underline" @click.prevent="emotionsMenu = 'primary'">
|
||||
← {{ $t('app.back') }}
|
||||
</a>
|
||||
</li>
|
||||
<li v-for="secondaryEmotion in secondaryEmotions" v-show="emotionsMenu === 'secondary'" :key="'secondary' + secondaryEmotion.id" class="pa2 pointer relative emotion-list-line" @click.prevent="showEmotion(secondaryEmotion)">
|
||||
{{ $t('app.emotion_secondary_' + secondaryEmotion.name) }}
|
||||
|
||||
<svg class="absolute emotion-add-arrow" width="10" height="13" viewBox="0 0 10 13" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M8.75071 5.66783C9.34483 6.06361 9.34483 6.93653 8.75072 7.33231L1.80442 11.9598C1.13984 12.4025 0.25 11.9261 0.25 11.1275L0.25 1.87263C0.25 1.07409 1.13984 0.59767 1.80442 1.04039L8.75071 5.66783Z" fill="#C4C4C4" />
|
||||
</svg>
|
||||
</li>
|
||||
|
||||
<!-- EMOTION -->
|
||||
<li v-show="emotionsMenu === 'emotions'" class="pa2 pointer bb b--gray-monica">
|
||||
<a class="no-underline" @click.prevent="emotionsMenu = 'secondary'">
|
||||
← {{ $t('app.back') }}
|
||||
</a>
|
||||
</li>
|
||||
<li v-for="emotion in emotions" v-show="emotionsMenu === 'emotions'" :key="emotion.id" class="pa2 pointer emotion-list-line" @click.prevent="addEmotion(emotion)">
|
||||
{{ $t('app.emotion_' + emotion.name) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
props: {
|
||||
initialEmotions: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
emotions: [],
|
||||
primaryEmotions: [],
|
||||
secondaryEmotions: [],
|
||||
selectedPrimaryEmotionId: 0,
|
||||
selectedSecondaryEmotionId: 0,
|
||||
chosenEmotions: [],
|
||||
menu: false,
|
||||
emotionsMenu: 'primary',
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.prepareComponent();
|
||||
|
||||
this.chosenEmotions = this.initialEmotions;
|
||||
},
|
||||
|
||||
created() {
|
||||
window.addEventListener('click', this.close);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('click', this.close);
|
||||
},
|
||||
|
||||
methods: {
|
||||
prepareComponent() {
|
||||
this.getPrimaryEmotions();
|
||||
},
|
||||
|
||||
close(e) {
|
||||
if (!this.$el.contains(e.target)) {
|
||||
this.menu = false;
|
||||
}
|
||||
},
|
||||
|
||||
getPrimaryEmotions() {
|
||||
axios.get('emotions')
|
||||
.then(response => {
|
||||
this.primaryEmotions = response.data.data;
|
||||
});
|
||||
},
|
||||
|
||||
getSecondaryEmotions() {
|
||||
axios.get('emotions/primaries/' + this.selectedPrimaryEmotionId + '/secondaries')
|
||||
.then(response => {
|
||||
this.secondaryEmotions = response.data.data;
|
||||
});
|
||||
},
|
||||
|
||||
getEmotions(id) {
|
||||
axios.get('emotions/primaries/' + this.selectedPrimaryEmotionId + '/secondaries/' + this.selectedSecondaryEmotionId + '/emotions')
|
||||
.then(response => {
|
||||
this.emotions = response.data.data;
|
||||
});
|
||||
},
|
||||
|
||||
showSecondary(primaryEmotion) {
|
||||
this.selectedPrimaryEmotionId = primaryEmotion.id;
|
||||
this.getSecondaryEmotions();
|
||||
this.emotionsMenu = 'secondary';
|
||||
},
|
||||
|
||||
showEmotion(secondaryEmotion) {
|
||||
this.selectedSecondaryEmotionId = secondaryEmotion.id;
|
||||
this.getEmotions();
|
||||
this.emotionsMenu = 'emotions';
|
||||
},
|
||||
|
||||
addEmotion(emotion) {
|
||||
this.menu = false;
|
||||
this.chosenEmotions.push(emotion);
|
||||
this.emotionsMenu = 'primary';
|
||||
this.$emit('update', this.chosenEmotions);
|
||||
},
|
||||
|
||||
removeEmotion(emotion) {
|
||||
this.chosenEmotions.splice(emotion, 1);
|
||||
this.$emit('update', this.chosenEmotions);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user