Skip to content

Q
quasar-web-base
Commit f8acd8d7 authored by Võ Quang Thành Đạt's avatar Võ Quang Thành Đạt
Browse files
Options

create add-post feature in postCategory

parent 950d4e55
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 19 deletions
src/components/customer/update-new-customer-dialog/UpdateNewCustomerDialog.ts
View file @ f8acd8d7
......@@ -21,10 +21,6 @@ export default defineComponent({
() => props.showDialogUpdate,
(value) => {
if (value) {
console.log(
props.customerInfo,
'customerInfocustomerInfocustomerInfo'
);
void getData();
}
}
......
src/components/post-category/add-post-category/AddPostCategory.ts
View file @ f8acd8d7
......@@ -2,9 +2,10 @@ import { i18n } from 'src/boot/i18n';
import { defineComponent, Ref, ref } from 'vue';
import UploadImage from 'components/upload-image/index.vue';
import { PostType } from 'src/assets/type';
import ListPostDialog from 'components/post-category/list-post-dialog/index.vue';
export default defineComponent({
// name: 'ComponentName'
components: { UploadImage },
components: { UploadImage, ListPostDialog },
props: {
isOpenAddDialog: { type: Boolean, required: true },
},
......@@ -75,15 +76,17 @@ export default defineComponent({
},
];
const userTableRowsPost: Ref<PostType[]> = ref([]);
const isOpenListPost: Ref<boolean> = ref(false);
const uploadImage = (value: FileList) => {
urlFileLocal.value = URL.createObjectURL(value[0]);
file.value = value[0];
image.value = urlFileLocal.value;
console.log(value, 'FileList');
};
const getListPosts = () => {
console.log('getListPosts');
const deletePostSelected = (postIdx: number) => {
userTableRowsPost.value.splice(postIdx, 1);
};
return {
name,
title,
......@@ -92,11 +95,12 @@ export default defineComponent({
nameRules,
file,
urlFileLocal,
isOpenListPost,
uploadImage,
userTableColumnsPost,
userTableRowsPost,
keywordSearch,
getListPosts,
deletePostSelected,
};
},
emits: [
......
src/components/post-category/add-post-category/index.vue
View file @ f8acd8d7
......@@ -9,7 +9,7 @@
<q-card-section class="q-pa-none">
<q-item>
<q-item-section>
<q-item-label class="text-h6 text-weight-regular">
<q-item-label class="text-h6 q-py-md text-weight-regular">
{{ $t('postCategory.title.addPost') }}
</q-item-label>
</q-item-section>
......@@ -63,14 +63,14 @@
</div>
</div>
<div class="q-mt-md">
<span class="text-h6 text-weight-regular">{{
<span class="text-body1 text-weight-regular">{{
$t('customerRank.dialogLabel.fieldLabels.status')
}}</span
><q-toggle
v-model="status"
:true-value="1"
:false-value="2"
size="56px"
size="50px"
></q-toggle>
</div>
</q-card-section>
......@@ -84,11 +84,11 @@
q-mr-md
"
>
{{ $t('postCategory.title.listPosts') }}
{{ $t('postCategory.title.listPostsSelected') }}
<q-separator vertical spaced />
</div>
<q-space></q-space>
<div class="col-2">
<!-- <div class="col-2">
<q-input
v-model="keywordSearch"
dense
......@@ -103,16 +103,16 @@
no-caps
:label="$t('crudActions.search')"
style="width: 100px"
@click="getListPosts"
>
</q-btn>
</div>
</div> -->
<div class="col-auto">
<q-btn
color="primary"
no-caps
:label="$t('crudActions.add')"
style="width: 100px"
@click="isOpenListPost = true"
>
</q-btn>
</div>
......@@ -149,7 +149,7 @@
</div>
</q-td>
</template>
<template v-slot:body-cell-action>
<template v-slot:body-cell-action="post">
<q-td style="padding: 0; height: 100%">
<div align="center">
<q-btn
......@@ -157,6 +157,7 @@
round
color="primary"
icon="mdi-delete-outline"
@click="deletePostSelected(post.rowIndex)"
>
<q-tooltip :offset="[20, 10]">{{
$t('customer.toolTipMessage.deleteCustomer')
......@@ -191,6 +192,12 @@
</q-form>
</q-card>
</q-dialog>
<ListPostDialog
v-model:is-open-list-post="isOpenListPost"
:post-selected="userTableRowsPost"
@click:closeBtnDialog="isOpenListPost = false"
@submit-data="(userTableRowsPost = $event), (isOpenListPost = false)"
></ListPostDialog>
</template>
<script lang="ts" src="./AddPostCategory.ts"></script>
src/components/post-category/list-post-dialog/ListPostDialog.ts
View file @ f8acd8d7
import { defineComponent } from 'vue';
import { defineComponent, PropType, Ref, ref, watch } from 'vue';
import { PaginationResponse, PostType } from 'src/assets/type';
import { i18n } from 'src/boot/i18n';
import { API_PATHS, config } from 'src/assets/configurations';
import { api, BaseResponseBody } from 'src/boot/axios';
import { AxiosResponse } from 'axios';
import Pagination from 'components/pagination/index.vue';
export default defineComponent({
// name: 'ComponentName'
components: {
Pagination,
},
props: {
isOpenListPost: { type: Boolean, required: true },
postSelected: { type: Array as PropType<PostType[]>, required: true },
},
setup(props) {
watch(
() => props.isOpenListPost,
(value) => {
if (value) {
void getListPosts();
selected.value = props.postSelected;
}
}
);
const keywordSearch: Ref<string | null> = ref(null);
const userTableRowsPost: Ref<PostType[]> = ref([]);
const userTableColumnsPost = [
{
name: 'stt',
field: 'stt',
required: true,
label: i18n.global.t('postCategory.tableColumnsPost.stt'),
align: 'center',
sortable: false,
},
{
name: 'name',
field: 'name',
required: true,
label: i18n.global.t('postCategory.tableColumnsPost.name'),
align: 'center',
headerStyle: 'text-align: center !important;',
sortable: false,
},
{
name: 'image',
field: 'image',
required: true,
label: i18n.global.t('postCategory.tableColumnsPost.imageMini'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
];
const pageIndex = ref(1);
const pageSize = ref(20);
const totalPage = ref(1);
const configImg = config;
const selected: Ref<PostType[]> = ref([]);
const getListPosts = async () => {
const response = (await api({
url: API_PATHS.getListPost,
method: 'GET',
params: {
pageIndex: pageIndex.value,
pageSize: pageSize.value,
name: keywordSearch.value,
// langId: 1,
},
})) as AxiosResponse<BaseResponseBody<PaginationResponse<PostType>>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
userTableRowsPost.value = response.data.data.data;
totalPage.value = response.data.data.totalPages;
}
};
const changePageSize = () => {
pageIndex.value = 1;
void getListPosts();
};
const getSelectedString = () => {
return selected.value.length === 0
? ''
: `${selected.value.length} bài viết đã được chọn `;
};
return {
keywordSearch,
userTableRowsPost,
userTableColumnsPost,
pageIndex,
pageSize,
totalPage,
configImg,
selected,
getListPosts,
changePageSize,
getSelectedString,
};
},
emits: ['update:isOpenListPost', 'click:closeBtnDialog', 'submitData'],
});
src/components/post-category/list-post-dialog/index.vue
View file @ f8acd8d7
<template>
<div>My component</div>
<q-dialog
persistent
:model-value="isOpenListPost"
@update:model-value="$emit('update:isOpenListPost', $event)"
>
<q-card class="full-width" style="max-width: 60rem" bordered>
<q-form greedy @submit.prevent="$emit('submitData', selected)">
<q-card-section class="q-pa-none">
<q-item>
<q-item-section>
<q-item-label class="text-h6 text-weight-medium">
{{ $t('postCategory.title.addPostDialog') }}
</q-item-label>
</q-item-section>
</q-item>
</q-card-section>
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm flex-center q-mt-sm">
<div
class="
col-auto
text-body1 text-weight-regular
flex flex-center
q-mr-md
"
>
{{ $t('postCategory.title.listPosts') }}
<q-separator vertical spaced />
</div>
<q-space></q-space>
<div class="col-2">
<q-input
v-model="keywordSearch"
dense
outlined
:label="$t('postCategory.tableColumnsPost.name')"
clearable
></q-input>
</div>
<div class="col-auto">
<q-btn
color="primary"
no-caps
:label="$t('crudActions.search')"
style="width: 100px"
@click="getListPosts"
>
</q-btn>
</div>
<div class="col-12 q-mt-sm">
<q-table
v-model:selected="selected"
:rows="userTableRowsPost"
:columns="userTableColumnsPost"
:pagination="{ rowsPerPage: pageSize }"
:selected-rows-label="getSelectedString"
:no-data-label="$t('emptyData')"
row-key="name"
separator="cell"
selection="multiple"
hide-pagination
>
<template v-slot:body-cell-stt="item">
<q-td style="padding: 0; height: 100%">
<div align="center">
{{ item.rowIndex + 1 }}
</div>
</q-td>
</template>
<template v-slot:body-cell-image="image">
<q-td
style="padding: auto; height: 100%"
class="flex flex-center"
>
<q-img
style="width: 9rem"
fit="contain"
:ratio="16 / 9"
:src="configImg.API_IMAGE_ENDPOINT + image.row.image"
></q-img>
</q-td>
</template>
</q-table>
</div>
<div class="col-12 q-mt-sm">
<Pagination
v-model:currentPage="pageIndex"
v-model:pageSize="pageSize"
:totalPage="totalPage"
@update:pageSize="changePageSize"
@update:currentPage="getListPosts"
/>
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<div>
<q-btn
color="grey"
no-caps
style="width: 90px"
class="q-mr-sm"
:label="$t('post.crudActions.cancel')"
@click="$emit('click:closeBtnDialog')"
/>
<q-btn
type="submit"
color="primary"
no-caps
style="width: 90px"
:label="$t('post.crudActions.save')"
/>
</div>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script lang="ts" src="./ListPostDialog.ts"></script>
src/i18n/vi/index.ts
View file @ f8acd8d7
......@@ -695,6 +695,8 @@ export default {
addPost: 'Thêm mới danh mục bài viết',
editPost: 'Cập nhật danh mục bài viết',
listPosts: 'Danh sách bài viết',
listPostsSelected: 'Danh sách bài viết đã chọn',
addPostDialog: 'Thêm bài viết',
},
tableColumnsPostCategory: {
stt: 'STT',
......@@ -711,6 +713,7 @@ export default {
updateTime: 'Thời gian cập nhật gần nhất',
status: 'Trạng thái',
action: 'Chức năng',
imageMini: 'Ảnh thu nhỏ',
},
labelInput: {
namePost: 'Tên danh mục',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment