Skip to content

Q
quasar-web-base
Commit 0c261995 authored by Tình Trương's avatar Tình Trương
Browse files
Options

update

parent 8d1d8147
Hide whitespace changes
Inline Side-by-side
Showing with 195 additions and 135 deletions
src/components/add-update-post/index.vue
View file @ 0c261995
......@@ -30,77 +30,79 @@
style="max-height: calc(100vh - 10rem)"
>
<div class="row q-col-gutter-sm">
<div class="col-12">
<div class="col-6">
<div class="row flex-center">
<div>
<q-card style="margin-bottom: 8px" v-if="image !== null">
<q-card class="q-mb-sm" v-if="image !== null">
<q-img
:src="image"
style="height: 268px; width: 350px"
@click="uploadAvatar"
>
</q-img>
:src="image"
style="height: 380px; width: 350px; cursor: pointer"
></q-img>
<q-icon
name="mdi-close-circle"
color="red"
style="position: absolute; right: 0; font-size: 18px"
style="
position: absolute;
right: 0;
font-size: 18px;
cursor: pointer;
"
@click="deleteAvatar"
></q-icon>
</q-card>
<q-card v-else style="margin-bottom: 8px">
<q-img
src="~/assets/noavatar.png"
style="height: 268px; width: 350px"
></q-img>
</q-card>
<q-card @click="uploadAvatar">
<div align="center" class="flex flex-center q-py-xs">
<div
@click="uploadAvatar"
v-else
class="q-mb-sm"
style="
height: 380px;
width: 350px;
border: 2px dashed #5d319e;
border-radius: 4px;
cursor: pointer;
"
>
<div
style="
height: 380px;
width: 350px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<q-icon
style="color: #5d319e"
name="mdi-plus-circle-outline"
:size="'xs'"
name="mdi-cloud-upload"
size="xl"
></q-icon>
<div class="q-mt-xs">
{{ $t('post.uploadImg') }}
</div>
Tải ảnh lên
</div>
</div>
<div>
<input
ref="upload"
hidden
type="file"
@change="selectedFile($event.target.files)"
type="file"
accept="image/png, image/jpeg"
/>
</q-card>
</div>
</div>
</div>
</div>
<div class="q-ml-md q-mt-lg q-mr-md">
<q-select
:model-value="category"
@update:model-value="$emit('update:category', $event)"
:label="$t('post.dialogLabel.postLabels.category')"
:rules="categoryRules"
:options="categoryOptions"
map-options
option-value="id"
option-label="name"
type="text"
class="q-my-sm"
outlined
></q-select>
</div>
<div class="col-6">
<q-tabs
v-model="tab"
dense
class="text-grey"
align="left"
active-color="primary"
indicator-color="primary"
align="left"
narrow-indicator
:breakpoint="0"
>
<q-tab
v-for="(info, index) in languageOptions"
......@@ -116,23 +118,49 @@
v-for="(info, index) in languageOptions"
:key="`${info.language.id}-${index}`"
:name="info.language.code"
class="q-pt-none; q-pa-none"
>
<q-input
v-model="info.name"
:label="$t('post.dialogLabel.postLabels.name')"
type="text"
class="q-my-sm"
outlined
lazy-rules
:rules="nameRules"
clearable
></q-input>
</q-tab-panel>
</q-tab-panels>
<q-select
:model-value="category"
@update:model-value="$emit('update:category', $event)"
:label="$t('post.dialogLabel.postLabels.category')"
:rules="categoryRules"
:options="categoryOptions"
map-options
class="q-py-sm"
option-value="id"
option-label="name"
type="text"
outlined
></q-select>
<div class="q-pt-md">
<span class="text-body1">{{
$t('post.dialogLabel.postLabels.status')
}}</span
><q-toggle
:model-value="status"
:true-value="1"
:false-value="2"
@update:model-value="$emit('update:status', $event)"
/>
</div>
</div>
<div class="col-12 q-mt-md">
<q-tabs
v-model="tabContent"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="left"
......@@ -148,12 +176,12 @@
</q-tabs>
<q-separator />
<q-tab-panels v-model="tabContent" animated>
<q-tab-panel
v-for="(info, index) in languageOptions"
:key="`${info.language.id}-${index}`"
:name="info.language.code"
class="q-pt-none; q-pa-none"
>
<q-editor
v-model="info.content"
......@@ -252,18 +280,6 @@
/>
</q-tab-panel>
</q-tab-panels>
<div class="q-pl-md">
<span class="text-body1">{{
$t('post.dialogLabel.postLabels.status')
}}</span
><q-toggle
:model-value="status"
:true-value="1"
:false-value="2"
@update:model-value="$emit('update:status', $event)"
/>
</div>
</div>
</div>
......
src/components/artist-information/VAB-account/index.vue
View file @ 0c261995
......@@ -37,7 +37,7 @@
</div>
<div class="col-12 q-mt-sm">
<div class="row q-col-gutter-lg">
<div class="col-6" style="height: 100%">
<div class="col-6">
<q-carousel
v-if="banners.length"
v-model="slide"
......@@ -79,8 +79,7 @@
</q-carousel-slide>
</q-carousel>
<UploadImage
v-if="banners.length"
class="q-mt-sm"
v-if="banners.length !== null"
:isBtn="true"
@selectedFile="uploadBanner"
></UploadImage>
......@@ -178,12 +177,7 @@
</div>
</div>
<div class="col-12 q-mt-sm">
<div
class="row q-col-gutter-lg"
style="margin-bottom: 111px"
align="center"
justify="center"
>
<div class="row q-col-gutter-lg q-pb-md" align="center" justify="center">
<div class="col-4">
<div class="flex flex-center">
<div class="text-h6 text-weight-regular q-py-md">
......@@ -214,7 +208,7 @@
<div
@click="$emit('openDialogUploadEmbed')"
class="flex flex-center"
:style="socialEmbedded !== null ? 'height: 100%;' : 'height: 100%'"
:style="socialEmbedded !== null ? 'height: 85%;' : 'height: 85%'"
>
<iframe
v-if="socialEmbedded !== null"
......@@ -231,6 +225,7 @@
border: 2px dashed #5d319e;
border-radius: 5px;
cursor: pointer;
flex-direction: column;
"
class="flex flex-center"
>
......@@ -261,7 +256,7 @@
</div>
<div
class="flex flex-center"
:style="stories.length ? 'height: 100%' : 'height: 100%;'"
:style="stories.length ? 'height: 85%' : 'height: 85%;'"
bordered
v-if="!stories.length"
>
......@@ -275,6 +270,7 @@
border: 2px dashed #5d319e;
border-radius: 5px;
cursor: pointer;
flex-direction: column;
"
>
<q-icon
......@@ -318,14 +314,14 @@
"
@click="deleteStory(storyIdx)"
></q-icon>
<q-input
type="textarea"
class="q-px-sm"
:model-value="story.content"
@update:model-value="$emit('update:content', $event)"
readonly
></q-input>
</div>
<q-input
type="textarea"
class="q-px-sm"
:model-value="story.content"
@update:model-value="$emit('update:content', $event)"
readonly
></q-input>
</q-carousel-slide>
</q-carousel>
</div>
......@@ -333,7 +329,7 @@
<div class="col-4">
<div class="text-h6 text-weight-regular q-py-md">Lịch</div>
<q-date
style="width: 100%; height: 100%"
style="width: 100%; height: 85%"
:model-value="formatSchedules"
@update:model-value="$emit('update:formatSchedules', $event)"
multiple
......
src/components/artist-information/personal-information/PersonalInformation.ts
View file @ 0c261995
......@@ -5,6 +5,7 @@ import moment from 'moment';
import { FieldType, NationalityType } from 'src/assets/type';
export default defineComponent({
props: {
hidden_img: { type: Boolean, required: true },
id: { type: Number, required: true },
artistCode: { type: String, required: true },
avatar: { type: String, required: true },
......@@ -59,10 +60,13 @@ export default defineComponent({
setup(_, context) {
const BirthdayDatePicker = ref(moment().format('YYYY/MM/DD'));
const selectedFile = (value: FileList) => {
context.emit('SetAvatar', {
file: value[0],
url: URL.createObjectURL(value[0]),
});
if (value.length !== 0) {
context.emit('SetAvatar', {
file: value[0],
url: URL.createObjectURL(value[0]),
});
context.emit('update:hidden_img', false);
}
};
const upload = ref(null);
......@@ -170,6 +174,7 @@ export default defineComponent({
'update:works',
'update:qualification',
'update:artistLevel',
'update:hidden_img',
'update:status',
'addNewArtist',
'SetAvatar',
......
src/components/artist-information/personal-information/index.vue
View file @ 0c261995
......@@ -12,7 +12,7 @@
<q-img
@click="uploadBanner"
:src="avatar"
style="height: 265px; width: 195px; cursor: pointer"
style="height: 263px; width: 195px; cursor: pointer"
></q-img>
<q-icon
name="mdi-close-circle"
......@@ -31,7 +31,7 @@
v-else
class="q-mb-sm"
style="
height: 265px;
height: 263px;
width: 195px;
border: 2px dashed #5d319e;
border-radius: 4px;
......@@ -54,24 +54,23 @@
></q-icon>
Tải ảnh lên
</div>
<q-img
@click="uploadBanner"
style="height: 265px; width: 195px"
></q-img>
</div>
<div>
<input
ref="upload"
hidden
@change="selectedFile($event.target.files)"
type="file"
accept="image/png, image/jpeg"
@change="selectedFile($event.target.files)"
/>
</div>
<div v-if="hidden_img" style="color: #c10015; font-size: 12px">
Không được để trống
</div>
</div>
</div>
</div>
<div class="row q-mt-sm flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.artistCode') }}
<span style="color: red">*</span>
......@@ -83,13 +82,14 @@
@update:model-value="$emit('update:artistCode', $event)"
:error="artistCodeRules"
:error-message="errorMessArtistCode"
class="q-my-sm"
outlined
dense
hide-bottom-space
></q-input>
</div>
</div>
<div class="row q-mt-md flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.fullName') }}
<span style="color: red">*</span>
......@@ -100,13 +100,14 @@
@update:model-value="$emit('update:fullName', $event)"
:error="fullNameRules"
:error-message="errorMessFullName"
class="q-my-sm"
outlined
dense
hide-bottom-space
></q-input>
</div>
</div>
<div class="row q-mt-md flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.artistName') }}
<span style="color: red">*</span>
......@@ -117,13 +118,14 @@
@update:model-value="$emit('update:artistName', $event)"
:error="artistNameRules"
:error-message="errorMessArtistName"
class="q-my-sm"
outlined
dense
hide-bottom-space
></q-input>
</div>
</div>
<div class="row q-mt-sm flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.birthday') }}
<span style="color: red">*</span>
......@@ -207,12 +209,11 @@
class="q-my-sm"
outlined
hide-bottom-space
clearable
dense
></q-select>
</div>
</div>
<div class="row q-mt-xs q-mb-md flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.address') }}
<span style="color: red">*</span>
......@@ -225,13 +226,14 @@
:error-message="errorMessAddress"
outlined
hide-bottom-space
class="q-my-sm"
dense
></q-input>
</div>
</div>
</div>
<div class="col-5 q-ml-xl">
<div class="row q-mt-xs flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.field') }}
<span style="color: red">*</span>
......@@ -332,7 +334,7 @@
></q-select>
</div>
</div>
<div class="row q-mt-sm flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.phoneNumber') }}
<span style="color: red">*</span>
......@@ -344,13 +346,14 @@
:error="phoneNumberRules"
:error-message="errorMessPhoneNumber"
mask="##########"
class="q-my-sm"
outlined
dense
hide-bottom-space
></q-input>
</div>
</div>
<div class="row q-mt-md flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.email') }}
<span style="color: red">*</span>
......@@ -362,13 +365,14 @@
:error="emailRules"
:error-message="errorMessEmail"
outlined
class="q-my-sm"
dense
hide-bottom-space
></q-input>
</div>
</div>
<div class="row q-mt-sm flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{
$t('artist.artistInformation.titleDataField.phoneNumberAdminister')
......@@ -382,13 +386,14 @@
:error="phoneNumberAdministerRules"
:error-message="errorMessPhoneNumberAdminister"
mask="##########"
class="q-my-sm"
outlined
dense
hide-bottom-space
></q-input>
</div>
</div>
<div class="row q-mt-md flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.emailAdminister') }}
<span style="color: red">*</span>
......@@ -400,13 +405,14 @@
:error="emailAdministerRules"
:error-message="errorMessEmailAdminister"
outlined
class="q-my-sm"
dense
hide-bottom-space
></q-input>
</div>
</div>
<div class="row q-mt-md flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.facebook') }}
</div>
......@@ -415,11 +421,12 @@
:model-value="facebook"
@update:model-value="$emit('update:facebook', $event)"
outlined
class="q-my-sm"
dense
></q-input>
</div>
</div>
<div class="row q-mt-md flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.facebookMessage') }}
</div>
......@@ -428,11 +435,12 @@
:model-value="facebookMessage"
@update:model-value="$emit('update:facebookMessage', $event)"
outlined
class="q-my-sm"
dense
></q-input>
</div>
</div>
<div class="row q-mt-md flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.instagram') }}
</div>
......@@ -441,11 +449,12 @@
:model-value="instagram"
@update:model-value="$emit('update:instagram', $event)"
outlined
class="q-my-sm"
dense
></q-input>
</div>
</div>
<div class="row q-mt-md flex-center">
<div class="row flex-center">
<div class="col-3 text-weight-medium">
{{ $t('artist.artistInformation.titleDataField.whatsapp') }}
</div>
......@@ -454,6 +463,7 @@
:model-value="whatsapp"
@update:model-value="$emit('update:whatsapp', $event)"
outlined
class="q-my-sm"
dense
></q-input>
</div>
......
src/components/units-manager/add-update-unit-dialog/index.vue
View file @ 0c261995
......@@ -213,6 +213,7 @@
</q-td>
</template>
</q-table>
<div v-if="check_artistList">Không được để trống</div>
</div>
<!-- ngân hàng -->
......@@ -502,6 +503,7 @@ export default defineComponent({
type: Boolean,
required: true,
},
check_artistList: { type: Boolean, required: true },
isUpdate: { type: Boolean, default: false },
fieldsOptions: { type: Array, required: true },
fields: { type: Number, required: true },
......@@ -846,6 +848,7 @@ export default defineComponent({
'update:address',
'update:status',
'update:artistList',
'update:check_artistList',
'addNewUnit',
],
});
......
src/components/upload-image/index.vue
View file @ 0c261995
<template>
<q-card @click="uploadBanner">
<div @click="uploadBanner">
<div
align="center"
:class="{
'full-height full-width flex flex-center ': isBtn,
}"
style="
border: 2px dashed #5d319e;
border-radius: 5px;
cursor: pointer;
flex-direction: column;
"
class="flex flex-center"
>
<q-icon
style="color: #5d319e"
name="mdi-cloud-upload"
:size="isBtn ? 'md' : 'md'"
></q-icon>
<span>{{ $t('uploadImage.uploadBanner') }}</span>
<span>Tải lên ảnh bìa</span>
</div>
<input
ref="upload"
......@@ -20,7 +23,7 @@
accept="image/png, image/jpeg"
@change="$emit('selectedFile', $event.target.files)"
/>
</q-card>
</div>
</template>
<script lang="ts" src="./UploadImage.ts"></script>
src/pages/bai-viet/index.vue
View file @ 0c261995
......@@ -121,6 +121,7 @@
</div>
<AddUpdatePostDialog
v-if="addPostDialogIsOpened"
v-model:isOpened="addPostDialogIsOpened"
v-model:name="name"
v-model:category="category"
......
src/pages/cap-nhat-thong-tin-nghe-sy/index.vue
View file @ 0c261995
......@@ -61,6 +61,7 @@
v-model:facebook-message="facebookMessage"
v-model:instagram="instagram"
v-model:whatsapp="whatsapp"
v-model:hidden_img="hidden_img"
:errorMessPhoneNumber="errorMessPhoneNumber"
:errorMessEmail="errorMessEmail"
:errorMessPhoneNumberAdminister="errorMessPhoneNumberAdminister"
......
src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts
View file @ 0c261995
......@@ -119,6 +119,7 @@ export default defineComponent({
const facebookMessage: Ref<string | null | undefined> = ref();
const instagram: Ref<string | null | undefined> = ref();
const whatsapp: Ref<string | null | undefined> = ref();
const hidden_img = ref(false);
// state sử dụng trong tab vab account
const banners: Ref<BannerType[]> = ref([]);
......@@ -654,6 +655,10 @@ export default defineComponent({
const checkValidate = () => {
let hasError = false;
if (!avatarFile.value) {
hasError = true;
hidden_img.value = true;
}
if (!artistCode.value || !artistCode.value?.trim().length) {
hasError = true;
artistCodeRules.value = true;
......@@ -856,6 +861,7 @@ export default defineComponent({
void getTypeCardOptions();
});
return {
hidden_img,
tab,
getInformationArtist,
id,
......
src/pages/don-vi-chu-quan/index.vue
View file @ 0c261995
......@@ -142,6 +142,7 @@
v-model:representative="unitRepresentative"
v-model:status="unitStatus"
v-model:artistList="unitArtistList"
v-model:check_artistList="check_artistList"
isUpdate
@addNewUnit="addNewUnit"
/>
......@@ -158,6 +159,7 @@
v-model:representative="unitRepresentative"
v-model:status="unitStatus"
v-model:artistList="unitArtistList"
v-model:check_artistList="check_artistList"
@addNewUnit="updateNewUnit"
/>
</div>
......@@ -291,6 +293,7 @@ export default defineComponent({
const unitStatus: Ref<number> = ref(UnitStatus.active);
const unitArtistList: Ref<unknown[]> = ref([]);
const unitId: Ref<number | undefined> = ref(undefined);
const check_artistList = ref(false);
const getListUnits = async () => {
try {
......@@ -443,32 +446,39 @@ export default defineComponent({
//add
const addNewUnit = async () => {
const data = {
name: unitName.value,
code: unitCode.value,
representative: unitRepresentative.value,
address: unitAddress.value,
email: unitEmail.value,
phoneNumber: unitPhoneNumber.value,
status: unitStatus.value,
fields: unitField.value,
contracts: unitArtistList.value,
};
const response = (await api({
url: API_PATHS.artistOwnerAdd,
method: 'POST',
data,
})) as AxiosResponse<BaseResponseBody<ArtistOwnerAdd[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
addUnitDialogIsOpened.value = false;
Notify.create({
type: 'positive',
message: i18n.global.t(
'managingUnit.actionMessages.addNewManagingUnitsAccess'
),
actions: [{ icon: 'close', color: 'white' }],
});
void getListUnits();
let hasError = false;
if (unitArtistList.value.length !== 0) {
hasError = true;
check_artistList.value = true;
}
if (hasError === false) {
const data = {
name: unitName.value,
code: unitCode.value,
representative: unitRepresentative.value,
address: unitAddress.value,
email: unitEmail.value,
phoneNumber: unitPhoneNumber.value,
status: unitStatus.value,
fields: unitField.value,
contracts: unitArtistList.value,
};
const response = (await api({
url: API_PATHS.artistOwnerAdd,
method: 'POST',
data,
})) as AxiosResponse<BaseResponseBody<ArtistOwnerAdd[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
addUnitDialogIsOpened.value = false;
Notify.create({
type: 'positive',
message: i18n.global.t(
'managingUnit.actionMessages.addNewManagingUnitsAccess'
),
actions: [{ icon: 'close', color: 'white' }],
});
void getListUnits();
}
}
};
......@@ -477,6 +487,7 @@ export default defineComponent({
void getFieldOptions();
});
return {
check_artistList,
getDetailUnit,
addUnitDialogIsOpened,
updateUnitDialogIsOpened,
......
src/pages/them-nghe-sy/AddArtist.ts
View file @ 0c261995
......@@ -117,6 +117,7 @@ export default defineComponent({
const facebookMessage: Ref<string | null | undefined> = ref();
const instagram: Ref<string | null | undefined> = ref();
const whatsapp: Ref<string | null | undefined> = ref();
const hidden_img = ref(false);
// state sử dụng trong tab vab account
const banners: Ref<BannerType[]> = ref([]);
......@@ -590,6 +591,10 @@ export default defineComponent({
};
const checkValidate = () => {
let hasError = false;
if (!avatarFile.value) {
hasError = true;
hidden_img.value = true;
}
if (!artistCode.value || !artistCode.value?.trim().length) {
hasError = true;
artistCodeRules.value = true;
......@@ -766,6 +771,7 @@ export default defineComponent({
const deleteAvatar = () => {
avatar.value = null;
avatarFile.value = null;
};
const confirmChangeIsDefault = (item: changeIsDefault) => {
if (item.isDefault === 2) {
......@@ -782,6 +788,7 @@ export default defineComponent({
void getTypeCardOptions();
});
return {
hidden_img,
tab,
id,
route,
......
src/pages/them-nghe-sy/index.vue
View file @ 0c261995
......@@ -61,6 +61,7 @@
v-model:facebook-message="facebookMessage"
v-model:instagram="instagram"
v-model:whatsapp="whatsapp"
v-model:hidden_img="hidden_img"
:errorMessPhoneNumber="errorMessPhoneNumber"
:errorMessEmail="errorMessEmail"
:errorMessPhoneNumberAdminister="errorMessPhoneNumberAdminister"
......
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