integrate user API

Tarhche · Apr 29, 2024 · 9e52ea4 · 9e52ea4
1 parent 154c614
commit 9e52ea4
Show file tree

Hide file tree

Showing 13 changed files with 358 additions and 184 deletions.
diff --git a/frontend/components/dashboard/sidebar.vue b/frontend/components/dashboard/sidebar.vue
@@ -21,7 +21,7 @@
 			</li>
 			<li class="border-top my-3"></li>
 			<li class="my-2">
-				<NuxtLink to="/dashboard" class="btn align-items-center rounded collapsed">
+				<NuxtLink to="/dashboard/profile" class="btn align-items-center rounded collapsed">
 					<span class="bi ms-2 fa fa-user"></span>
 					<span>پروفایل</span>
 				</NuxtLink>

diff --git a/frontend/components/editor.vue b/frontend/components/editor.vue
diff --git a/frontend/components/rich-editor.client.vue b/frontend/components/rich-editor.client.vue
@@ -0,0 +1,10 @@
+<template>
+    <ckeditor :editor="ClassicEditor" />
+</template>
+
+<script setup>
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
+const ckeditor = CKEditor.component
+</script>
diff --git a/frontend/composables/user.ts b/frontend/composables/user.ts
@@ -28,16 +28,47 @@ function userFetch<T> (url: string, options: UseFetchOptions<T> = {}) {
     return $fetch(url, defu(options, defaults))
 }
 
-function profile() {
-
+async function profile() {
+    return useUser().$fetch(
+		useApiUrlResolver().resolve("api/dashboard/profile"),
+		{
+            method: "GET",
+	    	lazy: true,
+    		headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+  		}
+	)
 }
 
-function updateProfile() {
-
+async function updateProfile(email:string, name?:string, username?:string, avatar?:string) {
+    return useUser().$fetch(
+		useApiUrlResolver().resolve("api/dashboard/profile"),
+		{
+            method: "PUT",
+	    	lazy: true,
+    		headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                email: email,
+                name: name,
+                username: username,
+                avatar: avatar,
+            }
+  		}
+	)
 }
 
-function updatePassword() {
-
+async function updatePassword(currentPassword:string, newPassword:string) {
+    return useUser().$fetch(
+		useApiUrlResolver().resolve("api/dashboard/password"),
+		{
+            method: "PUT",
+	    	lazy: true,
+    		headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                current_password: currentPassword,
+                new_password: newPassword,
+            }
+  		}
+	)
 }
 
 export function useUser() {

diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
@@ -1,9 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  build: {
-
-  },
   vite: {
     build: {
       cssCodeSplit: false,
@@ -24,7 +21,7 @@ export default defineNuxtConfig({
       }
     }
   },
-  modules: ['@vueuse/nuxt', "nuxt-tiptap-editor"],
+  modules: ['@vueuse/nuxt'],
   runtimeConfig: {
     internalApiBaseUrl: '',
     public: {

diff --git a/frontend/pages/dashboard/articles/create.vue b/frontend/pages/dashboard/articles/create.vue
@@ -38,8 +38,7 @@
 								</div>
 
 								<div class="form-floating mb-3">
-									<textarea :class="{ 'is-invalid': errors.body }" id="body" class="form-control" placeholder="متن اصلی مقاله" v-model="params.body" required></textarea>
-									<label for="body">متن اصلی مقاله</label>
+									<rich-editor :class="{ 'is-invalid': errors.body }" v-model="params.body" id="body" class="form-control" placeholder="متن اصلی مقاله" />
 									<div v-if="errors.body" class="invalid-feedback">
 										{{ errors.body }}
 									</div>

diff --git a/frontend/pages/dashboard/articles/edit/[uuid].vue b/frontend/pages/dashboard/articles/edit/[uuid].vue
@@ -35,9 +35,8 @@
 									</div>
 								</div>
 
-								<div class="form-floating mb-3">
-									<textarea :class="{ 'is-invalid': errors.body }" id="body" class="form-control" placeholder="متن اصلی مقاله" v-model="params.body" required></textarea>
-									<label for="body">متن اصلی مقاله</label>
+								<div class="mb-3">
+									<rich-editor :class="{ 'is-invalid': errors.body }" v-model="params.body" id="body" class="form-control" placeholder="متن اصلی مقاله" />
 									<div v-if="errors.body" class="invalid-feedback">
 										{{ errors.body }}
 									</div>

diff --git a/frontend/pages/dashboard/articles/index.vue b/frontend/pages/dashboard/articles/index.vue
@@ -16,6 +16,10 @@
 				<div class="row">
 					<div class="col-12 mb-4 mb-lg-0">
 						<div class="card">
+							<div class="card-header d-flex justify-content-between">
+								<h4>مقاله ها</h4>
+								<NuxtLink class="btn btn-primary" to="/dashboard/articles/create">مقاله جدید</NuxtLink>
+							</div>
 							<div class="card-body">
 								<div class="table-responsive">
 									<table class="table table-striped table-borderless table-hover align-middle">
@@ -29,28 +33,28 @@
 										</thead>
 										<tbody v-if="!pending">
 											<tr v-for="(article, index) in data.items" :key="index">
-											<th scope="row">{{ index + 1 }}</th>
-											<td>{{ article.title }}</td>
-											<td>{{ article.published_at }}</td>
-											<td>
-												<NuxtLink :to="`/articles/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
-													<span class="fa fa-eye"></span>
-												</NuxtLink>
-												<NuxtLink :to="`/dashboard/articles/edit/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
-													<span class="fa fa-pen"></span>
-												</NuxtLink>
-												<button @click.prevent="deleteArticle(article.uuid)" type="button" class="btn mx-1 btn-sm btn-danger">
-													<span class="fa fa-trash"></span>
-												</button>
-											</td>
+												<th scope="row">{{ index + 1 }}</th>
+												<td>{{ article.title }}</td>
+												<td>{{ article.published_at }}</td>
+												<td>
+													<NuxtLink :to="`/articles/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
+														<span class="fa fa-eye"></span>
+													</NuxtLink>
+													<NuxtLink :to="`/dashboard/articles/edit/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
+														<span class="fa fa-pen"></span>
+													</NuxtLink>
+													<button @click.prevent="deleteArticle(article.uuid)" type="button" class="btn mx-1 btn-sm btn-danger">
+														<span class="fa fa-trash"></span>
+													</button>
+												</td>
 											</tr>
 											<tr v-if="data.items.length == 0">
-											<td colspan="5">
-												<p>هیچ مقاله ای وجود ندارد</p>
-											</td>
+												<td colspan="5">
+													<p>هیچ مقاله ای وجود ندارد</p>
+												</td>
 											</tr>
 										</tbody>
-										</table>
+									</table>
 								</div>
 								<nav v-if="!pending && data.pagination.total_pages > 1" aria-label="Page navigation example">
 									<ul class="pagination">

diff --git a/frontend/pages/dashboard/files/index.vue b/frontend/pages/dashboard/files/index.vue
@@ -28,7 +28,3 @@ useHead({
 	title: "فایل ها"
 })
 </script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/frontend/pages/dashboard/index.vue b/frontend/pages/dashboard/index.vue
@@ -42,7 +42,7 @@
 												<NuxtLink :to="`/dashboard/articles/edit/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
 													<span class="fa fa-pen"></span>
 												</NuxtLink>
-												<button type="button" class="btn mx-1 btn-sm btn-danger">
+												<button @click.prevent="deleteArticle(article.uuid)" type="button" class="btn mx-1 btn-sm btn-danger">
 													<span class="fa fa-trash"></span>
 												</button>
 											</td>
@@ -65,7 +65,7 @@
     </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 definePageMeta({
   layout: 'dashboard',
 })
@@ -75,4 +75,13 @@ const { data, pending, error } = await useAsyncData(
 	useDashboardArticles().index
 )
 
+async function deleteArticle(uuid:string) {
+	if (!confirm('آیا میخواهید این مقاله را حذف کنید؟')) {
+		return
+	}
+
+	await useDashboardArticles().delete(uuid)
+
+	data.value.items = data.value.items.filter((article) => article.uuid != uuid)
+}
 </script>