Start split out of projects into own components and page

overshard · Jan 18, 2019 · 1ce8d2e · 1ce8d2e
1 parent 4c6cb9a
commit 1ce8d2e
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 96 deletions.
diff --git a/client/static_src/components/app.vue b/client/static_src/components/app.vue
@@ -42,6 +42,15 @@
                 Timesheet
               </router-link>
             </li>
+            <li class="nav-item">
+              <router-link
+                id="nav-projects"
+                :to="projects"
+                class="nav-link">
+                <icon :icon="['fas', 'briefcase']" class="mr-1"/>
+                Projects
+              </router-link>
+            </li>
             <li class="nav-item">
               <router-link
                 id="nav-clients"
@@ -147,6 +156,7 @@ export default {
   data() {
     return {
       timesheet: timestrapConfig.CORE_URLS.TIMESHEET,
+      projects: timestrapConfig.CORE_URLS.PROJECTS,
       clients: timestrapConfig.CORE_URLS.CLIENTS,
       tasks: timestrapConfig.CORE_URLS.TASKS,
       reports: timestrapConfig.CORE_URLS.REPORTS,

diff --git a/client/static_src/components/projects/projects.vue b/client/static_src/components/projects/projects.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="row mb-4">
+    <div class="col-md-7">
+      <h1 class="mb-0">
+        <icon :icon="['fas', 'briefcase']" class="text-muted mr-2"/>
+        Projects
+      </h1>
+    </div>
+    <div class="col-md-5 d-flex flex-column align-items-end justify-content-center">
+      <input
+        id="task-search"
+        v-model="search"
+        placeholder="Type to filter projects..."
+        class="form-control shadow-sm"
+        type="text">
+    </div>
+  </div>
+</template>
+
+
+<script>
+import {mapGetters, mapActions} from 'vuex';
+
+
+export default {
+  data() {
+    return {
+      search: '',
+    };
+  },
+};
+</script>
diff --git a/client/static_src/components/tasks/task-new.vue b/client/static_src/components/tasks/task-new.vue
@@ -2,16 +2,14 @@
   <div class="col-md-4 col-lg-3 mb-4">
     <div
       id="task-add"
-      :class="{ 'task': true, 'new': true, 'card': true, 'shadow-sm': true, 'edit': edit }"
+      :class="{ 'task': true, 'new': true, 'card': true, 'edit': edit }"
       v-if="this.$perms.add_task"
       @click.exact="editMode()">
-      <div class="card-body">
+      <div class="card-body d-flex justify-content-center align-items-center">
         <template v-if="!edit">
-          <div class="btn btn-light btn-sm btn-icon shadow-sm text-muted float-right">
-            <icon :icon="['fas', 'plus']"/>
-          </div>
-          <div class="card-title h5">
-            New task
+          <div class="text-muted">
+            <icon :icon="['fas', 'plus']" class="mr-1"/>
+            New
           </div>
         </template>
         <template v-else>

diff --git a/client/static_src/components/tasks/task.vue b/client/static_src/components/tasks/task.vue
@@ -1,78 +1,82 @@
 <template>
   <div :id="'task-' + taskMutable.id" class="col-md-4 col-lg-3 mb-4">
     <div class="task card shadow-sm">
-      <div class="card-body">
-        <div v-if="!edit" class="float-right">
-          <template v-if="this.$perms.change_task || this.$perms.delete_task">
-            <button
-              id="task-menu"
-              class="btn btn-light btn-sm btn-icon shadow-sm dropdown-toggle text-muted"
-              type="button"
-              data-toggle="dropdown">
-              <icon :icon="['fas', 'ellipsis-h']"/>
-            </button>
-            <div class="dropdown-menu dropdown-menu-right shadow">
-              <button
-                v-if="this.$perms.change_task"
-                id="task-menu-change"
-                class="dropdown-item"
-                @click.prevent
-                @click.exact="editMode()">
-                Edit
-              </button>
-              <button
-                v-if="this.$perms.delete_task"
-                id="task-menu-delete"
-                class="dropdown-item"
-                @click.prevent
-                @click.exact="deleteTask(index)">
-                Delete
-              </button>
-            </div>
-          </template>
-        </div>
+      <div class="card-body d-flex flex-column align-items-start">
         <template v-if="!this.edit">
-          <div class="card-title h5">
-            {{ taskMutable.name }}
+          <div class="w-100 flex-grow-1">
+            <div class="float-right">
+              <template v-if="this.$perms.change_task || this.$perms.delete_task">
+                <button
+                  id="task-menu"
+                  class="btn btn-light btn-sm btn-icon shadow-sm dropdown-toggle text-muted"
+                  type="button"
+                  data-toggle="dropdown">
+                  <icon :icon="['fas', 'ellipsis-h']"/>
+                </button>
+                <div class="dropdown-menu dropdown-menu-right shadow">
+                  <button
+                    v-if="this.$perms.change_task"
+                    id="task-menu-change"
+                    class="dropdown-item"
+                    @click.prevent
+                    @click.exact="editMode()">
+                    Edit
+                  </button>
+                  <button
+                    v-if="this.$perms.delete_task"
+                    id="task-menu-delete"
+                    class="dropdown-item"
+                    @click.prevent
+                    @click.exact="deleteTask(index)">
+                    Delete
+                  </button>
+                </div>
+              </template>
+            </div>
+            <div class="card-title h5">
+              {{ taskMutable.name }}
+            </div>
           </div>
-          <div v-if="task.hourly_rate" class="card-subtitle h6 mb-2 text-muted">
+          <div v-if="task.hourly_rate" class="card-subtitle h6 mb-2 badge badge-pill badge-secondary">
             ${{ taskMutable.hourly_rate }}/hr
           </div>
         </template>
         <template v-else>
-          <div class="card-text">
-            <label for="task-name-edit" class="card-label">
-              <small class="text-muted font-weight-bold">Name</small>
-            </label>
-            <input
-              id="task-name-edit"
-              name="task-name-edit"
-              v-model="taskMutable.name"
-              class="form-control form-control-sm"
-              placeholder="Name"/>
-            <label for="task-hourly-rate-edit" class="card-label">
-              <small class="text-muted font-weight-bold">Hourly Rate</small>
-            </label>
-            <input
-              class="form-control form-control-sm"
-              id="task-hourly-rate-edit"
-              name="task-hourly-rate-edit"
-              v-model="taskMutable.hourly_rate"
-              placeholder="Hourly rate"/>
+          <div class="d-flex justify-content-center align-items-center h-100">
+            <div class="card-text">
+              <label for="task-name-edit" class="card-label">
+                <small class="text-muted font-weight-bold">Name</small>
+              </label>
+              <input
+                id="task-name-edit"
+                name="task-name-edit"
+                v-model="taskMutable.name"
+                class="form-control form-control-sm"
+                placeholder="Name"/>
+              <label for="task-hourly-rate-edit" class="card-label">
+                <small class="text-muted font-weight-bold">Hourly Rate</small>
+              </label>
+              <input
+                class="form-control form-control-sm"
+                id="task-hourly-rate-edit"
+                name="task-hourly-rate-edit"
+                v-model="taskMutable.hourly_rate"
+                placeholder="Hourly rate"/>
+              <button
+                id="task-submit-edit"
+                class="btn btn-sm btn-success mt-2"
+                type="submit"
+                @click.exact="submit()">
+                Save
+              </button>
+              <button
+                class="btn btn-sm btn-light mt-2"
+                type="button"
+                @click.exact="cancel()">
+                Cancel
+              </button>
+            </div>
           </div>
-          <button
-            id="task-submit-edit"
-            class="btn btn-sm btn-success mt-2"
-            type="submit"
-            @click.exact="submit()">
-            Save
-          </button>
-          <button
-            class="btn btn-sm btn-light mt-2"
-            type="button"
-            @click.exact="cancel()">
-            Cancel
-          </button>
         </template>
       </div>
     </div>
@@ -139,4 +143,16 @@ export default {
   height: 17rem;
   transition: transform 300ms;
 }
+
+.task {
+  #task-menu {
+    opacity: 0;
+    transition: opacity 300ms;
+  }
+  &:hover {
+    #task-menu {
+      opacity: 1;
+    }
+  }
+}
 </style>
diff --git a/client/static_src/components/timesheet/timesheet.vue b/client/static_src/components/timesheet/timesheet.vue
@@ -1,28 +1,5 @@
 <template>
   <div class="container">
-    <div class="row py-2 mb-4 bg-light rounded">
-      <div class="col-12">
-        <router-link
-          to="/reports/"
-          class="btn btn-primary btn-sm">
-          <icon
-            :icon="['fas', 'book']"
-            class="mr-1"/>
-          Create Reports
-        </router-link>
-
-        <button
-          class="btn btn-secondary btn-sm float-right ml-2"
-          @click.prevent
-          @click="getEntries">
-          <icon
-            :icon="['fas', 'sync']"
-            class="mr-1"/>
-          Sync
-        </button>
-      </div>
-    </div>
-
     <entry-modal
       v-if="modal.show && (this.$perms.add_entry || this.$perms.change_entry)"
       id="entry-modal"

diff --git a/client/static_src/router.js b/client/static_src/router.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
+import Projects from './components/projects/projects.vue';
 import Clients from './components/clients/clients.vue';
 import Tasks from './components/tasks/tasks.vue';
 import Timesheet from './components/timesheet/timesheet.vue';
@@ -21,6 +22,12 @@ export default new VueRouter({
       component: Timesheet,
       meta: {title: 'Timesheet — ' + timestrapConfig.SITE.NAME},
     },
+    {
+      path: '/projects/',
+      name: 'projects',
+      component: Projects,
+      meta: {title: 'Projects — ' + timestrapConfig.SITE.NAME},
+    },
     {
       path: '/clients/',
       name: 'clients',

diff --git a/client/templates/core/app.html b/client/templates/core/app.html
@@ -31,6 +31,7 @@
         CLIENTS: "{% url 'clients' %}",
         TIMESHEET: "{% url 'timesheet' %}",
         TASKS: "{% url 'tasks' %}",
+        PROJECTS: "{% url 'projects' %}",
       };
       timestrapConfig.API_URLS = {
         USERS: "{% url 'user-list' %}",

diff --git a/core/models.py b/core/models.py
@@ -91,7 +91,6 @@ class Task(models.Model):
 
     class Meta:
         default_permissions = ('view', 'add', 'change', 'delete')
-        ordering = ['-id']
 
     def __str__(self):
         return 'Task: ' + self.name