Skip to content

Commit 88fd2e9

Browse files
NovoutNovout
committed
feat!: requests implementation to backend
1 parent 05b88e9 commit 88fd2e9

9 files changed

Lines changed: 198 additions & 35 deletions

File tree

‎packages/app/src/components/page/editor/header/items/EditorBaseHeaderProject.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@
3030
:text="t('editor.bar.project.save')"
3131
@action="onSaveProject"
3232
/>
33+
<EditorHeaderItem
34+
v-if="PROJECT.name !== env.projectEmpty() && AUTH.user"
35+
:text="t('editor.bar.project.save')"
36+
@action="onSaveProjectInCloud"
37+
/>
3338
<EditorHeaderItemDiv v-if="PROJECT.name !== env.projectEmpty()" />
3439
<EditorHeaderItem
3540
v-if="
@@ -70,18 +75,46 @@
7075
import { useEnv } from '@/use/env'
7176
import { useI18n } from 'vue-i18n'
7277
import { useLocalStorage } from '@/use/storage/local'
78+
import { useAuthStore } from '@/store/auth'
79+
import { useContextStore } from '@/store/context'
80+
import { useContent } from '@/use/content'
81+
import { useVaultStore } from '@/store/vault'
82+
import { useToast } from 'vue-toastification'
83+
import { nextTick } from 'vue'
7384
7485
const ABSOLUTE = useAbsoluteStore()
7586
const PROJECT = useProjectStore()
87+
const CONTEXT = useContextStore()
88+
const VAULT = useVaultStore()
89+
const AUTH = useAuthStore()
7690
7791
const project = useProject()
7892
const env = useEnv()
7993
const local = useLocalStorage()
94+
const content = useContent()
95+
const toast = useToast()
8096
const { t } = useI18n()
8197
8298
const onSaveProject = () => {
8399
if (!confirm(t('editor.window.saveLocal'))) return
84100
85101
local.onSaveProject()
86102
}
103+
104+
const onSaveProjectInCloud = () => {
105+
local.onSaveProject().then(async () => {
106+
await nextTick
107+
108+
fetch(`${env.api()}/library/${AUTH.user.id}`, {
109+
body: new URLSearchParams({ title: CONTEXT.title, content: JSON.stringify(content.get()) })
110+
}).then((res) => res.json())
111+
.then(( { library }) => {
112+
VAULT.libraries.push(library)
113+
114+
toast.success(t('backend.save.successSave'))
115+
}).catch(() => {
116+
toast.error(t('backend.save.successError'))
117+
})
118+
})
119+
}
87120
</script>

‎packages/app/src/components/page/editor/header/items/EditorBaseHeaderUser.vue‎

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<Button @click="open = !open" class="flex justify-center items-center rounded-full w-8">
3+
<Button @click="onOpen" class="flex justify-center items-center rounded-full w-8">
44
<div class="rounded-full wb-icon w-8 shadow-xl">
55
<IconUser class="h-8 w-8" />
66
</div>
@@ -13,13 +13,14 @@
1313
<div class="flex w-full justify-end">
1414
<Button @click="open = !open" class="flex justify-center items-center rounded-full w-8">
1515
<div class="rounded-full wb-icon w-8 shadow-xl">
16-
<IconClose class="h-8 w-8" />
16+
<IconClose class="h-6 w-6" />
1717
</div>
1818
</Button>
1919
</div>
2020
<h4 class="font-poppins">{{ t('backend.title') }}</h4>
21-
<InputText :placeholder="t('backend.email')" class="bg-theme-background-3 hover:bg-theme-background-1 px-3 py-1 rounded-full" v-model="setter.email" />
22-
<InputText :placeholder="t('backend.password')" class="bg-theme-background-3 hover:bg-theme-background-1 px-3 py-1 rounded-full" v-model="setter.password" />
21+
<InputText :placeholder="t('backend.name')" class="bg-theme-background-3 hover:bg-theme-background-1 px-3 py-1 rounded-full" v-model="setter.name" />
22+
<InputText type="email" :placeholder="t('backend.email')" class="bg-theme-background-3 hover:bg-theme-background-1 px-3 py-1 rounded-full" v-model="setter.email" />
23+
<InputText type="password" :placeholder="t('backend.password')" class="bg-theme-background-3 hover:bg-theme-background-1 px-3 py-1 rounded-full" v-model="setter.password" />
2324
<Button @click="onLoad" class="bg-theme-background-3 text-md hover:bg-theme-background-4">{{ t('backend.start') }}</Button>
2425
</div>
2526
<router-link to="/terms-of-use" class="font-bold pt-10 cursor-pointer">{{
@@ -30,26 +31,77 @@
3031
t('editor.bar.help.privacy')
3132
}}</router-link>
3233
</div>
34+
<div
35+
v-else-if="AUTH.user && all"
36+
class="wb-text bg-theme-background-2 p-5 w-full mt-30 gap-5 text-xs flex flex-col text-center items-center justify-center"
37+
>
38+
<div class="flex mt-10 p-5 flex-col gap-8 w-full">
39+
<div class="flex w-full justify-end items-center">
40+
<div @click="onClose" class="rounded-full wb-icon w-8 shadow-xl">
41+
<IconClose class="h-6 w-6" />
42+
</div>
43+
</div>
44+
<h2 class="text-lg">{{ AUTH.user.name }}</h2>
45+
<h2 class="text-lg">{{ AUTH.user.email }}</h2>
46+
<h2 class="text-lg">Level {{ AUTH.user.level }} | {{ AUTH.user.acc }} XP</h2>
47+
</div>
48+
</div>
3349
</div>
3450
</template>
3551

3652
<script setup lang="ts">
3753
import { useAuthStore } from '@/store/auth'
54+
import { useEnv } from '@/use/env'
3855
import { reactive, ref } from 'vue'
3956
import { useI18n } from 'vue-i18n'
57+
import { useToast } from 'vue-toastification'
4058
4159
const { t } = useI18n()
60+
const toast = useToast()
4261
4362
const AUTH = useAuthStore()
4463
4564
const setter = reactive({
65+
name: '',
4666
email: '',
4767
password: ''
4868
})
69+
70+
const env = useEnv()
4971
const open = ref(false)
72+
const all = ref(true)
5073
51-
const onLoad = () => {
74+
const onClose = () => {
5275
open.value = false
53-
// AUTH.user = payload
76+
all.value = false
77+
}
78+
79+
const onOpen = () => {
80+
open.value = true
81+
all.value = true
82+
}
83+
84+
const onLoad = () => {
85+
fetch(`${env.api()}/login`, { method: 'POST', body: new URLSearchParams({ name: setter.name, email: setter.email, password: setter.password })})
86+
.then((res) => res.json())
87+
.then(({ user }) => {
88+
AUTH.user = user
89+
90+
open.value = false
91+
}).catch(() => {
92+
fetch(`${env.api()}/user`, { method: 'GET', body: new URLSearchParams({ email: setter.email, password: setter.password })})
93+
.then((res) => res.json())
94+
.then(({ user }) => {
95+
AUTH.user = user
96+
97+
open.value = false
98+
99+
toast.success(t('backend.getUserSuccess'))
100+
}).catch(() => {
101+
toast.error(t('backend.getUserError'))
102+
})
103+
}).catch(() => {
104+
toast.error(t('backend.getUserError'))
105+
})
54106
}
55107
</script>

‎packages/app/src/components/page/editor/vault/EditorVaultList.vue‎

Lines changed: 49 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
<template>
22
<section class="flex font-poppins flex-col gap-3 w-60 overflow-y-auto">
3-
<div v-for="(project, key) in projects" :key="key" class="flex-col p-2 text-white w-full transition-colors gap-5 hover:bg-theme-background-3">
3+
<div v-if="AUTH.user" v-for="(project, key) in VAULT.libraries" :key="key" class="flex-col p-2 text-white w-full transition-colors gap-5 hover:bg-theme-background-3">
44
<div class="flex gap-5 w-full">
55
<p class="truncate">{{ project.title }}</p>
6-
<p class="truncate">{{ project.size }}</p>
76
</div>
8-
<div class="flex justify-between w-full">
9-
<p>Level {{ project.level }}</p>
7+
<div class="flex justify-end w-full">
108
<div class="flex gap-3">
11-
<IconDelete @click="backend.deleteProject(project.title)" class="wb-icon w-5 h-5"></IconDelete>
12-
<IconEnter @click="backend.getProject(project.title)" class="wb-icon w-5 h-5"></IconEnter>
9+
<IconDelete @click="onDeleteProject(project.user_id)" class="wb-icon w-5 h-5"></IconDelete>
10+
<IconEnter @click="onLoadProject(project.user_id)" class="wb-icon w-5 h-5"></IconEnter>
1311
</div>
1412
</div>
1513
</div>
@@ -18,24 +16,58 @@
1816

1917
<script setup lang="ts">
2018
import { useAuthStore } from '@/store/auth';
21-
import { useBackend } from '@/use/backend';
22-
import type { AuthItem } from 'better-write-types';
23-
import { onMounted, ref } from 'vue';
19+
import { useVaultStore } from '@/store/vault';
20+
import { useEnv } from '@/use/env';
21+
import { useProject } from '@/use/project';
22+
import { onMounted } from 'vue';
2423
import { useI18n } from 'vue-i18n';
24+
import { useToast } from 'vue-toastification';
2525
2626
const AUTH = useAuthStore()
27+
const VAULT = useVaultStore()
2728
28-
const backend = useBackend()
29+
const project = useProject()
30+
const toast = useToast()
2931
const { t } = useI18n()
32+
const env = useEnv()
3033
31-
// TODO: Backend here
32-
const projects = ref<AuthItem[]>([{
33-
title: 'Test',
34-
size: '1.6KiB',
35-
level: 2,
36-
}])
3734
3835
onMounted(() => {
39-
//projects.value = backend.getLibraries('0')
36+
if(VAULT.libraries.length === 0) {
37+
fetch(`${env.api()}/libraries/${AUTH.user.id}`, { method: 'GET' })
38+
.then(res => res.json())
39+
.then((libraries) => {
40+
VAULT.libraries = libraries
41+
42+
toast.success(t('backend.vaultLoadSuccess'))
43+
})
44+
.catch(() => {
45+
toast.error(t('backend.vaultloadError'))
46+
})
47+
}
4048
})
49+
50+
const onDeleteProject = (id:number) => {
51+
fetch(`${env.api()}/library/${id}`, { method: 'DELETE' })
52+
.then(res => res.json())
53+
.then(({ library }) => {
54+
VAULT.libraries = VAULT.libraries.filter(({ id }) => id !== library.id)
55+
toast.error(t('backend.vault.deleteSuccess'))
56+
})
57+
.catch(() => {
58+
toast.error(t('backend.vault.deleteError'))
59+
})
60+
}
61+
62+
const onLoadProject = (id:number) => {
63+
fetch(`${env.api()}/library/${id}`, { method: 'GET' })
64+
.then(res => res.json())
65+
.then(({ vault }) => {
66+
console.log(vault)
67+
project.onLoadProject(vault.content, true).then(() => {})
68+
})
69+
.catch(() => {
70+
toast.error(t('backend.vault.loadVaultError'))
71+
})
72+
}
4173
</script>

‎packages/app/src/store/vault.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia'
44
export const useVaultStore = defineStore('vault', {
55
state: (): VaultState => {
66
return {
7-
documents: undefined,
7+
libraries: []
88
}
99
},
1010
})

‎packages/app/src/use/content.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useDOCXStore } from "@/store/docx"
2+
import { useEditorStore } from "@/store/editor"
3+
import { usePDFStore } from "@/store/pdf"
4+
import { useProjectStore } from "@/store/project"
5+
import { useShortcutsStore } from "@/store/shortcuts"
6+
7+
export const useContent = () => {
8+
const PROJECT = useProjectStore()
9+
const EDITOR = useEditorStore()
10+
const PDF = usePDFStore()
11+
const DOCX = useDOCXStore()
12+
const SHORTCUTS = useShortcutsStore()
13+
14+
const get = () => {
15+
return {
16+
id: undefined,
17+
project: PROJECT.$state,
18+
editor: EDITOR.$state,
19+
pdf: {
20+
styles: PDF.styles,
21+
fonts: [],
22+
normalize: {},
23+
},
24+
docx: DOCX.$state,
25+
shortcuts: SHORTCUTS.$state
26+
}
27+
}
28+
29+
return { get }
30+
}

‎packages/languages/src/en-US.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,16 @@ export default {
33
title: 'Log in or lose your account!',
44
email: 'Email...',
55
password: 'Password...',
6-
start: 'Log in'
6+
start: 'Log in',
7+
loadSuccess: 'Loaded successfully!',
8+
loadError: 'Error loading!',
9+
deleteSuccess: 'Deleted successfully!',
10+
deleteError: 'Error deleting!',
11+
loadVaultError: 'Error loading content!',
12+
vaultLoadSuccess: 'Successfully loading the content!',
13+
vaultloadError: 'Error loading content!!',
14+
getUserSuccess: 'Successfully loading your account!',
15+
getUserError: 'Error loading your account!'
716
},
817
account: {
918
common: {

‎packages/languages/src/pt-BR.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,16 @@ export default {
2323
title: 'Entre ou crie sua conta!',
2424
email: 'Email...',
2525
password: 'Senha...',
26-
start: 'Entrar'
26+
start: 'Entrar',
27+
loadSuccess: 'Carregado com ucesso!',
28+
loadError: 'Erro ao carregar!',
29+
deleteSuccess: 'Deletado com successo!',
30+
deleteError: 'Erro ao deletar!',
31+
loadVaultError: 'Erro ao carregar o conteúdo!',
32+
vaultLoadSuccess: 'Sucesso ao carregar o conteúdo!',
33+
vaultloadError: 'Erro ao carregar o conteudo!',
34+
getUserSuccess: 'Sucesso ao carregar sua conta!',
35+
getUserError: 'Erro ao carregar sua conta!'
2736
},
2837
editor: {
2938
new: {

‎packages/types/src/auth.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,4 @@ export interface AuthState {
66
account: {
77
project_id_activity: Maybe<number>,
88
},
9-
}
10-
11-
export interface AuthItem {
12-
title: string,
13-
size: string,
14-
level: number
159
}

‎packages/types/src/vault.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
import { ProjectState } from "./project";
2-
31
export interface VaultState {
4-
documents: ProjectState[]
2+
libraries: VaultLibrary[]
53
}
4+
5+
export interface VaultLibrary {
6+
id: number
7+
title: string
8+
user_id: number
9+
}

0 commit comments

Comments
 (0)