update

src/components/post-category/add-post-category/AddPostCategory.ts

 import { i18n } from 'src/boot/i18n';
-import { defineComponent, Ref, ref } from 'vue';
+import { defineComponent, PropType, Ref, ref, watch } from 'vue';
 import UploadImage from 'components/upload-image/index.vue';
-import { PostType } from 'src/assets/type';
+import { PostType, LanguageType } from 'src/assets/type';
 import ListPostDialog from 'components/post-category/list-post-dialog/index.vue';
+
 export default defineComponent({
   // name: 'ComponentName'
   components: { UploadImage, ListPostDialog },
   props: {
     isOpenAddDialog: { type: Boolean, required: true },
+    languages: { type: Array as PropType<LanguageType[]>, required: true },
   },
-  setup() {
+  setup(props) {
+    type FromDataType = {
+      name: string;
+      title: string;
+      status: number;
+      language: LanguageType;
+    };
+    watch(
+      () => props.isOpenAddDialog,
+      (value) => {
+        if (value) {
+          langs.value = props.languages.reduce((acc: FromDataType[], info) => {
+            acc.push({
+              name: '',
+              title: '',
+              status: 1,
+              language: {
+                id: info.id,
+                code: info.code,
+                name: info.name,
+                status: info.status,
+              },
+            });
+            return acc;
+          }, []);
+        }
+        console.log(langs.value, 'langs');
+      }
+    );
     const name: Ref<string | null> = ref(null);
     const title: Ref<string | null> = ref(null);
     const image: Ref<string | null> = ref(null);
@@ -77,6 +107,8 @@ export default defineComponent({
     ];
     const userTableRowsPost: Ref<PostType[]> = ref([]);
     const isOpenListPost: Ref<boolean> = ref(false);
+    const langs: Ref<FromDataType[]> = ref([]);
+    const tabName: Ref<string> = ref('vi');
     const uploadImage = (value: FileList) => {
       urlFileLocal.value = URL.createObjectURL(value[0]);
       file.value = value[0];
@@ -101,6 +133,8 @@ export default defineComponent({
       userTableRowsPost,
       keywordSearch,
       deletePostSelected,
+      langs,
+      tabName,
     };
   },
   emits: [

src/components/post-category/add-post-category/index.vue

@@ -18,16 +18,43 @@
         <q-separator />
         <q-card-section
           class="overflow-auto"
-          style="max-height: calc(100vh - 10rem)"
+          style="max-height: calc(100vh - 14rem)"
         >
-          <q-input
-            v-model="name"
-            :label="$t('postCategory.labelInput.namePost')"
-            type="text"
-            class="q-my-sm"
-            outlined
-            :rules="nameRules"
-          ></q-input>
+          <q-tabs
+            v-model="tabName"
+            dense
+            class="text-grey"
+            active-color="primary"
+            indicator-color="primary"
+            align="left"
+            narrow-indicator
+          >
+            <q-tab
+              v-for="(lang, idxLang) in langs"
+              :key="`${lang.language.id}-${idxLang}`"
+              :name="lang.language.code"
+              :label="lang.language.name"
+              no-caps
+            />
+          </q-tabs>
+          <q-separator />
+          <q-tab-panels v-model="tabName" animated>
+            <q-tab-panel
+              v-for="(info, index) in langs"
+              :key="`${info.language.id}-${index}`"
+              :name="info.language.code"
+            >
+              <q-input
+                v-model="info.name"
+                :label="$t('postCategory.labelInput.namePost')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="nameRules"
+              ></q-input>
+            </q-tab-panel>
+          </q-tab-panels>
+
           <q-input
             v-model="title"
             :label="$t('postCategory.labelInput.description')"
@@ -73,8 +100,6 @@
               size="50px"
             ></q-toggle>
           </div>
-        </q-card-section>
-        <q-card-section>
           <div class="row q-col-gutter-sm flex-center q-mt-sm">
             <div
               class="
@@ -170,6 +195,7 @@
             </div>
           </div>
         </q-card-section>
+
         <q-card-actions align="right">
           <div>
             <q-btn

src/pages/danh-muc-bai-viet/CategoryPost.ts

@@ -3,7 +3,7 @@ import { defineComponent, onMounted, Ref, ref } from 'vue';
 import { API_PATHS, config } from 'src/assets/configurations';
 import { AxiosResponse } from 'axios';
 import { api, BaseResponseBody } from 'src/boot/axios';
-import { CategoryPostType } from 'src/assets/type';
+import { CategoryPostType, LanguageType } from 'src/assets/type';
 import AddCategoryPostDialog from 'components/post-category/add-post-category/index.vue';
 // import { Dialog, Notify } from 'quasar';
 export default defineComponent({
@@ -68,6 +68,7 @@ export default defineComponent({
     ];
     const userTableRowsCategoryPost: Ref<CategoryPostType[]> = ref([]);
     const isOpenAddDialog: Ref<boolean> = ref(false);
+    const languages: Ref<LanguageType[]> = ref([]);
     const getListCategoryPost = async () => {
       try {
         const response = (await api({
@@ -83,9 +84,22 @@ export default defineComponent({
         }
       } catch (error) {}
     };
+    const getLanguages = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getLanguage,
+          method: 'GET',
+          params: {},
+        })) as AxiosResponse<BaseResponseBody<LanguageType[]>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          languages.value = response.data.data;
+        }
+      } catch (error) {}
+    };
 
     onMounted(() => {
       void getListCategoryPost();
+      void getLanguages();
     });
     return {
       configImg,
@@ -94,6 +108,8 @@ export default defineComponent({
       userTableRowsCategoryPost,
       isOpenAddDialog,
       getListCategoryPost,
+      getLanguages,
+      languages,
     };
   },
 });

src/pages/danh-muc-bai-viet/index.vue

@@ -102,6 +102,7 @@
     </div>
     <AddCategoryPostDialog
       v-model:is-open-add-dialog="isOpenAddDialog"
+      :languages="languages"
       @click:closeBtnDialog="isOpenAddDialog = false"
     />
   </div>