From 3b0d6ed6b1fbc989f71e46864c0a1b6cab3153a2 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 13 Jan 2025 17:04:07 +0100
Subject: [PATCH] [prod] add a read-only production brief page for non-admin
 users

(artist, supervisor, and vendor)
---
 src/components/pages/Brief.vue                | 53 +++++++++++++++++++
 src/components/pages/ProductionSettings.vue   |  8 ++-
 .../pages/production/ProductionBrief.vue      | 34 +++++-------
 src/components/tops/Topbar.vue                | 18 +++++--
 src/components/widgets/KitsuIcon.vue          |  1 +
 src/lib/path.js                               |  3 +-
 src/locales/en.js                             |  1 +
 src/router/routes.js                          |  7 +++
 src/testrouter/routes.js                      |  7 +++
 9 files changed, 105 insertions(+), 27 deletions(-)
 create mode 100644 src/components/pages/Brief.vue

diff --git a/src/components/pages/Brief.vue b/src/components/pages/Brief.vue
new file mode 100644
index 0000000000..204e9213cc
--- /dev/null
+++ b/src/components/pages/Brief.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="brief fixed-page">
+    <div class="wrapper">
+      <production-brief />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+import ProductionBrief from '@/components/pages/production/ProductionBrief.vue'
+
+export default {
+  name: 'brief',
+
+  components: {
+    ProductionBrief
+  },
+
+  computed: {
+    ...mapGetters(['currentProduction', 'isCurrentUserClient'])
+  },
+
+  mounted() {
+    if (this.isCurrentUserClient) {
+      this.$router.push({ name: 'not-found' })
+      return
+    }
+  },
+
+  head() {
+    return {
+      title: `${this.currentProduction?.name} | ${this.$t('productions.brief.title')} - Kitsu`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fixed-page {
+  display: flex;
+}
+
+.wrapper {
+  margin-top: 0;
+  overflow-y: scroll;
+  padding: 2em;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/src/components/pages/ProductionSettings.vue b/src/components/pages/ProductionSettings.vue
index 836db135c1..f425dee6da 100644
--- a/src/components/pages/ProductionSettings.vue
+++ b/src/components/pages/ProductionSettings.vue
@@ -219,6 +219,11 @@ export default {
   },
 
   mounted() {
+    if (!this.isCurrentUserManager) {
+      this.$router.push({ name: 'not-found' })
+      return
+    }
+
     if (this.remainingAssetTypes.length > 0) {
       this.assetTypeId = this.remainingAssetTypes[0].value
     }
@@ -232,8 +237,9 @@ export default {
 
   computed: {
     ...mapGetters([
-      'currentProduction',
       'assetTypes',
+      'currentProduction',
+      'isCurrentUserManager',
       'productionAssetTypes',
       'productionTaskStatuses',
       'taskStatus'
diff --git a/src/components/pages/production/ProductionBrief.vue b/src/components/pages/production/ProductionBrief.vue
index 11acc0dd43..e224897607 100644
--- a/src/components/pages/production/ProductionBrief.vue
+++ b/src/components/pages/production/ProductionBrief.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="brief">
+  <div class="production-brief">
     <div v-if="!isEditing" class="box" @dblclick="openEditing">
-      <div v-if="isEmpty(currentProduction.description)">
+      <div v-if="!currentProduction?.description">
         <p>{{ $t('productions.brief.empty') }}</p>
       </div>
       <div
@@ -19,7 +19,7 @@
         v-model="brief"
       />
       <p v-if="errors.editBrief" class="error mt1 has-text-right">
-        {{ $t('productions.brief.edit.errorText') }}
+        {{ $t('productions.brief.edit_error') }}
       </p>
       <p>
         <button-simple
@@ -39,8 +39,8 @@ import { mapGetters, mapActions } from 'vuex'
 
 import { renderMarkdown } from '@/lib/render'
 
-import TextareaField from '@/components/widgets/TextareaField.vue'
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import TextareaField from '@/components/widgets/TextareaField.vue'
 
 export default {
   name: 'production-brief',
@@ -62,7 +62,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['currentProduction']),
+    ...mapGetters(['currentProduction', 'isCurrentUserManager']),
 
     textarea() {
       return this.$refs.textarea
@@ -70,19 +70,16 @@ export default {
   },
 
   mounted() {
-    if (this.currentProduction) {
-      this.brief = this.currentProduction.description
-    }
+    this.brief = this.currentProduction?.description
   },
 
   methods: {
-    ...mapActions(['editProduction', 'setProduction']),
-
-    isEmpty(str) {
-      return !str || str.length === 0
-    },
+    ...mapActions(['editProduction']),
 
     openEditing() {
+      if (!this.isCurrentUserManager) {
+        return
+      }
       this.isEditing = true
       this.$nextTick(() => {
         // Needed because of the v-if
@@ -92,17 +89,16 @@ export default {
 
     async editBrief() {
       this.isLoading = true
+      this.errors.editBrief = false
       try {
         await this.editProduction({
           id: this.currentProduction.id,
           description: this.brief
         })
+        this.isEditing = false
       } catch {
         this.errors.editBrief = true
-        this.isLoading = false
-        return
       }
-      this.isEditing = false
       this.isLoading = false
     },
 
@@ -118,7 +114,7 @@ export default {
   }
 }
 
-.brief {
+.production-brief {
   flex: 1;
 }
 
@@ -139,8 +135,4 @@ export default {
 .editor {
   height: 100%;
 }
-
-.textarea {
-  color: red;
-}
 </style>
diff --git a/src/components/tops/Topbar.vue b/src/components/tops/Topbar.vue
index 227398e06e..bbaa243fd3 100644
--- a/src/components/tops/Topbar.vue
+++ b/src/components/tops/Topbar.vue
@@ -45,12 +45,11 @@
           <div class="flexrow-item" v-if="isEpisodeContext">
             <chevron-right-icon class="align-middle" :size="20" />
           </div>
-          <div class="flexrow-item subitem">
+          <div class="flexrow-item subitem" v-if="isEpisodeContext">
             <topbar-episode-list
               :episode-groups="currentEpisodeOptionGroups || []"
               :episode-id="currentEpisodeId"
               :section="currentSectionOption"
-              v-if="isEpisodeContext"
             />
           </div>
         </div>
@@ -445,7 +444,9 @@ export default {
         options.push({ label: this.$t('news.title'), value: 'newsFeed' })
       }
 
-      options = options.concat([{ label: 'separator', value: 'separator' }])
+      if (!this.isCurrentUserClient) {
+        options.push({ label: 'separator', value: 'separator' })
+      }
 
       // Add sequences
       if (isNotOnlyAssets) {
@@ -483,11 +484,19 @@ export default {
         }
         options.push({ label: this.$t('people.team'), value: 'team' })
 
-        if (this.isCurrentUserAdmin || this.isCurrentUserManager) {
+        if (this.isCurrentUserManager) {
           options = options.concat([
             { label: 'separator', value: 'separator' },
             { label: this.$t('settings.title'), value: 'production-settings' }
           ])
+        } else {
+          options = options.concat([
+            { label: 'separator', value: 'separator' },
+            {
+              label: this.$t('productions.brief.title'),
+              value: 'brief'
+            }
+          ])
         }
       }
 
@@ -732,6 +741,7 @@ export default {
         section !== 'news-feed' &&
         section !== 'schedule' &&
         section !== 'production-settings' &&
+        section !== 'brief' &&
         section !== 'episodes'
       if (isEpisodeContext) {
         route.name = `episode-${section}`
diff --git a/src/components/widgets/KitsuIcon.vue b/src/components/widgets/KitsuIcon.vue
index 2d95316de1..c9df9bc997 100644
--- a/src/components/widgets/KitsuIcon.vue
+++ b/src/components/widgets/KitsuIcon.vue
@@ -76,6 +76,7 @@ const icons = {
   'big-thumbnail': bigThumbnail,
   box,
   breakdown,
+  brief: infos,
   compare,
   concepts,
   custom,
diff --git a/src/lib/path.js b/src/lib/path.js
index 431311866e..b48b36331e 100644
--- a/src/lib/path.js
+++ b/src/lib/path.js
@@ -166,7 +166,8 @@ export const getProductionPath = (
       'team',
       'episodes',
       'episode-stats',
-      'concepts'
+      'concepts',
+      'brief'
     ].includes(section)
   ) {
     route = episodifyRoute(route, episodeId || 'all')
diff --git a/src/locales/en.js b/src/locales/en.js
index c4d2629c82..8abad59a38 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -1077,6 +1077,7 @@ export default {
     },
 
     brief: {
+      edit_error: 'An error occurred while editing the brief.',
       empty: 'There is no brief yet. How about creating one?',
       title: 'Brief'
     },
diff --git a/src/router/routes.js b/src/router/routes.js
index 19179bea2d..0bf4a6ff2f 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -28,6 +28,7 @@ const AssetTypes = () => import('@/components/pages/AssetTypes.vue')
 const Backgrounds = () => import('@/components/pages/Backgrounds.vue')
 const Bots = () => import('@/components/pages/Bots.vue')
 const Breakdown = () => import('@/components/pages/Breakdown.vue')
+const Brief = () => import('@/components/pages/Brief.vue')
 const Concepts = () => import('@/components/pages/Concepts.vue')
 const CustomActions = () => import('@/components/pages/CustomActions.vue')
 const Departments = () => import('@/components/pages/Departments.vue')
@@ -451,6 +452,12 @@ export const routes = [
         name: 'production-settings'
       },
 
+      {
+        path: 'productions/:production_id/brief',
+        component: Brief,
+        name: 'brief'
+      },
+
       {
         path: 'productions/:production_id/quota',
         component: ProductionQuota,
diff --git a/src/testrouter/routes.js b/src/testrouter/routes.js
index 5e690e92f4..cbbb4e0df0 100644
--- a/src/testrouter/routes.js
+++ b/src/testrouter/routes.js
@@ -27,6 +27,7 @@ import AssetTypes from '@/components/pages/AssetTypes.vue'
 import Backgrounds from '@/components/pages/Backgrounds.vue'
 import Bots from '@/components/pages/Bots.vue'
 import Breakdown from '@/components/pages/Breakdown.vue'
+import Brief from '@/components/pages/Brief.vue'
 import Concepts from '@/components/pages/Concepts.vue'
 import CustomActions from '@/components/pages/CustomActions.vue'
 import Departments from '@/components/pages/departments/Departments.vue'
@@ -498,6 +499,12 @@ export const routes = [
         name: 'production-settings'
       },
 
+      {
+        path: 'productions/:production_id/brief',
+        component: Brief,
+        name: 'brief'
+      },
+
       {
         path: 'productions/:production_id/quota',
         component: ProductionQuota,