done Artist Page

parent c3ce8c12
......@@ -8,3 +8,8 @@ export enum UnitStatus {
active = 1,
inactive = 2,
}
export enum HotProductStatus {
active = 1,
inactive = 2,
}
......@@ -7,7 +7,7 @@ import axios, {
} from 'axios';
import { config } from 'src/assets/configurations';
import { StateInterface } from 'src/store';
import { Store } from 'vuex';
// import { Store } from 'vuex';
import { Notify } from 'quasar';
import { i18n } from './i18n';
import { StatusCodes } from 'http-status-codes';
......
......@@ -5,88 +5,86 @@ import { i18n } from 'src/boot/i18n';
import UploadImage from '../../upload-image/index.vue';
export default defineComponent({
components: {
UploadImage
},
components: {
UploadImage,
},
props: {
openAddHotProduct: {
type: Boolean,
requied: true
},
props: {
openAddHotProduct: {
type: Boolean,
requied: true,
},
},
setup(props, context) {
const file: Ref<File | string> = ref('')
const code: Ref<string> = ref('')
const embeddedUrl: Ref<string> = ref('')
const urlFileLocal: Ref<string> = ref('')
const status: Ref<number> = ref(2)
const uploadAvatar = (value: FileList) => {
urlFileLocal.value = URL.createObjectURL(value[0])
file.value = value[0]
};
watch(
() => props.openAddHotProduct,
(value) => {
if (value) {
ResetData()
}
}
);
const ResetData = () => {
file.value = ''
code.value = ''
embeddedUrl.value = ''
urlFileLocal.value = ''
status.value = 2
}
const SubbmitData = () => {
context.emit('click:CloseBtnAddHotProduct')
context.emit('insertData', {
file: file.value,
code: code.value,
status: status.value,
embeddedUrl: embeddedUrl.value,
imageUrl: urlFileLocal.value
})
setup(props, context) {
const file: Ref<File | string> = ref('');
const code: Ref<string> = ref('');
const embeddedUrl: Ref<string> = ref('');
const urlFileLocal: Ref<string> = ref('');
const status: Ref<number> = ref(2);
const uploadAvatar = (value: FileList) => {
urlFileLocal.value = URL.createObjectURL(value[0]);
file.value = value[0];
};
watch(
() => props.openAddHotProduct,
(value) => {
if (value) {
ResetData();
}
const product_code = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t(
'artist.artistInformation.validateMessages.requireProducCode'
),
];
const url_embed = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t(
'artist.artistInformation.validateMessages.requireUrlembed'
),
];
return {
uploadAvatar,
SubbmitData,
urlFileLocal,
file,
code,
embeddedUrl,
status,
ResetData,
product_code,
url_embed
};
},
emits: [
'insertData',
'update:openAddHotProduct',
'update:statusHotProduct',
'selectedFile',
'click:CloseBtnAddHotProduct'
],
});
}
);
const ResetData = () => {
file.value = '';
code.value = '';
embeddedUrl.value = '';
urlFileLocal.value = '';
status.value = 2;
};
const SubmitData = () => {
context.emit('click:CloseBtnAddHotProduct');
context.emit('insertData', {
file: file.value,
code: code.value,
status: status.value,
embeddedUrl: embeddedUrl.value,
imageUrl: urlFileLocal.value,
});
};
const product_code = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t(
'artist.artistInformation.validateMessages.requireProducCode'
),
];
const url_embed = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t(
'artist.artistInformation.validateMessages.requireUrlembed'
),
];
return {
uploadAvatar,
SubmitData,
urlFileLocal,
file,
code,
embeddedUrl,
status,
ResetData,
product_code,
url_embed,
};
},
emits: [
'insertData',
'update:openAddHotProduct',
'update:statusHotProduct',
'selectedFile',
'click:CloseBtnAddHotProduct',
],
});
......@@ -5,7 +5,7 @@
@update:model-value="$emit('update:openAddHotProduct', $event)"
>
<q-card style="min-width: 600px" bordered>
<q-form greedy @submit="SubbmitData">
<q-form greedy @submit="SubmitData">
<q-card-section>
<q-item>
<q-item-section>
......
import { defineComponent, PropType, ref, Ref, watch } from 'vue';
import { defineComponent, PropType, ref, watch } from 'vue';
import { i18n } from 'src/boot/i18n';
import { useRouter } from 'vue-router';
import { BannerType, StoriesType } from 'src/assets/type';
import UploadImage from 'components/upload-image/index.vue';
import { Dialog } from 'quasar';
......@@ -8,6 +9,7 @@ export default defineComponent({
components: { UploadImage },
props: {
id: { number: String, required: true },
account: { type: String, required: true },
banners: { type: Array as PropType<BannerType[]>, required: true },
shortDescription: { type: Array, required: true },
......@@ -17,12 +19,19 @@ export default defineComponent({
},
setup(props, context) {
const router = useRouter();
watch(
() => props.banners.length,
(value) => {
slide.value = value - 1;
}
);
watch(
() => props.stories.length,
(value) => {
slideStory.value = value - 1;
}
);
const slide = ref(0);
const slideStory = ref(0);
const editor = ref('Customize it.');
......@@ -55,23 +64,19 @@ export default defineComponent({
context.emit('deleteBanner', index);
});
};
const deleteImagesStoriess = (story: StoriesType, storyIdx: number) => {
if (story.content == '') {
context.emit('deleteStories', story);
} else {
// story.imageUrl =''
context.emit('deleteImagesStories', story);
}
const deleteStory = (storyIdx: number) => {
context.emit('confirmDeleteStory', storyIdx);
};
return {
router,
slide,
slideStory,
editor,
accountRules,
uploadBanner,
deleteImage,
deleteImagesStoriess,
deleteStory,
};
},
emits: [
......@@ -85,5 +90,7 @@ export default defineComponent({
'deleteImagesStories',
'deleteStories',
'confirmDeleteSocialEmbedded',
'click:openAddStoryDialog',
'confirmDeleteStory',
],
});
import { defineComponent, Ref, ref, watch } from 'vue';
// import { i18n } from 'src/boot/i18n';
import UploadImage from '../../../upload-image/index.vue';
export default defineComponent({
components: {
UploadImage,
},
props: {
isOpenAddStory: {
type: Boolean,
required: true,
},
},
setup(props, context) {
const file: Ref<File | string> = ref('');
const content: Ref<string> = ref('');
const urlFileLocal: Ref<string> = ref('');
const uploadStory = (value: FileList) => {
urlFileLocal.value = URL.createObjectURL(value[0]);
file.value = value[0];
};
watch(
() => props.isOpenAddStory,
(value) => {
if (value) {
ResetData();
}
}
);
const ResetData = () => {
file.value = '';
content.value = '';
urlFileLocal.value = '';
};
const SubmitData = () => {
context.emit('click:CloseBtnAddStory');
context.emit('insertData', {
file: file.value,
content: content.value,
imageUrl: urlFileLocal.value,
});
};
return {
uploadStory,
SubmitData,
urlFileLocal,
file,
content,
ResetData,
};
},
emits: [
'insertData',
'update:isOpenAddStory',
'selectedFile',
'click:CloseBtnAddStory',
],
});
<template>
<q-dialog
persistent
:model-value="isOpenAddStory"
@update:model-value="$emit('update:isOpenAddStory', $event)"
>
<q-card style="min-width: 600px" bordered>
<q-form greedy @submit="SubmitData">
<q-card-section>
<q-item>
<q-item-section>
<q-item-label class="text-h6 text-weight-regular">{{
$t('artist.dialogLabel.title.addHotProduct')
}}</q-item-label>
</q-item-section>
</q-item>
</q-card-section>
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-card v-if="urlFileLocal" flat style="max-height: 200px">
<div align="center">
<q-img
:src="urlFileLocal"
style="max-height: 200px; aspect-ratio: 16/9"
>
</q-img>
</div>
</q-card>
<UploadImage
@selectedFile="uploadStory"
class="q-mt-md"
:isBtn="true"
></UploadImage>
<q-input
v-model="content"
label="Nội dung"
hide-bottom-space
type="textarea"
class="q-my-sm"
outlined
clearable
></q-input>
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn
color="grey"
no-caps
style="width: 90px"
:label="$t('customer.crudActions.cancel')"
@click="$emit('click:CloseBtnAddStory')"
/>
<q-btn
color="primary"
no-caps
style="width: 90px"
:label="$t('customer.crudActions.save')"
type="submit"
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script lang="ts" src="./AddStory.ts"></script>
......@@ -7,6 +7,7 @@
</div>
<div class="col-2 flex flex-center">
<q-input
v-if="id"
:model-value="account"
@update:model-value="$emit('update:account', $event)"
:rules="accountRules"
......@@ -15,6 +16,15 @@
hide-bottom-space
outlined
></q-input>
<q-input
v-else
:model-value="account"
@update:model-value="$emit('update:account', $event)"
:rules="accountRules"
dense
hide-bottom-space
outlined
></q-input>
</div>
<div class="col-auto">
<q-btn color="primary" no-caps label="Reset Pass"></q-btn>
......@@ -23,17 +33,16 @@
<div class="text-uppercase text-weight-medium">Thông tin profile</div>
</div>
<div class="col-12 q-mt-sm">
<div class="row q-col-gutter-md">
<div class="col-4">
<div class="row q-col-gutter-lg">
<div class="col-7" style="height: 100%">
<q-carousel
v-if="banners.length"
v-model="slide"
:key="banners.length"
v-if="banners.length"
animated
arrows
navigation
infinite
style="height: 300px"
>
<q-carousel-slide
v-for="(bannerInfo, bannerIdx) in banners"
......@@ -53,16 +62,15 @@
</template>
</q-carousel-slide>
</q-carousel>
<UploadImage v-else @selectedFile="uploadBanner"></UploadImage>
<UploadImage
class="q-mt-xs"
v-if="banners.length"
class="q-mt-xs"
:isBtn="true"
@selectedFile="uploadBanner"
></UploadImage>
<UploadImage v-else @selectedFile="uploadBanner"></UploadImage>
</div>
<div class="col-8">
<div class="col-5">
<q-editor
:model-value="shortDescription"
@update:model-value="$emit('update:shortDescription', $event)"
......@@ -72,17 +80,88 @@
toolbar-bg="primary"
style="height: 100%"
:toolbar="[
['token'],
['bold', 'italic', 'underline'],
[
{
label: $q.lang.editor.align,
icon: $q.iconSet.editor.align,
fixedLabel: true,
list: 'only-icons',
options: ['left', 'center', 'right', 'justify'],
},
{
label: $q.lang.editor.align,
icon: $q.iconSet.editor.align,
fixedLabel: true,
options: ['left', 'center', 'right', 'justify'],
},
],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['token', 'hr', 'link', 'custom_btn'],
['print', 'fullscreen'],
[
{
label: $q.lang.editor.formatting,
icon: $q.iconSet.editor.formatting,
list: 'no-icons',
options: ['p', 'h3', 'h4', 'h5', 'h6', 'code'],
options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code'],
},
{
label: $q.lang.editor.fontSize,
icon: $q.iconSet.editor.fontSize,
fixedLabel: true,
fixedIcon: true,
list: 'no-icons',
options: [
'size-1',
'size-2',
'size-3',
'size-4',
'size-5',
'size-6',
'size-7',
],
},
{
label: $q.lang.editor.defaultFont,
icon: $q.iconSet.editor.font,
fixedIcon: true,
list: 'no-icons',
options: [
'default_font',
'arial',
'arial_black',
'comic_sans',
'courier_new',
'impact',
'lucida_grande',
'times_new_roman',
'verdana',
],
},
'removeFormat',
],
['quote', 'unordered', 'ordered', 'outdent', 'indent'],
['undo', 'redo'],
['viewsource'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
</div>
</div>
......@@ -101,7 +180,7 @@
color="primary"
icon="mdi-pencil-circle-outline"
>
<q-tooltip :offset="[20, 10]">Chỉnh sửa</q-tooltip></q-btn
<q-tooltip :offset="[20, 10]">Chỉnh sửa Embed</q-tooltip></q-btn
>
<q-btn
v-if="socialEmbedded !== null"
......@@ -111,7 +190,7 @@
icon="mdi-trash-can-outline"
@click="$emit('confirmDeleteSocialEmbedded')"
>
<q-tooltip :offset="[20, 10]">Xoá</q-tooltip></q-btn
<q-tooltip :offset="[20, 10]">Xoá Embed</q-tooltip></q-btn
>
</div>
<q-card
......@@ -138,14 +217,32 @@
</div>
<div class="col-4">
<div class="text-h6 text-weight-regular">Story</div>
<div class="flex flex-center">
<div class="text-h6 text-weight-regular q-ml-md">Story</div>
<q-space></q-space>
<q-btn
v-if="stories.length"
@click="$emit('click:openAddStoryDialog')"
flat
round
color="primary"
icon="mdi-plus-circle-outline"
class="q-mr-md"
>
<q-tooltip :offset="[20, 10]">Thêm Story</q-tooltip></q-btn
>
</div>
<q-card
class="my-card flex q-mt-xs flex-center"
style="height: 300px"
style="height: 100%"
bordered
v-if="!stories.length"
>
<div align="center" class="flex flex-center q-py-xs">
<div
@click="$emit('click:openAddStoryDialog')"
align="center"
class="flex flex-center q-py-xs"
>
<q-icon name="mdi-plus-circle-outline" size="xl"></q-icon>
<div class="q-mt-xs">{{ $t('uploadImage.uploadStory') }}</div>
</div>
......@@ -157,6 +254,7 @@
arrows
navigation
infinite
style="height: 100%"
>
<q-carousel-slide
v-for="(story, storyIdx) in stories"
......@@ -170,17 +268,19 @@
name="mdi-close-circle"
color="red"
style="position: absolute; right: 0; font-size: 24px"
@click="deleteImagesStoriess(story, storyIdx)"
@click="deleteStory(storyIdx)"
></q-icon>
<q-input
type="textarea"
:model-value="story.content"
readonly
@update:model-value="$emit('update:content', $event)"
></q-input>
</q-card>
</q-carousel-slide>
</q-carousel>
</div>
<div class="col-4">
<div class="text-h6 text-weight-regular">Lịch</div>
<q-date
......
......@@ -60,44 +60,30 @@ export default defineComponent({
i18n.global.t('artist.dialogLabel.validateMessages.requireCardType'),
];
const confirmAddAccBank = () => {
if (
isDefault.value === 1 &&
props.bankAccounts.filter((item) => item.isDefault === 1).length
) {
Notify.create({
type: 'negative',
message: i18n.global.t(
'artist.dialogLabel.validateMessages.errorIsDefault'
),
});
} else {
Notify.create({
type: 'positive',
message: i18n.global.t(
'artist.dialogLabel.validateMessages.addAccess'
),
});
let bankFilter = {};
props.cardBankOptions.map((item) => {
if (item.id === bank.value) {
bankFilter = item;
}
});
Notify.create({
type: 'positive',
message: i18n.global.t('artist.dialogLabel.validateMessages.addAccess'),
});
let bankFilter = {};
props.cardBankOptions.map((item) => {
if (item.id === bank.value) {
bankFilter = item;
}
});
let typeCardFilter = {};
props.typeBankOptions.map((item) => {
if (item.id === cardType.value) {
typeCardFilter = item;
}
});
context.emit('addNewBankAccount', {
accountNumber: accountNumber.value,
cardNumber: cardNumber.value,
bank: bankFilter,
cardType: typeCardFilter,
isDefault: isDefault.value,
});
}
let typeCardFilter = {};
props.typeBankOptions.map((item) => {
if (item.id === cardType.value) {
typeCardFilter = item;
}
});
context.emit('addNewBankAccount', {
accountNumber: accountNumber.value,
cardNumber: cardNumber.value,
bank: bankFilter,
cardType: typeCardFilter,
isDefault: isDefault.value,
});
};
const accountNumber: Ref<string> = ref('');
......
......@@ -69,44 +69,32 @@ export default defineComponent({
i18n.global.t('artist.dialogLabel.validateMessages.requireCardType'),
];
const confirmEditAccBank = () => {
if (
isDefault.value === 1 &&
props.bankAccounts.filter((item) => item.isDefault === 1).length
) {
Notify.create({
type: 'negative',
message: i18n.global.t(
'artist.dialogLabel.validateMessages.errorIsDefault'
),
});
} else {
Notify.create({
type: 'positive',
message: i18n.global.t(
'artist.dialogLabel.validateMessages.editAccess'
),
});
let bankFilter = {};
props.cardBankOptions.map((item) => {
if (item.id === bank.value) {
bankFilter = item;
}
});
Notify.create({
type: 'positive',
message: i18n.global.t(
'artist.dialogLabel.validateMessages.editAccess'
),
});
let bankFilter = {};
props.cardBankOptions.map((item) => {
if (item.id === bank.value) {
bankFilter = item;
}
});
let typeCardFilter = {};
props.typeBankOptions.map((item) => {
if (item.id === cardType.value) {
typeCardFilter = item;
}
});
context.emit('editBankAccount', {
accountNumber: accountNumber.value,
cardNumber: cardNumber.value,
bank: bankFilter,
cardType: typeCardFilter,
isDefault: isDefault.value,
});
}
let typeCardFilter = {};
props.typeBankOptions.map((item) => {
if (item.id === cardType.value) {
typeCardFilter = item;
}
});
context.emit('editBankAccount', {
accountNumber: accountNumber.value,
cardNumber: cardNumber.value,
bank: bankFilter,
cardType: typeCardFilter,
isDefault: isDefault.value,
});
};
const accountNumber: Ref<string> = ref('');
const cardNumber: Ref<string> = ref('');
......
......@@ -75,35 +75,6 @@
</q-td>
</template>
</q-table>
<!-- <div class="col-12 q-mt-sm">
<Pagination
v-model:currentPage="pageIndex"
v-model:pageSize="pageSize"
:totalPage="totalPage"
@update:pageSize="changePageSize"
@update:currentPage="getListBankAccount"
/>
</div> -->
<!-- <div class="col-12 q-mt-md">
<div class="row">
<q-space></q-space>
<div class="col-auto">
<q-btn
to="/nghe-sy"
color="grey"
no-caps
:label="$t('crudActions.back')"
></q-btn>
</div>
<div class="col-auto q-ml-md">
<q-btn
color="primary"
no-caps
:label="$t('crudActions.update')"
></q-btn>
</div>
</div>
</div> -->
</div>
</div>
</template>
......
......@@ -2,6 +2,7 @@ import { i18n } from 'src/boot/i18n';
import { defineComponent, onMounted, Ref, ref } from 'vue';
import Pagination from 'components/pagination/index.vue';
import { ProductType } from 'src/assets/type';
import { HotProductStatus } from 'src/assets/enums';
export default defineComponent({
components: {
Pagination,
......@@ -101,9 +102,8 @@ export default defineComponent({
name: item.row.name,
status: item.row.status,
});
context.emit('click:openUpadateHotProduct'
);
context.emit('click:openUpadateHotProduct');
};
const clickAdd = () => {
context.emit('click:addHotProduct');
......@@ -126,6 +126,7 @@ export default defineComponent({
changePageSize,
clickAdd,
updateProduct,
HotProductStatus,
};
},
emits: [
......@@ -133,6 +134,6 @@ export default defineComponent({
'reset',
'deleteRow',
'click:openUpadateHotProduct',
'setDataUpdate'
'setDataUpdate',
],
});
......@@ -21,6 +21,27 @@
hide-pagination
>
<template v-slot:body-cell-status="rowData">
<q-td>
<div align="center">
<q-chip
:color="
rowData.value === HotProductStatus.active
? 'positive'
: 'orange'
"
text-color="white"
size="sm"
>
{{
rowData.value === HotProductStatus.active
? $t('artist.hotProduct.statusLabel.active')
: $t('artist.hotProduct.statusLabel.inactive')
}}
</q-chip>
</div>
</q-td>
</template>
<!-- <template v-slot:body-cell-status="rowData">
<q-td>
<div align="center">
<q-checkbox
......@@ -30,7 +51,7 @@
/>
</div>
</q-td>
</template>
</template> -->
<template v-slot:body-cell-STT="item">
<q-td style="padding: 0; height: 100%">
<div align="center">
......
......@@ -377,6 +377,7 @@ export default {
addAccess: 'Thêm tài khoản ngân hàng thành công',
editAccess: 'Cập nhật thông tin tài khoản ngân hàng thành công',
deleteAccess: 'Xoá tài khoản ngân hàng thành công',
deleteStoryAccess: 'Xoá Story thành công',
},
},
confirmActionsTitle: {
......@@ -387,7 +388,8 @@ export default {
},
actionMessages: {
deleteArtistAccess: 'Xoá nghệ sỹ thành công',
editNewUserAccess: 'Cập nhật thông tin nghệ sỹ thành công',
editArtistAccess: 'Cập nhật thông tin nghệ sỹ thành công',
addNewArtistAccess: 'Thêm nghệ sỹ thành công',
},
artistInformation: {
tabLabel: {
......@@ -462,6 +464,15 @@ export default {
status: 'Trạng thái',
action: 'Chức năng',
},
statusLabel: {
active: 'Hiển thị',
inactive: 'Ẩn',
},
},
vabAccount: {
confirmActionsTitle: {
confirmDeleteStory: 'Bạn có chắc muốn xoá Story này không',
},
},
},
recordPerPage: 'Số bản ghi',
......
......@@ -71,11 +71,14 @@
@selectedFile="selectedFile"
@deleteBanner="banners.splice($event, 1)"
@openDialogUploadEmbed="isOpenDialogEmbed = true"
:id="route.params.id"
:social-embedded="socialEmbedded"
:banners="banners"
:stories="stories"
@deleteImagesStories="deleteImagesStories($event)"
@deleteStories="DeleteItemStories"
@click:openAddStoryDialog="isOpenAddStory = true"
@confirmDeleteStory="deleteStory"
></VabAccount>
</q-tab-panel>
<q-tab-panel name="bankAccount">
......@@ -140,6 +143,11 @@
@click:CloseBtnUpdateHotProduct="openUpdateHotProduct = false"
v-model:open-update-hot-product="openUpdateHotProduct"
></UpdateHotProduct>
<AddStory
@insertData="addStory"
v-model:is-open-add-story="isOpenAddStory"
@click:CloseBtnAddStory="isOpenAddStory = false"
></AddStory>
<div class="col-12 q-mt-md">
<div class="row">
<q-space></q-space>
......
......@@ -18,6 +18,7 @@ import AddNewBankAccountDialog from 'components/artist-information/bank-account/
import EditBankAccountDialog from 'components/artist-information/bank-account/edit-bank-account/index.vue';
import UploadEmbedDialog from 'components/artist-information/upload-embed-dialog/index.vue';
import UpdateHotProduct from 'components/artist-information/UpdateHotProduct/index.vue';
import AddStory from 'components/artist-information/VAB-account/add-story/index.vue';
import {
ArtistInfoType,
......@@ -53,9 +54,10 @@ export default defineComponent({
AddHotProductDialog,
UpdateHotProduct,
UploadEmbedDialog,
AddStory,
},
setup(_, context) {
setup() {
const route = useRoute();
const tab = ref('information');
......@@ -65,6 +67,7 @@ export default defineComponent({
const openAddHotProduct: Ref<boolean> = ref(false);
const openUpdateHotProduct: Ref<boolean> = ref(false);
const isOpenDialogEmbed: Ref<boolean> = ref(false);
const isOpenAddStory: Ref<boolean> = ref(false);
// state
const fieldOptions: Ref<FieldType[]> = ref([]);
......@@ -81,7 +84,7 @@ export default defineComponent({
//state sử dụng trong tab thong-tin-ca-nhan
const id: Ref<number> = ref(0);
const account: Ref<string> = ref('');
const account: Ref<string | null> = ref(null);
const avatar: Ref<string | null> = ref(null);
const avatarFile: Ref<File | null> = ref(null);
const artistCode: Ref<string> = ref('');
......@@ -217,7 +220,9 @@ export default defineComponent({
const response = (await api({
url: API_PATHS.getWorkOptions,
method: 'GET',
params: {},
params: {
// fieldId: fields.value[0].id,
},
})) as AxiosResponse<BaseResponseBody<WorkType[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
workOptions.value = response.data.data;
......@@ -244,9 +249,25 @@ export default defineComponent({
}
};
const addAccBank = (value: BankAccountType) => {
bankAccounts.value.push(value);
isOpenAddAccountBankDialog.value = false;
const addAccBank = (item: BankAccountType) => {
if (item.isDefault === 1) {
bankAccounts.value.forEach((element) => (element.isDefault = 2));
bankAccounts.value.push(item);
isOpenAddAccountBankDialog.value = false;
} else {
bankAccounts.value.push(item);
isOpenAddAccountBankDialog.value = false;
}
};
const editAccBank = (item: BankAccountType) => {
if (item.isDefault === 1) {
bankAccounts.value.forEach((element) => (element.isDefault = 2));
bankAccounts.value[rowBankAccIdx.value] = item;
isOpenEditAccountBankDialog.value = false;
} else {
bankAccounts.value[rowBankAccIdx.value] = item;
isOpenEditAccountBankDialog.value = false;
}
};
const confirmDeleteAccBank = (value: number) => {
Dialog.create({
......@@ -281,14 +302,9 @@ export default defineComponent({
isOpenEditAccountBankDialog.value = true;
};
const editAccBank = (value: BankAccountType) => {
// console.log(value, 'editAccBankeditAccBankeditAccBankeditAccBank');
bankAccounts.value[rowBankAccIdx.value] = value;
isOpenEditAccountBankDialog.value = false;
};
const pushData = (value: ProductType) => {
products.value.push(value);
console.log(products.value);
};
const selectedFile = (value: BannerType) => {
......@@ -354,6 +370,33 @@ export default defineComponent({
isOpenDialogEmbed.value = false;
};
const addStory = (value: StoriesType) => {
stories.value.push(value);
};
const deleteStory = (idx: number) => {
Dialog.create({
title: i18n.global.t(
'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankTitle'
),
message: i18n.global.t(
'artist.vabAccount.confirmActionsTitle.confirmDeleteStory'
),
cancel: i18n.global.t(
'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankBtnLabel'
),
color: 'negative',
}).onOk(() => {
Notify.create({
type: 'positive',
message: i18n.global.t(
'artist.dialogLabel.validateMessages.deleteStoryAccess'
),
});
stories.value.splice(idx, 1);
});
};
// const callApiUploadImage = async (file: File) => {
// try {
// const response = await api({
......@@ -404,7 +447,7 @@ export default defineComponent({
await Router.push({ name: Pages.artist });
Notify.create({
type: 'positive',
message: i18n.global.t('artist.actionMessages.editNewUserAccess'),
message: i18n.global.t('artist.actionMessages.editArtistAccess'),
});
}
} catch (error) {}
......@@ -512,6 +555,9 @@ export default defineComponent({
DeleteItemStories,
confirmDeleteSocialEmbedded,
changeEmbed,
isOpenAddStory,
addStory,
deleteStory,
};
},
});
......@@ -22,6 +22,8 @@ export default defineComponent({
const userTableColumnsArtist = [
{
required: true,
name: 'STT',
field: 'STT',
label: 'STT',
align: 'center',
sortable: false,
......@@ -122,9 +124,9 @@ export default defineComponent({
const professionOptions: Ref<QualificationType[]> = ref([]);
const artistLevelOptions: Ref<ArtistLevelType[]> = ref([]);
const workOptions: Ref<WorkType[]> = ref([]);
const fieldSelected: Ref<number | undefined> = ref();
const professionSelected: Ref<number | undefined> = ref();
const artistLevelSelected: Ref<number | undefined> = ref();
const fieldSelected: Ref<FieldType | null> = ref(null);
const professionSelected: Ref<QualificationType | null> = ref(null);
const artistLevelSelected: Ref<ArtistLevelType | null> = ref(null);
const isOpenNewArtistDialog = ref(false);
const id: Ref<number> = ref(0);
......@@ -155,6 +157,9 @@ export default defineComponent({
params: {
pageIndex: pageIndex.value,
pageSize: pageSize.value,
qualification: fieldSelected.value?.id,
artistLevel: professionSelected.value?.id,
field: artistLevelSelected.value?.id,
},
})) as AxiosResponse<
BaseResponseBody<PaginationResponse<ArtistInfoType>>
......@@ -167,17 +172,26 @@ export default defineComponent({
} catch (error) {}
// userTableRowsArtist.value = fakeData;
};
const filterListArtist = () => {
// const response = (await api({
// url: API_PATHS.filterListArtist,
// method: 'GET',
// params: {
// unitName: fullNameKeyword.value,
// fieldName: fieldSelected.value,
// },
// })) as AxiosResponse<BaseResponseBody<unknown>>;
// userTableRowsArtist.value = userTableRowsArtist.value.filter((item: unknown) => item.fullName = fullNameKeyword)
};
// const filterListArtist = async () => {
// try {
// const response = (await api({
// url: API_PATHS.getListArtists,
// method: 'GET',
// params: {
// pageIndex: pageIndex.value,
// pageSize: pageSize.value,
// name: fullNameKeyword.value,
// },
// })) as AxiosResponse<
// BaseResponseBody<PaginationResponse<ArtistInfoType>>
// >;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// userTableRowsArtist.value = response.data.data.data;
// totalPage.value = response.data.data.totalPages;
// }
// } catch (error) {}
// };
const changePageSize = () => {
pageIndex.value = 1;
void getListArtists();
......@@ -303,7 +317,7 @@ export default defineComponent({
instagram,
whatsapp,
sexOptions,
filterListArtist,
// filterListArtist,
totalPage,
changePageSize,
fullNameKeyword,
......
......@@ -47,7 +47,7 @@
color="primary"
no-caps
:label="$t('crudActions.search')"
@click="filterListArtist"
@click="getListArtists"
>
</q-btn>
</div>
......@@ -69,6 +69,13 @@
separator="cell"
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-avatar="avatar">
<q-td style="padding: 0; height: 100%" class="flex flex-center">
<q-img
......
......@@ -3,7 +3,7 @@ import { api, BaseResponseBody } from 'src/boot/axios';
import { API_PATHS, config } from 'src/assets/configurations';
import { useRoute } from 'vue-router';
import { AxiosResponse } from 'axios';
import moment from 'moment';
// import moment from 'moment';
import { i18n } from 'src/boot/i18n';
import { Dialog, Notify } from 'quasar';
import { Router } from 'src/router';
......@@ -18,9 +18,10 @@ import AddNewBankAccountDialog from 'components/artist-information/bank-account/
import EditBankAccountDialog from 'components/artist-information/bank-account/edit-bank-account/index.vue';
import UploadEmbedDialog from 'components/artist-information/upload-embed-dialog/index.vue';
import UpdateHotProduct from 'components/artist-information/UpdateHotProduct/index.vue';
import AddStory from 'components/artist-information/VAB-account/add-story/index.vue';
import {
ArtistInfoType,
// ArtistInfoType,
FieldType,
NationalityType,
ArtistLevelType,
......@@ -53,9 +54,10 @@ export default defineComponent({
AddHotProductDialog,
UpdateHotProduct,
UploadEmbedDialog,
AddStory,
},
setup(_, context) {
setup() {
const route = useRoute();
const tab = ref('information');
......@@ -65,6 +67,7 @@ export default defineComponent({
const openAddHotProduct: Ref<boolean> = ref(false);
const openUpdateHotProduct: Ref<boolean> = ref(false);
const isOpenDialogEmbed: Ref<boolean> = ref(false);
const isOpenAddStory: Ref<boolean> = ref(false);
// state
const fieldOptions: Ref<FieldType[]> = ref([]);
......@@ -81,7 +84,7 @@ export default defineComponent({
//state sử dụng trong tab thong-tin-ca-nhan
const id: Ref<number> = ref(0);
const account: Ref<string> = ref('');
const account: Ref<string | null> = ref(null);
const avatar: Ref<string | null> = ref(null);
const avatarFile: Ref<File | null> = ref(null);
const artistCode: Ref<string> = ref('');
......@@ -168,7 +171,9 @@ export default defineComponent({
const response = (await api({
url: API_PATHS.getWorkOptions,
method: 'GET',
params: {},
params: {
// fieldId: fields.value[0].id,
},
})) as AxiosResponse<BaseResponseBody<WorkType[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
workOptions.value = response.data.data;
......@@ -195,9 +200,25 @@ export default defineComponent({
}
};
const addAccBank = (value: BankAccountType) => {
bankAccounts.value.push(value);
isOpenAddAccountBankDialog.value = false;
const addAccBank = (item: BankAccountType) => {
if (item.isDefault === 1) {
bankAccounts.value.forEach((element) => (element.isDefault = 2));
bankAccounts.value.push(item);
isOpenAddAccountBankDialog.value = false;
} else {
bankAccounts.value.push(item);
isOpenAddAccountBankDialog.value = false;
}
};
const editAccBank = (item: BankAccountType) => {
if (item.isDefault === 1) {
bankAccounts.value.forEach((element) => (element.isDefault = 2));
bankAccounts.value[rowBankAccIdx.value] = item;
isOpenEditAccountBankDialog.value = false;
} else {
bankAccounts.value[rowBankAccIdx.value] = item;
isOpenEditAccountBankDialog.value = false;
}
};
const confirmDeleteAccBank = (value: number) => {
Dialog.create({
......@@ -232,14 +253,9 @@ export default defineComponent({
isOpenEditAccountBankDialog.value = true;
};
const editAccBank = (value: BankAccountType) => {
// console.log(value, 'editAccBankeditAccBankeditAccBankeditAccBank');
bankAccounts.value[rowBankAccIdx.value] = value;
isOpenEditAccountBankDialog.value = false;
};
const pushData = (value: ProductType) => {
products.value.push(value);
console.log(products.value);
};
const selectedFile = (value: BannerType) => {
......@@ -305,15 +321,42 @@ export default defineComponent({
isOpenDialogEmbed.value = false;
};
const callApiUploadImage = async (file: File) => {
try {
const response = await api({
url: API_PATHS.uploadImage,
method: 'GET',
params: {},
const addStory = (value: StoriesType) => {
stories.value.push(value);
};
const deleteStory = (idx: number) => {
Dialog.create({
title: i18n.global.t(
'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankTitle'
),
message: i18n.global.t(
'artist.vabAccount.confirmActionsTitle.confirmDeleteStory'
),
cancel: i18n.global.t(
'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankBtnLabel'
),
color: 'negative',
}).onOk(() => {
Notify.create({
type: 'positive',
message: i18n.global.t(
'artist.dialogLabel.validateMessages.deleteStoryAccess'
),
});
} catch (error) {}
stories.value.splice(idx, 1);
});
};
// const callApiUploadImage = async (file: File) => {
// try {
// const response = await api({
// url: API_PATHS.uploadImage,
// method: 'GET',
// params: {},
// });
// } catch (error) {}
// };
const addArtist = async () => {
try {
......@@ -337,7 +380,7 @@ export default defineComponent({
fullName: fullName.value,
// "workStatus": 1,
shortDescription: null,
account: account.value,
account: null,
socialEmbedded: socialEmbedded.value,
artistLevel: artistLevel.value,
fields: fields.value,
......@@ -355,7 +398,7 @@ export default defineComponent({
await Router.push({ name: Pages.artist });
Notify.create({
type: 'positive',
message: i18n.global.t('artist.actionMessages.editNewUserAccess'),
message: i18n.global.t('artist.actionMessages.addNewArtistAccess'),
});
}
} catch (error) {}
......@@ -461,6 +504,9 @@ export default defineComponent({
DeleteItemStories,
confirmDeleteSocialEmbedded,
changeEmbed,
isOpenAddStory,
addStory,
deleteStory,
};
},
});
......@@ -58,6 +58,8 @@
:profession-options="professionOptions"
:artist-level-options="artistLevelOptions"
:work-options="workOptions"
@SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar"
></PersonalInformation>
</q-tab-panel>
<q-tab-panel name="vabAccount">
......@@ -65,15 +67,20 @@
v-model:account="account"
v-model:short-description="shortDescription"
v-model:format-schedules="formatSchedules"
@confirmDeleteSocialEmbedded="confirmDeleteSocialEmbedded"
@selectedFile="selectedFile"
@deleteBanner="banners.splice($event, 1)"
@openDialogUploadEmbed="isOpenDialogEmbed = true"
:id="route.params.id"
:social-embedded="socialEmbedded"
:banners="banners"
:stories="stories"
@deleteImagesStories="deleteImagesStories($event)"
@deleteStories="DeleteItemStories"
@click:openAddStoryDialog="isOpenAddStory = true"
@confirmDeleteStory="deleteStory"
></VabAccount>
</q-tab-panel>
<q-tab-panel name="bankAccount">
<BankAccount
:bank-accounts="bankAccounts"
......@@ -82,7 +89,6 @@
@clickEditAccBankBtn="openDialogEditAccBank"
></BankAccount>
</q-tab-panel>
<q-tab-panel name="hotProduct">
<HotProduct
:products="products"
......@@ -119,8 +125,8 @@
<UploadEmbedDialog
v-model:is-open-dialog-embed="isOpenDialogEmbed"
v-model:social-embedded="socialEmbedded"
@uploadEmbed="isOpenDialogEmbed = false"
:social-embedded="socialEmbedded"
@uploadEmbed="changeEmbed"
@click:CloseBtn="isOpenDialogEmbed = false"
></UploadEmbedDialog>
......@@ -137,6 +143,11 @@
@click:CloseBtnUpdateHotProduct="openUpdateHotProduct = false"
v-model:open-update-hot-product="openUpdateHotProduct"
></UpdateHotProduct>
<AddStory
@insertData="addStory"
v-model:is-open-add-story="isOpenAddStory"
@click:CloseBtnAddStory="isOpenAddStory = false"
></AddStory>
<div class="col-12 q-mt-md">
<div class="row">
<q-space></q-space>
......@@ -152,7 +163,7 @@
<q-btn
color="primary"
no-caps
:label="$t('crudActions.update')"
:label="$t('crudActions.add')"
@click="addArtist"
></q-btn>
</div>
......
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