From 4daa58ebd4543ec55a5d70829f512a2efcc9a6c4 Mon Sep 17 00:00:00 2001
From: James Hall <james.hall@slicedbread.co.uk>
Date: Wed, 11 Oct 2023 11:05:18 +0100
Subject: [PATCH] Create work item.

Added new work item type picker modal.

Basic task form working.

Added validation.

Added fix for vuex store.
---
 package-lock.json                             |  21 +--
 package.json                                  |   2 +-
 src/agents/tasksAgent.js                      |   5 +-
 src/components/common/tiles/IconTile.vue      |  59 +++++++
 src/components/common/tiles/TileContainer.vue |  14 ++
 src/components/common/tiles/index.js          |   7 +
 src/router/index.js                           |  17 +-
 src/store/index.js                            |  11 +-
 src/views/Main.vue                            |  12 +-
 src/views/WorkItems/New/NewTask.vue           | 150 ++++++++++++++++++
 src/views/WorkItems/New/WorkItemType.vue      |  39 +++++
 src/views/WorkItems/WorkItemDetail.vue        |  13 +-
 12 files changed, 321 insertions(+), 29 deletions(-)
 create mode 100644 src/components/common/tiles/IconTile.vue
 create mode 100644 src/components/common/tiles/TileContainer.vue
 create mode 100644 src/components/common/tiles/index.js
 create mode 100644 src/views/WorkItems/New/NewTask.vue
 create mode 100644 src/views/WorkItems/New/WorkItemType.vue

diff --git a/package-lock.json b/package-lock.json
index b9df63f..3ed69f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1194,15 +1194,16 @@
       "dev": true
     },
     "@sharedo/mobile-core": {
-      "version": "0.1.24",
-      "resolved": "https://registry.npmjs.org/@sharedo/mobile-core/-/mobile-core-0.1.24.tgz",
-      "integrity": "sha512-srwoXxo8Ih9t6Dpqg9yuVrzSjA6QP8vyJf4Gku3d4rwTJG4lulxZKXiKn1pC6wUBf9bi7DQTbOJmQtK8l7i6Ww==",
+      "version": "0.1.27",
+      "resolved": "https://registry.npmjs.org/@sharedo/mobile-core/-/mobile-core-0.1.27.tgz",
+      "integrity": "sha512-OmkU2gcpXabQSoNDr9+sVd9c9A+sYusgcQS6+wVmhh8SHtazelH6rp92ZL7JbQ0PnubBRCbgwhRO1JqkCDsHaQ==",
       "requires": {
         "core-js": "~3.6.5",
         "tiptap-vuetify": "^2.24.0",
         "vue": "~2.6.11",
         "vue-router": "~3.5.3",
-        "vuetify": "~2.4.0"
+        "vuetify": "~2.4.0",
+        "vuex": "~3.4.0"
       }
     },
     "@soda/friendly-errors-webpack-plugin": {
@@ -9290,17 +9291,17 @@
       }
     },
     "prosemirror-transform": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.7.5.tgz",
-      "integrity": "sha512-U/fWB6frEzY7dzwJUo+ir8dU1JEanaI/RwL12Imy9js/527N0v/IRUKewocP1kTq998JNT18IGtThaDLwLOBxQ==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.8.0.tgz",
+      "integrity": "sha512-BaSBsIMv52F1BVVMvOmp1yzD3u65uC3HTzCBQV1WDPqJRQ2LuHKcyfn0jwqodo8sR9vVzMzZyI+Dal5W9E6a9A==",
       "requires": {
         "prosemirror-model": "^1.0.0"
       }
     },
     "prosemirror-view": {
-      "version": "1.31.8",
-      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.31.8.tgz",
-      "integrity": "sha512-VQrEIdiPJ4YV65Ifj2kWISwaiqocMHy7cpUKVQYt19C/87FepoqnwVW3kMKRpeY/nQzED8L+vyOaYDBn0WqT7w==",
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.32.0.tgz",
+      "integrity": "sha512-HwW7IWgca6ehiW2PA48H/8yl0TakA0Ms5LgN5Krc97oar7GfjIKE/NocUsLe74Jq4mwyWKUNoBljE8WkXKZwng==",
       "requires": {
         "prosemirror-model": "^1.16.0",
         "prosemirror-state": "^1.0.0",
diff --git a/package.json b/package.json
index bfbd688..926edda 100644
--- a/package.json
+++ b/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",
diff --git a/src/agents/tasksAgent.js b/src/agents/tasksAgent.js
index b460ae1..eae5224 100644
--- a/src/agents/tasksAgent.js
+++ b/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
 };
diff --git a/src/components/common/tiles/IconTile.vue b/src/components/common/tiles/IconTile.vue
new file mode 100644
index 0000000..a2ac98f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/common/tiles/TileContainer.vue b/src/components/common/tiles/TileContainer.vue
new file mode 100644
index 0000000..9611aee
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/common/tiles/index.js b/src/components/common/tiles/index.js
new file mode 100644
index 0000000..82ae3c7
--- /dev/null
+++ b/src/components/common/tiles/index.js
@@ -0,0 +1,7 @@
+import IconTile from "./IconTile";
+import TileContainer from "./TileContainer"
+
+export {
+  IconTile,
+  TileContainer
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 6fb5400..76ebdaa 100644
--- a/src/router/index.js
+++ b/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;
diff --git a/src/store/index.js b/src/store/index.js
index 52353d8..cfeb84f 100644
--- a/src/store/index.js
+++ b/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({
       }
     }
   }
-})
\ No newline at end of file
+});
+
+export default store;
\ No newline at end of file
diff --git a/src/views/Main.vue b/src/views/Main.vue
index b801477..7610eba 100644
--- a/src/views/Main.vue
+++ b/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 });
     },
   },
 };
diff --git a/src/views/WorkItems/New/NewTask.vue b/src/views/WorkItems/New/NewTask.vue
new file mode 100644
index 0000000..1447359
--- /dev/null
+++ b/src/views/WorkItems/New/NewTask.vue
@@ -0,0 +1,150 @@
+<template>
+  <v-container>
+    <VTopToolbar title="New Task" :showBack="true">
+      <template v-slot:menu>
+        <app-menu />
+      </template>
+    </VTopToolbar>
+    <div v-if="loading">
+      <v-skeleton-loader type="paragraph"></v-skeleton-loader>
+    </div>
+    <v-container v-else>
+      <v-row>
+        <v-select label="Work Item" v-model="selectedMatter" :items="matterItems" :disabled="!!parentId" />
+      </v-row>
+      <v-row>
+        <v-text-field label="Reference" v-model="reference" required :error="referenceErrors.length > 0"
+          :error-count="referenceErrors.length" :error-messages="referenceErrors" />
+      </v-row>
+      <v-row>
+        <v-text-field label="Title" v-model="title" required :error="titleErrors.length > 0"
+          :error-count="titleErrors.length" :error-messages="titleErrors" />
+      </v-row>
+      <v-row>
+        <v-textarea label="Description" v-model="description" required :error="descriptionErrors.length > 0"
+          :error-count="descriptionErrors.length" :error-messages="descriptionErrors" />
+      </v-row>
+      <v-row>
+        <v-text-field label="Due Date" v-model="dueDateInput" type="datetime-local" placeholder="dd/mm/yyyy hh:mm"
+          required :error="dueDateErrors.length > 0" :error-count="dueDateErrors.length"
+          :error-messaged="dueDateErrors" />
+      </v-row>
+      <v-row>
+        <v-btn color="primary" @click="save" :disabled="errorCount > 0">Create</v-btn>
+        <v-btn @click="$router.back()">Cancel</v-btn>
+      </v-row>
+    </v-container>
+  </v-container>
+</template>
+<script>
+import moment from "moment";
+import { validate, required, maxLength } from "@sharedo/mobile-core/src/validation";
+import { matters, tasks } from "@/agents";
+
+export default {
+  props: {
+    parentId: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
+  data: function () {
+    return {
+      reference: "",
+      title: "",
+      description: "",
+      dueDate: moment.now(),
+      matters: [],
+      loading: true,
+      selectedMatter: this.parentId
+    }
+  },
+  computed: {
+    dueDateInput: {
+      get: function () {
+        if (this.dueDate) {
+          return moment(this.dueDate).format("YYYY-MM-DDTHH:mm");
+        }
+
+        return null;
+      },
+      set: function (value) {
+        if (value) {
+          this.dueDate = moment(value).utc().format();
+        } else {
+          this.dueDate = null;
+        }
+      }
+    },
+    matterItems: function () {
+      return this.matters.map(matter => ({
+        text: `${matter.data.reference} - ${matter.data.title}`,
+        value: matter.id
+      }));
+    },
+    referenceErrors: function () {
+      return validate(
+        this.reference,
+        required("A reference is required."),
+        maxLength(200));
+    },
+    titleErrors: function () {
+      return validate(this.title, required("A title is required."))
+    },
+    descriptionErrors: function () {
+      return validate(this.description, required("A description is required."))
+    },
+    dueDateErrors: function () {
+      return validate(this.dueDateInput, required("A due date is required."))
+    },
+    errorCount: function () {
+      return [
+        ...this.referenceErrors,
+        ...this.titleErrors,
+        ...this.descriptionErrors,
+        ...this.dueDateErrors
+      ].length;
+    }
+  },
+  methods: {
+    loadMatters: async function () {
+      try {
+        const response = await matters.list(1, 1000);  // Just get the first 1000, that should be more than enough.  Looks like elastic errors if large numbers are requested (even if no where near as many are returned).
+        this.matters = response.results;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    save: async function () {
+      try {
+        const task = {
+          ParentSharedoId: this.parentId,
+          workItem: {
+            sharedoTypeSystemName: "task",
+            title: this.title,
+            reference: this.reference,
+            description: this.description
+          },
+          aspectData: {
+            task: {
+              dueDateTime: this.dueDate
+            }
+          }
+        };
+
+        const response = await tasks.create(task);
+        await tasks.takeOwnership(response.workItem.id);
+
+        this.$router.push({ name: "task-detail", params: { id: response.workItem.id } });
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  },
+  mounted: async function () {
+    await this.loadMatters();
+    this.loading = false;
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/WorkItems/New/WorkItemType.vue b/src/views/WorkItems/New/WorkItemType.vue
new file mode 100644
index 0000000..c6f20d4
--- /dev/null
+++ b/src/views/WorkItems/New/WorkItemType.vue
@@ -0,0 +1,39 @@
+<template>
+  <v-card>
+    <v-toolbar flat outlined>
+      <v-icon @click="close">mdi-close</v-icon>
+      <v-spacer />
+      <v-toolbar-title>New</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-card-text>
+      <tile-container class="work-item-types">
+        <icon-tile label="Task" icon="fa-check-circle" :to="{ name: 'new-task', params: { parentId } }" @click="close" />
+      </tile-container>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+import { TileContainer, IconTile } from "@/components/common/tiles";
+
+export default {
+  props: {
+    parentId: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
+  components: { TileContainer, IconTile },
+  methods: {
+    close: function (result) {
+      this.$emit("close", result);
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.work-item-types {
+  margin-top: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/WorkItems/WorkItemDetail.vue b/src/views/WorkItems/WorkItemDetail.vue
index a757ca2..97a2ac5 100644
--- a/src/views/WorkItems/WorkItemDetail.vue
+++ b/src/views/WorkItems/WorkItemDetail.vue
@@ -13,7 +13,10 @@
             <v-icon>mdi-comment-outline</v-icon>
           </v-badge>
         </v-btn>
-        <v-icon @click="showActionSheet()">
+        <v-icon v-if="isMatter" @click="showNewTaskForm">
+          mdi-plus
+        </v-icon>
+        <v-icon @click="showActionSheet">
           mdi-dots-horizontal
         </v-icon>
       </template>
@@ -73,11 +76,13 @@ import { SharedoProfile } from "@sharedo/mobile-core";
 import { tasks, matters, comments, bookmarks, phases } from "@/agents";
 import { MATTER, TASK } from "@/constants/workItemTypes";
 
+const NewWorkItem = () => import("@/views/WorkItems/New/WorkItemType");
 const EditWorkItem = () => import("./EditWorkItem");
 const RelatedDocumentList = () => import("@/views/RelatedDocuments/RelatedDocumentList");
 
 export default {
   components: {
+    NewWorkItem,
     EditWorkItem,
     RelatedDocumentList
   },
@@ -112,6 +117,9 @@ export default {
     };
   },
   computed: {
+    isMatter: function () {
+      return this.type === MATTER
+    },
     canViewTime: function () {
       return SharedoProfile.profile.globalPermissions.indexOf("core.time.read") !== -1;
     },
@@ -250,6 +258,9 @@ export default {
         console.error(error);
       }
     },
+    showNewTaskForm: function () {
+      this.$coreUi.dialog(NewWorkItem, { parentId: this.id });
+    },
     showActionSheet: function () {
       const self = this;