Extracted duplicated posts/pages filter into a component

no issue

- posts and pages (and their corresponding `-loading` counterparts) templates were all duplicating a lengthy section of handlebars
- extracted the duplicated handlebars into a template for easier design changes or upgrading of `ember-power-select`
- moved generation of the "selected" CSS classes into the template to clean up code in the controller

app/components/gh-contentfilter.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+
+export default class GhContentfilterComponent extends Component {
+    @service session
+}

app/controllers/pages.js

@@ -17,23 +17,11 @@ const TYPES = [{
     value: 'featured'
 }];
 
-const ORDERS = [{
-    name: 'Newest',
-    value: null
-}, {
-    name: 'Oldest',
-    value: 'published_at asc'
-}, {
-    name: 'Recently updated',
-    value: 'updated_at desc'
-}];
-
 /* eslint-disable ghost/ember/alias-model-in-controller */
 export default PostsController.extend({
     init() {
         this._super(...arguments);
         this.availableTypes = TYPES;
-        this.availableOrders = ORDERS;
     },
 
     actions: {

app/controllers/posts.js

@@ -34,7 +34,6 @@ const ORDERS = [{
 
 export default Controller.extend({
 
-    session: service(),
     store: service(),
 
     queryParams: ['type', 'author', 'tag', 'order'],
@@ -116,30 +115,6 @@ export default Controller.extend({
         return authors.findBy('slug', author);
     }),
 
-    typeClassNames: computed('type', function () {
-        let classNames = 'gh-contentfilter-menu gh-contentfilter-type';
-        if (this.get('type')) {
-            classNames = classNames + ' gh-contentfilter-selected';
-        }
-        return classNames;
-    }),
-
-    authorClassNames: computed('author', function () {
-        let classNames = 'gh-contentfilter-menu gh-contentfilter-author';        
-        if (this.get('author')) {
-            classNames = classNames + ' gh-contentfilter-selected';
-        }
-        return classNames;
-    }),
-
-    tagClassNames: computed('tag', function () {
-        let classNames = 'gh-contentfilter-menu gh-contentfilter-tag';
-        if (this.get('tag')) {
-            classNames = classNames + ' gh-contentfilter-selected';
-        }
-        return classNames;
-    }),
-
     actions: {
         changeType(type) {
             this.set('type', get(type, 'value'));

app/templates/components/gh-contentfilter.hbs

@@ -0,0 +1,74 @@
+<div class="gh-contentfilter" ...attributes>
+    {{#unless this.session.user.isContributor}}
+    <PowerSelect
+        @selected={{@selectedType}}
+        @options={{@availableTypes}}
+        @searchEnabled={{false}}
+        @onChange={{@onTypeChange}}
+        @tagName="div"
+        @classNames={{concat "gh-contentfilter-menu gh-contentfilter-type " (if @selectedType.value "gh-contentfilter-selected")}}
+        @triggerClass="gh-contentfilter-menu-trigger"
+        @dropdownClass="gh-contentfilter-menu-dropdown"
+        @matchTriggerWidth={{false}}
+        data-test-type-select="true"
+        as |type|
+    >
+        {{type.name}}
+    </PowerSelect>
+    {{/unless}}
+
+    {{#unless this.session.user.isAuthorOrContributor}}
+    <PowerSelect
+        @selected={{@selectedAuthor}}
+        @options={{@availableAuthors}}
+        @searchField="name"
+        @onChange={{@onAuthorChange}}
+        @tagName="div"
+        @classNames={{concat "gh-contentfilter-menu gh-contentfilter-author " (if @selectedAuthor.slug "gh-contentfilter-selected")}}
+        @triggerClass="gh-contentfilter-menu-trigger"
+        @dropdownClass="gh-contentfilter-menu-dropdown"
+        @searchPlaceholder="Search authors"
+        @matchTriggerWidth={{false}}
+        data-test-author-select="true"
+        as |author|
+    >
+        {{author.name}}
+    </PowerSelect>
+    {{/unless}}
+
+    {{#unless this.session.user.isContributor}}
+    <PowerSelect
+        @selected={{@selectedTag}}
+        @options={{@availableTags}}
+        @searchField="name"
+        @onChange={{@onTagChange}}
+        @tagName="div"
+        @classNames={{concat "gh-contentfilter-menu gh-contentfilter-tag " (if @selectedTag.slug "gh-contentfilter-selected")}}
+        @triggerClass="gh-contentfilter-menu-trigger"
+        @dropdownClass="gh-contentfilter-menu-dropdown"
+        @searchPlaceholder="Search tags"
+        @matchTriggerWidth={{false}}
+        @optionsComponent="power-select-vertical-collection-options"
+        data-test-tag-select="true"
+        as |tag|
+    >
+        {{tag.name}}
+    </PowerSelect>
+    {{/unless}}
+
+    <PowerSelect
+        @selected={{@selectedOrder}}
+        @options={{@availableOrders}}
+        @searchEnabled={{false}}
+        @onChange={{@onOrderChange}}
+        @tagName="div"
+        @classNames="gh-contentfilter-menu gh-contentfilter-sort"
+        @triggerClass="gh-contentfilter-menu-trigger"
+        @dropdownClass="gh-contentfilter-menu-dropdown"
+        @matchTriggerWidth={{false}}
+        @data-test-order-select="true"
+        as |order|
+    >
+        {{order.name}}
+    </PowerSelect>
+</div>

app/templates/pages-loading.hbs

@@ -2,80 +2,20 @@
     <header class="gh-canvas-header post-header">
         <h2 class="gh-canvas-title" data-test-screen-title>Pages</h2>
         <section class="view-actions">
-            <div class="gh-contentfilter">
-                {{#unless this.session.user.isContributor}}
-                <PowerSelect
-                    @selected={{this.selectedType}}
-                    @options={{this.availableTypes}}
-                    @searchEnabled={{false}}
-                    @onChange={{action (mut k)}}
-                    @tagName="div"
-                    @classNames="gh-contentfilter-menu gh-contentfilter-type"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @matchTriggerWidth={{false}}
-                    data-test-type-select="true"
-                    as |type|
-                >
-                    {{type.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                {{#unless this.session.user.isAuthorOrContributor}}
-                <PowerSelect
-                    @selected={{this.selectedAuthor}}
-                    @options={{this.availableAuthors}}
-                    @searchField="name"
-                    @onChange={{action (mut k)}}
-                    @tagName="div"
-                    @classNames="gh-contentfilter-menu gh-contentfilter-author"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @searchPlaceholder="Search authors"
-                    @matchTriggerWidth={{false}}
-                    data-test-author-select="true"
-                    as |author|
-                >
-                    {{author.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                {{#unless this.session.user.isContributor}}
-                <PowerSelect
-                    @selected={{this.selectedTag}}
-                    @options={{this.availableTags}}
-                    @searchField="name"
-                    @onChange={{action (mut k)}}
-                    @tagName="div"
-                    @classNames="gh-contentfilter-menu gh-contentfilter-tag"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @searchPlaceholder="Search tags"
-                    @matchTriggerWidth={{false}}
-                    @optionsComponent="power-select-vertical-collection-options"
-                    data-test-tag-select="true"
-                    as |tag|
-                >
-                    {{tag.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                <PowerSelect
-                    @selected={{this.selectedOrder}}
-                    @options={{this.availableOrders}}
-                    @searchEnabled={{false}}
-                    @onChange={{action (mut k)}}
-                    @tagName="div"
-                    @classNames="gh-contentfilter-menu gh-contentfilter-sort"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @matchTriggerWidth={{false}}
-                    data-test-order-select="true"
-                    as |order|
-                >
-                    {{order.name}}
-                </PowerSelect>
-            </div>
+            <GhContentfilter
+                @selectedType={{this.selectedType}}
+                @availableTypes={{this.availableTypes}}
+                @onTypeChange={{action (mut k)}}
+                @selectedAuthor={{this.selectedAuthor}}
+                @availableAuthors={{this.availableAuthors}}
+                @onAuthorChange={{action (mut k)}}
+                @selectedTag={{this.selectedTag}}
+                @availableTags={{this.availableTags}}
+                @onTagChange={{action (mut k)}}
+                @selectedOrder={{this.selectedOrder}}
+                @availableOrders={{this.availableOrders}}
+                @onOrderChange={{action (mut k)}}
+            />
 
             {{#link-to "editor.new" "page" class="gh-btn gh-btn-green" data-test-new-page-button=true}}<span>New page</span>{{/link-to}}
         </section>

app/templates/pages.hbs

@@ -2,80 +2,20 @@
     <GhCanvasHeader class="gh-canvas-header post-header">
         <h2 class="gh-canvas-title" data-test-screen-title>Pages</h2>
         <section class="view-actions">
-            <div class="gh-contentfilter">
-                {{#unless this.session.user.isContributor}}
-                <PowerSelect
-                    @selected={{this.selectedType}}
-                    @options={{this.availableTypes}}
-                    @searchEnabled={{false}}
-                    @onChange={{action "changeType"}}
-                    @tagName="div"
-                    @classNames={{this.typeClassNames}}
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @matchTriggerWidth={{false}}
-                    data-test-type-select="true"
-                    as |type|
-                >
-                    {{type.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                {{#unless this.session.user.isAuthorOrContributor}}
-                <PowerSelect
-                    @selected={{this.selectedAuthor}}
-                    @options={{this.availableAuthors}}
-                    @searchField="name"
-                    @onChange={{action "changeAuthor"}}
-                    @tagName="div"
-                    @classNames={{this.authorClassNames}}
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @searchPlaceholder="Search authors"
-                    @matchTriggerWidth={{false}}
-                    data-test-author-select="true"
-                    as |author|
-                >
-                    {{author.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                {{#unless this.session.user.isContributor}}
-                <PowerSelect
-                    @selected={{this.selectedTag}}
-                    @options={{this.availableTags}}
-                    @searchField="name"
-                    @onChange={{action "changeTag"}}
-                    @tagName="div"
-                    @classNames={{this.tagClassNames}}
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @searchPlaceholder="Search tags"
-                    @matchTriggerWidth={{false}}
-                    @optionsComponent="power-select-vertical-collection-options"
-                    data-test-tag-select="true"
-                    as |tag|
-                >
-                    {{tag.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                <PowerSelect
-                    @selected={{this.selectedOrder}}
-                    @options={{this.availableOrders}}
-                    @searchEnabled={{false}}
-                    @onChange={{action "changeOrder"}}
-                    @tagName="div"
-                    @classNames="gh-contentfilter-menu gh-contentfilter-sort"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @matchTriggerWidth={{false}}
-                    @data-test-order-select="true"
-                    as |order|
-                >
-                    {{order.name}}
-                </PowerSelect>
-            </div>
+            <GhContentfilter
+                @selectedType={{this.selectedType}}
+                @availableTypes={{this.availableTypes}}
+                @onTypeChange={{action "changeType"}}
+                @selectedAuthor={{this.selectedAuthor}}
+                @availableAuthors={{this.availableAuthors}}
+                @onAuthorChange={{action "changeAuthor"}}
+                @selectedTag={{this.selectedTag}}
+                @availableTags={{this.availableTags}}
+                @onTagChange={{action "changeTag"}}
+                @selectedOrder={{this.selectedOrder}}
+                @availableOrders={{this.availableOrders}}
+                @onOrderChange={{action "changeOrder"}}
+            />
 
             {{#link-to "editor.new" "page" class="gh-btn gh-btn-green" data-test-new-page-button=true}}<span>New page</span>{{/link-to}}
         </section>

app/templates/posts-loading.hbs

@@ -2,80 +2,20 @@
     <header class="gh-canvas-header post-header">
         <h2 class="gh-canvas-title" data-test-screen-title>Posts</h2>
         <section class="view-actions">
-            <div class="gh-contentfilter">
-                {{#unless this.session.user.isContributor}}
-                <PowerSelect
-                    @selected={{this.selectedType}}
-                    @options={{this.availableTypes}}
-                    @searchEnabled={{false}}
-                    @onChange={{action (mut k)}}
-                    @tagName="div"
-                    @classNames="gh-contentfilter-menu gh-contentfilter-type"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @matchTriggerWidth={{false}}
-                    data-test-type-select="true"
-                    as |type|
-                >
-                    {{type.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                {{#unless this.session.user.isAuthorOrContributor}}
-                <PowerSelect
-                    @selected={{this.selectedAuthor}}
-                    @options={{this.availableAuthors}}
-                    @searchField="name"
-                    @onChange={{action (mut k)}}
-                    @tagName="div"
-                    @classNames="gh-contentfilter-menu gh-contentfilter-author"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @searchPlaceholder="Search authors"
-                    @matchTriggerWidth={{false}}
-                    data-test-author-select="true"
-                    as |author|
-                >
-                    {{author.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                {{#unless this.session.user.isContributor}}
-                <PowerSelect
-                    @selected={{this.selectedTag}}
-                    @options={{this.availableTags}}
-                    @searchField="name"
-                    @onChange={{action (mut k)}}
-                    @tagName="div"
-                    @classNames="gh-contentfilter-menu gh-contentfilter-tag"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @searchPlaceholder="Search tags"
-                    @matchTriggerWidth={{false}}
-                    @optionsComponent="power-select-vertical-collection-options"
-                    data-test-tag-select="true"
-                    as |tag|
-                >
-                    {{tag.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                <PowerSelect
-                    @selected={{this.selectedOrder}}
-                    @options={{this.availableOrders}}
-                    @searchEnabled={{false}}
-                    @onChange={{action (mut k)}}
-                    @tagName="div"
-                    @classNames="gh-contentfilter-menu gh-contentfilter-sort"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @matchTriggerWidth={{false}}
-                    data-test-order-select="true"
-                    as |order|
-                >
-                    {{order.name}}
-                </PowerSelect>
-            </div>
+            <GhContentfilter
+                @selectedType={{this.selectedType}}
+                @availableTypes={{this.availableTypes}}
+                @onTypeChange={{action (mut k)}}
+                @selectedAuthor={{this.selectedAuthor}}
+                @availableAuthors={{this.availableAuthors}}
+                @onAuthorChange={{action (mut k)}}
+                @selectedTag={{this.selectedTag}}
+                @availableTags={{this.availableTags}}
+                @onTagChange={{action (mut k)}}
+                @selectedOrder={{this.selectedOrder}}
+                @availableOrders={{this.availableOrders}}
+                @onOrderChange={{action (mut k)}}
+            />
 
             {{#link-to "editor.new" "post" class="gh-btn gh-btn-green" data-test-new-post-button=true}}<span>New post</span>{{/link-to}}
         </section>

app/templates/posts.hbs

@@ -2,80 +2,20 @@
     <GhCanvasHeader class="gh-canvas-header post-header">
         <h2 class="gh-canvas-title" data-test-screen-title>Posts</h2>
         <section class="view-actions">
-            <div class="gh-contentfilter">
-                {{#unless this.session.user.isContributor}}
-                <PowerSelect
-                    @selected={{this.selectedType}}
-                    @options={{this.availableTypes}}
-                    @searchEnabled={{false}}
-                    @onChange={{action "changeType"}}
-                    @tagName="div"
-                    @classNames={{this.typeClassNames}}
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @matchTriggerWidth={{false}}
-                    data-test-type-select="true"
-                    as |type|
-                >
-                    {{type.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                {{#unless this.session.user.isAuthorOrContributor}}
-                <PowerSelect
-                    @selected={{this.selectedAuthor}}
-                    @options={{this.availableAuthors}}
-                    @searchField="name"
-                    @onChange={{action "changeAuthor"}}
-                    @tagName="div"
-                    @classNames={{this.authorClassNames}}
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @searchPlaceholder="Search authors"
-                    @matchTriggerWidth={{false}}
-                    data-test-author-select="true"
-                    as |author|
-                >
-                    {{author.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                {{#unless this.session.user.isContributor}}
-                <PowerSelect
-                    @selected={{this.selectedTag}}
-                    @options={{this.availableTags}}
-                    @searchField="name"
-                    @onChange={{action "changeTag"}}
-                    @tagName="div"
-                    @classNames={{this.tagClassNames}}
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @searchPlaceholder="Search tags"
-                    @matchTriggerWidth={{false}}
-                    @optionsComponent="power-select-vertical-collection-options"
-                    data-test-tag-select="true"
-                    as |tag|
-                >
-                    {{tag.name}}
-                </PowerSelect>
-                {{/unless}}
-
-                <PowerSelect
-                    @selected={{this.selectedOrder}}
-                    @options={{this.availableOrders}}
-                    @searchEnabled={{false}}
-                    @onChange={{action "changeOrder"}}
-                    @tagName="div"
-                    @classNames="gh-contentfilter-menu gh-contentfilter-sort"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @matchTriggerWidth={{false}}
-                    @data-test-order-select="true"
-                    as |order|
-                >
-                    {{order.name}}
-                </PowerSelect>
-            </div>
+            <GhContentfilter
+                @selectedType={{this.selectedType}}
+                @availableTypes={{this.availableTypes}}
+                @onTypeChange={{action "changeType"}}
+                @selectedAuthor={{this.selectedAuthor}}
+                @availableAuthors={{this.availableAuthors}}
+                @onAuthorChange={{action "changeAuthor"}}
+                @selectedTag={{this.selectedTag}}
+                @availableTags={{this.availableTags}}
+                @onTagChange={{action "changeTag"}}
+                @selectedOrder={{this.selectedOrder}}
+                @availableOrders={{this.availableOrders}}
+                @onOrderChange={{action "changeOrder"}}
+            />
 
             {{#link-to "editor.new" "post" class="gh-btn gh-btn-green" data-test-new-post-button=true}}<span>New post</span>{{/link-to}}
         </section>