From 7696fc62ef7a20cfa2dbe6656bea775d5d7dd259 Mon Sep 17 00:00:00 2001
From: yelinz <yelin.zhang@adfinis.com>
Date: Mon, 3 May 2021 18:05:57 +0200
Subject: [PATCH] feat(ember): add work item list

---
 ember/app/caluma-query/models/work-item.js    | 162 ++++++++++++++
 ember/app/cases/detail/template.hbs           |   3 +
 .../detail/work-items/edit/controller.js      |   3 +
 .../detail/work-items/edit/form/controller.js |  49 +++++
 .../detail/work-items/edit/form/route.js      |  12 ++
 .../detail/work-items/edit/form/template.hbs  |  12 ++
 .../work-items/edit/index/controller.js       | 100 +++++++++
 .../detail/work-items/edit/index/route.js     |   7 +
 .../detail/work-items/edit/index/template.hbs | 176 +++++++++++++++
 .../app/cases/detail/work-items/edit/route.js |   7 +
 .../cases/detail/work-items/edit/template.hbs |   1 +
 .../detail/work-items/index/controller.js     |  53 +++++
 .../cases/detail/work-items/index/route.js    |  28 +++
 .../detail/work-items/index/template.hbs      |  18 ++
 .../app/components/context-menu/component.js  |  25 +++
 .../app/components/context-menu/template.hbs  |  25 +++
 .../filters/radio-buttons/template.hbs        |  13 ++
 ember/app/components/filters/template.hbs     |   3 +
 ember/app/components/nav-bar/template.hbs     |   5 +
 .../app/components/notifications/component.js |  24 +++
 .../app/components/notifications/template.hbs |   8 +
 ember/app/components/pagination/template.hbs  |  14 ++
 .../components/work-item-list/component.js    |  19 ++
 .../work-item-list/item/component.js          |  91 ++++++++
 .../work-item-list/item/template.hbs          |  53 +++++
 .../components/work-item-list/template.hbs    |  37 ++++
 .../gql/mutations/complete-work-item.graphql  |   5 +
 .../app/gql/mutations/save-work-item.graphql  |  12 ++
 ember/app/gql/queries/get-case.graphql        |   2 +-
 ember/app/gql/queries/get-cases.graphql       |   2 +-
 .../register-caluma-query-model-work-item.js  |   9 +
 ember/app/router.js                           |  12 ++
 ember/app/services/notification.js            |  29 +++
 ember/app/styles/app.scss                     |   3 +
 .../styles/components/context-menu/index.scss |  39 ++++
 .../components/filters/_radio-buttons.scss    |  24 +++
 .../app/styles/components/filters/index.scss  |   9 +
 .../components/work-item-list/index.scss      |  64 ++++++
 .../app/work-items/detail/edit/controller.js  | 100 +++++++++
 ember/app/work-items/detail/edit/route.js     |   7 +
 ember/app/work-items/detail/edit/template.hbs | 201 ++++++++++++++++++
 ember/app/work-items/detail/index/route.js    |   7 +
 ember/app/work-items/detail/route.js          |  11 +
 ember/app/work-items/index/controller.js      |  82 +++++++
 ember/app/work-items/index/route.js           |   8 +
 ember/app/work-items/index/template.hbs       |  71 +++++++
 ember/app/work-items/template.hbs             |   1 +
 ember/package.json                            |   5 +-
 .../components/filters/component-test.js      |  17 ++
 .../filters/radio-buttons/component-test.js   |  17 ++
 .../notifications/component-test.js           |  17 ++
 .../components/pagination/component-test.js   |  17 ++
 ember/translations/en.yaml                    |  59 +++++
 ember/yarn.lock                               |  27 +++
 54 files changed, 1802 insertions(+), 3 deletions(-)
 create mode 100644 ember/app/caluma-query/models/work-item.js
 create mode 100644 ember/app/cases/detail/work-items/edit/controller.js
 create mode 100644 ember/app/cases/detail/work-items/edit/form/controller.js
 create mode 100644 ember/app/cases/detail/work-items/edit/form/route.js
 create mode 100644 ember/app/cases/detail/work-items/edit/form/template.hbs
 create mode 100644 ember/app/cases/detail/work-items/edit/index/controller.js
 create mode 100644 ember/app/cases/detail/work-items/edit/index/route.js
 create mode 100644 ember/app/cases/detail/work-items/edit/index/template.hbs
 create mode 100644 ember/app/cases/detail/work-items/edit/route.js
 create mode 100644 ember/app/cases/detail/work-items/edit/template.hbs
 create mode 100644 ember/app/cases/detail/work-items/index/controller.js
 create mode 100644 ember/app/cases/detail/work-items/index/route.js
 create mode 100644 ember/app/cases/detail/work-items/index/template.hbs
 create mode 100644 ember/app/components/context-menu/component.js
 create mode 100644 ember/app/components/context-menu/template.hbs
 create mode 100644 ember/app/components/filters/radio-buttons/template.hbs
 create mode 100644 ember/app/components/filters/template.hbs
 create mode 100644 ember/app/components/notifications/component.js
 create mode 100644 ember/app/components/notifications/template.hbs
 create mode 100644 ember/app/components/pagination/template.hbs
 create mode 100644 ember/app/components/work-item-list/component.js
 create mode 100644 ember/app/components/work-item-list/item/component.js
 create mode 100644 ember/app/components/work-item-list/item/template.hbs
 create mode 100644 ember/app/components/work-item-list/template.hbs
 create mode 100644 ember/app/gql/mutations/complete-work-item.graphql
 create mode 100644 ember/app/gql/mutations/save-work-item.graphql
 create mode 100644 ember/app/initializers/register-caluma-query-model-work-item.js
 create mode 100644 ember/app/services/notification.js
 create mode 100644 ember/app/styles/components/context-menu/index.scss
 create mode 100644 ember/app/styles/components/filters/_radio-buttons.scss
 create mode 100644 ember/app/styles/components/filters/index.scss
 create mode 100644 ember/app/styles/components/work-item-list/index.scss
 create mode 100644 ember/app/work-items/detail/edit/controller.js
 create mode 100644 ember/app/work-items/detail/edit/route.js
 create mode 100644 ember/app/work-items/detail/edit/template.hbs
 create mode 100644 ember/app/work-items/detail/index/route.js
 create mode 100644 ember/app/work-items/detail/route.js
 create mode 100644 ember/app/work-items/index/controller.js
 create mode 100644 ember/app/work-items/index/route.js
 create mode 100644 ember/app/work-items/index/template.hbs
 create mode 100644 ember/app/work-items/template.hbs
 create mode 100644 ember/tests/integration/components/filters/component-test.js
 create mode 100644 ember/tests/integration/components/filters/radio-buttons/component-test.js
 create mode 100644 ember/tests/integration/components/notifications/component-test.js
 create mode 100644 ember/tests/integration/components/pagination/component-test.js

diff --git a/ember/app/caluma-query/models/work-item.js b/ember/app/caluma-query/models/work-item.js
new file mode 100644
index 00000000..10156f0b
--- /dev/null
+++ b/ember/app/caluma-query/models/work-item.js
@@ -0,0 +1,162 @@
+import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import saveWorkItemMutation from "caluma-portal-demo/gql/mutations/save-work-item";
+import { queryManager } from "ember-apollo-client";
+import WorkItemModel from "ember-caluma/caluma-query/models/work-item";
+
+export default class CustomWorkItemModel extends WorkItemModel {
+  @queryManager apollo;
+
+  @service store;
+  @service router;
+  @service intl;
+  @service notifications;
+
+  @tracked meta = this.raw.meta;
+  @tracked notViewed = this.raw.meta["not-viewed"];
+  @tracked assignedUsers = this.raw.assignedUsers;
+  @tracked addressedGroups = this.raw.addressedGroups;
+
+  get assignedUser() {
+    return this.assignedUsers;
+  }
+  set assignedUser(user) {
+    this.assignedUsers = [user];
+  }
+
+  get addressedGroup() {
+    return this.addressedGroups;
+  }
+
+  get closedByUser() {
+    return this.raw.closedByUser;
+  }
+
+  get createdByUser() {
+    return this.raw.createdByUser;
+  }
+
+  get createdByGroup() {
+    return this.raw.createdByGroup;
+  }
+
+  get isReady() {
+    return this.raw.status === "READY";
+  }
+
+  get isCompleted() {
+    return this.raw.status === "COMPLETED";
+  }
+
+  get canEdit() {
+    return this.isReady;
+  }
+
+  get canEditAsCreator() {
+    return this.isReady;
+  }
+
+  get canComplete() {
+    return this.isReady;
+  }
+
+  get responsible() {
+    return this.assignedUser;
+  }
+
+  get case() {
+    return this.raw.case.parentWorkItem?.case || this.raw.case;
+  }
+
+  get calumaForm() {
+    return null;
+  }
+
+  async toggleRead() {
+    try {
+      this.notViewed = !this.notViewed;
+
+      await this.apollo.mutate({
+        mutation: saveWorkItemMutation,
+        variables: {
+          input: {
+            workItem: this.id,
+            meta: JSON.stringify({
+              ...this.raw.meta,
+              "not-viewed": this.notViewed,
+            }),
+          },
+        },
+      });
+
+      return true;
+    } catch (error) {
+      this.notifications.error(this.intl.t("workItems.saveError"));
+    }
+  }
+
+  async assignToMe() {
+    return await this.assignToUser(/* TODO current user*/);
+  }
+
+  async assignToUser(user) {
+    try {
+      this.assignedUser = user;
+
+      await this.apollo.mutate({
+        mutation: saveWorkItemMutation,
+        variables: {
+          input: {
+            workItem: this.id,
+            assignedUsers: this.assignedUsers,
+          },
+        },
+      });
+
+      return true;
+    } catch (error) {
+      this.notifications.error(this.intl.t("workItems.saveError"));
+    }
+  }
+
+  static fragment = `{
+    createdAt
+    createdByUser
+    createdByGroup
+    closedAt
+    closedByUser
+    closedByGroup
+    status
+    meta
+    addressedGroups
+    controllingGroups
+    assignedUsers
+    name
+    deadline
+    description
+    document {
+      id
+      form {
+        slug
+      }
+    }
+    case {
+      id
+      meta
+      document {
+        id
+        form {
+          slug
+          name
+        }
+      }
+    }
+    task {
+      slug
+      name
+      description
+      meta
+      __typename
+    }
+  }`;
+}
diff --git a/ember/app/cases/detail/template.hbs b/ember/app/cases/detail/template.hbs
index 4bf8cae7..966ee5eb 100644
--- a/ember/app/cases/detail/template.hbs
+++ b/ember/app/cases/detail/template.hbs
@@ -16,6 +16,9 @@
     <tab.link-item @route="cases.detail.index" @model={{this.caseNode}}>
       {{t "documents.subnav.overview"}}
     </tab.link-item>
+    <tab.link-item @route="cases.detail.work-items" @model={{this.caseNode}}>
+      {{t "documents.subnav.workItems"}}
+    </tab.link-item>
     <tab.link-item @route="cases.detail.edit" @model={{this.caseNode}}>
       {{t "documents.subnav.document"}}
     </tab.link-item>
diff --git a/ember/app/cases/detail/work-items/edit/controller.js b/ember/app/cases/detail/work-items/edit/controller.js
new file mode 100644
index 00000000..4f653f7a
--- /dev/null
+++ b/ember/app/cases/detail/work-items/edit/controller.js
@@ -0,0 +1,3 @@
+import Controller from "@ember/controller";
+
+export default class CasesDetailWorkItemsEditController extends Controller {}
diff --git a/ember/app/cases/detail/work-items/edit/form/controller.js b/ember/app/cases/detail/work-items/edit/form/controller.js
new file mode 100644
index 00000000..cb06ac56
--- /dev/null
+++ b/ember/app/cases/detail/work-items/edit/form/controller.js
@@ -0,0 +1,49 @@
+import Controller from "@ember/controller";
+import { inject as service } from "@ember/service";
+import completeWorkItem from "caluma-portal-demo/gql/mutations/complete-work-item";
+import { queryManager } from "ember-apollo-client";
+import calumaQuery from "ember-caluma/caluma-query";
+import { allWorkItems } from "ember-caluma/caluma-query/queries";
+import {
+  dropTask,
+  restartableTask,
+  lastValue,
+} from "ember-concurrency-decorators";
+
+export default class CasesDetailWorkItemsEditFormController extends Controller {
+  @queryManager apollo;
+
+  @service store;
+  @service notifications;
+  @service intl;
+  @service moment;
+
+  @lastValue("fetchWorkItems") workItem;
+
+  @calumaQuery({ query: allWorkItems })
+  workItemsQuery;
+
+  @restartableTask()
+  *fetchWorkItems(model) {
+    if (typeof model === "object") {
+      return model;
+    }
+    try {
+      yield this.workItemsQuery.fetch({ filter: [{ id: model }] });
+
+      return this.workItemsQuery.value[0];
+    } catch (error) {
+      console.error(error);
+      this.notifications.error(this.intl.t("workItems.fetchError"));
+    }
+  }
+
+  @dropTask()
+  *completeWorkItem() {
+    yield this.apollo.mutate({
+      mutation: completeWorkItem,
+      variables: { id: this.workItem.id },
+    });
+    this.transitionToRoute("cases.detail.work-items");
+  }
+}
diff --git a/ember/app/cases/detail/work-items/edit/form/route.js b/ember/app/cases/detail/work-items/edit/form/route.js
new file mode 100644
index 00000000..ab618e39
--- /dev/null
+++ b/ember/app/cases/detail/work-items/edit/form/route.js
@@ -0,0 +1,12 @@
+import Route from "@ember/routing/route";
+
+export default class CasesDetailWorkItemsEditFormRoute extends Route {
+  model() {
+    return this.modelFor("cases.detail.work-items.edit");
+  }
+
+  setupController(controller, model) {
+    super.setupController(controller, model);
+    controller.fetchWorkItems.perform(model);
+  }
+}
diff --git a/ember/app/cases/detail/work-items/edit/form/template.hbs b/ember/app/cases/detail/work-items/edit/form/template.hbs
new file mode 100644
index 00000000..5a860083
--- /dev/null
+++ b/ember/app/cases/detail/work-items/edit/form/template.hbs
@@ -0,0 +1,12 @@
+<h3>{{this.workItem.name}}</h3>
+
+{{#if this.fetchWorkItems.isRunning}}
+  <div class="uk-text-center uk-padding">
+    <UkSpinner @ratio={{2}} />
+  </div>
+{{else}}
+  <CfContent @documentId={{this.workItem.document.id}}
+    @context={{hash completeCallback=(perform this.completeWorkItem)}}
+    @disabled={{not this.workItem.isReady}}
+  />
+{{/if}}
\ No newline at end of file
diff --git a/ember/app/cases/detail/work-items/edit/index/controller.js b/ember/app/cases/detail/work-items/edit/index/controller.js
new file mode 100644
index 00000000..f6c923ea
--- /dev/null
+++ b/ember/app/cases/detail/work-items/edit/index/controller.js
@@ -0,0 +1,100 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import completeWorkItem from "caluma-portal-demo/gql/mutations/complete-work-item";
+import saveWorkItem from "caluma-portal-demo/gql/mutations/save-work-item";
+import { queryManager } from "ember-apollo-client";
+import calumaQuery from "ember-caluma/caluma-query";
+import { allWorkItems } from "ember-caluma/caluma-query/queries";
+import { dropTask } from "ember-concurrency-decorators";
+import moment from "moment";
+
+export default class CasesDetailWorkItemsEditController extends Controller {
+  @queryManager apollo;
+
+  @service store;
+  @service notifications;
+  @service intl;
+  @service moment;
+
+  @tracked workItem;
+
+  @calumaQuery({ query: allWorkItems, options: "options" })
+  workItemsQuery;
+
+  get options() {
+    return {
+      pageSize: 1,
+    };
+  }
+
+  @dropTask()
+  *fetchWorkItems() {
+    try {
+      yield this.workItemsQuery.fetch({ filter: [{ id: this.model }] });
+
+      this.workItem = this.workItemsQuery.value[0];
+    } catch (error) {
+      this.notifications.error(this.intl.t("workItems.fetchError"));
+    }
+  }
+
+  @dropTask
+  *finishWorkItem(event) {
+    event.preventDefault();
+
+    try {
+      yield this.apollo.mutate({
+        mutation: saveWorkItem,
+        variables: {
+          input: {
+            workItem: this.workItem.id,
+            meta: JSON.stringify(this.workItem.meta),
+          },
+        },
+      });
+
+      yield this.apollo.mutate({
+        mutation: completeWorkItem,
+        variables: { id: this.workItem.id },
+      });
+
+      this.notifications.success(this.intl.t("workItems.finishSuccess"));
+
+      this.transitionToRoute("cases.detail.work-items.index");
+    } catch (error) {
+      this.notifications.error(this.intl.t("workItems.saveError"));
+    }
+  }
+
+  @dropTask
+  *saveManualWorkItem(event) {
+    event.preventDefault();
+
+    try {
+      yield this.apollo.mutate({
+        mutation: saveWorkItem,
+        variables: {
+          input: {
+            workItem: this.workItem.id,
+            description: this.workItem.description,
+            deadline: this.workItem.deadline,
+            meta: JSON.stringify(this.workItem?.meta),
+          },
+        },
+      });
+
+      this.notifications.success(this.intl.t("workItems.saveSuccess"));
+
+      this.transitionToRoute("cases.detail.work-items.index");
+    } catch (error) {
+      this.notifications.error(this.intl.t("workItems.saveError"));
+    }
+  }
+
+  @action
+  setDeadline(value) {
+    this.workItem.deadline = moment(value);
+  }
+}
diff --git a/ember/app/cases/detail/work-items/edit/index/route.js b/ember/app/cases/detail/work-items/edit/index/route.js
new file mode 100644
index 00000000..1cfcf4f9
--- /dev/null
+++ b/ember/app/cases/detail/work-items/edit/index/route.js
@@ -0,0 +1,7 @@
+import Route from "@ember/routing/route";
+
+export default class CasesDetailWorkItemsEditRoute extends Route {
+  model() {
+    return this.modelFor("cases.detail.work-items.edit");
+  }
+}
diff --git a/ember/app/cases/detail/work-items/edit/index/template.hbs b/ember/app/cases/detail/work-items/edit/index/template.hbs
new file mode 100644
index 00000000..7e989a5a
--- /dev/null
+++ b/ember/app/cases/detail/work-items/edit/index/template.hbs
@@ -0,0 +1,176 @@
+<Notifications />
+
+<h1 {{did-insert (perform this.fetchWorkItems)}}>
+  {{t "workItems.edit"}}
+</h1>
+
+<hr>
+
+<h2>
+  {{this.workItem.task.name}}
+</h2>
+
+<div class="work-item-attributes">
+  {{#if this.workItem.isCompleted}}
+    <div class="work-item-attribute">
+      <span class="work-item-attribute__title">
+        {{t "workItems.closedBy"}}
+      </span>
+      {{this.workItem.closedByUser.fullName}}
+    </div>
+    <div class="work-item-attribute">
+      <span class="work-item-attribute__title">
+        {{t "workItems.closedAt"}}
+      </span>
+      {{
+      format-date
+        this.workItem.closedAt
+        day="2-digit"
+        month="2-digit"
+        year="numeric"
+        hour="2-digit"
+        minute="2-digit"
+        hour12=false
+      }}
+    </div>
+    <div class="work-item-attribute">
+      <span class="work-item-attribute__title">
+        {{t "workItems.comment"}}
+      </span>
+      {{or this.workItem.meta.completion-comment "-"}}
+    </div>
+  {{/if}}
+</div>
+
+<form
+  class="uk-form-stacked"
+  {{on "submit" (perform this.saveManualWorkItem)}}
+>
+  <div class="uk-margin">
+    <label class="uk-form-label" for="responsible">
+      {{t "workItems.responsible"}}
+    </label>
+    <div class="uk-form-controls">
+      <input
+        class="uk-input"
+        id="responsible"
+        type="text"
+        value={{this.workItem.addressedService.name}}
+        disabled={{true}}
+      >
+    </div>
+  </div>
+
+  <div class="uk-margin">
+    <label class="uk-form-label" for="createdBy">
+      {{t "workItems.createdBy"}}
+    </label>
+    <div class="uk-form-controls">
+      <input
+        class="uk-input"
+        id="createdBy"
+        type="text"
+        value={{this.workItem.createdByUser.fullName}}
+        disabled={{true}}
+      >
+    </div>
+  </div>
+
+  <div class="uk-margin">
+    <label class="uk-form-label" for="createdAt">
+      {{t "workItems.createdAt"}}
+    </label>
+    <div class="uk-form-controls">
+      <input class="uk-input" id="createdAt" type="text" value={{
+      format-date
+        this.workItem.createdAt
+        day="2-digit"
+        month="2-digit"
+        year="numeric"
+        hour="2-digit"
+        minute="2-digit"
+        hour12=false
+      }} disabled={{true}}>
+    </div>
+  </div>
+
+  <div class="uk-margin">
+    <label class="uk-form-label" for="description">
+      {{t "workItems.description"}}
+    </label>
+    <div class="uk-form-controls">
+      <Textarea
+        class="uk-input"
+        id="description"
+        @value={{this.workItem.task.description}}
+      />
+    </div>
+  </div>
+
+  <div class="uk-margin">
+    <label class="uk-form-label" for="deadline">
+      {{t "workItems.deadline"}}
+      <span class="mandatory">
+        *
+      </span>
+    </label>
+    <div class="uk-form-controls">
+      <PikadayInput
+        id="deadline"
+        class="uk-input"
+        @value={{this.workItem.deadline}}
+        @useUTC={{true}}
+        @onSelection={{this.setDeadline}}
+      />
+    </div>
+  </div>
+
+  <div class="uk-margin">
+    <div class="uk-form-label">{{t "workItems.notifications"}}</div>
+    <div class="uk-form-controls">
+      <label>
+        <Input
+          class="uk-checkbox"
+          @type="checkbox"
+          @checked={{this.workItem.meta.notify-completed}}
+        />
+        {{t "workItems.notifyCompleted"}}
+      </label>
+      <br />
+      <label>
+        <Input
+          class="uk-checkbox"
+          @type="checkbox"
+          @checked={{this.workItem.meta.notify-deadline}}
+        />
+        {{t "workItems.notifyDeadline"}}
+      </label>
+    </div>
+  </div>
+
+  <div class="uk-text-right">
+    <LinkTo
+      @route="work-items.index"
+      class="uk-margin-right"
+    >
+      <UkButton
+        @type="button"
+        @label={{t "global.cancel"}}
+      />
+    </LinkTo>
+    <UkButton
+      @type="submit"
+      @color="primary"
+      @label={{t "global.save"}}
+    />
+  </div>
+</form>
+
+{{#if this.workItem.canComplete}}
+  <UkButton
+    @type="submit"
+    @color="primary"
+    @label={{t "workItems.actions.finish"}}
+    {{on "click" (perform this.finishWorkItem)}}
+  />
+{{/if}}
diff --git a/ember/app/cases/detail/work-items/edit/route.js b/ember/app/cases/detail/work-items/edit/route.js
new file mode 100644
index 00000000..6c8b6759
--- /dev/null
+++ b/ember/app/cases/detail/work-items/edit/route.js
@@ -0,0 +1,7 @@
+import Route from "@ember/routing/route";
+
+export default class CasesDetailWorkItemsEditRoute extends Route {
+  model(params) {
+    return params.work_item_id;
+  }
+}
diff --git a/ember/app/cases/detail/work-items/edit/template.hbs b/ember/app/cases/detail/work-items/edit/template.hbs
new file mode 100644
index 00000000..e2147cab
--- /dev/null
+++ b/ember/app/cases/detail/work-items/edit/template.hbs
@@ -0,0 +1 @@
+{{outlet}}
\ No newline at end of file
diff --git a/ember/app/cases/detail/work-items/index/controller.js b/ember/app/cases/detail/work-items/index/controller.js
new file mode 100644
index 00000000..3f9e8206
--- /dev/null
+++ b/ember/app/cases/detail/work-items/index/controller.js
@@ -0,0 +1,53 @@
+import Controller from "@ember/controller";
+import { queryManager } from "ember-apollo-client";
+import calumaQuery from "ember-caluma/caluma-query";
+import { allWorkItems } from "ember-caluma/caluma-query/queries";
+import { restartableTask } from "ember-concurrency-decorators";
+
+export default class CasesDetailWorkItemsController extends Controller {
+  @queryManager apollo;
+
+  @calumaQuery({
+    query: allWorkItems,
+    options: "options",
+  })
+  readyWorkItemsQuery;
+
+  @calumaQuery({
+    query: allWorkItems,
+    options: "options",
+  })
+  completedWorkItemsQuery;
+
+  get options() {
+    return {
+      pageSize: 20,
+    };
+  }
+
+  get columns() {
+    return [
+      "task",
+      "instance",
+      "description",
+      ...(this.status === "open"
+        ? ["deadline", "responsible"]
+        : ["closedAt", "closedBy"]),
+    ];
+  }
+
+  @restartableTask
+  *fetchWorkItems() {
+    const filter = [{ hasDeadline: true }, { case: this.model.id }];
+
+    yield this.readyWorkItemsQuery.fetch({
+      filter: [...filter, { status: "READY" }],
+      order: [{ attribute: "DEADLINE", direction: "ASC" }],
+    });
+
+    yield this.completedWorkItemsQuery.fetch({
+      filter: [...filter, { status: "COMPLETED" }],
+      order: [{ attribute: "CLOSED_AT", direction: "DESC" }],
+    });
+  }
+}
diff --git a/ember/app/cases/detail/work-items/index/route.js b/ember/app/cases/detail/work-items/index/route.js
new file mode 100644
index 00000000..0e43f949
--- /dev/null
+++ b/ember/app/cases/detail/work-items/index/route.js
@@ -0,0 +1,28 @@
+import Route from "@ember/routing/route";
+import getCaseQuery from "caluma-portal-demo/gql/queries/get-case";
+import { queryManager } from "ember-apollo-client";
+
+export default class CasesDetailWorkItemsRoute extends Route {
+  @queryManager apollo;
+
+  async model() {
+    const model = this.modelFor("cases.detail");
+    if (typeof model === "object" && model) {
+      return model;
+    }
+
+    const caseRecord = await this.apollo.query(
+      {
+        query: getCaseQuery,
+        variables: { caseId: model },
+      },
+      "allCases.edges"
+    );
+    return caseRecord.map(({ node }) => node)[0];
+  }
+
+  setupController(controller, model) {
+    super.setupController(controller, model);
+    controller.fetchWorkItems.perform();
+  }
+}
diff --git a/ember/app/cases/detail/work-items/index/template.hbs b/ember/app/cases/detail/work-items/index/template.hbs
new file mode 100644
index 00000000..174d5ec6
--- /dev/null
+++ b/ember/app/cases/detail/work-items/index/template.hbs
@@ -0,0 +1,18 @@
+<h3 class="uk-flex uk-flex-between">
+  {{t "workItems.title"}}
+</h3>
+
+<hr>
+
+<WorkItemList
+  @query={{this.readyWorkItemsQuery}}
+  @columns={{array "task" "deadline" "responsible"}}
+/>
+
+<h3>{{t "workItems.completedTitle"}}</h3>
+
+<WorkItemList
+  @query={{this.completedWorkItemsQuery}}
+  @columns={{array "task" "closedAt" "closedBy"}}
+  @highlight={{false}}
+/>
\ No newline at end of file
diff --git a/ember/app/components/context-menu/component.js b/ember/app/components/context-menu/component.js
new file mode 100644
index 00000000..b0b008d5
--- /dev/null
+++ b/ember/app/components/context-menu/component.js
@@ -0,0 +1,25 @@
+import { action } from "@ember/object";
+import { later, cancel } from "@ember/runloop";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+export default class ContextMenuComponent extends Component {
+  @tracked menuOpen = false;
+  closeMenuDelay;
+
+  @action
+  handleMouseLeave() {
+    this.closeMenuDelay = later(
+      this,
+      function () {
+        this.menuOpen = false;
+      },
+      1000
+    );
+  }
+
+  @action
+  handleMouseEnter() {
+    cancel(this.closeMenuDelay);
+  }
+}
diff --git a/ember/app/components/context-menu/template.hbs b/ember/app/components/context-menu/template.hbs
new file mode 100644
index 00000000..caa409fb
--- /dev/null
+++ b/ember/app/components/context-menu/template.hbs
@@ -0,0 +1,25 @@
+{{!-- template-lint-disable no-invalid-interactive --}}
+<div class="context-menu-container" {{on "mouseleave" this.handleMouseLeave}} {{on "mouseenter" this.handleMouseEnter}}>
+  <button
+    type="button"
+    class="context-menu-trigger"
+    title={{t "global.openMenu"}}
+    {{on "click" (set this "menuOpen" true)}}
+  >
+    <span hidden>{{t "global.openMenu"}}</span>
+    <FaIcon @icon="ellipsis-v" />
+  </button>
+  {{#if this.menuOpen}}
+    <div class="context-menu">
+      <ul>
+        {{#each @actions as |action|}}
+          <li>
+            <button type="button" {{on "click" action.action}}>
+              {{action.title}}
+            </button>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+  {{/if}}
+</div>
diff --git a/ember/app/components/filters/radio-buttons/template.hbs b/ember/app/components/filters/radio-buttons/template.hbs
new file mode 100644
index 00000000..79291bd6
--- /dev/null
+++ b/ember/app/components/filters/radio-buttons/template.hbs
@@ -0,0 +1,13 @@
+<div>
+  <label class="uk-display-block">{{@label}}</label>
+  <div class="uk-button-group">
+    {{#each @options as |option|}}
+      <UkButton
+        @color={{if (eq @selected option.value) "primary" "default"}}
+        @on-click={{fn @onChange option.value}}
+      >
+        {{option.label}}
+      </UkButton>
+    {{/each}}
+  </div>
+</div>
diff --git a/ember/app/components/filters/template.hbs b/ember/app/components/filters/template.hbs
new file mode 100644
index 00000000..62fe154e
--- /dev/null
+++ b/ember/app/components/filters/template.hbs
@@ -0,0 +1,3 @@
+<div class="filters" ...attributes>
+  {{yield (hash RadioButtons=(component "filters/radio-buttons"))}}
+</div>
diff --git a/ember/app/components/nav-bar/template.hbs b/ember/app/components/nav-bar/template.hbs
index fcb0f653..e2daf7ef 100644
--- a/ember/app/components/nav-bar/template.hbs
+++ b/ember/app/components/nav-bar/template.hbs
@@ -14,6 +14,11 @@
           {{t "nav.documents"}}
         </span>
       </tab.link-item>
+      <tab.link-item @route="work-items">
+        <span>
+          {{t "nav.tasks"}}
+        </span>
+      </tab.link-item>
       <tab.link-item @route="form-builder">
         {{t "nav.form-builder"}}
       </tab.link-item>
diff --git a/ember/app/components/notifications/component.js b/ember/app/components/notifications/component.js
new file mode 100644
index 00000000..2e3fb327
--- /dev/null
+++ b/ember/app/components/notifications/component.js
@@ -0,0 +1,24 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+
+export default class NotificationsComponent extends Component {
+  @service notifications;
+
+  get type() {
+    const type = this.args.notification?.type ?? "default";
+
+    if (type === "error") {
+      return "danger";
+    }
+
+    return type;
+  }
+
+  @action
+  remove(notification, event) {
+    event.preventDefault();
+
+    this.notifications.remove(notification.id);
+  }
+}
diff --git a/ember/app/components/notifications/template.hbs b/ember/app/components/notifications/template.hbs
new file mode 100644
index 00000000..16b06e94
--- /dev/null
+++ b/ember/app/components/notifications/template.hbs
@@ -0,0 +1,8 @@
+<div>
+  {{#each this.notifications.all as |notification|}}
+    <div class="uk-alert uk-alert-{{this.notification.type}}">
+      <a href="" class="uk-alert-close" uk-close {{on "click" (fn this.remove notification)}}></a>
+      {{notification.message}}
+    </div>
+  {{/each}}
+</div>
diff --git a/ember/app/components/pagination/template.hbs b/ember/app/components/pagination/template.hbs
new file mode 100644
index 00000000..44963a5a
--- /dev/null
+++ b/ember/app/components/pagination/template.hbs
@@ -0,0 +1,14 @@
+{{#if (and @query.value.length (gt @query.pageSize 0))}}
+  <div class="pagination">
+    <div class="pagination__left">
+      {{t "global.paginationInfo" htmlSafe=true count=@query.value.length total=@query.totalCount}}
+    </div>
+    {{#if @query.hasNextPage}}
+      <div class="pagination__right">
+        <a href="#" {{on "click" @onLoadMore}}>
+          {{t "global.loadMore"}}
+        </a>
+      </div>
+    {{/if}}
+  </div>
+{{/if}}
diff --git a/ember/app/components/work-item-list/component.js b/ember/app/components/work-item-list/component.js
new file mode 100644
index 00000000..d67b799d
--- /dev/null
+++ b/ember/app/components/work-item-list/component.js
@@ -0,0 +1,19 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+
+export default class WorkItemListComponent extends Component {
+  get highlight() {
+    return this.args.highlight === undefined || this.args.highlight;
+  }
+
+  get colspan() {
+    const extra = this.highlight ? 2 : 1;
+
+    return this.args.columns.length + extra;
+  }
+
+  @action
+  fetchMore() {
+    this.args.query.fetchMore();
+  }
+}
diff --git a/ember/app/components/work-item-list/item/component.js b/ember/app/components/work-item-list/item/component.js
new file mode 100644
index 00000000..e4c09e1a
--- /dev/null
+++ b/ember/app/components/work-item-list/item/component.js
@@ -0,0 +1,91 @@
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { dropTask } from "ember-concurrency-decorators";
+import { performHelper } from "ember-concurrency/helpers/perform";
+import moment from "moment";
+
+export default class WorkItemListItemComponent extends Component {
+  @service router;
+  @service intl;
+
+  get actions() {
+    return [
+      this.editAction,
+      this.toggleReadAction,
+      this.assignToMeAction,
+    ].filter(Boolean);
+  }
+
+  get editAction() {
+    return {
+      action: performHelper([this.edit], {}),
+      title: this.intl.t("workItems.actions.edit"),
+    };
+  }
+
+  get toggleReadAction() {
+    const key = this.args.workItem.notViewed
+      ? "workItems.actions.markAsRead"
+      : "workItems.actions.markAsUnread";
+
+    return {
+      action: performHelper([this.toggleRead], {}),
+      title: this.intl.t(key),
+    };
+  }
+
+  get assignToMeAction() {
+    if (this.args.workItem.isAssignedToCurrentUser) {
+      return null;
+    }
+
+    return {
+      action: performHelper([this.assignToMe], {}),
+      title: this.intl.t("workItems.actions.assignToMe"),
+    };
+  }
+
+  get highlightClasses() {
+    if (!this.args.highlight) return "";
+
+    const notViewed = this.args.workItem.notViewed;
+    const diff = this.args.workItem.deadline?.diff(moment(), "days", true);
+
+    return [
+      "highlight",
+      ...(diff <= 0 ? ["highlight--expired"] : []),
+      ...(diff <= 3 && diff > 0 ? ["highlight--expiring"] : []),
+      ...(notViewed ? ["highlight--not-viewed"] : []),
+    ].join(" ");
+  }
+
+  @dropTask
+  *toggleRead(event) {
+    event.preventDefault();
+
+    yield this.args.workItem.toggleRead();
+  }
+
+  @dropTask
+  *assignToMe(event) {
+    event.preventDefault();
+
+    yield this.args.workItem.assignToMe();
+  }
+
+  @dropTask
+  *edit(event) {
+    event.preventDefault();
+
+    if (this.router.currentRouteName === "work-items.instance.index") {
+      return yield this.router.transitionTo(
+        "work-items.instance.edit",
+        this.args.workItem.id
+      );
+    }
+
+    if (this.args.workItem.editLink) {
+      location.replace(this.args.workItem.editLink);
+    }
+  }
+}
diff --git a/ember/app/components/work-item-list/item/template.hbs b/ember/app/components/work-item-list/item/template.hbs
new file mode 100644
index 00000000..3a523871
--- /dev/null
+++ b/ember/app/components/work-item-list/item/template.hbs
@@ -0,0 +1,53 @@
+<tr class={{this.highlightClasses}}>
+  {{#if @highlight}}
+    <td></td>
+  {{/if}}
+  {{#each @columns as |column|}}
+    <td class={{column}}>
+      {{#if (eq column "task")}}
+        {{#if @workItem.document}}
+          <LinkTo
+            @route="cases.detail.work-items.edit.form"
+            @models={{array @workItem.case.id @workItem.id}}
+          >
+            {{@workItem.name}}
+          </LinkTo>
+        {{else}}
+          <LinkTo
+            @route="cases.detail.work-items.edit.index"
+            @models={{array @workItem.case.id @workItem.id}}
+          >
+            {{@workItem.name}}
+          </LinkTo>
+        {{/if}}
+      {{else if (eq column "instance")}}
+        {{@workItem.instanceName}}
+      {{else if (eq column "deadline")}}
+        <span title={{format-date @workItem.deadline day="2-digit" month="2-digit" year="numeric"}}>
+          {{moment-from @workItem.deadline}}
+        </span>
+      {{else if (eq column "responsible")}}
+        {{@workItem.responsible}}
+      {{else if (eq column "closedAt")}}
+        {{format-date
+          @workItem.closedAt
+          day="2-digit"
+          month="2-digit"
+          year="numeric"
+          hour="2-digit"
+          minute="2-digit"
+          hour12=false
+        }}
+      {{else if (eq column "closedBy")}}
+        {{if @workItem.closedByUser @workItem.closedByUser.fullName "-"}}
+      {{else if (eq column "description")}}
+        <span title={{@workItem.instanceDescription}}>{{@workItem.instanceDescription}}</span>
+      {{/if}}
+    </td>
+  {{/each}}
+  <td>
+    {{#if this.actions.length}}
+      <ContextMenu @actions={{this.actions}} />
+    {{/if}}
+  </td>
+</tr>
diff --git a/ember/app/components/work-item-list/template.hbs b/ember/app/components/work-item-list/template.hbs
new file mode 100644
index 00000000..0bc332f9
--- /dev/null
+++ b/ember/app/components/work-item-list/template.hbs
@@ -0,0 +1,37 @@
+<table class="work-item-list uk-table uk-table-striped uk-table-hover uk-table-responsive" ...attributes>
+  <thead>
+  <tr class={{if this.highlight "highlight"}}>
+    {{#if this.highlight}}
+      <th>
+        <span hidden>{{t "workItems.actions.highlight"}}</span>
+      </th>
+    {{/if}}
+    {{#each @columns as |column|}}
+      <th>{{t (concat "workItems." column)}}</th>
+    {{/each}}
+    <th>
+      <span hidden>{{t "workItems.actions.title"}}</span>
+    </th>
+  </tr>
+  </thead>
+  <tbody>
+  {{#each @query.value as |workItem|}}
+    <WorkItemList::Item @workItem={{workItem}} @columns={{@columns}} @highlight={{this.highlight}} />
+  {{else if (not @query.isLoading)}}
+    <tr>
+      <td class="center" colspan={{this.colspan}}>
+        {{t "global.empty"}}
+      </td>
+    </tr>
+  {{/each}}
+  {{#if @query.isLoading}}
+    <tr>
+      <td class="center" colspan={{this.colspan}}>
+        <UkSpinner @ratio={{2}} />
+      </td>
+    </tr>
+  {{/if}}
+  </tbody>
+</table>
+
+<Pagination @query={{@query}} @onLoadMore={{this.fetchMore}} />
diff --git a/ember/app/gql/mutations/complete-work-item.graphql b/ember/app/gql/mutations/complete-work-item.graphql
new file mode 100644
index 00000000..278c8dac
--- /dev/null
+++ b/ember/app/gql/mutations/complete-work-item.graphql
@@ -0,0 +1,5 @@
+mutation CompleteWorkItem($id: ID!) {
+  completeWorkItem(input: { id: $id }) {
+    clientMutationId
+  }
+}
diff --git a/ember/app/gql/mutations/save-work-item.graphql b/ember/app/gql/mutations/save-work-item.graphql
new file mode 100644
index 00000000..69d90205
--- /dev/null
+++ b/ember/app/gql/mutations/save-work-item.graphql
@@ -0,0 +1,12 @@
+mutation saveWorkItem($input: SaveWorkItemInput!) {
+  saveWorkItem(
+    input: $input
+  ) {
+    clientMutationId
+    workItem {
+      id
+      assignedUsers
+      meta
+    }
+  }
+}
diff --git a/ember/app/gql/queries/get-case.graphql b/ember/app/gql/queries/get-case.graphql
index b49a4812..98d50473 100644
--- a/ember/app/gql/queries/get-case.graphql
+++ b/ember/app/gql/queries/get-case.graphql
@@ -1,4 +1,4 @@
-query GetCases($caseId: ID!) {
+query getCaseQuery($caseId: ID!) {
   allCases(filter: [{ rootCase: $caseId }]) {
     edges {
       node {
diff --git a/ember/app/gql/queries/get-cases.graphql b/ember/app/gql/queries/get-cases.graphql
index 21bdacb6..663fc313 100644
--- a/ember/app/gql/queries/get-cases.graphql
+++ b/ember/app/gql/queries/get-cases.graphql
@@ -1,4 +1,4 @@
-query GetCases($cursor: String, $forms: [String], $orderBy: [CaseOrdering]!) {
+query getCasesQuery($cursor: String, $forms: [String], $orderBy: [CaseOrdering]!) {
   allCases(
     first: 15
     after: $cursor
diff --git a/ember/app/initializers/register-caluma-query-model-work-item.js b/ember/app/initializers/register-caluma-query-model-work-item.js
new file mode 100644
index 00000000..c3137a44
--- /dev/null
+++ b/ember/app/initializers/register-caluma-query-model-work-item.js
@@ -0,0 +1,9 @@
+import CustomWorkItemModel from "caluma-portal-demo/caluma-query/models/work-item";
+
+export function initialize(application) {
+  application.register("caluma-query-model:work-item", CustomWorkItemModel);
+}
+
+export default {
+  initialize,
+};
diff --git a/ember/app/router.js b/ember/app/router.js
index 2a9b5274..2f98e4a7 100644
--- a/ember/app/router.js
+++ b/ember/app/router.js
@@ -7,6 +7,8 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
+const resetNamespace = true;
+
 //eslint-disable-next-line array-callback-return
 Router.map(function () {
   this.mount("ember-emeis", { as: "emeis", path: "/emeis" });
@@ -15,7 +17,17 @@ Router.map(function () {
   this.route("cases", { path: "/" }, function () {
     this.route("detail", { path: "/:id" }, function () {
       this.route("edit");
+      this.route("work-items", function () {
+        this.route("edit", { path: "/:id" }, function () {
+          this.route("form");
+        });
+      });
     });
     this.route("new");
   });
+  this.route("work-items", { resetNamespace }, function () {
+    this.route("detail", { path: "/ :id" }, function () {
+      this.route("edit");
+    });
+  });
 });
diff --git a/ember/app/services/notification.js b/ember/app/services/notification.js
new file mode 100644
index 00000000..095d9a30
--- /dev/null
+++ b/ember/app/services/notification.js
@@ -0,0 +1,29 @@
+import Service from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import { v4 } from "uuid";
+
+export default class NotificationsService extends Service {
+  @tracked all = [];
+
+  add(type, message) {
+    const id = v4();
+
+    this.all = [...this.all, { id, type, message }];
+  }
+
+  remove(id) {
+    this.all = this.all.filter((obj) => obj.id !== id);
+  }
+
+  clear() {
+    this.all = [];
+  }
+
+  success(message) {
+    this.add("success", message);
+  }
+
+  error(message) {
+    this.add("error", message);
+  }
+}
diff --git a/ember/app/styles/app.scss b/ember/app/styles/app.scss
index e91bbee5..aa7fea80 100644
--- a/ember/app/styles/app.scss
+++ b/ember/app/styles/app.scss
@@ -9,6 +9,9 @@ $global-primary-background: $app-accent-color;
 @import "ember-caluma";
 
 @import "components/nav-bar";
+@import "components/filters";
+@import "components/work-item-list";
+@import "components/context-menu";
 
 main {
   display: flex;
diff --git a/ember/app/styles/components/context-menu/index.scss b/ember/app/styles/components/context-menu/index.scss
new file mode 100644
index 00000000..4c464ca3
--- /dev/null
+++ b/ember/app/styles/components/context-menu/index.scss
@@ -0,0 +1,39 @@
+.context-menu-container {
+  position: relative;
+}
+
+.context-menu-trigger {
+  background: none;
+  border: none;
+}
+
+.context-menu {
+  width: auto;
+  right: 8px;
+  left: auto;
+  z-index: 1;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  padding: 1rem;
+  background: white;
+  box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.25);
+
+  ul {
+    margin: 0 !important;
+    padding-left: 1rem;
+
+    > li > button {
+      padding: 0;
+      background: none;
+      border: none;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+
+    > li:last-of-type {
+      margin-bottom: 0 !important;
+    }
+  }
+}
diff --git a/ember/app/styles/components/filters/_radio-buttons.scss b/ember/app/styles/components/filters/_radio-buttons.scss
new file mode 100644
index 00000000..64c6e3c5
--- /dev/null
+++ b/ember/app/styles/components/filters/_radio-buttons.scss
@@ -0,0 +1,24 @@
+.radio-buttons {
+  display: flex;
+
+  &__button {
+    display: inline-flex;
+    margin-right: -1px;
+    border: 1px solid #666;
+    border-radius: 3px;
+    color: #666;
+
+    > label {
+      display: flex;
+      @extend .uk-button;
+    }
+
+    > input[type="radio"] {
+      display: none;
+    }
+
+    > input:checked + label {
+      background-color: #dddddd;
+    }
+  }
+}
diff --git a/ember/app/styles/components/filters/index.scss b/ember/app/styles/components/filters/index.scss
new file mode 100644
index 00000000..b481e7db
--- /dev/null
+++ b/ember/app/styles/components/filters/index.scss
@@ -0,0 +1,9 @@
+@import "radio-buttons";
+
+.filters {
+  display: flex;
+
+  & > div {
+    margin-right: 10px;
+  }
+}
diff --git a/ember/app/styles/components/work-item-list/index.scss b/ember/app/styles/components/work-item-list/index.scss
new file mode 100644
index 00000000..49523a3c
--- /dev/null
+++ b/ember/app/styles/components/work-item-list/index.scss
@@ -0,0 +1,64 @@
+$expired-color: #cc0000;
+$expiring-color: #ff8800;
+
+.work-item-list {
+  tr.highlight {
+    th:first-child,
+    td:first-child {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+
+    th:nth-child(2),
+    td:nth-child(2) {
+      border-left: none !important;
+    }
+
+    td:first-child {
+      text-align: center;
+
+      &::before {
+        content: "";
+        display: inline-flex;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin: 0 0 0 5px;
+        padding: 0;
+        border: 1px solid lightgrey;
+      }
+    }
+
+    &--not-viewed {
+      font-weight: 700;
+    }
+
+    &--expired td:first-child::before {
+      background-color: $expired-color;
+      border-color: darken($expired-color, 10%);
+    }
+
+    &--expiring td:first-child::before {
+      background-color: $expiring-color;
+      border-color: darken($expiring-color, 10%);
+    }
+  }
+
+  td:last-child {
+    text-align: center;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  td {
+    white-space: nowrap;
+  }
+
+  td.task,
+  td.responsible,
+  td.description {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 200px;
+  }
+}
diff --git a/ember/app/work-items/detail/edit/controller.js b/ember/app/work-items/detail/edit/controller.js
new file mode 100644
index 00000000..24a8c1db
--- /dev/null
+++ b/ember/app/work-items/detail/edit/controller.js
@@ -0,0 +1,100 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import completeWorkItem from "caluma-portal-demo/gql/mutations/complete-work-item";
+import saveWorkItem from "caluma-portal-demo/gql/mutations/save-work-item";
+import { queryManager } from "ember-apollo-client";
+import calumaQuery from "ember-caluma/caluma-query";
+import { allWorkItems } from "ember-caluma/caluma-query/queries";
+import { dropTask } from "ember-concurrency-decorators";
+import moment from "moment";
+
+export default class WorkItemsDetailEditController extends Controller {
+  @queryManager apollo;
+
+  @service store;
+  @service notifications;
+  @service intl;
+  @service moment;
+
+  @tracked workItem;
+
+  @calumaQuery({ query: allWorkItems, options: "options" })
+  workItemsQuery;
+
+  get options() {
+    return {
+      pageSize: 1,
+    };
+  }
+
+  @dropTask()
+  *fetchWorkItems() {
+    try {
+      yield this.workItemsQuery.fetch({ filter: [{ id: this.model }] });
+
+      this.workItem = this.workItemsQuery.value[0];
+    } catch (error) {
+      this.notifications.error(this.intl.t("workItems.fetchError"));
+    }
+  }
+
+  @dropTask
+  *finishWorkItem(event) {
+    event.preventDefault();
+
+    try {
+      yield this.apollo.mutate({
+        mutation: saveWorkItem,
+        variables: {
+          input: {
+            workItem: this.workItem.id,
+            meta: JSON.stringify(this.workItem.meta),
+          },
+        },
+      });
+
+      yield this.apollo.mutate({
+        mutation: completeWorkItem,
+        variables: { id: this.workItem.id },
+      });
+
+      this.notifications.success(this.intl.t("workItems.finishSuccess"));
+
+      this.transitionToRoute("work-items.index");
+    } catch (error) {
+      this.notifications.error(this.intl.t("workItems.saveError"));
+    }
+  }
+
+  @dropTask
+  *saveManualWorkItem(event) {
+    event.preventDefault();
+
+    try {
+      yield this.apollo.mutate({
+        mutation: saveWorkItem,
+        variables: {
+          input: {
+            workItem: this.workItem.id,
+            description: this.workItem.description,
+            deadline: this.workItem.deadline,
+            meta: JSON.stringify(this.workItem?.meta),
+          },
+        },
+      });
+
+      this.notifications.success(this.intl.t("workItems.saveSuccess"));
+
+      this.transitionToRoute("work-items.index");
+    } catch (error) {
+      this.notifications.error(this.intl.t("workItems.saveError"));
+    }
+  }
+
+  @action
+  setDeadline(value) {
+    this.workItem.deadline = moment(value);
+  }
+}
diff --git a/ember/app/work-items/detail/edit/route.js b/ember/app/work-items/detail/edit/route.js
new file mode 100644
index 00000000..1141a3c1
--- /dev/null
+++ b/ember/app/work-items/detail/edit/route.js
@@ -0,0 +1,7 @@
+import Route from "@ember/routing/route";
+
+export default class WorkItemsDetailEditRoute extends Route {
+  model() {
+    return this.modelFor("work-items.detail");
+  }
+}
diff --git a/ember/app/work-items/detail/edit/template.hbs b/ember/app/work-items/detail/edit/template.hbs
new file mode 100644
index 00000000..fc9306c9
--- /dev/null
+++ b/ember/app/work-items/detail/edit/template.hbs
@@ -0,0 +1,201 @@
+<Notifications />
+
+<h1 {{did-insert (perform this.fetchWorkItems)}}>
+  {{t "workItems.edit"}}
+</h1>
+
+<hr>
+
+<h2>
+  {{this.workItem.task.name}}
+</h2>
+
+<div class="work-item-attributes">
+  {{#if this.workItem.isCompleted}}
+    <div class="work-item-attribute">
+      <span class="work-item-attribute__title">
+        {{t "workItems.closedBy"}}
+      </span>
+      {{this.workItem.closedByUser.fullName}}
+    </div>
+    <div class="work-item-attribute">
+      <span class="work-item-attribute__title">
+        {{t "workItems.closedAt"}}
+      </span>
+      {{
+      format-date
+        this.workItem.closedAt
+        day="2-digit"
+        month="2-digit"
+        year="numeric"
+        hour="2-digit"
+        minute="2-digit"
+        hour12=false
+      }}
+    </div>
+    <div class="work-item-attribute">
+      <span class="work-item-attribute__title">
+        {{t "workItems.comment"}}
+      </span>
+      {{or this.workItem.meta.completion-comment "-"}}
+    </div>
+  {{/if}}
+</div>
+
+<form
+  class="uk-form-stacked"
+  {{on "submit" (perform this.saveManualWorkItem)}}
+>
+  <div class="uk-margin">
+    <label class="uk-form-label" for="responsible">
+      {{t "workItems.responsible"}}
+    </label>
+    <div class="uk-form-controls">
+      <input
+        class="uk-input"
+        id="responsible"
+        type="text"
+        value={{this.workItem.addressedGroup.name}}
+        disabled={{true}}
+      >
+    </div>
+  </div>
+
+  <div class="uk-margin">
+    <label class="uk-form-label" for="createdBy">
+      {{t "workItems.createdBy"}}
+    </label>
+    <div class="uk-form-controls">
+      <input
+        class="uk-input"
+        id="createdBy"
+        type="text"
+        value={{this.workItem.createdByUser.fullName}}
+        disabled={{true}}
+      >
+    </div>
+  </div>
+
+  <div class="uk-margin">
+    <label class="uk-form-label" for="createdAt">
+      {{t "workItems.createdAt"}}
+    </label>
+    <div class="uk-form-controls">
+      <input class="uk-input" id="createdAt" type="text" value={{
+      format-date
+        this.workItem.createdAt
+        day="2-digit"
+        month="2-digit"
+        year="numeric"
+        hour="2-digit"
+        minute="2-digit"
+        hour12=false
+      }} disabled={{true}}>
+    </div>
+  </div>
+
+  <div class="uk-margin">
+    <label class="uk-form-label" for="description">
+      {{t "workItems.description"}}
+    </label>
+    <div class="uk-form-controls">
+      <Textarea
+        class="uk-input"
+        id="description"
+        @value={{this.workItem.task.description}}
+      />
+    </div>
+  </div>
+
+  <div class="uk-margin">
+    <label class="uk-form-label" for="deadline">
+      {{t "workItems.deadline"}}
+      <span class="mandatory">
+        *
+      </span>
+    </label>
+    <div class="uk-form-controls">
+      <PikadayInput
+        id="deadline"
+        class="uk-input"
+        @value={{this.workItem.deadline}}
+        @useUTC={{true}}
+        @onSelection={{this.setDeadline}}
+      />
+    </div>
+  </div>
+
+  <div class="uk-margin">
+    <div class="uk-form-label">{{t "workItems.notifications"}}</div>
+    <div class="uk-form-controls">
+      <label>
+        <Input
+          class="uk-checkbox"
+          @type="checkbox"
+          @checked={{this.workItem.meta.notify-completed}}
+        />
+        {{t "workItems.notifyCompleted"}}
+      </label>
+      <br />
+      <label>
+        <Input
+          class="uk-checkbox"
+          @type="checkbox"
+          @checked={{this.workItem.meta.notify-deadline}}
+        />
+        {{t "workItems.notifyDeadline"}}
+      </label>
+    </div>
+  </div>
+
+  <div class="uk-text-right">
+    <LinkTo
+      @route="work-items.index"
+      class="uk-margin-right"
+    >
+      <UkButton
+        @type="button"
+        @label={{t "global.cancel"}}
+      />
+    </LinkTo>
+    <UkButton
+      @type="submit"
+      @color="primary"
+      @label={{t "global.save"}}
+    />
+  </div>
+</form>
+
+{{#if this.workItem.canComplete}}
+  <h3>
+    {{t "workItems.actions.finish"}}
+  </h3>
+
+  <form
+    class="form form-edit work-item-form"
+    {{on "submit" (perform this.finishWorkItem)}}
+  >
+    <fieldset>
+      <legend>
+        {{t "workItems.actions.finish"}}
+      </legend>
+
+      <div class="row first">
+        <div class="label">
+          <label>
+            {{t "workItems.comment"}}
+          </label>
+        </div>
+        <div class="column-2">
+          <Textarea @value={{this.workItem.meta.completion-comment}} />
+        </div>
+      </div>
+    </fieldset>
+
+    <div class="row buttons-container">
+      <button class="button buttonstyle btn success" type="submit">
+        {{t "workItems.actions.finish"}}
+      </button>
+    </div>
+  </form>
+{{/if}}
diff --git a/ember/app/work-items/detail/index/route.js b/ember/app/work-items/detail/index/route.js
new file mode 100644
index 00000000..4bd72e8b
--- /dev/null
+++ b/ember/app/work-items/detail/index/route.js
@@ -0,0 +1,7 @@
+import Route from "@ember/routing/route";
+
+export default class WorkItemsDetailIndexRoute extends Route {
+  model({ work_item_id: id }) {
+    return id;
+  }
+}
diff --git a/ember/app/work-items/detail/route.js b/ember/app/work-items/detail/route.js
new file mode 100644
index 00000000..af9e9387
--- /dev/null
+++ b/ember/app/work-items/detail/route.js
@@ -0,0 +1,11 @@
+import Route from "@ember/routing/route";
+
+export default class WorkItemsDetailRoute extends Route {
+  model(params) {
+    return params.id;
+  }
+
+  afterModel() {
+    this.transitionTo("work-items.detail.edit");
+  }
+}
diff --git a/ember/app/work-items/index/controller.js b/ember/app/work-items/index/controller.js
new file mode 100644
index 00000000..7a1dc63e
--- /dev/null
+++ b/ember/app/work-items/index/controller.js
@@ -0,0 +1,82 @@
+import Controller from "@ember/controller";
+import { action, set } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import { queryManager } from "ember-apollo-client";
+import calumaQuery from "ember-caluma/caluma-query";
+import { allWorkItems } from "ember-caluma/caluma-query/queries";
+import { restartableTask } from "ember-concurrency-decorators";
+
+export default class WorkItemsIndexController extends Controller {
+  queryParams = ["order", "responsible", "type", "status", "role"];
+
+  @queryManager apollo;
+
+  @calumaQuery({ query: allWorkItems, options: "options" })
+  workItemsQuery;
+
+  // Filters
+  @tracked order = "urgent";
+  @tracked responsible = "all";
+  @tracked type = "all";
+  @tracked status = "open";
+  @tracked role = "active";
+
+  get options() {
+    return {
+      pageSize: 20,
+    };
+  }
+
+  get columns() {
+    return [
+      "task",
+      "instance",
+      "description",
+      ...(this.status === "open"
+        ? ["deadline", "responsible"]
+        : ["closedAt", "closedBy"]),
+    ];
+  }
+
+  @restartableTask
+  *fetchWorkItems() {
+    const filter = [{ hasDeadline: true }];
+
+    if (this.responsible === "own") {
+      // TODO user
+      filter.push({ assignedUsers: [] });
+    } else {
+      filter.push({ assignedUsers: [] });
+    }
+
+    if (this.type === "unread") {
+      filter.push({ metaValue: [{ key: "not-viewed", value: true }] });
+    }
+
+    if (this.status === "closed") {
+      filter.push({ status: "COMPLETED" });
+    } else {
+      filter.push({ status: "READY" });
+    }
+
+    if (this.role === "control") {
+      // TODO group
+      filter.push({ controllingGroups: [] });
+    } else {
+      filter.push({ addressedGroups: [] });
+    }
+
+    const order =
+      this.order === "urgent"
+        ? [{ attribute: "DEADLINE", direction: "ASC" }]
+        : [{ attribute: "CREATED_AT", direction: "DESC" }];
+
+    yield this.workItemsQuery.fetch({ filter, order });
+  }
+
+  @action
+  updateFilter(type, value) {
+    set(this, type, value);
+    this.fetchWorkItems.perform();
+  }
+}
diff --git a/ember/app/work-items/index/route.js b/ember/app/work-items/index/route.js
new file mode 100644
index 00000000..86a1962c
--- /dev/null
+++ b/ember/app/work-items/index/route.js
@@ -0,0 +1,8 @@
+import Route from "@ember/routing/route";
+
+export default class WorkItemsIndexRoute extends Route {
+  setupController(controller, model) {
+    super.setupController(controller, model);
+    controller.fetchWorkItems.perform();
+  }
+}
diff --git a/ember/app/work-items/index/template.hbs b/ember/app/work-items/index/template.hbs
new file mode 100644
index 00000000..4d9e6abc
--- /dev/null
+++ b/ember/app/work-items/index/template.hbs
@@ -0,0 +1,71 @@
+<Notifications />
+
+<h1 class="uk-flex uk-flex-between">
+  {{t "workItems.title"}}
+</h1>
+
+<hr />
+
+<Filters {{did-insert (perform this.fetchWorkItems)}} as |Filter|>
+  <Filter.RadioButtons
+    @name="responsible"
+    @label={{t "workItems.filters.responsible"}}
+    @selected={{this.responsible}}
+    @options={{
+    array
+    (hash value="all" label=(t "workItems.filters.all"))
+    (hash value="own" label=(t "workItems.filters.own"))
+  }}
+    @onChange={{fn this.updateFilter "responsible"}}
+  />
+  <Filter.RadioButtons
+    @name="type"
+    @label={{t "workItems.filters.type"}}
+    @selected={{this.type}}
+    @options={{
+    array
+    (hash value="all" label=(t "workItems.filters.all"))
+    (hash value="unread" label=(t "workItems.filters.unread"))
+  }}
+    @onChange={{fn this.updateFilter "type"}}
+  />
+  <Filter.RadioButtons
+    @name="status"
+    @label={{t "workItems.filters.status"}}
+    @selected={{this.status}}
+    @options={{
+    array
+    (hash value="open" label=(t "workItems.filters.open"))
+    (hash value="closed" label=(t "workItems.filters.closed"))
+  }}
+    @onChange={{fn this.updateFilter "status"}}
+  />
+  <Filter.RadioButtons
+    @name="role"
+    @label={{t "workItems.filters.role"}}
+    @selected={{this.role}}
+    @options={{
+    array
+    (hash value="active" label=(t "workItems.filters.active"))
+    (hash value="control" label=(t "workItems.filters.control"))
+  }}
+    @onChange={{fn this.updateFilter "role"}}
+  />
+  <Filter.RadioButtons
+    @name="order"
+    @label={{t "workItems.filters.order"}}
+    @selected={{this.order}}
+    @options={{
+    array
+    (hash value="urgent" label=(t "workItems.filters.urgent"))
+    (hash value="new" label=(t "workItems.filters.new"))
+  }}
+    @onChange={{fn this.updateFilter "order"}}
+  />
+</Filters>
+
+<WorkItemList
+  @query={{this.workItemsQuery}}
+  @columns={{this.columns}}
+  @highlight={{not-eq this.status "closed"}}
+/>
diff --git a/ember/app/work-items/template.hbs b/ember/app/work-items/template.hbs
new file mode 100644
index 00000000..c24cd689
--- /dev/null
+++ b/ember/app/work-items/template.hbs
@@ -0,0 +1 @@
+{{outlet}}
diff --git a/ember/package.json b/ember/package.json
index d999b4a7..37a234fa 100644
--- a/ember/package.json
+++ b/ember/package.json
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@adfinis-sygroup/eslint-config": "^1.3.2",
     "@ember/optional-features": "^1.3.0",
+    "@fortawesome/ember-fontawesome": "^0.2.3",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "babel-eslint": "^10.1.0",
@@ -63,6 +64,7 @@
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^8.0.0",
     "ember-source": "~3.27.1",
+    "ember-set-helper": "^2.0.1",
     "ember-template-lint": "^2.21.0",
     "ember-uikit": "^2.1.2",
     "eslint": "^7.26.0",
@@ -74,7 +76,8 @@
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
     "qunit-dom": "^1.6.0",
-    "sass": "^1.32.13"
+    "sass": "^1.32.13",
+    "uuid": "^8.3.2"
   },
   "engines": {
     "node": "10.* || >= 12"
diff --git a/ember/tests/integration/components/filters/component-test.js b/ember/tests/integration/components/filters/component-test.js
new file mode 100644
index 00000000..53d528f2
--- /dev/null
+++ b/ember/tests/integration/components/filters/component-test.js
@@ -0,0 +1,17 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Integration | Component | filters", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Filters />`);
+
+    assert.equal(this.element.textContent.trim(), "");
+  });
+});
diff --git a/ember/tests/integration/components/filters/radio-buttons/component-test.js b/ember/tests/integration/components/filters/radio-buttons/component-test.js
new file mode 100644
index 00000000..e95b5d7c
--- /dev/null
+++ b/ember/tests/integration/components/filters/radio-buttons/component-test.js
@@ -0,0 +1,17 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Integration | Component | filters/radio-buttons", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Filters::RadioButtons />`);
+
+    assert.equal(this.element.textContent.trim(), "");
+  });
+});
diff --git a/ember/tests/integration/components/notifications/component-test.js b/ember/tests/integration/components/notifications/component-test.js
new file mode 100644
index 00000000..c2fe2dcb
--- /dev/null
+++ b/ember/tests/integration/components/notifications/component-test.js
@@ -0,0 +1,17 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Integration | Component | notifications", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Notifications />`);
+
+    assert.equal(this.element.textContent.trim(), "");
+  });
+});
diff --git a/ember/tests/integration/components/pagination/component-test.js b/ember/tests/integration/components/pagination/component-test.js
new file mode 100644
index 00000000..65277920
--- /dev/null
+++ b/ember/tests/integration/components/pagination/component-test.js
@@ -0,0 +1,17 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Integration | Component | pagination", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Pagination />`);
+
+    assert.equal(this.element.textContent.trim(), "");
+  });
+});
diff --git a/ember/translations/en.yaml b/ember/translations/en.yaml
index 553691cc..60271510 100644
--- a/ember/translations/en.yaml
+++ b/ember/translations/en.yaml
@@ -2,6 +2,9 @@ demo: "Caluma Building Permit Demo"
 
 global:
   continue: "Continue"
+  empty: "No entries found"
+  paginationInfo: "<strong>1 - {count}</strong> von {total}"
+  openMenu: "Open menu"
 
 nav:
   emeis: "Emeis"
@@ -10,6 +13,7 @@ nav:
   home: "Home"
   support: "Support"
   form-builder: "Form Builder"
+  tasks: "Tasks"
 
 documents:
   title: "Documents"
@@ -49,4 +53,59 @@ documents:
 
   subnav:
     overview: "Overview"
+    workItems: "Tasks"
     document: "Document"
+
+workItems:
+  name: "Name"
+  title: "Open tasks"
+  completedTitle: "Completed tasks"
+  task: "Task"
+  instance: "Document"
+  description: "Desciption"
+  closedAt: "Completed on"
+  closedBy: "Completed by"
+  edit: "Edit task"
+  responsible: "Responsible"
+  deadline: "Deadline"
+  createdBy: "Created on"
+  createdAt: "Created by"
+  notifications: "Notifications"
+  notifyCompleted: "on completion"
+  notifyDeadline: "on deadline"
+
+  saveSuccess: "Task successfully saved"
+  finishSuccess: "Task successfully completed"
+  fetchError: "Error while loading tasks"
+  saveError: "Error while saving the task"
+
+  actions:
+    title: "Actions"
+    highlight: "Highlight"
+
+    markAsRead: "Mark as read"
+    markAsUnread: "Mark as unread"
+    assignToMe: "Assign to me"
+    edit: "Edit task"
+    finish: "Complete task"
+
+  filters:
+    responsible: "Responsible"
+    status: "Status"
+    type: "Type"
+    role: "Role"
+    order: "Order"
+
+    all: "All"
+    own: "Own"
+    unread: "Unread"
+    open: "Open"
+    closed: "Closed"
+    active: "Active"
+    control: "Controlling"
+    urgent: "Urgent"
+    new: "New"
+
+  new:
+    title: "Create task"
+
diff --git a/ember/yarn.lock b/ember/yarn.lock
index 00b10fc3..cefede03 100644
--- a/ember/yarn.lock
+++ b/ember/yarn.lock
@@ -1613,6 +1613,26 @@
     glob "^7.1.2"
     rollup-plugin-node-resolve "^5.2.0"
 
+"@fortawesome/ember-fontawesome@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/ember-fontawesome/-/ember-fontawesome-0.2.3.tgz#62d943d0771b8fe291aaed7a8a223c8d7d8b6f02"
+  integrity sha512-wRiP0k1D7J3ecQhrsGpg+j7PbrFOQtDsMuAUYpvbrh+hSmfO0TCbL/BkPRMtgUIvtJiIigomvQKsiGvPJsfSeQ==
+  dependencies:
+    "@fortawesome/fontawesome-svg-core" "^1.2.0"
+    broccoli-file-creator "^2.1.1"
+    broccoli-merge-trees "^4.2.0"
+    broccoli-plugin "^4.0.3"
+    broccoli-rollup "^4.1.1"
+    broccoli-source "^3.0.0"
+    camel-case "^4.1.1"
+    ember-ast-helpers "0.3.5"
+    ember-cli-babel "^7.21.0"
+    ember-cli-htmlbars "^5.2.0"
+    ember-get-config "^0.3.0"
+    find-yarn-workspace-root "^2.0.0"
+    glob "^7.1.2"
+    rollup-plugin-node-resolve "^5.2.0"
+
 "@fortawesome/fontawesome-common-types@^0.2.30":
   version "0.2.30"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz#2f1cc5b46bd76723be41d0013a8450c9ba92b777"
@@ -7095,6 +7115,13 @@ ember-runtime-enumerable-includes-polyfill@^2.0.0:
     ember-cli-babel "^6.9.0"
     ember-cli-version-checker "^2.1.0"
 
+ember-set-helper@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ember-set-helper/-/ember-set-helper-2.0.1.tgz#e39417531e25089b45ccb905b8c00eda7b3fbbde"
+  integrity sha512-6IIimVGOdehZcncH1ilCY4p7hWBtZqWYMc1Xodr1ATOCuIk6ZO1yztKcUQhlmwl7fE82gL4wHD01T6XP5W59Ng==
+  dependencies:
+    ember-cli-babel "^7.18.0"
+
 ember-simple-set-helper@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ember-simple-set-helper/-/ember-simple-set-helper-0.1.2.tgz#f0aad11f35df5f0396561ee4552c1790d8ef0930"