create Createlanguage popup, changes in LanguageController

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">
-                                {{language.name}}
+                            <div @click="getLanguageStrings(language)" v-for="language in languages" :key="language.id">
+                                <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
-    },
-    computed: {
-        ...mapGetters(['languages'])
+        PlusIcon,
+        Spinner,
+        XIcon
     },
     data () {
         return {
             active: undefined,
+            languages:undefined,
+            languagesStrings:undefined,
             loadedLanguages: false,
             loadedStrings:false
         }
     },
     methods: {
-        getLanguageStrings (language) {
-            this.active = language.name
+        deleteLanguageConfirm(language) {
+              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
-
-            this.getLanguageStrings(this.languages.allLanguages[0])
+        events.$on('add-language', () => {
+            this.getLanguages()
         })
-    }
+
+        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 {
-            color: $text-muted;
-            font-weight: 700;
-            @include font-size(12);
+        .language-label-wrapper {
+            margin-bottom: 5px;
+
+            .language-label {
+                color: $text-muted;
+                font-weight: 700;
+                @include font-size(12);
+                margin-top: 20px;
+            }
         }
+       
         .all-language-wrapper {
             
             .language {
-                color: $text;
-                font-weight: 700;
-                @include font-size(13);
-                margin-top: 20px;
-            }
-            .active {
-                    color: $theme;
+                display: flex;
+                align-items: center;
+                padding: 12px 25px 12px 0px;
+                cursor: pointer;
+
+                &:hover {
+                    .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>
-                <div class="block-wrapper">
-                    <div class="input-wrapper">
-                        <div class="inline-wrapper">
-                            <div class="switch-label">
-                                <label class="input-label">
-                                    Set as Default Language:
-                                </label>
-                            </div>
-                            <SwitchInput
-                                
-                                    class="switch"
-                            />
+
+            <FormLabel class="mt-70" icon="settings">Language Settings</FormLabel>
+            <div class="block-wrapper">
+                <div class="input-wrapper">
+                    <div class="inline-wrapper">
+                        <div class="switch-label">
+                            <label class="input-label">
+                                Set as Default Language:
+                            </label>
                         </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>
-                <FormLabel class="mt-70">Language Strings</FormLabel>
-                <div class="block-wrapper" v-for="(string, index) in languages.strings.language_strings" :key="string.id">
-                    <label> {{string.value}}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Language string" rules="required" v-slot="{ errors }">
-                        <input type="text"
-                                @input="updateString(string.value)"
-                                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>
+            <div v-if="language.name" 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"
+                            v-model="language.name"
+                            @input="updateName"
+                            :class="{'is-error': errors[0]}"
+                    />
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </div>
+
+            <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: {
-       ...mapGetters(['languages'])
+    data () {
+        return {
+            defaultStrings: [],
+            filteredStrings: [],
+            loadedStrings: false,
+            strings: undefined,
+            language: undefined,
+            searchInput: '',
+        }
     },
     methods: {
-        updateString (value) {
-            console.log(value)
+        getIndex(key){
+            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 {