create Createlanguage popup, changes in LanguageController

app/Http/Controllers/General/SetupWizardController.php

@@ -15,6 +15,7 @@ use App\Services\StripeService;
 use App\Setting;
 use App\User;
 use App\UserSettings;
+use App\Language;
 use Artisan;
 use Cartalyst\Stripe\Exception\UnauthorizedException;
 use Doctrine\DBAL\Driver\PDOException;
@@ -477,6 +478,29 @@ class SetupWizardController extends Controller
             Page::updateOrCreate($page);
         });
 
+        // Create languages & strings
+        $language = Language::updateOrCreate([
+            'name'   => 'English',
+            'locale' => 'en'
+        ]);
+
+        $license = get_setting('license') === 'Extended' ? 'extended' : 'regular';
+
+        $language_strings = collect(config('language_strings.' . $license));
+
+        $strings = $language_strings->map(function ($value , $key) use($language) {
+
+           return [
+                'language_id' => $language->id,
+                'key'         => $key,
+                'lang'        => $language->locale,
+                'value'       => $value
+            ];
+
+        })->toArray();
+
+        DB::table('language_strings')->insert($strings);
+
         // Retrieve access token
         $response = Route::dispatch(self::make_login_request($request));
 

app/Http/Controllers/Language/LanguageController.php

@@ -2,22 +2,24 @@
 
 namespace App\Http\Controllers\Language;
 
-use App\Http\Requests\Languages\UpdateLanguageRequest;
-use App\Http\Requests\Languages\UpdateStringRequest;
-use App\Http\Requests\Languages\CreateLanguageRequest;
-
-
 use App\Language;
 use App\LanguageString;
 use App\Http\Tools\Demo;
+
+
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
 use App\Http\Controllers\Controller;
+use App\Http\Requests\Languages\UpdateStringRequest;
+use App\Http\Requests\Languages\CreateLanguageRequest;
+use App\Http\Requests\Languages\UpdateLanguageRequest;
 
 class LanguageController extends Controller
 {
+
     /**
      * Get all languages
-     *
+     * 
      * @return string
      */
     public function get_languages ()
@@ -28,12 +30,23 @@ class LanguageController extends Controller
     /**
      * Get all language strings
      *
-     * @param $language
+     * @param Language $language
      * @return string
      */
-    public function get_language_strings($locale)
+    public function get_language_strings(Language $language)
     {
-       return Language::where('locale', $locale)->with('languageStrings')->first();
+       
+        // $lang = Language::whereId($language->id);
+
+        $strings = $language->with('languageStrings')->first();
+
+        // dd($strings);
+
+        $license = get_setting('license') === 'Extended' ? 'extended' : 'regular';
+
+        $default_strings = collect(config('language_strings.' . $license));
+
+       return collect(['translated_strings' => $strings, 'default_strings' => $default_strings]);
     }
 
     /**
@@ -49,7 +62,7 @@ class LanguageController extends Controller
             return Demo::response_204();
         }
 
-        // Create new language
+         // Create languages & strings
         $language = Language::create([
             'name'      => $request->name,
             'locale'    => $request->locale
@@ -63,18 +76,15 @@ class LanguageController extends Controller
      * Update language
      *
      * @param UpdateLanguageRequest $request
-     * @param $id
+     * @param Language $language
      * @return $language
      */
-    public function update_language(UpdateLanguageRequest $request, $id)
+    public function update_language(UpdateLanguageRequest $request, Language $language)
     {
         // Check if is demo
         if (env('APP_DEMO')) {
             return Demo::response_204();
         }
-        
-        // Get language
-        $language = Language::findOrFail($id);
 
         // Update language
         $language->update(make_single_input($request));
@@ -87,30 +97,41 @@ class LanguageController extends Controller
      * Update strings for language
      *
      * @param UpdateStringRequest $request
+     * @param Language $language
      * @return ResponseFactory|\Illuminate\Http\Response
      */
-    public function update_string(UpdateStringRequest $request)
+    public function update_string(UpdateStringRequest $request,Language $language)
     {
         // Check if is demo
         if (env('APP_DEMO')) {
             return Demo::response_204();
         }
 
-        // Get language
+        LanguageString::whereLanguageIdAndKey($language->id, $request->name)
-        $lang = Language::where('locale', $request->input('locale'))->first();
+            ->update([
-
+                'language_id' => $language->id,
-        foreach($request->input('language') as $language) 
+                'key'         => $request->name,
-        {
+                'lang'        => $language->locale,
-
+                'value'       => $request->value
-            // If key with lang already exist update, if no crate 
-            LanguageString::updateOrCreate([
-                'language_id' => $lang->id,
-                'key'         => $language['key'],
-                'lang'        => $lang->locale,
-            ],[
-                'value'       => $language['value']
             ]);
+        
+        return response('Done', 204);
+    }
+
+    /**
+     * Delete the language with all children strings
+     *
+     * @param Language $language
+     * @return ResponseFactory|\Illuminate\Http\Response
+     */
+    public function delete_language(Language $language)
+    {
+        // Check if is demo
+        if (env('APP_DEMO')) {
+            return Demo::response_204();
         }
+
+        $language->delete();
         
         return response('Done', 204);
     }

app/Http/Requests/Languages/UpdateStringRequest.php

@@ -24,10 +24,8 @@ class UpdateStringRequest extends FormRequest
     public function rules()
     {
         return [
-            'locale'            => 'required|string',
+            'name'       => 'required|string',
-            'language'          => 'required|array',
+            'value'     => 'required|string'
-            'language.*.key'   => 'required|string',
-            'language.*.value' => 'required|string'
         ];
     }
 }

app/Language.php

@@ -4,6 +4,7 @@ namespace App;
 
 use App\LanguageString;
 use Illuminate\Support\Str;
+use Illuminate\Support\Facades\DB;
 use Illuminate\Database\Eloquent\Model;
 
 class Language extends Model
@@ -13,14 +14,44 @@ class Language extends Model
 
     protected $keyType = 'string';
 
+    protected $primaryKey = 'id';
+
     public $incrementing = false ;
 
     public $timestamps = false;
 
-    protected static function booted()
+    protected static function boot()
     {
-        static::creating(function($model) {
+        parent::boot();
-            $model->id = Str::uuid();
+
+        static::creating(function ($language) {
+            $language->id = Str::uuid();
+        });
+
+        static::deleting(function ($language) {
+            $language->languageStrings()->delete();
+        });
+
+        static::created(function ($language) {
+
+            $license = get_setting('license') === 'Extended' ? 'extended' : 'regular';
+
+            $language_strings = collect(config('language_strings.' . $license));
+
+    
+           $strings = $language_strings->map(function ($value , $key) use($language) {
+    
+               return [
+                    'language_id' => $language->id,
+                    'key'         => $key,
+                    'lang'        => $language->locale,
+                    'value'       => $value
+                ];
+    
+            })->toArray();
+    
+            DB::table('language_strings')->insert($strings);
+
         });
     }
 

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=6a19e4970a78281f045f",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=9203f328c3fc4f8bf0f4",
     "/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",
@@ -75,5 +75,16 @@
     "/chunks/user-password.js": "/chunks/user-password.js?id=ac51d17a4aa7ae50bc88",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=10b3a108059d62d206c8",
-    "/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c"
+    "/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
+    "/chunks/app-language.75a8d0f493b84cc978b0.hot-update.js": "/chunks/app-language.75a8d0f493b84cc978b0.hot-update.js",
+    "/chunks/app-language.11f2328701d7d1eca870.hot-update.js": "/chunks/app-language.11f2328701d7d1eca870.hot-update.js",
+    "/chunks/app-language.777221bd2497f08011d9.hot-update.js": "/chunks/app-language.777221bd2497f08011d9.hot-update.js",
+    "/chunks/app-language.bc81b9e7ca698d87c551.hot-update.js": "/chunks/app-language.bc81b9e7ca698d87c551.hot-update.js",
+    "/chunks/app-language.a4ed495733086633616b.hot-update.js": "/chunks/app-language.a4ed495733086633616b.hot-update.js",
+    "/chunks/app-language.621d2d3bfd5b566ca6fd.hot-update.js": "/chunks/app-language.621d2d3bfd5b566ca6fd.hot-update.js",
+    "/chunks/app-language.d798bdfce2bf9e140bac.hot-update.js": "/chunks/app-language.d798bdfce2bf9e140bac.hot-update.js",
+    "/chunks/app-language.24a27e086d82daca8ee6.hot-update.js": "/chunks/app-language.24a27e086d82daca8ee6.hot-update.js",
+    "/chunks/app-language.51bb5abc36798fbf4971.hot-update.js": "/chunks/app-language.51bb5abc36798fbf4971.hot-update.js",
+    "/chunks/app-language.c1e9e509fd5d55e2364a.hot-update.js": "/chunks/app-language.c1e9e509fd5d55e2364a.hot-update.js",
+    "/chunks/app-language.089db7aa0e313057463e.hot-update.js": "/chunks/app-language.089db7aa0e313057463e.hot-update.js"
 }

resources/js/App.vue

@@ -28,6 +28,9 @@
             <!--Create folder in mobile version-->
             <CreateFolder/>
 
+            <!-- Create language popup -->
+            <CreateLanguage/>
+
             <!--Move item setup-->
             <MoveItem/>
 
@@ -71,6 +74,7 @@ import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
 import FileFullPreview from '@/components/FilesView/FileFullPreview'
 import MobileNavigation from '@/components/Others/MobileNavigation'
 import CookieDisclaimer from '@/components/Others/CookieDisclaimer'
+import CreateLanguage from '@/components/Others/CreateLanguage'
 import CreateFolder from '@/components/Others/CreateFolder'
 import MobileMenu from '@/components/FilesView/MobileMenu'
 import ShareCreate from '@/components/Others/ShareCreate'
@@ -95,6 +99,7 @@ export default {
         CookieDisclaimer,
         FileFullPreview,
         ProcessingPopup,
+        CreateLanguage,
         ToastrWrapper,
         CreateFolder,
         ShareCreate,

resources/js/components/Others/CreateLanguage.vue

@@ -0,0 +1,867 @@
+<template>
+    <PopupWrapper name="create-language">
+        
+        <!--Title-->
+        <PopupHeader :title="'Create Language'" icon="edit" />
+
+        <!--Content-->
+        <PopupContent>
+
+            <!--Form to set sharing-->
+            <ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
+
+                <!--Set password-->
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Language Name" rules="required" v-slot="{ errors }">
+                    <label class="input-label">Type Name:</label>
+                    <input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" placeholder="Type Language Name">
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+
+                 <!--Set password-->
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Language Locale" rules="required" v-slot="{ errors }">
+                    <label class="input-label">Select Locale:</label>
+                    <SelectInput v-model="locale" :options="allLocals" placeholder="Select Language Locale" :isError="errors[0]"/>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+                
+            </ValidationObserver>
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="$closePopup()"
+                    button-style="secondary"
+            >Cancel
+            </ButtonBase>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="createLanguage"
+                    button-style="theme"
+                    :loading="isLoading" 
+                    :disabled="isLoading"
+            >Create Language
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+import PopupActions from '@/components/Others/Popup/PopupActions'
+import PopupContent from '@/components/Others/Popup/PopupContent'
+import PopupHeader from '@/components/Others/Popup/PopupHeader'
+import SelectInput from '@/components/Others/Forms/SelectInput'
+import ButtonBase from '@/components/FilesView/ButtonBase'
+import {required} from 'vee-validate/dist/rules'
+import {events} from '@/bus'
+import axios from 'axios'
+
+export default {
+    name: 'CreateLanguage',
+    components: {
+        ValidationProvider,
+        ValidationObserver,
+        PopupWrapper,
+        PopupActions,
+        PopupContent,
+        PopupHeader,
+        SelectInput,
+        ButtonBase,
+        required,
+    },
+    data() {
+        return {
+            name: undefined,
+            locale: undefined,
+            isLoading: false,
+            allLocals: [
+                {
+                    value: "ab",
+                    label: "Abkhaz"
+                },
+                {
+                    value: "aa",
+                    label: "Afar"
+                },
+                {
+                    value: "af",
+                    label: "Afrikaans"
+                },
+                {
+                    value: "ak",
+                    label: "Akan"
+                },
+                {
+                    value: "sq",
+                    label: "Albanian"
+                },
+                {
+                    value: "am",
+                    label: "Amharic"
+                },
+                {
+                    value: "ar",
+                    label: "Arabic"
+                },
+                {
+                    value: "an",
+                    label: "Aragonese"
+                },
+                {
+                    value: "hy",
+                    label: "Armenian"
+                },
+                {
+                    value: "as",
+                    label: "Assamese"
+                },
+                {
+                    value: "av",
+                    label: "Avaric"
+                },
+                {
+                    value: "ae",
+                    label: "Avestan"
+                },
+                {
+                    value: "ay",
+                    label: "Aymara"
+                },
+                {
+                    value: "az",
+                    label: "Azerbaijani"
+                },
+                {
+                    value: "bm",
+                    label: "Bambara"
+                },
+                {
+                    value: "ba",
+                    label: "Bashkir"
+                },
+                {
+                    value: "eu",
+                    label: "Basque"
+                },
+                {
+                    value: "be",
+                    label: "Belarusian"
+                },
+                {
+                    value: "bn",
+                    label: "Bengali; Bangla"
+                },
+                {
+                    value: "bh",
+                    label: "Bihari"
+                },
+                {
+                    value: "bi",
+                    label: "Bislama"
+                },
+                {
+                    value: "bs",
+                    label: "Bosnian"
+                },
+                {
+                    value: "br",
+                    label: "Breton"
+                },
+                {
+                    value: "bg",
+                    label: "Bulgarian"
+                },
+                {
+                    value: "my",
+                    label: "Burmese"
+                },
+                {
+                    value: "ca",
+                    label: "Catalan; Valencian"
+                },
+                {
+                    value: "ch",
+                    label: "Chamorro"
+                },
+                {
+                    value: "ce",
+                    label: "Chechen"
+                },
+                {
+                    value: "ny",
+                    label: "Chichewa; Chewa; Nyanja"
+                },
+                {
+                    value: "zh",
+                    label: "Chinese"
+                },
+                {
+                    value: "cv",
+                    label: "Chuvash"
+                },
+                {
+                    value: "kw",
+                    label: "Cornish"
+                },
+                {
+                    value: "co",
+                    label: "Corsican"
+                },
+                {
+                    value: "cr",
+                    label: "Cree"
+                },
+                {
+                    value: "hr",
+                    label: "Croatian"
+                },
+                {
+                    value: "cs",
+                    label: "Czech"
+                },
+                {
+                    value: "da",
+                    label: "Danish"
+                },
+                {
+                    value: "dv",
+                    label: "Divehi; Dhivehi; Maldivian;"
+                },
+                {
+                    value: "nl",
+                    label: "Dutch"
+                },
+                {
+                    value: "dz",
+                    label: "Dzongkha"
+                },
+                {
+                    value: "en",
+                    label: "English"
+                },
+                {
+                    value: "eo",
+                    label: "Esperanto"
+                },
+                {
+                    value: "et",
+                    label: "Estonian"
+                },
+                {
+                    value: "ee",
+                    label: "Ewe"
+                },
+                {
+                    value: "fo",
+                    label: "Faroese"
+                },
+                {
+                    value: "fj",
+                    label: "Fijian"
+                },
+                {
+                    value: "fi",
+                    label: "Finnish"
+                },
+                {
+                    value: "fr",
+                    label: "French"
+                },
+                {
+                    value: "ff",
+                    label: "Fula; Fulah; Pulaar; Pular"
+                },
+                {
+                    value: "gl",
+                    label: "Galician"
+                },
+                {
+                    value: "lg",
+                    label: "Ganda"
+                },
+                {
+                    value: "ka",
+                    label: "Georgian"
+                },
+                {
+                    value: "de",
+                    label: "German"
+                },
+                {
+                    value: "el",
+                    label: "Greek, Modern"
+                },
+                {
+                    value: "gn",
+                    label: "Guaraní"
+                },
+                {
+                    value: "gu",
+                    label: "Gujarati"
+                },
+                {
+                    value: "ht",
+                    label: "Haitian; Haitian Creole"
+                },
+                {
+                    value: "ha",
+                    label: "Hausa"
+                },
+                {
+                    value: "he",
+                    label: "Hebrew (modern)"
+                },
+                {
+                    value: "hz",
+                    label: "Herero"
+                },
+                {
+                    value: "hi",
+                    label: "Hindi"
+                },
+                {
+                    value: "ho",
+                    label: "Hiri Motu"
+                },
+                {
+                    value: "hu",
+                    label: "Hungarian"
+                },
+                {
+                    value: "ia",
+                    label: "Interlingua"
+                },
+                {
+                    value: "id",
+                    label: "Indonesian"
+                },
+                {
+                    value: "ie",
+                    label: "Interlingue"
+                },
+                {
+                    value: "ga",
+                    label: "Irish"
+                },
+                {
+                    value: "ig",
+                    label: "Igbo"
+                },
+                {
+                    value: "ik",
+                    label: "Inupiaq"
+                },
+                {
+                    value: "io",
+                    label: "Ido"
+                },
+                {
+                    value: "is",
+                    label: "Icelandic"
+                },
+                {
+                    value: "it",
+                    label: "Italian"
+                },
+                {
+                    value: "iu",
+                    label: "Inuktitut"
+                },
+                {
+                    value: "ja",
+                    label: "Japanese"
+                },
+                {
+                    value: "jv",
+                    label: "Javanese"
+                },
+                {
+                    value: "kl",
+                    label: "Kalaallisut, Greenlandic"
+                },
+                {
+                    value: "kn",
+                    label: "Kannada"
+                },
+                {
+                    value: "kr",
+                    label: "Kanuri"
+                },
+                {
+                    value: "ks",
+                    label: "Kashmiri"
+                },
+                {
+                    value: "kk",
+                    label: "Kazakh"
+                },
+                {
+                    value: "km",
+                    label: "Khmer"
+                },
+                {
+                    value: "ki",
+                    label: "Kikuyu, Gikuyu"
+                },
+                {
+                    value: "rw",
+                    label: "Kinyarwanda"
+                },
+                {
+                    value: "rn",
+                    label: "Kirundi"
+                },
+                {
+                    value: "ky",
+                    label: "Kyrgyz"
+                },
+                {
+                    value: "kv",
+                    label: "Komi"
+                },
+                {
+                    value: "kg",
+                    label: "Kongo"
+                },
+                {
+                    value: "ko",
+                    label: "Korean"
+                },
+                {
+                    value: "ku",
+                    label: "Kurdish"
+                },
+                {
+                    value: "kj",
+                    label: "Kwanyama, Kuanyama"
+                },
+                {
+                    value: "la",
+                    label: "Latin"
+                },
+                {
+                    value: "lb",
+                    label: "Luxembourgish, Letzeburgesch"
+                },
+                {
+                    value: "li",
+                    label: "Limburgish, Limburgan, Limburger"
+                },
+                {
+                    value: "ln",
+                    label: "Lingala"
+                },
+                {
+                    value: "lo",
+                    label: "Lao"
+                },
+                {
+                    value: "lt",
+                    label: "Lithuanian"
+                },
+                {
+                    value: "lu",
+                    label: "Luba-Katanga"
+                },
+                {
+                    value: "lv",
+                    label: "Latvian"
+                },
+                {
+                    value: "gv",
+                    label: "Manx"
+                },
+                {
+                    value: "mk",
+                    label: "Macedonian"
+                },
+                {
+                    value: "mg",
+                    label: "Malagasy"
+                },
+                {
+                    value: "ms",
+                    label: "Malay"
+                },
+                {
+                    value: "ml",
+                    label: "Malayalam"
+                },
+                {
+                    value: "mt",
+                    label: "Maltese"
+                },
+                {
+                    value: "mi",
+                    label: "MÄori"
+                },
+                {
+                    value: "mr",
+                    label: "Marathi"
+                },
+                {
+                    value: "mh",
+                    label: "Marshallese"
+                },
+                {
+                    value: "mn",
+                    label: "Mongolian"
+                },
+                {
+                    value: "na",
+                    label: "Nauru"
+                },
+                {
+                    value: "nv",
+                    label: "Navajo, Navaho"
+                },
+                {
+                    value: "nb",
+                    label: "Norwegian"
+                },
+                {
+                    value: "nd",
+                    label: "North Ndebele"
+                },
+                {
+                    value: "ne",
+                    label: "Nepali"
+                },
+                {
+                    value: "ng",
+                    label: "Ndonga"
+                },
+                {
+                    value: "nn",
+                    label: "Norwegian Nynorsk"
+                },
+                {
+                    value: "no",
+                    label: "Norwegian"
+                },
+                {
+                    value: "ii",
+                    label: "Nuosu"
+                },
+                {
+                    value: "oc",
+                    label: "Occitan"
+                },
+                {
+                    value: "oj",
+                    label: "Ojibwe, Ojibwa"
+                },
+                {
+                    value: "cu",
+                    label: "Old Church Slavonic, Church Slavic, Church Slavonic, Old Bulgarian, Old Slavonic"
+                },
+                {
+                    value: "om",
+                    label: "Oromo"
+                },
+                {
+                    value: "or",
+                    label: "Oriya"
+                },
+                {
+                    value: "os",
+                    label: "Ossetian, Ossetic"
+                },
+                {
+                    value: "pa",
+                    label: "Panjabi, Punjabi"
+                },
+                {
+                    value: "pi",
+                    label: "Pali"
+                },
+                {
+                    value: "fa",
+                    label: "Persian (Farsi)"
+                },
+                {
+                    value: "pl",
+                    label: "Polish"
+                },
+                {
+                    value: "ps",
+                    label: "Pashto, Pushto"
+                },
+                {
+                    value: "pt",
+                    label: "Portuguese"
+                },
+                {
+                    value: "qu",
+                    label: "Quechua"
+                },
+                {
+                    value: "rm",
+                    label: "Romansh"
+                },
+                {
+                    value: "ro",
+                    label: "Romanian"
+                },
+                {
+                    value: "ru",
+                    label: "Russian"
+                },
+                {
+                    value: "sa",
+                    label: "Sanskrit"
+                },
+                {
+                    value: "sc",
+                    label: "Sardinian"
+                },
+                {
+                    value: "sd",
+                    label: "Sindhi"
+                },
+                {
+                    value: "se",
+                    label: "Northern Sami"
+                },
+                {
+                    value: "sm",
+                    label: "Samoan"
+                },
+                {
+                    value: "sg",
+                    label: "Sango"
+                },
+                {
+                    value: "sr",
+                    label: "Serbian"
+                },
+                {
+                    value: "gd",
+                    label: "Scottish Gaelic"
+                },
+                {
+                    value: "sn",
+                    label: "Shona"
+                },
+                {
+                    value: "si",
+                    label: "Sinhala, Sinhalese"
+                },
+                {
+                    value: "sk",
+                    label: "Slovak"
+                },
+                {
+                    value: "sl",
+                    label: "Slovene"
+                },
+                {
+                    value: "so",
+                    label: "Somali"
+                },
+                {
+                    value: "st",
+                    label: "Southern Sotho"
+                },
+                {
+                    value: "az",
+                    label: "South Azerbaijani"
+                },
+                {
+                    value: "nr",
+                    label: "South Ndebele"
+                },
+                {
+                    value: "es",
+                    label: "Spanish; Castilian"
+                },
+                {
+                    value: "su",
+                    label: "Sundanese"
+                },
+                {
+                    value: "sw",
+                    label: "Swahili"
+                },
+                {
+                    value: "ss",
+                    label: "Swati"
+                },
+                {
+                    value: "sv",
+                    label: "Swedish"
+                },
+                {
+                    value: "ta",
+                    label: "Tamil"
+                },
+                {
+                    value: "te",
+                    label: "Telugu"
+                },
+                {
+                    value: "tg",
+                    label: "Tajik"
+                },
+                {
+                    value: "th",
+                    label: "Thai"
+                },
+                {
+                    value: "ti",
+                    label: "Tigrinya"
+                },
+                {
+                    value: "bo",
+                    label: "Tibetan Standard, Tibetan, Central"
+                },
+                {
+                    value: "tk",
+                    label: "Turkmen"
+                },
+                {
+                    value: "tl",
+                    label: "Tagalog"
+                },
+                {
+                    value: "tn",
+                    label: "Tswana"
+                },
+                {
+                    value: "to",
+                    label: "Tonga (Tonga Islands)"
+                },
+                {
+                    value: "tr",
+                    label: "Turkish"
+                },
+                {
+                    value: "ts",
+                    label: "Tsonga"
+                },
+                {
+                    value: "tt",
+                    label: "Tatar"
+                },
+                {
+                    value: "tw",
+                    label: "Twi"
+                },
+                {
+                    value: "ty",
+                    label: "Tahitian"
+                },
+                {
+                    value: "ug",
+                    label: "Uyghur, Uighur"
+                },
+                {
+                    value: "uk",
+                    label: "Ukrainian"
+                },
+                {
+                    value: "ur",
+                    label: "Urdu"
+                },
+                {
+                    value: "uz",
+                    label: "Uzbek"
+                },
+                {
+                    value: "ve",
+                    label: "Venda"
+                },
+                {
+                    value: "vi",
+                    label: "Vielabele"
+                },
+                {
+                    value: "vo",
+                    label: "Volapük"
+                },
+                {
+                    value: "wa",
+                    label: "Walloon"
+                },
+                {
+                    value: "cy",
+                    label: "Welsh"
+                },
+                {
+                    value: "wo",
+                    label: "Wolof"
+                },
+                {
+                    value: "fy",
+                    label: "Western Frisian"
+                },
+                {
+                    value: "xh",
+                    label: "Xhosa"
+                },
+                {
+                    value: "yi",
+                    label: "Yiddish"
+                },
+                {
+                    value: "yo",
+                    label: "Yoruba"
+                },
+                {
+                    value: "za",
+                    label: "Zhuang, Chuang"
+                },
+                {
+                    value: "zu",
+                    label: "Zulu"
+                }
+            ]
+        }
+    },
+    methods: {
+        async createLanguage() {
+           
+            // Validate fields
+            const isValid = await this.$refs.createForm.validate();
+
+            if (isValid) {
+                 this.isLoading = true
+
+                axios.post('/api/languages', {
+                    name: this.name,
+                    locale: this.locale
+                })
+                .then((response) => {
+
+                    events.$emit('add-language', response.data)
+                    
+                })
+				.catch(() => Vue.prototype.$isSomethingWrong())
+				.finally(() => {
+
+                    this.name = undefined
+                    this.locale = undefined
+					this.isLoading = false
+                    this.$closePopup()
+				})
+            }
+        },
+    },
+    mounted () {
+        this.name = undefined,
+        this.locale = undefined
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .item-thumbnail {
+        margin-bottom: 20px;
+    }
+</style>

resources/js/store/modules/app.js

@@ -10,10 +10,6 @@ const defaultState = {
 	homeDirectory: undefined,
 	requestedPlan: undefined,
 	emojis: undefined,
-	languages: {
-		allLanguages: undefined,
-		strings: 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',
@@ -970,7 +966,7 @@ const defaultState = {
 			value: "12.0",
 			label: "(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka"
 		 }
-	]
+	],			
 }
 const actions = {
 	getEmojisList: ({commit}) => {
@@ -988,36 +984,6 @@ const actions = {
 		})
 
 	},
-
-	getLanguages: ({commit, state}) => {
-
-		return new Promise((resolve, reject) => {
-
-			axios
-				.get('/api/language/get')
-				.then((response) => {
-					commit('LOAD_LANGUAGES', response.data)
-				})
-				.catch(() => Vue.prototype.$isSomethingWrong())
-				.finally(() => {
-					resolve(true)
-				})
-			})
-	},
-	getLanguageStrings: ({ commit }, language) => {
-		return new Promise((resolve, reject) => {
-
-			axios
-				.get(`/api/language/${language.locale}/strings`)
-				.then(response => {
-					commit('LOAD_LANGUAGE_STRINGS', response.data)
-				})
-				.catch(() => Vue.prototype.$isSomethingWrong())
-				.finally(() => {
-					resolve(true)
-				})
-		})
-	},
 	changePreviewType: ({commit, state}, preview) => {
 		
 		// Get preview type
@@ -1045,12 +1011,6 @@ const mutations = {
 	LOAD_EMOJIS_LIST(state, data) {
 		state.emojis = data
 	},
-	LOAD_LANGUAGE_STRINGS (state, data) {
-		state.languages.strings = data
-	},
-	LOAD_LANGUAGES(state, data) {
-		state.languages.allLanguages = data
-	},
 	UPDATE_SORTING(state) {
 		state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field
 		state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort
@@ -1092,8 +1052,7 @@ const getters = {
 	requestedPlan: state => state.requestedPlan,
 	currencyList: state => state.currencyList,
 	countries: state => state.countries,
-	timezones: state=> state.timezones,
+	timezones: state => state.timezones,
-	languages: state => state.languages,
 	api: state => state.config.api,
 	config: state => state.config,
 	emojis: state => state.emojis,

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

@@ -9,17 +9,29 @@
                     <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
 
                     <div class="languages-wrapper">
-                        <label class="language-label">Langueages</label>
+                        <div class="language-label-wrapper">
+                            <label class="language-label">Languages</label>
+                        </div>
                         <div  class="all-language-wrapper">
-                            <div @click="getLanguageStrings(language)"  class="language" :class="{'active' :active === language.name}" v-for="language in languages.allLanguages" :key="language.id">
+                            <div @click="getLanguageStrings(language)" v-for="language in languages" :key="language.id">
-                                {{language.name}}
+                                <div class="language" >
+                                    <label class="name" :class="{'active' :active === language.locale}">{{language.name}}</label>
+                                    <x-icon v-if="language.locale !== 'en'" @click.stop="deleteLanguageConfirm(language)" class="icon" size="17"/>
+                                </div>
                             </div>
                         </div>
                     </div>
+
+                    <ButtonBase 
+                        @click.native="createLanguage"
+                        class="button-add-language">
+                        <plus-icon class="icon" size="14"/>
+                        Add Language
+                    </ButtonBase>        
                 </div>
 
                 <Spinner v-if="! loadedStrings"/>
-                <LanguageStrings v-if="loadedStrings"/>
+                <LanguageStrings v-if="loadedStrings" :language-strings="languagesStrings" />
             </div>
         </div>
     </div>
@@ -28,45 +40,103 @@
 <script>
 import LanguageStrings from '@/views/Admin/Languages/LanguageStrings'
 import MobileHeader from '@/components/Mobile/MobileHeader'
+import ButtonBase from '@/components/FilesView/ButtonBase'
 import PageHeader from '@/components/Others/PageHeader'
 import Spinner from '@/components/FilesView/Spinner'
-import { mapGetters } from 'vuex'
+import { PlusIcon, XIcon } from 'vue-feather-icons'
+import { events } from '@/bus'
+
 
 export default {
     name: 'Language',
     components: {
         LanguageStrings,
         MobileHeader,
+        ButtonBase,
         PageHeader,
-        Spinner
+        PlusIcon,
-    },
+        Spinner,
-    computed: {
+        XIcon
-        ...mapGetters(['languages'])
     },
     data () {
         return {
             active: undefined,
+            languages:undefined,
+            languagesStrings:undefined,
             loadedLanguages: false,
             loadedStrings:false
         }
     },
     methods: {
-        getLanguageStrings (language) {
+        deleteLanguageConfirm(language) {
-            this.active = language.name
+              events.$emit('confirm:open', {
+                    title: `Delete ${language.name} language?`,
+                    message: 'Your language will be permanently deleted.',
+                    buttonColor: 'danger-solid',
+                    action: language
+                })
+        },
+        deleteLanguage(language) {
+            axios.delete(`/api/languages/${language.id}`)
+                .then(() => { this.getLanguages() })
+        },
+        createLanguage() {
+             events.$emit('popup:open', {name: 'create-language'})
+        },
+        getLanguages() {
 
             this.loadedStrings = false
 
-           this.$store.dispatch('getLanguageStrings', language).then((loaded) => this.loadedStrings = loaded)
+            axios
+				.get('/api/languages')
+				.then((response) => {
+                    this.languages = response.data
+                    this.active = response.data[0].locale
+				})
+				.catch(() => Vue.prototype.$isSomethingWrong())
+				.finally(() => {
+					this.loadedLanguages = true
+                    this.getLanguageStrings(this.languages[0])
+				})
+        },
+        getLanguageStrings (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 () {
-        this.$store.dispatch('getLanguages').then((loaded) => {
+        this.getLanguages()
 
-            this.loadedLanguages = loaded
+        events.$on('add-language', () => {
-
+            this.getLanguages()
-            this.getLanguageStrings(this.languages.allLanguages[0])
         })
-    }
+
+        events.$on('action:confirmed', language => {
+            this.deleteLanguage(language)
+        })
+
+        events.$on('language-name:update', (language) => {
+
+            let index = _.findIndex(this.languages, function(item) { return item.id === language.id })
+            
+            this.languages[index].name = language.name
+        })
+    },
+    destroyed () {
+        events.$off('action:confirmed')
+    },
 }
 </script>
 
@@ -74,33 +144,99 @@ export default {
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
 
+#single-page {
+    height: 100%;
+
+    #page-content {
+        height: 100%;
+    }
+}
+
 .wrapper {
     display: flex;
+    height: 100%;
 }
 
 .side-content{
-    width: 225px;
+    flex: 0 0 225px;
+
+    .button-add-language {
+        margin-top: 30px;
+
+
+        /deep/.content {
+            display: flex;
+            align-items: center;
+            @include font-size(14);
+            font-weight: 700;
+
+            .icon {
+                margin-right: 10px;
+            }
+        }
+    }
 
     .languages-wrapper {
         margin-top: 70px;
 
-        .language-label {
+        .language-label-wrapper {
-            color: $text-muted;
+            margin-bottom: 5px;
-            font-weight: 700;
+
-            @include font-size(12);
+            .language-label {
+                color: $text-muted;
+                font-weight: 700;
+                @include font-size(12);
+                margin-top: 20px;
+            }
         }
+       
         .all-language-wrapper {
             
             .language {
-                color: $text;
+                display: flex;
-                font-weight: 700;
+                align-items: center;
-                @include font-size(13);
+                padding: 12px 25px 12px 0px;
-                margin-top: 20px;
+                cursor: pointer;
-            }
+
-            .active {
+                &:hover {
-                    color: $theme;
+                    .icon {
+                        display: block;
+                    }
+
+                    .name {
+                        color: $theme;
+                    }
+                }
+
+                .name {
+                    color: $text;
+                    font-weight: 700;
+                    @include font-size(13);
+                }
+                .icon {
+                    display: none;
+                    margin-left: auto;
+                    cursor: pointer;
+                }
+                .active {
+                    color: $theme !important;
+                }
+               
             }
+            
         }
     }
 }
+
+ @media only screen and (max-width: 1024px) {
+        .side-content {
+            flex: 0 0 205px;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+        .side-content {
+            display: none;
+        }
+    }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="language-strings-wrapper">
+    <div v-if="strings" class="language-strings-wrapper">
         <div class="search-bar-wrapper">
             <div class="search-bar">
                 <div class="icon" >
@@ -9,7 +9,8 @@
                     <x-icon class="pointer" size="19"></x-icon>
                 </div> -->
                 <input
-                    
+                        v-model="searchInput"
+                        @input="searchStrings"
                         class="query"
                         type="text"
                         name="query"
@@ -18,57 +19,50 @@
             </div>
         </div>
         <div class="form block-form">
-            <div>
+
-                <FormLabel class="mt-70" icon="settings">Language Settings</FormLabel>
+            <FormLabel class="mt-70" icon="settings">Language Settings</FormLabel>
-                <div class="block-wrapper">
+            <div class="block-wrapper">
-                    <div class="input-wrapper">
+                <div class="input-wrapper">
-                        <div class="inline-wrapper">
+                    <div class="inline-wrapper">
-                            <div class="switch-label">
+                        <div class="switch-label">
-                                <label class="input-label">
+                            <label class="input-label">
-                                    Set as Default Language:
+                                Set as Default Language:
-                                </label>
+                            </label>
-                            </div>
-                            <SwitchInput
-                                
-                                    class="switch"
-                            />
                         </div>
+                        <SwitchInput
+                            class="switch"
+                        />
                     </div>
                 </div>
-
-                <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"
-                               :class="{'is-error': errors[0]}"
-                        />
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <div class="block-wrapper">
-                   <label> Language Slug:</label>
-                   <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Language Slug" rules="required" v-slot="{ errors }">
-                        <input type="text"
-                               :class="{'is-error': errors[0]}"
-                        />
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
             </div>
 
-            <div>
+            <div v-if="language.name" class="block-wrapper">
-                <FormLabel class="mt-70">Language Strings</FormLabel>
+                <label> Language Name:</label>
-                <div class="block-wrapper" v-for="(string, index) in languages.strings.language_strings" :key="string.id">
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Language Name" rules="required" v-slot="{ errors }">
-                    <label> {{string.value}}:</label>
+                    <input type="text"
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Language string" rules="required" v-slot="{ errors }">
+                            v-model="language.name"
-                        <input type="text"
+                            @input="updateName"
-                                @input="updateString(string.value)"
+                            :class="{'is-error': errors[0]}"
-                                v-model="languages.strings.language_strings[index].value"
+                    />
-                               :class="{'is-error': errors[0]}"
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        />
+                </ValidationProvider>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+            </div>
-                    </ValidationProvider>
+
+            <FormLabel class="mt-70">Language Strings</FormLabel>
+            <div class="block-wrapper">
+                <Spinner v-if="!loadedStrings"/>
+                <div v-if="loadedStrings" >
+                    <div  class="block-wrapper" v-for="(string,index) in filteredStrings" :key="index">
+                        <label> {{string.value}}:</label>
+                        <ValidationProvider tag="div" class="input-wrapper" name="Language string" rules="required" v-slot="{ errors }">
+                            <input type="text"
+                                    :class="{'is-error': errors[0]}"
+                                    @input="updateString(string.key)"
+                                    v-model="strings[getIndex(string.key)].value"
+                            />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
                 </div>
             </div>
         </div>
@@ -81,24 +75,88 @@ import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-va
 import SwitchInput from '@/components/Others/Forms/SwitchInput'
 import FormLabel from '@/components/Others/Forms/FormLabel'
 import { SearchIcon, XIcon } from 'vue-feather-icons'
-import { mapGetters } from 'vuex'
+import Spinner from '@/components/FilesView/Spinner'
+import { events } from '@/bus'
+import lodash from 'lodash'
+
 
 export default {
     name: 'LanguageStrings',
+    props: [ 'languageStrings' ],
     components: {
         ValidationProvider, 
         ValidationObserver,
         SwitchInput,
-        FormLabel,
         SearchIcon,
+        FormLabel,
+        Spinner,
         XIcon,
     },
-    computed: {
+    data () {
-       ...mapGetters(['languages'])
+        return {
+            defaultStrings: [],
+            filteredStrings: [],
+            loadedStrings: false,
+            strings: undefined,
+            language: undefined,
+            searchInput: '',
+        }
     },
     methods: {
-        updateString (value) {
+        getIndex(key){
-            console.log(value)
+            if(this.strings)
+               return _.findIndex(this.strings, function(string) { return string.key === key })
+        },
+        updateName() {
+            this.$updateText(`/languages/${this.language.id}`, 'name', this.language.name)
+
+            events.$emit('language-name:update', this.language)
+        },
+         updateString (key) {
+
+             if(! this.strings[this.getIndex(key)].value) return
+
+             this.$updateText(
+                `/languages/${this.languageStrings.translated_strings.id}/string`, `${key}`, this.strings[this.getIndex(key)].value,
+            )
+        },
+        searchStrings() {
+
+            this.loadedStrings = false
+
+            this.filteredStrings = []
+
+            this.filterStrings()
+
+        },
+        filterStrings: _.debounce(function ()  {
+
+            this.filteredStrings = this.defaultStrings.filter(string => string.value.toLowerCase().includes( this.searchInput.toLowerCase() ))
+
+            this.loadedStrings = true
+
+        }, 200)
+    },
+    mounted () {
+
+        if(this.languageStrings.translated_strings) {
+
+            this.strings = this.languageStrings.translated_strings.language_strings
+
+            // Make from JSON object array of objects
+            for (const [key, value] of Object.entries(this.languageStrings.default_strings)) {
+                this.defaultStrings.push({
+                    'key': key,
+                    'value': value,
+                })
+            }
+
+            this.filterStrings()
+
+            this.language = {
+                'id': this.languageStrings.translated_strings.id,
+                'name':  this.languageStrings.translated_strings.name
+            }
         }
     }
 }
@@ -113,8 +171,15 @@ export default {
 
 .language-strings-wrapper {
     width: 100%;
+    height: 100%;
     display: flex;
-    flex-direction: column;    
+    flex-direction: column;
+
+    .block-form{
+        min-width: 100%;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
 }
 
 .search-bar-wrapper {

routes/api.php

@@ -171,12 +171,17 @@ Route::group(['middleware' => ['auth:api', 'auth.master', 'auth.admin', 'scope:m
     Route::get('/settings', 'SettingController@show');
     Route::get('/flush-cache', 'AppFunctionsController@flush_cache');
 
+    Route::group(['prefix' => 'languages'], function () {
+        Route::get('/{language}/strings', 'Language\LanguageController@get_language_strings');
+        Route::patch('/{language}/string', 'Language\LanguageController@update_string');
+        Route::delete('/{language}', 'Language\LanguageController@delete_language');
+        Route::patch('/{language}', 'Language\LanguageController@update_language');
+        Route::post('/', 'Language\LanguageController@create_language');
+        Route::get('/', 'Language\LanguageController@get_languages');
+    });
+
     // Language
-    Route::post('/language/create', 'Language\LanguageController@create_language');
+    
-    Route::patch('/language/{id}/update', 'Language\LanguageController@update_language');
-    Route::patch('/language/update-string', 'Language\LanguageController@update_string');
-    Route::get('/language/get', 'Language\LanguageController@get_languages');
-    Route::get('/language/{locale}/strings', 'Language\LanguageController@get_language_strings');
 });
 
 // Protected sharing routes for authenticated user