Skip to content

Commit

Permalink
Database reset, design change
Browse files Browse the repository at this point in the history
  • Loading branch information
@MdSamsuzzohaShayon
MdSamsuzzohaShayon committed Jun 10, 2024
1 parent 01e2ac7 commit 5f8f774
Show file tree
Hide file tree
Showing 26 changed files with 712 additions and 316 deletions.
21 changes: 14 additions & 7 deletions client/components/article/ArticleAdd.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<label for="title" class="form-label">Title</label>
<input
id="title"
v-model="articleState.title"
v-on:change="handleTitleChange"
type="text"
class="form-control"
name="title"
Expand Down Expand Up @@ -42,12 +42,12 @@
<option v-for="cat in props.categories" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
</select>
</div>
<div class="mb-3">
<!-- <div class="mb-3">
<label for="author" class="form-label">Author</label>
<select id="author" v-model="articleState.author" class="form-select" name="author">
<option v-for="a in props.authors" :key="a.id" :value="a.id">{{ a.name }}</option>
</select>
</div>
</div> -->
<div class="mb-3">
<label for="link" class="form-label">Link</label>
<input id="link" v-model="articleState.link" type="text" class="form-control" name="link" >
Expand All @@ -58,7 +58,6 @@
</template>

<script setup lang="ts">
// @ts-expect-error
import type { Delta} from '@vueup/vue-quill';
import { QuillEditor, Quill } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
Expand Down Expand Up @@ -116,7 +115,16 @@ const initialContent = `
`;
const state = reactive({ content: initialContent });
const props = defineProps(['categories', 'authors']);
const props = defineProps(['categories']);
const handleTitleChange=(e: Event)=>{
e.preventDefault();
const inputEl = e.target as HTMLInputElement;
const inputTitle =inputEl.value;
articleState.title = inputTitle;
articleState.link = stringToSlug(inputTitle);
}
const handleArticleAdd = async (e: Event) => {
e.preventDefault();
Expand All @@ -134,8 +142,7 @@ const handleArticleAdd = async (e: Event) => {
title: articleState.title,
content: state.content,
thumbnail: null, // You may need to handle thumbnail separately based on your requirements
// authorId: articleState.author,
authorId: 1,
authorId: 10, // Get author ID from token
categoryId: articleState.category,
},
};
Expand Down
1 change: 0 additions & 1 deletion client/components/article/ArticleExpand.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@
</template>

<script lang="ts" setup>
// @ts-expect-error
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Delta, QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
Expand Down
149 changes: 123 additions & 26 deletions client/components/home/HomePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@
<div class="row">
<!-- Left side / Top side on mobile start -->
<div class="col-12 col-md-8">
<div v-if="data?.allArticles && data?.allArticles.length > 0" class="card text-bg-dark" id="feature-card">
<CldImage :src="data?.allArticles[1].thumbnail" width="800" height="800" class="card-img"
:alt="data?.allArticles[1].title" />
<NuxtLink v-if="state.latestArticles && state.latestArticles.length > 0" class="card text-bg-dark text-decoration-none" id="feature-card" :to="state.latestArticles[0].link">
<CldImage :src="state.latestArticles[1].thumbnail" width="800" height="800" class="card-img"
:alt="state.latestArticles[1].title" />
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h1 class="card-title">{{ data?.allArticles[1].title }}</h1>
<h1 class="card-title">{{ state.latestArticles[1].title }}</h1>
<p class="card-text">
{{ shortDesc(data?.allArticles[1].content, 200) }}
{{ shortDesc(state.latestArticles[1].content, 200) }}
</p>
<p class="card-text">
<small>{{
data?.allArticles[1].createdAt &&
formatReadableDate(data?.allArticles[1].createdAt)
state.latestArticles[1].createdAt &&
formatReadableDate(state.latestArticles[1].createdAt)
}}</small>
</p>
</div>
</div>
</NuxtLink>
</div>
<!-- Left side / Top side on mobile end -->

Expand All @@ -28,17 +28,18 @@
<p class="text-uppercase">This week's</p>
<h2>Trending Posts</h2>

<div v-if="data?.allArticles && data?.allArticles.length > 0" class="d-flex flex-column" id="latest-posts">
<div v-for="article in data?.allArticles.slice(0, 4)" :key="article.id"
class="card mb-3 latest-post-card border border-bottom" style="max-width: 540px">
<div v-if="state.trendingArticles && state.trendingArticles.length > 0" class="d-flex flex-column"
id="latest-posts">
<NuxtLink v-for="trendingArticle in state.trendingArticles.slice(0, 4)" :key="trendingArticle.id"
class="card mb-3 latest-post-card border border-bottom text-decoration-none" :to="trendingArticle.link" style="max-width: 540px">
<div class="row">
<div class="col-4">
<CldImage :src="article.thumbnail" width="400" height="400" class="img-fluid rounded-start"
:alt="article.title" />
<CldImage :src="trendingArticle.thumbnail" width="400" height="400" class="img-fluid rounded-start"
:alt="trendingArticle.title" />
</div>
<div class="col-8">
<div class="card-body">
<h2 class="card-title">{{ article.title }}</h2>
<h2 class="card-title">{{ trendingArticle.title }}</h2>
<!-- <p class="card-text">{{ shortDesc(article.content, 200) }}</p>
<p class="card-text">
<small class="text-body-secondary">{{
Expand All @@ -48,18 +49,93 @@
</div>
</div>
</div>
</div>
</NuxtLink>
</div>
</div>
<!-- Right side / bottom side on the mobile end -->
</div>
</section>

<section class="section section-2">
<div class="row">
<p class="text-uppercase">Popular</p>
<h2>Tutorial</h2>
</div>
<div class="row">
<NuxtLink class="col-md-4 text-decoration-none" v-if="state.tutorialArticles && state.tutorialArticles.length > 0"
v-for="tutorialArticle in state.tutorialArticles.slice(1, 5)" :key="tutorialArticle.id" v-bind:to="tutorialArticle.link" >
<div class="card mb-3" style="width: 100%;" >
<div class="row g-0">
<div class="col-md-4">
<CldImage :src="tutorialArticle.thumbnail" width="800" height="800" class="card-img img-fluid rounded-start"
:alt="tutorialArticle.title" />
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">{{ tutorialArticle.title }}</h5>
<p class="card-text">{{ shortDesc(tutorialArticle.content, 200) }}</p>
<p class="card-text"><small class="text-body-secondary">{{
tutorialArticle.createdAt &&
formatReadableDate(tutorialArticle.createdAt)
}}</small></p>
</div>
</div>
</div>
</div>
</NuxtLink>
</div>
</section>

<section class="section section-3">
<div class="row">
<p class="text-uppercase">Popular</p>
<h2>Tech News</h2>
</div>
<div class="row">
<div class="col-md-5">
<div v-if="state.newsArticles && state.newsArticles.length > 0" class="card text-bg-dark">
<CldImage :src="state.newsArticles[1].thumbnail" width="800" height="800" class="card-img"
:alt="state.newsArticles[1].title" />
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h1 class="card-title">{{ state.newsArticles[1].title }}</h1>
<p class="card-text">
{{ shortDesc(state.newsArticles[1].content, 200) }}
</p>
<p class="card-text">
<small>{{
state.newsArticles[1].createdAt &&
formatReadableDate(state.newsArticles[1].createdAt)
}}</small>
</p>
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<NuxtLink v-if="state.newsArticles && state.newsArticles.length > 0"
v-for="newsArticle in state.newsArticles.slice(1, 5)" :to="newsArticle.link" :key="newsArticle.id" class="col-md-6 text-decoration-none">
<div class="card text-bg-dark">
<CldImage :src="newsArticle.thumbnail" width="800" height="800" class="card-img"
:alt="newsArticle.title" />
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h1 class="card-title">{{ newsArticle.title }}</h1>
<p class="card-text">
{{ shortDesc(newsArticle.content, 200) }}
</p>
<p class="card-text">
<small>{{
newsArticle.createdAt &&
formatReadableDate(newsArticle.createdAt)
}}</small>
</p>
</div>
</div>
</NuxtLink>
<div class="col-md-6">
</div>
</div>
</div>
</div>
</section>
</div>
</template>
Expand All @@ -68,10 +144,16 @@
import type { Ref } from 'vue';
import type { IArticle } from '../../types/Article';
import { GET_ARTICLES } from '~/graphql/articles';
// import { useQuery } from '@apollo/client';
// import { useQuery } from '@vue/apollo-composable';
const state = reactive({
interface IStateProps {
allArticles: IArticle[];
latestArticles: IArticle[];
newsArticles: IArticle[];
tutorialArticles: IArticle[];
trendingArticles: IArticle[];
}
const state = reactive<IStateProps>({
allArticles: [],
latestArticles: [],
newsArticles: [],
Expand All @@ -86,19 +168,34 @@ type ArticlesResult = {
// Fetch articles
const { data, error } = await useAsyncQuery<ArticlesResult>(GET_ARTICLES, { start: 1, limit: 10 });
console.log({ articles: data.value?.allArticles });
const { data, error } = await useAsyncQuery<ArticlesResult>(GET_ARTICLES, { start: 1, limit: 50 });
// console.log({ articles: data.value?.allArticles });
// Log data in a nice-looking format
const articles: Ref<IArticle[]> = ref([]);
// const articles: Ref<IArticle[]> = ref([]);
if (data) {
articles.value = data?.value?.allArticles ? data?.value?.allArticles : [];
const allArticles: IArticle[] = data?.value?.allArticles ? data?.value?.allArticles : [];
state.allArticles = allArticles;
const latestArticles = [], newsArticles = [], tutorialArticles = [], trendingArticles = [];
// Seperate all category
// for (let i = 0; i < array.length; i++) {
// const element = array[i];
// console.log('Fetched articles:', articles);
// }
for (let i = 0; i < allArticles.length; i += 1) {
const element = allArticles[i];
if (element.category.name.toUpperCase() === "LATEST") {
latestArticles.push(element);
} else if (element.category.name.toUpperCase() === "NEWS") {
newsArticles.push(element);
} else if (element.category.name.toUpperCase() === "TUTORIAL") {
tutorialArticles.push(element);
} else if (element.category.name.toUpperCase() === "TRENDING") {
trendingArticles.push(element);
}
}
state.latestArticles = latestArticles;
state.newsArticles = newsArticles;
state.tutorialArticles = tutorialArticles;
state.trendingArticles = trendingArticles;
}
// Handle error
Expand Down
104 changes: 0 additions & 104 deletions client/components/home/PopularLatest.vue
View file

This file was deleted.

Loading

0 comments on commit 5f8f774

Please sign in to comment.