Merge branch 'language-translation' into version-1.8.3

2026-04-28 19:10:40 +00:00 · 2021-03-02 16:38:48 +01:00
parent 7dd4e65d77 9a1a9ee206
commit 63ba4d3a1d
18 changed files with 1377 additions and 46 deletions
@@ -1,6 +1,7 @@
 <template>
    <div class="form-label">
-        <edit-2-icon size="22" class="icon"></edit-2-icon>
+        <edit-2-icon v-if="!icon" size="22" class="icon"></edit-2-icon>
+        <settings-icon v-if="icon === 'settings'" size="22" class="icon"></settings-icon>
        <b class="label">
            <slot></slot>
        </b>
@@ -8,12 +9,14 @@
 </template>

 <script>
-    import { Edit2Icon } from 'vue-feather-icons'
+    import { Edit2Icon, SettingsIcon } from 'vue-feather-icons'

    export default {
        name: 'FormLabel',
+        props: ['icon'],
        components: {
-            Edit2Icon
+            Edit2Icon,
+            SettingsIcon
        }
    }
 </script>
@@ -30,7 +33,8 @@
        .icon {
            margin-right: 10px;

-            path {
+            path,
+            circle {
                stroke: $theme;
            }
        }
@@ -25,7 +25,8 @@
 		"pages": "Pages",
 		"plans": "Plans",
 		"settings": "Settings",
-		"users": "Users"
+		"users": "Users",
+		"language": "Language"
 	},
 	"admin_page_dashboard": {
 		"backer_button": "Help Us Improve",
@@ -672,7 +673,8 @@
 		"users_list": "User Management",
 		"users_password": "Password",
 		"users_storage_usage": "Storage Usage",
-		"users_user": "User"
+		"users_user": "User",
+		"language": "Language"
 	},
 	"rows": {
 		"card": {
@@ -284,6 +284,16 @@ const routesAdmin = [
                    },
                ]
            },
+            {
+                name: 'Language',
+                path: '/admin/language',
+                component: () =>
+                    import(/* webpackChunkName: "chunks/app-language" */ './views/Admin/Languages/Language'),
+                    meta: {
+                        requiresAuth: true,
+                        title: i18n.t('routes_title.language')
+                    },
+            }
        ]
    },
    {
@@ -1,4 +1,5 @@
 import i18n from '@/i18n/index'
+import Axios from 'axios'

 const defaultState = {
 	fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || true,
@@ -9,6 +10,10 @@ 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',
@@ -983,6 +988,36 @@ 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
@@ -1010,6 +1045,12 @@ 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
@@ -1052,6 +1093,7 @@ const getters = {
 	currencyList: state => state.currencyList,
 	countries: state => state.countries,
 	timezones: state=> state.timezones,
+	languages: state => state.languages,
 	api: state => state.config.api,
 	config: state => state.config,
 	emojis: state => state.emojis,
@@ -38,6 +38,14 @@
                            {{ $t('admin_menu.pages') }}
                        </div>
                    </router-link>
+                    <router-link :to="{name: 'Language'}" class="menu-list-item link">
+                        <div class="icon">
+                            <globe-icon size="17"></globe-icon>
+                        </div>
+                        <div class="label">
+                            {{ $t('admin_menu.language') }}
+                        </div>
+                    </router-link>
                </div>
            </ContentGroup>

@@ -69,7 +77,7 @@
 </template>

 <script>
-    import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon } from 'vue-feather-icons'
+    import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon, GlobeIcon } from 'vue-feather-icons'
    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
    import ContentGroup from '@/components/Sidebar/ContentGroup'
    import { mapGetters } from 'vuex'
@@ -89,6 +97,7 @@
            ContentSidebar,
            ContentGroup,
            UsersIcon,
+            GlobeIcon
        },
    }
 </script>
@@ -0,0 +1,106 @@
+<template>
+    <div id="single-page">
+        <div id="page-content">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            
+            <div class="wrapper">
+                <Spinner v-if="! loadedLanguages"/>
+                <div v-if="loadedLanguages" class="side-content">
+                    <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+
+                    <div class="languages-wrapper">
+                        <label class="language-label">Langueages</label>
+                        <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>
+                        </div>
+                    </div>
+                </div>
+
+                <Spinner v-if="! loadedStrings"/>
+                <LanguageStrings v-if="loadedStrings"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import LanguageStrings from '@/views/Admin/Languages/LanguageStrings'
+import MobileHeader from '@/components/Mobile/MobileHeader'
+import PageHeader from '@/components/Others/PageHeader'
+import Spinner from '@/components/FilesView/Spinner'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'Language',
+    components: {
+        LanguageStrings,
+        MobileHeader,
+        PageHeader,
+        Spinner
+    },
+    computed: {
+        ...mapGetters(['languages'])
+    },
+    data () {
+        return {
+            active: undefined,
+            loadedLanguages: false,
+            loadedStrings:false
+        }
+    },
+    methods: {
+        getLanguageStrings (language) {
+            this.active = language.name
+
+            this.loadedStrings = false
+
+           this.$store.dispatch('getLanguageStrings', language).then((loaded) => this.loadedStrings = loaded)
+        }
+    },
+    mounted () {
+        this.$store.dispatch('getLanguages').then((loaded) => {
+
+            this.loadedLanguages = loaded
+
+            this.getLanguageStrings(this.languages.allLanguages[0])
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';
+
+.wrapper {
+    display: flex;
+}
+
+.side-content{
+    width: 225px;
+
+    .languages-wrapper {
+        margin-top: 70px;
+
+        .language-label {
+            color: $text-muted;
+            font-weight: 700;
+            @include font-size(12);
+        }
+        .all-language-wrapper {
+            
+            .language {
+                color: $text;
+                font-weight: 700;
+                @include font-size(13);
+                margin-top: 20px;
+            }
+            .active {
+                    color: $theme;
+            }
+        }
+    }
+}
+</style>
@@ -0,0 +1,230 @@
+<template>
+    <div class="language-strings-wrapper">
+        <div class="search-bar-wrapper">
+            <div class="search-bar">
+                <div class="icon" >
+                    <search-icon size="19"></search-icon>
+                </div>
+                <!-- <div class="icon">
+                    <x-icon class="pointer" size="19"></x-icon>
+                </div> -->
+                <input
+                    
+                        class="query"
+                        type="text"
+                        name="query"
+                        :placeholder="$t('inputs.placeholder_search_files')"
+                />
+            </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"
+                            />
+                        </div>
+                    </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>
+            </div>
+        </div>
+       
+    </div>
+</template>
+
+<script>
+import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
+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'
+
+export default {
+    name: 'LanguageStrings',
+    components: {
+        ValidationProvider, 
+        ValidationObserver,
+        SwitchInput,
+        FormLabel,
+        SearchIcon,
+        XIcon,
+    },
+    computed: {
+       ...mapGetters(['languages'])
+    },
+    methods: {
+        updateString (value) {
+            console.log(value)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';
+@import '@assets/vue-file-manager/_forms';
+
+
+.language-strings-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;    
+}
+
+.search-bar-wrapper {
+    padding: 7px 0px;
+}
+
+.search-bar {
+    position: relative;
+    width: 100%;
+   
+    border-radius: 8px;
+
+    input {
+        background: $light-background;
+        border-radius: 8px;
+        outline: 0;
+        padding: 9px 20px 9px 43px;
+        font-weight: 400;
+        @include font-size(16);
+        width: 100%;
+        height: 50px;
+        min-width: 175px;
+        transition: 0.15s all ease;
+        border: 1px solid transparent;
+        -webkit-appearance: none;
+
+        &::placeholder {
+            color: $text-muted;
+            @include font-size(14);
+            font-weight: 500;
+        }
+
+        &:focus {
+            border: 1px solid $theme;
+            box-shadow: 0 0 7px rgba($theme, 0.3);
+        }
+
+        &:focus + .icon {
+            path {
+                fill: $theme;
+            }
+        }
+    }
+
+    .icon {
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 11px 15px;
+        display: flex;
+        align-items: center;
+
+            circle,
+            line {
+                color: $text-muted;
+            }
+
+        .pointer {
+            cursor: pointer;
+        }
+    }
+}
+
+// @media only screen and (max-width: 1024px) {
+
+//     .search-bar input {
+//         max-width: 190px;
+//         padding-right: 0;
+//     }
+// }
+
+@media only screen and (max-width: 690px) {
+
+    .search-bar {
+
+        input {
+            min-width: initial;
+            width: 100%;
+            max-width: initial;
+            padding: 9px 20px 9px 30px;
+
+            &:focus {
+                border: 1px solid transparent;
+                box-shadow: none;
+            }
+        }
+
+        .icon {
+            padding: 11px 15px 11px 0;
+        }
+    }
+
+}
+
+@media (prefers-color-scheme: dark) {
+    .search-bar {
+        input {
+            border-color: transparent;
+            color: $dark_mode_text_primary;
+
+            &::placeholder {
+                color: $dark_mode_text_secondary;
+            }
+        }
+
+        .icon svg path {
+            fill: $dark_mode_text_secondary;
+        }
+    }
+}
+
+</style>