[plugins] Allow to add plugin pages to the menus

package.json

@@ -20,7 +20,6 @@
   },
   "dependencies": {
     "@animxyz/vue3": "0.6.7",
-    "@arch-inc/fabricjs-psbrush": "0.0.20",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
     "@fullcalendar/multimonth": "6.1.19",
@@ -39,6 +38,7 @@
     "core-js": "3.47.0",
     "exceljs": "4.4.0",
     "fabric": "cgwire/fabric.js",
+    "fabricjs-psbrush": "cgwire/fabricjs-psbrush",
     "file-saver": "2.0.5",
     "lucide-vue-next": "0.562.0",
     "marked": "17.0.1",

src/components/mixins/annotation.js

@@ -4,7 +4,7 @@
  */
 import { fabric } from 'fabric'
 import moment from 'moment'
-import { PSStroke, PSBrush } from '@arch-inc/fabricjs-psbrush'
+import { PSStroke, PSBrush } from 'fabricjs-psbrush'
 import { v4 as uuidv4 } from 'uuid'
 import { markRaw } from 'vue'
 

src/components/modals/NotifyClientModal.vue

@@ -16,6 +16,14 @@
       v-model="form.studio_id"
     />
 
+    <combobox-department
+      class="mt1 mb1"
+      ref="departmentField"
+      :all-departments-label="true"
+      :label="$t('people.fields.departments')"
+      v-model="form.department_id"
+    />
+
     <p class="mb1 field-title" v-if="clients.length > 0">
       {{ $t('playlists.clients_to_notify') }}
     </p>
@@ -59,6 +67,7 @@ import { mapGetters } from 'vuex'
 import { modalMixin } from '@/components/modals/base_modal'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
+import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
 import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleAvatar from '../widgets/PeopleAvatar.vue'
@@ -71,6 +80,7 @@ export default {
 
   components: {
     BaseModal,
+    ComboboxDepartment,
     ComboboxStudio,
     ModalFooter,
     PeopleAvatar,
@@ -105,7 +115,8 @@ export default {
   data() {
     return {
       form: {
-        studio_id: ''
+        studio_id: '',
+        department_id: ''
       }
     }
   },
@@ -121,13 +132,20 @@ export default {
           person =>
             !this.form.studio_id || person.studio_id === this.form.studio_id
         )
+        .filter(
+          person =>
+            !this.form.department_id ||
+            (person.departments &&
+              person.departments.includes(this.form.department_id))
+        )
     }
   },
 
   methods: {
     runConfirmation() {
       this.$emit('confirm', {
-        studio_id: this.form.studio_id
+        studio_id: this.form.studio_id,
+        department_id: this.form.department_id
       })
     }
   }

src/components/pages/Plugin.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="plugin-page">
+    <h1>Plugin</h1>
+    {{ plugin?.name }}
+
+    <iframe
+      class="plugin-iframe"
+      :src="pluginUrl"
+      frameborder="0"
+      allowfullscreen
+      referrerpolicy="same-origin"
+    ></iframe>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import { computed } from 'vue'
+import { useHead } from '@unhead/vue'
+
+const route = useRoute()
+const store = useStore()
+
+const plugins = computed(() => store.getters.studioPlugins || [])
+const productionId = computed(() => route.params.production_id || '')
+const episodeId = computed(() =>
+  store.getters.isTVShow && productionId.value
+    ? store.getters.currentEpisode?.id
+    : ''
+)
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
+
+const pluginUrl = computed(() => {
+  const baseUrl = `/api/plugins/${route.params.plugin_id}/frontend/`
+  const params = new URLSearchParams()
+
+  if (productionId.value) {
+    params.append('production_id', productionId.value)
+  }
+  if (episodeId.value) {
+    params.append('episode_id', episodeId.value)
+  }
+  if (isDarkTheme.value) {
+    params.append('dark_theme', isDarkTheme.value)
+  }
+
+  return `${baseUrl}?${params.toString()}`
+})
+
+const plugin = computed(() => {
+  return plugins.value.find(
+    plugin => plugin.plugin_id === route.params.plugin_id
+  )
+})
+
+useHead({
+  title: computed(() => {
+    if (plugin.value) {
+      return `Kitsu | ${plugin.value.name}`
+    }
+    return 'Kitsu | Plugin'
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.plugin-page {
+  padding-top: 20px;
+}
+
+.plugin-iframe {
+  background-color: $white;
+  width: 100%;
+  height: calc(100vh - 68px);
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+</style>

src/components/pages/playlists/PlaylistPlayer.vue

@@ -1482,14 +1482,15 @@ export default {
       this.errors.notifyClients = false
     },
 
-    async confirmNotifyClients({ studioId }) {
+    async confirmNotifyClients({ studioId, departmentId }) {
       this.loading.notifyClients = true
       this.errors.notifyClients = false
       this.success.notifyClients = false
       try {
         await this.notifyClients({
           playlist: this.playlist,
-          studioId
+          studioId,
+          departmentId
         })
         this.success.notifyClients = true
       } catch (err) {

src/components/previews/PreviewPlayer.vue

@@ -560,7 +560,7 @@
 
 <script>
 import { fabric } from 'fabric'
-import { PSBrush } from '@arch-inc/fabricjs-psbrush'
+import { PSBrush } from 'fabricjs-psbrush'
 
 import {
   ArrowUpRightIcon,

src/components/sides/Sidebar.vue

@@ -124,6 +124,19 @@
               </router-link>
             </p>
           </div>
+          <div v-for="plugin in studioPlugins" :key="plugin.id">
+            <p @click="toggleSidebar()">
+              <router-link
+                :to="{
+                  name: 'plugin',
+                  params: { plugin_id: plugin.plugin_id }
+                }"
+              >
+                <icon :name="plugin.icon" />
+                {{ plugin.name }}
+              </router-link>
+            </p>
+          </div>
 
           <div v-if="isCurrentUserAdmin">
             <h2>{{ $t('main.admin') }}</h2>
@@ -236,6 +249,7 @@ import {
   GlobeIcon,
   Rows4Icon
 } from 'lucide-vue-next'
+import Icon from '@/components/widgets/Icon.vue'
 
 import KitsuIcon from '@/components/widgets/KitsuIcon.vue'
 
@@ -248,7 +262,8 @@ export default {
     EggIcon,
     GlobeIcon,
     KitsuIcon,
-    Rows4Icon
+    Rows4Icon,
+    Icon
   },
 
   data() {
@@ -272,7 +287,8 @@ export default {
       'isCurrentUserVendor',
       'isSidebarHidden',
       'mainConfig',
-      'organisation'
+      'organisation',
+      'studioPlugins'
     ]),
 
     isLongLocale() {

src/components/tops/Topbar.vue

@@ -302,8 +302,9 @@ export default {
       'notifications',
       'openProductions',
       'organisation',
-      'productionMap',
       'productionEditTaskTypes',
+      'productionMap',
+      'projectPlugins',
       'user'
     ]),
 
@@ -369,10 +370,12 @@ export default {
     },
 
     isEpisodeContext() {
+      const isPlugin = this.$route.params.plugin_id !== undefined
       return (
         this.isTVShow &&
         this.hasEpisodeId &&
-        !['episodes', 'episode-stats'].includes(this.currentSectionOption) &&
+        (!['episodes', 'episode-stats'].includes(this.currentSectionOption) ||
+          isPlugin) &&
         // Do not display combobox if there is no episode
         this.episodes.length > 0
       )
@@ -484,6 +487,16 @@ export default {
         }
         options.push({ label: this.$t('people.team'), value: 'team' })
 
+        this.projectPlugins.forEach(plugin => {
+          options.push({
+            label: plugin.name,
+            value: plugin.plugin_id,
+            icon: plugin.icon,
+            plugin_id: plugin.plugin_id,
+            type: 'plugin'
+          })
+        })
+
         if (this.isCurrentUserManager) {
           options = options.concat([
             { label: 'separator', value: 'separator' },
@@ -551,6 +564,9 @@ export default {
     ]),
 
     getCurrentSectionFromRoute() {
+      if (this.$route.name.includes('production-plugin')) {
+        return this.$route.params.plugin_id
+      }
       if (this.$route.name === 'person') {
         return 'person'
       }
@@ -703,11 +719,13 @@ export default {
 
     updateCombosFromRoute() {
       const productionId = this.$route.params.production_id
+      const pluginId = this.$route.params.plugin_id
       const section = this.getCurrentSectionFromRoute()
       let episodeId = this.$route.params.episode_id
       this.silent = true
       this.currentProductionId = productionId
       this.currentProjectSection = section
+      this.currentPluginId = pluginId
       const isAssetSection = this.assetSections.includes(section)
       const isEditSection = this.editSections.includes(section)
       const isBreakdownSection = this.breakdownSections.includes(section)
@@ -719,13 +737,13 @@ export default {
       ) {
         episodeId = this.episodes[0].id
         this.currentEpisodeId = episodeId
-        this.pushContextRoute(section)
+        this.pushContextRoute(section, pluginId)
       } else {
         this.currentEpisodeId = episodeId
       }
     },
 
-    pushContextRoute(section) {
+    pushContextRoute(section, pluginId = null) {
       const isAssetSection = this.assetSections.includes(section)
       const production = this.productionMap.get(this.currentProductionId)
       const isTVShow = production?.production_type === 'tvshow'
@@ -742,7 +760,8 @@ export default {
       let route = {
         name: section,
         params: {
-          production_id: this.currentProductionId
+          production_id: this.currentProductionId,
+          plugin_id: pluginId
         }
       }
       route = this.episodifyRoute(route, section, episodeId, isTVShow)

src/components/tops/TopbarEpisodeList.vue

@@ -107,8 +107,14 @@ export default {
     getEpisodePath() {
       const currentProduction = this.currentProduction
       const section = this.section
+      const pluginId = this.$route.params.plugin_id
       return episodeId => {
-        const path = getProductionPath(currentProduction, section, episodeId)
+        const path = getProductionPath(
+          currentProduction,
+          section,
+          episodeId,
+          pluginId
+        )
         return path
       }
     }

src/components/tops/TopbarProductionList.vue

@@ -110,10 +110,12 @@ export default {
     },
 
     getProductionPath(production) {
+      const pluginId = this.$route.params.plugin_id
       return getProductionPath(
         production,
         this.section,
-        this.episodeId || 'all'
+        this.episodeId || 'all',
+        pluginId
       )
     }
   }