feat: 🎸 sessions toolbar implement

2021-10-15 12:08:34 -07:00
1 parent efe6108673
commit 5874438705
@@ -35,3 +35,5 @@ close: Close
 toggle-secret: Toggle secret visibility
 minimize: Minimize
 fullscreen: Fullscreen
+filter: 
+ status: status
@@ -0,0 +1,6 @@
+<div ...attributes class="rose-toolbar">
+  {{yield (hash
+    search=(component "rose/anonymous")
+    filter=(component "rose/anonymous" class="rose-toolbar-search")
+  )}}
+</div>
@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../utilities/component-auto-id';
+
+export default class RoseToolbarComponent extends Component {
+  // =attributes
+
+  id = generateComponentID();
+}
@@ -0,0 +1,27 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+<Meta title="Rose|Toolbar" component="Toolbar" />
+
+# Toolbar
+
+A toolbar component that allows two distinct sections to be configured: search, filter
+
+```htmlbars
+<Rose::Toolbar as |toolbar|>
+  <toolbar.search />
+  <toolbar.filter />
+</Rose::Toolbar>
+```
+
+<Preview>
+  <Story name="Toolbar">{{
+    template: hbs`
+    <Rose::Toolbar as |toolbar|>
+      <toolbar.search style="background: var(--brand-gray-5);">Search</toolbar.search>
+      <toolbar.filter style="background: var(--brand-gray-8);">Filter</toolbar.filter>
+     </Rose::Toolbar>
+    `,
+  }}</Story>
+</Preview>
@@ -18,3 +18,4 @@
@import 'message';
@import 'link-button';
@import 'badge';
+@import 'toolbar';
@@ -0,0 +1,9 @@
+.rose-toolbar {
+  background-color: #fbfbfc;
+  .rose-form {
+    display: flex;
+  }
+  .rose-dropdown {
+    margin-left: auto;
+  }
+}
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/toolbar';
@@ -0,0 +1,21 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/toolbar', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Toolbar />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-toolbar'));
+  });
+
+  test('it renders with filter', async function (assert) {
+    await render(hbs`<Rose::Toolbar as |toolbar| >
+      <toolbar.filter />
+    </Rose::Toolbar>`);
+    assert.ok(find('.rose-toolbar-search'));
+  });
+});
@@ -0,0 +1,13 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeSessionsController extends Controller {
+  // =services
+  @service store;
+
+  // =attributes
+
+  get availableSessions() {
+    return this.store.peekAll('session');
+  }
+}
@@ -15,7 +15,27 @@
  <page.body>

    {{#if @model}}
+      <Rose::Toolbar>
+        <Rose::Form as |form|>
+          <Rose::Dropdown
+            @text={{t 'actions.filter.status'}}
+            @ignoreClickInside={{true}}
+            as |dropdown|
+          >
+            <form.checkboxGroup @name='status' as |checkboxGroup|>
+              {{#each this.availableSessions as |session|}}
+                <dropdown.item>
+                  <checkboxGroup.checkbox
+                    @checked={{session.isCancelable}}
+                    @label={{session.status}}
+                  />
+                </dropdown.item>
+              {{/each}}
+            </form.checkboxGroup>

+          </Rose::Dropdown>
+        </Rose::Form>
+      </Rose::Toolbar>
      <Rose::Table as |table|>
        <table.header as |header|>
          <header.row as |row|>
				`@@ -0,0 +1 @@`
				`export { default } from 'rose/components/rose/toolbar';`