Keep lang selected between reloads

kongulov · Sep 16, 2021 · 64f0986 · 64f0986
1 parent 70ad931
commit 64f0986
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 54 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue
@@ -2,7 +2,7 @@
     <div id="nova-tab-translatable" class="details w-full">
         <div class="tab-items px-8" style="margin: 0;">
             <span class="tab-item" v-for="lang in field.languages"
-                  :class="{'active':selectedLang === lang}" @click="selectedLang = lang">
+                  :class="{'active':selectedLang === lang}" @click="switchLanguage(lang)">
                 {{ lang }}
             </span>
         </div>
@@ -19,20 +19,10 @@
 </template>
 
 <script>
+import IndexMixin from '../mixins/index'
+
 export default {
+    mixins: [IndexMixin],
     props: ['resource', 'resourceName', 'resourceId', 'field'],
-    data() {
-        return {
-            selectedLang: '',
-        }
-    },
-    methods: {
-        componentName(component){
-            return component.name.replace(' ['+component.locale+']', '');
-        }
-    },
-    mounted() {
-        this.selectedLang = this.field.languages[0] ? this.field.languages[0] : '';
-    },
 }
 </script>
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -1,9 +1,13 @@
 <template>
     <div id="nova-tab-translatable" class="w-full">
         <div class="tab-items px-8">
-            <span class="tab-item" v-for="lang in field.languages"
-                  :class="{'active':selectedLang === lang, 'has-error':checkError(lang)}" @click="selectedLang = lang">
-                {{ lang }} <span class="text-danger text-sm">{{ field.requiredLocales[lang] ? '*' : '' }}</span>
+            <span class="tab-item"
+                  v-for="lang in field.languages"
+                  :class="{'active':selectedLang === lang, 'has-error':checkError(lang)}"
+                  @click="switchLanguage(lang)"
+            >
+                {{ lang }}
+                <span class="text-danger text-sm">{{ field.requiredLocales[lang] ? '*' : '' }}</span>
             </span>
         </div>
         <div class="tab-contents">
@@ -29,21 +33,14 @@
 </template>
 
 <script>
-import {FormField, HandlesValidationErrors, InteractsWithResourceInformation} from 'laravel-nova'
+import {FormField, HandlesValidationErrors, InteractsWithResourceInformation} from 'laravel-nova';
+import IndexMixin from '../mixins/index'
 
 export default {
-    mixins: [FormField, HandlesValidationErrors, InteractsWithResourceInformation],
+    mixins: [FormField, HandlesValidationErrors, InteractsWithResourceInformation, IndexMixin],
 
     props: ['field', 'resourceId', 'resourceName', 'errors', 'viaResource', 'viaRelationship', 'viaResourceId'],
 
-    data() {
-        return {
-            selectedLang: '',
-        }
-    },
-    mounted() {
-        this.selectedLang = this.field.languages[0] ? this.field.languages[0] : '';
-    },
     watch:{
         errors() {
             this.switchToErrorTab();

diff --git a/resources/js/components/IndexField.vue b/resources/js/components/IndexField.vue
@@ -2,7 +2,7 @@
     <div class="nova-tab-translatable-index w-full">
         <div class="tab-items px-8">
             <span class="tab-item" v-for="lang in field.languages"
-                  :class="{'active':selectedLang === lang}" @click="selectedLang = lang">
+                  :class="{'active':selectedLang === lang}" @click="switchLanguage(lang)">
                 {{ lang }}
             </span>
         </div>
@@ -16,20 +16,10 @@
 </template>
 
 <script>
+import IndexMixin from '../mixins/index'
+
 export default {
+    mixins: [IndexMixin],
     props: ['resourceName', 'field'],
-    data() {
-        return {
-            selectedLang: '',
-        }
-    },
-    methods: {
-      componentName(component){
-          return component.name.replace(' ['+component.locale+']', '');
-      }
-    },
-    mounted() {
-        this.selectedLang = this.field.languages[0] ? this.field.languages[0] : '';
-    },
 }
 </script>
diff --git a/resources/js/mixins/index.js b/resources/js/mixins/index.js
@@ -0,0 +1,33 @@
+export default {
+    data() {
+        return {
+            selectedLang: '',
+        }
+    },
+    mounted() {
+        this.selectedLang = this.getSelectedLang();
+    },
+    methods: {
+        switchLanguage(lang){
+            this.selectedLang = lang;
+
+            localStorage.setItem(this.getStorageName()+'lastSelectedLang', lang);
+        },
+        getSelectedLang(){
+            if(this.field.saveLastSelectedLang){
+                let lastSelectedLang = localStorage.getItem(this.getStorageName()+'lastSelectedLang');
+
+                if (lastSelectedLang && this.field.languages.includes(lastSelectedLang))
+                    return lastSelectedLang;
+            }
+
+            return this.field.languages[0] ? this.field.languages[0] : '';
+        },
+        getStorageName(){
+            return 'kongulov/nova-tab-translatable:';
+        },
+        componentName(component){
+            return component.name.replace(' ['+component.locale+']', '');
+        }
+    },
+};
diff --git a/src/NovaTabTranslatable.php b/src/NovaTabTranslatable.php
@@ -21,11 +21,11 @@ class NovaTabTranslatable extends Field
     public $component = 'nova-tab-translatable';
 
     public $name = 'Tab translatable';
-    public $data = [];
-    public $locales = [];
-    public $requiredLocales = [];
+    private $data = [];
+    private $locales = [];
+    private $requiredLocales = [];
+    private $translatedFieldsByLocale = [];
     public $originalFields = [];
-    public $translatedFieldsByLocale = [];
 
     /** @var \Closure|null */
     protected static $displayLocalizedNameByDefaultUsingCallback;
@@ -53,19 +53,28 @@ public function __construct(array $fields = [])
         $this->createTranslatableFields();
 
         $this->withMeta([
-            'languages' => $this->locales,
-            'fields' => $this->data,
-            'originalFieldsCount' => count($fields),
-            'requiredLocales' => $this->requiredLocales,
+            'saveLastSelectedLang'  => false,
+            'languages'             => $this->locales,
+            'fields'                => $this->data,
+            'originalFieldsCount'   => count($fields),
+            'requiredLocales'       => $this->requiredLocales,
         ]);
     }
 
-    public function setTitle($title){
+    public function setTitle($title): self
+    {
         $this->name = $title;
 
         return $this;
     }
 
+    public function saveLastSelectedLang(): self
+    {
+        return $this->withMeta([
+            'saveLastSelectedLang'  => true,
+        ]);
+    }
+
     protected function createTranslatableFields()
     {
         collect($this->locales)
@@ -123,7 +132,7 @@ protected function createTranslatedField(Field $originalField, string $locale):
         return $translatedField;
     }
 
-    public function setRules($translatedField) {
+    protected function setRules($translatedField) {
 
         $translatedField->creationRules = $this->setUnique($translatedField->creationRules, $translatedField->meta['locale']);
         $translatedField->updateRules = $this->setUnique($translatedField->updateRules, $translatedField->meta['locale']);
@@ -152,7 +161,7 @@ public function setRules($translatedField) {
         return $translatedField;
     }
 
-    public function setUnique($rules, $locale){
+    protected function setUnique($rules, $locale){
         foreach ($rules as &$rule) {
             if (strpos($rule, 'unique:') !== false){
                 $before = Str::before($rule,'unique:');
@@ -240,7 +249,6 @@ private function isJson($string): bool
         json_decode($string);
         return (json_last_error() == JSON_ERROR_NONE);
     }
-
 }