feat: 🎸 add filters to sessions

addons/api/addon/services/resource-filter-store.js

@@ -104,7 +104,6 @@ export default class ResourceFilterStoreService extends Service {
     const query = Object.assign({}, storeQuery);
     // Apply filters to store query when available
     if (filter.queryExpression) query.filter = filter.queryExpression;
-    console.log(modelName, query, 'queryyyyy', this.store.query(modelName, query))
     return this.store.query(modelName, query);
   }
 }

addons/core/addon/helpers/resource-filter-param.js

@@ -49,19 +49,14 @@ export default class ResourceFilterParamHelper extends Helper {
    * @return {object}
    */
   compute([routeName, name]) {
-    console.log(routeName, name, 'route namess')
     const owner = getOwner(this);
     // Filter options
     const route = owner.lookup(`route:${routeName}`);
     const filterAllowedValuesKey = `filter-allowed-values-${name}`;
-    console.log(route, filterAllowedValuesKey, 'foiltallowed values')
     const allowedValues = route[filterAllowedValuesKey];
-    console.log(allowedValues, 'allowed values')
-
     // Selected filters
     const rawValue = route[name];
     const selectedValue = rawValue || null;
-    console.log(name, allowedValues, selectedValue, 'pfcrrfe')
     return { name, allowedValues, selectedValue };
   }
 

addons/rose/addon/components/rose/dropdown/index.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
-import { boolean, object } from '@storybook/addon-knobs';
+import { number, boolean, object } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose|Dropdown" component="Dropdown" />

addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss

@@ -103,6 +103,10 @@ $chevronGrey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%2362
 
   &[open] > .rose-dropdown-trigger {
     background-color: var(--ui-gray-subtler-4);
+
+    .rose-badge {
+      --background-color: var(--ui-gray-subtler-3);
+    }
   }
 
   .rose-dropdown-content {

ui/admin/app/routes/scopes/scope/auth-methods.js

@@ -39,8 +39,6 @@ export default class ScopesScopeAuthMethodsRoute extends Route {
       this.can.can('list collection', scope, { collection: 'auth-methods' })
     ) {
       const { type } = this;
-      console.log(type, 'what is type in authhh')
-
       return this.resourceFilterStore.queryBy(
         'auth-method',
         { type },

ui/admin/app/routes/scopes/scope/sessions.js

@@ -57,8 +57,6 @@ export default class ScopesScopeSessionsRoute extends Route {
    */
   async model() {
     const { id: scope_id } = this.modelFor('scopes.scope');
-  //  const sessions = await this.store.query('session', { scope_id });
-
     const { status } = this;
     const sessions = await this.resourceFilterStore.queryBy(
       'session',
@@ -91,7 +89,6 @@ export default class ScopesScopeSessionsRoute extends Route {
       ...sortedSessionAggregates.filter((aggregate) => aggregate.session.status === 'active'),
       ...sortedSessionAggregates.filter((aggregate) => aggregate.session.status !== 'active'),
     ];
-    console.log(sessionAggregates, 'sorted aggrefa')
     return sortedSessionAggregates;
   }
 
@@ -129,7 +126,6 @@ export default class ScopesScopeSessionsRoute extends Route {
    */
     @action
     filterBy(field, value) {
-      console.log(field, value, 'actionnnn')
       this[field] = value;
     }
   

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -13,60 +13,50 @@
   </page.header>
 
   <page.body>
-    {{{log  @model (has-resource-filter-param-selections 'scopes.scope.sessions') 'ppppp'}}}
-    {{{log (resource-filter-param 'scopes.scope.sessions' 'status') 'ferfre' }}}
+    {{#if
+      (or @model (has-resource-filter-param-selections 'scopes.scope.sessions'))
+    }}
+      <Rose::Toolbar>
+        <Rose::Form as |form|>
+          {{#with
+            (resource-filter-param 'scopes.scope.sessions' 'status')
+            as |filter|
+          }}
+            <Rose::Dropdown
+              @text={{t (concat 'form.' filter.name '.label')}}
+              @count={{filter.selectedValue.length}}
+              @ignoreClickInside={{true}}
+              as |dropdown|
+            >
 
-      {{#if
-        (or
-          @model
-          (has-resource-filter-param-selections 'scopes.scope.sessions')
-        )
-      }}
-        <Rose::Toolbar>
-          <Rose::Form as |form|>
-            {{#with
-              (resource-filter-param 'scopes.scope.sessions' 'status')
-              as |filter|
-            }}
-              <Rose::Dropdown
-                @text={{t (concat 'form.' filter.name '.label')}}
-                @count={{filter.selectedValue.length}}
-                @ignoreClickInside={{true}}
-                as |dropdown|
+              <form.checkboxGroup
+                @name={{filter.name}}
+                @items={{filter.allowedValues}}
+                @selectedItems={{filter.selectedValue}}
+                @onChange={{route-action 'filterBy' filter.name}}
+                as |group|
               >
-            
-                <form.checkboxGroup
-                  @name={{filter.name}}
-                  @items={{filter.allowedValues}}
-                  @selectedItems={{filter.selectedValue}}
-                  @onChange={{route-action 'filterBy' filter.name}}
-                  as |group|
-                >
-                  <dropdown.item>
-                    <group.checkbox
-                      @label={{t
-                        (concat 'resources.session.status.' group.item)
-                      }}
-                      value={{group.item}}
-                    />
-                  </dropdown.item>
-                </form.checkboxGroup>
-              </Rose::Dropdown>
-            {{/with}}
+                <dropdown.item>
+                  <group.checkbox
+                    @label={{t (concat 'resources.session.status.' group.item)}}
+                    value={{group.item}}
+                  />
+                </dropdown.item>
+              </form.checkboxGroup>
+            </Rose::Dropdown>
+          {{/with}}
 
-            {{#if
-              (has-resource-filter-param-selections 'scopes.scope.sessions')
-            }}
-              <Rose::Button
-                @style='inline-link-action'
-                @iconLeft='flight-icons/svg/x-16'
-                {{on 'click' (route-action 'clearAllFilters')}}
-              >{{t 'actions.clear-all-filters'}}
-              </Rose::Button>
-            {{/if}}
-          </Rose::Form>
-        </Rose::Toolbar>
-      {{/if}}
+          {{#if (has-resource-filter-param-selections 'scopes.scope.sessions')}}
+            <Rose::Button
+              @style='inline-link-action'
+              @iconLeft='flight-icons/svg/x-16'
+              {{on 'click' (route-action 'clearAllFilters')}}
+            >{{t 'actions.clear-all-filters'}}
+            </Rose::Button>
+          {{/if}}
+        </Rose::Form>
+      </Rose::Toolbar>
+    {{/if}}
 
     {{#if @model}}
       <Rose::Table as |table|>
@@ -139,9 +129,7 @@
           {{/each}}
         </table.body>
       </Rose::Table>
-      {{else if (has-resource-filter-param-selections
-      'scopes.scope.sessions'
-    )}}
+    {{else if (has-resource-filter-param-selections 'scopes.scope.sessions')}}
       <Rose::Layout::Centered>
         <Rose::Message @title={{t 'titles.no-results'}} as |message|>
           <message.description>
@@ -149,8 +137,8 @@
           </message.description>
         </Rose::Message>
       </Rose::Layout::Centered>
-      {{else}}
-       <Rose::Layout::Centered>
+    {{else}}
+      <Rose::Layout::Centered>
         <Rose::Message
           @title={{t 'resources.session.messages.none.title'}}
           as |message|
@@ -160,6 +148,6 @@
           </message.description>
         </Rose::Message>
       </Rose::Layout::Centered>
-{{/if}}
+    {{/if}}
   </page.body>
 </Rose::Layout::Page>