[entities] Allow to create shared filters

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,16 +59,19 @@
  * 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'
 
 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
         }
       }

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>

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',

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)
   },