feat: Created article settings side panel (#5197)

app/javascript/dashboard/components/helpCenter/EditArticle.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="edit-article--container">
+  <div
+    class="edit-article--container"
+    :class="{ 'is-settings-sidebar-open': isSettingsSidebarOpen }"
+  >
     <input
       v-model="articleTitle"
       type="text"
@@ -32,6 +35,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    isSettingsSidebarOpen: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -62,8 +69,12 @@ export default {
 
 <style lang="scss" scoped>
 .edit-article--container {
-  margin: var(--space-medium) var(--space-giga);
+  margin: var(--space-large) auto;
-  min-width: 640px;
+  width: 640px;
+}
+
+.is-settings-sidebar-open {
+  margin: var(--space-large) var(--space-small);
 }
 
 .article-heading {

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -26,6 +26,41 @@
       "SAVING": "Draft saving...",
       "SAVED": "Draft saved"
     },
+    "ARTICLE_SETTINGS": {
+      "TITLE": "Article Settings",
+      "FORM": {
+        "CATEGORY": {
+          "LABEL": "Category",
+          "TITLE": "Select category",
+          "PLACEHOLDER": "Select category",
+          "NO_RESULT": "No category found",
+          "SEARCH_PLACEHOLDER": "Search category"
+        },
+        "AUTHOR": {
+          "LABEL": "Author",
+          "TITLE": "Select author",
+          "PLACEHOLDER": "Select author",
+          "NO_RESULT": "No authors found",
+          "SEARCH_PLACEHOLDER": "Search author"
+        },
+        "META_TITLE": {
+          "LABEL": "Meta title",
+          "PLACEHOLDER": "Add a meta title"
+        },
+        "META_DESCRIPTION": {
+          "LABEL": "Meta description",
+          "PLACEHOLDER": "Add your meta description for better SEO results..."
+        },
+        "META_TAGS": {
+          "LABEL": "Meta tags",
+          "PLACEHOLDER": "Add meta tags separated by comma..."
+        }
+      },
+      "BUTTONS": {
+        "ARCHIVE": "Archive article",
+        "DELETE": "Delete article"
+      }
+    },
     "PORTAL": {
       "HEADER": "Portals",
       "NEW_BUTTON": "New Portal",

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue

@@ -36,7 +36,7 @@
         {{ $t('HELP_CENTER.EDIT_HEADER.ADD_TRANSLATION') }}
       </woot-button>
       <woot-button
-        v-if="isSidebarOpen"
+        v-if="!isSidebarOpen"
         v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
         icon="pane-open"
         class-names="article--buttons"
@@ -46,7 +46,7 @@
         @click="openSidebar"
       />
       <woot-button
-        v-else
+        v-if="isSidebarOpen"
         v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.CLOSE_SIDEBAR')"
         icon="pane-close"
         class-names="article--buttons"
@@ -80,7 +80,7 @@ export default {
   },
   data() {
     return {
-      isSidebarOpen: true,
+      isSidebarOpen: false,
     };
   },
   computed: {
@@ -111,12 +111,12 @@ export default {
       this.$emit('add');
     },
     openSidebar() {
-      this.$emit('open');
       this.isSidebarOpen = true;
+      this.$emit('open');
     },
     closeSidebar() {
-      this.$emit('close');
       this.isSidebarOpen = false;
+      this.$emit('close');
     },
   },
 };

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue

@@ -0,0 +1,232 @@
+<template>
+  <transition name="popover-animation">
+    <div class="article-settings--container">
+      <h3 class="block-title">
+        {{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
+      </h3>
+      <div class="form-wrap">
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.LABEL') }}
+          <multiselect-dropdown
+            :options="categoryList"
+            :selected-item="selectedCategory"
+            :has-thumbnail="false"
+            :multiselector-title="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.TITLE')
+            "
+            :multiselector-placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.PLACEHOLDER')
+            "
+            :no-search-result="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.NO_RESULT')
+            "
+            :input-placeholder="
+              $t(
+                'HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.SEARCH_PLACEHOLDER'
+              )
+            "
+            @click="onClickSelectCategory"
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.LABEL') }}
+          <multiselect-dropdown
+            :options="authorList"
+            :selected-item="assignedAuthor"
+            :multiselector-title="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.TITLE')
+            "
+            :multiselector-placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.PLACEHOLDER')
+            "
+            :no-search-result="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.NO_RESULT')
+            "
+            :input-placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.SEARCH_PLACEHOLDER')
+            "
+            @click="onClickAssignAuthor"
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.LABEL') }}
+          <textarea
+            v-model="title"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.PLACEHOLDER')
+            "
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.LABEL') }}
+          <textarea
+            v-model="description"
+            rows="3"
+            type="text"
+            :placeholder="
+              $t(
+                'HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.PLACEHOLDER'
+              )
+            "
+          />
+        </label>
+        <label>
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.LABEL') }}
+          <multiselect
+            ref="tagInput"
+            v-model="values"
+            :placeholder="
+              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.PLACEHOLDER')
+            "
+            label="name"
+            track-by="name"
+            :options="options"
+            :multiple="true"
+            :taggable="true"
+            @tag="addTagValue"
+          />
+        </label>
+      </div>
+      <div class="action-buttons">
+        <woot-button
+          icon="archive"
+          size="small"
+          variant="clear"
+          color-scheme="secondary"
+          @click="onClickArchiveArticle"
+        >
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.ARCHIVE') }}
+        </woot-button>
+        <woot-button
+          icon="delete"
+          size="small"
+          variant="clear"
+          color-scheme="alert"
+          @click="onClickDeleteArticle"
+        >
+          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.DELETE') }}
+        </woot-button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown';
+export default {
+  components: {
+    MultiselectDropdown,
+  },
+  data() {
+    return {
+      // Dummy value
+      categoryList: [
+        {
+          id: 1,
+          name: 'Getting started',
+        },
+        {
+          id: 2,
+          name: 'Features',
+        },
+      ],
+      selectedCategory: {
+        id: 1,
+        name: 'Features',
+      },
+      authorList: [
+        {
+          id: 1,
+          name: 'John Doe',
+        },
+        {
+          id: 2,
+          name: 'Jane Doe',
+        },
+      ],
+      assignedAuthor: {
+        id: 1,
+        name: 'John Doe',
+      },
+      title: '',
+      description: '',
+      values: [],
+      options: [],
+    };
+  },
+  methods: {
+    addTagValue(tagValue) {
+      const tag = {
+        name: tagValue,
+      };
+      this.values.push(tag);
+      this.$refs.tagInput.$el.focus();
+    },
+    onClickSelectCategory() {
+      this.$emit('select-category');
+    },
+    onClickAssignAuthor() {
+      this.$emit('assign-author');
+    },
+    onClickArchiveArticle() {
+      this.$emit('archive-article');
+    },
+    onClickDeleteArticle() {
+      this.$emit('delete-article');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.article-settings--container {
+  flex: 0.3;
+  min-width: var(--space-giga);
+  overflow: scroll;
+  border-left: 1px solid var(--color-border-light);
+  margin-left: var(--space-normal);
+  padding-left: var(--space-normal);
+  padding-top: var(--space-small);
+  padding-bottom: var(--space-small);
+
+  .form-wrap {
+    margin-top: var(--space-normal);
+    margin-bottom: var(--space-medium);
+
+    textarea {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  .action-buttons {
+    display: flex;
+    flex-direction: column;
+
+    ::v-deep .button {
+      padding-left: 0;
+    }
+  }
+}
+::v-deep {
+  .multiselect {
+    margin-bottom: 0;
+  }
+  .multiselect__content-wrapper {
+    display: none;
+  }
+  .multiselect--active .multiselect__tags {
+    border-radius: var(--border-radius-normal);
+    padding-right: var(--space-small) !important;
+  }
+  .multiselect__placeholder {
+    color: var(--s-300);
+    padding-top: var(--space-small);
+    margin-bottom: 0;
+  }
+  .multiselect__select {
+    display: none;
+  }
+}
+</style>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue

@@ -1,26 +1,41 @@
 <template>
-  <div class="container">
+  <div class="article-container">
-    <edit-article-header
+    <div
-      back-button-label="All Articles"
+      class="edit-article--container"
-      draft-state="saved"
+      :class="{ 'is-sidebar-open': showArticleSettings }"
-      @back="onClickGoBack"
+    >
-    />
+      <edit-article-header
-    <edit-article-field @titleInput="titleInput" @contentInput="contentInput" />
+        back-button-label="All Articles"
+        draft-state="saved"
+        @back="onClickGoBack"
+        @open="openArticleSettings"
+        @close="closeArticleSettings"
+      />
+      <edit-article-field
+        :is-settings-sidebar-open="showArticleSettings"
+        @titleInput="titleInput"
+        @contentInput="contentInput"
+      />
+    </div>
+    <article-settings v-if="showArticleSettings" />
   </div>
 </template>
 
 <script>
 import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader';
 import EditArticleField from 'dashboard/components/helpCenter/EditArticle';
+import ArticleSettings from 'dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings';
 export default {
   components: {
     EditArticleHeader,
     EditArticleField,
+    ArticleSettings,
   },
   data() {
     return {
       articleTitle: '',
       articleContent: '',
+      showArticleSettings: false,
     };
   },
   methods: {
@@ -33,14 +48,32 @@ export default {
     contentInput(value) {
       this.articleContent = value;
     },
+    openArticleSettings() {
+      this.showArticleSettings = true;
+    },
+    closeArticleSettings() {
+      this.showArticleSettings = false;
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.container {
+.article-container {
+  display: flex;
   padding: var(--space-small) var(--space-normal);
   width: 100%;
+  flex: 1;
   overflow: scroll;
+
+  .edit-article--container {
+    flex: 1;
+    flex-shrink: 0;
+    overflow: scroll;
+  }
+
+  .is-sidebar-open {
+    flex: 0.7;
+  }
 }
 </style>