Shared asset library

src/App.vue

@@ -1064,7 +1064,7 @@ input.input:focus {
   background: #67be4b;
 }
 
-input[type='checkbox'] {
+input[type='checkbox']:not([disabled]) {
   cursor: pointer;
 }
 

src/components/layouts/PageLayout.vue

@@ -3,14 +3,21 @@
     <div class="column main-column">
       <slot name="main" />
     </div>
-    <div class="column side-column">
+    <div class="column side-column" v-if="side">
       <slot name="side" />
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'page-layout'
+  name: 'page-layout',
+
+  props: {
+    side: {
+      type: Boolean,
+      default: true
+    }
+  }
 }
 </script>

src/components/lists/AssetList.vue

@@ -228,9 +228,12 @@
 
           <tr
             class="datatable-row"
+            :class="{
+              canceled: asset.canceled,
+              shared: asset.shared
+            }"
             scope="row"
-            :key="'row' + asset.id"
-            :class="{ canceled: asset.canceled }"
+            :key="`row${asset.id}`"
             v-for="(asset, i) in group"
           >
             <th
@@ -245,6 +248,7 @@
                   type="checkbox"
                   class="flexrow-item"
                   :checked="selectedAssets.has(asset.id)"
+                  :disabled="asset.shared"
                   @input="event => toggleLine(asset, event)"
                   v-show="isCurrentUserManager"
                 />
@@ -424,7 +428,7 @@
               @edit-clicked="$emit('edit-clicked', asset)"
               @delete-clicked="$emit('delete-clicked', asset)"
               @restore-clicked="$emit('restore-clicked', asset)"
-              v-if="isCurrentUserManager"
+              v-if="isCurrentUserManager && !asset.shared"
             />
             <td class="actions" v-else></td>
           </tr>
@@ -713,6 +717,9 @@ export default {
 
     // Selectable if the task type is included in the workflow.
     isSelectable(asset, columnId) {
+      if (asset.shared) {
+        return false
+      }
       const key = asset.asset_type_id + columnId
       if (this.isSelectableMap === undefined) this.isSelectableMap = {}
       if (this.isSelectableMap[key] === undefined) {
@@ -985,6 +992,18 @@ td.ready-for {
   flex: 1;
 }
 
+.datatable-row.shared {
+  > th,
+  > td {
+    opacity: 0.6;
+    background: color-mix(
+      in srgb,
+      var(--shared-color) 20%,
+      transparent
+    ) !important;
+  }
+}
+
 .datatable-row th.name {
   font-size: 1.1em;
   padding: 6px;

src/components/modals/EditAssetModal.vue

@@ -49,6 +49,11 @@
             v-for="descriptor in assetMetadataDescriptors"
             v-if="assetToEdit"
           />
+          <combobox-boolean
+            :label="$t('assets.fields.shared')"
+            v-model="form.is_shared"
+            @enter="runConfirmation"
+          />
         </form>
 
         <div class="has-text-right">
@@ -96,6 +101,7 @@ import { mapGetters } from 'vuex'
 import { modalMixin } from '@/components/modals/base_modal'
 
 import Combobox from '@/components/widgets/Combobox.vue'
+import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
@@ -107,6 +113,7 @@ export default {
 
   components: {
     Combobox,
+    ComboboxBoolean,
     MetadataField,
     TextField,
     TextareaField
@@ -149,7 +156,8 @@ export default {
         name: '',
         description: '',
         source_id: null,
-        data: {}
+        data: {},
+        is_shared: 'false'
       },
       assetSuccessText: ''
     }
@@ -206,11 +214,17 @@ export default {
     },
 
     confirmAndStayClicked() {
-      this.$emit('confirmAndStay', this.form)
+      this.$emit('confirmAndStay', {
+        ...this.form,
+        is_shared: this.form.is_shared === 'true'
+      })
     },
 
     confirmClicked() {
-      this.$emit('confirm', this.form)
+      this.$emit('confirm', {
+        ...this.form,
+        is_shared: this.form.is_shared === 'true'
+      })
     },
 
     isEditing() {
@@ -247,6 +261,7 @@ export default {
           ? this.currentEpisode.id
           : null
         this.form.data = {}
+        this.form.is_shared = 'false'
       } else {
         const entityTypeId = this.getEntityTypeIdDefaultValue()
         this.form = {
@@ -255,7 +270,8 @@ export default {
           name: this.assetToEdit.name,
           description: this.assetToEdit.description,
           source_id: this.assetToEdit.source_id || this.assetToEdit.episode_id,
-          data: { ...this.assetToEdit.data } || {}
+          data: { ...this.assetToEdit.data } || {},
+          is_shared: String(this.assetToEdit.is_shared === true)
         }
       }
     }