add fetching post list

package-lock.json

@@ -8,6 +8,7 @@
       "name": "ulbi-vue",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.7.9",
         "core-js": "^3.8.3",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
@@ -3241,6 +3242,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3289,6 +3295,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.4.1.tgz",
@@ -3963,6 +3979,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -4774,6 +4801,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -5506,7 +5541,6 @@
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
       "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -5523,6 +5557,19 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -7046,7 +7093,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -7056,7 +7102,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -8633,6 +8678,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^1.7.9",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",

src/App.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="app">
     <h1>Страница постов</h1>
-    <my-button @click="showCreateDialog" class="createBtn">
+
-      Создать пост
+    <div class="app__btns">
-    </my-button>
+      <my-button @click="showCreateDialog" class="createBtn">
+        Создать пост
+      </my-button>
+
+      <my-select v-model="selectedSort" :options="sortOptions"/>
+    </div>
 
     <my-dialog v-model:show="dialogVisible">
       <post-form @createPost="createPost" />
     </my-dialog>
 
-    <post-list :posts="posts" @removePost="removePost" class="postList"/>
+    <div v-if="isPostLoading" style="margin-top: 15px">Loading...</div>
+    <post-list v-else :posts="sortedPost" @removePost="removePost" class="postList"/>
   </div>
 </template>
 
@@ -18,6 +24,7 @@ import PostForm from '@/components/PostForm.vue';
 import PostList from '@/components/PostList.vue';
 import MyDialog from '@/components/ui/Dialog.vue';
 import MyButton from '@/components/ui/Button.vue';
+import axios from 'axios';
 
 export default {
   components: {
@@ -28,12 +35,14 @@ export default {
   },
   data() {
     return {
-      posts: [
+      posts: [],
-        {id: 1, title: 'Javascript', body: 'Описание поста' },
-        {id: 2, title: 'Typescript', body: 'Описание поста' },
-        {id: 3, title: 'GO lang', body: 'Описание поста' },
-      ],
       dialogVisible: false,
+      isPostLoading: false,
+      selectedSort: '',
+      sortOptions: [
+        {value: 'title', name: 'По названию'},
+        {value: 'body', name: 'По описанию'}
+      ]
     }
   },
   methods: {
@@ -47,6 +56,40 @@ export default {
     showCreateDialog() {
       this.dialogVisible = true;
     },
+    async fetchPosts() {
+      try {
+        const {data} = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10');
+        this.posts = data
+      } catch (e) {
+        alert(e.message);
+      }
+    }
+  },
+  async mounted() {
+    this.isPostLoading = true;
+    await this.fetchPosts()
+    this.isPostLoading = false
+  },
+  computed: {
+    sortedPost() {
+      return [...this.posts].sort((post1, post2) => {
+        return post1?.[this.selectedSort]?.localeCompare(post2?.[this.selectedSort])
+      })
+    }
+  },
+  watch: {
+    // selectedSort(newValue) {
+    //   this.posts.sort((post1, post2) => {
+    //     return post1[newValue].localeCompare(post2[newValue])
+    //   })
+    // },
+    dialogVisible(newValue) {
+      if (newValue) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = 'auto';
+      }
+    }
   }
 }
 </script>
@@ -69,4 +112,10 @@ export default {
   .postList {
     margin-top: 15px;
   }
+
+  .app__btns {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 </style>

src/components/ui/Select.vue

@@ -0,0 +1,34 @@
+<template>
+  <select @change="changeOption">
+    <option disabled value="">Выберите из списка</option>
+
+    <option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+    >
+      {{option.name}}
+    </option>
+  </select>
+</template>
+
+<script>
+export default {
+  name: 'my-select',
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    changeOption(event) {
+      this.$emit('update:modelValue', event.target.value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/ui/index.js

@@ -1,9 +1,11 @@
 import Button from '@/components/ui/Button.vue';
 import Input from '@/components/ui/Input.vue';
 import Dialog from '@/components/ui/Dialog.vue';
+import Select from '@/components/ui/Select.vue';
 
 export default [
   Button,
   Input,
-  Dialog
+  Dialog,
+  Select
 ]