Create work item.

Added new work item type picker modal.

Basic task form working.

Added validation.

Added fix for vuex store.

package.json

@@ -11,7 +11,7 @@
     "prod": "npx serve -s -l 8081 --ssl-cert .\\certs\\localhost+2.pem --ssl-key .\\certs\\localhost+2-key.pem dist"
   },
   "dependencies": {
-    "@sharedo/mobile-core": "^0.1.20",
+    "@sharedo/mobile-core": "^0.1.26",
     "core-js": "~3.6.5",
     "moment": "^2.29.4",
     "register-service-worker": "~1.7.2",

src/agents/tasksAgent.js

@@ -112,6 +112,8 @@ const getActions = async id => {
     return response.participantActions;
 }
 
+const create = task => SharedoFetch.post("/api/v1/public/workItem", task);
+
 export default {
     getMyTasks,
     getTask,
@@ -121,5 +123,6 @@ export default {
     setPhase,
     getPermissions,
     takeOwnership,
-    getActions
+    getActions,
+    create
 };

src/components/common/tiles/IconTile.vue

@@ -0,0 +1,59 @@
+<template>
+  <component :is="to ? 'router-link' : 'div'" :to="to" class="icon-tile" @click.native="$emit('click')">
+    <v-icon class="tile-icon">{{ icon }}</v-icon>
+    <div class="icon-label">
+      <span class="label-text">{{ label }}</span>
+    </div>
+  </component>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: true
+    },
+    to: {
+      type: [Object, String],
+      required: false,
+      default: null
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+@import "@/css/variables";
+
+.icon-tile {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 150px;
+  width: 150px;
+  border: 1px solid $color-grey-light;
+  border-radius: 4px;
+  margin: 0 4px 4px 4px;
+  cursor: pointer;
+  text-decoration: none;
+
+  & > .tile-icon {
+    font-size: 4rem;
+    color: $color-primary;
+  }
+
+  & > .icon-label {
+    margin-top: 10px;
+
+    & > .label-text {
+      font-size: 1.2rem;
+      font-weight: bold;
+      color: $color-grey-dark;
+    }
+  }
+}
+</style>

src/components/common/tiles/TileContainer.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="tile-container">
+    <slot></slot>
+  </div>
+</template>
+<style scoped lang="scss">
+.tile-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+</style>

src/components/common/tiles/index.js

@@ -0,0 +1,7 @@
+import IconTile from "./IconTile";
+import TileContainer from "./TileContainer"
+
+export {
+  IconTile,
+  TileContainer
+}

src/router/index.js

@@ -1,10 +1,7 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { useRouter } from '@sharedo/mobile-core';
 import WorkItemList from "@/views/WorkItems/WorkItemList";
 import { TASK, MATTER } from "@/constants/workItemTypes";
 
-Vue.use(VueRouter);
-
 const routes = [
   {
     // Tab 1
@@ -21,6 +18,12 @@ const routes = [
     name: "profile",
     component: () => import("@/views/Profile/Profile.vue")
   },
+  {
+    path: "/tasks/new",
+    name: "new-task",
+    props: true,
+    component: () => import("@/views/WorkItems/New/NewTask.vue")
+  },
   {
     // Tab 1 -> Detail
     path: "/tasks/:id",
@@ -114,10 +117,6 @@ const routes = [
   }
 ]
 
-const router = new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes: routes,
-});
+const router = useRouter(routes);
 
 export default router;

src/store/index.js

@@ -1,9 +1,6 @@
-import Vue from 'vue'
-import Vuex from "vuex";
+import { useStore } from "@sharedo/mobile-core";
 
-Vue.use(Vuex);
-
-export default new Vuex.Store({
+const store = useStore({
   state: {
     notifications: {
       unread: 0,
@@ -47,4 +44,6 @@ export default new Vuex.Store({
       }
     }
   }
-})
+});
+
+export default store;

src/views/Main.vue

@@ -18,7 +18,7 @@
           </v-btn>
 
           <v-btn class="primary-action" @click.stop="showNewTaskForm()">
-            <span>New Task</span>
+            <span>New</span>
             <v-icon>mdi-plus-circle-outline</v-icon>
           </v-btn>
 
@@ -47,6 +47,8 @@ import { InstallPrompt, SharedoProfile } from '@sharedo/mobile-core';
 import { notifications } from "@/agents";
 import serviceWorkerBridge from "@/mixins/serviceWorkerBridge";
 
+const NewWorkItem = () => import("@/views/WorkItems/New/WorkItemType");
+
 export default {
   name: "Main",
   mixins: [serviceWorkerBridge],
@@ -58,6 +60,13 @@ export default {
     ...mapState({
       unreadNotifications: state => state.notifications.unread,
     }),
+    parentId: function () {
+      if (this.$route.name === "matter-detail") {
+        return this.$route.params.id;
+      }
+
+      return "";
+    }
   },
   mounted: async function () {
     InstallPrompt.init();
@@ -77,6 +86,7 @@ export default {
       }
     },
     showNewTaskForm: function () {
+      this.$coreUi.dialog(NewWorkItem, { parentId: this.parentId });
     },
   },
 };