From 615a0c69fe82061df59d2c3f2da9b24a20f34755 Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Tue, 21 Jan 2025 13:50:01 +0530 Subject: [PATCH] chore: Help center improvements (#10712) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request Template ## Description Fixes https://linear.app/chatwoot/issue/CW-3913/issues-with-help-center **Fixes included** 1. > The default locale that is selected should the portal default locale. Now, we update the last active locale in UI settings after changing the selected locale from the article page header. This ensures that we see the last active locale-based categories on the category page and remember it when we return. Initially, it’s the default locale. 2. > I cannot switch to a different locale if there are no articles in the portal Now, the `v-if` condition that checked for the presence of articles in portal has been removed. Additionally, the locale length checks for the showing dropdown have been removed, allows locale switching even if article is not preset. 3. > Create or updating the article is quite painful, see the video Removed the `quickSave` and `saveAndSyncDebounced` usage for a newly creating article. 4. > I cannot see the articles if I delete the English locale (irrespective of what I choose as default locale) Now, the last active locale in UI settings will automatically update to the default locale when the last active locale is deleted. 5. > Set a new default locale other than `en` and delete the `en` locale preset in the portal. Then, adding a new locale will automatically set `en` as the default locale, even if the `en` locale not preset in the portal. Now, we pass default locale when we add a new locale. 6. Adds search for all dropdown menus 7. Update article count in realtime. ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? **Check this linear issues** https://linear.app/chatwoot/issue/CW-3913/issues-with-help-center ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Pranav --- .../Pages/ArticleEditorPage/ArticleEditor.vue | 21 ++++++++--- .../ArticleEditorControls.vue | 6 ++-- .../ArticlePage/ArticleHeaderControls.vue | 13 ++++--- .../Pages/ArticlePage/ArticleList.vue | 13 +++++-- .../Pages/ArticlePage/ArticlesPage.vue | 5 +-- .../CategoryPage/CategoryHeaderControls.vue | 1 + .../Pages/LocalePage/AddLocaleDialog.vue | 7 ++-- .../Pages/LocalePage/LocaleList.vue | 22 ++++++++++-- .../modules/helpCenterArticles/actions.js | 15 ++++++++ .../modules/helpCenterArticles/mutations.js | 5 ++- .../helpCenterArticles/specs/action.spec.js | 36 +++++++++++++++++++ .../helpCenterArticles/specs/mutation.spec.js | 29 +++++++++++++++ 12 files changed, 150 insertions(+), 23 deletions(-) diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue index f5b925fbe..1709d0f5f 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue @@ -36,6 +36,8 @@ const emit = defineEmits([ const { t } = useI18n(); +const isNewArticle = computed(() => !props.article?.id); + const saveAndSync = value => { emit('saveArticle', value); }; @@ -52,21 +54,32 @@ const quickSave = debounce( // 2.5 seconds is enough to know that the user has stopped typing and is taking a pause // so we can save the data to the backend and retrieve the updated data // this will update the local state with response data +// Only use to save for existing articles const saveAndSyncDebounced = debounce(saveAndSync, 2500, false); +// Debounced save for new articles +const quickSaveNewArticle = debounce(saveAndSync, 400, false); + +const handleSave = value => { + if (isNewArticle.value) { + quickSaveNewArticle(value); + } else { + quickSave(value); + saveAndSyncDebounced(value); + } +}; + const articleTitle = computed({ get: () => props.article.title, set: value => { - quickSave({ title: value }); - saveAndSyncDebounced({ title: value }); + handleSave({ title: value }); }, }); const articleContent = computed({ get: () => props.article.content, set: content => { - quickSave({ content }); - saveAndSyncDebounced({ content }); + handleSave({ content }); }, }); diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue index d46fb5264..a910f4d8d 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue @@ -200,7 +200,8 @@ onMounted(() => { @@ -231,7 +232,8 @@ onMounted(() => { diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue index 5e7feb9fa..6565fab82 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue @@ -3,6 +3,7 @@ import { ref, computed } from 'vue'; import { useI18n } from 'vue-i18n'; import { useRoute } from 'vue-router'; import { OnClickOutside } from '@vueuse/components'; +import { useUISettings } from 'dashboard/composables/useUISettings'; import { ARTICLE_TABS, CATEGORY_ALL, @@ -37,6 +38,7 @@ const emit = defineEmits([ const route = useRoute(); const { t } = useI18n(); +const { updateUISettings } = useUISettings(); const isCategoryMenuOpen = ref(false); const isLocaleMenuOpen = ref(false); @@ -111,13 +113,12 @@ const localeMenuItems = computed(() => { })); }); -const hasMoreThanOneLocaleMenuItems = computed(() => { - return localeMenuItems.value?.length > 1; -}); - const handleLocaleAction = ({ value }) => { emit('localeChange', value); isLocaleMenuOpen.value = false; + updateUISettings({ + last_active_locale_code: value, + }); }; const handleCategoryAction = ({ value }) => { @@ -143,7 +144,7 @@ const handleTabChange = value => { />
-
+