From d21370eabb4d36fcdf5ab8e09cffa9251bffab27 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Mon, 30 Jan 2023 19:54:51 -0500
Subject: [PATCH] Replace Vuetity components in account/home

---
 assets/css/scss/atoms/_avatar.scss   | 27 ++++++++
 assets/css/scss/index.scss           |  1 +
 assets/vue/views/account/Home.vue    | 94 +++++++++++++++-------------
 tests/behat/features/profile.feature | 17 ++---
 4 files changed, 88 insertions(+), 51 deletions(-)
 create mode 100644 assets/css/scss/atoms/_avatar.scss

diff --git a/assets/css/scss/atoms/_avatar.scss b/assets/css/scss/atoms/_avatar.scss
new file mode 100644
index 0000000000..9bc9cc44b9
--- /dev/null
+++ b/assets/css/scss/atoms/_avatar.scss
@@ -0,0 +1,27 @@
+.p-avatar {
+  @apply rounded-md bg-gray-25;
+
+  &.p-avatar-lg {
+    @apply h-12 w-12;
+    font-size: 1.5rem;
+
+    .p-avatar-icon {
+      font-size: 1.5rem;
+    }
+  }
+
+  &.p-avatar-xl {
+    @apply h-16 w-16;
+    font-size: 2rem;
+
+    .p-avatar-icon {
+      font-size: 2rem;
+    }
+  }
+}
+
+.p-avatar-group {
+  .p-avatar {
+    @apply border border-solid border-white;
+  }
+}
diff --git a/assets/css/scss/index.scss b/assets/css/scss/index.scss
index 6bfb23ae45..94f5e5afba 100755
--- a/assets/css/scss/index.scss
+++ b/assets/css/scss/index.scss
@@ -13,6 +13,7 @@
 
 @import "settings/typography";
 
+@import "atoms/avatar";
 @import "atoms/buttons";
 @import "atoms/checkbox";
 @import "atoms/dropdown";
diff --git a/assets/vue/views/account/Home.vue b/assets/vue/views/account/Home.vue
index 1e78846c62..28645fc40c 100644
--- a/assets/vue/views/account/Home.vue
+++ b/assets/vue/views/account/Home.vue
@@ -1,47 +1,55 @@
 <template>
-  <v-card>
-
-    <q-item>
-      <q-item-section side>
-        <q-avatar size="64px">
-          <img :src="user.illustrationUrl + '?w=80&h=80&fit=crop'" />
-        </q-avatar>
-      </q-item-section>
-      <q-item-section>
-        <q-item-label>{{ user.fullName }}</q-item-label>
-        <q-item-label caption>{{ user.username }}</q-item-label>
-      </q-item-section>
-    </q-item>
-
-    <q-tabs align="left" dense inline-label no-caps>
-      <q-route-tab to="/resources/friends" label="My friends" />
-      <q-route-tab to="/resources/personal_files" label="My files" />
-    </q-tabs>
-
-    <a href="/account/edit" class="btn btn--primary">
-      Edit profile
-    </a>
-  </v-card>
+  <div id="account-home">
+    <div class="flex mb-4">
+      <Avatar
+        :image="user.illustrationUrl + '?w=80&h=80&fit=crop'"
+        shape="circle"
+        size="large"
+        class="flex-none mr-2"
+      />
+      <div class="flex-1">
+        <p class="text-body-1">
+          {{ user.fullName }}
+        </p>
+        <p class="text-caption">
+          {{ user.username }}
+        </p>
+      </div>
+    </div>
+
+    <Button
+      class="p-button-sm mb-4"
+      label="Edit profile"
+      @click="btnEditProfileOnClick"
+    />
+
+    <p>
+      <router-link to="/resources/friends">
+        {{ t('My friends') }}
+      </router-link>
+    </p>
+    <p>
+      <router-link to="/resources/personal_files">
+        {{ t('My files') }}
+      </router-link>
+    </p>
+  </div>
 </template>
 
-<script>
-import { useRoute } from 'vue-router'
-import axios from "axios";
-import { ENTRYPOINT } from '../../config/entrypoint';
-import {computed, reactive, ref, toRefs} from 'vue'
-import {mapGetters, useStore} from "vuex";
-
-export default {
-  name: 'Home',
-  components: {
-  },
-  setup() {
-    const state = reactive({user: []});
-    const store = useStore();
-    state.user = computed(() => store.getters['security/getUser']);
-    state.isAuthenticated = computed(() => store.getters['security/isAuthenticated']);
-
-    return toRefs(state);
-  },
-};
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+import Avatar from 'primevue/avatar';
+import { useI18n } from 'vue-i18n';
+
+const store = useStore();
+
+const { t } = useI18n();
+
+const user = computed(() => store.getters['security/getUser']);
+
+function btnEditProfileOnClick () {
+  window.location = '/account/edit';
+}
 </script>
diff --git a/tests/behat/features/profile.feature b/tests/behat/features/profile.feature
index e0ae5b444c..3143f409de 100644
--- a/tests/behat/features/profile.feature
+++ b/tests/behat/features/profile.feature
@@ -6,16 +6,17 @@ Feature: Profile page
 
   Scenario: Change user first name with Andrew then restore to Andrea
     Given I am on "/account/home"
-    Then I should see "Profile"
-    Then I follow "Edit profile"
-    Then I fill in the following:
+    And I press "Edit profile"
+    And I wait for the page to be loaded
+    And I fill in the following:
       | profile_firstname | Andrew |
     And I press "update_profile"
-    And wait for the page to be loaded
-    And I should see "Andrew Doe"
-    Then I follow "Edit profile"
-    Then I fill in the following:
+    And I wait for the page to be loaded
+    Then I should see "Andrew Doe"
+    And I press "Edit profile"
+    And I wait for the page to be loaded
+    And I fill in the following:
       | profile_firstname | Andrea |
     And I press "update_profile"
     And wait for the page to be loaded
-    And I should see "Andrea Doe"
+    Then I should see "Andrea Doe"