Последняя версия с сервера прошлого разработчика

resources/js/Pages/Settings/SettingsPurchases.vue

@@ -0,0 +1,96 @@
+<template>
+  <meta-head title="Покупки"></meta-head>
+
+  <div class="xl:container xl:mx-auto px-2 md:px-3">
+    <div class="mt-16 shadow-classic rounded-md bg-indigo-200">
+      <div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
+        <settings-menu />
+
+        <div class="col-span-4">
+          <div v-if="feedLists.length" class="m-4 lg:m-8 grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-2 lg:gap-4">
+            <InfinityScroll :node-element="lastNodeLement" :next-cursor="nextCursor"
+                            @fromPagination="putFromPagination"
+            >
+              <div v-for="feed in feedLists" :key="feed.id"
+                   :ref="el => { if (el && feed.id === lastElementID) lastNodeLement = el }"
+              >
+                <inertia-link :href="route('setting.show.purchases', feed.id)" class="block contain relative overflow-hidden">
+                  <feed-header-misc :count="1" :type="feed.type" />
+                  <div>
+                    <feed-preview class="w-full h-36 md:h-72 object-cover" :type="feed.type"
+                                  :source="feed.preview"
+                    />
+                  </div>
+                  <p class="mt-2 text-gray-light text-sm">
+                    Цена: {{ feed.price }}
+                  </p>
+                  <p class="mt-2 text-gray-light text-sm">
+                    Дата покупки: {{ feed.purchase_date }}
+                  </p>
+                </inertia-link>
+              </div>
+            </InfinityScroll>
+          </div>
+          <div v-else class="m-4 lg:m-8 text-lg text-gray-light">
+            Вы еще не совершали покупки
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+import Layout from '@/Shared/Layout.vue'
+import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
+import MetaHead from '@/Shared/MetaHead.vue'
+import FeedHeaderMisc from '@/Shared/Feed/HeaderMisc.vue'
+import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
+import InfinityScroll from '@/Shared/Misc/InfinityScroll.vue'
+
+export default {
+    components: {
+        MetaHead,
+        SettingsMenu,
+        FeedHeaderMisc,
+        FeedPreview,
+        InfinityScroll,
+    },
+    layout: Layout,
+    props: {
+        nextCursor: String,
+        feeds: Array,
+    },
+
+    setup() {
+        const containerRef = ref(null)
+        return {
+            lastNodeLement: containerRef,
+        }
+    },
+    data() {
+        return {
+            feedLists: [],
+        }
+    },
+
+    computed: {
+        lastElementID() {
+            return this.feedLists[this.feedLists.length - 1]?.id
+        },
+    },
+    mounted() {
+        this.feedLists = this.feeds
+    },
+
+    methods: {
+        putFromPagination(lists) {
+            for (let list of lists) {
+                this.feedLists.push(list)
+            }
+        },
+    },
+}
+</script>