From c4bfda8bb3c7a3bb11eae41c5e2e2c2fff53fa79 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 16 Aug 2023 15:00:10 +0200
Subject: [PATCH 1/7] Ease use of disabled in OcTable

---
 .../src/components/OcResource/OcResource.vue  |  2 +-
 .../src/components/OcTable/OcTable.vue        | 37 +++++++++++--------
 .../components/FilesList/ResourceTable.vue    | 36 ++++--------------
 .../Shares/Collaborators/EditDropdown.vue     |  2 +-
 .../src/helpers/resource/functions.ts         |  2 +-
 5 files changed, 31 insertions(+), 48 deletions(-)

diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index c232dcf2d20..4d0358ace02 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -5,8 +5,8 @@
       :resource="resource"
       :is-resource-clickable="isResourceClickable"
       :folder-link="folderLink"
-      @click="emitClick"
       class="oc-resource-link"
+      @click="emitClick"
     >
       <oc-img
         v-if="hasThumbnail"
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index a731c4e98d2..608957ddd68 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -220,11 +220,11 @@ export default defineComponent({
       default: null
     },
     /**
-     * The ids of disabled data items. Null or an empty string/array for no disabled items.
+     * The array of disabled data items. Empty array for no disabled items.
      */
     disabled: {
-      type: [String, Array],
-      default: null
+      type: Array as PropType<any[]>,
+      default: () => []
     },
     /**
      * Top position of header used when the header is sticky in pixels
@@ -482,15 +482,11 @@ export default defineComponent({
       return this.highlighted === item[this.idKey]
     },
     isDisabled(item) {
-      if (!this.disabled) {
+      if (!this.disabled.length) {
         return false
       }
 
-      if (Array.isArray(this.disabled)) {
-        return this.disabled.indexOf(item[this.idKey]) > -1
-      }
-
-      return this.disabled === item[this.idKey]
+      return !!this.disabled.find((i) => i[this.idKey] === item[this.idKey])
     },
 
     cellKey(field, index, item) {
@@ -508,9 +504,7 @@ export default defineComponent({
     },
 
     getSortLabel(name) {
-      const label = this.$gettext('Sort by %{ name }')
-
-      return this.$gettextInterpolate(label, { name })
+      return this.$gettext('Sort by %{ name }', { name })
     },
 
     handleTrClick(field) {
@@ -654,8 +648,13 @@ export default defineComponent({
     <h3 class="oc-heading-divider">
       A simple table with plain field types
     </h3>
-    <oc-table :fields="fields" :data="data" highlighted="4b136c0a-5057-11eb-ac70-eba264112003"
-      disabled="8468c9f0-5057-11eb-924b-934c6fd827a2" :sticky="true">
+    <oc-table
+      :fields="fields"
+      :data="data"
+      highlighted="4b136c0a-5057-11eb-ac70-eba264112003"
+      :disabled="[{id: '8468c9f0-5057-11eb-924b-934c6fd827a2'}]"
+      :sticky="true"
+    >
       <template #footer>
         3 resources
       </template>
@@ -701,8 +700,14 @@ export default defineComponent({
     <h3 class="oc-heading-divider">
       A sortable table with plain field types
     </h3>
-    <oc-table @sort="handleSort" :sort-by="sortBy" :sort-dir="sortDir" :fields="fields" :data="data" highlighted="4b136c0a-5057-11eb-ac70-eba264112003"
-      disabled="8468c9f0-5057-11eb-924b-934c6fd827a2" :sticky="true">
+    <oc-table @sort="handleSort"
+              :sort-by="sortBy"
+              :sort-dir="sortDir"
+              :fields="fields"
+              :data="data"
+              highlighted="4b136c0a-5057-11eb-ac70-eba264112003"
+              :disabled="[{id: '8468c9f0-5057-11eb-924b-934c6fd827a2'}]"
+              :sticky="true">
       <template #footer>
         3 resources
       </template>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 29242369702..1363b24ee99 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -65,7 +65,7 @@
           :is-thumbnail-displayed="shouldDisplayThumbnails(item)"
           :is-icon-displayed="!$slots['image']"
           :is-extension-displayed="areFileExtensionsShown"
-          :is-resource-clickable="isResourceClickable(item.id)"
+          :is-resource-clickable="isResourceClickable(item)"
           :folder-link="folderLink(item)"
           :parent-folder-link="parentFolderLink(item)"
           :parent-folder-link-icon-additional-attributes="
@@ -209,7 +209,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, unref, ref, ComputedRef } from 'vue'
+import { defineComponent, PropType, computed, unref, ref } from 'vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { basename, dirname } from 'path'
 import { useWindowSize } from '@vueuse/core'
@@ -347,14 +347,6 @@ export default defineComponent({
       required: false,
       default: true
     },
-    /**
-     * The ids of disabled resources. Null or an empty string/array for no disabled resources.
-     */
-    disabled: {
-      type: [String, Array] as PropType<Array<Resource['id']>>,
-      required: false,
-      default: null
-    },
     /**
      * Sets the padding size for x axis
      * @values xsmall, small, medium, large, xlarge
@@ -458,22 +450,8 @@ export default defineComponent({
 
     const getTagToolTip = (text: string) => (text.length > 7 ? text : '')
 
-    const disabledResources: ComputedRef<Array<Resource['id']>> = computed(() => {
-      let disabled = props.disabled
-
-      if (disabled) {
-        if (!Array.isArray(disabled)) {
-          disabled = [disabled]
-        }
-
-        return disabled
-      }
-
-      return (
-        props.resources
-          ?.filter((resource) => resource.processing === true)
-          ?.map((resource) => resource.id) || []
-      )
+    const disabledResources = computed(() => {
+      return props.resources?.filter((resource) => resource.processing === true)
     })
 
     return {
@@ -904,7 +882,7 @@ export default defineComponent({
       }
       this.emitSelect(
         this.resources
-          .filter((resource) => !this.disabledResources.includes(resource.id))
+          .filter((resource) => !this.disabledResources.find((r) => r.id === resource.id))
           .map((resource) => resource.id)
       )
     },
@@ -917,12 +895,12 @@ export default defineComponent({
        */
       this.$emit('fileClick', { space, resources: [resource] })
     },
-    isResourceClickable(resourceId) {
+    isResourceClickable(resource) {
       if (!this.areResourcesClickable) {
         return false
       }
 
-      return !this.disabledResources.includes(resourceId)
+      return !this.disabledResources.find((r) => r.id === resource.id)
     },
     getResourceCheckboxLabel(resource) {
       if (resource.type === 'folder') {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index 74e38aa1ea0..1ada4887bf0 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -29,8 +29,8 @@
               >
                 <oc-icon name="calendar-event" fill-type="line" size="medium" variation="passive" />
                 <span
-                  class="oc-ml-s"
                   v-if="isExpirationDateSet"
+                  class="oc-ml-s"
                   v-text="$gettext('Edit expiration date')"
                 />
                 <span v-else v-text="$gettext('Set expiration date')" />
diff --git a/packages/web-client/src/helpers/resource/functions.ts b/packages/web-client/src/helpers/resource/functions.ts
index 84bb928a3d5..e5d7d1c1270 100644
--- a/packages/web-client/src/helpers/resource/functions.ts
+++ b/packages/web-client/src/helpers/resource/functions.ts
@@ -98,7 +98,7 @@ export function buildResource(resource): Resource {
     webDavPath: resource.name,
     type: isFolder ? 'folder' : resource.type,
     isFolder,
-    processing: resource.processing || false,
+    processing: !isFolder,
     mdate: resource.fileInfo[DavProperty.LastModifiedDate],
     size: isFolder
       ? resource.fileInfo[DavProperty.ContentSize]

From abfea4154ddb358f61390d88a9858ed3a07a3715 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 16 Aug 2023 15:18:53 +0200
Subject: [PATCH 2/7] Add statusIcon

---
 .../src/assets/icons/loop-left-fill.svg       |  1 +
 .../src/assets/icons/loop-left-line.svg       |  1 +
 .../src/assets/icons/loop-right-fill.svg      |  1 +
 .../src/assets/icons/loop-right-line.svg      |  1 +
 .../src/components/OcResource/OcResource.vue  | 29 ++++++++++++++++---
 5 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 packages/design-system/src/assets/icons/loop-left-fill.svg
 create mode 100644 packages/design-system/src/assets/icons/loop-left-line.svg
 create mode 100644 packages/design-system/src/assets/icons/loop-right-fill.svg
 create mode 100644 packages/design-system/src/assets/icons/loop-right-line.svg

diff --git a/packages/design-system/src/assets/icons/loop-left-fill.svg b/packages/design-system/src/assets/icons/loop-left-fill.svg
new file mode 100644
index 00000000000..c37f9ee7593
--- /dev/null
+++ b/packages/design-system/src/assets/icons/loop-left-fill.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4C9.4095 4 7.10606 5.23053 5.64274 7.14274L8 9.5H2V3.5L4.21863 5.71863C6.05061 3.452 8.85558 2 12 2 17.5228 2 22 6.47715 22 12H20C20 7.58172 16.4183 4 12 4ZM4 12C4 16.4183 7.58172 20 12 20 14.5905 20 16.894 18.7695 18.3573 16.8573L16 14.5 22 14.5V20.5L19.7814 18.2814C17.9494 20.548 15.1444 22 12 22 6.47715 22 2 17.5228 2 12H4Z"/></svg>
\ No newline at end of file
diff --git a/packages/design-system/src/assets/icons/loop-left-line.svg b/packages/design-system/src/assets/icons/loop-left-line.svg
new file mode 100644
index 00000000000..b6cbc51401a
--- /dev/null
+++ b/packages/design-system/src/assets/icons/loop-left-line.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4C9.25144 4 6.82508 5.38626 5.38443 7.5H8V9.5H2V3.5H4V5.99936C5.82381 3.57166 8.72764 2 12 2C17.5228 2 22 6.47715 22 12H20C20 7.58172 16.4183 4 12 4ZM4 12C4 16.4183 7.58172 20 12 20C14.7486 20 17.1749 18.6137 18.6156 16.5H16V14.5H22V20.5H20V18.0006C18.1762 20.4283 15.2724 22 12 22C6.47715 22 2 17.5228 2 12H4Z"/></svg>
\ No newline at end of file
diff --git a/packages/design-system/src/assets/icons/loop-right-fill.svg b/packages/design-system/src/assets/icons/loop-right-fill.svg
new file mode 100644
index 00000000000..2ad3c637436
--- /dev/null
+++ b/packages/design-system/src/assets/icons/loop-right-fill.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4C14.5905 4 16.8939 5.23053 18.3573 7.14274L16 9.5H22V3.5L19.7814 5.71863C17.9494 3.452 15.1444 2 12 2 6.47715 2 2 6.47715 2 12H4C4 7.58172 7.58172 4 12 4ZM20 12C20 16.4183 16.4183 20 12 20 9.40951 20 7.10605 18.7695 5.64274 16.8573L8 14.5 2 14.5V20.5L4.21863 18.2814C6.05062 20.548 8.85557 22 12 22 17.5228 22 22 17.5228 22 12H20Z"/></svg>
\ No newline at end of file
diff --git a/packages/design-system/src/assets/icons/loop-right-line.svg b/packages/design-system/src/assets/icons/loop-right-line.svg
new file mode 100644
index 00000000000..88e75ec66df
--- /dev/null
+++ b/packages/design-system/src/assets/icons/loop-right-line.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4C14.7486 4 17.1749 5.38626 18.6156 7.5H16V9.5H22V3.5H20V5.99936C18.1762 3.57166 15.2724 2 12 2C6.47715 2 2 6.47715 2 12H4C4 7.58172 7.58172 4 12 4ZM20 12C20 16.4183 16.4183 20 12 20C9.25144 20 6.82508 18.6137 5.38443 16.5H8V14.5H2V20.5H4V18.0006C5.82381 20.4283 8.72764 22 12 22C17.5228 22 22 17.5228 22 12H20Z"/></svg>
\ No newline at end of file
diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index 4d0358ace02..8b723eae541 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -17,12 +17,15 @@
         height="40"
       />
       <oc-resource-icon v-else :resource="resource">
-        <template v-if="resource.locked" #status>
-          <oc-icon name="lock" size="xsmall" />
+        <template v-if="resource.locked || resource.processing" #status>
+          <oc-icon v-bind="statusIconAttrs" size="xsmall" />
         </template>
       </oc-resource-icon>
-      <span v-if="hasThumbnail && resource.locked" class="oc-resource-thumbnail-status-badge">
-        <oc-icon name="lock" size="xsmall" />
+      <span
+        v-if="hasThumbnail && (resource.locked || resource.processing)"
+        class="oc-resource-thumbnail-status-badge"
+      >
+        <oc-icon v-bind="statusIconAttrs" size="xsmall" />
       </span>
     </oc-resource-link>
     <div class="oc-resource-details oc-text-overflow" :class="{ 'oc-pl-s': isIconDisplayed }">
@@ -210,6 +213,24 @@ export default defineComponent({
 
     thumbnail() {
       return this.resource.thumbnail
+    },
+
+    statusIconAttrs() {
+      if (this.resource.locked) {
+        return {
+          name: 'lock',
+          fillType: 'fill'
+        }
+      }
+
+      if (this.resource.processing) {
+        return {
+          name: 'loop-right',
+          fillType: 'line'
+        }
+      }
+
+      return ''
     }
   },
 

From 7e16884d018d693228e3e9b82ceebae1036bf9b5 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 16 Aug 2023 15:27:49 +0200
Subject: [PATCH 3/7] Make conditions easier and show progessing in tiles view

---
 .../src/components/OcResource/OcResource.vue  | 13 +++----
 .../src/components/OcTile/OcTile.vue          | 36 ++++++++++++++++---
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index 8b723eae541..d065688b5b2 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -17,14 +17,11 @@
         height="40"
       />
       <oc-resource-icon v-else :resource="resource">
-        <template v-if="resource.locked || resource.processing" #status>
+        <template v-if="showStatusIcon" #status>
           <oc-icon v-bind="statusIconAttrs" size="xsmall" />
         </template>
       </oc-resource-icon>
-      <span
-        v-if="hasThumbnail && (resource.locked || resource.processing)"
-        class="oc-resource-thumbnail-status-badge"
-      >
+      <span v-if="showStatusIcon && hasThumbnail" class="oc-resource-thumbnail-status-badge">
         <oc-icon v-bind="statusIconAttrs" size="xsmall" />
       </span>
     </oc-resource-link>
@@ -215,6 +212,10 @@ export default defineComponent({
       return this.resource.thumbnail
     },
 
+    showStatusIcon() {
+      return this.resource.locked || this.resource.processing
+    },
+
     statusIconAttrs() {
       if (this.resource.locked) {
         return {
@@ -230,7 +231,7 @@ export default defineComponent({
         }
       }
 
-      return ''
+      return {}
     }
   },
 
diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index a20bc0996a1..83816ff7321 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -35,8 +35,8 @@
             :size="resourceIconSize"
             class="tile-default-image oc-pt-xs"
           >
-            <template v-if="resource.locked" #status>
-              <oc-icon name="lock" size="xsmall" />
+            <template v-if="showStatusIcon" #status>
+              <oc-icon v-bind="statusIconAttrs" size="xsmall" />
             </template>
           </oc-resource-icon>
         </slot>
@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 import { Resource } from 'web-client'
 
 import OcImg from '../OcImage/OcImage.vue'
@@ -117,7 +117,35 @@ export default defineComponent({
       }
     }
   },
-  emits: ['click', 'contextmenu']
+  emits: ['click', 'contextmenu'],
+  setup(props) {
+    const showStatusIcon = computed(() => {
+      return props.resource.locked || props.resource.processing
+    })
+
+    const statusIconAttrs = computed(() => {
+      if (props.resource.locked) {
+        return {
+          name: 'lock',
+          fillType: 'fill'
+        }
+      }
+
+      if (props.resource.processing) {
+        return {
+          name: 'loop-right',
+          fillType: 'line'
+        }
+      }
+
+      return {}
+    })
+
+    return {
+      statusIconAttrs,
+      showStatusIcon
+    }
+  }
 })
 </script>
 

From b6ac8066bb7346b3fa03d86fc545b178e867b641 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 16 Aug 2023 15:28:46 +0200
Subject: [PATCH 4/7] Enhance changelog item

---
 changelog/unreleased/enhancement-indicate-processig-state | 1 +
 1 file changed, 1 insertion(+)

diff --git a/changelog/unreleased/enhancement-indicate-processig-state b/changelog/unreleased/enhancement-indicate-processig-state
index e2ac6cddd23..2f171d17763 100644
--- a/changelog/unreleased/enhancement-indicate-processig-state
+++ b/changelog/unreleased/enhancement-indicate-processig-state
@@ -5,4 +5,5 @@ If so, no actions on this resource is possible, therefore we show now the proces
 the temporary restrictions clear to the user.
 
 https://github.com/owncloud/web/pull/9561
+https://github.com/owncloud/web/pull/9585
 https://github.com/owncloud/web/issues/9558

From 86c7217b823dbe8a945c43de35e7fb1ab64cf527 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 16 Aug 2023 15:51:13 +0200
Subject: [PATCH 5/7] Enhance prop desc

---
 packages/design-system/src/components/OcTable/OcTable.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index 608957ddd68..7a1288ccf55 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -221,6 +221,7 @@ export default defineComponent({
     },
     /**
      * The array of disabled data items. Empty array for no disabled items.
+     * Objects in array must contain a matching idKey property
      */
     disabled: {
       type: Array as PropType<any[]>,

From 32656bb96ffae2c25d9906dabb73ab827379ffcd Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 16 Aug 2023 16:22:09 +0200
Subject: [PATCH 6/7] Move back to disabled ids

---
 .../src/components/OcTable/OcTable.vue        | 30 +++++++------------
 .../components/FilesList/ResourceTable.vue    | 18 ++++++-----
 2 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index 7a1288ccf55..575db07281a 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -220,11 +220,10 @@ export default defineComponent({
       default: null
     },
     /**
-     * The array of disabled data items. Empty array for no disabled items.
-     * Objects in array must contain a matching idKey property
+     * The ids of disabled data items. Empty array for no disabled items.
      */
     disabled: {
-      type: Array as PropType<any[]>,
+      type: Array as PropType<Array<string | number>>,
       default: () => []
     },
     /**
@@ -487,7 +486,7 @@ export default defineComponent({
         return false
       }
 
-      return !!this.disabled.find((i) => i[this.idKey] === item[this.idKey])
+      return this.disabled.indexOf(item[this.idKey]) > -1
     },
 
     cellKey(field, index, item) {
@@ -505,7 +504,9 @@ export default defineComponent({
     },
 
     getSortLabel(name) {
-      return this.$gettext('Sort by %{ name }', { name })
+      const label = this.$gettext('Sort by %{ name }')
+
+      return this.$gettextInterpolate(label, { name })
     },
 
     handleTrClick(field) {
@@ -649,13 +650,8 @@ export default defineComponent({
     <h3 class="oc-heading-divider">
       A simple table with plain field types
     </h3>
-    <oc-table
-      :fields="fields"
-      :data="data"
-      highlighted="4b136c0a-5057-11eb-ac70-eba264112003"
-      :disabled="[{id: '8468c9f0-5057-11eb-924b-934c6fd827a2'}]"
-      :sticky="true"
-    >
+    <oc-table :fields="fields" :data="data" highlighted="4b136c0a-5057-11eb-ac70-eba264112003"
+      :disabled="['8468c9f0-5057-11eb-924b-934c6fd827a2']" :sticky="true">
       <template #footer>
         3 resources
       </template>
@@ -701,14 +697,8 @@ export default defineComponent({
     <h3 class="oc-heading-divider">
       A sortable table with plain field types
     </h3>
-    <oc-table @sort="handleSort"
-              :sort-by="sortBy"
-              :sort-dir="sortDir"
-              :fields="fields"
-              :data="data"
-              highlighted="4b136c0a-5057-11eb-ac70-eba264112003"
-              :disabled="[{id: '8468c9f0-5057-11eb-924b-934c6fd827a2'}]"
-              :sticky="true">
+    <oc-table @sort="handleSort" :sort-by="sortBy" :sort-dir="sortDir" :fields="fields" :data="data" highlighted="4b136c0a-5057-11eb-ac70-eba264112003"
+      :disabled="['8468c9f0-5057-11eb-924b-934c6fd827a2']" :sticky="true">
       <template #footer>
         3 resources
       </template>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 1363b24ee99..1d390aadc00 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -65,7 +65,7 @@
           :is-thumbnail-displayed="shouldDisplayThumbnails(item)"
           :is-icon-displayed="!$slots['image']"
           :is-extension-displayed="areFileExtensionsShown"
-          :is-resource-clickable="isResourceClickable(item)"
+          :is-resource-clickable="isResourceClickable(item.id)"
           :folder-link="folderLink(item)"
           :parent-folder-link="parentFolderLink(item)"
           :parent-folder-link-icon-additional-attributes="
@@ -209,7 +209,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, unref, ref } from 'vue'
+import { defineComponent, PropType, computed, unref, ref, ComputedRef } from 'vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { basename, dirname } from 'path'
 import { useWindowSize } from '@vueuse/core'
@@ -450,8 +450,12 @@ export default defineComponent({
 
     const getTagToolTip = (text: string) => (text.length > 7 ? text : '')
 
-    const disabledResources = computed(() => {
-      return props.resources?.filter((resource) => resource.processing === true)
+    const disabledResources: ComputedRef<Array<Resource['id']>> = computed(() => {
+      return (
+        props.resources
+          ?.filter((resource) => resource.processing === true)
+          ?.map((resource) => resource.id) || []
+      )
     })
 
     return {
@@ -882,7 +886,7 @@ export default defineComponent({
       }
       this.emitSelect(
         this.resources
-          .filter((resource) => !this.disabledResources.find((r) => r.id === resource.id))
+          .filter((resource) => !this.disabledResources.includes(resource.id))
           .map((resource) => resource.id)
       )
     },
@@ -895,12 +899,12 @@ export default defineComponent({
        */
       this.$emit('fileClick', { space, resources: [resource] })
     },
-    isResourceClickable(resource) {
+    isResourceClickable(resourceId) {
       if (!this.areResourcesClickable) {
         return false
       }
 
-      return !this.disabledResources.find((r) => r.id === resource.id)
+      return !this.disabledResources.includes(resourceId)
     },
     getResourceCheckboxLabel(resource) {
       if (resource.type === 'folder') {

From a3e4358f5b56790cfa15c32c24b9dd8d0875d504 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 16 Aug 2023 20:04:39 +0200
Subject: [PATCH 7/7] Update functions.ts

---
 packages/web-client/src/helpers/resource/functions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-client/src/helpers/resource/functions.ts b/packages/web-client/src/helpers/resource/functions.ts
index e5d7d1c1270..84bb928a3d5 100644
--- a/packages/web-client/src/helpers/resource/functions.ts
+++ b/packages/web-client/src/helpers/resource/functions.ts
@@ -98,7 +98,7 @@ export function buildResource(resource): Resource {
     webDavPath: resource.name,
     type: isFolder ? 'folder' : resource.type,
     isFolder,
-    processing: !isFolder,
+    processing: resource.processing || false,
     mdate: resource.fileInfo[DavProperty.LastModifiedDate],
     size: isFolder
       ? resource.fileInfo[DavProperty.ContentSize]