homepage update

Author: robuedi

README.md

@@ -1,18 +1,10 @@
 # properties-vue3
 
-This template should help get you started developing with Vue 3 in Vite.
+This project is the frontend side for the <a href="https://github.com/robuedi/properties-api">properties API app</a>
 
-## Recommended IDE Setup
+## Screenshot
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
+![Screenshot](/screenshot.png)
 
 ## Project Setup
 
@@ -25,37 +17,3 @@ npm install
 ```sh
 npm run dev
 ```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Run Unit Tests with [Vitest](https://vitest.dev/)
-
-```sh
-npm run test:unit
-```
-
-### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
-
-```sh
-npm run test:e2e:dev
-```
-
-This runs the end-to-end tests against the Vite development server.
-It is much faster than the production build.
-
-But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
-
-```sh
-npm run build
-npm run test:e2e
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```

components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     Chart: typeof import('primevue/chart')['default']
     Column: typeof import('primevue/column')['default']
     DataTable: typeof import('primevue/datatable')['default']
+    DataView: typeof import('primevue/dataview')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
@@ -24,14 +25,21 @@ declare module 'vue' {
     Menu: typeof import('primevue/menu')['default']
     Menubar: typeof import('primevue/menubar')['default']
     NotificationsWidget: typeof import('./src/components/dashboard/NotificationsWidget.vue')['default']
+    Paginator: typeof import('primevue/paginator')['default']
     Panel: typeof import('primevue/panel')['default']
     PropertiesList: typeof import('./src/components/properties/PropertiesList.vue')['default']
+    PropertItemListLoadingPlaceholder: typeof import('./src/components/properties/PropertItemListLoadingPlaceholder.vue')['default']
+    PropertyItemList: typeof import('./src/components/properties/PropertyItemList.vue')['default']
+    PropertyIten: typeof import('./src/components/properties/PropertyIten.vue')['default']
     RecentSalesWidget: typeof import('./src/components/dashboard/RecentSalesWidget.vue')['default']
     RevenueStreamWidget: typeof import('./src/components/dashboard/RevenueStreamWidget.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Select: typeof import('primevue/select')['default']
     SelectButton: typeof import('primevue/selectbutton')['default']
+    Skeleton: typeof import('primevue/skeleton')['default']
     StatsWidget: typeof import('./src/components/dashboard/StatsWidget.vue')['default']
+    Tag: typeof import('primevue/tag')['default']
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
     Toast: typeof import('primevue/toast')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']

index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="https://fonts.cdnfonts.com/css/lato" rel="stylesheet" />
-    <title>Vite App</title>
+    <title>Properties V3</title>
   </head>
   <body>
     <div id="app"></div>

public/img/house-placeholder.jpg

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  index?: number
+}>()
+</script>
+
+<template>
+  <div>
+    <div
+      class="flex flex-col xl:flex-row xl:items-start p-6 gap-6"
+      :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }"
+    >
+      <Skeleton class="!w-9/12 sm:!w-64 xl:!w-40 !h-24 mx-auto" />
+      <div
+        class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6"
+      >
+        <div class="flex flex-col items-center sm:items-start gap-4">
+          <Skeleton width="8rem" height="2rem" />
+          <Skeleton width="6rem" height="1rem" />
+
+          <div class="flex items-center gap-4">
+            <Skeleton width="6rem" height="1rem" />
+            <Skeleton width="3rem" height="1rem" />
+          </div>
+        </div>
+        <div class="flex sm:flex-col items-center sm:items-end gap-4 sm:gap-2">
+          <Skeleton width="4rem" height="2rem" />
+          <Skeleton size="3rem" shape="circle" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

screenshot.png

@@ -1,13 +1,104 @@
 <script setup lang="ts">
 import { usePropertyStore } from '@/stores/property.store'
+import Property from '@/models/Property'
+import Model from '@/models/Model'
+import PropertyItemList from '@/components/properties/PropertyItemList.vue'
+import PropertItemListLoadingPlaceholder from '@/components/properties/PropertItemListLoadingPlaceholder.vue'
+import { onMounted, ref, watch } from 'vue'
+
 //make the storee
 const propertyStore = usePropertyStore()
+const paginationLimit = ref(5)
+const paginationPage = ref(1)
+
+const sortKey = ref({ label: 'Newest', value: '-created_at' })
+const sortOrder = ref()
+const sortField = ref('-created_at')
+const sortOptions = ref([
+  { label: 'Newest', value: '-created_at' },
+  { label: 'Oldest', value: 'created_at' },
+])
+const onSortChange = (event) => {
+  const value = event.value.value
+  const sortValue = event.value
+
+  if (value.indexOf('!') === 0) {
+    sortOrder.value = -1
+    sortField.value = value.substring(1, value.length)
+    sortKey.value = sortValue
+  } else {
+    sortOrder.value = 1
+    sortField.value = value
+    sortKey.value = sortValue
+  }
+}
+
+//make data request
+const makeDataRequest = () => {
+  const properties = Property.select('id', 'name', 'price', 'created_at')
+    .include('address.city.country')
+    .limit(paginationLimit.value)
+    .page(paginationPage.value)
+    .orderBy(sortKey.value.value)
+
+  propertyStore.getAll(properties)
+}
+
+//reload on limit, page change
+watch([paginationLimit, paginationPage, sortKey], () => {
+  makeDataRequest()
+})
+
+const rowsChanged = function (rowsNumber: number) {
+  paginationLimit.value = rowsNumber
+}
+
+const pageStateChange = function (pageState: { page: number }) {
+  paginationPage.value = ++pageState.page
+}
+
+onMounted(() => {
+  makeDataRequest()
+})
 </script>
 
 <template>
-  <div>
-    <p v-for="property in propertyStore.properties" :key="property.id">
-      {{ property.name }}
-    </p>
+  <div class="card">
+    <DataView
+      :value="propertyStore.propertiesListing.data"
+      :sortOrder="sortOrder"
+      :sortField="sortField"
+    >
+      <template #header>
+        <Select
+          v-model="sortKey"
+          :options="sortOptions"
+          optionLabel="label"
+          placeholder="Sort By Date"
+          @change="onSortChange($event)"
+        />
+      </template>
+      <template #list="slotProps">
+        <div class="flex flex-col">
+          <template v-if="propertyStore.propertiesListing.apiState === Model.state.LOADING">
+            <PropertItemListLoadingPlaceholder v-for="i in paginationLimit" :key="i" :index="i" />
+          </template>
+          <PropertyItemList
+            v-else
+            v-for="(item, index) in slotProps.items"
+            :property="item"
+            :index="index"
+            :key="index"
+          />
+        </div>
+      </template>
+    </DataView>
+    <Paginator
+      @page="pageStateChange"
+      @update:rows="rowsChanged"
+      :rows="propertyStore.propertiesListing.meta.per_page"
+      :totalRecords="propertyStore.propertiesListing.meta.total"
+      :rowsPerPageOptions="[5, 10, 20, 30]"
+    ></Paginator>
   </div>
 </template>