Merge pull request #1460 from NicoPennec/feat/studio-filter

Add studio filters

src/components/lists/PeopleList.vue

@@ -25,7 +25,7 @@
             <th scope="col" class="departments">
               {{ $t('people.list.departments') }}
             </th>
-            <th scope="col" class="studio">
+            <th scope="col" class="studio" v-if="!isBots">
               {{ $t('people.list.studio') }}
             </th>
             <th scope="col" class="actions"></th>
@@ -70,7 +70,7 @@
               :departments="person.departments"
             />
             <td class="studio" v-if="!isBots">
-              <studio-name :studio-id="person.studio_id" />
+              <studio-name :studio="person.studio" v-if="person.studio" />
             </td>
             <row-actions-cell
               v-if="isCurrentUserAdmin"
@@ -120,7 +120,7 @@
               :departments="person.departments"
             />
             <td class="studio" v-if="!isBots">
-              <studio-name :studio-id="person.studio_id" />
+              <studio-name :studio="person.studio" v-if="person.studio" />
             </td>
             <row-actions-cell
               v-if="isCurrentUserAdmin"
@@ -184,7 +184,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isCurrentUserAdmin', 'studioMap']),
+    ...mapGetters(['isCurrentUserAdmin']),
 
     activePeople() {
       return this.entries.filter(person => person.active)
@@ -220,10 +220,6 @@ export default {
   },
 
   methods: {
-    getStudioName(person) {
-      return this.studioMap.get(person.studio_id)?.name
-    },
-
     isExpired(expirationDate) {
       return expirationDate < this.today
     },

src/components/lists/PeopleTimesheetList.vue

@@ -367,7 +367,8 @@ export default {
           year: year
         },
         query: {
-          productionId: this.$route.query.productionId
+          productionId: this.$route.query.productionId,
+          studioId: this.$route.query.studioId
         }
       }
     },
@@ -381,7 +382,8 @@ export default {
           month: month
         },
         query: {
-          productionId: this.$route.query.productionId
+          productionId: this.$route.query.productionId,
+          studioId: this.$route.query.studioId
         }
       }
     },
@@ -395,7 +397,8 @@ export default {
           week: week
         },
         query: {
-          productionId: this.$route.query.productionId
+          productionId: this.$route.query.productionId,
+          studioId: this.$route.query.studioId
         }
       }
     },
@@ -410,7 +413,8 @@ export default {
           day: day
         },
         query: {
-          productionId: this.$route.query.productionId
+          productionId: this.$route.query.productionId,
+          studioId: this.$route.query.studioId
         }
       }
     },

src/components/modals/EditPersonModal.vue

@@ -95,9 +95,9 @@
             </button>
           </div>
         </div>
-        <combobox
+        <combobox-studio
+          class="field"
           :label="$t('people.fields.studio')"
-          :options="studioOptions"
           v-model="form.studio_id"
           v-if="!isBot"
         />
@@ -177,6 +177,7 @@ import { modalMixin } from '@/components/modals/base_modal'
 
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
+import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
 import DateField from '@/components/widgets/DateField.vue'
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 import TextField from '@/components/widgets/TextField.vue'
@@ -189,6 +190,7 @@ export default {
   components: {
     Combobox,
     ComboboxDepartment,
+    ComboboxStudio,
     DateField,
     DepartmentName,
     TextField
@@ -282,7 +284,6 @@ export default {
       'departmentMap',
       'isCurrentUserAdmin',
       'people',
-      'studios',
       'user'
     ]),
 
@@ -292,16 +293,6 @@ export default {
       )
     },
 
-    studioOptions() {
-      return [
-        { label: '', value: null },
-        ...this.studios.map(studio => ({
-          label: studio.name,
-          value: studio.id
-        }))
-      ]
-    },
-
     isEditing() {
       return Boolean(this.personToEdit?.id)
     },

src/components/pages/Bots.vue

@@ -20,16 +20,15 @@
         placeholder="ex: gazu bot"
       />
       <combobox-department
-        class="combobox-department flexrow-item"
+        class="flexrow-item"
         :label="$t('main.department')"
         v-model="selectedDepartment"
       />
       <combobox-styled
         class="flexrow-item"
         :label="$t('people.fields.role')"
-        :options="roleOptions"
         locale-key-prefix="people.role."
-        no-margin
+        :options="roleOptions"
         v-model="role"
       />
     </div>
@@ -174,10 +173,10 @@ export default {
   mounted() {
     this.role = this.$route.query.role || 'all'
     this.selectedDepartment = this.$route.query.department || ''
+    this.setSearchFromUrl()
     this.loadPeople(() => {
-      this.setSearchFromUrl()
       this.onSearchChange()
-    }) // Needed to show department informations
+    })
   },
 
   watch: {

src/components/pages/MainSchedule.vue

@@ -80,6 +80,7 @@ import Schedule from '@/components/widgets/Schedule.vue'
 
 export default {
   name: 'main-schedule',
+
   components: {
     ComboboxNumber,
     Datepicker,
@@ -110,7 +111,11 @@ export default {
   },
 
   mounted() {
-    this.reset()
+    let zoom = parseInt(this.$route.query.zoom)
+    zoom = isNaN(zoom) ? 1 : zoom
+    this.zoomLevel = Math.min(Math.max(zoom, 0), 3)
+
+    this.init()
   },
 
   computed: {
@@ -128,7 +133,7 @@ export default {
   methods: {
     ...mapActions(['editProduction', 'loadScheduleItems', 'saveScheduleItem']),
 
-    reset() {
+    init() {
       if (!this.openProductions.length) {
         return
       }
@@ -202,12 +207,28 @@ export default {
           end_date: item.endDate.format('YYYY-MM-DD')
         })
       }
+    },
+
+    updateRoute({ zoom }) {
+      const query = { ...this.$route.query }
+
+      if (zoom !== undefined) {
+        query.zoom = String(zoom)
+      }
+
+      if (JSON.stringify(query) !== JSON.stringify(this.$route.query)) {
+        this.$router.push({ query })
+      }
     }
   },
 
   socket: {},
 
-  watch: {},
+  watch: {
+    zoomLevel(value) {
+      this.updateRoute({ zoom: value })
+    }
+  },
 
   metaInfo() {
     return {

src/components/pages/People.vue

@@ -37,16 +37,20 @@
         placeholder="ex: John Doe"
       />
       <combobox-department
-        class="combobox-department flexrow-item"
+        class="flexrow-item"
         :label="$t('main.department')"
         v-model="selectedDepartment"
       />
+      <combobox-studio
+        class="flexrow-item"
+        :label="$t('main.studio')"
+        v-model="selectedStudio"
+      />
       <combobox-styled
         class="flexrow-item"
         :label="$t('people.fields.role')"
-        :options="roleOptions"
         locale-key-prefix="people.role."
-        no-margin
+        :options="roleOptions"
         v-model="role"
       />
     </div>
@@ -149,31 +153,37 @@
 import { mapGetters, mapActions } from 'vuex'
 
 import csv from '@/lib/csv'
-import ButtonHrefLink from '@/components/widgets/ButtonHrefLink'
-import ButtonSimple from '@/components/widgets/ButtonSimple'
-import ChangePasswordModal from '@/components/modals/ChangePasswordModal'
-import ComboboxDepartment from '@/components/widgets/ComboboxDepartment'
-import ComboboxStyled from '@/components/widgets/ComboboxStyled'
-import EditAvatarModal from '@/components/modals/EditAvatarModal'
-import EditPersonModal from '@/components/modals/EditPersonModal'
-import HardDeleteModal from '@/components/modals/HardDeleteModal'
-import ImportModal from '@/components/modals/ImportModal'
-import ImportRenderModal from '@/components/modals/ImportRenderModal'
-import PeopleList from '@/components/lists/PeopleList'
-import PageTitle from '@/components/widgets/PageTitle'
-import SearchField from '@/components/widgets/SearchField'
-import SearchQueryList from '@/components/widgets/SearchQueryList'
+
 import { searchMixin } from '@/components/mixins/search'
 
+import ButtonHrefLink from '@/components/widgets/ButtonHrefLink.vue'
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import ChangePasswordModal from '@/components/modals/ChangePasswordModal.vue'
+import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
+import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
+import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
+import EditAvatarModal from '@/components/modals/EditAvatarModal.vue'
+import EditPersonModal from '@/components/modals/EditPersonModal.vue'
+import HardDeleteModal from '@/components/modals/HardDeleteModal.vue'
+import ImportModal from '@/components/modals/ImportModal.vue'
+import ImportRenderModal from '@/components/modals/ImportRenderModal.vue'
+import PeopleList from '@/components/lists/PeopleList.vue'
+import PageTitle from '@/components/widgets/PageTitle.vue'
+import SearchField from '@/components/widgets/SearchField.vue'
+import SearchQueryList from '@/components/widgets/SearchQueryList.vue'
+
 export default {
   name: 'people',
+
   mixins: [searchMixin],
+
   components: {
     ButtonHrefLink,
     ButtonSimple,
     ChangePasswordModal,
-    ComboboxStyled,
     ComboboxDepartment,
+    ComboboxStudio,
+    ComboboxStyled,
     EditAvatarModal,
     EditPersonModal,
     HardDeleteModal,
@@ -235,19 +245,21 @@ export default {
       personToEdit: { role: 'user' },
       personToChangePassword: {},
       selectedDepartment: '',
+      selectedStudio: '',
       success: {
         invite: false
       }
     }
   },
 
-  async mounted() {
+  mounted() {
     this.role = this.$route.query.role || 'all'
     this.selectedDepartment = this.$route.query.department || ''
-    await this.loadStudios()
-    await this.loadPeople()
+    this.selectedStudio = this.$route.query.studio || ''
     this.setSearchFromUrl()
-    this.onSearchChange()
+    this.loadPeople(() => {
+      this.onSearchChange()
+    })
   },
 
   watch: {
@@ -267,6 +279,10 @@ export default {
       this.updateRoute()
     },
 
+    selectedStudio() {
+      this.updateRoute()
+    },
+
     role() {
       this.updateRoute()
     }
@@ -281,7 +297,8 @@ export default {
       'isImportPeopleLoading',
       'isImportPeopleLoadingError',
       'peopleSearchQueries',
-      'personCsvFormData'
+      'personCsvFormData',
+      'studioMap'
     ]),
 
     currentPeople() {
@@ -294,7 +311,15 @@ export default {
           person.departments.includes(this.selectedDepartment)
         )
       }
-      return people
+      if (this.selectedStudio) {
+        people = people.filter(
+          person => person.studio_id === this.selectedStudio
+        )
+      }
+      return people.map(person => ({
+        ...person,
+        studio: this.studioMap.get(person.studio_id)
+      }))
     },
 
     deleteText() {
@@ -323,7 +348,6 @@ export default {
       'editPerson',
       'invitePerson',
       'loadPeople',
-      'loadStudios',
       'newPerson',
       'newPersonAndInvite',
       'removePeopleSearch',
@@ -558,8 +582,9 @@ export default {
     updateRoute() {
       const search = this.searchField.getValue()
       const department = this.selectedDepartment
+      const studio = this.selectedStudio
       const role = this.role
-      this.$router.push({ query: { search, department, role } })
+      this.$router.push({ query: { search, department, studio, role } })
     }
   },