From 1a96113a4972f44ea62d90ddf13916800d924427 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Mon, 20 May 2024 23:30:45 +0200
Subject: [PATCH] [entities] Allow to create shared filters

---
 .../modals/EditSearchFilterModal.vue          | 26 ++++++++--
 src/components/widgets/SearchQueryList.vue    | 47 +++++++++++++++++--
 src/locales/en.js                             |  1 +
 src/store/api/people.js                       |  4 +-
 4 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/src/components/modals/EditSearchFilterModal.vue b/src/components/modals/EditSearchFilterModal.vue
index fafb3cbc92..8ba9509109 100644
--- a/src/components/modals/EditSearchFilterModal.vue
+++ b/src/components/modals/EditSearchFilterModal.vue
@@ -28,6 +28,12 @@
             @enter="runConfirmation"
           />
 
+          <boolean-field
+            :label="$t('main.is_shared')"
+            v-model="form.is_shared"
+            v-if="isCurrentUserManager && currentProduction"
+          />
+
           <combobox
             :label="$t('main.filter_group')"
             :options="groupOptions"
@@ -53,9 +59,11 @@
  * Modal used to edit search filter information. Users prefer to rename the
    filter label when it's too complex to read or too long.
  */
+import { mapGetters } from 'vuex'
 import { modalMixin } from '@/components/modals/base_modal'
 import ModalFooter from '@/components/modals/ModalFooter'
 
+import BooleanField from '@/components/widgets/BooleanField'
 import Combobox from '@/components/widgets/Combobox'
 import TextField from '@/components/widgets/TextField'
 
@@ -63,6 +71,7 @@ export default {
   name: 'edit-search-filter-modal',
   mixins: [modalMixin],
   components: {
+    BooleanField,
     Combobox,
     ModalFooter,
     TextField
@@ -102,11 +111,16 @@ export default {
         name: '',
         search_filter_group_id: null,
         search_query: '',
+        is_shared: 'false',
         task_status_id: null
       }
     }
   },
 
+  computed: {
+    ...mapGetters(['currentProduction', 'isCurrentUserManager'])
+  },
+
   methods: {
     runConfirmation(event) {
       if (!this.form.name.length) {
@@ -115,10 +129,12 @@ export default {
       }
 
       if (!event || event.keyCode === 13 || !event.keyCode) {
-        this.$emit('confirm', {
+        const data = {
           id: this.searchQueryToEdit.id,
-          ...this.form
-        })
+          ...this.form,
+          is_shared: this.form.is_shared === 'true'
+        }
+        this.$emit('confirm', data)
       }
     }
   },
@@ -131,12 +147,16 @@ export default {
         this.form.search_filter_group_id =
           this.searchQueryToEdit.search_filter_group_id
         this.form.search_query = this.searchQueryToEdit.search_query
+        this.form.is_shared = this.searchQueryToEdit.is_shared
+          ? 'true'
+          : 'false'
       } else {
         this.form = {
           id: null,
           name: '',
           search_filter_group_id: null,
           search_query: '',
+          is_shared: 'false',
           task_status_id: null
         }
       }
diff --git a/src/components/widgets/SearchQueryList.vue b/src/components/widgets/SearchQueryList.vue
index 0c042c6d60..518455e47e 100644
--- a/src/components/widgets/SearchQueryList.vue
+++ b/src/components/widgets/SearchQueryList.vue
@@ -82,16 +82,27 @@
       </div>
     </span>
     <span
-      class="tag"
+      :class="{
+        tag: true,
+        'is-shared': searchQuery.is_shared
+      }"
       :key="searchQuery.id"
       @click="changeSearch(searchQuery)"
       v-for="searchQuery in userFilters"
     >
       {{ searchQuery.name }}
-      <button class="edit" @click.stop="editSearch(searchQuery)">
+      <button
+        class="edit"
+        @click.stop="editSearch(searchQuery)"
+        v-if="!searchQuery.is_shared || isCurrentUserManager"
+      >
         <edit2-icon size="0.6x" />
       </button>
-      <button class="del" @click.stop="removeSearch(searchQuery)">
+      <button
+        class="del"
+        @click.stop="removeSearch(searchQuery)"
+        v-if="!searchQuery.is_shared || isCurrentUserManager"
+      >
         <trash2-icon size="0.6x" />
       </button>
     </span>
@@ -121,7 +132,7 @@
  * This component displays a list of queries available to users to filter list
  * results. It allows to modify each query too.
  */
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import {
   ChevronDownIcon,
   ChevronUpIcon,
@@ -155,6 +166,7 @@ export default {
       required: true
     }
   },
+
   components: {
     ChevronDownIcon,
     ChevronUpIcon,
@@ -164,6 +176,7 @@ export default {
     FolderPlusIcon,
     Trash2Icon
   },
+
   data() {
     return {
       groupToEdit: {},
@@ -183,13 +196,28 @@ export default {
       toggleGroupId: null
     }
   },
+
   computed: {
+    ...mapGetters(['currentProduction', 'isCurrentUserManager']),
+
     sortedFilters() {
       return sortByName([...this.queries])
     },
+
     userFilters() {
-      return this.sortedFilters.filter(query => !query.search_filter_group_id)
+      return this.sortedFilters
+        .filter(query => !query.search_filter_group_id)
+        .sort((a, b) => {
+          if (a.is_shared && !b.is_shared) {
+            return -1
+          } else if (!a.is_shared && b.is_shared) {
+            return 1
+          } else {
+            return 0
+          }
+        })
     },
+
     userFilterGroups() {
       return sortByName([...this.groups]).map(group => {
         return {
@@ -200,6 +228,7 @@ export default {
         }
       })
     },
+
     groupOptions() {
       return [
         { label: '', value: null },
@@ -210,6 +239,7 @@ export default {
       ]
     }
   },
+
   methods: {
     ...mapActions([
       'removeAssetSearchFilterGroup',
@@ -259,6 +289,9 @@ export default {
       try {
         this.loading.edit = true
         this.errors.edit = false
+        searchFilter.project_id = this.currentProduction
+          ? this.currentProduction.id
+          : null
         await this.updateSearchFilter(searchFilter)
         this.modals.edit = false
       } catch (err) {
@@ -419,4 +452,8 @@ export default {
 .search-queries .del {
   margin-left: 0.5em;
 }
+
+.tag.is-shared {
+  border: 1px solid $blue;
+}
 </style>
diff --git a/src/locales/en.js b/src/locales/en.js
index b4b822dd54..497b695c30 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -556,6 +556,7 @@ export default {
     history: 'history',
     info: 'Information',
     import: 'Import',
+    is_shared: 'Shared with the whole team',
     home: 'return to home page',
     or: 'or',
     no: 'No',
diff --git a/src/store/api/people.js b/src/store/api/people.js
index 8d99ebc749..a4b8976fff 100644
--- a/src/store/api/people.js
+++ b/src/store/api/people.js
@@ -274,7 +274,9 @@ export default {
     const data = {
       name: searchFilter.name,
       search_query: searchFilter.search_query,
-      search_filter_group_id: searchFilter.search_filter_group_id
+      search_filter_group_id: searchFilter.search_filter_group_id,
+      is_shared: searchFilter.is_shared,
+      project_id: searchFilter.project_id
     }
     return client.pput(`/api/data/user/filters/${searchFilter.id}`, data)
   },