changed component folders
This commit is contained in:
Mamalizz
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<PaginationRoot>
|
||||
<PaginationList v-slot="{ items }">
|
||||
<PaginationFirst />
|
||||
<PaginationPrev />
|
||||
<template v-for="(page, index) in items">
|
||||
<PaginationListItem v-if="page.type === 'page'" :key="index" />
|
||||
<PaginationEllipsis v-else :key="page.type" :index="index">
|
||||
…
|
||||
</PaginationEllipsis>
|
||||
</template>
|
||||
<PaginationNext />
|
||||
<PaginationLast />
|
||||
</PaginationList>
|
||||
</PaginationRoot>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
// types
|
||||
|
||||
import ColorCircle from "~/components/ui/ColorCircle.vue";
|
||||
import ColorCircle from "~/components/global/ColorCircle.vue";
|
||||
|
||||
type Props = {
|
||||
colors: string[];
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
// import
|
||||
|
||||
import Tag from "~/components/ui/Tag.vue";
|
||||
import Rate from "~/components/ui/Rate.vue";
|
||||
import ColorCircle from "~/components/ui/ColorCircle.vue";
|
||||
import Tag from "~/components/global/Tag.vue";
|
||||
import Rate from "~/components/global/Rate.vue";
|
||||
import ColorCircle from "~/components/global/ColorCircle.vue";
|
||||
|
||||
// types
|
||||
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useMutation } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type CreateBranchRequest = {
|
||||
name: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
// methods
|
||||
|
||||
export const handleCreateBranch = async ({ name, description }: CreateBranchRequest) => {
|
||||
const payload: CreateBranchRequest = {
|
||||
name,
|
||||
description,
|
||||
};
|
||||
|
||||
await axios.post<CreateBranchRequest>(API_ENDPOINTS.branch.createBranch, payload);
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useCreateBranch = () => {
|
||||
return useMutation({
|
||||
mutationFn: (data: CreateBranchRequest) => handleCreateBranch(data),
|
||||
});
|
||||
};
|
||||
|
||||
export default useCreateBranch;
|
||||
@@ -1,54 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
|
||||
import type { ComputedRef } from "vue";
|
||||
|
||||
// types
|
||||
|
||||
export type GetBranchResponse = Branch;
|
||||
|
||||
// methods
|
||||
|
||||
export const handleGetBranch = async (
|
||||
branchId: string,
|
||||
page: string | undefined,
|
||||
folderId: string | undefined,
|
||||
sort: string | undefined,
|
||||
signal: AbortSignal
|
||||
) => {
|
||||
|
||||
const { data } = await axios.get<GetBranchResponse>(`${API_ENDPOINTS.branch.get}/${branchId}`, {
|
||||
signal,
|
||||
params: {
|
||||
sort_by: sort,
|
||||
folder_id: folderId,
|
||||
offset: ((!!page ? Number(page) : 1) * 20) - 20,
|
||||
limit: 20
|
||||
}
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useGetBranch = (
|
||||
branchId: ComputedRef<string>,
|
||||
page: ComputedRef<string | undefined>,
|
||||
folderId: ComputedRef<string | undefined>,
|
||||
sort: ComputedRef<string | undefined>
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: [QUERY_KEYS.branch, branchId, page, folderId, sort],
|
||||
queryFn: ({ signal }) => handleGetBranch(
|
||||
branchId.value,
|
||||
page.value,
|
||||
folderId.value,
|
||||
sort.value,
|
||||
signal
|
||||
)
|
||||
});
|
||||
};
|
||||
|
||||
export default useGetBranch;
|
||||
@@ -1,29 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type GetBranchesResponse = Branch[];
|
||||
|
||||
// methods
|
||||
|
||||
export const handleGetBranches = async () => {
|
||||
const { data } = await axios.get<GetBranchesResponse>(`${API_ENDPOINTS.branch.getAll}`);
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useGetBranches = () => {
|
||||
return useQuery({
|
||||
staleTime: 60 * 1000,
|
||||
queryKey: [QUERY_KEYS.branches],
|
||||
queryFn: () => handleGetBranches()
|
||||
});
|
||||
};
|
||||
|
||||
export default useGetBranches;
|
||||
@@ -1,31 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type GetUserBranchesResponse = Branch[];
|
||||
|
||||
// methods
|
||||
|
||||
export const handleGetUserBranches = async () => {
|
||||
const { data } = await axios.get<GetUserBranchesResponse>(
|
||||
`${API_ENDPOINTS.branch.getUserBranches}`
|
||||
);
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useGetUserBranches = () => {
|
||||
return useQuery({
|
||||
staleTime: 60 * 1000,
|
||||
queryKey: [QUERY_KEYS.userBranches],
|
||||
queryFn: () => handleGetUserBranches(),
|
||||
});
|
||||
};
|
||||
|
||||
export default useGetUserBranches;
|
||||
@@ -1,115 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { QueryClient, useMutation } from "@tanstack/vue-query";
|
||||
import type { InfiniteData } from "@tanstack/vue-query";
|
||||
import { API_ENDPOINTS, MUTATION_KEYS, QUERY_KEYS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type CreateChatMessageRequest = {
|
||||
productId: string | number;
|
||||
new_message: string;
|
||||
};
|
||||
|
||||
export type CreateChatMessageResponse = Chat[]
|
||||
|
||||
const useCreateChatMessage = (queryClient: QueryClient) => {
|
||||
|
||||
// state
|
||||
|
||||
const { $axios: axios } = useNuxtApp();
|
||||
|
||||
// method
|
||||
|
||||
const handleCreateChatMessage = async (variables: CreateChatMessageRequest) => {
|
||||
|
||||
const { data } = await axios.post<CreateChatMessageResponse>(`${API_ENDPOINTS.chat.new_message}/${variables.productId}`, variables);
|
||||
return data;
|
||||
};
|
||||
|
||||
return useMutation({
|
||||
mutationKey: [MUTATION_KEYS.create_chat],
|
||||
mutationFn: (variables: CreateChatMessageRequest) => handleCreateChatMessage(variables),
|
||||
onMutate: (newMessage) => {
|
||||
const prevData = queryClient.getQueriesData({ queryKey: [QUERY_KEYS.chat] });
|
||||
|
||||
queryClient.setQueryData<InfiniteData<ApiPaginated<Chat>>>([QUERY_KEYS.chat], (oldData) => {
|
||||
const lastPage = oldData!.pages[oldData!.pages.length - 1];
|
||||
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
count: lastPage.count,
|
||||
next: lastPage.next,
|
||||
previous: lastPage.previous,
|
||||
results: [
|
||||
{
|
||||
id: Date.now(),
|
||||
content: newMessage.new_message,
|
||||
sender: "user"
|
||||
}
|
||||
]
|
||||
},
|
||||
...oldData!.pages
|
||||
],
|
||||
pageParams: [
|
||||
...oldData!.pageParams,
|
||||
{
|
||||
limit: 10,
|
||||
offset: 0
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
return { prevData: prevData ? prevData[0][1] : undefined };
|
||||
},
|
||||
onSuccess: (response) => {
|
||||
|
||||
queryClient.setQueryData<InfiniteData<ApiPaginated<Chat>>>([QUERY_KEYS.chat], (oldData) => {
|
||||
if (oldData) {
|
||||
const lastPage = oldData!.pages[oldData!.pages.length - 1];
|
||||
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
count: lastPage.count,
|
||||
next: lastPage.next,
|
||||
previous: lastPage.previous,
|
||||
results: {
|
||||
...response[0],
|
||||
id: Date.now()
|
||||
}
|
||||
},
|
||||
...oldData!.pages
|
||||
],
|
||||
pageParams: [
|
||||
...oldData!.pageParams,
|
||||
{
|
||||
limit: 10,
|
||||
offset: 0
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
return oldData;
|
||||
});
|
||||
|
||||
},
|
||||
onError: (err, newMessage, context) => {
|
||||
if (context) {
|
||||
queryClient.setQueryData(
|
||||
[QUERY_KEYS.chat],
|
||||
context.prevData
|
||||
);
|
||||
}
|
||||
},
|
||||
onSettled: (newMessage) => {
|
||||
queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.chat] });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export default useCreateChatMessage;
|
||||
@@ -1,62 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useInfiniteQuery } from "@tanstack/vue-query";
|
||||
import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type GetBranchResponse = ApiPaginated<Chat>;
|
||||
|
||||
const useGetBranch = (
|
||||
productId: string | number,
|
||||
enabled: Ref<boolean>
|
||||
) => {
|
||||
|
||||
// state
|
||||
|
||||
const { $axios: axios } = useNuxtApp();
|
||||
|
||||
// method
|
||||
|
||||
const handleGetChat = async ({ productId, limit, offset }: {
|
||||
productId: number | string,
|
||||
limit: number,
|
||||
offset: number
|
||||
}) => {
|
||||
|
||||
const { data } = await axios.get<GetBranchResponse>(`${API_ENDPOINTS.chat.messages}/${productId}`, {
|
||||
params: {
|
||||
offset,
|
||||
limit
|
||||
},
|
||||
headers: {
|
||||
Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoyMTY3ODE2OTAwLCJpYXQiOjE3MzU4MTY5MDAsImp0aSI6ImQwN2E2Y2Y2NzgwZjRlNTE5NWIzOGQxMTAzYzU4NDQ3IiwidXNlcl9pZCI6NX0.slwd7ZSV7nUXEuDTYwwHUOo9ekCefwEEL4kVv2vSTFo`
|
||||
}
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
return useInfiniteQuery({
|
||||
enabled,
|
||||
queryKey: [QUERY_KEYS.chat],
|
||||
initialPageParam: {
|
||||
limit: 10,
|
||||
offset: 0
|
||||
},
|
||||
queryFn: ({ pageParam }) => handleGetChat({
|
||||
limit: pageParam.limit,
|
||||
offset: pageParam.offset,
|
||||
productId: productId
|
||||
}),
|
||||
getNextPageParam: (lastPage, pages) => {
|
||||
if (!lastPage.next) return undefined;
|
||||
|
||||
return {
|
||||
limit: 10,
|
||||
offset: pages.length * 10
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export default useGetBranch;
|
||||
@@ -1,45 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useMutation } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type AddDocRequest = {
|
||||
name: string,
|
||||
parent?: string,
|
||||
branch: string | undefined,
|
||||
type: {
|
||||
title: "File" | "Folder",
|
||||
icon: "bi:folder" | "bi:file-earmark"
|
||||
},
|
||||
content: File | undefined
|
||||
};
|
||||
|
||||
// methods
|
||||
|
||||
export const handleAddDoc = async (variables: AddDocRequest & { updateUploadProgress: (p: number) => void }) => {
|
||||
const { data } = await axios.post<AddDocRequest>(`${API_ENDPOINTS.branch.getDoc}/`, {
|
||||
...variables,
|
||||
type: variables.type.title.toLocaleLowerCase()
|
||||
}, {
|
||||
onUploadProgress: (progressEvent) => {
|
||||
variables.updateUploadProgress(progressEvent.progress!);
|
||||
},
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data"
|
||||
}
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useAddDoc = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: AddDocRequest & { updateUploadProgress: (p: number) => void }) => handleAddDoc(variables)
|
||||
});
|
||||
};
|
||||
|
||||
export default useAddDoc;
|
||||
@@ -1,27 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useMutation } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type DeleteDocRequest = {
|
||||
id: number
|
||||
};
|
||||
|
||||
// methods
|
||||
|
||||
export const handleDeleteDoc = async ({ id }: { id: string | undefined }) => {
|
||||
await axios.delete<DeleteDocRequest>(`${API_ENDPOINTS.branch.getDoc}/${id}`);
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useDeleteDoc = (id: Ref<string | undefined>) => {
|
||||
return useMutation({
|
||||
mutationFn: () => handleDeleteDoc({ id: id.value })
|
||||
});
|
||||
};
|
||||
|
||||
export default useDeleteDoc;
|
||||
@@ -1,29 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useMutation } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type EditDocRequest = {
|
||||
id: number
|
||||
};
|
||||
|
||||
// methods
|
||||
|
||||
export const handleEditDoc = async ({ id, name }: { id: string | undefined, name: string | undefined }) => {
|
||||
await axios.patch<EditDocRequest>(`${API_ENDPOINTS.branch.getDoc}/${id}`, { name });
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useEditDoc = (id: Ref<string | undefined>) => {
|
||||
return useMutation({
|
||||
mutationFn: ({ name }: { name: Ref<string | undefined> }) => {
|
||||
return handleEditDoc({ id: id.value, name: name.value });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export default useEditDoc;
|
||||
@@ -1,33 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type GetDocResponse = DocumentStructure;
|
||||
|
||||
// methods
|
||||
|
||||
export const handleGetDoc = async (id : string | undefined) => {
|
||||
const { data } = await axios.get<GetDocResponse>(`${API_ENDPOINTS.branch.getDoc}/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useGetDoc = (id: ComputedRef<string | undefined>) => {
|
||||
|
||||
const enabled = computed(() => {
|
||||
return !!id.value
|
||||
});
|
||||
|
||||
return useQuery({
|
||||
enabled,
|
||||
queryKey: [QUERY_KEYS.document, id],
|
||||
queryFn: () => handleGetDoc(id.value)
|
||||
});
|
||||
};
|
||||
|
||||
export default useGetDoc;
|
||||
@@ -1,32 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useMutation } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type MoveDocRequest = {
|
||||
itemsToMove: number[] | string[],
|
||||
parent: number | string
|
||||
};
|
||||
|
||||
// methods
|
||||
|
||||
export const handleMoveDoc = async ({ itemsToMove, parent }: MoveDocRequest) => {
|
||||
const apiUrl = `${API_ENDPOINTS.branch.moveDoc}?new_parent_id=${parent}&${itemsToMove.map(i => `patch_list=${i}&`)}`
|
||||
const splittedUrl = apiUrl.split("");
|
||||
splittedUrl.pop()
|
||||
|
||||
await axios.patch<MoveDocRequest>(splittedUrl.join("").replaceAll(",", ""));
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useMoveDoc = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: MoveDocRequest) => handleMoveDoc(variables)
|
||||
});
|
||||
};
|
||||
|
||||
export default useMoveDoc;
|
||||
@@ -1,40 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useMutation } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS } from "~/constants";
|
||||
|
||||
// types
|
||||
|
||||
export type ReplyDocRequest = {
|
||||
user_id: number;
|
||||
message: string;
|
||||
reply_id: number;
|
||||
};
|
||||
|
||||
export type ReplyDocResponse = {
|
||||
chat_id: number;
|
||||
};
|
||||
|
||||
// methods
|
||||
|
||||
export const handleReplyDoc = async ({ user_id, message, reply_id }: ReplyDocRequest) => {
|
||||
const payload = {
|
||||
user_id,
|
||||
message,
|
||||
item_id: reply_id,
|
||||
};
|
||||
|
||||
const { data } = await axios.post<ReplyDocResponse>(API_ENDPOINTS.branch.replyDoc, payload);
|
||||
return data;
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useReplyDoc = () => {
|
||||
return useMutation({
|
||||
mutationFn: (data: ReplyDocRequest) => handleReplyDoc(data),
|
||||
});
|
||||
};
|
||||
|
||||
export default useReplyDoc;
|
||||
@@ -1,78 +0,0 @@
|
||||
// imports
|
||||
|
||||
import { useInfiniteQuery } from "@tanstack/vue-query";
|
||||
import axios from "~/configs/axios.config";
|
||||
import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
|
||||
import type { ComputedRef } from "vue";
|
||||
|
||||
// types
|
||||
|
||||
export type SearchFileResponse = Branch;
|
||||
|
||||
type HandlerProps = typeof initialPageParam & {
|
||||
signal: AbortSignal,
|
||||
search: string,
|
||||
id: number | undefined;
|
||||
sort: string | undefined;
|
||||
}
|
||||
|
||||
// state
|
||||
|
||||
const initialPageParam = {
|
||||
limit: 10,
|
||||
offset: 0
|
||||
};
|
||||
|
||||
// methods
|
||||
|
||||
export const handleSearchFile = async ({ search, offset, limit, id, signal, sort }: HandlerProps) => {
|
||||
const { data } = await axios.get<SearchFileResponse>(`${API_ENDPOINTS.branch.get}/${id}`, {
|
||||
params: {
|
||||
offset,
|
||||
limit,
|
||||
search,
|
||||
sort_by: sort
|
||||
},
|
||||
signal
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
// composable
|
||||
|
||||
const useSearchFile = (search: Ref<string>, id: Ref<number | undefined>, sort: ComputedRef<string | undefined>) => {
|
||||
|
||||
const enabled = computed(() => {
|
||||
return search.value.trim() != "" && !!id.value;
|
||||
});
|
||||
|
||||
return useInfiniteQuery({
|
||||
enabled,
|
||||
retry: false,
|
||||
refetchOnMount: false,
|
||||
refetchOnWindowFocus: false,
|
||||
queryKey: [QUERY_KEYS.searchFile, search, id, sort],
|
||||
queryFn: ({ pageParam, signal }) => handleSearchFile({
|
||||
...pageParam,
|
||||
signal,
|
||||
search: search.value,
|
||||
sort: sort.value,
|
||||
id: id.value
|
||||
}),
|
||||
initialPageParam,
|
||||
getNextPageParam: (lastPage, pages) => {
|
||||
const page = pages.length + 1;
|
||||
|
||||
const limit = initialPageParam.limit;
|
||||
|
||||
const nextPageParams = {
|
||||
offset: page * limit - limit,
|
||||
limit
|
||||
};
|
||||
|
||||
return lastPage?.structure.next ? nextPageParams : undefined;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export default useSearchFile;
|
||||
Reference in New Issue
Block a user