change functionality of Emojis List to async load from backend

2026-04-18 00:02:15 +00:00 · 2021-02-10 19:45:59 +01:00
parent 6c3630085e
commit d65c27091c
7 changed files with 130 additions and 99 deletions
--- a/app/Http/Controllers/AppFunctionsController.php
+++ b/app/Http/Controllers/AppFunctionsController.php
@@ -246,4 +246,17 @@ class AppFunctionsController extends Controller
        Artisan::call('config:clear');
        Artisan::call('config:cache');
    }
+    
+    /**
+     * Get Emojis List from the server
+     *
+     * 
+     * @return $emojisList
+     */
+    public function get_emojis_list()
+    {
+        $emojisList = json_decode(file_get_contents(base_path('public\assets\emojisList.json'), true));
+
+        return collect([$emojisList]);
+    }
 }
--- a/resources/js/store/modules/emojisList.js
+++ b/resources/js/store/modules/emojisList.js
@@ -1,6 +1,5 @@
-const defaultState = {
-
-    emojis : 
+{
+"emojisList" : 
    [
        {
            "codes": "1F600",
@@ -13948,13 +13947,13 @@ const defaultState = {
        }
    ],

-    emojiGroups : [
+    "emojisGroups" : [
        {
            "name": "Smileys & Emotion",
            "emoji": {
                "codes": "1F600",
                "char": "😀",
-                "name": "grinning face",
+                "name": "grinning face"
            }
        },
        {
@@ -13962,7 +13961,7 @@ const defaultState = {
            "emoji": {
                "codes": "1F91A",
                "char": "🤚",
-                "name": "raised back of hand",
+                "name": "raised back of hand"
            }
        },
        {
@@ -13970,7 +13969,7 @@ const defaultState = {
            "emoji": {
                "codes": "1F435",
                "char": "🐵",
-                "name": "monkey face",
+                "name": "monkey face"
            }
        },
        {
@@ -13978,7 +13977,7 @@ const defaultState = {
            "emoji": {
                "codes": "1F34F",
                "char": "🍏",
-                "name": "green apple",
+                "name": "green apple"
            }
        },
        {
@@ -13986,7 +13985,7 @@ const defaultState = {
            "emoji": {
                "codes": "1F697",
                "char": "🚗",
-                "name": "automobile",
+                "name": "automobile"
            }
        },
        {
@@ -13994,7 +13993,7 @@ const defaultState = {
            "emoji": {
                "codes": "26BD",
                "char": "⚽",
-                "name": "soccer ball",
+                "name": "soccer ball"
            }
        },
        {
@@ -14002,7 +14001,7 @@ const defaultState = {
            "emoji": {
                "codes": "231A",
                "char": "⌚",
-                "name": "watch",
+                "name": "watch"
            }
        },
        {
@@ -14010,7 +14009,7 @@ const defaultState = {
            "emoji": {
                "codes": "2764",
                "char": "❤",
-                "name": "red heart",
+                "name": "red heart"
            }
        },
        {
@@ -14018,21 +14017,8 @@ const defaultState = {
            "emoji": {
                "codes": "1F3F3",
                "char": "🏳",
-                "name": "white flag",
+                "name": "white flag"
            }
-        },
-
-
+        }
    ]
-}
-
-const getters = {
-    emojis: state => state.emojis,
-    emojiGroups: state => state.emojiGroups
-
-}
-
-export default {
-    state: defaultState,
-    getters
 }
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -75,31 +75,19 @@
    "/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=c001bef2d6d5171cb359",
    "/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
-    "/js/main.5fb05b33c8800e18e678.hot-update.js": "/js/main.5fb05b33c8800e18e678.hot-update.js",
-    "/js/main.3945065c6eb64b8a6553.hot-update.js": "/js/main.3945065c6eb64b8a6553.hot-update.js",
-    "/js/main.27049a6ed47215be0a9d.hot-update.js": "/js/main.27049a6ed47215be0a9d.hot-update.js",
-    "/js/main.e29af14113aaed78c626.hot-update.js": "/js/main.e29af14113aaed78c626.hot-update.js",
-    "/js/main.334274881560e2fb2375.hot-update.js": "/js/main.334274881560e2fb2375.hot-update.js",
-    "/js/main.ac81100eeed949ac97f0.hot-update.js": "/js/main.ac81100eeed949ac97f0.hot-update.js",
-    "/js/main.e03f09208112d8efce9e.hot-update.js": "/js/main.e03f09208112d8efce9e.hot-update.js",
-    "/js/main.6f48f6749945822c4f2a.hot-update.js": "/js/main.6f48f6749945822c4f2a.hot-update.js",
-    "/js/main.f00d5682bec289c069a1.hot-update.js": "/js/main.f00d5682bec289c069a1.hot-update.js",
-    "/js/main.cb91e299f6b0092ed525.hot-update.js": "/js/main.cb91e299f6b0092ed525.hot-update.js",
-    "/js/main.d009a11314fcdcbb3921.hot-update.js": "/js/main.d009a11314fcdcbb3921.hot-update.js",
-    "/js/main.5f1ec1268c2d447a7e23.hot-update.js": "/js/main.5f1ec1268c2d447a7e23.hot-update.js",
-    "/js/main.ab644a7e0668194bfda0.hot-update.js": "/js/main.ab644a7e0668194bfda0.hot-update.js",
-    "/js/main.acd052038b267c61a146.hot-update.js": "/js/main.acd052038b267c61a146.hot-update.js",
-    "/js/main.44ad5d933de5ba420f43.hot-update.js": "/js/main.44ad5d933de5ba420f43.hot-update.js",
-    "/js/main.e4d4fe263509c4c3958a.hot-update.js": "/js/main.e4d4fe263509c4c3958a.hot-update.js",
-    "/js/main.393185a92ff6ef4012ff.hot-update.js": "/js/main.393185a92ff6ef4012ff.hot-update.js",
-    "/js/main.3487c72a10013187b78c.hot-update.js": "/js/main.3487c72a10013187b78c.hot-update.js",
-    "/js/main.878253e356674e1ff07e.hot-update.js": "/js/main.878253e356674e1ff07e.hot-update.js",
-    "/js/main.a7651a83a4cd855561a4.hot-update.js": "/js/main.a7651a83a4cd855561a4.hot-update.js",
-    "/js/main.cb340ddf3550d4dac3cf.hot-update.js": "/js/main.cb340ddf3550d4dac3cf.hot-update.js",
-    "/js/main.77794c112aaa64b3731b.hot-update.js": "/js/main.77794c112aaa64b3731b.hot-update.js",
-    "/js/main.0d900ff97d20b047f7fc.hot-update.js": "/js/main.0d900ff97d20b047f7fc.hot-update.js",
-    "/js/main.7588429f35efb60362c4.hot-update.js": "/js/main.7588429f35efb60362c4.hot-update.js",
-    "/js/main.931e49d0ae359bb84be6.hot-update.js": "/js/main.931e49d0ae359bb84be6.hot-update.js",
-    "/js/main.b09f9d2eddc299140e8d.hot-update.js": "/js/main.b09f9d2eddc299140e8d.hot-update.js",
-    "/js/main.5fe9005430f41f279199.hot-update.js": "/js/main.5fe9005430f41f279199.hot-update.js"
+    "/js/main.ca25a2c6c639321c350c.hot-update.js": "/js/main.ca25a2c6c639321c350c.hot-update.js",
+    "/js/main.11a9a2811b3383baba65.hot-update.js": "/js/main.11a9a2811b3383baba65.hot-update.js",
+    "/js/main.f637d96526827b1e4bb6.hot-update.js": "/js/main.f637d96526827b1e4bb6.hot-update.js",
+    "/js/main.430b4601edc898201547.hot-update.js": "/js/main.430b4601edc898201547.hot-update.js",
+    "/js/main.3b0cd7d2704535fb7ebc.hot-update.js": "/js/main.3b0cd7d2704535fb7ebc.hot-update.js",
+    "/js/main.ac12a5de42aef0d10771.hot-update.js": "/js/main.ac12a5de42aef0d10771.hot-update.js",
+    "/js/main.35caeaece6877b90f196.hot-update.js": "/js/main.35caeaece6877b90f196.hot-update.js",
+    "/js/main.b713ccfa3fcbc82b1961.hot-update.js": "/js/main.b713ccfa3fcbc82b1961.hot-update.js",
+    "/js/main.b11ae42ed51b808c9969.hot-update.js": "/js/main.b11ae42ed51b808c9969.hot-update.js",
+    "/js/main.b74357df9b881913c9b3.hot-update.js": "/js/main.b74357df9b881913c9b3.hot-update.js",
+    "/js/main.a2b28fde2b813cb8f6b7.hot-update.js": "/js/main.a2b28fde2b813cb8f6b7.hot-update.js",
+    "/js/main.1c5ecb1c821da5594155.hot-update.js": "/js/main.1c5ecb1c821da5594155.hot-update.js",
+    "/js/main.10ec846f78e65757a101.hot-update.js": "/js/main.10ec846f78e65757a101.hot-update.js",
+    "/js/main.85d36148abb684d84e19.hot-update.js": "/js/main.85d36148abb684d84e19.hot-update.js",
+    "/js/main.334bcff58ec2d34342dd.hot-update.js": "/js/main.334bcff58ec2d34342dd.hot-update.js"
 }
--- a/resources/js/components/Others/SetFolderIcon.vue
+++ b/resources/js/components/Others/SetFolderIcon.vue
@@ -25,44 +25,56 @@

                        <chevron-down-icon :class="{'active-menu' : selectOpen}" size="19"/>

-                        
                    </div>

                    <!-- Emojis List -->
                    <transition v-if="selectOpen" name="slide-in">
-                        <div class="emoji-wrapper">
-                            <input @click.stop @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" >
+                        <div>

-                            <!-- Navigation of Emojis Groups -->
-                            <ul v-show="searchInput.length < 1" class="groups-list">
-                                <li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojiGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
-                                    <Emoji :emoji="group.emoji" size="33"/>
-                                </li>
-                            </ul>
-
-                             <!-- All Emojis -->
-                            <div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box"  class="group-wrapper">
-                                <div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper" :id="`group-${name}`">
-                                    <label class="group-name-label">{{name}}</label>
-                                    <ul class="options-list">
-                                        <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i"  class="option"> 
-                                            <Emoji :emoji="emoji" size="33"/>
-                                        </li>
-                                    </ul>
-                                </div>
+                            <!-- Spinner -->
+                            <div v-if="!loadedList" class="emoji-wrapper">
+                                <Spinner />
                            </div>
                            
-                           <!-- Searched emojis -->
-                            <div v-if="searchInput.length > 0" class="group-wrapper">
-                                <div class="options-wrapper">
-                                    <ul class="options-list">
-                                        <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option" >
-                                            <Emoji :emoji="emoji" size="33"/>    
-                                        </li>
-                                    </ul>
-                                    <span class="not-found" v-if="filteredEmojis.length === 0"> {{$t('popup_rename.emoji_list_not_found')}}</span>
+                            <!-- List -->
+                            <div v-if="loadedList && emojis" class="emoji-wrapper">
+
+                                <!-- Search input -->
+                                <input @click.stop @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" >
+
+                                <!-- Navigation of Emojis Groups -->
+                                <ul v-show="searchInput.length < 1" class="groups-list">
+                                    <li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.emojisGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
+                                        <Emoji :emoji="group.emoji" size="33"/>
+                                    </li>
+                                </ul>
+
+                                <!-- All Emojis -->
+                                <div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box"  class="group-wrapper">
+                                    <div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper" :id="`group-${name}`">
+                                        <label class="group-name-label">{{name}}</label>
+                                        <ul class="options-list">
+                                            <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i"  class="option"> 
+                                                <Emoji :emoji="emoji" size="33"/>
+                                            </li>
+                                        </ul>
+                                    </div>
                                </div>
+                                
+                            <!-- Searched emojis -->
+                                <div v-if="searchInput.length > 0" class="group-wrapper">
+                                    <div class="options-wrapper">
+                                        <ul class="options-list">
+                                            <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option" >
+                                                <Emoji :emoji="emoji" size="33"/>    
+                                            </li>
+                                        </ul>
+                                        <span class="not-found" v-if="filteredEmojis.length === 0"> {{$t('popup_rename.emoji_list_not_found')}}</span>
+                                    </div>
+                                </div>
+                                
                            </div>
+
                        </div>

                    </transition>
@@ -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;
--- 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,
--- 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) => {
--- 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');
 });