diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
index 4dbac9993..38bc854d7 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
@@ -30,7 +30,7 @@ const props = defineProps({
},
author: {
type: Object,
- required: true,
+ default: null,
},
category: {
type: Object,
@@ -157,7 +157,6 @@ const handleClick = id => {
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
import { OnClickOutside } from '@vueuse/components';
import { useMapGetter } from 'dashboard/composables/store';
@@ -19,6 +20,7 @@ const props = defineProps({
const emit = defineEmits(['saveArticle', 'setAuthor', 'setCategory']);
const { t } = useI18n();
+const route = useRoute();
const openAgentsList = ref(false);
const openCategoryList = ref(false);
@@ -36,13 +38,15 @@ const currentUser = computed(() =>
agents.value.find(agent => agent.id === currentUserId.value)
);
+const categorySlugFromRoute = computed(() => route.params.categorySlug);
+
const author = computed(() => {
if (isNewArticle.value) {
return selectedAuthorId.value
? agents.value.find(agent => agent.id === selectedAuthorId.value)
: currentUser.value;
}
- return props.article?.author || currentUser.value;
+ return props.article?.author || null;
});
const authorName = computed(
@@ -51,24 +55,52 @@ const authorName = computed(
const authorThumbnailSrc = computed(() => author.value?.thumbnail);
const agentList = computed(() => {
- return [...agents.value]
- .sort((a, b) => a.name.localeCompare(b.name))
- .map(agent => ({
- label: agent.name,
- value: agent.id,
- thumbnail: { name: agent.name, src: agent.thumbnail },
- isSelected: agent.id === props.article?.author?.id,
- action: 'assignAuthor',
- }))
- .sort((a, b) => b.isSelected - a.isSelected);
+ return (
+ agents.value
+ ?.map(({ name, id, thumbnail }) => ({
+ label: name,
+ value: id,
+ thumbnail: { name, src: thumbnail },
+ isSelected:
+ id === props.article?.author?.id ||
+ id === (selectedAuthorId.value || currentUserId.value),
+ action: 'assignAuthor',
+ }))
+ // Sort the list by isSelected first, then by name(label)
+ .toSorted((a, b) => {
+ if (a.isSelected !== b.isSelected) {
+ return Number(b.isSelected) - Number(a.isSelected);
+ }
+ return a.label.localeCompare(b.label);
+ }) ?? []
+ );
});
const hasAgentList = computed(() => {
- return agents.value?.length > 0;
+ return agents.value?.length > 1;
});
+const findCategoryFromSlug = slug => {
+ return categories.value?.find(category => category.slug === slug);
+};
+
+const assignCategoryFromSlug = slug => {
+ const categoryFromSlug = findCategoryFromSlug(slug);
+ if (categoryFromSlug) {
+ selectedCategoryId.value = categoryFromSlug.id;
+ return categoryFromSlug;
+ }
+ return null;
+};
+
const selectedCategory = computed(() => {
if (isNewArticle.value) {
+ if (categorySlugFromRoute.value) {
+ const categoryFromSlug = assignCategoryFromSlug(
+ categorySlugFromRoute.value
+ );
+ if (categoryFromSlug) return categoryFromSlug;
+ }
return selectedCategoryId.value
? categories.value.find(
category => category.id === selectedCategoryId.value
@@ -81,15 +113,20 @@ const selectedCategory = computed(() => {
});
const categoryList = computed(() => {
- return categories.value
- .map(category => ({
- label: category.name,
- value: category.id,
- emoji: category.icon,
- isSelected: category.id === props.article?.category?.id,
- action: 'assignCategory',
- }))
- .sort((a, b) => b.isSelected - a.isSelected);
+ return (
+ categories.value
+ .map(({ name, id, icon }) => ({
+ label: name,
+ value: id,
+ emoji: icon,
+ isSelected: isNewArticle.value
+ ? id === (selectedCategoryId.value || selectedCategory.value?.id)
+ : id === props.article?.category?.id,
+ action: 'assignCategory',
+ }))
+ // Sort categories by isSelected
+ .toSorted((a, b) => Number(b.isSelected) - Number(a.isSelected))
+ );
});
const hasCategoryMenuItems = computed(() => {
@@ -124,6 +161,19 @@ const handleArticleAction = ({ action, value }) => {
const updateMeta = meta => {
emit('saveArticle', { meta });
};
+
+onMounted(() => {
+ if (categorySlugFromRoute.value && isNewArticle.value) {
+ // Assign category from slug if there is one
+ const categoryFromSlug = findCategoryFromSlug(categorySlugFromRoute.value);
+ if (categoryFromSlug) {
+ handleArticleAction({
+ action: 'assignCategory',
+ value: categoryFromSlug?.id,
+ });
+ }
+ }
+});
@@ -139,7 +189,6 @@ const updateMeta = meta => {
>
getEmptyStateText('SUBTITLE'));
const handleTabChange = tab =>
updateRoute({ tab: tab.value === ARTICLE_TABS.ALL ? '' : tab.value });
+
const handleCategoryAction = value =>
updateRoute({ categorySlug: value === CATEGORY_ALL ? '' : value });
+
const handleLocaleAction = value => {
updateRoute({ locale: value, categorySlug: '' });
emit('fetchPortal', value);
};
const handlePageChange = page => emit('pageChange', page);
-const navigateToNewArticlePage = () =>
- router.push({ name: 'portals_articles_new' });
+
+const navigateToNewArticlePage = () => {
+ const { categorySlug, locale } = route.params;
+ router.push({
+ name: 'portals_articles_new',
+ params: { categorySlug, locale },
+ });
+};
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
index 3b1506224..5492d2f46 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
@@ -1,7 +1,10 @@