-
-
-
-
-
{{$t('popup_rename.emoji_list_not_found')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{$t('popup_rename.emoji_list_not_found')}}
+
+
+
+
@@ -91,6 +103,7 @@
import { SmileIcon, FolderIcon, ChevronDownIcon, XIcon } from 'vue-feather-icons'
import TabWrapper from '@/components/Others/TabWrapper'
import TabOption from '@/components/Others/TabOption'
+import Spinner from '@/components/FilesView/Spinner'
import Emoji from '@/components/Others/Emoji'
import lodash from 'lodash'
import { mapGetters } from 'vuex'
@@ -105,13 +118,14 @@ export default {
TabOption,
FolderIcon,
SmileIcon,
+ Spinner,
XIcon,
Emoji
},
computed: {
- ...mapGetters(['emojis', 'emojiGroups']),
+ ...mapGetters(['emojis']),
allEmoji() {
- return _.groupBy(this.emojis, 'group')
+ return _.groupBy(this.emojis.emojisList, 'group')
},
},
data () {
@@ -121,6 +135,7 @@ export default {
searchInput: '',
filteredEmojis: [],
selectOpen: false,
+ loadedList: false,
groupInView: 'Smileys & Emotion',
colors: [ '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
@@ -128,9 +143,9 @@ export default {
}
},
methods: {
- checkGroupInView: _.debounce(function() {
+ checkGroupInView: _.debounce( function() {
- this.emojiGroups.forEach(group => {
+ this.emojis.emojisGroups.forEach( group => {
let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
let groupBox = document.getElementById('group-box').getBoundingClientRect()
@@ -144,7 +159,7 @@ export default {
}, 200),
scrollToGroup( name ) {
- let group = document.getElementById(`group-${name}`)
+ let group = document.getElementById( `group-${name}` )
group.scrollIntoView({ behavior: "smooth" })
@@ -152,25 +167,35 @@ export default {
},
filterEmojis: _.debounce(function( emoji ){
- this.filteredEmojis = this.emojis.filter(emoji => emoji.name.includes(this.searchInput))
+ this.filteredEmojis = this.emojis.emojisList.filter(emoji => emoji.name.includes(this.searchInput))
}, 800),
openMenu() {
this.selectOpen = ! this.selectOpen
+ //Load emojis
+ if( this.selectOpen ){
+ this.$store.dispatch('getEmojisList').then(( loaded ) => {
+ this.loadedList = loaded
+ })
+ }
+
+ if( ! this.selectOpen )
+ this.loadedList = false
+
this.searchInput = ''
this.groupInView = 'Smileys & Emotion'
},
setIcon( value ) {
- if(value.emoji){
+ if( value.emoji ){
this.selectedEmoji = value.emoji
this.selectedColor = undefined
}
- if(value.color) {
+ if( value.color ) {
this.selectedColor = value.color
this.selectedEmoji = undefined
}
@@ -190,14 +215,17 @@ export default {
this.selectOpen = false
- // If folder have already set some emoji push him to selected emoji input
+ // If folder have already set some emoji set this emoji to selected emoji
this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
// If folder have already set some color set this color to selected color
this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
events.$on('unClick', () => {
+
this.selectOpen = false
+
+ this.loadedList = false
})
}
}
@@ -256,11 +284,6 @@ export default {
padding: 10px;
top: 152px;
- .loader {
- width: 100%;
- height: 100%;
- position: relative;
- }
.groups-list {
display: flex;
diff --git a/resources/js/store/index.js b/resources/js/store/index.js
index 842d3ea1..14be0e1f 100644
--- a/resources/js/store/index.js
+++ b/resources/js/store/index.js
@@ -3,7 +3,6 @@ import Vue from 'vue'
import fileFunctions from './modules/fileFunctions'
import fileBrowser from './modules/fileBrowser'
-import emojisList from './modules/emojisList'
import userAuth from './modules/userAuth'
import sharing from './modules/sharing'
import app from './modules/app'
@@ -14,7 +13,6 @@ export default new Vuex.Store({
modules: {
fileFunctions,
fileBrowser,
- emojisList,
userAuth,
sharing,
app,
diff --git a/resources/js/store/modules/app.js b/resources/js/store/modules/app.js
index fac574c8..427cc02a 100644
--- a/resources/js/store/modules/app.js
+++ b/resources/js/store/modules/app.js
@@ -8,6 +8,7 @@ const defaultState = {
authorized: undefined,
homeDirectory: undefined,
requestedPlan: undefined,
+ emojis: undefined,
sorting: {
sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC',
field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at',
@@ -967,6 +968,21 @@ const defaultState = {
]
}
const actions = {
+ getEmojisList: ({commit}) => {
+ return new Promise((resolve, reject) => {
+
+ axios.get('/api/emojis-list')
+ .then((response) => {
+ commit('LOAD_EMOJIS_LIST', response.data[0])
+
+ })
+ .catch(() => Vue.prototype.$isSomethingWrong())
+ .finally(() => {
+ resolve(true)
+ })
+ })
+
+ },
changePreviewType: ({commit, state}, preview) => {
// Get preview type
@@ -991,6 +1007,9 @@ const actions = {
},
}
const mutations = {
+ LOAD_EMOJIS_LIST(state, data) {
+ state.emojis = data
+ },
UPDATE_SORTING(state) {
state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field
state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort
@@ -1035,6 +1054,7 @@ const getters = {
timezones: state=> state.timezones,
api: state => state.config.api,
config: state => state.config,
+ emojis: state => state.emojis,
index: state => state.index,
roles: state => state.roles,
sorting: (state) => {
diff --git a/routes/api.php b/routes/api.php
index 239f2d0e..73d5a301 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -193,4 +193,7 @@ Route::group(['middleware' => ['auth:api', 'auth.shared', 'auth.master', 'scope:
Route::get('/zip-folder/{unique_id}', 'FileFunctions\EditItemsController@user_zip_folder');
Route::post('/upload', 'FileFunctions\EditItemsController@user_upload');
Route::post('/move', 'FileFunctions\EditItemsController@user_move');
+
+ //Get Emojis List
+ Route::get('/emojis-list', 'AppFunctionsController@get_emojis_list');
});