src/css/app.scss

@@ -78,6 +78,11 @@ select:-webkit-autofill {
     color: $white;
 }
 
+.card-width {
+    max-width: 800px;
+    width: 100%;
+}
+
 .vn-card {
     background-color: var(--vn-gray);
     color: var(--vn-text);

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -7,6 +7,7 @@ import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import { useState } from 'src/composables/useState';
 
 const $props = defineProps({
     id: {
@@ -23,6 +24,7 @@ const $props = defineProps({
 const route = useRoute();
 const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
+const state = useState();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
@@ -112,7 +114,7 @@ const setData = (entity) => {
                     <VnLinkPhone :phone-number="entity.phone" />
                 </template>
             </VnLv>
-            <VnLv :value="sip">
+            <VnLv :value="state.get('extension') || sip">
                 <template #label>
                     {{ t('worker.summary.sipExtension') }}
                     <VnLinkPhone v-if="sip" :phone-number="sip" />

src/pages/Worker/Card/WorkerPBX.vue

@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 
 import axios from 'axios';
 
+import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
 import useNotify from 'src/composables/useNotify';
 
@@ -13,13 +14,13 @@ import VnRow from 'components/ui/VnRow.vue';
 const { notify } = useNotify();
 const { t } = useI18n();
 const route = useRoute();
+const state = useState();
 const stateStore = useStateStore();
 
 const isLoading = ref(false);
 const extension = ref('');
 const worker = ref({});
 const workersRef = ref(null);
-const id = ref(route.params.id);
 
 const hasChanged = computed(() => {
     return extension.value !== worker.value?.sip?.extension;
@@ -49,14 +50,17 @@ const getData = async (id) => {
             params: { filter: JSON.stringify(filter) },
         });
         extension.value = data.sip.extension;
+        state.set('extension', data.sip.extension);
         worker.value = data;
     } catch (error) {
-        console.error(error.error);
+        state.set('extension', null);
+        extension.value = '';
     }
 };
 
 const setInitialData = () => {
     extension.value = worker.value?.sip?.extension;
+    state.set('extension', worker.value?.sip?.extension);
 };
 
 const onSubmit = async () => {
@@ -77,6 +81,10 @@ const onSubmit = async () => {
         isLoading.value = false;
     }
 };
+
+const updateModelValue = () => {
+    state.set('extension', extension.value);
+};
 </script>
 
 <template>
@@ -108,15 +116,14 @@ const onSubmit = async () => {
             <QCardSection>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput :label="t('Extension')" v-model="extension" />
+                        <QInput
+                            :label="t('worker.summary.sipExtension')"
+                            v-model="extension"
+                            @update:model-value="updateModelValue()"
+                        />
                     </div>
                 </VnRow>
             </QCardSection>
         </QCard>
     </div>
 </template>
-
-<i18n>
-es:
-    Extension: Extensión
-</i18n>

src/pages/Worker/components/WorkerNoteCreate.vue

@@ -79,7 +79,12 @@ const toWorkerNotes = () => {
                 <QForm>
                     <VnRow class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <QInput :label="t('Note')" type="textarea" v-model="text" />
+                            <QInput
+                                :label="t('Note')"
+                                autofocus
+                                type="textarea"
+                                v-model="text"
+                            />
                         </div>
                     </VnRow>
                 </QForm>