From 4947174a6e67cf5e96baa907ea011254bbe0d089 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 16 Aug 2023 21:11:37 +0200
Subject: [PATCH] Ease use of disabled in OcTable & show status icon for
 processing items  (#9585)

---
 .../enhancement-indicate-processig-state      |  1 +
 .../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  | 32 ++++++++++++++---
 .../src/components/OcTable/OcTable.vue        | 18 ++++------
 .../src/components/OcTile/OcTile.vue          | 36 ++++++++++++++++---
 .../components/FilesList/ResourceTable.vue    | 18 ----------
 .../Shares/Collaborators/EditDropdown.vue     |  2 +-
 10 files changed, 72 insertions(+), 39 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/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
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 c232dcf2d20..d065688b5b2 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"
@@ -17,12 +17,12 @@
         height="40"
       />
       <oc-resource-icon v-else :resource="resource">
-        <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>
-      <span v-if="hasThumbnail && resource.locked" class="oc-resource-thumbnail-status-badge">
-        <oc-icon name="lock" size="xsmall" />
+      <span v-if="showStatusIcon && hasThumbnail" 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 +210,28 @@ export default defineComponent({
 
     thumbnail() {
       return this.resource.thumbnail
+    },
+
+    showStatusIcon() {
+      return this.resource.locked || this.resource.processing
+    },
+
+    statusIconAttrs() {
+      if (this.resource.locked) {
+        return {
+          name: 'lock',
+          fillType: 'fill'
+        }
+      }
+
+      if (this.resource.processing) {
+        return {
+          name: 'loop-right',
+          fillType: 'line'
+        }
+      }
+
+      return {}
     }
   },
 
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index a731c4e98d2..575db07281a 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 ids of disabled data items. Empty array for no disabled items.
      */
     disabled: {
-      type: [String, Array],
-      default: null
+      type: Array as PropType<Array<string | number>>,
+      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.indexOf(item[this.idKey]) > -1
     },
 
     cellKey(field, index, item) {
@@ -655,7 +651,7 @@ export default defineComponent({
       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">
+      :disabled="['8468c9f0-5057-11eb-924b-934c6fd827a2']" :sticky="true">
       <template #footer>
         3 resources
       </template>
@@ -702,7 +698,7 @@ export default defineComponent({
       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">
+      :disabled="['8468c9f0-5057-11eb-924b-934c6fd827a2']" :sticky="true">
       <template #footer>
         3 resources
       </template>
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>
 
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 29242369702..1d390aadc00 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -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
@@ -459,16 +451,6 @@ 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)
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')" />