fix(front): [WIP] privacy_level slider on manageUploads - correct Vue syntax for 2-way binding `computed`; support `undefined` value

front/src/components/ui/Slider.vue

@@ -39,6 +39,7 @@ onMounted(() => {
   <Layout
     stack
     no-gap
+    :class="$style.slider"
     :style="`
       --step-size: calc(100% / ${keys.length + 2});
       --slider-width: calc(var(--step-size) * ${keys.length - 1} + 16px);
@@ -120,6 +121,7 @@ onMounted(() => {
 </template>
 
 <style module lang="scss">
+.slider {
   .label {
     margin-top: -18px;
     padding-bottom: 8px;
@@ -175,5 +177,12 @@ onMounted(() => {
     background-color: var(--focus-ring-color);
     outline: 2px solid currentcolor;
   }
+  &[disabled] .pin {
+    display: none;
+  }
+  &[disabled] * {
+    pointer-events: none;
+  }
+}
 
 </style>

front/src/views/auth/ManageUploads.vue

@@ -106,23 +106,39 @@ const options = {
 
 // Model for use in global slider `privacy_level`
 const globalPrivacyLevel = computed<PrivacyLevel | undefined>({
-  get: () =>
-    selectedItems.value.map(({ privacy_level }) =>
-      privacy_level as 'me' | 'instance' | 'everyone' | undefined
-    ).reduce((acc, item) =>
-      acc === item
-      ? acc
-      : undefined
-    ),
-  set: function (level) {
-    items.value
-      = items.value.map(item => ({
-        ...item,
-        privacy_level:
-          level === undefined || !item.selected
-            ? item.privacy_level
-            : level
-      }))
+  get () {
+    return selectedItems.value.length === 0
+      ? undefined
+      : selectedItems.value.map(({ privacy_level }) => privacy_level)
+        .reduce((acc, item) =>
+          acc === item
+          ? acc
+          : undefined
+        )
+    },
+  set (level) {
+    if (level === undefined) return
+
+    const changes = []
+
+    for (const [index, item] of items.value.entries()) {
+      if (!item.selected || item.privacy_level === level)
+        break;
+
+      changes.push({
+        uuid: item.uuid,
+        privacy_level: level
+      })
+
+      items.value[index].privacy_level = level
+    }
+
+    // Note: This will never set privacy_level to undefined.
+    // privacy_level as undefined is only a workaround for items in legacy libraries.
+    axios.patch<paths['/api/v2/uploads/bulk_update/']['patch']['responses']['200']['content']['application/json']>(
+      'uploads/bulk_update/',
+      { params: changes }
+    )
   }
 })
 
@@ -303,6 +319,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
 
       <Slider
         v-model="globalPrivacyLevel"
+        :disabled="selectedItems.length === 0"
         :options="options"
         :label="`Privacy level (${ selectedItems.length } items)`"
       />
@@ -412,7 +429,10 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
 
       <Pill
         :title="t('components.manage.library.UploadsTable.table.upload.header.privacyLevel')"
-        @click="addSearchToken('privacy_level', item.privacy_level)"
+        v-bind="item.privacy_level
+          ? { onClick: () => addSearchToken('privacy_level', item.privacy_level as PrivacyLevel) }
+          : { disabled: true }
+        "
       >
         {{ item.privacy_level }}
       </Pill>