LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: Refactor components in widget to show articles (#7874)

Browse Source
This commit is contained in:
Nithin David Thomas
2023-09-11 09:31:50 +05:30
committed by GitHub
parent 8d43101892
commit 6c39aed882
4 changed files with 41 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/javascript/widget/components/ArticleCategoryCard.vue
View File

@@ -1,21 +1,27 @@
<template> <template>
<div class="py-2"> <div>
<h3 class="text-sm font-semibold text-slate-900 mb-0">{{ title }}</h3> <h3 class="text-base font-medium text-slate-900 dark:text-slate-50 mb-0">
<article-list :articles="articles" /> {{ title }}
</h3>
<article-list :articles="articles" @click="onArticleClick" />
<button <button
class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 justify-between items-center hover:bg-slate-25 see-articles" class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
@click="$emit('view-all-articles')" :style="{ color: widgetColor }"
@click="$emit('view-all')"
> >
<span class="pr-2">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span> <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
<fluent-icon icon="arrow-right" size="14" /> <fluent-icon icon="arrow-right" size="14" />
</button> </button>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex';
import ArticleList from './ArticleList.vue'; import ArticleList from './ArticleList.vue';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
export default { export default {
components: { ArticleList }, components: { FluentIcon, ArticleList },
props: { props: {
title: { title: {
type: String, type: String,
@@ -25,9 +31,13 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
categoryPath: { },
type: String, computed: {
default: '', ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
},
methods: {
onArticleClick(link) {
this.$emit('view', link);
}, },
}, },
}; };

20
app/javascript/widget/components/ArticleHero.vue
View File

@@ -1,13 +1,10 @@
<template> <template>
<div> <category-card
<h2 class="text-base font-bold leading-6 text-slate-800 mb-0"> :title="$t('PORTAL.POPULAR_ARTICLES')"
{{ $t('PORTAL.POPULAR_ARTICLES') }} :articles="articles.slice(0, 4)"
</h2> @view-all="$emit('view-all')"
<category-card @view="onArticleClick"
:articles="articles.slice(0, 4)" />
@view-all-articles="$emit('view-all-articles')"
/>
</div>
</template> </template>
<script> <script>
@@ -24,6 +21,11 @@ export default {
default: '', default: '',
}, },
}, },
methods: {
onArticleClick(link) {
this.$emit('view', link);
},
},
}; };
</script> </script>

3
app/javascript/widget/components/ArticleList.vue
View File

@@ -2,13 +2,14 @@
<ul role="list" class="py-2"> <ul role="list" class="py-2">
<article-list-item <article-list-item
v-for="article in articles" v-for="article in articles"
:key="article.id" :key="article.slug"
:link="article.link" :link="article.link"
:title="article.title" :title="article.title"
@click="onClick" @click="onClick"
/> />
</ul> </ul>
</template> </template>
<script> <script>
import ArticleListItem from './ArticleListItem'; import ArticleListItem from './ArticleListItem';

11
app/javascript/widget/components/ArticleListItem.vue
View File

@@ -1,20 +1,25 @@
<template> <template>
<li <li
class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25" class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-75 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900 "
@click="onClick"
> >
<button <button
class="text-slate-700 hover:text-slate-900 underline-offset-2 text-sm leading-6" class="underline-offset-2 text-sm leading-6 text-left"
@click="onClick" @click="onClick"
> >
{{ title }} {{ title }}
</button> </button>
<span class="pl-1 text-slate-700 arrow"> <span class="pl-1 arrow">
<fluent-icon icon="arrow-right" size="14" /> <fluent-icon icon="arrow-right" size="14" />
</span> </span>
</li> </li>
</template> </template>
<script> <script>
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
export default { export default {
components: { FluentIcon },
props: { props: {
link: { link: {
type: String, type: String,