Page: Refactor pages list in home

assets/vue/components/page/PageCard.vue

@@ -1,54 +1,44 @@
 <template>
-  <q-card
-    v-if="page"
-    elevation="4"
-  >
-    <q-card-section>
-      <div class="text-h6">
-        {{ page.title }}
+  <BaseCard plain>
+    <template #header>
+      <div class="-mb-2 flex items-center justify-between gap-2 bg-gray-15 px-4 py-2">
+        <h6 v-text="page.title" />
+        <BaseButton
+          v-if="isAdmin"
+          icon="edit"
+          label="Edit"
+          type="black"
+          @click="handleClick(page)"
+        />
       </div>
-    </q-card-section>
+    </template>
 
-    <q-card-section>
-      <p v-html="page.content" />
-    </q-card-section>
-
-    <q-card-actions v-if="isAdmin">
-      <q-btn
-        v-close-popup
-        flat
-        label="Edit"
-        color="primary"
-        @click="handleClick(page)"
-      />
-    </q-card-actions>
-  </q-card>
+    <div v-html="page.content" />
+  </BaseCard>
 </template>
 
-<script>
+<script setup>
+import { useRouter } from "vue-router"
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
+import BaseCard from "../basecomponents/BaseCard.vue"
+import BaseButton from "../basecomponents/BaseButton.vue"
 
-import {mapGetters} from "vuex";
-import {useRouter} from "vue-router";
-import {reactive, toRefs} from "vue";
+const router = useRouter()
+const securityStore = useSecurityStore()
+const { isAdmin } = storeToRefs(securityStore)
 
-export default {
-  name: 'PageCard',
-  props: {
-    page: Object,
-  },
-  setup() {
-    const router = useRouter();
-    const state = reactive({
-      handleClick: function (page) {
-        router.push({name: 'PageUpdate', query: {id: page['@id']}});
-      },
-    });
-    return toRefs(state);
+defineProps({
+  page: {
+    type: Object,
+    required: true,
   },
-  computed: {
-    ...mapGetters({
-      'isAdmin': 'security/isAdmin',
-    }),
-  }
-};
-</script>
+})
+
+const handleClick = (page) => {
+  router.push({
+    name: "PageUpdate",
+    query: { id: page["@id"] },
+  })
+}
+</script>

assets/vue/components/page/PageCardList.vue

@@ -1,23 +1,34 @@
 <template>
   <div
-    v-for="page in pages"
-    :key="page.id"
+    v-if="pages.length"
+    class="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-2"
   >
     <PageCard
+      v-for="page in pages"
+      :key="page.id"
       :page="page"
     />
   </div>
 </template>
 
 <script setup>
-import PageCard from './PageCard.vue';
+import PageCard from "./PageCard.vue"
+import pageService from "../../services/page"
+import { useI18n } from "vue-i18n"
+import { ref } from "vue"
 
-defineProps({
-  pages: {
-    type: Array,
-    default () {
-      return [];
-    }
-  },
-});
-</script>
+const { locale } = useI18n()
+
+const pages = ref([])
+
+pageService
+  .findAll({
+    params : {
+      "category.title": "home",
+      enabled: "1",
+      locale: locale.value,
+    },
+  })
+  .then(response => response.json())
+  .then(json => pages.value = json["hydra:member"])
+</script>

assets/vue/pages/Home.vue

@@ -1,25 +1,20 @@
 <template>
-  <div v-if="announcements.length">
-    <SystemAnnouncementCardList :announcements="announcements" />
-  </div>
+  <div class="flex flex-col gap-4">
+    <div v-if="announcements.length">
+      <SystemAnnouncementCardList :announcements="announcements" />
+    </div>
 
-  <div v-if="pages.length" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-2 mt-2">
-    <PageCardList :pages="pages" />
+    <PageCardList />
   </div>
 </template>
 
 <script setup>
 import axios from "axios";
 import { ref } from "vue";
-import { useStore } from "vuex";
-import { useI18n } from "vue-i18n";
 import PageCardList from "../components/page/PageCardList";
 import SystemAnnouncementCardList from "../components/systemannouncement/SystemAnnouncementCardList";
 
-const store = useStore();
-
 const announcements = ref([]);
-const pages = ref([]);
 
 axios
   .get("/news/list")
@@ -31,16 +26,4 @@ axios
   .catch(function (error) {
     console.log(error);
   });
-
-const { locale } = useI18n();
-
-store
-  .dispatch("page/findAll", {
-    "category.title": "home",
-    enabled: "1",
-    locale: locale.value,
-  })
-  .then((response) => {
-    pages.value = response;
-  });
 </script>