Merge remote-tracking branch 'origin/main' into Css&HomePage

src/views/main/HomeView.vue

@@ -340,35 +340,74 @@
       </div>
     </div>
 
+    <v-btn variant="outlined" @click="callBackend()">
+      Get items
+    </v-btn>
 
 
 
-  </v-app>
-  <FooterLayout></FooterLayout>
+    <v-snackbar v-model="errorNoAccessSnackBar">
+        Vous n'etes pas connecter !
+        <template v-slot:actions>
+            <v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
+              Fermer
+            </v-btn>
+            <v-btn color="green" variant="text" @click="goToLoginPage()">
+              Se connecter
+            </v-btn>
+        </template>
+    </v-snackbar>
+
+    <v-list lines="one">
+      <v-list-item
+        v-for="item in itemList"
+        :key="item"
+        :title="item.id"
+        :subtitle="item.title"
+      ></v-list-item>
+    </v-list>
+    <FooterLayout></FooterLayout>
+  </main>
 </template>
 
-<script setup>
+<script async setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import { useClient } from '@/plugins/clientPlugin';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import FooterLayout from '@/layouts/FooterLayout.vue';
 
 
+const router = useRouter()
+const client = useClient();
 
-</script>
+let itemList = ref([]);
+let errorNoAccessSnackBar = ref(false);
 
-<script>
-export default {
-  data: () => ({
-    overlays: [false, false, false],
-  }),
-  methods: {
-    showOverlay(index) {
+const showOverlay(index) {
       this.overlays[index] = true;
     },
     hideOverlay(index) {
       this.overlays[index] = false;
     },
-  },
+
+async function callBackend() {
+  try {
+    const response = await client.get('/api/TodoItems?ListId=1&PageNumber=1&PageSize=10');
+    const responseItems = response.data.items;
+    const orderedResponseItems = responseItems.sort((a, b) => a.id - b.id);
+    itemList.value = orderedResponseItems
+
+  } catch (error) {
+    errorNoAccessSnackBar.value = true;
+  }
 }
+
+const goToLoginPage = () => {
+  router.push('/login');
+}
+
+
 </script>
 
 <style src="../../cssstyle/index.css"></style>