Merge pull request #1205 from frankrousseau/master

Task types and status archival & search in projects
cgwire · Sep 29, 2023 · 3081a93 · 3081a93
2 parents 14bf42a + 0014991
commit 3081a93
Show file tree

Hide file tree

Showing 17 changed files with 300 additions and 48 deletions.
diff --git a/src/components/lists/StatusAutomationList.vue b/src/components/lists/StatusAutomationList.vue
@@ -174,11 +174,14 @@ export default {
 }
 
 .name {
-  text-transform: capitalize;
   width: 120px;
   min-width: 120px;
 }
 
+td.name {
+  text-transform: capitalize;
+}
+
 .in-task-type {
   width: 150px;
   min-width: 150px;

diff --git a/src/components/lists/TaskTypeList.vue b/src/components/lists/TaskTypeList.vue
@@ -14,13 +14,14 @@
             <th scope="col" class="actions"></th>
           </tr>
         </thead>
+
         <draggable
           class="datatable-body"
-          v-model="assetsItems"
           draggable=".tasktype-item"
-          tag="tbody"
           :sort="true"
+          tag="tbody"
           @end="updatePriorityAssets"
+          v-model="assetsItems"
         >
           <tr class="datatable-type-header" slot="header">
             <th scope="rowgroup" colspan="4">
@@ -50,7 +51,15 @@
               @edit-clicked="$emit('edit-clicked', taskType)"
             />
           </tr>
+          <tr class="empty" v-if="assetsItems.length === 0">
+            <th scope="rowgroup" colspan="4">
+              <span class="text">
+                {{ $t('task_types.no_task_types') }}
+              </span>
+            </th>
+          </tr>
         </draggable>
+
         <draggable
           class="datatable-body"
           v-model="shotsItems"
@@ -87,7 +96,15 @@
               @edit-clicked="$emit('edit-clicked', taskType)"
             />
           </tr>
+          <tr class="empty" v-if="shotsItems.length === 0">
+            <th scope="rowgroup" colspan="4">
+              <span class="text">
+                {{ $t('task_types.no_task_types') }}
+              </span>
+            </th>
+          </tr>
         </draggable>
+
         <draggable
           class="datatable-body"
           v-model="editsItems"
@@ -124,6 +141,13 @@
               @edit-clicked="$emit('edit-clicked', taskType)"
             />
           </tr>
+          <tr class="empty" v-if="editsItems.length === 0">
+            <th scope="rowgroup" colspan="4">
+              <span class="text">
+                {{ $t('task_types.no_task_types') }}
+              </span>
+            </th>
+          </tr>
         </draggable>
 
         <draggable
@@ -162,6 +186,13 @@
               @edit-clicked="$emit('edit-clicked', taskType)"
             />
           </tr>
+          <tr class="empty" v-if="sequencesItems.length === 0">
+            <th scope="rowgroup" colspan="4">
+              <span class="text">
+                {{ $t('task_types.no_task_types') }}
+              </span>
+            </th>
+          </tr>
         </draggable>
 
         <draggable
@@ -201,6 +232,13 @@
             />
           </tr>
         </draggable>
+        <tr class="empty" v-if="episodesItems.length === 0">
+          <th scope="rowgroup" colspan="4">
+            <span class="text">
+              {{ $t('task_types.no_task_types') }}
+            </span>
+          </th>
+        </tr>
       </table>
     </div>
 
@@ -396,4 +434,16 @@ export default {
 tr {
   cursor: pointer;
 }
+
+.empty {
+  span {
+    color: var(--text);
+    font-weight: normal;
+    font-style: italic;
+  }
+}
+
+.data-list {
+  margin-top: 0;
+}
 </style>
diff --git a/src/components/modals/EditPersonModal.vue b/src/components/modals/EditPersonModal.vue
@@ -46,6 +46,12 @@
 
           <div class="departments field">
             <label class="label">{{ $t('people.fields.departments') }}</label>
+            <p
+              class="empty mb1"
+              v-if="form.departments && form.departments.length === 0"
+            >
+              {{ $t('people.departments_empty') }}
+            </p>
             <div
               class="department-element mb1 mt05"
               :key="departmentId"
@@ -381,4 +387,9 @@ export default {
   color: #ff3860;
   font-style: italic;
 }
+
+.empty {
+  color: var(--text);
+  font-style: italic;
+}
 </style>
diff --git a/src/components/modals/EditTaskStatusModal.vue b/src/components/modals/EditTaskStatusModal.vue
@@ -9,7 +9,7 @@
 
     <div class="modal-content">
       <div class="box">
-        <h1 class="title" v-if="isEditing()">
+        <h1 class="title" v-if="isEditing">
           {{ $t('task_status.edit_title') }} {{ taskStatusToEdit.name }}
         </h1>
         <h1 class="title" v-else>
@@ -77,6 +77,13 @@
             v-model="form.color"
             v-if="taskStatusToEdit.short_name !== 'todo'"
           />
+
+          <combobox-boolean
+            :label="$t('main.archived')"
+            @enter="confirmClicked"
+            v-model="form.archived"
+            v-if="isEditing"
+          />
         </form>
 
         <modal-footer
@@ -95,6 +102,7 @@
 import { mapGetters, mapActions } from 'vuex'
 import { modalMixin } from '@/components/modals/base_modal'
 import BooleanField from '@/components/widgets/BooleanField'
+import ComboboxBoolean from '@/components/widgets/ComboboxBoolean'
 import ColorField from '@/components/widgets/ColorField'
 import ModalFooter from '@/components/modals/ModalFooter'
 import TextField from '@/components/widgets/TextField'
@@ -105,6 +113,7 @@ export default {
   components: {
     BooleanField,
     ColorField,
+    ComboboxBoolean,
     ModalFooter,
     TextField
   },
@@ -136,7 +145,8 @@ export default {
         color: '$grey999',
         is_done: 'false',
         is_feedback_request: 'false',
-        is_default: 'false'
+        is_default: 'false',
+        archived: 'false'
       },
       isRetakeOptions: [
         { label: this.$t('main.yes'), value: 'true' },
@@ -180,7 +190,11 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['taskStatus', 'taskStatusStatusOptions'])
+    ...mapGetters(['taskStatus', 'taskStatusStatusOptions']),
+
+    isEditing() {
+      return this.taskStatusToEdit && this.taskStatusToEdit.id
+    }
   },
 
   methods: {
@@ -190,10 +204,6 @@ export default {
       this.$emit('confirm', this.form)
     },
 
-    isEditing() {
-      return this.taskStatusToEdit && this.taskStatusToEdit.id
-    },
-
     resetForm() {
       if (this.taskStatusToEdit) {
         this.form = {
@@ -207,7 +217,8 @@ export default {
           is_default: String(this.taskStatusToEdit.is_default || false),
           is_feedback_request: String(
             this.taskStatusToEdit.is_feedback_request || false
-          )
+          ),
+          archived: String(this.taskStatusToEdit.archived || false)
         }
       }
     }

diff --git a/src/components/modals/EditTaskTypeModal.vue b/src/components/modals/EditTaskTypeModal.vue
@@ -44,9 +44,16 @@
           />
           <color-field
             ref="colorField"
+            class="mt2"
             :label="$t('task_types.fields.color')"
             v-model="form.color"
           />
+          <combobox-boolean
+            :label="$t('main.archived')"
+            @enter="confirmClicked"
+            v-model="form.archived"
+            v-if="isEditing"
+          />
         </form>
 
         <modal-footer
@@ -66,6 +73,7 @@ import { mapGetters, mapActions } from 'vuex'
 import { modalMixin } from '@/components/modals/base_modal'
 
 import BooleanField from '@/components/widgets/BooleanField'
+import ComboboxBoolean from '@/components/widgets/ComboboxBoolean'
 import ComboboxSimple from '@/components/widgets/ComboboxSimple'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment'
 import ColorField from '@/components/widgets/ColorField'
@@ -77,6 +85,7 @@ export default {
   mixins: [modalMixin],
   components: {
     BooleanField,
+    ComboboxBoolean,
     ComboboxSimple,
     ComboboxDepartment,
     ColorField,
@@ -97,10 +106,6 @@ export default {
       type: Boolean,
       default: false
     },
-    taskTypes: {
-      type: Array,
-      default: () => []
-    },
     taskTypeToEdit: {
       type: Object,
       default: () => {}
@@ -115,7 +120,8 @@ export default {
           color: this.taskTypeToEdit.color,
           for_entity: this.taskTypeToEdit.for_entity || 'Asset',
           allow_timelog: String(this.taskTypeToEdit.allow_timelog === true),
-          department_id: this.taskTypeToEdit.department_id
+          department_id: this.taskTypeToEdit.department_id,
+          archived: String(this.taskTypeToEdit.archived === true)
         }
       }
     }
@@ -128,7 +134,8 @@ export default {
         color: '$grey',
         for_entity: 'Asset',
         allow_timelog: 'false',
-        department_id: null
+        department_id: null,
+        archived: 'false'
       },
       dedicatedToOptions: [
         { label: this.$t('assets.title'), value: 'Asset' },

diff --git a/src/components/modals/ImportModal.vue b/src/components/modals/ImportModal.vue
@@ -88,8 +88,8 @@ export default {
   components: {
     FileUpload,
     ModalFooter,
-    Tabs,
-    Tab
+    Tab,
+    Tabs
   },
 
   data() {

diff --git a/src/components/pages/OpenProductions.vue b/src/components/pages/OpenProductions.vue
@@ -25,6 +25,14 @@
       class="open-productions-box"
       v-if="!isOpenProductionsLoading && openProductions.length > 0"
     >
+      <div class="flexrow search-area" v-if="openProductions.length > 6">
+        <search-field
+          ref="search-field"
+          class="search-field"
+          @change="onSearchChange"
+        />
+      </div>
+
       <div
         :class="{
           'open-productions-list': true,
@@ -34,7 +42,7 @@
         <div
           class="open-production has-text-centered"
           :key="production.id"
-          v-for="production in openProductions"
+          v-for="production in filteredProductions"
         >
           <router-link :to="getPath(production)">
             <div
@@ -94,20 +102,26 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 
-import colors from '@/lib/colors.js'
+import { buildNameIndex } from '@/lib/indexing'
+
+import colors from '@/lib/colors'
 import EditProductionModal from '@/components/modals/EditProductionModal'
+import SearchField from '@/components/widgets/SearchField'
 import Spinner from '@/components/widgets/Spinner'
 
 export default {
   name: 'open-productions',
 
   components: {
     EditProductionModal,
+    SearchField,
     Spinner
   },
 
   data() {
     return {
+      filteredProductions: [],
+      search: '',
       errors: {
         edit: false
       },
@@ -120,6 +134,12 @@ export default {
     }
   },
 
+  mounted() {
+    this.$refs['search-field'].focus()
+    this.filteredProductions = this.openProductions
+    this.productionIndex = buildNameIndex(this.openProductions)
+  },
+
   computed: {
     ...mapGetters([
       'isCurrentUserAdmin',
@@ -196,6 +216,15 @@ export default {
 
     hideNewModal() {
       this.modals.isNewDisplayed = false
+    },
+
+    onSearchChange(search) {
+      console.log(search)
+      if (search === '') {
+        this.filteredProductions = this.openProductions
+      } else {
+        this.filteredProductions = this.productionIndex[search]
+      }
     }
   },
 
@@ -385,6 +414,10 @@ a.secondary:hover {
   }
 }
 
+.search-area {
+  justify-content: center;
+}
+
 @media screen and (max-width: 768px) {
   .title {
     margin-top: 1em;