🚧 display managed projects & sets in a tree view

src/i18n/en_US.js

@@ -237,6 +237,7 @@ export const en_US = {
       title: "Copy @:item.designate",
       here: "Copy here",
       inProject: "Choose set",
+      projectsLoad: "Load other projets"
     },
     copyOf: "Copy of",
     count: "No item | 1 item | {count} items",

src/i18n/fr_FR.js

@@ -243,7 +243,8 @@ export const fr_FR = {
     copy: {
       title: "Copier @:item.designate",
       here: "Copier ici",
-      inProject: "Choisir l'ensemble"
+      inProject: "Choisir l'ensemble",
+      projectsLoad: "Charger les autres projets"
     },
     copyOf: "Copie de",
     count: "Aucun élément | 1 élément | {count} éléments",

src/router/index.js

@@ -295,31 +295,37 @@ export const routes = [
       {
         path: 'detail',
         name: 'itemDetail',
+        props: true,
         component: () => import(/* webpackChunkName: "item" */ '@/views/items/ItemDetail'),
       },
       {
         path: 'detail/edit',
         name: 'itemEdit',
+        props: true,
         component: () => import(/* webpackChunkName: "item" */ '@/views/items/ItemEdit'),
       },
       {
         path: 'viewer',
         name: 'itemViewer',
+        props: true,
         component: () => import(/* webpackChunkName: "item" */ '@/views/items/ItemViewer'),
       },
       {
         path: 'metadata',
         name: 'itemMetadata',
+        props: true,
         component: () => import(/* webpackChunkName: "item" */ '@/views/items/ItemMetadata'),
       },
       {
         path: 'files',
         name: 'itemFiles',
+        props: true,
         component: () => import(/* webpackChunkName: "item" */ '@/views/items/ItemFiles'),
       },
       {
         path: 'copy',
         name: 'itemCopy',
+        props: true,
         component: () => import(/* webpackChunkName: "item" */ '@/views/items/ItemCopy'),
       },
     ],

src/store/item.js

@@ -169,8 +169,6 @@ const Item = {
     },
     SET_CURRENT(state, item) {
       state.current = { ...item}
-      // TODO test purpose
-      state.current.set.projectId = '76e6c198-89fc-4fc0-86e0-6c5e2900a30c'
     },
     SET_ITEMS(state, items) {
       state.setItems = items

src/store/project.js

@@ -190,8 +190,12 @@ const Project = {
               {root: true}
           ))
     },
-    retrieveProjects({commit, dispatch}, {page = 1, size}) {
-      return authority.get( `projects/?page=${page}&page_size=${size > 0 ? size : 0}`)
+    retrieveProjects({commit, dispatch}, {manageOnly= false, page = 1, size}) {
+      let url = `projects/?page=${page}&page_size=${size > 0 ? size : 0}`
+      if (manageOnly) {
+        url += '&is_manager=true'
+      }
+      return authority.get(url)
           .then(response => {
             const [projects, pageCount, count] = getPaginatedResult(response.data, page, size)
             commit('SET_CONTRIBUTIONS', projects)

src/store/set.js

@@ -167,8 +167,9 @@ const Set = {
               {root: true}
           ))
     },
-    loadProjectSets({commit, dispatch, rootGetters}, {page = 1, size}) {
-      return authority.get(`sets/?project_id=${rootGetters['project/projectId']}&page=${page}&page_size=${size > 0 ? size : 0}`)
+    loadProjectSets({commit, dispatch, rootGetters}, {projectId, page = 1, size}) {
+      const projectFilter = projectId || rootGetters['project/projectId']
+      return authority.get(`sets/?project_id=${projectFilter}&page=${page}&page_size=${size > 0 ? size : 0}`)
           .then(response => {
             const [sets, pageCount, count] = getPaginatedResult(response.data, page, size)
             commit('SET_PROJECT_SETS', sets)

src/views/items/ItemCopy.vue

@@ -5,41 +5,57 @@
         {{ $t('item.copy.title') }}
       </v-card-title>
       <v-card-text>
-        <crud-list
-            v-if="setLoaded"
-            class="mt-2"
-            :title="$t('set.plural')"
-            :button="{isDisplayed: false}"
-            :items="crudListItems"
-            :items-length="setsLength"
-            @paginate="onPagination"
-        />
+        <v-treeview
+          open-on-click
+          :open="openProjects"
+          :items="projectsTree"
+          :load-children="addSets"
+        >
+          <template v-slot:label="{item}">
+            <p
+              v-if="item.id === 'next'"
+              @click="addProjects"
+            >
+              {{ $t('item.copy.projectsLoad')}}
+            </p>
+            <p
+              v-else-if="item.level"
+              @click="copyHere(item)"
+            >
+                <v-icon
+                  color="secondary"
+                  left
+                >
+                  mdi-content-copy
+                </v-icon>
+              {{ item.title }}
+            </p>
+            <p
+              v-else
+            >
+              {{ item.title }}
+            </p>
+          </template>
+        </v-treeview>
 
       </v-card-text>
       <v-card-actions>
         <v-btn
+            v-if="!setLoaded"
             tile
             elevation="0"
-            @click="duplicate"
-        >
-          {{ $t('item.copy.here' )}}
-          <v-icon color="secondary" right>mdi-content-copy</v-icon>
-        </v-btn>
-        <v-btn
-            tile
-            elevation="0"
+            color="primary"
             @click="displayProjectSets"
         >
           {{ $t('item.copy.inProject')}}
         </v-btn>
-        <v-spacer />
         <v-btn
-            color="secondary"
-            tile
-            elevation="0"
-            @click="$emit('close')"
+          tile
+          elevation="0"
+          @click="duplicate"
         >
-          {{ $t('btn.cancel') }}
+          <v-icon color="secondary" left>mdi-content-copy</v-icon>
+          {{ $t('item.copy.here' )}}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -48,7 +64,6 @@
 
 <script>
 import TextHelpersMixin from '@/mixins/TextHelpersMixin'
-import CrudList from '@/components/crud/CrudList'
 import {mapActions, mapGetters, mapState} from 'vuex'
 
 export default {
@@ -56,18 +71,17 @@ export default {
   mixins: [
     TextHelpersMixin,
   ],
-  components: {
-    CrudList,
-  },
   props: {
     itemId: {
       type: String,
       required: true
-    }
+    },
   },
   data() {
     return {
-      setLoaded: false
+      setLoaded: false,
+      projectsTree: [],
+      openProjects: []
     }
   },
   computed: {
@@ -78,28 +92,19 @@ export default {
       pages: 'pageCount',
     }),
     ...mapGetters('template', ['current']),
-    ...mapGetters('project', { storedProject: 'projectId'}),
-    crudListItems() {
-      return this.sets.map((set) => ({
-        id: set.id,
-        name: this.textTruncate(set.title, 50),
-        thumbnail: set.thumbnails.s,
-        subtitles: [
-          this.textTruncate(this.stripHtml(set.description), 75),
-        ],
-        isSelectable: !set.numItems,
-        updatedAt: set.updatedAt,
-      }));
-    },
+    ...mapGetters('project', {
+      storedProject: 'projectId',
+      currentProject: 'current',
+      managedProjects: 'contributions'
+    }),
   },
   methods: {
     ...mapActions('item', ['itemDuplicate']),
-    ...mapActions('project', ['loadProject']),
+    ...mapActions('project', ['loadProject', 'retrieveProjects']),
     ...mapActions('set', ['loadProjectSets']),
     ...mapActions('template', ['loadProjectTemplates']),
     async duplicate() {
       await this.itemDuplicate()
-      this.$emit('close')
       this.$router.push({
         name: 'itemMetadata',
         params: {itemId: this.item.id}
@@ -109,9 +114,47 @@ export default {
       if (this.projectId !== this.storedProject) {
         await this.loadProject(this.projectId)
       }
-      await this.loadProjectSets({size: 10})
+      await this.loadProjectSets({size: 0})
+      this.projectsTree = [
+        {
+          id: this.projectId,
+          title: this.currentProject.name,
+          level: 0,
+          children: this.sets.map(
+            s => ({
+              id: s.id,
+              title: s.title,
+              level: 1,
+              templateId: s.templateId,
+            }))
+        },
+        {
+          id: "next",
+          level: 0,
+        }
+      ]
+      this.openProjects = [this.projectId]
       this.setLoaded = true
     },
+    async addProjects() {
+      await this.retrieveProjects({manageOnly: true, size: 0})
+      const otherManagedProjects = this.managedProjects.reduce(
+        (others, currentProject) => {
+          if (currentProject.id !== this.projectId) {
+            others.push({
+              id: currentProject.id,
+              title: currentProject.name,
+              children: [],
+            })
+          }
+          return others
+        }, [])
+      this.projectsTree.splice(1,1, ...otherManagedProjects)
+    },
+    async addSets(project) {
+      await this.loadProjectSets({projectId: project.id, size: 0})
+      project.children = this.sets.map(s => ({ level: 1, ...s}))
+    },
     onPagination(pagination){
       this.loadProjectSets({ page: pagination.page, size: pagination.itemsPerPage});
     },
@@ -119,6 +162,13 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+  p {
+    margin: 0;
+    &.clickable:hover {
+      cursor: pointer;
+    }
+  }
 
 </style>

src/views/items/ItemViewer.vue

@@ -36,7 +36,7 @@
         <v-toolbar
           flat
         >
-          <v-toolbar-title>{{ $t('item.metadata') }}</v-toolbar-title>
+          <v-toolbar-title>{{ $t('item.tabs.Metadata') }}</v-toolbar-title>
           <v-spacer />
           <v-btn
             tile