feat(nav): add basic category nav and tagging

addon/components/category-nav.hbs

@@ -0,0 +1,19 @@
+<nav
+  class="uk-background-muted uk-border-right"
+  {{did-insert (perform this.fetchCategories)}}
+>
+  <div
+    class="uk-padding-small uk-margin-top uk-width-1 uk-text-bold uk-border-horizontal"
+  >
+    <div class="uk-text-center">
+      Kategorien
+    </div>
+  </div>
+  <ul class="uk-nav uk-width-medium uk-margin-top">
+    {{#each this.categories as |category|}}
+      <CategoryNav::Category @category={{category}} @selected={{eq category.id @selected}} />
+    {{else}}
+      No categories
+    {{/each}}
+  </ul>
+</nav>

addon/components/category-nav.js

@@ -0,0 +1,13 @@
+import Component from "@glimmer/component";
+import { lastValue, task } from "ember-concurrency-decorators";
+import { inject as service } from "@ember/service";
+
+export default class CategoryNavComponent extends Component {
+  @service store;
+
+  @lastValue("fetchCategories") categories;
+  @task
+  *fetchCategories() {
+    return yield this.store.findAll("category");
+  }
+}

addon/components/category-nav/category.hbs

@@ -0,0 +1,17 @@
+<li class="category-nav--category">
+  <LinkTo @query={{hash category=@category.id}} class={{if @slected "active"}}>
+    <div class="uk-flex uk-flex-middle">
+      <div>
+        <FaIcon
+          @icon="folder"
+          @size="2x"
+          class="uk-margin-right"
+          {{set-style color=@category.color}}
+        />
+      </div>
+      <div>
+        {{@category.name}}
+      </div>
+    </div>
+  </LinkTo>
+</li>

addon/components/document-card.hbs

@@ -0,0 +1,18 @@
+<div
+  class="document-card uk-card uk-card-body uk-border-rounded-circular uk-padding-remove"
+>
+  <div class="uk-card-media-top uk-text-center uk-border-bottom uk-padding">
+    <FaIcon
+      @icon="file-alt"
+      @prefix="far"
+      @size="7x"
+      {{set-style color=@document.category.color}}
+    />
+  </div>
+  <div
+    class="uk-card-body uk-padding-small uk-flex uk-flex-between document-name"
+  >
+    {{@document.name}}
+    <FaIcon @icon="ellipsis-v" />
+  </div>
+</div>

addon/components/document-grid.hbs

@@ -0,0 +1,16 @@
+<div
+  class="uk-padding-small uk-overflow-auto uk-flex-center"
+  uk-grid
+  ...attributes
+  {{did-insert (perform this.fetchDocuments)}}
+  {{did-update (perform this.fetchDocuments) @filters}}
+>
+  {{#each this.documents as |document|}}
+    {{! This wrapper div is needed for the uk-grid spacing between elements }}
+    <div>
+      <DocumentCard @document={{document}} />
+    </div>
+  {{else}}
+    No documents
+  {{/each}}
+</div>

addon/components/document-grid.js

@@ -0,0 +1,16 @@
+import Component from "@glimmer/component";
+import { lastValue, task } from "ember-concurrency-decorators";
+import { inject as service } from "@ember/service";
+
+export default class DocumentGridComponent extends Component {
+  @service store;
+
+  @lastValue("fetchDocuments") documents;
+  @task
+  *fetchDocuments() {
+    return yield this.store.query("document", {
+      include: "category",
+      ...this.args.filters,
+    });
+  }
+}

addon/components/file-upload-button.hbs

@@ -0,0 +1,10 @@
+<div class="uk-height-1-1" uk-form-custom ...attributes>
+  <input type="file" multiple {{on "change" this.upload}} />
+  <button
+    class="uk-button uk-button-primary  uk-height-1-1"
+    type="button"
+    tabindex="-1"
+  >
+    Upload File
+  </button>
+</div>

addon/components/file-upload-button.js

@@ -0,0 +1,9 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+
+export default class FileUploadButtonComponent extends Component {
+  @service notification;
+
+  @action upload() {}
+}

addon/components/search.hbs

@@ -0,0 +1,10 @@
+<div class="uk-background-muted uk-padding-small uk-border-bottom">
+  <form class="uk-background-default uk-search uk-search-default uk-width-1">
+    <a href="" uk-search-icon></a>
+    <input
+      type="search"
+      class="uk-search-input uk-background-default"
+      placeholder="Search..."
+    />
+  </form>
+</div>

addon/components/tag-filter.hbs

@@ -0,0 +1,19 @@
+<div
+  class="uk-border uk-padding-small uk-width-expand"
+  ...attributes
+  {{did-insert (perform this.fetchTags)}}
+  {{did-update (perform this.fetchTags) @filters}}
+>
+  {{#each this.tags as |tag|}}
+    <span
+      class="uk-badge {{
+        if (contains tag.id @selectedTags) "uk-background-secondary"
+      }}"
+      {{on "click" (fn this.toggleTag tag)}}
+    >
+      {{tag.name}}
+    </span>
+  {{else}}
+    No tags...
+  {{/each}}
+</div>

addon/components/tag-filter.js

@@ -0,0 +1,29 @@
+import Component from "@glimmer/component";
+import { lastValue, task } from "ember-concurrency-decorators";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+
+export default class TagFilterComponent extends Component {
+  @service store;
+  @service router;
+
+  @lastValue("fetchTags") tags;
+
+  @task
+  *fetchTags() {
+    return yield this.store.query("tag", {
+      ...this.args.filters,
+    });
+  }
+
+  @action
+  toggleTag(tag) {
+    this.router.transitionTo({
+      queryParams: {
+        tags: this.args.selectedTags.includes(tag.id)
+          ? this.args.selectedTags.filter((tagId) => tag.id !== tagId)
+          : [...this.args.selectedTags, tag.id],
+      },
+    });
+  }
+}

addon/controllers/application.js

@@ -0,0 +1,8 @@
+import Controller from "@ember/controller";
+import { tracked } from "@glimmer/tracking";
+
+export default class ApplicationController extends Controller {
+  queryParams = ["category", "tags"];
+  @tracked category;
+  @tracked tags = [];
+}

addon/engine.js

@@ -11,7 +11,7 @@ export default class EmberAlexandriaEngine extends Engine {
   Resolver = Resolver;
 
   dependencies = {
-    services: ["store", "intl", "notification"],
+    services: ["store", "intl", "notification", "router"],
   };
 }
 

addon/models/category.js

@@ -0,0 +1,10 @@
+import Model, { attr, hasMany } from "@ember-data/model";
+
+export default class CategoryModel extends Model {
+  @attr name;
+  @attr description;
+  @attr color;
+
+
+  @hasMany documents;
+}

addon/models/document.js

@@ -0,0 +1,9 @@
+import Model, { attr, belongsTo, hasMany } from "@ember-data/model";
+
+export default class DocumentModel extends Model {
+  @attr name;
+  @attr description;
+
+  @belongsTo category;
+  @hasMany tags;
+}

addon/models/tag.js

@@ -0,0 +1,9 @@
+import Model, { attr, hasMany } from "@ember-data/model";
+
+export default class TagModel extends Model {
+  @attr name;
+  @attr description;
+
+  @hasMany documents;
+
+}

addon/modifiers/set-style.js

@@ -0,0 +1,7 @@
+import { modifier } from "ember-modifier";
+
+export default modifier(function setStyle(element, _, styles) {
+  Object.entries(styles).forEach(([key, value]) => {
+    element.style[key] = value;
+  });
+});

addon/templates/application.hbs

@@ -1 +1,20 @@
-<h2 id="title">Welcome to Ember</h2>
+<div class="uk-flex uk-flex-1 uk-height-1-1 uk-border uk-background-default">
+  <CategoryNav @selected={{this.category}} />
+  <section class="uk-width-1 uk-flex uk-flex-column uk-overflow-hidden">
+    <Search />
+
+    <div class="uk-flex uk-flex-middle uk-padding-small">
+      <FileUploadButton />
+      <TagFilter
+        @filters={{hash category=this.category}}
+        @selectedTags={{this.tags}}
+        class="uk-margin-left"
+      />
+    </div>
+
+    <DocumentGrid
+      @filters={{hash category=this.category}}
+      class="uk-border-top"
+    />
+  </section>
+</div>

app/models/category.js

@@ -0,0 +1 @@
+export { default } from 'ember-alexandria/models/category';

app/models/document.js

@@ -0,0 +1 @@
+export { default } from 'ember-alexandria/models/document';

app/models/tag.js

@@ -0,0 +1 @@
+export { default } from 'ember-alexandria/models/tag';

app/styles/_custom-uikit-rules.scss

@@ -0,0 +1,37 @@
+@use "ember-uikit/variables-theme" as uikit;
+
+[class*="uk-border"] {
+  border: uikit.$global-border-width solid uikit.$global-border;
+}
+
+.uk-border-horizontal {
+  border-style: solid none;
+}
+
+.uk-border-top {
+  border-style: solid none none none;
+}
+
+.uk-border-bottom {
+  border-style: none none solid none;
+}
+
+.uk-border-left {
+  border-style: none none none solid;
+}
+
+.uk-border-right {
+  border-style: none solid none none;
+}
+
+.uk-border-rounded {
+  border-radius: uikit.$border-rounded-border-radius;
+
+  &-circular {
+    border-radius: calc(#{uikit.$border-rounded-border-radius} * 2);
+  }
+
+  &-angular {
+    border-radius: calc(#{uikit.$border-rounded-border-radius} / 2);
+  }
+}

app/styles/components/_document-card.scss

@@ -0,0 +1,17 @@
+@use "ember-uikit" as uikit;
+
+.document-card {
+  min-width: 200px;
+
+  transition: box-shadow uikit.$animation-duration,
+    color uikit.$animation-duration, border uikit.$animation-duration;
+
+  &:hover {
+    @extend .uk-box-shadow-medium;
+    // border: none;
+  }
+
+  .document-name {
+    font-size: 1rem;
+  }
+}

app/styles/components/category-nav/_category.scss

@@ -0,0 +1,20 @@
+@use "ember-uikit" as uikit;
+
+@mixin active {
+  background: uikit.$background-default-background;
+}
+
+.uk-nav .category-nav--category a {
+  transition: background uikit.$animation-duration,
+    box-shadow uikit.$animation-duration, color uikit.$animation-duration;
+  padding: 10px 0 10px 50px;
+
+  &.active {
+    @include active;
+  }
+
+  &:hover {
+    @include active;
+    @extend .uk-box-shadow-small;
+  }
+}

app/styles/ember-alexandria.scss

@@ -0,0 +1,5 @@
+@use "custom-uikit-rules";
+
+// Components
+@use "components/category-nav/category";
+@use "components/document-card";

config/icons.js

@@ -0,0 +1,6 @@
+module.exports = function () {
+  return {
+    "free-solid-svg-icons": ["folder", "ellipsis-v"],
+    "free-regular-svg-icons": ["file-alt"],
+  };
+};