make translation helper for laravel

app/Http/Controllers/Admin/LanguageController.php

@@ -11,6 +11,7 @@ use App\Http\Tools\Demo;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
 use App\Http\Controllers\Controller;
+use Illuminate\Support\Facades\Cache;
 use App\Http\Requests\Languages\UpdateStringRequest;
 use App\Http\Requests\Languages\CreateLanguageRequest;
 use App\Http\Requests\Languages\UpdateLanguageRequest;
@@ -19,33 +20,26 @@ class LanguageController extends Controller
 {
 
     /**
-     * Get all languages
+     * Get all languages for admin translate
      * 
-     * @return string
+     * @return Collection
      */
     public function get_languages()
     {
-        return Language::all();
+        return [
-    }
+           'languages'    => Language::all(),
-
+           'set_language' => Setting::whereName('language')->first()->value
-    public function get_language_strings_i18n($language)
+        ];
-    {
-        $lang = Language::whereLocale($language);
-
-        return $lang->with('languageStrings')->first();
-
     }
 
     /**
-     * Get all language strings
+     * Get all language strings for admin translate
      *
      * @param Language $language
      * @return Collection
      */
     public function get_language_strings(Language $language)
     {
-        $language_setting = Setting::whereName('language')->first()->value;
-
         $lang = Language::whereId($language->id);
 
         $strings = $lang->with('languageStrings')->first();
@@ -57,7 +51,6 @@ class LanguageController extends Controller
         $default_strings = collect(config('language_strings.' . $license));
 
         return [
-            'language_setting'   => $language_setting,
             'translated_strings' => $strings,
             'default_strings'    => $default_strings
         ];
@@ -108,7 +101,7 @@ class LanguageController extends Controller
     }
 
     /**
-     * Update strings for language
+     * Update string for language
      *
      * @param UpdateStringRequest $request
      * @param Language $language
@@ -128,6 +121,9 @@ class LanguageController extends Controller
                 'value'       => $request->value
             ]);
 
+        
+        Cache::forget('language_strings-' . $language->locale);
+
         return response('Done', 204);
     }
 

app/Http/Controllers/AppFunctionsController.php

@@ -269,16 +269,16 @@ class AppFunctionsController extends Controller
     
     public function get_translate($lang)
     {
-        $lang = Language::whereLocale($lang);
+        $language = Language::whereLocale($lang);
+
+        $key = 'language_strings-' . $lang;
         
-        if (Cache::has('language_strings')) {
+        if (Cache::has($key)) {
-            return Cache::get('language_strings');
+            return Cache::get($key);
         }
 
-        return Cache::rememberForever('language_strings', function () use ($lang) {
+        return Cache::rememberForever($key, function () use ($language) {
-            return $lang->with('languageStrings')->first();
+            return $language->with('languageStrings')->first();
-        });
+        });     
-        
     }
-
 }

app/Http/Helpers/helpers.php

@@ -807,26 +807,20 @@ function set_time_by_user_timezone($time)
 
 function _t($key)
 {
-    if (Cache::has('language_strings')) {
+    $locale = get_setting('language');
+               
+    //Check if cash has string 
+    if (Cache::has('language_strings-' . $locale)) {
         
-        //Check if cash has string 
+        $strings = Cache::get('language_strings-' . $locale)
-        $strings = Cache::get('language_strings')
+                    ->languageStrings;
-                    ->languageStrings
+                    
-                    ->toArray();
-
         // Find the string by key
-        foreach($strings as $string) {
+       return $strings->firstWhere('key', $key)->value;
-            if($string['key'] === $key) {
+    }    
-               return $string['value'];
-            }
-        }
-    }
-
-    $language = Language::whereLocale(get_setting('language'))
-                    ->first();
 
     // If cash dont have string return string from database
-    return LanguageString::whereLangAndKey($language->locale, $key)
+    return LanguageString::whereLangAndKey($locale, $key)
             ->first()
             ->value;
 }

app/Language.php

@@ -33,10 +33,12 @@ class Language extends Model
             DB::table('language_strings')
                 ->where('lang', $language->locale)
                 ->delete();
+
+            Cache::forget('language_strings-' . $language->locale );
         });
 
-        static::updated(function() {
+        static::updated(function($language) {
-            Cache::forget('language_strings');
+            Cache::forget('language_strings-' . $language->locale );
         });
 
         static::created(function ($language) {

config/language_strings.php

@@ -414,6 +414,7 @@ return [
                 "popup_passport_error.title" => "Invalid Passport Grand Client",
                 "popup_paylod_error.message" => "Sorry, your file is too large and can't be uploaded",
                 "popup_paylod_error.title" => "File is too large",
+                "popup_rename.select_emoji_label" => "Pick Your Emoji Icon",
                 "popup_rename.color_pick_label" => "Pick Your Color:",
                 "popup_rename.emoji_list_not_found" => "Not Found",
                 "popup_rename.label" => "Edit Name",
@@ -987,6 +988,7 @@ return [
                 "popup_passport_error.title" => "Invalid Passport Grand Client",
                 "popup_paylod_error.message" => "Sorry, your file is too large and can't be uploaded",
                 "popup_paylod_error.title" => "File is too large",
+                "popup_rename.select_emoji_label" => "Pick Your Emoji Icon",
                 "popup_rename.color_pick_label" => "Pick Your Color:",
                 "popup_rename.emoji_list_not_found" => "Not Found",
                 "popup_rename.label" => "Edit Name",

public/mix-manifest.json

@@ -13,7 +13,7 @@
     "/chunks/app-billings.js": "/chunks/app-billings.js?id=aac5bd51067578358164",
     "/chunks/app-email.js": "/chunks/app-email.js?id=9d1631b19f6492b8cae4",
     "/chunks/app-index.js": "/chunks/app-index.js?id=2dcbe307133d780b6472",
-    "/chunks/app-language.js": "/chunks/app-language.js?id=4179320e3c8fcf2d4ae9",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=62fc50db4f9950730323",
     "/chunks/app-others.js": "/chunks/app-others.js?id=44efcfb317747ff3b508",
     "/chunks/app-payments.js": "/chunks/app-payments.js?id=187ecc16f9f7fbc4ccac",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=b6b0eba13665133c0a19",

resources/js/App.vue

@@ -4,7 +4,7 @@
         <!--System alerts-->
         <Alert/>
 
-        <div id="application-wrapper" v-if="! isGuestLayout">
+        <div id="application-wrapper" v-show="loadedLanguage" v-if="! isGuestLayout">
 
             <!-- Full File Preview -->
             <FileFullPreview/>
@@ -148,6 +148,7 @@ export default {
     data() {
         return {
             isScaledDown: false,
+            loadedLanguage: false,
         }
     },
     methods: {
@@ -181,7 +182,9 @@ export default {
     },
     mounted() {
 
-        this.$loadLanguage()
+        this.$loadLanguage().then((loaded) => {
+            this.loadedLanguage = loaded
+        })
 
         this.$checkOS()
 

resources/js/components/Others/Forms/SelectInput.vue

@@ -10,7 +10,7 @@
                     <user-icon v-if="selected.icon === 'user'" size="14"></user-icon>
                     <edit2-icon v-if="selected.icon === 'user-edit'" size="14"></edit2-icon>
                 </div>
-                <span class="option-value">{{ selected.label }}</span>
+                <span class="option-value">{{ $t(`${selected.label}`) }}</span>
             </div>
 
             <!--If is empty-->
@@ -29,7 +29,7 @@
                         <user-icon v-if="option.icon === 'user'" size="14"></user-icon>
                         <edit2-icon v-if="option.icon === 'user-edit'" size="14"></edit2-icon>
                     </div>
-                    <span class="option-value">{{ option.label }}</span>
+                    <span class="option-value">{{ $t(`${option.label}`) }}</span>
                 </li>
             </ul>
         </transition>

resources/js/helpers.js

@@ -25,7 +25,7 @@ const Helpers = {
 
         Vue.prototype.$loadLanguage = function (language) {
            
-            // return new Promise((resolve, reject) => {
+            return new Promise((resolve, reject) => {
                 let locale = language ? language : this.$store.getters.config.language
                 axios.get(`/api/language/${locale}`)
                     .then((response) => {
@@ -39,12 +39,11 @@ const Helpers = {
                         })
 
                         i18n.setLocaleMessage(locale, obj)
-                        i18n.locale = locale
+                        i18n.locale = locale        
-
+                        
-                        // resolve(true)
+                        resolve(true)
-                       
                     })
-            // })
+            })
         }
 
         Vue.prototype.$updateImage = function (route, name, image) {

resources/js/views/Admin/Languages/Language.vue

@@ -12,11 +12,17 @@
                         <div class="language-label-wrapper">
                             <label class="language-label">Languages</label>
                         </div>
+
+                        <!-- Languages -->
                         <div  class="all-language-wrapper">
-                            <div @click="getLanguageStrings(language)" v-for="language in languages" :key="language.id">
+                            <div @click="openLanguage(language)" v-for="language in languages" :key="language.id">
                                 <div class="language" >
-                                    <label class="name" :class="{'active' :active === language.locale}">{{language.name}}</label>
+                                    <label class="name" :class="{'active' :activeLanguage.locale === language.locale}">
-                                    <x-icon v-if="language.locale !== 'en'" @click.stop="deleteLanguageConfirm(language)" class="icon" size="17"/>
+                                        {{language.name}}
+                                    </label>
+                                    <x-icon v-if="language.locale !== 'en' && language.locale !== setLanguage" 
+                                            @click.stop="deleteLanguageConfirm(language)" 
+                                            class="icon" size="17"/>
                                 </div>
                             </div>
                         </div>
@@ -27,8 +33,9 @@
                     </MobileActionButton>
                 </div>
 
-                <!-- <Spinner v-if="! loadedStrings"/> -->
+                <!-- Strings -->
-                <LanguageStrings :loaded-strings="loadedStrings" :language-strings="languagesStrings" />
+                <LanguageStrings :active-language="activeLanguage" :set-language="setLanguage" />
+
             </div>
         </div>
     </div>
@@ -59,11 +66,11 @@ export default {
     },
     data () {
         return {
-            active: undefined,
+            activeLanguage: undefined,
-            languages:undefined,
             languagesStrings:undefined,
+            setLanguage: undefined,
+            languages:undefined,
             loadedLanguages: false,
-            loadedStrings:false
         }
     },
     methods: {
@@ -89,30 +96,19 @@ export default {
             axios
 				.get('/api/languages')
 				.then((response) => {
-                    this.languages = response.data
+                    this.languages = response.data.languages
-                    this.active = response.data[0].locale
+
+                    this.activeLanguage = response.data.languages[0]
+
+                    this.setLanguage = response.data.set_language
 				})
 				.catch(() => Vue.prototype.$isSomethingWrong())
 				.finally(() => {
 					this.loadedLanguages = true
-                    this.getLanguageStrings(this.languages[0])
 				})
         },
-        getLanguageStrings (language) {
+        openLanguage(language) {
-
+            this.activeLanguage = language
-            this.active = language.locale
-
-            this.loadedStrings = false
-
-            axios
-				.get(`/api/languages/${language.id}/strings`)
-				.then(response => {
-					this.languagesStrings = response.data
-				})
-				.catch(() => Vue.prototype.$isSomethingWrong())
-				.finally(() => {
-					this.loadedStrings = true
-				})
         }
     },
     mounted () {
@@ -132,6 +128,10 @@ export default {
             
             this.languages[index].name = language.name
         })
+
+        events.$on('language:set-as-default', (locale) => {
+            this.setLanguage = locale
+        })
     },
     destroyed () {
         events.$off('action:confirmed')

resources/js/views/Admin/Languages/LanguageStrings.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- Serach bar -->
     <div v-if="strings" class="language-strings-wrapper">
         <div class="search-bar-wrapper">
             <div class="search-bar">
@@ -20,6 +21,8 @@
         </div>
 
         <Spinner v-if="!loadedStrings"/>
+
+        <!-- Set Language as default switch -->
         <div v-if="loadedStrings" class="form block-form">
             <FormLabel class="mt-70" icon="settings">Language Settings</FormLabel>
             <div class="block-wrapper">
@@ -40,7 +43,8 @@
                 </div>
             </div>
 
-            <div v-if="language.name" class="block-wrapper">
+            <!-- Language name -->
+            <div class="block-wrapper">
                 <label> Language Name:</label>
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Language Name" rules="required" v-slot="{ errors }">
                     <input  type="text"
@@ -52,21 +56,20 @@
                 </ValidationProvider>
             </div>
 
+            <!-- Strings -->
             <FormLabel class="mt-70">Language Strings</FormLabel>
-            <div class="block-wrapper">
+            <Spinner v-if="!loadSearch || filteredStrings.length === 0"/>
-                <Spinner v-if="!loadSearch"/>
+            <div v-if="loadSearch && filteredStrings.length > 0">
-                <div v-if="loadSearch">
+                <div class="block-wrapper string" v-for="(string,index) in filteredStrings" :key="index">
-                    <div  class="block-wrapper" v-for="(string,index) in filteredStrings" :key="index">
+                    <label> {{string.value}}:</label>
-                        <label> {{string.value}}:</label>
+                    <ValidationProvider tag="div" class="input-wrapper" name="Language string" rules="required" v-slot="{ errors }">
-                        <ValidationProvider tag="div" class="input-wrapper" name="Language string" rules="required" v-slot="{ errors }">
+                        <input  type="text"
-                            <input  type="text"
+                                :class="{'is-error': errors[0]}"
-                                    :class="{'is-error': errors[0]}"
+                                @input="updateString(string.key)"
-                                    @input="updateString(string.key)"
+                                v-model="strings[getIndex(string.key)].value"
-                                    v-model="strings[getIndex(string.key)].value"
+                        />
-                            />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
-                        </ValidationProvider>
-                    </div>
                 </div>
             </div>
         </div>
@@ -86,7 +89,7 @@ import lodash from 'lodash'
 
 export default {
     name: 'LanguageStrings',
-    props: [ 'languageStrings', 'loadedStrings'],
+    props: [ 'activeLanguage', 'setLanguage' ],
     components: {
         ValidationProvider, 
         ValidationObserver,
@@ -98,7 +101,7 @@ export default {
     },
     computed: {
         languageSettingHandle() {
-            return this.language.locale == this.languageSetting ? true : false
+            return this.language.locale == this.setLanguage ? true : false
         },
     },
     data () {
@@ -106,16 +109,15 @@ export default {
             defaultStrings: [],
             filteredStrings: [],
             loadSearch: false,
+            loadedStrings: false,
             strings: undefined,
             language: undefined,
             searchInput: '',
-            languageSetting: undefined
         }
     },
     watch: {
-        loadedStrings () {
+        activeLanguage () {
-            if(this.loadedStrings)
+            this.getLanguageStrings(this.activeLanguage)
-                this.loadData()
         }
     },
     methods: {
@@ -123,7 +125,7 @@ export default {
         
             this.$updateText('/settings', 'language', this.language.locale)
 
-            this.languageSetting = this.language.locale
+            events.$emit('language:set-as-default', this.language.locale) 
 
             this.$loadLanguage(this.language.locale)
         },
@@ -150,7 +152,7 @@ export default {
              if(! this.strings[this.getIndex(key)].value) return
 
              this.$updateText(
-                `/languages/${this.languageStrings.translated_strings.id}/string`, `${key}`, this.strings[this.getIndex(key)].value,
+                `/languages/${this.language.id}/string`, `${key}`, this.strings[this.getIndex(key)].value,
             )
         },
         searchStrings() {
@@ -169,30 +171,39 @@ export default {
             this.loadSearch = true
 
         }, 200),
-        loadData() {
+        getLanguageStrings (language) {
 
-            if(this.languageStrings.translated_strings) {
+            this.loadedStrings = false
+            
+            this.defaultStrings = []
+            this.filteredStrings= []
 
-                this.strings = this.languageStrings.translated_strings.language_strings
+            axios
+				.get(`/api/languages/${language.id}/strings`)
+				.then(response => {
 
-                // Make from JSON object array of objects
+					this.strings = response.data.translated_strings.language_strings
-                for (const [key, value] of Object.entries(this.languageStrings.default_strings)) {
+                    
-                    this.defaultStrings.push({
+                    this.language = {
-                        'key': key,
+                        'id': response.data.translated_strings.id,
-                        'value': value,
+                        'name': response.data.translated_strings.name,
-                    })
+                        'locale': response.data.translated_strings.locale,
-                }
+                    }
 
-                this.language = {
+                    //  Make from JSON object array of objects
-                    'id': this.languageStrings.translated_strings.id,
+                    for (const [key, value] of Object.entries(response.data.default_strings)) {
-                    'name': this.languageStrings.translated_strings.name,
+                        this.defaultStrings.push({
-                    'locale': this.languageStrings.translated_strings.locale,
+                            'key': key,
-                }
+                            'value': value,
+                        })
+                    }
 
-                this.languageSetting = this.languageStrings.language_setting
+                    this.filterStrings()                    
-
+				})
-                this.filterStrings()
+				.catch(() => Vue.prototype.$isSomethingWrong())
-            }
+				.finally(() => {
+					this.loadedStrings = true
+				})
         }
     },
 }
@@ -204,6 +215,13 @@ export default {
 @import '@assets/vue-file-manager/_mixins';
 @import '@assets/vue-file-manager/_forms';
 
+.string:last-child {
+    margin-bottom: 32px !important;
+}
+
+.block-form {
+    padding: 1px;
+}
 .disable-switch {
    cursor: not-allowed;
    

resources/lang/en/vuefilemanager.php

@@ -2,17 +2,17 @@
 
 return [
     'app_description'         => 'Your self-hosted storage cloud software powered by Laravel and Vue',
-    'user_not_fount'          => 'We can\'t find a user with that e-mail address.',
+    'user_not_fount'          => _t('user_not_fount'),
     'incorrect_password'      => 'Sorry, your password is incorrect.',
     'time'                    => '%d. %B. %Y at %H:%M',
     'home'                    => 'Home',
 
     //Shared link email message
-    'shared_link_email_subject'     => '🙋 :user share some files with you. Look at it!',
+    'shared_link_email_subject'     => _t('shared_link_email_subject'),
-    'shared_link_email_greeting'    => 'Hello!',
+    'shared_link_email_greeting'    => _t('shared_link_email_greeting'),
-    'shared_link_email_user'        => ':user (:email) send you a link to shared files.',
+    'shared_link_email_user'        => _t('shared_link_email_user'),
-    'shared_link_email_link'        => 'Open your files',
+    'shared_link_email_link'        => _t('shared_link_email_link'),
-    'shared_link_email_salutation'  => 'Regards, :app_name',
+    'shared_link_email_salutation'  => _t('shared_link_email_salutation'),
 
     // Reset password email
     'reset_password_greeting' => 'Hello!',