update accounts ui to use new table-component

accounts/ui/components/accounts/AccountsList.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <oc-table middle divider>
-      <oc-table-group>
-        <oc-table-row class="fix-table-header">
-          <oc-table-cell shrink type="head" class="uk-text-center">
+    <oc-table-simple>
+      <oc-thead>
+        <oc-tr class="fix-table-header">
+          <oc-th shrink type="head" alignH="center">
             <oc-checkbox
               class="oc-ml-s"
               :value="areAllAccountsSelected"
@@ -11,23 +11,23 @@
               :label="$gettext('Select all users')"
               hide-label
             />
-          </oc-table-cell>
-          <oc-table-cell shrink type="head" />
-          <oc-table-cell type="head" v-text="$gettext('Username')" />
-          <oc-table-cell type="head" v-text="$gettext('Display name')" />
-          <oc-table-cell type="head" v-text="$gettext('Email')" />
-          <oc-table-cell type="head" v-text="$gettext('Role')" />
-          <oc-table-cell shrink type="head" v-text="$gettext('Activated')" />
-        </oc-table-row>
-      </oc-table-group>
-      <oc-table-group>
+          </oc-th>
+          <oc-th shrink type="head" />
+          <oc-th type="head" v-text="$gettext('Username')" />
+          <oc-th type="head" v-text="$gettext('Display name')" />
+          <oc-th type="head" v-text="$gettext('Email')" />
+          <oc-th type="head" v-text="$gettext('Role')" />
+          <oc-th shrink type="head" v-text="$gettext('Activated')" alignH="center"/>
+        </oc-tr>
+      </oc-thead>
+      <oc-tbody>
         <accounts-list-row
           v-for="account in accounts"
           :key="`account-list-row-${account.id}`"
           :account="account"
         />
-      </oc-table-group>
-    </oc-table>
+      </oc-tbody>
+    </oc-table-simple>
   </div>
 </template>
 

accounts/ui/components/accounts/AccountsListRow.vue

@@ -1,6 +1,6 @@
 <template>
-  <oc-table-row>
-    <oc-table-cell>
+  <oc-tr>
+    <oc-td alignH="center">
       <oc-checkbox
         class="oc-ml-s"
         size="large"
@@ -10,14 +10,14 @@
         :label="selectAccountLabel"
         hide-label
       />
-    </oc-table-cell>
-    <oc-table-cell>
+    </oc-td>
+    <oc-td>
       <avatar :user-name="account.displayName || account.onPremisesSamAccountName" :userid="account.id" :width="35" />
-    </oc-table-cell>
-    <oc-table-cell v-text="account.onPremisesSamAccountName" />
-    <oc-table-cell v-text="account.displayName || '-'" />
-    <oc-table-cell v-text="account.mail" />
-    <oc-table-cell>
+    </oc-td>
+    <oc-td v-text="account.onPremisesSamAccountName" />
+    <oc-td v-text="account.displayName || '-'" />
+    <oc-td v-text="account.mail" />
+    <oc-td>
       <oc-button :id="`accounts-roles-select-trigger-${account.id}`" class="accounts-roles-select-trigger" variation="raw">
         <span class="uk-flex uk-flex-middle accounts-roles-current-role">
           {{ currentRole ? currentRole.displayName : $gettext('Select role') }}
@@ -43,8 +43,8 @@
           </li>
         </ul>
       </oc-drop>
-    </oc-table-cell>
-    <oc-table-cell class="uk-text-center">
+    </oc-td>
+    <oc-td alignH="center">
       <oc-icon
         v-if="account.accountEnabled"
         key="account-icon-enabled"
@@ -61,8 +61,8 @@
         :aria-label="$gettext('Account is blocked')"
         class="accounts-status-indicator-disabled"
       />
-    </oc-table-cell>
-  </oc-table-row>
+    </oc-td>
+  </oc-tr>
 </template>
 
 <script>

accounts/ui/components/accounts/Avatar.vue

@@ -67,9 +67,9 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['getToken']),
+    ...mapGetters(['getToken', 'configuration']),
     enabled: function () {
-      return this.$root.config.enableAvatars || true
+      return this.configuration.enableAvatars || true
     }
   },
   watch: {
@@ -97,7 +97,7 @@ export default {
         return
       }
       const headers = new Headers()
-      const instance = this.$root.config.server || window.location.origin
+      const instance = this.configuration.server || window.location.origin
       const url = instance + '/remote.php/dav/avatars/' + this.userid + '/128.png'
       headers.append('Authorization', 'Bearer ' + this.getToken)
       headers.append('X-Requested-With', 'XMLHttpRequest')

changelog/unreleased/accounts-table.md

@@ -0,0 +1,8 @@
+Enhancement: Make use of new design-system oc-table
+
+Tags: ui, accounts
+
+The design-system table component has changed the way it's used.
+We updated accounts-ui to use the new 'oc-table-simple' component.  
+
+https://github.com/owncloud/ocis/pull/1597