src/components/UserPanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed } from 'vue';
+import { onMounted, computed, ref } from 'vue';
 import { Dark, Quasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -10,13 +10,12 @@ import { localeEquivalence } from 'src/i18n/index';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
+import { useClipboard } from 'src/composables/useClipboard';
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
-import { useClipboard } from 'src/composables/useClipboard';
-import { ref } from 'vue';
 const { copyText } = useClipboard();
 const userLocale = computed({
     get() {
@@ -91,6 +90,15 @@ function logout() {
 function copyUserToken() {
     copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
 }
+
+function localUserData() {
+    state.setUser(user.value);
+}
+
+function saveUserData(param, value) {
+    axios.post('UserConfigs/setUserConfig', { [param]: value });
+    localUserData();
+}
 </script>
 
 <template>
@@ -180,6 +188,7 @@ function copyUserToken() {
                     option-value="id"
                     input-debounce="0"
                     hide-selected
+                    @update:model-value="localUserData"
                 />
                 <VnSelect
                     :label="t('components.userPanel.localBank')"
@@ -189,6 +198,7 @@ function copyUserToken() {
                     option-value="id"
                     input-debounce="0"
                     hide-selected
+                    @update:model-value="localUserData"
                 >
                     <template #option="{ itemProps, opt }">
                         <QItem v-bind="itemProps">
@@ -210,6 +220,7 @@ function copyUserToken() {
                     option-label="code"
                     option-value="id"
                     input-debounce="0"
+                    @update:model-value="localUserData"
                 />
                 <VnSelect
                     :label="t('components.userPanel.userWarehouse')"
@@ -219,6 +230,7 @@ function copyUserToken() {
                     option-label="name"
                     option-value="id"
                     input-debounce="0"
+                    @update:model-value="(v) => saveUserData('warehouseFk', v)"
                 />
             </VnRow>
             <VnRow>
@@ -232,6 +244,7 @@ function copyUserToken() {
                     style="flex: 0"
                     dense
                     input-debounce="0"
+                    @update:model-value="(v) => saveUserData('companyFk', v)"
                 />
             </VnRow>
         </div>

src/components/common/VnLog.vue

@@ -622,8 +622,7 @@ setLogTree();
             </QList>
         </div>
     </div>
-    <QDrawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
-        <QScrollArea class="fit text-grey-8">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <QList dense>
             <QSeparator />
             <QItem class="q-mt-sm">
@@ -686,10 +685,7 @@ setLogTree();
                         hide-selected
                     >
                         <template #option="{ opt, itemProps }">
-                                <QItem
-                                    v-bind="itemProps"
-                                    class="q-pa-xs row items-center"
-                                >
+                            <QItem v-bind="itemProps" class="q-pa-xs row items-center">
                                 <QItemSection class="col-3 items-center">
                                     <VnAvatar :worker-id="opt.id" />
                                 </QItemSection>
@@ -759,8 +755,7 @@ setLogTree();
                 />
             </QItem>
         </QList>
-        </QScrollArea>
-    </QDrawer>
+    </Teleport>
     <QDialog v-model="dateFromDialog">
         <QDate
             :years-in-month-view="false"

src/composables/useState.js

@@ -11,6 +11,8 @@ const user = ref({
     companyFk: null,
     warehouseFk: null,
 });
+if (sessionStorage.getItem('user'))
+    user.value = JSON.parse(sessionStorage.getItem('user'));
 
 const roles = ref([]);
 const tokenConfig = ref({});
@@ -25,7 +27,10 @@ export function useState() {
     }
 
     function setUser(data) {
-        user.value = data;
+        const currentUser = { ...JSON.parse(sessionStorage.getItem('user')), ...data };
+        sessionStorage.setItem('user', JSON.stringify(currentUser));
+        user.value = currentUser;
+        return currentUser;
     }
 
     function getRoles() {