Ease use of disabled in OcTable & show status icon for processing ite…

…ms (#9585)

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

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 {}
     }
   },
 

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>

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>
 

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)

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')" />