From ab77aeb775b29220d2ec77bcf48b0d377b7ea25f Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 21 Nov 2023 10:45:37 +0100
Subject: [PATCH 01/41] [concepts] init new page

---
 src/components/pages/Concepts.vue | 515 ++++++++++++++++++++++++++++++
 src/locales/en.js                 |  11 +
 2 files changed, 526 insertions(+)
 create mode 100644 src/components/pages/Concepts.vue

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
new file mode 100644
index 0000000000..4f754e485e
--- /dev/null
+++ b/src/components/pages/Concepts.vue
@@ -0,0 +1,515 @@
+<template>
+  <div class="fixed-page columns">
+    <div class="column main-column">
+      <div class="concepts page">
+        <div class="page-header">
+          <div class="filters">
+            <search-field
+              ref="search-field"
+              class="field"
+              :can-save="true"
+              placeholder="ex: chara"
+              @change="onSearchChange"
+              @save="saveSearchQuery"
+            />
+            <combobox-status
+              :label="$t('main.status')"
+              :task-status-list="taskStatusList"
+              v-model="filters.taskStatusId"
+            />
+            <span class="field small">
+              <label class="label">
+                {{ $t('tasks.fields.assignees') }}
+              </label>
+              <people-field
+                :big="true"
+                :people="assignees"
+                v-model="filters.assignee"
+              />
+            </span>
+            <combobox
+              :label="$t('concepts.fields.entity_type')"
+              :options="entityTypeOptions"
+              v-model="filters.entityType"
+            />
+            <combobox
+              class="right"
+              :label="$t('main.sorted_by')"
+              locale-key-prefix="concepts.fields."
+              :options="sortByOptions"
+              v-model="filters.sortBy"
+            />
+          </div>
+          <div class="query-list">
+            <search-query-list
+              :queries="conceptSearchQueries"
+              type="concept"
+              @change-search="changeSearch"
+              @remove-search="removeSearchQuery"
+              v-if="!loading.loadingConcepts"
+            />
+          </div>
+        </div>
+        <h2 class="mt0">
+          {{ $t('concepts.title') }} ({{ concepts?.length || 0 }})
+        </h2>
+
+        <table-info
+          :is-loading="loading.loadingConcepts"
+          :is-error="error.loadingConcepts"
+          v-if="loading.loadingConcepts || error.loadingConcepts"
+        />
+
+        <div v-else>
+          <ul class="items">
+            <li
+              class="item"
+              :class="{
+                'selected-item': currentTask?.entity_id === concept.id
+              }"
+              v-for="concept in filteredConcepts"
+              :key="concept.id"
+              @click="onSelectConcept(concept)"
+            >
+              <img
+                class="preview"
+                alt=""
+                width="300"
+                height="200"
+                :src="concept.url"
+                @click.stop="onPreviewClicked"
+              />
+              <div class="description">
+                <span>{{ concept.name }}</span>
+                <ul class="tags">
+                  <li class="tag" v-for="tag in concept.tags" :key="tag">
+                    <a href="#">{{ tag }}</a>
+                  </li>
+                </ul>
+                <div class="status">
+                  <span
+                    class="tag"
+                    :style="{
+                      backgroundColor: taskStatusMap?.get(concept.status).color,
+                      color: 'white'
+                    }"
+                  >
+                    {{ taskStatusMap?.get(concept.status).short_name }}
+                  </span>
+                  <div class="assignees">
+                    <people-avatar
+                      :key="`${concept.id}-${personId}`"
+                      :person="personMap.get(personId)"
+                      :size="25"
+                      :font-size="14"
+                      v-for="personId in concept.assignees"
+                    />
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <footer class="footer">
+          <button-simple
+            :disabled="loading.loadingConcepts"
+            :text="$t('Add a new reference to concepts')"
+            @click="onAddConceptClicked"
+          />
+        </footer>
+      </div>
+    </div>
+
+    <div class="column side-column" v-if="currentTask">
+      <task-info :task="currentTask" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import { firstBy } from 'thenby'
+
+import { sortByName } from '@/lib/sorting'
+
+import { searchMixin } from '@/components/mixins/search'
+
+import ButtonSimple from '@/components/widgets/ButtonSimple'
+import Combobox from '@/components/widgets/Combobox.vue'
+import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
+import PeopleField from '@/components/widgets/PeopleField'
+import SearchField from '@/components/widgets/SearchField'
+import PeopleAvatar from '@/components/widgets/PeopleAvatar'
+import SearchQueryList from '@/components/widgets/SearchQueryList'
+import TableInfo from '@/components/widgets/TableInfo'
+import TaskInfo from '@/components/sides/TaskInfo'
+
+export default {
+  name: 'concepts',
+  mixins: [searchMixin],
+
+  components: {
+    ButtonSimple,
+    Combobox,
+    ComboboxStatus,
+    PeopleField,
+    SearchField,
+    PeopleAvatar,
+    SearchQueryList,
+    TableInfo,
+    TaskInfo
+  },
+
+  data() {
+    return {
+      loading: {
+        loadingConcepts: true,
+        savingSearch: false
+      },
+      error: {
+        loadingConcepts: false
+      },
+      filters: {
+        taskStatusId: null,
+        assignee: null,
+        entityType: null,
+        sortBy: 'created_at'
+      },
+
+      // TODO: module getters
+      currentTask: null,
+      conceptSearchQueries: [
+        {
+          id: 'filter-test-1',
+          list_type: 'concept',
+          name: 'test',
+          search_query: 'test'
+        }
+      ],
+      concepts: [
+        {
+          id: 1,
+          name: 'concept 1',
+          url: 'https://placehold.co/300x200',
+          status: 'concept-neutral',
+          task: null,
+          assignees: ['9609db21-9fe7-4c98-a536-5590f7ff1676'], // me
+          tags: ['tag1', 'tag2', 'tag3'],
+          created_at: '2023-11-20T00:00:00',
+          updated_at: '2023-11-23T00:00:00'
+        },
+        {
+          id: 2,
+          name: 'concept 2',
+          url: 'https://placehold.co/300x200',
+          status: 'concept-approved',
+          task: null,
+          assignees: ['532028cc-a249-4cc6-ace6-86f63ca9c5c8'], // alicia cooper
+          tags: [],
+          created_at: '2023-11-21T00:00:00',
+          updated_at: '2023-11-24T00:00:00'
+        },
+        {
+          id: 3,
+          name: 'concept 3',
+          url: 'https://placehold.co/300x200',
+          status: 'concept-rejected',
+          task: null,
+          assignees: [],
+          tags: [],
+          created_at: '2023-11-23T00:00:00',
+          updated_at: '2023-11-23T00:00:00'
+        }
+      ]
+    }
+  },
+
+  mounted() {
+    // FIXME: remove fake loading
+    setTimeout(() => {
+      this.loading.loadingConcepts = false
+    }, 2000)
+
+    this.setSearch(this.$route.query.search)
+
+    this.searchField.focus()
+  },
+
+  computed: {
+    ...mapGetters([
+      'currentProduction',
+      'isDarkTheme',
+      'personMap',
+      'taskStatusMap',
+      'taskTypes'
+    ]),
+
+    assignees() {
+      const assignees = []
+      const assigneesMap = {}
+      this.filteredConcepts.forEach(task => {
+        task.assignees.forEach(personId => {
+          if (!assigneesMap[personId]) {
+            assignees.push(this.personMap.get(personId))
+            assigneesMap[personId] = true
+          }
+        })
+      })
+      return sortByName(assignees)
+    },
+
+    entityTypeOptions() {
+      const allEntityTypeOptions = {
+        label: this.$t('main.all'),
+        value: null
+      }
+      const options = ['assets', 'shots', 'sequences', 'edits', 'episodes'].map(
+        name => ({
+          label: this.$t(`${name}.title`),
+          value: name
+        })
+      )
+      return [allEntityTypeOptions].concat(options)
+    },
+
+    sortByOptions() {
+      // FIXME: sorting options to define
+      return [
+        'created_at',
+        'updated_at'
+        //'last_comment_date'
+      ].map(name => ({
+        label: name,
+        value: name
+      }))
+    },
+
+    filteredConcepts() {
+      let concepts = this.concepts.slice()
+      if (this.filters.taskStatusId) {
+        concepts = concepts.filter(
+          concept => concept.status === this.filters.taskStatusId
+        )
+      }
+      if (this.filters.assignee) {
+        concepts = concepts.filter(concept =>
+          concept.assignees?.includes(this.filters.assignee.id)
+        )
+      }
+      if (this.filters.entityType) {
+        concepts = concepts.filter(concept =>
+          concept.entities?.some(
+            // FIXME: condition related to many-to-many relationship
+            entity => entity.type === this.filters.entityType
+          )
+        )
+      }
+
+      return concepts.sort(
+        firstBy(this.filters.sortBy, -1).thenBy('created_at')
+      )
+    },
+
+    searchField() {
+      return this.$refs['search-field']
+    },
+
+    taskStatusList() {
+      const allStatusItem = {
+        id: null,
+        color: '#999',
+        name: this.$t('main.all'),
+        short_name: this.$t('main.all')
+      }
+      const conceptTaskStatusList = sortByName(
+        Array.from(this.taskStatusMap.values()).filter(
+          status => status.is_concept
+        )
+      )
+      return [allStatusItem].concat(conceptTaskStatusList)
+    }
+  },
+
+  methods: {
+    ...mapActions([]),
+
+    // TODO: module actions
+    setConceptSearch: searchQuery => Promise.resolve(),
+    saveConceptSearch: searchQuery => Promise.resolve(),
+    removeConceptSearch: searchQuery => Promise.resolve(),
+
+    setSearch(value) {
+      this.searchField.setValue(value)
+    },
+
+    onSearchChange() {
+      const searchQuery = this.searchField.getValue() || ''
+      if (searchQuery?.length !== 1) {
+        this.setConceptSearch(searchQuery)
+      }
+      this.setSearchInUrl()
+    },
+
+    saveSearchQuery(searchQuery) {
+      if (this.loading.savingSearch) {
+        return
+      }
+      this.loading.savingSearch = true
+      this.saveConceptSearch(searchQuery)
+        .catch(console.error)
+        .finally(() => {
+          this.loading.savingSearch = false
+        })
+    },
+
+    removeSearchQuery(searchQuery) {
+      this.removeConceptSearch(searchQuery).catch(err => {
+        if (err) console.error(err)
+      })
+    },
+
+    onPreviewClicked() {
+      alert('onPreviewClicked')
+    },
+
+    onSelectConcept(concept) {
+      // FIXME: remove mock data
+      concept.task = {
+        id: `task-${concept.id}`,
+        entity_id: concept.id,
+        task_type_id: this.taskTypes[0].id,
+        project_id: this.currentProduction.id
+      }
+
+      this.currentTask =
+        !this.currentTask || this.currentTask.entity_id !== concept.id
+          ? concept.task
+          : null
+    },
+
+    onAddConceptClicked() {
+      alert('onAddConceptClicked')
+    }
+  },
+
+  watch: {},
+
+  metaInfo() {
+    return {
+      title: `${this.$t('concepts.title')} - Kitsu`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.filters {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 0 20px;
+  padding: 10px;
+
+  .field {
+    margin-bottom: 1em;
+
+    .label {
+      padding-top: 5px;
+    }
+  }
+
+  .right {
+    margin-left: auto;
+  }
+}
+
+.items {
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  list-style: none;
+  margin: 0;
+
+  .item {
+    width: 300px;
+    background-color: var(--background);
+    border-radius: 1em;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+
+    .dark & {
+      background-color: var(--background-alt);
+    }
+
+    &.selected-item {
+      background-color: var(--background-selected);
+    }
+    &:hover {
+      background-color: var(--background-hover);
+    }
+
+    .preview {
+      cursor: zoom-in;
+      background-color: $black;
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+      max-width: 300px;
+      min-width: 300px;
+      max-height: 200px;
+      min-height: 200px;
+    }
+
+    .description {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      row-gap: 10px;
+      padding: 0.3em 1em;
+      margin-bottom: 0.3em;
+      color: var(--text-strong);
+
+      font-weight: 500;
+
+      text-transform: uppercase;
+    }
+
+    .tags {
+      display: inline-flex;
+      gap: 10px;
+      margin-left: 0;
+      height: 21px;
+
+      .tag:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    .status {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .tag {
+        text-transform: uppercase;
+      }
+
+      .assignees {
+        display: flex;
+        gap: 5px;
+      }
+    }
+
+    .tag {
+      font-weight: 500;
+      letter-spacing: 1px;
+    }
+  }
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  padding: 3em;
+  margin-top: 3em;
+}
+</style>
diff --git a/src/locales/en.js b/src/locales/en.js
index a2f87d67f9..34a0a5f01c 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -134,6 +134,16 @@ export default {
     }
   },
 
+  concepts: {
+    title: 'Concepts',
+    fields: {
+      entity_type: 'Entity type',
+      created_at: 'Creation date',
+      updated_at: 'Update date',
+      // last_comment_date: 'Last comment',
+    }
+  },
+
   custom_actions: {
     create_error: 'An error occurred while saving this custom action. Are you sure that there is no other action with the same name?',
     delete_text: 'Are you sure you want to remove custom action {name} from your database?',
@@ -1065,6 +1075,7 @@ export default {
       color: 'Color',
       is_artist_allowed: 'Is artist allowed',
       is_client_allowed: 'Is client allowed',
+      is_concept: 'Is concept',
       is_done: 'Is done',
       is_feedback_request: 'Is feedback request',
       is_retake: 'Has retake value',

From c5e7d979daa367abbb7f1cee450f1a1182c78d19 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 21 Nov 2023 10:40:37 +0100
Subject: [PATCH 02/41] [concepts] add new type of Task Status

---
 src/components/lists/TaskStatusList.vue       |  7 ++++-
 src/components/modals/EditTaskStatusModal.vue |  7 +++++
 src/store/modules/user.js                     | 29 +++++++++++++++++++
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/components/lists/TaskStatusList.vue b/src/components/lists/TaskStatusList.vue
index 48b7082dc4..49008da30e 100644
--- a/src/components/lists/TaskStatusList.vue
+++ b/src/components/lists/TaskStatusList.vue
@@ -28,6 +28,9 @@
             <th scope="col" class="is-feedback-request">
               {{ $t('task_status.fields.is_feedback_request') }}
             </th>
+            <th scope="col" class="is-concept">
+              {{ $t('task_status.fields.is_concept') }}
+            </th>
             <th scope="col" class="actions"></th>
           </tr>
         </thead>
@@ -52,6 +55,7 @@
               class="is-feedback-request"
               :value="entry.is_feedback_request"
             />
+            <boolean-cell class="is-concept" :value="entry.is_concept" />
             <row-actions-cell
               :entry-id="entry.id"
               :hide-delete="entry.is_default === true"
@@ -138,7 +142,8 @@ export default {
 .is-retake,
 .is-artist-allowed,
 .is-client-allowed,
-.is-feedback-request {
+.is-feedback-request,
+.is-concept {
   text-align: center;
   width: 140px;
   min-width: 140px;
diff --git a/src/components/modals/EditTaskStatusModal.vue b/src/components/modals/EditTaskStatusModal.vue
index c61526e56b..2ec82f6037 100644
--- a/src/components/modals/EditTaskStatusModal.vue
+++ b/src/components/modals/EditTaskStatusModal.vue
@@ -69,6 +69,12 @@
             v-model="form.is_feedback_request"
             v-if="form.is_default === 'false'"
           />
+          <boolean-field
+            :label="$t('task_status.fields.is_concept')"
+            @enter="confirmClicked"
+            v-model="form.is_concept"
+            v-if="form.is_default === 'false'"
+          />
 
           <color-field
             ref="colorField"
@@ -218,6 +224,7 @@ export default {
           is_feedback_request: String(
             this.taskStatusToEdit.is_feedback_request || false
           ),
+          is_concept: String(this.taskStatusToEdit.is_concept || false),
           archived: String(this.taskStatusToEdit.archived || false)
         }
       }
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 7c29e753d1..9f879d1c98 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -386,6 +386,35 @@ const actions = {
 
   loadContext({ commit, rootGetters }) {
     return peopleApi.getContext().then(context => {
+      // FIXME: remove mock data
+      context.task_status.push(
+        {
+          id: 'concept-neutral',
+          name: 'Neutral',
+          archived: false,
+          short_name: 'neutral',
+          color: '#CCCCCC',
+          // is_default: true,
+          is_concept: true
+        },
+        {
+          id: 'concept-approved',
+          name: 'Approved',
+          archived: false,
+          short_name: 'approved',
+          color: '#66BB6A',
+          is_concept: true
+        },
+        {
+          id: 'concept-rejected',
+          name: 'Rejected',
+          archived: false,
+          short_name: 'rejected',
+          color: '#E81123',
+          is_concept: true
+        }
+      )
+
       commit(LOAD_USER_FILTERS_END, context.search_filters)
       commit(LOAD_USER_FILTER_GROUPS_END, context.search_filter_groups)
       commit(LOAD_PRODUCTION_STATUS_END, context.project_status)

From 23d3e30f550eef01f748e12718ee9608f9dc47ed Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 21 Nov 2023 10:42:20 +0100
Subject: [PATCH 03/41] [concepts] add new section on Topbar menu

---
 src/components/tops/Topbar.vue | 8 ++++++++
 src/lib/path.js                | 3 ++-
 src/router/routes.js           | 7 +++++++
 src/testrouter/routes.js       | 7 +++++++
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/tops/Topbar.vue b/src/components/tops/Topbar.vue
index 8e9cd7af91..1e4d1f3022 100644
--- a/src/components/tops/Topbar.vue
+++ b/src/components/tops/Topbar.vue
@@ -441,6 +441,14 @@ export default {
         options.push({ label: 'Episodes', value: 'episodes' })
       }
 
+      options = options.concat([{ label: 'separator', value: 'separator' }])
+
+      if (!this.isCurrentUserClient) {
+        options = options.concat([
+          { label: this.$t('concepts.title'), value: 'concepts' }
+        ])
+      }
+
       if (!this.isCurrentUserClient) {
         options = options.concat([
           { label: this.$t('breakdown.title'), value: 'breakdown' }
diff --git a/src/lib/path.js b/src/lib/path.js
index 8a8f1fe600..3143c6dbe1 100644
--- a/src/lib/path.js
+++ b/src/lib/path.js
@@ -117,7 +117,8 @@ export const getProductionPath = (
       'quota',
       'team',
       'episodes',
-      'episode-stats'
+      'episode-stats',
+      'concepts'
     ].includes(section)
   ) {
     route = episodifyRoute(route, episodeId || 'all')
diff --git a/src/router/routes.js b/src/router/routes.js
index 114c9f5779..f8085ffe61 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -25,6 +25,7 @@ const Asset = () => import('@/components/pages/Asset.vue')
 const AssetTypes = () => import('@/components/pages/AssetTypes.vue')
 const Backgrounds = () => import('@/components/pages/Backgrounds.vue')
 const Breakdown = () => import('@/components/pages/Breakdown.vue')
+const Concepts = () => import('@/components/pages/Concepts.vue')
 const CustomActions = () => import('@/components/pages/CustomActions.vue')
 const Departments = () => import('@/components/pages/Departments.vue')
 const Edit = () => import('@/components/pages/Edit.vue')
@@ -531,6 +532,12 @@ export const routes = [
         ]
       },
 
+      {
+        path: 'productions/:production_id/concepts',
+        component: Concepts,
+        name: 'concepts'
+      },
+
       {
         path: 'productions/:production_id/assets',
         component: Assets,
diff --git a/src/testrouter/routes.js b/src/testrouter/routes.js
index 3ad734d323..d0a2a1f3d1 100644
--- a/src/testrouter/routes.js
+++ b/src/testrouter/routes.js
@@ -25,6 +25,7 @@ import Asset from '@/components/pages/Asset'
 import AssetTypes from '@/components/pages/AssetTypes'
 import Backgrounds from '@/components/pages/Backgrounds'
 import Breakdown from '@/components/pages/Breakdown'
+import Concepts from '@/components/pages/Concepts'
 import CustomActions from '@/components/pages/CustomActions'
 import Departments from '@/components/pages/departments/Departments'
 import Edit from '@/components/pages/Edit'
@@ -591,6 +592,12 @@ export const routes = [
         ]
       },
 
+      {
+        path: 'productions/:production_id/concepts',
+        component: Concepts,
+        name: 'concepts'
+      },
+
       {
         path: 'productions/:production_id/assets',
         component: Assets,

From 1a12912d9ca82eb3ab03a55c749f54ac75ad8124 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 21 Nov 2023 22:48:34 +0100
Subject: [PATCH 04/41] [concepts] init data store

---
 src/store/api/concepts.js     |  25 ++++++
 src/store/index.js            |   2 +
 src/store/modules/concepts.js | 143 ++++++++++++++++++++++++++++++++++
 src/store/mutation-types.js   |   8 ++
 4 files changed, 178 insertions(+)
 create mode 100644 src/store/api/concepts.js
 create mode 100644 src/store/modules/concepts.js

diff --git a/src/store/api/concepts.js b/src/store/api/concepts.js
new file mode 100644
index 0000000000..7f6bf4da22
--- /dev/null
+++ b/src/store/api/concepts.js
@@ -0,0 +1,25 @@
+import client from '@/store/api/client'
+
+export default {
+  getConcepts(production) {
+    return client.pget(
+      `/api/data/concepts/with-tasks?project_id=${production.id}`
+    )
+  },
+
+  getConcept(conceptId) {
+    return client.getModel('concepts', conceptId, true)
+  },
+
+  newConcept(concept) {
+    return client.ppost('/api/data/concepts/', concept)
+  },
+
+  updateConcept(concept) {
+    return client.pput(`/api/data/concepts/${concept.id}`, concept)
+  },
+
+  deleteConcept(concept) {
+    return client.pdel(`/api/data/concepts/${concept.id}?force=true`)
+  }
+}
diff --git a/src/store/index.js b/src/store/index.js
index 59dd6a3cf3..dbb6349c45 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,6 +7,7 @@ import assets from '@/store/modules/assets'
 import assetTypes from '@/store/modules/assettypes'
 import backgrounds from '@/store/modules/backgrounds'
 import breakdown from '@/store/modules/breakdown'
+import concepts from '@/store/modules/concepts'
 import customActions from '@/store/modules/customactions'
 import departments from '@/store/modules/departments'
 import edits from '@/store/modules/edits'
@@ -35,6 +36,7 @@ const modules = {
   assetTypes,
   backgrounds,
   breakdown,
+  concepts,
   customActions,
   departments,
   edits,
diff --git a/src/store/modules/concepts.js b/src/store/modules/concepts.js
new file mode 100644
index 0000000000..2d890e7560
--- /dev/null
+++ b/src/store/modules/concepts.js
@@ -0,0 +1,143 @@
+import conceptsApi from '@/store/api/concepts'
+import tasksApi from '@/store/api/tasks'
+
+import {
+  LOAD_CONCEPTS_START,
+  LOAD_CONCEPTS_ERROR,
+  LOAD_CONCEPTS_END,
+  EDIT_CONCEPT_END,
+  DELETE_CONCEPT_END,
+  RESET_ALL
+} from '@/store/mutation-types'
+
+const initialState = {
+  concepts: [],
+  conceptMap: new Map(),
+  displayedConcepts: [],
+  conceptSearchText: '',
+  conceptSearchQueries: []
+}
+
+const state = {
+  ...initialState
+}
+
+const getters = {
+  concepts: state => state.concepts,
+  conceptMap: state => state.conceptMap
+  // editConcept: state => state.editConcept,
+  // deleteConcept: state => state.deleteConcept
+}
+
+const actions = {
+  async loadConcepts({ commit }) {
+    commit(LOAD_CONCEPTS_START)
+    try {
+      const concepts = await conceptsApi.getConcepts()
+      commit(LOAD_CONCEPTS_END, concepts)
+    } catch (err) {
+      commit(LOAD_CONCEPTS_ERROR)
+    }
+  },
+
+  async loadConcept({ commit }, conceptId) {
+    try {
+      const concept = await conceptsApi.getConcept(conceptId)
+      commit(EDIT_CONCEPT_END, concept)
+    } catch (err) {
+      console.error(err)
+    }
+  },
+
+  async newConcept({ commit }, { file, ...data }) {
+    let concept = await conceptsApi.newConcept(data)
+    const preview = concept.tasks[0].previews[0]
+    const { request, promise } = tasksApi.uploadPreview(preview.id, file)
+    request.on('progress', e => {
+      // commit(SET_UPLOAD_PROGRESS, {
+      //   previewId: preview.id,
+      //   percent: e.percent,
+      //   name: file.name
+      // })
+    })
+    concept = await promise
+    commit(EDIT_CONCEPT_END, concept)
+    return concept
+  },
+
+  async saveConcept({ commit }, data) {
+    const concept = await conceptsApi.updateConcept(data)
+    commit(EDIT_CONCEPT_END, concept)
+    return concept
+  },
+
+  async deleteConcept({ commit }, concept) {
+    await conceptsApi.deleteConcept(concept)
+    commit(DELETE_CONCEPT_END, concept)
+  }
+}
+
+const mutations = {
+  [LOAD_CONCEPTS_START](state) {
+    state.concepts = []
+    state.conceptMap = new Map()
+    state.displayedConcepts = []
+  },
+
+  [LOAD_CONCEPTS_ERROR](state) {
+    state.concepts = []
+    state.conceptMap = new Map()
+    state.displayedConcepts = []
+  },
+
+  [LOAD_CONCEPTS_END](state, concepts) {
+    concepts.forEach(concept => {
+      concept.url = `/api/pictures/preview-files/${concept.id}.${concept.extension}`
+      concept.thumbnail = `/api/pictures/thumbnails/preview-files/${concept.id}.png`
+    })
+    // state.concepts = sortByName(concepts)
+    state.concepts = concepts
+    state.conceptMap = new Map(
+      state.concepts.map(concept => [concept.id, concept])
+    )
+  },
+
+  [EDIT_CONCEPT_END](state, newConcept) {
+    newConcept.url = `/api/pictures/preview-files/${newConcept.id}.${newConcept.extension}`
+    newConcept.thumbnail = `/api/pictures/thumbnails/preview-files/${newConcept.id}.png`
+
+    const concept = state.conceptMap.get(newConcept.id)
+
+    if (concept?.id) {
+      Object.assign(concept, newConcept)
+      state.conceptMap.delete(concept.id)
+      state.conceptMap.set(concept.id, concept)
+      // state.concepts = sortByName(state.concepts)
+    } else {
+      state.concepts.push(newConcept)
+      state.conceptMap.set(newConcept.id, newConcept)
+      // state.concepts = sortByName(state.concepts)
+    }
+  },
+
+  [DELETE_CONCEPT_END](state, conceptToDelete) {
+    const conceptToDeleteIndex = state.concepts.findIndex(
+      ({ id }) => id === conceptToDelete.id
+    )
+    if (conceptToDeleteIndex >= 0) {
+      state.concepts.splice(conceptToDeleteIndex, 1)
+    }
+    delete state.conceptMap.get(conceptToDelete.id)
+  },
+
+  [RESET_ALL](state) {
+    Object.assign(state, { ...initialState })
+  }
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations
+}
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index af46a2fe04..f6eaaee5a5 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -636,3 +636,11 @@ export const LOAD_BACKGROUNDS_ERROR = 'LOAD_BACKGROUNDS_ERROR'
 export const LOAD_BACKGROUNDS_END = 'LOAD_BACKGROUNDS_END'
 export const EDIT_BACKGROUND_END = 'EDIT_BACKGROUND_END'
 export const DELETE_BACKGROUND_END = 'DELETE_BACKGROUND_END'
+
+// Concepts
+
+export const LOAD_CONCEPTS_START = 'LOAD_CONCEPTS_START'
+export const LOAD_CONCEPTS_ERROR = 'LOAD_CONCEPTS_ERROR'
+export const LOAD_CONCEPTS_END = 'LOAD_CONCEPTS_END'
+export const EDIT_CONCEPT_END = 'EDIT_CONCEPT_END'
+export const DELETE_CONCEPT_END = 'DELETE_CONCEPT_END'

From 7ffc43bcafcb008d3f5f20bd0633fec44ac3e2b3 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Wed, 22 Nov 2023 13:23:44 +0100
Subject: [PATCH 05/41] [concepts] add create concept

---
 src/components/modals/AddPreviewModal.vue | 36 +++++++++++----
 src/components/pages/Concepts.vue         | 56 +++++++++++++++++++----
 src/locales/en.js                         |  3 ++
 3 files changed, 77 insertions(+), 18 deletions(-)

diff --git a/src/components/modals/AddPreviewModal.vue b/src/components/modals/AddPreviewModal.vue
index bd4a6af978..3ea3579a78 100644
--- a/src/components/modals/AddPreviewModal.vue
+++ b/src/components/modals/AddPreviewModal.vue
@@ -15,7 +15,7 @@
           {{ $t('tasks.change_preview') }}
         </h1>
         <h1 class="title" v-else>
-          {{ $t('tasks.add_preview') }}
+          {{ isConcept ? $t('concepts.add_concept') : $t('tasks.add_preview') }}
         </h1>
 
         <p>
@@ -25,7 +25,7 @@
         <file-upload
           ref="preview-field"
           :accept="extensions"
-          :multiple="true"
+          :multiple="isMultiple"
           :label="$t('main.select_file')"
           :is-primary="false"
           @fileselected="onFileSelected"
@@ -33,7 +33,11 @@
         />
 
         <p class="error" v-if="isError">
-          {{ $t('tasks.add_preview_error') }}
+          {{
+            isConcept
+              ? $t('concepts.add_concept_error')
+              : $t('tasks.add_preview_error')
+          }}
         </p>
 
         <h3 class="subtitle has-text-centered" v-if="forms.length > 0">
@@ -73,9 +77,9 @@
           </template>
         </p>
 
-        <div class="mt1 message">
+        <div class="mt1 message" v-if="message">
           <div class="message-body">
-            {{ $t('tasks.revision_preview_file') }}
+            {{ $t(message) }}
           </div>
         </div>
 
@@ -89,7 +93,11 @@
             }"
             @click="$emit('confirm', forms)"
           >
-            {{ $t('tasks.add_revision_confirm') }}
+            {{
+              isConcept
+                ? $t('main.confirmation')
+                : $t('tasks.add_revision_confirm')
+            }}
           </a>
           <button @click="$emit('cancel')" class="button is-link">
             {{ $t('main.cancel') }}
@@ -119,7 +127,11 @@ export default {
       type: Boolean,
       default: false
     },
-    isLoading: {
+    isConcept: {
+      type: Boolean,
+      default: false
+    },
+    isEditing: {
       type: Boolean,
       default: false
     },
@@ -127,14 +139,22 @@ export default {
       type: Boolean,
       default: false
     },
-    isEditing: {
+    isLoading: {
       type: Boolean,
       default: false
     },
+    isMultiple: {
+      type: Boolean,
+      default: true
+    },
     extensions: {
       type: String,
       default: files.ALL_EXTENSIONS_STRING
     },
+    message: {
+      type: String,
+      default: 'tasks.revision_preview_file'
+    },
     title: {
       type: String,
       default: ''
diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 4f754e485e..462bec3730 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -46,7 +46,6 @@
               type="concept"
               @change-search="changeSearch"
               @remove-search="removeSearchQuery"
-              v-if="!loading.loadingConcepts"
             />
           </div>
         </div>
@@ -56,8 +55,8 @@
 
         <table-info
           :is-loading="loading.loadingConcepts"
-          :is-error="error.loadingConcepts"
-          v-if="loading.loadingConcepts || error.loadingConcepts"
+          :is-error="errors.loadingConcepts"
+          v-if="loading.loadingConcepts || errors.loadingConcepts"
         />
 
         <div v-else>
@@ -113,13 +112,25 @@
         <footer class="footer">
           <button-simple
             :disabled="loading.loadingConcepts"
-            :text="$t('Add a new reference to concepts')"
-            @click="onAddConceptClicked"
+            :text="$t('concepts.add_new_concept')"
+            @click="openAddConceptModal"
           />
         </footer>
       </div>
     </div>
 
+    <add-preview-modal
+      ref="add-preview-modal"
+      :active="modals.addConcept"
+      is-concept
+      :is-error="errors.addingConcept"
+      :is-loading="loading.addingConcept"
+      :is-multiple="false"
+      message=""
+      @cancel="closeAddConceptModal"
+      @confirm="confirmAddConceptModal"
+    />
+
     <div class="column side-column" v-if="currentTask">
       <task-info :task="currentTask" />
     </div>
@@ -134,6 +145,7 @@ import { sortByName } from '@/lib/sorting'
 
 import { searchMixin } from '@/components/mixins/search'
 
+import AddPreviewModal from '@/components/modals/AddPreviewModal'
 import ButtonSimple from '@/components/widgets/ButtonSimple'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
@@ -149,6 +161,7 @@ export default {
   mixins: [searchMixin],
 
   components: {
+    AddPreviewModal,
     ButtonSimple,
     Combobox,
     ComboboxStatus,
@@ -163,10 +176,12 @@ export default {
   data() {
     return {
       loading: {
+        addingConcept: false,
         loadingConcepts: true,
         savingSearch: false
       },
-      error: {
+      errors: {
+        addingConcept: false,
         loadingConcepts: false
       },
       filters: {
@@ -175,6 +190,12 @@ export default {
         entityType: null,
         sortBy: 'created_at'
       },
+      form: {
+        file: null
+      },
+      modals: {
+        addConcept: false
+      },
 
       // TODO: module getters
       currentTask: null,
@@ -228,7 +249,7 @@ export default {
     // FIXME: remove fake loading
     setTimeout(() => {
       this.loading.loadingConcepts = false
-    }, 2000)
+    }, 500)
 
     this.setSearch(this.$route.query.search)
 
@@ -331,7 +352,7 @@ export default {
   },
 
   methods: {
-    ...mapActions([]),
+    ...mapActions(['newConcept']),
 
     // TODO: module actions
     setConceptSearch: searchQuery => Promise.resolve(),
@@ -387,8 +408,23 @@ export default {
           : null
     },
 
-    onAddConceptClicked() {
-      alert('onAddConceptClicked')
+    openAddConceptModal() {
+      this.modals.addConcept = true
+    },
+
+    closeAddConceptModal() {
+      this.modals.addConcept = false
+    },
+
+    async confirmAddConceptModal(forms) {
+      const file = forms[0].get('file')
+      try {
+        await this.newConcept({ file })
+        this.closeAddConceptModal()
+      } catch (error) {
+        console.error(error)
+        this.errors.addingConcept = true
+      }
     }
   },
 
diff --git a/src/locales/en.js b/src/locales/en.js
index 34a0a5f01c..ad14894c8a 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -135,6 +135,9 @@ export default {
   },
 
   concepts: {
+    add_new_concept: 'Add a new reference to concepts',
+    add_concept: 'Add file for a new concept revision',
+    add_concept_error: 'An error occurred while adding concept.',
     title: 'Concepts',
     fields: {
       entity_type: 'Entity type',

From 4c6d0fefe4d5cf5f6cdac798acb8c980a4d7608a Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Thu, 23 Nov 2023 17:45:55 +0100
Subject: [PATCH 06/41] [concepts] add load concepts

---
 src/components/pages/Concepts.vue | 70 ++++++++++---------------------
 src/store/modules/concepts.js     | 16 +++----
 2 files changed, 31 insertions(+), 55 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 462bec3730..49d69f4a69 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -50,7 +50,7 @@
           </div>
         </div>
         <h2 class="mt0">
-          {{ $t('concepts.title') }} ({{ concepts?.length || 0 }})
+          {{ $t('concepts.title') }} ({{ filteredConcepts?.length || 0 }})
         </h2>
 
         <table-info
@@ -75,7 +75,7 @@
                 alt=""
                 width="300"
                 height="200"
-                :src="concept.url"
+                :src="concept.thumbnail"
                 @click.stop="onPreviewClicked"
               />
               <div class="description">
@@ -206,59 +206,20 @@ export default {
           name: 'test',
           search_query: 'test'
         }
-      ],
-      concepts: [
-        {
-          id: 1,
-          name: 'concept 1',
-          url: 'https://placehold.co/300x200',
-          status: 'concept-neutral',
-          task: null,
-          assignees: ['9609db21-9fe7-4c98-a536-5590f7ff1676'], // me
-          tags: ['tag1', 'tag2', 'tag3'],
-          created_at: '2023-11-20T00:00:00',
-          updated_at: '2023-11-23T00:00:00'
-        },
-        {
-          id: 2,
-          name: 'concept 2',
-          url: 'https://placehold.co/300x200',
-          status: 'concept-approved',
-          task: null,
-          assignees: ['532028cc-a249-4cc6-ace6-86f63ca9c5c8'], // alicia cooper
-          tags: [],
-          created_at: '2023-11-21T00:00:00',
-          updated_at: '2023-11-24T00:00:00'
-        },
-        {
-          id: 3,
-          name: 'concept 3',
-          url: 'https://placehold.co/300x200',
-          status: 'concept-rejected',
-          task: null,
-          assignees: [],
-          tags: [],
-          created_at: '2023-11-23T00:00:00',
-          updated_at: '2023-11-23T00:00:00'
-        }
       ]
     }
   },
 
   mounted() {
-    // FIXME: remove fake loading
-    setTimeout(() => {
-      this.loading.loadingConcepts = false
-    }, 500)
-
     this.setSearch(this.$route.query.search)
-
+    this.refreshConcepts()
     this.searchField.focus()
   },
 
   computed: {
     ...mapGetters([
       'currentProduction',
+      'displayedConcepts',
       'isDarkTheme',
       'personMap',
       'taskStatusMap',
@@ -306,7 +267,7 @@ export default {
     },
 
     filteredConcepts() {
-      let concepts = this.concepts.slice()
+      let concepts = this.displayedConcepts.slice()
       if (this.filters.taskStatusId) {
         concepts = concepts.filter(
           concept => concept.status === this.filters.taskStatusId
@@ -352,7 +313,7 @@ export default {
   },
 
   methods: {
-    ...mapActions(['newConcept']),
+    ...mapActions(['loadConcepts', 'newConcept']),
 
     // TODO: module actions
     setConceptSearch: searchQuery => Promise.resolve(),
@@ -389,6 +350,18 @@ export default {
       })
     },
 
+    async refreshConcepts() {
+      this.loading.loadingConcepts = true
+      try {
+        await this.loadConcepts()
+      } catch (err) {
+        console.error(err)
+        this.errors.loadingConcepts = true
+      } finally {
+        this.loading.loadingConcepts = false
+      }
+    },
+
     onPreviewClicked() {
       alert('onPreviewClicked')
     },
@@ -417,13 +390,16 @@ export default {
     },
 
     async confirmAddConceptModal(forms) {
+      this.loading.addingConcept = true
       const file = forms[0].get('file')
       try {
         await this.newConcept({ file })
         this.closeAddConceptModal()
-      } catch (error) {
-        console.error(error)
+      } catch (err) {
+        console.error(err)
         this.errors.addingConcept = true
+      } finally {
+        this.loading.addingConcept = false
       }
     }
   },
diff --git a/src/store/modules/concepts.js b/src/store/modules/concepts.js
index 2d890e7560..8c7ca2a3b1 100644
--- a/src/store/modules/concepts.js
+++ b/src/store/modules/concepts.js
@@ -24,7 +24,8 @@ const state = {
 
 const getters = {
   concepts: state => state.concepts,
-  conceptMap: state => state.conceptMap
+  conceptMap: state => state.conceptMap,
+  displayedConcepts: state => state.displayedConcepts
   // editConcept: state => state.editConcept,
   // deleteConcept: state => state.deleteConcept
 }
@@ -100,6 +101,7 @@ const mutations = {
     state.conceptMap = new Map(
       state.concepts.map(concept => [concept.id, concept])
     )
+    state.displayedConcepts = concepts
   },
 
   [EDIT_CONCEPT_END](state, newConcept) {
@@ -120,14 +122,12 @@ const mutations = {
     }
   },
 
-  [DELETE_CONCEPT_END](state, conceptToDelete) {
-    const conceptToDeleteIndex = state.concepts.findIndex(
-      ({ id }) => id === conceptToDelete.id
-    )
-    if (conceptToDeleteIndex >= 0) {
-      state.concepts.splice(conceptToDeleteIndex, 1)
+  [DELETE_CONCEPT_END](state, concept) {
+    const conceptIndex = state.concepts.findIndex(({ id }) => id === concept.id)
+    if (conceptIndex >= 0) {
+      state.concepts.splice(conceptIndex, 1)
     }
-    delete state.conceptMap.get(conceptToDelete.id)
+    delete state.conceptMap.get(concept.id)
   },
 
   [RESET_ALL](state) {

From c7e9bbd0c335ec4f9756b0c0e74f5029e69eac9d Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 28 Nov 2023 19:16:36 +0100
Subject: [PATCH 07/41] [concepts] update list of concepts

---
 src/components/pages/Concepts.vue        | 71 +++++++++++-------------
 src/components/widgets/EntityPreview.vue |  2 +-
 src/store/modules/concepts.js            |  8 ---
 3 files changed, 32 insertions(+), 49 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 49d69f4a69..adbac2237e 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -70,13 +70,13 @@
               :key="concept.id"
               @click="onSelectConcept(concept)"
             >
-              <img
-                class="preview"
-                alt=""
-                width="300"
-                height="200"
-                :src="concept.thumbnail"
-                @click.stop="onPreviewClicked"
+              <entity-preview
+                :empty-height="200"
+                :empty-width="300"
+                :height="200"
+                :width="300"
+                :entity="concept"
+                is-rounded-top-border
               />
               <div class="description">
                 <span>{{ concept.name }}</span>
@@ -101,7 +101,7 @@
                       :person="personMap.get(personId)"
                       :size="25"
                       :font-size="14"
-                      v-for="personId in concept.assignees"
+                      v-for="personId in concept.tasks[0].assignees"
                     />
                   </div>
                 </div>
@@ -132,7 +132,7 @@
     />
 
     <div class="column side-column" v-if="currentTask">
-      <task-info :task="currentTask" />
+      <task-info :task="currentTask" entity-type="Concept" with-actions />
     </div>
   </div>
 </template>
@@ -149,9 +149,10 @@ import AddPreviewModal from '@/components/modals/AddPreviewModal'
 import ButtonSimple from '@/components/widgets/ButtonSimple'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
+import EntityPreview from '@/components/widgets/EntityPreview.vue'
+import PeopleAvatar from '@/components/widgets/PeopleAvatar'
 import PeopleField from '@/components/widgets/PeopleField'
 import SearchField from '@/components/widgets/SearchField'
-import PeopleAvatar from '@/components/widgets/PeopleAvatar'
 import SearchQueryList from '@/components/widgets/SearchQueryList'
 import TableInfo from '@/components/widgets/TableInfo'
 import TaskInfo from '@/components/sides/TaskInfo'
@@ -165,9 +166,10 @@ export default {
     ButtonSimple,
     Combobox,
     ComboboxStatus,
+    EntityPreview,
+    PeopleAvatar,
     PeopleField,
     SearchField,
-    PeopleAvatar,
     SearchQueryList,
     TableInfo,
     TaskInfo
@@ -222,22 +224,24 @@ export default {
       'displayedConcepts',
       'isDarkTheme',
       'personMap',
-      'taskStatusMap',
-      'taskTypes'
+      'taskStatusMap'
     ]),
 
     assignees() {
-      const assignees = []
-      const assigneesMap = {}
-      this.filteredConcepts.forEach(task => {
-        task.assignees.forEach(personId => {
-          if (!assigneesMap[personId]) {
-            assignees.push(this.personMap.get(personId))
-            assigneesMap[personId] = true
-          }
+      const assignees = new Map()
+      this.filteredConcepts.forEach(concept => {
+        concept.tasks.forEach(task => {
+          task.assignees.forEach(personId => {
+            if (!assignees.has(personId)) {
+              const person = this.personMap.get(personId)
+              if (person) {
+                assignees.set(personId, person)
+              }
+            }
+          })
         })
       })
-      return sortByName(assignees)
+      return sortByName([...assignees.values()])
     },
 
     entityTypeOptions() {
@@ -275,7 +279,8 @@ export default {
       }
       if (this.filters.assignee) {
         concepts = concepts.filter(concept =>
-          concept.assignees?.includes(this.filters.assignee.id)
+          // FIXME: loop instead of tasks[0] ???
+          concept.tasks[0].assignees?.includes(this.filters.assignee.id)
         )
       }
       if (this.filters.entityType) {
@@ -362,10 +367,6 @@ export default {
       }
     },
 
-    onPreviewClicked() {
-      alert('onPreviewClicked')
-    },
-
     onSelectConcept(concept) {
       // FIXME: remove mock data
       concept.task = {
@@ -377,7 +378,7 @@ export default {
 
       this.currentTask =
         !this.currentTask || this.currentTask.entity_id !== concept.id
-          ? concept.task
+          ? concept.tasks[0]
           : null
     },
 
@@ -418,7 +419,6 @@ export default {
 .filters {
   display: flex;
   align-items: flex-end;
-  flex-wrap: wrap;
   gap: 0 20px;
   padding: 10px;
 
@@ -460,17 +460,6 @@ export default {
       background-color: var(--background-hover);
     }
 
-    .preview {
-      cursor: zoom-in;
-      background-color: $black;
-      border-top-left-radius: inherit;
-      border-top-right-radius: inherit;
-      max-width: 300px;
-      min-width: 300px;
-      max-height: 200px;
-      min-height: 200px;
-    }
-
     .description {
       display: flex;
       flex-direction: column;
@@ -519,6 +508,8 @@ export default {
 }
 
 .footer {
+  position: sticky;
+  bottom: 0;
   display: flex;
   justify-content: center;
   padding: 3em;
diff --git a/src/components/widgets/EntityPreview.vue b/src/components/widgets/EntityPreview.vue
index f68397c29d..652b42a681 100644
--- a/src/components/widgets/EntityPreview.vue
+++ b/src/components/widgets/EntityPreview.vue
@@ -30,7 +30,7 @@
       'border-top-left-radius': isRoundedTopBorder ? '10px' : '',
       'border-top-right-radius': isRoundedTopBorder ? '10px' : ''
     }"
-    @click="onPictureClicked()"
+    @click.stop="onPictureClicked()"
     v-else
   >
     <img
diff --git a/src/store/modules/concepts.js b/src/store/modules/concepts.js
index 8c7ca2a3b1..ab104b9414 100644
--- a/src/store/modules/concepts.js
+++ b/src/store/modules/concepts.js
@@ -92,11 +92,6 @@ const mutations = {
   },
 
   [LOAD_CONCEPTS_END](state, concepts) {
-    concepts.forEach(concept => {
-      concept.url = `/api/pictures/preview-files/${concept.id}.${concept.extension}`
-      concept.thumbnail = `/api/pictures/thumbnails/preview-files/${concept.id}.png`
-    })
-    // state.concepts = sortByName(concepts)
     state.concepts = concepts
     state.conceptMap = new Map(
       state.concepts.map(concept => [concept.id, concept])
@@ -105,9 +100,6 @@ const mutations = {
   },
 
   [EDIT_CONCEPT_END](state, newConcept) {
-    newConcept.url = `/api/pictures/preview-files/${newConcept.id}.${newConcept.extension}`
-    newConcept.thumbnail = `/api/pictures/thumbnails/preview-files/${newConcept.id}.png`
-
     const concept = state.conceptMap.get(newConcept.id)
 
     if (concept?.id) {

From 026ae66a5b077b37015de6e39d3db671f38fbe9e Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 28 Nov 2023 19:31:30 +0100
Subject: [PATCH 08/41] [concepts] update task panel to support the concepts

---
 src/components/previews/PreviewPlayer.vue | 45 ++++++++++++----------
 src/components/sides/TaskInfo.vue         |  6 ++-
 src/components/tops/ActionPanel.vue       | 47 ++++++++++++++++++++++-
 src/components/widgets/AddComment.vue     |  6 +++
 src/components/widgets/Comment.vue        |  7 +++-
 5 files changed, 87 insertions(+), 24 deletions(-)

diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
index 6413502871..f5782025c3 100644
--- a/src/components/previews/PreviewPlayer.vue
+++ b/src/components/previews/PreviewPlayer.vue
@@ -205,7 +205,7 @@
           </div>
         </div>
 
-        <div class="flexrow flexrow-item">
+        <div class="flexrow flexrow-item" v-if="!isConcept">
           <button-simple
             class="ml1"
             :active="isComparing"
@@ -255,7 +255,7 @@
               class="flexrow-item"
               icon="undo"
               :title="$t('playlists.actions.annotation_undo')"
-              v-if="!readOnly && fullScreen"
+              v-if="!readOnly && fullScreen && !isConcept"
               @click="undoLastAction"
             />
 
@@ -263,7 +263,7 @@
               class="flexrow-item flexrow-item"
               :title="$t('playlists.actions.annotation_redo')"
               icon="redo"
-              v-if="!readOnly && fullScreen"
+              v-if="!readOnly && fullScreen && !isConcept"
               @click="redoLastAction"
             />
 
@@ -272,7 +272,7 @@
               icon="remove"
               :title="$t('playlists.actions.annotation_delete')"
               @click="onDeleteClicked"
-              v-if="!readOnly && fullScreen"
+              v-if="!readOnly && fullScreen && !isConcept"
             />
 
             <transition name="slide">
@@ -295,7 +295,7 @@
               :active="isTyping"
               :title="$t('playlists.actions.annotation_text')"
               @click="onTypeClicked"
-              v-if="!readOnly && (!light || fullScreen)"
+              v-if="!readOnly && (!light || fullScreen) && !isConcept"
             />
 
             <transition name="slide">
@@ -326,7 +326,7 @@
               :active="isDrawing"
               :title="$t('playlists.actions.annotation_draw')"
               @click="onPencilAnnotateClicked"
-              v-if="!readOnly && (!light || fullScreen)"
+              v-if="!readOnly && (!light || fullScreen) && !isConcept"
             />
 
             <button-simple
@@ -334,7 +334,9 @@
               :title="$t('playlists.actions.toggle_annotations')"
               :active="isAnnotationsDisplayed"
               @click="onAnnotationDisplayedClicked"
-              v-if="(isPicture || isMovie) && (!light || fullScreen)"
+              v-if="
+                (isPicture || isMovie) && (!light || fullScreen) && !isConcept
+              "
             />
 
             <button-simple
@@ -343,7 +345,7 @@
               :active="isZoomPan"
               :title="$t('playlists.actions.annotation_zoom_pan')"
               @click="onZoomPanClicked"
-              v-if="!light || fullScreen"
+              v-if="(!light || fullScreen) && !isConcept"
             />
 
             <button-simple
@@ -444,20 +446,18 @@
             @previous-clicked="onPreviousClicked"
             @remove-preview-clicked="onRemovePreviewClicked"
             @current-index-clicked="isOrdering = !isOrdering"
-            v-if="currentPreview"
+            v-if="currentPreview && !isConcept"
           />
 
-          <div class="flexrow">
-            <div class="flexrow" v-if="fullScreen">
-              <combobox-styled
-                class="preview-combo flexrow-item"
-                :options="lastPreviewFileOptions"
-                is-reversed
-                is-preview
-                thin
-                @input="changeCurrentPreviewFile"
-              />
-            </div>
+          <div class="flexrow" v-if="fullScreen && !isConcept">
+            <combobox-styled
+              class="preview-combo flexrow-item"
+              :options="lastPreviewFileOptions"
+              is-reversed
+              is-preview
+              thin
+              @input="changeCurrentPreviewFile"
+            />
           </div>
 
           <div
@@ -811,6 +811,11 @@ export default {
       return this.currentPreview ? this.currentPreview.extension : ''
     },
 
+    isConcept() {
+      // FIXME: write correct logic
+      return this.$route.path.includes('concept')
+    },
+
     isPicture() {
       return ['gif', 'png', 'jpg', 'jpeg'].includes(this.extension)
     },
diff --git a/src/components/sides/TaskInfo.vue b/src/components/sides/TaskInfo.vue
index a14676b57d..381534254d 100644
--- a/src/components/sides/TaskInfo.vue
+++ b/src/components/sides/TaskInfo.vue
@@ -63,7 +63,7 @@
         <div class="task-columns pa1 pt0" ref="task-columns">
           <div class="task-column preview-column" v-if="isPreview">
             <div class="preview-column-content">
-              <div class="flexrow">
+              <div class="flexrow" v-if="!isConceptTask">
                 <div
                   class="preview-list flexrow w100"
                   v-if="previewOptions.length > 0"
@@ -518,6 +518,10 @@ export default {
       return false
     },
 
+    isConceptTask() {
+      return this.entityType === 'Concept'
+    },
+
     isPreviewPlayerReadOnly() {
       if (this.task) {
         if (this.isCurrentUserManager || this.isCurrentUserClient) {
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 8138446ba9..ea0e9ea5e8 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -31,7 +31,9 @@
             :title="$t('menu.assign_tasks')"
             @click="selectBar('assignation')"
             v-if="
-              (isCurrentViewSingleEntity || isCurrentViewEntity) &&
+              (isCurrentViewSingleEntity ||
+                isCurrentViewEntity ||
+                isCurrentViewConcept) &&
               (isCurrentUserManager ||
                 isSupervisorInDepartment ||
                 isInDepartment ||
@@ -70,7 +72,11 @@
               active: selectedBar === 'thumbnails'
             }"
             :title="$t('menu.set_thumbnails')"
-            v-if="isTaskSelection && !this.isCurrentUserArtist"
+            v-if="
+              isTaskSelection &&
+              !this.isCurrentUserArtist &&
+              !isCurrentViewConcept
+            "
             @click="selectBar('thumbnails')"
           >
             <image-icon />
@@ -198,6 +204,18 @@
             <play-circle-icon />
           </div>
 
+          <div
+            class="menu-item"
+            :class="{
+              active: selectedBar === 'tag-concepts'
+            }"
+            :title="$t('menu.tag_concepts')"
+            @click="selectBar('tag-concepts')"
+            v-if="isCurrentViewConcept && isCurrentUserManager"
+          >
+            <tag-icon />
+          </div>
+
           <div
             class="menu-item"
             :class="{
@@ -236,6 +254,18 @@
             <trash-icon />
           </div>
 
+          <div
+            class="menu-item"
+            :class="{
+              active: selectedBar === 'delete-concepts'
+            }"
+            :title="$t('menu.delete_concepts')"
+            @click="selectBar('delete-concepts')"
+            v-if="isCurrentViewConcept && isCurrentUserManager"
+          >
+            <trash-icon />
+          </div>
+
           <div class="filler"></div>
 
           <div
@@ -487,6 +517,13 @@
           </button>
         </div>
 
+        <div class="flexrow-item is-wide" v-if="selectedBar === 'tag-concepts'">
+          <div>Tag linked to Concept</div>
+          <ul style="margin: 1rem 0">
+            <li class="tag" style="border: 1px solid #67be4b">tag1</li>
+          </ul>
+        </div>
+
         <div class="flexrow-item is-wide" v-if="selectedBar === 'delete-tasks'">
           <div class="flexrow is-wide">
             <button
@@ -673,6 +710,7 @@ import {
   FilmIcon,
   ImageIcon,
   PlayCircleIcon,
+  TagIcon,
   TrashIcon,
   UserIcon
 } from 'vue-feather-icons'
@@ -709,6 +747,7 @@ export default {
     PlayCircleIcon,
     Spinner,
     UserIcon,
+    TagIcon,
     TrashIcon,
     ViewPlaylistModal
   },
@@ -914,6 +953,10 @@ export default {
       return this.$route.path.indexOf('edit') > 0 && !this.$route.params.edit_id
     },
 
+    isCurrentViewConcept() {
+      return this.$route.path.includes('concept')
+    },
+
     isCurrentViewTodos() {
       return (
         this.$route.path.indexOf('my-tasks') > 0 ||
diff --git a/src/components/widgets/AddComment.vue b/src/components/widgets/AddComment.vue
index 019f75e5b7..582434a10d 100644
--- a/src/components/widgets/AddComment.vue
+++ b/src/components/widgets/AddComment.vue
@@ -32,6 +32,7 @@
             active: mode === 'publish'
           }"
           @click="mode = 'publish'"
+          v-if="!isConcept"
         >
           {{ $t('tasks.publish_revision') }}
         </span>
@@ -457,6 +458,11 @@ export default {
       return status.is_retake && this.checklist.length === 0
     },
 
+    isConcept() {
+      // FIXME: write correct logic
+      return this.$route.path.includes('concept')
+    },
+
     isValidForm() {
       return (
         this.mode === 'status' ||
diff --git a/src/components/widgets/Comment.vue b/src/components/widgets/Comment.vue
index 445974af65..950b1a237e 100644
--- a/src/components/widgets/Comment.vue
+++ b/src/components/widgets/Comment.vue
@@ -270,7 +270,7 @@
       </div>
       <div
         class="flexrow content-wrapper preview-info"
-        v-if="comment.previews.length > 0"
+        v-if="comment.previews.length > 0 && !isConcept"
       >
         <router-link
           class="flexrow-item round-name revision"
@@ -480,6 +480,11 @@ export default {
       'taskStatusMap'
     ]),
 
+    isConcept() {
+      // FIXME: write correct logic
+      return this.$route.path.includes('concept')
+    },
+
     isEmpty() {
       return (
         this.comment.text.length === 0 &&

From 9d3b4c411ccf63b365b677287dea11f2846d88f6 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Wed, 29 Nov 2023 12:46:11 +0100
Subject: [PATCH 09/41] [concepts] fix concept creation

---
 src/components/modals/AddPreviewModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modals/AddPreviewModal.vue b/src/components/modals/AddPreviewModal.vue
index 3ea3579a78..a1d41b9de8 100644
--- a/src/components/modals/AddPreviewModal.vue
+++ b/src/components/modals/AddPreviewModal.vue
@@ -179,7 +179,7 @@ export default {
     ...mapActions([]),
 
     onFileSelected(forms) {
-      this.forms = this.forms.concat(forms)
+      this.forms = this.isMultiple ? this.forms.concat(forms) : [forms]
       this.$emit('fileselected', this.forms)
     },
 

From cc4b3d9c29d19acd2df8983e5c14ecf60975b9c7 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Thu, 30 Nov 2023 13:30:03 +0100
Subject: [PATCH 10/41] [concepts] fix concept selection

---
 src/components/pages/Concepts.vue | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index adbac2237e..1d10787b91 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -200,7 +200,6 @@ export default {
       },
 
       // TODO: module getters
-      currentTask: null,
       conceptSearchQueries: [
         {
           id: 'filter-test-1',
@@ -224,6 +223,7 @@ export default {
       'displayedConcepts',
       'isDarkTheme',
       'personMap',
+      'selectedTasks',
       'taskStatusMap'
     ]),
 
@@ -244,6 +244,10 @@ export default {
       return sortByName([...assignees.values()])
     },
 
+    currentTask() {
+      return this.selectedTasks.values().next().value
+    },
+
     entityTypeOptions() {
       const allEntityTypeOptions = {
         label: this.$t('main.all'),
@@ -318,7 +322,12 @@ export default {
   },
 
   methods: {
-    ...mapActions(['loadConcepts', 'newConcept']),
+    ...mapActions([
+      'addSelectedTask',
+      'clearSelectedTasks',
+      'loadConcepts',
+      'newConcept'
+    ]),
 
     // TODO: module actions
     setConceptSearch: searchQuery => Promise.resolve(),
@@ -368,18 +377,13 @@ export default {
     },
 
     onSelectConcept(concept) {
-      // FIXME: remove mock data
-      concept.task = {
-        id: `task-${concept.id}`,
-        entity_id: concept.id,
-        task_type_id: this.taskTypes[0].id,
-        project_id: this.currentProduction.id
+      const task = concept.tasks[0]
+      if (this.selectedTasks.has(task.id)) {
+        this.clearSelectedTasks()
+      } else {
+        this.clearSelectedTasks()
+        this.addSelectedTask(task)
       }
-
-      this.currentTask =
-        !this.currentTask || this.currentTask.entity_id !== concept.id
-          ? concept.tasks[0]
-          : null
     },
 
     openAddConceptModal() {

From 66316380d2f4861687ebd2a4bd055ac18d45c9d0 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Fri, 1 Dec 2023 23:58:42 +0100
Subject: [PATCH 11/41] [concepts] add delete concepts

---
 src/components/pages/Concepts.vue             |  52 ++++--
 src/components/sides/TaskInfo.vue             |   5 +-
 src/components/tops/ActionPanel.vue           | 149 ++++++++++++------
 .../tops/actions/DeleteEntities.vue           |  12 +-
 src/locales/en.js                             |   8 +-
 src/store/modules/concepts.js                 |  57 ++++++-
 src/store/mutation-types.js                   |   2 +
 7 files changed, 208 insertions(+), 77 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 1d10787b91..47691b1c2e 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -64,11 +64,13 @@
             <li
               class="item"
               :class="{
-                'selected-item': currentTask?.entity_id === concept.id
+                'selected-item': isSelected(concept)
               }"
               v-for="concept in filteredConcepts"
               :key="concept.id"
-              @click="onSelectConcept(concept)"
+              @click="
+                onSelectConcept(concept, $event.ctrlKey || $event.metaKey)
+              "
             >
               <entity-preview
                 :empty-height="200"
@@ -131,8 +133,8 @@
       @confirm="confirmAddConceptModal"
     />
 
-    <div class="column side-column" v-if="currentTask">
-      <task-info :task="currentTask" entity-type="Concept" with-actions />
+    <div class="column side-column" v-if="selectedConcepts.size">
+      <task-info entity-type="Concept" :task="currentTask" with-actions />
     </div>
   </div>
 </template>
@@ -223,7 +225,7 @@ export default {
       'displayedConcepts',
       'isDarkTheme',
       'personMap',
-      'selectedTasks',
+      'selectedConcepts',
       'taskStatusMap'
     ]),
 
@@ -245,7 +247,13 @@ export default {
     },
 
     currentTask() {
-      return this.selectedTasks.values().next().value
+      return this.currentConcept?.tasks[0]
+    },
+
+    currentConcept() {
+      return this.selectedConcepts.size === 1
+        ? this.selectedConcepts.values().next().value
+        : null
     },
 
     entityTypeOptions() {
@@ -275,7 +283,7 @@ export default {
     },
 
     filteredConcepts() {
-      let concepts = this.displayedConcepts.slice()
+      let concepts = [...this.displayedConcepts]
       if (this.filters.taskStatusId) {
         concepts = concepts.filter(
           concept => concept.status === this.filters.taskStatusId
@@ -283,7 +291,6 @@ export default {
       }
       if (this.filters.assignee) {
         concepts = concepts.filter(concept =>
-          // FIXME: loop instead of tasks[0] ???
           concept.tasks[0].assignees?.includes(this.filters.assignee.id)
         )
       }
@@ -323,7 +330,9 @@ export default {
 
   methods: {
     ...mapActions([
+      'addSelectedConcepts',
       'addSelectedTask',
+      'clearSelectedConcepts',
       'clearSelectedTasks',
       'loadConcepts',
       'newConcept'
@@ -376,13 +385,28 @@ export default {
       }
     },
 
-    onSelectConcept(concept) {
-      const task = concept.tasks[0]
-      if (this.selectedTasks.has(task.id)) {
-        this.clearSelectedTasks()
+    isSelected(concept) {
+      return this.selectedConcepts.has(concept.id)
+    },
+
+    onSelectConcept(concept, isMultipleSelection = false) {
+      const selection = isMultipleSelection
+        ? new Map(this.selectedConcepts)
+        : new Map()
+      if (
+        (isMultipleSelection && this.isSelected(concept)) ||
+        (!isMultipleSelection && concept === this.currentConcept)
+      ) {
+        selection.delete(concept.id)
       } else {
-        this.clearSelectedTasks()
-        this.addSelectedTask(task)
+        selection.set(concept.id, concept)
+      }
+      this.clearSelectedConcepts()
+      this.addSelectedConcepts(selection)
+
+      this.clearSelectedTasks()
+      if (this.currentTask) {
+        this.addSelectedTask(this.currentTask)
       }
     },
 
diff --git a/src/components/sides/TaskInfo.vue b/src/components/sides/TaskInfo.vue
index 381534254d..836b45df6e 100644
--- a/src/components/sides/TaskInfo.vue
+++ b/src/components/sides/TaskInfo.vue
@@ -50,7 +50,7 @@
               class="flexrow-item task-type"
               :task-type="currentTaskType"
               :production-id="currentProduction.id"
-              v-if="currentTaskType"
+              v-if="currentTaskType && !isConceptTask"
             />
             <div class="title flexrow-item filler">
               <router-link :to="taskEntityPath">
@@ -442,6 +442,7 @@ export default {
       'previewFormData',
       'productionMap',
       'selectedAssets',
+      'selectedConcepts',
       'selectedEdits',
       'selectedShots',
       'selectedTasks',
@@ -459,7 +460,7 @@ export default {
     },
 
     nbSelectedEntities() {
-      return this.selectedEntities ? this.selectedEntities.size : 0
+      return this.selectedEntities?.size || 0
     },
 
     selectedEntities() {
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index ea0e9ea5e8..ef0794fa5d 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -98,6 +98,20 @@
             <eye-icon />
           </div>
 
+          <div
+            class="menu-item"
+            :class="{
+              active: selectedBar === 'tag-concepts'
+            }"
+            :title="$t('menu.tag_concepts')"
+            @click="selectBar('tag-concepts')"
+            v-if="
+              isCurrentViewConcept && isCurrentUserManager && isTaskSelection
+            "
+          >
+            <tag-icon />
+          </div>
+
           <div
             class="menu-separator"
             v-if="!isEntitySelection && isTaskSelection && nbSelectedTasks > 1"
@@ -180,6 +194,7 @@
               !isEntitySelection &&
               isTaskSelection &&
               !isCurrentViewEpisode &&
+              !isCurrentViewConcept &&
               customActions &&
               customActions.length > 0
             "
@@ -197,6 +212,7 @@
               !isEntitySelection &&
               isTaskSelection &&
               !isCurrentViewEpisode &&
+              !isCurrentViewConcept &&
               customActions &&
               customActions.length > 0
             "
@@ -204,18 +220,6 @@
             <play-circle-icon />
           </div>
 
-          <div
-            class="menu-item"
-            :class="{
-              active: selectedBar === 'tag-concepts'
-            }"
-            :title="$t('menu.tag_concepts')"
-            @click="selectBar('tag-concepts')"
-            v-if="isCurrentViewConcept && isCurrentUserManager"
-          >
-            <tag-icon />
-          </div>
-
           <div
             class="menu-item"
             :class="{
@@ -684,6 +688,23 @@
             @confirm="confirmEpisodeDeletion"
           />
         </div>
+
+        <div
+          class="flexrow-item is-wide"
+          v-if="selectedBar === 'delete-concepts'"
+        >
+          <delete-entities
+            :error-text="$t('concepts.multiple_delete_error')"
+            :is-loading="loading.episodeDeletion"
+            :is-error="errors.deleteEpisode"
+            :text="
+              $tc('concepts.delete_for_selection', nbSelectedConcepts, {
+                nbSelectedConcepts
+              })
+            "
+            @confirm="confirmConceptDeletion"
+          />
+        </div>
       </div>
     </div>
 
@@ -791,6 +812,7 @@ export default {
         assetDeletion: false,
         changePriority: false,
         changeStatus: false,
+        conceptDeletion: false,
         editDeletion: false,
         episodeDeletion: false,
         taskCreation: false,
@@ -802,6 +824,7 @@ export default {
       errors: {
         assetDeletion: false,
         taskDeletion: false,
+        conceptDeletion: false,
         editDeletion: false,
         episodeDeletion: false,
         shotDeletion: false
@@ -836,6 +859,7 @@ export default {
       'personMap',
       'productionMap',
       'selectedAssets',
+      'selectedConcepts',
       'selectedEdits',
       'selectedShots',
       'selectedTasks',
@@ -860,8 +884,8 @@ export default {
 
     currentEntityType() {
       if (this.isCurrentViewAsset) return 'asset'
-      else if (this.isCurrentViewShot) return 'shot'
-      else if (this.isCurrentViewEdit) return 'edit'
+      if (this.isCurrentViewShot) return 'shot'
+      if (this.isCurrentViewEdit) return 'edit'
       return 'episode'
     },
 
@@ -907,20 +931,26 @@ export default {
       return this.selectedEdits.size
     },
 
+    nbSelectedConcepts() {
+      return this.selectedConcepts.size
+    },
+
     isHidden() {
       return (
         (this.nbSelectedTasks === 0 &&
           this.nbSelectedValidations === 0 &&
           this.nbSelectedAssets === 0 &&
           this.nbSelectedShots === 0 &&
-          this.nbSelectedEdits === 0) ||
+          this.nbSelectedEdits === 0 &&
+          this.nbSelectedConcepts === 0) ||
         !(
           this.isCurrentViewAsset ||
           this.isCurrentViewTodos ||
           this.isCurrentViewShot ||
           this.isCurrentViewEpisode ||
           this.isCurrentViewSequence ||
-          this.isCurrentViewEdit
+          this.isCurrentViewEdit ||
+          this.isCurrentViewConcept
         )
       )
     },
@@ -940,17 +970,15 @@ export default {
     },
 
     isCurrentViewAsset() {
-      return (
-        this.$route.path.indexOf('asset') > 0 && !this.$route.params.shot_id
-      )
+      return this.$route.path.includes('asset') && !this.$route.params.shot_id
     },
 
     isCurrentViewShot() {
-      return this.$route.path.indexOf('shot') > 0 && !this.$route.params.shot_id
+      return this.$route.path.includes('shot') && !this.$route.params.shot_id
     },
 
     isCurrentViewEdit() {
-      return this.$route.path.indexOf('edit') > 0 && !this.$route.params.edit_id
+      return this.$route.path.includes('edit') && !this.$route.params.edit_id
     },
 
     isCurrentViewConcept() {
@@ -959,21 +987,21 @@ export default {
 
     isCurrentViewTodos() {
       return (
-        this.$route.path.indexOf('my-tasks') > 0 ||
-        this.$route.path.indexOf('people/') > 0
+        this.$route.path.includes('my-tasks') ||
+        this.$route.path.includes('people/')
       )
     },
 
     isCurrentViewPerson() {
-      return this.$route.path.indexOf('people/') > 0
+      return this.$route.path.includes('people/')
     },
 
     isCurrentViewPersonTasks() {
-      return this.$route.path.indexOf('todos') > 0
+      return this.$route.path.includes('todos')
     },
 
     isCurrentViewTaskType() {
-      return this.$route.path.indexOf('task-type') > 0
+      return this.$route.path.includes('task-type')
     },
 
     isCurrentViewEntity() {
@@ -992,7 +1020,7 @@ export default {
           this.isCurrentViewAsset ||
           this.isCurrentViewShot ||
           this.isCurrentViewEdit
-        ) && this.$route.path.indexOf('episodes') > 0
+        ) && this.$route.path.includes('episodes')
       )
     },
 
@@ -1002,7 +1030,7 @@ export default {
           this.isCurrentViewAsset ||
           this.isCurrentViewShot ||
           this.isCurrentViewEdit
-        ) && this.$route.path.indexOf('sequences') > 0
+        ) && this.$route.path.includes('sequences')
       )
     },
 
@@ -1038,7 +1066,12 @@ export default {
 
     storagePrefix() {
       let prefix = 'todos-'
-      if (this.isCurrentViewAsset || this.isCurrentViewShot) {
+      if (
+        this.isCurrentViewAsset ||
+        this.isCurrentViewShot ||
+        this.isCurrentViewEdit ||
+        this.isCurrentViewConcept
+      ) {
         prefix = 'entities-'
       }
       if (this.isCurrentViewTaskType) prefix = 'tasks-'
@@ -1052,12 +1085,14 @@ export default {
       'clearSelectedAssets',
       'clearSelectedShots',
       'clearSelectedEdits',
+      'clearSelectedConcepts',
       'createSelectedTasks',
       'deleteSelectedAssets',
       'deleteSelectedShots',
       'deleteSelectedTasks',
       'deleteSelectedEdits',
       'deleteSelectedEpisodes',
+      'deleteSelectedConcepts',
       'changeSelectedTaskStatus',
       'changeSelectedPriorities',
       'clearSelectedTasks',
@@ -1142,14 +1177,13 @@ export default {
     },
 
     confirmTaskCreation() {
-      const type =
-        this.$route.path.indexOf('shots') > 0
-          ? 'shots'
-          : this.$route.path.indexOf('assets') > 0
-            ? 'assets'
-            : this.$route.path.indexOf('edits') > 0
-              ? 'edits'
-              : 'episodes'
+      const type = this.$route.path.includes('shots')
+        ? 'shots'
+        : this.$route.path.includes('assets')
+          ? 'assets'
+          : this.$route.path.includes('edits')
+            ? 'edits'
+            : 'episodes'
       this.loading.taskCreation = true
       this.createSelectedTasks({
         type,
@@ -1223,6 +1257,21 @@ export default {
         })
     },
 
+    confirmConceptDeletion() {
+      this.loading.deleteConcept = true
+      this.errors.deleteConcept = false
+      this.deleteSelectedConcepts()
+        .then(() => {
+          this.loading.deleteConcept = false
+          this.clearSelectedConcepts()
+        })
+        .catch(err => {
+          console.error(err)
+          this.loading.deleteConcept = false
+          this.errors.deleteConcept = true
+        })
+    },
+
     confirmPlaylistGeneration() {
       this.modals.playlist = true
       this.selectedBar = ''
@@ -1362,18 +1411,25 @@ export default {
           this.selectedBar = 'delete-edits'
           return
         }
+        if (this.isCurrentViewConcept && this.nbSelectedConcepts > 1) {
+          this.selectedBar = 'delete-concepts'
+          return
+        }
         if (this.nbSelectedTasks === 1) {
           this.selectedBar = ''
         }
 
-        const prefix = this.storagePrefix
-        const lastSelection = localStorage.getItem(`${prefix}-selected-bar`)
+        const lastSelection = localStorage.getItem(
+          `${this.storagePrefix}-selected-bar`
+        )
         if (lastSelection) {
           this.selectedBar = lastSelection
-        } else {
-          if (this.isCurrentViewAsset || this.isCurrentViewShot) {
-            this.selectedBar = 'change-status'
-          }
+        } else if (
+          this.isCurrentViewAsset ||
+          this.isCurrentViewShot ||
+          this.isCurrentViewEdit
+        ) {
+          this.selectedBar = 'change-status'
         }
       } else {
         window.removeEventListener('keydown', this.onKeyDown)
@@ -1414,7 +1470,12 @@ export default {
 
     nbSelectedEdits() {
       this.autoChooseSelectBar()
-      if (this.nbSelectedShots > 0) this.clearSelectedTasks()
+      if (this.nbSelectedEdits > 0) this.clearSelectedTasks()
+    },
+
+    nbSelectedConcepts() {
+      this.autoChooseSelectBar()
+      if (this.nbSelectedConcepts > 1) this.clearSelectedTasks()
     },
 
     isHidden() {
diff --git a/src/components/tops/actions/DeleteEntities.vue b/src/components/tops/actions/DeleteEntities.vue
index 63c484d808..2ab080b747 100644
--- a/src/components/tops/actions/DeleteEntities.vue
+++ b/src/components/tops/actions/DeleteEntities.vue
@@ -15,8 +15,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-
 import Spinner from '@/components/widgets/Spinner'
 
 export default {
@@ -47,15 +45,7 @@ export default {
       default: '',
       type: String
     }
-  },
-
-  mounted() {},
-
-  computed: {
-    ...mapGetters([])
-  },
-
-  methods: {}
+  }
 }
 </script>
 
diff --git a/src/locales/en.js b/src/locales/en.js
index ad14894c8a..fc2aa47de3 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -138,6 +138,8 @@ export default {
     add_new_concept: 'Add a new reference to concepts',
     add_concept: 'Add file for a new concept revision',
     add_concept_error: 'An error occurred while adding concept.',
+    delete_for_selection: 'Delete the selected concept | Delete the {nbSelectedConcepts} selected concepts',
+    multiple_delete_error: 'An error occurred while deleting a concept. There is probably some data linked to a concept. Are you sure there is no task linked to a selected concept?',
     title: 'Concepts',
     fields: {
       entity_type: 'Entity type',
@@ -585,14 +587,16 @@ export default {
     change_status: 'Change status',
     create_tasks: 'Create tasks',
     delete_assets: 'Delete assets',
-    delete_shots: 'Delete shots',
+    delete_concepts: 'Delete concepts',
     delete_edits: 'Delete edits',
+    delete_shots: 'Delete shots',
     delete_tasks: 'Delete tasks',
     generate_playlist: 'Generate a playlist',
     run_custom_action: 'Run custom action',
     set_estimations: 'Set estimations',
     set_thumbnails: 'Set thumbnails from last preview',
-    subscribe: 'Subscribe to notifications'
+    subscribe: 'Subscribe to notifications',
+    tag_concepts: "Edit concept tags",
   },
 
   news: {
diff --git a/src/store/modules/concepts.js b/src/store/modules/concepts.js
index ab104b9414..40300975b0 100644
--- a/src/store/modules/concepts.js
+++ b/src/store/modules/concepts.js
@@ -1,3 +1,4 @@
+import async from 'async'
 import conceptsApi from '@/store/api/concepts'
 import tasksApi from '@/store/api/tasks'
 
@@ -7,6 +8,8 @@ import {
   LOAD_CONCEPTS_END,
   EDIT_CONCEPT_END,
   DELETE_CONCEPT_END,
+  ADD_SELECTED_CONCEPTS,
+  CLEAR_SELECTED_CONCEPTS,
   RESET_ALL
 } from '@/store/mutation-types'
 
@@ -15,7 +18,8 @@ const initialState = {
   conceptMap: new Map(),
   displayedConcepts: [],
   conceptSearchText: '',
-  conceptSearchQueries: []
+  conceptSearchQueries: [],
+  selectedConcepts: new Map()
 }
 
 const state = {
@@ -25,9 +29,8 @@ const state = {
 const getters = {
   concepts: state => state.concepts,
   conceptMap: state => state.conceptMap,
-  displayedConcepts: state => state.displayedConcepts
-  // editConcept: state => state.editConcept,
-  // deleteConcept: state => state.deleteConcept
+  displayedConcepts: state => state.displayedConcepts,
+  selectedConcepts: state => state.selectedConcepts
 }
 
 const actions = {
@@ -75,6 +78,41 @@ const actions = {
   async deleteConcept({ commit }, concept) {
     await conceptsApi.deleteConcept(concept)
     commit(DELETE_CONCEPT_END, concept)
+  },
+
+  addSelectedConcepts({ commit }, concept) {
+    commit(ADD_SELECTED_CONCEPTS, concept)
+  },
+
+  deleteSelectedConcepts({ state, dispatch }) {
+    return new Promise((resolve, reject) => {
+      let selectedConceptIds = [...state.selectedConcepts.values()]
+        .filter(concept => !concept.canceled)
+        .map(concept => concept.id)
+      if (selectedConceptIds.length === 0) {
+        selectedConceptIds = [...state.selectedConcepts.keys()]
+      }
+      async.eachSeries(
+        selectedConceptIds,
+        (conceptId, next) => {
+          const concept = state.conceptMap.get(conceptId)
+          if (concept) {
+            dispatch('deleteConcept', concept)
+          }
+          next()
+        },
+        err => {
+          if (err) reject(err)
+          else {
+            resolve()
+          }
+        }
+      )
+    })
+  },
+
+  clearSelectedConcepts({ commit }) {
+    commit(CLEAR_SELECTED_CONCEPTS)
   }
 }
 
@@ -122,6 +160,17 @@ const mutations = {
     delete state.conceptMap.get(concept.id)
   },
 
+  [ADD_SELECTED_CONCEPTS](state, concepts) {
+    concepts.forEach(concept => {
+      state.selectedConcepts.set(concept.id, concept)
+    })
+    state.selectedConcepts = new Map(state.selectedConcepts) // for reactivity
+  },
+
+  [CLEAR_SELECTED_CONCEPTS](state) {
+    state.selectedConcepts = new Map()
+  },
+
   [RESET_ALL](state) {
     Object.assign(state, { ...initialState })
   }
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index f6eaaee5a5..53bb01c78b 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -644,3 +644,5 @@ export const LOAD_CONCEPTS_ERROR = 'LOAD_CONCEPTS_ERROR'
 export const LOAD_CONCEPTS_END = 'LOAD_CONCEPTS_END'
 export const EDIT_CONCEPT_END = 'EDIT_CONCEPT_END'
 export const DELETE_CONCEPT_END = 'DELETE_CONCEPT_END'
+export const ADD_SELECTED_CONCEPTS = 'ADD_SELECTED_CONCEPTS'
+export const CLEAR_SELECTED_CONCEPTS = 'CLEAR_SELECTED_CONCEPTS'

From c41becb4dd9840965478a33fbbcfa68da3b87b0e Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Thu, 7 Dec 2023 12:27:12 +0100
Subject: [PATCH 12/41] [concepts] add asset tagging

---
 src/components/pages/Concepts.vue          |  24 ++-
 src/components/previews/PreviewPlayer.vue  |  22 +++
 src/components/tops/ActionPanel.vue        | 181 ++++++++++++++++++++-
 src/components/widgets/SearchQueryList.vue |   4 +-
 src/locales/en.js                          |   4 +
 5 files changed, 218 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 47691b1c2e..49389e989a 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -81,10 +81,14 @@
                 is-rounded-top-border
               />
               <div class="description">
-                <span>{{ concept.name }}</span>
                 <ul class="tags">
-                  <li class="tag" v-for="tag in concept.tags" :key="tag">
-                    <a href="#">{{ tag }}</a>
+                  <li
+                    class="tag"
+                    v-for="tag in concept.tags"
+                    :key="tag.id"
+                    @click.stop="onSelectedTag"
+                  >
+                    {{ tag.name }}
                   </li>
                 </ul>
                 <div class="status">
@@ -418,6 +422,10 @@ export default {
       this.modals.addConcept = false
     },
 
+    onSelectedTag(tag) {
+      // TODO: select ta action ???
+    },
+
     async confirmAddConceptModal(forms) {
       this.loading.addingConcept = true
       const file = forms[0].get('file')
@@ -494,12 +502,10 @@ export default {
       flex-wrap: wrap;
       row-gap: 10px;
       padding: 0.3em 1em;
-      margin-bottom: 0.3em;
-      color: var(--text-strong);
-
-      font-weight: 500;
-
-      text-transform: uppercase;
+      margin: 0.3em 0;
+      // color: var(--text-strong);
+      // font-weight: 500;
+      // text-transform: uppercase;
     }
 
     .tags {
diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
index f5782025c3..61d591d4ac 100644
--- a/src/components/previews/PreviewPlayer.vue
+++ b/src/components/previews/PreviewPlayer.vue
@@ -488,6 +488,14 @@
       </div>
     </div>
 
+    <div class="flexrow" v-if="isConcept">
+      <ul class="tags">
+        <li class="tag" :key="tag.id" v-for="tag in currentConcept.tags">
+          {{ tag.name }}
+        </li>
+      </ul>
+    </div>
+
     <div
       class="flexrow revision-previews"
       ref="revision-previews"
@@ -716,6 +724,7 @@ export default {
       'isCurrentUserArtist',
       'organisation',
       'productionBackgrounds',
+      'selectedConcepts',
       'user'
     ]),
 
@@ -971,6 +980,10 @@ export default {
             (this.isDefaultBackground(background) ? ` (${defaultFlag})` : '')
         }))
       ]
+    },
+
+    currentConcept() {
+      return this.selectedConcepts.values().next().value
     }
   },
 
@@ -2291,6 +2304,15 @@ export default {
   display: flex;
 }
 
+.tags {
+  display: flex;
+  gap: 10px;
+  padding: 1rem;
+  margin-left: 0;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
 #resize-annotation-canvas,
 #annotation-snapshot {
   display: none;
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index ef0794fa5d..81cc058dc6 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -522,9 +522,19 @@
         </div>
 
         <div class="flexrow-item is-wide" v-if="selectedBar === 'tag-concepts'">
-          <div>Tag linked to Concept</div>
-          <ul style="margin: 1rem 0">
-            <li class="tag" style="border: 1px solid #67be4b">tag1</li>
+          <h3 class="mb05">{{ $t('concepts.actions.title') }}</h3>
+          <ul class="tags mb05">
+            <li v-if="!currentConcept?.tags.length">
+              <em>{{ $t('concepts.actions.empty') }}</em>
+            </li>
+            <template v-else>
+              <li class="tag" v-for="tag in currentConcept.tags" :key="tag.id">
+                {{ tag.name }}
+                <button class="action" @click="removeTag(tag)">
+                  <trash2-icon size="0.6x" />
+                </button>
+              </li>
+            </template>
           </ul>
         </div>
 
@@ -708,6 +718,47 @@
       </div>
     </div>
 
+    <div class="flexrow-item is-wide pa1" v-if="selectedBar === 'tag-concepts'">
+      <div ref="asset-list" class="concept-tags">
+        <h2 class="subtitle">
+          {{ $t('breakdown.all_assets') }}
+        </h2>
+        <div class="filters-area flexrow mb2" v-if="true">
+          <search-field ref="search-field" @change="onSearchTagChange" />
+          <button-simple
+            class="flexrow-item"
+            :title="$t('entities.build_filter.title')"
+            icon="funnel"
+            @click="modals.isBuildFilterDisplayed = true"
+          />
+        </div>
+        <spinner v-if="loading.tags" />
+        <template v-else>
+          <ul
+            class="tag-types"
+            :key="`tags-types-${index}`"
+            v-for="(tagGroup, index) in availableTagsByType"
+          >
+            <li class="tag-type">
+              <h4 class="subtitle">
+                {{ tagGroup.type }}
+              </h4>
+              <ul class="tags">
+                <li
+                  class="tag"
+                  :key="tag.id"
+                  v-for="tag in tagGroup.tags"
+                  @click="onSelectTag"
+                >
+                  {{ tag.name }}
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </template>
+      </div>
+    </div>
+
     <view-playlist-modal
       :active="modals.playlist"
       :task-ids="selectedTaskIds"
@@ -719,6 +770,7 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+
 import { intersection } from '@/lib/array'
 import { sortPeople } from '@/lib/sorting'
 import func from '@/lib/func'
@@ -733,13 +785,17 @@ import {
   PlayCircleIcon,
   TagIcon,
   TrashIcon,
+  Trash2Icon,
   UserIcon
 } from 'vue-feather-icons'
+
+import ButtonSimple from '@/components/widgets/ButtonSimple'
 import ComboboxModel from '@/components/widgets/ComboboxModel'
 import ComboboxStatus from '@/components/widgets/ComboboxStatus'
 import ComboboxStyled from '@/components/widgets/ComboboxStyled'
 import DeleteEntities from '@/components/tops/actions/DeleteEntities'
 import PeopleField from '@/components/widgets/PeopleField'
+import SearchField from '@/components/widgets/SearchField'
 import Spinner from '@/components/widgets/Spinner'
 import ViewPlaylistModal from '@/components/modals/ViewPlaylistModal'
 
@@ -755,6 +811,7 @@ export default {
 
   components: {
     AlertCircleIcon,
+    ButtonSimple,
     CheckSquareIcon,
     ComboboxModel,
     ComboboxStatus,
@@ -766,10 +823,12 @@ export default {
     ImageIcon,
     PeopleField,
     PlayCircleIcon,
+    SearchField,
     Spinner,
     UserIcon,
     TagIcon,
     TrashIcon,
+    Trash2Icon,
     ViewPlaylistModal
   },
 
@@ -819,6 +878,7 @@ export default {
         taskDeletion: false,
         setThumbnails: false,
         shotDeletion: false,
+        tags: false,
         tasksSubscription: false
       },
       errors: {
@@ -835,6 +895,12 @@ export default {
   mounted() {
     this.customAction = this.defaultCustomAction
     this.setCurrentTeam()
+
+    // FIXME: hack to init available tags
+    this.loading.tags = true
+    this.loadAssets(true).finally(() => {
+      this.loading.tags = false
+    })
   },
 
   beforeDestroy() {
@@ -846,6 +912,7 @@ export default {
       'allCustomActions',
       'assetMap',
       'assetCustomActions',
+      'assetsByType',
       'currentProduction',
       'getPersonOptions',
       'isCurrentUserArtist',
@@ -889,6 +956,10 @@ export default {
       return 'episode'
     },
 
+    currentConcept() {
+      return this.selectedConcepts.values().next().value
+    },
+
     defaultCustomAction() {
       if (this.customActions.length > 0) {
         return this.customActions[0]
@@ -1069,13 +1140,25 @@ export default {
       if (
         this.isCurrentViewAsset ||
         this.isCurrentViewShot ||
-        this.isCurrentViewEdit ||
-        this.isCurrentViewConcept
+        this.isCurrentViewEdit
       ) {
         prefix = 'entities-'
       }
+      if (this.isCurrentViewConcept) prefix = 'concepts-'
       if (this.isCurrentViewTaskType) prefix = 'tasks-'
       return prefix
+    },
+
+    availableTagsByType() {
+      const assetGroups = [...this.assetsByType]
+      const result = assetGroups.map(assets => ({
+        type: assets[0].asset_type_name,
+        tags: assets.map(asset => ({
+          id: asset.id,
+          name: asset.name
+        }))
+      }))
+      return result
     }
   },
 
@@ -1096,6 +1179,7 @@ export default {
       'changeSelectedTaskStatus',
       'changeSelectedPriorities',
       'clearSelectedTasks',
+      'loadAssets',
       'postCustomAction',
       'setLastTaskPreview',
       'subscribeToTask',
@@ -1454,6 +1538,18 @@ export default {
       } else {
         this.availableTaskStatuses = this.taskStatusForCurrentUser
       }
+    },
+
+    removeTag(tag) {
+      // TODO: remove tag from concept
+    },
+
+    onSearchTagChange(query) {
+      // TODO: search in available tags
+    },
+
+    onSelectTag(tag) {
+      // TODO: link tag to concept
     }
   },
 
@@ -1708,4 +1804,79 @@ div.assignation {
   margin: auto;
   margin-top: 0.5em;
 }
+
+.tags {
+  display: inline-flex;
+  gap: 10px;
+  margin-left: 0;
+  height: 21px;
+
+  .tag {
+    display: inline- flex;
+    gap: 1em;
+    border: 1px solid $light-green;
+
+    .action {
+      background: $light-grey;
+      border-radius: 50%;
+      color: white;
+      cursor: pointer;
+      display: none;
+      height: 14px;
+      width: 14px;
+      line-height: 8px;
+
+      &:hover {
+        background: $dark-grey-lighter;
+      }
+    }
+
+    &:hover {
+      transform: scale(1.1);
+
+      .action {
+        display: inline-block;
+      }
+    }
+  }
+}
+
+.concept-tags {
+  overflow-y: auto;
+  padding: 1em;
+  background: $white;
+  border: 1px solid $white-grey;
+  box-shadow: 0 0 6px #e0e0e0;
+  border-radius: 1em;
+
+  .subtitle {
+    margin-top: 0;
+    border-bottom: 0;
+  }
+
+  .tag-types {
+    list-style: none;
+    margin-left: 0;
+  }
+
+  .tag-type {
+    .subtitle {
+      text-transform: uppercase;
+      color: $grey;
+      border-bottom: 1px solid $light-grey;
+      font-size: 1.2em;
+      margin-top: 1em;
+      margin-bottom: 1em;
+    }
+
+    .tag {
+      border-color: $light-grey;
+      cursor: pointer;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+}
 </style>
diff --git a/src/components/widgets/SearchQueryList.vue b/src/components/widgets/SearchQueryList.vue
index 002071df34..0c042c6d60 100644
--- a/src/components/widgets/SearchQueryList.vue
+++ b/src/components/widgets/SearchQueryList.vue
@@ -87,9 +87,7 @@
       @click="changeSearch(searchQuery)"
       v-for="searchQuery in userFilters"
     >
-      <span>
-        {{ searchQuery.name }}
-      </span>
+      {{ searchQuery.name }}
       <button class="edit" @click.stop="editSearch(searchQuery)">
         <edit2-icon size="0.6x" />
       </button>
diff --git a/src/locales/en.js b/src/locales/en.js
index fc2aa47de3..830214e6eb 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -146,6 +146,10 @@ export default {
       created_at: 'Creation date',
       updated_at: 'Update date',
       // last_comment_date: 'Last comment',
+    },
+    actions: {
+      title: 'Tags linked to Concept',
+      empty: 'No tags'
     }
   },
 

From c93c5652cbe9f864ba2d6f721cee849364f6e7df Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Fri, 8 Dec 2023 18:02:01 +0100
Subject: [PATCH 13/41] [concepts] list linked concepts in Asset view

---
 src/components/pages/Asset.vue | 97 ++++++++++++++++++++++++++++++++--
 src/locales/en.js              |  1 +
 2 files changed, 95 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/Asset.vue b/src/components/pages/Asset.vue
index 91fbeef32b..dae71d9c10 100644
--- a/src/components/pages/Asset.vue
+++ b/src/components/pages/Asset.vue
@@ -110,7 +110,7 @@
         <div class="flexrow">
           <combobox-styled
             class="section-combo flexrow-item"
-            :options="entityNavOptions"
+            :options="assetNavOptions"
             v-model="currentSection"
           />
           <span
@@ -190,7 +190,7 @@
             </div>
           </div>
           <table-info
-            :is-loading="castIn.isLoadin"
+            :is-loading="castIn.isLoading"
             :is-error="castIn.isError"
             v-else
           />
@@ -256,6 +256,46 @@
           </div>
         </div>
 
+        <div
+          class="concepts mt1"
+          v-show="currentSection === 'concept'"
+          v-if="currentAsset"
+        >
+          <combobox-styled
+            class="section-combo flexrow-item"
+            :options="conceptStatusOptions"
+            v-model="currentConceptStatus"
+          />
+          <div class="concept-list mt1">
+            <template v-if="concepts.length">
+              <router-link
+                class="concept-link"
+                :key="concept.id"
+                :to="conceptPath(concept)"
+                v-for="concept in concepts"
+              >
+                <entity-thumbnail
+                  class="entity-thumbnail"
+                  :entity="concept"
+                  :square="true"
+                  :empty-width="103"
+                  :empty-height="103"
+                  :with-link="false"
+                />
+                <div
+                  class="tag"
+                  :style="{ backgroundColor: concept.status?.color }"
+                >
+                  {{ concept.status?.short_name }}
+                </div>
+              </router-link>
+            </template>
+            <div v-else>
+              {{ $t('assets.no_concept') }}
+            </div>
+          </div>
+        </div>
+
         <div
           class="schedule mt1"
           v-if="scheduleItems[0].children.length > 0"
@@ -357,6 +397,7 @@ export default {
     return {
       currentAsset: null,
       currentTask: null,
+      currentConceptStatus: null,
       castIn: {
         isLoading: false,
         isError: false
@@ -486,6 +527,32 @@ export default {
         route.params.episode_id = this.currentEpisode.id
       }
       return route
+    },
+
+    assetNavOptions() {
+      return [{ label: 'Concept', value: 'concept' }].concat(
+        this.entityNavOptions
+      )
+    },
+
+    conceptStatusOptions() {
+      // TODO: link to data store
+      return [
+        { label: 'All', value: null },
+        { label: 'Neutral', value: 'neutral' },
+        { label: 'Done', value: 'done' },
+        { label: 'Rejected', value: 'rejected' }
+      ]
+    },
+
+    concepts() {
+      const concepts = this.currentAsset?.concepts
+
+      return !this.currentConceptStatus
+        ? concepts
+        : concepts.filter(
+            concept => concept.status === this.currentConceptStatus
+          )
     }
   },
 
@@ -564,6 +631,17 @@ export default {
       })
     },
 
+    conceptPath(concept) {
+      // TODO: add concept_id to the targeted route
+      return {
+        name: 'concepts',
+        params: {
+          production_id: this.currentProduction.id,
+          concept_id: concept.concept_id
+        }
+      }
+    },
+
     shotPath(shot) {
       return {
         name: shot.episode_id ? 'episode-shot' : 'shot',
@@ -701,12 +779,17 @@ h2.subtitle {
 }
 
 .asset-list,
-.shot-list {
+.shot-list,
+.concept-list {
   color: var(--text);
   display: flex;
   flex-wrap: wrap;
 }
 
+.concept-list {
+  gap: 10px;
+}
+
 .asset-link,
 .shot-link {
   color: inherit;
@@ -727,6 +810,14 @@ h2.subtitle {
   word-wrap: break-word;
 }
 
+.concept-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
 .field-label {
   font-weight: bold;
   width: 120px;
diff --git a/src/locales/en.js b/src/locales/en.js
index 830214e6eb..e1236d69ff 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -18,6 +18,7 @@ export default {
     new_assets: 'Create assets',
     new_success: 'Asset {name} successfully created.',
     no_cast_in: 'This asset is not cast in any shot.',
+    no_concept: 'No concepts linked to this assets.',
     number: 'asset | assets',
     restore_text: 'Are you sure you want to restore {name} from your archive?',
     restore_error: 'An error occurred while restoring this asset.',

From c22177396506c0a0f7174fe2c921f831aa613ef9 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 11 Dec 2023 10:23:01 +0100
Subject: [PATCH 14/41] [concepts] fix task status edition

---
 src/components/lists/TaskStatusList.vue       | 4 ++--
 src/components/modals/EditTaskStatusModal.vue | 6 +++---
 src/components/pages/Concepts.vue             | 2 +-
 src/locales/en.js                             | 2 +-
 src/store/api/taskstatus.js                   | 1 +
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/lists/TaskStatusList.vue b/src/components/lists/TaskStatusList.vue
index 49008da30e..e37034d6b5 100644
--- a/src/components/lists/TaskStatusList.vue
+++ b/src/components/lists/TaskStatusList.vue
@@ -29,7 +29,7 @@
               {{ $t('task_status.fields.is_feedback_request') }}
             </th>
             <th scope="col" class="is-concept">
-              {{ $t('task_status.fields.is_concept') }}
+              {{ $t('task_status.fields.for_concept') }}
             </th>
             <th scope="col" class="actions"></th>
           </tr>
@@ -55,7 +55,7 @@
               class="is-feedback-request"
               :value="entry.is_feedback_request"
             />
-            <boolean-cell class="is-concept" :value="entry.is_concept" />
+            <boolean-cell class="is-concept" :value="entry.for_concept" />
             <row-actions-cell
               :entry-id="entry.id"
               :hide-delete="entry.is_default === true"
diff --git a/src/components/modals/EditTaskStatusModal.vue b/src/components/modals/EditTaskStatusModal.vue
index 2ec82f6037..736f3dace9 100644
--- a/src/components/modals/EditTaskStatusModal.vue
+++ b/src/components/modals/EditTaskStatusModal.vue
@@ -70,9 +70,9 @@
             v-if="form.is_default === 'false'"
           />
           <boolean-field
-            :label="$t('task_status.fields.is_concept')"
+            :label="$t('task_status.fields.for_concept')"
             @enter="confirmClicked"
-            v-model="form.is_concept"
+            v-model="form.for_concept"
             v-if="form.is_default === 'false'"
           />
 
@@ -224,7 +224,7 @@ export default {
           is_feedback_request: String(
             this.taskStatusToEdit.is_feedback_request || false
           ),
-          is_concept: String(this.taskStatusToEdit.is_concept || false),
+          for_concept: String(this.taskStatusToEdit.for_concept || false),
           archived: String(this.taskStatusToEdit.archived || false)
         }
       }
diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 49389e989a..5d81dcc968 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -325,7 +325,7 @@ export default {
       }
       const conceptTaskStatusList = sortByName(
         Array.from(this.taskStatusMap.values()).filter(
-          status => status.is_concept
+          status => status.for_concept
         )
       )
       return [allStatusItem].concat(conceptTaskStatusList)
diff --git a/src/locales/en.js b/src/locales/en.js
index e1236d69ff..6fbd2455ec 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -1085,9 +1085,9 @@ export default {
     title: 'Task Status',
     fields: {
       color: 'Color',
+      for_concept: 'For concept',
       is_artist_allowed: 'Is artist allowed',
       is_client_allowed: 'Is client allowed',
-      is_concept: 'Is concept',
       is_done: 'Is done',
       is_feedback_request: 'Is feedback request',
       is_retake: 'Has retake value',
diff --git a/src/store/api/taskstatus.js b/src/store/api/taskstatus.js
index 0bc9f50a15..f1c6423baa 100644
--- a/src/store/api/taskstatus.js
+++ b/src/store/api/taskstatus.js
@@ -4,6 +4,7 @@ const sanitizeTaskStatus = taskStatus => {
   return {
     name: taskStatus.name,
     short_name: taskStatus.short_name,
+    for_concept: Boolean(taskStatus.for_concept === 'true'),
     is_default: Boolean(taskStatus.is_default === 'true'),
     is_done: Boolean(taskStatus.is_done === 'true'),
     is_retake: Boolean(taskStatus.is_retake === 'true'),

From 71c6c5e36529ee5afaa18b69b6e1614da2a04f4a Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 11 Dec 2023 17:44:40 +0100
Subject: [PATCH 15/41] [concepts] fix UI for the new API data

---
 src/components/modals/EditCommentModal.vue | 21 +++--
 src/components/pages/Concepts.vue          | 81 +++++++++++--------
 src/components/previews/PreviewPlayer.vue  |  9 ++-
 src/components/sides/TaskInfo.vue          | 16 +++-
 src/components/tops/ActionPanel.vue        | 21 +++--
 src/locales/en.js                          |  3 +-
 src/store/api/concepts.js                  |  9 ++-
 src/store/modules/concepts.js              | 93 +++++++++++++++++-----
 src/store/modules/user.js                  | 29 -------
 9 files changed, 180 insertions(+), 102 deletions(-)

diff --git a/src/components/modals/EditCommentModal.vue b/src/components/modals/EditCommentModal.vue
index ffa0672aeb..205c90aa58 100644
--- a/src/components/modals/EditCommentModal.vue
+++ b/src/components/modals/EditCommentModal.vue
@@ -14,9 +14,9 @@
         </h1>
 
         <form @submit.prevent>
-          <combo-box-status
+          <combobox-status
             :label="$t('task_status.title')"
-            :task-status-list="taskStatusForCurrentUser"
+            :task-status-list="taskStatuses"
             v-model="form.task_status_id"
           />
 
@@ -157,7 +157,7 @@ import { XIcon } from 'vue-feather-icons'
 
 import AtTa from 'vue-at/dist/vue-at-textarea'
 import Checklist from '@/components/widgets/Checklist'
-import ComboBoxStatus from '@/components/widgets/ComboboxStatus.vue'
+import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
 import FileUpload from '@/components/widgets/FileUpload'
 import ModalFooter from '@/components/modals/ModalFooter'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar'
@@ -168,7 +168,7 @@ export default {
   components: {
     AtTa,
     Checklist,
-    ComboBoxStatus,
+    ComboboxStatus,
     FileUpload,
     ModalFooter,
     PeopleAvatar,
@@ -228,7 +228,18 @@ export default {
       'isCurrentUserClient',
       'productionDepartmentIds',
       'taskStatusForCurrentUser'
-    ])
+    ]),
+
+    taskStatuses() {
+      return this.taskStatusForCurrentUser.filter(
+        status => Boolean(status.for_concept) === this.isConceptTask
+      )
+    },
+
+    isConceptTask() {
+      // FIXME: write correct logic
+      return this.$route.path.includes('concept')
+    }
   },
 
   methods: {
diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 5d81dcc968..a7f67cc251 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -31,6 +31,7 @@
               :label="$t('concepts.fields.entity_type')"
               :options="entityTypeOptions"
               v-model="filters.entityType"
+              disabled
             />
             <combobox
               class="right"
@@ -52,14 +53,12 @@
         <h2 class="mt0">
           {{ $t('concepts.title') }} ({{ filteredConcepts?.length || 0 }})
         </h2>
-
         <table-info
           :is-loading="loading.loadingConcepts"
           :is-error="errors.loadingConcepts"
           v-if="loading.loadingConcepts || errors.loadingConcepts"
         />
-
-        <div v-else>
+        <div class="concept-list pb1" v-else-if="filteredConcepts?.length">
           <ul class="items">
             <li
               class="item"
@@ -91,15 +90,15 @@
                     {{ tag.name }}
                   </li>
                 </ul>
-                <div class="status">
+                <div class="status" v-if="hasTask(concept)">
                   <span
                     class="tag"
                     :style="{
-                      backgroundColor: taskStatusMap?.get(concept.status).color,
+                      backgroundColor: getTaskStatus(concept).color,
                       color: 'white'
                     }"
                   >
-                    {{ taskStatusMap?.get(concept.status).short_name }}
+                    {{ getTaskStatus(concept).short_name }}
                   </span>
                   <div class="assignees">
                     <people-avatar
@@ -115,7 +114,10 @@
             </li>
           </ul>
         </div>
-        <footer class="footer">
+        <div v-else>
+          {{ $t('concepts.empty') }}
+        </div>
+        <footer class="footer mt2">
           <button-simple
             :disabled="loading.loadingConcepts"
             :text="$t('concepts.add_new_concept')"
@@ -196,7 +198,7 @@ export default {
         taskStatusId: null,
         assignee: null,
         entityType: null,
-        sortBy: 'created_at'
+        sortBy: 'last_comment_date'
       },
       form: {
         file: null
@@ -251,7 +253,7 @@ export default {
     },
 
     currentTask() {
-      return this.currentConcept?.tasks[0]
+      return this.currentConcept?.tasks?.[0]
     },
 
     currentConcept() {
@@ -275,12 +277,7 @@ export default {
     },
 
     sortByOptions() {
-      // FIXME: sorting options to define
-      return [
-        'created_at',
-        'updated_at'
-        //'last_comment_date'
-      ].map(name => ({
+      return ['created_at', 'updated_at', 'last_comment_date'].map(name => ({
         label: name,
         value: name
       }))
@@ -288,28 +285,27 @@ export default {
 
     filteredConcepts() {
       let concepts = [...this.displayedConcepts]
+
       if (this.filters.taskStatusId) {
         concepts = concepts.filter(
-          concept => concept.status === this.filters.taskStatusId
+          concept =>
+            concept.tasks[0].task_status_id === this.filters.taskStatusId
         )
       }
       if (this.filters.assignee) {
         concepts = concepts.filter(concept =>
-          concept.tasks[0].assignees?.includes(this.filters.assignee.id)
+          concept.tasks[0].assignees.includes(this.filters.assignee.id)
         )
       }
       if (this.filters.entityType) {
         concepts = concepts.filter(concept =>
-          concept.entities?.some(
+          concept.tags?.some(
             // FIXME: condition related to many-to-many relationship
             entity => entity.type === this.filters.entityType
           )
         )
       }
-
-      return concepts.sort(
-        firstBy(this.filters.sortBy, -1).thenBy('created_at')
-      )
+      return concepts.sort(firstBy(this.filters.sortBy, -1))
     },
 
     searchField() {
@@ -389,6 +385,14 @@ export default {
       }
     },
 
+    getTaskStatus(concept) {
+      return this.taskStatusMap.get(concept.tasks[0].task_status_id)
+    },
+
+    hasTask(concept) {
+      return concept.tasks?.length
+    },
+
     isSelected(concept) {
       return this.selectedConcepts.has(concept.id)
     },
@@ -428,9 +432,9 @@ export default {
 
     async confirmAddConceptModal(forms) {
       this.loading.addingConcept = true
-      const file = forms[0].get('file')
+      const form = forms[0]
       try {
-        await this.newConcept({ file })
+        await this.newConcept({ form })
         this.closeAddConceptModal()
       } catch (err) {
         console.error(err)
@@ -441,7 +445,13 @@ export default {
     }
   },
 
-  watch: {},
+  watch: {
+    currentProduction() {
+      this.clearSelectedConcepts()
+      this.clearSelectedTasks()
+      this.refreshConcepts()
+    }
+  },
 
   metaInfo() {
     return {
@@ -471,6 +481,10 @@ export default {
   }
 }
 
+.concept-list {
+  overflow-x: auto;
+}
+
 .items {
   cursor: pointer;
   display: flex;
@@ -478,6 +492,7 @@ export default {
   gap: 20px;
   list-style: none;
   margin: 0;
+  width: 100vw;
 
   .item {
     width: 300px;
@@ -492,6 +507,7 @@ export default {
     &.selected-item {
       background-color: var(--background-selected);
     }
+
     &:hover {
       background-color: var(--background-hover);
     }
@@ -503,12 +519,10 @@ export default {
       row-gap: 10px;
       padding: 0.3em 1em;
       margin: 0.3em 0;
-      // color: var(--text-strong);
-      // font-weight: 500;
-      // text-transform: uppercase;
     }
 
     .tags {
+      cursor: pointer;
       display: inline-flex;
       gap: 10px;
       margin-left: 0;
@@ -519,6 +533,11 @@ export default {
       }
     }
 
+    .tag {
+      font-weight: 500;
+      letter-spacing: 1px;
+    }
+
     .status {
       display: flex;
       justify-content: space-between;
@@ -533,11 +552,6 @@ export default {
         gap: 5px;
       }
     }
-
-    .tag {
-      font-weight: 500;
-      letter-spacing: 1px;
-    }
   }
 }
 
@@ -547,6 +561,5 @@ export default {
   display: flex;
   justify-content: center;
   padding: 3em;
-  margin-top: 3em;
 }
 </style>
diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
index 61d591d4ac..1457ffe3b1 100644
--- a/src/components/previews/PreviewPlayer.vue
+++ b/src/components/previews/PreviewPlayer.vue
@@ -100,6 +100,7 @@
           :silent="isCommentsHidden"
           :current-frame="currentFrame"
           :current-parent-preview="currentPreview"
+          :entity-type="entityType"
           @comment-added="$emit('comment-added')"
           @time-code-clicked="timeCodeClicked"
           v-show="!isCommentsHidden"
@@ -488,7 +489,7 @@
       </div>
     </div>
 
-    <div class="flexrow" v-if="isConcept">
+    <div class="flexrow" v-if="isConcept && currentConcept.tags?.length">
       <ul class="tags">
         <li class="tag" :key="tag.id" v-for="tag in currentConcept.tags">
           {{ tag.name }}
@@ -619,6 +620,9 @@ export default {
     extraWide: {
       type: Boolean,
       default: false
+    },
+    entityType: {
+      type: String
     }
   },
 
@@ -821,8 +825,7 @@ export default {
     },
 
     isConcept() {
-      // FIXME: write correct logic
-      return this.$route.path.includes('concept')
+      return this.entityType === 'Concept'
     },
 
     isPicture() {
diff --git a/src/components/sides/TaskInfo.vue b/src/components/sides/TaskInfo.vue
index 836b45df6e..1cba534713 100644
--- a/src/components/sides/TaskInfo.vue
+++ b/src/components/sides/TaskInfo.vue
@@ -45,12 +45,12 @@
 
       <div v-else-if="task">
         <div class="pa1 pb0">
-          <div class="flexrow header-title">
+          <div class="flexrow header-title" v-if="!isConceptTask">
             <task-type-name
               class="flexrow-item task-type"
               :task-type="currentTaskType"
               :production-id="currentProduction.id"
-              v-if="currentTaskType && !isConceptTask"
+              v-if="currentTaskType"
             />
             <div class="title flexrow-item filler">
               <router-link :to="taskEntityPath">
@@ -91,6 +91,7 @@
                 <template v-if="taskPreviews && taskPreviews.length > 0">
                   <preview-player
                     :entity-preview-files="taskEntityPreviews"
+                    :entity-type="entityType"
                     :extra-wide="isExtraWide"
                     :is-assigned="isAssigned"
                     :last-preview-files="taskPreviews"
@@ -128,7 +129,7 @@
                   :user="user"
                   :team="currentTeam"
                   :task="task"
-                  :task-status="getTaskStatusForCurrentUser(task.project_id)"
+                  :task-status="taskStatuses"
                   :light="true"
                   :is-loading="loading.addComment"
                   :previewForms="previewForms"
@@ -646,6 +647,15 @@ export default {
       return `/api/movies/originals/preview-files/${previewId}.mp4`
     },
 
+    taskStatuses() {
+      const taskStatuses = this.getTaskStatusForCurrentUser(
+        this.task.project_id
+      )
+      return taskStatuses.filter(
+        status => Boolean(status.for_concept) === this.isConceptTask
+      )
+    },
+
     taskTypeStyle() {
       return getTaskTypeStyle(this.task)
     },
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 81cc058dc6..6fecfb32a7 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -1053,6 +1053,7 @@ export default {
     },
 
     isCurrentViewConcept() {
+      // FIXME: write correct logic
       return this.$route.path.includes('concept')
     },
 
@@ -1520,9 +1521,11 @@ export default {
       }
     },
 
-    setAvailableStatus() {
-      if (this.selectedTasks.size === 0) this.availableTaskStatuses = []
-      else if (this.isCurrentViewTodos) {
+    setAvailableStatuses() {
+      let availableTaskStatuses
+      if (this.selectedTasks.size === 0) {
+        availableTaskStatuses = []
+      } else if (this.isCurrentViewTodos) {
         const productions = new Map()
         this.selectedTasks.forEach(task => {
           const project = this.productionMap.get(task.project_id)
@@ -1532,12 +1535,16 @@ export default {
           p => p.task_statuses
         )
         const availableStatus = new Set(intersection(statusLists))
-        this.availableTaskStatuses = this.taskStatusForCurrentUser.filter(
-          status => availableStatus.has(status.id)
+        availableTaskStatuses = this.taskStatusForCurrentUser.filter(status =>
+          availableStatus.has(status.id)
         )
       } else {
-        this.availableTaskStatuses = this.taskStatusForCurrentUser
+        availableTaskStatuses = this.taskStatusForCurrentUser
       }
+      availableTaskStatuses = availableTaskStatuses.filter(
+        status => Boolean(status.for_concept) === this.isCurrentViewConcept
+      )
+      this.availableTaskStatuses = availableTaskStatuses
     },
 
     removeTag(tag) {
@@ -1583,7 +1590,7 @@ export default {
       if (this.nbSelectedTasks > 0) {
         let isShotSelected = false
         let isAssetSelected = false
-        this.setAvailableStatus()
+        this.setAvailableStatuses()
         this.selectedTaskIds.forEach(taskId => {
           const task = this.selectedTasks.get(taskId)
           if (task && task.sequence_name) {
diff --git a/src/locales/en.js b/src/locales/en.js
index 6fbd2455ec..c2153bd8c3 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -140,13 +140,14 @@ export default {
     add_concept: 'Add file for a new concept revision',
     add_concept_error: 'An error occurred while adding concept.',
     delete_for_selection: 'Delete the selected concept | Delete the {nbSelectedConcepts} selected concepts',
+    empty: 'There are no concepts',
     multiple_delete_error: 'An error occurred while deleting a concept. There is probably some data linked to a concept. Are you sure there is no task linked to a selected concept?',
     title: 'Concepts',
     fields: {
       entity_type: 'Entity type',
       created_at: 'Creation date',
       updated_at: 'Update date',
-      // last_comment_date: 'Last comment',
+      last_comment_date: 'Last comment',
     },
     actions: {
       title: 'Tags linked to Concept',
diff --git a/src/store/api/concepts.js b/src/store/api/concepts.js
index 7f6bf4da22..d6a88e0433 100644
--- a/src/store/api/concepts.js
+++ b/src/store/api/concepts.js
@@ -12,7 +12,14 @@ export default {
   },
 
   newConcept(concept) {
-    return client.ppost('/api/data/concepts/', concept)
+    const data = {
+      name: concept.name,
+      description: concept.description
+    }
+    return client.ppost(
+      `/api/data/projects/${concept.project_id}/concepts`,
+      data
+    )
   },
 
   updateConcept(concept) {
diff --git a/src/store/modules/concepts.js b/src/store/modules/concepts.js
index 40300975b0..6caa1988bb 100644
--- a/src/store/modules/concepts.js
+++ b/src/store/modules/concepts.js
@@ -1,6 +1,6 @@
 import async from 'async'
+
 import conceptsApi from '@/store/api/concepts'
-import tasksApi from '@/store/api/tasks'
 
 import {
   LOAD_CONCEPTS_START,
@@ -13,6 +13,29 @@ import {
   RESET_ALL
 } from '@/store/mutation-types'
 
+const helpers = {
+  populateTask(task, concept) {
+    Object.assign(task, {
+      project_id: concept.project_id
+    })
+    return task
+  },
+
+  populateConcept(concept, personMap) {
+    concept.full_name = 'Concept'
+    concept.last_comment_date = concept.tasks[0].last_comment_date
+    concept.tasks.forEach(task => {
+      helpers.populateTask(task, concept)
+      // Sort assignees by name
+      if (task.assignees.length > 1) {
+        task.assignees = task.assignees.sort((a, b) =>
+          personMap.get(a).name.localeCompare(personMap.get(b).name)
+        )
+      }
+    })
+  }
+}
+
 const initialState = {
   concepts: [],
   conceptMap: new Map(),
@@ -34,12 +57,15 @@ const getters = {
 }
 
 const actions = {
-  async loadConcepts({ commit }) {
+  async loadConcepts({ commit, rootGetters }) {
     commit(LOAD_CONCEPTS_START)
     try {
-      const concepts = await conceptsApi.getConcepts()
-      commit(LOAD_CONCEPTS_END, concepts)
+      const personMap = rootGetters.personMap
+      const production = rootGetters.currentProduction
+      const concepts = await conceptsApi.getConcepts(production)
+      commit(LOAD_CONCEPTS_END, { concepts, personMap })
     } catch (err) {
+      console.error(err)
       commit(LOAD_CONCEPTS_ERROR)
     }
   },
@@ -53,18 +79,46 @@ const actions = {
     }
   },
 
-  async newConcept({ commit }, { file, ...data }) {
-    let concept = await conceptsApi.newConcept(data)
-    const preview = concept.tasks[0].previews[0]
-    const { request, promise } = tasksApi.uploadPreview(preview.id, file)
-    request.on('progress', e => {
-      // commit(SET_UPLOAD_PROGRESS, {
-      //   previewId: preview.id,
-      //   percent: e.percent,
-      //   name: file.name
-      // })
+  async newConcept({ commit, dispatch, rootGetters }, { form, ...data }) {
+    const personMap = rootGetters.personMap
+    const production = rootGetters.currentProduction
+
+    // Create Entity
+    data.name = crypto.randomUUID() // unique and mandatory field
+    data.project_id = production.id
+    const concept = await conceptsApi.newConcept(data)
+
+    // Create Task
+    const conceptTaskType = rootGetters.taskTypes.find(
+      taskType => taskType.for_entity === 'Concept'
+    )
+    const task = await dispatch('createTask', {
+      entityId: concept.id,
+      projectId: production.id,
+      taskTypeId: conceptTaskType.id,
+      type: 'concepts'
+    })
+
+    // Create Comment with Preview
+    const { preview } = await dispatch('commentTaskWithPreview', {
+      taskId: task.id,
+      taskStatusId: task.task_status_id,
+      form
+    })
+    await dispatch('setLastTaskPreview', task.id)
+
+    // Assign Task to current User
+    const currentUser = rootGetters.user.id
+    await dispatch('assignSelectedTasks', {
+      personId: currentUser,
+      taskIds: [task.id]
     })
-    concept = await promise
+    task.assignees = [currentUser]
+
+    concept.tasks = [task]
+    concept.preview_file_id = preview.id
+    helpers.populateConcept(concept, personMap)
+
     commit(EDIT_CONCEPT_END, concept)
     return concept
   },
@@ -129,7 +183,10 @@ const mutations = {
     state.displayedConcepts = []
   },
 
-  [LOAD_CONCEPTS_END](state, concepts) {
+  [LOAD_CONCEPTS_END](state, { concepts, personMap }) {
+    concepts.forEach(concept => {
+      helpers.populateConcept(concept, personMap)
+    })
     state.concepts = concepts
     state.conceptMap = new Map(
       state.concepts.map(concept => [concept.id, concept])
@@ -139,17 +196,15 @@ const mutations = {
 
   [EDIT_CONCEPT_END](state, newConcept) {
     const concept = state.conceptMap.get(newConcept.id)
-
     if (concept?.id) {
       Object.assign(concept, newConcept)
       state.conceptMap.delete(concept.id)
       state.conceptMap.set(concept.id, concept)
-      // state.concepts = sortByName(state.concepts)
     } else {
       state.concepts.push(newConcept)
       state.conceptMap.set(newConcept.id, newConcept)
-      // state.concepts = sortByName(state.concepts)
     }
+    state.conceptMap = new Map(state.conceptMap) // for reactivity
   },
 
   [DELETE_CONCEPT_END](state, concept) {
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 9f879d1c98..7c29e753d1 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -386,35 +386,6 @@ const actions = {
 
   loadContext({ commit, rootGetters }) {
     return peopleApi.getContext().then(context => {
-      // FIXME: remove mock data
-      context.task_status.push(
-        {
-          id: 'concept-neutral',
-          name: 'Neutral',
-          archived: false,
-          short_name: 'neutral',
-          color: '#CCCCCC',
-          // is_default: true,
-          is_concept: true
-        },
-        {
-          id: 'concept-approved',
-          name: 'Approved',
-          archived: false,
-          short_name: 'approved',
-          color: '#66BB6A',
-          is_concept: true
-        },
-        {
-          id: 'concept-rejected',
-          name: 'Rejected',
-          archived: false,
-          short_name: 'rejected',
-          color: '#E81123',
-          is_concept: true
-        }
-      )
-
       commit(LOAD_USER_FILTERS_END, context.search_filters)
       commit(LOAD_USER_FILTER_GROUPS_END, context.search_filter_groups)
       commit(LOAD_PRODUCTION_STATUS_END, context.project_status)

From 1aa1d40ba6280646de1eebb5adfd0ab5b73536bf Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 12 Dec 2023 11:24:27 +0100
Subject: [PATCH 16/41] [concepts] fix UI for the new API data

---
 src/components/pages/Asset.vue      |  6 ++++--
 src/components/pages/Concepts.vue   | 24 ++++++++++++++++--------
 src/components/tops/ActionPanel.vue | 10 +++++++---
 src/locales/en.js                   |  2 +-
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/Asset.vue b/src/components/pages/Asset.vue
index dae71d9c10..515784ce4e 100644
--- a/src/components/pages/Asset.vue
+++ b/src/components/pages/Asset.vue
@@ -258,7 +258,7 @@
 
         <div
           class="concepts mt1"
-          v-show="currentSection === 'concept'"
+          v-show="currentSection === 'concepts'"
           v-if="currentAsset"
         >
           <combobox-styled
@@ -530,7 +530,7 @@ export default {
     },
 
     assetNavOptions() {
-      return [{ label: 'Concept', value: 'concept' }].concat(
+      return [{ label: 'Concepts', value: 'concepts' }].concat(
         this.entityNavOptions
       )
     },
@@ -548,6 +548,8 @@ export default {
     concepts() {
       const concepts = this.currentAsset?.concepts
 
+      if (!concepts) return []
+
       return !this.currentConceptStatus
         ? concepts
         : concepts.filter(
diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index a7f67cc251..89d7e1540a 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -198,7 +198,7 @@ export default {
         taskStatusId: null,
         assignee: null,
         entityType: null,
-        sortBy: 'last_comment_date'
+        sortBy: 'created_at'
       },
       form: {
         file: null
@@ -221,7 +221,6 @@ export default {
 
   mounted() {
     this.setSearch(this.$route.query.search)
-    this.refreshConcepts()
     this.searchField.focus()
   },
 
@@ -277,7 +276,7 @@ export default {
     },
 
     sortByOptions() {
-      return ['created_at', 'updated_at', 'last_comment_date'].map(name => ({
+      return ['created_at', 'last_comment_date'].map(name => ({
         label: name,
         value: name
       }))
@@ -305,7 +304,9 @@ export default {
           )
         )
       }
-      return concepts.sort(firstBy(this.filters.sortBy, -1))
+      return concepts.sort(
+        firstBy(this.filters.sortBy, -1).thenBy('created_at')
+      )
     },
 
     searchField() {
@@ -442,17 +443,24 @@ export default {
       } finally {
         this.loading.addingConcept = false
       }
-    }
-  },
+    },
 
-  watch: {
-    currentProduction() {
+    reset() {
       this.clearSelectedConcepts()
       this.clearSelectedTasks()
       this.refreshConcepts()
     }
   },
 
+  watch: {
+    currentProduction: {
+      immediate: true,
+      handler() {
+        this.reset()
+      }
+    }
+  },
+
   metaInfo() {
     return {
       title: `${this.$t('concepts.title')} - Kitsu`
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 6fecfb32a7..c7b63c0804 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -524,11 +524,15 @@
         <div class="flexrow-item is-wide" v-if="selectedBar === 'tag-concepts'">
           <h3 class="mb05">{{ $t('concepts.actions.title') }}</h3>
           <ul class="tags mb05">
-            <li v-if="!currentConcept?.tags.length">
+            <li v-if="!currentConcept.tagged_entities?.length">
               <em>{{ $t('concepts.actions.empty') }}</em>
             </li>
             <template v-else>
-              <li class="tag" v-for="tag in currentConcept.tags" :key="tag.id">
+              <li
+                class="tag"
+                v-for="tag in currentConcept.tagged_entities"
+                :key="tag.id"
+              >
                 {{ tag.name }}
                 <button class="action" @click="removeTag(tag)">
                   <trash2-icon size="0.6x" />
@@ -748,7 +752,7 @@
                   class="tag"
                   :key="tag.id"
                   v-for="tag in tagGroup.tags"
-                  @click="onSelectTag"
+                  @click="onSelectTag(tag)"
                 >
                   {{ tag.name }}
                 </li>
diff --git a/src/locales/en.js b/src/locales/en.js
index c2153bd8c3..26dbf28f0f 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -18,7 +18,7 @@ export default {
     new_assets: 'Create assets',
     new_success: 'Asset {name} successfully created.',
     no_cast_in: 'This asset is not cast in any shot.',
-    no_concept: 'No concepts linked to this assets.',
+    no_concept: 'No concepts linked to this assets',
     number: 'asset | assets',
     restore_text: 'Are you sure you want to restore {name} from your archive?',
     restore_error: 'An error occurred while restoring this asset.',

From dd6b04877b52f4817d64994cc5f2bb2631d1bc0f Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 12 Dec 2023 14:01:51 +0100
Subject: [PATCH 17/41] [concepts] fix loading of concepts

---
 src/components/pages/Concepts.vue   | 45 ++++++++++++++++++++++-------
 src/components/tops/ActionPanel.vue |  6 ----
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 89d7e1540a..038debea27 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -83,11 +83,13 @@
                 <ul class="tags">
                   <li
                     class="tag"
-                    v-for="tag in concept.tags"
-                    :key="tag.id"
-                    @click.stop="onSelectedTag"
+                    v-for="entity in getEntities(concept.tagged_entities)"
+                    :key="entity.id"
+                    @click.stop
                   >
-                    {{ tag.name }}
+                    <router-link :to="entityPath(entity, 'asset')">
+                      {{ entity.name }}
+                    </router-link>
                   </li>
                 </ul>
                 <div class="status" v-if="hasTask(concept)">
@@ -149,6 +151,7 @@
 import { mapGetters, mapActions } from 'vuex'
 import { firstBy } from 'thenby'
 
+import { getEntityPath } from '@/lib/path'
 import { sortByName } from '@/lib/sorting'
 
 import { searchMixin } from '@/components/mixins/search'
@@ -187,7 +190,7 @@ export default {
     return {
       loading: {
         addingConcept: false,
-        loadingConcepts: true,
+        loadingConcepts: false,
         savingSearch: false
       },
       errors: {
@@ -226,9 +229,11 @@ export default {
 
   computed: {
     ...mapGetters([
+      'assetMap',
       'currentProduction',
       'displayedConcepts',
       'isDarkTheme',
+      'isTVShow',
       'personMap',
       'selectedConcepts',
       'taskStatusMap'
@@ -335,8 +340,10 @@ export default {
       'addSelectedTask',
       'clearSelectedConcepts',
       'clearSelectedTasks',
+      'loadAssets',
       'loadConcepts',
-      'newConcept'
+      'newConcept',
+      'setCurrentEpisode'
     ]),
 
     // TODO: module actions
@@ -377,6 +384,8 @@ export default {
     async refreshConcepts() {
       this.loading.loadingConcepts = true
       try {
+        this.setCurrentEpisode('all') // mandatory to load all assets
+        await this.loadAssets(true)
         await this.loadConcepts()
       } catch (err) {
         console.error(err)
@@ -386,6 +395,20 @@ export default {
       }
     },
 
+    entityPath(entity, section) {
+      const episodeId = this.isTVShow ? entity.episode_id || 'main' : null
+      return getEntityPath(
+        entity.id,
+        this.currentProduction.id,
+        section,
+        episodeId
+      )
+    },
+
+    getEntities(entityIds) {
+      return entityIds.map(id => this.assetMap.get(id)).filter(Boolean)
+    },
+
     getTaskStatus(concept) {
       return this.taskStatusMap.get(concept.tasks[0].task_status_id)
     },
@@ -427,10 +450,6 @@ export default {
       this.modals.addConcept = false
     },
 
-    onSelectedTag(tag) {
-      // TODO: select ta action ???
-    },
-
     async confirmAddConceptModal(forms) {
       this.loading.addingConcept = true
       const form = forms[0]
@@ -456,7 +475,11 @@ export default {
     currentProduction: {
       immediate: true,
       handler() {
-        this.reset()
+        // HACK: the store init a wrong current production by default
+        const productionId = this.$route.params.production_id
+        if (this.currentProduction.id === productionId) {
+          this.reset()
+        }
       }
     }
   },
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index c7b63c0804..be83ba87ca 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -899,12 +899,6 @@ export default {
   mounted() {
     this.customAction = this.defaultCustomAction
     this.setCurrentTeam()
-
-    // FIXME: hack to init available tags
-    this.loading.tags = true
-    this.loadAssets(true).finally(() => {
-      this.loading.tags = false
-    })
   },
 
   beforeDestroy() {

From e6a65debdaed65e0016b5db65836352d8d6d1dbb Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 12 Dec 2023 15:19:48 +0100
Subject: [PATCH 18/41] [concepts] add concept links

---
 src/components/pages/Concepts.vue         |  15 ++-
 src/components/previews/PreviewPlayer.vue |  41 +++++++-
 src/components/tops/ActionPanel.vue       | 108 ++++++++++++++--------
 src/locales/en.js                         |   5 +-
 src/store/api/concepts.js                 |   2 +-
 src/store/modules/concepts.js             |   2 +-
 6 files changed, 121 insertions(+), 52 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 038debea27..deb2fe8296 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -526,6 +526,8 @@ export default {
   width: 100vw;
 
   .item {
+    display: flex;
+    flex-direction: column;
     width: 300px;
     background-color: var(--background);
     border-radius: 1em;
@@ -550,17 +552,22 @@ export default {
       row-gap: 10px;
       padding: 0.3em 1em;
       margin: 0.3em 0;
+      flex: 1;
     }
 
     .tags {
-      cursor: pointer;
       display: inline-flex;
+      flex-wrap: wrap;
       gap: 10px;
       margin-left: 0;
-      height: 21px;
+      flex: 1;
+
+      .tag {
+        cursor: pointer;
 
-      .tag:hover {
-        transform: scale(1.1);
+        &:hover {
+          transform: scale(1.1);
+        }
       }
     }
 
diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
index 1457ffe3b1..11139e28d6 100644
--- a/src/components/previews/PreviewPlayer.vue
+++ b/src/components/previews/PreviewPlayer.vue
@@ -489,10 +489,12 @@
       </div>
     </div>
 
-    <div class="flexrow" v-if="isConcept && currentConcept.tags?.length">
+    <div class="flexrow" v-if="isConcept && conceptEntityLinks.length">
       <ul class="tags">
-        <li class="tag" :key="tag.id" v-for="tag in currentConcept.tags">
-          {{ tag.name }}
+        <li class="tag" :key="entity.id" v-for="entity in conceptEntityLinks">
+          <router-link :to="entityPath(entity, 'asset')">
+            {{ entity.name }}
+          </router-link>
         </li>
       </ul>
     </div>
@@ -536,6 +538,7 @@ import {
   roundToFrame,
   floorToFrame
 } from '@/lib/video'
+import { getEntityPath } from '@/lib/path'
 import localPreferences from '@/lib/preferences'
 
 import { annotationMixin } from '@/components/mixins/annotation'
@@ -724,6 +727,7 @@ export default {
 
   computed: {
     ...mapGetters([
+      'assetMap',
       'currentProduction',
       'isCurrentUserArtist',
       'organisation',
@@ -987,6 +991,10 @@ export default {
 
     currentConcept() {
       return this.selectedConcepts.values().next().value
+    },
+
+    conceptEntityLinks() {
+      return this.getEntities(this.currentConcept.tagged_entities)
     }
   },
 
@@ -1662,6 +1670,22 @@ export default {
       return files
     },
 
+    // Concepts
+
+    entityPath(entity, section) {
+      const episodeId = this.isTVShow ? entity.episode_id || 'main' : null
+      return getEntityPath(
+        entity.id,
+        this.currentProduction.id,
+        section,
+        episodeId
+      )
+    },
+
+    getEntities(entityIds) {
+      return entityIds.map(id => this.assetMap.get(id)).filter(Boolean)
+    },
+
     // Events
 
     onKeyDown(event) {
@@ -2308,12 +2332,21 @@ export default {
 }
 
 .tags {
-  display: flex;
+  display: inline-flex;
+  flex-wrap: wrap;
   gap: 10px;
   padding: 1rem;
   margin-left: 0;
   font-weight: 500;
   letter-spacing: 1px;
+
+  .tag {
+    cursor: pointer;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
 }
 
 #resize-annotation-canvas,
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index be83ba87ca..97a345d27e 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -101,15 +101,15 @@
           <div
             class="menu-item"
             :class="{
-              active: selectedBar === 'tag-concepts'
+              active: selectedBar === 'edit-concepts'
             }"
-            :title="$t('menu.tag_concepts')"
-            @click="selectBar('tag-concepts')"
+            :title="$t('menu.edit_concepts')"
+            @click="selectBar('edit-concepts')"
             v-if="
               isCurrentViewConcept && isCurrentUserManager && isTaskSelection
             "
           >
-            <tag-icon />
+            <link-icon />
           </div>
 
           <div
@@ -521,20 +521,23 @@
           </button>
         </div>
 
-        <div class="flexrow-item is-wide" v-if="selectedBar === 'tag-concepts'">
+        <div
+          class="flexrow-item is-wide"
+          v-if="selectedBar === 'edit-concepts'"
+        >
           <h3 class="mb05">{{ $t('concepts.actions.title') }}</h3>
           <ul class="tags mb05">
-            <li v-if="!currentConcept.tagged_entities?.length">
+            <li v-if="!conceptEntityLinks.length">
               <em>{{ $t('concepts.actions.empty') }}</em>
             </li>
             <template v-else>
               <li
                 class="tag"
-                v-for="tag in currentConcept.tagged_entities"
-                :key="tag.id"
+                v-for="entity in conceptEntityLinks"
+                :key="entity.id"
               >
-                {{ tag.name }}
-                <button class="action" @click="removeTag(tag)">
+                {{ entity.name }}
+                <button class="action" @click="onRemoveLink(entity)">
                   <trash2-icon size="0.6x" />
                 </button>
               </li>
@@ -722,13 +725,16 @@
       </div>
     </div>
 
-    <div class="flexrow-item is-wide pa1" v-if="selectedBar === 'tag-concepts'">
+    <div
+      class="flexrow-item is-wide pa1"
+      v-if="selectedBar === 'edit-concepts'"
+    >
       <div ref="asset-list" class="concept-tags">
         <h2 class="subtitle">
           {{ $t('breakdown.all_assets') }}
         </h2>
-        <div class="filters-area flexrow mb2" v-if="true">
-          <search-field ref="search-field" @change="onSearchTagChange" />
+        <div class="filters-area flexrow mb2">
+          <search-field ref="search-field" @change="onSearchAssetChange" />
           <button-simple
             class="flexrow-item"
             :title="$t('entities.build_filter.title')"
@@ -736,25 +742,25 @@
             @click="modals.isBuildFilterDisplayed = true"
           />
         </div>
-        <spinner v-if="loading.tags" />
+        <spinner v-if="loading.links" />
         <template v-else>
           <ul
-            class="tag-types"
-            :key="`tags-types-${index}`"
-            v-for="(tagGroup, index) in availableTagsByType"
+            class="link-types"
+            :key="`link-types-${index}`"
+            v-for="(linkGroup, index) in availableLinksByType"
           >
-            <li class="tag-type">
+            <li class="link-type">
               <h4 class="subtitle">
-                {{ tagGroup.type }}
+                {{ linkGroup.type }}
               </h4>
               <ul class="tags">
                 <li
                   class="tag"
-                  :key="tag.id"
-                  v-for="tag in tagGroup.tags"
-                  @click="onSelectTag(tag)"
+                  :key="link.id"
+                  v-for="link in linkGroup.links"
+                  @click="onSelectLink(link)"
                 >
-                  {{ tag.name }}
+                  {{ link.name }}
                 </li>
               </ul>
             </li>
@@ -786,8 +792,8 @@ import {
   EyeIcon,
   FilmIcon,
   ImageIcon,
+  LinkIcon,
   PlayCircleIcon,
-  TagIcon,
   TrashIcon,
   Trash2Icon,
   UserIcon
@@ -825,12 +831,12 @@ export default {
     EyeIcon,
     FilmIcon,
     ImageIcon,
+    LinkIcon,
     PeopleField,
     PlayCircleIcon,
     SearchField,
     Spinner,
     UserIcon,
-    TagIcon,
     TrashIcon,
     Trash2Icon,
     ViewPlaylistModal
@@ -882,7 +888,7 @@ export default {
         taskDeletion: false,
         setThumbnails: false,
         shotDeletion: false,
-        tags: false,
+        links: false,
         tasksSubscription: false
       },
       errors: {
@@ -958,6 +964,10 @@ export default {
       return this.selectedConcepts.values().next().value
     },
 
+    conceptEntityLinks() {
+      return this.getEntities(this.currentConcept.tagged_entities)
+    },
+
     defaultCustomAction() {
       if (this.customActions.length > 0) {
         return this.customActions[0]
@@ -1148,11 +1158,11 @@ export default {
       return prefix
     },
 
-    availableTagsByType() {
+    availableLinksByType() {
       const assetGroups = [...this.assetsByType]
       const result = assetGroups.map(assets => ({
         type: assets[0].asset_type_name,
-        tags: assets.map(asset => ({
+        links: assets.map(asset => ({
           id: asset.id,
           name: asset.name
         }))
@@ -1164,10 +1174,13 @@ export default {
   methods: {
     ...mapActions([
       'assignSelectedTasks',
+      'changeSelectedTaskStatus',
+      'changeSelectedPriorities',
       'clearSelectedAssets',
       'clearSelectedShots',
       'clearSelectedEdits',
       'clearSelectedConcepts',
+      'clearSelectedTasks',
       'createSelectedTasks',
       'deleteSelectedAssets',
       'deleteSelectedShots',
@@ -1175,9 +1188,7 @@ export default {
       'deleteSelectedEdits',
       'deleteSelectedEpisodes',
       'deleteSelectedConcepts',
-      'changeSelectedTaskStatus',
-      'changeSelectedPriorities',
-      'clearSelectedTasks',
+      'editConcept',
       'loadAssets',
       'postCustomAction',
       'setLastTaskPreview',
@@ -1187,6 +1198,10 @@ export default {
       'unsubscribeFromTask'
     ]),
 
+    getEntities(entityIds) {
+      return entityIds.map(id => this.assetMap.get(id)).filter(Boolean)
+    },
+
     confirmTaskStatusChange() {
       this.loading.changeStatus = true
       if (!this.taskStatusId) {
@@ -1545,16 +1560,28 @@ export default {
       this.availableTaskStatuses = availableTaskStatuses
     },
 
-    removeTag(tag) {
-      // TODO: remove tag from concept
+    onRemoveLink(link) {
+      const concept = {
+        id: this.currentConcept.id,
+        tagged_entities: this.currentConcept.tagged_entities.filter(
+          id => id !== link.id
+        )
+      }
+      this.editConcept(concept)
     },
 
-    onSearchTagChange(query) {
-      // TODO: search in available tags
+    onSearchAssetChange(query) {
+      // TODO: search in available links
     },
 
-    onSelectTag(tag) {
-      // TODO: link tag to concept
+    onSelectLink(link) {
+      const concept = {
+        id: this.currentConcept.id,
+        tagged_entities: [...this.currentConcept.tagged_entities].concat(
+          link.id
+        )
+      }
+      this.editConcept(concept)
     }
   },
 
@@ -1812,9 +1839,10 @@ div.assignation {
 
 .tags {
   display: inline-flex;
+  flex-wrap: wrap;
   gap: 10px;
   margin-left: 0;
-  height: 21px;
+  min-height: 21px;
 
   .tag {
     display: inline- flex;
@@ -1859,12 +1887,12 @@ div.assignation {
     border-bottom: 0;
   }
 
-  .tag-types {
+  .link-types {
     list-style: none;
     margin-left: 0;
   }
 
-  .tag-type {
+  .link-type {
     .subtitle {
       text-transform: uppercase;
       color: $grey;
diff --git a/src/locales/en.js b/src/locales/en.js
index 26dbf28f0f..0b05472480 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -150,8 +150,8 @@ export default {
       last_comment_date: 'Last comment',
     },
     actions: {
-      title: 'Tags linked to Concept',
-      empty: 'No tags'
+      title: 'Links to Concept',
+      empty: 'No links'
     }
   },
 
@@ -597,6 +597,7 @@ export default {
     delete_edits: 'Delete edits',
     delete_shots: 'Delete shots',
     delete_tasks: 'Delete tasks',
+    edit_concepts: "Edit concept links",
     generate_playlist: 'Generate a playlist',
     run_custom_action: 'Run custom action',
     set_estimations: 'Set estimations',
diff --git a/src/store/api/concepts.js b/src/store/api/concepts.js
index d6a88e0433..689f7f12f5 100644
--- a/src/store/api/concepts.js
+++ b/src/store/api/concepts.js
@@ -23,7 +23,7 @@ export default {
   },
 
   updateConcept(concept) {
-    return client.pput(`/api/data/concepts/${concept.id}`, concept)
+    return client.pput(`/api/data/entities/${concept.id}`, concept)
   },
 
   deleteConcept(concept) {
diff --git a/src/store/modules/concepts.js b/src/store/modules/concepts.js
index 6caa1988bb..7f16a7ba15 100644
--- a/src/store/modules/concepts.js
+++ b/src/store/modules/concepts.js
@@ -123,7 +123,7 @@ const actions = {
     return concept
   },
 
-  async saveConcept({ commit }, data) {
+  async editConcept({ commit }, data) {
     const concept = await conceptsApi.updateConcept(data)
     commit(EDIT_CONCEPT_END, concept)
     return concept

From f6f6c11965b5f284b3859b09fdea7425f0a7073b Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 12 Dec 2023 15:27:38 +0100
Subject: [PATCH 19/41] [concepts] fix typo

---
 src/locales/en.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locales/en.js b/src/locales/en.js
index 0b05472480..d109a650f9 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -18,7 +18,7 @@ export default {
     new_assets: 'Create assets',
     new_success: 'Asset {name} successfully created.',
     no_cast_in: 'This asset is not cast in any shot.',
-    no_concept: 'No concepts linked to this assets',
+    no_concept: 'No concepts linked to this asset',
     number: 'asset | assets',
     restore_text: 'Are you sure you want to restore {name} from your archive?',
     restore_error: 'An error occurred while restoring this asset.',

From f1b5899428518ff5bd99fd97f216eeb76231fdf3 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 12 Dec 2023 17:18:10 +0100
Subject: [PATCH 20/41] [concepts] allow multiple creation of concepts at once

---
 src/components/pages/Concepts.vue |  6 ++----
 src/components/pages/Task.vue     |  1 +
 src/components/sides/TaskInfo.vue |  1 +
 src/locales/en.js                 |  3 +--
 src/store/modules/concepts.js     | 18 ++++++++++++++----
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index deb2fe8296..d421d01446 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -135,7 +135,6 @@
       is-concept
       :is-error="errors.addingConcept"
       :is-loading="loading.addingConcept"
-      :is-multiple="false"
       message=""
       @cancel="closeAddConceptModal"
       @confirm="confirmAddConceptModal"
@@ -342,7 +341,7 @@ export default {
       'clearSelectedTasks',
       'loadAssets',
       'loadConcepts',
-      'newConcept',
+      'newConcepts',
       'setCurrentEpisode'
     ]),
 
@@ -452,9 +451,8 @@ export default {
 
     async confirmAddConceptModal(forms) {
       this.loading.addingConcept = true
-      const form = forms[0]
       try {
-        await this.newConcept({ form })
+        await this.newConcepts(forms)
         this.closeAddConceptModal()
       } catch (err) {
         console.error(err)
diff --git a/src/components/pages/Task.vue b/src/components/pages/Task.vue
index d43cdd409e..e0c402aed2 100644
--- a/src/components/pages/Task.vue
+++ b/src/components/pages/Task.vue
@@ -265,6 +265,7 @@
         :is-loading="loading.addExtraPreview"
         :is-error="errors.addExtraPreview"
         :form-data="addExtraPreviewFormData"
+        message=""
         :title="
           task
             ? `${task.entity_name} / ${taskTypeMap.get(task.task_type_id).name}`
diff --git a/src/components/sides/TaskInfo.vue b/src/components/sides/TaskInfo.vue
index 1cba534713..9f9193f664 100644
--- a/src/components/sides/TaskInfo.vue
+++ b/src/components/sides/TaskInfo.vue
@@ -215,6 +215,7 @@
           :is-loading="loading.addExtraPreview"
           :is-error="errors.addExtraPreview"
           :form-data="addExtraPreviewFormData"
+          message=""
           @cancel="onCloseExtraPreview"
           @confirm="createExtraPreview"
         />
diff --git a/src/locales/en.js b/src/locales/en.js
index d109a650f9..2c5514bdfb 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -137,7 +137,7 @@ export default {
 
   concepts: {
     add_new_concept: 'Add a new reference to concepts',
-    add_concept: 'Add file for a new concept revision',
+    add_concept: 'Add files for new concepts',
     add_concept_error: 'An error occurred while adding concept.',
     delete_for_selection: 'Delete the selected concept | Delete the {nbSelectedConcepts} selected concepts',
     empty: 'There are no concepts',
@@ -603,7 +603,6 @@ export default {
     set_estimations: 'Set estimations',
     set_thumbnails: 'Set thumbnails from last preview',
     subscribe: 'Subscribe to notifications',
-    tag_concepts: "Edit concept tags",
   },
 
   news: {
diff --git a/src/store/modules/concepts.js b/src/store/modules/concepts.js
index 7f16a7ba15..8e23e9e307 100644
--- a/src/store/modules/concepts.js
+++ b/src/store/modules/concepts.js
@@ -79,14 +79,24 @@ const actions = {
     }
   },
 
-  async newConcept({ commit, dispatch, rootGetters }, { form, ...data }) {
+  async newConcepts({ commit, dispatch, rootGetters }, forms) {
+    return Promise.all(
+      forms.map(form => {
+        return dispatch('newConcept', form)
+      })
+    )
+  },
+
+  async newConcept({ commit, dispatch, rootGetters }, form) {
     const personMap = rootGetters.personMap
     const production = rootGetters.currentProduction
 
     // Create Entity
-    data.name = crypto.randomUUID() // unique and mandatory field
-    data.project_id = production.id
-    const concept = await conceptsApi.newConcept(data)
+    const entity = {
+      name: crypto.randomUUID(), // unique and mandatory field
+      project_id: production.id
+    }
+    const concept = await conceptsApi.newConcept(entity)
 
     // Create Task
     const conceptTaskType = rootGetters.taskTypes.find(

From 64119e051d9f990f018d04913402b4a56d031d22 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Tue, 12 Dec 2023 17:31:58 +0100
Subject: [PATCH 21/41] [concepts] fix sorted by

---
 src/components/pages/Concepts.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index d421d01446..84a2b57189 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -280,7 +280,7 @@ export default {
     },
 
     sortByOptions() {
-      return ['created_at', 'last_comment_date'].map(name => ({
+      return ['created_at', 'updated_at', 'last_comment_date'].map(name => ({
         label: name,
         value: name
       }))
@@ -309,7 +309,7 @@ export default {
         )
       }
       return concepts.sort(
-        firstBy(this.filters.sortBy, -1).thenBy('created_at')
+        firstBy(this.filters.sortBy, -1).thenBy('created_at', -1)
       )
     },
 

From 2f3861f668c7957c0fc548aaaa071d4420e62deb Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Wed, 13 Dec 2023 12:02:30 +0100
Subject: [PATCH 22/41] [concepts] fix linked concepts in Asset page

---
 src/components/pages/Asset.vue | 41 ++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/Asset.vue b/src/components/pages/Asset.vue
index 515784ce4e..fd640786a3 100644
--- a/src/components/pages/Asset.vue
+++ b/src/components/pages/Asset.vue
@@ -267,12 +267,12 @@
             v-model="currentConceptStatus"
           />
           <div class="concept-list mt1">
-            <template v-if="concepts.length">
+            <template v-if="linkedConcepts.length">
               <router-link
                 class="concept-link"
                 :key="concept.id"
                 :to="conceptPath(concept)"
-                v-for="concept in concepts"
+                v-for="concept in linkedConcepts"
               >
                 <entity-thumbnail
                   class="entity-thumbnail"
@@ -282,12 +282,15 @@
                   :empty-height="103"
                   :with-link="false"
                 />
-                <div
+                <span
                   class="tag"
-                  :style="{ backgroundColor: concept.status?.color }"
+                  :style="{
+                    backgroundColor: getConceptTaskStatus(concept).color,
+                    color: 'white'
+                  }"
                 >
-                  {{ concept.status?.short_name }}
-                </div>
+                  {{ getConceptTaskStatus(concept).short_name }}
+                </span>
               </router-link>
             </template>
             <div v-else>
@@ -418,6 +421,9 @@ export default {
   mounted() {
     this.clearSelectedTasks()
     this.init()
+
+    // FIXME: waiting for a new API to load concepts by entity
+    this.loadConcepts()
   },
 
   computed: {
@@ -425,6 +431,7 @@ export default {
       'assetMap',
       'assetSearchText',
       'assetMetadataDescriptors',
+      'conceptMap',
       'currentEpisode',
       'currentProduction',
       'getTaskTypePriority',
@@ -432,6 +439,7 @@ export default {
       'isCurrentUserManager',
       'route',
       'taskMap',
+      'taskStatusMap',
       'taskTypeMap',
       'shotId'
     ]),
@@ -545,16 +553,16 @@ export default {
       ]
     },
 
-    concepts() {
-      const concepts = this.currentAsset?.concepts
-
-      if (!concepts) return []
-
-      return !this.currentConceptStatus
-        ? concepts
-        : concepts.filter(
+    linkedConcepts() {
+      const conceptIds = this.currentAsset?.entity_links || []
+      const concepts = conceptIds
+        .map(id => this.conceptMap.get(id))
+        .filter(Boolean)
+      return this.currentConceptStatus
+        ? concepts.filter(
             concept => concept.status === this.currentConceptStatus
           )
+        : concepts
     }
   },
 
@@ -566,6 +574,7 @@ export default {
       'loadAssets',
       'loadAssetCastIn',
       'loadAssetCasting',
+      'loadConcepts',
       'loadShots',
       'setCurrentEpisode'
     ]),
@@ -589,6 +598,10 @@ export default {
       })
     },
 
+    getConceptTaskStatus(concept) {
+      return this.taskStatusMap.get(concept.tasks[0].task_status_id)
+    },
+
     onEditClicked() {
       this.modals.edit = true
     },

From 7301743dbe957a0e8a5a2110c295ea573b06bd1d Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Wed, 13 Dec 2023 12:16:54 +0100
Subject: [PATCH 23/41] [concepts] hide notifications in action panel

---
 src/components/tops/ActionPanel.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 97a345d27e..f5b537f3dd 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -91,7 +91,8 @@
             v-if="
               isTaskSelection &&
               !isCurrentViewSingleEntity &&
-              !isCurrentViewTodos
+              !isCurrentViewTodos &&
+              !isCurrentViewConcept
             "
             @click="selectBar('subscribe')"
           >

From 9a399d6448dcdd058ca26b9ebbc2e7c4e8ffcdb4 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Thu, 14 Dec 2023 10:51:06 +0100
Subject: [PATCH 24/41] [concepts] fix UI for the new API data

---
 src/components/pages/Concepts.vue         |  8 +++++---
 src/components/previews/PreviewPlayer.vue | 18 ++++++++++++------
 src/components/tops/ActionPanel.vue       | 20 ++++++++++----------
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 84a2b57189..1c516db221 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -83,7 +83,7 @@
                 <ul class="tags">
                   <li
                     class="tag"
-                    v-for="entity in getEntities(concept.tagged_entities)"
+                    v-for="entity in getLinkedEntities(concept)"
                     :key="entity.id"
                     @click.stop
                   >
@@ -404,8 +404,10 @@ export default {
       )
     },
 
-    getEntities(entityIds) {
-      return entityIds.map(id => this.assetMap.get(id)).filter(Boolean)
+    getLinkedEntities(concept) {
+      return concept.entity_links
+        .map(id => this.assetMap.get(id))
+        .filter(Boolean)
     },
 
     getTaskStatus(concept) {
diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
index 11139e28d6..73d1ad1c9c 100644
--- a/src/components/previews/PreviewPlayer.vue
+++ b/src/components/previews/PreviewPlayer.vue
@@ -489,9 +489,13 @@
       </div>
     </div>
 
-    <div class="flexrow" v-if="isConcept && conceptEntityLinks.length">
+    <div class="flexrow" v-if="isConcept && conceptLinkedEntities.length">
       <ul class="tags">
-        <li class="tag" :key="entity.id" v-for="entity in conceptEntityLinks">
+        <li
+          class="tag"
+          :key="entity.id"
+          v-for="entity in conceptLinkedEntities"
+        >
           <router-link :to="entityPath(entity, 'asset')">
             {{ entity.name }}
           </router-link>
@@ -993,8 +997,8 @@ export default {
       return this.selectedConcepts.values().next().value
     },
 
-    conceptEntityLinks() {
-      return this.getEntities(this.currentConcept.tagged_entities)
+    conceptLinkedEntities() {
+      return this.getLinkedEntities(this.currentConcept)
     }
   },
 
@@ -1682,8 +1686,10 @@ export default {
       )
     },
 
-    getEntities(entityIds) {
-      return entityIds.map(id => this.assetMap.get(id)).filter(Boolean)
+    getLinkedEntities(concept) {
+      return concept.entity_links
+        .map(id => this.assetMap.get(id))
+        .filter(Boolean)
     },
 
     // Events
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index f5b537f3dd..b2df204e1a 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -528,13 +528,13 @@
         >
           <h3 class="mb05">{{ $t('concepts.actions.title') }}</h3>
           <ul class="tags mb05">
-            <li v-if="!conceptEntityLinks.length">
+            <li v-if="!conceptLinkedEntities.length">
               <em>{{ $t('concepts.actions.empty') }}</em>
             </li>
             <template v-else>
               <li
                 class="tag"
-                v-for="entity in conceptEntityLinks"
+                v-for="entity in conceptLinkedEntities"
                 :key="entity.id"
               >
                 {{ entity.name }}
@@ -965,8 +965,8 @@ export default {
       return this.selectedConcepts.values().next().value
     },
 
-    conceptEntityLinks() {
-      return this.getEntities(this.currentConcept.tagged_entities)
+    conceptLinkedEntities() {
+      return this.getLinkedEntities(this.currentConcept)
     },
 
     defaultCustomAction() {
@@ -1199,8 +1199,10 @@ export default {
       'unsubscribeFromTask'
     ]),
 
-    getEntities(entityIds) {
-      return entityIds.map(id => this.assetMap.get(id)).filter(Boolean)
+    getLinkedEntities(concept) {
+      return concept.entity_links
+        .map(id => this.assetMap.get(id))
+        .filter(Boolean)
     },
 
     confirmTaskStatusChange() {
@@ -1564,7 +1566,7 @@ export default {
     onRemoveLink(link) {
       const concept = {
         id: this.currentConcept.id,
-        tagged_entities: this.currentConcept.tagged_entities.filter(
+        entity_links: this.currentConcept.entity_links.filter(
           id => id !== link.id
         )
       }
@@ -1578,9 +1580,7 @@ export default {
     onSelectLink(link) {
       const concept = {
         id: this.currentConcept.id,
-        tagged_entities: [...this.currentConcept.tagged_entities].concat(
-          link.id
-        )
+        entity_links: [...this.currentConcept.entity_links].concat(link.id)
       }
       this.editConcept(concept)
     }

From 49dba1a39079f30a45b24de81c0f005b3c0e0762 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Thu, 14 Dec 2023 11:08:51 +0100
Subject: [PATCH 25/41] [concepts] add the remove link action on preview player

---
 src/components/previews/PreviewPlayer.vue | 44 +++++++++++++++++++++--
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
index 73d1ad1c9c..8776c92312 100644
--- a/src/components/previews/PreviewPlayer.vue
+++ b/src/components/previews/PreviewPlayer.vue
@@ -498,6 +498,9 @@
         >
           <router-link :to="entityPath(entity, 'asset')">
             {{ entity.name }}
+            <button class="action" @click.prevent="onRemoveLink(entity)">
+              <trash2-icon size="0.6x" />
+            </button>
           </router-link>
         </li>
       </ul>
@@ -549,7 +552,7 @@ import { annotationMixin } from '@/components/mixins/annotation'
 import { fullScreenMixin } from '@/components/mixins/fullscreen'
 import { domMixin } from '@/components/mixins/dom'
 
-import { ArrowUpRightIcon, DownloadIcon } from 'vue-feather-icons'
+import { ArrowUpRightIcon, DownloadIcon, Trash2Icon } from 'vue-feather-icons'
 import ButtonSimple from '@/components/widgets/ButtonSimple'
 import BrowsingBar from '@/components/previews/BrowsingBar'
 import ColorPicker from '@/components/widgets/ColorPicker'
@@ -580,6 +583,7 @@ export default {
     PreviewViewer,
     RevisionPreview,
     TaskInfo,
+    Trash2Icon,
     VideoProgress
   },
 
@@ -1003,7 +1007,11 @@ export default {
   },
 
   methods: {
-    ...mapActions(['refreshPreview', 'updateRevisionPreviewPosition']),
+    ...mapActions([
+      'editConcept',
+      'refreshPreview',
+      'updateRevisionPreviewPosition'
+    ]),
     formatFrame,
     formatTime,
 
@@ -1692,6 +1700,16 @@ export default {
         .filter(Boolean)
     },
 
+    onRemoveLink(link) {
+      const concept = {
+        id: this.currentConcept.id,
+        entity_links: this.currentConcept.entity_links.filter(
+          id => id !== link.id
+        )
+      }
+      this.editConcept(concept)
+    },
+
     // Events
 
     onKeyDown(event) {
@@ -2347,10 +2365,30 @@ export default {
   letter-spacing: 1px;
 
   .tag {
-    cursor: pointer;
+    display: inline-flex;
+    gap: 1em;
+
+    .action {
+      background: $light-grey;
+      border-radius: 50%;
+      color: white;
+      cursor: pointer;
+      display: none;
+      height: 14px;
+      width: 14px;
+      line-height: 8px;
+
+      &:hover {
+        background: $dark-grey-lighter;
+      }
+    }
 
     &:hover {
       transform: scale(1.1);
+
+      .action {
+        display: inline-block;
+      }
     }
   }
 }

From cb507e9a3023cf51e90a3ca519551a6a04e4aea6 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Fri, 15 Dec 2023 10:24:50 +0100
Subject: [PATCH 26/41] [concepts] fix linked concepts in Asset page

---
 src/components/pages/Asset.vue | 64 +++++++++++++++++++++++-----------
 src/store/api/concepts.js      |  4 +++
 src/store/modules/concepts.js  | 34 +++++++++++++++---
 src/store/mutation-types.js    |  3 ++
 4 files changed, 80 insertions(+), 25 deletions(-)

diff --git a/src/components/pages/Asset.vue b/src/components/pages/Asset.vue
index fd640786a3..1ea9ecfa9a 100644
--- a/src/components/pages/Asset.vue
+++ b/src/components/pages/Asset.vue
@@ -257,22 +257,25 @@
         </div>
 
         <div
-          class="concepts mt1"
+          class="concepts"
           v-show="currentSection === 'concepts'"
           v-if="currentAsset"
         >
-          <combobox-styled
-            class="section-combo flexrow-item"
-            :options="conceptStatusOptions"
+          <combobox-status
+            :label="$t('main.status')"
+            :task-status-list="taskStatusList"
             v-model="currentConceptStatus"
           />
+          <div class="concept-type">
+            {{ $t('concepts.title') }} ({{ filteredLinkedConcepts.length }})
+          </div>
           <div class="concept-list mt1">
-            <template v-if="linkedConcepts.length">
+            <template v-if="filteredLinkedConcepts.length">
               <router-link
                 class="concept-link"
                 :key="concept.id"
                 :to="conceptPath(concept)"
-                v-for="concept in linkedConcepts"
+                v-for="concept in filteredLinkedConcepts"
               >
                 <entity-thumbnail
                   class="entity-thumbnail"
@@ -288,6 +291,7 @@
                     backgroundColor: getConceptTaskStatus(concept).color,
                     color: 'white'
                   }"
+                  v-if="getConceptTaskStatus(concept)"
                 >
                   {{ getConceptTaskStatus(concept).short_name }}
                 </span>
@@ -354,12 +358,16 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+import { CornerLeftUpIcon } from 'vue-feather-icons'
+
+import { sortByName } from '@/lib/sorting'
+
 import { entityMixin } from '@/components/mixins/entity'
 import { formatListMixin } from '@/components/mixins/format'
 
-import { CornerLeftUpIcon } from 'vue-feather-icons'
 import ButtonSimple from '@/components/widgets/ButtonSimple'
 import ComboboxNumber from '@/components/widgets/ComboboxNumber'
+import ComboboxStatus from '@/components/widgets/ComboboxStatus'
 import ComboboxStyled from '@/components/widgets/ComboboxStyled'
 import DescriptionCell from '@/components/cells/DescriptionCell'
 import EditAssetModal from '@/components/modals/EditAssetModal'
@@ -382,6 +390,7 @@ export default {
     ComboboxNumber,
     CornerLeftUpIcon,
     ComboboxStyled,
+    ComboboxStatus,
     DescriptionCell,
     EditAssetModal,
     EntityNews,
@@ -421,9 +430,6 @@ export default {
   mounted() {
     this.clearSelectedTasks()
     this.init()
-
-    // FIXME: waiting for a new API to load concepts by entity
-    this.loadConcepts()
   },
 
   computed: {
@@ -437,6 +443,7 @@ export default {
       'getTaskTypePriority',
       'isTVShow',
       'isCurrentUserManager',
+      'linkedConcepts',
       'route',
       'taskMap',
       'taskStatusMap',
@@ -543,6 +550,21 @@ export default {
       )
     },
 
+    taskStatusList() {
+      const allStatusItem = {
+        id: null,
+        color: '#999',
+        name: this.$t('main.all'),
+        short_name: this.$t('main.all')
+      }
+      const conceptTaskStatusList = sortByName(
+        Array.from(this.taskStatusMap.values()).filter(
+          status => status.for_concept
+        )
+      )
+      return [allStatusItem].concat(conceptTaskStatusList)
+    },
+
     conceptStatusOptions() {
       // TODO: link to data store
       return [
@@ -553,16 +575,12 @@ export default {
       ]
     },
 
-    linkedConcepts() {
-      const conceptIds = this.currentAsset?.entity_links || []
-      const concepts = conceptIds
-        .map(id => this.conceptMap.get(id))
-        .filter(Boolean)
+    filteredLinkedConcepts() {
       return this.currentConceptStatus
-        ? concepts.filter(
-            concept => concept.status === this.currentConceptStatus
+        ? this.linkedConcepts.filter(
+            ({ status }) => status === this.currentConceptStatus
           )
-        : concepts
+        : this.linkedConcepts
     }
   },
 
@@ -574,7 +592,7 @@ export default {
       'loadAssets',
       'loadAssetCastIn',
       'loadAssetCasting',
-      'loadConcepts',
+      'loadLinkedConcepts',
       'loadShots',
       'setCurrentEpisode'
     ]),
@@ -599,7 +617,7 @@ export default {
     },
 
     getConceptTaskStatus(concept) {
-      return this.taskStatusMap.get(concept.tasks[0].task_status_id)
+      return this.taskStatusMap.get(concept.tasks?.[0].task_status_id)
     },
 
     onEditClicked() {
@@ -638,6 +656,7 @@ export default {
           .then(() => {
             this.castIn.isLoading = false
           })
+          .then(() => this.loadLinkedConcepts(this.currentAsset))
           .catch(err => {
             this.castIn.isError = true
             this.castIn.isLoading = false
@@ -681,6 +700,7 @@ export default {
               .then(() => {
                 this.castIn.isLoading = false
               })
+              .then(() => this.loadLinkedConcepts(this.currentAsset))
               .catch(err => {
                 this.castIn.isLoading = false
                 this.castIn.isError = true
@@ -771,7 +791,8 @@ h2.subtitle {
 }
 
 .asset-casting,
-.asset-casted-in {
+.asset-casted-in,
+.concepts {
   overflow-y: auto;
   margin-top: 1em;
 }
@@ -785,6 +806,7 @@ h2.subtitle {
 }
 
 .asset-type,
+.concept-type,
 .shot-sequence {
   text-transform: uppercase;
   font-size: 1.2em;
diff --git a/src/store/api/concepts.js b/src/store/api/concepts.js
index 689f7f12f5..7fdaf7a757 100644
--- a/src/store/api/concepts.js
+++ b/src/store/api/concepts.js
@@ -28,5 +28,9 @@ export default {
 
   deleteConcept(concept) {
     return client.pdel(`/api/data/concepts/${concept.id}?force=true`)
+  },
+
+  getEntityLinked(entity) {
+    return client.pget(`/api/data/entities/${entity.id}/entity-linked`)
   }
 }
diff --git a/src/store/modules/concepts.js b/src/store/modules/concepts.js
index 8e23e9e307..377132edf6 100644
--- a/src/store/modules/concepts.js
+++ b/src/store/modules/concepts.js
@@ -10,6 +10,9 @@ import {
   DELETE_CONCEPT_END,
   ADD_SELECTED_CONCEPTS,
   CLEAR_SELECTED_CONCEPTS,
+  LOAD_LINKED_CONCEPTS_START,
+  LOAD_LINKED_CONCEPTS_ERROR,
+  LOAD_LINKED_CONCEPTS_END,
   RESET_ALL
 } from '@/store/mutation-types'
 
@@ -39,9 +42,10 @@ const helpers = {
 const initialState = {
   concepts: [],
   conceptMap: new Map(),
-  displayedConcepts: [],
   conceptSearchText: '',
   conceptSearchQueries: [],
+  displayedConcepts: [],
+  linkedConcepts: [],
   selectedConcepts: new Map()
 }
 
@@ -53,6 +57,7 @@ const getters = {
   concepts: state => state.concepts,
   conceptMap: state => state.conceptMap,
   displayedConcepts: state => state.displayedConcepts,
+  linkedConcepts: state => state.linkedConcepts,
   selectedConcepts: state => state.selectedConcepts
 }
 
@@ -177,6 +182,17 @@ const actions = {
 
   clearSelectedConcepts({ commit }) {
     commit(CLEAR_SELECTED_CONCEPTS)
+  },
+
+  async loadLinkedConcepts({ commit }, entity) {
+    commit(LOAD_LINKED_CONCEPTS_START)
+    try {
+      const concepts = await conceptsApi.getEntityLinked(entity)
+      commit(LOAD_LINKED_CONCEPTS_END, { concepts })
+    } catch (err) {
+      console.error(err)
+      commit(LOAD_LINKED_CONCEPTS_ERROR)
+    }
   }
 }
 
@@ -198,9 +214,7 @@ const mutations = {
       helpers.populateConcept(concept, personMap)
     })
     state.concepts = concepts
-    state.conceptMap = new Map(
-      state.concepts.map(concept => [concept.id, concept])
-    )
+    state.conceptMap = new Map(concepts.map(concept => [concept.id, concept]))
     state.displayedConcepts = concepts
   },
 
@@ -236,6 +250,18 @@ const mutations = {
     state.selectedConcepts = new Map()
   },
 
+  [LOAD_LINKED_CONCEPTS_START](state) {
+    state.linkedConcepts = []
+  },
+
+  [LOAD_LINKED_CONCEPTS_ERROR](state) {
+    state.linkedConcepts = []
+  },
+
+  [LOAD_LINKED_CONCEPTS_END](state, { concepts }) {
+    state.linkedConcepts = concepts
+  },
+
   [RESET_ALL](state) {
     Object.assign(state, { ...initialState })
   }
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 53bb01c78b..c1a74b4944 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -646,3 +646,6 @@ export const EDIT_CONCEPT_END = 'EDIT_CONCEPT_END'
 export const DELETE_CONCEPT_END = 'DELETE_CONCEPT_END'
 export const ADD_SELECTED_CONCEPTS = 'ADD_SELECTED_CONCEPTS'
 export const CLEAR_SELECTED_CONCEPTS = 'CLEAR_SELECTED_CONCEPTS'
+export const LOAD_LINKED_CONCEPTS_START = 'LOAD_LINKED_CONCEPTS_START'
+export const LOAD_LINKED_CONCEPTS_ERROR = 'LOAD_LINKED_CONCEPTS_ERROR'
+export const LOAD_LINKED_CONCEPTS_END = 'LOAD_LINKED_CONCEPTS_END'

From 3292810a832e446ac0899486edb7a84753f15489 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Fri, 15 Dec 2023 10:25:28 +0100
Subject: [PATCH 27/41] [concepts] fix css

---
 src/components/tops/ActionPanel.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index b2df204e1a..43cb4ec995 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -1844,9 +1844,11 @@ div.assignation {
   gap: 10px;
   margin-left: 0;
   min-height: 21px;
+  font-weight: 500;
+  letter-spacing: 1px;
 
   .tag {
-    display: inline- flex;
+    display: inline-flex;
     gap: 1em;
     border: 1px solid $light-green;
 

From 73fe22261633b92e0095c6f3c0f2a16d16c548ea Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Fri, 15 Dec 2023 10:54:12 +0100
Subject: [PATCH 28/41] [concepts] fix concept filters

---
 src/components/pages/Concepts.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 1c516db221..244aa4e56d 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -11,6 +11,7 @@
               placeholder="ex: chara"
               @change="onSearchChange"
               @save="saveSearchQuery"
+              v-if="false"
             />
             <combobox-status
               :label="$t('main.status')"
@@ -31,7 +32,7 @@
               :label="$t('concepts.fields.entity_type')"
               :options="entityTypeOptions"
               v-model="filters.entityType"
-              disabled
+              v-if="false"
             />
             <combobox
               class="right"
@@ -41,7 +42,7 @@
               v-model="filters.sortBy"
             />
           </div>
-          <div class="query-list">
+          <div class="query-list" v-if="false">
             <search-query-list
               :queries="conceptSearchQueries"
               type="concept"

From 05db12b795d45acff577caa782d7fe784c4ab583 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Fri, 15 Dec 2023 11:18:07 +0100
Subject: [PATCH 29/41] [concepts] enable links search in action panel

---
 src/components/tops/ActionPanel.vue | 55 +++++++++++++++++++++--------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 43cb4ec995..6a599c19f5 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -735,12 +735,15 @@
           {{ $t('breakdown.all_assets') }}
         </h2>
         <div class="filters-area flexrow mb2">
-          <search-field ref="search-field" @change="onSearchAssetChange" />
+          <search-field
+            ref="entity-search-field"
+            @change="onEntitySearchChange"
+          />
           <button-simple
             class="flexrow-item"
             :title="$t('entities.build_filter.title')"
             icon="funnel"
-            @click="modals.isBuildFilterDisplayed = true"
+            @click="modals.buildFilter = true"
           />
         </div>
         <spinner v-if="loading.links" />
@@ -770,6 +773,13 @@
       </div>
     </div>
 
+    <build-filter-modal
+      :active="modals.buildFilter"
+      @confirm="confirmBuildFilter"
+      @cancel="modals.buildFilter = false"
+      v-if="isCurrentViewConcept"
+    />
+
     <view-playlist-modal
       :active="modals.playlist"
       :task-ids="selectedTaskIds"
@@ -782,10 +792,6 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 
-import { intersection } from '@/lib/array'
-import { sortPeople } from '@/lib/sorting'
-import func from '@/lib/func'
-
 import {
   AlertCircleIcon,
   CheckSquareIcon,
@@ -800,6 +806,11 @@ import {
   UserIcon
 } from 'vue-feather-icons'
 
+import { intersection } from '@/lib/array'
+import { sortPeople } from '@/lib/sorting'
+import func from '@/lib/func'
+
+import BuildFilterModal from '@/components/modals/BuildFilterModal'
 import ButtonSimple from '@/components/widgets/ButtonSimple'
 import ComboboxModel from '@/components/widgets/ComboboxModel'
 import ComboboxStatus from '@/components/widgets/ComboboxStatus'
@@ -822,6 +833,7 @@ export default {
 
   components: {
     AlertCircleIcon,
+    BuildFilterModal,
     ButtonSimple,
     CheckSquareIcon,
     ComboboxModel,
@@ -857,6 +869,7 @@ export default {
       taskStatusId: '',
       statusComment: '',
       modals: {
+        buildFilter: false,
         playlist: false
       },
       priorityOptions: [
@@ -1161,13 +1174,18 @@ export default {
 
     availableLinksByType() {
       const assetGroups = [...this.assetsByType]
-      const result = assetGroups.map(assets => ({
-        type: assets[0].asset_type_name,
-        links: assets.map(asset => ({
-          id: asset.id,
-          name: asset.name
-        }))
-      }))
+      const result = assetGroups
+        .map(assets => {
+          if (!assets.length) return
+          return {
+            type: assets[0].asset_type_name,
+            links: assets.map(asset => ({
+              id: asset.id,
+              name: asset.name
+            }))
+          }
+        })
+        .filter(Boolean)
       return result
     }
   },
@@ -1192,6 +1210,7 @@ export default {
       'editConcept',
       'loadAssets',
       'postCustomAction',
+      'setAssetSearch',
       'setLastTaskPreview',
       'subscribeToTask',
       'unassignPersonFromTask',
@@ -1573,8 +1592,14 @@ export default {
       this.editConcept(concept)
     },
 
-    onSearchAssetChange(query) {
-      // TODO: search in available links
+    confirmBuildFilter(query) {
+      this.modals.buildFilter = false
+      this.$refs['entity-search-field'].setValue(query)
+      this.onEntitySearchChange(query)
+    },
+
+    onEntitySearchChange(searchQuery) {
+      this.setAssetSearch(searchQuery)
     },
 
     onSelectLink(link) {

From c6b7337060e9f44df738e8e1a885033f84c74854 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Fri, 15 Dec 2023 11:22:29 +0100
Subject: [PATCH 30/41] [concepts] hide assignation from action panel

---
 src/components/tops/ActionPanel.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 6a599c19f5..5dfbd09948 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -31,9 +31,7 @@
             :title="$t('menu.assign_tasks')"
             @click="selectBar('assignation')"
             v-if="
-              (isCurrentViewSingleEntity ||
-                isCurrentViewEntity ||
-                isCurrentViewConcept) &&
+              (isCurrentViewSingleEntity || isCurrentViewEntity) &&
               (isCurrentUserManager ||
                 isSupervisorInDepartment ||
                 isInDepartment ||

From 28ed8b99a1857b08ecf6181d7ca8f261f1f4c2d6 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Fri, 15 Dec 2023 15:37:46 +0100
Subject: [PATCH 31/41] [concepts] show assigner instead of assignees

---
 src/components/pages/Concepts.vue | 59 +++++++++++++------------------
 src/locales/en.js                 |  1 +
 src/store/modules/concepts.js     | 41 ++++++---------------
 3 files changed, 36 insertions(+), 65 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 244aa4e56d..6575b26c56 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -20,12 +20,12 @@
             />
             <span class="field small">
               <label class="label">
-                {{ $t('tasks.fields.assignees') }}
+                {{ $t('concepts.fields.assigner') }}
               </label>
               <people-field
                 :big="true"
-                :people="assignees"
-                v-model="filters.assignee"
+                :people="assigners"
+                v-model="filters.assigner"
               />
             </span>
             <combobox
@@ -103,15 +103,11 @@
                   >
                     {{ getTaskStatus(concept).short_name }}
                   </span>
-                  <div class="assignees">
-                    <people-avatar
-                      :key="`${concept.id}-${personId}`"
-                      :person="personMap.get(personId)"
-                      :size="25"
-                      :font-size="14"
-                      v-for="personId in concept.tasks[0].assignees"
-                    />
-                  </div>
+                  <people-avatar
+                    :person="personMap.get(concept.tasks[0].assigner_id)"
+                    :size="25"
+                    :font-size="14"
+                  />
                 </div>
               </div>
             </li>
@@ -198,10 +194,10 @@ export default {
         loadingConcepts: false
       },
       filters: {
-        taskStatusId: null,
-        assignee: null,
+        assigner: null,
         entityType: null,
-        sortBy: 'created_at'
+        sortBy: 'created_at',
+        taskStatusId: null
       },
       form: {
         file: null
@@ -223,8 +219,9 @@ export default {
   },
 
   mounted() {
-    this.setSearch(this.$route.query.search)
-    this.searchField.focus()
+    // TODO: concept search
+    // this.setSearch(this.$route.query.search)
+    // this.searchField.focus()
   },
 
   computed: {
@@ -239,21 +236,20 @@ export default {
       'taskStatusMap'
     ]),
 
-    assignees() {
-      const assignees = new Map()
+    assigners() {
+      const assigners = new Map()
       this.filteredConcepts.forEach(concept => {
         concept.tasks.forEach(task => {
-          task.assignees.forEach(personId => {
-            if (!assignees.has(personId)) {
-              const person = this.personMap.get(personId)
-              if (person) {
-                assignees.set(personId, person)
-              }
+          const personId = task.assigner_id
+          if (!assigners.has(personId)) {
+            const person = this.personMap.get(personId)
+            if (person) {
+              assigners.set(personId, person)
             }
-          })
+          }
         })
       })
-      return sortByName([...assignees.values()])
+      return sortByName([...assigners.values()])
     },
 
     currentTask() {
@@ -296,9 +292,9 @@ export default {
             concept.tasks[0].task_status_id === this.filters.taskStatusId
         )
       }
-      if (this.filters.assignee) {
+      if (this.filters.assigner) {
         concepts = concepts.filter(concept =>
-          concept.tasks[0].assignees.includes(this.filters.assignee.id)
+          concept.tasks[0].assigner_id.includes(this.filters.assigner.id)
         )
       }
       if (this.filters.entityType) {
@@ -585,11 +581,6 @@ export default {
       .tag {
         text-transform: uppercase;
       }
-
-      .assignees {
-        display: flex;
-        gap: 5px;
-      }
     }
   }
 }
diff --git a/src/locales/en.js b/src/locales/en.js
index 2c5514bdfb..0948113ace 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -144,6 +144,7 @@ export default {
     multiple_delete_error: 'An error occurred while deleting a concept. There is probably some data linked to a concept. Are you sure there is no task linked to a selected concept?',
     title: 'Concepts',
     fields: {
+      assigner: 'Publish by',
       entity_type: 'Entity type',
       created_at: 'Creation date',
       updated_at: 'Update date',
diff --git a/src/store/modules/concepts.js b/src/store/modules/concepts.js
index 377132edf6..6ebf5b5edb 100644
--- a/src/store/modules/concepts.js
+++ b/src/store/modules/concepts.js
@@ -24,17 +24,11 @@ const helpers = {
     return task
   },
 
-  populateConcept(concept, personMap) {
+  populateConcept(concept) {
     concept.full_name = 'Concept'
-    concept.last_comment_date = concept.tasks[0].last_comment_date
-    concept.tasks.forEach(task => {
+    concept.last_comment_date = concept.tasks?.[0]?.last_comment_date
+    concept.tasks?.forEach(task => {
       helpers.populateTask(task, concept)
-      // Sort assignees by name
-      if (task.assignees.length > 1) {
-        task.assignees = task.assignees.sort((a, b) =>
-          personMap.get(a).name.localeCompare(personMap.get(b).name)
-        )
-      }
     })
   }
 }
@@ -65,10 +59,9 @@ const actions = {
   async loadConcepts({ commit, rootGetters }) {
     commit(LOAD_CONCEPTS_START)
     try {
-      const personMap = rootGetters.personMap
       const production = rootGetters.currentProduction
       const concepts = await conceptsApi.getConcepts(production)
-      commit(LOAD_CONCEPTS_END, { concepts, personMap })
+      commit(LOAD_CONCEPTS_END, { concepts })
     } catch (err) {
       console.error(err)
       commit(LOAD_CONCEPTS_ERROR)
@@ -84,16 +77,11 @@ const actions = {
     }
   },
 
-  async newConcepts({ commit, dispatch, rootGetters }, forms) {
-    return Promise.all(
-      forms.map(form => {
-        return dispatch('newConcept', form)
-      })
-    )
+  async newConcepts({ dispatch }, forms) {
+    return Promise.all(forms.map(form => dispatch('newConcept', form)))
   },
 
   async newConcept({ commit, dispatch, rootGetters }, form) {
-    const personMap = rootGetters.personMap
     const production = rootGetters.currentProduction
 
     // Create Entity
@@ -122,17 +110,9 @@ const actions = {
     })
     await dispatch('setLastTaskPreview', task.id)
 
-    // Assign Task to current User
-    const currentUser = rootGetters.user.id
-    await dispatch('assignSelectedTasks', {
-      personId: currentUser,
-      taskIds: [task.id]
-    })
-    task.assignees = [currentUser]
-
     concept.tasks = [task]
     concept.preview_file_id = preview.id
-    helpers.populateConcept(concept, personMap)
+    helpers.populateConcept(concept)
 
     commit(EDIT_CONCEPT_END, concept)
     return concept
@@ -209,10 +189,8 @@ const mutations = {
     state.displayedConcepts = []
   },
 
-  [LOAD_CONCEPTS_END](state, { concepts, personMap }) {
-    concepts.forEach(concept => {
-      helpers.populateConcept(concept, personMap)
-    })
+  [LOAD_CONCEPTS_END](state, { concepts }) {
+    concepts.forEach(helpers.populateConcept)
     state.concepts = concepts
     state.conceptMap = new Map(concepts.map(concept => [concept.id, concept]))
     state.displayedConcepts = concepts
@@ -259,6 +237,7 @@ const mutations = {
   },
 
   [LOAD_LINKED_CONCEPTS_END](state, { concepts }) {
+    concepts.forEach(helpers.populateConcept)
     state.linkedConcepts = concepts
   },
 

From 77d5f6f6c794f6e6ced7597752ef17ada8a762f8 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Fri, 15 Dec 2023 15:41:05 +0100
Subject: [PATCH 32/41] [concepts] fix linked concepts in Asset page

---
 src/components/pages/Asset.vue | 3 +--
 src/store/api/concepts.js      | 4 +++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/Asset.vue b/src/components/pages/Asset.vue
index 1ea9ecfa9a..67b972c950 100644
--- a/src/components/pages/Asset.vue
+++ b/src/components/pages/Asset.vue
@@ -291,7 +291,6 @@
                     backgroundColor: getConceptTaskStatus(concept).color,
                     color: 'white'
                   }"
-                  v-if="getConceptTaskStatus(concept)"
                 >
                   {{ getConceptTaskStatus(concept).short_name }}
                 </span>
@@ -617,7 +616,7 @@ export default {
     },
 
     getConceptTaskStatus(concept) {
-      return this.taskStatusMap.get(concept.tasks?.[0].task_status_id)
+      return this.taskStatusMap.get(concept.tasks[0].task_status_id)
     },
 
     onEditClicked() {
diff --git a/src/store/api/concepts.js b/src/store/api/concepts.js
index 7fdaf7a757..1a17179008 100644
--- a/src/store/api/concepts.js
+++ b/src/store/api/concepts.js
@@ -31,6 +31,8 @@ export default {
   },
 
   getEntityLinked(entity) {
-    return client.pget(`/api/data/entities/${entity.id}/entity-linked`)
+    return client.pget(
+      `/api/data/entities/${entity.id}/entities-linked/with-tasks`
+    )
   }
 }

From 2d59502f13c4550ab0b418425eed7a9936152c0d Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 18 Dec 2023 11:40:31 +0100
Subject: [PATCH 33/41] [concepts] hide task type used by Concepts

---
 src/components/lists/TaskTypeList.vue | 7 ++-----
 src/components/pages/TaskTypes.vue    | 6 +++++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/lists/TaskTypeList.vue b/src/components/lists/TaskTypeList.vue
index d3218ec3ac..aa2588d160 100644
--- a/src/components/lists/TaskTypeList.vue
+++ b/src/components/lists/TaskTypeList.vue
@@ -251,8 +251,9 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
 import draggable from 'vuedraggable'
+
 import BooleanRep from '@/components/widgets/BooleanRep'
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 import RowActionsCell from '@/components/cells/RowActionsCell'
@@ -296,8 +297,6 @@ export default {
     TaskTypeCell
   },
 
-  mounted() {},
-
   computed: {
     ...mapGetters(['getDepartments']),
 
@@ -323,8 +322,6 @@ export default {
   },
 
   methods: {
-    ...mapActions([]),
-
     getTaskTypesForEntity(entity) {
       return this.entries.filter(taskType => taskType.for_entity === entity)
     },
diff --git a/src/components/pages/TaskTypes.vue b/src/components/pages/TaskTypes.vue
index 65f72e5c88..1777071bba 100644
--- a/src/components/pages/TaskTypes.vue
+++ b/src/components/pages/TaskTypes.vue
@@ -117,7 +117,11 @@ export default {
     },
 
     listTaskTypes() {
-      return this.isActiveTab ? this.taskTypes : this.archivedTaskTypes
+      const taskTypes = this.isActiveTab
+        ? this.taskTypes
+        : this.archivedTaskTypes
+
+      return taskTypes.filter(taskType => taskType.for_entity !== 'Concept')
     }
   },
 

From a8c6bd53406e490c2d4f43ffd3290e3f3638a6f3 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 18 Dec 2023 12:39:10 +0100
Subject: [PATCH 34/41] [concepts] fix export action

---
 src/store/modules/concepts.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/store/modules/concepts.js b/src/store/modules/concepts.js
index 6ebf5b5edb..ae6ce26b41 100644
--- a/src/store/modules/concepts.js
+++ b/src/store/modules/concepts.js
@@ -19,6 +19,7 @@ import {
 const helpers = {
   populateTask(task, concept) {
     Object.assign(task, {
+      entity_name: '',
       project_id: concept.project_id
     })
     return task

From a3e71e845f52aa5d5be597f86bfe3557f32ad1d9 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 18 Dec 2023 12:43:23 +0100
Subject: [PATCH 35/41] [concepts] update publisher filtering with created_by
 field

---
 src/components/pages/Concepts.vue | 36 +++++++++++++++----------------
 src/locales/en.js                 |  2 +-
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 6575b26c56..f0cfa0ff19 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -20,12 +20,12 @@
             />
             <span class="field small">
               <label class="label">
-                {{ $t('concepts.fields.assigner') }}
+                {{ $t('concepts.fields.publisher') }}
               </label>
               <people-field
                 :big="true"
-                :people="assigners"
-                v-model="filters.assigner"
+                :people="publishers"
+                v-model="filters.publisher"
               />
             </span>
             <combobox
@@ -104,7 +104,7 @@
                     {{ getTaskStatus(concept).short_name }}
                   </span>
                   <people-avatar
-                    :person="personMap.get(concept.tasks[0].assigner_id)"
+                    :person="personMap.get(concept.created_by)"
                     :size="25"
                     :font-size="14"
                   />
@@ -194,8 +194,8 @@ export default {
         loadingConcepts: false
       },
       filters: {
-        assigner: null,
         entityType: null,
+        publisher: null,
         sortBy: 'created_at',
         taskStatusId: null
       },
@@ -236,20 +236,18 @@ export default {
       'taskStatusMap'
     ]),
 
-    assigners() {
-      const assigners = new Map()
+    publishers() {
+      const publishers = new Map()
       this.filteredConcepts.forEach(concept => {
-        concept.tasks.forEach(task => {
-          const personId = task.assigner_id
-          if (!assigners.has(personId)) {
-            const person = this.personMap.get(personId)
-            if (person) {
-              assigners.set(personId, person)
-            }
+        const personId = concept.created_by
+        if (!publishers.has(personId)) {
+          const person = this.personMap.get(personId)
+          if (person) {
+            publishers.set(personId, person)
           }
-        })
+        }
       })
-      return sortByName([...assigners.values()])
+      return sortByName([...publishers.values()])
     },
 
     currentTask() {
@@ -292,9 +290,9 @@ export default {
             concept.tasks[0].task_status_id === this.filters.taskStatusId
         )
       }
-      if (this.filters.assigner) {
-        concepts = concepts.filter(concept =>
-          concept.tasks[0].assigner_id.includes(this.filters.assigner.id)
+      if (this.filters.publisher) {
+        concepts = concepts.filter(
+          concept => concept.created_by === this.filters.publisher.id
         )
       }
       if (this.filters.entityType) {
diff --git a/src/locales/en.js b/src/locales/en.js
index 0948113ace..a6c878dca6 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -144,11 +144,11 @@ export default {
     multiple_delete_error: 'An error occurred while deleting a concept. There is probably some data linked to a concept. Are you sure there is no task linked to a selected concept?',
     title: 'Concepts',
     fields: {
-      assigner: 'Publish by',
       entity_type: 'Entity type',
       created_at: 'Creation date',
       updated_at: 'Update date',
       last_comment_date: 'Last comment',
+      publisher: 'Publish by',
     },
     actions: {
       title: 'Links to Concept',

From ac75dca0a88af4ea499072d7715d61060e62c694 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 18 Dec 2023 14:00:48 +0100
Subject: [PATCH 36/41] [concepts] allow a concept publisher to edit or delete
 these entries

---
 src/components/tops/ActionPanel.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 5dfbd09948..1cd4e73e4e 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -105,7 +105,9 @@
             :title="$t('menu.edit_concepts')"
             @click="selectBar('edit-concepts')"
             v-if="
-              isCurrentViewConcept && isCurrentUserManager && isTaskSelection
+              isCurrentViewConcept &&
+              (isCurrentUserManager || isConceptPublisher) &&
+              isTaskSelection
             "
           >
             <link-icon />
@@ -264,7 +266,10 @@
             }"
             :title="$t('menu.delete_concepts')"
             @click="selectBar('delete-concepts')"
-            v-if="isCurrentViewConcept && isCurrentUserManager"
+            v-if="
+              isCurrentViewConcept &&
+              (isCurrentUserManager || isConceptPublisher)
+            "
           >
             <trash-icon />
           </div>
@@ -1046,6 +1051,10 @@ export default {
       )
     },
 
+    isConceptPublisher() {
+      return this.currentConcept?.created_by === this.user.id
+    },
+
     isCurrentViewSingleEntity() {
       return [
         'asset',

From 212e316c8ee9a8dfd7293c1ab091785bc6be1f0c Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 18 Dec 2023 15:03:06 +0100
Subject: [PATCH 37/41] [concepts] fix concept filtering in Asset page

---
 src/components/modals/EditCommentModal.vue |  1 -
 src/components/pages/Asset.vue             | 17 +++--------------
 src/components/tops/ActionPanel.vue        |  1 -
 src/components/widgets/AddComment.vue      |  1 -
 src/components/widgets/Comment.vue         |  1 -
 5 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/components/modals/EditCommentModal.vue b/src/components/modals/EditCommentModal.vue
index 205c90aa58..b215ca49ab 100644
--- a/src/components/modals/EditCommentModal.vue
+++ b/src/components/modals/EditCommentModal.vue
@@ -237,7 +237,6 @@ export default {
     },
 
     isConceptTask() {
-      // FIXME: write correct logic
       return this.$route.path.includes('concept')
     }
   },
diff --git a/src/components/pages/Asset.vue b/src/components/pages/Asset.vue
index 67b972c950..6198a68ebb 100644
--- a/src/components/pages/Asset.vue
+++ b/src/components/pages/Asset.vue
@@ -564,20 +564,11 @@ export default {
       return [allStatusItem].concat(conceptTaskStatusList)
     },
 
-    conceptStatusOptions() {
-      // TODO: link to data store
-      return [
-        { label: 'All', value: null },
-        { label: 'Neutral', value: 'neutral' },
-        { label: 'Done', value: 'done' },
-        { label: 'Rejected', value: 'rejected' }
-      ]
-    },
-
     filteredLinkedConcepts() {
       return this.currentConceptStatus
         ? this.linkedConcepts.filter(
-            ({ status }) => status === this.currentConceptStatus
+            concept =>
+              concept.tasks[0].task_status_id === this.currentConceptStatus
           )
         : this.linkedConcepts
     }
@@ -665,12 +656,10 @@ export default {
     },
 
     conceptPath(concept) {
-      // TODO: add concept_id to the targeted route
       return {
         name: 'concepts',
         params: {
-          production_id: this.currentProduction.id,
-          concept_id: concept.concept_id
+          production_id: this.currentProduction.id
         }
       }
     },
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 1cd4e73e4e..26f9b8e74f 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -1082,7 +1082,6 @@ export default {
     },
 
     isCurrentViewConcept() {
-      // FIXME: write correct logic
       return this.$route.path.includes('concept')
     },
 
diff --git a/src/components/widgets/AddComment.vue b/src/components/widgets/AddComment.vue
index 582434a10d..045484904c 100644
--- a/src/components/widgets/AddComment.vue
+++ b/src/components/widgets/AddComment.vue
@@ -459,7 +459,6 @@ export default {
     },
 
     isConcept() {
-      // FIXME: write correct logic
       return this.$route.path.includes('concept')
     },
 
diff --git a/src/components/widgets/Comment.vue b/src/components/widgets/Comment.vue
index 950b1a237e..be5a75ef08 100644
--- a/src/components/widgets/Comment.vue
+++ b/src/components/widgets/Comment.vue
@@ -481,7 +481,6 @@ export default {
     ]),
 
     isConcept() {
-      // FIXME: write correct logic
       return this.$route.path.includes('concept')
     },
 

From 86e0b89308e0475b7ee251c211b00aad17d43d27 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 18 Dec 2023 16:13:08 +0100
Subject: [PATCH 38/41] [concepts] update styles for dark theme

---
 src/App.vue                               | 25 +++++++++++++++++++++++
 src/components/pages/Concepts.vue         |  4 ++++
 src/components/previews/PreviewPlayer.vue | 14 +++++--------
 src/components/tops/ActionPanel.vue       | 17 ++++++++-------
 4 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b6dd75210b..96e475cc2e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -775,6 +775,31 @@ h2 {
   color: $blue;
 }
 
+.tags {
+  .tag {
+    background: var(--background-tag);
+    color: var(--text);
+
+    a {
+      color: var(--text);
+    }
+
+    .action {
+      cursor: pointer;
+      background: $light-grey;
+      color: white;
+
+      .dark & {
+        background: $dark-grey;
+      }
+
+      &:hover {
+        background: $dark-grey-lighter;
+      }
+    }
+  }
+}
+
 .timecode {
   border: 1px solid $blue;
   border-radius: 5px;
diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index f0cfa0ff19..89e8ab6e80 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -589,5 +589,9 @@ export default {
   display: flex;
   justify-content: center;
   padding: 3em;
+
+  .dark & {
+    background-color: var(--background-alt);
+  }
 }
 </style>
diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
index 8776c92312..f188b400e2 100644
--- a/src/components/previews/PreviewPlayer.vue
+++ b/src/components/previews/PreviewPlayer.vue
@@ -2365,22 +2365,18 @@ export default {
   letter-spacing: 1px;
 
   .tag {
-    display: inline-flex;
-    gap: 1em;
+    a {
+      display: inline-flex;
+      gap: 1em;
+      line-height: normal;
+    }
 
     .action {
-      background: $light-grey;
       border-radius: 50%;
-      color: white;
-      cursor: pointer;
       display: none;
       height: 14px;
       width: 14px;
       line-height: 8px;
-
-      &:hover {
-        background: $dark-grey-lighter;
-      }
     }
 
     &:hover {
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 26f9b8e74f..9969e59c33 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -733,7 +733,7 @@
       class="flexrow-item is-wide pa1"
       v-if="selectedBar === 'edit-concepts'"
     >
-      <div ref="asset-list" class="concept-tags">
+      <div ref="asset-list" class="concept-links">
         <h2 class="subtitle">
           {{ $t('breakdown.all_assets') }}
         </h2>
@@ -1738,6 +1738,12 @@ export default {
       border-bottom: 1px solid $dark-grey-light;
     }
   }
+
+  .concept-links {
+    background: $dark-grey-light;
+    border: 1px solid #222;
+    box-shadow: 0 0 6px #222;
+  }
 }
 
 .action-topbar {
@@ -1884,18 +1890,11 @@ div.assignation {
     border: 1px solid $light-green;
 
     .action {
-      background: $light-grey;
       border-radius: 50%;
-      color: white;
-      cursor: pointer;
       display: none;
       height: 14px;
       width: 14px;
       line-height: 8px;
-
-      &:hover {
-        background: $dark-grey-lighter;
-      }
     }
 
     &:hover {
@@ -1908,7 +1907,7 @@ div.assignation {
   }
 }
 
-.concept-tags {
+.concept-links {
   overflow-y: auto;
   padding: 1em;
   background: $white;

From bd3350acbfdad8c5a65f67a2ca1293e756b0a5a8 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 18 Dec 2023 17:38:29 +0100
Subject: [PATCH 39/41] [concepts] rename attribute according api

---
 src/components/pages/Concepts.vue         | 4 ++--
 src/components/previews/PreviewPlayer.vue | 4 ++--
 src/components/tops/ActionPanel.vue       | 8 +++++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 89e8ab6e80..4d7d22ff05 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -400,7 +400,7 @@ export default {
     },
 
     getLinkedEntities(concept) {
-      return concept.entity_links
+      return concept.entity_concept_links
         .map(id => this.assetMap.get(id))
         .filter(Boolean)
     },
@@ -472,7 +472,7 @@ export default {
       handler() {
         // HACK: the store init a wrong current production by default
         const productionId = this.$route.params.production_id
-        if (this.currentProduction.id === productionId) {
+        if (this.currentProduction?.id === productionId) {
           this.reset()
         }
       }
diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
index f188b400e2..815e7d822f 100644
--- a/src/components/previews/PreviewPlayer.vue
+++ b/src/components/previews/PreviewPlayer.vue
@@ -1695,7 +1695,7 @@ export default {
     },
 
     getLinkedEntities(concept) {
-      return concept.entity_links
+      return concept.entity_concept_links
         .map(id => this.assetMap.get(id))
         .filter(Boolean)
     },
@@ -1703,7 +1703,7 @@ export default {
     onRemoveLink(link) {
       const concept = {
         id: this.currentConcept.id,
-        entity_links: this.currentConcept.entity_links.filter(
+        entity_concept_links: this.currentConcept.entity_concept_links.filter(
           id => id !== link.id
         )
       }
diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 9969e59c33..34daf4da30 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -1225,7 +1225,7 @@ export default {
     ]),
 
     getLinkedEntities(concept) {
-      return concept.entity_links
+      return concept.entity_concept_links
         .map(id => this.assetMap.get(id))
         .filter(Boolean)
     },
@@ -1591,7 +1591,7 @@ export default {
     onRemoveLink(link) {
       const concept = {
         id: this.currentConcept.id,
-        entity_links: this.currentConcept.entity_links.filter(
+        entity_concept_links: this.currentConcept.entity_concept_links.filter(
           id => id !== link.id
         )
       }
@@ -1611,7 +1611,9 @@ export default {
     onSelectLink(link) {
       const concept = {
         id: this.currentConcept.id,
-        entity_links: [...this.currentConcept.entity_links].concat(link.id)
+        entity_concept_links: [
+          ...this.currentConcept.entity_concept_links
+        ].concat(link.id)
       }
       this.editConcept(concept)
     }

From 5141b8f8a603c8dffb62e4ed285148e8212338d3 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 18 Dec 2023 22:10:24 +0100
Subject: [PATCH 40/41] [concepts] fix styles

---
 src/components/tops/ActionPanel.vue    | 2 +-
 src/components/widgets/PeopleField.vue | 2 +-
 src/components/widgets/SearchField.vue | 5 ++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/tops/ActionPanel.vue b/src/components/tops/ActionPanel.vue
index 34daf4da30..e376a6ff04 100644
--- a/src/components/tops/ActionPanel.vue
+++ b/src/components/tops/ActionPanel.vue
@@ -737,7 +737,7 @@
         <h2 class="subtitle">
           {{ $t('breakdown.all_assets') }}
         </h2>
-        <div class="filters-area flexrow mb2">
+        <div class="flexrow mb2">
           <search-field
             ref="entity-search-field"
             @change="onEntitySearchChange"
diff --git a/src/components/widgets/PeopleField.vue b/src/components/widgets/PeopleField.vue
index 4965aedd39..a8b0c4ff04 100644
--- a/src/components/widgets/PeopleField.vue
+++ b/src/components/widgets/PeopleField.vue
@@ -173,7 +173,7 @@ export default {
 }
 
 .v-autocomplete {
-  z-index: 2000;
+  z-index: 205; // +1 relative to the z-index of c-mask
   position: relative;
 }
 
diff --git a/src/components/widgets/SearchField.vue b/src/components/widgets/SearchField.vue
index 2db6e432d2..db132bd3d7 100644
--- a/src/components/widgets/SearchField.vue
+++ b/src/components/widgets/SearchField.vue
@@ -130,10 +130,11 @@ export default {
 
 .search-field {
   margin-right: 0.2em;
+  width: 100%;
 }
 
 .search-input {
-  width: 300px;
+  width: 100%;
   background: inherit;
   color: var(--text);
 }
@@ -168,6 +169,8 @@ export default {
 }
 
 .search-field-wrapper {
+  max-width: 420px;
+  width: 100%;
   border: 1px solid #ddd;
   border-radius: 2em;
   padding: 0.2em 1em;

From cd6eb60d8d1da16419716d27174890b5c8bb0ce4 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@cg-wire.com>
Date: Mon, 18 Dec 2023 22:29:27 +0100
Subject: [PATCH 41/41] [concepts] update link to linked entity

---
 src/components/pages/Concepts.vue |  3 ++-
 src/lib/path.js                   | 12 +++++++++++-
 tests/unit/lib/path.spec.js       | 10 ++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/Concepts.vue b/src/components/pages/Concepts.vue
index 4d7d22ff05..64b0dd9f1c 100644
--- a/src/components/pages/Concepts.vue
+++ b/src/components/pages/Concepts.vue
@@ -395,7 +395,8 @@ export default {
         entity.id,
         this.currentProduction.id,
         section,
-        episodeId
+        episodeId,
+        { section: 'concepts' }
       )
     },
 
diff --git a/src/lib/path.js b/src/lib/path.js
index 3143c6dbe1..68f9e21a0f 100644
--- a/src/lib/path.js
+++ b/src/lib/path.js
@@ -71,7 +71,13 @@ export const getEntitiesPath = (productionId, type, episodeId) => {
   return route
 }
 
-export const getEntityPath = (entityId, productionId, section, episodeId) => {
+export const getEntityPath = (
+  entityId,
+  productionId,
+  section,
+  episodeId,
+  query
+) => {
   const route = {
     name: section,
     params: {
@@ -88,6 +94,10 @@ export const getEntityPath = (entityId, productionId, section, episodeId) => {
     route.params[`${section}_id`] = entityId
   }
 
+  if (query) {
+    route.query = query
+  }
+
   return route
 }
 
diff --git a/tests/unit/lib/path.spec.js b/tests/unit/lib/path.spec.js
index 6b8374f646..b655406f3f 100644
--- a/tests/unit/lib/path.spec.js
+++ b/tests/unit/lib/path.spec.js
@@ -191,6 +191,16 @@ describe('path', () => {
         asset_id: 1
       }
     })
+    expect(getEntityPath(1, 2, 'asset', null, { param: 'test' })).toEqual({
+      name: 'asset',
+      params: {
+        production_id: 2,
+        asset_id: 1
+      },
+      query: {
+        param: 'test'
+      }
+    })
     expect(getEntityPath(1, 2, 'shot', 3)).toEqual({
       name: 'episode-shot',
       params: {