src/components/UserPanel.vue

@@ -9,12 +9,14 @@ import { useSession } from 'src/composables/useSession';
 import { localeEquivalence } from 'src/i18n/index';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
 
 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() {
@@ -47,6 +49,9 @@ const darkMode = computed({
 
 const user = state.getUser();
 const token = session.getToken();
+const warehousesData = ref();
+const companiesData = ref();
+const accountBankData = ref();
 
 onMounted(async () => {
     updatePreferences();
@@ -86,12 +91,35 @@ function logout() {
 function copyUserToken() {
     copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
 }
+
+console.log('userWarehouse1', user);
+console.log('userWarehouse', user.value);
+console.log('userWarehouse', user.value.warehouseFk);
+console.log('userWarehouse', user.value.warehouseFk.name);
 </script>
 
 <template>
-    <QMenu anchor="bottom left">
+    <FetchData
+        url="Warehouses"
+        order="name"
+        @on-fetch="(data) => (warehousesData = data)"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        order="name"
+        @on-fetch="(data) => (companiesData = data)"
+        auto-load
+    />
+    <FetchData
+        url="Accountings"
+        order="name"
+        @on-fetch="(data) => (accountBankData = data)"
+        auto-load
+    />
+    <QMenu>
         <div class="row no-wrap q-pa-md">
-            <div class="column panel">
+            <div class="column panel center">
                 <div class="text-h6 q-mb-md">
                     {{ t('components.userPanel.settings') }}
                 </div>
@@ -116,7 +144,7 @@ function copyUserToken() {
 
             <QSeparator vertical inset class="q-mx-lg" />
 
-            <div class="column items-center panel q-mb-sm q-pa-md">
+            <div class="icon column q-mb-sm q-pa-md">
                 <QAvatar size="80px">
                     <QImg
                         :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@@ -143,31 +171,59 @@ function copyUserToken() {
                     icon="logout"
                     @click="logout()"
                     v-close-popup
+                    dense
                 />
             </div>
         </div>
         <QSeparator inset class="q-mx-lg" />
-        <VnRow class="row q-gutter-sm q-mb-sm q-pa-md">
-            <div class="col">
-                <VnSelectFilter :label="t('localWarehouse')" hide-selected />
-            </div>
-            <div class="col">
-                <VnSelectFilter :label="t('localBank')" hide-selected />
-            </div>
+        <div class="col q-gutter-xs q-pa-md">
+            <VnRow>
+                <VnSelectFilter
+                    :label="t('localWarehouse')"
+                    v-model="user.localWarehouseFk"
+                    :options="warehousesData"
+                    option-label="name"
+                    option-value="id"
+                />
+                <VnSelectFilter
+                    :label="t('localBank')"
+                    hide-selected
+                    v-model="user.localBankFk"
+                    :options="accountBankData"
+                    option-label="name"
+                    option-value="id"
+                ></VnSelectFilter>
             </VnRow>
-        <VnRow class="row q-gutter-sm q-mb-sm q-pa-md">
-            <div class="col">
-                <VnSelectFilter :label="t('localCompany')" hide-selected />
-            </div>
-            <div class="col">
-                <VnSelectFilter :label="t('userWarehouse')" hide-selected />
-            </div>
+            <VnRow>
+                <VnSelectFilter
+                    :label="t('localCompany')"
+                    hide-selected
+                    v-model="user.companyFk"
+                    :options="companiesData"
+                    option-label="code"
+                    option-value="id"
+                />
+                <VnSelectFilter
+                    :label="t('userWarehouse')"
+                    hide-selected
+                    v-model="user.warehouseFk"
+                    :options="warehousesData"
+                    option-label="name"
+                    option-value="id"
+                />
             </VnRow>
-        <VnRow class="col q-gutter-sm q-pa-md">
-            <div class="col" style="flex: 0">
-                <VnSelectFilter :label="t('userCompany')" hide-selected />
-            </div>
+            <VnRow>
+                <VnSelectFilter
+                    :label="t('userCompany')"
+                    hide-selected
+                    v-model="user.companyFk"
+                    :options="companiesData"
+                    option-label="code"
+                    option-value="id"
+                    style="flex: 0"
+                />
             </VnRow>
+        </div>
     </QMenu>
 </template>
 
@@ -181,6 +237,16 @@ function copyUserToken() {
         cursor: alias;
     }
 }
+
+.icon {
+    align-items: center;
+    padding-left: 7.5%;
+}
+
+.center {
+    display: flex;
+    flex: 0.96;
+}
 </style>
 
 <i18n>