Files
WhiteNightsAdminPanel/src/shared/store/EditSightStore/index.tsx

790 lines
20 KiB
TypeScript

import {
articlesStore,
authInstance,
Language,
languageInstance,
mediaStore,
} from "@shared";
import { makeAutoObservable, runInAction } from "mobx";
export type SightLanguageInfo = {
id: number;
name: string;
short_name: string;
address: string;
left: {
heading: string;
body: string;
media: { id: string; media_type: number; filename: string }[];
};
right: {
id: number;
heading: string;
body: string;
media: { id: string; media_type: number; filename: string }[];
}[];
};
export type SightCommonInfo = {
id: number;
city_id: number;
city: string;
latitude: number;
longitude: number;
is_default_icon: boolean;
thumbnail: string | null;
icon: string | null;
alt_icon: string | null;
watermark_lu: string | null;
watermark_rd: string | null;
left_article: number;
preview_media: string | null;
video_preview: string | null;
preview_font_size?: number;
};
export type SightBaseInfo = {
common: SightCommonInfo;
} & {
[key in Language]: SightLanguageInfo;
};
class EditSightStore {
sight: SightBaseInfo = {
common: {
id: 0,
city_id: 0,
city: "",
latitude: 0,
longitude: 0,
is_default_icon: false,
thumbnail: null,
icon: null,
alt_icon: null,
watermark_lu: null,
watermark_rd: null,
left_article: 0,
preview_media: null,
video_preview: null,
},
ru: {
id: 0,
name: "",
short_name: "",
address: "",
left: { heading: "", body: "", media: [] },
right: [],
},
en: {
id: 0,
name: "",
short_name: "",
address: "",
left: { heading: "", body: "", media: [] },
right: [],
},
zh: {
id: 0,
name: "",
short_name: "",
address: "",
left: { heading: "", body: "", media: [] },
right: [],
},
};
constructor() {
makeAutoObservable(this);
}
hasLoadedCommon = false;
isLoading = false;
getSightInfo = async (id: number, language: Language) => {
this.isLoading = true;
try {
const response = await languageInstance(language).get(`/sight/${id}`);
const data = response.data;
if (data.left_article != 0 && data.left_article != null) {
await this.getLeftArticle(data.left_article);
}
runInAction(() => {
this.sight[language] = {
...this.sight[language],
...data,
};
if (!this.hasLoadedCommon) {
this.sight.common = {
...this.sight.common,
...data,
};
this.hasLoadedCommon = true;
}
});
} finally {
this.isLoading = false;
}
};
updateLeftInfo = (language: Language, heading: string, body: string) => {
this.sight[language].left.heading = heading;
this.sight[language].left.body = body;
};
getRightArticles = async (id: number) => {
let responseRu = await languageInstance("ru").get(`/sight/${id}/article`);
let responseEn = await languageInstance("en").get(`/sight/${id}/article`);
let responseZh = await languageInstance("zh").get(`/sight/${id}/article`);
const mediaMap = new Map();
for (const article of responseRu.data) {
const responseMedia = await authInstance.get(
`/article/${article.id}/media`
);
mediaMap.set(article.id, responseMedia.data);
}
const addMediaToArticles = (articles: any[]) => {
return articles.map((article) => ({
...article,
media: mediaMap.get(article.id),
}));
};
const data = {
ru: {
right: addMediaToArticles(responseRu.data),
},
en: {
right: addMediaToArticles(responseEn.data),
},
zh: {
right: addMediaToArticles(responseZh.data),
},
};
runInAction(() => {
this.sight = {
...this.sight,
ru: {
...this.sight.ru,
right: data.ru.right,
},
en: {
...this.sight.en,
right: data.en.right,
},
zh: {
...this.sight.zh,
right: data.zh.right,
},
};
});
};
clearSightInfo = () => {
this.needLeaveAgree = false;
this.hasLoadedCommon = false;
this.isLoading = false;
this.sight = {
common: {
id: 0,
city_id: 0,
city: "",
latitude: 0,
longitude: 0,
is_default_icon: false,
thumbnail: null,
icon: null,
alt_icon: null,
watermark_lu: null,
watermark_rd: null,
left_article: 0,
preview_media: null,
video_preview: null,
},
ru: {
id: 0,
name: "",
short_name: "",
address: "",
left: { heading: "", body: "", media: [] },
right: [],
},
en: {
id: 0,
name: "",
short_name: "",
address: "",
left: { heading: "", body: "", media: [] },
right: [],
},
zh: {
id: 0,
name: "",
short_name: "",
address: "",
left: { heading: "", body: "", media: [] },
right: [],
},
};
};
updateSightInfo = (
language: Language,
content: Partial<SightLanguageInfo | SightCommonInfo>,
common: boolean = false
) => {
this.needLeaveAgree = true;
if (common) {
this.sight.common = {
...this.sight.common,
...content,
};
} else {
this.sight[language] = {
...this.sight[language],
...content,
};
}
};
unlinkLeftArticle = async () => {
this.sight.common.left_article = 0;
this.sight.ru.left.heading = "";
this.sight.en.left.heading = "";
this.sight.zh.left.heading = "";
this.sight.ru.left.body = "";
this.sight.en.left.body = "";
this.sight.zh.left.body = "";
};
updateSight = async () => {
let createdLeftArticleId = this.sight.common.left_article;
if (this.sight.common.left_article == 10000000) {
const response = await languageInstance("ru").post(`/article`, {
heading: this.sight.ru.left.heading,
body: this.sight.ru.left.body,
});
createdLeftArticleId = response.data.id;
await languageInstance("en").patch(`/article/${createdLeftArticleId}`, {
heading: this.sight.en.left.heading,
body: this.sight.en.left.body,
});
await languageInstance("zh").patch(`/article/${createdLeftArticleId}`, {
heading: this.sight.zh.left.heading,
body: this.sight.zh.left.body,
});
this.sight.common.left_article = createdLeftArticleId;
} else if (
this.sight.common.left_article != 0 &&
this.sight.common.left_article != null
) {
await authInstance.patch(`/article/${this.sight.common.left_article}`, {
translations: {
heading: {
ru: this.sight.ru.left.heading,
en: this.sight.en.left.heading,
zh: this.sight.zh.left.heading,
},
body: {
ru: this.sight.ru.left.body,
en: this.sight.en.left.body,
zh: this.sight.zh.left.body,
},
},
});
}
await authInstance.patch(`/sight/${this.sight.common.id}`, {
...this.sight.common,
translations: {
name: {
ru: (this.sight.ru.name || "").trim(),
en: (this.sight.en.name || "").trim(),
zh: (this.sight.zh.name || "").trim(),
},
short_name: {
ru: (this.sight.ru.short_name || "").trim(),
en: (this.sight.en.short_name || "").trim(),
zh: (this.sight.zh.short_name || "").trim(),
},
address: {
ru: this.sight.ru.address,
en: this.sight.en.address,
zh: this.sight.zh.address,
},
},
});
for (let index = 0; index < this.sight.ru.right.length; index++) {
const article = this.sight.ru.right[index];
if (article.id == 0 || article.id == null) {
continue;
}
await authInstance.patch(`/article/${article.id}`, {
translations: {
heading: {
ru: this.sight.ru.right[index].heading,
en: this.sight.en.right[index].heading,
zh: this.sight.zh.right[index].heading,
},
body: {
ru: this.sight.ru.right[index].body,
en: this.sight.en.right[index].body,
zh: this.sight.zh.right[index].body,
},
},
});
}
const articleIdsInObject = this.sight.ru.right.map((article) => ({
id: article.id,
}));
await authInstance.post(`/sight/${this.sight.common.id}/article/order`, {
articles: articleIdsInObject,
});
this.needLeaveAgree = false;
};
getLeftArticle = async (id: number) => {
const response = await languageInstance("ru").get(`/article/${id}`);
const responseEn = await languageInstance("en").get(`/article/${id}`);
const responseZh = await languageInstance("zh").get(`/article/${id}`);
const mediaIds = await authInstance.get(`/article/${id}/media`);
runInAction(() => {
this.sight.ru.left = {
heading: response.data.heading,
body: response.data.body,
media: mediaIds.data,
};
this.sight.en.left = {
heading: responseEn.data.heading,
body: responseEn.data.body,
media: mediaIds.data,
};
this.sight.zh.left = {
heading: responseZh.data.heading,
body: responseZh.data.body,
media: mediaIds.data,
};
});
};
deleteLeftArticle = async (id: number) => {
await authInstance.delete(`/article/${id}`);
runInAction(() => {
articlesStore.articles.ru = articlesStore.articles.ru.filter(
(article) => article.id !== id
);
articlesStore.articles.en = articlesStore.articles.en.filter(
(article) => article.id !== id
);
articlesStore.articles.zh = articlesStore.articles.zh.filter(
(article) => article.id !== id
);
});
this.sight.common.left_article = 0;
this.sight.ru.left.heading = "";
this.sight.en.left.heading = "";
this.sight.zh.left.heading = "";
this.sight.ru.left.body = "";
this.sight.en.left.body = "";
this.sight.zh.left.body = "";
};
createLeftArticle = async () => {
const ruName = (this.sight.ru.name || "").trim();
const enName = (this.sight.en.name || "").trim();
const zhName = (this.sight.zh.name || "").trim();
const hasAnyName = !!(ruName || enName || zhName);
const response = await languageInstance("ru").post(`/article`, {
heading: hasAnyName ? ruName : "",
body: "",
});
this.sight.common.left_article = response.data.id;
await languageInstance("en").patch(
`/article/${this.sight.common.left_article}`,
{
heading: hasAnyName ? enName : "",
body: "",
}
);
await languageInstance("zh").patch(
`/article/${this.sight.common.left_article}`,
{
heading: hasAnyName ? zhName : "",
body: "",
}
);
this.sight.ru.left.heading = hasAnyName ? ruName : "";
this.sight.en.left.heading = hasAnyName ? enName : "";
this.sight.zh.left.heading = hasAnyName ? zhName : "";
this.sight.ru.left.body = "";
this.sight.en.left.body = "";
this.sight.zh.left.body = "";
};
deleteMedia = async (article_id: number, media_id: string) => {
await authInstance.delete(`/article/${article_id}/media`, {
data: {
media_id: media_id,
},
});
this.sight.ru.left.media = this.sight.ru.left.media.filter(
(media) => media.id !== media_id
);
this.sight.en.left.media = this.sight.en.left.media.filter(
(media) => media.id !== media_id
);
this.sight.zh.left.media = this.sight.zh.left.media.filter(
(media) => media.id !== media_id
);
};
unlinkRightArticle = async (article_id: number) => {
await authInstance.delete(`/sight/${this.sight.common.id}/article`, {
data: {
article_id: article_id,
},
});
this.sight.ru.right = this.sight.ru.right.filter(
(article) => article.id !== article_id
);
this.sight.en.right = this.sight.en.right.filter(
(article) => article.id !== article_id
);
this.sight.zh.right = this.sight.zh.right.filter(
(article) => article.id !== article_id
);
};
deleteRightArticle = async (article_id: number) => {
this.sight.ru.right = this.sight.ru.right.filter(
(article) => article.id !== article_id
);
this.sight.en.right = this.sight.en.right.filter(
(article) => article.id !== article_id
);
this.sight.zh.right = this.sight.zh.right.filter(
(article) => article.id !== article_id
);
await authInstance.delete(`/article/${article_id}`);
};
uploadMediaOpen = false;
setUploadMediaOpen = (open: boolean) => {
this.uploadMediaOpen = open;
};
fileToUpload: File | null = null;
setFileToUpload = (file: File | null) => {
this.fileToUpload = file;
};
uploadMedia = async (
filename: string,
type: number,
file: File,
media_name?: string
) => {
const formData = new FormData();
formData.append("file", file);
formData.append("filename", filename);
if (media_name) {
formData.append("media_name", media_name);
}
formData.append("type", type.toString());
const response = await authInstance.post(`/media`, formData);
this.fileToUpload = null;
this.uploadMediaOpen = false;
mediaStore.getMedia();
return {
id: response.data.id,
filename: filename,
media_name: media_name,
media_type: type,
};
};
createLinkWithArticle = async (media: {
id: string;
filename: string;
media_name?: string;
media_type: number;
}) => {
await authInstance.post(
`/article/${this.sight.common.left_article}/media`,
{
media_id: media.id,
media_order: 1,
}
);
this.sight.ru.left.media.unshift({
id: media.id,
media_type: media.media_type,
filename: media.filename,
});
this.sight.en.left.media.unshift({
id: media.id,
media_type: media.media_type,
filename: media.filename,
});
this.sight.zh.left.media.unshift({
id: media.id,
media_type: media.media_type,
filename: media.filename,
});
};
unlinkPreviewMedia = async () => {
this.sight.common.preview_media = null;
};
linkPreviewMedia = async (mediaId: string) => {
this.sight.common.preview_media = mediaId;
};
linkArticle = async (article_id: number) => {
const response = await languageInstance("ru").get(`/article/${article_id}`);
const responseEn = await languageInstance("en").get(
`/article/${article_id}`
);
const responseZh = await languageInstance("zh").get(
`/article/${article_id}`
);
const mediaIds = await authInstance.get(`/article/${article_id}/media`);
runInAction(() => {
this.sight.ru.right.push({
id: article_id,
heading: response.data.heading,
body: response.data.body,
media: mediaIds.data,
});
this.sight.en.right.push({
id: article_id,
heading: responseEn.data.heading,
body: responseEn.data.body,
media: mediaIds.data,
});
this.sight.zh.right.push({
id: article_id,
heading: responseZh.data.heading,
body: responseZh.data.body,
media: mediaIds.data,
});
});
return article_id;
};
deleteRightArticleMedia = async (article_id: number, media_id: string) => {
await authInstance.delete(`/article/${article_id}/media`, {
data: {
media_id: media_id,
},
});
this.sight.ru.right = this.sight.ru.right.map((article) => {
if (article.id === article_id) {
article.media = article.media.filter((media) => media.id !== media_id);
}
return article;
});
this.sight.en.right = this.sight.en.right.map((article) => {
if (article.id === article_id) {
article.media = article.media.filter((media) => media.id !== media_id);
}
return article;
});
this.sight.zh.right = this.sight.zh.right.map((article) => {
if (article.id === article_id) {
article.media = article.media.filter((media) => media.id !== media_id);
}
return article;
});
};
createNewRightArticle = async () => {
const articleRuData = {
heading: "Новый заголовок (RU)",
body: "Новый текст (RU)",
};
const articleEnData = {
heading: "New Heading (EN)",
body: "New Text (EN)",
};
const articleZhData = {
heading: "Новый заголовок (ZH)",
body: "Новый текст (ZH)",
};
const articleId = await authInstance.post("/article", {
translations: {
heading: {
ru: articleRuData.heading,
en: articleEnData.heading,
zh: articleZhData.heading,
},
body: {
ru: articleRuData.body,
en: articleEnData.body,
zh: articleZhData.body,
},
},
});
const { id } = articleId.data;
await authInstance.post(`/sight/${this.sight.common.id}/article`, {
article_id: id,
page_num: this.sight.ru.right.length + 1,
});
this.sight.ru.right.push({
id: id,
heading: articleRuData.heading,
body: articleRuData.body,
media: [],
});
this.sight.en.right.push({
id: id,
heading: articleEnData.heading,
body: articleEnData.body,
media: [],
});
this.sight.zh.right.push({
id: id,
heading: articleZhData.heading,
body: articleZhData.body,
media: [],
});
runInAction(() => {
articlesStore.articles.ru.push({
id: id,
heading: articleRuData.heading,
body: articleRuData.body,
service_name: articleRuData.heading,
});
articlesStore.articles.en.push({
id: id,
heading: articleEnData.heading,
body: articleEnData.body,
service_name: articleEnData.heading,
});
articlesStore.articles.zh.push({
id: id,
heading: articleZhData.heading,
body: articleZhData.body,
service_name: articleZhData.heading,
});
});
return id;
};
createLinkWithRightArticle = async (
media: {
id: string;
filename: string;
media_name?: string;
media_type: number;
},
article_id: number
) => {
await authInstance.post(`/article/${article_id}/media`, {
media_id: media.id,
media_order: 1,
});
this.sight.ru.right = this.sight.ru.right.map((article) => {
if (article.id === article_id) {
article.media.unshift({
id: media.id,
media_type: media.media_type,
filename: media.filename,
});
}
return article;
});
this.sight.en.right = this.sight.en.right.map((article) => {
if (article.id === article_id) {
article.media.unshift({
id: media.id,
media_type: media.media_type,
filename: media.filename,
});
}
return article;
});
this.sight.zh.right = this.sight.zh.right.map((article) => {
if (article.id === article_id) {
article.media.unshift({
id: media.id,
media_type: media.media_type,
filename: media.filename,
});
}
return article;
});
};
updateRightArticleInfo = (
index: number,
language: Language,
heading: string,
body: string
) => {
this.sight[language].right[index].heading = heading;
this.sight[language].right[index].body = body;
};
updateRightArticles = async (articles: any[]) => {
const articlesIds = articles.map((article) => article.id);
const sortArticles = (existing: any[]) => {
const articleMap = new Map(
existing.map((article) => [article.id, article])
);
return articlesIds
.map((id) => articleMap.get(id))
.filter(
(article): article is (typeof existing)[number] =>
article !== undefined
);
};
this.sight.ru.right = sortArticles(this.sight.ru.right);
this.sight.en.right = sortArticles(this.sight.en.right);
this.sight.zh.right = sortArticles(this.sight.zh.right);
this.needLeaveAgree = true;
};
needLeaveAgree = false;
setNeedLeaveAgree = (need: boolean) => {
this.needLeaveAgree = need;
};
}
export const editSightStore = new EditSightStore();