admin panel
This commit is contained in:
hamid zarghami
@@ -0,0 +1,376 @@
|
||||
import { create } from "zustand";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import {
|
||||
PersonalityStore,
|
||||
PersonalityDataType,
|
||||
SectionItemType,
|
||||
TextType,
|
||||
ButtonType,
|
||||
ImageType,
|
||||
SectionName,
|
||||
HorizontalAlignment,
|
||||
VerticalAlignment,
|
||||
} from "../types/Types";
|
||||
|
||||
export const usePersonalityStore = create<PersonalityStore>((set) => ({
|
||||
data: {
|
||||
header: { columnsCount: 0, items: [] },
|
||||
content: { columnsCount: 0, items: [] },
|
||||
footer: { columnsCount: 0, items: [] },
|
||||
},
|
||||
|
||||
activeSection: "",
|
||||
activeItemIndex: 0,
|
||||
|
||||
setActiveSection: (section: SectionName) =>
|
||||
set({ activeSection: section, activeItemIndex: 0 }),
|
||||
|
||||
setActiveItemIndex: (index: number) => set({ activeItemIndex: index }),
|
||||
|
||||
setColumnsCount: (
|
||||
sectionKey: keyof PersonalityDataType,
|
||||
columnsCount: number
|
||||
) =>
|
||||
set((state) => {
|
||||
const currentItems = state.data[sectionKey].items;
|
||||
const newItems = Array.from(
|
||||
{ length: columnsCount },
|
||||
(_, index) =>
|
||||
currentItems[index] || {
|
||||
id: uuidv4(),
|
||||
backgroundColor: "#ffffff",
|
||||
texts: [],
|
||||
buttons: [],
|
||||
images: [],
|
||||
alignment: HorizontalAlignment.CENTER,
|
||||
verticalAlignment: VerticalAlignment.MIDDLE,
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
columnsCount,
|
||||
items: newItems,
|
||||
},
|
||||
},
|
||||
activeItemIndex: 0,
|
||||
};
|
||||
}),
|
||||
|
||||
setItems: (sectionKey: keyof PersonalityDataType, items: SectionItemType[]) =>
|
||||
set((state) => ({
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items,
|
||||
},
|
||||
},
|
||||
})),
|
||||
|
||||
addItem: (
|
||||
sectionKey: keyof PersonalityDataType,
|
||||
item: Omit<SectionItemType, "id">
|
||||
) =>
|
||||
set((state) => ({
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: [...state.data[sectionKey].items, { ...item, id: uuidv4() }],
|
||||
},
|
||||
},
|
||||
})),
|
||||
|
||||
updateActiveItem: (updates: Partial<SectionItemType>) =>
|
||||
set((state) => {
|
||||
if (!state.activeSection) return state;
|
||||
|
||||
const sectionKey = state.activeSection as keyof PersonalityDataType;
|
||||
const items = state.data[sectionKey].items;
|
||||
const activeIndex = state.activeItemIndex;
|
||||
|
||||
if (activeIndex >= items.length) return state;
|
||||
|
||||
console.log("Updating active item:", {
|
||||
sectionKey,
|
||||
activeIndex,
|
||||
updates,
|
||||
});
|
||||
|
||||
const updatedItems = items.map((item, index) =>
|
||||
index === activeIndex ? { ...item, ...updates } : item
|
||||
);
|
||||
|
||||
return {
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: updatedItems,
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
|
||||
updateItem: (
|
||||
sectionKey: keyof PersonalityDataType,
|
||||
id: string,
|
||||
updates: Partial<SectionItemType>
|
||||
) =>
|
||||
set((state) => ({
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: state.data[sectionKey].items.map((item) =>
|
||||
item.id === id ? { ...item, ...updates } : item
|
||||
),
|
||||
},
|
||||
},
|
||||
})),
|
||||
|
||||
removeItem: (sectionKey: keyof PersonalityDataType, id: string) =>
|
||||
set((state) => ({
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: state.data[sectionKey].items.filter((item) => item.id !== id),
|
||||
},
|
||||
},
|
||||
})),
|
||||
|
||||
addText: (
|
||||
sectionKey: keyof PersonalityDataType,
|
||||
itemId: string,
|
||||
text: Omit<TextType, "id">
|
||||
) =>
|
||||
set((state) => ({
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: state.data[sectionKey].items.map((item) =>
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
texts: [...item.texts, { ...text, id: uuidv4() }],
|
||||
}
|
||||
: item
|
||||
),
|
||||
},
|
||||
},
|
||||
})),
|
||||
|
||||
addTextToActiveItem: (text: Omit<TextType, "id">) =>
|
||||
set((state) => {
|
||||
if (!state.activeSection) return state;
|
||||
|
||||
const sectionKey = state.activeSection as keyof PersonalityDataType;
|
||||
const items = state.data[sectionKey].items;
|
||||
const activeIndex = state.activeItemIndex;
|
||||
|
||||
if (activeIndex >= items.length) return state;
|
||||
|
||||
const updatedItems = items.map((item, index) =>
|
||||
index === activeIndex
|
||||
? {
|
||||
...item,
|
||||
texts: [...item.texts, { ...text, id: uuidv4() }],
|
||||
}
|
||||
: item
|
||||
);
|
||||
|
||||
return {
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: updatedItems,
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
|
||||
addButton: (
|
||||
sectionKey: keyof PersonalityDataType,
|
||||
itemId: string,
|
||||
button: Omit<ButtonType, "id">
|
||||
) =>
|
||||
set((state) => ({
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: state.data[sectionKey].items.map((item) =>
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
buttons: [...item.buttons, { ...button, id: uuidv4() }],
|
||||
}
|
||||
: item
|
||||
),
|
||||
},
|
||||
},
|
||||
})),
|
||||
|
||||
addButtonToActiveItem: (button: Omit<ButtonType, "id">) =>
|
||||
set((state) => {
|
||||
if (!state.activeSection) return state;
|
||||
|
||||
const sectionKey = state.activeSection as keyof PersonalityDataType;
|
||||
const items = state.data[sectionKey].items;
|
||||
const activeIndex = state.activeItemIndex;
|
||||
|
||||
if (activeIndex >= items.length) return state;
|
||||
|
||||
const updatedItems = items.map((item, index) =>
|
||||
index === activeIndex
|
||||
? {
|
||||
...item,
|
||||
buttons: [...item.buttons, { ...button, id: uuidv4() }],
|
||||
}
|
||||
: item
|
||||
);
|
||||
|
||||
return {
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: updatedItems,
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
|
||||
updateText: (
|
||||
sectionKey: keyof PersonalityDataType,
|
||||
itemId: string,
|
||||
textId: string,
|
||||
updates: Partial<TextType>
|
||||
) =>
|
||||
set((state) => ({
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: state.data[sectionKey].items.map((item) =>
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
texts: item.texts.map((text) =>
|
||||
text.id === textId ? { ...text, ...updates } : text
|
||||
),
|
||||
}
|
||||
: item
|
||||
),
|
||||
},
|
||||
},
|
||||
})),
|
||||
|
||||
updateButton: (
|
||||
sectionKey: keyof PersonalityDataType,
|
||||
itemId: string,
|
||||
buttonId: string,
|
||||
updates: Partial<ButtonType>
|
||||
) =>
|
||||
set((state) => ({
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: state.data[sectionKey].items.map((item) =>
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
buttons: item.buttons.map((button) =>
|
||||
button.id === buttonId ? { ...button, ...updates } : button
|
||||
),
|
||||
}
|
||||
: item
|
||||
),
|
||||
},
|
||||
},
|
||||
})),
|
||||
|
||||
addImage: (
|
||||
sectionKey: keyof PersonalityDataType,
|
||||
itemId: string,
|
||||
image: Omit<ImageType, "id">
|
||||
) =>
|
||||
set((state) => ({
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: state.data[sectionKey].items.map((item) =>
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
images: [...item.images, { ...image, id: uuidv4() }],
|
||||
}
|
||||
: item
|
||||
),
|
||||
},
|
||||
},
|
||||
})),
|
||||
|
||||
addImageToActiveItem: (image: Omit<ImageType, "id">) =>
|
||||
set((state) => {
|
||||
if (!state.activeSection) return state;
|
||||
|
||||
const sectionKey = state.activeSection as keyof PersonalityDataType;
|
||||
const items = state.data[sectionKey].items;
|
||||
const activeIndex = state.activeItemIndex;
|
||||
|
||||
if (activeIndex >= items.length) return state;
|
||||
|
||||
const updatedItems = items.map((item, index) =>
|
||||
index === activeIndex
|
||||
? {
|
||||
...item,
|
||||
images: [...item.images, { ...image, id: uuidv4() }],
|
||||
}
|
||||
: item
|
||||
);
|
||||
|
||||
return {
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: updatedItems,
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
|
||||
updateImage: (
|
||||
sectionKey: keyof PersonalityDataType,
|
||||
itemId: string,
|
||||
imageId: string,
|
||||
updates: Partial<ImageType>
|
||||
) =>
|
||||
set((state) => ({
|
||||
data: {
|
||||
...state.data,
|
||||
[sectionKey]: {
|
||||
...state.data[sectionKey],
|
||||
items: state.data[sectionKey].items.map((item) =>
|
||||
item.id === itemId
|
||||
? {
|
||||
...item,
|
||||
images: item.images.map((image) =>
|
||||
image.id === imageId ? { ...image, ...updates } : image
|
||||
),
|
||||
}
|
||||
: item
|
||||
),
|
||||
},
|
||||
},
|
||||
})),
|
||||
}));
|
||||
Reference in New Issue
Block a user