Reflect status in buttons

add more translations
fans4owncloud · Aug 14, 2019 · ed4fece · ed4fece
1 parent 1760e12
commit ed4fece
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 deletions.
diff --git a/apps/files/src/components/FileLink.vue b/apps/files/src/components/FileLink.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="oc-files-file-link">
     <FileLinkForm v-if="formOpen" v-bind:params="params" :linkId="linkId" />
-    <div class="uk-text-right">
-      <oc-button v-if="!formOpen" variation="primary" icon="add" @click="$_openForm()" translate>Add Link</oc-button>
+    <div class="uk-text-right" v-if="!formOpen">
+      <oc-button v-if="!linksLoading" variation="primary" icon="add" @click="$_openForm()" v-translate>Add Link</oc-button>
+      <button v-else disabled class="uk-button uk-button-default uk-position-relative"><oc-spinner class="uk-position-small uk-position-center-left" size="small" /><span class="uk-margin-small-left" v-translate>Loading</span></button>
     </div>
-
-    <transition-group tag="ul" name="custom-classes-transition" enter-active-class="uk-animation-slide-left-medium" leave-active-class="uk-animation-slide-right-medium uk-animation-reverse" class="uk-list uk-list-divider">
+    <transition-group tag="ul" name="custom-classes-transition" enter-active-class="uk-animation-slide-left-medium" leave-active-class="uk-animation-slide-right-medium uk-animation-reverse" class="uk-list uk-list-divider uk-overflow-hidden">
       <li v-for="(link, index) in $_links" :key="'li-' + index">
         <oc-grid flex gutter="small">
           <div class="uk-width-auto">
@@ -14,7 +14,7 @@
           </div>
           <div class="uk-width-expand">
             <span class="uk-text-bold">{{ link.name }}</span><br>
-            <span class="uk-text-meta">{{ link.description }}<template v-if="link.expiration"> | Expires {{ formDateFromNow(link.expiration) }}</template></span>
+            <span class="uk-text-meta">{{ link.description }}<template v-if="link.expiration"> | <span v-translate>Expires</span> {{ formDateFromNow(link.expiration) }}</template></span>
           </div>
           <div class="uk-width-auto uk-button-group">
             <oc-button icon="edit" @click="$_editLink(link)"/>
@@ -23,7 +23,7 @@
         </oc-grid>
         <FileLinkForm v-if="linkId === link.id" class="uk-margin-top" v-bind:params="params" :context="'edit'" :linkId="linkId"/>
       </li>
-      </transition-group>
+    </transition-group>
   </div>
 </template>
 <script>

diff --git a/apps/files/src/components/FileLinkForm.vue b/apps/files/src/components/FileLinkForm.vue
@@ -79,10 +79,13 @@
         </template>
         -->
         <div class="uk-text-right">
-            <oc-button @click="$_closeForm">Cancel</oc-button>
-            <oc-button v-if="!sharesLoading && $_isNew" :disabled="!$_isValid" variation="primary" @click="$_addLink" v-translate>Create</oc-button>
-            <oc-button v-else-if="!sharesLoading && !$_isNew" :disabled="!$_isValid" variation="primary" @click="$_updateLink" v-translate>Save</oc-button>
-            <button v-if="sharesLoading" disabled class="uk-button uk-button-default" @click="$_addLink"><oc-spinner class="uk-position-small uk-position-center-left" size="small" /><span class="uk-margin-small-left" v-translate>Working</span></button>
+          <oc-button :disabled="linksLoading" @click="$_closeForm">Cancel</oc-button>
+          <oc-button v-if="!linksLoading && $_isNew" :disabled="!$_isValid" variation="primary" @click="$_addLink" v-translate>Create</oc-button>
+          <oc-button v-else-if="!linksLoading && !$_isNew" :disabled="!$_isValid" variation="primary" @click="$_updateLink" v-translate>Save</oc-button>
+          <button v-else disabled class="uk-button uk-button-default uk-position-relative"><oc-spinner class="uk-position-small uk-position-center-left" size="small" />
+            <span class="uk-margin-small-left" v-if="$_isNew" v-translate>Creating</span>
+            <span class="uk-margin-small-left" v-else v-translate>Saving</span>
+          </button>
         </div>
     </div>
 </template>
@@ -110,7 +113,7 @@ export default {
     return $gettext('Links')
   },
   computed: {
-    ...mapGetters('Files', ['highlightedFile', 'sharesLoading']),
+    ...mapGetters('Files', ['highlightedFile', 'linksLoading']),
     ...mapGetters(['getToken', 'capabilities']),
 
     $_isNew () {

diff --git a/apps/files/src/store/actions.js b/apps/files/src/store/actions.js
@@ -617,10 +617,8 @@ export default {
           }
         })
       })
-      .catch(error => {
-        context.commit('LINKS_ERROR', error.message)
-      })
-      .finally(context.commit('LINKS_LOADING', false))
+      .catch(e => context.commit('LINKS_ERROR', e.message))
+      .finally(() => context.commit('LINKS_LOADING', false))
   },
 
   purgeLinks (context) {
@@ -670,8 +668,13 @@ export default {
     })
   },
   removeLink (context, { id, client }) {
-    client.shares.deleteShare(id).then(() => {
-      context.commit('LINKS_REMOVE', id)
-    }).catch(e => console.log(e))
+    context.commit('LINKS_LOADING', true)
+    client.shares.deleteShare(id)
+      .then(() => {
+        context.commit('LINKS_REMOVE', id)
+        context.commit('LINKS_LOADING', false)
+      })
+      .catch(e => context.commit('LINKS_ERROR', e.message))
+      .finally(() => context.commit('LINKS_LOADING', false))
   }
 }